/*
* Stylesheet Karel Appel Foundation
* v1
* by Sitestone webdesign, Matthijs Abeelen
* www.sitestone.nl
*/

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,  img  { margin:0;padding:0; }
ol, ul { list-style:disc; }
caption, th, td { text-align:left; }
table {border-collapse:collapse;border-spacing: 0; }
table, thead, tbody, tr, th, td { font-size:1em; }
form label { cursor:pointer; }
fieldset { border:none; }
input, select, textarea { font-size:100%; }
fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal;font-weight:normal; }
/* For strange IE bugs, see http://www.positioniseverything.net/explorer/ie-listbug.html 
ul, ol, dl { position: relative; } ==> deze weggehaald. Is in de huidige layout niet nodig. 
Weghalen voorkomt problemen met fixed height overflow content containers */
sub,sup { vertical-align: baseline; }

/* type */
body {
	font-size:75%;
	color:#222;
	font-family:Arial,Helvetica,Verdana,sans-serif;
	right: auto;
}
h1,h2,h3,h4,h5,h6 { color: #111;font-weight:normal; }
h1 { font-size:3em;line-height:1;margin-bottom:0.5em; }
h2 { font-size:2em;margin-bottom:0.75em; }
h3 { font-size:1.5em;line-height:1;margin-bottom:1em; }
h4 { font-size:1.2em;line-height:1.25;margin-bottom:1.25em; }
h5 { font-size:1em;font-weight:bold;margin-bottom:1.5em; }
h6 { font-size:1em;font-weight:bold; }
p { margin: 0 0 1.5em; }
ul, ol { margin:0 1.5em 1.5em 1.5em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold;font-weight:normal; }
dd { margin:0; }
strong { font-weight:bold; }
em { font-style:italic; }

/* links added by type*/


/* grid */
body { text-align:center; }
#container { width:910px;margin:0 auto;padding:30px 0;text-align:left;position:relative; }
#header { float:left;width:100%; }
#logo { float:left;width:265px; }
#nav { float:right;width:590px; }
#content { clear:both;float:left;width:100%; }
#footer {float:right;width:840px; }

/* design */
#content { padding-top:30px; }
.home #content { padding-top:0; }
.bio #content { padding-top:30px; }
#main {
	/* xposition:relative; ==> kan weer weg omdat pos rel op li boven ook weggehaald is. blame microsoft */
	float:right;
	width:580px;
	height:400px;
	overflow:auto;
	padding:0 10px 0 0; /* ==> scheelt weer 3 regels */
}
#sub { float:left;width:280px; }
#content h2 { font-size:1em;font-weight:bold;margin-bottom:0; }
.imageholder { float:left;width:230px; }
#subnav ul { position:absolute;top:180px;left:0; }
.bio #content .imageholder { float:right;width:200px; }
#sub p { color:#999; }
#sub p strong { color:#333; }

/* navigation */
#nav { margin:0;padding:2px 0 0; }
#nav h3 { font-size:1em;margin:0;font-weight:bold; }
#nav li { float:left;width:114px;margin:0 4px 0 0;padding:0;list-style-type:none;font-size:.96em;line-height:1.3em; }
#nav li.last { margin-right:0; }
#nav li h3 { text-transform:uppercase;font-size:10px;line-height:14px;font-weight:bold; }
#nav li ul { margin:0;padding:0; }
#nav li ul li { margin:0;padding:0; }
#nav li ul li a { color:#A2AAB6;text-decoration:none;font-weight:bold; }

/* bio */
/*
#biomain {
     xposition:relative; ==> dan kan deze ook weer weg 
	float:right;
	width:565px;
	height:400px;
	padding:0 10px 0 0;  
}
kan helemaal weg, als je bij bio de div biomain weer hernoemt naar main. En dan kun je 
vervolgens met de class .bio die op de body staat specifieke regels toevoegen aan de 
#main. Zie onder.
*/
body.bio #content { height:400px;overflow:auto;margin-top:30px; }
body.bio #content #main { padding:0;height:auto; }

/* subnav bio */
#subnav { float:left;width:60px; }
#subnav ul { margin:0;padding:0; }
#subnav ul li { margin:0;padding:0 0 0 10px;list-style-type:none; }
#subnav ul li a { line-height:1.5em;color:#333;font-weight:bold;text-decoration:none; }
#subnav ul li.active a { color:#44A5C2; }
#subnav ul li a:hover { color:#44A5C2; }

/* gallery */
/* .gallery deze kan wel weg. zie hieronder */
ul.gallerythumbs { list-style-type:none;margin:0;padding:0; }
ul.gallerythumbs li { float:left;width:140px;height:105px; text-align: center; }
/* ul.gallerythumbs li img { width:100px;height:100px; } */
.gallery .imageholder { float:right;width:210px;padding:10px 0; }
.gallery dl { padding-top:10px; }
.gallery dt { color:#A2AAB6; }
.gallery dd { color:#222; }

/* gallery archive*/
/* 
.gallery weggehaald voor ul.gallerythumbs3, omdat er op de pagina van gallerythumbs3 geen 
class gallery in de body stond. Wat netter is hierboven, onder gallery de class gallery weg te
halen. Dan begin je zeg maar met de algemene regels die voor alle lijsten opgemaakt met
.gallerythumbs gelden. Daarna specificeer je met bijv
.bio .gallerythumbs { // specifieke regels }
*/
ul.gallerythumbs3 { list-style-type:none;margin:0;padding:20px; }
ul.gallerythumbs3 li { float:left;width:187px;height:200px; }
ul.gallerythumbs3 li img { width:150px;height:150px; }
.gallery .imageholder { float:right;width:210px;padding:40px 0; }
.gallery dl { padding-top:10px; }
.gallery dt { color:#A2AAB6; }
.gallery dd { color:#222; }

/* bio */
.bio ul.gallerythumbs { list-style-type:none;margin:0;padding:0; }
ul.gallerythumbs li { float:left;width:140px;height:105px; }
.bio .imageholder { float:right;width:210px;padding:10px 0; }
.bio dl { padding-top:10px; }
.bio dt { color:#A2AAB6; }
.bio dd { color:#222; }

/* popup */
.popup { width:340px;padding:20px 30px; }
.popup #logo { float:left;width:106px; }
.popup #menu { float:right;width:110px;color:#A2AAB6;text-align:left; }
.popup #menu a { width:50px;color:#A2AAB6;text-decoration:none;font-weight:bold;}
.popup #menu a.previous { float:left;width:50px; }
.popup #menu a.next { float:right;width:60px;text-align:right; }
.popup .imageholder { float:left;width:340px;padding-top:20px;text-align:left; }
.popup dl { padding-top:10px; }
.popup dt { color:#A2AAB6; }
.popup dd { color:#222; }

/* detail */
#sub .detail p { color: #000; }
.detail .dimensions p { margin: 0px; }
.detail .year { margin-bottom: 1.5em; }

/* colors, added to sections by class body */
.dark { background: #0c0e15; }
.dark #nav h3,
.dark #nav li.active a,
.dark #nav li a:hover { color: #ECC678; }
.blue a:link { color:#ECC678;text-decoration:underline; }
.blue { background:#fff; }
.blue #nav h3,
.blue #nav li.active a,
.blue #nav li a:hover { color:#44A5C2; }
.blue a:link { color:#44A5C2;text-decoration:underline; }
.orange { background:#fff; }
.orange #nav h3,
.orange #nav li.active a,
.orange #nav li a:hover { color:#CD5A2A; }
.orange a:link { color:#CD5A2A;text-decoration:underline; }
.yellow { background:#fff; }
.yellow #nav h3,
.yellow #nav li.active a,
.yellow #nav li a:hover { color:#F1B821; }
.yellow a:link { color:#F1B821;text-decoration:underline; }
.red { background:#fff; }
.red #nav h3,
.red #nav li.active a,
.red #nav li a:hover { color:#F00d61; }
.red a:link { color:#F00d61;text-decoration:underline; }
.green #nav h3,
.green #nav li.active a,
.green #nav li a:hover { color:#67cb41; }
.green a:link { color:#6FA667;text-decoration:underline; }
.purple #nav h3,
.purple #nav li.active a,
.purple #nav li a:hover { color:#c85981; }
.purple a:link { color:#c85981;text-decoration:underline; }
/* footer */
#footer p { color:#A2AAB6;padding:2em 0 1em; }