body{ /* The page background, font, font size and color. */
background: #eee; /* was kleur #3b4256 */
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#111111;
/* These are the values around the HTML code, so setting it on 0px will leaves us with no padding around the design, rendering the page at the absolute top. */
margin:0px;
padding:0px;
}
/* Our wrapper, which contains our 1px stretching background image (main_bg.jpg). */
#wrapper{
background:url("images/main_bg.jpg");
width:999px;
/* The following values will place this div in the middle, and since we put every div inside the wrapper it will render the whole page in the middle of the page.*/
margin:0px auto;
padding:0px;
}
/* The header image, with a left float, kinda easy and not much to explain =). */
#header{
background:url("images/Home1.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerClubnieuws{
background:url("images/Home.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerPromotie{
background:url("images/Home.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerAbonnementen{
background:url("images/Home.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerSporten{
background:url("images/Sporten.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerBudo{
background:url("images/Budosport.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerLesrooster{
background:url("images/Home.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerInstructeurs{
background:url("images/Home.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerSlimbelly{
background:url("images/Home.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerLeeftijdstest{
background:url("images/Home.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerBBalance{
background:url("images/BBalance.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerBPump{
background:url("images/BPump.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerRpm{
background:url("images/Rpm.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerBStep{
background:url("images/BStep.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerbodydeck{
background:url("images/bodydeck.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerSportAfvallen{
background:url("images/SportAfvallen.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerFitness{
background:url("images/Fitness.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerSteps{
background:url("images/Steps.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerZwangerFit{
background:url("images/ZwangerFit.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerKidFit{
background:url("images/KidFit1.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerPilates{
background:url("images/Pilates.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerHuwelijkfitness{
background:url("images/Huwelijkfitness.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerSlimbelly{
background:url("images/Slimbelly.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headercontact{
background:url("images/Contact.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headercontact1{
background:url("images/Contact1.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}

#headerrouteplanner{
background:url("images/Routeplanner.jpg");
width:994px;
height:341px;
margin-left:5px;
float:left;
}
#horimenu{
	width:992px;
	height:30px;
	margin-left:2px;
	float:left;
	margin-top:165px;
	z-index:20;
}
#horimenunew{
	width:992px;
	height:30px;
	margin-left:2px;
	float:left;
	margin-top:170px;
	z-index:20;
}

#horibalkkleur{
	background-image:url(images/horibalkkleur.png);
	width:983px;
	height:8px;
	float:left;
	margin-left:2px;
}

#vandijklogo{
	background-image:url(images/logo_trans.png); background-repeat:no-repeat;
	width:407px;
	height:99px;
	float:right;
	margin-top:20px;
	margin-right:60px;
}

#vandijkslogan{
	background-image:url(images/vandijkslogan.gif); background-repeat:no-repeat;
	font-weight:bold;
	text-align:center;
	width:400px;
	padding-top:2px;
	height:20px;
	float:right;
	margin-top:10px;
	margin-right:60px;
}

.sloganred{
	text-transform:capitalize;
	font-style:italic;
	font-size:10px;
	color:red;
}
.red{
	text-transform:capitalize;
	font-style:italic;
	font-size:11px;
	color:red;
}
.sloganblack{
	text-transform:capitalize;
	text-decoration:underline;
	font-style:italic;
	font-size:12px;
	color:black;
}
/* The left container which will contain our whole left menu, it functions sort of like our wrapper layer. we position the container on the left side, give it a width of the total width we need. I'd measured the width of the lm_top.jpg, this image will be our total width. and we give it a float:left to align the div on the left. */
#left_container{
width:200px;
float:left;
margin-left:8px;
}
/* Same as the left container but then a different width which I took from the c_top.jpg image. Float:left to align it to the left, and since the left container didn't fill the whole 960px of the wrapper layer it will join sides with the left container. */
#content_container{
width:584px;
float:left;
border: 1px dotted #999;
}

#content_container_cms{
width:584px;
float:left;
border: 1px dotted #999;
}
/* Right container */
#right_container{
width:190px;
float:left;
margin-left:15px;
}

.right_container{
width:190px;
float:left;
}
/* Our footer has the clear:both value, we could use clear:left since we only use left floats. But I allways use clear:both for this is the most effective way of clearing floats. */ 
#footer{
clear:both;
/* Our footer shadow image, */
background:url("images/footer.jpg");
width:999px;
/* the height of the footer image. */
height:81px;
} 

.fmenu{
	padding:43px 10px 5px 10px;
	text-align:center;
}

.fcopy{
	padding:23px 10px 5px 10px;
	text-align:center;
}
.footer_menu { overflow:hidden; font-size:10px;}
.footer_menu  { display:inline;}
.fmenu  a { color:#21556a; font-size:10px; border-left:1px solid #21556a; padding:0 6px 0 8px; text-decoration:none !important; font-weight:normal}
.footer_menu li a:hover { text-decoration:underline;}
.fmenu a.none {border:none; padding-left:0}

#line_footer {background:url(images/line_footer_bg.gif) repeat-x top; margin:0 0 -13px 0; padding-top:10px; height:20px;}
#empty {
	margin:5px;
}

.slotje {
	padding-left:950px;
}
.slotje a.none {border:none; text-decoration:none; padding-left:0}

.left_top_bar{
background:url("images/lms_top.jpg");
width:203px;
height:28px;
/* We change the default page font to the following */
font-family:Arial, Helvetica, sans-serif;
text-align:center;
/* With line-height you can adjust the text or images in div's, I adjusted it to 28px which is perfect for this design */
line-height:28px;
/* change the color of the text so we can see it! Default text is darker because the main content and menu boxes have a light gray color so text needs to be dark obviously. */
color:#D9DEE2;
}
/* The rest is self explanatory */
.content_top_bar{
background:url("images/cc_top.jpg");
width:589px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
line-height:28px;
color:#000;
}
.right_top_bar{
background:url("images/rrm_top.jpg");
width:202px;
height:28px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
line-height:28px;
color:#D9DEE2;
}
.gradient{
background:url("images/gradient.jpg");
width:198px;
height:2px;
/* margin 2px so it doesn't hugs the text. If you use margin and have an image background and the width of that image in the divs width, you'll need to double the margin in this case 4, and get it off the width of the div. 

So for example, when you have a margin of 2px, we have 4 extra px's in the div so the image doubles itself after 202px's, making the div's total width 206px's. So we take these 4px's margin off the total width of the div making the divs width 198px. */
margin:2px;
} 
.pcontent{
	padding:0px 10px 10px 10px;
	color:#000;
}
.plink{
	padding:10px;
	color:#000;
    font-family:Arial, Helvetica, sans-serif;
}

.cmsbox{
	padding:0px 10px 10px 10px;
	color:#000;
    font-family:Arial, Helvetica, sans-serif;
	min-height:500px;
}

.htmlbox{
	padding:0px 10px 10px 0px;
	color:#000;
    font-family:Arial, Helvetica, sans-serif;
	min-height:500px;
}

.marquee{
	padding:5px 10px 10px 0px;
	color:#000;
    font-family:Arial, Helvetica, sans-serif;
	max-height:20px;
}

.block1{
	display: block;
	color: #333;
	background-color:#eee;
	cursor: default;
	border-bottom: 1px solid #ddd;
	padding-left:5px;
	padding-right:5px;
}

.block1button{
	text-align:center;
	display: block;
	color: #333;
	background-color:#eee;
	cursor: default;
	padding-left:5px;
	padding-right:5px;
}
.block1head{
	display: block;
	color: #333;
	background-color:#eee;
	cursor: default;
	padding-left:5px;
	padding-right:5px;
}
.block1tel{
	display: block;
	font-size:16px;
	text-align:center;
	color: #333;
	background-color:#eee;
	cursor: default;
	padding-left:5px;
	padding-right:5px;
}
.hr{
	padding-left:10px;
	padding-right:10px;
	max-width:98%;
	color:#ccc;
}
.Slink{
	font-family:"Times New Roman", Times, serif;
	font-size:medium;
	font-weight:bold;
	color:#999;
}

.SSlink{
	font-family:"Times New Roman", Times, serif;
	font-size:small;
	font-weight:bold;
	color:#999;
}

.Sitemap{
	font-family:"Times New Roman", Times, serif;
	font-size:small;
	font-weight:bold;
	color:#333;
}

/* Hier begint de style voor de pagina's instructeurs pagination */
.pagination{
padding: 2px;
}

.pagination ul{
margin: 0;
padding: 0;
text-align: center; /*Set to "right" to right align pagination interface*/
font-size: 12px;
}

.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #2b66a5;
text-decoration: none; 
color: #333;
}

.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #e3dfdf;
}

.pagination a.currentpage{
background-color: #bebfc1;
color: #FFF !important;
border-color: #e4e4e6;
font-weight: bold;
cursor: default;
}

.pagination a.disablelink, .pagination a.disablelink:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}

.pagination a.prevnext{
font-weight: normal;
}
/* Hier eindigt de style voor de pagina's instructeurs pagination */
/* images naast tekst */
img.floatLeft { 
    float: left; 
    margin: 4px;
	border: 1px solid #999;
	padding:3px;
}
img.floatRight { 
    float: right; 
    margin: 4px;
	border: 1px solid #999;
	padding:3px; 
}
/* einde images naast tekst */

div.float {
color: #000000;
text-align: left;
width: 400px;
margin: 0px;
padding: 4px;
float: left;
}

div.floatcontent {
color: #000000;
text-align: left;
width: 560px;
margin: 0px;
padding: 4px;
float: left;
}

div.floatr {
color: #000000;
text-align: right;
width: 130px;
margin: 0px;
padding: 4px;
float: right;
}

div.floatcontainer {
width: 565px;
padding: 4px;
}

div.spacer {
clear: both;
}

.videoshow { 
height: 288px; 
width: 515px; 
margin-left:28px; 
border: 1px solid silver; 
padding:5px; 
background-color: #eee;
text-align:center;
}

.fotoshow { 
height: 125px; 
width: 515px; 
margin-left:25px; 
border: 1px solid silver; 
padding:5px; 
background-color: #eee;
text-align:center;
}

.referentieblok { 
height: 340px; 
width: 515px; 
margin-left:28px; 
border: 1px solid silver; 
padding:5px; 
background-color: #eee;
text-align:center;
}

.textbox { 
height: auto; 
width: 515px; 
margin-left:20px; 
border: 1px solid silver; 
padding:5px; 
background-color: #eee;
}

.grafiekbox { 
height: auto; 
width: 515px; 
margin-left:28px; 
border: 1px solid silver; 
padding:5px; 
background-color: #eee;
text-align:center;
}

.picturetext { 
height: auto; 
width: 515px; 
margin-left:28px;  
padding:5px; 
background-color: #fff;
text-align:left;
}

div.abonnementkop{
	padding:5px;
	font-family:Verdana, Geneva, sans-serif; font-size:14px;
	text-align:center; font-weight:bold;
}

div.abonnementcontent{
	padding:5px;
	text-align:center;
}