/* Basic areas */

html {
background: #868B42 url(layout/bodyfill.jpg) top left repeat-x;
}

body {
text-align: center;
background: transparent url(layout/contentfill.jpg) top center no-repeat;
font: .9em/1.5em arial, sans-serif;
color: #f9ffef;
margin: 0;
padding: 0 0 30px 0;
}

#container {
width: 780px;
background: #272115 url(layout/containerfill.jpg) top center repeat-y;
margin: 0 auto;
overflow: hidden;
}

#content {
background: transparent url(layout/contentfill.jpg) top center no-repeat;
min-height: 793px;
padding: 104px 0 0 0;
}

#header {
height: 390px;
position: relative;
width: 770px;
margin: 0 auto;
}

#flash {
height: 360px;
width: 770px;
}

#nav {
width: 770px;
position: absolute;
bottom: 4px;
left: 0;
background: #A1A98A url(layout/navfill.jpg) top center no-repeat;
padding: 10px 0 0 0;
margin: 0;
z-index: 100;
}

#text {
text-align: left;
width: 510px;
float: left;
display: inline;
margin: 22px 0 0 32px;
}

#footer {
height: 194px;
background: #868B42 url(layout/footerfill.jpg) top center no-repeat;
clear: both;
text-align: left;
width: 780px;
position: relative;
}

#footer p {
padding: 0; 
margin: 0;
position: absolute;
top: 100px;
left: 30px;
height: 54px;
line-height: 54px;
font-size: .75em
}

/* Basic styling of elements */

a {
color: #B5CF74;
}

a:hover {
color: #E2F3C6;
}

ul {
list-style: square;
margin: 0;
padding: 2px 0 2px 24px;
}

ul ul {
list-style: square;
margin: 0;
padding: 2px 0 2px 30px;
}

h1 {
font: small-caps 900 1.8em "trebuchet ms", tahoma, arial, sans-serif;
}

h2 {
font: small-caps 900 1.6em "trebuchet ms", tahoma, arial, sans-serif;
}

h3 {
font: small-caps 900 1.4em "trebuchet ms", tahoma, arial, sans-serif;
}

h4 {
font: small-caps 900 1.2em "trebuchet ms", tahoma, arial, sans-serif;
}

h5 {
font: small-caps 900 1em "trebuchet ms", tahoma, arial, sans-serif;
}


/* Nav Styles */

#nav ul {
list-style: none;
padding: 0;
margin: 0;
float: left;
position: relative;
text-align: center;
left: 50%;
z-index: 100;
}

#nav ul li {
float: left;
padding: 0 10px;
margin: 0;
position: relative;
text-align: center;
left: -50%;
}

#nav ul li a {
padding: 10px 0;
display: block;
}

#nav ul li a:link, #nav ul li a:visited, #nav ul li a:active  {
color: #272115;
text-decoration: none;
font: small-caps 900 1.3em/.4em "trebuchet ms", tahoma, arial, sans-serif;
}

#nav ul li a:hover {
color: #F3FFDF;
}

#nav ul li ul {
left: -9999px;
position: absolute;
text-align: left;
border: 4px solid #E3F2C9;
z-index: 100;
}

#nav ul li:hover ul {
display: block;
position: absolute;
width: 140px;
top: 100%;
margin: 0;
left: -30px;
background: #A2A98A;
padding: 0;
}

/* Opera 1px fix-hack http://virtuelvis.com/archives/2004/01/css-for-opera-7 */
@media all and (min-width: 0px){
  #nav ul li:hover ul {
     top: 27px;	
  }
}

#nav ul li:hover ul li {
clear: left;
display: block;
padding: 0;
margin: 0;
left: 0;
position: relative;
text-align: left;
z-index: 100;
}

#nav ul li ul a:link, #nav ul li ul a:visited, #nav ul li ul a:active  {
color: #272115;
text-decoration: none;
font: small-caps 900 1em/.9em "trebuchet ms", tahoma, arial, sans-serif;
display: block;
padding: 5px;
width: 130px;
background: #A2A98A;
}

#nav ul li ul a:hover {
color: #F3FFDF;
}

#nav ul li ul li {
display: none;
position: relative;
padding: 0;
margin: 0;
}

#nav ul li ul .flyout ul {
position: absolute;
left: -9999px;
padding: 0;
margin: 0;
}

#nav ul li ul .flyout:hover ul {
position: absolute;
display: block;
left: 140px;
top: 0;
}

/* Here's how I handle floats and clearing - remember you can use 2 classes one one element */

.fl {
float: left;
display: inline;
margin: 0 8px 4px 0;
}

.fr {
float: right;
display: inline;
margin: 0 0 4px 8px;
}

.cl {
clear: left;
}

.cr {
clear: right;
}

.cb {
clear: both;
}

/* Image treatment - floated images with borders are like class="bb fl" */

.bb {
border: 2px solid #E3F3CC;
padding: 3px;
}


/* Google Ads */

#ad_code { 
background: transparent; 
width:160px; 
margin: 22px 28px 14px 0;
display: inline; 
float: right;
}