@charset "utf-8";
/* CSS Document */

/* Reset */
@import 'reset.css';
/* Reset */

/* ------------------------------------------ */
/* BASIC PAGE SETUP, BASIC TYPOGRAPHY */
/* ------------------------------------------ */
html { overflow-y: scroll; height: 100%; }
body { font: 12px Arial, Helvetica, sans-serif; background: #182323 url(bg.jpg) repeat-x top center; color: #ccc; height: 100%; width: 100%; }
ul { list-style: none inside; }
p { font-size: 12px; margin-bottom: 1.3em; color: #333; line-height: 1.3em; }
a { outline: none; text-decoration: none; color: #333; }
a img { border: none; }
h1 { font-weight: bold; font-size: 16px; color: #2f373d; border-bottom: 1px solid #b7b7b7; padding: 10px 15px 8px 15px; line-height: 1.3em; text-shadow: 0px 1px 0px #fff; }
h1 a {font-weight: bold; display: block; }
h2 { font-weight: bold; font-size: 14px; color: #2f373d; padding: 10px 20px 10px 0px; line-height: 1.3em; text-shadow: 0px 1px 0px #fff; text-transform: uppercase; }
h2 a { text-decoration: none; }

#form1 { height: 100%;}


/* END SETUP */

/* ------------------------------------------ */
/* TOOLBOX CSS */
/* ------------------------------------------ */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }

/*  */
#preview{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}
#preview img { margin-bottom: 5px; }
/*  */

/* END TOOLBOX */

/* ------------------------------------------ */
/* PAGE STRUCTURE */
/* ------------------------------------------ */
#container { width: 940px; margin: 0 auto; padding: 0px 10px; height: 100%; margin-bottom: -100px; }

/* HEADER */

#header { } 

#header_preface { text-align: right; display: block; height: 16px; padding-top: 4px; }

.language_selection { font-size: 9px;  margin-right: 10px; }
.language_selection a { color: #999; }
.language_selection a:hover { text-decoration: underline; }
.language_selection a.active { color: #CCC; }

#header_content, .navigatie ul li { height: 80px; }
.logo { margin: 0px 30px 0px 20px; }
.logo, #navigatie, .navigatie ul, .navigatie ul li { display: block; float: left; }
.navigatie ul { border-left: 1px solid #121a1a; border-right: 1px solid #1a2828; }
.navigatie ul li { border-left: 1px solid #1a2828; border-right: 1px solid #121a1a; }
.navigatie ul li a { color: #ccc; display: block; font-size: 14px; font-weight:100; text-align: center; height: 40px; padding: 40px 20px 0px 20px; letter-spacing: 0.08em; }
.navigatie ul li a:hover, .navigatie ul li a.active { background: url(nav_over.jpg) repeat-x center top; color: #FFF; }

                    
#header_postface { clear: both; height: 41px; overflow: hidden; }
.sub_navigatie { float: left; display: block; margin-left: 220px; margin-top: 1px; }
.sub_navigatie ul { display: block; }
.sub_navigatie ul li { display: block; float: left; height: 39px; }
.sub_navigatie ul li a { color: #ccc; display: block; font-size: 12px; font-weight:100; text-align: center; height: 25px; padding: 14px 10px 0px 10px; letter-spacing: 0.08em; }
.sub_navigatie ul li a:hover, .sub_navigatie ul li a.active { background: #1f2e2e; color: #FFF; border-left: 1px solid #2d4343; border-right: 1px solid #2d4343; padding: 14px 9px 0px 9px; }


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

/* MAIN */

#main_preface { height: 310px; }
#main_preface .main_slideshow img, .border { border-left: 1px solid #192424; border-right: 1px solid #192424; }
.main_slideshow { width: 620px; height: 309px; float: left; }
.main_quote { display: block; width: 300px; height: 309px; background: #CCC url(quote_bg.gif) no-repeat top left; float: right; color: #2f373d; }
.main_quote p { display: block; max-height: 170px; overflow: hidden; padding: 70px 20px 0px; font-size: 22px; text-shadow: 0px 1px 0px #fff; font-style:italic; }
#slide_nav { position: absolute; display: block; width: 50px; height: 8px; float:left; margin-top: -40px; margin-left: 660px; }
#slide_nav li { display: block; background: url(bullet.gif) no-repeat top left; float: left; height: 8px; width: 8px; margin-left: 2px; cursor:pointer; }
ul#slide_nav li#button_selected { background: url(bullet.gif) left -8px no-repeat; }

.content-block { float: right; display: block; margin-top: -310px; width: 620px; background: #ccc; border-left: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding-bottom: 30px; }
.contact-block { float: right; display: block; margin-top: -310px; width: 620px; height: auto; background: #ccc; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.content-title h1, .detail-title h1 { padding: 30px 30px 20px 30px; text-transform: uppercase; }
.content-text, .detail-text { padding: 10px 30px; border-top: 1px solid #d1d1d1; display: block; }
.content-text a { font-weight: bold; text-decoration: underline; }
.content-text a:hover { color: #000; }
.content-text h2 a {text-decoration: none; }

.contact-gegevens { float: left; max-width: 40% }
.contact-form { float: right; width: 300px; line-height: 11px;  }
.contact-form input { font-family:Arial, Helvetica, sans-serif; font-size: 11px; margin-top: 5px; border: none; border-bottom: 1px solid #e6e6e6; background: transparent; }
.contact-form textarea { margin-top: 5px;border: none; width: 298px; background: transparent url(form-bg.gif) bottom left; background-attachment: scroll; overflow: auto; overflow-x: hidden; -ms-overflow-x: hidden; line-height: 1.9em; height: 75px; font-family:Arial, Helvetica, sans-serif; font-size: 11px; }
.contact-form .naam, .contact-form .voornaam { width: 148px; }
.contact-form .email { width: 298px; }
.contact-form .adres, .contact-form .postcode, .contact-form .gemeente { width: 98px; }
.contact-form .verstuur-knop { border: 1px solid #e6e6e6; background: #2f373d; float: right; color: #fff; margin-right: 2px; }
.contact-form .verstuur-knop:hover { background: #1f2e2e; }
.contact-form .verstuur-knop:active { background: #1f2e2e; padding: 4px; }
.contact-form h2 { padding-bottom: 0px; }


.naaroverzicht { float: right; margin-top: 30px; margin-right: 30px; }
.naaroverzicht a { margin-left: 15px;padding-left: 20px; color: #444; background: url(leesmeer.gif) no-repeat center left; line-height: 20px; }
.naaroverzicht a:hover { color: #000; background: url(leesmeer-over.gif) no-repeat center left; text-decoration: underline; }

.bericht { padding-top: 10px; border-bottom: 1px solid #b7b7b7; border-top: 1px solid #d1d1d1; display: block; float: left; clear: both; width: 100%; }
.bericht .thumb { margin-right: 20px; margin-bottom: 1.3em; border: 3px solid #999; clear: both; }
.bericht .detail-buttons { border-top: none; }
.bericht-text { display: block; margin-top: 10px; float: right; }
.bericht.first { border-top: none; }
.bericht h2 { border-bottom: 1px solid #b7b7b7; margin-bottom: 10px; display: block; }
.bericht-text ul { list-style: inside square; color: #333; }

.top-space { display: block; height: 8px; }

.cta, .categorie { display: block; float: left; width: 300px; margin: 20px 0 0 20px; background: #ccc; max-height: 230px; overflow: hidden; }
.cta:hover, .categorie:hover, .categorie:hover img { background: #fff; }
.cta img, .categorie img { border: 3px solid #ccc; }
.cta:hover img, .categorie:hover img { border: 3px solid #fff; }
.cta a, .categorie a { color: #2f373d }
.cta-text { border-top: 1px solid #d1d1d1; padding: 15px 15px 0 15px; color: #333; text-shadow: 0px 1px 0px #fff; }
.cta .leesmeer { margin-top: 15px; }
.cta .leesmeer a, .leesmeer a { margin-left: 15px;padding-left: 20px; color: #444; background: url(leesmeer.gif) no-repeat center left; line-height: 20px; }
.cta .leesmeer a:hover, .leesmeer a:hover { color: #000; background: url(leesmeer-over.gif) no-repeat center left; text-decoration: underline; }
.bericht .leesmeer { float: right; margin-bottom: 0px; }
.bericht .thumbs-list { width: 150px; padding-top: 0;  float: left; }
.bericht .thumbs-list li { border: 3px solid #999; margin-top: 10px; }

.categorie h1, .detail-block h1 { text-transform: uppercase; }
.categorie { border-bottom: 1px solid #000; }

.thumb-container { width: 460px; height: 310px; padding-top: 15px; float: left; }
.thumb { display: block; float: left; width: 134px; border: 3px solid #ccc; margin: 10px 0 0 20px; background: #ccc; max-height: 230px; overflow: hidden; }
.thumb:hover { border: 3px solid #fff; }
.thumb.first { margin-left: 0px; }
.thumb a { display: block; width: 134px; height: 74px; } 
.thumb a:hover .zoom-overlay { position: absolute; z-index: 3; cursor: pointer; display: block; width: 134px; height: 74px; background: transparent url(zoom.png) no-repeat center center; }
.teamlid { height: 156px; }


.detail-block { float: right; display: block; width: 460px; height: 310px; background: #ccc; border-left: 1px solid #fff; border-right: 1px solid #fff; }
.detail-desc { display: block; height: 7.5em;overflow: auto; border-bottom: 1px solid #b7b7b7; }
/* buttons */
.detail-buttons { padding-top: 15px; border-top: 1px solid #d1d1d1; }
.detail-buttons a { margin-right: 6px; padding-left: 0px; display: block; width: 20px; text-indent: -9999px; float: left; }
.detail-buttons a:hover { display: block; }
.detail-buttons-tooltips li { position: relative; background: #333; float: left; line-height: 20px; display: block; height: 20px; padding: 0 10px; font-size: 10px; color: #fff; }
.detail-button { padding-left: 20px; display: block; height: 20px; line-height: 20px; margin-bottom: 10px; }
.movie-button { background: url(video.png) no-repeat center left; }
.movie-button:hover { background: url(video-over.png) no-repeat center left; }
.home-button { background: url(home.png) no-repeat center left; }
.home-button:hover { background: url(home-over.png) no-repeat center left; }
.download-button { background: url(download.png) no-repeat center left; }
.download-button:hover { background: url(download-over.png) no-repeat center left; }
.gallery-button { background: url(gallery.png) no-repeat center left; }
.gallery-button:hover { background: url(gallery-over.png) no-repeat center left; }
/* end buttons */

#main_content { clear: both; color: #ccc; }
.projects-nav a { color: #ccc; font-size: 10px; padding: 5px 20px; display: block; height: 20px; line-height: 20px; }
.projects-nav a:hover { color: #fff; }
.vorige-button { float: left; background: url(vorige.png) no-repeat center left; }
.vorige-button:hover {background: url(vorige-over.png) no-repeat center left; }
.overzicht-button { float: left; margin-left: 300px; background: url(overzicht.png) no-repeat center right; }
.overzicht-button:hover { background: url(overzicht-over.png) no-repeat center right; }
.volgende-button { float: right; background: url(volgende.png) no-repeat center right; }
.volgende-button:hover { background: url(volgende-over.png) no-repeat center right; }
.thumbs-list { clear: both; padding-top: 20px; }
.thumbs-list li { float: left; display: block; width: 54px; height: 54px; overflow: hidden; margin-left: 20px; border: 3px solid #ccc; }
.thumbs-list li img { margin-top: -30%; margin-left: -93px; }

.bericht .thumbs-list li img { margin: 0; }
.bericht-text .thumbs-list li img { margin: 0; }

.thumbs-list li.first { margin-left: 0px; }
.thumbs-list li:hover, .thumbs-list li.active { border: 3px solid #fff; }

#main_postface { clear: both; height: 40px; }

.first { margin-left: 0; }


/* END MAIN */
/* ----------------------------------------- */

/* FOOTER */

#footer { overflow: hidden; color: #999; clear: both; display: block; height: 40px; width: 100%; margin: 0 auto; margin-top: 20px; font-size: 10px; background: transparent url(footer_bg.gif) repeat-x bottom center; padding-top: 40px; }

#footer_preface { }

#footer_content { width: 940px; padding: 15px 10px 0px; margin: 0 auto;}
#footer_content p { float: left; color: #999; font-size: 10px; }
#footer_content p .naam { color: #fff; }
            
#footer_postface { float: right; }

/* END FOOTER */
/* ----------------------------------------- */

/* END STRUCTURE */

/* EMPULS CREDITS */
.alerto { float: right; color: #999; }
.alerto:hover { color: #FFF; }