/* ===================== */ 
/* === Z-INDEX 'KEY' === */ 
<!-- BUTTONS	: 800	-->
<!-- EXITS		: 700	-->
<!-- VIDEOS		: 600	-->
<!-- CONTAINERS	: 500	-->
<!-- CONTENT	: 1-400	-->
/* ===================== */ 


/* === MAIN ELEMENTS === */ 

body, body * {
	vertical-align:baseline;
	border:0 none;
	outline:0;
	padding:0;
	margin:0;
}

#container{
	position:absolute;
	width:968px;
	height:248px;
	border:1px solid #000;
	top:0;
	left:0;
	margin:auto;
	background: #000;
	overflow:hidden;
}

#trailer {
	position: absolute;
	top: 0px;
	left:0px;
	width:970px;
	height:250px;
	background: #000;
	z-index:500;
	display:block;
	opacity: 0;
}

#resolve {
	position: absolute;
	top: 0px;
	left: 0px;
	width:968px;
	height:248px;
	z-index:500;
	display:none;
}

.exitBtn {
	position: absolute;
	top: 0px;
	left:0px;
	width:970px;
	height:250px;
	z-index:700;
	cursor: pointer;
}

/* === TRAILER ELEMENTS === */ 

#intro_video_player {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 970px;
	height: 250px;
	z-index: 600;
	overflow:hidden;
	display: none;
}

#btn_intro_skip {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 22px;
	height: 22px;
	background: url('btn_intro_skip.png') top;
	z-index:1000;
	cursor: pointer;
}

#btn_intro_skip:hover {
	background-position: bottom;
}

#trailer_video_player {
	position: absolute;
	top: 0;
	left: 0;
	width: 970px;
	height: 250px;
	z-index: 600;
	background: #000;
	overflow:hidden;
}



/* === VIDEO CONTROLS === */ 

#video_controls {
	position: absolute;
	bottom: -20px;
	width: 970px;
	height: 21px;
	opacity: 0;
	z-index:800;
	background: url('btn_trailer_controls_bg.png') top;
}

#btn_play {
	position:absolute;
	top: 3px;
	left: 7px;
	width: 15px;
	height: 15px;
	background: url('btn_trailer_play.png') top;
	cursor:pointer;
	display: none;
}

#btn_pause {
	position:absolute;
	top: 3px;
	left: 7px;
	width: 15px;
	height: 15px;
	background: url('btn_trailer_pause.png') top;
	cursor:pointer;
	display: block;
}

#btn_audio_on {
	position:absolute;
	top: 3px;
	left: 27px;
	width: 15px;
	height: 15px;
	background: url('btn_trailer_audio_on.png') top;
	cursor:pointer;
	display: none;
}

#btn_audio_off {
	position:absolute;
	top: 3px;
	left: 27px;
	width: 15px;
	height: 15px;
	background: url('btn_trailer_audio_off.png') top;
	cursor:pointer;
	display: block;
}

#btn_hd {
	position:absolute;
	top: 3px;
	right: 7px;
	width: 15px;
	height: 15px;
	background: url('btn_trailer_fullscreen.png') top;
	cursor:pointer;
	display: block;
}

#btn_play:hover, #btn_pause:hover, #btn_audio_on:hover, #btn_audio_off:hover, #btn_hd:hover{
	background-position: bottom;
}


#video_scrubber {
	position:absolute;
	top: 1px;
	left: 53px;
	width: 883px;
	height: 15px;
	opacity: 0;
	-webkit-appearance: none;
    background-color: silver;
	cursor:pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 15px;
}

#video_scrubber_bg {
	position:absolute;
	top: 9px;
	left: 53px;
	width: 883px;
	height: 3px;
	background: #0f1c1d;
}

#video_scrubber_progress {
	position:absolute;
	top: 9px;
	left: 53px;
	width: 0;
	height: 3px;
	background: #fff;
}

/* === RESOLVE ELEMENTS === */ 

#resolve_bg {
	position: absolute;
	top:0;
	left:0;
	width:970px;
	height:250px;
	background: url('img_resolve_bg.jpg');
	opacity: 0;
}

#btn_resolve_cta {
	position: absolute;
	top:8px;
	right:8px;
	width:15px;
	height:15px;
	background: url('btn_hbo_exit.png') top;
	z-index:800;
	cursor: pointer;
}

#btn_resolve_cta:hover {
	background-position: bottom;
}

#btn_resolve_trailer {
	position: absolute;
	bottom:1px;
	right:52px;
	width:172px;
	height:17px;
	background: url('btn_resolve_cta.jpg') top;
	opacity: 0;
	z-index:800;
	cursor: pointer;
	-webkit-transition: 0.1s ease-in-out;
    -moz-transition: 0.1s ease-in-out;
    -o-transition: 0.1s ease-in-out;
    transition: 0.1s ease-in-out;
}

#btn_resolve_trailer:hover {
	background-position: bottom;
}

#resolve_date {
	position:absolute;
	width: 383px;
	height: 98px;
	bottom: 0px;
	left: 0px;
	opacity:0;
	cursor:pointer;
	z-index:100;
}

#resolve_begin {
	position: absolute;
	width: 231px;
	height: 38px;
	top: 0px;
	left: 0px;
	z-index: 100;
	background: url('img_resolve_tagline.png');
	opacity: 0;
}

#resolve_tt {
	position: absolute;
	width: 408px;
	height: 158px;
	left: 0px;
	top: 0px;
	opacity: 0;
	z-index: 100;
	background: url('img_resolve_tt.png');
}

#resolve_copy {
	position: absolute;
	width: 970px;
	height: 27px;
	left: 0px;
	bottom: -1px;
	background: url('img_resolve_copy.png');
	opacity: 0;
	z-index: 100;
}