/* Reset block */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a { color: black; }
sup { font-size: 0.8em; position: relative; top: -0.5em;}
sub { font-size: 0.8em; position: relative; bottom: -0.25em; }

/* Cosmos-specific styles */
html,body {
	height: 100%;
	margin: 0px;
}
* {
   margin: 0px;
   padding: 0px;
}

html {
	background-color: #000000;
	padding: 0;
	margin: 0;
	min-height: 100%;
}

body {
	background-color: #000000;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	min-height: 600px;
	min-width: 800px;
	font-size: 14px;
	font-family: Arial, Verdana, Sans-serif;
}

#container {
	min-height: 100%;
	width: 100%;
	background-image:url('../imgs/background_sm.jpg');
	background-size: cover;
	background-repeat: no-repeat;
} 

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3em;
	line-height: 3em;
	border-bottom: 1px solid #404040;
	color: #d0d0d0;
}
#header, #footer {
	background: #202020;
	z-index: 999;
}
#AppTitle {
	float: left;
}
#header  h1 {
	color: #ffffff;
	font-size: 1.4em;
}
#header a, #header button, #header span {
	height: 3em;
	line-height: auto;
}
#header a, #header button {
	padding: 0 1em;
	display: inline-block;
}
#AppTitle a { padding-right: 0px; }
#header a { color: inherit; text-decoration: none; }
#header .right { float: right; }
#header .right button {
	display: block;
	text-align: center;
	border: 0px;
	line-height: 3em;
	cursor: pointer;
	font-size: inherit;
	background-color: transparent;
	color: inherit;
}
#header button { min-width: 7em; }
#header #PlanetChoice > button { min-width: 7.4em; }
#header #PlanetChoice li { padding: 0px; }

#header a:hover, #header a:focus, #header button:hover, #header button:focus {
	color: white;
}
#header .dropdown li { background-color: #202020; padding: 0 1em; line-height: 2.5em; }
#header .right button:hover, #header .dropdown li:hover { background-color: #404040; cursor: pointer; }
#header .right button img { float: left; display: inline-block; height: 2em; margin-top: 0.5em; margin-right: 0.25em; }
#footer {
	position: fixed;
	bottom: 0;
	right:0;
	padding: 0 0.5em;
	height: 1.5em;
	line-height: 1.5em;
	min-height: 20px;
	font-size: 0.8em;
}
#footer li {
	display: inline-block;
	color: #acacac;
	text-align: center;
}
#footer li:after {
	content: " /";
}
#footer li:last-child:after {
	content: "";
}
#footer li a {
	color: inherit;
}

#content {
	height: 100%;
}

body.Earth .forMoon, body.Earth .forMars, body.Moon .forMars, body.Moon .forEarth, body.Mars .forEarth, body.Mars .forMoon { display: none; }


.close button, #LanguageList li, #content button, .input_table td {
	border-radius: 5px;
}

h1{
	text-align: center;
}

#map_canvas { 
	height: 782px; width: 548px; background: #dfdfdf;
}

.heading {
	text-align: left;
	background-color: #c3c3c3;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d3d3d3), color-stop(1, #939393) );
	background:-moz-linear-gradient( center top, #d3d3d3 5%, #939393 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#939393');
	height: 0px;
}
.main {
	overflow: hidden;
	border-radius: 8px;
}

.heading div { display: none; }
.screen_title {
	text-align: left;
	font-weight: bold;
	padding-left: 10px;
	line-height: 28px;
	display: inline-block;
}
#content button.help_button {
	background-color: #00b9e4;
	color: white;
	width: auto;
	margin-right: 0px;
	font-weight: 700;
}

/*//////////////////////////////////////////////////*/
/* Language Selection Screen */
/*/////////////////////////////////////////////////*/

#impactCalc {
	border: 1px solid #202020;
	background-color: #000000;
	background-image:url('../imgs/bkg3.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 0%;
	min-height: 552px;
}

#LanguageList {
	position: relative;
	padding-top: 20%;
	width: 100%;
	color: #ffffff;  
	border-width: 0px;
	border-color: #000000;
	border: 0px solid #888888;
}

#LanguageList li {
	display: inline-block;
	width: 26%;
	line-height: 2em;
	margin: 0 auto;
	text-align: center;
	border-width: 1px;
	border-color: #ffffff;
	text-align: center;
	background-color: transparent;
}
#LanguageList li a { color: inherit; text-decoration: none; line-height: 2em; padding: 10px; display: inline-block; width: 100%; }
#LanguageList li:hover {
	cursor: pointer;
	color: black;
	background-color: #bbeeff;
}
#LanguageList li.selected {
	background-color: #FFbb00;
	color: black;
}
#LanguageList li.selected:hover {
	background-color: #FFdd00;
}

#lang_warn {
	padding: 20px;
	display: none;
}

#lang_warn p {
	text-align: left;
	color: #ffcc44;
}

#lang_warn ul{
	margin-top: 20px;
	color: #ffffff;
}

#content button {
	border: 0px;
	background-color: #efefef;
	cursor: pointer;
	height: 2em;
	font-size: 1em;
	text-align: center;
	margin-right: 0.25em;
	padding: 0 0.5em;
}
#content button:hover {
	background-color: #bbeeff;
}
.StartButton, .StartButtonClicked {
	width: 180px;
	margin: 2em auto 0 auto;
}

.StartButton:hover {
	background-color: #bbeeff;
}

.StartButtonClicked {
	background-color: #FFbb00;
	color: black;
}

/*///////////////////////////////////////////////////////*/
/*Data Input Screen*/
/*/////////////////////////////////////////////////////*/

#ImpactCalc_Input {
	background-color: #000000;
	margin: 0 auto;
	padding-top: 0%;
}


.tmp {
	background-image: url('../imgs/speedo.png');
}

#Speedo {
	clear: all;
	width: 159px;
	height: 156px;
	background-repeat: no-repeat;
	margin: 0 auto;
	display: block;
}

#Angle {
	width: 100%;
	margin: 0 auto;
	width: 159px;
	height: 107.5px;
	margin-top: 22.5px;
	margin-bottom: 22.5px;
}

#Projectile {
	width: 100%;
	height: 131px;
	position:relative;
	top: 0px;
}

#WaterFeature {
}

#Projectile_Img {
	position: relative;
	margin: auto;
}
#ProjectileValue {
	text-align: center;
	font-size: 1em;
	height: 12px;
}


#projDiam, #projAngle, #projVel, #ProjectileSizeSlider, #ProjectileAngleSlider, #ProjectileVelocitySlider {
	width: 120px;
	width: 90%;
	display: inline-block;
}
#ImpactDistanceSlider {
   width: 90%;
   display: inline-block;
}
#impactDist, #WaterDepthSlider {
   width: 100%;
   display: inline-block;
}


#wtr {
	width: 280px;
	display: inline-block;
}

#ProjectileWidth {
	display: block;
	margin: 0 auto;
}

#WaterVis {
	width: 362px;
	height: 128px;
	margin-top: 10px;
	margin: 0 auto;
	display: block;
}



.input_table {
	width: 100%;
	height: 223px;
	border-color:#9c9c9c;
	border-width: 0px;
	background: #f0f0f0;
	border-spacing: 10px 5px;
}

.input_short {
	height: 2em;
}

.input_table td {
	border-style: solid;
	border-width: 1px;
	border-color: #b0b0b0;
	padding: 1em;
	vertical-align: top;
	border-bottom: 0px;
	width: 33.3%;
}



.input_table td.input_area {
	width: 50%;
}

.input_table td.input_full {
	width: 100%;
}

.input_title {
	font-size:1em;
	text-align: left;
	font-weight: bold;
	padding-bottom: 5px;
}

.input_short .input_panel {
	width: auto;
	margin: 0;
}
.input_panel_w {
	width: 344px;
}

.input_panel, .input_panel_right, .input_panel_w {
	margin: 0 auto;
	font-size: 1em;
	text-align: center;
	margin-top: 10px;
}

.input_panel p , .input_panel_right p , .input_panel_w p {
	margin-right: 10px;
	font-size: 1em;
	font-weight: bold;
	display: inline;
}


.input_combo, .input_text {
	width: 100%;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.input_combo {
	margin-bottom: 10px;
}

#SelectLM_Title { display: none!important; }
#MapInst { margin-top: 10px; }

.input_image, .input_image img{
	width: 100%;
}

.input_bottom_buttons {
	display: inline-block;
}


.input_panel_right {
	float: right;
	margin-top: 0px;
}

.input_panel_right p {
	padding-top: 5px;
}


.slider_text_r {
	padding-top: 0px;
	padding-left: 10px;
	min-width: 5em;
}
.slider_text_l, .slider_text_r {
	display: inline-block;
}
.slider_text_l {
	padding-right: 20px;
	font-weight: bold;
	display: none;
}
.input_short .slider_text_l { display: inline-block; }
.input_panel input, .input_panel_right input, .input_panel_w input {
	display: none;
}

.noUi-base {
	background-color: #f6a828;
}
.noUi-origin {
	background-color: white;
}

/*/////////////////////////////////////////////
DATA Output 
//////////////////////////////////////////////*/

#impactCalc, #ImpactCalc_Input, #Content_Wrapper {
	position: relative;
	top: 0px;
	text-align: center;
	margin: 0 auto;
}

#Content_Wrapper {
	background-color: #000000;
	background-size: contain;
	background-repeat: no-repeat;
	padding-top: 0%;
}

#ImpactCalc_Output_Map {
	background-color: #f0f0f0;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

#ImpactCalc_Crater_Depth {
	display: none;
	background-color: #f0f0f0;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

#ImpactCalc_Data_View{
	display: none;
	background-color: #f0f0f0;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

#Output_Footer, #Input_Footer {
	background-color: #c3c3c3;
	text-align: left;
	padding: 1em;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #d3d3d3) );
	background:-moz-linear-gradient( center top, #c3c3c3 5%, #d3d3d3 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#939393', endColorstr='#d3d3d3');
	border-top: 1px solid #888888;
}

#Results_Table_Area {
	background: #f0f0f0;
	float: left;
	width:270px;
	padding: 1em;
}

#map_canvas {
	width: 512px;
	float: right;
}
 
#map_inst {
	font-weight: bold;
	font-size: 1.2em;
}

#Crater_Area {
	height: 400px;
	display: block;
	margin-bottom: 20px;
}

#ACK_inner,
#impactCalc,
#ImpactCalc_Input,
#Content_Wrapper,
#Crater_Area {
	width: 782px;
}
#ImpactCalc_Output_Map, #ImpactCalc_Crater_Depth, #ImpactCalc_Data_View {
	height: 488px;
}
#Results_Table_Area, #map_canvas {
	height: 488px; 
}



#DataTables_L
{
  width: 350px;
  float: left;
   margin-left: 20px;
   margin-top: 10px;
}

#DataTables_R
{
  width: 350px;
  float: right;
  margin-right:20px;
 margin-top: 10px
}

#ImpactorInfo
{
	height: 84px;
}

#DamageInfo
{
	height: 166px;
	overflow-y: auto;
}

#Thead_value
{
	width: 60px;
}


#DataTables_R  h6:not(:first-child), #DataTables_L  h6:not(:first-child)
{
	margin-top: 10px;
}


.text_output {
	border: solid #c3c3c3;
	border-width: 1px 1px;
	padding: 10px;
	font-size: 1em;
	overflow-y: auto;
}


.right_footer_button {
	float: right;
}
.right_footer_button:first-child {
	margin-right: 0px;
}

.output_combo {
	width: 30%;
	margin-bottom: 10px;
	margin: 0 auto;
	display: block;
}

.left_output_text {
	float: left;
	font-size: 1em;
	margin-left: 40px;
}

.datagrid { font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; border-radius: 3px; margin: 0.5em 0; }
.datagrid table { border-collapse: collapse; text-align: left; width: 100%;}
.datagrid table td, .datagrid table th {  padding: 5px 10px; }
.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 1em; font-weight: bold; border-left: 1px solid #0070A8; } 
.datagrid table thead th:first-child { border: none; }
.datagrid table tbody td {color: #00557F; border-left: 1px solid #E1EEF4;font-size: 1em;font-weight: normal; }
.datagrid table tbody .alt td { background: #E1EEf4; color: #00557F; }
.datagrid table tbody td:first-child  { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }
.datagrid table tfoot td div  { border-top: 1px solid #006699;background: #E1EEf4;}  
.datagrid table tfoot td { padding: 0; font-size: 1em; } 
.datagrid table tfoot td div{ padding: 2px; }
.datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; }
.datagrid table tfoot  li { display: inline; }
.datagrid table tfoot li a { text-decoration: none; display: inline-block;  padding: 2px 8px; margin: 1px;color: #FFFFFF;border: 1px solid #006699; border-radius: 3px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; }
.datagrid table tfoot ul.active, 
.datagrid table tfoot ul a:hover { text-decoration: none;border-color: #00557F; color: #FFFFFF; background: none; background-color:#006699;}


/* Search Results */
.search {
	position: relative;
}
.search .searchresults {
	position: absolute;
	left: 0px;
	width: 100%;
}
.search .searchresults ol {
	margin: 0px;
	padding: 0px;
	background-color: #cccccc;
	border: 1px solid #006699;
	border-top: 0px;
	border-radius: 0 0 3px 3px;
}
.search .searchresults li {
	padding: 2px;
	display: block;
	text-align: left;
	background-color: #e1eef4;
	color: #404040;
}
.search .searchresults li:nth-child(2n+1) {
	background-color: white;
}
.search .searchresults li .name {
	padding: 0 0.5em;
	display: inline-block;
}
.search .searchresults li.selected, .search .searchresults li:hover {
	background-color: #006699;
	color: #fefefe;
	cursor: pointer;
}
.search .searchresults li div {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.search .searchresults li .name {
	width: auto;
}


/*============================
 ACK DIALOG
============================== */
div#ACK {
	color: #d0d0d0;
	float: right;
	margin-right: 20px;
	font-size: 1em;
	padding-top: 2px;
}


#ACK:hover {
	color: #ffffff;
}

.modal {
	background-color: rgba(50, 50, 50, 0.95);
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1000;
}
.modal-inner {
	background-color: #efefef;
	border: 1px solid #999999;
	position: relative;
	top: 1em;
	z-index: 101;
	display: block;
	width: 400px;
	max-width: 90%;
	min-height: 200px;
	margin: auto;
	padding: 1em;
	border-radius: 8px;
}
#acknowledgements .modal-inner {
	background-color: #000000;
}
.close {
	float: right;
	z-index: 200;
}
.close button {
	cursor: pointer;
	padding: 0.25em;
	line-height: 1.5em;
	width: 2.5em;
	background-color: #dfdfdf;
	border: 1px solid #cccccc;
	color: black;
	margin-left: 1em;
	margin-bottom: 1em;
}

.modal h2 {
	font-size: 1.2em;
	line-height: 2.4em;
	font-weight: bold;
}
#acknowledgements .close button {
	border: 1px solid black;
	background-color: #efefef;
}
#acknowledgements a { color: #f6a828; }
#ACK_inner {
	background-image: url( '../imgs/background_sm.jpg');
}
#ACK_DIV {
	font-size: 1em;
	color: #ffffff;
	top: 10px;
}

#ACK_DIV h4 {
	font-size: 1em;
	color: #f6a828;
}

#ACK_Imgs {
	float: right;
}

#ACK_Left_Img {
	position:absolute;
	top: 50px;
	right: 1em;
}

#ACK_Right_Img{
	float: right;
	position:absolute;
	bottom: 1em;
	right: 1em;
}

.ack_sect{
	margin-bottom: 10px
}