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

HTC Global Site
This stylesheet augments "styles.css" with new components as part of the 11/12 to 3/13 HTC (M7) product launch

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

/*--------------------------
	Index:
	1) Header Styles 
	2) footer Styles
	3) Global Button Styles 

*/

/**
 * 	1) Header Styles
 */

#header-nav-main {width: 768px!important;}

.header-localized-icon-container {
	position: relative;
	width: 200px;
	height: 70px;
	top: 15px;
	z-index: 1000;
	top: 40px;
	left: 685px;
	display: inline-block;
}
.header-localized-icon-container img {
    float: right;
}
#promo-container {
    margin: -2px 0 0;
}
#page-container
{
	padding: 0;
}
/* H1 logo fixes - Overriding Stylesheet from: styles/product-detail/htc.global.merged.css */

.product-detail h1#logo {
	padding:0;
}


/**
 * 	2) Footer Styles
 */
/* Footer Fixes - Overriding Stylesheet from: styles/styles.css */
#footer-nav-main li {
	line-height: 14px;
}


/**
 * 	3) Global Button Styles
 */

a.cms-green-button span,
a.cms-green-button:hover span,
a.cms-green-button:active span,
a.cms-green-button,
a.cms-green-button:hover,
a.cms-green-button:active{
    display: inline-block;
    float: none;
}
/* New Buttons */
a.green-button-type3 {
	display: inline-block;
	white-space: nowrap;
}
a.green-button-type3 span {
	background: url("/assets-desktop/images/quickstart/green-button-type3.png") no-repeat scroll top right transparent;
    color: #f8f8f8;
    display: inline-block;
    font: bold 16px/45px Arial,Helvetica,sans-serif;
    height: 47px;
    padding: 0 30px 0 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    text-transform: capitalize;
    vertical-align: middle;
}
a.green-button-type3 span.arrow {	
	background: url("/assets-desktop/images/quickstart/green-button-type3.png") no-repeat scroll 0 -52px transparent;
    margin-right: -4px;
    padding: 0;
    width: 39px;
}
a.green-button-type3:hover span {
	background-position: right -104px;
}
a.green-button-type3:hover span.arrow {
	background-position: left -156px;
}
a.green-button-type3.play-feature span.arrow{
	background: url("/assets-desktop/images/quickstart/green-button-type3-play.png") no-repeat scroll 0 -52px transparent;
}
a.green-button-type3.play-feature:hover span.arrow {
	background-position: left -156px;
}
a.green-button-type4 {
	display: table;
}
a.green-button-type4 strong {		
	background: url("/assets-desktop/images/quickstart/green-button-type4.png") no-repeat scroll right top transparent;
    color: #2D2D2D;
    display: table-cell;
    font: bold 17px/17px Arial,Helvetica,sans-serif;
    height: 77px;
    padding-right: 85px;
    text-align: right;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
a.green-button-type4:hover strong {
	background-position: bottom right;
}
a.green-button-type4.image-feature {
	position: relative;
}
a.green-button-type4.image-feature img {
	position: absolute;
	top: -94px;
	right: -188px;
	z-index: -10;
}
a.green-button-type4.image-feature strong {
	position: relative;
	z-index: 20;
}
a.green-button-type4.image-feature:hover strong {
	background-position: bottom right;
}

.green-button-type5 {
	background: url(/assets-desktop/images/quickstart/green-button-type5.png) no-repeat left -291px;
	display: inline-block;
	height: 47px;
	padding-left: 21px
}
.green-button-type5 > span {
	background: url(/assets-desktop/images/quickstart/green-button-type5.png) no-repeat right 0;
	color: #f8f8f8;
    display: inline-block;
    font: bold 16px/45px Arial,Helvetica,sans-serif;
    height: 47px;
    padding: 0 21px 0 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    text-transform: capitalize;
    vertical-align: middle;
}
.green-button-type5:hover {
	background-position: left -194px;
}
.green-button-type5:hover > span {
	background-position: right -97px;
}
.green-button-play {
	display: table;
	position: relative;
	cursor: pointer;
}
.green-button-play strong {		
	height: 65px;
	padding-left: 80px;	
	display: table-cell;
	font: 16px/20px Arial, Helvetica, sans-serif;
	white-space: nowrap;
	color: #fff;
	vertical-align: middle;
	background: url(/assets-desktop/images/quickstart/sprite-button-play.png) no-repeat top left;
	cursor: pointer;
	user-select: none;	
    -moz-user-select: none;
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
}
.green-button-play:hover strong {
	background-position: bottom left;
}
.green-button-play.image-feature img {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	cursor: pointer;
}
.green-button-play.image-feature strong {
	position: relative;
	z-index: 20;
}
.close-button {
	display: block;
	background: url("/assets-desktop/images/quickstart/close-button.png") no-repeat 0 -80px transparent;
	width: 27px; 
	height: 30px;
	text-indent: -1000px;
	overflow:hidden;
}  
.close-button:hover,
.close-button:active { 
	background-position: 0 0;
} 
/**
 * 	
 * 
 */

#homepage-outer-container #homepage-quickstart {
	background: url("/assets-desktop/images/quickstart/quickstart-bg-bottom.png") repeat-x scroll center bottom transparent;
	padding-bottom: 27px;
}

#homepage-outer-container {
  	background: url("/assets-desktop/images/quickstart/quickstart-bg.png") repeat-x scroll center -20px #F8F8F8;
	width:100%;
	margin: 0 auto;
}
.quickstart-content {
	width:1024px;
	margin: 0 auto;
	position: relative;
}
.quickstart-video-carousel-wrapper {
	position: relative;
}
.quickstart-title {
	margin: 0 auto;
    padding: 46px 0 22px;
}
.quickstart-title h2 {
	width: 800px;
	margin: 0 0 0 202px;
	color: #454545;
	font: bold 24px/40px Arial;
	text-transform: uppercase;
	line-height: 36px;
}
.quickstart-title h2 span {
	font-size: 15px;
	line-height: 31px;
	display: block;
}
.quickstart-title h2 img {
	display: inline-block;
	margin-right: 27px;
	float: left;
}
.quickstart-title h2 em {
	display: inline-block;
	margin: 16px 0 0 0;
	font-style: normal;
	line-height: 1em;
}
.carousel-prev {
	width: 29px;
	height: 53px;
	background: red;
	position: absolute;
	top: 381px;
}
.carousel-next {
	width: 29px;
	height: 53px;
	background: red;
	position: absolute;
	top: 381px;
	right: 0;
}
.quickstart-carousel {
	margin: 0 auto 20px;
    min-height: 36px;
    position: relative;
}
#homepage-outer-container .quickstart-features {
	position: relative;
	margin:0px auto;
}
.qsfb-two-columns {
	display: table;
}
.quickstart-features .quickstart-feature-block {
	/*display: table-cell;*/
	float: left;
	/*width: 460px;*/
	width: 453px;
	padding-left: 20px;
	padding-bottom: 70px;
	vertical-align: top;
	z-index: 1;
	position: relative;
	min-height: 310px;
}
.quickstart-features .quickstart-feature-block article {
	
}
.quickstart-features .separator {
	background-color: #E5E5E5;
    display: block;
    height: 102%;
    left: 50%;
    margin-left: -0.5px;
    position: absolute;
    top: -4px;
    width: 1px;
    z-index: 100;
}
.quickstart-feature-block > * {
	position: relative;
	z-index: 10;
}
.quickstart-feature-block h1,
.quickstart-feature-block h4 {
	font: bold 26px/28px Arial;
	color: #454545;
	margin: 20px 12px 0 0;
}
.quickstart-feature-block h1 > strong,
.quickstart-feature-block h4 > strong {
	color: #8fca40;
}
.quickstart-feature-block p {
	font: 15px/20px Arial;
	color: #454545;
	width: 252px;
	margin-top: 13px
}
.quickstart-feature-block .cta{
	bottom: 25px;
    margin: 0 0 0 -5px;
    position: absolute;
}
.quickstart-feature-block > img {
	position: absolute;
	z-index: 1;
}
.quickstart-feature-block .image1 {
	bottom: -5px;
	right: 0px;
}
.quickstart-feature-block .image2 {
	bottom: 0;
	right: -7px;
	
}

/**** Modules backgrpund ****/
.module-bg-sprite { 
	background: url(/assets-desktop/images/quickstart/module-bg-sprite.png) no-repeat 0 0;
}
span.module-bg-sprite {
	display: block;
	width: 978px;
	height: 16px;
	position: absolute;
	left: 0px;
}
.module-bg-sprite.top-bg {
	top: -16px;
}
.module-bg-sprite.bottom-bg {
	background-position: 0 bottom;
	bottom: -16px;
}
.module-bg-sprite.inner-bg {
	background-position: right top;
	background-repeat: repeat-y;
	padding: 0 15px;
    width: 947px;
}


/* Quickstart Carousel */
.quickstart-carousel {
	position: relative;
	height: 563px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*width: 626px;*/
}

.quickstart-youtube-video{
	display:none;
	position:absolute;
	z-index:1000;
	width:950px;
	height:534px;
	background-color: #000;
	margin-left: 37px;
}
.quickstart-youtube-video .close-button{
	position: absolute;
	right: 19px;
	top: 14px;
}
.carousel-mask {
	width: 948px;
	height: 100%;
	overflow: hidden;
	position: relative;
	left: 0px;
}
.carousel-mask.shadows-on .carousel-light {
	display: block;
}
.carousel-mask .carousel-light {
	display: none;
}
.carousel-light {
	position: absolute;
	top: 3px;
	z-index: 999;
	width: 156px;
	height: 533px;
	cursor: pointer;


}
.carousel-light-left {
	left: 0;
}
.carousel-light-left img {
	float: right;
}
.carousel-light-right {
	right: 0;
}
.carousel-wrapper {
	/*width: 632px;
	height: 529px;
	left: 50%;
	position: absolute;
	margin-left: -317px;*/
	height: 529px;
	/*width: 948px*/
	width: 1896px;
	left: 50%;
	position: absolute;
	margin-left: -948px;
}
.carousel-nav {
	display: none;
}

.carousel-wrapper * {
	outline: none;
}
.carousel-frame {
        
    position: relative;
    height: 529px;
}

.carousel-slider {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    height: 529px;
    /* Trigger hardware acceleration */
           -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
             -o-transform: translateZ(0);
        -webkit-transform: translateZ(0);
    transform:             translateZ(0);
}
.carousel-slide {
    float: left;
    margin: 0;
    padding: 0;
    height: 529px;
    width: 632px;
}
.carousel-slide article {
	padding: 3px 2px;
	width: 629px;
	height: 529px;
	border-left: 1px solid #E5E5E5;
	border-bottom: 1px solid #E5E5E5;
	border-right: 1px solid #E5E5E5;
}
.carousel-slide article .green-button-play strong{
	position: absolute;
	margin: 145px 0 0 280px;
	text-indent:-100000px;
}
.carousel-slide article .post-content {
	padding: 7px 13px;
}
.carousel-slide article h1 {
	font-size: 24px;
	color:#454545;
}
.carousel-slide article h1 strong {
	color: #7DBE32;
	line-height: 1.8em;
}
.carousel-slide article p {
	color: #454545;
	margin-bottom: 1em;
	font-size: 14px;
	line-height: 1.4em;
}
.carousel-slide article p a.play-now {
	background-position: 65px -62px;
	width: auto;
	height: 13px;
	padding-right: 17px;
	font-weight: bold;
}
.carousel-slide article p a.play-now:hover {
	background-position: 65px 2px;
	width: auto;
	height: 13px;
	padding-right: 17px;
}

/* Prev / next navigation */
.carousel-nav {
    margin: 0.5em 0;
    zoom: 1;
}
.carousel-nav:before,
.carousel-nav:after {
    content: "";
    display: table;
}
.carousel-nav:after {
    clear: both;
}
.carousel-nav span {
    cursor: pointer;
    float: left;
}
.carousel-nav .carousel-next {
    float: right;
}
.carousel-nav .state-disabled {
    color: #999;
    cursor: default;
    outline: none;
}

/* Counter ("slide x of y") */
.carousel-counter {
    margin: 0.5em 0;
}

/* Handles */
.carousel-handles {
    margin: 0.5em 0;
    text-align: center;
}
.carousel-handles .state-disabled {
    color: #999;
    cursor: default;
    outline: none;
}
.carousel-handles .state-current{
    color: #c30;
    cursor: default;
    outline: none;
    background-position:0 -187px; 
}

.carousel-handles .carousel-handle:hover {
    background-position:0 -187px; 
}

.carousel-handles {
	margin: 15px 0 0 0;
}

.carousel-handles a {
    cursor: pointer!important;
    margin: 0 0.5em;
	background: url('/assets-desktop/images/quickstart/carousel_sprite.png') 0 -126px no-repeat;
	color: #999;
	display: inline-block;
	margin: 0 0.25em;
	/* image replacement */
	text-indent: -10000px;
	white-space: nowrap;
	overflow: hidden;
	width: 11px;
	height: 11px;
}
/*.carousel-handles a:hover {
 	background-position:0 -187px;
}
.mobile .carousel-handles a:hover {
 	background: url('../images/carousel_sprite.png') 0 -126px no-repeat;
}*/
.carousel-handles .state-disabled {
	background: url('/assets-desktop/images/quickstart/carousel_sprite.png') 0 -126px no-repeat;
	color: #ccc;
	outline: none;
}
.carousel-handles .state-current {
	background: url('/assets-desktop/images/quickstart/carousel_sprite.png') 0 -187px no-repeat;
	color: #333;
	outline: none;
}


.c-sprite { 
	background: url("/assets-desktop/images/quickstart/carousel_sprite.png") no-repeat scroll 0 0 transparent;
}
.c-sprite.bullet-play{ 
	background-position: 0 -63px; 
	width: 8px; 
	height: 13px; 
}
.c-sprite.bullet-play:hover{ 
	background-position: 0 0;
} 
.c-sprite.carousel-pag{ 
	background-position: 0 -126px; 
	width: 11px; height: 11px; 
} 
.c-sprite.carousel-pag.selected{ 
	background-position: 0 -187px; 
} 
.c-sprite.next-arrow{ 
	background-position: 0 -248px; 
	width: 29px; 
	height: 53px; 
	position: absolute;
	top: 274px;
	right: -10px;
	/* image replacement */
	text-indent: -10000px;
	white-space: nowrap;
	overflow: hidden;
} 
.c-sprite.next-arrow:hover, .c-sprite.next-arrow.hovered { 
	background-position: 0 -351px; 
}
.mobile .c-sprite.next-arrow:hover, .mobile .c-sprite.next-arrow.hovered { 
	background-position: 0 -248px; 
}
.c-sprite.prev-arrow{ 
	background-position: 0 -455px; 
	width: 29px; 
	height: 53px; 
	position: absolute;
	top: 274px;
	left: -10px;
	/* image replacement */
	text-indent: -10000px;
	white-space: nowrap;
	overflow: hidden;
} 
.c-sprite.prev-arrow:hover, .c-sprite.prev-arrow.hovered { 
	background-position: 0 -558px; 
}
.mobile .c-sprite.prev-arrow:hover, .mobile .c-sprite.prev-arrow.hovered { 
	background-position: 0 -455px; 
}

.htc-greentext {
    color: #7DBE32;
}