@charset "utf-8";

/*	PROJECTNAAM STYLES
	Author:	Sebastiaan Smid, Netvlies
			
	----------------------------------------------------*/

/*	Table of contents
	= GENERIC
	= BOX MODEL
	= HEADER
	= NAVIGATION
	= OVER ONS
	= PROJECT / PROJECTEN
	= CONTACT
	= FOOTER
 	----------------------------------------------------*/

/*	= GENERIC
	----------------------------------------------------*/
	* { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
	
	body { background: #000000; text-align: center; }
	img { border: 0; }
	a { outline: 0; }
	.clr { height: 100%; overflow: hidden; }
	

/*	= BOX MODEL
	----------------------------------------------------*/
	#page-box {position: relative; width: 960px; margin: 0 auto; text-align: left; background: url(../img/page-box_bg.gif) repeat left top; }
	#sub-page-box {position: relative; width: 960px; margin: 0 auto; text-align: left; background: url(../img/sub-page-box_bg.gif) repeat left top; }
	#home-box { position: relative; width: 960px; height: 567px; background:url(../img/home_vsl.jpg) no-repeat left top; }
	#header { position: relative; width: 960px; height: 132px; background:url(../img/header_bg.jpg) no-repeat left top; }
	#col-a { position: absolute; top: 132px; left: 0px; }

/*	= HEADER
	----------------------------------------------------*/
	#logo { position: absolute; top: 30px; left: 25px; }
	#pay-off { position: absolute; top: 305px; left: 308px; }

/*	= NAVIGATION
	----------------------------------------------------*/
	#main-nav { position: absolute; left: 308px; top: 345px; list-style: none; }
	#main-nav li { text-indent: -10000px; float: left; padding: 0 8px 0 13px; background: url(../img/main-nav_li_icon.gif) no-repeat left center; }
	#main-nav li a { display: block; height: 23px; }
	#main-nav li.overons a { width: 90px; background: url(../img/main-nav_btn_overons.png); } 
	#main-nav li.projecten a { width: 84px; background: url(../img/main-nav_btn_projecten.gif); } 
	#main-nav li.contact a { width: 66px; background: url(../img/main-nav_btn_contact.gif); } 
	#main-nav li a:hover { background-position: left -23px; }
	
	#nav { position: absolute; left: 28px; top: 305px; width: 100px; list-style: none;  }
	#nav li { text-indent: -10000px; padding: 0 0 14px 0; background: #000; }
	#nav li a { display: block; height: 20px; }
	#nav li.home a { width: 49px; background: url(../img/nav_btn_home.gif); } 
	#nav li.overons a { width: 79px; background: url(../img/nav_btn_overons.gif); } 
	#nav li.projecten a { width: 75px; background: url(../img/nav_btn_projecten.gif); } 
	#nav li.contact a { width: 63px; background: url(../img/nav_btn_contact.gif); } 
	#nav li a:hover { background-position: left -20px; }
	#nav li.selected a { background-position: left -20px; }
	
	/* hoogte 13 + x * de hoogte van page-box_bg.gif (34px) */
	#content-box { position: relative; width: 748px; float: right; background: url(../img/content-box_bg.gif);  }
	#content-box .col-a  { float: left; width: 510px; } 
	#content-box .col-a-innerbox { margin: 22px 24px; color: #292926; }
	#content-box .col-b  { float: left; width: 238px; } 
	#content-box .col-b-innerbox { margin: 22px 8px 22px 12px; color: #292926; }
	#content-box .col-b-innerbox h2 { margin-bottom: 15px; }
	#content-box .col-a h1,#content-box .col-b h1,#content-box .col-c h1 { margin-bottom: 15px;  }
	#content-box .col-a-innerbox ul { padding: 10px 0 0 15px; } 
	#content-box .col-a-innerbox ul a { color: #000; } 

/*	= OVER ONS
	----------------------------------------------------*/
	.persoon img { float: left;  margin: 5px 10px 0 0; }
	.persoon { margin: 10px 0 15px 0; }
	.persoon p { margin: 0 0 10px 0; }
	
	.over-ons-links { list-style: none; margin: 20px 0 0 -10px; font-size: 0; line-height: 0; } 
	.over-ons-links li { clear: both; border-top: 1px solid #c7c2bc; font-size: 0; line-height: 0; xbackground: red; }
	.over-ons-links li a { display: block; font-family: TheMix; font-weight: normal; height: 11px; font-size: 12px; line-height: 14px; color: #000; text-decoration: none; padding: 8px 0 6px 23px; background: url(../img/projectenlijst_li.gif) no-repeat 10px 10px; cursor: pointer !important;  }
	.over-ons-links li.first { border-top: none; margin: 0; padding: 0; }
	.over-ons-links li.first a { margin-top: 0px; }	
	
    p.over-ons { color: #a7630b; line-height: 26px; text-transform: uppercase; }
	p.over-ons span.x { color: #000; }
	p.over-ons span.y { font-size: 16px; }

/*	= PROJECT / PROJECTEN
	----------------------------------------------------*/
	#projectomschrijving { overflow: hidden; height: 100%; }
	#projectomschrijving h3 { margin-bottom: 5px; }
	#projectomschrijving .vsl { float: left; margin-right: 10px; }
	#projectalbum { background: #edebe9; margin-top: 18px; padding: 18px 0 7px 18px; overflow: hidden; height: 100%; }
	#projectalbum img { margin: 0 14px 11px 0; display: block; float: left;}

	#content-box .projecten-innerbox {  }
	.project { padding: 16px 0 25px 24px; clear: both; overflow: hidden;  }
	.project h2 { margin-bottom: 10px; }
	.project.even { background: url(../img/project-even_bg.gif); }
	.project.first { padding: 0 0 25px 24px; }
	.project .vsl { float: left; }
	.project .user-content { display: inline; float: left; width: 314px; margin-left: 12px; } 
	.project .user-content p { margin: 0 0 20px 0; }
	.project .projectenlijst { float: left; width: 238px; margin-left: 27px; list-style: none; font-size: 0; line-height: 0; }
	.project .projectenlijst li { clear: both; border-top: 1px solid #c7c2bc; width: 238px; font-size: 0; line-height: 0; }
	.project .projectenlijst li a { display: block; font-family: TheMix; font-weight: normal; height: 11px; font-size: 12px; line-height: 14px; color: #000; text-decoration: none; padding: 8px 0 6px 23px; background: url(../img/projectenlijst_li.gif) no-repeat 10px 10px; cursor: pointer !important;  }
	.project .projectenlijst li.first { border-top: none; margin: 0; padding: 0; }
	.project .projectenlijst li.first a { margin-top: 0px; }

/*	= BESTEL HET BOEK
	----------------------------------------------------*/
	#bestelalbum { display: block; height: 400px; }

/*	= CONTACT
	----------------------------------------------------*/
	#frm_contact table, #frm_contact table tr, #frm_contact table tr td { border: none; border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0; } 
	#frm_contact table { margin-top: 10px; }
	#frm_contact table tr td { vertical-align: top; padding: 4px 0;}
	#frm_contact input.txt { border: 1px solid #b2b4bf; padding: 3px; width: 233px; }
	#frm_contact input.txt.adres { width: 183px; margin-right: 6px;  } 
	#frm_contact input.txt.num { width: 36px; } 
	#frm_contact input.txt.zip { width: 64px; margin-right: 6px;  } 
	#frm_contact input.check { margin: 0 10px 12px 0; float: left; }
	#frm_contact input.img { margin-top: 10px; }
	#frm_contact textarea { height: 106px; border: 1px solid #b2b4bf; padding: 3px; width: 233px;  }
	#frm_contact em { color: #a7630b; margin-left: 5px;}
	#frm_contact .col-1 { padding-right: 40px; padding-top: 8px; }
	#frm_contact .small { font-size: 10px;}
	#frm_contact div.small { margin: 10px 0 ; }
	
	.adresgegevens { margin-bottom: 36px; }
	.routeomschrijving { margin-bottom: 0px !important; }

/*	= BESTEL
	----------------------------------------------------*/
	#frm_bestel table, #frm_bestel table tr, #frm_bestel table tr td { border: none; border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0; } 
	#frm_bestel table { margin-top: 10px; }
	#frm_bestel table tr td { vertical-align: top; padding: 4px 0;}
	#frm_bestel input.txt { border: 1px solid #b2b4bf; padding: 3px; width: 233px; }
	#frm_bestel input.txt.adres { width: 183px; margin-right: 6px;  } 
	#frm_bestel input.txt.num { width: 36px; } 
	#frm_bestel input.txt.zip { width: 64px; margin-right: 6px;  } 
	#frm_bestel input.img { margin-top: 10px; }
	#frm_bestel textarea { height: 106px; border: 1px solid #b2b4bf; padding: 3px; width: 233px;  }
	#frm_bestel em { color: #a7630b; margin-left: 5px;}
	#frm_bestel .col-1 { padding-right: 40px; padding-top: 8px; }
	#frm_bestel .small { font-size: 10px;}
	#frm_bestel div.small { margin: 10px 0 ; }
	
/*	= FOOTER
	----------------------------------------------------*/
	#footer { padding: 50px 0 54px 123px; clear: both; }
	#footer.subpage { padding: 50px 0 54px 123px; clear: both; }
	
	
	#project-photo { display: none; height: 351px; border: 2px solid #edebe9; padding: 2px; text-align: center; } 
	#project-nav { height: 31px; position: relative; display: none; overflow: hidden; margin: 18px 0 0 0; }
	#project-nav a { text-indent: -10000px;  display: block; height: 31px; overflow: hidden; float: left; }
	#project-nav .back { width: 158px; background: url(../img/btn_terugnaarproject.gif) no-repeat top left; }
	#project-nav .next { position: absolute; right: 0px; float: right; width: 93px; background: url(../img/btn_volgende.gif) no-repeat top left; } 
	#project-nav .prev { position: absolute; right: 110px; float: right; width: 78px; background:url(../img/btn_vorige.gif) no-repeat top left; }
	#project-nav a:hover { background-position: bottom left; }
	.photo-omschrijving { padding-top: 25px; display: none; }
	#photohdr { display: none; }
	
	h2.typeface-js { font-family: TheMix; font-size: 20px; font-weight: normal; color: #a7630b; }	
	h1.typeface-js { font-family: TheMix; font-size: 20px; font-weight: normal; }
	h3.typeface-js { font-family: TheMix; padding: 0 0 0 13px; font-size: 18px; font-weight: normal; background: url(../img/h3_ico.gif) no-repeat 0px 3px ; }
	p.typeface-js { font-family: TheMix; font-size: 12px; font-weight: normal; color: #000000; }
	p.typeface-js span.uitgelicht { font-family: TheMix; font-size: 12px; font-weight: normal; color: #a7630b; }

	#crumbpath { padding: 0!important; margin: 0; list-style: none; height: 25px; overflow: hidden; margin-bottom: 15px;  }
	#crumbpath li { padding: 2px 9px 2px 13px; background: url(../img/crumbpath_li_bg.gif) no-repeat center left; float: left; }

	#crumbpath li canvas,#crumbpath li shape { margin: 0; }	
	#crumbpath h1, #crumbpath h2 { margin: 0!important; padding: 0 !important; }
	
	
	#verbouwings_fotos { list-style: none; }
	#verbouwings_fotos li { line-height: 0; font-size: 0; }
	#verbouwings_fotos li img { margin: 0 0 15px 0; }