body { font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif; }
.animator { cursor: pointer; }

/* document layout ids */
#header { margin: 0; }

#content { clear: left; margin-top: 15px; }

#nav ul {
	padding-left: 0;
	margin: 0 0 1em 0;
	background-color: #36c;
	color: white;
	float: left;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.7em;
}
#nav ul li { display: inline; }
#nav ul li a {
	padding: 0.2em 0.5em;
	background-color: #36c;
	color: white;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
}
#nav ul li a:hover { background-color: #69f; color: white; }

#footer {
	clear: both; 
	margin-top: 20px; border-top: 2px solid #fc6;
	font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: right;
}

#toolinfo { font-size: small; font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #669; background-color: #eee; border: 1px solid #999; padding: 4px; }
#toolinfo h2 { font-size: small; border-bottom: 1px solid #ccc; color: #99c; margin-top: 0; margin-bottom: 4px; padding: 0; }
#toolinfo p { margin-top: 0; margin-bottom: 0; }

#group1, #group2, #group3, #group4 { padding: 5px; margin-bottom: 15px; border-width: 1px; border-style: solid; }
#group1 { border-color: #cf6; background-color: #f0ffe0; }
#group2 { border-color: #6cf; background-color: #e0f0ff; }
#group3 { border-color: #f6c; background-color: #ffe0f0; }
#group4 { border-color: #f60; background-color: #fff0e0; }

/* html elements */
label { border-bottom: 1px dotted #ccc; }
label:hover { border-bottom: 1px solid #66f; cursor: pointer; }
h1 { color: #F79646; }
h2 { margin-top: 0; }

input[type=text], textarea { border: 1px solid; border-color: #666 #ccc #ccc #666; }
input.button { /*cursor: pointer;*/ }
textarea:focus, input[type=text]:focus, .sffocus, .sffocus { background-color: #ffc; }

/* individual classes */
.small { font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.status { background-color: #ff6; border: 2px solid #f30; padding: 2px; }
.gray { color: #999; }

.tabletop, .tableside { background-color: #99c; }
.tabletop tr, .tableside tr { vertical-align: baseline; }
.tabletop th, .tableside th { background-color: #c5e586; }
.tabletop td, .tableside td { background-color: #efefef; }
.tabletop th { vertical-align: bottom; }
.tableside th { text-align: right; }
.tabletop tr.alt td { background-color: #efeff8; }

#tooltip { font-size: small; background-color: #fc9; opacity: 0.8; padding: 4px; }
#tooltip h3 { font-size: small; padding: 0; margin: 0; }
#tooltip p { padding: 0; margin: 0; }