body
{
	margin:0px;
	padding:0px;
	width:100%;
	
	font-family: "Helvetica", Arial, verdana;
	font-size:1.0em;
}

#maincontainer
{
	margin:10px auto;
	width:760px;
	height:760px;
}

div.info span.name
{
	text-transform: capitalize;
}



ul#atmosphere
{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
ul#atmosphere li
{
	margin:0px;
	padding:0px;
	width:100%;
	
	position:relative;
}

ul#atmosphere li div.info
{
	
}
ul#atmosphere li div.info span.name
{
}
ul#atmosphere li div.info span.distance
{
	
}

/*
http://paletton.com/#uid=70f0J0kQxJJoNOVwcPQQyt9QymB
*/

li#exosphere
{
	height:3%;
	background-color:#B43300;
}

li#vanallenbelt
{
	height:3%;
	background-color:#FF4900;
}
li#thermosphere
{
	height:32%;
	background-color:#FF7239;
}
li#mesopauze
{
	height:3%;
	background-color:#FFBE39;
}
li#mesosphere
{
	height:24%;
	background-color:#FFAB00;
}
li#stratopauze
{
	height:4%;
	background-color:#0741D2;
}
li#stratosphere
{
	height:18%;
	background-color:#4571DF;
}
li#tropopauze
{
	height:3%;
	background-color:#33E196;
}
li#troposphere
{
	height:10%;
	background-color:#00D479;
}


/* elements */
#elements
{
	display:none;
}

ul#atmosphere li .graph
{
	position:absolute;
	bottom:0px;
	right:1%;
	width:98%;
	height:80%;
	
	border-top:1px solid rgba(255,255,255,0.3);
	display:flex;
	flex-direction: row;
  justify-content: space-between;
	
}
ul#atmosphere li .graph .element
{
	position:relative;
	height:100%;
	flex:1;
	font-size:0.8em;
}

.graph .element .weightbox
{
	width:100%;
	background-color:white;
	opacity:0.7;
	position:absolute;
	left:0px;
	bottom:0px;
	z-index:400;
}

.graph .element span
{
	position:relative;
	display:block;
	z-index:500;
}
.graph .element .symbol
{
	padding:2px 4%;
}
.graph .element .percentage
{
	padding:2px 4%;
}
.graph .element .percentage:after
{
	content:'%';
}


.graph .nitrogen .weightbox
{
	background-color:#ece0ff;
	border-bottom:4px solid #ece0ff;
}
.graph .oxygen .weightbox
{
	background-color:#ffd8fc;
	border-bottom:4px solid #ffd8fc;
}
.graph .argon .weightbox
{
	background-color:#ffd0e0;
	border-bottom:4px solid #ffd0e0;
}
.graph .carbondioxide .weightbox
{
	background-color:#ffd2b4;
	border-bottom:4px solid #ffd2b4;
}
.graph .neon .weightbox
{
	background-color:#ffe187;
	border-bottom:4px solid #ffe187;
}
.graph .helium .weightbox
{
	background-color:#f9f871;
	border-bottom:4px solid #f9f871;
}
.graph .methane .weightbox
{
	background-color:#c9dfe7;
	border-bottom:4px solid #c9dfe7;
}
.graph .krypton .weightbox
{
	background-color:#adebee;
	border-bottom:4px solid #adebee;
}
.graph .hydrogen .weightbox
{
	background-color:#9af5e2;
	border-bottom:4px solid #9af5e2;
}
.graph .nitrousoxide .weightbox
{
	background-color:#a2fcc3;
	border-bottom:4px solid #a2fcc3;
}
.graph .water .weightbox
{
	background-color:#c5fd9a;
	border-bottom:4px solid #c5fd9a;
}
.graph .xenon .weightbox
{
	background-color:#f9f871;
	border-bottom:4px solid #f9f871;
}
.graph .nitrogendioxide .weightbox
{
	background-color:#afc4d5;
	border-bottom:4px solid #afc4d5;
}
.graph .ozon .weightbox
{
	background-color:#9da7c1;
	border-bottom:4px solid #9da7c1;
}
.graph .sulphurdioxide .weightbox
{
	background-color:#9389a8;
	border-bottom:4px solid #9389a8;
}
.graph .iodine .weightbox
{
	background-color:#8b6c88;
	border-bottom:4px solid #8b6c88;
}