@charset "UTF-8";

/* GLOBAL */
html, body{ height:100%; }
body{ font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size: 62.5%;margin: 0 auto; padding: 0; background:url(/assets/img/site/achtergrond.jpg); line-height:1.6em; color:#333; }
a img{ border:0; }
#test{ position:absolute; z-index:10; background-color:white; }
ul{ list-style: none; }
.no-global { display: none; }

#ONSgeg, #KLadr, #hrbest, #KLgeg, #goedkeuring, #datum, #hrbest, #hrover, #hrgeg, #hrgoed, #Offerte, #OPfoot, #BTW{ display: none;}
 
/* HEADING STYLE */
h1{ font-size: 1.4em; margin: .6em 0; }
h2{ font-size: 1.3em; }
h3{ font-size: 1.2em; }
h4{ font-size: 1.1em; }

/* KLEUREN */
.orange{ color: #ff7e00; }
.lightblue{ color: #5694fa; }
.darkblue{ color: #173e82; }
.white{ color:#fff; }
.orangeBG, .greyBG, .blueBG, .blueBG a, .greyBG, #acties ul li a, #shortContact a{ color:white; }
.orangeBG{ background-color: #ff7e00; }
.greyBG{ background-color: #666; }
.whiteBG{ background-color: #fff; }
.blueBG{ background-color: #5694fa; }

/* FIELDS */
.rounded{  -moz-border-radius: 5px;  -webkit-border-radius: 5px; }
.single, .single-side, .double, .double-side, .triple, .item{ float:left; border:1px #5694fa solid;margin:0 6px 6px 0; height:100%;}
.single{ width: 174px;  }
.single-side{ width: 181px; }
.double{ width: 317px; height:100%; padding:0 20px;}
.double-side{ width: 322px; height:100%; padding:0 20px;}
.triple{ width: 500px;  height:100%; padding:0 20px; }   
.noMR{margin-right:0;} 
.noB{ border:0;}
.noOverflow{ overflow: hidden;}
.noH{height:auto;  }
.help{ font-weight:bold; border:1px white solid; padding:0 2px; cursor:pointer; }
#content.page{ background-color:#fff;border:1px #5694fa solid; overflow:auto; }
#content.page a{ color:#0079c6; }
#content.page a:hover{ text-decoration:none; color:#345da5; }

/* ABSOLUUT POSITIONING */
#header, #container, #navigation, #content, #infoField, #panel{ position:absolute;  }

/* SUBMENU TOP */
#submenuTop{ position:absolute; width:420px; left:50%; z-index:10; }
#submenuTop li{ float: right; margin-left: 10px;}
#submenuTop a{ color:#999; text-decoration: none; display: block;}
#submenuTop a:hover{ color: #ff7e00; }

/* HEADER */
#header{ width: 1024px; height: 220px; left:50%; margin-left: -512px; top:5px; }
#logo{ position:relative; left:54px; top:35px; }
#header span{ position:absolute; right:55px; top:50px;  }

/* lOGIN */
#panel { height: 20px; display: none; text-align:center; z-index:50; width:100%;}
.slide { margin: 0; padding: 0; border-top: solid 4px #ff7e00; z-index:52; }
.btn-slide { display: block;} 
.active { float:right;}
#loginNAAM, #loginPASS{ background-color: #FFAF33; border: 1px #FFcF66 solid; color:white; width: 60px;}

/* CONTAINER */
#container{ width:918px; left:50%; margin-left:-459px; height:604px; top:70px; }

/* NAVIGATION */
#navigation{ top: 0px;z-index:2;width:100%;height:30px;}
ul.topnav { padding: 0px; margin: 0;float: left;width:100%;height:30px;font-size: 1.2em;background: url(../assets/img/site/navBut_up.gif) repeat-x;}
ul.topnav li {float: left;margin: 0; width:180px;position: relative; }
ul.topnav li.sep{ background: url(../assets/img/site/navBut_sep.gif); width:2px; height:30px;}
ul.topnav li.outer{ width:5px; height:30px;}
ul.topnav li a{ width:100%;height:24px;padding-top:6px;color: #fff;display: block;text-decoration: none;text-align:center;float: left; }
ul.topnav li a:hover{ background: url(../assets/img/site/navBut_down.gif) repeat-x;}
ul.topnav li ul.subnav { position: absolute;left: 0; top: 30px;background: #5694fa;margin: 0; padding: 0;display: none;width: 100%; border:1px #333 solid; }
ul.topnav li ul.subnav li{margin: 0; padding: 0 0 5px 0;clear: both;height:17px;width: 100%;border-bottom: 1px #73a7fb solid; text-align:left; font-size:0.9em; }
html ul.topnav li ul.subnav li a {float: left;width: 95%;height:20px; text-align:left; padding:3px 0 0 5%; }
html ul.topnav li ul.subnav li a:hover { background: #73a7fb; height:20px; }

/* CONTENT */
#content{ width:100%; height:404px; top:40px;}
#shortContact{ margin-top:0px; padding:10px; width:161px; float:right;}
#shortContact h3{ margin-top:0;}
#shortContact a{ color: white; } 
#shortFAQ{ width:161px; padding:0 10px; }

#bestelGEG th{ text-align:left; color: #5694fa; }
#dossier{ border-top: 1px #5694fa dotted; border-bottom: 1px #5694fa dotted; padding:5px 0; margin-bottom:10px;}

/* INFO VELD ONDERAAN */
#infoField{ height:150px; top:452px; width:100%; }

/* INDEX :: BANNER */
#actieBan{ height:200px; }

#banField{ position:absolute; top:0; left:185px; overflow:hidden; height:200px; width:546px; }
#banners{ position:absolute; }
#banners .banner{ float:left; cursor:pointer; position:absolute; width:546px;}
#banners .banner .bannerTekst{ position:absolute; z-index:5; border:1px gray solid; bottom:20px; width: 506px; margin:10px; padding:10px; background:url(../assets/img/site/bannerTekst.png); } 
#banners .banner a{ color:white; text-decoration:none; } 
#banners .banner .bannerTekst h2{ margin-top:0;}

#acties{ width:186px;overflow:hidden; position:absolute; height:194px; top:3px; }
#acties ul{ margin:5px; padding:0; position:absolute; width:175px; }
#acties ul li{ padding:10px 5px; margin-bottom:2px; background: #777; border:1px #888 solid; }
#acties ul li.actieActive{  border:1px #ff7e00 solid; background: #555;}
#acties ul li.Mover{ background-color:#888;}
#acties ul li a{ text-decoration:none; display:block; font-size:1.2em;}

#contactField{ float: right; width:165px; padding:10px; color:#a7c7fc;-moz-border-radius-topright:5px; -webkit-border-top-right-radius: 5px; } 
#contactField h3{ margin:0 0 0em; color:white;}
#contactField form{ margin:0; padding:0; }
#contactField p{ font-size:1.1em; margin: 0em 0; }
#contactField hr{ margin:0.1em; }
#contactField p.advalvas{ text-align:center; padding:0 2px; }

#catAanvraag{ float:left; text-align:center; padding:0 3px; cursor:pointer; }
#catAanvraag img{ padding:0; margin:0; position:relative; left:0; top:0;}

/* INDEX :: ITEMS */
#indexItems{ height:196px; margin-top:6px;}
#indexItems .image{ height:110px; }
#indexItems h3{ position:relative; margin:0; width:100%; text-align:center; padding: 1px 0;}
#indexItems a{text-decoration:none;}
#indexItems .whiteBG div{ margin-top:-15px; }
#indexItems .whiteBG p{ padding-top:10px; }
#indexItems .whiteBG .actie{ font-style:italic; font-weight:bold; font-size: 1.3em; text-align:center; color:red; }
#indexItems .whiteBG .tekst{ line-height:1.4em; color:#555; height:50px; margin:2px 10px;text-decoration:none;}
#indexItems .whiteBG a.link{  color: #5694fa; }   
#indexItems .whiteBG a.link:hover{ text-decoration:underline;color: #173e82;}  

/* CATALOOG VELD */
#cataloogField{ float:left; position:absolute; left:188px; overflow:hidden; padding:0; width:540px; }
#cat{ width:177px; height:100%; overflow:hidden; position:absolute; }
#cat ul{position:absolute; padding:0; margin:0; width:100%;}
#cat ul li{ padding:5px; margin-bottom:0; border-bottom: 1px #999 solid; }
#cat ul li.activeItem{ background-color: #78a6fd; }
#cat ul li a{ color:white; text-decoration:none; display:block;} 
#catItems{ width:370px; position:absolute; left:177px; overflow:hidden; height:120px; top:15px;}
#catItems div{ float:left; width:110px; margin-right:10px; }
#catItems div img { height:110px; } 
.catImage{ overflow:hidden;text-align:center; }



/* CONTACT */
#contactForm textarea{width:100%; height:80px;}
#contactForm dt{ width:100%; }
#contactForm label{ width:100%;padding-top:10px;}
#contactForm dd{ width:100%; margin:0; float:left; padding-bottom:10px;}
#contactForm #action-element{ text-align:right;}
#contactForm .errors{padding:0; margin:0;}
#contactForm .errors li{ padding:0; margin:0; }

/* BESTELITEMS */
#bestelItems{ position:absolute; right:0; height:150px; width:181px; margin-right: 0; border-color: #ff7e00; }
#bestelItems h3{ position:relative; margin:0; width:100%; text-align:center; padding: 1px 0; }
#bestelItems a:hover{ text-decoration:none; }
#bestelItems #buttons{ position:absolute; bottom:10px; width:100%; text-align:center; }

/* FAQ */
#FAQext{ width:161px; float:right; padding:10px; font-size:1.2em; text-align:center; }
#FAQext a{ color:white; } 
#FAQvragen{ margin:0; padding:0; margin-left:2em;}
#FAQvragen li{ padding:3px 0; }
#FAQvragen a:link, #FAQvragen a:visited { color:white; text-decoration:none; }
#FAQvragen a:hover{text-decoration:underline; }

/* CATALOOG */
#catZoek{ padding:0 10px; width:163px;}
#catZoek dt{ padding-bottom:3px; width:100%;}
#catZoek label{  color:white; font-size:1em; }
#catZoek dd{ margin-left:0; margin-bottom:10px;}
#catZoek dt#trefwoord-label{ border-top:1px white solid;padding-top:5px; }
#catZoek dd#trefwoord-element{ border-bottom:1px white solid;padding-bottom:5px;}
#catZoek #trefwoord{ width:100%; }
#catZoek dt#min-label, #catZoek dt#max-label{ padding-top:5px; width:65px; float:left; clear:left;}
#catZoek dd#max-element, #catZoek dd#min-element{ width:80px; float:left;}
#catZoek dd#min-element{ clear:right }
#catZoek #max, #catZoek #min{ width:50px; }
#catZoek #sort-element label{ width:60px; }

#cataloogItems{ position:absolute; left:188px; width:729px; height: 100%;}
#cataloogItems .item{ margin:0 6px 6px 0; float:left; width:237px; height:85px; background-color:#fff;}
#cataloogItems .item p{ margin:.2em; padding:0; }
#cataloogItems .noMR{ margin-right:0; }
#cataloogItems .item img{ float:left; margin:1%; max-height:75px; max-width:75px; margin:5px; }
#cataloogItems .item .artikel{ color: #09F; font-weight:bold; margin:0; }
#cataloogItems .item .kleuren span{ padding:1px 3px; color:white; font-size:0.9em;}
#cataloogItems .item .kleur{ cursor:pointer; }
#cataloogItems .item h2{ font-size:1.1em; margin:0; padding: .2em 0 0 0; }
#cataloogItems .item .meer{ text-align:center; float:right; }

#paginator{ position:absolute; bottom:0px; width:729px; left:188px; height:30px; font-size:1.2em; text-align:center; line-height: 30px;}
#paginator a{text-decoration:none;color:white;}
#paginator a:hover, #paginator .disabled{ color:#BCD4F7; }
#paginator a.page{ border: 1px white solid; text-decoration:none; padding:1px 3px;} 
#paginator a.page:hover{ border-color:#BCD4F7; }
#paginator .current{ background-color:white;padding:1px 3px; border: 1px white solid; }
ul#colorList{  margin:0; padding:0; width:100%;}
ul#colorList li{ width:50%; float:left; }
ul#colorList li span{ padding:0 5px; margin-right:5px; border:1px white solid; cursor:pointer;}
#artInfo h3{ margin-bottom:0.5em; clear:left; padding-top:1em; }
#artInfo h2{ margin-bottom:0.5em; color:white; }
#artInfo .tech th{ text-align:left; vertical-align:top;}
#artInfo .taal{ font-size:0.9em; line-height:1.3em;}
#staffel{ width:100%; font-size:1.1em; margin-top:1em; border:1px white solid;}
#staffel th{ text-align:left; }
#staffel th, #staffel td{ border-bottom:1px #83afff solid; border-right:1px #83afff solid; padding-left:1em;}
.prijsInfo{ cursor:pointer; text-decoration:underline;}
#OFopm{ display:none; }
#OFstock{ display:none; }

#textielInfoForm dt{ width:90px; float:left; clear:left;} 
#textielInfoForm dd{ float:left; clear:right; margin-left:10px; border:1px red solid; } 
#textielInfoForm textarea{ height:100px; width: 150px;}
#contactInfo textarea{ width: 200px; height:100px;}
#textielInfoForm #aantal-label, #textielInfoForm #aantal-element, #textielInfoForm #artikel-label, #textielInfoForm #artikel-element{ margin-top:15px;}
#textielInfoForm #naam, #textielInfoForm #telefoon, #textielInfoForm #email, #textielInfoForm #aantal,#textielInfoForm #kleuren,#textielInfoForm #bericht,#textielInfoForm #artikel,  #contactInfo #naam, #contactInfo #straat,#contactInfo #gemeente,#contactInfo #telefoon,#contactInfo #email,#contactInfo #onderwerp,  #contactInfo #bedrijf{ width: 200px;}

/* TREFWOORD SEARCH */
#trefwoord{ width:100px; border:1px #999 solid; background-color:#eee; padding:5px 0; }
#zoek{ width:50px; }

/* BESTELLIJST DIALOG ARTIKEL */
#dialog-artikel #top{ width:100%; border:1px green solid; }
#dialog-artikel #top img{ width:50%; border:1px green solid; }
#dialog-artikel #form{  color:white; font-size:1.1em;width:42%; float: left; padding:2.5%; }
#dialog-artikel #ber{ float: left; margin-left:2.5%; margin-top:0; padding-top:0; width:47%; }
#BerekenPrijsForm #aantal{ width:40px; }
#berekenPrijs{ width:100%;}
#BerekenPrijsForm td{ white-space:nowrap;}
#berekenPrijs #totaal{  font-size:1.5em; border-top:1px #5694fa solid; }
#berekenPrijs #btw{ padding-top:10px; }
#berekenPrijs #alltotaal{padding-top:10px;}
#berekenPrijs th{ text-align:left;}
#berekenPrijs th.padTop{ padding-top:10px;}
#berekenPrijs th.sub{ padding-left:15px; font-weight:normal;}
#berekenPrijs .right{ text-align:right;}

#BerekenPrijsForm #drukkeuze{ float:left; }
.hint{ margin:0; padding:0; width:15px; float:left;margin-top:2px;}
.hint span{ border:1px white solid;padding:0 2px;}


/* GEGEVENS */
#gegevens{ margin-left:188px; }
#gegevens td{  font-size:1.1em; padding:2px 0 0 10px;}
#gegevens #bericht{ width:230px; height:130px;}
#gegevens label.required{ color: #5694fa;width:80px; }
#gegevens label.optional{ color: #666;width:80px; }
#gegevens #vorige, #gegevens #action{ float:right;}
#gegevens #action{ margin-right:30px;}

.bevBtn{ text-align: right; width:100%;}
.bevestig{ height:auto; }

/* JQUERY DIALOG */
#dialog label{ position:relative;top:8px;width:100%;text-align:right; }
#dialog dt{ padding: 3px 0;width:70px;padding-top:5px;text-align:right;padding-right:5px;float:left; }
#dialog dd{ padding: 3px 0; margin-left:75px; }
#dialog #form{ min-width: 230px; width:50%; float: left; }

#dialog #berekenArtikel .berekenPrijs, #dialog #berekenDruk .berekenPrijs{ width: 80px; }
#dialog input.text { margin-bottom:12px; width:60%; padding: .4em; }
#dialog fieldset { padding:0; border:0; margin-top:25px; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
#dialog #berekenVeld{ background-color:#747474; }

#dialog-stock td.stock{ text-align:right;font-weight:bold; }
#dialog-stock th{ border-bottom:1px #5694fa solid; }
#dialog-stock td.color{ border: 1px #CCC solid; margin-bottom:5px;}
#dialog-stock td.lightblue{ text-align:center; }

/* REFERENTIES */
#referenties{ position:absolute; height:100%; text-align:center; width: 181px; margin-right:0; right:0; }
#referenties img{ position:absolute; left:50%; top:50%; margin-left: -50px; margin-top: -30px;}
#referenties ul{ list-style:none; }
#referenties ul li{float:left;} 

/* CONTACT */
#contactForm dt{ padding-top:2px;width:60px;float:left; }
#contactForm dd{ width:250px;float:left; }
 

/* PAGINATION */
.double .pagination{ text-align:center; font-weight:bold; border-top:1px #5694fa solid; padding-top:3px;}
.double .pagination span.page{ font-size:1.2em;}
.double .pagination a{ color: gray; text-decoration:none; font-size:1.1em;  }
.double .pagination a:hover{ color: #5694fa; text-decoration:underline; font-size:1.1em; }

/* BESTELLIJST */
#stappen{ float:left; width:183px; margin-right:6px; position:absolute; z-index:1; }
#stappen h4{ background-color:#CCC; padding: 1.4em 0; text-align:center; margin:0 0 0.5em 0; width:180px; color:white; font-size:1.1em; float:left;} 
#activeStap{ width:250px;display:block;float:left;}
#stapPijl{ position:relative; left:-2px; top:1px;}
#stappen h4 a{ color:white;}
#stappen h4.act{ background-color: #5694fa; color:white;}
#bestellijst{ margin-left:188px;}
#bestellijst #geg{ text-align:left; width:100%; }
#bestellijst .aanpassenCel{ text-align:right; }
#bestellijst .extraGEG{ padding:10px; margin:1em 0;}
#bestellijst .extraGEG th{ text-align:left;}
#bestellijst p { margin: 1em 2%; }
#bestellijst #lijst{ width:100%;}
#bestellijst #lijst th{ background:#5694fa; color:white;}
#bestellijst #lijst td{ text-align: right; padding:5px 0; border-bottom:1px #5694fa solid; color:#999; }
#bestellijst #lijst td.noBorder{ border: 0;}
#bestellijst #lijst td.dblBorder{ border-top:2px grey solid; padding-top:15px;}
#bestellijst #lijst td.omschrijving{ text-align: left; padding-left:10px; font-weight:bold; color: #5694fa; }
#bestellijst #lijst td.subText{ color: #5694fa;  }
#bestellijst #lijst td.sub{ font-size:1.1em; font-weight:bold; color:#03F; }
#bestellijst #lijst tr.artRow{ cursor:pointer; }
#bestellijst p.buttons{ position:absolute; width:500px;; bottom:20px; text-align:right;}

/* UPLOADIFY */
#Uinlog{ padding: 0 10px; width:164px;}
#Uinlog h3{ } 
#Uinlog dt{ margin: 5px 0 0 0;width:100%;} 
#Uinlog dd{ margin:0; }

.uploadifyQueueItem { font: 11px Verdana, Geneva, sans-serif; border: 2px solid #E5E5E5; background-color: #F5F5F5; margin-top: 5px; padding: 10px; width: 300px; }
.uploadifyError { border: 2px solid #FBCBBC; background-color: #FDE5DD; }
.uploadifyQueueItem .cancel { float: right; }
.uploadifyProgress { background-color: #FFFFFF; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #C5C5C5; border-bottom: 1px solid #C5C5C5; margin-top: 10px;width: 100%;}
.uploadifyProgressBar{background-color: #0099FF; width: 1px; height: 3px;}


/* SITEMAP */
#siteMap, #siteMap li ul{ padding:0; margin:0; }
#siteMap li.outer{ width:15px; }
#siteMap li.sub{ float:left; width:175px; font-size:1.1em; color: #5694fa;}
#siteMap li.sub li{ padding-left:0; }
#siteMap li.sub li a{ color: #5694fa; text-decoration:none; }
#siteMap li.sub li a:hover{ text-decoration:underline; } 


/* PANTONE */
#pantone{ width: 630px; height:100%; overflow:auto; float:left; }
#pantone div{ width: 80px; float:left; margin:2px; border:1px grey solid; }
#pantone div span{ width:80px; display:block; text-align:center; }

/* DISCLAIMER */
#disclaimer{ position:absolute; bottom:-20px; right:0; font-size:0.9em; }
#disclaimer a{ color:#999; }