body, td, th, dd, dt, h1, h2, h3, h4, h5, h6, p, ol, ul, li {
  font-family: Verdana, Tahoma, Arial, "Nimbus Sans L", sans-serif;
}

select {
	width: 30em;
}

body {
  background-color: #dddcca;
  color: black;
  margin: 0;
	padding: 0;
	font-size: 12pt;
}

a {
  color: #2f5d9c;
	text-decoration: none;
}

a:hover {
  color: #456ff3;
	text-decoration: underline;
}

h1 {
	padding: 0;
	margin: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	color: #460;
  font-size: 150%;
	font-family: Bitstream Vera Serif, serif;
	background-color: #fbfaf4;
  border-bottom: 1px dashed #cccbb9;
	text-align: center;
}

.loginDialog {
  display: table;
  background: #E3FFE3;
  padding: 7px;
  border-radius: 9px;
  box-shadow: 0 0 7px #000000;  
  width: 20em;
}

@media all and (min-width: 1024px) {
  .loginDialog {
    display: table;
    background: #E3FFE3;
    padding: 7px;
    border-radius: 9px;
    box-shadow: 0 0 7px #000000;  
    position: fixed;
    top: 50%;
    left: 50%;
    width: 350px;
    margin-top: -11em;
    margin-left: -175px;
  }
}

.loginTitle {
  background: palegreen;
  border-top: 1px solid darkgreen;
  border-bottom: 1px solid darkgreen;
  display: block;
  text-align: center;
}

.loginLabel {
  font-size: 95%;
}

#content {
	padding-top: 0.5em;
	margin: 0 auto;
	width: 95%;
	text-align: center;
}

ul {
	padding: 0;
	text-align: center;
}

li {
  display: block;
  float: left;
  text-align: center;
  margin: 6px;
	padding: 5px;
	background-color: #eee;
	border: 1px solid #cccbb9;
}

img.left, img.right {
	padding: 5px;
	background-color: #eee;
	border: 1px solid #cccbb9;
	height: 64px;
	position: absolute;
  top: 0;
}
img.right {
	right: 0px;
}

/*td {
	padding-right: 5px;
	padding-left: 5px;
	text-align: right;
}*/

.columns {
	float: none;
	display: inline-block;
	width: 100%;
}

.leftPane {
  float: left;
	margin-right: 5px;
	padding: 5px;
	margin-left: 5px;
}

.rightPane {
	float: left;
	/*background-color: lightgrey;
	border: 1px dotted purple;*/
	width: 45%;
	padding: 5px;
	margin-left: 5px;
}

.footer {
	display: block;
	float: none;
}

.subtitle {
	color: darkblue;
	padding: 5px;
	padding-left: 0px;
	text-align:left;
	font-weight: bold;
	font-size: 125%;
	margin-bottom: 10px;
}

.system, .tools, .messages, .finance, .fullform, .mails, .log {
	display: inline-block;
	border: 1px solid orange;
	padding-bottom: 10px;
	padding-left: 2px;
	padding-right: 2px;
	width: 600px;
}

.log {
	border: 1px solid red;
	width: auto;
}

.fullform {
  width: 1000px;
}

.mails {
  width: 55%;
}

.unread {
  font-weight: bold;
}

.finance {
	width: 695px;
	border: 1px solid yellowgreen;
}

.messages {
	border: 1px solid green;
}

.tools {
	border: 1px solid blue;
}

.floatDiv {
	float: left;
	margin-right: 20px;
}

.button, .floatRight, .small-button {
	border: 1px solid orange;
	background-color: lightgrey;
	color: darkblue;
	margin: 5px;
  padding: 2px 3px;
	box-shadow: 2px 2px 2px darkgrey;
	display: inline-block;
	font-size: 100%;
}

.small-button {
  margin: 2px;
  font-size: 60%;
}

.tools .button {
	border: 1px solid blue;
}

.message .small-button {
  border: 1px solid green;
}

.button:hover, .button:active, .small-button:hover, .small-button:active, .floatRight:hover, .floatRight:active {
	background-color: #A1A1A1;
	text-decoration: none;
	box-shadow: 2px 2px 2px darkgrey;
}

.button:active, .small-button:active {
	position:relative;
	top: 5px;
	left: 5px;
}

.bar {
	width: 95%;
	border: 1px solid grey;
	margin: 0;
	padding: 0;
	background-color: #F7F7F7;
  background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9);
  background-repeat: repeat-x;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.filled-bar {
	background-color: #4BB1CF;
  background-image: linear-gradient(to bottom, #5BC0DE, #339BB9);
  background-repeat: repeat-x;
	height: 20px;
}

.filled-bar-red {
  background-color: #FF0000;
  background-image: linear-gradient(to bottom, #FF4040, #CD3333);
  background-repeat: repeat-x;
  height: 20px;
}

.filled-bar-orange {
  background-color: #FFA500;
  background-image: linear-gradient(to bottom, #FFB90F, #B8860B);
  background-repeat: repeat-x;
  height: 20px;
}

.statstext {
	font-family: tahoma;
	color: #636363;
	font-size: 90%;
	width: 8em;
}

.errorBox {
	background-color: #d54343;
  color: white;
  font-size: 90%;
  border: 3px solid;
  border-color: red;
  width: 450px;
  position: fixed;
  top: 200px;
  left: 200px;
  text-align: center;
}

.errorText {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
}

.errorTitle {
	font-size: 100%;
	background-color: #b54343;
	font-weight: bold;
	text-align: center;
	padding-top: 0px;
	padding-bottom: 5px;
}

.numericTable {
	font-size: 90%;
	text-align: center;
}

.mailTable {
	font-size: 90%;
	text-align: left;
	width: 98%;
}

.mailTable td {
	margin-right: 5px;
}

.numericTable tr.even, .mailTable tr.even {
	background-color: #FFEFDB;
}
.numericTable tr.odd, .mailTable tr.odd {
	background-color: #EEDFCC;
}
.numericTable tr.even:hover, .mailTable tr.even:hover {
	background-color: #CDC0B0;
}
.numericTable tr.odd:hover, .mailTable tr.odd:hover {
	background-color: #8B8378;
}
.numericTable td.negative {
	color: red;
}
.numericTable td.positive {
	color: green;
}
.numericTable td.totalYear {
	border: 1px solid black;
	font-weight: bold;
}

.floatRight {
  bottom: 10px;
  position: fixed;
  right: 50px;
}
.floatRight:active {
	bottom: 5px;
	right: 45px;
}

@media all and (max-width: 640px) {
	.system, .tools, .messages {
		display: block;
		margin-bottom: 10px;
	}
	body {
		font-size: 12pt;
	}
	.bar {
		width: 90%;
	}
	.leftPane, .rightPane {
		float: none;
		margin-left: 0;
		width: 100%;
	}
	.footer {
		display: none;
	}
	.numericTable {
		font-size: 65%;
	}
	select {
		width: 20em;
	}
}
@media all and (max-width: 800px) {
	body {
		font-size: 13pt;
	}
	select {
		width: 25em;
	}
}

.health-green, .health-yellow, .health-red {
  font-weight: bold;
}
.health-green {
  color: green;
}
.health-red {
  color: red;
}
.health-yellow {
  color: yellow;
  background: grey;
}

.redbox {
  border: 1px solid red;
  background: #FFA07A;
  color: red;
  font-weight: bold;
}

.critical, .ok, .warning, .unknown {
  font-family: Arial, Verdana, sans-serif;
  font-size: 9pt;
  color: white;
  border-radius: 4px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
}

.ok {
  background-color: #00CC33;
}

.critical {
  background-color: #ff3300;
}

.unknown {
  background-color: #E066FF;
}

.warning {
  background-color: #FFA500;
}

.timestamp {
  padding-left: 10px;
  font-size: 8pt;
  color: black;
  font-style: italic; 
}

.center, .center-text {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-text {
  width: 50%;
  text-align: center;
}