Preview - HTML - CSS

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


body{background:#fff url(../images/body-bg.jpg) top center no-repeat; font-family:'Arial'; font-size:12px; font-weight:normal;}



img{border:none;}


@font-face {
    font-family: 'TheSansPlain';
    src: url('fonts/thesans_plain-webfont.eot');
    src: url('fonts/thesans_plain-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/thesans_plain-webfont.woff') format('woff'),
         url('fonts/thesans_plain-webfont.ttf') format('truetype'),
         url('fonts/thesans_plain-webfont.svg#TheSansPlain') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'TheSansBold-Regular';
    src: url('fonts/thesans_bold_plain-webfont.eot');
    src: url('fonts/thesans_bold_plain-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/thesans_bold_plain-webfont.woff') format('woff'),
         url('fonts/thesans_bold_plain-webfont.ttf') format('truetype'),
         url('fonts/thesans_bold_plain-webfont.svg#TheSansBold-Regular') format('svg');
    font-weight: normal;
    font-style: normal;

}




.header_bg{width:100%; height:auto; float:left; padding:17px 0px 40px 0px;}
.banner_bg{width:100%; height:auto; float:left; background:#00aeef;}
.content_bg{width:100%; height:auto; float:left; padding-bottom:44px;}
.footer_bg{width:100%; height:auto; float:left; padding-bottom:18px;}
.footer_bg_top{width:100%; height:auto; float:left; background:#7cd5f6;}



.wrapper{width:942px; height:auto; margin:auto;}




.header{width:942px; height:auto; float:left; background:#fff; border:1px solid #c0c0c0;}
.header_left{width:344px; height:auto; float:left; padding:12px 0px 10px 50px;}
.header_left .logo{width:305px; height:auto; float:left;}
.header_left .logo a{width:auto; height:83px; float:left; background:url(../images/logo.png) no-repeat; text-decoration:none; padding-left:103px; font-size:20px; font-weight:normal; color:#999999; font-family: 'TheSansPlain';}
.header_left .logo a .rsk{color:#333333; font-size:35px; font-weight:normal; font-family: 'TheSansBold-Regular';}

.header_right{width:546px; height:auto; float:right;}
.header_right ul{width:546px; height:auto; float:right; position:absolute;}
.header_right ul li{list-style-type:none; float:left; padding:70px 11px 0px 11px;}
.header_right ul li a{text-decoration:none; font-size:18px; color:
#333333; font-weight:normal; font-family: 'TheSansPlain'; background:#ebebeb; padding:88px 5px 28px 5px;}
.header_right ul li.active a{background:#00aeef; color:#fff;}
.header_right ul li a:hover{background:#00aeef; color:#fff;}




.banner{width:942px; height:202px; float:left;}
.banner_left{width:590px; height:202px; float:left;}

.banner_right{width:328px; height:164px; float:left; background:#7cd5f6; padding:20px 12px 18px 12px;}
.banner_right .text{width:328px; height:auto; float:left;}
.banner_right .text p{font-family: 'TheSansPlain'; font-size:39px; font-weight:normal; color:#333333; letter-spacing:2px;}
.banner_right .text p.text2{font-size:24px; font-weight:normal; padding-bottom:22px;}
.banner_right .text span{color:#00aeef; font-family: 'TheSansBold-Regular';}

.banner_right .bekijk_button{width:328px; height:auto; float:left;}
.banner_right .bekijk_button a{font-family: 'TheSansBold-Regular'; font-size:18px; font-weight:normal; color:#fff; text-decoration:none; background:#00aeef; padding:5px 12px 3px 12px;}


/* ==================== Slider  =================================*/

#slidebox													{ position:relative; overflow:hidden; }
#slidebox, #slidebox .content								{ width:auto; }
#slidebox, #slidebox .container, #slidebox .content			{ height:202px; }
#slidebox .container										{ position:relative; left:0; }
#slidebox .content											{ float:left; }
#slidebox .thumbs											{ position:absolute; z-index:2; bottom:10px; left:7px; }
#slidebox .thumbs .thumb									{ width:8px; height:8px; float:left; margin-left:3px; background:url(../images/slider_normal.png) no-repeat; }
#slidebox .selected_thumb									{ width:8px; height:8px; float:left; margin-left:5px; background:url(../images/slider_hover.png) no-repeat; }




#container{width:942px; height:auto; float:left; padding:47px 0px 25px 0px;}
.content_inner{width:942px; height:auto; float:left; border:1px solid #c0c0c0;}
#container .devider{margin-bottom:42px;}

.content_top{width:840px; height:auto; float:left; padding:16px 51px 19px 51px; background:#fff;}
.content_top .top_left{width:219px; height:auto; float:left;}
.content_top .top_mid{width:371px; height:auto; float:left;}
.content_top .top_mid h1{width:371px; height:auto; float:left; font-family: 'TheSansBold-Regular'; color:#333333; font-size:25px; font-weight:normal; padding-bottom:10px;}
.content_top .top_mid h1 span{color:#00aeef;}
.content_top .top_mid p{width:371px; height:auto; float:left; font-family:'Arial'; color:#5b5b5b; font-size:11px; font-weight:normal;}
.content_top .top_mid .button{width:371px; height:auto; float:left; padding-top:20px;}
.content_top .top_mid .button a{text-decoration:none; font-family: 'TheSansBold-Regular'; color:#fefefe; font-size:14px; font-weight:normal; background:#00aeef; padding:7px;}

.content_top .top_right{width:250px; height:auto; float:right;}
.content_top .top_right_inner{width:250px; height:auto; float:left; position:absolute; background:#ebebeb; padding:0px 0px 18px 0px; margin-top:-35px;}
.top_right_inner .inner_top{width:226px; height:auto; float:left; background:#00aeef; padding:10px 15px 5px 9px;}
.top_right_inner .inner_top p{background:url(../images/l.png) left no-repeat; height:40px; font-family: 'TheSansBold-Regular'; font-size:26px; font-weight:normal; color:#fff; padding-left:65px;}



.top_right_inner .inner_bottom{width:217px; height:auto; float:left; padding:16px 16px  0px 17px;}
.top_right_inner .inner_bottom h1{color:#00aeef; font-family: 'TheSansBold-Regular'; font-size:24px; font-weight:normal; padding-bottom:14px;}
.top_right_inner .inner_bottom p{font-family: 'Arial'; float:left; font-size:12px; font-weight:normal; color:#333333;}
.top_right_inner .inner_bottom p.vul{padding-bottom:22px;}

.top_right_inner .inner_bottom .form_wrap{width:217px; height:auto; float:left;}
.top_right_inner .inner_bottom .form_wrap .text_box_wrap{width:217px; height:auto; float:left; padding-bottom:16px;}
.form_wrap .text_box_wrap .text{font-family: 'Arial'; float:left; font-size:12px; font-weight:bold; padding-bottom:8px;}
.form_wrap .text_box_wrap .text_box{background:#fff; border:1px solid #e2e2e2; width:206px; height:23px; padding:5px; color:#999999; font-size:12px; font-family: 'Arial';}
.form_wrap .text_box_wrap .text_area{background:#fff; border:1px solid #e2e2e2; width:206px; height:105px; padding:5px; color:#999999; font-size:12px; font-family: 'Arial';}

.top_right_inner .inner_bottom .form_wrap .submit_button{width:217px; height:auto; float:left;}
.top_right_inner .inner_bottom .form_wrap .submit_button .submit{background:#00aeef; color:#fefefe; font-size:14px; font-weight:normal; border:none; padding:8px 13px 4px 13px; font-family: 'TheSansBold-Regular'; cursor:pointer;}



.content_bottom{width:840px; height:auto; float:left; padding:16px 51px 19px 51px; background:#fff;}

.content_bottom h2{font-weight:normal; float:left; font-family: 'TheSansBold-Regular'; color:#333333; font-size:23px; padding-bottom:15px;}
.content_bottom p{font-weight:normal; float:left; font-family: 'Arial'; color:#5b5b5b; font-size:12px;}
.content_bottom .button{width:250px; height:auto; float:left; padding-top:25px;}
.content_bottom .button a{text-decoration:none; background:#00aeef; padding:8px 11px 5px 11px; color:#fefefe; font-size:16px; font-family: 'TheSansBold-Regular';}

.content_bottom_left{width:250px; height:auto; float:left; padding:0px 50px 0px 0px;}
.content_bottom_right{width:250px; height:auto; float:left; padding:0px 50px 0px 0px;}




.footer{width:840px; height:auto; float:left; padding:0px 51px 0px 51px;}
.footer_top{width:840px; height:auto; float:left;}
.footer_top .social_network{width:518px; height:auto; float:left; background:#00aeef; padding:15px 25px 12px 24px;}
.social_network p{font-family: 'TheSansPlain'; float:left; font-size:16px; font-weight:normal; color:#fff;}
.social_network p span{float:right; padding-top:2px;}

.social_network .social_network_left{width:153px; height:auto; float:left;}

.social_network .social_network_mid{width:168px; height:auto; float:left;}
.social_network .social_network_mid ul{width:auto; height:auto; float:left;  padding-top:3px;}
.social_network .social_network_mid ul li{list-style-type:none; float:left; padding:0px 5px;}
.social_network .social_network_mid ul li a{text-decoration:none;}

.social_network .social_network_right{width:191px; height:auto; float:left;}



.footer_bottom{width:840px; height:auto; float:left; padding-top:13px;}

.footer_bottom_left{width:690px; height:auto; float:left; padding-top:28px;}
.footer_bottom_left ul{width:100%; height:auto; float:left;}
.footer_bottom_left ul li{list-style-type:none; float:left; color:#5b5b5b; font-family:'Arial'; font-size:12px; font-weight:normal; padding:0px 7px 0px 0px;}

.footer_bottom_left p{width:690px; height:auto; float:left; color:#5b5b5b; font-family:'Arial'; font-size:12px; font-weight:normal;}

.footer_bottom_right{width:150px; height:auto; float:left;}
.footer_bottom_right .imag_position{float:right;}
.footer_bottom_right .top_img{width:150px; height:auto; float:left; padding-bottom:14px;}
.footer_bottom_right .first_img{float:left; padding-top:7px;}
.footer_bottom_right .first_text{float:left; color:#5b5b5b; font-family:'Arial'; font-size:10px;}
.footer_bottom_right .first_text .dutch{color:#333333; font-size:11px;}
.footer_bottom_right .bottom_text{width:150px; height:auto; float:left;}



/*===================================
	waarom page start here..
===================================*/



.wa_banner_right{width:328px; height:163px; float:left;}
.wa_content_inner{width:942px; height:auto; float:left;}


.wa_content_inner .content_bottom .top_left{width:219px; height:auto; float:left;}
.wa_content_inner .content_bottom .top_mid{width:371px; height:auto; float:left;}
.wa_content_inner .content_bottom .top_mid h1{width:371px; height:auto; float:left; font-family: 'TheSansBold-Regular'; color:#333333; font-size:25px; font-weight:normal; padding-bottom:10px;}
.wa_content_inner .content_bottom .top_mid h1 span{color:#00aeef;}
.wa_content_inner .content_bottom .top_mid p{width:371px; height:auto; float:left; font-family:'Arial'; color:#5b5b5b; font-size:11px; font-weight:normal;}
.wa_content_inner .content_bottom .top_mid .button{width:371px; height:auto; float:left; padding-top:20px;}
.wa_content_inner .content_bottom .top_mid .button a{text-decoration:none; font-family: 'TheSansBold-Regular'; color:#fefefe; font-size:14px; font-weight:normal; background:#00aeef; padding:7px;}



.wa_content_inner .content_top h2{font-weight:normal; float:left; font-family: 'TheSansBold-Regular'; color:#333333; font-size:23px; padding-bottom:15px;}
.wa_content_inner .content_top p{font-weight:normal; float:left; font-family: 'Arial'; color:#5b5b5b; font-size:12px;}
.wa_content_inner .content_top p.padding{padding-bottom:10px;}
.wa_content_inner .content_top .button{width:250px; height:auto; float:left; padding-top:25px;}
.wa_content_inner .content_top .button a{text-decoration:none; background:#00aeef; padding:8px 11px 5px 11px; color:#fefefe; font-size:16px; font-family: 'TheSansBold-Regular';}
.wa_content_inner .content_top .content_bottom_right{width:244px; height:auto; float:left; padding:0px 45px 0px 0px;}




.wa_content_inner .content_top .content_bottom_left{width:200px; height:auto; float:left; padding:0px 20px 0px 0px;}
.wa_content_inner .content_top .content_bottom_left h3{width:180px; height:auto; float:left; color:#00aeef; font-family: 'TheSansBold-Regular'; font-weight:normal; font-size:16px; padding:0px 0px 18px 20px;}
.wa_content_inner .content_top .content_bottom_left .rij_box{width:140px; height:auto; float:left; background:#ebebeb; padding:16px 40px 170px 20px;}
.wa_content_inner .content_top .content_bottom_left .rij_box p{color:#333333; font-size:14px; font-weight:normal; font-family: 'TheSansBold-Regular'; padding-bottom:24px;}



.wa_content_inner .content_top .content_bottom_right{width:350px; height:auto; float:left; padding:0px 20px 0px 0px;}


.wa_content_inner .content_bottom .top_right{width:250px; height:auto; float:right;}
.wa_content_inner .content_bottom .top_right_inner{width:250px; height:auto; float:left; position:absolute; background:#ebebeb; padding:0px 0px 18px 0px; margin-top:-35px;}
.wa_content_inner .top_right_inner .inner_top p{background:url(../images/l.png) left no-repeat; height:40px; font-family: 'TheSansBold-Regular'; font-size:26px; font-weight:normal; color:#fff; padding-left:65px;}






/*===================================
	prijzen page start here..
===================================*/


.pri_box{width:350px; height:auto; float:left;}
.pri_box .padding_top{padding-top:10px}
.pri_box ul{width:100%; height:auto; float:left; padding-bottom:2px;}
.pri_box ul li{list-style-type:none; float:left; background:#7cd5f6;  padding:13px 7px; font-family: 'Arial'; font-size:12px; font-weight:normal; color:#fff;}
.pri_box ul li.two{list-style-type:none; float:left; background:#00aeef; width:40px;}
.pri_box ul li.three{list-style-type:none; float:left; background:#00aeef; width:140px;}


.wa_content_inner .content_top .content_bottom_left .rij_box2{width:140px; height:auto; float:left; background:#ebebeb; padding:16px 40px 270px 20px;}
.wa_content_inner .content_top .content_bottom_left .rij_box2 p{color:#333333; font-size:14px; font-weight:normal; font-family: 'TheSansBold-Regular'; padding-bottom:24px;}




/*===================================
	contact page start here..
===================================*/


.contact{width:350px; height:auto; float:left;}
.contact p a{text-decoration:none; color:#00aeef;}
.contact p a:hover{text-decoration:underline;}
.contact .from_wrap{width:350px; height:auto; float:left; padding-top:10px;}
.contact .from_wrap .text_box_wrap{width:350px; height:auto; float:left; padding-bottom:16px;}
.contact .from_wrap .text_box_wrap .text{width:105px; height:auto; float:left; color:#333333; font-weight:bold; font-size:12px; font-family: 'Arial'; padding-top:10px;}
.contact .from_wrap .text_box_wrap .text_box{width:206px; height:33px; float:left; font-size:12px; color:#999999; font-weight:normal; font-family: 'Arial'; background:url(../images/text-box.png) no-repeat; border:none; padding:0px 5px;}
.contact .from_wrap .text_box_wrap .text_area{width:206px; height:88px; float:left; font-size:12px; color:#999999; font-weight:normal; font-family: 'Arial'; background:url(../images/text-area.png) no-repeat; border:none; padding:5px;}

.contact .from_wrap .submit_button{width:323px; height:auto; float:right; padding-right:27px;}
.contact .from_wrap .submit_button .button{ width:100px; height:auto; float:right; background:#00aeef; color:#fefefe; font-family: 'TheSansBold-Regular'; font-size:14px; font-weight:normal; padding:8px 16px; border:none;}