html, body { background-color: #f4f4f8; }
body, input, select, option { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; }
input, select, option { font-size: 11px; }
h1 { font-weight: bold; font-size: 120%; text-align: right; color: #bbbbcc; }
h2 { font-weight: bold; font-size: 100%; border-bottom: 1px solid #666666; }
a { font-weight: bold; text-decoration: none; color: #333333; }
a:hover { text-decoration: underline; }
h1 a { color: inherit; }
label { text-align: right; margin: 4px; }
label:first-child { float: left; width: 10em; }
br { clear: both; }
.topmenu { text-align: right; border-bottom: 1px solid #444477; margin-bottom: 1em; position: relative; }
.topmenu a { padding: 1px 5px; border: 1px solid #444477; border-width: 1px 0px 0px 1px; cursor: pointer; }
.topmenu a.active { background-color: #AA8888; color: #DDDDDD; text-decoration: none; }
.topmenu a:hover { background-color: #333355; color: #CCCCCC; text-decoration: none; }
.status { font-size: small; color: #666666; }
.topmenu .status { float: left; position: relative; }
div#main { width: 70%; margin: auto; }
table.list, #details { width: 100%; padding-bottom: 10px; }
table.list tr:last-child td { border-bottom: 1px solid #444477; }
.list td, .list th { padding: 2px; margin: 0px; }
.list td { }
.list tr:nth-child(odd) { background-color: #eaeaf0; }
.list tr.head { background-color: #dddde5; }
.list th { border-width: 1px 0px; border-style: solid; border-color: #444477; cursor: n-resize; font-size: smaller; }
.list th:hover { background-color: #8b8ba3; }
.list tr:hover { background-color: #d9d9e0; cursor: pointer; }
.btn { font-size: 10px; text-transform: uppercase; color: #CCCCCC; background-color: #666670; padding: 1px 2px; margin: 1px; border-radius: 2px; width: 4em; text-align: center; cursor: pointer; float: left; }
.btn:hover { background-color: #333344; text-decoration: none; }
input.btn { border: none; font-weight: bold; margin: 1px 2px; }
.btn.mini { float: none; width: auto; }

input[type="text"], input[type="password"] { border: 1px solid #bbbbc4; }
input.val { text-align: right; }
form.edit p { margin: 2px 0; clear: both; }
textarea { width: 30em; height: 4em; }

.window { position: absolute; z-index: 100; top: 1em; left: 0;
	box-shadow: 3px 3px 6px #cccccc; background-color: #eaeaf0; 
	overflow: hidden; width: 0; transition: width .5s;
}
#userSel { right: 0; left: auto; }
.window.active { width: auto; }
form.dialog { margin: 0; padding: .5em; width: auto; max-width: 90vw; }
.dialog p { margin: .1em 0; }
.dialog label { width: 5em;}
.dialog select { width: 7em;}

#login { width: 16em; position: fixed; right: 0; bottom: 1em; }
#login label { width: 7em; float: left; clear: both; }
#login input.btn { margin-left: 9.5em; }