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

.noCSS {display: none;}

img {border:1px #333366 solid;}
/*.noBorder img {border:0;} 28-11-07 didn't work, so used arrowup class even it is inactive here*/
a img {border: 0;}

a:link {color:#675DCd; font-weight:600; border-bottom:1px #ffffff solid; text-decoration:none} /*unvisited links*/
a:visited {color:#876Dcc; border-bottom:1px #ffffff dotted; text-decoration:none} 
a:hover {color:#ff0000; border-bottom:1px #ffffff dotted; text-decoration:none}
a:active {color:#675DC8; border-bottom:1px #ffffff dotted; text-decoration:none}

.frame {  /* the page container */
    width: 930px; /* 2 pxframe border 192menuFrame / 736contentFrame */
    margin: 0px auto; /* auto enables the centering to work in firefox*/
    padding: 0px;
    text-align:center;
	height:575px; /* nec otherwise doesn't show in FF*/
	border-bottom:2px #333333 solid;
	border-left:2px #333333 solid;
	background-color:#ffffff;
}

.titleContainer {
 margin: 0px;
 padding:0px;
 height:100px;
}

.titlebanner, .titlebanner a, .titlebannerw, .titlebannerw a, .titlebanneri, .titlebanneri a {
    /*width: 930px;*/
    height:100px; /*necessary for mouseover to work*/
    margin : 0px;
    padding: 0px;
    border: 0px;
    vertical-align: top;
    background: #ffffff url(../gfx/titleb.jpg) no-repeat;
} 

.titlebanner_over, .titlebannerw_over, .titlebanneri_over {
    height:100px; /*necessary for mouseover to work*/
    /*float : right; */
    margin : 0px;
    padding: 0px;
    border: 0px;
    /*border-style : solid;
    border-color : #666699; */
    vertical-align: top;
    background: #ffffff url(../gfx/titleb_over.jpg) no-repeat;
}

.titlebannerw {border: 0px; background: #3399FF url(../gfx/titleweb.jpg) no-repeat;}
.titlebannerw_over{border: 0px; background: #3399FF url(../gfx/titleweb_over.jpg) no-repeat;}

.titlebanner#prices {border: 0px; background: #3399FF url(../gfx/titleweb.jpg);}
.titlebanner_over#prices {border: 0px; background: #3399FF url(../gfx/titleweb_over.jpg);}

.titlebanneri {border: 0px; background: #ffffff url(../gfx/titlea.gif) no-repeat;}
.titlebanneri_over {border: 0px; background: #ffffff url(../gfx/titlea_over.gif) no-repeat;}

.menuFrame {
	height:489px; 
	width:193px; 
	background:#efefef url(../gfx/menub.gif) no-repeat; 
	float:left; /* nec for IE */
	margin: -18px 0px 0px 0px;
	border:0px;
	}

.menuFrame#websites {background:#efefef url(../gfx/tr.gif) no-repeat;}
.menuFrame#illustrate {background:#efefef url(../gfx/tr.gif) no-repeat; }

.menuContainer {
	overflow:auto;
	height:480px;
	font-size:75%;  /* text that is not part of a menu */
	text-align:left;
	line-height:140%;
	padding:10px 0px 0px 8px;
	}
	

.menuContainer p a {padding:0px 2px; background-color: #efefef; border:1px #efefef dotted; text-decoration:none}
.menuContainer p a:hover {padding:0px 2px; background-color: #efefff; border:1px #ff0000 dotted; text-decoration:none}

.mainmenu ul{ 
margin: 0;
padding: 0;
text-align:left;
}

.mainmenu li { /*Style for LI elements in general (excludes an LI that contains sub lists)*/
font-size:120%;
line-height:120%;
margin:0px;
padding:12px 0px 10px 0px; /*left was 40px */
border:0px;

/* border-bottom:1px #8888aa dotted; */
}

.mainmenu li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white url(../gfx/list.gif) no-repeat left center;
list-style-type: none;
margin-left:-47px;
font-size: 100%;
letter-spacing:1px;
text-align:left;
padding:0px;
padding-left: 35px;
margin-bottom: 3px;
}

.mainmenu li a {color:#666688; border-bottom:2px #efefef solid; font-weight:500;}
.mainmenu li a:hover {border-bottom:2px #4444bb dotted; color:#4444bb; text-decoration:none;}

.mainmenu li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: transparent url(../gfx/closed.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
margin:20px 0px 15px -51px;
letter-spacing:1px;
font-size:120%;
}

.mainmenu li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.mainmenu .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

.contentFrame { /*contains submenu (print, etc) + scrollbar + footer */
overflow:auto;
padding:0px;
margin:0px;
margin-top:-18px;
margin-left:-1px; /* so IE fits (accepts 737px instead of 736 + there's no gap in FF */
/* border:2px #ff0000 solid;*/
border:0px;
border-bottom:1px #ffffff solid;
height:490px;
text-align: center;
float:right; /*nec for FF after the menuFrame was added*/
width:734px; /*nec for IE 5 after the float was added*/
}

.floatLeft { /* when images are not 130 px or 75 px, also used for container for svk email img */
	text-align:center;
	float:left; 
	font-size:80%;
	margin: 0px 15px 0px 0px;
	padding: 0px 0px 0px 0px;
} 

.floatRight { /* when images are not 130 px or 75 px, also used for container for svk email img */
	text-align:center;
	float:right; 
	font-size:80%;
	margin: 0px 0px 0px 15px;
	padding: 0px 0px 0px 0px;
}


.alignLeft {text-align:left;}
.alignRight {text-align:right;}

.submenuContainer{ /* can't use a list because it interferes with the js on the mainmenu */
margin: 0px;
padding: 0px;
float:right;
display:block;
width:680px;
height:20px;
background-color:none;
margin:0px 4px 0px 0px;
}

.emailContainer {background:#none;}
.emailContainer img  /* for the svk email img only. new because floatLeft affects other things too much*/
	{
	float:left;
	padding: 0px 0px 0px 0px;	
	margin: -5px 0px 0px 0px;	
	border:1px #708090 solid;
	}


.emailContainer#websites img  /* nec because of diff. tween FF + IE in padding*/
	{
	float:left;
	padding: 0px 0px 0px 0px;	
	margin: 0px 0px 0px 0px;	
	border:0px;
	background:none;
	}

.submenuColumn { /* print, nl, acessibility, etc */
float:right;
padding:0px;
margin:0px 0px 0px 10px;
width:28px;
height:20px;
display:block;
}

.submenuColumn a { /* print, nl, acessibility, etc */
margin:0px;
width:28px;
height:20px;
display:block;
border-bottom:1px #00ffff dotted;
}

.submenuColumn a:hover {border:2px #ffffff solid;}

.submenuColumn#nav1w a, 
.submenuColumn#nav2w a, 
.submenuColumn#nav3w a,
.submenuColumn#nav4w a { 
	color:#ffffff; 
	font-size:50%; 
	border:1px #0000ff solid; 
	padding:0px 0px 0px 0px;
	}

.submenuColumn#nav1 a, 
.submenuColumn#nav2 a, 
.submenuColumn#nav3 a,
.submenuColumn#nav4 a { 
	color:#ffffff; 
	font-size:50%; 
	border:2px #996666 solid; 
	border-top:0px; 
	padding:0px 0px 0px 0px;
	}

.submenuColumn#nav1 a, .submenuColumn#nav1w a {background: #ffffff url(../gfx/nl_1.gif) no-repeat;}  /*most right*/
.submenuColumn#nav2 a, .submenuColumn#nav2w a {background: #ffffff url(../gfx/print_1.gif) no-repeat;}
.submenuColumn#nav3 a, .submenuColumn#nav3w a {background: #ffffff url(../gfx/contact_1.gif) no-repeat; }
.submenuColumn#nav4 a, .submenuColumn#nav4w a{background: #ffffff url(../gfx/nz_1.gif) no-repeat; }  /*nz english*/


.submenuColumn#nav1 a:hover, 
.submenuColumn#nav2 a:hover,
.submenuColumn#nav3 a:hover,
.submenuColumn#nav4 a:hover {
	text-decoration:none; border:0px; border:2px #ff612F solid; 
	border-top:0px;
	margin:0px;
	color:#ffffff;
	}

.submenuColumn#nav1 a:hover, .submenuColumn#nav1w a:hover  {background: #ffffff url(../gfx/nl_1_over.gif) no-repeat;}
.submenuColumn#nav2 a:hover, .submenuColumn#nav2w a:hover  {background: #ffffff url(../gfx/print_1_over.gif) no-repeat;}
.submenuColumn#nav3 a:hover, .submenuColumn#nav3w a:hover  {background: #ffffff url(../gfx/contact_1_over.gif) no-repeat;}
.submenuColumn#nav4 a:hover, .submenuColumn#nav4w a:hover  {background: #ffffff url(../gfx/nz_1_over.gif) no-repeat;}


.contentFrameInner 
	{/*to keep background uniform when scrolled over the email container */
background-color:#ffffff; /*- can't use this because it whites out text in IE when scrolling*/
text-align:center;
margin:20px 0px 0px 0px;
padding:0px;
}

.contentContainer { /* under title + intro - each image / text unit */
margin:10px 8px 8px 17px;
padding:10px 0px 0px 10px;
text-align:center;
clear:both;
}

.contentContainer .floatLeft img {margin: 0px 15px 0px 0px; border:1px #101100 solid;} /* bookmark img */
.contentContainer .floatLeft img a {border:1px #ee1100 solid;}

.twoColumnContainer { /*just the left column */
width:45%;
float:left;
margin:0px 0px 0px 0px;
padding:0px 10px 0px 0px;
border-bottom:1px #ff0000 solid;
}

.textContainer {  /* it wraps around the imagesColumn and it shouldn't - more margin needed on left*/
margin:0px 5px 0px 0px;
text-align:left;
/*border: 1px #ff0000 solid;*/
}

.textOnlyContainer {  /* for lots of text, no images or v. small images: bio, workflow */
margin:0px 20px 0px 20px;
text-align:left;
/*border: 1px #ff0000 solid;*/
}

.imagesColumn, .imagesColumn75px, .imagesColumn100px { /*captions under an image */
	text-align:center;
	float:left; 
	width:145px; 
	font-size:100%;
	margin: 0px 15px 5px 0px;
	padding: 0px 0px 0px 0px;
    	font-weight:700;
	/* border: 1px #ff00ff solid;*/
} 

.imagesColumn#notyet img {display:none;}

.imagesColumn img, .imagesColumn100px img  {
	border:2px #676767 solid;
	letter-spacing:1px;
	width:130px; /*height:100px; */ /* letrafic =124*/
	margin:0px 0px 0px 0px;
	padding:0px;
	background-color:#dddddd;
	}
.imagesColumn100px img {width:100px;}

.imagesColumn75px img  { /*has a top margin not in imagesColumn */
	border:2px #676767 solid;
	font-size:90%;
	letter-spacing:1px;
	width:75px;
	margin:20px 0px 0px 0px;
	padding:0px;
	background-color:#efefef;
	
	}

.imagesColumn p a, .imagesColumn75px p a{ /* captions under an image */
	display:block;
	margin: 0px;
	padding: 0px;
	background:none;
	color:#675DCd;
	letter-spacing:1px;
	border:0px;
	/*border:1px #ff6767 dotted;*/
} 

.imagesColumn p a:hover, .imagesColumn75px p a:hover {
	color:#ff0000; margin: 0px; padding: 0px;
	border:0px; text-decoration:none
		}

/*.imagesColumn p a:hover {border:2px #ff6767 solid;}*/ /* DOESN'T work */

/*.arrowup { WHITE covers text 
float:right;
width:20px;
} */

/*.arrowup, .arrowup a (width:20px; border:4px #ff00ff solid;)
.arrowup a:hover {border:4px #ff0000 dotted;}*/

h1 {
clear:both;
display:block;
color:#87729b;
font-size: 140%;
font-weight: bold;
letter-spacing: 2px;
margin: 50px 0px 15px 0px;
padding: 10px 0px 0px 0px;
text-align: center;
line-height: 1.em;
border-bottom:3px #efefef solid;
}


h2 { /* only the home page title*/
clear:both;
display:block;
color:#87729b;
font-size: 135%;
font-weight: bold;
letter-spacing: 2px;
margin: 58px 40px 15px 40px;
padding: -10px 0px -10px 0px;
text-align: center;
line-height: 1.em;
background-color:#FBF1DF;
}


h3, h4 { /* subtitles */
color:#87729b;
font-size: 115%;
font-weight: 600;
letter-spacing: 1px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 15px 0px;
line-height: 1.6em;
background-color:#ffffff;
display:inline;
}

h3.larger {/* main subtitles */
color:#B1AA99;
font-size: 140%;
letter-spacing: 2px;
}

.textContainer h3 {/* titles for content elements*/
	}

h4 { /* same as h3 but with margin  + block */
margin: 5px 0px 5px 0px;
padding: 0px 0px 5px 0px;
display:block;
}

p.intro {  /* bluish intro text */
color:#8855aa;
font-size: 100%;
font-weight: 500;
letter-spacing:1px;
/*text-align: center; */
line-height: 1.4em;
margin: 0px 0px 3px 0px;
padding: 0px 0px 0px 0px;
background-color:#ffffff;
}

p.intro span {  /*NOT USED messes up differing lengths*/
width:100px;
text-align:right;
}

p.intro a {text-decoration:none; border-bottom:1px dotted;}

p {  /*main text*/
color:#708093; 
font-size: 90%;
line-height: 1.2em;
display:inline;
font-weight: normal;
margin: 0px 0px 0px 0px;
padding: 0px 0px 2px 0px;
background-color:#ffffff;
}

p strong {
letter-spacing:1px;
font-weight: 600px;
}

p a {color:#675DC8; border-bottom:1px #675DC8 dotted; text-decoration:none}
p a:hover {color:#ff0000; border-bottom:1px #ff0000 dotted; text-decoration:none}

p.smaller {font-size:90%; font-weight:600;}

p.tinyCaption, { /* used as spacer for bookmarkers a name tag */
font-size:70%; 
margin:10px 0px 0px 0px;
text-align:left;
background-color:none;
border:0px;
}

p.tinyCaption a {color:#675DC8; border-bottom:1px #675DC8 dotted; text-decoration:none}
p.tinyCaption a:hover {color:#ff0000; border-bottom:1px #ff0000 dotted; text-decoration:none}

.shadow{  /*not used yet wwww.dynamic*/
border:1px solid silver;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}

.shadow_inner{
overflow:hidden;
position:absolute;
top: -1000px;
filter:alpha(Opacity=5); /* was 10 -modify to change the shade solidity/opacity, same as below*/
opacity:0.1; /*firefox 1.5 opacity*/
-moz-opacity:0.1; /*mozilla opacity*/
-khtml-opacity:0.1; /*opacity*/
z-index:10
}