/*
KLEUREN:
Zwart (BG-color)		-	#231f20
Grijs (tekst)			-	#686a6c
Oranje					-	#f05d22
Blauw (header en links)	-	#0053a0
*/

body {
color: #686a6c;
background-color: #231f20;
margin: 0px;
padding:0;
/* Reduce default font size to 10pt */
font: 62.5%/1.5  Arial, "Lucida Grande", "Trebuchet MS", Tahoma, Verdana, sans-serif;
text-align:center; /* IE6 geneuzel! */
}
#container{
width:835px;
height:746px;
background:#231f20;
margin:20px auto 0 auto;
text-align: left;	/* om eerdere IE6 geneuzel weer te neutraliseren */
}

#container_portfolio{
width:835px;
height:746px;
background: url(images/2009/total_bg.jpg)top left no-repeat; /* Bij portfolio paginas zwarte header! */
margin:20px auto 0 auto;
text-align: left;	/* om eerdere IE6 geneuzel weer te neutraliseren */
}

/* Heading - LOGO + ANIMATIE */
#heading_zwarte_bg{
z-index:0;
position:relative;
display:block;
background: url(images/portfolio2009/header_bg_zwart.jpg)top left no-repeat; /* Bij portfolio paginas zwarte header! */
width:835px;
height:188px;
}
#heading_witte_bg{
z-index:0;
position:relative;
display:block;
background: url(images/portfolio2009/header_bg_wit.jpg)top left no-repeat;	 /* Bij reguliere paginas witte header! */
width:835px;
height:188px;
}
#logo{
float:left;
width:200px;
height:188px;
}
#header_animatie{
z-index:1;
position:absolute;
float:right;
width:835px;
height:188px;
}
/* Eind Heading - LOGO + ANIMATIE */


/* ACCORDION MENU met INHOUD aan rechterkant */
#menu_met_content{
display:block;
width:835px;
height:558px;
background: url(images/portfolio2009/accordion_bg.jpg);
background-position:left;
background-repeat:no-repeat;
}
/* ACCORDION MENU POSITIE */
#accordion_menu_container{
position:absolute;
z-index:1;
float:left;
width:189px;
margin:0px;
_margin:-515px 0 0 0;	/*IE6*/
clear:both;
}


/* CONTENT ZWARTE BG */
#content_zwarte_bg{
width:633px;
height:515px;
float:right;
overflow:hidden;
padding:0 0 0 202px;
_padding:0px;	/*IE6*/
margin:0;
text-align:left;
}
#content_zwarte_bg p{font-size:13px;line-height:18px;padding:0 0 20px 0px;margin:0;color:#686a6c;}

#content_zwarte_bg img{float:left;padding:0 15px 10px 0;}

#content_zwarte_bg img.last_in_row{float:left;padding:0 0 10px 0px;}

#content_zwarte_bg a:link, #content_zwarte_bg a:visited {color: #686a6c;text-decoration: underline;}
#content_zwarte_bg a:hover {color: #0053a0;text-decoration: none;}
#content_zwarte_bg a:active {color: #686a6c;text-decoration: none;}


/* CONTENT WITTE BG */
#content_witte_bg{
float:right;
width:527px;
height:460px;
overflow-x:hidden;
overflow-y:auto;
background:#fff;
padding:35px 40px 20px 66px;
}

/* Lijsten/opsommingen in teksten */
#content_witte_bg ul{list-style: none;margin:-10px 0 20px 18px;padding:0;list-style-image: url(images/2009/listblok.gif);}

#content_witte_bg ul li{list-style-type: square;font-size:1.3em;padding:0 20px 0 40px;background:#fff;}

#content_witte_bg ul li a:link, #content_witte_bg ul li a:visited {color: #0053a0;text-decoration: none;}
#content_witte_bg ul li a:hover {color: #0053a0;text-decoration: underline;}
#content_witte_bg ul li a:active {color: #000;text-decoration: none;}


#content_witte_bg ul li.categorie{list-style-type: none;font-size:1.3em;padding:0px;background:#fff;}


/* Eind ACCORDION MENU met INHOUD aan rechterkant */



/* FOOTER met CONTACTGEGEVENS */
#footer_zwarte_bg{
z-index:0;
position:absolute;
top:723px;
margin-left:202px;
width:566px;
height:27px;
padding:16px 0 0 67px;
clear:both;
font-size:1.1em;
}
#footer_zwarte_bg a:link, #footer_zwarte_bg a:visited {color: #686a6c;text-decoration: none;}
#footer_zwarte_bg a:hover {color: #0053a0;text-decoration: underline;}
#footer_zwarte_bg a:active {color: #686a6c;text-decoration: none;}

#footer_witte_bg{
position:absolute;
top:723px;
background: #fff;
margin-left:202px;
width:566px;
height:27px;
padding:16px 0 0 67px;
clear:both;
font-size:1.1em;
}
#footer_witte_bg a:link, #footer_witte_bg a:visited {color: #686a6c;text-decoration: none;}
#footer_witte_bg a:hover {color: #0053a0;text-decoration: underline;}
#footer_witte_bg a:active {color: #686a6c;text-decoration: none;}


/* Omdat ik 'alles' behalve de inhoud verberg voor printdoeleinden */
/* Heb ik voor op de printjes een aparte FOOTER gemaakt welke je niet ziet op de online website! */
#footer_voor_printjes{display:none; !important}
/* Eind FOOTER met CONTACTGEGEVENS */


/* Voor absolute gepositioneerde tooltip onder het accordion menu bij MouseOver in de Portfolio */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
z-index:1;
width:131px;
_width:141px;	/*IE6*/
padding: 10px 4px 0 4px;
_padding: 10px 4px 0 4px;	/*IE6*/
height:300px;
left: -1000px;
visibility: hidden;
color: #fff;
text-decoration: none;
}
.thumbnail span{font-size:12px;}
.thumbnail span strong{font-weight:bold;text-transform:uppercase;}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
overflow:visible;
position:absolute;
z-index:1;
top: 353px;
_top: 38px;		/*IE6*/
left: -815px; 	/*position where tooltip should offset horizontally */
_left: -805px; 	/* IE6 - position where tooltip should offset horizontally */
}
/* Eind absolute gepositioneerde tooltip onder het accordion menu bij MouseOver in de Portfolio */


/* AFBEELDINGEN op TEKSTPAGINAS */
.image_on_textpage {display:block;width:201px;height:151px;border:1px solid #686a6c;padding:0;margin:0;float:right;}




/* T.b.v. W3C gevalideerde QUICKTIME MOV! */
.quicktime_video{position:absolute;z-index:-1;margin:0 auto 0 auto;text-align:center;padding:0;background:#231f20;}

.quicktime_video_description{display:block;margin:10px 0 10px 0;text-align:center;}

/* hides the second object from all versions of IE */
* html object.mov {
    display: none;
}
/* displays the second object in all versions of IE apart from 5 on PC */
* html object.mov/**/ {
    display: inline;
}
/* hides the second object from all versions of IE >= 5.5 */
* html object.mov {
    display/**/: none;
}







/* OVERIG: */
h1{font-size:1.6em;padding:0 0 12px 0px;margin:0;font-weight:normal;color:#0053a0;background:#fff;}

h1.error{font-size:1.6em;padding:0 0 12px 0px;margin:0;font-weight:normal;color:#f05d22;background:#fff;}
h1.error span{font-size:1em;font-weight:bold;color:#f05d22;background:#fff;}

h2{font-size:1.5em;padding:0 0 12px 0px;margin:0;font-weight:normal;color:#0053a0;background:#fff;}

h3{font-size:1.4em;padding:0 0 12px 0px;margin:0;font-weight:bold;color:#0053a0;background:#fff;}
h3.error{font-size:1.6em;padding:0 0 12px 0px;margin:0;font-weight:normal;color:#f05d22;background:#fff;}

h4.error{width:464px;padding:4px;margin:0px;background:#f05d22;color:#fff;font-size:11px;font-weight:bold;}

p{font-size:13px;line-height:18px;padding:0 0 14px 0px;margin:0;}

p.bedankt_tekst{font-size:13px;line-height:18px;margin:0 0 0 -66px;padding:0 0 20px 66px;}

strong{font-weight:bold;color:#0053a0;}
strong.grey{font-weight:bold;color:#686a6c;}


span strong{font-weight:bold;color:#fff;}

blockquote{
	text-align:left;
    margin:0; }
blockquote p{
    color: #0053a0;
	font-size:1.325em;
    font-weight: bold;
    font-style: italic;
	padding:0 0 20px 0px;}
blockquote p:before {
    content: '"';}
blockquote p:after {
    content: '"';}


/* VORIGE / VOLGENDE tekstlinks op PORTFOLIO pagainas */
.vorige{float:left;text-align:left;}
.volgende{float:right;text-align:left;}

/* CONTACTFORMULIER*/
FIELDSET{width:540px;border:0px solid #000;padding:0;margin:0;}
LABEL{width:110px;margin:0 5px 0 0;padding:3px 0 3px 0;float:left;background:#fff;color:#686a6c;font-size:13px;}
INPUT{margin:0 0 0 0;float:left;background:#d1d2d4;color:#000;border:0;width:349px;padding:4px;}
TEXTAREA{margin:0 0 0 0;float:left;font-family:Arial, "Lucida Grande", "Trebuchet MS", Tahoma, Verdana, sans-serif;font-size:13px;background:#d1d2d4;color:#000;border:0;width:349px;height:154px;padding:4px;overflow:auto;}
INPUT.button{margin:6px 0 0 0;float:left;background:#f05d22;color:#fff;border:0;width:66px;height:22px;padding:0 0 2px 0}


.image_holder{padding:0;margin:10px 0 0 0;}

/* Voor popup window sluit knop bij portfolio vergrotingen */
INPUT.sluit_button{background:#f05d22;color:#fff;border:0;width:80px;height:22px;margin:0px 16px 0 0;_margin:-10px 16px 0 0;*margin:-10px 16px 0 0;float:right;}

/* LINKS (blauw) in TEKSTEN */
a:link, a:visited {color: #0053a0;text-decoration: underline;}
a:hover {color: #0053a0;text-decoration: none;}
a:active {color: #000;text-decoration: underline;}

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

/* Thumbnails onderaan tekst paginas presentatie_methode.php */
.presentatie_pics{width:527px;height:200px;overflow-x:auto;overflow-y:hidden;}
.presentatie_pics img{border:1px solid #000;}

/* Thumbnails onderaan tekst paginas 2d3d_animaties.php */
.animatie_pics{width:527px;height:130px;overflow-x:auto;overflow-y:hidden;}
.animatie_pics img{border:1px solid #000;}

.hiddenPic {display:none;} /* Tbv IMAGE PRELOADING! */

/* tbv COLORBOX - portfolio */
.hidden{display:none;}

/*
KLEUREN:
Zwart (BG-color)		-	#231f20
Grijs (tekst)			-	#686a6c
Oranje					-	#f05d22
Blauw (header en links)	-	#0053a0
*/