/*========================= Basics ============================*/
html { min-width: 600px; }

body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers  */  
    font-family: verdana,arial,sans-serif;
	font-size:    x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small; /* Prevents IE from showing erroneous border on bottom of selected tab */
	color: #333;
}  
.clearhack { display: inline; } /*Clears Box Model Hack in IE5*/

body { 
/*  background-color: #F5FFF5;*/

  margin: 10px 20px 10px 20px;  
  
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 0.9em; 
/*  scrollbar-arrow-color:black;
  scrollbar-track-color:#E8FFE8;
  scrollbar-3dlight-color:#D0FFD0;
  scrollbar-highlight-color:white;
  scrollbar-darkshadow-color:black;
  scrollbar-shadow-color:#D0FFD0;
  scrollbar-face-color:#D0FFD0;*/
  
/*  min-height: 600px; Not supported by IE! */
}

a { color: #06C; }
a:hover { color: #333; }
a:active { color: #000; }

p { line-height: 140%; }

h1,h2 {
	font-family: trebuchet ms, Arial, sans-serif;
	font-weight: bold;
	color: #333;
}

h1 {
	font-size: 180%;
	margin: 0;
}

h1 a { text-decoration: none; color: #333; }
h1 a:hover { border-bottom: 1px dotted #666; color: #000; }

h2 {
	font-size: 140%;
	padding-bottom: 2px;
	border-bottom: 1px solid #CCC;
	margin: 0;
}

/*p.note {
	background: #EEE;
	padding: 4px;
	font-family: tahoma;
	font-size: 85%;
	line-height: 130%;
	margin-top: 0;
}*/


/*================ Page Header ===========================================*/

div.pageheader {
  background: transparent;
  border: none;
  height: 90px; 
}

div.logo {
  background: transparent;
  border: none;
}

div.logomid {
  background-color: #ffcc00;
  border: none;
}

.logo img { display: block; }
.logomid img { display: block; }

span.logoleft { float: left; }
span.logoright { 
	float: right; 
	padding-top: 3px;
}


/*================ Page Footer ===========================================*/

/*
This method of doing page footers allows having text aligned to both ends. The table must use
td.pagefooter for its cells, with the right-hand one specifying align="right".
*/
table.pagefooter {
  background-color: #FFF3B3; 
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ffcc00;
  width: 100%;
  padding: 0.4em;
  margin-top: 0.5em;
}

td.pagefooter { 
  margin: 0;
  padding: 0.5em;
  font-size: 0.6em; 
}

a.pagefooter { color: #333; }


/*
This is an alternate way of doing the page footers. It works standalone, without requiring any divs, tables, or anything
else, but it only allows having text aligned to one end or the other, not both as can be done when using the table method.
*/
p.pagefooter {
  background: #FFF3B3; 
  font-size: 0.6em;
  border: 1px solid #ffcc00;
  padding: 0.5em 0 0.5em 0.5em;
}


/*======================= RightColumn ========================*/

div#rightcolumn {
  margin-top: 3em; /* Must match tabbox height so that the top of the visible part of RightColumn aligns with bottom of navbar */
  border: 1px solid #ffcc00;
  background-color: #FFF3B3;  

  position: absolute;
  right: 20px;  
  width: 180px;
  
/*  min-height: 600px;  Not supported by IE! 
/*  height: 560px; Bad idea! With IE this acts as min-height, but with Firefox it is absolute height, and page can't get taller.*/
}

div#rightcolumn h3 {
  margin: 0;
  padding: 0.3em 1em 0.4em 1em;
/*  padding: 0.3em 10px 0.4em 1em; */
  font-size: 0.8em;
  font-weight: bold;
  background-color: #ffcc00;
/*  text-transform: lowercase; */
}

div#rightcolumn p {
  margin: 0.5em 0.5em 0.5em 0.5em;
  padding: 0em 0em 1.5em 0.5em;
  font-size: 0.8em;
  vertical-align: middle;
  text-align: left; 
}
  
div#rightcolumn p.image {
  margin: 5px 0 1.0em 0;
  border-top: 1px solid #ffcc00;
  
/*  padding: 10px 10px 0.5em 10px; */
  padding: 1.5em 1.5em 0.5em 1.5em; 
  font-size: 0.8em;
  
  margin-top: 1em; 
  margin-bottom: 1em;
  
  vertical-align: middle;
  text-align: center; 
}
  

div#rightcolumn img { border: none; }


/*================ Nav Bar ===========================================*/

#main {
	border: 1px solid #666;
	clear: both;
	background: #FFF3B3; /* Set color directly below tabs to match active tab color */
 	padding-top: 2em;    /* Set vertical size of area between tabs and content area */
    margin-right: 190px; /* Set right margin to allow room for RightColumn */
}

#maincontents {
	padding: 1.5em;
	background: #FFFDF3;
/*	min-height: 300px;  Not supported by IE! */

/*	height: 560px; Bad idea! With IE this acts as min-height, but with Firefox it is absolute height, and page can't get taller.*/
}

/* I can't get this to work. The margin and/or padding seems to occur on bottom AND top!
#maincontents p {
    margin-bottom: 2em; 
  padding-bottom: 2em;
  text-align: left; 
}
*/
  
#tabbox {
	position: relative;
	width: 100%;
	height: 3em; /* Must match margin-top of div#rightmargin or else things don't line up right */
	width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#tabbox ul#tabs {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -1px;
	width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#tabbox ul#tabs li  {
	display: inline;
	list-style: none;
}

#tabbox ul#tabs a,#tabbox ul#tabs span,#tabbox ul#tabs a.current {
	width: 8em;
	display: block;
	float: left;
	padding: 4px 0;
	margin: 1px 2px 0 0;
	text-align: center;
	font-family: tahoma, verdana, sans-serif;
	font-size: 85%;
	text-decoration: none;
	color: #333;
}

#tabbox ul#tabs span,#tabbox ul#tabs a.current,#tabbox ul#tabs a.current:hover {
	border: 1px solid #666;
	border-bottom: none;
	background: #FFF3B3;
	padding-bottom: 6px;
	margin-top: 0;
}

#tabbox ul#tabs a {
	background: #FFFAE1;
	border: 1px solid #AAA;
	border-bottom: none;
}

#tabbox ul#tabs a:hover {
	margin-top: 0;
	border-color: #666;
	background: #FFF7CD;
	padding-bottom: 5px;
}

#tabbox ul#secondary {
	position: absolute;
	margin: 0;
	padding: 0;
	bottom: -1.4em;
	left: 1px;
	width: 50em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#tabbox ul#secondary li a,#tabbox ul#secondary li span {
	width: auto;
	display: block;
	float: left;
	padding: 0 10px;
	margin: 0;
/*	text-align: auto; */
	text-align: center;
	border: none;
	border-right: 1px dotted #AAA;
	background: none;

}

#tabbox ul#secondary li a {
	color: #06C;
	text-decoration: underline;
}

#tabbox ul#secondary li a:hover {
	color: #333;
	background: transparent;
	padding: 0 10px;
	border: none;
	border-right: 1px dotted #AAA;
}

#tabbox ul#secondary li a:active {
	color: #000;
	background: transparent;
}

/*#tabbox ul#secondary li:last-child a { border: none; }*/