html, body									{margin:0;padding:0;height:100%;font-family:Roboto;position:relative;background:black;overflow:hidden;}
body										{background:#FCFCFC url(../graphics/roes.png) right bottom no-repeat;background-size:300px;}

*											{box-sizing:border-box;}
th, td										{font-family:Roboto;}

h1											{font-family:Orbitron;font-size:28px;text-align:center;margin:0;padding:0;}
h2											{font-family:Orbitron;font-size:18px;text-align:center;text-transform:uppercase;color:#FF6600;margin:0;padding:0;}
h3											{font-family:Roboto;text-align:left;color:#464742;border-bottom:1px solid rgba(255, 255, 255, 0.35);margin-top:0;padding-bottom:10px;}

.pointer									{cursor:pointer;}
.button										{font-size:32px;line-height:50px;margin:0 15px;}
.silver										{color:silver;}
.color										{color:#FF6600;}
.white										{color:white;}
.left										{float:left;}
.right										{float:right;}
.hidden										{display:none;}
.ruler										{height:0;clear:both;float:none;}
.btn										{margin-right:10px;margin-bottom:10px;}
.btn.right									{margin-right:0;margin-left:10px;}

#app										{position:absolute;top:0%;left:0;width:100%;height:100%;z-index:10;}
#menu										{display:none;position:absolute;top:0px;left:0px;width:300px;bottom:0px;background:gray;z-index:5;opacity:0.5;font-size:14px;padding:15px;}
#nav										{height:30px;padding:5px 15px 0;}
#nav a										{position:relative;display:block;float:left;line-height:20px;margin-right:30px;}
#nav a:after								{position:absolute;display:block;top:0;right:-20px;content:"\f105";font-family:FontAwesome;font-size:20px;line-height:20px;cursor:default;}
#nav a:last-child:after						{display:none;}

#app header									{position:absolute;top:0;left:0;right:0;height:50px;background:#FF6600;z-index:15;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
.statusbar #app header						{border-top:20px solid #FF6600;height:70px;}
#app header h1								{color:white;margin:0 100px;font-size:18px;line-height:50px;text-align:center;}

#button-home,
#button-settings,
#button-logout								{display:none;color:white;background:none;}
.active #button-home,
.active #button-logout						{display:block;}
.active.admin #button-settings				{display:block;}

#wrapper									{position:absolute;top:50px;left:0;right:0;bottom:0px;padding:15px;overflow:auto;-webkit-overflow-scrolling:touch;}
.statusbar #wrapper							{top:70px;}

#logo										{position:relative;text-align:center;}
#logo img									{width:100%;max-width:300px;}

#loginform									{display:none;text-align:center;margin-top:10%;}
#loginform form								{display:block;width:280px;margin:0 auto;}
#loginform input							{width:100%;height:40px;line-height:30px;margin:0 0 10px;padding:5px 10px;font-size:16px;border:2px solid #FF6600;outline:none;box-shadow:inset 0 0 0 20px white, 0 1px 3px rgba(0, 0, 0, 0.25);border-radius:3px;box-sizing:border-box;}
#loginform input[type=submit]				{padding:0;background:#FF6600;color:white;box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);margin-top:10px;width:100%;height:40px;}

#messages									{position:relative;display:none;margin:10% auto 0;width:100%;max-width:650px;padding:15px 20px 10px;background:rgba(255, 255, 255, 0.45);border:2px solid rgba(255, 255, 255, 0.35);border-radius:5px;box-shadow:inset 0 50px 100px -50px rgba(255, 255, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25);}
#messages button							{position:absolute;display:block;left:0;right:0;width:100%;bottom:-50px;height:30px;background:none;border:none;color:white;font-size:16px;outline:none;}

#charts										{display:none;text-align:center;}
#charts ul									{list-style:none;margin:0;padding:0;text-align:center;}
#charts li									{background:#FF6600;color:white;padding:5px;margin:5px;margin-bottom:25px;border-radius:10px;text-transform:uppercase;}
#charts .data								{background:white;color:black;padding:5px;border-radius:5px;margin-top:5px;}
#charts h4									{margin:0;padding:0;line-height:14px;height:28px;overflow:hidden;font-size:12px;font-weight:normal;font-family:Roboto;}

#menu h1									{font-size:2em;text-align:left;color:white;}

#siteform									{margin:0;padding:0;display:block;}
#siteform .fieldsetcol						{width:100%;}
#siteform .fieldsetcount-2 .fieldsetcol		{width:50%;float:left;}
#siteform .fieldset							{margin:15px 15px 25px;padding:15px 20px;background:white;border-radius:2px;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
#siteform .fieldset hr						{height:1px;border:none;background:#ECECEC;margin:30px -20px 20px;}
#siteform .fieldsetlabel					{color:#FF6600;font-size:32px;font-weight:100;margin-bottom:25px;}
#siteform .fieldsetbottom					{clear:both;}
#siteform .label							{font-size:13px;}

.chart										{position:relative;width:380px;max-width:100%;min-height:200px;float:left;overflow:hidden;margin:15px 15px 25px;padding:15px 20px;background:white;border-radius:2px;box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);}
.chart										{display:inline-block;float:none;}
.chart h3									{color:#FF6600;font-size:20px;font-weight:100;margin:0;padding:0;line-height:30px;min-height:70px;cursor:pointer;}
.chart h3 i									{float:right;color:gray;}
.chart div									{height:300px;}

.filter										{text-align:center;}
.filter a.active							{font-weight:bold;}

.modal										{max-width:500px;}

@media screen and (max-width: 900px)
{
	#siteform .fieldsetcount-2 .fieldsetcol	{width:100%;float:none;}
}

@media screen and (max-width: 460px)
{
	#wrapper								{padding:15px 0;}

	#siteform .fieldset						{margin:15px 0 25px;}

	.chart									{width:100%;float:none;overflow:hidden;margin:15px 0 25px;}
}