html, body, #container
{ background-color: #FFF; margin: 0 auto; font-family: Arial, Helvetica; font-size:12px; height: 100% }

#search, #container, #header, #top, #sponsors, #content, #footer 
{ width:974px;  background-color: inherit; clear:both;  }

img, img a { border: 0 }
a, a:active, a:visited { color: #000; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }
p, form { margin: 0; font-size: 12px; }
p.green { color: #507575 }
h1, h1.archief { color: #507575; font-size: 16px; margin: 0 0 8px 0; text-transform: uppercase }
h1 { text-decoration: underline; font-weight: normal; }
h1.archief { font-weight: bold; text-decoration: none; }
h1.subtitel { font-weight: bold; text-decoration: underline; margin-top: 32px; color: #000; }
h2 { text-transform: uppercase; font-size: 12px; font-weight: normal; margin: 0; padding: 0 }
h2.titel { font-weight: bold; color: #000; }
h2.url { color: #000; text-transform: none;  }
h3 { color: #507575; padding: 0; margin: 0; font-weight: normal; } 
.small { font-size:10px }

#header, #top, #sponsors, #content, #archief { margin-top: 8px; }

#top { position: relative; width: 978px; height: 287px; }
#search { text-align: left; }
#search input { position:relative; top: 2px; font: 14px Arial; left: 794px; .left: 790px; color: #393939 }
#search input[type=image] { position: relative; top: 7px; .top: 6px; left: 789px; }
#sponsors { height: 41px; margin-bottom: 10px; background: #FFF;   }
#sponsors .sponsorimage { float:left; clear: none; height:55px; }
#sponsors .sponsorimage img { vertical-align:top; margin-right: 14px;  }
#sponsors #thx { float:right; clear: both; width: 150px; margin: 4px 0 4px 0; }
#sponsors #thx p { text-align: right; font-size: 10px; color: #AAA }
#content { background-image:url('background.png'); background-repeat:repeat-y; overflow:auto; padding: 20px 0 15px 15px; min-height: 50%; }
#menu { width: 179px; clear:none; float:left;  }
.menuitem { margin-top: 1px; padding: 4px 0 0 32px; background-image:url('button.png'); background-repeat:no-repeat; width: 184px; height: 26px; }
.menuitem p, .menuitem p a { color: #FFFFFF; font-size:14px; text-decoration: none; }
.menuitem p a:hover { text-decoration: underline; }
#inhoud { float: left; clear: none; width: 450px; margin: 0 47px 0 47px;  }
#login { float:left; clear:none; width: 210px; background-color: #FFF; }
#logintext { padding: 30px 17px 17px 17px; }
#logintext p { margin-bottom: 12px; }
#logintext input { position:relative; top: 2px; font: 14px Arial; color: #393939; margin: 1px 0 11px 0;  }
#logintext input[type=image] { position: relative; left: 129px; }
#logintext td { font-size:12px; }
#footer { margin: 8px 0 32px 0; text-align: right; }
#footer p { font-size:10px; color: #AAA }

/* archief */ 
/* image map tutorial op http://www.gigadesign.be/2005/12/image-maps-de-nieuwe-manier/ */
#archief ul, #archief li{ list-style-type: none; }
#archief { position: relative; width: 978px; height: 287px;  background: url("archief.jpg"); }
#archief a { text-indent: -999px; text-decoration: none; position: absolute; border: 0; }
#blok0 a { top: 0; left: 0; width: 1px; height: 1px; }
#blok1 a { top: 16px; left: 343px; width: 130px; height: 23px; }  /* -19 -19 */
#blok1 a:hover { background: transparent url("archief-over.JPG") -343px -16px no-repeat; } /* -44 +13 */
#blok2 a { top: 64px; left: 270px; width: 130px; height: 23px; }
#blok2 a:hover { background: transparent url("archief-over.JPG") -270px -64px no-repeat; }
#blok3 a { top: 64px; left: 416px; width: 130px; height: 23px; }
#blok3 a:hover { background: transparent url("archief-over.JPG") -416px -64px no-repeat; }
#blok4 a { top: 113px; left: 141px; width: 130px; height: 23px; }
#blok4 a:hover { background: transparent url("archief-over.JPG") -141px -113px no-repeat; }
#blok5 a { top: 113px; left: 466px; width: 130px; height: 23px; }
#blok5 a:hover { background: transparent url("archief-over.JPG") -466px -113px no-repeat; }

#blok6 a { top: 161px; left: 79px; width: 130px; height: 23px; }
#blok6 a:hover { background: transparent url("archief-over.JPG") -79px -161px no-repeat; }
#blok7 a { top: 161px; left: 206px; width: 130px; height: 23px; }
#blok7 a:hover { background: transparent url("archief-over.JPG") -206px -161px no-repeat; } /*172 */ 
#blok8 a { top: 161px; left: 334px; width: 130px; height: 23px; }
#blok8 a:hover { background: transparent url("archief-over.JPG") -334px -161px no-repeat; }
#blok9 a { top: 161px; left: 462px; width: 130px; height: 23px; }
#blok9 a:hover { background: transparent url("archief-over.JPG") -462px -161px no-repeat; }
#blok12 a { top: 161px; left: 590px; width: 130px; height: 23px; }
#blok12 a:hover { background: transparent url("archief-over.JPG") -590px -161px no-repeat; }
#blok10 a { top: 199px; left: 275px; width: 130px; height: 23px; }
#blok10 a:hover { background: transparent url("archief-over.JPG") -275px -199px no-repeat; }
#blok11 a { top: 199px; left: 403px; width: 130px; height: 23px; }
#blok11 a:hover { background: transparent url("archief-over.JPG") -403px -199px no-repeat; }
#addarchief { float: right; clear: none; margin: 16px 42px 20px 15px; width:190px }
#addarchief p { color: #FFF; font-weight: bold; } 
#addarchief p a { text-decoration: underline; color: #FFF; }

/* activiteiten */
#login td { text-align:center; }

/* contact */
.contactmember { clear: both; float:left; width: 100%; height: 75px; margin-bottom: 25px; width: 100%; }
.contactmember p { font-size: 10px; } 
.contactphoto { float:left; clear:none; margin-right: 10px }

/* sponsors */
.sponsormember { clear: both; float:left; width: 100%; height: 60px; margin-bottom: 12px; width: 100%; }
.sponsormember p { font-size: 10px; } 
.sponsorphoto { float:left; clear:none; margin-right: 10px }