/* -------------------------------------------------------------- 
   
   layout.css
   * Sets up the framework of the site.
    
-------------------------------------------------------------- */

#container {
    position: relative;
    overflow: hidden;
	margin: 0 auto;
}

#header-wrap, #content-wrap{ 
	position:relative;			
}
			
#header{ 
	clear:both;
	margin:0 auto;
	width:998px;
	height: 120px;
	background:url("../images/bg-header.png") no-repeat scroll right 0 transparent;
}

#header-top{
	clear:both;
	float:left;
	height:37px;
	width:998px;
	position:relative;
}

#header-top ul.header-nav{
	clear:both;
	border-right: 1px solid #D3D3D3;
	float: right;
	height: 37px;
	padding: 0;
}

#header-top ul.header-nav li{float:left;}

#header-top ul.header-nav li a{
	border-left: 1px solid #D3D3D3;
	color: #000000;
	display: block;
	font-size: 11px;
	font-weight:bold;
	padding: 12px;
	white-space: nowrap;
}

#header-top ul li a.selected{text-decoration:underline;}

#header-top #header-top-left{clear:both; float:left;}

#header-top #header-top-right{float:right;}

#header-top #header-top-right ul{float:right;}

#header-top #header-top-left ul li, #header-top #header-top-right ul li{float:left;}

#header-top #header-top-right ul li.text{
	color: #000000;
	display: block;
	font-size: 11px;
	padding: 12px;
	white-space: nowrap;
}

#header-top #header-top-left a, #header-top #header-top-right a{
	color: #000000;
	display: block;
	font-size: 11px;
	font-weight:bold;
	padding: 12px;
	white-space: nowrap;
}



#header-bottom{
	clear:both;
	float:left;
	width:608px;
	height:83px;
	position:relative;
}

#header-bottom p.logo{
	position:relative;
	left:15px;
	top:-10px;
	font-size:31px /*32*/;
	font-weight:bold;
}

#header-bottom p.logo a{text-decoration:none;}
#header-bottom p.logo a.small{font-size:16px; color:#059EE7;}
#header-bottom p.logo a.first{color:#059EE7;}
#header-bottom p.logo a.second{color:#059EE7;}

#header-bottom p.payoff{
	font-size: 18px /*18px*/;
	font-weight: bold;
	left: 116px;
	position: absolute;
	top: 33px;
	width: 430px;
}


#content{ 
	clear:both;
	margin:0 auto;
	width:998px;
}

#breadcrumbs{
	clear:both;
	float:left;
	width:983px;
	height:25px;
	margin:0 0 0 15px;
}

#breadcrumbs ul.breadcrumb{
	color: #6C6B6B;
	display: block;
	position: relative;

}

#breadcrumbs ul.breadcrumb li{
	float:left;
	display: block;
	padding:0px 8px 10px 0px;
	white-space: nowrap;
}

#breadcrumbs ul.breadcrumb li a{
	color: #6C6B6B;
	font-size: 12px;
}

#content-page{
	clear:both;
	float:left;
	width:998px;
	margin-bottom:20px;
}

#content-left{clear:both; float:left; width:621px; padding:0 15px;}
#content-right{float:right; width:720px;}

#content-left.equal{width:500px;}
#content-right.equal{width:453px; padding-right:15px;}

#content-page h1.title{
	background: none repeat scroll 0 0 #07497A;
	border-radius: 4px 4px 4px 4px;
	margin: 0 0 15px;
	
	padding: 15px 15px 14px 13px;
	color:white;
}

#content-page h1.title-center{padding-left:205px;}
#content-page h1.title-left{padding-left:15px;}

#content-right span.advantage{float:left; padding-left:20px; margin-bottom:5px; background: url("../images/validation-valid.png") no-repeat scroll 0px 0px transparent;}
#content-right .homepage-image {
  border: 1px solid #D7E0E7;
  float: right;
  margin: 0 15px 15px;
  padding: 10px;
  position: relative;
  width: 300px;
}

#content-right .homepage-image img {
  width: 300px;
}


#search{
	width:365px;
	margin:0 auto;
}

#search h1, #search h2{font-size:16px; font-weight:bold; color:black;}
#search input#submit{width:95px;}

#category{
	float:left;
	width:340px; 
	margin: 0 20px 20px 0;
}
#category.first{clear:both;}
#category h3{margin:0px; padding:0px;}
#category h3 a{font-size:12px; font-weight:normal; color:black; }
#category h3 a:hover{color:#666666;}



#homepage-aanbieders{
  float:left;
  margin:15px;
  padding: 10px;
  position: relative;
  width: 200px;
}

#homepage-aanbieders p.heading{
	font-size:14px;
	font-weight:bold;
	margin-bottom:5px;
}

#homepage-aanbieders .aanbieder {
  border: 1px solid #D7E0E7;
  float: left;
  padding: 10px;
  width: 195px;
  height:100px;
  margin-bottom:15px;
}

#homepage-aanbieders .aanbieder img{width:195px;}


#navigation{clear:both; float:left;}
#navigation table td{ padding:2px;}
#navigation table td:hover{background:#D7E0E7;}
#navigation table td a{color:#003768;}
#navigation table td.number{width:15px;}
#navigation table td.number p{text-align:center;}
#navigation table td.select {width:15px; background-color:#E37F1C;}
#navigation table td.select p{color:white; text-align:center;}
#navigation table td.selected:hover{background:none;}
#navigation table td.selected p{color:black;}
/*/////////////////////////////////
//
//
//	Filter menu
//
//
/////////////////////////////////*/

#content-page #filter-menu-wrap{
	float: left;
	margin: -25px 15px 0 13px;
	width: 218px;
	padding:15px;
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #E4E9ED;
	border-top:none;
	border-radius: 4px 4px 4px 4px;

}


#content-page #text-wrap{
	float:right;
	width:792px;
	margin-left:10px;
}

#content-page #supplier-wrap{
	float:right;
	width:720px;
	margin-left:15px;
}

#content-page #supplier-wrap.offerte-margin{background: url("../images/bg-compare-ul.gif") repeat-y scroll 8px 0 transparent;}

#content-page #supplier-wrap.overzicht{
	float:left;
	background:none;
	
}

#content-page #supplier-wrap p.button-top{padding-bottom:20px;}
#content-page #supplier-wrap p.button-bottom{padding-top:20px;}

#content-page #supplier-wrap .supplier{
	clear:both;
	float:left;
	position:relative;
	width:621px;
	margin:0 0 20px 0px;
}

#content-page #supplier-wrap .offerte-margin{margin:0 0 20px 25px;}

#content-page #supplier-wrap.overzicht .supplier{margin: 0 0 20px 0;}


#content-page .supplier-header{
	-moz-border-bottom-colors: none;
	-moz-border-image: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	background: none repeat scroll 0 0 #F4FBFE;
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 1px 0;
	padding: 8px 5px;
	position: relative;
	height:20px;
}

#content-page .pink{
	background: none repeat scroll 0 0 #FEF5E3;
	border-color: #CDCDCD;
}

#content-page .supplier input.checkbox{
left: -27px;
position: absolute;
top:12px;
}

#content-page .supplier-content{
	position:relative;
	margin-top:5px;
	height:150px;
}

/* Leverancier overzicht*/
#content-page .supplier-location{float:left; width:456px; margin-left:15px; height:20px; color:gray;}

#content-page .supplier .supplier-logo{float:left; width:150px;}
#content-page .supplier img.logo{float:left; width:150px; margin-top:5px; }

#content-page .supplier .supplier-price{float:left; margin-top:15px; margin-left:15px; width:280px; height:75px;}
#content-page .supplier .supplier-price span.price-wrap{clear:both; float:left; margin-bottom:10px;}
#content-page .supplier .supplier-price span.price-title{width:100px;}
#content-page .supplier .supplier-price span.price img{position:relative; left:7px; top:3px; margin-right:15px;}
#content-page .supplier .supplier-price span.price{font-size:18px;}


#content-page .supplier .offerte-cta{float:right; margin-top:15px; margin-left:15px; width:161px; height:75px;}
#content-page .supplier .offerte-cta p.button-padding{padding-bottom:10px;}

#content-page .supplier a.rating-button{
	background: none repeat scroll 0 0 #FEF5E3;
	border: 1px solid #CDCDCD;
	border-radius: 4px 4px 4px 4px;
	color: #000000;
	padding: 6px 4px;
	position: absolute;
	right: 10px; /*85px*/
	text-align: center;
	top: 3px;
	width: 150px;
}

.rating-button strong{
	background: url("../images/star.png") no-repeat scroll 0px 2px #FEF5E3;
	padding-left: 14px;
}


#social-count{
	position:absolute;
	top:10px;
	right:10px;
}

a.recommend-count{
	background: none repeat scroll 0 0 #FEF5E3;
	border: 1px solid #CDCDCD;
	border-radius: 4px 4px 4px 4px;
	color: #000000;
	padding: 6px 10px;
	text-align: center;
	margin-left:14px;
}

.recommend-count strong{
background: url("../images/thumbs_up.gif") no-repeat scroll 0 -1px #FEF5E3;
padding-left: 18px;
}

span.icon-tip{
background: url("../images/arrow.png") no-repeat scroll 0 0px transparent;
height: 10px;
left: 26px;
position: absolute;
top: 28px;
width: 18px;

}

a.recommend-button{
	position:absolute;
	left:0px;
	top:36px;
	color:#3b5998;
	background: none repeat scroll 0 0 #F8F8F8;
	border: 1px solid #CDCDCD;
	border-radius: 4px 4px 4px 4px;
	padding: 2px 8px;
	text-align: center;
	font-size:10px;
	margin-left:14px;
}

a.recommend-button:hover{text-decoration:none; opacity:0.8}

a.zonnepanelenwiki{
	position:absolute;
	left:0px;
	top:57px;
	color:#07497A;
	padding: 0px;
	text-align: center;
	font-size:10px;
	font-weight:bold;
}
a.zonnepanelenwiki .orange{color:orange;}


#step2{
	float: left;
	margin: -25px 15px 0 0px;
	width: 218px;
	padding:15px;
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #E4E9ED;
	border-top:none;
	border-radius: 4px 4px 4px 4px;
}

#step3{
	float:left;
	width:455px;
}

#step3 table#kosten{
	width:455px;
	margin:10px 0;
	border:1px solid #D7E0E7;
}
#step3 table#kosten td.title p{color:#829DB5;}
#step3 table#kosten td.header p{color:black; text-align:center;}
#step3 table#kosten td.header{background:#D7E0E7;}
#step3 table.submit{width:455px;}
#step3 table.submit td.submit{text-align:right;}

div.feedback{
	border-radius: 5px 5px 5px 5px;
	margin: 0 0 10px 0;
	padding: 0;
	width: 100%;
}

div.feedback-failure p{padding:3px; color: #402A2A;}
div.feedback-success p{padding:3px; color: #007916;}

div.feedback-failure{
	background: none repeat scroll 0 0 #F5ADAD;
	border: 1px solid #FF4040;
}

div.feedback-success{
	border: 1px solid #57A84B; background: #E6F3E2;
}

div .feedback-success p{
	background: url("../images/voltooid.png") no-repeat scroll 5px 5px;
	padding: 7px 5px 7px 33px;
}



/*/////////////////////////////////
//
//
//	Bedrijfspagina leveranciers
//   Contentpagina linkerkant
//
/////////////////////////////////*/
#supplier-detail-wrap{
	float:left;
	width:651px;
}

#supplier-naw-wrap{
	clear:both;
	float:left;
	width:621px;
	padding:0 15px;
}

#supplier-naw-wrap #supplier-logo{
	clear:both;
	float:left;
	margin:0px;
	width:227px;
}

#supplier-naw-wrap #supplier-logo img{border:1px solid #DFE6EC; width:200px; padding:5px; margin-right:15px;}

#supplier-naw-wrap #supplier-naw{
	float:left;
	width:394px;
	margin-bottom:10px;
}

#supplier-naw-wrap #supplier-naw span{clear:both; float:left;}

#supplier-cta{
	clear:both;
	float:left;
	width:606px;
	background: none repeat scroll 0 0 #E6F5FB;
	margin: 15px 0 30px;
	overflow: hidden;
	padding: 15px;
}

#supplier-cta span.text{margin-right:79px; /*margin-right:38px;*/}

/*/////////////////////////////////
//
//
//	Bedrijfspagina leveranciers
//     Navigatie: overzicht,beschrijving,
//                ervaring, deel uw ervaring
/////////////////////////////////*/
#supplier-nav{
	clear:both;
	float:left;
	width:636px;
	border-bottom:1px solid #D7E0E7;
}

#supplier-nav ul{
	
	list-style: none;
	margin:0px;
	padding:0px;
}

#supplier-nav ul li{
	float:left;
	width:150px;
	/*background:none repeat scroll 0 0 #EBEFF3;*/
}

#supplier-nav ul li a{
	border:1px solid #D7E0E7;
	border-bottom:none;
	border-radius: 4px 4px 0 0;
	padding:6px 0;
	color:#6C6B6B;
	margin-right:10px;
	text-align:center;
	display: block;
	white-space: nowrap;
	background:#EBEFF3;
}

#supplier-nav ul li a.selected{
	background:white;
	position:relative;
	top:1px;	
	color:black;
}

#supplier-nav ul li a:hover{
	background:#D7E0E7;
	text-decoration:none;
}

#supplier-nav ul li a.selected:hover{
	background:white;
	text-decoration:none;
}
/*/////////////////////////////////
//
//
//	Bedrijfspagina leveranciers
//     beschrijving van bedrijf etc.
//                
/////////////////////////////////*/
#supplier-description{
	clear:both;
	float:left;
	width:621px;
	/*border:1px solid #D7E0E7;*/
	border-top:none;
	padding:15px 0 15px 15px;
	line-height:1.5em;
}


#supplier-description #rating-cta{
	position:relative;
	float:right;
	width:282px;
	height:200px;
	background:url("../images/backgrounds/bg-block-grey.gif") repeat-y scroll 0 0 #F2F6F8;
	border:1px solid #D7E0E7;
	padding:10px;
	margin-left:10px;
}
#supplier-description #rating-cta p.headline{font-size:16px; font-weight:bold;}

#supplier-description #rating-cta #rating-button{position:absolute; left:-5px; top:11px;}

#supplier-description #googlemaps{
	float:right;
	width:300px;
	height:320px;
	background:url("../images/backgrounds/bg-block-grey.gif") repeat-y scroll 0 0 #F2F6F8;
	border:1px solid #D7E0E7;
	padding:0px;
	margin-left:10px;
}

/* Ervaringen */
#aanbieder-ervaring #wrap-rating{
	clear:both;
	float:left;
	background:none repeat scroll 0 0 #F3F6F8;
	border:1px solid #D7E0E7;
	margin-bottom:10px;
	padding:10px;
	margin-left:-15px;
	width:614px;
}
#wrap-rating ul li{float:left;}
#wrap-rating ul li.grade{font-size:30px; color:#52A303; font-weight:bold; margin-right:10px; margin-top:8px;}
#wrap-rating ul li img{margin-top:5px;}
#wrap-rating ul li.rating-total{margin:15px 0 0 10px;}

#ratings{
	clear:both;
	float:left;
	width:676px;
	margin-top:10px;
}

#ratings .rating{padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid #D7E0E7;}
#ratings .rating img{vertical-align:bottom;}
#ratings .rating p.overall-rating{margin-bottom:10px;}

/* Deel uw ervaring */
#review, #personal{clear:both; float:left; width:619px;}
#review p.date-order{margin-top:20px; margin-bottom:30px;}
#review ul.info-rate{clear:both; margin-left:0px; float:left; margin-bottom:5px;}
#review ul.info-rate li{float:left; margin-left:180px;}

#review ul.explain-rate{float:left; margin-left:180px;}
#review ul.explain-rate li{float:left; width:33px;  margin-bottom:10px;}
#review ul.rate{float:left; margin:0px;}
#review ul.rate li{float:left; width:33px; margin-bottom:10px;}
#review ul.rate li.title{float:left; width:180px; margin-right:0px;}
#review textarea{width:360px;}

#personal ul.personal{}
#personal ul.personal li.title{float:left; width:180px; margin-right:0px;}
#personal ul.personal li{float:left; margin-bottom:10px;}

/*/////////////////////////////////
//
//
//	Bedrijfspagina leveranciers
//     Menu balk rechterkant
//
/////////////////////////////////*/
#supplier-compare-menu-wrap{
	float: right;
	margin: -80px 15px 0 0;
	width: 300px;
	padding:15px;
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #E4E9ED;
	border-radius: 4px 4px 4px 4px;
	display: block;
	position: relative;
}

#supplier-compare-title{
	clear:both;
	position:relative;
}

#supplier-compare-title p{
	padding-left:20px;
}

#supplier-compare-title p.title{
	font-size:16px;
	font-weight:bold;
}

#supplier-compare-menu{
	clear:both;
	/*background: url("../images/bg-compare-ul.gif") repeat-y scroll 6px 0 transparent;*/
	margin-top:-10px;
	padding-top:20px;
}

#supplier-compare-menu.no-list{background:none;}

#supplier-compare-menu.no-list p.advantage{background: url("../images/validation-valid.png") no-repeat scroll 0px 2px transparent;}

#supplier-compare-menu input.button{margin-top:20px;}

.supplier-compare-detail{
	clear:both;
	position:relative;
	margin-bottom:15px;
}

.supplier-compare-detail h2{
	padding-left:20px;
	font-size:14px;
}

#content-page .supplier-location-small{float:left; width:280px; margin-left:20px; height:20px; color:gray;}
#content-page .supplier-logo-small{float:left; width:150px; margin-left:20px;}
#content-page .supplier-logo-small{float:left; width:150px; margin-bottom:20px;}
#content-page .supplier-logo-small img{width:125px;}

.supplier-compare-detail p{padding-left:20px;}

.supplier-compare-detail a.selected{text-decoration:underline; color:black;}


#footer-wrap{
	clear:both;
	background: none repeat scroll 0 0 #F2F3F5;
	border-color: #D0D0D0;
	border-style: solid;
	border-width: 1px 0;
}

#footer{ 
	clear:both;
	margin:0 auto;
	width:966px;
	padding:0 15px 15px 15px;
	color: #6C6B6B;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

#footer a{color: #6C6B6B;}
#footer a.selected{text-decoration:underline;}

#footer .line{
	clear:both;
	height:20px;
	padding-top:15px;
}

#footer span{
	float:right;
}