* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}

h1 { font-size:22px; color:#FFFFFF }

h2 { font-size:20px; }

h3 { font-size:15px; }

h4 { font-size:12px; }


#wrapper { 
 margin: 0 auto;
 width: 922px;
}

#header {
 color: #333;
 width: 900px;
 float: left;
 padding: 10px;
 border: 1px solid #007899;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background: #000000;
}

#navigation {
 float: left;
 width: 900px;
 color: #333;
 padding: 10px;
 border: 1px solid #007899;
 margin: 0px 0px 0px 0px;
 background: #00456A;
}

#nav-menu ul {
 list-style: none;
 padding: 0;
 margin: 0;
} 

#nav-menu li { 
 float: left;
 /* width between buttons */
 margin: 0 0.6em;
} 

#nav-menu li a {
background: #1B6C90;
height: 2em;
line-height: 2em;
float: left;
width: 10em;
display: block;
border: 0.1em solid #94a7ba;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover {
background: #ffbe00;
height: 2em;
line-height: 2em;
float: left;
width: 10em;
display: block;
border: 0.1em solid #94a7ba;
color: #000000;
text-decoration: underline;
text-align: center;
}

/* Hide from IE5-Mac \*/
#nav-menu li a {
float: none
}
/* End hide */

/*
This is optional, but if we don't assign one then menu items on the right may 
be pushed below the others if users resize their screens. Our new CSS command is:
#nav-menu {
width:30em
} 
*/




#leftcolumn { 
 color: #333;
 border: 1px solid #007899;
 background: #000000;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 280px;
 float: left;
}

#rightcolumn { 
 float: right;
 color: #FFFFFF;
 border: 1px solid #007899;
 background: #00456A;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 598px;
 display: inline;
}

#footer { 
 width: 900px;
 clear: both;
 color: #FFFFFF;
 border: 1px solid #007899;
 background: #00456A;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}