/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

.knop1 {
background: #F60 url(../plaatjes/bestelpijltje.jpg) no-repeat left center; 
color: #FFF; padding:1px; font-weight: bold; } 	
}

.extrainfo p{
	font-size:10px;
	color:#666;
}

body { line-height: 1; }

h1, h2 {
border-bottom: 4px solid #ABC4D9;
font: bold 14px Verdana, sans-serif;
color: #336699;
margin-bottom: 6px;
padding: 0 0 2px 8px;
}

.humor-menu {
border-bottom: 4px solid #ABC4D9;
font: bold 14px Verdana, sans-serif;
color: #336699;
margin-bottom: 6px;
padding: 0px 1px 2px 8px;
}

.kop {
border-bottom: 4px solid #ABC4D9;
font: bold 14px Verdana, sans-serif;
color: #336699;
margin-bottom: 6px;
padding: 15px 1px 2px 8px;
}

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

:focus { outline: 0; }

ins { text-decoration: none; }

del { text-decoration: line-through; }

table {
border-collapse: collapse;
border-spacing: 0;
}

a {
	color:#336699;
	text-decoration:none;
}

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

/* ALGEMEEN */
body {
background: #85a315 url(../images/bg.png) repeat-x top;
text-align: center;
}

#wrap {
margin: 17px auto 0 auto;
width: 975px;
text-align: left;
}

#content .inner {
background: #fff;
font: 12px Arial;
padding: 7px 8px 49px 7px;
}

#header {
background: url(../images/headerbg.png) repeat-x;
height: 144px;
position: relative;
}

#content, #footer {
background: url(../images/schaduw.png) no-repeat right bottom;
padding: 0 8px 8px 0;
clear: both;
}

.breadcrumbs {
	color:#666;
	font-size:11px;
}

.clear { clear: both; }

/* HEADER */
#logo {
float: left;
display: block;
height: 165px;
width: 247px;
background: url(../images/logo.png) no-repeat top left;
margin: -23px 0 0 -16px;
z-index: 2;
}

#header span {
display: block;
float: left;
height: 109px;
width: 444px;
background: url(../images/header.png) no-repeat center top;
text-indent: -1000px;
margin: 0 0 0 -15px;
z-index: -1;
}

#adv1 {
display: block;
float: right;
height: 60px;
width: 234px;
background: url(../images/adv1.png) no-repeat;
margin: 22px 23px 0 0;
}

/* LOGIN */
.login {
background: #dfedf4;
color: #666666;
font: 12px Verdana, sans-serif;
text-align: right;
height: 35px;
line-height: 35px;
clear: both;
}

.login input {
border: 1px solid #99cccc;
font: 12px Verdana, sans-serif;
color: #999;
padding: 5px 0 6px 25px;
}

input.inloggen {
color: #003366;
font-weight: bold;
height: 27px;
padding: 0 5px;
background: #f3f3f3;
margin-right: 12px;
}

input.gebruikersnaam { background: #f3f3f3 url(../images/gebruikersnaam.png) no-repeat 5px center; }

input.wachtwoord { background: #f3f3f3 url(../images/wachtwoord.png) no-repeat 5px center; }

/* Invulvelden */
label { width: 150px; float: left;}
input { border: 1px solid #003366; background-color:#FFFFFF; margin-right: 5px; }


/* KOLOMMEN */
#left h2, #middle h2, #right h2 {
border-bottom: 4px solid #ABC4D9;
font: bold 14px Verdana, sans-serif;
color: #336699;
margin-bottom: 6px;
padding: 0 0 2px 8px;
}

#left {
width: 158px;
float: left;
padding-right: 10px;
margin-top: 12px;
}

#middle {
float: left;
width: 606px;
margin: 12px 10px 8px 8px;
}

#right {
float: right;
width: 160px;
margin-top: 12px;
font: bold 12px Arial;
color: #999999;
text-align: center;
}

/* HUMOR MENU - LEFT */
#left ul { list-style: none; }

#left ul a {
display: block;
height: 26px;
background: #dfedf4;
border: 1px solid #6a9ccd;
margin-bottom: 5px;
text-decoration: none;
font: bold 12px Verdana, sans-serif;
color: #336699;
line-height: 26px;
padding-left: 7px;
}

#left ul a:hover { background: #99CCFF; }

/* LEUKE LINKS - RIGHT */
#right h2 {
text-align: right;
padding: 0 8px 2px 0;
}

#right ul {
background: #DFEDF4;
border: 1px solid #6a9ccd;
padding: 4px;
margin-bottom: 11px;
text-align: left;
}

#right ul a {
text-decoration: none;
color: #336699;
font: 12px Verdana, sans-serif;
}

#right ul a:hover { text-decoration: underline; }

.advalgemeen {
text-align: center;
margin-top: 12px;
font: bold 12px Arial;
color: #999999;
}

#adv2 {
display: block;
margin: 0 auto;
height: 268px;
width: 120px;
background: url(../images/adv2.png) no-repeat;
margin-top: 5px;
}

/* WELKOM - MIDDLE */
#middle h2 { margin-left: -8px; }

#middle a {
text-decoration: none;
color: #000;
}

#middle a:hover { text-decoration: underline; }

#middle p { margin-bottom: 10px; }

.blauw { color: #336699; }

.center { text-align: center; }

.bold { font-weight: bold; }

#middle .noborder { border: 0px; }

.nieuwehumor {
border: 1px solid #A1D0FF;
background: #DFEDF4;
margin-bottom: 10px;
padding: 10px;
font: 12px Verdana, sans-serif;
position: relative;
}

.nieuwehumor img {
float: left;
margin: 0 4px -4px 0;
background: url(../images/spelletje.png) no-repeat bottom right;
padding: 2px 7px 8px 3px;
}

.nieuwehumor h3 {
color: #003366;
font: bolder 14px Verdana, sans-serif;
}

.nieuwehumor .info {
display: block;
font: 10px Verdana, sans-serif;
color: #666;
line-height: 20px;
}

.nieuwehumor a.ga {
display: inline-block;
background: url(../images/ga.png) no-repeat top right;
padding-right: 21px;
height: 23px;
text-decoration: none;
margin-top: 8px;
position: absolute;
bottom: 6px;
right: 6px;
}

.nieuwehumor a.ga span {
display: inline-block;
background: url(../images/ga.png) no-repeat top left;
line-height: 23px;
font: 12px Verdana, sans-serif;
color: #000;
padding: 5px 0 5px 21px;
}

/* FOOTER */
#footer { margin: 3px 0 15px 0; }

#footer span {
text-align: center;
color: #fff;
font: bold 11px Verdana, sans-serif;
background: #182538;
display: block;
height: 30px;
line-height: 30px;
}

/* REACTIE */
.reactie {
background: #DFEDF4;
border: 1px solid #99CCFF;
color: #000;
padding: 15px;
margin: 0 0 8px -8px;
}

.reactie .smiley {
background: #99CCFF url(../images/smiley.png) no-repeat 7px center;
padding: 10px 10px 10px 40px;
color: #333;
font: 11px Verdana, sans-serif;
margin: -15px -15px 15px -15px;
}

/* TABS */
/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin: 0 0 20px -9px;
 width: 615px;
 overflow: hidden;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
margin-left: -3px;
 border-bottom: 1px solid #99CC33;
 font: 12px Verdana, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 margin: 0 0 -1px 3px;
 border-bottom: none;
 text-decoration: none;
 display: inline-block;
background: url(../images/tab.png) no-repeat left bottom;
color: #333;
width: 203px;
font: 12px Verdana, sans-serif;
text-align: center;
height: 21px;
line-height: 21px;
}

ul.tabbernav li.tabberactive a
{
 background: url(../images/tab.png) no-repeat left top;
 border-bottom: 1px solid #CCFF99;
 font-weight: bold;
 color: #666;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 border: 1px solid #99CC33;
 border-top:0;
background: #CCFF99;
color: #000;
padding: 10px;
line-height: 25px;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}