/*
	CSS - Skype.com
	CHINA CAROUSEL
*/


/* CAROUSEL LOADER (Required for IE6-IE8 to use Background-Size Polyfill)
----------------------------------------------------------------------------------------------------*/

section.carousel .carouselLoader {
	position: absolute;
}

	.ie6 section.carousel .carouselLoader,
	.ie7 section.carousel .carouselLoader,
	.ie8 section.carousel .carouselLoader {
		-ms-behavior: url(../js/backgroundsize.min.htc);
		behavior: url(../js/backgroundsize.min.htc);
	}


/* GENERIC RULES
----------------------------------------------------------------------------------------------------*/

section.carousel .column {
    margin: 0 -10px;
}

section.carousel .item {
	margin: 0 10px;
	min-height: 280px;
}

section.carousel .slide {
	position: relative;
	min-height: 280px;
}

	section.carousel .item .slide.white {
		background: #FFFFFF;
    }

	section.carousel .item .slide.fog {
		background: #E4EEF2;
    }

	section.carousel .item .slide.blue {
		background: #00AFF0;
    }

		section.carousel .item .slide.blue .text {
			color: #FFFFFF;
	    }

		section.carousel .item .slide.blue .text a {
			color: #FFFFFF;
	    }

	section.carousel .slide > a > .content h1,
	section.carousel .slide > a > .content h2,
	section.carousel .slide > a > .content h3,
	section.carousel .slide > a > .content h4,
	section.carousel .slide > a > .content h5,
	section.carousel .slide > a > .content p, {
		color: #333534;
		text-decoration: none;
    }

section.carousel .item .background {
    display: block;
    height: 100%;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

	section.carousel .item .background .image {
		display: block;
	    position: relative;
		height: 100%;
		width: 100%;
	    top: auto;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		-moz-background-size: cover;
	}

		.ie6 section.carousel .item .background .image,
		.ie7 section.carousel .item .background .image,
		.ie8 section.carousel .item .background .image {
			-ms-behavior: url(../js/backgroundsize.min.htc);
			behavior: url(../js/backgroundsize.min.htc);
		}

			.ie6 section.carousel .item .background .image.noBehaviour,
			.ie7 section.carousel .item .background .image.noBehaviour,
			.ie8 section.carousel .item .background .image.noBehaviour {
				-ms-behavior: none !important;
				behavior: none !important;
			}

			.ie6 section.carousel .item .background .image img,
			.ie7 section.carousel .item .background .image img,
			.ie8 section.carousel .item .background .image img {
				visibility: visible !important;
			}

		header section.carousel .item .background .image img {
			max-width: none !important;
		}

		section.carousel .item .background .image.top {
			background-position: center top;
		}

		section.carousel .item .background .image.center {
			background-position: center center;
		}

		section.carousel .item .background .image.bottom {
			background-position: center bottom;
		}

			.ie6 section.carousel .item .background .image.top,
			.ie6 section.carousel .item .background .image.center,
			.ie6 section.carousel .item .background .image.bottom,
			.ie7 section.carousel .item .background .image.top,
			.ie7 section.carousel .item .background .image.center,
			.ie7 section.carousel .item .background .image.bottom,
			.ie8 section.carousel .item .background .image.top,
			.ie8 section.carousel .item .background .image.center,
			.ie8 section.carousel .item .background .image.bottom {
				background-position: center;
			}

				.ie6 section.carousel .item .background .image.top img,
				.ie7 section.carousel .item .background .image.top img,
				.ie8 section.carousel .item .background .image.top img {
					top: 0 !important;
				}

				.ie6 section.carousel .item .background .image.bottom img,
				.ie7 section.carousel .item .background .image.bottom img,
				.ie8 section.carousel .item .background .image.bottom img {
					top: auto !important;
					bottom: 0 !important;
					margin-bottom: 0 !important;
				}

section.carousel .item .slide .content {
	background-color: transparent !important;
    color: #000000;
    display: block;
    left: 0;
    padding: 30px 0;
    position: relative;
    top: 0;
    width: 50%;
}

	section.carousel .item.textLeft .content .text {
	    padding-left: 30px;
	}

	section.carousel .item.textRight .content {
	    left: 50%;
	}

	section.carousel .item.textRight .content .text {
	    padding-right: 30px;
	}

section.carousel .customNavigation {
	text-align: center;
}

section.carousel .customNavigation a {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* NEWS TEMPLATE
----------------------------------------------------------------------------------------------------*/

section.templateNews.carousel .item {
	min-height: 240px;
}

section.templateNews.carousel .slide {
	min-height: 240px;
}

section.templateNews .contentBlock.carousel {
	margin: 0 0 10px;
}


/* MEDIA QUERIES FOR MOBILE VIEW (<600PX)
----------------------------------------------------------------------------------------------------*/
	
@media only screen and (max-width: 600px)  {

	section.carousel .item,
	section.templateNews.carousel .item {
		min-height: 180px;
    }

		section.carousel .slide,
		section.templateNews.carousel .slide {
			min-height: 180px;
			overflow: hidden;
	    }

	section.carousel .item .background {
		overflow: visible;
	    right: 55%;
	}

		section.carousel .item .background img {
			background-position: right center;
		    background-repeat: no-repeat;
			background-size: auto 100%;
		    float: right;
		    max-width: none;
		    position: relative;
		    top: auto;
		    height: 100%;
		    width: 100%;
		}

		section.carousel .item .background img.top,
		section.carousel .item .background img.center,
		section.carousel .item .background img.bottom {
		    background-position: right center;
		}

		section.carousel .item .background img.center,
		section.carousel .item .background img.center.normal {
		    background-position: center center;
			width: auto;
		}

		section.carousel .item .background img.center.small {
			width: 45%;
		}

	section.carousel .item .slide .content {
		left: 50%;
	    padding: 20px 0;
	}

		section.carousel .item .content .text,
		section.carousel .item.textLeft .content .text,
		section.carousel .item.textRight .content .text {
		    padding-left: 0;
		    padding-right: 20px;
		}

}
