/* CSS Document 

****************************************************************************
BASIC INFO FOR THIS CSS
****************************************************************************
author:   Eric, INSTAAR
version:  march 2009

Sources of inspiration: Dave Lubinski orginially inspired the rounded corner box and side nav. column code was derivednad modified from http://www.neuroticweb.com/recursos/2-columns-layout/ as a template.
For CSS cross browser dropdown. simple to edit and modify particuliarly in the html came from.
"The original version of this stylesheet of dropdown menu and the associated (x)html is available at http://www.cssplay.co.uk/menus/dd_valid.html, Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in anyway to fit your requirements."
I modified these to fit my design, and purpose I incorprated some things in that I felt may do important.

Watch out for!
Generally Cleared tests; 
Tested in current IE7, IE8 beta Firefox, Safari, Google Crome and the now defunct Netscape. 


/* 
****************************************************************************
TABLE OF CONTENTS
****************************************************************************

1. GLOBAL
2. LAYOUT BANNER & WRAPPER
3. MAIN MENU; CSS DROP DOWN
4. COLUMN 1 MAIN CONTENT
5. MAIN P and H TAGS DEFINTIONS
6. SIDE NAVIGATION & LINKS DIVS COLUMN 2
7. SIDE NAVIGATION & LINKS LAYOUT DEFINTIONS
8. FOOTER
*/



/* 
****************************************************************************
1. GLOBAL
---------------------------------------------------------------------------- 
*/

html.center, body.center {
height: 100%; /*inherited from mikeindustries, not sure if and how it works or what its supposed to fix*/
}
html {
min-width: 960px; /*might fix a Mozilla bug*/
width:1280px;
height: 100%; /*height and margin-bottom keeps page centered with or without vertical scrollbar*/
margin-bottom:1px; /*height and margin-bottom keeps page centered with or without vertical scrollbar*/
}
body {
padding: 0;
margin: 0;
text-align: center;  
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%; 	/*Percent here and em elsewhere improves font resizing in PC IE 6 */
color: #333333;
background-position: 0 0;
background-color: #FFFFFF;
background-repeat: repeat-x;
background-image: url(cssImages/bg_wt.jpg);
}

/* 
****************************************************************************
2. LAYOUT
---------------------------------------------------------------------------- 
*/

#banner {
height: 128px;
width:1280px;
margin:0px;
padding:0px;
background-image:url(cssImages/banner.jpg);/*THE BANNER IMAGE see working for template*/
border-color:#000;
border-bottom-style: solid;
border-bottom-width: 2px;
border-top-style: solid;
border-top-width: 2px;
}
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px 0px;
width: 1024px;
}

/*
****************************************************************************
3. Main Menu; CSS DROP DOWN see notes for source info
---------------------------------------------------------------------------- 
*/
.menu {
font-family: arial, sans-serif;
width:1024px;
height:25px;
position:relative;
font-size:13px;
z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:141px; /*controls width of button*/
height:22px;
text-align:center;
color:#000;
border:1px solid #fff;
background-image: url(cssImages/btLt.gif);
background-repeat:repeat-x;
line-height:22px;
font-size:14px;
overflow:hidden;
}
.menu ul {padding:0; 
margin:0; 
list-style: none;
}
.menu ul li {
float:left; 
position:relative;
}
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:22px; left:0; /*controls where dropdown starts vertacally relative to main buttin*/
width:118px;
}
.menu ul li:hover ul li a.hide {
background-color:#C8AB9D; /*pink*/
color:#fff;
}
.menu ul li:hover ul li:hover a.hide {
background-color:#976551; /*red*/
color:#fff;
}
.menu ul li:hover ul li a.small {
display:block; 	
width:124px; /*controls width of button*/
height:18px;
text-align:center;
color:#fff;
border:1px solid #fff;
font-size:10px;
}		
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {/* UNDERLIES DROP DOWN COLOR*/
display:block;
background:#D6CBB7;
color:#000;
}
.menu ul li:hover ul li a:hover {
background-color:#976551; /*rust*/
color:#fff;
}
.menu ul li:hover ul li:hover ul {
display:block; 
position:absolute; 
left:118px; top:0;
}
.menu ul li:hover ul li:hover ul.right { /*part of nested menu not currently in use*/
right:118px;
}

/*
****************************************************************************
4. COLUMN 1 MAIN CONTENT
---------------------------------------------------------------------------- 
*/

#allcontent { /*dive contianer for the next for divs*/
float: left;
width: 824px;
margin-top:10px;
}
#lead {
float: left;
width: 824px;
height: 60px;
background-image:url(./cssImages/lead.gif);
background-repeat:no-repeat;
}
#content {
float: left;
width: 824px;
min-height: 550px;
background-repeat: repeat-y;
padding: 0px;
text-align:left;
background-image:url(./cssImages/main.gif);
}
#content #image {/* for the random image div*/
width:440px;
height:350px;
float:right;
padding-left:15px;
}
#tail {
float: left;
width: 824px;
height: 21px;
background-image:url(./cssImages/tail.gif);
}

/*
****************************************************************************
5. MAIN P & H TAGS DEFINTIONS
---------------------------------------------------------------------------- 
*/

#allcontent #lead p {
font-family: Arial, Helvetica, sans-serif;
font-size:1.2em;
line-height: 1.3em;
margin-top: 1.1em;
margin-left: 20px;
margin-bottom: 0; 
}
#allcontent #content h3 {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
font-size: 1em;
margin-left: 2px;
margin-right: 2px;
padding: 1px 0 1px 15px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color:#666666;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #666666;
background-color:#D6CBB7;
}
#allcontent #content h4 {
font-family: Arial, Helvetica, sans-serif;
color: #976551;
text-align: left;
font-size: 16px;
margin-left: 28px;
margin-right: 20px;
margin-bottom:8px;
padding:0px;
}
#allcontent #content p {
font-weight: normal;
font-size: 13px;
line-height: 18px;
margin-top:0px;
margin-left: 44px;
margin-right: 20px;
padding:0px 0px 0px 12px;
}

/* 
****************************************************************************
6. SIDE NAVIGATION & LINKS DIVS
--------------------------------------------------------------------------- 
*/


#sidebar{ /*the next two divs are nested inside*/
	margin-top:10px;
	float: left;
	width: 188px;
	padding-left:12px;
	height: auto;
}
#sidenav { 
margin: 0;
width: 187px;
height: 1% ;/* Holly hack for Peekaboo Bug */
}
#hi_lin { 
margin: 0;
width: 187px;
height: 1% ;
}

/* 
****************************************************************************
7. SIDE NAVIGATION & LINKS LAYOUT DEFINTIONS
--------------------------------------------------------------------------- 
*/


/* VERTICAL NAV MENU - modified from Listamatic 2 site http://css.maxdesign.com.au/listamatic2/vertical02.htm*/

#sidebar #sidenav {
	margin-left: 0px;
	background-color: #E8E1D5;
	height:150px;
	border-color:#000;
	margin-bottom:10px;
}
#sidebar #sidenav h5 { /* for link group headings */
font-family:Arial, Helvetica, sans-serif;
font-size: 75%;
color: #FFFFFF;
text-align: left;
background-color:#333333;
margin: 0px;
padding: 0px;
text-align: center;
}
#sidebar #sidenav ul {
margin:0px 0 0px 0;
padding:0;
list-style-type:none;
list-style-position:outside; /*PC IE requires "outside" otherwise it indents the list, which overruns the container and NO LIST IS displayed! */
}
#sidebar #sidenav li { 
margin: 0 0 2px 0; 
font-weight: normal;
}
#sidebar #sidenav a:link /*text on side nav buttons*/{
color: #000;
background-color: #D6CBB7;/*c* THIS IS THE STATIC POSTION*/
text-decoration: none;
font-weight: normal;
}
#sidebar #sidenav a:visited {
background-color: #fff; /*white if visited I'm not sure I am quite pleased with this yet*/
color: #000;
font-weight: normal;
}
#sidebar #sidenav a:hover {
color: #FFF;
background-color: #976551;/*c* THIS IS THE OVER POSITION rust*/
text-decoration:none;
font-weight:bold;
}
#sidebar #sidenav a {
display: block;
padding: 3px 4px;
width: 170px;
text-align:center;
text-decoration: none;
border-bottom: 1px solid #666; /*line between main item and first sublisted item*/
}
#sidebar #sidenav ul ul li {
margin: 0 0 1px 0; 
}
#sidebar #sidenav ul ul a {
display: block;
padding: 2px 0 2px 10px;
margin-left: 10px;
width: 140px; 
text-decoration: none;
}
#sidebar #sidenav p {
color: #000;
font-family:Arial, Helvetica, sans-serif;
font-size: 75%;
margin: 3px 0px 0px 0px;
}

/***************** FOR HIGHLIGHTS LINKS DIV*************************/	

#sidebar #hi_lin h5 { /* for link group headings */
font-family:Arial, Helvetica, sans-serif;
font-size: 75%;
color: #FFFFFF;
text-align: left;
background-color:#333333;
margin: 0px 0px 0px 0px;
text-align: center;
}
#sidebar #hi_lin {
	margin-left: 0px;
	background-color: #D6CBB7;
	height:auto;
	border:#000;
}
#sidebar #hi_lin ul {
margin: 0px 0 0px 0;
padding: 0;
list-style-type: none;
list-style-position: outside; /*PC IE requires "outside" otherwise it indents the list, which overruns the container and NO LIST IS displayed! */
}
#sidebar #hi_lin li { 
margin: 0 0 2px 0; 
font-weight: normal;
}
#sidebar #hi_lin a:link {
color: #000;
background-color:#E8E1D5;/*c* THIS IS THE STATIC POSTION*/
text-decoration: none;
font-weight: normal;
}
#sidebar #hi_lin a:visited {
background-color: #CDBDA3; /*Gives darker color if visited*/
color: #000;
font-weight: normal;
}
#sidebar #hi_lin a:hover {
color: #000;
background-color: #976551;/*c* THIS IS THE OVER POSITION Rust*/
text-decoration:none;
font-weight:bold;
}
#sidebar #hi_lin a {
display: block;
padding: 3px 4px;
width: 162px;
text-align:center;
text-decoration: none;
border-bottom: 1px solid #666;
}
#sidebar #hi_lin ul ul a {
display: block;
padding: 2px 0 2px 10px;
text-align:center;
width: 130px; 
text-decoration: none;
}
#sidebar #hi_lin p {
color: #000;
font-family:Arial, Helvetica, sans-serif;
font-size: 75%;
margin: 3px 0px 0px 8px;
text-align:center;
}
#sidebar #high img { /*if needed for icons etc.*/
margin-right:5px;
}

/* 
****************************************************************************
8. FOOTER
--------------------------------------------------------------------------- 
*/

#footer {
clear: both;
width:1024px;
height:175px;
text-align:center;
padding-top:8px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size:10px;
}
.footerCopyright {
color: #000; 
text-align: center;
background-color: #fff;
font-size: 80%;
font-style:normal;
}