/*------------------------------------------------------------------------------------
 * 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:			#64c4ec url(../images/bg_groot.jpg) center top no-repeat;
	color: 				#888;
	font-family:		Arial;
	font-size: 			62.5%; /* standaard font grootte is nu 10px, dus 1.2em = 12px */
	line-height: 		140%;
}

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

#wrapper {
	background:			url(../images/beeldmerk.png) right top no-repeat;
	clear:				both;
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -70px auto; /* the bottom margin is the negative value of the footer's height */
	width:				100%;
}

#header {
	clear:				both;
	height:				140px;
}

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

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

#box-content {
	margin:				0 auto;
	width:				990px;
}

/*------------------------------------------------------------------------------------
 * 
 * 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:				#7AC142;
	text-decoration:	none;
}

a:active {
	color:				#00AEDB;
	text-decoration:	none;
}

a:hover {
	color:				#00AEDB;
	text-decoration:	none;
}



/* Custom tags */

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

h1 {
	color:				#FFF;
	font-size:			1.6em;
	line-height:		1.4em;
	font-weight:		bold;
	margin:				0 0 1em 0;
}

h2 {
	color:				#FFF;
	font-size:			1.5em;
	font-weight:		bold;
	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;
}

input {
	background:			url(../images/bg_input.png) top left no-repeat;
	border:				0;
	margin:				0 0 0 10px;
	padding:			4px 0 0 5px;
	height:				23px;
	width:				308px;
}

input.error {
	background:			url(../images/bg_input_error.png) top left no-repeat;
}


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

#logo {
	float:				left;
	padding:			12px 0 0 10px;
	width:				735px;
}

.mededelingen {
	background:			url(../images/bg_mededelingen.png) left -115px no-repeat;
	float:				left;
	padding:			15px 25px 10px 25px;
	height:				115px;
	width:				195px;
}

.mededelingen ul li {
	color:				#FFF;
	font-size:			0.9em;
}

#navigatie {
	height:				30px;
	text-align:			right;
	width:				985px;
}

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

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


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


/* ################################################################################# */
/*                                                                                   */
/*                                 CONTENT				                             */
/*                                                                                   */
/* ################################################################################# */
#box-body {
	margin:				-3px 0 0 0;
}

.top {
	background:			url(../images/bg_body_top.png) left top no-repeat;
	height:				17px;
}

#content {
	background:			url(../images/bg_body_mid.png) left top repeat-y;
	padding:			0 20px 40px 20px;
}

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

.box-left {
	width:				232px;
}

.box-right {
	width:				718px;
}

.box-homefoto {
	background:			url(../images/bg_homefoto.png) top left no-repeat;
	padding:			4px 5px 4px 3px;
	height:				403px;
}

input.send {
	background:			none;
	border:				0;
	height:				37px;
	width:				107px;
}

input.radio {
	background:			none;
	width:				20px;
}

input.kort {
	background:			url(../images/bg_input_kort.png) top left no-repeat;
	width:				100px;
}

.nieuwsitem textarea {
	background:			url(../images/bg_input_groot.png) left top no-repeat;
	border:				0;
	margin:				0 0 0 10px;
	padding:			10px 10px 10px 6px;
	height:				134px;
	width:				294px;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 LEFT					                             */
/*                                                                                   */
/* ################################################################################# */

.imagecontainer {
	height:				392px;
	overflow:			hidden;
	width:				221px;
}

.naw {
	background:			url(../images/bg_naw.png) top left no-repeat;
	height:				248px;
	margin:				0 0 20px 0;
	padding:			30px 0 0 15px;
	width:				216px;
}

.naw p {
	color:				#00AEDB;
	font-size:			1.15em;
	text-decoration:	none;
	*font-size:			1.2em;
}

.naw a, .naw a:hover {
	color:				#00AEDB;
	font-size:			1.15em;
	text-decoration:	none;
	*font-size:			1.1em;
}

.naw .titel {
	color:				#00718F;
	font-weight:		bold;
}

.naw .groen {
	display:			block;
	color:				#7AC142;
	margin:				7px 0 -20px 0;
	font-weight:		bold;
}

/* ################################################################################# */
/*                                                                                   */
/*                                 RIGHT				                             */
/*                                                                                   */
/* ################################################################################# */

.home-welkom {
	background:			url(../images/bg_home_welkom.png) 10px -4px no-repeat;
	height:				262px;
}

.maps {
	border:				1px solid #666;
	margin:				2px 0 10px 10px;
	height:				250px;
}

.welkomstwoord, .submenu {
	float:				left;
}

.welkomstwoord {
	color:				#FFF;
	height:				230px;
	margin:				3px 20px 0 15px;
	padding:			20px 20px 0 20px;
	width:				420px;
}

.submenu {
	height:				230px;
	margin:				3px 0 0 0;
	line-height:		2.3em;
	padding:			20px 0 0 7px;
	width:				213px;
}

.submenu ul {
	float:				left; 
	width:				103px;
	*padding:			2px 0 0 0;
}

.submenu ul li {
	background:			url(../images/bg_li.png) left 2px no-repeat;
	display:			block;
}

.submenu ul li.active a {
	color:				#09F;
	display:			block;
	font-weight:		bold;
	text-decoration:	none;
}

.submenu a {
	color:				#09F;
	display:			block;
	padding:			0 0 0 18px;
	text-decoration:	none;
}

.submenu a:active {
	display:			block;
	background:			url(../images/bg_mouseover.png) left 2px no-repeat;
	color:				#FFF;
}

.submenu a:hover {
	display:			block;
	background:			url(../images/bg_mouseover.png) left 2px no-repeat;
	color:				#FFF;
	text-decoration:	none;
}

.acties {
	margin:				-2px 0 0 8px;
}

.lesrooster, .actie, .lidworden {
	color:				#FFF;
	float:				left;
	text-align:			center;
	padding:			20px 112px 0 15px;
	height:				110px;
	width:				100px;
}

.lesrooster p, .actie p, .lidworden p {
	height:				42px;
}


.actie {
	background:			url(../images/bg_actie.png) top left no-repeat;
	margin:				0 13px;
}

.lesrooster {
	background:			url(../images/bg_lesrooster.png) top left no-repeat;
}

.lidworden {
	background:			url(../images/bg_lidworden.png) top left no-repeat;
}

.nieuwsitem {
	background:			url(../images/bg_nieuwsitem.png) left top no-repeat;
	padding:			30px 0 0 12px;
	width:				709px;
}

.nieuwsitem_ {
	float:				left;
	background:			url(../images/bg_nieuwsitem_new.png) left top no-repeat;
	padding:			30px 0 0 12px;
	width:				450px;
}

.nieuwsitem .datumtitel {
	height:				85px;
}

.nieuwsitem h1 {
	color:				#00718F;
}

.date {
	position:			absolute;
	float:				left;
	background:			url(../images/bg_date.png) left top no-repeat;
	text-align:			center;
	height:				85px;
	width:				54px;
}

.date2 {
	position:			absolute;
	float:				left;
	background:			url(../images/bg_date2.png) left top no-repeat;
	text-align:			center;
	padding:			5px 0 0 5px;
	height:				80px;
	width:				49px;
}

.date .nummer, .date2 .nummer {
	display:			block;
	color:				#FFF;
	font-size:			1.45em;
	font-weight:		bold;
	text-transform:		uppercase;
	margin:				9px 0 -12px 0;
	*margin:			9px 0 -12px 0;
}

.date .maand, .date2 .maand {
	display:			block;
	color:				#FFF;
	font-size:			1.45em;
	font-weight:		bold;
	text-transform:		uppercase;
}

.title {
	position:			absolute;
	color:				#00718F;
	float:				left;
	margin:				2px 0 0 60px;
	width:				350px;
}

.title h1 {
	color:				#00718F;
	margin:				0;
}

p.onderschrift {
	color:				#666;
}

.nieuwstext {
	background:			url(../images/bg_leesmeer.png) left bottom no-repeat;
	margin:				-25px 0 0 0;
	padding:			0 40px 10px 7px;
	width:				653px;
}

.nieuwsitem_ .nieuwstext {
	background:			url(../images/bg_leesmeer_new.png) left bottom no-repeat;
	margin:				0 0 0 0;
	padding:			60px 40px 10px 7px;
	width:				400px;
}

.nieuwstext p, .nieuwstext td {
	color:				#00718F;
	text-align:			left;
}

.leesmeer {
	background:			url(../images/but_lee.png) left top no-repeat;
	cursor:				pointer;
	height:				30px;
	margin-bottom:		-10px;
	width:				100px;
}

.leesmeer:hover {
	background:			url(../images/but_lee.png) left -30px no-repeat;
	cursor:				pointer;
	height:				30px;
	margin-bottom:		-10px;
	width:				100px;
}


.subinclude {
	background:			url(../images/bg_home_welkom_sub.png) right top no-repeat;
	float:				left;
	margin:				-5px 0 0 25px;
	height:				300px;
	width:				230px;
}


/* ################################################################################# */
/*                                                                                   */
/*                                 CONTACT				                             */
/*                                                                                   */
/* ################################################################################# */

span.data {
	margin:				0 8px 0 0;
}
/* ################################################################################# */
/*                                                                                   */
/*                                 FOOTER				                             */
/*                                                                                   */
/* ################################################################################# */

.footer {
	background:			url(../images/bg_body_footer.png) left bottom no-repeat;
	padding:			120px 0 0 100px;
	height:				70px;
	width:				890px;
}

.footer ul.footnav {
	float:				left;
}

.footer ul.reyez {
	float:				right;
	margin:				0 27px 0 0;
}

.footer ul li {
	display:			inline;
	margin-right:		20px;
}

.footer a, .footer a:hover {
	color:				#FFF;
	text-decoration:	none;
}
/* ################################################################################# */
/*                                                                                   */
/*                                 OVERIGE				                             */
/*                                                                                   */
/* ################################################################################# */

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

.mededelingen a:hover {
	color:				#00AEDB;
	text-decoration:	none;
}

ul.erro {
	margin-top:			-15px;
}

ul.erro li {
	line-height:		1.4em;
	color:				#069;
}

#bar{
    width:700px;
    height:295px;
    overflow:hidden;
	margin-left: -50px;
	margin-bottom: 15px;
}

#bar iframe {
    width:700px;
    height:800px;
	margin-left:50px;
    border:0 solid;
}

.social {
	position:			absolute;
	display:			block;
	margin:				-7px 0 0 20px;
	height:				30px;
	padding-top:		10px;
	text-align:			right;
}

.whiteborder {
border:4px solid #FFF;
margin: 0 5px 15px 5px;
}