/* 
With no modifier, it's a division
html and body are divisions

With a #, it's an ID.  ID's are unique.
- Each element can have only one ID
- Each page can have only one element with that ID
- If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of "comments" and will automatically scroll the page to show that element.

With a ., it's a Class.  Classes are not unique.
- You can have the same Class on multiple elements on a page
- An element can have multiple Classes
- Class name cannot start with a number

Elements can have both ID and Class.

There are no browser defaults for any ID or Class.

*/


html { height: 100%; }
	
body {
    margin: .5em;
    padding: 0px;
    background: #CACCB4;
    font: 100% arial, sans-serif;
    min-height: 100%; }

	pre {text-indent: 30px}

    /* .9em/1.3em means fontsize/lineheight */
    #content {font: 1.0em/1.3em "bitstream vera sans", verdana, sans-serif;
		text-align: justify;
		background: #ABAD85;
		padding: .5em;
		border: 2px solid black;
		border-top: 2px solid black;
		z-index: 2;
        min-height: auto; }

	#content a {
		text-decoration: none;
		color: #E8E9BE; }
	#content a:hover { background: #898B5E; }

body.content {font: 1.0em/1.3em "bitstream vera sans", verdana, sans-serif;
		text-align: justify;
		background: #ABAD85;
		padding: .5em;
		border: 2px solid black;
		border-top: 2px solid black;
		z-index: 2;
        vertical-align: middle;
        min-height: auto; }
body.content a {
		text-decoration: none;
		color: #E8E9BE; }
body.content a:hover { background: #898B5E; }

.headerbox {font: 1.0em/1.3em "bitstream vera sans", verdana, sans-serif; }

.smbuttonsbox { float: left ; }
.googlebox { float: right ; }


.boxleft {
        padding: 5px 5px 5px 5px;
        margin: 5px 5px 5px 5px;
        float: left; 
        max-width: 50%; }
.boxright {
        padding: 5px 5px 5px 5px;
        margin: 5px 5px 5px 5px;
        float: right; 
        max-width: 50%; }
.boxbottom {
        padding: 10px 10px 10px 10px;
        margin: 5px 5px 5px 5px;
        float: bottom; 
        display: inline-block; }

    #boxleft {
        padding: 5px 5px 5px 5px;
        margin: 5px 5px 5px 5px;
        float: left; 
        max-width: 50%; }
    #boxright {
        padding: 5px 5px 5px 5px;
        margin: 5px 5px 5px 5px;
        float: right; 
        max-width: 50%; }

.adbox {
    display: inline-block;
    position: relative;
    padding: .6em;
    margin: 1em;
    background: #999975;
    text-align: center;
    vertical-align: top;
    width: 15%;
    max-width: 372px;
    min-width: 100px;
    min-height: 250px;
    max-height: 100%; }

.gridbox {
    display: inline-block;
    position: relative;
    padding: .3em .1em .1em .1em;
    margin: .1em .1em .3em .1em; 
    background: #ABAD85;
    border: 2px solid black;
    text-align: center;
    vertical-align: top;
    width: 372px;
    min-height: 300px;
    max-height: 100%; }
.a {width: 95%;     /* used for images in boxes */
    max-width: 370px; }
.caption { /* used in image boxes as <p class="caption">CAPTION</p> */
    font-size: .9em;
    font-style: italic; }
.caption a {
	text-decoration: none;
	color: #E8E9BE; }
.caption a:hover { background: #898B5E; }

	#menutab {
		color: #000;
		margin: 0px 0px 0px 0px;
		padding: 0px;
		z-index: 1; }
	#menutab li {
		display: inline;
		overflow: hidden;
		list-style-type: none; }
	#menutab a, a.active {
		color: #DEDECF;
		background: #898B5E;
		font: bold 1em "Trebuchet MS", Arial, sans-serif;
		padding: 2px 5px 2px 5px;
		margin: 0;
		text-decoration: none; }
	#menutab a.active {
		background: #ABAD85;
		border-bottom: 3px solid #ABAD85; }
	#menutab a:hover {
		color: #fff;
		background: #ADC09F; }
	/* #menutab a:visited {
		color: #E8E9BE; } */ 
	#menutab a.active:hover {
		background: #ABAD85;
		color: #DEDECF; }

	#bodytab {
		color: #000;
		margin: .9em 1em 0em 1em;
		padding: 0px;
		z-index: 1;
		padding-left: 10px }
	#bodytab li {
		display: inline;
		overflow: hidden;
		list-style-type: none; }
	#bodytab a, a.active {
		color: #DEDECF;
		background: #898B5E;
		font: bold 1em "Trebuchet MS", Arial, sans-serif;
		border: 2px solid black;
		padding: 0.2em 0.5em 0em 0.5em;
		margin: 0;
		text-decoration: none; }
	#bodytab a.active {
		background: #ABAD85;
		border-bottom: 3px solid #ABAD85; }
	#bodytab a:hover {
		color: #fff;
		background: #ADC09F; }
/*	#bodytab a:visited {
		color: #E8E9BE; } */
	#bodytab a.active:hover {
		background: #ABAD85;
		color: #DEDECF; }

#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
  background-color: #898B5E; }
#navbar li {
    float: left;
    background-color: #898B5E; 
    margin: 0 0 -5px 0; }
#navbar li a {
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
    background-color: #898B5E; }
#navbar li a:hover {
  background-color: #ABAD85; }
#navbar a.active {
    background: #ABAD85; }
#navbar a, a.active {
	color: #DEDECF;
	background: #898B5E; }
#navbar a.active:hover {
		background: #ABAD85;
		color: #DEDECF; }

table#intro {
    border: 2px solid black;
	width="100%";
    font: 1em/1.3em "bitstream vera sans", verdana, sans-serif;
    text-align: justify;
    background: #ABAD85;
    padding: 20px;
    border-top: 2px solid black;
    z-index: 2;	}
#content a {
	text-decoration: none;
	color: #E8E9BE; }
#content a:hover { background: #898B5E; }

table {max-width: 100%; }
table#main {
	border: 1px solid #000;
	width="100%"; }

td {padding: 5px;
	text-align: left;
	vertical-align: middle; }
td.title {padding: 5px;
	background: #898B5E;
	text-align: left;
	font-weight: bold; }
td.header {padding: 5px;
	background: #898B5E;
	text-align: center;
	font-weight: bold; }
td.total {padding: 5px;
	background: #cccc66;
	text-align: left;
	font-weight: bold; }
td.red {padding:5px;
	background: #7E3517;
	text-align: left;
	font-weight: bold; }