body {
        font: 0.8em verdana, arial, sans-serif;
        background-color: #F2F2F2 ; /*#FCFBE1;*/
}

* {
        margin:0px; padding:0px;
}

a:link,
a:visited
{
        color:#102a81 ;
        text-decoration: none;
        font-weight: bold;
}

a:hover
{
        color:#102a81 ;
        text-decoration: underline;
}

a.selected:link,
a.selected:visited
{
        color:#A21019;
        text-decoration: underline;
}

h1
{
        font-size: 1.2em;
        margin-bottom: 5px;
}

h2
{
        font-size: 1.1em;
        margin-bottom: 5px;
}

p
{
        padding: 5px 0px 5px 0px;
}

div#mainwrapper 
{
        width:730px; 
        margin-left:auto; 
        margin-right:auto; 
        background-color:#7581A9; /* this b/g color is visible below the center col content div  */
}

div#header 
{
        width:730px;
        height: 84px;
        background-color:#ffcc33;
        background-image: url(../images/scouting.jpg);
        background-position: top;
        background-repeat: no-repeat;
}

div#headerMenu
{
        width:635px; /*575px;*/
        height: 17px;
        padding-left: 95px; /*155px;*/
        background-color:#ffcc33;
        background-image: url(../images/bar2.gif);
        background-position: right;
        background-repeat: no-repeat;
        font-weight: bold;
        font-size: 12px;
}

div#headerMenu a:link,
div#headerMenu a:visited
{
        color:#102a81 ;
        font-family: verdana;
        background-color: #FFCC33;
        text-decoration: none;
}

div#headerMenu a:hover
{
        font-family: verdana;
        text-decoration: underline;
}

div#headerMenu a.selected:link,
div#headerMenu a.selected:visited
{
        color:#A21019;
        text-decoration: underline;
}

div#headerMenu a.selected:hover
{
}

div#headerBottom
{
        width:730px;
        height: 10px;
        background-image: url(../images/3.gif);
        background-repeat: no-repeat;
}

div#contentarea 
{
        float:left;
        width:730px;
        background-color: #7581A9;
        background:url(../images/menubg.gif) repeat-y top left; /* faux columns graphic left column */
}

div#columnMenu
{
        float:left;
        width:155px;
        height: 500px;
        background-image: url(../images/menubg.gif);
        background-repeat: repeat-y;
        font-weight: bold;
        font-size: 11px;
        text-transform: uppercase;
        color: #F8C400;
        text-align: center;
        padding-top: 60px;
}


div#columnMenu div.first
{
        border-top: 2px solid #E2CD90;
}

div#columnMenu div.menuSubItem
{
        width: 148px;
        margin-right: 7px;
        height: 17px;
        padding-top: 2px;
        border-bottom: 2px solid #E2CD90;
}

div#columnMenu div.menuSubSubItem
{
        width: 148px;
        margin-right: 7px;
        height: 13px;
        padding-top: 2px;
        font-size: 11px;
        text-align: right;
        text-transform: none;
}

div#columnMenu div.selected
{
        background-color: #F8C400;
}

div#columnMenu div.menuSubItem a:link,
div#columnMenu div.menuSubItem a:visited,
div#columnMenu div.menuSubSubItem a:link,
div#columnMenu div.menuSubSubItem a:visited
{
        color:#F8C400 ;
        font-family: verdana;
        text-decoration: none;
        margin: 0px;
        padding: 0px;
}

div#columnMenu div.menuSubItem  a:hover,
div#columnMenu div.menuSubSubItem  a:hover
{
        color:#F8C400 ;
        font-family: verdana;
        text-decoration: underline;
}

div#columnMenu div.selected a:link,
div#columnMenu div.selected a:visited
{
        font-weight: bold;
        text-decoration: underline;
        color: #A21019;
}

div#columnMenu div.selected a:hover
{
}


div#columnContent
{
        float:right;
        width:560px;
        min-height: 650px;
        margin-right: 10px;
        display:inline;
        background-color:#FCFBE1;
}

div#contentHeader
{
        background-image: url(../images/HeaderBack.gif);
        background-repeat: no-repeat;
        width:545px;
        height: 25px;
/*      background-color: #102A81;*/
        color: #F8C400;
        text-align: left;
        padding-left: 15px;
        padding-top: 5px;
        font-weight: bolder;
        font-size: 14px;
        text-transform: uppercase;      
}

div#content
{
        width:540px;
        padding: 10px;
}

div#content ul
{
        margin-left: 15px;
}



.Heading1
{
        font-size: 1.2em;
        font-weight: bold;
}

.nieuwsItemDivider {
        margin: 4px 0px 4px 0px;
}

div#content img
{
        padding: 10px;
}

/*** Guestbook styles ***/
table.guestbook {
        border-collapse: collapse;
        font-size: 0.9em;
}

table.guestbook tr{
        background-color: #ffcc33;
}

table.guestbook td {
        padding-left: 3px;
        border: 1px solid #102a81;
}

table.guestbook td.time {
        padding-left: 3px;
        color: #ffcc33;
        background-color: #102a81;
        text-align: right;
        font-size: 0.8em;
}

table.guestbook tr.message{
        background-color: #ffcc33;
}

table.guestbook tr.message td{
        background-color: #ffcc33;
        padding: 5px;
}
        


div#footer {
        width:430px;
        float:left;
        height: 30px;
        background-image: url(../images/bottomSite.gif);
        background-repeat: no-repeat;
        color: #F8C400;
        text-align: bottom;     
        padding-top: 60px;
        padding-left: 300px;
        /* float:left ensures the footer background displays correctly - below the container divs, not the header */
        /* this is a change from the example in the book */
}

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
        display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;      /* further ensures the period is not visible */
}

.clearfix {
        display: inline-block;
}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {
        height: 1%;
}
.clearfix 
{
        display: block;
}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */