/* 
Project:		Watertoren Dongen
Version:		v 0.1.0
Author: 		Joep van Leijsen
Start date: 	15-04-2006
End date:		17-06-2006

Development:	LocalToGlobal (LocalToGlobal.nl)
Webdesign:		Maat48 (maat48.nl)
*/



/* SELECTORS 
--------------------------------------- */
body
{
	overflow:					hidden;
	
	min-width: 					1004px;
	
	color:						#000;
	font-size:					8pt;
	line-height: 				14pt;
	font-family:				Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	
	background-color:			#000;
}


body, div, form, img, table, h3
{
	margin: 					0px;
	padding: 					0px;
}


table
{
	color:						#000;
	font-size:					8pt;
	line-height: 				14pt;
	font-family:				Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}


a:link, a:visited
{
	color:						#000;
	text-decoration:			underline;
}


a:hover, a:active
{
	color:						#000;
}


div #submenu a:link, div #submenu a:visited
{
	height:						20px;
	
	text-align:					center;
	text-transform:				capitalize;
	
	color:						#000;
	text-decoration:			none;
}


div #submenu a:hover, div #submenu a:active
{
	color:						#fff;
	text-decoration:			none;
	
	background-color:			#f84c10;
}

#submenu div.subpage
{
	height:						20px;
	
	margin:						0px;
	
	color:						#000;
	text-align:					center;
	text-transform:				capitalize;
	
	float:						left;
}

#submenu div.selectedPage
{
	height:						20px;
	
	margin:						0px;
	
	color:						#fff;
	text-align:					center;
	text-transform:				capitalize;
	
	float:						left;
	background-color:			#f84c10;
}

#submenu div.subpage:hover, #submenu div.subpage:active
{
	color:						#fff;
	background-color:			#f84c10;
	
	cursor:						pointer;
}


#menugeschiedenis, #geschiedenis
{
	width:						80px;
}

#menuarchitect, #architect
{
	width:						70px;
}

#menufeiten, #feiten
{
	width:						60px;
}

#menuwerking, #werking
{
	width:						70px;
}

#menuherbestemming, #herbestemming
{
	width:						100px;
}






img 
{
	vertical-align:				top;
	border:						0px;
}


input 
{
	font-family:				Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size:					8pt;
	width:						150px;
	height:						15px;
	//height:					18px; /* IE hack */
	border:						1px solid #999;
	padding:					1px 2px 1px 2px;
	
	background-color:			#fbfaf6;
}


input.submit
{
	font-size:					8pt;
	height:						19px;
	width:						100px;
	padding:					0px;
	
	background-color:			#fbfaf6;
}


textarea 
{
	font-family:				Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size:					8pt;
	width:						240px;
	height:						92px;
	border:						1px solid #999;
	padding:					1px 2px 1px 2px;
	
	background-color:			#fbfaf6;
}


input:hover, textarea:hover
{
	border:						1px solid #333;
}


input:focus, textarea:focus
{
	border:						1px solid #beb532;
}

h3
{
	color:						#650d0c;
	font-size:					11pt;
	
	margin-top:					15px;
	margin-bottom:				5px;
}

div.verbouwing h3
{
	color:						#0089d1;
	
	margin-bottom:				0px;
}

div.nieuws h3
{
	color:						#970e5c;
	
	margin-bottom:				0px;
}

h4
{
	font-size:					10pt;
}


/* CONTAINERS 
----------------------------------------*/
#website
{
	position:					absolute;
	top:						50%;
	left: 						0px;
	height:						600px;
	width: 						100%;
	margin: 					-300px 0px 0px 0px;
	
	background-color:			#fbfaf6;
	background-image:			url(../img/bg.jpg);
	background-position:		top left;
	background-repeat:			no-repeat;
}


#container
{
	position:					relative;
	top:						0px;
	left: 						0px;
	width: 						100%;
}


/* DIV 
--------------------------------------- */
#header
{
	position:					relative;
	top:						0px;
	left:						0px;
	height:						220px;
	width:						100%;
	
	background-position:		top right;
	background-repeat:			no-repeat;
	
	z-index:					10;
}

#titelbalk
{
	position:					relative;
	top:						202px;
	left:						0px;
	height:						18px;
	width:						100%;
}


#titel
{
	position:					absolute;
	top:						-18px;
	left:						270px;
	height:						36px;
	width:						213px;

	background-position:		top left;
	background-repeat:			no-repeat;
	
	z-index:					10;
}


#url
{
	position:					absolute;
	top:						2px;
	right:						100px;
	height:						11px;
	width:						242px;
	
	background-position:		top right;
	background-repeat:			no-repeat;
	
	z-index:					0;
}



#toren
{
	position:					relative;
	top:						0px; /*-194px;*/
	left:						16px;
	height:						573px; /*573px;*/
	width:						210px;

	float:						left;
	
	margin-top:					-194px;
	
	background-image:			url(../img/bgToren.gif);
	background-position:		top right;
	background-repeat:			no-repeat;

	z-index:					20;
}


#menu
{
	position:					absolute;
	top:						232px;
	left:						87px;
	height:						240px;
	width:						120px;
	
	padding-top:				35px;
	
	z-index:					10;
}

#submenu
{
	position:					absolute;
	top:						15px;
	left:						270px;
	// left:					60px; /* IE hack */
	height:						20px;
	width:						380px; /* 475 */
	//width:					382px; /* IE hack 477 */
	
	margin-top:					-15px;
	
	border-left:				1px solid #f84c10;
	border-right:				1px solid #f84c10;
	border-bottom:				1px solid #f84c10;
	
	z-index:					10;
}

#content
{
	position:					absolute;
	overflow-y:					auto;
	
	top:						0px;
	left:						270px;
	// left:					60px; /* IE hack */
	right:						295px;
	// right:					291px; /* IE hack 282 */
	height:						350px;
	// height:					380px;
	width:						auto;

	padding:					15px 12% 15px 0px;

	text-align:					justify;
	
	z-index:					1;
}

#subcontent
{
	position:					absolute;
	overflow-y:					auto;
	
	top:						40px;
	left:						270px;
	// left:					60px; /* IE hack */
	right:						295px;
	// right:					291px; /* IE hack 291 */
	height:						325px;
	// height:					340px; /* IE hack */
	width:						auto;
	
	padding:					0px 12% 15px 0px;

	text-align:					justify;
	
	z-index:					1;
}

#sidebar
{
	position:					relative;
	top:						0px;
	right:						0px;
	width:						295px;
	
	float: 						right;
	z-index:					0;
}


/* CLASS
--------------------------------------- */
.error {
	color:						#ff0000;
}

/* a, span defineren */
div #menu a:link, div #menu a:visited
{
	width:						100px;
	height:						16px;
	
	background-image:			url(../img/menu/wit.gif);
	background-position: 		center left;
	background-repeat:			no-repeat;
}
div #menu span
{
	width:						12px;
	height:						16px;
}


/* introductie */
div #menu a.introductie, div #menu span.introductie
{
	position:					absolute;
	top:						18px;//33px;
	left:						12px;
}
div #menu a.introductie:hover, div #menu a.introductie:active
{
	background-image:			url(../img/menu/introductie.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.introductie, div #titelbalk.introductie
{
	background-image:			url(../img/menu/introductie.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


/* overtoren */
div #menu a.overtoren, div #menu span.overtoren
{
	position:					absolute;
	top:						50px;//65px;
	left:						12px;
}
div #menu a.overtoren:hover, div #menu a.overtoren:active
{
	background-image:			url(../img/menu/overtoren.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.overtoren, div #titelbalk.overtoren
{
	background-image:			url(../img/menu/overtoren.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


/* verbouwing */
div #menu a.verbouwing, div #menu span.verbouwing
{
	position:					absolute;
	top:						81px;//97px;
	left:						12px;
}
div #menu a.verbouwing:hover, div #menu a.verbouwing:active
{
	background-image:			url(../img/menu/verbouwing.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.verbouwing, div #titelbalk.verbouwing
{
	background-image:			url(../img/menu/verbouwing.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


/* sponsors */
div #menu a.sponsors, div #menu span.sponsors
{
	position:					absolute;
	top:						115px;//131px;
	left:						12px;
}
div #menu a.sponsors:hover, div #menu a.sponsors:active
{
	background-image:			url(../img/menu/sponsors.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.sponsors, div #titelbalk.sponsors
{
	background-image:			url(../img/menu/sponsors.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


/* nieuws */
div #menu a.nieuws, div #menu span.nieuws
{
	position:					absolute;
	top:						146px;
	left:						12px;
}
div #menu a.nieuws:hover, div #menu a.nieuws:active
{
	background-image:			url(../img/menu/nieuws.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.nieuws, div #titelbalk.nieuws
{
	background-image:			url(../img/menu/nieuws.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


/* h4d */
div #menu a.h4d, div #menu span.h4d
{
	position:					absolute;
	top:						178px;
	left:						12px;
}
div #menu a.h4d:hover, div #menu a.h4d:active
{
	background-image:			url(../img/menu/h4d.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.h4d, div #titelbalk.h4d
{
	background-image:			url(../img/menu/h4d.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


/* reacties */
div #menu a.reacties, div #menu span.reacties
{
	position:					absolute;
	top:						210px;
	left:						12px;
}
div #menu a.reacties:hover, div #menu a.reacties:active
{
	background-image:			url(../img/menu/reacties.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.reacties, div #titelbalk.reacties
{
	background-image:			url(../img/menu/reacties.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


/* reserveren */
div #menu a.reserveren, div #menu span.reserveren
{
	position:					absolute;
	top:						242px;
	left:						12px;
}
div #menu a.reserveren:hover, div #menu a.reserveren:active
{
	background-image:			url(../img/menu/reserveren.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}
div #menu span.reserveren, div #titelbalk.reserveren
{
	background-image:			url(../img/menu/reserveren.gif);
	background-position:		center left;
	background-repeat:			no-repeat;
}


div.sponsor
{
	position:					relative;
	width:						200px;
}

div.verbouwing
{
	clear:						both;
}

div.verbouwing span.datum
{
	color:						#666;
	font-size:					7pt;
}

div.verbouwing p.nieuws
{
	float:						left;
}

div.verbouwing img
{
	margin:						0px 10px 10px 0px;
	float:						left;
}

div.nieuws
{
	clear:						both;
}

div.nieuws span.datum
{
	color:						#666;
	font-size:					7pt;
}

div.nieuws p.nieuws
{
	float:						left;
}

div.nieuws img
{
	margin:						0px 10px 10px 0px;
	float:						left;
}

.clear
{
	height:						0px;
	// width:					101%; /* IE hack */

	background-color:			#fff;	
}