/*
	CSS - Skype.com
	OVERLAYS
*/


/* GENERAL STYLES
----------------------------------------------------------------------------------------------------*/

body.ipadOverlayOn {
	position: fixed;
	width: 100%;
}

.hidden {
	display: none;
}

.strictHidden {
	display: none !important;
}

.overlay .deviceComponent {
	width: 840px;
}

#overlayWrapper .overlay .overlayComponent {
	width: 840px;
}

.overlay .overlayComponent .overview {
	width: 270px;
}

.overlay .deviceComponent .overview {
	width: 270px;
}

.overlay .deviceComponent .action {
	max-width: 270px;
}

.overlay .deviceComponent .hero {
	width: 560px;
	text-align: right;
	padding-top: 5px;
}

.overlay .overlayComponent .hero {
	width: 560px;
	text-align: right;
	padding-top: 57px;
}

body.overlayOn {
	overflow: hidden;
}

.overlayComponent {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	overflow: hidden;
	width: 960px;
}

	.overlayComponent .action {
		clear: left;
		width: 270px;
	}

		.rtl .overlayComponent .action {
			clear: right;
		}
	
	.overlayComponent .arrow {
		background-image: url("/i/scom/images/tabs/arrows.png");
		background-position: -37px 15px;
		display: block;
		height: 15px;
		left: 291px;
		position: absolute;
		top: 24px;
		width: 9px;
		z-index: 1001;
	}

		.rtl .overlayComponent .arrow {
			background-position: -46px 15px;
		}

	.overlayComponent .button img {
		padding-left: 10px;
	}
	
	.overlayComponent .hero {
		float: right;
		width: 540px;
		padding-top: 10px;
	}
	
	.overlayComponent.rightImage {
		overflow: hidden;
	}

	.overlayComponent.bottomImage .hero {
		float: none;
		width: 300px;
		height: 170px;
		vertical-align: middle;
		display: table-cell;
	}

	.overlayComponent.rightImage .hero {
		float: right;
		width: 210px;
		height: 210px;
		margin-right: 30px;
		text-align: center;
	}

		.overlayComponent .hero img {
			background-repeat: no-repeat;
		}

	.overlayComponent.bottomImage .overview {
		float: none;
		width: auto;
		margin-bottom: 18px;
	}

	.overlayComponent.rightImage .overview {
		float: left;
		width: 240px;
		margin-bottom: 18px;
	}

	.overlayComponent p:last-child {
		margin-bottom: 18px;
	}

	.overlayComponent .needHelp {
		padding-left: 0;
	}

	.overlayComponent .overview {
		width: 380px;
		margin-bottom: 18px;
	}

.overlay ol {
	padding-left: 30px;
}

	.overlay ol li,
	.overlay ul li {
		list-style-position: outside;
		font-size: 16px;
		line-height: 20px;
	}

#titleArea {
	float: none;
}

#overlayWrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1001;
	width: 100%;
	height: 100%;
	overflow: auto;
}

#overlayBackground {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: #e4eef2;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
	
}

	*:first-child+html #overlayWrapper {
		background-color: #e5eff3;
	}

	* html #overlayWrapper {
		background-color: #e5eff3;
	}

	#overlayWrapper .overlayContainer {
	    margin: auto;
	    max-width: 960px;
	    padding: 0 30px;
	    position: relative;
	    z-index: 1000;
	}

	#overlayWrapper .overlay {
		border: 2px solid #ffffff; 
		margin: 30px auto;
		background-color: #ffffff;
		position: relative;
		z-index: 1000;
	}

		#overlayWrapper .overlay.animate {
			-webkit-transition: top 0.5s ease-in-out;
			-moz-transition: top 0.5s ease-in-out;
			-o-transition: top 0.5s ease-in-out;
			transition: top 0.5s ease-in-out;
		}
	
	#overlayWrapper .inFocus {
		border: 2px solid #C0DCE6;
	}
	
	.instructions {
		position: absolute;
		left: -2000px;
	}

	html.rtl .instructions {
		left: auto;
		right: -2000px;
	}	
	
		.closeButton {
			background: none;
			border: none;
			cursor: pointer;
			height: 43px;
			margin: 0;
			overflow: visible;
			padding: 0;
			position: absolute;
			width: 43px;
			top: -22px;
			right: -22px;
		}
		
		.rtl .closeButton {
			left: -22px;
			right: auto;
		}
		
		.closeButton .closeCircle {
			background-color: #000000;
			border: 2px solid #000000;
			border-radius: 30px;
			height: 39px;
			left: 0;
			margin: 0;
			position: absolute;
			top: 0;
			width: 39px;
			-webkit-transition: all 0.05s cubic-bezier(0.86, 0, 0.07, 1);
			-moz-transition: all 0.05s cubic-bezier(0.86, 0, 0.07, 1);
			-ms-transition: all 0.05s cubic-bezier(0.86, 0, 0.07, 1);
			-o-transition: all 0.05s cubic-bezier(0.86, 0, 0.07, 1);
			transition: all 0.05s cubic-bezier(0.86, 0, 0.07, 1);
		}
		
		.closeButton:active .closeCircle,.closeButton:hover .closeCircle,.closeButton:focus .closeCircle
			{
			border: 4px solid #000000;
			height: 41px;
			margin: -3px 0 0 -3px;
			width: 41px;
		}
		
		.closeButton .closeIcon {
			display: block;
			height: 15px;
			left: 14px;
			overflow: hidden;
			position: absolute;
			top: 14px;
			width: 15px;
			*background: url('../assets/images/china/overlay-sprite.png') no-repeat;
		}
		
			.svg .closeButton .closeIcon {
				*background: url('../assets/images/china/overlay-sprite.svg') no-repeat;
			}
		
		.closeButton .closeIcon .overlaySprite:before {
			content: url('../assets/images/china/overlay-sprite.png');
			display: inline-block;
		}
		
		.svg .closeButton .closeIcon .overlaySprite:before {
			content: url('../assets/images/china/overlay-sprite.svg');
			display: inline-block;
			left: 0;
			position: absolute;
			top: 0;
			width: 15px !important;
			/* Width of SVG sprite, needed for IE to ensure SVG is correctly displayed. */
		}

		.rtl.svg .closeButton .closeIcon .overlaySprite:before {
			direction: ltr;
		}

		#overlayWrapper .overlay #overlayContent {
			padding: 0 13px 24px;
			overflow: hidden;
		}

			#overlayWrapper .overlay #overlayContent .contentBlock {
			    margin: 20px 15px 0;
			}

			#overlayWrapper .overlay #overlayContent.addMargin {
			    margin: 48px 45px 30px;
			}

		.overlay #tabArea {
			margin: 0;
		    position: absolute;
		    right: 30px;
		    top: 30px;
		    z-index: 1;
		}

		.overlayTabSet {
			display: table;
			float: right;
		    padding: 0;
		    width: 100%;
		}

			.rtl .overlayTabSet {
				right: auto;
				left: 60px;
			}

			.overlayTabSet .tab {
				/*max-width: 50%;
				min-width: 50%;*/
				border: 1px solid #ABC6D1;
				display: table-cell;
				padding: 1px;
				position: relative;
				text-align: center;
				vertical-align: middle;
				width: 50%;
				*width: 49%;
			}

			*:first-child+html .overlayTabSet .tab {
				position: relative;
				float: left;
			}

			* html .overlayTabSet .tab {
				position: relative;
				float: left;
			}

				#overlayContent .overlayTabSet .tab.open {
					display: table-cell;
				}

			.overlayTabSet a {
				display: block;
				min-height: 24px;
				/*padding: 9px 5px 9px;*/
				padding: 8px 4px;
				color: #444;
				font-size: 16px;
				line-height: 20px;
				text-decoration: none;
				cursor: pointer;
			}

			.overlayTabSet p {
				margin-bottom: 0;
			}

			.overlayTabSet .tab.open {
				border-color: #00aaf0;
				background-color: #00aaf0;
				color: #FFFFFF;
				cursor: default;
				padding: 1px;
			}

				.overlayTabSet .tab.open a {
					color: #FFFFFF;
					cursor: default;
					outline: none;
				}
				
				.overlayTabSet .tab:hover,
				.overlayTabSet .tab:focus {
					border: 2px solid #ABC6D1;
					padding: 0;
				}
				
					.overlayTabSet .tab.open:hover,
					.overlayTabSet .tab.open:focus {
						border-color: #00aaf0;
					}
				
				.overlayTabSet .tab.open .marker {
					background-image: url('../assets/images/china/overlay-sprite.png');
					background-repeat: no-repeat;
					background-position: 50% -20px;
					line-height: 6px;
					color: #00aaf0;
					display: block;
					height: 9px;
					marglist-style-positionin: 0 auto;
					line-height: 6px;
					overflow: hidden;
					position: absolute;
					width: 100%;
					letter-spacing: 1.5px;
					bottom: -9px;
				}

					/* Fix Firefox issue with Table-Cell and Absolute Widths */
					@-moz-document url-prefix() { 
						.overlayTabSet .tab.open .marker {
				    		width: 50%;
						}
					}
				
				.svg .overlayTabSet .tab.open .marker {
					background-image: url('../assets/images/china/overlay-sprite.svg');
					-webkit-background-size: 15px 37px;
					-o-background-size: 15px 37px;
					-moz-background-size: 15px 37px;
					background-size: 15px 37px;
				}
				
				.overlayTabSet .tab .marker {
					display: none;
				}
				
				*:first-child+html .overlayTabSet .tab.open .marker {
					/*left: 0;*/
					width: auto;
				}

				* html .overlayTabSet .tab.open .marker {
					/*left: 0;*/
					width: auto;
				}

.overlay .firstTab {
	padding: 0;
}

.overlay .firstTab .mediaGallery,
.overlay .secondTab .mediaGallery {
	padding-top: 30px;
}

.overlay .firstTab h1,
.overlay .secondTab h1 {
	float: none;
	max-width: 460px;
	margin-bottom: 28px;
}

.imageOverride .grid,
.firstTab.imageOverride .grid,
.secondTab.imageOverride .grid {
    float: right;
}

.firstTab .column,
.secondTab .column {
	background-color: transparent !important;
}

.secondTab {
	display: none;
}

.firstTab.open,
.secondTab.open {
	display: block;
}

.firstTab.hidden,
.secondTab.hidden {
	display: none;
}

.countriesDisclaimer {
	padding: 30px 0;
}

#overlayContent .open {
	display: block;
}

#overlayContent .noOverlay {
	display: none;
}

.inMobileOverlay {
	display: none;
}

body.hasScroll {
	padding-right: 16px;
}



/* AJAX OVERRIDES FOR DOWNLOAD OVERVIEW PAGES
----------------------------------------------------------------------------------------------------*/

.ajaxContent.contentWrapper {
	min-height: 400px;
}

.ajaxContent .contentBlock {
	margin: 0 !important;
	padding: 0 !important;
}

.ajaxContent .overlayTabSet {
	display: none !important;
}


.ajaxContent .mediaGallery {
    padding-top: 0 !important;
}



/* MEDIAQUERIES FOR MOBILE VIEW (<600px)
----------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 600px) {

	body.overlayOn {
		overflow: auto;
	}

	.overlayPageContentHiddenInMobile {
		display: none
	}

	.overlay .overlayComponent .overview {
		padding-top: 20px;
		margin-bottom: 28px;
	}

	.overlay .overlayComponent .overviewWithoutPadding {
		padding-top: 0;
	}

	.overlayComponent {
		width: 100%;
	}

		.overlayComponent .needHelp {
			clear: left;
			padding-top: 6px;
			padding-left: 20px;
			padding-right: 20px;
		}

	.overlayComponent.bottomImage,
	.overlayComponent.rightImage {
		height: 63px;
	}
		
		.overlayComponent .action {
			text-align: center;
		}
		
		.overlayComponent .overview,
		.overlayComponent .action {
			float: none;
			width: auto;
			padding-left: 20px;
			padding-right: 20px;
		}

		.overlay .overlayComponent .overview {
			width: auto;
		}

		.overlayComponent h2 {
			font-size: 24px;
		}

	.overlayComponent > a:last-child {
			display: block;
			position: relative;
			left: 0;
			top: 0;		 
			padding: 7px 0 7px 20px;
			min-height: 47px;
			background-color: white;
			border-bottom: 1px solid #CEDCE2;
			cursor: pointer;
			outline: medium none;
			overflow: hidden;
			text-align: left;
			text-decoration: none;
		}

		.overlayComponent .action a:not(.btn) {
			border-bottom: none;
		}
		
		.overlayComponent a img {
			float: left;
			position: relative;
			top: 0;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
		}


	.overlayComponent .deviceTitle {
		color: #000;
		display: block;
		float: none;
		padding: 22px 30px 0 14px;
		font-size: 14px;
		line-height: 16px;
		font-weight: 600;
		letter-spacing: -0.01em;
		overflow: hidden;
		position: relative;
		top: -6px;
	}

	.overlayComponent .arrow {
		width: 9px;
		height: 15px;
		top: 24px;
		left: 291px;
		display: block;
		background-position: -37px 15px;
		position: absolute;
		z-index: 1001;
		background-image: url('/i/scom/images/tabs/arrows.png');
	}

		.rtl .overlayComponent .arrow {
			background-position: -46px 15px;
		}

	.columnsComponent .column,
	.columnsComponent .column .component {
		margin-bottom: 0;
	}

		.columnsComponent .column:first-child .overlayComponent:first-child a {
			padding-top: 6px;
			border-top: 1px solid #CEDCE2;
		}

	.column .overlayComponent {
		width: 320px;
	}

	#overlayWrapper {
		position: absolute;
	}

	.overlay ol li, .overlay ul li {
		font-size: 14px;
		line-height: 16px;
	}

	#overlayWrapper .overlay {
		border: none;
	}

		#overlayWrapper .overlay img.closeButton {
			display: none;
		}

		#overlayWrapper .overlay a.closeLabel {
			display: block;
		}
		
	.overlay .firstTab .mediaGallery {
		padding-top: 0;
	}

	.secondTab {
		display: block;
		position: relative;
		left: 0;
		clear: both;
		background-color: #e7f1f5;
		border-bottom: 1px solid #CEDCE2;
		line-height: 14px;
	}

		.secondTab.hidden {
			display: none;
		}

		.secondTab.toggleableContent {
			padding: 20px 0;
		}

	#secondTabLink {
		height: 24px;
		width: auto;
		padding: 20px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		border-top: 1px solid #cedce2;
		border-bottom: 1px solid #cedce2;
	}

		#secondTabLink a {
			margin: -20px;
    		padding: 22px 20px 24px;
    		text-decoration: none;
		}

		#secondTabLink a span.arrow {
		  	display: block;
		  	height: 9px;
		  	overflow: hidden;
		  	position: absolute;
		  	right: 20px;
			top: 29px;
			vertical-align: top;
			width: 15px;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			*background: url('../assets/images/china/common-elements.png') no-repeat;
			*background-position: -2px -50px;
		}

			.svg #secondTabLink a span.arrow {
			    *background: url('../assets/images/china/common-elements.svg') no-repeat;
			}

				#secondTabLink.open a span.arrow {
				    *background-position: -40px -50px;
				}

			.svg #secondTabLink a span.arrow .arrowIcon:before {
				content: url('../assets/images/china/common-elements.svg');
				display: inline-block;
				position: absolute;
				width: 120px !important; /* Width of SVG sprite, needed for IE to ensure SVG is correctly displayed. */
			}

		  	#secondTabLink a span.arrow .arrowIcon:before {
		    	content: url('../assets/images/china/common-elements.png');
		    	display: inline-block;
		  		left: -2px;
			    top: -20px;
		  	}

			  	#secondTabLink.open a span.arrow .arrowIcon:before {
			  		left: -40px;
				    top: -20px;
			  	}




	.overlay .backLink {
		padding-top: 15px;
		padding-bottom: 12px;
	}

	.subsOverlay .overlay .backLink,
	.countriesOverlay .overlay .backLink {
		padding-right: 20px;
		padding-left: 20px;
	}

	.overlay .backLink a img {
		float: left;
	}

		.rtl .overlay .backLink a img {
			float: right;
		}

	.overlay .backLink a span {
		display: block;
		overflow: hidden;
		padding: 5px 0 5px 10px;
	}

		.rtl .overlay .backLink a span {
			padding: 5px 10px 5px 0;
		}

	#overlayContent .inMobileOverlay {
		display: block;
	}

	body.hasScroll {
		padding-right: 0;
	}

	.overlay .firstTab h1,
	.overlay .secondTab h1 {
		margin-bottom: 18px;
	}	

	.overlay .disclaimer {
		padding: 0 20px;
	}

	.overlay #imageArea .column {
		padding: 0;
	}

	.overlay #textArea .column {
	    padding-bottom: 8px;
	}

	.countriesDisclaimer {
		padding: 20px 0 0;
	}

}