/*
				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    \\\\\\\\\\\\\\ */
.sunLayers #currentPage {
	color: #E6FFFB;
	background: #7ADBC8;
}

.sunLayers #currentPage:hover {
	color:#54C9B7;
	background: #ffffff;
}

.sunLayers .navButton {
	color: #54C9B7;
	background: #BFF0E8;
	box-shadow: 0 0 0 1px #9de8db inset, 0 2px 0 0 #7adbc8;
}

.sunLayers .navButton:hover {
	color: #54C9B7;
}

.sunLayers .navButton:active {
	color: #54C9B7;
  	box-shadow: 0 0 0 0 #D14E42 inset;
}

.sunLayers .nav li a {
	background: #BFF0E8;
}

.sunLayers .nav li a:hover {
	background: #fff;
}

/* //////////////    SUN LAYER DIAGRAM    \\\\\\\\\\\\\\ */
.sunLayers .main {
	width: 100%;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	position: relative;
	display: block;
	background: #ffffff; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ddfff9 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#ddfff9)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ddfff9 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#ddfff9 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#ddfff9 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, #ffffff 0%,#ddfff9 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ddfff9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.sunDiagram {
	list-style: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 0;
}

.sunDiagram div {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
}

#corona {
	border: 85px solid #FFF4DB;
	width: 640px;
	height: 640px;
	margin-top: -405px;
	margin-left: -405px;
	-webkit-transition: border 0.4s ease-in-out;
	-moz-transition: border 0.4s ease-in-out;
	-o-transition: border 0.4s ease-in-out;
	-ms-transition: border 0.4s ease-in-out;
	transition: border 0.4s ease-in-out;
}

#corona:hover {border-color: #F5D7C9;}

#chromosphere {
	border: 40px solid #FFEFCB;
	width: 560px;
	height: 560px;
	margin-top: -320px;
	margin-left: -320px;
	-webkit-transition: border 0.4s ease-in-out;
	-moz-transition: border 0.4s ease-in-out;
	-o-transition: border 0.4s ease-in-out;
	-ms-transition: border 0.4s ease-in-out;
	transition: border 0.4s ease-in-out;
}

#chromosphere:hover {border-color: #F0C3AE;}

#photosphere {
	border: 40px solid #FFE6AD;
	width: 480px;
	height: 480px;
	margin-top: -280px;
	margin-left: -280px;
	-webkit-transition: border 0.4s ease-in-out;
	-moz-transition: border 0.4s ease-in-out;
	-o-transition: border 0.4s ease-in-out;
	-ms-transition: border 0.4s ease-in-out;
	transition: border 0.4s ease-in-out;
}

#photosphere:hover {border-color: #EBB196;}

#convective {
	border: 80px solid #FFDD8F;
	width: 320px;
	height: 320px;
	margin-top: -240px;
	margin-left: -240px;
	-webkit-transition: border 0.4s ease-in-out;
	-moz-transition: border 0.4s ease-in-out;
	-o-transition: border 0.4s ease-in-out;
	-ms-transition: border 0.4s ease-in-out;
	transition: border 0.4s ease-in-out;
}

#convective:hover {border-color: #E7A181;}

#radiative {
	border: 125px solid #FFCF60;
	width: 70px;
	height: 70px;
	margin-top: -160px;
	margin-left: -160px;
	-webkit-transition: border 0.4s ease-in-out;
	-moz-transition: border 0.4s ease-in-out;
	-o-transition: border 0.4s ease-in-out;
	-ms-transition: border 0.4s ease-in-out;
	transition: border 0.4s ease-in-out;
}

#radiative:hover {border-color: #DF8156;}

#core {
	background: #FFC43A;
	width: 70px;
	height: 70px;
	margin-top:  -35px;
	margin-left:  -35px;
	-webkit-transition: background 0.4s ease-in-out;
	-moz-transition: background 0.4s ease-in-out;
	-o-transition: background 0.4s ease-in-out;
	-ms-transition: background 0.4s ease-in-out;
	transition: background 0.4s ease-in-out;
}

#core:hover {background: #D96936;}

#backgroundFill {
	width: 800px;
	height: 800px;
	background: #FFF4DB;
	margin-top: -400px;
	margin-left: -400px;
	-webkit-transition: background 0.4s ease-in-out;
	-moz-transition: background 0.4s ease-in-out;
	-o-transition: background 0.4s ease-in-out;
	-ms-transition: background 0.4s ease-in-out;
	transition: background 0.4s ease-in-out;
}

/* //////////////    SUN LAYERS TEXT     \\\\\\\\\\\\\\ */
#realColor {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	filter: alpha(opacity=0);
  	-moz-opacity: 0;
  	-khtml-opacity: 0;
  	opacity: 0;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

#realColor p {
  padding: 15px;
  margin: 15px 0px;
  background: #D96936;
  color: #fff;
}

#realColor.toggle {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	filter: alpha(opacity=100);
  	-moz-opacity: 1;
  	-khtml-opacity: 1;
  	opacity: 1;
}

#coronaText, #chromosphereText, #photosphereText, #convectiveText, #radiativeText, #coreText {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  	filter: alpha(opacity=0);
  	-moz-opacity: 0;
  	-khtml-opacity: 0;
  	opacity: 0;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

#coronaText.toggle, #chromosphereText.toggle, #photosphereText.toggle, #convectiveText.toggle, #radiativeText.toggle, #coreText.toggle {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  	filter: alpha(opacity=100);
  	-moz-opacity: 1;
  	-khtml-opacity: 1;
  	opacity: 1;
}


#chromosphereText {

}

#photosphereText {

}

#convectiveText {

}

#radiativeText {

}

#coreText {

}

/* //////////////    COLOR SWITCH    \\\\\\\\\\\\\\ */
.colorSwitch {
	background: #BFF0E8;
	position: fixed;
	z-index: 1;
	right: 15px;
	top: 15px;
	width:50px;
	height:90px;
	padding: 13px 10px;
}

.colorSwitch div {
	width: 100%;
	height: 100%;
	background: #7adbc8; /* Old browsers */
	background: -moz-linear-gradient(top,  #7adbc8 0%, #7adbc8 50%, #9de8db 50%, #9de8db 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7adbc8), color-stop(50%,#7adbc8), color-stop(50%,#9de8db), color-stop(100%,#9de8db)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #7adbc8 0%,#7adbc8 50%,#9de8db 50%,#9de8db 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #7adbc8 0%,#7adbc8 50%,#9de8db 50%,#9de8db 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #7adbc8 0%,#7adbc8 50%,#9de8db 50%,#9de8db 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #7adbc8 0%,#7adbc8 50%,#9de8db 50%,#9de8db 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7adbc8', endColorstr='#9de8db',GradientType=0 ); /* IE6-9 */
	box-shadow: 0px 5px #63D0BB;
	-webkit-transition: box-shadow .2s linear;
	-moz-transition: box-shadow .2s linear;
	-o-transition: box-shadow .2s linear;
	-ms-transition: box-shadow .2s linear;
	transition: box-shadow .2s linear;
}

/* //////////////    FOOTER    \\\\\\\\\\\\\\ */
.sunLayers .credit a {
	color: #54C9B7;
}

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

/* //////////////    'ON' CLASS    \\\\\\\\\\\\\\ */
.main.on {
	background: #adadad; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #adadad 0%, #333333 50%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#adadad), color-stop(50%,#333333), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, #adadad 0%,#333333 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, #adadad 0%,#333333 50%,#000000 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, #adadad 0%,#333333 50%,#000000 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, #adadad 0%,#333333 50%,#000000 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	/*background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);*/
}

.nav.on {
}

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

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

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


.nav ul.on {

}


.nav li a.on {
	background: #545454;
	color: #ffffff;
}

.nav li a.on:hover {
	background: #ffffff;
	color: #707070;
}

.sunLayers a.on#currentPage {
	color: #ffffff;
	background: #383838;
}

.sunLayers a.on#currentPage:hover {
	color:#707070;
	background: #ffffff;
}

.colorSwitch.on {
	background: #DDA727;
}

#corona.on {
	border-color: #FDFBF5;
}

#corona.on:hover {
	border-color: #F5D7C9;
}

#chromosphere.on {
	border-color: #FDFBF5;
}

#chromosphere.on:hover {
	border-color: #F0C3AE;
}

#photosphere.on {
	border-color: #FDFBF5;
}

#photosphere.on:hover {
	border-color: #EBB196;
}

#convective.on {
	border-color: #FDFBF5;
}

#convective.on:hover {
	border-color: #E7A181;
}

#radiative.on {
	border-color: #FDFBF5;
}

#radiative.on:hover {
	border-color: #DF8156;
}

#core.on {
	background: #FDFBF5;
}

#core.on:hover {
	background: #D96936;
}

#backgroundFill.on {
	background: #FDFBF5;
}

#backgroundFill.on:hover {
	background: #FDFBF5;
}

.footer {

}

.colorSwitch.on {
	background: #232323;
}

.colorSwitch div.on {
	background: #545454; /* Old browsers */
	background: -moz-linear-gradient(top,  #545454 0%, #545454 50%, #383838 50%, #383838 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(50%,#545454), color-stop(50%,#383838), color-stop(100%,#383838)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #545454 0%,#545454 50%,#383838 50%,#383838 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #545454 0%,#545454 50%,#383838 50%,#383838 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #545454 0%,#545454 50%,#383838 50%,#383838 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #545454 0%,#545454 50%,#383838 50%,#383838 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#383838',GradientType=0 ); /* IE6-9 */
	box-shadow:  0px -5px #1d1d1d;
}

.sunLayers .credit.on a {
	color: #545454;
}

.sunLayers .credit.on a:hover {
	color: #ffffff;
}

/* //////////////    SUN LAYERS TOGGLE    \\\\\\\\\\\\\\ */
#corona.toggle {
	border-color: #F5D7C9;
}

#chromosphere.toggle {
	border-color: #F0C3AE;
}

#photosphere.toggle {
	border-color: #EBB196;
}

#convective.toggle {
	border-color: #E7A181;
}

#radiative.toggle {
	border-color: #DF8156;
}

#core.toggle {
	background: #D96936;
}

/* //////////////    AT MEDIA    \\\\\\\\\\\\\\ */

@media (max-width:850px) {
	.sunDiagram {right:70px; left: initial;}
}

@media (max-width:480px) {

}

@media (max-height:850px) {
	.sunDiagram {bottom:30%; top: initial;}
}