/* GENERAL STYLES
---------------------------------------------------------------------------------------------- */
body {
	margin: 0;
	padding: 0;
	font: 100%/160% Arial, sans-serif;
	color: #000;
	background: #EBE6DB url("/imgs/body/bg-home.gif") fixed bottom left no-repeat;
	}

#wrap {
min-width: 785px; max-width: 1152px;
width:expression( document.body.clientWidth > 1152 ? "1152px" : "auto" );
width:expression( document.body.clientWidth < 785 ? "785px" : "auto" );
}

a:link { color: #A41906; background-color: transparent; text-decoration: underline; }
a:visited { color: #A87263; background-color: transparent; }
a:active { color: #A41906; background-color: transparent; }
a:hover { color: #82270F; background-color: transparent; text-decoration: none;}

h1 { margin: -2em 6% 0.5em; font: bold 180%/120% "Arial Narrow", "Arial", sans-serif; color: #A41906; background: transparent; }
h2 { font-size: 120%; line-height: 100%; margin: 1.2em 6% 0.6em 12%; color: #000; background: transparent; }
h3 { font-size: 105%; line-height: 135%; margin: 1em 6% 0.4em 12%; color: #000; background: transparent; }
h4 { font-size: 105%; font-weight: bold; line-height: 110%; margin: 1em 6% 0.4em 12%; }

p { margin: 0 6% 1em 12%; }
ul { padding: 0; margin: 0 6% 1em 12%; list-style-position: outside; }
ul ul { margin: 0; }
li { margin: 0.4em 0; padding: 0 0 0 18px; list-style: none outside; color: #000; background: url("/imgs/bullet.gif") transparent 4px 0.35em no-repeat; }

sup { line-height: 1px; font-size: 60%; vertical-align: top; }
img {
	border: 0;
	vertical-align: middle;
}
.break { clear: both; }

/* LAYOUT BLOCKS
---------------------------------------------------------------------------------------------- */

#container { padding: 64px 0 0; position: relative; font-size: 85%; line-height: 130%; margin: 0 2% 0 15%; width: auto !important; width: 100%; color: #000; background: url("/imgs/top.jpg") top left transparent repeat-x; }
#logo { position: absolute; top: 20px; left: -9%; margin-left: -51px; }
#navigatie { font-size: 110%; font-family: "Arial Narrow", sans-serif; position: absolute; top: 64px; width: 100%; color: #000; background: #00AFEF; }
#content { width: auto !important; width: 100%; margin: 0; padding: 2em 4px 4px; color: #000; background: #fff; }
.oversbb #content, .referenties #content { padding-top: 4em; }

/* old */
#maincontent
{
	padding: 60px 0 4em;
	float: left;
	margin: 4px 0;
	width: 75%;
	color: #000;
	background: url("/imgs/maincontent-bg.gif") #f9f9f9 left top repeat-x;
	}

/* begin franshals */ 
body.franshals #maincontent {
	width: 100%;
	}
		body.franshals #maincontent ul {
			height: 350px;
			width: 680px;
			}	
		body.franshals #maincontent ul li {
			float: left;
			width: 132px;
			background-image: none;
			}
		html>body.franshals #maincontent ul li {
			width: 114px;
			}
				body.franshals #maincontent p.pagination span, body.franshals #maincontent p.pagination a {
					padding-left: .66em;
					}
body.franshals #imageContainer p {
	font-size: smaller;
	}
/* einde franshals */ 
.voorbereiding #maincontent, .gallery #maincontent, .woningtypen #maincontent, .downloads #maincontent { padding-bottom: 16em; }
#subcontent { overflow: hidden; font-size: 90%; line-height: 120%; margin: 4px 0; width: 25%; float: right; }

#tabs { width: 100%; position: relative; margin: 0.3em 0 0; line-height: 120%; font-size: 90%; height: 3em; color: #000; background: url("/imgs/tabs/bg.gif") #5A2712; }
#footer { padding: 0.5em; font-size: 90%; line-height: 160%; clear: both; margin-right: 25%; text-align: center; }

/* === logo === */
#logo a img { visibility: hidden; }
#logo a { display: block; color: #000; background: url("/imgs/logo.gif") transparent top left no-repeat; }

/* NAVIGATION
---------------------------------------------------------------------------------------------- */
#navigatie ul { list-style: none outside; padding: 0; margin: 0; }
#navigatie li { color: #fff; background: transparent; background-image: none; list-style: none outside; float: left; padding: 0; margin: 0; }
#navigatie li a { cursor: pointer; color: #fff; background: url("/imgs/corner-left.gif") transparent top left no-repeat; float: left; text-decoration: none; }
#navigatie li a span { color: #fff; background: url("/imgs/corner-right.gif") transparent top right no-repeat; padding: 0.3em 0.6em; float: left; }
#navigatie #home a, #navigatie #personeel a span { background-image: none; }
#navigatie a:hover { color: #fff; background-color: #0096cc; }
#navigatie li.current a,
#navigatie li.current a:hover { font-weight: normal; color: #000; background-color: #fff; }
#navigatie li.current a span,
#navigatie li.current a:hover span { color: #000; background-color: transparent; }

/* secondary navigation */
#navigatie ul.secondary { padding-right: 1em; margin-top: 0.3em; float: right; }
#navigatie ul.secondary li { padding: 0 0 0 0.7em; float: left; }
#navigatie ul.secondary a,
#navigatie ul.secondary a span { background-image: none; float: left; }
#navigatie ul.secondary a:hover { color: #fff; background: transparent; float: left; }

/* submenu */
#navigatie .submenu { color: #000; background: #fff; clear: both; font-family: Arial, sans-serif; font-size: 85%; line-height: 120%; padding: 4px 0 !important; padding: 2px 0 4px; }
#navigatie .submenu ul { color: #eee; background: url("/imgs/tabs/bg.gif") #5A2712; margin: 0 4px; padding: 0.4em 1em; height: 1.2em; }
#navigatie .submenu li { width: auto; margin: 0 1em 0 0; float: left; }
#navigatie .submenu li a { color: #ddd; background-color: transparent; background-image: none; text-decoration: underline; padding: 0; }
#navigatie .submenu li a:hover { color: #fff; background-color: transparent; text-decoration: underline; }

/* === tabs bouwsoorten === */
.tab { height: 3em; position: absolute; background: url("/imgs/border.gif") transparent top left repeat-y; }
.tab:hover, .over {  background: url("/imgs/border.gif") #902903 top left repeat-y; cursor: pointer; }

#renovatie { left: 0; width: 50%; }
#woningbouw { left: 50%; width: 25%; }
#utiliteitsbouw { left: 75%; width: 25%; }

.tab h2 { padding: 0; margin: 0; color: #fff; background: url("/imgs/corner.gif") top right no-repeat; }
/*.tab p { margin: 0 8px 0 14px; }*/
/*.tab img { float: left; margin: 1px 8px 1px 1px; }*/
.tab h2 img { float: none; margin: 0; }

.tab a:link, .tab a:visited { display: block; color: #ddd; background: transparent; text-decoration: none; padding: 0.7em 12px 0.2em; height: 2.6em; margin-left: .2em;}
.tab a:hover { color: #fff; background: #902903; text-decoration: underline; }

/* === maincontent === */
#maincontent a { font-weight: bold; }
#maincontent ul ul a { font-weight: normal; }

.intro { font-weight: bold; }
.intro p, .intro h2, .intro h3, .intro h4 { margin-left: 6%; }
.more { font-size: 90%; white-space: nowrap; font-weight: bold; padding-right: 10px; }
.more img { vertical-align: middle; }
.project h1, .vacature h1, .galerie h1 { margin-top: -1em; }

/* images */
.image { padding: 4px; border: 1px solid #666; color: #000; background: #fff; }
.image img { display: block; }
.right { margin: 5px 6% 10px 10px !important; margin: 5px 3% 10px 10px; float: right; }
.left { margin: 5px 10px 10px 12% !important; margin: 5px 10px 10px 6%; float: left; }
.center { margin: 5px 6% 10px 12%; }

/* projectmenu */
#projectmenu ul { margin: 0 6% 1.2em; padding: 0 0 0.3em; border-bottom: 1px solid #888; height: 1.4em; font-size: 90%; }
#projectmenu li { color: #000; background: transparent; background-image: none; margin: 0 1em 0 0; padding: 0; list-style: none outside; float: left; }
#projectmenu a { font-weight: normal; }

/* verkoop */
.filelist li { padding-left: 24px; background-position: 2px 0.15em; background-image: url("/imgs/pdf_icon.gif"); }
.filelist em { font-size: 90%; }

/* === subcontent === */
#subcontent h2 {
	margin: 0 0 0.5em 4px;
	color: #000;
	background: url("/imgs/corner.gif") #AAB0A0 top right no-repeat;
	}

#subcontent h2 img { display: block; }
#subcontent h3 { color: #000; background: #eee; padding: 0.3em 6px; margin: 0 4px 0.5em 8px; font-size: 100%; }
#subcontent p { margin: 0 10px 0.8em 14px; padding: 0; }
#subcontent ul { margin: 0 10px 0.8em 14px; padding: 0; }

#subcontent .current { font-weight: bold; }
#subcontent .more { font-size: 100%; }

/* === title backgrounds === */
.caption { font-size: 82%; }
#maincontent .caption a { font-weight: normal; }

.title {
	position: relative;
	color: #000; /*
	background: url("/imgs/titlepics/brasacker.jpg") transparent center bottom no-repeat; */
	background: url("/imgs/titlepics/amsterdam-westerdokseiland_249.jpg") transparent center bottom no-repeat;
	margin: 0 6% 2em;
	height: 288px;
	}

.title h1 { margin: 0; position: absolute; top: -48px; left: 6%; }

.home #maincontent {
	padding: 0;
	}

.title .caption { margin: 0; color: #000; background: transparent; position: absolute; bottom: -1.7em; right: 0; margin-top: -1.7em; }

/* .wiezijnwij .title { background-image: url("/imgs/titlepics/wiezijnwij.jpg"); } */
.uitvoering .title { background-image: url("/imgs/titlepics/uitvoering.jpg"); }
.bouwen .title { background-image: url("/imgs/titlepics/uv-bouwen.jpg"); }
.herstructurering .title { background-image: url("/imgs/titlepics/uv-renovatie.jpg"); }
.stadsvernieuwing .title { background-image: url("/imgs/titlepics/uv-stadsvernieuwing.jpg"); }
.projontwikkeling .title { background-image: url("/imgs/titlepics/brasacker.jpg"); }
.kopersbegeleiding .title { background-image: url("/imgs/titlepics/showroom.jpg"); }
.werkenbij .title { background-image: url("/imgs/titlepics/werkenbijsbb.jpg"); }

/* Background img De Bouw */
.bouw .title { background-image: url("/imgs/titlepics/de-bouw.jpg"); }

.referenties .title { background-image: url("/imgs/titlepics/ref-collage.jpg"); }
.cat .title { background-image: url("/imgs/titlepics/woningbouw-nw.jpg"); }
.cat1 .title { background-image: url("/imgs/titlepics/woningbouw-nw.jpg"); }
.cat2 .title { background-image: url("/imgs/titlepics/utiliteitsbouw.jpg"); }
.cat3 .title { background-image: url("/imgs/titlepics/renovatie.jpg"); }
.cat4 .title { background-image: url("/imgs/titlepics/projectontwikkeling.jpg"); }

.verkoop .title { background-image: url("/imgs/titlepics/verkoop-titel.jpg"); }

/* === body backgrounds === */
.oversbb { background-image: url("/imgs/body/bg-oversbb.gif"); }
.referenties { background-image: url("/imgs/body/bg-referenties.gif"); }
.verkoop { background-image: url("/imgs/body/bg-verkoop.gif"); }
.contact, .sitemap { background-image: url("/imgs/body/bg-contact.gif"); background-position: top left; }
.personeel, .galerie { background-image: url("/imgs/body/bg-personeel.gif"); background-position: top left; }

.notitie {
	padding: 4px 10px;
	color: #fff;
	background: url("/imgs/notitie.gif") #444 top right repeat-y;
	margin: 0 6% 0.8em;
	}

/* TABLE STYLES Page De Bouw
---------------------------------------------------------------------------------------------- */
table { margin-left: 12%; border: 1px solid #ccc; border-left: none; }
td { border-top: 1px solid #ccc; border-left: 1px solid #ccc; padding: 3px 0 3px 10px; margin: 0; }
th { text-align: left; padding: 3px 0 3px 10px; border-left: 1px solid #ccc; }
caption { text-align: left; margin-left: 12%; margin-bottom: 7px; }


/* special banner Home */
.special-banner {
	/*background: url("/imgs/subcontent/bg-special.gif") 0px 45px repeat-x;*/
	margin-left: 4px;
	margin-bottom: 8px;
	}

#subcontent .special-banner h2 {
	margin: 0 0 0.5em 0;
	color: #000;
	background: url("/imgs/subcontent/special-corner.gif") top right no-repeat;
	}

#subcontent .special-banner p, .special-banner a {
	color: #fff;
	padding-bottom: 8px;
	}

/* FOTOGALERIE
---------------------------------------------------------------------------------------------- */

/* Sidebar Categorieen
------------------------------------- */
.galerie #subcontent { padding-bottom: 100px; background: #fff; }

.galerie #subcontent ul { margin: 0 0 0 2px; }
.galerie #subcontent li { list-style: none; text-indent: 0; border-bottom: 1px dotted #bcb7ac; padding: 5px 0 7px 6px; margin: 0 0 1px 0; background: #eee; }
.galerie #subcontent li img { vertical-align: top; margin: 0 6px 5px 0; border: 1px solid #bcb7ac; padding: 4px; background: #fff; }

.galerie #subcontent li a { text-decoration: none; }
.galerie #subcontent li.current { background: #fff; }
.galerie #subcontent li.current a { text-decoration: none; color: #333; }

.galerie #subcontent h3 { color: #000; padding: 0 6px 0.2em 0; margin: 0; font-size: 100%; line-height: 120%; background: transparent; }

.galerie .intro span.print { background: url("/img/icons/printer.gif") left top no-repeat; height: 19px; padding-top: 5px; }

.galerie #maincontent .foto { text-align: center; } 
.galerie #maincontent h1 img {display: inline; }
	
/* Grote foto's
------------------------------------- */
.foto {
	margin: 0 15px 0 6%;
	}

.foto img {
	padding: 4px;
	border: 1px solid #bcb7ac;
	background: #fff;
	}

/* GALERIE OVERZICHT: thumbs
------------------------------------- */
.gallery { margin: 0 15px 0 6%; padding: 0; text-indent: 0; }
.gallery ul { margin: 0; padding: 0; text-indent: 0; }
.gallery li { list-style: none; background: none; text-indent: 0; float: left; padding: 5px 0 0 0; margin: 0; }
.gallery li img { margin: 0; padding: 0; }

.gallery li a { display: block; float: left; margin: 0 8px 5px 0; padding: 0; width: 85px; height: 85px; text-align: center; }
.gallery li a:hover { background-color: #fff; }

/* Page navigation van thumbs
------------------------------------- */
.page-nav { margin: 0 15px 0 6%; }
.page-nav ul {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #00AFEF;
	height: 19px;
	width: 100%;
	}

.page-nav li { float: left; display: block; text-indent: 0; margin: 0; list-style: none; padding: 0; text-align: center; border-left: 1px solid #fff; background: #00AFEF; }

/* 1e nummer geen border-left */
.page-nav li.first { border-left: none; margin-left: 15px; }
.page-nav li a/*, .page-nav li a:visited */
{
	text-decoration: none;
	padding: 1px 3px 0px 3px;
	width: 14px;
	display: block;
	background: #00AFEF;
	color: #fff;
	font-weight: normal !important;
}
.page-nav li a:hover { background: #0096CC; color: #fff; }
.page-nav .current { width: 14px; padding: 1px 3px 0px 3px; background: #AAB0A0; display: block; color: #fff; font-weight: bold; }

/* next - prev buttons */
li.button { border: none; font-weight: normal; background: none; }
li.button img { vertical-align: text-top; }

.page-nav .button a {
	padding: 2px 0 0 0;
	background: transparent;
	width: auto;
	color: #00AFEF;
	font-size: 82%;
	line-height: 100%;
	display: block;
	margin: 0;
	}

.page-nav li.button a:hover { background: none; }
.page-nav li.next { margin-left: 15px; }

.page-nav li.double-next { margin-left: 10px; }
.page-nav li.prev { margin-left: 10px; }

/* remove left-margin for photo navigation */
.picture li.prev { margin-left: 0; }

/* give auto width voor 'terug naar overzicht' */
.picture li.first a { width: auto !important; }



/* OVERZICHTSPAGINA, INTRO
------------------------------------- */
.overzicht {
	margin: 0 0 0 6%;
	padding: 0;
	text-indent: 0;
	}

.overzicht li {
	background: none;
	margin: 0 10px 10px 0;
	padding: 0;
	border: 1px solid red;
	width: 158px;
	height: 200px;
	float: left;
	padding: 4px;
	border: 1px solid #ccc;
	}

.overzicht h3 {
	margin: 0 0 0.2em 0;
	line-height: 120%;
	}

.overzicht a {
	text-decoration: none;
	}

.overzicht img {

	}

/* OVERSBB - video
------------------------------------ */
body#sbb.wiezijnwij .title {
	background-image: none;
	}
body#sbb.wiezijnwij div.video {
	display: block;
	margin: -25px 0 25px 0;
	width: 100%;
	text-align: center; 
	}

body#sbb.wiezijnwij div.video span.vimeo {
	position: absolute;
	top: 0;
	left: -9999em;
	}

/* vcard
------------------------------------ */
div#maincontent {
	position: relative;
	}
div.vcard {
	position: absolute;
	top: 95px;;
	left: 0;
	font-size: 92%;
	}
span.street-address {
	display: block;
	}
span.country-name {
	position: absolute;
	top: 0;
	left: -9999em;
	}