/* -------------------------------------------------------------- 
  LAYOUT
  
  blauw: #4488c3
  rood: #E20025
-------------------------------------------------------------- */

.clear											{ clear:both;}
body												{ background-image:url(../pics/bg_body.gif); background-repeat:repeat-x; background-color:#E6F5F8;}
#page												{ margin: 0 auto; width: 940px; }


/* header 
-------------------------------------------------------------- */
#header											{ height: 230px; position: relative; z-index: 3000}
#top_nav										{ position: absolute; height:30px; width:345px;}
#logo												{ position: absolute; left: 0; 	top: 30px; 	width: 345px; height: 150px;}
#fases											{ position: absolute; left: 343px; width: 345px;}
#fases li										{ height: 29px; border-bottom: 1px dashed #009FC6;padding: 0 10px; list-style:none; line-height:30px;}
.fase												{ color: #009FC6;margin-right: 20px;}
.active, .aan								{ background-color: #009FC6; color:#fff}


#sfeer_beeld								{ position: absolute; right: 0; width: 250px; height: 180px;}

/*menu
-------------------------------------------------------------- */
#top_menu 									{ position:absolute; bottom:6px; left:0px; }
#top_menu li								{ position: relative; display: inline; float: left; width: 113px; /*Width of top level menu link items*/
														  height:40px; border-right: 2px solid #fff; }
#top_menu ul li a						{ font-weight:bold; text-transform:uppercase; display: block; text-decoration: none; padding: 6px 5px ;color:#fff;}
#top_menu ul li a:hover			{ color:#ccc;}
#top_menu ul li ul					{ left: 0; top: 1px; position: absolute; display: block; visibility: hidden; z-index: 100; width: 300px}
#top_menu ul li ul li 			{ width: 100%; height:20px; }
#top_menu ul li ul li a			{ padding: 5px; background-color: #58C0D9; color: #fff; }
#top_menu ul li ul li a:hover		{ font-weight:bold;}

* html #top_menu ul li 				{ float: left; height: 1%; } /* Holly Hack for IE */
* html #top_menu ul li a 			{ height: 1%; } /* Holly Hack for IE */


/* content 
-------------------------------------------------------------- */
#wrapper											{ background-image:url(../pics/bg_content.gif); background-repeat:repeat-y; padding-top: 20px;margin-top:10px;}
	
#content, #contentbottom			{ float: left; width: 670px; } 
#contentbottom								{ font-size:10px;}
#content h2										{ margin-bottom: 1.5em;}
#content p										{ margin-bottom: 1.5em;}
#content ul, #content ol			{ margin: -1.5em 2em 1.5em 3em;}
#content td										{ padding: 3px; border-bottom: 1px solid #4488c3; }

#sidebar, #sidebarbottom			{ float: left; width: 220px; margin-left: 40px;}
#footer												{ width:100%; border-top: 2px solid #fff; background-image:url(../pics/bg_footer.gif); background-repeat:repeat-x;}
#partners											{ width:940px; background-color:#fff; margin: 0 auto;}

#content_project							{ width: 400px; float: left}
#content_project p						{ margin-top: 12px;}
#content_project ul, 
#content_project ol						{ margin: 0em 2em 1.5em 3em;}
#content_project td						{ padding: 3px;}
#project_bar									{ float: left; width: 250px; margin-left: 20px;}
#project_youtube							{ width: 250px; }
.project_blok									{ margin-bottom: 20px; }

.hr														{ height: 1px;width:100%;border:0px; background-color:#000; margin: 5px 0; font-size: 0;}			
#content hr, .hr_sufalnet			{ height: 1px; border: 0; margin: 10px 0; border-bottom: 1px dashed #009FC6;}

#home_intro										{ background-color:#fff; padding: 10px 15px; margin-bottom: 20px;}
#home_intro > div>p:last-child 			{ margin-bottom: 0;}

#home_youtube									{ height: 300px; width: 300px; float:right;}*/
/*#home_youtube									{ height: 300px; width: 300px; float:right; margin-top: 10px; border-bottom: 1px solid #ccc;}*/
#content #home_youtube	p			{ margin-bottom: 1em;}

#home_nieuws									{ float: left; width: 335px; margin-right: 35px;}
#content .nieuwsblok					{ clear: both; padding: 10px 0 ; border-bottom: 1px solid #ccc; position:relative; }
#content .nieuwsblok img			{ float: left; border:1px solid #fff; margin-right: 5px;}
#content .nieuwsblok h2				{ margin: 0 5px 0 0; font-size:11px; line-height:12px}
#content .nieuwsblok p				{ margin:0; font-size:10px; line-height:12px}
.nieuws_lijst_verder					{ float: right; position:absolute; bottom: 10px; right:0;font-size: 16px;}
/* sidebar
-------------------------------------------------------------- */
#calendar, #news, #knowledgebase	{ padding-bottom:10px; margin-bottom: 10px;border-bottom:1px solid #000;}
#knowledgebase										{ }

.sidebar_blok											{ border: 1px solid #009FC6; background-color:#fff; font-size:10px;}
.sidebar_blok h2									{ padding: 2px 5px; width: auto; background-color:#009FC6; color: #fff; text-transform: uppercase;}
.sidebar_blok ul									{ margin: 5px; list-style:none;}

.sidebar_link	img									{ margin: 10px 0;} 
.sidebar_link img.calendar				{ margin-bottom: -1px}
li.pdf														{ background: url(../pics/icons/pdf.gif)no-repeat 0 50%; padding: 0 0 0 20px; margin: .4em 0; }
li.bullet_proj										{ background: url(../pics/icons/proj.gif)no-repeat 0 50%; padding: 0 0 0 20px; margin: .4em 0; }
li.bullet_calendar								{ background: url(../pics/icons/calendar.gif)no-repeat 0 50%; padding: 0 0 0 20px; margin: .4em 0; }
.more															{ text-align: right; width: auto; border-top: 1px solid #009fc6; padding-right: 5px;}

/* vacatureoverzicht
-------------------------------------------------------------- */
.vac_overzicht_titel							{ color: #000; border: 1px solid #ccc; margin-bottom: 10px; font-size:16px; font-weight:bold;}
.vac_overzicht_inleiding					{ font-size: 12px; font-weight: normal; line-height:14px; }
.vac_overzicht_titel a						{ display:block; padding:20px; text-decoration:none; line-height:1;}
.vac_overzicht_titel a:hover			{ background-color:#FFE8EF;}
#vac_intro												{ font-style:italic;}

/* nieuwsoverzicht
-------------------------------------------------------------- */

.nieuws_overzicht_blok						{ border: 1px solid #009FC6; padding: 10px; margin-bottom: 10px; background-color:#F3FBFC; }
.nieuws_overzicht_titel 					{ position: relative; width: 370px;}
.nieuws_overzicht_titel a					{ color: #000; text-decoration:none; font-size:14px; font-weight:bold;}
.nieuws_overzicht_inleiding				{ position: relative; font-size: 12px; font-weight: normal; line-height:14px;}
.nieuws_overzicht_datum						{ position:absolute; right: 10px; top: 10px; font-size: 10px; color:#666;  font-weight: normal; line-height:14px; }
.nieuws_overzicht_verder					{ position: relative; font-size: 12px;}

/*Nieuwsbrief
-------------------------------------------------------------- */

#nieuwsbrief label								{ display: block; width: 100px; float: left; margin-bottom: 5px; padding:1px; text-align: right; padding-right: 20px;}
#nieuwsbrief .input								{ display: block; width: 300px; float: left; margin-bottom: 5px; padding:1px; border: 1px solid #70A392;}
#nieuwsbrief br										{ clear: left;}
#nieuwsbrief .button							{ margin-left: 120px; width:100px; border:1px solid #70A392; background-color:#eee; display:inline;}

/* Slideshow afbeeldingen rechtsboven
-------------------------------------------------------------- */
#slideshow 												{ position:relative; width: 245px; height:180px; background-image: url(../../images/carroussel/Lavrio.jpg); }
#slideshow img										{ position:absolute; top:0; left:0; z-index:8;  opacity:0.0; }
#slideshow img.active 						{ z-index:10;  opacity:1.0; }
#slideshow img.last-active				{ z-index:9;}

/* Slideshow afbeeldingen projectpage
-------------------------------------------------------------- */
#projectslide 										{ position:relative; height:180px; }
#projectslide img									{ position:absolute; top:0; left:0; z-index:8;  opacity:0.0; }
#projectslide img.active 					{ z-index:10;  opacity:1.0; }
#projectslide img.last-active			{ z-index:9;}


/* formulier 
-------------------------------------------------------------- */
#formulier label 							{ display: block; width: 100px; float: left; margin-bottom: 5px; padding:1px; text-align: right; padding-right: 20px;}
#formulier .input,
#formulier .box								{ display: block; width: 300px; float: left; margin-bottom: 5px; padding:1px; border: 1px solid #726d83;}
#formulier .box								{ height: 100px; font-size:12px} 
#formulier br									{ clear: left;}
#formulier .button						{ margin-left: 120px; width:100px; border:1px solid #726d83; background-color:#eee; display:inline; height: 20px;}
#hoteluitleg ul								{ margin-top:10px}