/* main pages - the design pages have separate css*/

body {
	color: #222222; 
	font-weight: plain; 
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size: medium;
	text-align:center;
	background:none;
	}

.noCSS {display: none;}
.printHide {display:none;}.handheldHide {display:none;} /*stops flash appearing + is used to the top menu*/
.submenuBar {display:none;}

.printHide

.handheldTitle:before {content:"Sonja van Kerkhoff";
 margin: 0px auto 0px auto; /* auto enables the centering to work in firefox*/
    padding: 0px 0px 10px 0px;
	width:100%;
	color:#898383;
	font-size:200%;
	height:30px;
	text-align:center;
	display:block;
	/*background: #fdfdfd url('gfx/alg/houseblue.gif') no-repeat fixed center;*/
	}
	
	
a:link {color:#675DCd; font-weight:500; #655DCA solid; text-decoration:none} /*unvisited links*/
a:visited {color:#876Dcc; font-weight:500; #655DCA solid; text-decoration:none} 
a:hover {color:#ff0000; border-bottom:1px #655DCA solid; text-decoration:none}
a:active {color:#675DC8; font-weight:500; #655DCA solid; text-decoration:none}

a img, img, .floatLeft .spacer img, .floatRight .spacer img {border:1px #333366 solid;}

/*
img a: {border-color:#111111;} */

.frameFlash {display:none;}
.menuContainer, .footerContainer {display:none;}
.artmenu, .footermenu {display:none;}
.footermenu {clear:both;}
.artmenu a, .footermenu a {display:none;}
.artmenu a:hover, .footermenu a:hover {display:none;}
.footerContainer {display:none;}

.handheldNarrow {display:none;} /*about, news left column*/

.frame { /*within menu + footer, here is the page container */
background-color:#00ffff;
    width: 660px;
    margin: 0px; 
    padding: -40px 0px 0px 0px;
    text-align:center;
	border:0px;
/*border:1px #ff0000 solid;*/
height:100%;
	}

.tourImgContainer { /*container for tiny images bar */
	padding:0px 0px -10px 0px;
	margin:0px auto;
	/*border:5px #ddddfd solid;*/
	text-decoration:none; 
	width:430px;
}

.tourImgContainer a  {text-decoration:none; border:0px;}
.tourImgContainer a:hover {text-decoration:none; border:0px;}
	

.tourImgContainer img {
	width:20px; 
	height:15px; 
	margin:0px; 
	padding:0px; 
	text-decoration:none;
	border:1px #111133 solid;
	}

.tourImgContainer img a  {text-decoration:none; border:1px #111133 solid;}
.tourImgContainer img a:hover {text-decoration:none; border:1px #cc095F solid;}
	
.indexPagesContainer, .indexPagesContainerNarrow { /* so align left works and is centered on index pages */
	/*border:1px #ff00ff solid;*/
	margin:0px auto 0px auto;
	text-align:left;
	width:660px;
	font-size:90%;
	padding:0px 0px 0px 0px;
	color: #665577;
	line-height:200%;
	/*border:1px #ff00ff solid;*/
	}
	
.indexPagesContainer li {padding:0px 0px 0px 0px; font-size:90%; line-height:105%;}


/* container for all image + text sections as one unit -not nec for index pages*/
.pageContentContainer {
	width:730px; 
	border:0px;	
	margin:0px auto;
	/*border:1px #ffff00 solid;*/
	text-align:center;
	} 


.pageContentContainerWider{   /* used: ev.htm, dans.htm */
	margin-left: 10%;
	margin-right: 10%;
	text-align:center;
	background-color:none;
	width:850px;
	}

.pageContentContainerNarrow{  /* used for under the flash navbar - about.htm */
	margin: 0px auto;
	text-align:center;
	background-color:none;
	width:590px;
	}

.width420px {width:420px;}

.contentContainer {  /* mt/ev.htm  for text + image units */

text-align:center;
/*border:1px #0000ff solid;*/
clear:both;
margin:0px 0px 10px 0px;
}

.contentContainer img {border:1px #333366 solid;}

.tour a  {color:#5555d3; text-decoration:none; border:0px;}  /*index.html*/
.tour a:hover {color:#cc095F; text-decoration:none; border:0px;}
.tour img {border:1px #111144 solid;}
.tour .spacer img{border:none;} /* for tr.gif here */




.floatLeft { /*no margin so things can sit next to each other, use marginLeft if extra is needed*/
	float: left;
	padding: 0px;
	margin: 0px 0px 2px 0px;	
	text-align: center;
	font-size: .9 em;
	line-height:120%;
	display: block;
	color: #574774;
	/* border:1px #00ffff solid;*/
	}

.floatLeftClearLeft {
	clear:left;
	float: left;
	padding: 0px;
	margin: 10px 0px 0px 0px;	
	text-align: center;
	font-size: .9 em;
	line-height:120%;
	display: block;
	color: #574774;

}

.floatRight, .floatRightNoMargin {
	float: right;
	padding: 0px;
	margin: 0px 0px 0px 0px;	
	text-align: center;
	font-size: 1.0em;
	line-height:120%;
	display: block;
	color: #574774;
	}

.floatRightNarrow {float:right; width:410px;}

.floatLeft img, .floatLeftClearLeft img {
border: 1px #000011 solid;
padding: 0px;
margin: 0px 5px 0px 0px;	
}

.floatRight img  {
border: 1px #000011 solid;
padding: 0px;
margin: 0px 0px 0px 5px;	
}

.floatRightNoMargin img {  /* for images next to each other */
border: 1px #000011 solid;
margin: 0px;	
display:block;
}

.alignRight {
	text-align:right;
}

.alignLeft {
	text-align:left;
}

.margin20px {margin: 0px 10px 0px 10px; float:left; 100% border:1px #ff0000 solid;} /* spaces next to image floats */


h1 {
color:#575758;
font-size: 110%;
font-weight: 600;
letter-spacing: 4px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
line-height: 1.2em;
}

h1.smaller {font-size:130%;  /* subtitles */
	margin: -5px 0px 15px 0px;
	}  


h1.smallerLeft {font-size:100%;  /* sound.htm */
	margin: 0px 0px 0px 0px;
	text-align:left;
	}  

h2 { /* undertitles on artwork pages*/
color:#353139;
font-size: 100%;
font-weight: normal;
letter-spacing: 1px;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
line-height: 1.3em;
}


h3 { /* so far only for cv title */
color:#66618a;
font-size: 130%;
font-weight: normal;
letter-spacing:0px;
text-align: left;
line-height: 1.1em;
display:inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

h3 strong {
color:#996699;
font-size: 90%;
letter-spacing:.5px;
}

h4 {
color:#4F4D83;
font-size: 120%;
font-weight: normal;
letter-spacing:0px;
text-align: left;
line-height: 1.1em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

h4 strong {
color:#4F4D83;
font-size: 90%;
}

h5 {  /* bluish caption under images */
color:#776699;
font-size: 120%;
font-weight: normal;
letter-spacing:1px;
text-align: left;
line-height: 1.2em;
margin: 3px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

h6 {  /* used for prices, pop up size info, links to other pages*/
color:#836D83;
font-size: 90%;
font-weight: normal;
letter-spacing:0px;
line-height: 1.6em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

p {
color:#87729B;
font-size:110%;
margin: 2px 0px 0px 2px;
padding: 0px;
}
p strong {font-weight: 600;}

p.intro {  /* bluish intro text */
color:#7755aa;
font-size: 100%;
font-weight: normal;
letter-spacing:1px;
/*text-align: center; */
line-height: 1.2em;
margin: 3px 5px 0px 5px;
padding: 0px 0px 0px 0px;
}

p, p.text {  /*main text*/
color:#708090; 
font-size: 100%;
line-height: 100%;
display:inline;
padding: 0px 0px 2px 0px;
}

p.textlarger {  /*main text larger alterative*/
color:#708090; 
font-size: 110%;
letter-spacing:0px;
line-height: 1.6em;
display:inline;
padding: 0px 0px 2px 0px;
}

p.smaller {font-size:70%;}

.menuImages { /* so far just for cv + other */
padding:0px 0px 0px 0px;
margin: 0px 0px 20px 0px;
}

.cvYear { /* cv pages */
color:#87729b;
font-size: 110%;
font-weight: bold;
letter-spacing: 1px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
line-height: 1.3em;
width:100px;
}

.cvText { /* cv items */
color:#554455;
font-size: 90%;
font-weight: normal;
letter-spacing: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
line-height: 1.3em;
}

.cvText strong { /* cv items */
color:#87729b;
font-weight: 650;
letter-spacing: .5px;
}


p.lightgrey {color:#bbaabb; display:inline;}

.caption {
color:#87729b;
font-size: 90%;
font-weight: normal;
letter-spacing: 0px;
padding: 0px 0px 0px 0px;
margin:0px;
display:block;
line-height:1.2em;
}

.captionLarge {  /*index.htm*/
	font-size:130%;
	letter-spacing:0px;
	}

.photolinks {
display:inline;
color:#444444;
font-size: 80%;
font-weight: bold;
letter-spacing: 1px;
padding: 2px 0px 0px 2px;
text-align: left;
width: 100%;
}

.greycaption, .greycaption strong {  /* used for caption under photographs*/
color:#aaaabb;
font-size: 100%;
letter-spacing:1px;
display: block;
text-align: center;
line-height: 115%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.tinygreycaption {  /* tiny copyright caption under photographs*/
color:#aaaabb;
font-size: 85%;
font-weight: normal;
letter-spacing:0px;
text-align: center;

display:inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}

.mauve {  /* for quotations + postcards */
color:#aa80aa;
font-size: 100%;
font-weight: normal;
letter-spacing:1px;
text-align: center;
line-height: 100%;
display:inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}



.nofloatcontainer {}

.border150px {

border:1px solid #000000;
width:150px;

}

.border300px {

border:1px solid #000000;
width:300px;

}


ul.plainlist {
color:#87729b;
font-size: 95%;
font-weight: normal;
letter-spacing: 0px;
line-height: 115%;
padding: 10px 0px 10px 0px;
margin: 0px;
text-align: left;
width: 100%;
list-style-type:disc
list-style-position:outside;
}

ul.submenu {  /* find out why this does not work a:link*/
color:#6755b3
font-size: 95%;
font-weight: normal;
letter-spacing: 0px;
line-height: 100%;
padding: 0px 0px 10px 0px;
margin: 0px;
text-align: left;
width: 100%;
list-style-type:disc
list-style-position:outside;
display:inline;
}

.linksListTitle {
color:#bb4799;
width:100%;
font-size: 105%;
font-weight: bold;
letter-spacing: 2px;
padding: -10px 0px 0px 0px;
margin: 10px 0px -5px 0px;
border-bottom: 3px dotted #e4d7e4;
/*background:url(arrow_u.gif) no-repeat right; */
}

.linksList ul {
padding: 0px 0px 0px 10px;
margin: 10px;
}

.linksList li {
color:#697999;
font-size: 90%;
font-weight: normal;
letter-spacing: 1px;
line-height: 115%;
padding: 0px 0px 8px 0px;
margin: 0px;
}


.linksList a {color:#697999; font-weight: 600;}

.alignleft {text-align:left;}
.alignright {text-align:right;}
.aligncenter {text-align:center;}

.floatleft {float:left;}
.floatright {float:right;}

table  {
border-collapse: collapse;
border-top: hidden;
border-right: hidden;
border-bottom: hidden;
border-left: hidden;
border-padding: 0px;
border=spacing: 0px;
margin:0px;
}

td {
color:#6755b3;
font-size: 100%;
border-top: hidden;
border-right: hidden;
border-bottom: hidden;
border-left: hidden;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
vertical-align: bottom;
}


table.shown {}

caption  {
color:#8855dd;
font-size: 80%;
font-weight: bold;
text-align: left;
letter-spacing: 2px;
text-shadow: 0px 0px 0px; /* minimal effect in firefox 1.0 & IExplorer 5.0 */
font-variant: small-caps; /* firefox 1.0 - typed capital appears larger+bolder, no affect in IExplorer 5.0 */
padding-top: 0px;
padding-bottom: 0px;
width="100%"
}


th.shown {
color:#8888b9;
font-size: 70%;
font-weight: normal;
font-style:italic;
padding-top: 0px;
padding-bottom: 5px;
text-align: left;
}

th.shown strong {
color:#6755cc;
font-size: 80%;
font-weight: bold;
padding-top: 10px;
padding-bottom: 5px;
text-shadow: 2px 2px 3px;
}


td {
color:#8855bb;
font-size: 80%;
border-top: hidden;
border-right: hidden;
border-bottom: hidden;
border-left: hidden;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 0px;
vertical-align: top;
}


td strong {
color:#6755dd;
}

.relatedworktitle {
color:#7A7AAC;
font-size:80%;
background-color:#ddddee;
font-size: 110%;
font-weight: bold;
padding-top: 0px;
text-align:left;
width:600;
display:block;
margin: 30 0 0px 0px;
line-height:100%;
border-color:#7A7AAC;
text-shadow: 2px 2px 3px;
}

.relatedwork {
background-color:#fdfdfd;
color:#6969bb;
text-align:left;
width:600;
font-size:80%;
}

.relatedwork a:link, .relatedwork a:visited, .relatedwork a:hover,  {
font-weight: 700;
}