<!--
a {text-decoration: none;}
a img {border: 0;}
a:link {color: #fff;}
a:visited {color:#fff;}
a:hover {color: #A859C9;}
a:active {color: #a031b1;}

html {background: #000 url(/backgrounds/pattern-stone-blue2.jpg);}
html, Body {margin: 0; font: small/125% Verdana,sans-serif; color: #ffc;}
div.holder {width: 800px; text-align: center; margin: auto; padding: 0; border: 0;}

div.stats {font-family: verdana,arial,sans-serif; font-size: 8pt; color: #6d6356; white-space: nowrap; width: 100%; float: left; clear: both; position: relative;}
div.icons {position: absolute; left: 50%; display: inline;}
 div.icons .t {opacity: .7;}

.menu {width: 144px; margin: 2px; background: #161616; border: 1px solid #ccc; float: left; clear: left; font-weight: bold;}
 .menu a {display: block; padding: 3px;}
 .menu a:hover {background: #262626;}


.content {width: 644px; margin: 2px; background: #161616; border: 1px solid #ccc; float: right;}


h1 {text-align: center; line-height: 1em; font-size: x-large; color: #ffe;}
h2 {text-align: center; font-weight: bold; font-size: large; color: #ffd; margin: 0.5em; text-decoration: none;}
em {font-style: normal; color: #ffe599; }
em.reverse {color: #777;}
em.curoption {font-weight: bold; text-decoration: underline;}

.bold {font-weight: bold;}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.hlist li {list-style: none; display: inline;}


/* TABLES */
table {margin: auto;}
th {background-color: #555; font-weight: normal; color: #ffa; padding: 2px;}
.col1 {background: #222}
.col2 {background: #333}
table.stats {font-family: verdana,arial,sans-serif; font-size: 8pt; width: 100%;}
table.stats td {background-color: #222;}
table.stats td.incomplete {background-color: #322;}
.energy {color: #ff9295;}
.cost {color: #c8c8c8;}
.imp {color: #d5a57a;}
.gen {color: #f1db82;}
.exp {color: #8bd59b;}


table caption {font-size: large; margin: 1em 0 1ex 0;}
.index {width: 620px;}
 .index .num {color: #919191;}
 .index .name {min-width: 7em;}
 .index .result {min-width: 3em; text-align: right;}
.manage {margin-bottom: 1em;}
.list {margin-bottom: 1em;}
 .list caption {font-weight: bold;}
 .list td, .smallpad td {padding: 1px 3px;}
.attendance tfoot td:first-child {text-align: right; vertical-align: top;}
.attendance tfoot td {text-align: left;}
.attendance .enddate {color: #ffc9c9;}
.attendance .awaydates {color: #a5a5a5;}


div.solarparse {background-color: #4a676a; width: 144px; float: left; margin: 1px; padding: 5px;}
div.solarparse p {margin: 0 31px; width: 80px; text-align: left;}
div.select {margin: 10px;}
div.select select {margin: 5px 0;}
div.label {display: inline-block; width: 7em; text-align: right;}
div.owldata {width: 90%; text-align: left; margin: auto;}
div.owldata1 {width: 50%; float: left;}
div.owldata2 {width: 50%; float: right;}

/* GRID */
.gridcontainer {
 display: grid;
 /*grid-template-columns: [time] 20% [energy] 20% [solar_gen] 20% [solar_exp] 20% [import] 20%;*/
 grid-template-columns: repeat(5, 6em);
 grid-template-rows: 2em;
 column-gap: 5px;
 justify-items: left;
 justify-content: center;
 grid-auto-columns: 5em;
 grid-auto-rows: 1.2em;
}
.gridheader {background: #555; justify-self: stretch;}
.gridtime {justify-self: center;}
.gridenergy {}
.gridsolargen {}
.gridsolarexp {}
.gridimport {}
.gridrow1 {background: #222}
.gridrow2 {background: #333}

.error {color: #ec7373;}
.error2 {color: #fff; background-color: #f00;}
.queryerror {color: #ffb8b8;}
.mysqlierror {color: #eacad4; font-weight: bold;}
-->