@import "reset.css";

/***************************************************
1. Global ******************************************
***************************************************/

html { overflow: -moz-scrollbars-vertical;  overflow-x: auto; }

body { text-align: center; height: 100%; }
	
#container 		{ margin: 10px auto; position: relative; text-align: left; width: 950px; }

#header, #content { position: relative; margin:0 auto;}

.clear_both 	{ clear: both; }
.clear_left		{ clear: left; }
.clear_right	{ clear: right;}

@font-face {
	font-family: FranklinGothicStd-Condensed;
	src: url('/interactive/fonts/FranklinGothicStd-Condensed.ttf');
}

/***************************************************
2. Aanpassingen voor design	************************
***************************************************/

/*2.1 GLOBAL ********************************************************************************/		
				
/*2.2 HEADER ********************************************************************************/			
	#header	{ height: 75px; }
	.logo { float: left; }
		.logo h1 { background: url('/interactive/images/logo.jpg') no-repeat; width: 168px; height: 62px;  text-indent: -9999px; }
			.logo h1 a { display: block; color: #fff; width: 168px; height: 62px; }
			
	.slogan { float: left; margin: 10px 0 0 10px; width: 400px;}
		.slogan h2 { display: none; }
		.slogan p { font-weight: bold; font-size: 11px; margin: -5px 0 0 2px; padding: 0; color: #ff5000; font-family: verdana; line-height: 1.2; }
		.slogan p.small { font-size: 9px; font-weight: normal; color: #00005e; margin: 3px 0 0 2px; }
		
	.topNavigation { float: right; }
		.topNavigation ul li { display: inline; font-size: 9px; color: #00005E; font-family: verdana; border-left: 1px solid #00005E; padding: 0 2px 0 7px; }
			.topNavigation ul li:first-child { border: none; }
				.topNavigation ul li a.active { font-weight: bold; }
		
/*2.3 NAVIGATIE ******************************************************************************/		
	#navigation { height: 25px; width: 947px; margin: 0 0 15px 0; }
		#navigation ul { border-bottom: 1px solid #00005e; padding: 0 0 5px 0; height: 20px; }
			#navigation ul li { float: left; padding: 0 30px 0 0; margin: 0; }
				#navigation ul li a { color: #ff5000; font-size: 16px; font-family: FranklinGothicStd-Condensed; }
				#navigation ul li a.active, #navigation ul li a:hover { color: #00005e; }

	#navigation li.search { padding: 0; margin: -5px 0 0 0; float: right; }				
		#navigation form { margin: 0; }
			#navigation li.search input { width: 125px; height: 17px; border: 1px solid #564e77; font-size: 12px;  }
			#navigation li.search input.submit { background: url('/interactive/images/search.jpg') no-repeat; border: none; width: auto; font-family: verdana, arial, sans-serif; padding: 0 0 3px 10px; margin: 0 0 0 5px; } 
		
/*2.4 SUBNAVIGATIE ******************************************************************************/		
	#subNavigation { width: 220px; border: 1px solid #e95220; float: left; margin: 15px 25px 0 0; }		
		#subNavigation ul { padding: 8px 10px 8px 10px;}
			#subNavigation ul li { background: url('/interactive/images/subMenuItem.jpg') no-repeat; padding: 0 0 0 17px; min-height: 20px; _height:20px; }
			#subNavigation ul li.active { background: url('/interactive/images/subMenuItemActive.jpg') no-repeat; padding: 0 0 0 17px; min-height: 20px; }
				#subNavigation ul li a { color: #ff5000; }
				#subNavigation ul li.active a { color: #00005e; }
					#subNavigation ul li ul { padding: 5px 5px 0 0; }
						#subNavigation ul li ul li { background: url('/interactive/images/subMenuItem.jpg') no-repeat; padding: 0 0 0 17px; margin: 0; height: 20px; }
							#subNavigation ul li.active ul li a { color: #ff5000; }
								#subNavigation ul li ul li.active a { color: #00005e; }
								
		#subNavigation dl#news { margin: 10px 0 0 10px; }
			#subNavigation dl#news span { font-weight: bold; }
			#subNavigation p a { margin: 0 0 0 10px; }
		
			a.sidenavlink {  height: 32px; z-index: 999; }
			a.orange { color: #ff5000;  }
			a.orange:hover { color: #00005e; }
/*2.5 BREADCRUMB ******************************************************************************/	
	#breadCrumb {  }
		#breadCrumb ol {  }
			#breadCrumb ol li { display: inline; font-size: 10px; color: #ff5000; }
			#breadCrumb ol li span { color: #00005e; }
				#breadCrumb ol li a { font-size: 10px; color: #ff5000; }
	
/*2.6 CONTENT  ********************************************************************************/		
	/*2.6.1 CONTENT STARTPAGINA ********************************************************************************/		
	#content { font-family: verdana, arial, sans-serif; color: #00005e; font-size: 12px; width: 950px; }
		#contentLeft { width: 307px; padding: 0 8px 0 0; background: #fff; float: left; }
			.contentLeftTop { height: 267px; }
		
			.contentLeftBottom { height: 139px; width: 305px; margin: 8px 0 0 0; border: 1px solid #e95220; }
				.contentLeftBottom ol { margin: 5px 0 0 10px; }
					.contentLeftBottom ol li { height: 19px; padding: 0 0 0 15px; }
					.contentLeftBottom ol li.first { background: url('/interactive/images/1.gif') no-repeat; }
					.contentLeftBottom ol li.second { background: url('/interactive/images/2.gif') no-repeat; }
					.contentLeftBottom ol li.third { background: url('/interactive/images/3.gif') no-repeat; }
					.contentLeftBottom ol li.forth { background: url('/interactive/images/4.gif') no-repeat; }
					.contentLeftBottom ol li.fifth { background: url('/interactive/images/5.gif') no-repeat; }
		
		#contentCenter { width: 307px; background: #fff; float: left; }
			.contentCenterTop { height: 267px; }
			
			.contentCenterBottom { height: 139px; width: 305px; margin: 8px 0 0 0;  }
		
		#contentRight { width: 324px;  background: #fff; float: left; margin: 0 0 0 0; }
			.contentRightTop { height: 100px; margin: 0 0 0 1px; }
				.contentRightTop div { visibility: hidden; }
			
			.contentRightCenter { height: 144px; margin: 13px 0 0 22px; border: 1px solid #e95220; }
				.contentRightCenter ul { margin: 0 0 0 14px; height: 90px; }
					.contentRightCenter ul li { float: left; text-align: center; text-transform: uppercase; font-size: 9px; color: #bda89d; padding: 0; }
					.contentRightCenter ul li.left, .contentRightCenter ul li.right { padding: 25px 0 0 0; }
			.contentRightCenter a.more { color: #00005e; font-size: 10px; margin: 2px 17px 0 0; float: right; padding: 0 13px 0 0; background: url('/interactive/images/moreHouses.jpg') right no-repeat; }
			
			.contentRightCenter dl { margin: 0 3px 0 0; }
				.contentRightCenter dl dt { width: 90px; height: 67px; }
				.contentRightCenter dl dd  { width: 90px }
				.contentRightCenter dl dd.city { height: 12px; overflow: hidden; width: 82px; margin: 0 0 0 3px; }
			.contentRightCenter a.more:hover { color: #ea5e2f; }
			
			.contentRightBottom { height: 139px; margin: 16px 0 0 22px; border: 1px solid #e95220; }
				.contentRightBottom ul { margin: 5px 0 0 0; }
					.contentRightBottom ul li { background: url('/interactive/images/list.jpg') no-repeat; padding: 0 0 0 13px; margin: 0 0 0 6px; height: 19px; }
						.contentRightBottom ul li a { color: #00005e; }
						.contentRightBottom ul li a:hover { color: #ff5000; }
						
	/*2.6.2 CONTENT VERVOLGPAGINA ********************************************************************************/		
	#contentFollowup { float: left; width: 700px; margin: 15px 0 0 0; }
		#contentFollowupLeft { width: 430px; float: left; margin: 15px 0 0 0; overflow: hidden; }
		#contentFollowupRight { width: 245px; float: left; margin: 15px 0 0 25px; }
		
		#contentFollowup ul li, #contentFollowupLeft ul li { list-style: disc; line-height: 1.6; margin: 0 0 0 15px; }
		#contentFollowup ul#archcore li { list-style: none; margin: 0; font-weight: bold; }
			#contentFollowup ul#archcore li a { color: #ff5000; font-weight: normal; margin: 0 0 0 10px; }
			
		#contentFollowup img { padding: 5px; }
		#contentFollowup a, #contentFollowupLeft a { color: #ff5000; }
		div[rel=content_breed]{ width: 677px!important; }
		
/*2.7 WONINGAANBOD  ********************************************************************************/				
	/*2.7.1 WONINGAANBOD - OVERZICHT ********************************************************************************/		
#contentFollowupHouses { float: left; width: 680px; margin: 15px 0 0 0;  }
	#contentFollowupHouses a { color: #ff5000; }
	
		.sort { width: 668px; height: 15px; border: 1px solid #ea5e2f; margin: 20px 0 0 0; padding: 5px; font-size: 11px; background: #ebe3df; }
			.sort dl { }
			 	.sort dl dt { float: left; padding: 0 20px 0 0; font-weight: bold; }
			 		.sort dl dd { float: left; padding: 0 10px 0 10px; border-right: 1px solid #00005e; } 
			 			.sort dl dd a { color: #00005E!important; }
		.contentHouses { margin: 0 0 20px 0; border-top: 1px solid #00005e; border-bottom: 1px solid #00005e; padding: 5px 0 5px 0; }
			 		
		dl.details { display: block; border: 1px solid #ea5e2f; height: 90px; min-height: 90px; padding: 5px; margin: 10px 0 20px 0; }
			dl.details dt { float: left; width: 146px; height: 100px;}
				dl.details dd { margin: 0 0 3px 0;  }
				dl.details dd.price { float: right; font-size: 14px; font-weight: bold; color: #ff5000; margin: 0 10px 0 0; }
				dl.details dd.afford { float: right; font-size: 10px; font-weight: bold; }
				dl.details dd.small { font-size: 10px; font-weight: bold; }
				dl.details dd.more {  margin: 20px 0 0 0; float: left; }
					dl.details dd.more a { color: #ff5000; margin: 0 20px 0 0; }
					dl.details dd.more a:hover { color: #00005e; }
					a.randlink { float: right; padding: 20px 0 0 0; }
					
		.pagination { width: 667px; height: 20px; border: 1px solid #ea5e2f; margin: 20px 0 0 0; padding: 5px; font-size: 11px; background: #ebe3df; }
			.pagination ol { float: right; height: 20px; margin: 0 5px 0 0; }
				.pagination ol li { float: left; margin: 3px 3px 0 3px; }
				.pagination ol li a.active { color: #00005E!important; }
				li.first, li.prev, li.next, li.last { margin: 0!important; }
				p#woon_hidden { visibility: hidden; margin: -20px 0 0 0;}
		
	/*2.7.2 WONINGAANBOD - DETAIL WONING: WOON.NL ********************************************************************************/	
	.contactInfo { background: #ebe3df; border: 1px solid #ea5e2f; padding: 5px; margin: 28px 0 0 14px; min-height: 90px; width: 210px;	}
	
	#tabs {  }
		#tabs ul#tabs_menu { margin: 20px 0 0 0; }
			#tabs ul#tabs_menu li { display: inline; background: url('/interactive/images/tabBG.jpg') repeat-x; padding: 5px 1px 5px 1px; margin: 0 5px 0 0; }
			#tabs ul#tabs_menu li.active { background: #fff; border-top: 1px solid #ea5e2f; border-left: 1px solid #ea5e2f; border-right: 1px solid #ea5e2f; border-bottom: 1px solid #fff; }
				#tabs ul#tabs_menu li a { color: #fff; padding: 4px 8px 6px 8px;}
				#tabs ul#tabs_menu li a.selected { color: #00005e; background: #fff;}
				
		#tabs {  }
		#tabs ul#tabs_menu_start { margin: 20px 0 0 0; }
			#tabs ul#tabs_menu_start li { display: inline; background: url('/interactive/images/tabBG.jpg') repeat-x; padding: 5px 1px 5px 1px; margin: 0 5px 0 0; }
			#tabs ul#tabs_menu_start li.active { background: #fff; border-top: 1px solid #ea5e2f; border-left: 1px solid #ea5e2f; border-right: 1px solid #ea5e2f; border-bottom: 1px solid #fff; }
				#tabs ul#tabs_menu_start li a { color: #fff; padding: 4px 8px 6px 8px;}
				#tabs ul#tabs_menu_start li a.selected { color: #00005e; background: #fff;}
			
		#tab-1, #tab-2, #tab-3, #tab-4 { float: left; border: 1px solid #ea5e2f; padding: 20px; margin: 5px 0 0 0; width: 637px; }
			.slideshow { margin: 0 0 0 75px; height: 80px; }
				.slideshow ul li { float: left; padding: 0 28px 0 0; }
				.slideshow ul#slideshowNav { }
					.slideshow ul#slideshowNav li a.prev { position: absolute; top: 250px; left: 75px;}
					.slideshow ul#slideshowNav li a.next { position: absolute; top: 250px; right: 350px; }
				
					.slideshow ul#slideshowNavHuislijn li a.prev { position: absolute; top: 285px; left: 75px; }
					.slideshow ul#slideshowNavHuislijn li a.next { position: absolute; top: 285px; right: 350px; }
					
				

			div#large_picture { margin: 20px 0 0 75px;  }
			
	#callToAction { margin: 40px 0 0 0; padding: 0 10px 0 0; width: 245px; }
		#callToAction ul li { margin: 0 0 10px 15px; }
			#callToAction ul li a { background: url('/interactive/images/button.jpg') no-repeat; width: 220px; height: 26px; display: block; padding: 4px 0 0 25px; color: #fff; }
			#callToAction ul li a:hover { background: url('/interactive/images/buttonHover.jpg') no-repeat; }

						table.house_specs th {padding:0.3em 10px;}
          table.house_specs th, table.house_specs td {border-bottom:1px solid #cbcbcb;text-align: left;padding:0.3em 15px;}
	/*2.7.3 WONINGAANBOD - DETAIL WONING: HUISLIJN.NL ********************************************************************************/	
	#moreInformation { margin: 0 0 20px 0; }
		#moreInformation a { color: #ea5e2f; font-weight: bold; }
		
	.buttons { padding: 0 10px 5px 10px; margin: 28px 0 0 0; height: 90px; }
		.buttons ul li a { background: url('/interactive/images/button.jpg') no-repeat; width: 220px; height: 26px; display: block; padding: 4px 0 0 25px; color: #fff; }
		.buttons ul li a:hover { background: url('/interactive/images/buttonHover.jpg') no-repeat; }
		
	#callToActionBanner { margin: 55px 0 0 0; padding: 0 10px 0 0; }
	 .thumbs_huislijn li { float: left; margin: 0 16px 0 0; }
	 
	 .backLink { display: block; margin: 10px 0 0 0; }
	 
	/*2.7.4 WONINGAANBOD - ZOEKEN ********************************************************************************/	
	#realEstateType { border: 1px solid #ea5e2f; margin: 5px 0 20px 0; padding: 20px 120px 10px 10px; color: #ff5000; font-weight: bold; font-size: 11px; }
		#realEstateType p { height: 25px; }
		#realEstateType p.address { width: 600px; float: left; }
			#realEstateType p.address label { width: 170px;  }
		#realEstateType p.radius {  }
			#realEstateType label { }
			#realEstateType label.price { width: 85px;  float: left; margin: 0 0 0 0;}
			#realEstateType label.fixed { margin: 0 10px 0 10px; font-weight: normal; color: #00005e;  }
			#realEstateType select { height: 24px; width: 120px; float: left; margin: 0 0 0 -150px;}
		#realEstateType input { height: 20px; margin: 3px 0 0 0;}
		#realEstateType input#submit { float: right; background: url('/interactive/images/zoeken_button.jpg') no-repeat; border: none; width: 85px; height: 26px; color: #fff; font-weight: bold; margin: -2px -80px 0 0; cursor: pointer; }	
		#realEstateType select.offers { margin: 0 0 0 10px; }
	
/*2.8 FOOTER *********************************************************************************/		
	.push { height: 20px; clear: both; }

	#footer { clear: both; text-align: center; border-top: 1px solid #c1ada3; width: 946px; }
		#footer ul li { display: inline; padding: 0 25px 0 0; }
			#footer ul li a { font-size: 9px; font-family: verdana, arial, sans-serif; color: #bba296; }
			#footer ul li a:hover, #footer ul li a.active { color: #00005e; }
			
/*2.9 TEKST & LINKS *********************************************************************************/		
	h2 { font-family: verdana, arial, sans-serif; color: #00005e; font-size: 14px; font-weight: bold; }
	#subNavigation h3 { padding: 8px 5px 5px 10px; }
	h3 { font-family: FranklinGothicStd-Condensed; font-size: 17px; height: 19px; font-weight: normal; color: #ff5000; border-bottom: 1px solid #e95220; padding: 8px 5px 5px 10px; }
	.contentRightCenter h3 { border: none; padding: 8px 5px 5px 13px; }
	
	p { line-height: 1.6; margin: 0 0 10px 0;}
	
	a { color: #00005e; }
		a:hover { color: #ea5e2f; }
	a.calculator { background: url('/interactive/images/calculator.jpg') no-repeat; color: #fff!important; display: inline-block; padding: 3px 0 0 40px; margin: 0 10px 0 0; height: 28px; width: 142px; }
	a.brochure { background: url('/interactive/images/brochure.jpg') no-repeat; width: 170px; height: 26px; display: block; padding: 4px 0 0 25px; color: #fff!important;line-height: 1.4;  }
		
/*2.10 FORMULIEREN *********************************************************************************/
form.standard { border: 1px solid #ff5000; padding: 15px; width: 554px; margin: 12px 0 0 0; background: url('/interactive/images/standardform_bg.gif') repeat-x #ebe1dc;}
	form li { padding: 0 0 5px 0; }	
		form label { width: 170px; float: left; font-weight: bold; margin: 4px 0 0 0; }
		form select { height: 24px; border: 1px solid #212b78; margin: 0 0 0 0; }
		form textarea { font-family: verdana, arial, sans-serif; border: 1px solid #212b78; width: 256px;}
		form input { width: 256px; height: 24px; border: 1px solid #212b78; margin: 0 0 3px 0; font: normal 14px 'Arial'; color: #212b78;} 
		 span.asterisk { color: #ff5000;}
	ul.errors { margin: 10px 0 20px 0; }
	
	form.standard ol li.submit input { background: url('/interactive/images/verzenden_button.jpg') no-repeat; border: none; width: 134px; height: 26px; cursor: pointer; padding: 0 0 3px 0; font-weight: bold; color: #fff; margin: 10px 0 0 410px; }
	form.standard ol li.submit_bereken input { background: url('/interactive/images/bereken_button.jpg') no-repeat; border: none; width: 102px; height: 26px; cursor: pointer; padding: 0 0 3px 0; font-weight: bold; color: #fff; margin: 10px 0 0 360px; }
  label.placeholder {width: 20px;height: 14px;float: left; margin-right: 3px;}
	label.error {background: url('/interactive/images/form-error.gif') no-repeat;width: 20px;height: 14px;margin-top: 5px; float: left; margin-right: 3px;}
  label.valid {background: url('/interactive/images/form-valid.gif') no-repeat;width: 20px;height: 14px;margin-top: 5px; float: left; margin-right: 3px;}
  input[type=checkbox]{clear: both;width: 15px;height: 15px;background: #f0f0f0;margin-right: 30px!important;}
 .small_input { width: 100px; }
 .small_input_perc { width: 50px; margin: 0 0 0 12px; }
 .time { margin: 8px 0 0 0; }
#form_col_left{ float: left; width: 220px; margin-top: -28px!important; margin-left: 194px; }
#form_col_left2{ float: left; width: 220px;  margin-left: 0; }

  .col_label { float: left; width: 130px; margin: 0 0 0 0;}
 
  em { padding: 10px 0 10px 0; display: block; }
  
  
  /***************************************************
Sitemap	******************************
***************************************************/

ul#sitemap li { width : 400px; color: #1a2574; list-style: none; font-size: 12px!important;}
ul#sitemap li ul li { width : 400px;}
  ul#sitemap li a {  color: #1a2574; display: block; padding: 8px 0 8px 6px; width: 350px; font-size: 12px!important; }
  ul#sitemap li.sm2 a { font-size: 10px!important; }
  ul#sitemap li a:hover { color: #ff5304; }
  ul#sitemap li ul li a { color: #ff5304; display: block; padding: 8px 0 8px 6px; margin: 0 0 0 22px; width: 350px; }
  ul#sitemap li ul li a:hover { color: #1a2574; }
    ul#sitemap li ul li ul li a { margin: -5px 0 0 40px; }
  /* 2.11 NO IE6 ************************************************************************************/
#no-ie6, .warning-ie6 { display: none; }

/***************************************************
 Benodigde Hypotheek	****************************
**************************************************/

table#hypotheek_table {  }
  table#hypotheek_table tr {  }
    table#hypotheek_table tr td { width: 200px; height: 20px;}
    table#hypotheek_table tr td.add { width: 140px; border-bottom: 1px solid #ff5000; }
    table#hypotheek_table tr td.outcome { text-align: right; width: 140px; }
    table#hypotheek_table tr td.total_outcome { color: #00005e; font-size: 12px; font-weight: bold; }
    p.error_calc { color: #f00; margin-bottom: 0px;}