/**************************************************************************************************
 * At-Rules
 **************************************************************************************************/

@font-face {
    font-family: mplus-2p-light-sub;
    src: url("mplus-2p-light-sub.ttf?v6");
}

@font-face {
    font-family: monosocialiconsfont-sub;
    src: url("monosocialiconsfont-sub.ttf?v1");
}

/**************************************************************************************************
 * Styling Reset
 **************************************************************************************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, svg, canvas,img,dl,dt,dd,section,ul,li {
    margin: 0;
    padding: 0;
    border: 0;
    font: 1em mplus-2p-light-sub,Helvetica,arial,freesans,clean,sans-serif;
    -webkit-font-smoothing: subpixel-antialiased; /* safari disables subpixel antialiasing for some reason */
}

@media (max-width: 825px), (max-height: 700px){
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, svg, canvas,dl,dt,dd,section,ul,li {font-size: 0.8em;}
}

@media all (max-width: 824px){
.section_left{clear:both; width:90%;  height:auto;}
.section_right{clear:both; width:90%;  height:auto;}
}


/**************************************************************************************************
 * Page Styling
 **************************************************************************************************/

a, .text-button {
    color: #888888;
}

.text-button.highlighted {
    color: #e2b42e;
}

.text-button.disabled {
    color: #444444;
}

a:hover, a:focus, .no-touch .text-button:hover, .no-touch .text-button:focus, .text-button:active {
    color: #ffffff;
    cursor: pointer;
    transition: color 125ms ease-in;
    -webkit-transition: color 125ms ease-in;
}
h1 a {
    text-decoration: none;
    color: #ffffff;
}

p.invisible, span.invisible, #sponsor.invisible {
    display: none;
}

svg {
    overflow: hidden;  /* Do not let IE draw outside the bounds of the svg element. */
}

body {
    color: #eeeeee;
    background: #000005;
}

#warn {
    font-size: 2.0em;
    position: absolute;
    top: 10%;
    left: 2%;
}

#display {
    cursor: default;
}

#map, #animation, #overlay, #foreground {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

#sponsor {
    position: absolute;
    text-align: right;
    bottom: 3%;
    right: 2%;
    background-color: rgba(0, 0, 5, 0.6);
    border-radius: 0.5rem/0.5rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-size: 1.0rem;
}

#sponsor:hover #sponsor-hide {
    display: inline;
}

#sponsor a {
    text-decoration: none;
}

#details {
    position: absolute;
    bottom: 3%;
    left: 1%;
    pointer-events: none;  /* This div is just a container--do not let it interfere with operation of the map. */
}

#earth {
    font-size: 2.4rem;
}

#status, #location, #menu {
    font-size: 1.75rem;
}

#status, #location, #earth {
    background-color: rgba(0, 0, 5, 0.6);
    border-radius: 0.5rem/0.5rem;
    display: table;
    margin-top: 1rem;
    padding: 0 1rem 0 1rem;
    pointer-events: all;
}

#menu {
    background-color: rgba(5, 10, 30, 0.85);
    border-radius: 0.5rem/0.5rem;
    overflow: hidden;
    pointer-events: all;

    margin-top: 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    opacity: 1;
    max-height: 34rem;
    transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
    -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}

#menu.invisible {
    margin-top: 0;
    padding: 0 1rem 0 1rem;
    opacity: 0;
    max-height: 0;
    transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
    -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}

#progress {
    padding-left: 1rem;
}

#nav-now {
    padding-right: 1rem;
}

#nav-backward, #nav-backward-more, #nav-forward, #nav-forward-more, #option-show-grid {
    padding-left: 1rem;
    padding-right: 1rem;
}

#show-location {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

#lang {
    font-size: 1.25rem;
    float: right;
    padding-top: 0.5rem;
}

.social-icon {
    font-size: 2.25rem;
    font-family: monosocialiconsfont-sub,sans-serif;
    padding-left: 0.25rem;
    text-decoration: none;
    position: relative;
    top: 0.1rem;
}

.internal-link {
    text-decoration: none;
}

.sup {
    position: relative;
   	bottom: 0.3em;
   	font-size: 0.6em;
}

.sub {
    position: relative;
   	top: 0.3em;
   	font-size: 0.6em;
}

/**************************************************************************************************
 * SVG Element Styling
 **************************************************************************************************/

.coastline, .lakes {
    stroke: #ffffff;
    stroke-width: 1.25;
    fill: none;
}

.firefox .coastline, .firefox .lakes {
    stroke-width: 1.0;
}

.graticule {
    stroke: #505050;
    stroke-width: 1.0;
    fill: none;
}

.hemisphere {
    stroke: #707070;
    stroke-width: 1.25;
    fill: none;
}

.background-sphere {
    stroke: none;
    fill: #303030;
}

.foreground-sphere {
    stroke: #000005;
    stroke-width: 4.0;
    fill: none;
    -moz-user-select: none;  /* Oddly, Win FF sometimes selects this SVG element. Disable. */
    user-select: none;
}

.location-mark {
    stroke: #3aff3a;
    stroke-width: 2.5;
    fill: none;
}

.about_noti{padding-left:0.5rem; font-size:1rem; color:#878787;}

/**************************************************************************************************
 * About Page
 **************************************************************************************************/
ul,li,dl,dd,dt{margin:0; padding:0; list-style:none;}

body.about_wrap{background-color:#f7f7f7; color:#333333; /*min-width:824px;*/}

.header{
	width:100%;
	height:50px;
	text-align:center;
	padding-top:10px;
	border-bottom:1px solid #eaeaea;
	background-color:#ffffff;
	}

.about_bg{
	padding-top:50px;
	}


#about {
    font-size: 1em;
}

.section_left{width:50%; height:auto; float:left;}
.section_right{width:50%;  height:auto; float:left;}

#text_box{
width:95%;
min-width:320px;
margin-left:2%;
}



#text_box div.blurb {
 padding-top: 3rem;
 padding-bottom: 3rem;
 margin:0 auto 50px auto;
 width:100%; 
 border:1px solid #eaeaea;
 text-align:justify;
 font-size:18px;
 background-color:#ffffff;
 box-shadow:5px 5px 5px #f2f2f2;
 height:auto;
}



#text_box h1.center_tit {
    font-size: 1.8rem;
    text-align: center;
	height:70px;
	width:100%;
	height:70px; 
	background-color:#1b538d;
	color:#ffffff;
	margin:0 auto;
}


.tit_under{
margin:0 auto;
display:block;
width:300px;
height:70px; 
line-height:65px;
text-align:center;
}
.tit_under_long{
margin:0 auto;
display:block;
height:95px; 
text-align:center;
width:500px;
padding-top:5px;
}


div.blurb p.center {
    padding-right: 3%;
    padding-left: 4%;
	width:93%;
}


.center_box {
    padding-left: 3%;
	padding-top:3%;
	padding-bottom:40px;
	width:93%;
	float:left;
}

.center_box2{
    padding: 3%;
	width:93%;
	float:left;
	background-color:#ffffff;
}


.infor_tit{
width:20%;
height:95px;
float:left;
text-align:center;
font-weight:bold;
padding-top:15px;
min-width:55px;
border-right:1px solid #eaeaea;
}



.center_box ul{
width:70%;
padding-left:5%;
height:100px;
float:left;
}

.center_box ul li{
font-size:1rem; 
background:url(../images/about_list2.gif) no-repeat left 13px;
padding-left:25px;
height:auto;
}


.center_box2 dl{
width:100%;
height:auto;
padding:0;
}

.center_box2 dl dt{
width:15%;
height:50px;
float:left;
font-weight:bold;
border-right:1px solid #eaeaea;
line-height:50px;
margin-right:3%;
}

.center_box2 dl dd{
font-size:1rem; 
height:45px;
width:75%;
float:left;
padding-top:10px;
}



div.blurb section{
 padding-top: 3rem;
 width:100%; 
 background-color:#ffffff;
 height:auto;
}

div.blurb section h3{
width:92%;
font-weight:bold;
text-align:left;
border-bottom:1px solid #eaeaea;
margin-left:4%;
padding-bottom:5px;
margin-bottom:10px;
}

p.text-center a img{width:90%; height:auto;}

#cover {
    border: 1px solid #eeeeee;
}

p.center a:hover, a:focus{
    color: #1b538d;
    cursor: pointer;
    transition: color 140ms ease-in;
    -webkit-transition: color 140ms ease-in;
}
/*
#about .blurb img {
    padding-top: 2rem;
}

#about img {
    display: block;
    margin: auto;
}

#about:first-child {
    padding-top: 3rem;
}



#about .left {
    width: 30%;
    float: left;
    text-align: right;

}

#about .right {
    width: 60%;
    float: right;
    margin-right: 10%;
}

#about .center {
    text-align: center;
    padding-right: 10%;
    padding-left: 10%;
}

#about p.text-center {
    text-align: center;
}
*/
#about .pad {
    visibility: hidden;
}

#closing {
    padding-bottom: 2.5rem;
}