html {
}

@font-face { font-family: "RobotoRegular"; src: url('../fonts/Roboto-Regular-webfont.eot'); src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.otf') format('opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: "RobotoRegularItalic"; src: url('../fonts/Roboto-Italic-webfont.eot'); src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-Italic-webfont.woff') format('woff'), url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'), url('../fonts/Roboto-Italic-webfont.otf') format('opentype'); font-weight: normal; font-style: oblique; }
@font-face { font-family: "RobotoLight"; src: url('../fonts/Roboto-Light-webfont.eot'); src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-Light-webfont.woff') format('woff'), url('../fonts/Roboto-Light-webfont.ttf') format('truetype'), url('../fonts/Roboto-Light-webfont.otf') format('opentype'); font-weight: lighter; font-style: normal; }
@font-face { font-family: "RobotoLightItalic"; src: url('../fonts/Roboto-LightItalic-webfont.eot'); src: url('../fonts/Roboto-LightItalic-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-LightItalic-webfont.woff') format('woff'), url('../fonts/Roboto-LightItalic-webfont.ttf') format('truetype'), url('../fonts/Roboto-LightItalic-webfont.otf') format('opentype'); font-weight: lighter; font-style: oblique; }
@font-face { font-family: "RobotoBold"; src: url('../fonts/Roboto-Bold-webfont.eot'); src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-Bold-webfont.woff') format('woff'), url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'), url('../fonts/Roboto-Bold-webfont.otf') format('opentype'); font-weight: bold; font-style: normal; }
@font-face { font-family: "RobotoBoldItalic"; src: url('../fonts/Roboto-BoldItalic-webfont.eot'); src: url('../fonts/Roboto-BoldItalic-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-BoldItalic-webfont.woff') format('woff'), url('../fonts/Roboto-BoldItalic-webfont.ttf') format('truetype'), url('../fonts/Roboto-BoldItalic-webfont.otf') format('opentype'); font-weight: bold; font-style: oblique; }
@font-face { font-family: "RobotoBlack"; src: url('../fonts/Roboto-Black-webfont.eot'); src: url('../fonts/Roboto-Black-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-Black-webfont.woff') format('woff'), url('../fonts/Roboto-Black-webfont.ttf') format('truetype'), url('../fonts/Roboto-Black-webfont.otf') format('opentype'); font-weight: bolder; font-style: normal; }
@font-face { font-family: "RobotoBlackItalic"; src: url('../fonts/Roboto-BlackItalic-webfont.eot'); src: url('../fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('eot'), url('../fonts/Roboto-BlackItalic-webfont.woff') format('woff'), url('../fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'), url('../fonts/Roboto-BlackItalic-webfont.otf') format('opentype'); font-weight: bolder; font-style: oblique; }
@font-face { font-family: "WinterthurCondensedRegular"; src: url('../fonts/WinterthurCondensed-webfont.eot'); src: url('../fonts/WinterthurCondensed-webfont.eot?#iefix') format('eot'), url('../fonts/WinterthurCondensed-webfont.woff') format('woff'), url('../fonts/WinterthurCondensed-webfont.ttf') format('truetype'), url('../fonts/WinterthurCondensed-webfont.otf') format('opentype'); font-weight: normal; font-style: normal; }


body {
	font-family: "Roboto", arial, sans-serif;
	font-size: 12px;
	background: #09b1d7 url(../../img/live/clouds-new.jpg) repeat-x 50% 0;
}

#nik {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 768px;
	background: transparent url(../../img/live/nik.png) no-repeat 50% 0;
}

#wrapper {
	width: 998px;
	margin: 0 auto 100px;
	position: relative;
	z-index: 999;
}

#masthead {
	width: 100%;
	height: 60px;
	color: #fff;
	position: relative;
	background: transparent url(../../img/live/black-30.png) repeat-x 0 0;
	top: 0px;
}

#masthead-container {
	width: 998px;
	position: relative;
	margin: 0 auto;
	z-index: 9998;
}

#masthead h1 {
	width: 330px;
	position: relative;
}

#masthead h1 a.discovery {
	width: 48px;
	display: block;
	height: 60px;
	background: transparent url(../../img/live/discovery-logo.png) no-repeat 0 50%;
}

#masthead h1 a.skywire-live {
	height: 60px;
	width: 283px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
}
#masthead h1 a.skywire-live span {
    top: 0;
    left: 0;
    display: block;
    position: absolute;
    width: 281px;
    height: 60px;
    background: url(../../img/bg-nav-home-tab-tonight.png) repeat-y 50% 0px;
}
#masthead h1 a.skywire-live span.tune-in{
    top: 60px;
    background-position: 50% -69px;
}
body.tonight #masthead h1 a.skywire-live span {
    background: url(../../img/bg-nav-home-tab-tonight.png) repeat-y 50% 0px;
}
body.tonight #masthead h1 a.skywire-live span.tune-in {
    top: 60px;
    background-position: 50% -69px;
}

.relative-container {
	position: relative;
}

#masthead .relative-container {
}


#navigation {
	position: absolute;
	left: 325px;
	top: 15px;
}




#navigation ul li {
    float: left;
    list-style: none;
    margin-right: 10px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}
        
#navigation ul li span {
    font-weight: 200;
    display: block;
}

#navigation ul li a {
    color: #fff;
    text-decoration: none;
}

#navigation ul li.current a {
	color: #99cc33;
}

#mobile-menu,
#nav-close{
    display: none;
}


#conditions {

	/* TEMPORARILY */
	display: none;

	position: absolute;
	right: 0;
	top: 0;
	height: 60px;
	overflow: hidden;
}

#conditions h3 {
	font-size: 10px;
	padding: 8px 0 5px 0;
	text-align: center;
	text-transform: uppercase;
}

#conditions li {
	float: left;
	padding-left: 3px;
	position: relative;
	height: 30px;
	line-height: 30px;
    text-align: left;
}

#conditions #temp-value,
#conditions #wind-value {
	font-size: 24px;
	line-height: 30px;
	font-weight: 200;
	padding: 0 5px;
}
#conditions #temperature span.description {
    width: 26px;
}
#conditions span.description {
	font-size: 8px;
	position: absolute;
    right: 6px;
	bottom: 6px;
	display: block;
    width: 45px;
	line-height: 1;
	text-transform: uppercase;
	font-weight: normal;
	white-space: nowrap;
}

#conditions li sup {
	position: absolute;
	top: 6px;
    right: 6px;
    display: block;
    width: 45px;
	font-size: 9px;
	line-height: 1;
	font-weight: normal;
}

#conditions #weather {
	width: 38px;
	height: 30px;
	font-size: 24px;
	background: #004662 url(../../img/live/partly-cloudy.png) no-repeat 50% 50%;
	margin-right: 5px;
	padding: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#conditions #weather.clearconditions {
	background: #004662 url(../../img/live/clear.png) no-repeat 50% 50%;
}
#conditions #weather.pcloudy {
	background: #004662 url(../../img/live/partly-cloudy.png) no-repeat 50% 50%;
}
#conditions #weather.cloudy {
	background: #004662 url(../../img/live/cloudy.png) no-repeat 50% 50%;
}
#conditions #weather.rain {
	background: #004662 url(../../img/live/rain.png) no-repeat 50% 50%;
}
#conditions #weather.tstorm {
	background: #004662 url(../../img/live/tstorm.png) no-repeat 50% 50%;
}


#conditions  #temperature {
	padding-right: 20px;
	margin-right: 5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: transparent url(../../img/live/black-20.png) repeat 0 0;
}

#conditions  #wind {
	padding-right: 48px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#conditions  #wind.green {
	background-color:  #99cc33;
	color: #004660;
}

#conditions  #wind.yellow {
	background-color:  #ffcc00;
	color: #004660;
}

#conditions  #wind.red {
	background-color:  #990000;
	color: #fff;
}









#countdown-container {
	color: #FFFFFF;
	background: transparent url(../../img/live/black-20.png) repeat 0 0;
	position: absolute;
	right: 0px;
	top: 0;
	height: 60px;
	width: 240px;
}
#countdown-header {
	font: 10px/13px "RobotoBold", sans-serif;
	width: 70px;
	text-align: right;
	position: absolute;
	left: 5px;
	top: 5px;
	text-transform: uppercase;
}
#countdown {
	margin-left: 90px;
	margin-top: 10px;
	font: 12px/19px "WinterthurCondensedRegular", sans-serif;
	text-transform: uppercase;
}
#countdown.hasCountdown {
	border: none;
}
#countdown .countdown_rtl {
	direction: rtl;
}
#countdown .countdown_holding span {
	color: #888;
}

#countdown .countdown_section {
	margin-right: 10px;
}

.relative-container {
	position: relative;
}

#countdown .countdown_row { clear: both; width: 100%; padding: 0px 2px; text-align: center; }
/*#countdown .countdown_show1 .countdown_section { width: 98%; }
#countdown .countdown_show2 .countdown_section { width: 48%; }
#countdown .countdown_show3 .countdown_section { width: 32.5%; }
#countdown .countdown_show4 .countdown_section { width: 24.5%; }
#countdown .countdown_show5 .countdown_section { width: 19.5%; }
#countdown .countdown_show6 .countdown_section { width: 16.25%; }
#countdown .countdown_show7 .countdown_section { width: 14%; }*/


#countdown .countdown_section { color: #6097ba; display: block; float: left; font-size: 131%; text-align: center; }
#countdown .countdown_amount { color: #FFFFFF; font-size: 185%; }
#countdown .countdown_descr { display: block; width: 100%; }












#content {
	padding-top: 10px;
	margin-bottom: 10px;
}

#video-player-container {
/*    display: none;*/
	width: 740px;
	float: left;
	background: transparent url(../../img/live/black-70.png) repeat 0 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-bottom: 10px;
	position: relative;
}

#iframe {
	width: 720px;
	height: 515px;
	overflow: hidden;
}

#video-player {
	margin-bottom:10px;
}


#video-player-container .gutter {
	padding: 10px 10px 10px 10px;
}
#cam-swipe{
    display: none;
}
#logos {
	width: 100%;
	overflow: hidden;
	height: 42px;
}

#logos .sponsor {
	width: 120px;
	height: 42px;
	float: left;
}

#logos .sponsor p {
	line-height: 42px;
	position: relative;
	color: #fff;
	font-size: 10px;
	padding-right: 40px;
}


#logos .sponsor p a {
	color: #fff;
	text-decoration: none;
}


#logos .sponsor p a span {
	color: #fff;
	text-decoration: none;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 32px;
	height: 42px;
	background: transparent url(../../img/live/mitsubishi-logo.png) no-repeat 0 0;
}

#logos #origin-digital {
	float: right;
	margin-right: 5px;
	height: 42px;
	line-height: 42px;
	padding-right: 64px;
	margin-right: 5px;
	color: #99cc33;
	font-weight: 200;
	font-style: italic;
	position: relative;
}

#logos #origin-digital a {
	width: 59px;
	position: absolute;
	right: 0;
	top: 9px;
	height: 21px;
	display: block;
	background: transparent url(../../img/live/accenture-logo.png) no-repeat 0 50%;
}



#camera-thumbnails li {
	width: 120px;
	height: 68px;
	background-color: #ddd;
	float: left;
	line-height: 11px;
	font-family: arial;
	color: #fff;
	font-size: 10px;
}

#camera-thumbnails li a {
	color: #fff;
	float: left;
	text-decoration: none;
}

#camera-thumbnails li.last {
	margin-right: 0;
}

#camera-thumbnails li span {
	display: block;
	padding-right: 5px;
}

#camera-thumbnails li img {
	width: 120px;
	height: 68px;
	
}

#social-stream {
/*    display: none;*/
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	width: 245px;
    height: 578px;
	float: right;
    overflow: hidden;
}

#social-stream-tabs {
	font-size: 14px;
	height: 35px;
	overflow: hidden;
}

#social-stream-tabs li {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	float: left;
	width: 50%;
	line-height: 35px;
	text-align: center;
	background: transparent url(../../img/live/black-40.png) repeat 0 0;
	font-family: "Roboto", arial, sans-serif;
	
}

#social-stream-tabs li.ui-state-active {
	background: transparent url(../../img/live/black-70.png) repeat 0 0;
	
}

#social-stream .sponsor {
	background: transparent url(../../img/live/black-70.png) repeat 0 0;
	overflow: hidden;
	border-bottom: 1px solid #004d69;

}

#social-stream .sponsor .gutter {
	padding: 10px 0;
}

#social-stream .sponsor p {
	line-height: 42px;
	height: 42px;
	width: 130px;
	margin: 0 auto;
	position: relative;
	color: #fff;
	font-size: 10px;
}

#social-stream .sponsor p a {
	color: #fff;
	text-decoration: none;
}

#social-stream .sponsor p a span {
	display: block;
	position: absolute;
	right: 10px;
	line-height: 42px;
	top: 0;
	width: 32px;
	height: 42px;
	background: transparent url(../../img/live/mitsubishi-logo.png) no-repeat 0 0;
}



#social-stream-tabs li.curated-stream {
	float: left;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
}

#social-stream-tabs li.hashtag-stream {
	float: right;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
}

#social-stream-tabs li a {
	color: #fff;
	display: block;
	line-height: 35px;
	height: 35px;
	text-decoration: none;
}

.social-stream-content {
	background: transparent url(../../img/live/black-70.png) repeat 0 0;
	color: #fff;
	height: 409px;
	overflow-y: auto;
	
}

.social-stream-content .gutter {
	padding: 10px;
}

#join-the-conversation {
	border-top: 1px solid #004d69;
	height: 70px;
	background: transparent url(../../img/live/black-70.png) repeat 0 0;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

#join-the-conversation p {
	text-align: center;
	line-height: 70px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 300;
}

#join-the-conversation p a {
	color: #09b1d7;
	text-decoration: none;
}

#join-the-conversation p a img {
	vertical-align: middle;
	margin-right: 3px;
}

#ad {
/*    display: none;*/
	width: 100%;
	height: 44px;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #000000;
	color: #fff;
	z-index: 9999;
}

#ad p {
	text-align: center;
	line-height: 60px;
	position: relative;
	top: -16px;
	position: relative;
	z-index: 999;
}



.tweet {
	display: none;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 10px;
	border-bottom: 1px dotted #09b1d7;
}

.tweet-header {
	position: relative;
	min-height: 30px;
	margin-bottom: 3px;
    padding-right: 30px;
}

.tweet-username, .tweet-fullname {
	margin-left: 35px;
	display: block;
}

.tweet-fullname {
	margin-bottom: 3px;
}



.tweet-username {
	font-size: 9px;
	color: #ddd;
}

.tweet-username a,
.tweet-fullname a, 
.tweet-username a {
	color: inherit;
	text-decoration: none;
}


.tweet-timestamp {
	position: absolute;
	top: 2px;
	right: 0;
	font-size: 9px;
	font-weight: 200;
}
.tweet-timestamp a {
    padding-left: 15px;
	text-decoration: none;
	color: inherit;
    background: url('../../img/live/twitter-bird.png') no-repeat 0 1px;
}


img.tweet-avatar {
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0;
	top: 0;
}

.tweet-content {
	line-height: 1.4em;
	font-weight: 200;
}

.tweet-content a {
	color: #fff;
	text-decoration: none;
	
}

.tweet-content a:hover {
	color: #09b1d7;
	
}

.tweet-actions {
	margin-top: 5px;
}

.tweet-actions li {
	float: left;
	font-size: 10px;
	margin-right: 5px;
}

.tweet-actions li a {
	color: #09b1d7;
	text-decoration: none;
	line-height: 16px;
	vertical-align: baseline;
}

.tweet-actions li a span {
    float: left;
    display: block;
    width: 16px;
    height: 16px;
    background: url("../../img/tweet-spritev2.png") no-repeat 0 0px;
    opacity: 0.6;
}

.tweet-actions li a.tweet-favorite span {
    width: 16px;
    background-position: -20px 0px;
}

.tweet-actions li a.tweet-reply span {
    width: 18px;
    background-position: -40px 0px;
}






.gutter {
	padding: 20px;
}

#progression {
/*    display: none;*/
	clear: both;
	width: 100%;
	background: transparent url(../../img/live/black-70.png) repeat 0 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative;
}

#progression h3 {
	font-size: 16px;
	line-height: 24px;
	font-weight: 200;
	color: #fff;
	text-transform: uppercase;
}

#progression-percent{
    display: none;
}

#progression-diagram {
	width: 825px;
	height: 15px;
	position: absolute;
	left: 160px;
	top: 25px;
}

#progression-diagram #walk-start,
#progression-diagram #walk-finish {
	color: #fff;
	text-transform: uppercase;
	float: left;
	font-size: 9px;
	line-height: 15px;
	padding: 0 5px;
}

#progress-line {
	float: left;
	width: 740px;
	height: 15px;
	position: relative;
}

#progress-indicator {
	width: 24px;
	height: 24px;
	position: absolute;
	left: -12px;
	top: -16px;
	z-index: 3;
	background: transparent url(../../img/live/little-nik.png) no-repeat 0 0;
}

#progress-current {
	z-index: 2;
	width: 0;
	position: absolute;
	left: 0;
	top: 7px;
	height: 1px;
	background-color: #99cc33;
}

#progress-base {
	z-index: 1;
	position: absolute;
	left: 0;
	top: 7px;
	width: 100%;
	height: 1px;
	background-color: #fff;
}

#progress-data {
    display: none;
	position: absolute;
	left: -42px;
	width: 100px;
	padding-top: 5px;
	top: 25px;
	text-align: center;
	background: transparent url(../../img/live/indicator-arrow.png) no-repeat 50% 0;
}

#progress-data-container {
	padding: 5px;
	color: #fff;
	background: transparent url(../../img/live/black-80.png) repeat 0 0;
	font-size: 9px;
	font-weight: 200;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}




.clear {
	clear: both;
}


.hide-text {
    display: block;
	text-indent: 200%;
	overflow: hidden;
	white-space: nowrap;
}

.ad-pixel{
    position: absolute;
/*
    top: 10000px;
    left: 10000px;
*/
}

/* TABLET PORTRAIT */
@media only screen and (min-width: 600px) and (max-width: 768px) and (orientation: portrait) {
    html{
		background: #000 url("../../img/rotate-tablet.jpg") no-repeat 50% 0%;
	}
    body{
        background: none;
    }
    #masthead,
	#wrapper,
    #canyon, #nik, #ad {
		display: none !important;
	}
	
	
}








/* Phase-specific styles (gotta be here instead of in templates because IE) */

/* Phase 1 */
* {
	margin: 0;
	padding: 0;
}
#static-cam-list {
	margin-top: 5px;
}
#static-cam-list li {
	float: left;
	color: #fff;
	width: 120px;
	position: relative;
}
#static-cam-list li span {
	display: block;
	margin-top: 3px;
	font-size: 10px;
}
#static-cam-list li span.live-cam {
	width: 120px;
	color: #fff;
	position: absolute;
	left: 0;
	top: 45px;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 700;
}

@media (max-width: 600px) {
	#iframe {
		background: transparent url(../../img/black-20.png) repeat 0 0;
	}
	#static-slate {
		width: 100%;
		height: 130px;
		background: transparent url(../../img/live/phase1-mobile-slate-tonight.png) no-repeat 50% 50%;
		
	}
	#static-slate.phase2 {
		background: transparent url(../../img/live/phase1-mobile-slate-tonight.png) no-repeat 50% 50%;
	}
	#static-slate.weather {
		background: transparent url(../../img/live/mobile-slate-weather.png) no-repeat 50% 50%;
	}
	#static-slate.standby {
		background: transparent url(../../img/live/mobile-slate-please-stand-by.png) no-repeat 50% 50%;
	}
	#static-slate.postshow {
		background: transparent url(../../img/live/mobile-slate-thanks-for-watching.png) no-repeat 50% 50%;
	}
	#static-slate.codered {
		background: transparent url(../../img/live/mobile-slate-thanks-for-watching.png) no-repeat 50% 50%;
	}
	#static-slate p img, #static-cam-list {
		display: none;
	}
}

