@font-face {
	font-family: autobus;
	src: url("fonts/autobus_bold.ttf");
}

@font-face {
	font-family: poster;
	src: url("fonts/sf_movie_poster.ttf");
}

html { 
	width: 100%;
	height: 100%;
	min-height: 100%;
	MARGIN: 0px;
	PADDING: 0px;
}

body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	BACKGROUND-COLOR: #000000;
	MARGIN: 0px;
	PADDING: 0px;	
	COLOR: #FFFFFF;
	FONT-FAMILY: autobus;
}

div.header {
	position: relative;
	z-index: 3;
	COLOR: #FFFFFF;
	FONT-FAMILY: poster;
}

div.content {
	COLOR: #FFFFFF;
	FONT-FAMILY: autobus;
}

div.small {
	COLOR: #FFFFFF;
	FONT-FAMILY: autobus;
}

div.brightpane { 
	BACKGROUND-COLOR: rgba(27, 34, 52, 0.75);
}

div.darkpane { 
	BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
}

div.background {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
	overflow: auto;
}

a { 
	COLOR: #ffffff;
	text-decoration: none;
	transition: color 200ms;
}

a.explicit { 
	COLOR: #ffa2a2;
}

a.explicit:hover { 
	COLOR: #ffffff;
}

a:hover {
	COLOR: #ffa2a2;
}

a.button { 
	BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 40px;
	padding-right: 40px;
}

table {
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-spacing: 0px;
}

table.max_height {
	height: 100%;
}

tr {
	margin: 0px;
	padding: 0px;
}

td { 
	text-align: left;
	vertical-align: top;
	margin: 0px;
	padding: 0px;
}

td.centered {
	text-align: center;
	padding: 10px;
}

div#hover_overlay {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	transition: 200ms;
	font-family: poster;
	font-size: 8vw;
	display: none;
	opacity: 0;
}

td.overlay_option { 
	BACKGROUND-COLOR: rgba(27, 34, 52, 1.0);
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 2px solid #445787;
}

div#close_overlay {
	display: none;
}

div.container {
	position: relative;
	padding-bottom: 8px;
	width: 32px;
	height: 32px;
}

div.container:hover img.high {
	opacity: 1;
	transition: opacity 200ms;
}

div.container_scale { 
	position: relative;
	width: 100%;
	height: 100%;
	padding-bottom: 9vw;
}

div.container_scale:hover img.high_scale {
	opacity: 1;
	transition: opacity 200ms;
	cursor: pointer;
}

img.base {
	position: absolute;
	left: 0px;
	top: 0px;
	transition: opacity 200ms;
}

img.high {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	transition: opacity 200ms;
}

img.scale { 
	max-width: 100%;
	height: auto;
}

img.base_scale {
	position: absolute;
	left: 0px;
	top: 0px;
	transition: opacity 200ms;
	max-width: 100%;
	height: auto;
}

img.high_scale {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	transition: opacity 200ms;
	max-width: 100%;
	height: auto;
}

div.youtubecontainer { 
	display: inline-block;
	width: 100%;
	height: 100%;
	max-width: 640px;
	max-height: 360px;
}

div.youtube {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

div.youtube>iframe { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

a.closebutton { 
	position: fixed;
	right: 30px;
	top: 30px;
	BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	z-index: 2;
}

a.nolink { 
	cursor: pointer;
}

span.dot { 
	cursor: pointer;
	height: 12px;
	width: 12px;
	border-radius: 50%;
	transition: background-color 200ms;
	background-color: #ffffff;
	display: inline-block;
	margin: 0 2px;
	z-index: 2;
}

div.screenshot {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	display: none;
}

span.dot:hover {
	background-color: #ffa2a2;
}

span.dot_active {
	background-color: #ffa2a2;
}

tr.screenshot_bottom>td {
	background-color: rgba(27, 34, 52, 0.75);
	padding-top: 10px;
	z-index: 2;
}

@media screen and (min-width: 1261px) { 
	div.mobile_header {
		display:none; 
	}
	div.mobile_content {
		display: none;
	}
	div.header {
		FONT-SIZE: 55px; 
	}
	div.content {
		FONT-SIZE: 30px;
		width: 100%;
		height: 100%;
	}
	div.shared_content { 
		FONT-SIZE: 30px;
		width: 100%;
		height: 100%;
	}
	div.overlay { 
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}
	tr.main_header {
		height: 10%;
	}
	tr.main_content { 
		height: 90%;
	}
	td.content_top {
		padding-left: 40px;
		padding-right: 40px;
		vertical-align: top;
		text-align: center;
		height: 100%;
	}
	td.content_bottom {
		font-size: 55px; 
		font-family: poster;
		vertical-align: bottom;
		text-align: center;
		padding-bottom: 15px;
	}
	td.content_footer {
		width: 25%;
		font-size: 20px;
		vertical-align: bottom;
		text-align: center;
		padding-bottom: 15px;
	}
	td.overlay_content { 
		width: 40%;
		min-width: 580px;
		max-width: 720px;
		text-align: center;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	}
	tr.thinpadding {
		height: 5%;
	}
	tr.thinpadding>td {
		height: 10px;
	}
	tr.aboutsection { 
		height: 40%;
	}
	tr.aboutfooter { 
		height: 5%;
	}
	td.aboutfooter_left { 
		width: 70%;
		font-family: poster;
		font-size: 55px;
		vertical-align: middle;
		padding-left: 25px;
	}
	td.aboutfooter { 
		width: 10%;
		font-size: 20px;
		text-align: center;
		vertical-align: middle;
	}
	tr.aboutheading { 
		height: 10%;
	}
	tr.aboutcontent { 
		height: 90%;
	}
	td.aboutheading { 
		font-family: poster;
		font-size: 55px;
		width: 75%;
		BACKGROUND-COLOR: rgba(27, 34, 52, 0.75);
		padding-left: 20px;
		padding-right: 20px;
	}
	td.aboutimage_right { 
		width: 20%;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
		padding-top: 15px;
		padding-bottom: 5px;
		padding-left: 5px;
		padding-right: 15px;
		text-align: left;
	}
	td.aboutimage_left { 
		width: 20%;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
		padding-top: 15px;
		padding-bottom: 5px;
		padding-left: 15px;
		padding-right: 5px;
		text-align: right;
	}
	td.aboutpadding { 
		width: 5%;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.0);
	}
	td.aboutcontent { 
		vertical-align: top;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 10px;
	}
	tr.aboutfooter>td { 
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
		padding-bottom: 15px;
	}
	tr.overlay_heightpadding { 
		height: 185px;
	}
	div#bg_main {
		background-image: url("images/screens_2k/cdl_screen_01.jpg");
	}
	div#bg_about {
		background-image: url("images/screens_2k/cdl_screen_02.jpg");
	}
	div#bg_help {
		background-image: url("images/screens_2k/cdl_screen_05.jpg");
	}
	div#bg_video {
		background-image: url("images/screens_2k/cdl_screen_06.jpg");
	}
	td.title {
		min-width: 650px;
		text-align: left;
		width: 50%;
	}
	td.options { 
		text-align: center;
		width: 40%;
		min-width: 580px;
		max-width: 720px;
	}
	td.thinpadding { 
		width: 5%;
	}
	td.widepadding { 
		width: 55%;
	}
	td.option {
		text-align: center;
		padding-left: 15px;
		padding-right: 15px;
		vertical-align: bottom;
	}
	td.smalloption {
		text-align: center;
		padding-left: 3px;
		padding-right: 3px;
		vertical-align: bottom;
	}
	td.smalloption_left {
		text-align: center;
		padding-left: 15px;
		padding-right: 3px;
		vertical-align: bottom;
	}
	td.smalloption_right {
		text-align: center;
		padding-left: 3px;
		padding-right: 15px;
		vertical-align: bottom;
	}
	tr.heading>td { 
		padding-bottom: 35px;
		padding-top: 35px;
		vertical-align: bottom;
	}
	tr.helpsection { 
		height: 100%;
	}
	tr.helpheading { 
		height: 10%;
	}
	tr.helpcontent { 
		height: 90%;
	}
	td.helpheading { 
		font-family: poster;
		font-size: 55px;
		width: 100%;
		BACKGROUND-COLOR: rgba(27, 34, 52, 0.75);
		padding-left: 20px;
		padding-right: 20px;
	}
	td.helpcontent { 
		vertical-align: top;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 10px;
	}
	td.helpsubheader { 
		COLOR: #c0d8ff;
	}
	td.helpsubcontent {
		font-family: Verdana;
		font-size: 16px;
		padding-left: 40px;
		padding-bottom: 10px;
	}
}

@media screen and (max-width: 1260px) { 
	div.overlay { 
		display:none;
	}
	div.header {
		display:none; 
	}
	div.content {
		display: none;
	}
	a#download_link_2k { 
		display: none;
	}
	a#download_link_4k { 
		display: none;
	}
	div.shared_content { 
		FONT-SIZE: 4vw;
		width: 100%;
		height: 100%;
	}
	div.mobile_content {
		FONT-SIZE: 4vw;
		width: 100%;
		height: 100%;
	}
	div.small { 
		FONT-SIZE: 20px;
	}
	tr.content { 
		height: 90%;
	}
	tr.thinpadding { 
		height: 3%;
	}
	tr.thinpadding>td {
		padding: 0px;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	}
	tr.content_top { 
		height: 15%;
	}
	tr.content_mid {
		height: 65%;
	}
	tr.content_bottom { 
		height: 5%;
	}
	tr.heading { 
		height: 10%;
	}
	tr.heading>td { 
		vertical-align: middle;
		padding-bottom: 20px;
		padding-top: 20px;
		BACKGROUND-COLOR: rgba(27, 34, 52, 0.75);
	}
	td.content_top { 
		width: 100%;
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		vertical-align: top;
		text-align: center;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	}
	td.content_mid { 
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		vertical-align: bottom;
		text-align: center;
	}
	td.content_bottom { 
		width: 100%;
		padding-bottom: 5px;
		text-align: center;
		font-family: poster;
		font-size: 8vw;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	}
	td.smallbuffer {
		width: 45%;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	}
	td.smalloption {
		text-align: center;
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 20px;
		padding-bottom: 5px;
		vertical-align: bottom;
		width: 1%;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
	}
	td.thickpadding { 
		width: 90%;
	}
	td.thinpadding { 
		width: 5%;
	}
	td.title {
		width: 75%;
	}
	td.list { 
		width: 10%;
		text-align: right;
	}
	tr.aboutheading { 
		height: 10%;
	}
	tr.aboutcontent { 
		height: 90%;
	}
	tr.aboutpadding>td {
		height: 10px;
		BACKGROUND-COLOR: rgba(0, 0, 0, 0);
	}
	td.aboutheading { 
		font-family: poster;
		font-size: 8vw;
		BACKGROUND-COLOR: rgba(27, 34, 52, 0.75);
		padding-left: 20px;
		padding-right: 20px;
	}
	td.aboutcontent { 
		vertical-align: top;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	tr.helpsection { 
		height: 100%;
	}
	tr.helpheading { 
		height: 10%;
	}
	tr.helpcontent { 
		height: 90%;
	}
	td.helpheading { 
		font-family: poster;
		font-size: 8vw;
		width: 100%;
		BACKGROUND-COLOR: rgba(27, 34, 52, 0.75);
		padding-left: 20px;
		padding-right: 20px;
	}
	td.helpcontent { 
		vertical-align: top;
		BACKGROUND-COLOR: rgba(10, 12, 21, 0.75);
		padding-left: 25px;
		padding-right: 25px;
		padding-top: 10px;
	}
	td.helpsubheader { 
		COLOR: #c0d8ff;
	}
	td.helpsubcontent { 
		font-family: Verdana;
		font-size: 2vw;
		padding-left: 40px;
		padding-bottom: 10px;
	}
	div#bg_main {
		background-image: url("images/mobile/bg_01.jpg");
	}
	div#bg_about {
		background-image: url("images/mobile/bg_02.jpg");
	}
	div#bg_help {
		background-image: url("images/mobile/bg_05.jpg");
	}
	div#bg_video {
		background-image: url("images/mobile/bg_06.jpg");
	}
}