/* CSS Document */

html,body{ text-align:center; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; background-color: #FFF;}
* { margin: 0; padding: 0;}

#pagina{width: 1000px; height: auto; margin: 0px auto 0px auto; background-color: #FFFFFF; overflow: hidden; text-align: left;}
#voorbeeld{float: left; display:inline; width: 1000px; font-size: 14px; font-weight: bold; color: #ee1c24; margin: 0px 0px 10px 0px;}

/******* hyperlink and anchor tag styles *******/
a img{ border: none;}
a:link, a:visited{ color: #fc7323; text-decoration: none;}
a:hover{ text-decoration: underline;}

/************** header tag styles **************/
h1{ font: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #fc7323; margin: 0px; padding: 0px;}
h2{ font: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #fc7323; margin: 0px; padding: 0px;}

/******* Header van de pagina style *******/
#top{float: left; display:inline; width: 1000px; height: 160px; margin: 0px 0px 0px 0px; overflow: hidden;}
#top #logo{float: left; display: inline; width: 234px; height: 107px; margin: 28px 206px 25px 20px; background-image: url("./pics_site/vpl_logo.jpg"); background-repeat: no-repeat;}
#top #logo a.link {display: block; width: 234px; height: 107px; text-indent:-1234em; text-decoration:none; overflow:hidden;}

#top #buitengewoon_lid{float: left; display: inline; width: 540px; height: 50px; margin: 28px 0px 0px 0px; overflow: hidden;}
#top #buitengewoon_lid #logo_bglid {float: left; display: inline; width: 100px; height: 50px; margin: 0px 0px 0px 0px; overflow: hidden;}
#top #buitengewoon_lid #tekst_bglid {float: left; display: inline; width: 420px; height: 50px; margin: 0px 0px 0px 20px; overflow: hidden; font-size: 9px; color: #605553;}
#top #buitengewoon_lid #tekst_bglid a{color: #605553; text-decoration: none;}

#slider ul, #slider li{margin:0; padding:0; list-style:none;}
#slider li{ width:540px; height:62px; overflow:hidden;}	

#top #ledenzoeker{float: left; display: inline; width: 317px; height: 40px; margin: 36px 0px 0px 0px; overflow: hidden;}
#top #ledenzoeker #blok{float: left; display:inline; width: 10px; height: 40px; margin: 0px; overflow: hidden; background-image: url("./pics_site/leden_zoeker.jpg"); background-repeat: no-repeat;}
#top #ledenzoeker #zoeken {float: left; display: inline; margin: 0px 0px 0px 5px; width: 200px;}
#top #ledenzoeker #zoeken fieldset.search {border: none; width: 200px; margin: 0 auto;}
#top #ledenzoeker #zoeken .search input, #top #ledenzoeker #zoeken .search button {border: none; float: left; display: inline;}
#top #ledenzoeker #zoeken .search input.box {color: #605553; font-size: 12px; width: 143px; height: 25px; margin: 0px 0px 0px 0px; padding: 15px 0px 0px 5px; background: url("./pics_site/leden_zoeker_invulveld.jpg") no-repeat;}
#top #ledenzoeker #zoeken .search button.btn {width: 45px; height: 26px; cursor: pointer; text-indent: -9999px; background: url("./pics_site/leden_zoeker_zoekknop.jpg") no-repeat; margin: 14px 0px 0px 0px;}

#top #links{float: left; display: inline; width: 223px; height: 15px; margin: 61px 0px 0px 0px; overflow: hidden;} 
#top #links li{float: left; display: block; position: relative; list-style: none; padding: 0px 5px;}
#top #links li.splitter{ padding: 0px 2px; color: #605553; font-size: 11px; font-weight: bold;}
#top #links li a{display: block; color: #605553; font-size: 11px; text-transform:uppercase; text-decoration: none;}
#top #links li a:hover, #top #links li a.active {text-decoration: underline;}

/******* Navigatie boven pagina ***********/
#nav_top {float: left; display:inline; width: 1000px; height: 77px; margin: 0px;overflow: hidden; background-image: url("./pics_site/nav_menu.jpg"); background-repeat: no-repeat;} 

#nav_top #links{float: left; display:inline; width: 460px; margin: 0px; height: 77px;}
#nav_top #links #knoppen{float: left; display:inline; width: 286px; height: 22px; margin: 36px 0px 0px 20px; overflow: hidden;}
#nav_top #links #knoppen li{float: left; display: block; position: relative; width: 142px; height: 22px; list-style: none;}
#nav_top #links #knoppen li a{display: block; color: #FFF; padding: 6px 0px 0px 12px; height: 16px; width: 130px; font-size: 10px; font-weight: bold; text-transform:uppercase; text-decoration: none;}
#nav_top #links #knoppen li.consumenten, #nav_top #links #knoppen li.mijnvplwerkvloer{background-image: url("./pics_site/consumenten.jpg"); background-repeat: no-repeat;}
#nav_top #links #knoppen li.leden{background-image: url("./pics_site/vpl_leden.jpg"); background-repeat: no-repeat; margin: 0px 0px 0px 2px;}

#nav_top #rechts{float: left; display:inline; width: 540px;}
#nav_top #rechts #knoppen{float: left; display:inline; width: 525px; margin: 20px 0px 0px 15px; overflow: hidden;}
#nav_top #rechts #knoppen li{float: left; display: block; position: relative; list-style: none; padding: 0px 5px;}
#nav_top #rechts #knoppen li.splitter{ padding: 0px 2px; color: #FFFFFF; font-size: 11px; font-weight: bold;}
#nav_top #rechts #knoppen li a{display: block; color: #FFF; font-size: 11px; font-weight: bold; text-transform:uppercase; text-decoration: none;}
#nav_top #rechts #knoppen li a:hover, #nav_top #rechts #knoppen li a.active {text-decoration: underline;}

#nav_top #rechts #submenu{float: left; display:inline; width: 525px; margin: 17px 0px 0px 15px; overflow: hidden;}
#nav_top #rechts #submenu li{float: left; display: block; position: relative; list-style: none; padding: 0px 5px;}
#nav_top #rechts #submenu li.splitter{ padding: 0px 2px; color: #605553; font-size: 10px; font-weight: bold;}
#nav_top #rechts #submenu li a{display: block; color: #605553; font-size: 10px; font-weight: bold; text-decoration: none;}
#nav_top #rechts #submenu li a:hover, #nav_top #rechts #submenu li a.active {text-decoration: underline;}

/************** content website ******************/
#content{float: left; display: inline; width: 1000px; margin: 10px 0px 0px 0px; background-color: #FFFFFF;}
#content li {margin: 0px 0px 0px 25px;}
#content li.bijlagen{line-height: 40px; heigth: 40px;}
#content li.bijlagen .bijlage_naam {font-size: 11px; font-weight: bold;}

/************** Homepage *************************/
#home{float: left; display: inline; width: 1000px; margin: 0px 0px 0px 0px; background-color: #FFFFFF;}

#home #links{float: left; display: inline; width: 460px;}
#home #links #mijnvplvloer{float: left; display: inline; width: 460px; height: 30px; background-color: #c8c8c8; font-size: 10px; font-weight: bold; }
#home #links #mijnvplvloer .link {margin: 8px 0px 0px 45px; color: #000;}
#home #links #mijnvplvloer .link a {color: #000;}
#home #links #vplvloer{float: left; display: inline; width: 460px; height: 378px; background-image: url("./pics_site/vpl_vloer.jpg"); background-repeat: no-repeat;}
#home #links #vplvloer #tekst{float: left; display: inline; width: 225px; height: 140px; margin: 205px 0px 0px 15px; color: #FFF; font-size: 9px !important; font-weight: normal; letter-spacing: normal;}
#home #links #vplvloer #bullets{float: left; display: inline; width: 175px; margin: 305px 0px 0px 15px; color: #FFF; font-size: 11px; font-weight: normal;}
#home #links #vplvloer #bullets .punt{float: left; display: inline; background-image: url("./pics_site/pijltje.gif"); background-repeat: no-repeat; width: 175px; margin: 5px 0px 0px 0px;}
#home #links #vplvloer #bullets .punt a{color: #FFF; padding: 0px 0px 0px 10px;}

#home #rechts{float: left; display: inline; width: 522px; margin: 0px 0px 0px 18px; font-size: 11px; color: #605553;}
#home #rechts img{float: left; margin: 0px 10px 0px 0px;}

/************** hele pagina's ********************/
#hele_pagina{float: left; display: inline; width: 1000px; margin: 0px 0px 0px 0px; background-color: #FFFFFF; font-size: 11px; color: #605553;}
#hele_pagina img{float: left; margin: 0px 10px 0px 0px;}

/************** Sharethis ****************/
#share_this {margin: 30px 0px 10px 0px; float: left; display: inline; padding: 0;}
#share_this .share {color: #fc7323; font-weight: bold;}

/************** ledenlijst ***********************/
#content #kaart {float: left; display: inline; width: 998px; border: 1px solid #ff5e00; margin: 0px 0px 0px 0px; font-size: 12px;}

#content table.ledenlijst{table-layout: fixed; width: 996px; border-width: 2px; border-style: solid; border-color: #ff5e00; border-collapse: collapse;}
#content table.ledenlijst th {padding: 5px 0px 5px 1px; font-size: 11px; text-align: left;}
#content table.ledenlijst th.bedrijfsnaam {width: 310px;}
#content table.ledenlijst th.straat {width: 150px;}
#content table.ledenlijst th.postcode {width: 80px;}
#content table.ledenlijst th.plaats {width: 150px;}
#content table.ledenlijst th.telefoon {width: 100px;}
#content table.ledenlijst th.fax {width: 100px;}
#content table.ledenlijst th.website {width: 98px;}

#content table.ledenlijst tr.normal {background-color: #FFFFFF;}
#content table.ledenlijst tr.color {background-color: #FFD1A4;}
#content table.ledenlijst td {font-size: 11px; border-top: 1px solid #ff5e00; padding: 1px; overflow: hidden;}

#content table a.website{color: #000; text-decoration: underline;}
#content table a.website:hover {color: #ff5e00;}

/************** contactformulier ******************/
.formulier_kop{color: #fc7323; font-size: 14px; margin: 10px 0px 10px 0px; float: left; display: inline; width: 522px;}
.mijnvloer_kop{color: #fc7323; font-size: 14px; margin: 0px 0px 10px 0px; float: left; display: inline; width: 522px;}
#contact_form{float: left; display: inline; width: 522px; text-align: left; margin: 10px 0px 0px 0px; color: #605553; font-size: 11px;}
#contact_form form {margin: 0; padding: 0;}			
#contact_form input, #contact_form textarea, #contact_form select, #contact_form input[type="file"] {color: #605553; border: 1px solid #fc7323; font-size: 11px;}
#contact_form input:hover, #contact_form textarea:hover, #contact_form select:hover {border: 1px solid #fc7323; background-color: #cfcccb;}
#contact_form input.button{color: #fc7323; border: 1px solid #605551; background-color: #FFFFFF; padding: 2px 5px 2px 5px;}
#contact_form input.button:hover {color: #FFFFFF; border: 1px solid #fc7323; background-color: #cfcccb;}
#contact_form .form_content {float: left; display: inline; width: 522px;}
#contact_form .table_form {width: 522px;}
#contact_form .table_form td.label {width: 150px; height: 20px; vertical-align: top;}
#contact_form .table_form td.invoer {width: 372px; height: 20px; vertical-align: top;}
#contact_form .table_form td.invoer_opmerking {width: 372px; height: 90px; vertical-align: top;}
#contact_form .table_form td.geheel {width: 522px; height: 20px; vertical-align: top;}
#contact_form .fout_tekst {border: 2px solid #fc7323;}
#contact_form .error {color: #FF0000; font-size: 11px;}

/************* Mijn VPL Vloer ***************/
#ajax_listOfOptions{position:absolute; width:250px;	height:250px; overflow:auto; border:1px solid #fc7323; background-color:#FFF; text-align:left; font-size:0.9em; z-index:100;}
#ajax_listOfOptions div{margin:1px; padding:1px; cursor:pointer; font-size:0.9em;}
#ajax_listOfOptions .optionDiv{	}
#ajax_listOfOptions .optionDivSelected{background-color:#cfcccb; color:#000;}
#ajax_listOfOptions_iframe{background-color:#F00; position:absolute; z-index:5;}
form{display:inline;}

/************** lightbox effect ******************/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(./pics_site/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./pics_site/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/******* Footer van de pagina style *******/
#bottom{float: left; display: inline; width: 980px; margin: 20px 0px 20px 20px;}
#bottom #twitter{float: left; display: inline; width: 206px; height: 296px; background-image: url("./pics_site/vpl_twitter.jpg"); background-repeat: no-repeat; overflow: hidden;}
#bottom #twitter #volg_vpl{float: left; display: inline; margin: 40px 0px 0px 20px;}
#bottom #twitter #volg_vpl a{color: #FFF; font-size: 9px; font-weight: bold;}
#bottom #twitter #twitter_content{float: left; display: inline; margin: 12px 10px 0px 9px; width: 187px; height: 200px; overflow: hidden;}
#bottom #twitter #twitter_content .twtr-hd {display: none; overflow: hidden;}

#bottom #uitgelicht{float: left; display: inline; width: 206px; height: 296px; background-image: url("./pics_site/vpl_uitgelicht.jpg"); background-repeat: no-repeat; margin: 0px 0px 0px 28px;}
#bottom #uitgelicht #naar_blog{float: left; display: inline; margin: 40px 0px 0px 20px;}
#bottom #uitgelicht #naar_blog a{color: #FFF; font-size: 9px; font-weight: bold;}
#bottom #uitgelicht #uitgelicht_content{float: left; display: inline; margin: 15px 10px 0px 15px; width: 181px; height: 200px; overflow: hidden; line-height: 9px;}
#bottom #uitgelicht #uitgelicht_content li {margin: 5px 0px 0px 0px;}
#bottom #uitgelicht #uitgelicht_content a{color: #ff5e00; font-size: 9px;}

#bottom #adres{float: left; display: inline; width: 505px; height: 296px; background-image: url("./pics_site/adres.jpg"); background-repeat: no-repeat; margin: 0px 0px 0px 18px;}
#bottom #adres #socialmedia{float: left; display: inline; width: 340px; height: 25px; overflow: hidden; margin: 6px 0px 0px 160px; color: #FFF; font-size: 10px;}
#bottom #adres #socialmedia img{float: left; display: inline; margin: 0px 5px;}
#bottom #adres #content_adres{float: left; display: inline; width: 450px; margin: 165px 0px 0px 27px; color: #FFF; font-size: 10px;}
#bottom #adres #content_adres a{color: #FFF;}
/********************* end **********************/