@import url(http://fonts.googleapis.com/css?family=Signika+Negative);

body { 
font: normal 11px auto Calibri, Verdana, Arial, Helvetica, sans-serif; 
padding: 0;
margin: 0;
}

/*
	HEADER
*/

header {
	width: 700px;
	padding: 0;
	margin: 0 auto 20px auto;
	border-bottom: 3px solid #e5e5e5;
}

header p {
	color: #646363;
	padding: 5px 10px 8px 10px;
	background: #e5e5e5;
	margin: 0;
	border-bottom: 1px solid #B2B1B1;
}

header p span {
	float: right;
}

header p a {
	color: #646363;
}

header p a:hover {
	color: #000;
	text-decoration: none;
}

header h1 {
	color: #646363;
	border-bottom: 1px solid #B2B1B1;
	font: normal 28px "Signika Negative", sans-serif;
	padding: 5px 10px 10px 10px;
	margin: 0;
	
	-webkit-text-shadow: 1px 1px 2px #fff, 2px 2px 1px #B2B1B1;
	-moz-text-shadow: 1px 1px 1px #fff, 2px 2px 1px #B2B1B1;
	-o-text-shadow: 1px 1px 1px #fff, 2px 2px 1px #B2B1B1;
	-ms-text-shadow: 1px 1px 1px #fff, 2px 2px 1px #B2B1B1;
	text-shadow: 1px 1px 1px #fff, 2px 2px 1px #B2B1B1;
}

header h1 span {
	float: right;
}

header h1 span a.chart {
	display: inline-block;
	width: 46px;
	height: 25px;
	background: url("img/Diplo-SCT-Icon-Chart.png");
	text-decoration: none;
}

header h1 span a.graph {
	display: inline-block;
	width: 46px;
	height: 25px;
	background: url("img/Diplo-SCT-Icon-Graph.png") ;
	text-decoration: none;
}

header h1 span a.rollover {
	text-indent: -9999px;
	position: relative;
	top: 5px;
}

header h1 span a.rollover:hover {
	background-position: -47px 0;
}


input { text-align:center; font: normal 11px auto Calibri, Verdana, Arial, Helvetica, sans-serif; }

table { text-align:center; border-collapse: collapse; margin: 0; }
td { border: 1px solid #bfbfbf; }
table.chart { margin-left: auto; margin-right: auto; }
table.chart td { border: 1px solid #000; padding: 3px; }
th { background-color: #538dd5; color:white; border: 1px solid #000; padding: 3px; }
th.admin { border: 1px solid #3569aa; }
td.name { text-align: left; }
td.start { background-color: /*rgba(235, 241, 222, 0.8)*/ #ebf1de; }
td.gain { background-color: /*rgba(199, 217, 160, 0.8)*/ #c4d79b; }
td.loss { background-color: /*rgba(255, 113, 113, 0.8)*/ #ff7171; }
td.same { background-color: /*rgba(191, 191, 191, 0.8)*/ #bfbfbf; }
td.zero { background-color: /*rgba(0, 0, 0, 0.8)*/ #333333; /*#161616*/ }
td.expl { text-align:left; }
tr.cnt:hover td.name{ background: #98bbe6; }
tr.cnt:hover td.start { background-color: /*rgba(235, 241, 222, 0.7);*/ #CAE487; }
tr.cnt:hover td.gain { background-color: /*rgba(199, 217, 160, 0.7);*/ #95cd14; }
tr.cnt:hover td.loss { background-color: /*rgba(255, 113, 113, 0.7);*/ #FF2C2C; }
tr.cnt:hover td.same { background-color: /*rgba(191, 191, 191, 0.7);*/ #777; }
tr.cnt:hover td.zero { background-color: /*rgba(0, 0, 0, 0.7);*/ #161616; }
tr.curFocus { background: #dce6f1; }

#msgContainer { margin-left:auto; margin-right:auto; border: 1px solid #000; width: 250px; text-align:center; }
#errorMsg { background: #ff7171; padding: 5px; margin: 0; border-bottom: 1px solid #000; }
#successMsg { background: #c4d79b; padding: 5px; margin: 0; border-bottom: 1px solid #000; }
#return { background: #e9e9e9; padding: 5px; margin: 0; }
#return:hover { background: #646363; }
#return a { color: #646363; text-decoration: none; }
#return:hover a { color: #fff }

#sub { width: 62px; border: none; padding: 0; margin: 5px auto 0 auto; }
#sub.changes { width: 116px; }
#sub.selectyear { width: 86px; }
input[type="submit"] { background-color: #98bbe6; color:white; border: 1px solid #3569aa; font-weight: bold; padding: 5px; margin: 0; }
input[type="submit"]:hover { background: #538dd5; }
form.hide { opacity: 0.3; margin-bottom: 20px; }
form.hide:hover, form.hide:focus { opacity: 1; margin-bottom: 20px; }


.editYear { border: none; background: #e9e9e9; color: #636363; margin-left: auto; margin-right: auto; }
.editYear tr { border: 1px solid #bfbfbf; }
.editYear td { border: none; }

/* ADMIN */

table.lgn { margin-left: auto; margin-right: auto; }
table.lgn td { border: none; }
table.lgn tr:hover label { font-weight: bold; }
table.lgn tr.focus { font-weight: bold; }
/* INTERESTING EFFECT
#lgn input { border: 1px solid rgba(152, 187, 230, 0.75); outline: 3px solid rgba(152, 187, 230, 0.25);  }
*/

ul { list-style: none; margin: 0; padding: 0; }
li { background: none; }

#wrap { width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding: 0px; }

#nav { margin: 0; padding: 0; clear: both; }
#nav ul { margin: 0; padding: 0; text-align: center; }
#nav li  { width: 33%; list-style-type: none; padding: 5px 0 5px 0; border-left: 1px solid #fff; background: #98bbe6; float: left; margin: 0; }
#nav li:first-child { border: none; margin-left: 2px;  }
#nav li a { color: #fff; display: block; text-decoration: none; }
#nav li.current { background: #538dd5; color: #fff; font-weight: bold;  }
#nav li:hover { background: #538dd5; }
#nav li:hover a { color: #fff }

#holder { width: 100%; clear: both; background: #fafbfe; border-bottom: 1px solid #98bbe6; border-top: 1px solid #538dd5; padding: 0; margin: 0;}
#content { padding: 10px 0px 20px 0px; margin: 0; }

#logout { float: right; background: #e9e9e9; width: 97px; padding: 5px; margin: 3px 3px 0 0; text-align: center;  }
/*#logout { position: relative; top: 5px; right: 5px; background: #e9e9e9; width: 97px; padding: 5px; margin: 0 2px 0 0; text-align: center;  }*/
#logout a { color: #646363; text-decoration: none; }
#logout:hover { background: #646363; }
#logout:hover a { color: #fff }

/*#back { position: fixed; bottom: 10px; right: 10px; background: #e9e9e9; width: 97px; padding: 5px; margin: 0; text-align: center;  }*/
#back { float: right; background: #e9e9e9; width: 97px; padding: 5px; margin: 3px 3px 0 0; text-align: center;  }
#back a { color: #646363; text-decoration: none; }
#back:hover { background: #646363; }
#back:hover a { color: #fff }

#gamelink { position: fixed; bottom: 35px; right: 10px; background: #e9e9e9; width: 97px; padding: 5px; margin: 0; text-align: center; }
/*#gamelink { float: right; background: #e9e9e9; width: 97px; padding: 5px; margin: 3px 3px 0 0; text-align: center; }*/
#gamelink a { color: #646363; text-decoration: none; }
#gamelink:hover { background: #646363; }
#gamelink:hover a { color: #fff }	

#warning { background: rgba(255, 113, 113, 0.5); border: 1px solid #ff7171; padding: 5px; text-align: center; margin: 0 5px 10px 5px; }
#warning a { color: rgba(255, 0, 0, 0.75); text-decoration: none; display: block; }
#warning a:hover { text-decoration: underline; color: #fff }
#warning:hover{ background: rgba(255, 113, 113, 0.8); }

/*
	CHARTS
*/
#graphing {
	display: table;
	padding: 0;
	margin: 0 auto 0 auto;
	
}

#chartHolder {
	
}

#chart, #graph {
	display: table;
	margin: 0 auto 0 auto;
}

table.sct {
	float: left;
	margin: 0 10px 25px;
}


table.legend { 
	float: left;
	margin: 0;
}

table.legend th:hover { cursor: pointer; }

table.legend th.hidden {
	background: #98bbe6;
	padding: 5px;
}

table.legend th.open { background: red; }

table.legend th.hidden:hover {
	background: #538dd5;
}	

/* ADD COLUMNS */

form { padding: 0; margin: 0; }

#onecol { width: 30%; margin: 0 auto 20px auto; background: #fff; }
#onecol tr:hover { background: #dce6f1; }
/*#twocol { float: left; width: 30%; margin: 0 0 20px 80px; background: #fff; }*/
#twocol { float: left; width: 30%; margin: 0 0 20px 110px; background: #fff; }
#twocol.two{ float: left; margin: 0 0 20px 20px }
#twocol tr:hover { background: #dce6f1; }
#threecol { float: left; width: 30%; margin: 0 0 20px 15px; background: #fff; }
#threecol tr:hover { background: #dce6f1; }
#onecol, #twocol, #threecol {
	border: 1px solid #bfbfbf;
}
#onecol td, #twocol td, #threecol td {
	border: none;
}

/*
	GRAPH
*/

#gback { position: fixed; top: 35px; right: 10px; background: #e9e9e9; width: 97px; padding: 5px; margin: 3px 3px 0 0; text-align: center;  }
#gback a { color: #646363; text-decoration: none; }
#gback:hover { background: #646363; }
#gback:hover a { color: #fff }

h2 {
	font: normal 22px "Signika Negative", sans-serif;
	color: #646363;
	padding: 5px 10px 5px 10px;
	margin: 0; 
	border-bottom: 1px solid #B2B1B1;
}

h4 {
	padding: 0 0 5px 0;
	margin: 0;
	font-size: 14px;
	font-weight: normal;
}

h4.edit {
	font: italic 14px serif; 
	color: #646363; 
	text-align: center; 
	margin: 0 auto 20px auto; 
	padding: 10px 5px 5px 5px; 
	border-top: 1px dotted #98bbe6; 
	width: 95%;
}

h4.edit span {
	font: bold 14px sans-serif; 
	color: #538dd5;
}

h5 { 
	color: #ff7171; 
	font-size: 12px;
	font-weight: normal;
	margin: 0; 
	padding: 10px 10px 0 0; 
	float: right; 
	text-transform: uppercase;
}

#graphing
{
	clear: both;
	width: 700px;
	margin: 25px auto 10px auto;
	border-top: 1px solid #B2B1B1;
}

#graphing:hover h5 { color: #FF2C2C; }

/*
	GRAPH LEGEND
*/
#linegraph2 { display: inline; }

#lclegend li
{
	text-transform: uppercase;
	list-style: none;
	padding: 5px;
	border-bottom: 1px solid #e5e5e5;
}
#lclegend 
{
	margin: 20px 0 0 0; 
	float: left; 
	border: 1px solid #e5e5e5;
	width: 85px;
}

#lclegend li:nth-child(1) 
{
	color: #4b80b6;
}
#lclegend li:nth-child(2) 
{
	color: #B9121B;
}
#lclegend li:nth-child(3) 
{
	color: #C009C6;
}
#lclegend li:nth-child(4) 
{
	color: #71E846;
}

#lclegend li:nth-child(5)
{
	color: #FF8217;
}


/*
	STATISTICS FORM
*/

form.graphing
{
	clear: both;
	border-top: 3px solid #e5e5e5;
	padding: 10px;
	margin: 0 auto 0 auto;
}

form.graphing fieldset 
{
	display: block;
	padding: 0;
	margin: 10px 0 10px 0;
	border: none;
}

button
{
	background-color: #98bbe6; 
	color:white; 
	border: 1px solid #3569aa; 
	font-weight: bold; 
	padding: 5px; 
	margin: 0;
	cursor: hand;
	cursor: pointer;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

button:hover { background: #538dd5; }

form.graphing ul li  {
	display: inline-block;
	padding: 5px;
	background: #dce6f1;
	margin: 3px;
	cursor: hand;
	cursor: pointer;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

form.graphing ul fieldset li {
	margin: 1px;
}

form.graphing li > label, form.graphing li > input
{
	cursor: hand;
	cursor: pointer;
}

form.graphing li:hover
{
	background: #98BBE6;
}

form.graphing li.selected
{
	background: #98BBE6;
	
	-webkit-box-shadow: 1px 1px 2px #7F7F7F;
	-moz-box-shadow: 1px 1px 2px #7F7F7F;
	-o-box-shadow: 1px 1px 2px #7F7F7F;
	-ms-box-shadow: 1px 1px 2px #7F7F7F;
	box-shadow: 1px 1px 2px #7F7F7F;
}

form.graphing li.disabled
{
	background: #FF8A8A;
	background: rgba(255, 113, 113, .25);
	cursor: arrow;
}

/*
	STAT SECTION OF TABLE
	Use nth-child to do do zebra pattern instead of using a class
*/

tr.stat:nth-child(2n+1)
{
	background-color: #dce6f1;
}

/*
	FOOTER
*/

footer {
	margin: 20px auto 20px auto;
	width: 700px;
	border-bottom: 1px solid #B2B1B1;
}

footer ul {
	margin: 0;
	padding: 5px 10px 5px 10px;
	border-top: 1px solid #B2B1B1;
	border-bottom: 3px solid #e5e5e5;
	overflow: hidden;
}

footer ul li {
	width: 32.99%;
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

footer ul li p {
	margin: 0;
	padding: 0;
	line-height: 20px;
	color: #B2B1B1;
}

footer ul li.ver {
	font: italic 10px/11px "DejaVu Sans Mono", "Courier New", Courier, monospace;
}

footer a {
	text-decoration: none;
	display: block;
	color: #B2B1B1;
}

footer a:hover, a:focus {
	color: #646363;
}