/*------------------------------------------------------------------------------------
 * 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:				#FFF;
	color: 					#737373;
	font-family:			Verdana;
	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;
}
#outer {
	position: 				absolute;
	top: 					50%;
	left: 					0px;
	width: 					100%;
	height: 				1px;
	overflow:			 	visible;
}

#inner {
	background: 			#FFF;
	width: 					986px;
	height: 				571px;
	margin-left: 			-492px;
	position: 				absolute;
	top: 					-286px;
	left: 					50%;
	overflow:				hidden;
}

/*------------------------------------------------------------------------------------
 * 
 * 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: 			Verdana, Helvetica, sans-serif;
	margin: 				0;
	padding: 				0;
	letter-spacing: 		0;
	border-bottom: 			0 !important;
}

button, input, option, select, textarea {
	font-family: 			Verdana, Helvetica, sans-serif;
	letter-spacing: 		0;
	margin: 				0;
	padding: 				0;
}

a {
	color:					#EA6329;
	text-decoration:		none;
}

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

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

a:visited {
	color:					#EA6329;
	text-decoration:		none;
}




/* Custom tags */

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

h1 {
	color:					#FFF;
	font-size:				1.8em;
	line-height:			1.1em;
	margin:					0.5em 0 1em 0;
}

h2 {
	color:					#737373;
	font-size:				1.2em;
	font-weight:			bold;
	margin:					0 0 0.5em 0;
}

p {
	line-height:			1.4em;
	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 #D9DADB;
	color:					#959595;
	background:				none;
	font-size:				1em;
	padding:				3px;
	width:					200px;
}

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

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

img {
	border:					0;
	padding:				0;
	margin:					0;
}


/*----  PAGINA-INDELING  ----*/

.menu, .content {	
	float:					left;
	height:					550px;
}

.menu  {
	width:					185px;
}

.content {
	width:					800px;
}

/*----  HEADER  ----*/

.header {
	position:				absolute;
	height:					65px;
	padding:	 			33px 15px 0 0;
	margin:					0 0 0 260px;
	text-align:				right;
	width:					535px;
}

#homepage .header {
	height:					65px;
	padding:	 			33px 15px 0 0;
	margin:					-100px 0 0 260px;
	text-align:				right;
	width:					535px;
}

.legediv {
	background-color:		#396;
	padding:0;
	margin:0;
	height:					1px;
}

.header ul {
	float:					right;
	margin:					2px 9px 0 0;
}

.header ul li {
	display:				inline;
	margin:					0 15px 0 0;
}

.header ul li a {
	margin:					0 -8px 0 0;
}

img.icons {
	float:					right;
	margin:					0 10px 0 0;
}

.header a,.header a img {
	color:					#999;
	border:					0;
}

.header a:hover {
	color:					#E85810;
}


/*----  NAVIGATIE  ----*/

.navigatiebar {
	background:				url(../images/sprite_repeaty.png) 0 0 repeat-y;
	border-left:			1px solid #D9DADB;
	border-right:			1px solid #D9DADB;
	border-bottom:			1px solid #D9DADB;
	margin-left:			12px;
	height:					570px;
	width:					172px;
}

.logo {
	margin:					0;
}

ul.nav {
	margin:					-2px 0 0 0;
	padding:				0;
}

ul.nav li a {
	border-bottom:			1px solid #D9DADB;
	border-right:			1px solid #D9DADB;
	color:					#C1C7CA;
	display:				block;
	font-weight:			bold;
	padding:				22px 0 22px 25px;
}

ul.nav li.home a {
	background:				url(../images/sprite_menu.png) 0 0 no-repeat;
}

ul.nav li.home a:hover {
	background:				url(../images/sprite_menu.png) -345px 0 no-repeat;
	text-decoration:		none;
}

ul.nav li.home a.current {
	background:				url(../images/sprite_menu.png) -173px 0 no-repeat;
	text-decoration:		none;
}

ul.nav li.tentoonstellingen a {
	background:				url(../images/sprite_menu.png) 0 -55px no-repeat;
}

ul.nav li.tentoonstellingen a:hover {
	background:				url(../images/sprite_menu.png) -345px -55px no-repeat;
	text-decoration:		none;
}

ul.nav li.tentoonstellingen a.current {
	background:				url(../images/sprite_menu.png) -173px -55px no-repeat;
	text-decoration:		none;
}

ul.nav li.ontwerpateliers a {
	background:				url(../images/sprite_menu.png) 0 -110px no-repeat;
}

ul.nav li.ontwerpateliers a:hover {
	background:				url(../images/sprite_menu.png) -345px -110px no-repeat;
	text-decoration:		none;
}

ul.nav li.ontwerpateliers a.current {
	background:				url(../images/sprite_menu.png) -173px -110px no-repeat;
	text-decoration:		none;
}

ul.nav li.egwijk_aan_zee a {
	background:				url(../images/sprite_menu.png) 0 -165px no-repeat;
}

ul.nav li.egwijk_aan_zee a:hover {
	background:				url(../images/sprite_menu.png) -345px -165px no-repeat;
	text-decoration:		none;
}

ul.nav li.egwijk_aan_zee a.current {
	background:				url(../images/sprite_menu.png) -173px -165px no-repeat;
	text-decoration:		none;
}

ul.nav li.verlangen_naar_zee a {
	background:				url(../images/sprite_menu.png) 0 -220px no-repeat;
}

ul.nav li.verlangen_naar_zee a:hover {
	background:				url(../images/sprite_menu.png) -345px -220px no-repeat;
	text-decoration:		none;
}

ul.nav li.verlangen_naar_zee a.current {
	background:				url(../images/sprite_menu.png) -173px -220px no-repeat;
	text-decoration:		none;
}

ul.nav li.programma a {
	background:				url(../images/sprite_menu.png) 0 -275px no-repeat;
}

ul.nav li.programma a:hover {
	background:				url(../images/sprite_menu.png) -345px -275px no-repeat;
	text-decoration:		none;
}

ul.nav li.programma a.current {
	background:				url(../images/sprite_menu.png) -173px -275px no-repeat;
	text-decoration:		none;
}

ul.nav li.weblog a {
	background:				url(../images/sprite_menu.png) 0 -330px no-repeat;
}

ul.nav li.weblog a:hover {
	background:				url(../images/sprite_menu.png) -345px -330px no-repeat;
	text-decoration:		none;
}

ul.nav li.weblog a.current {
	background:				url(../images/sprite_menu.png) -173px -330px no-repeat;
	text-decoration:		none;
}

ul.nav li.last a {
}


/*----  HOMEPAGE  ----*/

div.home, div.tentoonstellingen {
	height:					452px;
	width:					535px;
}

div.home {
	border-right:			1px solid #D9DADB;
}

div.tentoonstellingen {
	float:					left;
	border-bottom:			1px solid #D9DADB;
}

div.reactie {
	float:					left;
	border-bottom:			1px solid #D9DADB;
	height:					452px;
	width:					800px;
}

div.contact {
	float:					left;
	height:					452px;
	width:					535px;
	border-bottom:			1px solid #D9DADB;
	border-right:			1px solid #D9DADB;
}

div.archief {
	margin-top:				98px;
	float:					left;
	border-bottom:			1px solid #D9DADB;
	height:					452px;
	width:					800px;
}

div.reactform {
	margin:					20px 0 0 30px;
}

.ecardblok div.home {
	border-right:			1px solid #D9DADB;
	height:					550px;
	width:					535px;
}

.content-left, .content-right,
.homeblok, .ecardblok, .content-foto {
	float:					left;
}

.content-home, .homeblok {
	float:					left;
	width:					3000px;
}

#homepage {
	margin-top:				98px;
}

.content-tentoonstellingen {
}


.content-left p {
	text-align:				justify;
	padding:				15px 30px 0 30px;
	margin:					0;
}


.contentheader {
	border-bottom:			1px solid #D9DADB;
	height:					60px;
	padding:				0 0 0 20px;
}

.contentheader h1 {
	background:				url(../images/bg_h1.jpg) right 17px no-repeat;
	float:					left;
	font-family: 			Arial, sans-serif;
	color:					#737A7E;
	display:				block;
	font-weight:			bold;
	height:					24px;
	text-transform:			uppercase;
	margin:					0;
	font-size:				1.9em;
	padding:				6px 10px 0 0;
}

.contentheader span {
	font-family: 			Century Gothic, Arial,  sans-serif;
	font-size:				1.3em;
	display:				block;
	height:					30px;
}

.content-right {
	width:					260px;
}

.content-foto {
	width:					800px;
	border-bottom:			1px solid #D9DADB;
}

.agenda .contentheader {
	border-bottom:			1px solid #D9DADB;
	height:					60px;
	padding:				0 0 0 18px;
}

.agendapunten {
	height:					391px;
	border-bottom:			1px solid #D9DADB;
}

.agendapunt {
	text-align:				left;
	border-bottom:			1px solid #D9DADB;
	padding:				14px 0 0 18px;
	min-height:				83px;
}

.agendapunt h2 {
	margin:					0 0 4px 0;
	padding:				0;
}

.agendapunt p {
	margin:					0;
	padding:				0;
}

span.datum {
	background:				url(../images/sprite.png) -10px -69px no-repeat;
	font-weight:			normal;
	padding:				3px 0 3px 10px;
	width:					90px;
}

.ecard {
	border-bottom:			1px solid #D9DADB;
}

img.ecard_lijn {
	margin-bottom:			-3px;
}

.card {
	height:					542px;
	border-bottom:			1px solid #D9DADB;
	border-left:			1px solid #D9DADB;
	padding:				8px 0 0 20px;
	overflow:				hidden;
	width:					248px;
}

.card table {
	font-size:				1.1em;
}

.card ul li {
	font-size:				0.9em;
}


.card table h3 {
	color:					#EA6329;
	font-size:				1.1em;
}


input.sendreactie {
	background:				url(../images/but_verstuurreactie.jpg) left top no-repeat;
	border:					none;
	height:					15px;
	margin:					0 0 0 1px;
	width:					206px;
}

input.sendreactie:hover {
	background:				url(../images/but_verstuurreactie.jpg) left top no-repeat;
	background-position:	0 -21px;
}

input.sendecard {
	background:				url(../images/but_verstuur.jpg) left top no-repeat;
	border:					none;
	height:					15px;
	margin:					0 0 0 1px;
	width:					206px;
}

input.sendecard:hover {
	background:				url(../images/but_verstuur.jpg) left top no-repeat;
	background-position:	0 -21px;
}

.blok_kunstenaar, .blok_programma {
	float:					left;
	border-left:			1px solid #D9DADB;
	height:					452px;
}

.blok_kunstenaar {
	min-width:				220px;
}

.reactieform {
	border-bottom:			1px solid #D9DADB;
}

.reactie_tweeblok {
	float:					left;
	height:					392px;
	width:					220px;
}

.blok_reactie, .blok_reactie_top {
	float:					left;
	border-right:			1px solid #D9DADB;
	height:					196px;
	width:					220px;
}

.blok_reactie_top {
	border-bottom:			1px solid #D9DADB;
}

.blok_programma, .homepage {
	border-bottom:			1px solid #D9DADB;
}

.homepage, .blok_ecard {
	float:					left;
	height:					452px;
	width:					800px;
}

.homepage{
	background:				#F00;
}

.blok_ecard {
	background:				#FC3;
}

.holder .homeblok {
	margin-top:				0px;
}

.tekst_kunstenaar, .foto_kunstenaar {
	text-align:				left;
	border-bottom:			1px solid #D9DADB;
	float:					left;
	height:					391px;
}

.tekstbut a {
	background:url(../images/dot_licht.jpg) left center no-repeat;
	display:		block;
	font-size: 1.2em;
	height:18px;
	text-transform: lowercase;
	padding: 0 0 0 15px;
	margin:		0 0 0 30px;
}

.slidebox {
	background-color: #003;
	width: 1600px;
	overflow: scroll;
	height:		550px;
}

.homebox, .ecardbox {
	float:					left;
	color:					#FFF;
	width:					800px;
	height:		550px;
}

.homebox span {
	background-color:		#C93;
}

.ecardbox span {
	background-color:		#66F;
}

span.eerste {
	display:			block;
	margin:				9px 0 0 0;
}

.tekst_kunstenaar {
	width:					260px;
}

.tekst_kunstenaar p {
	padding:				15px 25px 0px 20px;
	margin:					0;
}

.box_kaartje {
	border-right:			1px solid #D9DADB;
	float:					left;
	height:					391px;
	width:					196px;
}

img.kunstfoto {
	margin-left:			12px;
}


.box_kaartje a img {
	border:					0;
}

.programmaitem {
	border-right:			1px solid #D9DADB;
	border-bottom:			1px solid #D9DADB;
	float:					left;
	height:					195px;
	width:					480px;
}

.tekstfoto {
	text-align:				justify;
	height:					137px;
	margin:					10px;
}

.tekstfoto p {
	font-size:				1.1em;
}

.tekstfoto h2 {
	color:					#737A7E;
	height:					24px;
	font-weight:			600;
	margin:					0 0 -10px 0;
	padding:				0 10px 0 0;
}

/*.subtitel {
	margin:					-10px 0 7px 0;
	width:					450px;
}*/


.progfoto {
	float:					left;
	border:					1px solid #D9DADB;
	margin:					0 12px 0 0;
}

.extrainfo {
	margin-left:			12px;
}

.tweeblok {
	float:					left;
	width:					481px;
}

.fotoright {
	margin:					4px 0 0 43px;
}

.box_kaartje img {
}

.floatleft {
	display:				block;
	float:					left;
}

.oranjedot {
	background:				url(../images/dot_oranje.jpg) left 4px no-repeat;
	margin:					0 0 0 20px;
	padding:				0 0 0 12px;
}

.grijsdot {
	background:				url(../images/dot_grijs.jpg) left 4px no-repeat;
	margin:					0 0 0 20px;
	padding:				0 0 0 12px;
}

.dotoranje {
	margin-left:			4px;
}


/*---- WEBLOG ----*/

.blok_weblog {
	border-bottom:			1px solid #D9DADB;
	height:					452px;
}

.webitems {
	padding:				0 0 0 20px;
	float:					left;
	display:				block;
	height:					300px;
	width:					500px;
}

.weblogitem {
	border-bottom:			1px solid #D9DADB;
	border-right:			1px solid #D9DADB;
	float:					left;
	padding:				20px 0 0 0;
	height:					110px;
	width:					520px;
}

.weblogitem p {
	font-size:				1.1em;
}

.webtekst_kort, .weblogfoto {
	float:					left;
}

.weblogfoto {
	padding:				0 0 0 18px;
	width:					107px;
}

.weblogfoto img {
	height:					94px;
	width:					94px;
}

span.sub {
	color:					#888;
	display:				block;
	margin:					-3px 0 3px 0;
}

.webloglang {
	text-align:				left;
}

.leesmeer {
	display:				block;
	color:					#EA6329;
	margin:					-13px 0 0 0; 
	text-decoration:		none;
}

.leesmeer:hover, .leesmeer a:hover {
	text-decoration:		underline;
}

span.devider {
	background:				url(../images/devider.jpg) left top no-repeat;
	display:				inline-block;
	height:					4px;
	margin:					0 4px;
	width:					4px;
}

.noborder {
	border-bottom:			none;
}

.webtekst_lang {
	text-align:				justify;
	height:					361px;
	padding:				15px 20px;
}

.webtekst_lang .weblogfoto {
	height:					350px;
	margin-left:			-15px;
}

.more {
	position:				absolute;
	font-size:				1.1em;
	margin:					-32px 0 0 380px;
	width:					150px;
}

.more a {
	color:					#CCC;
	display:				block;
}

.more a:hover {
	color:					#777;
}

.content-left a:hover {
	text-decoration:		underline;
}

.includeform {
	padding:				15px 25px 0px 20px;
}

.blok_reactie p, .blok_reactie_top p {
	width:					200px;
	padding-top:			0;
}

.blok_reactie h2, .blok_reactie_top h2 {
	padding:				15px 0 0 25px;
}

.reactie_tweeblok .tekst_kunstenaar p {
	width:					170px;
}

textarea.textreact {
	height:					110px;
	overflow:				hidden;
}

/*---- ARCHIEF ----*/

.archief table td ul li {
	background:				url(../images/bg_h2.jpg) left 7px no-repeat;
	padding:				0 0 0 10px;
	font-size:				0.9em;
	line-height:			1.4em;
}

.archief table td ul li li {
	background:				url(../images/bg_ulli.jpg) -3px 4px no-repeat;
	font-size:				0.8em;
	padding:				0 0 0 20px;
	margin:					0 0 0 -10px;
}

.getback {
	position:				absolute;
	margin:					106px 0 0 -557px;
	*margin:				110px 0 0 -557px;
}

.getback_re {
	position:				absolute;
	margin:					553px 0 0 0;
}


/*---- OVERLAY ----*/

.overlay {
	position:				absolute;
	z-index:				15000;
}

.inhome {
	margin:					-100px 0 0 -1px;
}

.intent {
	margin:					-570px 0 0 -1px;
}

.incard {
	margin:					0px 0 0 -1px;
}


.inprog {
	margin:					0px 0 0 183px;
}









/*---- TOOLTIP ----*/

.trigger {
	background-color:	#D9DADB;
	border:				#C9CBCC;
	cursor:pointer;
	position: absolute;
	height:15px;
	width:15px;
}

.trigger:hover,.trigger_act  {
	background-color:	#EA6329;
	border:				#D4AC94;
}

.tooltips {
	height:		145px;
	border-bottom: 1px solid #D9DADB;
	margin:		 0 0 15px -20px;
}

.tooltips h3 {
	margin:		0 0 0 15px;
}

.card h3 {
	color:			#F60;
	font-size:		1.2em;
}

.bubbleInfo1 {
	position: relative;
	top: 8px;
	left: 26px;
	width: 25px;
}

.bubbleInfo2 {
	position: relative;
	top: 8px;
	left: 56px;
	width: 25px;
}

.bubbleInfo3 {
	position: relative;
	top: 8px;
	left: 86px;
	width: 25px;
}

.bubbleInfo4 {
	position: relative;
	top: 8px;
	left: 116px;
	width: 25px;
}

.bubbleInfo5 {
	position: relative;
	top: 8px;
	left: 146px;
	width: 25px;
}

.popup {
	position: absolute;
	display: none;
	z-index: 12000;
}

.popup_mid {
	background:url(../images/mid_tooltip.png) left top repeat-y;
	border-left:#CACACA;
	padding:0 0 0 5px;
	border-right:#FF0000;
}

.popup_top {
	height:10px;
}

.popup_bot {
	margin-top:-2px;
}

.webtekst_kort p {
	text-align:				left;
	width:					380px;
}

/*----  OVERIG  ----*/

.bold {
	font-weight:		bold;
}

.oranje {
	color:				#EA6329;
}

.pointer {
	cursor:				pointer;
}

.scrollblok {
	position:			relative;
	height:				391px;
	overflow-y:			scroll;
	
	scrollbar-base-color: #F60;
	scrollbar-arrow-color: #FFF;
	scrollbar-track-color: #FFF;
	
	scrollbar-shadow-color: #FFF;
	scrollbar-lightshadow-color: #FFF;
	scrollbar-darkshadow-color: #FFF;
	
	scrollbar-highlight-color: #FFF;
	scrollbar-3dlight-color: #FFF;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

.getback {
	position:				absolute;
	margin:					136px 0 0 -557px;
}

.oranjedot {
	background:				url(../images/dot_oranje.jpg) left 6px no-repeat;
	margin:					0 0 0 20px;
	padding:				0 0 0 12px;
}

.grijsdot {
	background:				url(../images/dot_grijs.jpg) left 6px no-repeat;
	margin:					0 0 0 20px;
	padding:				0 0 0 12px;
}


}