body, html {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding:0;
	margin:0;
	text-align: center;
	
	background: #01080B;
}

* { margin: 0; }
a {	cursor: pointer; }
td { font-size: 11px; vertical-align: top; }
ul { margin-top: 5px; }
li { line-height: 1.3em; }
form { display: inline; }

img { 
	behavior: url('http://www.bramvanhaarst.nl/css/pngbehavior.htc');
	border: 0;
}

/* GENERAL */

div.centered {
	position: relative;
	margin: 0 auto 10px auto;
	width: 900px;
	height: 100%;
	
	text-align: left;
	background: #000000;
}

/* PORTAL */

div.portal img.architecture {
	position: absolute;
	left: 155px;
	top: 39px;
}

div.portal div.description_architecture {
	position: absolute;
	left: 155px;
	top: 115px;
	width: 283px;
	height: 110px;

	background: #0C1720;
}

div.portal img.concept {
	position: absolute;
	left: 462px;
	top: 39px;
}

div.portal div.description_concept {
	position: absolute;
	left: 462px;
	top: 115px;
	width: 283px;
	height: 110px;

	background: #0C1720;
}

div.portal img.interiors {
	position: absolute;
	left: 155px;
	top: 678px;
}

div.portal div.description_interiors {
	position: absolute;
	left: 155px;
	top: 541px;
	width: 283px;
	height: 122px;

	background: #0C1720;
}

div.portal img.utility {
	position: absolute;
	left: 462px;
	top: 678px;
}

div.portal div.description_utility {
	position: absolute;
	left: 462px;
	top: 541px;
	width: 283px;
	height: 122px;

	background: #0C1720;
}

div.portal div.flash {
	position: absolute;
	left: 155px;
	top: 225px;
	width: 283px;
	height: 110px;
}

div.portal span.text {
	display: block;
	color: #FFFFFF;
	line-height: 16px;

	padding: 5px 10px 5px 10px;
}

div.portal span.text a {
	color: #FFFFFF;
	text-decoration: underline;
}

div.portal #contact_info {
	position: absolute;
	right: 5px;
	top: 700px;

	text-align: right;
	font-size: 9px;
	color: #2E3C47;
	line-height: 18px;	
	
	border-top: 1px solid #2E3C47;
}

/* SITE */

div.header {
	position: relative;
	width: 900px;
	height: 380px;
}

#gallery {
	position: absolute;
	width: 900px;
	height: 380px;
}

div.pictures {
	background: none;
}

div.header_border {
	behavior: url('http://www.bramvanhaarst.nl/css/pngbehavior.htc');
	position: absolute;
	width: 641px;
	height: 324px;
	
	bottom: 12px;
	right: 12px;
}

div.architectuur div.header_border { background: url(../images/border_architecture.png); }
div.concept div.header_border { background: url(../images/border_concept.png); }
div.interieurs div.header_border { background: url(../images/border_interiors.png); }
div.utiliteit div.header_border { background: url(../images/border_utility.png); }

#picture {
	position: absolute;
	right: 0px;
	top: 0px;
}

div.logo_container {
	position: relative;
	
	width: 235px;
	height: 80px;
	
	background: white;
}

div.logo_container div.bar {
	width: 15px;
	height: 80px;
}

div.architectuur div.top div.bar, div.architectuur div.top div.home { background: #A9800A; }
div.concept div.top div.bar, div.concept div.top div.home { background: #EBEBED; }
div.interieurs div.top div.bar, div.interieurs div.top div.home { background: #EA393E; }
div.utiliteit div.top div.bar, div.utiliteit div.top div.home { background: #0870B2; }

div.logo_container div.logo {
	behavior: url('http://www.bramvanhaarst.nl/css/pngbehavior.htc');
	position: absolute;
	left: 20px;
	top: 13px;
	width: 212px;
	height: 46px;
}

div.architectuur div.logo_container div.logo { background: url(../images/logo_architecture.png); }
div.concept div.logo_container div.logo { background: url(../images/logo_concept_zw.png); }
div.interieurs div.logo_container div.logo { background: url(../images/logo_interiors.png); }
div.utiliteit div.logo_container div.logo { background: url(../images/logo_utility.png); }

div.logo_container div.section {
	behavior: url('http://www.bramvanhaarst.nl/css/pngbehavior.htc');
	position: absolute;
	bottom: 10px;
	right: 30px;
	
	width: 84px;
	height: 6px;
}

div.architectuur div.logo_container div.section { background: url(../images/logo_architecture_text.png); }
div.concept div.logo_container div.section { background: url(../images/logo_concept_text.png); }
div.interieurs div.logo_container div.section { background: url(../images/logo_interiors_text.png); }
div.utiliteit div.logo_container div.section { background: url(../images/logo_utility_text.png); }

div.top div.home {
	position: relative;
	float: right;
	width: 55px;
	height: 20px;
	text-align: center;
}

div.top div.home a {
	display: block;
	padding: 4px 0px 4px 0px;
	
	color: white;
	text-decoration: none;
	text-transform: uppercase;
}

div.concept div.top div.home a { color: #3A3A3A; }

div.submenu {
	height: 300px;
	background: #09131A;
}

div.submenu ul {
	margin: 0px;
	padding: 0px;
}

div.submenu li {
	display: block;
	height: 40px;
	width: 233px;
	padding: 0px;
	margin: 0px;
	background: url(../images/submenu.png) repeat-x;
	
	text-align: right;
}

div.submenu li a {
	display: block;
	padding: 20px 20px 0px 0px;
	
	text-decoration: none;
	text-transform: uppercase;
	color: #A3B0BC;
}

div.submenu li a.selected {
	color: white;
}

div.submenu div.nav {
	position: absolute;
	
	bottom: 5px;
	right: 676px;
}

div.nav .prev {	margin-right: 10px; }
div.nav .next {	margin-left: 10px; }

div.menu_border {
	height: 32px;
	padding: 2px;
}

div.menu {
	height: 32px;
	background: url(../images/menu.png) repeat-x;
}

div.menu ul {
	height: 22px;

	margin: 0px;
	padding: 7px 0px 0px 38px;
	
	// display: inline-block;
}

div.menu li {
	display: table-cell;
	
	margin: 0px;
	padding: 0px;	

	font-size: 12px;

	// display: inline;	
}

div.menu a {
	padding-right: 50px;
	color: #7E8F9F;
	text-decoration: none;
	
	// padding-right: 47px;
}

div.menu a.last {
	padding-right: 0px;
}

div.menu li.selected a, div.menu a:hover {
	color: white;
}

div.content {
	background: #01080B;
	border-left: 2px solid #000000;
	border-right: 2px solid #000000;
	min-height: 225px;
}

div.spacer div.content {
	background: none;
	border: 0;
	min-height: 0;
}

div.content h1, div.content h2 {
	font-size: 10px;
	font-weight: bold;
}

div.content p {
	margin-bottom: 12px;
}

div.content ul {
	margin: 0px 0px 12px 13px;
	padding: 0px;
}

div.content li {
	padding: 0px;
	margin: 0px;
}

div.content a {
	color: white;
	text-decoration: underline;
}

div.form {
	margin-top: 10px;
}

div.form span.label {
	display: block;
	padding: 5px 0px 2px 0px;
}

div.form span.error {
	color: #C60005;
}

div.form input, div.form textarea {
	width: 300px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;	
	border: 1px solid #101E29;
	background: #FFFFFF;
	color: black;
}

div.form select {
	width: 300px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;	
	border: 0px solid #101E29;
	background: #FFFFFF;
	color: black;
}

div.form textarea {
	overflow: auto;
	height: 90px;
}

div.form input.submit {
	width: 65px;
	margin-top: 10px;
	color: black;
}

div.content span.news_item a {
	display: block;
	color: white;
	text-decoration: none;
}

div.content span.news_item a:hover {
	text-decoration: underline;
}

div.content span.pdf a {
	display: block;
	width: 90px;
	padding-top: 10px;
	color: white;
	text-decoration: none;
}

div.content span.pdf a:hover { text-decoration: underline; }

div.content span.back a {
	display: block;
	width: 40px;
	padding-top: 10px;
	color: white;
}

div.content td.news {
	padding-top: 20px;
}

div.content td.news img.news {
	margin-left: 40px;
}

div.content div.news_border {
	background: #000000;
	padding: 2px;
	padding-left: 0px;
}

div.content div.news {
	width: 274px;
	min-height: 250px;
	padding-left: 40px;
	background: url(../images/news_bg.png) repeat-y;
}

div.content div.news td.date {
	width: 75px;
	padding-top: 10px;
	vertical-align: top;

	color: #B2B2B2;
	font-size: 10px;
}

div.content div.news td.title {
	padding-top: 10px;
	padding-right: 10px;
	vertical-align: top;
	
	color: #B2B2B2;
	font-size: 10px;
}

div.content div.news td.title a {
	color: #B2B2B2;
	text-decoration: none;
}

div.content div.news td.title a:hover {
	text-decoration: underline;
}


div.content div.news td.seperator {
	height: 12px;
	background: url(../images/news_seperator.png) no-repeat;
	behavior: url('http://www.bramvanhaarst.nl/css/pngbehavior.htc');
}

div.content div.banner {
	padding: 20px 0px 20px 0px;
	width: 314px;
	font-size: 10px;
}

div.content div.banner a {
	color: #B2B2B2;
	text-decoration: none;
}

div.content td.text {
	padding: 48px 40px 20px 40px;
	font-size: 10px;
	color: white;
}

div.content td.description {
	width: 222px;
	color: #FFFFFF;
	text-align: right;
	font-size: 9px;
	padding: 20px 10px 0px 0px;
}

td.description div.spacer {
	position: relative;
	min-height: 200px;
}

td.description div.spacer div.nav {
	position: absolute;
	
	right: 0px;
	top: 180px;
}

div.content td.thumbs {
	padding: 20px 0px 0px 0px;
}

div.thumbs {
	position: relative;
	width: 660px;
	height: 200px;
}

div.thumbs img {
	position: absolute;
}

#thumbs_1, #thumbs_2, #thumbs_3, #thumbs_4 { top: 0px; }
#thumbs_5, #thumbs_6, #thumbs_7, #thumbs_8 { top: 100px; }
#thumbs_1, #thumbs_5 { left: 0px; }
#thumbs_2, #thumbs_6 { left: 165px; }
#thumbs_3, #thumbs_7 { left: 330px; }
#thumbs_4, #thumbs_8 { left: 495px; }

div.footer {
	border-left: 2px solid #000000;
	border-right: 2px solid #000000;
}

div.footer td.projects img.projects {
	margin-left: 40px;
}

div.footer td.projects {
	padding-top: 20px;
}

div.footer div.projects {
	width: 274px;
	min-height: 74px;
	padding-left: 40px;
	background: url(../images/projects_bg.png) no-repeat;
}

div.footer div.projects td.title {
	padding-top: 10px;
	padding-right: 10px;
	vertical-align: top;
	
	color: #B2B2B2;
	font-size: 10px;
}

div.footer div.projects td.title a {
	color: #B2B2B2;
	text-decoration: none;
}

div.footer div.projects td.title a:hover {
	text-decoration: underline;
}


div.footer td.address {
	width: 568px;
	text-align: right;
	padding-top: 20px;
}

div.footer td.address img.portal {
	margin-bottom: 15px;
}

div.footer td.address img.seperator {
	margin-bottom: 9px;
}

div.footer div.address {
	text-align: right;
	font-size: 9px;
	color: #2E3C47;
	line-height: 18px;
}

div.footer div.powered {
	text-align: left;
	font-size: 9px;
	padding: 71px 0px 0px 40px;
}

div.footer div.powered a {
	color: #2E3C47;
	text-decoration: none;
}

/* BROCHURE BANNER */

#brochure_banner {
	margin: 27px 0px 0px 40px;
}