.video-info .video-date, 
.video-info .video-share-title,
.video-playlist .video-release-date, 
.embed-but{
	font-family:'UniversLTW01-57Condense 723821', 'Arial Narrow', Arial, Helvetica, sans-serif;
}
.video-info .playlist-option, .video-playlist .video-item-title,.main-carousel-wrap .indicator {
	font-family:'UniversLTW01-67BoldCn', 'Arial Narrow', Arial, Helvetica, sans-serif;
}

.video-info .video-date i,
.video-info .video-share-title i,
.video-playlist .video-release-date i, 
.embed-but i {
	font-family:'UniversLTW01-57CondenseOb', 'Arial Narrow', Arial, Helvetica, sans-serif;
	font-style: normal;
}
.video-info .playlist-option i, 
.video-playlist .video-item-title i,
.main-carousel-wrap .indicator i {
	font-family: 'UniversLTW01-67BoldCnOb','Arial Narrow', Arial, Helvetica, sans-serif;
	font-style: normal;
}
/* =============================================================================
   Micro clearfix

   http://nicolasgallagher.com/micro-clearfix-hack/
   ========================================================================== */
.clearfix:before, .clearfix:after { 
  content: "";
  display: table;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* =============================================================================
   Overriding default styles

   Making the background dark and override the nav and footer styles to match.
   Sorry for the overspecific and id selectors here. It was this or !important.
   ========================================================================== */
.dark-background{
	background:#15171b;
}
.dark-background #main-nav ul li a.toplevel,
.dark-background #sub-nav ul li a.toplevel{
	border-color:transparent;
	color:#fff;
}
.dark-background #main-nav ul li.active a.toplevel{
	background:transparent url(/a/pgs/images/nav-bg-marker-1280-transparent.png) 50%  36px no-repeat;
}
.dark-background #sub-nav ul li.active a.toplevel{
	background:transparent url(/a/pgs/images/nav-bg-marker-1024-transparent.png) 50% 14px no-repeat;
}
.dark-background #learnMore{
	color:#7397c5;
}
.dark-background footer ul li a{
	color:#7397c5;
}
.dark-background footer p{
	color:#eee;
}

/* =============================================================================
   Page styles

   Styles related to the page layout
   ========================================================================== */
.video-index-wrapper{
	/* Here I used percentages to avoid the need of redefining the padding later 
	using media queries. Yay for saving a few bites. */
	padding:0 3%;
	position:relative;
}

.video-index-wrapper .header{
	background:url(/a/pgs/images/dotted-1px-3px.png) left bottom repeat-x;
	margin-bottom: 1.5em;
}

.video-index-wrapper .main-header{
	font-size:5.98em; /* Now that's a big header. */
	color:#fff;
	padding:0.25em 0 0.05em 0;
	margin:0 0.25em 0.25em 0;
	display: inline-block;
}

.video-index-wrapper .sub-header {
	text-transform: none;
	color: #fff;
	font: 1.25em/1.2em Arial, Helvetica, sans-serif;
	padding-bottom: 10px;
	display: inline-block;
}

.video-index-wrapper .sub-header a {
	color: #7397c5;
}
/* =============================================================================
   Player styles

   Styles for the player
   ========================================================================== */
.video-container{
	/* We need to position the video-info relative to this one. */
	position:relative;
	min-height:362px;
}

/* =============================================================================
   Video info

   Informations about the current playing video.
   ========================================================================== */
.video-info{
	position:absolute;
	/* Here I used percentages to avoid the need of redefining the width later 
	using media queries. Yay for saving a few bites. */
	width:25%;
	right:0;
	top:0;
	bottom:0;
	color:#fff;
}
.video-info .video-main-title{
	margin:-5px 0 0 0;
	padding:0;
	font-size:1.3em;
}
.video-info .video-date{
	font-size:1.3em;
	margin-top:5px;
	text-transform:uppercase;
	display:block;
}

.video-info .video-share-title{
	margin:0;
	padding:0;
	text-transform:uppercase;
	color:#fff;
	font-size:1em;
	float:left;
	margin-right:7px;
}
.video-info .video-description{
	padding:0;
	line-height:1.375em;
	/* The font-size is redeclared later for min-width:1230px using media queries. */
}
.video-info .playlist-options{
	/* We should always have this puppy at the bottom of .video-container. */
	position:absolute;
	bottom:0;
	left:0;
	right:0;
}
.video-info .playlist-option{
	font-size:1.1em;
	margin:0;
	line-height:1em;
	color:#8a9fb7;
	font-size: 1.167em;
	line-height: 1.5em;
	text-transform: uppercase;
}
.video-info .select-playlist-label{
	display:block;
	margin-bottom: 7px;
}
.video-info .continuous-play-option{
	padding-top:0.6em;
	line-height:21px;
}
.video-info .continous-play-label{
	float:left;
	padding-top:13px;
}

/* =============================================================================
   Override custom select

   We have a different style for the customSelect used to change playlist
   ========================================================================== */
.dark-dropdown.customSelect{
	margin-bottom: 0;
	width:auto;
	background: #282c34;
	border:none;
	height:42px;
    display: block;
}
.dark-dropdown.customSelect.closed,
.dark-dropdown.customSelect.open{
	margin: 0;
	border:none;
	top:auto;
	left:auto;
}
.dark-dropdown.customSelect ul,
.dark-dropdown.customSelect li{
	/* This width is overrriden in media queries. */
	/* It's required so IE7 won't blow up */
	width:226px;
}
.dark-dropdown.customSelect ul a{
	width:auto;
	color:#fff;
	font-size:14px;
	line-height:14px;
	padding:14px 13px;
}
.dark-dropdown.customSelect.open ul{
	background: #282c34;
	top:auto;
}
.dark-dropdown.customSelect.open li {
	padding-left: 0;
}
.dark-dropdown.customSelect li.selected {
	height:42px;
}
.dark-dropdown.customSelect ul .selected a {
    background-image:url(/a/pgs/images/select-chevron-padded.png);
    background-position: right 40%;
}
.dark-dropdown.customSelect ul .selected a:hover,
.dark-dropdown.customSelect ul .selected a:focus {
	background-position: 96% 53%;
}
.dark-dropdown.customSelect.open ul{
	padding-bottom:0;
}
.dark-dropdown.customSelect ul a:hover,
.dark-dropdown.customSelect ul a:focus{
	background-color:#566f92;
    height: 14px;
}

/* =============================================================================
   Switch

   Custom switch button.
   ========================================================================== */
.switch{
	position:relative;
	width:77px;
	height:48px;
	cursor:pointer;
	float:left;
}
.switch-mask,
.switch-shadow,
.switch-bg,
.switch-knob{
	background:url(/a/pgs/images/switch-sprite.png) no-repeat;
	display:block;
}
.switch-mask,
.switch-shadow{
	position:absolute;
	display:block;
	top:0;
	left:0;
	width:77px;
	height:48px;
}
.switch-mask{
	z-index:15;
}
.switch-shadow{
	z-index:10;
	background-position:-77px 0;
}
.switch-bg,
.switch-knob{
	position:absolute;
	top:12px;
	height:24px;
}
.switch-bg{
	z-index:5;
	left:12px;
	width:53px;
	background-position: -53px -48px;
}
.switch-knob{
	z-index:20;
	left:12px;
	width:26px;
	background-position: right top;
	opacity:0.6;
}
/* Transition and on state */
.switch-bg{
	transition: all 0.175s;
	-moz-transition: all 0.175s;
	-webkit-transition: all 0.175s;
	-o-transition: all 0.175s;
	-ms-transition: all 0.175s;
}
.switch-knob{
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
}
.continuous-play-on .switch-bg{
	background-position: 0 -48px;
}
.continuous-play-on .switch-knob{
	left:39px;
	opacity:1;
}

/* =============================================================================
   Hide default carousel

   We use a different carousel than mediacomponent so we don't need this anymore
   ========================================================================== */
.carouselButton,
.carousel{
	display:none;
}

/* =============================================================================
   Custom carousel

   We use a custom carousel instead of the default one
   ========================================================================== */
.main-carousel{
	height:150px;
	margin-top:40px;
	position:relative;
}
.main-carousel-wrap{
	overflow:hidden;
	width:100%;
	height:150px;
	position:relative;
}
.main-carousel-wrap ul{
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	height:150px;
}
.main-carousel-wrap li{
	width:120px;
	margin-right:40px;
	float:left;
}
.main-carousel-wrap a{
	display:block;
	overflow:hidden;
	color:#fff;
}
.main-carousel a:hover{
	text-decoration:none;
}
.main-carousel a:hover .video-item-title{
	text-decoration:underline;
}
.main-carousel-wrap .video-item-title{
	font:1.1em/1.2em Arial, Helvetica, sans-serif;
	display:block;
	padding-top:5px;
	max-height:60px;
	overflow:hidden;
}
.main-carousel-wrap .video-duration{
	font-size:0.8em;
	display:block;
	color:#a9a8a8;
	padding-top:3px;
}
.main-carousel-wrap .video-release-date,
.main-carousel-wrap .video-item-description,
.main-carousel-wrap .endFrame_content{
	display:none;
}
.main-carousel-wrap a img{
	width:100%;
	display:block;
}
.main-carousel-wrap .image-container{
	position:relative;
	display:block;
}
.main-carousel-wrap .image-container .playlist-image{
	display:none;
}
.main-carousel-but{
	display:block;
	width:36px;
	height:140px;
	position:absolute;
	top:0;
	background: url(/a/pgs/images/main-carousel-arrows.png) no-repeat;
}
.main-carousel-but.disabled {
	filter: alpha(opacity=20);
	opacity: 0.2;
}
.main-carousel-but.inactive {
	display:none;
}
.main-carousel-prev{
	left:-36px;
	background-position: 15px 26px;
}
.main-carousel-next{
	right:-36px;
	background-position: -79px 26px;
}
.main-carousel-wrap .indicator{
	position:absolute;
	top:22px;
	left:20px;
	width:70px;
	background:url(/a/pgs/images/pixel-60-black.png);
	color:#fff;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
}
.main-carousel-wrap .indicator{
	display:none;
}
.main-carousel-wrap .playing-indicator{
	padding:3px 5px;
}
.main-carousel-wrap .up-next-indicator{
	text-align:center;
	padding:10px 5px;
}
.show-video-indicators .playing-indicator,
.show-video-indicators.continuous-play-on .up-next-indicator{
	display:block;
}

/* =============================================================================
   Video playlist

   Styling of the inpage playlist under the carousel
   ========================================================================== */
.playlist-title{
	color:#fff;
	background:url(/a/pgs/images/dotted-1px-3px.png) left bottom repeat-x;
	margin:22px 0 30px 0;
	padding:0 0 5px 0;
}
.video-playlist{
	overflow:hidden;
}
.video-playlist ul{
	overflow: hidden; /* Clear that floats. */
}
.video-playlist li{
	float:left;
	/* Here I used percentages to avoid the need of redefining the margin and
	width later using media queries. Yay for saving a few bites. */
	margin:0 0 36px 3.6%;
	width: 22.3%;
	height: 180px;
}
.video-playlist .first-in-row{
	/* We still have to support IE7 :( */
	margin-left:0;
}
.video-playlist a{
	display:block;
	color:#fff;
	text-transform: uppercase;
	width:100%;
	overflow:hidden;
}
.video-playlist .active{
	text-decoration: underline;
}
.video-playlist .image-container{
	position:relative;
	margin-bottom:16px;
	display:block;
}
.video-playlist .image-container .carousel-image{
	display:none;
}
.video-playlist img{
	display:block;
	width:100%; /* Make it stretch if needed. */
}
.video-playlist .video-item-title{
	font-size: 1.1em;
}
.video-playlist .video-release-date{
	font-size: 1.2em;
}
.video-playlist .video-icon{
	/* I would have used pseudoelements for this if we didn't have to support IE7 :( */
	position:absolute;
	bottom:0;
	left:0;
	width:36px;
	height:36px;
	display:block;
	background:url(/a/pgs/images/transparent-video-icon.png);
}
.video-playlist .video-item-title,
.video-playlist .video-release-date{
	/* This is a trick to shorten the text and add elipsis if we have 
	a lot of copy. You never know your content. 
	white-space:nowrap;
	text-overflow: ellipsis;*/
	overflow:hidden;
}
.video-playlist .video-duration,
.video-playlist .video-item-description,
.video-playlist .endFrame_content{
	display: none;
}

/* =============================================================================
   Addthis sharing

   Custom icons for addthis.
   ========================================================================== */
.video-index-share{
	float:left;
	width:177px;
}
.video-index-share .share-but{
	float:left;
	display:block;
	margin-right:3px;
}
.social-share-bar .at16nc{
	background:url(/a/pgs/images/video-index-share-sprite.png) no-repeat;
	width:18px;
	height:18px;
	display:block;
}
/*.video-index-share .addthis_button_email .at16nc{
	width:21px;
	background-position:0 0;
}
.video-index-share .addthis_button_twitter .at16nc{
	background-position:-25px 0;
}
.video-index-share .addthis_button_facebook .at16nc{
	background-position:-46px 0;
}
.video-index-share .addthis_button_linkedin .at16nc{
	background-position:-68px 0;
}
.video-index-share .addthis_button_google .at16nc{
	background-position:-89px 0;
}*/
.social-share-bar .embed .at16nc{
	background-position:-111px 0;
}
.social-share-bar .embed-active .at16nc{
	background-position:-111px -18px;
}
.social-share-bar .addthis_button_compact .at16nc{
	background-position:-132px 0;
	width:45px;
}
.atm-i{
	display:none!important;
}


/* =============================================================================
   Embed box

   The embed dropdown box and content
   ========================================================================== */
.embed-container{
	position:relative;
	float:left;
}
.embed-box,
.embed-arrow{
	display:none;
}
.embed-arrow{
	position:absolute;
	top:100%;
	left:0;
	width:19px;
	height:14px;
	background:url(/a/pgs/images/embed-dropdown-arrow.png) no-repeat;
}
.embed-active .embed-arrow{
	display:block;
}
.embed-active .embed-box{
	display:block;
	position:absolute;
	background:#282c34;
	padding:20px 20px 15px 16px;
	z-index:100;
	top:32px;
	left:-108px;
	right:-97px;
	height:170px;
}
.embed-title{
	margin:0;
	padding:0 0 0 4px;
}
.embed-code{
	background:#15171b;
	border:1px solid #666;
	color:#fff;
	font:1.2em Arial, Helvetica, sans-serif;
	padding:10px;
	position:absolute;
	top: 54px;
	left: 18px;
	right: 18px;
	bottom: 54px;
	margin:0;
	outline:none;
}
.embed-but{
	position:absolute;
	bottom:15px;
	display:block;
	font-size: 1.2em;
	text-transform: uppercase;
	padding:4px 11px;
}
.embed-but:hover{
	text-decoration:none;
}
.but-embed-cancel{
	right:9px;
	color:#7397c5;
}
.but-copy{
	color:#fff;
	background:#7397c5;
	left:19px;
}
.but-copy-hover{
	background:#83a6d2;
}
.but-embed-cancel:hover{
	color:#fff;
}
.copy-confirm{
	left:110px;
	padding-right:21px;
	background: url(/a/pgs/images/confirm-tick.png) center right no-repeat;
	display:none;
}

.video-index-wrapper .social-share-bar {
	display: inline-block;
	width: 290px;
	border: none;
	margin-top: 5px;
	margin-bottom: 5px;
}
.video-index-wrapper .social-share-bar .sep {
	padding: 0 8px;
}
/* =============================================================================
   Media queries

   Do some resolution based changes.
   ========================================================================== */
@media screen and (min-width:1230px) {
	.dark-background #main-nav ul li.active a.toplevel{
		background-position:50% bottom;
	}
	.dark-background #sub-nav ul li.active a.toplevel{
		background-position:50% bottom;
	}
	.video-info .video-description{
		font-size:1.3em;
	}
	.video-playlist .video-item-title,
	.video-playlist .video-release-date{
		font-size: 1.2em;
	}
	.video-playlist li {
		height: 198px;
	}
	.embed-active .embed-box{
		top:32px;
		left:-208px;
		right:-53px;
		height:170px;
	}
	.dark-dropdown.customSelect ul,
	.dark-dropdown.customSelect li{
		width:282px;
	}
}

.view1280 .dark-background #main-nav ul li.active a.toplevel{
	background-position:50% bottom;
}
.view1280 .dark-background #sub-nav ul li.active a.toplevel{
	background-position:50% bottom;
}
.view1280 .video-info .video-description{
	font-size:1.3em;
}
.view1280 .video-playlist .video-item-title,
.view1280 .video-playlist .video-release-date{
	font-size: 1.2em;
}
.view1280 .video-playlist li {
	height: 198px;
}
.view1280 .embed-active .embed-box{
	top:32px;
	left:-208px;
	right:-53px;
	height:170px;
}
.view1280 .dark-dropdown.customSelect ul,
.view1280 .dark-dropdown.customSelect li{
	width:282px;
}

/* =============================================================================
   Safari iOS 6 video element scaling bug

   http://stackoverflow.com/questions/14250583/safari-on-ipad-ios6-does-not-scale-html5-video-to-fill-100-of-page-width
   ========================================================================== */
.mediaComponentVideo video{
	min-height:360px;
}
@media screen and (min-width:1230px) {
	.mediaComponentVideo video{
		min-height:450px;
	}
}