/*-----------------------------------------------------------------------------
Website: Uniprint
Auteur: Webatvantage.be
Laatst gewijzigd: 15-02-2010
-----------------------------------------------------------------------------*/

/*------------------------------- START HTML / BODY -------------------------------*/
html { overflow: -moz-scrollbars-vertical; }
html,body, #container { height: 100%; }
html, body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #666; line-height: 18px; text-align: center; }
body { background: #f2f2f2 url(../Graphics/Body_bg.gif) repeat-x top left; }
body > #container { height: auto; min-height: 100%; }
/*------------------------------- END HTML / BODY -------------------------------*/

/*------------------------------- START HEADINGS -------------------------------*/
h2 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #7b7b7b; }
h2 span { font-size: 11px; font-weight: normal; }
h3 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #00acee; margin: 0 0 10px 0; }
h4 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #666; margin: 0 0 10px 0; }
/*------------------------------- END HEADINGS -------------------------------*/

/*------------------------------- START LINKS -------------------------------*/
a:link, a:visited, a:hover, a:active {}
/*------------------------------- END LINKS -------------------------------*/

/*------------------------------- START CONTAINER -------------------------------*/
#container { width: 960px; margin: 0 auto; text-align: left; }
/*------------------------------- END CONTAINER -------------------------------*/

/*------------------------------- START HEADER -------------------------------*/
#header { position: relative; width: 960px; height: 200px; background: url(../Graphics/Header_bg.png) repeat-x bottom left; }

#header #top { height: 30px; line-height: 30px; text-align: right; color: #fff; }
#header #top a:link,
#header #top a:visited,
#header #top a:active { color: #fff; text-decoration: none; }
#header #top a:hover { color: #fff; text-decoration: underline; }

/* Logo */
#header a#logo { position: absolute; top: 58px; left: 20px; display: block; width: 201px; height: 118px; text-indent: -9999px; background: url(../Graphics/Logo.png) no-repeat top left; }

/* Navigation */
#header ul#navigation { position: absolute; bottom: 43px; left: 280px; width: 680px; height: 25px;  }
#header ul#navigation li { display: inline; }
#header ul#navigation li a { float: left; display: block; height: 25px; padding-right: 10px; color: #666; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 11px; font-weight: bold; text-decoration: none; text-transform: uppercase; }
#header ul#navigation li a:hover { color: #269cce; }
#header ul#navigation li a span { display: block; line-height: 16px; padding: 5px 0 5px 11px; }

#header ul#navigation li a.active { background: transparent url(../Graphics/Navigation_bg.gif) no-repeat scroll top right; color: #fff; }
#header ul#navigation li a.active span { background: transparent url(../Graphics/Navigation_span_bg.gif) no-repeat; color: #fff; }
/*------------------------------- END HEADER -------------------------------*/

/*------------------------------- START SIDEBAR -------------------------------*/
#main #sidebar { float: left; width: 230px; margin: 0 30px 0 0; }
#main #sidebar h2 { margin: 20px 0 10px 5px; }
#main #sidebar .divider { width: 230px; height: 1px; margin: 10px 0; background: url(../Graphics/Sidebar_divider.gif) no-repeat; }

#main #sidebar ul li { display: block; width: 230px; height: 22px; line-height: 22px; border-top: 1px solid #ccc; }

#main #sidebar ul li.first { border-top: none; }
#main #sidebar ul li.last { border-bottom: none; }
#main #sidebar ul li a:link,
#main #sidebar ul li a:visited,
#main #sidebar ul li a:active { display: block; width: 230px; height: 20px; line-height: 20px; background: url(../Graphics/Sidebar_arrow.png) no-repeat 5px 7px; border-top: 1px solid #f2f2f2;  border-bottom: 1px solid #f2f2f2; text-decoration: none; text-indent: 20px; color: #333; overflow: hidden; }
#main #sidebar ul li a:hover, #main #sidebar ul li a.active { background: #c2c2c2 url(../Graphics/Sidebar_arrow.png) no-repeat 5px 7px; color: #333; }
#main #sidebar ul li a.last { border-bottom: none; }

/* Aanmelden */
#main #sidebar #aanmelden_top { width: 230px; height: 10px; background: url(../Graphics/Aanmelden_top.gif) no-repeat top left; }
#main #sidebar #aanmelden_bottom { width: 230px; height: 10px; background: url(../Graphics/Aanmelden_bottom.gif) no-repeat top left; }
#main #sidebar #aanmelden { padding: 0 10px; background: #c2c2c2 url('../Graphics/Aanmelden_bg.gif') repeat-y top left; color: #4D4D4D; overflow: hidden; }

#main #sidebar #aanmelden form { margin: 5px 0 0 0; }
#main #sidebar #aanmelden form p { margin: 0 0 5px 0; }
#main #sidebar #aanmelden form .input { width: 200px; background: #e3e3e3; border: none; padding: 7px 5px; color: #4d4d4d; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }
#main #sidebar #aanmelden form .input:focus { background: #fff; }
#main #sidebar #aanmelden form .inputred { width: 198px; background: #e3e3e3; border: none; border-right: 2px solid #c00; padding: 7px 5px; color: #4d4d4d; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }

#main #sidebar #aanmelden form .submit { float: left; display: block; width: 80px; height: 22px; margin: 0 10px 10px 0; background: url(../Graphics/Aanmelden_submit.gif) no-repeat top left; border: none; color: #fff; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; cursor: pointer; }
#main #sidebar #aanmelden form .submit:hover { background-position: bottom left; }

#main #sidebar #aanmelden a.checkout { float: left; display: block; width: 80px; height: 22px; line-height: 22px; margin: 10px 10px 10px 0; background: url(../Graphics/Aanmelden_submit.gif) no-repeat top left; border: none; color: #fff !important; text-decoration: none; text-align: center; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }
#main #sidebar #aanmelden a:hover.checkout { background-position: bottom left; text-decoration: none; } 

#main #sidebar #aanmelden p.current_price { float: left; width: 80px; height: 22px; line-height: 22px; margin: 10px 5px 0 0; background: #e3e3e3 url('../Graphics/Current_price_bg.gif') no-repeat top left; color: #666; font-weight: bold; text-align: center; }

#main #sidebar #aanmelden a:link, 
#main #sidebar #aanmelden a:visited,
#main #sidebar #aanmelden a:active { display: block; color: #4d4d4d; text-decoration: none; }
#main #sidebar #aanmelden a:hover { text-decoration: underline; }

#main #sidebar #aanmelden p.aanmelden_mislukt { padding: 5px; background: #c00; color: #fff; }

#main #sidebar #infobox { width: 230px; height: 230px; margin: 10px 0; }
#main #sidebar #infobox a { display: block; width: 230px; height: 230px; background: url(../Graphics/Infobox.jpg) no-repeat; text-indent: -999px; }
#main #sidebar #infobox a:hover { background-position: bottom left; }

#main #sidebar #webatvantage { width: 230px; height: 20px; line-height: 20px; margin: 10px 0; text-align: center; font-size: 10px; color: #999; }
#main #sidebar #webatvantage a:link,
#main #sidebar #webatvantage a:visited,
#main #sidebar #webatvantage a:active { color: #999; }
#main #sidebar #webatvantage a:hover { color: #666; }
/*------------------------------- END SIDEBAR -------------------------------*/

/*------------------------------- START CONTENT -------------------------------*/
#main #content { float: right; width: 660px; padding: 20px; background: #e3e3e3; }
#main #content a { color: #666; }
#main #content a:hover { color: #00acee; }

/* Banner */
#main #content #banner { width: 660px; height: 170px; margin: 0 0 20px 0; background: #fff; overflow: hidden; }

/* Articles */
#main #content #articlecontainer { overflow: hidden; }
#main #content #articlecontainer .article { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px dotted #999;  }
#main #content #articlecontainer .article img.img_left { float: left; margin: 0 20px 10px 0; }
#main #content #articlecontainer .article img.img_right { float: right; margin: 0 0 10px 20px; }
#main #content #articlecontainer .last { margin: 0; padding: 0; border-bottom: none; }

/* Promoties */
#main #content #promoties { width: 660px; }

#main #content #promoties ul.tabs { width: 660px; height: 40px; list-style: none; margin: 0; padding: 0; overflow: hidden; }
#main #content #promoties ul.tabs li { display: inline; }
#main #content #promoties ul.tabs li a:link,
#main #content #promoties ul.tabs li a:visited,
#main #content #promoties ul.tabs li a:active { position: relative; float: left; display: block; width: 154px; height: 35px; margin: 0 1px 0 0; padding: 5px 0 0 10px; background: url(../Graphics/Promotie_tab.png) no-repeat top left; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 14px; font-weight: bold; color: #717171; text-decoration: none; }
#main #content #promoties ul.tabs li a:hover,
#main #content #promoties ul.tabs li a.active { background-position: bottom left; color: #006b93; text-decoration: none; }
#main #content #promoties ul.tabs li a span { position: absolute; top: 20px; right: 10px; font-size: 12px; font-weight: normal; color: #e5e5e5; }
#main #content #promoties ul.tabs li a.last { margin-right: 0; }

#main #content #promoties #formats { width: 660px; padding: 30px 0 20px 0; background: url(../Graphics/Tabs2_bg.gif) repeat-x top left; border-bottom: 1px solid #ccc; }
#main #content #promoties #formats .divider { clear: both; width: 660px; height: 1px; margin: 5px 0; padding: 0; background: 1px solid #ccc; overflow: hidden; }

#main #content #promoties .details { overflow: hidden; }
#main #content #promoties .details h4 { margin: 0 0 20px 0; padding: 3px 5px; background: #ccc; color: #fff; font-size: 12px; font-weight: bold; }
#main #content #promoties .details ul li { line-height: 17px; color: #666; }
#main #content #promoties .details img.thumb { float: left; width: 120px; height: 120px; margin: 0 20px 10px 0; }
#main #content #promoties .details #blauw_vakje{ background:url(../Graphics/Formaat_bg.gif);width:120px;height:120px;position: absolute;}
#main #content #promoties .details #blauw_vakje #blauw_vakje_icon {background-position:relative;top:}

#main #content #promoties .details ul span { display: inline-block; width: 100px; }

#main #content #promoties .tabs2 { height: 30px; list-style: none; margin: 20px 0 0 0; padding: 0; }
#main #content #promoties .tabs2 li { display: inline; }
#main #content #promoties .tabs2 li a { float: left; display: block; width: 163px; height: 30px; margin: 0 3px 0 0; line-height: 30px; text-indent: 15px; background: url(../Graphics/Tabs2.png) no-repeat bottom left; color: #666; text-decoration: none; }
#main #content #promoties .tabs2 li a:hover, 
#main #content #promoties .tabs2 li a.active { background-position: top left; color: #666; }

#main #content #promoties .tabs2 li.ui-tabs-selected a { background-position: top left; color: #666; }

#main #content #promoties #prijs { background: url(../Graphics/Tabs2_bg.gif) repeat-x top left; padding: 20px 0 0 0; color: #666; }
#main #content #promoties #prijs .left { float: left; width: 456px; width: 494px; }
#main #content #promoties #prijs .right { float: right; width: 147px; }
#main #content #promoties #prijs select { width: 494px; background: #eee; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #333; }

#main #content #promoties #prijs .product_description  { width: 640px; height: auto; margin: 15px 0 0 0; padding: 10px; background: #fff; }
#main #content #promoties #prijs .product_description p { background: #fff ; }

#main #content #promoties #prijs p#pricefield { height: 22px; line-height: 22px; width: 101px; background-color: #00acee; text-align: center; color: #fff; }

/*
#main #content #promoties #prijs input.bestel { width: 101px; height: 28px; margin: 15px 0 0 0; background: url(../Buttons/Btn_bestel.gif) no-repeat top left; border: none; cursor: pointer; }
#main #content #promoties #prijs input.bestel:hover { background-position: bottom left; }
*/

#main #content #promoties #opmaakvoorwaarden { background: url(../Graphics/Tabs2_bg.gif) repeat-x top left; padding: 20px 0 0 0; color: #666; }

#main #content #promoties #opmaakvoorwaarden .product_description  { width: 640px; height: auto; margin: 15px 0 0 0; padding: 10px; background: #fff; }
#main #content #promoties #opmaakvoorwaarden .product_description p { background: #fff ; }/*url(../Graphics/Stripes.gif) repeat top left*/

#main #content #promoties #werktekening { background: url(../Graphics/Tabs2_bg.gif) repeat-x top left; padding: 20px 0 0 0; color: #666; }
#main #content #promoties #werktekening .product_description  { width: 640px; height: auto; margin: 15px 0 0 0; padding: 10px; background: #fff; }
#main #content #promoties #werktekening .product_description p { background: #fff ; }

#main #content #promoties #werktekening .product_description table { width: 100%; }
#main #content #promoties #werktekening .product_description table tr td { padding: 5px; vertical-align: middle; }
#main #content #promoties #werktekening .product_description table tr td a#download_werktekening { float: right; display: block; width: 173px; height: 24px; background: url('../Buttons/Btn_download_werktekening.gif') no-repeat top left; text-indent: -9999px; }
#main #content #promoties #werktekening .product_description table tr td a:hover#download_werktekening { background-position: bottom left; }
/*------------------------------- END CONTENT -------------------------------*/

/*------------------------------- START CONTACT -------------------------------*/
form#contact .input, 
form#contact .inputred, 
form#contact .textarea,
form#contact .small,
form#contact .textareared, 
form#contact label { float: left; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #666; }

form#contact p { margin: 0 0 5px 0; padding: 5px; clear: both; overflow: hidden; background: #eee; }
form#contact p.info { margin: 0 0 10px 0; color: #666; font-weight: bold; font-variant: italic; }
form#contact p.error { margin: 0 0 10px 0; background-color: #c00; color: #fff; font-weight: bold; font-variant: italic; }
form#contact p.last { background: none; margin: 0; padding: 10px 0 0 0; }

form#contact label { width: 100px; height: 30px; line-height: 30px; }

form#contact .input,
form#contact .inputred { width: 240px; height: 17px; padding: 5px 5px 3px 5px; border: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc; }
form#contact .inputred { border-top: 1px solid #c00; border-left: 1px solid #c00; }

form#contact .small { width: 70px; margin-right: 5px; }

form#contact .textarea { width: 528px; height: auto; min-height: 100px; padding: 5px 5px 3px 5px; border: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc; overflow: auto; }
form#contact .textareared { width: 528px; height: auto; min-height: 100px; padding: 5px 5px 3px 5px; border: none; border-top: 1px solid #c00; border-left: 1px solid #c00; overflow: auto; }

form#contact .verstuur { float: left; display: block; width: 152px; height: 24px; background: url(../Buttons/Btn_verzend.gif) no-repeat top left; border: none; cursor: pointer; }
form#contact .verstuur:hover { background-position: bottom left; }

form#contact .submit { float: left; display: block; width: 152px; height: 24px; line-height: 22px; margin-right: 10px; padding-left: 10px; background: url('../Buttons/Submit_bg.gif') no-repeat top left; border: none; color: #fff; cursor: pointer; font-size: 11px; }
form#contact .wissen { float: left; display: block; width: 88px; height: 25px;	margin: 0 0 0 5px; background: url(../Buttons/Wissen.gif) no-repeat top left; border: none; cursor: pointer; }
/*------------------------------- END CONTACT -------------------------------*/

/*------------------------------- START FAQ -------------------------------*/
div#faq { overflow: hidden; }

div#faq ul.nav { height: 30px; list-style: none; margin: 10px 0 0; padding: 0; }
div#faq ul.nav li { display: inline; }
div#faq ul.nav li a { float: left; display: block; width: 163px; height: 30px; margin: 0 3px 0 0; line-height: 30px; text-indent: 15px; background: url(../Graphics/Tabs2.png) no-repeat bottom left; color: #666; text-decoration: none; }
div#faq ul.nav li a:hover, 
div#faq ul.nav li a.active { background-position: top left; color: #666; }

div#faq div.item { overflow: hidden; margin: 0 0 10px 0; padding: 0 0 10px 0; border-bottom: 1px dotted #ccc; overflow: hidden; }
div#faq div.item img { float: left; margin: 0 15px 10px 0; }

div#faq div.fading { height: 38px; margin: 0 0 0 0; background: url('../Graphics/Tabs2_bg.gif') repeat-x top left; clear: both; }
/*------------------------------- END FAQ -------------------------------*/

/*-------------------------------- START TABLES -------------------------------*/
table.table_shop { width: 100%; margin: 20px 0 0 0; padding: 1px; border: 2px solid #ababab; }
table.table_shop thead tr { background: #e3e3e3 url(../Graphics/Table_shop_thead_bg.gif) repeat-x top left; }
table.table_shop thead tr th { padding: 10px; font-size: 14px; font-weight: bold; color: #999; }
table.table_shop tbody tr { background: #fff; }
table.table_shop tbody tr td { padding: 10px; color: #4d4d4d; }
table.table_shop tbody tr td span.aantal { padding: 5px; background: #e3e3e3; }
table.table_shop tbody tr td a.delete { display: block; width: 20px; height: 20px; background: url(../Graphics/Delete.gif) no-repeat center center; text-indent: -9999px; }

table.table_levering { width: 100%; margin: 10px 0 0 0; padding: 20px 0 0 0; border-top: 1px solid #ccc; background: url(../Graphics/Table_shop_thead_bg.gif) repeat-x top left; }
table.table_levering tr td { padding: 20px 0; border-bottom: 1px dotted #ccc; }
table.table_levering .textarea { width: 300px; height: 100px; margin: 10px 0 0 20px; background: #fff; border: none; padding: 10px; color: #999; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 12px; overflow: auto; }
table.table_levering span.prijs { float: right; display: block; width: 170px; height: 30px; padding: 0 10px; line-height: 30px; background: url(../Graphics/Prijs_bg.gif) no-repeat top left; color: #fff; text-align: right; font-size: 16px; font-weight: bold; }

#pricetable { width: 100%; margin: 16px 0 0 0; background: #fff; border: 1px solid #d2d2d3; border-collapse: collapse; color: #666; }
#pricetable thead tr {}
#pricetable thead th { height: 34px; line-height: 34px; padding: 0 15px; background: url('../Graphics/Price_th_bg.gif') repeat-x top left; border-right: 1px solid #e7e7e7; border-left: 1px solid #fff; border-bottom: 1px solid #e7e7e7; }
#pricetable thead th.first { border-left: none; }
#pricetable thead th.last { border-right: none; }
#pricetable tbody {}
#pricetable tbody tr {}
#pricetable tbody tr.hover td { background: #02a5e3 !important; color: #fff; }
#pricetable tbody td { padding: 7px 15px; cursor: pointer; }
#pricetable tbody tr.dark td { background: #f7f7f7; }
#pricetable tbody tr td .bestel { padding: 0 0 0 20px; background: transparent url('../Graphics/Bestel_bg.png') no-repeat center left; border: none; color: #228fbd; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; cursor: pointer; }
#pricetable tbody tr.hover td .bestel { background: transparent url('../Graphics/Bestel_hover_bg.png') no-repeat center left; color: #fff; }


/*------------------------------- END TABLES -------------------------------*/

/*------------------------------- START FOOTER -------------------------------*/
#footer { float: right; width: 700px; height: 33px; margin: 20px 0; padding: 0; color: #999; font-size: 11px;}

#footer a:link,
#footer a:visited,
#footer a:active { color: #999; }
#footer a:hover { color: #666; }

/* Betaalsystemen */
#footer #betaalsystemen { float: left; width: 184px; height: 33px; overflow: hidden; }
#footer #betaalsystemen a { float: left; display: block; width: 41px; height: 33px; margin: 0 5px 0 0; background-repeat: no-repeat; background-position: left center; text-indent: -9999px; }
#footer #betaalsystemen a#visa { background-image: url('../Graphics/Visa.gif'); }
#footer #betaalsystemen a#mastercard { background-image: url('../Graphics/Mastercard.gif'); }
#footer #betaalsystemen a#maestro { background-image: url('../Graphics/Maestro.gif'); }
#footer #betaalsystemen a#overschrijving { background-image: url('../Graphics/Overschrijving.gif'); }

/* Legal */
#footer #legal { float: left; width: 434px; height: 33px; line-height: 33px; padding: 0 15px 0 10px; text-align: right; }

/* Moodunit */
#footer #moodunit { float: left; width: 57px; height: 33px; }
#footer #moodunit a { float: left; display: block; width: 57px; height: 33px; background: url('../Graphics/Moodunit.gif') no-repeat left top; text-indent: -9999px; }
#footer #moodunit a:hover { background: url('../Graphics/Moodunit_hover.gif') no-repeat left top; }
/*------------------------------- END FOOTER -------------------------------*/

/*------------------------------- START OTHER CLASSES -------------------------------*/
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.hide { display: none; }
.error { color: #c00; }
.noborder { border: none !important; }
div.divider { margin: 20px 0; background: #ccc; height: 1px; width: auto; }
div.opvallend { margin: 20px 0 0 0; padding: 10px 10px 10px 80px; background: #eee url(../Graphics/Warning.png) no-repeat center left; border: 1px solid #ccc; }
/*------------------------------- END OTHER CLASSES -------------------------------*/

/*------------------------------- START SITEMAP -------------------------------*/
#sitemap { width: 820px; line-height: 18px; text-transform: capitalize; }

.sitemap_listitem1 { list-style-type: disc; list-style-position: inside; float: none; }
.sitemap_listitem2 { list-style-type: circle; list-style-position: inside; float: none; padding-left: 30px; }
.sitemap_listitem3 { list-style-type: disc; list-style-position: inside; float: none; padding-left: 60px; }

.sitemap_box_listitem_first { float: left; width: 350px; }
.sitemap_box_listitem { float: left; width: 350px; padding-left: 20px; }

.sitemap_listitem1 a:link, .sitemap_listitem1 a:visited, .sitemap_listitem1 a:active { color: #373737; text-decoration: none; letter-spacing: 1px; font-weight: bold; }
.sitemap_listitem1 a:hover { color: #269cce; text-decoration: underline; }

.sitemap_listitem2 a:link, .sitemap_listitem2 a:visited, .sitemap_listitem2 a:active { color: #666; text-decoration: none; }
.sitemap_listitem2 a:hover {color: #269cce; text-decoration: underline;}

.sitemap_listitem3 a:link, .sitemap_listitem3 a:visited, .sitemap_listitem3 a:active {color:#999;text-decoration:none;}
.sitemap_listitem3 a:hover {color: #269cce; text-decoration: underline; }
/*------------------------------- END SITEMAP -------------------------------*/