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

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

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

#expanded{
	position:absolute;
	width:498px;
	height:248px;
	top:0px;
	left:0px;
	margin:auto;
	background: #000;
    border: 1px solid #000;
	overflow:hidden;
    display: none;
}

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

#resolve {
	position: absolute;
	top: 0px;
	left: 0px;
	width:300px;
	height:250px;
	z-index:100;
    opacity:0;
}

#resolve_exp {
	position: absolute;
	top: 0px;
	left: 0px;
	width:500px;
	height:250px;
	z-index:100;
    opacity:0;
}

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

.exitBtnExp {
	position: absolute;
	top: 0px;
	left:0px;
	width:500px;
	height:250px;
	z-index:801;
	cursor: pointer;
}

.exitBtnTrailer {
	position: absolute;
	top: 0px;
	left:0px;
	width:500px;
	height:250px;
	z-index:801;
	cursor: pointer;
}

/* === INTRO ELEMENTS === */ 

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

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

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

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


#trailer_video_player {
	position: absolute;
	top: 0px;
	left: 0px;
	width:500px;
	height:250px;
	z-index: 800;
	background: #000;
	overflow:hidden;
    cursor:pointer;
}


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

#video_controls {
	position: absolute;
	bottom: 0px;
    left:1px;
	width: 500px;
	height: 22px;
	opacity: 0;
    display: none;
	z-index:801;
	background-color:rgba(250, 199, 138, 0.5);
}

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

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

#btn_audio_on {
	position:absolute;
	top: 7px;
	left: 30px;
	width: 10px;
	height: 8.5px;
	background: url('btn_trailer_audio_on.png') top;
	cursor:pointer;
	display: none;
}

#btn_audio_off {
	position:absolute;
	top: 7px;
	left: 30px;
	width: 10px;
	height: 8.5px;
	background: url('btn_trailer_audio_off.png') top;
	cursor:pointer;
	display: block;
}

#btn_hd {
	position:absolute;
	top: 6px;
	right: 7px;
	width: 14px;
	height: 10px;
	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, #btn_resolve_cta:hover {
	background-position: bottom;
}


#video_scrubber {
	position:absolute;
	top: 4px;
	left: 54px;
	width: 412px;
	height: 15px;
	opacity: 0;
	-webkit-appearance: none;
    background-color: black;
	cursor:pointer;
}

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

#video_scrubber_bg {
	position:absolute;
	top: 9px;
	left: 54px;
	width: 412px;
	height: 3px;
	background: #000;
}

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

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

#resolve_date {
	position:absolute;
	width:300px;
	height:250px;
	top: 0px;
	left:0;
	z-index:5;
	opacity: 0;
}

#resolve_TT {
	position:absolute;
	width:300px;
	height:250px;
	top: 0px;
	left:0;
	background: url('img_resolve_TT.png');
	z-index:5;
	opacity:0;
}

#resolve_tagline {
	position:absolute;
	width:300px;
	height:250px;
	top: 0px;
	left:0;
	background: url('img_resolve_tagline.png');
	z-index:5;
	opacity:0;
}

#btn_resolve_cta {
	position:absolute;
	width: 8px;
	height:10px;
	bottom:10px;
	left: 10px;
	background:url('btn_resolve_cta.png') top;
	cursor: pointer;
	z-index:9001;
	opacity:0;
}



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

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



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

#btn_close {
	position:absolute;
	width: 22px;
	height:22px;
	top:5px;
	right: 5px;
	background:url('btn_close.png') top;
	cursor: pointer;
	z-index:9000;
}
#btn_close:hover{
    background-position: bottom !important;
}

#btn_resolve_replay_1 {
	position: absolute;
	bottom:6px;
	right:6px;
	width:135px;
	height:20px;
	background: url('btn_resolve_replay_1.png');
	z-index:20000;
	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;
	display:none;
}

#resolve_streaming_exp {
	position: absolute;
	bottom:0px;
	right:0px;
	width:500px;
	height:30px;
	background: url('img_resolve_exp_streaming.png');
	z-index:5;
	cursor: pointer;
	display:none;
	opacity:0;
}

#resolve_date_exp {
	position:absolute;
	width:500px;
	height:250px;
	top: 0px;
	left:0;
	z-index:5;
}

#resolve_TT_exp {
	position:absolute;
	width:500px;
	height:250px;
	top: 0px;
	left:0;
	background: url('img_resolve_TT_exp.png');
	z-index:5;
}

#resolve_tagline_exp {
	position:absolute;
	width:500px;
	height:250px;
	top: 0px;
	left:0;
	background: url('img_resolve_tagline_exp.png');
	z-index:5;
}



#btn_resolve_replay_1:hover, #btn_resolve_replay_2:hover{
	background-position: bottom;
}

#resolve_bg_exp {
	position: absolute;
	top:0px;
	left:0;
	width:500px;
	height:250px;
	background: url('img_resolve_bg_exp.jpg');
    z-index: 4;
	
}