/*********** BODY ***********/
html, form, p {
 margin: 0;
 padding: 0;
}

h1,h2,h3,h4,h5 {
 padding: 0;
 margin: 0;
}

body {
 margin: 0;
 padding: 0;
 
 font-family: "Trebuchet MS", Arial, Verdana, Tahoma, "Lucida Grande", sans-serif;
 font-size: 12px;
 line-height: 1.5em;
 color: #333;
}

ol, ul {
 padding: 0;
 margin: 0;
 list-style: none;
}

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

hr {
 clear:both;
 visibility: hidden;
 height:0;
 margin: 0;
 padding: 0;
}

/*----------------------------------------------------------------  LINKS */
a:active,a:link,a:visited {  
 color: #333;
 text-decoration: none;	 
 font-weight: normal;
}
a:hover {
 text-decoration: none;
}

a.textlink:active,a.textlink:link,a.textlink:visited {  
 color: #333;
 text-decoration: underline;	 
 font-weight: normal;
}
a.textlink:hover {
 text-decoration: underline;
 background-color: yellow;
}

/*---------------------------------------------------------------- MAIN LAYOUT STUFF */

div#mainwrap {
 display: block;
 width: 960px;
 background: #fff url(../img/back_hand.jpg) bottom left no-repeat;
}

div#headwrap {
padding: 30px 0 40px 10px;
background: url(../img/circle_outnow.gif) 844px 16px no-repeat;
}

h1 {
display: block;
background: url(../img/h1.gif) no-repeat;
height: 42px;
text-indent: -9999px;
}

div#col_r {
 width: 470px;
 float: right;
 min-height: 670px;
 padding-left: 10px;
}

div#col_r h2, div#col_r h3 {
 display: block;
 height: 40px;
 text-indent: -9999px;
}

div#col_r p {
 margin: 0 10px 26px 0;
}

div#foot {
 clear: both;
 display: block;
 height: 22px;
 width: 470px; /*--- deze + de padding is samen totale breed ---*/
 padding: 3px 0 0 490px;
 background-color: #000;
 
 font-size: 10px;
 color: #fff;;
}

div#foot a {
 color: #fff;
}

div#foot a:hover {
 text-decoration: underline;
}


/*---------------------------------------------------------------- MENU */

ul#menu {
 display: block;
 width: 480px;
 height: 650px;
 float: left;
}

ul#menu li {
 display:block;
 height: 27px;
 margin-bottom: 13px;
}

ul#menu li a {
 display:block;
 width: 332px;
 height: 27px;

 background: url(../img/menu.gif);
 text-indent: -9999px;
}

/*---- setting the background for menuitems */

ul#menu li#frs a { /*dont ask me why but for some reason we need this fake one*/
 background-position: 0 0;
}

ul#menu li#abt a {
 background-position: 0 0;
}

ul#menu li#exam a {
 background-position: 0 -40px;
}

ul#menu li#prod a {
 background-position: 0 -80px;
}

ul#menu li#buy a {
 background-position: 0 -120px;
}

ul#menu li#cont a {
 background-position: 0 -160px;
}

ul#menu li#link a {
 background-position: 0 -200px;
}


/*---- setting the background hover state AND the active state for menuitems */

ul#menu li#frs a:hover, ul#menu li#frs a.act { /*dont ask me why but for some reason we need this fake one*/
 background-position: -332px 0;
}

ul#menu li#abt a:hover, ul#menu li#abt a.act {
 background-position: -332px 0;
}

ul#menu li#exam a:hover, ul#menu li#exam a.act {
 background-position: -332px -40px;
}

ul#menu li#prod a:hover, ul#menu li#prod a.act {
 background-position: -332px -80px;
}

ul#menu li#buy a:hover, ul#menu li#buy a.act {
 background-position: -332px -120px;
}

ul#menu li#cont a:hover, ul#menu li#cont a.act {
 background-position: -332px -160px;
}

ul#menu li#link a:hover, ul#menu li#link a.act {
 background-position: -332px -200px;
}


/*---------------------------------------------------------------- RIGHT COLUMN STUFF */

/*------------- setting al the headers (h2) ---*/
body.abt div#col_r h2 {
 background: url(../img/ttl_about.gif) no-repeat;
}

body.exam div#col_r h2 {
 background: url(../img/ttl_exam.gif) no-repeat;
}

body.prod div#col_r h2 {
 background: url(../img/ttl_co.gif) no-repeat;
}

body.buy div#col_r h2 {
 background: url(../img/ttl_buy.gif) no-repeat;
}

body.cont div#col_r h2 {
 background: url(../img/ttl_cont.gif) no-repeat;
}

body.link div#col_r h2 {
 background: url(../img/ttl_links.gif) no-repeat;
}

body.link div#col_r h3 {
margin-top: 16px;
background: url(../img/ttl_links2.gif) no-repeat;
}

body.thanks div#col_r h2 {
 background: url(../img/ttl_thanks.gif) no-repeat;
}

body.oops div#col_r h2 {
 background: url(../img/ttl_oops.gif) no-repeat;
}

body.comments div#col_r h2 {
 background: url(../img/ttl_comments.gif) no-repeat;
}

/*------------- list used for frontpage ---*/

div.ulbase {
	margin: 0;
	padding: 0;
	}

ul.specs {
 padding: 0;
 margin: 0 0 36px 0;
}

ul.specs li {
 margin: 2px 0 1px 0;
 padding: 0 0 0 18px;
 background: url(../img/bullet.gif) no-repeat;
 background-position: 6px 4px;
}

/*------------- list used for books / links ---*/

ul.multicol {
 float: left;
 width: 480px;
 margin-left: -10px;
}

ul.multicol li {
 display: block;
 width: 140px;
 float: left;
 margin: 0 10px 20px 10px;
 display: inline; /*For IE*/
}

ul.multicol li a {
 padding: 0;
}

/* --- links ---*/

ul.links li a {
 display: block;
}

ul.links li a:hover {
 background-color: yellow;
}

/* --- books ---*/

ul.books img {
 display: block;
 margin-bottom: 10px;
}

ul.books a:link, ul.books a:active, ul.books a:visited {
 font-weight: bold;
 padding: 3px 8px;
 background-color: yellow;
}

ul.books a:hover {
 color: yellow;
 background-color: black;
}

ul.books a.imglink:active,ul.books a.imglink:link, ul.books a.imglink:visited {  
 background: none;
 border: none;
 margin:0;
 padding:0;
}
ul.books a.imglink:hover {
 background: none;
 border: none;
 margin:0;
 padding:0;
}

/*------------- examplepage ---*/

div.inside img {
 margin-bottom: 10px;
}

div.inside a {
 margin-right: 10px;
 padding: 3px 14px;
 background-color: yellow;
}

div.inside a:hover {
 color: yellow;
 background-color: black;
}

span.quote {
 display: block;
 margin: 0 0 10px 0;
 padding: 0;
 font-weight: normal;
}

/*------------- contact stuff and adresslist ---*/
span.dwn {
 display: block;
 margin-top: 12px;
}

span.dwn a {
 font-weight: bold;
 padding: 3px 18px;
 background-color: yellow; 
}

span.dwn a:hover {
 color: yellow;
 background-color: black;
}

ul#adr {
 margin-top: 20px;
}

span.blck b {
 font-weight: bold;
 padding: 2px 10px 2px 10px;
 background-color: yellow; 
}


/*---------------------------------------------------------------- FORM STUFF */

form {
 width: 400px;
}

form h3 {
 font-size: 12px;
 margin-bottom: 5px;
}

form li {
 clear: both;
 margin-bottom: 8px;
}

form li input, form li textarea {
 border: 1px solid #999;
 padding: 2px 4px;
}

form li input {
 width: 225px;
 float: left;
 margin-right: 4px;
}

form li input:focus, form li textarea:focus {
 background-color: yellow;
}

form li b {
 font-weight: normal;
}

form li textarea {
 width: 100%;
 height: 150px;
}

form li a {
 float: left;
 font-weight: bold;
 padding: 3px 18px;
 background-color: yellow;
 cursor: pointer;
}

form li a:hover {
 color: yellow;
 background-color: black;
}

span#loader {
 visibility: hidden;
 float: right;
}

div#err {
 clear: both;
 display: none;
 margin: 10px 0 0 0;
 padding: 4px;
 background-color: yellow;
}

div#err b {
 display:block;
 text-align: center;
 font-weight: normal;
}