@charset "UTF-8";

body, html {
	padding: 0px;
	margin: 0px;
	background: #FFF;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	position: relative;
}

#gray-border-top, #gray-border-left, #gray-border-right, #gray-border-bottom {
	background: #000000;
	position: absolute;
	cursor: pointer;
	z-index: 9999;
}

#gray-border-top {
	top: 0px;
	left: 0px;
	height: 1px;
	width: 375px;
}

#gray-border-right {
	top: 0px;
	left: 375px;
	height: 400px;
	width: 1px;
}

#gray-border-bottom {
	left: 0px;
	top: 400px;
	height: 1px;
	width: 375px;
}

#gray-border-left {
	top: 0px;
	left: 0px;
	height: 400px;
	width: 1px;
}

#adWrapper__375x400 {
	width: 375px;
	height: 400px;
	background-color: #c81723;
	position: absolute;
	top: 0px;
	left: 0px;
	/**/
	overflow: hidden;
}

#mainContent {
	position: relative;
	top: 0px;
	left: 0px;
}

/* Top box */


#video__logo {
	background-image: url(drwho.png);
	background-repeat: no-repeat;
	width: 192px;
	height: 38px;
	background-size: 192px 38px;
	position: absolute;
	top: 13px;
	left: 10px;
}


#resolve_date {
	position: absolute;
	background-image: url('tuneIn_date.svg');
	background-repeat: no-repeat;
	width: 150px;
    height: 57px;
    left: 135px;
    top: 102px;
	background-size:contain;
}

@-moz-document url-prefix() {
	#long__line {
 		letter-spacing: 0.4px;
	}
}

/* Video */

#click4Audio {
	position: absolute;
    top: 60px;
    left: 125px;
    width: 72px;
    height: 69px;
    background-image: url(muteBtn.png);
    background-repeat: no-repeat;
}
#click4AudioHolder {
	position: absolute;
    top: 0px;
    left: 0px;
    width: 320px;
    height: 180px;

}
#videoWrapper:hover  #click4Audio{
	background-position: 0px -69px;
	
}

#videoWrapper {
	position: absolute;
	top: 165px;
    left: 27px;
	width: 320px;
  	height: 180px;
	border:black solid thin;
  	/* overflow:hidden; */
	
}

#mainVideo{
	position: absolute;
	left: 0px;
	width: 320px;
  	height: 180px;
	top: 0px;
}

/* Video Controls */

.controls {
	position: absolute;
	left: 0px;
	top: 160px;
	height: 20px;
	width: 320px;
	border-image-source: none;
	border-color: #ff7046;
	opacity: 0;
	display: none;
	background-image: none;
	background-color: rgba(0,0,0,0.7);
	z-index: 999;
}

.playButton {
	position: absolute;
	width: 15px;
	height: 15px;
	left: 6px;
	top: 3px;
	background-image: url(controllerSprite.png);
	background-position: 0 -90px;
}

.progressBar {
	position: absolute;
	width: 320px;
	height: 15px;
	left: 30px;
	top: 5px;
	margin: 0px;
}

#progressBar::-moz-progress-bar {
	background-color: #691115;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

progress[value] {
	-webkit-appearance: none;
	border: none;
	width: 260px;
	height: 5px;
	position: absolute;
	top: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.mobileMute progress[value], .mobileMute .progressBar { 
	width: 263px;
}

progress[value]::-moz-progress-bar {
  	background-color: #dddddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

progress[value]::-webkit-progress-bar {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #dddddd;
}

progress[value]::-webkit-progress-value {
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	background-color: #691115;
}

.muteButton {
	position: absolute;
	width: 15px;
	height: 13px;
	 left: 300px;
    top: 3px;
	background-image: url(controllerSprite.png);
	background-position: 0px 0px
}

/* Intro */

#introBanner {
	position: absolute;
	top: 0px;
	background: #000;
	height: 250px;
	width: 300px;
	background-image: url(bg.jpg);
	background-repeat: no-repeat;
	background-size: 300px 252px;
	background-position: 0px 0px;
	/* outline: 1px solid #bfbfbf; */
	overflow: hidden;
	cursor: pointer;
	display: none;
	z-index: 8888;
	cursor: pointer;
}

#introBanner__replay {
	position: absolute;
	top: 110px;
	left: 255px;
	opacity: 0;
	width: 150px;
	height:50px;
	z-index: 999;
	display: none;
	
}

#replay_icon {
	display: inline-block;
	width: 232px;
	height: 42px;
	background-image: url(cta_replay.png);
	background-repeat: no-repeat;
	position: relative; 
	top: 45px;
    left: 50px;
	z-index: 9999;
	
}

#introBanner__replay.desktop:hover #replay-icon {
	background-image: url(replayover.png);
}

#introBanner__more {
	position: absolute;
	top: 205px;
	left: 115px;
	width: 174px;
	height: 32px;
	opacity: 1;
	z-index: 9999;
	display: none;
	background-image: url(cta.png);
	background-repeat: no-repeat;
}

#long__line,
#introBanner__longline,
#introBanner__replay,
#introBanner__more {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}
#speckles {
	position: absolute;
	background-image: url('speckles.png');
	background-repeat: no-repeat;
    width: 1600px;
    height: 520px;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
	opacity:.6;
	overflow:hidden;
}
#dg_logo {
	position: absolute;
	background-image: url('dg_logo.svg');
	background-repeat: no-repeat;
    width: 390px;
    height: 475px;
    top: 0px;
    left: -10px;
    background-repeat: no-repeat;
	background-size:contain;
}
#yellowbox {
	position: absolute;
	width: 823px;
	height: 85px;
	top: 825px;
	left: 395px;
	background-color:#fdb715;
}
#whitebox {
	position: absolute;
	width: 400px;
    height: 313px;
    top: 67px;
    left: 10px;
	background-color: white;
	background-repeat: no-repeat;
	overflow:hidden;
}
#videoframeholder {
	position: absolute;
	width: 0px;
    height: 1050px;
    top: 0x;
    left: 0px;
	overflow:hidden;
	/*border:thin black solid;*/
}
#cateye {
	position: absolute;
	width: 25px;
	height: 8px;
	top:60px;
	left: 1110px;
	background-color:#000;
}

#guys {
	position: absolute;
	width: 514px;
	height: 432px;
	top:90px;
	left: -60px;
	background-image: url('guys.png');
	background-repeat: no-repeat;
}
#bbca_logo {
	position: absolute;
	width: 34px;
	height: 34px;
    top: 101px;
    left: 90px;
	background-image: url('bbca_logo.svg');
	background-repeat: no-repeat;
}
#dgresolve_logo {
	position: absolute;
	width: 375px;
	height: 936px;	
	top: 30px;
    left: 20px;
	background-image: url('logo_resolve.png');
	background-repeat: no-repeat;
}

#social{
	background-repeat: no-repeat;
	width: 194px;
	height: 33px;
	position: absolute;
	top: 440px;
	left: 581px;	
}

#hashtag{
	height:12px;
	width: 104px;
	background: url(hashtag.png);
	background-repeat: no-repeat;
	position:absolute;
	top: 16px;
    left: -20px;
}

#twitter, #facebook, #instagram  {
	height: 20px;
	width: 20px;
	background: url(socialSprite.png);
	background-position: 0px 0px;
	position:absolute;
}

#twitter {
	background-position: 0px -20px;
	top: 10px;
    left: 130px;
}
#facebook {
	background-position: 0px 0px;
	top: 10px;
    left: 100px;
}

#instagram{
	background-position: 0px -40px;
	top: 10px;
    left: 160px;
}


#sharkfin_large {
	position: absolute;
	background-image: url('sharkfin.svg');
	background-repeat: no-repeat;
    width: 500px;
    height: 500px;
    top: 0px;
    left: -500px;
	background-size:contain;
	z-index:10000;
	
}
#sharkfin_small {
	position: absolute;
	background-image: url('sharkfin.svg');
	background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    top: 60px;
    left: -200px;
	background-size:contain;

}
#introframeholder {
	position: absolute;
	width: 0px;
    height: 520px;
    top: 0x;
    left: 0px;
	overflow:hidden;
		background-image: url("background.jpg");
	background-repeat:no-repeat;
}
#videoResolve {
	position: absolute;
	width: 320px;
    height: 180px;
    top: 0x;
    left: 0px;
	overflow:hidden;
	background-image: url("videoResolve.jpg");
	background-repeat:no-repeat;
	opacity:0;
	}
	
#watchMore {
	display: inline-block;
	width: 232px;
	height: 43px;
	background-image: url(cta.png);
	background-repeat: no-repeat;
	position: relative; 
	top: 100px;
    left: 50px;
	z-index: 9999;
	opacity:0;
}
	
	
#overbutton_1 {
	position: absolute;
	width: 375px;
    height: 400px;
    top: 0x;
    left: 0px;
	}
#overbutton_2 {
	position: absolute;
	width: 375px;
    height: 400px;
    top: 0x;
    left: 0px;
	
	}
	#scrollgraphic {
	position: absolute;
	background-image: url("scroll.png");
	background-repeat:no-repeat;
	width: 375px;
    height: 20px;
    top: 380px;
    left: 0px;
	}