html, body
{
margin:0;
padding:0;
border-style:none;
}

body
{
margin:5px 0;
text-align:left;
font-family:verdana, arial, sans-serif;
font-size:84%;
font-weight:normal;
color:#000;
background:#0a3514;
}

p
{
margin:2px 20px;
padding-top:5px;
font-style:normal;
text-indent:12px;
}

p.noindent
{text-indent:0;}

p.center
{
text-align:center;
text-indent:0;
}

#maincol h1, #maincol h2, #maincol h3, #maincol h4, #maincol h5
{
margin:6px 30px;
font-family:"times new roman", georgia, serif;
text-align:center;
padding:0;
font-weight:bold;
}

#maincol h1
{font-size:27px;}

#maincol h2
{font-size:22px;}

#maincol h3
{font-size:18px;}

#maincol h4
{font-size:15px;}

a, a:visited
{
font-weight:bold;
text-decoration:underline;
color:#000;
}

a:hover, a:active
{
color:#ce6b00;
text-decoration:none;
font-variant:small-caps;
}

img
{border-style:none;}

img.left
{
float:left;
margin:5px 5px 5px 30px;
}

img.right
{
float:right;
margin:5px 10px 5px 5px;
}

img.right2
{
float:right;
margin:5px 30px 5px 5px;
}

.bold
{font-weight:bold;}

.red
{color:#ce6b00;}

.green
{color:#0a3514;}

.cap /* creates the large drop-cap first-letter in the paragraphs */
{
font-family:georgia, "times new roman", serif;
font-size:35px;
color:#0a3514; /*green */
font-weight:bold;
float:left;
height:35px;
line-height:35px;
margin:-2px 3px 0 0;
}

#wrapper
{
background:#0a3514;
width:750px;
border-style:none;
text-align:left;
margin:5px auto;
}

#header
{
display:block;
height:240px;
background-image:url(../images/fosterslogging_header.jpg);
background-position:top center;
background-repeat:no-repeat;
margin:0 auto;
}

#maincol
{
background-color:#fff;
float:right;
display:inline;
position:relative;
width:600px;
}

#maincol ul
{
border-style:none;
margin:5px 20px;
}

#maincol ul li, #maincol ul li.normal
{
list-style-image:url(../images/bullet_01.jpg);
padding:0;
font-size:14px;
line-height:1.1;
font-weight:bold;
}

#maincol ul li.normal
{font-weight:normal;}

#maincol ul ul
{margin:5px 0;}

#maincol ul ul li, #maincol ul ul li.normal
{
list-style-image:url(../images/bullet_02.jpg);
padding:0;
font-size:14px;
line-height:1.1;
font-weight:normal;
}

#maincol ul ul li.normal
{font-weight:normal;}

#leftcol
{
background:#0a3514;
width:150px;
float:left;
position:relative;
}

#leftcol h3
{
font-size:16px;
font-family:verdana, arial, sans-serif;
text-align:center;
margin:10px;
color:#fff;
}

#leftcol h3.img
{
text-align:center;
margin:2px;
}

#footer
{
padding-bottom:10px;
height:50px;
background-image:url(../images/fosterslogging_footer.jpg);
background-repeat:no-repeat;
margin:0 auto;
clear:both;
}

#footer p
{
color:#0a3514;
margin:0 30px 0 180px;
font-size:11px;
font-weight:bold;
font-variant:small-caps;
text-align:center;
}

#footer a, #footer a:visited
{color:#ce6b00;}

#footer a:hover
{
background:transparent;
text-decoration:underline;
color:#0a3514;
font-variant:normal;
font-size:11px;
}

.clear
{clear:both;}

/* fixes clearing of the floating elements on maincol and leftcol */

.clearfix:after /* :after is a pseudo-element that inserts something after an element.  So, after content: which is defined as "." it will clear the columns by displaying a "block of text that has a height of 0", clears any content that is floating, and is effectively hidden from view */
{
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix
{display:inline-table;}

/* Hides from IE-mac \*/
* html .clearfix
{height:1%;}

.clearfix
{display:block;}
/* End hide from IE-mac */

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.

Start menu class.
=================================================================== */

.menu
{
height:200px;
font-size:70%;
margin:5px;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul
{
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}

/* style the list items */
.menu li
{
background:#000;
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub
{background:#008b3c;}

/* get rid of the table */
.menu table
{
position:absolute;
border-collapse:collapse;
top:0;
left:0;
z-index:100;
font-size:1em;
}

/* style the links */
.menu a, .menu a:visited
{
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:140px;
color:#fff;
text-indent:5px;
border-top:0 solid #0a3514;
border-right:1px solid #0a3514;
border-bottom:1px solid #0a3514;
border-left:1px solid #0a3514;
font-weight:normal;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited
{width:150px; w\idth:149px;}

/* style the link hover */
* html .menu a:hover
{
color:#fff;
background:#ce6b00;
position:relative;
text-decoration:none;
font-variant:normal;
font-weight:normal;
}

.menu li:hover
{position:relative;}

/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus
{
color:#000;
background:#ce6b00;
}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a
{
color:#000;
background:#ce6b00;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul
{
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(../images/transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul
{visibility:visible;}

/* scrolling photo gallery styles start here */

#scroller
{
width:598px;
height:360px;
margin:0 auto;
position:relative;
padding:5px 0;
border:1px solid #fff;
background-image:url(../images/main.jpg);
background-position:50px 30px;
background-repeat:no-repeat;
}

#scroller em
{
display:block;
width:228px;
height:175px;
position:absolute;
top:0;
right:0;
border:1px solid #000;
}

#scroller em b#info
{font-style:normal;}

#scroller span
{
display:block;
width:360px;
height:365px;
position:absolute;
top:0;
left:0;
border:1px solid #000;
}

#scroller span b#info, #scroller em b#info
{
font-size:10px;
font-style:italic;
color:#aaa;
position:absolute;
bottom:5px;
right:20px;
font-family:georgia, "times new roman", serif;
font-weight:bold;
}

#scroller b#thumbs
{
display:block;
width:219px;
height:175px;
overflow:auto;
float:right;
margin-top:175px;
border-top:1px solid #000;
border-right:0 solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
padding:5px;
}

#scroller b#thumbs a
{
display:block;
float:left;
margin:0 10px 10px 0;
background:#aebcd7;
width:50px;
height:50px;
border:1px solid #000;
}

#scroller b#thumbs a img
{
width:50px;
height:50px;
border-style:none;
}

#scroller b#thumbs a:hover
{
border:1px solid #000;
background:#fff url(../images/click_on.gif);
}

#scroller b#thumbs a:active, #scroller b#thumbs a:focus
{
border:1px solid #000;
background:#fff url(../images/active.gif);
outline:0;
}

#scroller b#thumbs a:hover img
{
display:block;
position:absolute;
background:#aebcd7;
z-index:500;
}

#scroller b#thumbs a:active img, #scroller b#thumbs a:focus img
{
display:block;
position:absolute;
background:#aebcd7;
z-index:100;
}

#scroller b#thumbs a:hover img.hr, #scroller b#thumbs a:focus img.hr
{
width:160px;
height:140px;
right:35px;
top:7px;
border-style:none;
}

#scroller b#thumbs a:hover img.vt, #scroller b#thumbs a:focus img.vt
{
width:120px;
height:160px;
right:55px;
top:7px;
border-style:none;
}

#scroller b#thumbs a:active img.hr, #scroller b#thumbs a:focus img.hr
{
width:320px;
height:300px;
left:20px;
top:7px;
border-style:none;
}

#scroller b#thumbs a:active img.vt, #scroller b#thumbs a:focus img.vt
{
width:240px;
height:320px;
left:60px;
top:7px;
border-style:none;
}