﻿/*  /// HOME SLIDER STYLES */

.homeSliderWrap {
	padding-bottom: 50px;
	position: relative;
	overflow: hidden;
}

.homeSlider {
	position: relative;
}

.homeSlider .slide{
	position: relative;
	float: left;
}

.homeSlider .slide img {
	padding: 0 2% 0 0;
	position: relative;
	float: left;
	max-width: 38%;
}

.slideContent {
	float: left;
	width: 58%;
}

.homeSliderPagination {
	position: absolute;
	bottom: 20px;
	left: 75px;
}

.paginationIndicator {
	height: 25px;
	width: 25px;
	display: block;
	float: left;
	background: url(../images/home/pagination_indicator.png) no-repeat -24px 0;
}

.paginationIndicator.active {
	background: url(../images/home/pagination_indicator.png) no-repeat 0px 0px;
}

.contentSlide h2 a.red:hover {
	text-decoration: none;
	color: #CF5E56;
}

.contentSlide h2 a.green:hover {
	text-decoration: none;
	color: #8BC542;
}

.contentSlide h2 a.blue:hover {
	text-decoration: none;
	color: #25A7E9;
}

.contentSlide h2 a.purple:hover {
	text-decoration: none;
	color: #B35A92;
}

.greenSliderButton a {
	text-decoration: none;
	color: #FFFFFF;
	display: inline-block;
	padding: 4px 6px;
	background-color: #8BC542;
}

.greenSliderButton a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #25A7E9;
}

.blueSliderButton a {
	text-decoration: none;
	color: #FFFFFF;
	display: inline-block;
	padding: 4px 6px;
	background-color: #25A7E9;
}

.blueSliderButton a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #8BC542;
}

.redSliderButton a {
	text-decoration: none;
	color: #FFFFFF;
	display: inline-block;
	padding: 4px 6px;
	background-color: #CF5E56;
}

.redSliderButton a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #B35A92;
}

.purpleSliderButton a {
	text-decoration: none;
	color: #FFFFFF;
	display: inline-block;
	padding: 4px 6px;
	background-color: #B35A92;
}

.purpleSliderButton a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #CF5E56;
}

/* Best Sellers */

.bestSellersDescription {
	margin-bottom: 20px;
}

.pnlProducts {
	float: left;
	overflow: hidden;
	position: relative;
}

.sectionSlider {
	position: relative;
	left: 0;
	width: 1300px;
	text-align: center;
}

.sectionSlider div {
	display: block;
	padding: 0px;
	float: left;
	overflow: hidden;
}

.sectionSlider div img {
	display: block;
	margin: 0 auto;
}

a.bestSellerTitle {
	text-align: center;
}

.sectionSliderButtons {
	display: block;
	margin-top: 15px;
	float: left;
	width: 45px;
	height: 45px;
	cursor: pointer;
}

#btnRightScroll {
	background: url('../images/bestsellers_arrow_sprite.jpg') -52px 0 no-repeat;
}

#btnRightScroll:hover {
	background: url('../images/bestsellers_arrow_sprite.jpg') -52px -43px no-repeat;
}

#btnLeftScroll {
	background: url('../images/bestsellers_arrow_sprite.jpg') no-repeat;
}

#btnLeftScroll:hover {
	background: url('../images/bestsellers_arrow_sprite.jpg') 0px -43px no-repeat;
}

.sectionSlider div {
	display: block;
	padding: 0px;
	float: left;
	overflow: hidden;
}


/* styles for all browsers larger than 960px */
@media only screen and (min-width: 960px) {

	.sectionSlider div img {
		max-height: 80px;
	}

	.pnlProducts {
		width: 425px;
	}

	.sectionSlider div {
		margin: 18px;
		width: 106px;
	}

	.hideIt {
		display: none;
	}
}

/* styles for all browsers larger than 768px and smaller than 960px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.homeSliderLeft {
		width: 30%;
		min-width: 170px;
		height: auto;
		padding-bottom: 20px;
	}
	.homeSliderLeft img {
		width: 100%;
		position: relative;
	}
	.homeSliderRight {
		width: 55%;
		padding-left: 5%;
		position: relative;
		overflow: hidden;
		min-height: 175px;
		height: auto;
	}
	.homeSliderPagination {
		position: relative;
		height: 30px;
		left: inherit;
		bottom: inherit;
		padding: 20px;
		overflow: hidden;
	}


	.sectionSlider div img {
		max-height: 80px;
	}

	.pnlProducts {
		width: 80%;
	}

	.sectionSlider div {
		margin: 18px;
		width: 7%;
	}

}

/* styles for all browsers larger than 480px and smaller than 768px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.homeSliderLeft {
		width: 30%;
		min-width: 170px;
		height: auto;
	}
	.homeSliderLeft img {
		width: 100%;
		position: relative;
	}
	.homeSliderRight {
		width: 55%;
		padding-left: 5%;
		position: relative;
		overflow: hidden;
		min-height: 175px;
		height: auto;
	}
	.homeSliderPagination {
		position: relative;
		height: 30px;
		left: inherit;
		bottom: inherit;
		padding: 20px;
		overflow: hidden;
	}

	.sectionSlider div img {
		max-height: 80px;
	}

	.pnlProducts {
		width: 79%;
	}

	.sectionSlider div {
		margin: 18px;
		width: 106px;
	}



}


/* styles for all browsers larger than 320px and smaller than 480px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
	.homeSlider .slide img{
		width: 75%;
		float: none;
		clear: both;
		min-height: 50px;
		height: auto;
	}
	.slideContent {
		width: 90%;
		padding: 0px 5%;
		height: auto;
		float:none;
	}
	.homeSliderPagination {
		position: relative;
		height: 30px;
		left: inherit;
		bottom: inherit;
		padding: 20px;
		overflow: hidden;
	}


	.sectionSlider div img {
		max-height: 80px;
		max-width: 50px;
	}

	.pnlProducts {
		width: 65%;
	}

	.sectionSlider div {
		margin: 8px;
		width: 80px;
	}
}


/* styles for screens with a width of 320px or smaller */
/** For items with min-width, set it to 300px **/
@media only screen and (max-width: 319px) {
	.homeSliderLeft {
		width: 75%;
		float: none;
		clear: both;
		min-height: 50px;
		height: auto;
	}
	.homeSliderLeft img {
		width: 100%;
		position: relative;
	}
	.homeSliderRight {
		width: 90%;
		padding: 0px 5%;
		height: auto;
	}
	.homeSliderPagination {
		position: relative;
		height: 30px;
		left: inherit;
		bottom: inherit;
		padding: 20px;
		overflow: hidden;
	}
	.sectionSlider div img {
		max-height: 80px;
		max-width: 50px;
	}

	.pnlProducts {
		width: 65%;
	}

	.sectionSlider div {
		margin: 8px;
		width: 80px;
	}
}

