/*------------------------------------------------------------------------------------
 * Bink Bouw Website Screen Presentation Layer
 * Author:	REYEZ!
 * Created:	10-7-2009
 * Notes:	{notities, bugs, etc.}
-------------------------------------------------------------------------------------*/

/* ################################################################################# */
/*                                                                                   */
/*                                		BODY	                                     */
/*                                                                                   */
/* ################################################################################# */


/*------------------------------------------------------------------------------------
 * 
 * Alleen gebruiken wanneer de footer van de website altijd 
 * tegen de onderkant van de browser aan moet staan of onderaan de content

html, body {
	height: 			100%;
}

html {
	font-size: 			100%;
	overflow-y:			scroll;
}

-------------------------------------------------------------------------------------*/

html, body {
	height: 			100%;
	margin:				0;
}

html {
	font-size: 			100%;
	overflow-y:			scroll;
}

body {
	background:			#022567 url(../images/background.jpg) top left repeat-x;
	color: 				#666;
	font-family:		Arial;
	font-size: 			62.5%; /* standaard font grootte is nu 10px, dus 1.2em = 12px */
	line-height: 		140%;
}

/* ################################################################################# */
/*                                                                                   */
/*                                VLAKVERDELING                                      */
/*                                                                                   */
/* ################################################################################# */

#wrapper {
	clear:				both;
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -130px auto; /* the bottom margin is the negative value of the footer's height */
	width:				914px;
}

#header {
	height:				110px;
	margin-top:			-20px;
}

#headerfoto {
	height:				185px;
}

#footer {
	margin:				0 auto;
	text-align:			left;
	width:				914px;
}

#footerclearer, #footer {
	clear:				both;
	height:				130px;
	margin:				0 auto;
	width:				914px;
}

/*------------------------------------------------------------------------------------
 * 
 * Alleen gebruiken wanneer de footer van de website altijd 
 * tegen de onderkant van de browser aan moet staan of onderaan de content

#wrapper {
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -30px auto; /* the bottom margin is the negative value of the footer's height *//*
	width:				960px;
}

#footer, #footerclearer {
	background:			#00FF00;
	height: 			30px; /* .footerclearer must be the same height as .footer *//*
	margin:				0 auto;
	width:				960px;
}

-------------------------------------------------------------------------------------*/

/* ################################################################################# */
/*                                                                                   */
/*                                   DEFAULT                                         */
/*                                                                                   */
/* ################################################################################# */

/*------------------------------------------------------------------------------------
 * 
 * Gebruik font-size alleen bij html tags en niet bij classes en id's,
 * dit mag slechts bij uitzondering.
 *
 * Deze eigenschap zal altijd blijven ondanks verdere classes
 * 		!important
 * IE 6 and below
 *     	* html {}
 * IE 7 and below
 *     	*:first-child+html {} * html {}
 * IE 7 only
 *     	*:first-child+html {}
 * IE 7 and modern browsers only
 *     	html>body {}
 * Modern browsers only (not IE 7)
 *     	html>/**body {}
 /*
 * Recent Opera versions 9 and below
 *     html:first-child {}
 *
-------------------------------------------------------------------------------------*/


h1, h2, h3, h4, h5, h6 {
	font-family: 		Arial,"Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	margin: 			0;
	padding: 			0;
	letter-spacing: 	0;
	border-bottom: 		0 !important;
}

button, input, option, select, textarea {
	font-family: 		Arial,"Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	letter-spacing: 	0;
	margin: 			0;
	padding: 			0;
}

a {
	color:				#0080DD;
	text-decoration:	underline;
}

a:active {
	color:				#0080DD;
	text-decoration:	underline;
}

a:hover {
	color:				#0080DD;
	text-decoration:	underline;
}

a:visited {
	color:				#0080DD;
	text-decoration:	underline;
}




/* Custom tags */

p, table, ul, button, input, select, textarea {
	font-size:			1.2em;
}

h1 {
	color:				#088BEE;
	font-size:			1.8em;
	font-weight:		bold;
	margin:				0.5em 0 1em 0;
}

h2 {
	color:				#0050A9;
	font-size:			1.5em;
	font-weight:		normal;
	margin:				0 0 0.5em 0;
}

p {
	line-height:		1.6em;
	margin:				0 0 1.5em 0;
}

table {
	border:				0;
	margin:				0 0 1.5em 0;
}

td {
	padding-top:		3px;
	vertical-align:		top;
}
	
button, input, select, textarea {
	border:				1px solid #999999;
	color:				#666;
	font-size:			1em;
	padding:			1px;
	width:				250px;
}

.button {
	border:				0;
	height:				25px;
	padding:			0;
	width:				150px;
}

ul li {
	list-style:			none;
	list-style-image:	none;
}


/* ################################################################################# */
/*                                                                                   */
/*                                 HEADER				                             */
/*                                                                                   */
/* ################################################################################# */

#citaat, .headerslide, #topfoto {
	float:				left;
}



#citaat {
	background:			url(../images/bg_citaat.jpg) top left no-repeat;
	height:				185px;
	width:				325px;
}

.headerslide, #topfoto {
	width:				586px;
	height:				180px;
}

.headerslide {
	position:			absolute;
}

.headeroverlay {
	position:			absolute;
	margin:				0 0 0 325px;
	z-index:			1000;
	*margin:			0 0 0 -587px;
}

img.logo {
	padding:			18px 0 0 0;
}

#citaat p {
	padding:			25px 0 0 30px;
}

p.quote {
	color:				#FFF;
	font-size:			2.2em;
	line-height:		1.3em;
	font-family:		Georgia;
}

p.wie {
	color:				#86AEDA;
	font-size:			1.2em;
	margin:				-55px 0 0 0;
	font-family:		Georgia;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 NAVIGATIE			                             */
/*                                                                                   */
/* ################################################################################# */

#navigatie {
	background:			url(../images/bg_nav.jpg) top left no-repeat;
	height:				47px;
	position:			relative;
	padding:			6px 8px 2px 40px;
	z-index:			1000;
}

#navigatie ul li {
	display:			inline;
	margin:				0 0 0 -23px;
}


/* ################################################################################# */
/*                                                                                   */
/*                                 LOGIN				                             */
/*                                                                                   */
/* ################################################################################# */

#login {
	background-color:	#088BEE;
	color:				#FFF;
	display:			none;
	height:				100px;
}

#loginopen {
	background-color:	#088BEE;
	color:				#FFF;
	height:				100px;
}

.loginbut {
	text-align:			right;
	padding:			0 0 0 0;	
}

.loginbut img {
	cursor:				pointer;
}

.loginfoto, .loginform {
	float:				left;
	padding:			0 20px 0 0;
}

.loginform {
	padding:			10px 0 0 0;
	*margin:			6px 0 0 0;
}

.loginform input {
	background:			url(../images/bg_input.jpg) top left no-repeat;
	border:				0;
	padding:			2px 18px;
	width:				180px;
}

.but_login {
	border:				0;
}

li.navitem img {
	border:				0;
}
/* ################################################################################# */
/*                                                                                   */
/*                                 CONTENT				                             */
/*                                                                                   */
/* ################################################################################# */


#content {
	background:			url(../images/bg_content_bot.jpg) left bottom no-repeat;
	min-height:			530px;
	margin:				-1px 0 0 0;
	padding-bottom:		6px;
	*min-height:		516px;
}

.box-slide, .box-contact {
	*margin:			-3px 0 0 0;
	z-index:			3;
}

.content-top {
	background:			url(../images/bg_content_top.jpg) top left no-repeat;
	height:				16px;
	margin:				0 0 -10px 0;
}

.content-bot {
	background:			url(../images/bg_content_bot.jpg) top left no-repeat;
	height:				25px;
	padding-top:		10px;
	z-index:			-2;
}


#box-left, #box-right {
	float:				left;
}

#box-left {
	padding:			0 30px 10px 30px;
	width:				533px;
	*padding:			20px 30px 0 30px;
}

#box-left img {
	border:				1px dotted #999;
	padding:			2px;
}

#box-right {
	width:				317px;
	margin:				-18px 0 0 0;
	*margin:			0 0 0 0;
}

.box-contact {
	background:			url(../images/blok_contact.jpg) top left no-repeat;
	padding-top:		20px;
	height:				195px;
	*height:			185px;
}

.box-woontotaal {
	background:			url(../images/blok_woontotaal.jpg) top left no-repeat;
	height:				131px;
}

.box-woontotaal p {
	color:				#0080DD;
	font-size:			1.1em;
	padding:			55px 30px 0 32px;
}

.box-contact p {
	color:				#0080DD;
	font-size:			1.1em;
	margin:				0 30px 8px 32px;
}

#box-slide {
	height:				185px;
}


.slideshow {
	position:			absolute;
	border-left:		1px dotted #CCC;
	height:				195px;
	width:				314px;
	*z-index:			-5;
}

#box-left input {
	background:			url(../images/bg_input_stramien.jpg) top left no-repeat;
	padding:			3px 15px 1px 15px;
	border:				0;
	height:				20px;
	width:				280px;
}

#box-left input.pc {
	background:			url(../images/bg_input_pc.jpg) top left no-repeat;
	width:				56px;
}

#box-left input.wp {
	background:			url(../images/bg_input_wp.jpg) top left no-repeat;
	width:				180px;
}

#box-left textarea {
	background:			url(../images/bg_input_groot.jpg) top left no-repeat;
	border:				0;
	height:				83px;
	padding:			3px 30px 3px 15px;
	width:				280px;
}

#box-left ul li {
	background:			url(../images/arrow.jpg) left 5px no-repeat;
	line-height:		1.6em;
	margin-left:		2px;
	padding:			0 0 0 16px;
}

#box-left img {
	margin:				0 10px 10px 0;
}

img.foto-project {
}

#box-left img.link {
	margin: 0;
	height:	40px;
	width:	55px;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 PROJECTEN			                             */
/*                                                                                   */
/* ################################################################################# */

.project {
	clear:				both;
	margin-bottom:		15px;
}

.project:hover {
	background-color:	#DDE;
	cursor:				pointer;
}

.projectfoto, .projecttext {
	float:				left;
}

.projectfoto {
	margin-right:		15px;
	width:				104px;
}

.projectfoto img {
	border:				1px solid #022567;
	padding:			2px;
}

.projecttext {
	width:				405px;
}

.projecttext p {
	line-height:		1.2em;
	margin-bottom:		7px;
}

span.lees-meer {
	font-size:			1.2em;
}

span.lees-meer a {
	text-decoration:	none;
}


/* ################################################################################# */
/*                                                                                   */
/*                                 NIEUWS				                             */
/*                                                                                   */
/* ################################################################################# */

.nieuwsbericht {
	margin-bottom:		15px;
}

.newsdate {
	color:				#111;
	font-size:			1.1em;
	font-style:			italic;
	line-height:		1.6em;
}

#box-left h2 {
	color:				#022567;
	font-size:			1.2em;
	font-weight:		bold;
	margin-bottom:		-1px;
	line-height:		1.6em;
}


/* ################################################################################# */
/*                                                                                   */
/*                                 SITEMAP				                             */
/*                                                                                   */
/* ################################################################################# */

#box-left ul.sitemap li {
	text-transform:		capitalize;
}

#box-left li.sub {
	margin-left:		18px;
}







/* ################################################################################# */
/*                                                                                   */
/*                                 FOOTER				                             */
/*                                                                                   */
/* ################################################################################# */

.footertop {
	background:			url(../images/bg_footer_top.jpg) top left no-repeat;
	color:				#549CDC;
	padding:			16px 0 0 300px;
	height:				52px;
}

.footerbot ul {
	margin:				25px 0 0 10px;
	*margin:			25px 0 0 10px;
}

.footerbot ul li {
	display:			inline;
}

.footerbot ul li a {
	color:				#FFF;
	text-decoration:	none;
}

.footerbot ul li a:hover {
	color:				#FFF;
	text-decoration:	underline;
}

p.reyez {
	float:				right;
	margin-top:			-15px;
}

p.reyez a {
	color:				#FFF;
	text-decoration:	none;
}

p.reyez a:hover {
	color:				#FFF;
	text-decoration:	underline;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 OVERIGE				                             */
/*                                                                                   */
/* ################################################################################# */

.rood {
	color:				#F00;
}

.zwart {
	color:				#000;
}

img.leesmeer {
	border:				0;
	float:				right;
	margin:				-24px 2px 0 0;
	*margin:			-7px 2px 0 0;
}

img.contactinfo {
	border:				0;
	float:				right;
	margin:				-26px 2px 0 0;
	*margin:			-22px 2px 0 0;
}

span.more, span.more a {
	color:				#09C;
	font-weight:		bold;
	text-decoration:	none;
}

table tr td h2 {
	font-size:			0.8em;
}

table tr td a {
	text-decoration:	underline;
}

input.buttonLogin {
	background:			none;
	padding:			0;
}