/* removes overlay */
#preload {
	display: none;
}
img {
	display: unset !important;
}

#embedded {
	display: none;
	position: fixed;
	background-color: #e8e0d8;
	top: 0px; left: 0px; right: 0px; bottom: 0px;
	z-index: 10000;
	text-align: center;
	cursor: pointer;
}

#embedded_back {
	background-image: url("../img.nuclearsecrecy.com/embedded.jpg");
	background-repeat: no-repeat no-repeat;
	background-position: center;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: -1;
}

#embedded #preload_title {
	color: black;
	padding-bottom: 1vh;
}
#embedded_cap {
	color: dimgray;
	font-size: 14pt;
}

@font-face {
  font-family: "Helvetica Neue";
  font-style: normal;
  font-weight: 200;
  src: url("HelveticaNeue-Thin-13.woff2");
  src: local(""),
       url("HelveticaNeue-Thin-13.woff2") format("woff2"),
       url("HelveticaNeue-Thin-13.woff") format("woff"),
       url("HelveticaNeue-Thin-13.ttf") format("truetype"),
}

/*@font-face {
	font-family: "HN";
	src: url('HelveticaNeue-01.ttf'); 
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "HN";
	src: url('HelveticaNeue-Bold-02.ttf'); 
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "HN";
	src: url('HelveticaNeue-BoldItalic-04.ttf'); 
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: "HN";
	src: url('HelveticaNeue-Italic-03.ttf'); 
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "HN";
	src: url('HelveticaNeue-Thin-13.ttf'); 
	font-weight: 200;
	font-style: normal;
}*/


body {
	font-family: "Lato","Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-size: 10pt;
	margin: 0;
	padding: 0;
	background-color: #e0e0e0;
}

.nukemap_name {
	font-family: "Helvetica Neue", "Lato", "Helvetica", Arial, sans-serif;
}


#theMap {
	font-family: "Lato",Arial, sans-serif;
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 435px;
	bottom: 0px;
	background-color: #e8e0d8;
	z-index: 10;
}


#loadingMap {
	background-color: rgb(232, 224, 216,0.7);
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;	
	pointer-events: all;
	cursor:wait;
	
/*	width: 168px;
	height: 268px;
	margin-left: auto;
	margin-right: auto;
	top: 30%;*/
	z-index: 10000;
}


#loadingCap {
	font-size: 120%;
	text-align: center;
	position: relative;
	color: #000;
	letter-spacing: 1px;
	z-index: 10;
	margin-left: auto;
	margin-right: auto;
	width: 70%;	
}

#loadingBarHolder {
	display: none;
	border: 1px solid dimgray;
	width: 30vw;
	height: 2vh;
	margin-top: 1vw;
	margin-left: auto;
	margin-right: auto;
}
#loadingBar {
	margin: 0.4vh 0.3vw 0.5vh 0.3vw;
	background-color: gray;
	height: 1.2vh;	
	max-width: 29.4vw;
	width:0%;
}


#loadingMapMarker {
	background: url("../img.nuclearsecrecy.com/nukemap_marker_back.png");
	background: url("../img.nuclearsecrecy.com/nukemap_marker_back.svg"), linear-gradient(transparent, transparent); /* should be ignored by non-SVG compliant browsers */
	height: 33vh;
	margin-top: 24vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;	
}

#loadingMapAtom {
	background: url("../img.nuclearsecrecy.com/atom.png");
	background: url("../img.nuclearsecrecy.com/atom.svg"), linear-gradient(transparent, transparent);  /* should be ignored by non-SVG compliant browsers */
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-size: contain;
	background-repeat: no-repeat;
	width: 15vh;
	height: 15vh;
	background-position: center;
	top: 3.2vh;
	z-index: 11;	
}
.atomspin {
	-webkit-animation:spin 2.5s ease-in-out infinite;
	-moz-animation:spin 2.5s ease-in-out infinite;
	animation:spin 2.5s ease-in-out infinite;
}
#atomqmark {
	position: relative;
	text-align: center;
	top: 3.25vh;
	line-height: normal;
	font-weight: bold;
	color: white;
	font-size: 13vh;
}


@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

.mapMax {
	right: 21px !important;
}

#hider-arrow,.hider-arrow {
	cursor: pointer;
}
.hider-arrow::after {
	content: "▶︎";
}
.hider-arrow.expanded::after {
	content: "▼︎";
}

button, input[type="checkbox"], input[type="radio"], input[type="submit"]  {
	cursor: pointer;
}

#topFrame {
	position: absolute;
	top: 0;
	padding-top: 5px;
	width: 401px;
	background-color: #e0e0e0;
	z-index: 10;
}

#bottomFrame {
	width: 395px;
	top: 50px;
	position: relative;
}

#hiddenFrame {
	display: none;	
}

.interface_minimize_div a {
	text-decoration: none;
	font-size: 12pt;
}

#restore_interface {
	display: block;
	text-align: center;
	position: absolute;
	bottom: 0px;
	padding-left: 2px;
	padding-top: 200px;
}

#theSettings {
	background-color: #e0e0e0;
	position: absolute;
	padding-left: 15px;
	padding-right: 10px;
	padding-top: 10px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	width: 400px;
	width: 410px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 100;
	border-left: 1px solid rgb(200, 200, 200);
	box-shadow: -0.5em 0 0.5em rgba(127,127,127,0.2);
}

.settingsMin {
	padding: 0 !important;
	width: 20px !important;
}

#theLegend {
	font-size: 10pt;
}

#title, #logo big {
	display: inline-block;
	font-size: 24pt;
	letter-spacing: 3px;
	font-weight: 200;
	/* margin-top: 6pt;*/
}

#title a {
	color: #000;
	text-decoration: none;
}

#title a:hover {
	color: #3d6494;
}

#theLegend big, #thePermalink big {
	font-size: 14pt;
	font-weight: 400;
	letter-spacing: 1px;
}

#thePermalink {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 0.3em;
}

#permalink {
	font-weight: bold;
}


.legendkey {
	margin-top: 0px;
	position: absolute;
	margin-right: .5em;
	width: 1em;
	height: 1em;
	border-radius: 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
}
.legendkey .legendkey_symbol {
	margin-left: -2px;
	width: 1em;
	text-align: center; 
	display: inline-block;
}
#theLegend .effectCaption, #theLegendFallout .effectCaption {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	border: 2px solid rgba(255,255,255,0);
	padding-left: 0.8em;
	padding-right: 0.8em;
	margin-bottom: 0.25em;
	margin-top: 0.25em;	
}
#theLegendFallout .effectCaption {
	padding-bottom: 0.25em;
	padding-top: 0.5em;
	
}
#theLegendFallout .effectCaptionHeader {
	text-indent: 1.5em;
}

.highlight {
	background-color: rgba(255,255,255,0.4);
	border: 2px solid rgba(255,255,255,0.7) !important;
}

#theLegend .effectTitleRadius {
	margin-left: 1.7em;
	display: block;
}

#theLegend .effectImage {
	padding: 0.1em;	
	float: right;
}
.effectImage:after{
	content: "";
  display: table;
  clear: both;
}

#theLegend .effectImage img {
	width: 190px;
	z-index: 100;
	background-color: #e0e0e0;
	margin-top: -2px;
	border: 1px solid #e0e0e0;
	border-radius: 1em;
	padding: 2px;
}

#theLegend a.effectImage img:hover {
	border: 1px solid #d0d0d0;
	
	box-shadow: 0 0 1em rgba(0,0,0,.1);
}

#theLegendFallout .legendkey {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	-moz-border-top-left-radius: 0;
	-moz-border-bottom-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 0;
}

#theLegendFallout ul {
	margin-top: 0;
	margin-bottom: .5em;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 9pt;
}

.bold {
	font-weight: bold;
}

sub {
	font-size: 11pt;
	vertical-align: -25%;
}

sub#version_faq {
	vertical-align: 0%;
}

hr {
	border: 0;
	border-top: 1px solid gray;
}

#hr_bottom {
	padding-bottom: 10px;
	clear: both;
}

a:link {
	color: #3d6494; 
}

a:visited {
	color: #3d6482;
}

a:active {
	color: #3d64c8;
}

.shares, .shares div {
	display: inline;
	vertical-align: top;
}

.shares iframe, .widget iframe {
	margin: 0px;
}

.option_input {
	width: 3em; 
	text-align: right;
}

.option_input_wind {
	width: 1.5em;
	text-align: right;
}

.option_input_angle {
	width: 2em;
	text-align: right;

}

.option_input_fission {
	width: 1.9em;
	text-align: right;
}

select {
	font-size: 9pt;
	margin: 2px;
}

input {
	margin: 2px;
}

a.addrow {
	text-decoration: none;
}

.casualty {
	font-weight: bold;
	font-size: 24pt;
	margin: 0;
	margin-top: -.2em;
	margin-bottom: .1em;
	display: block;
	padding: 0;
}

#running_total {
	float:right;
	border-left: 1px solid #a0a0a0;
	padding-left: 1.5em;
	width: 200px;
}

a.switch-unit-switcher {
	text-decoration: none;
	border-bottom: 1px dotted #3d6494;
	color: black;
}

#theLegend small, #theLegend .caption {
	font-size: 8pt !important;
	line-height: 12pt;
}

#theLegend .caption {
	margin-top: .2em;
}

#detonate {
	float: left;
	margin-top: 2px;
}

.btn-large {
	padding: 11px 19px;
	font-size: 17.5px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
	margin-top: 4px;
}

.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #bd362f;
	background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
	background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffee5f5b", endColorstr="#ffbd362f", GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
color: #ffffff;
	background-color: #a9302a;
}

.btn-danger.disabled,
.btn-danger[disabled] {
	opacity: 0.5;
}

.btn-danger:active,
.btn-danger.active {
	background-color: #942a25 \	;
}

#loadingDiv {
	z-index: 10000;
	position: absolute;
	top: 0;
	background-color: #e0e0e0;
	width: 350px;
	padding: 20px;
	height: 90%;
}

#loadingDiv h2 {
	text-align: center;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: .5em;
}

#loadingDiv small {
	display: block;
	width: 100%;
	text-align: right;
}

#detonate_error {
	display: block;
	font-size: 12pt;
	margin: 0;
	color: red;
	display: none;
	padding: 0;
	clear: both;
}

#progress {
	display: inline-block;
	position: relative;
	top: 3px;
	background-image: url("../img.nuclearsecrecy.com/progress.gif");
	height: 16px;
	width: 16px;
}

.def, .def-bracket1, .def-bracket2 {
	color: gray;
	font-style: normal;
	font-size: 80%;
	position: relative;
	border-bottom: 1px dotted blue !important;
	text-decoration: none;
}
.def_yield {
	color: #000;
	font-size: 100%;
}

.def {
	margin-left: 2px;
	margin-right: 2px;
}


#casualty_info {
	font-size: 9pt;
}

#sample_info ul {
	margin-left: .5em;
	padding-left: 1em;
}

#stat_line {
	font-size: 11pt;
	display: block;
	margin-bottom: 0.2em;
}

#minimize_interface img {
	opacity: .3;
}

#restore_interface img {
	opacity: .2;
}
#minimize_interface img:hover, #restore_interface img:hover {
	opacity: .8;
}

#createdby {
	font-size: 12pt;
	display: block;
	margin-bottom: 0.2em;
}

#logo {
	position: absolute;
	z-Index: 1000;
	left: 15px;
	bottom: 30px;
	position: absolute;
	font-weight: 200;
	text-shadow: 0px 0px 2px #000, 0px 0px 10px #000;
	color: #fff;
}

.ungrayscale {
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  -o-filter: none !important;
  filter: none !important;
  filter: none !important; /* Firefox 4+ */
  filter: none !important; /* IE 6-9 */
}

#version_faq {
	color:dimgray; 
	font-weight: 300;
	font-size: 10.5pt;
	display: none;
}

#faq {
	color: dimgray; 
	text-decoration: none; 
	border-bottom: 1px dotted #a0a0a0;
}

#nukemap3d {
	position: absolute;
	top: 5px;
	right: 0px;
	border-left: 1px solid #a0a0a0; 
	padding-left: 0.8em;
	padding-right: 0.2em;
	text-align: center; 
	font-size: 9pt;
}

#nukemap3d em {
	color: #a0a0a0;
}
#nukemap3d a {
	text-decoration: none;
	font-size: 14pt;
	letter-spacing: 2px; 
	font-weight:200;
}

#topFrame hr {
	margin-top: 5px;
	margin-bottom: 5px;
}

#city_hr, #yield_hr {
	margin-top:5px;
	margin-bottom:5px
}

#ge_icon {
    margin-right: 5px;
    margin-left: 5px;
}

.fallout_submenu_dash {
    margin-left: 5px;
    color: gray;
}

#buttons_other {
    margin-left: 120px;
    line-height: 20px;
    margin-top: 2px;
    position: relative;
    top: 2px;
}

#buttons_other button {
	margin-bottom: 3px;
}

#settings_cep {
    display: none;
}

#wind_prog img {
    position:relative;
    top:2px;
}

#lang_sel {
	position: absolute;
	left: 170px;
	width: 83px;
	top: 8px;
	font-size: 5pt;
	opacity: 0.5;
}

#lang select:hover {
	opacity: 1;
}

#classic_link_hr, #classic_link {
    display: none;
}

#other_options {
	font-size: 9pt;
	position: relative;
}

.otherOptionCap {
	position: relative;
	display: inline-block;
	top: -2px;
}

.interface_minimize_div {
	display: inline-block;
	position: absolute;
	top: 0px;
	right: 0px;
}

#lang { display: none; }

#kmzmenu {
    border-radius: 5px;
    width: 50%;
    min-width: 500px;
    border: 1px solid gray;
    background-color: #e0e0e0;
    font-size: 10pt;
    padding: 10px;
    margin-left: 25%;
    top: 20%;
    position: absolute;
    box-shadow: 0px 5px 30px rgba(0,0,0,.5);
    z-index: 11000;
}

#kmzmenu h2 {
    margin: 0;
    padding: 0;
    margin-bottom: 2px;
    font-size: 13pt;
    font-weight: normal;
}

#kmzmenu_detlist {
    font-size: 9pt;
    color: gray;
}

#kmzmenu #option_header {
    font-weight: bold;
    display: block;
    padding: 0;
    margin: 0;
    padding-top: 5px;
}

#kmzmenu #exportKMZ {
    font-size: 16pt;
    margin-left: auto;
    margin-right: auto;
    padding-left: .8em;
    padding-right: .8em;
    background-color: #f0f0f0;
    color: black;
    box-shadow: 0px 2px 20px rgba(0,0,0,.5);
}

#kmzmenu #exportKMZ:hover {
	background-color: gray;
	color: white;
}

#kmzmenu ul {
	margin: 0;
	padding: 0;
	padding-left: 1em;
	font-size: 9pt;
}

#kmzmenu #kmzmenu_basic ul {
	font-size: 10pt;
}

#kmzmenu .adv_submenu {
	display: block;
	text-decoration: underline;
	padding-bottom: 0px;
	margin: 0;
	padding-bottom: .5em;
	padding-top: .5em;
}

#kmzmenu input {
	width: 30px;
	text-align: right;
	margin-bottom: 2px;
}

#kmzmenu select {
	width: 90px;
}

#kmzmenu_adv {
	display: none;
}

#kmzmenu #kmzadv_showhide {
	font-weight: normal;
	text-decoration: none;
}

#kmzmenu table {
    width: 100%;
    font-size: inherit;
    padding: 0px;
    margin: 0px;
}

#kmzmenu td {
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}

#kmzmenu #exportKMZcell {
    width: 40%;
    text-align: center;
}

#kmzmenu #kmzfilecaption {
    font-size: 9pt;
    margin-top: .5em;
    font-style: italic;    
}

#kmzForm {
    margin: 0;
    padding: 0;
}

#kmzmenu #closekmzwindow {
    position: absolute;
    right: 10px;
    top: 5px;
}

#kmzmenu #closekmzwindow a {
    display: block;
    text-align: center;
    color: gray;
    text-decoration: none;
    font-size: 14pt;
    border: 1px transparent gray;
    width: 1.3em;
    height: 1.3em;
}

#kmzmenu #closekmzwindow a:hover {
    color: white;
    background-color: gray;
    border-radius: 5px;
}

#kmzmenu #closekmzwindow a:active {
    color: black;
}

#kmzmodal {
	display: none;
}

#wordmark {
	position: relative;
}

.leaflet-attribution-flag {
	display: none !important;
}

.mapbox-wordmark {
  position: absolute;
  display: block;
	height: 25px;
  width: 90px;
  left: -10px;
  bottom: 30px;
  overflow: hidden;
	
  /* `background-image` contains the Mapbox wordmark */
	background-image: "https://img.nuclearsecrecy.com/wordmark-mapbox.svg" !important;
	background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: 90px 20px !important;
}

#casualties_detail {
	display: none;
}

.det_group { 
	margin-bottom: 0px;
}

#casualties_detail ul {
	margin-top: 0px;
}


.mb_marker {
	border: 1px solid red;
	background-size: contain;
	background-repeat: no-repeat;
}


#modals {
	z-index: 50000 !important;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	display: none;
}

#modal_back {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	background-color: rgba(255,255,255,.7);
	z-index:30000;
}

#modal_buttons {
	text-align: center;
}

.modal button {
	font-size: 12pt;
	font-weight: 400;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding: .5em;
	padding-left: 1em;
	padding-right: 1em;
	border-color: silver;
	border-radius: 0.7em;
	border-width: 1px;
	min-width: 6em;
	box-shadow: 0 0 0.5em 0.2em rgba(0,0,0,.1);
}

.modal button:hover {
    background-color: gray;
    color: white;
}

#modal_header {
	color: dimgray;
	font-weight: bold;
	font-size: 1.3em;
	position: absolute; 
	top: 12px;
}


#modal_contents {
	position: relative;
	width: 40em;
	border-radius: 5px;
	border: 1px solid gray;
	background-color: #e0e0e0;
	padding: 2em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30vh;
	box-shadow: 0px 5px 30px rgba(0,0,0,.5);
  z-index: 40000;
}

#modal_text {
	margin-top: 1.5em;
}

#modal_contents p {
	font-size: 1.5em;
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

#permalinkstatus {
	color: #008079;
	text-align: center;
	font-size: 1.2em !important;
	font-weight: bold;
	padding-bottom: 0.7em;
}

#permalink_url_input {
	font-size: 1em;
	padding: 0.2em;
	width: 18.7em;
}

#permalink_url button {

}

#copyimg {
	background-image: url("../img.nuclearsecrecy.com/copy.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1em 1em;
	display: inline-block;
	width: 1em;
	height: 1em;
}
#copytxt {
	margin-left: 0.3em;
}

.modal h2 {
	margin: 0;
	padding: 0;
	margin-bottom: 2px;
	font-size: 13pt;
	font-weight: bold;
}

#close_modal {
    position: absolute;
    right: 10px;
    top: 5px;
}

#close_modal a {
    display: block;
    text-align: center;
    color: gray;
    text-decoration: none;
    font-size: 2em;
    border: 1px transparent;
    width: 1.3em;
    height: 1.3em;
}

#close_modal a:hover {
    color: white;
    background-color: gray;
    border-radius: 5px;
}

#close_modal a:active {
    color: black;
}

/* Hide the temp markers */
#markerShadowSmall, #markerShadowLarge {
	display: none !important;
}

#theLegendCasualties {
	clear: left;
}


#book {
	height: 50px;
	opacity: .8;
	margin-top: 4px;
}

#book:hover {
	opacity: 1;
}

#book_footer {
	float: right;
	width: 150px;
	margin-left: 10px;
	margin-bottom: 5px;
}
#book_footer a, #book_footer span {
	font-size: 8pt;
	display: block;
}
.sponsor img {
	height: 50px;
	padding-top: 5px;
	padding-bottom: 2px;
	opacity: .8;
}

#book_footer img {
	width: 150px;
	height: 75px;
}

.sponsor img:hover {
	opacity: 1;
}

#doomsday {
	font-weight: 600;
	letter-spacing: 1px;
}

.sponsor {
	text-align: center;
	font-size: 8pt;
	width: 25%;
	display: inline-block;
	vertical-align: top;
}

#sponsor_1 {

}

#sponsor_2 {
}

#footer {
	text-align: center;
	margin-bottom: 8px;
	clear: both;
}


#det_list {
	width: 230px;
	height: 70px;
}

#det_editor button {
	margin: 1px;
}

#modal, .modal {
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.7);
	z-index: 10000;
}

#modal_image {
	z-index: 10001;
	position: absolute;
	width: 100%;
	text-align: center;
	padding-top: 20%;
}

#modal_image img {
	background-color: #fff;
	box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,0.2);
	padding: 2em;
	border-radius: 1em;
	max-width: 80vw;
}

.select_separator {
	border-top: 1px dotted #ccc; 
	margin: 5px 0;
}

#effectsErrors li {
	margin-bottom: 0.5em;
}

#presetcity,#preset {
	width: 22.8em;
	font-size: 13pt;
	padding: 2px;
	background: rgba(255,255,255,0.5);
	border: 1px solid gray;
	padding: 3px;
	border-radius: 5px;
}

#theKt {
	font-size: 16pt;
	width: 5em;
	text-align: right;

}

#malert {
	font-size: 12pt;
	background-color: silver;
	position: relative;
	width: 60vw;
	padding: 1.5em;
	border-radius: 1em;
	margin-left: auto;
	margin-right: auto;
	line-height: 16pt;
	top: 20vh;
	box-shadow: 0em 0em 2em rgba(0,0,0,.8);
}

/* things mapbox.css messes up */

.leaflet-control-layers-toggle {
	background-position: 50% 50% !important;
}

.leaflet-control-layers-toggle {
	opacity: 1 !important;	
}

.leaflet-bar a, .leaflet-control-layers-toggle {
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	display: block !important;
}

.leaflet-bar a, .leaflet-bar a:hover {
	background-color: #fff !important;
	border-bottom: 1px solid #ccc !important;
	text-align: center !important;
	text-decoration: none !important;
	background-image: none !important;
}

.leaflet-control-zoom-in, .leaflet-control-zoom-out {
	content: inherit !important;
	text-indent: 0 !important;
}

.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none !important;
}

.leaflet-touch .leaflet-control-layers-toggle {
	width: 36px !important;
	height: 36px !important;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4) !important;
	border: none !important;

}

#modalmap {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;		
	z-index: 10000;
	display: none;
	background-color: rgba(0,0,0,0.4);
}

#spinner {
	background-size: cover;
	opacity: 0.5;
	height: 20em;
	width: 20em;
	position: relative;
	top: 30%;
	margin-left: auto;
	margin-right: auto;
	animation:spin 3s ease infinite;
}

@keyframes spin { 
	100% { 
			transform:rotate(360deg); 
	} 
}

.windsock img {
	opacity: 0.6;
}

.windsockUp, .windsockUp img {
	opacity: 1.0 !important;
	transform: scale(1.5,1.5);
}

.markerShadow {
	opacity: 0.8;
	transform: none;
}

.markerShadowUp {
	opacity: 0.6;
	transform: scale(0.8,0.8) !important;
}

.windsockShadow {
	opacity: 0.8;
	transform: none;
}
.windsockShadow {
	opacity: 1.0;
}

.windsockShadowUp {
	opacity: 1.0;
	transform: scale(1.0,1.0) !important;
}

.optionUL {
	margin-top: 2px; 
	margin-bottom: 2px;
}

ul.optionUL {
	list-style-type: none;
}

input[type="checkbox"],input[type="radio"] {
	vertical-align: text-bottom;
}

.collapsed-content {
	display: block;
}

#adv_options, #basic_options, #yield_div, #detonate_div {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
#yield_div {
	margin-top: 0;
}	
.advanced-heading {
	margin-top: 0.5em;
	margin-bottom: 0.4em;
}
#button_note_div {
	margin-top: 0.4em;
	clear: left;
}

#panemoverholder {
	display: none;
}

/* MOBILE */
/* This is a stopgap measure, more or less. Makes it marginally usable. */
@media only screen and (max-device-width: 1280px) {
	body {
		font-size: 1em;
	}
	#modal_contents {
		margin-top: 5%;
	}
	.modal button {
		font-size: 1em;
	}
	#modal_buttons button {
		font-size: 1.5em;
	}
	#permalink_url_input {
		width: 42vw;
	}

	.maplibregl-ctrl-group button, .leaflet-control-layers .leaflet-control {
		height: 10vh !important;
		width: 10vh !important;
	}

	.maplibregl-ctrl button .maplibregl-ctrl-icon {
		background-size: 3vw 3vw !important;
	}
	.leaflet-control-layers-toggle {
		width: 10vh !important;
		height: 10vh !important;
		background-size: 6vh 6vh !important;
	}
	.leaflet-control-layers label {
		font-size: 3vh !important;
	}
}
@media only screen and (max-device-width: 1280px) and (orientation: portrait) {
	.maplibregl-ctrl-group button, .leaflet-control-layers .leaflet-control {
		height: 10vw !important;
		width: 10vw !important;
	}
	.maplibregl-ctrl button .maplibregl-ctrl-icon {
		background-size: 3vh 3vh !important;
	}

	.leaflet-control-layers .leaflet-control .leaflet-control-layers-expanded {
		height: 30vw !important;
		width: 30vw !important;
	}
	.leaflet-control-layers-toggle {
		width: 10vw !important;
		height: 10vw !important;
		background-size: 6vw 6vw !important;
	}
	.leaflet-control-layers label {
		font-size: 3vw !important;
	}
	.leaflet-control-layers-selector {
		width: 0.5em !important;
		height: 0.5em !important;
		margin-right: 0.3em !important;
	}

	#theMap {
		right: 0px;
		bottom: 30vh;
		top: 8.4em;
		z-index: 10;
	}
	#theSettings {
		position: absolute;
		top: 70vh;
		width: 100%;
		padding: 0px;
		padding-left: 1em;
		box-shadow:0em -0.5em 0.5em rgba(127,127,127,0.2);
		box-shadow: 0 -1em 1em rgba(127,127,127,0.2);
		background: linear-gradient(180deg, rgba(224,224,224,1) 0%, rgba(192,192,192,1) 100%);
		border-top: 1px solid rgb(200,200,200);
	}
	#nukemap3d { display: none }
	#topFrame {
		position: fixed;
		width: 100%;
		padding-left: 4em;
		z-index: 10020;
		padding-bottom: 0.5em;
		padding-top: 0.5em;
		box-shadow: 0 1em 1em rgba(127,127,127,0.2);
		background: linear-gradient(180deg, rgba(224,224,224,1) 0%, rgba(192,192,192,1) 100%);
		border-bottom: 1px solid gray;
	}
	#topFrame sub {
		font-size: 4em;
		vertical-align: 0%;
		margin-left: 0.4em;
	}
	#topFrame hr {
		display: none;
	}
	#bottomFrame {
		top: 2em;
		width: 90%;
		margin-left: 2em;
		margin-right: 2em;
	}
	#title {
		font-size: 6em;
	}
	body {
		font-size: 0.8em;
	}
	input, select, #preset, #presetcity {
		font-size: 2em !important;
	}
	#theKt {
		font-size: 3em !important;
	}


	.mobilegroup {
		display: block;
		text-align: center;
		margin-top: 0.5vh;
		margin-bottom: 0.5vh;
	}
	button {
		font-size: 3.2em;
	}
	input[type="radio"], input[type="checkbox"] {
		width: 1em; height: 1em;
	}
	#other_options input[type="radio"], input[type="checkbox"] {
		width: 0.7em; height: 0.7em;
	}
	#presetcity, #preset {
		width: 100%;
	}
	small {
		font-size: 90%;
	}
	#buttons_other {
		margin-left: 0;
	}
	button, select {
		margin: 0.1em !important;
		padding: 0.2em 0.3em 0.2em 0.3em !important;
	}
	#detonate {
		float: none;
		font-size: 5em !important;
		padding: 0.5em 1em 0.5em 1em !important;
		border-radius: 0.3em;
	}
	.sponsor, #book_footer a, #book_footer span {
		font-size: 2em;
	}
	#other_options {
		font-size: 1.2em;
	}
	.interface_minimize_div {
		display: none;
	}
	#stat_line {
		font-size: 1em;
	}
	#effects-header {
		font-size: 1.5em;
	}
	#theLegend small, #theLegend .caption {
		font-size: 0.8em !important;
		margin-top: 1.5em;
		font-style: italic;
	}
	.effectCaption ul li {
		font-size: 1.3em;
		margin-left: 2em;
	}
	#adv_options, #basic_options, #yield_div, #detonate_div {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	#yield_div {
		margin-top: 0;
	}	
	.advanced-heading {
		margin-top: 0.7em;
		margin-bottom: 0.5em;
	}
	#loadingMapMarker {
		margin-top: 6vh;
	}
	#loadingCap {
		font-size: 4em;
		line-height: 1em;
		width: 90%;
	}
	#loadingBarHolder {
		width: 60vw;
	}
	#loadingBar {
		margin: 0.4vh 1vw 0.5vh 1vw;
		max-width: 58vw;
	}

	#panemoverholder {
		display: block;
		width: 94.5vw;
		position: relative;

	}
	#panemover {
		display: block;
		position: relative;
		height: 3vh;
		margin-bottom: 0.5vh;
		margin-top: -1.25vh;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		background: url("../img.nuclearsecrecy.com/collapser.png");
		background: url("../img.nuclearsecrecy.com/collapser.svg"), linear-gradient(transparent, transparent); /* should be ignored by non-SVG compliant browsers */
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	#panemover.up {
		rotate: 180deg;
	}
	#theSettings.movedup {
		top: 9vh;
	}
	#book_footer {
		float: none;
		width: 100%;
		margin-top: 1vh;
	}
	#book_footer small {
		font-style: italic;
	}
	#book_footer small, #book_footer a, #book_footer span {
		font-size: 1.5em;
	}
	#book_footer img {
		width: 50%;
		height: inherit;
		padding: 1vh;
	}
	#sponsors {
		margin-top: 1vh;
	}
	#sponsors small {
		font-size: 1.4em;
	}
	#city {
		font-size: 1.2em;
	}
	#yield_div, #captioncity, #basic_options, #advanced-options-header, #hider-arrow, #captiondetonate {
		font-size: 1.4em;	
	}
	.sponsor {
		width: 40%;
		font-size: 2.4em;
		margin-top: 1vh;
		margin-bottom: 1vh;
	}
	.sponsor img {
		height: unset;
	}
	.collapsed-content {
		font-size: 2em;
	}
	#thePermalink big {
		font-size: 2.5em;
		margin-top: 0.8em !important;
		display: block;
		margin-bottom: 0.6em !important;
	}
	#modal_contents {
		width: 85vw;
		font-size: 220%;
	}
	.modal button {
		padding: 0.5em !important;
	}
	#permalink_url {
		text-align: center;
	}
	#permalink_url_input {
		display: block;
		margin-bottom: 0.5em;
		width: 80vw;
	}
	#button_note_div {
		font-size: 1.5em;
	}
	#get_local_wind {
		font-size: 2em;
	}
	#credits {
		font-size: 2em;
	}
	#theSettings hr {
		margin-top: 2em;
		margin-bottom: 2em;
	}
	#createdby {
		font-size: 1.5em;
	}
	#theLegendCasualties {
		text-align: center; 
		font-size: 2em;
		clear: left;
	}
	.casualty {
		font-size: 4em;
	}
	#city_input button {
		font-size: 2.5em;
	}
}

@media only screen and (prefers-color-scheme: dark) and (orientation: landscape) {
	#loadingMap {
		background-color: rgba(87,81,75,0.7);
	}
	#loadingCap {
		color: #fff;
	}
	#theSettings, #topFrame {
		background-color: rgb(90, 90, 90);
		color: #ffffff;
		border-color: #2a2a2a;
	}
	#theSettings hr {
		border-color: silver;
	}
	#title a {
		color: #fff;
	}
	.def, .def-bracket1, .def-bracket2 {
		color: silver;
		border-color: gray !important;
	}
	#faq, #version_faq {
		color: silver;
	}
	a:link, a:visited {
		color: #9ac3f4;
		text-decoration: none;
	}
	a:hover {
		text-decoration: underline;
		color: #fff;
	}
	#minimize_interface img, #restore_interface img {
		opacity: 0.8;
	}
	#presetcity, #preset { 
		background-color: rgba(255,255,255,.9);
	}

}