/*---------------------------------------------------------------- GENERAL STUFF */
body, html, h1, h2, h3, h4, h5, form, p, a, img, ol, ul {
 margin: 0;
 padding: 0;
}

body {
 color: #000;
 font: 12px/16px Arial, Helvetica, Tahoma, Verdana, "Trebuchet MS", Myriad Pro, "Lucida Grande", sans-serif;
 background: #eee url(../kp_img/bg.gif);
}

html {
 overflow-y: scroll;
}

ol, ul {
 list-style: none;
}

img {
 border: none;
}

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

div.clearfix {
 content: ".";
 clear: both;
 display: block;
 height: 0;
 visibility: hidden;
}

div.cleardevider {
 content: ".";
 clear: both;
 display: block;
 height: 15px;
 visibility: hidden;
}

.hideme {
 visibility: hidden;
}

/*---------------------------------------------------------------- ALGEMENE LINKS */

a:active,a:link,a:visited {  
 color: #00aed8;
 text-decoration: none;	 
 font-weight: normal;
 outline: none;
}

a:hover {
 color: #000;
 text-decoration: none;
 outline: none;
}

a.more {
 display: block;
 text-align: right;
 margin-top: 5px;
 cursor: pointer;
}

/*---------------------------------------------------------------- ALGEMENE OPMAAK */

h1 {
 display: none;
}

#mainwrap {
 width: 100%;
 background: #fff url(../kp_img/topbar.gif) center 0 no-repeat;
}

#subwrap {
 display: block;
 background: url(../kp_img/botbar.gif) bottom center no-repeat;
}

#topwrap {
 width: 968px;
 height: 440px;
 margin: 0 auto;
 background: url(../kp_img/shield.gif) 0 140px no-repeat;
 position: relative;
}

.midwrap {
 display: block;
 width: 848px;
 min-height: 400px;
 margin: 0 auto;
}

.midwrap:after {
 content: ".";
 clear: both;
 display: block;
 height: 0;
 visibility: hidden;
}

#footwrap {
 clear: both;
 display: block;
 width: 848px;
 margin: 0 auto;
 padding: 110px 0 30px 0;
 text-align: right;
 font-size: 11px;
 color: #00aed8;
}

h2 {
 font-size: 26px;
 font-style: italic;
 font-family: Georgia, "Lucida Grande", sans-serif;
 margin-bottom: 30px;
 font-weight: normal;
 text-transform: lowercase;
 padding-left: 2px;
}

/*---------------------------------------------------------------- LANGNAV OPMAAK */

ul#langnav {
 position: absolute;
 top: 250px;
 left: 0px;
}

ul#langnav li a {
 display: block;
 width: 40px;
 line-height: 30px;
 text-indent: -9999px;
 margin-bottom: 8px;
}

ul#langnav li#eng a {
 margin-left: 10px;
}

/*---------------------------------------------------------------- MAINNAV OPMAAK */

ul#mainnav {
 float: left;
 position: absolute;
 top: 300px;
 left: 75px;
}

ul#mainnav li {
 float: left;
}

ul#mainnav li a {
 float: left;
 line-height: 25px;
 width: 58px;
 margin-right: 5px;
 text-indent: -9999px;
 background: url(../kp_img/menu_eng_stripe.gif) no-repeat;
}

ul#mainnav li#home a {
 background-position: 0px -20px;
}
ul#mainnav li#prod a {
 width: 75px;
 margin-top: -2px;
 background-position: -60px -20px;
}
ul#mainnav li#proj a {
 width: 70px;
 margin-top: -4px;
 background-position: -140px -20px;
}
ul#mainnav li#about a {
 width: 70px;
 margin-top: -4px;
 background-position: -140px -20px;
}
ul#mainnav li#cont a {
 width: 68px;
 margin-top: -7px;
 background-position: -215px -20px;
}
ul#mainnav li#shop a {
 margin-top: -10px;
 background-position: -285px -20px;
}
/*--- hover states ---*/
ul#mainnav li#home a:hover, ul#mainnav li#home a.act {
 background-position: 0px 0px;
}
ul#mainnav li#prod a:hover, ul#mainnav li#prod a.act {
 background-position: -60px 0px;
}
ul#mainnav li#proj a:hover, ul#mainnav li#proj a.act {
 background-position: -140px 0px;
}
ul#mainnav li#about a:hover, ul#mainnav li#about a.act {
 background-position: -140px 0px;
}
ul#mainnav li#cont a:hover, ul#mainnav li#cont a.act {
 background-position: -215px 0px;
}
ul#mainnav li#shop a:hover, ul#mainnav li#shop a.act {
 background-position: -285px 0px;
}

/*---------------------------------------------------------------- COLLAGE OPMAAK */

span#collage {
 position: absolute;
 top: 35px;
 right: 20px;
}

/*---------------------------------------------------------------- KOLOM OPMAAK */

div.col {
 display: block;
 float: left;
 margin-left: 16px;
 min-height: 20px;
}

div.one {
 width: 200px;
}

div.two {
 width: 416px;
}

div.four {
 width: 848px;
}

div.rcol {
 width: 350px;
 margin-left: 80px;
}

div.col h3 {
 text-transform: uppercase;
 font-size: 12px;
 margin-bottom: 5px;
}

div.col p {
 line-height: 1.4em;
 margin-bottom: 20px;
}

span.small {
 font-size: 10px;
}

div.wrapper {
 clear: both;
 display: block;
 width: 100%;
 float: left;
 margin-bottom: 30px;
}


.specs ul {

}
.specs li {
 list-style:disc;
 margin-left: 20px;
}


/*---------------------------------------------------------------- INDEX OPMAAK */

div.indexmid {
 width: 880px;
}

div.wdg {
 clear: both;
 display: block;
 width: 100%;
 float: left;
 margin-bottom: 15px;
 padding-bottom: 15px;
 border-bottom: 1px dotted #ddd;
}

.wdg h2 {
 display: block;
 width: 200px;
 padding-left: 10px;
 line-height: 49px;
 font-style: italic;
 font-family: Georgia, "Lucida Grande", sans-serif;
 font-weight: normal;
 font-size: 20px;
 background: url(../kp_img/smallshieldhome.png) left top no-repeat;
 margin-bottom: 10px;
}

div.wdg p {
 margin-bottom: 10px;
}

div.indexmid h2 em {
 font-size: 12px;
 font-style: normal;
 font-weight: bold;
 font-family: Arial, Helvetica, Tahoma, Verdana;
}

div.newswrap {
 display: block;
 width: 191px;
 height: 325px;
 float: left;
 position: relative;
 margin: -32px 0 0 16px;
 padding-top: 32px;
}

div.newswrap h2 {
 top: -24px;
 left: 0; 
}

div.newswrap p {
 padding-bottom: 15px;
}

div.newswrap a.more {
 clear:both;
 display: block;
 width: 100%;
 position: absolute;
 bottom: 0;
 right:0;
}

div.nomarg {
 margin-left: 0;
}

.blue h2 {
 color: #00b1ce;
}
.green h2 {
 color: #007c47;
}
.bordeaux h2 {
 color: #c22024;
}
.lime h2 {
 color: #9fcf4d;
}

/*---------------------------------------------------------------- SPLITCOLUMNS */

div.splitcol .column {
 display: block;
}

div.splitcol .first {
 margin-right: 13px;
}

/*---------------------------------------------------------------- PRODUCTLIJST */

ul.prodlist {
 clear: both;
 float: left;
 margin: -15px 0 -3px -18px;
}

ul.prodlist li {
 display: block;
 width: 198px;
 height: 218px;
 float: left;
 margin: 16px 0 0 16px;
 position: relative;
 border: 1px solid #e9eae5;
 border-top: none;
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px;
 cursor: pointer;
 overflow: hidden;
}

ul.prodlist li h3 {
 display: block;
 width: 200px;
 line-height: 49px;
 text-align: center;
 text-transform: capitalize;
 font-style: italic;
 font-family: Georgia, "Lucida Grande", sans-serif;
 font-weight: normal;
 font-size: 13px;
 background: url(../kp_img/smallshield.png) left top no-repeat;
 position: absolute;
 top: 0;
 left: -1px;
 z-index: 100;
}

ul.prodlist li img {
 width: 198px;
 margin: 20px 0 0 0;
}

/*---------------------------------------------------------------- PRODUCT OPMAAK ALGEMENE PAGINA */

div.fixcol {
 position: relative;
 margin-bottom: 30px;
}

span.prodimg {
 display: block;
 width: 200px;
 position: relative;
 margin-bottom: 0px;
 cursor: pointer;
}

span.prodimg em {
 display: block;
 width: 200px;
 line-height: 49px;
 text-align: center;
 text-transform: capitalize;
 font-style: italic;
 font-family: Georgia, "Lucida Grande", sans-serif;
 font-weight: normal;
 font-size: 13px;
 background: url(../kp_img/smallshield.png) left top no-repeat;
 position: absolute;
 top: 0;
 left:0;
}

span.prodimg img {
 border: 1px solid #e9eae5;
 margin: 20px 0;
}

div.fixcol a {
 display: block;
 text-align: right;
 position: absolute;
 bottom: 0;
 right:0;
}

/*---------------------------------------------------------------- PRODUCT OPMAAK */

span.hwrap {
 display: block;
 float: left;
 width: 100%;
 line-height: 24px;
 position: relative;
}

span.hwrap h2 {
 float: left;
}

span.hwrap em {
 font-style: normal;
 display: block;
 float: left;
 margin: 5px 5px 0 5px;
 color: #999;
}

span.hwrap span {
 clear:both;
 display: block;
 float: left;
 margin: -20px 0 10px 0;
}

a.goback {
 position: absolute;
 right: 0;
 top: 0;
 color: #000;
}
a.goback:hover {
 position: absolute;
 right: 0;
 top: 0;
 color: #00aed8;
}

span.hwrap a.act {
 color: #000;
 text-decoration: line-through;
}

/*---------------------------------------------------------------- IMAGELIST OPMAAK */

ol.thumbs {
 float: left;
 margin: -16px 0 20px 0;
}

ol.thumbs li, ol.thumbs li a {
 float: left;
}

ol.thumbs li {
 margin: 16px 16px 0 0;
}

ol.thumbs li.no_r_marg {
 margin-right: 0;
}

ol.thumbs li img {
 border: 1px solid #e9eae5;
}

/*---------------------------------------------------------------- CONTACT OPMAAK */

input, textarea {
 padding: 3px 0px 2px 3px;
 font-family: arial;
 font-size: 12px;
 border: 1px solid #999;
 color: #888;
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px;
}

form#frm_cnt li,form#frm_info li {
 margin-bottom: 6px;
}

form#frm_cnt input {
 width: 411px;
}

form#frm_cnt textarea {
 width: 411px;
 height: 120px;
}

form#frm_cnt input.frmzip {
 width: 111px;
}
form#frm_cnt input.frmcity {
 width: 285px;
 margin-left: 10px;
}

/*------------------------*/

form#frm_subscr input {
 width: 260px;
 padding: 3px 0px 3px 3px;
}

form#frm_subscr select {
 width: 260px;
 margin-bottom: 8px;
}

/*------------------------*/

form li#subm {
 text-align: right;
}

form input#submit {
 width: 120px;
 padding: 2px 0px 2px 3px;
 cursor: pointer;
 background: #d1d1d1;
}

form li.loading {
 background: url(../kp_img/ajax.gif) left center no-repeat;
}

div#output {
 clear: both;
 margin-top: 10px;
}

/*----------------------------------------------------- PAGENAVIGATOR */
.pagenav {
 clear: both;
 font-size: 12px;
 text-align: right;
 margin-bottom: 20px;
 border-top: 1px solid #eee; 
 border-bottom: 1px solid #eee;
 padding: 4px 0;
 color: #888;
}

.pagenav a:link, .pagenav a:visited, .pagenav a:active {
 padding: 0 4px;
 margin-right: 2px;
 color: #888;
}

.pagenav a:hover {
 text-decoration: none;
 color: #00aed8; 
}

.pagenav b {
 padding: 0 4px;
 margin-right: 2px;
 color: #00aed8;
}

/*----------------------------------------------------- INFO AANVRAAG BIJ PRODUCTEN */
#wgd-info {
 clear: both;
 display: block;
 width: 200px;
 float: left;
}
#wgd-info input.txt, #wgd-info textarea {
 width: 195px;
}
#wgd-info textarea {
 height: 90px;
 margin-top: 2px;
}