/*

	CSS - Skype.com

	DOWNLOAD SECTIONS

*/





/* COMMON RULES

----------------------------------------------------------------------------------------------------*/



#deviceSection #deviceTitle {

	margin-top: 20px;

}



.deviceComponent .firstTab {

    min-height: 510px;

    overflow: hidden;

    padding-top: 30px;

}



.deviceComponent .firstTab p {

    margin-bottom: 18px;

}



.deviceComponent {

    margin-bottom: 0;

    margin-left: auto;

    margin-right: auto;

}



.deviceComponent .btn {

    clear: both;

    float: left;

}



.rtl .deviceComponent .btn {

    float: right;

}



.deviceComponent .action {

    clear: left;

    margin-bottom: 18px;

    max-width: 380px;

    padding-top: 10px;

}



.rtl .deviceComponent .action {

    clear: right;

}



.deviceComponent .action .btn {

    float: none;

}



.deviceComponent h1 {

    float: left;

    max-width: 420px;

}



.rtl .deviceComponent h1 {

    float: right;

}



.deviceComponent .button img {

    padding-left: 10px;

}



.deviceComponent .hero {

    float: right;

    padding-top: 10px;

    width: 540px;

}



.rtl .deviceComponent .hero {

    float: left;

}



.deviceComponent.rightImage {

    overflow: hidden;

}



.deviceComponent.bottomImage .hero {

    display: table-cell;

    float: none;

    height: 170px;

    vertical-align: middle;

    width: 300px;

}



.deviceComponent.rightImage .hero {

    float: right;

    margin-right: 30px;

    min-height: 210px;

    text-align: center;

    width: 210px;

}



.deviceComponent .hero img {

    background-repeat: no-repeat;

}



.deviceComponent.rightImage .hero img {

    max-width: 180px;

}



.deviceComponent.bottomImage .overview {

    float: none;

    margin-bottom: 18px;

    width: auto;

}



.deviceComponent.rightImage .overview {

    float: left;

    margin-bottom: 18px;

    width: 240px;

}



.overlay .deviceComponent .needHelp {

    padding-left: 0;

}



.overlay .deviceComponent .firstTab {

    padding-top: 0;

}



.deviceComponent .overview {

    float: left;

    width: 380px;

}



.rtl .deviceComponent .overview {

    float: right;

}



.deviceComponent .overview ul {

    list-style-image: url("../images/list-elem.png");

    margin-bottom: 8px;

}



.deviceComponent .overview ol li {

    list-style-position: outside;

    margin-left: 22px;

    padding-left: 8px;

}



.deviceComponent .overview ul li {

    font-size: 16px;

    margin-left: 22px;

    padding-left: 8px;

}



.rtl .deviceComponent .overview ol li, .rtl .deviceComponent .overview ul li {

    margin-left: 0;

    margin-right: 22px;

    padding-left: 0;

    padding-right: 8px;

}



.deviceTileComponent {

    position: relative;

}



.deviceTileComponent img {

    background-repeat: no-repeat;

    float: left;

    position: relative;

}



.rtl .deviceTileComponent img {

    float: right;

}



.deviceTileComponent .largeIcon {

    background-size: 96px auto;

    height: 96px;

    width: 96px;

}



.deviceTileComponent .mediumIcon {

    background-size: 48px auto;

    height: 48px;

    width: 48px;

}



.additionalInfoContainer {

    padding-left: 0;

}



.additionalInfoContainer .title-h3 {

    padding-bottom: 8px;

    padding-left: 68px;

    padding-top: 7px;

}



.rtl .additionalInfoContainer .title-h3 {

    padding-left: 0;

    padding-right: 68px;

}



.deviceTileComponent.imageLeft .additionalInfoContainer {

    margin-left: 120px;

    padding-left: 0;

}



.deviceTileComponent > p {

    margin-left: 120px;

    padding: 18px 0;

}



.deviceTileComponent.imageLeft > p {

    padding: 0;

}



.anotherVersion {

    clear: both;

    margin: 0 auto 30px;

    width: 960px;

}



.deviceTitle {

    font-size: 30px;

    line-height: 36px;

    margin-bottom: 10px;

}



.deviceReference .deviceGroup {

    margin-bottom: -30px;

    margin-top: 30px;

    position: relative;

    z-index: 1;

}



.column .deviceTitle {

    font-size: 24px;

    line-height: 30px;

    margin-bottom: 18px;

}



.column .deviceComponent .hero {

    float: none;

    padding: 0;

    width: auto;

}



.column .deviceComponent.rightImage .hero {

    float: right;

}



.rtl .column .deviceComponent.rightImage .hero {

    float: left;

}



.column .deviceComponent.rightImage .button {

    clear: left;

    float: left;

}



.column .deviceComponent .overview {

    float: none;

    padding-bottom: 20px;

    padding-right: 30px;

    padding-top: 20px;

    width: auto;

}



.rtl .column .deviceComponent .overview {

    padding-left: 30px;

    padding-right: 0;

}



.column .deviceComponent.rightImage .overview {

    float: left;

    margin-bottom: 18px;

    width: 240px;

}



.rtl .column .deviceComponent.rightImage .overview {

    float: right;

}



.textComponent .getBeta {

    margin-top: 50px;

}



.osSelector {

    display: inline-block;

    position: relative;

}



.osSelector .osDropdown.open, .osSelector .osDropdown:hover {

    border: 2px solid #BACAD0;

    margin: 0;

}



.osDropdown .distribution {

    color: #333534;

    float: left;

    font-size: 14px;

    font-weight: bold;

    line-height: 18px;

    padding-left: 12px;

    padding-top: 8px;

}



.osDropdown .pickDown {

    display: inline-block;

    float: right;

    height: 29px;

    margin-top: 7px;

    overflow: hidden;

    text-align: center;

    vertical-align: top;

    width: 36px;

}



.osDropdown .pickDown:before {

    content: url("../images/languages-pick-down.png");

    display: inline-block;

}





/* MEDIAQUERIES FOR MOBILE VIEW (<600px)

----------------------------------------------------------------------------------------------------*/



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



	#deviceSection {

    	padding: 0;

	}



		#deviceSection #deviceContent {

			border-top: 1px solid #CEDCE2;

			margin: 0;

		}



		#deviceSection #deviceContent .column {

			padding: 0;

		}



    .deviceComponent .firstTab {

        min-height: 0;

        padding-bottom: 22px;

        padding-top: 0;

    }



    .deviceComponent {

        width: 100%;

    }



    .deviceComponent h1, .deviceComponent p.title-h1 {

        float: none;

        padding-left: 20px;

        padding-right: 20px;

        width: 280px;

    }



    .deviceComponent .needHelp {

        clear: left;

        padding: 20px;

    }



    .deviceComponent.bottomImage, .deviceComponent.rightImage {

        min-height: 63px;

    }



    .deviceComponent .overview, .deviceComponent .action {

        float: none;

        padding-left: 20px;

        padding-right: 20px;

        width: auto;

    }



    .deviceComponent .action {

        margin-bottom: 40px !important;

        margin-left: auto;

        margin-right: auto;

        margin-top: 0;

    }



    .deviceComponent > a:last-child {

        background-color: #FFFFFF;

        border-bottom: 1px solid #CEDCE2;

        cursor: pointer;

        display: block;

        left: 0;

        min-height: 48px;

        outline: medium none;

        overflow: hidden;

        padding: 8px 20px;

        position: relative;

        text-decoration: none;

        top: 0;

    }



    .deviceComponent .action a:not(.btn) {

        border-bottom: medium none;

    }



    .deviceComponent a img {

        background-position: center center;

        background-repeat: no-repeat;

        background-size: 100% auto;

        float: left;

        position: relative;

        top: 0;

    }



    .rtl .deviceComponent a img {

        float: right;

    }



    .deviceComponent .deviceTitle {

        color: #000000;

        display: block;

        float: none;

        font-size: 14px;

        font-weight: 600;

        letter-spacing: -0.01em;

        line-height: 16px;

        overflow: hidden;

        padding: 22px 30px 0 14px;

        position: relative;

        top: -6px;

    }



    .rtl .deviceComponent .deviceTitle {

        padding: 22px 14px 0 30px;

    }



	.deviceComponent a span.arrow {

		display: block;

		overflow: hidden;

		position: absolute;

		top: 41%;

		right: 11px;

		height: 30px;

		width: 30px;

		*background: url('../images/features-sprite.png') no-repeat;

		*background-position: -2px -38px;

	}



		.svg .deviceComponent a span.arrow .arrowIcon:before {

			content: url('../other/features-sprite.svg');

			position: relative;

			left: -2px;

			top: -38px;

			width: 60px !important;

		}



		.deviceComponent a span.arrow .arrowIcon:before {

			content: url('../images/features-sprite.png');

		}



		.svg .deviceComponent a span.arrow {

			*background: url('../other/features-sprite.svg') no-repeat;

		}



			.rtl .deviceComponent a span.arrow {

				left: 11px;	

				right: auto;

				*background-position: 0px -60px;

			}



			.svg.rtl .deviceComponent a span.arrow .arrowIcon:before {

				direction: ltr;

				content: url('../other/features-sprite.svg');

				position: relative;

				left: 0px;

				top: -60px;

				width: 60px !important;

			}



    .deviceComponent .overview ul li {

        font-size: inherit;

    }



    .deviceComponent .downloadVideo {

        padding-left: 20px;

        padding-right: 20px;

    }



    .columnsComponent .column, .columnsComponent .column .component {

        margin-bottom: 0;

    }



    .columnsComponent .column:first-child .deviceComponent:first-child a {

        border-top: 1px solid #CEDCE2;

        padding-top: 6px;

    }



    .column .deviceComponent {

        margin-top: 0;

        padding: 0;

        width: 100%;

    }



    .getBeta p {

        display: inline-block;

        padding: 0 20px;

    }



    .deviceReference .deviceGroup {

        margin-bottom: 0;

        margin-top: 18px;

    }



    .column .deviceTitle {

        margin-bottom: 0;

        padding-right: 50px;

    }



    .anotherVersion {

        margin: 0;

    }



    html:not(.noMobileState) .osSelector .osDropdown {

        width: 280px;

    }



    html:not(.noMobileState) .osSelector .operationSystem {

        width: 284px;

    }



    #deviceTitle.backButton a {

		display: block;

		line-height: 28px;

		height: 28px;

		width: auto;

		margin: 0;

		overflow: visible;

		position: absolute;

		text-decoration: none;

		top: 2px;

	}



		#deviceTitle.backButton a .iconContainer {

			display: block;

			height: 28px;

			width: 28px;

			overflow: hidden;

			position: relative;

			*background-image: url('../images/hero-back-sprite-mobile.png') no-repeat;

		}



		.svg #deviceTitle.backButton a .iconContainer {

			*background: url('../other/hero-back-sprite-mobile.svg') no-repeat;

		}



		#deviceTitle.backButton a .iconSprite:before{

			content: url('../images/hero-back-sprite-mobile.png');

			position: relative;

			height: 28px;

			width: 28px;

			overflow: hidden;

			left: 0px;

			top: 0px;

		}



		.svg #deviceTitle.backButton a .iconSprite:before {

			content: url('../other/hero-back-sprite-mobile.svg');

			width: 56px !important;

		}



		#deviceTitle.backButton a:hover .iconSprite:before,

		#deviceTitle.backButton a:focus .iconSprite:before {

			position: relative;

			left: -28px;

		}



		#deviceTitle.backButton a:hover .iconContainer {

			*background-position: -28px 0;

		}



		#deviceTitle.backButton a span.noDesktop {

			display: inline !important;

		    left: 37px;

		    position: absolute;

		    top: 0;

		}



	#deviceTitle.backButton h1 {

		padding-left: 40px;

	}

}