/*
				d8b
				888
				888
	d8b d8b d8b 888
.db 888888888888888
888 88888888P "4888
888 888888888   888
88888    d888   888
88888b         d88P
"48888.d888888888P
  "8888888888888"
   "88888888888P
*/


/* //////////////    NAV    \\\\\\\\\\\\\\ */

.sunSize .navButton {
	color: #ffffff;
	background: #545454;
	box-shadow: 0 0 0 1px #232323 inset, 0 2px 0 0 #383838;
}

.sunSize #currentPage {

}

.sunSize .navButton:hover {
	color: #ffffff;
}

.sunSize .navButton:active {
	color: #ffffff;
  	box-shadow: 0 0 0 0 #383838 inset;
}

.sunSize .nav li a {
	background: #545454;
	color: #fff
}

.sunSize .nav li a:hover {
	background: #fff;
	color: #707070;
}

/* //////////////    SUN SIZE DIAGRAM    \\\\\\\\\\\\\\ */
.sunSize .main {
	width: 1676000px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	overflow-y: hidden;
	position: relative;
	display: block;
	background: #FFF4DB;
}

.ticker {
	width: 100%;
	height: 50px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(/img/ticker.svg);
	background-repeat: repeat-x;
	background-position: left bottom;
}

.coronaSpace {
	width: 74%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 0;
	background: #FFF4DB;
}

.chromosphereSpace {
	width: .06%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 74%;
	background: #FFEFCB;
}

.photosphereSpace {
	width: .01%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 74.06%;
	background: #FFE6AD;
}

.convectionSpace {
	width: 6.5%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 74.07%;
	background: #FFDD8F;
}

.radiativeSpace {
	width: 13.5%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 80.57%;
	background: #FFCF60;
}

.coreSpace {
	width: 5.93%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	position: absolute;
	left: 94.07%;
	background: #FFC43A;
}

/* //////////////    SUN SIZE: OVERVIEW    \\\\\\\\\\\\\\ */
.sunSize .overView {
	width: 250px;
	height: 250px;
	position: fixed;
	z-index: 1;
	right:15px;
	top: 15px;
	background: url(/img/overView.svg);
	background-size: cover;
	background-repeat: no-repeat;
}

.sunSize .overView .here {
	position: absolute;
	top: 92px;
	left: -15px;
}

.sunSize .overView .here:before {
	white-space: nowrap;
	background: #d14e42;
	color: #ffffff;
	font-size: 9px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 5px 10px;
	content: "You are here";
}

.sunSize .overView .triangle {
	margin-left: 10px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #d14e42;
}

/* //////////////    FOOTER    \\\\\\\\\\\\\\ */
.sunSize .footer {
	bottom: 80px;
}

.sunSize .credit a {
	color: #545454;
}

.sunSize .credit a:hover {
	color: #ffffff;
}