@import "src/reset.css";
@import "src/typography.css";
@import "src/grid.css";

/* GLOBAL CLASSES
-----------------------------------------------------------*/
.float-left
{
    float: left;
}
.float-right
{
    float: right;
}

.bold
{
    font-weight: bold;
}
.italic
{
    font-style: italic;
}
.underline
{
    border-bottom: 1px solid;
}
.highlight
{
    background: #ffc;
}

.img-left
{
    float: left;
    margin: 4px 10px 4px 0;
}
.img-right
{
    float: right;
    margin: 4px 0 4px 10px;
}

.lijn
{
    border-bottom: 1px dotted #0066ff;
    margin: 15px 10px;
}


.scrollleft span
{
    background: url(../images/interface/button_left.png) no-repeat;
    position: absolute;
    margin: 3px 0 0 3px;
    width: 37px;
    height: 153px;
    float: left;
}

.scrollleft span:hover
{
    background: url(../images/interface/button_left.png) no-repeat 0 -153px;
    width: 37px;
    height: 153px;
    float: left;
}

.scrollright span
{
    background: url(../images/interface/button_right.png) no-repeat;
    position: absolute;
    z-index: 100;
    margin: 3px 0 0 660px;
    width: 37px;
    height: 153px;
    float: right;
}

.scrollright span:hover
{
    background: url(../images/interface/button_right.png) no-repeat 0 -153px;
    width: 37px;
    height: 153px;
    float: right;
}

.style1
{
    color1: #f6921e;
    color: white;
    font-size: 14px;
}
.style2
{
    color: #f6921e;
    font-size: 24px;
    float: right;
}
.style3
{
    font-size: 20px;
    margin: 0;
}
.style4
{
    font-size: 14px;
}
.style5
{
    font-size: 10px;
    padding: 2px 5px 0 5px;
    height: 30px;
    font-weight: bold;
}
.style6
{
    font-size: 12px;
    padding: 0 5px 0 5px;
}
/* HEADER
---------------------------------------------------------*/
.header-logo
{
    float: left;
    padding: 0px 0 0 75px;
    margin-bottom: 10px;
}
.header-tel
{
    float: right;
    padding: 15px 53px 0 0;
}
.header-slagzin
{
    float: left;
    padding: 0 0 0 250px;
}
.header-login
{
    float: left;
    margin-left: 620px;
    margin-top: -12px;
    width: 360px;
    height: 20px;
}
.header-login .text
{
    width: 135px;
    border: none;
    font-size: 10px;
    color: #368fea;
    height: 17px;
    background: none;
    background-image: url(../images/interface/input-back.gif);
}

.header-login a, a:hover, a:visited
{
    text-decoration: none;
}

.header-login .submit
{
    background-position: left top;
    background: transparent url(../../images/interface/login-but.gif) top left no-repeat;
    border: none;
    width: 104px;
    height: 19px;
    color: #FFF;
    font-size: 10px;
    font-weight: bold;
    padding: 0 0 0 0;
    text-align: center;    
}
/* MAIN-NAV
---------------------------------------------------------*/
.main-nav ul
{
    padding-left: 115px;
    padding-top: 1px;
    margin-left: 0;
    color: #fff;
    float: left;
}
.main-nav ul li
{
    display: inline;
}
.main-nav ul li a
{
    padding: 0.1em 0.5em;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    float: left;
}
.main-nav ul li a:hover, .main-nav ul .active a
{
    color: #f6921e;
}
.taal
{
    float: right;
    padding: 3px 53px 0 0;
    color: #f6921e;
    font-size: 12px;
    font-weight: bold;
}
.taal a
{
    color: #f6921e;
}
.taal a:hover
{
    color: #FFF;
}

/* SUB-NAV
---------------------------------------------------------*/

.sub-nav
{
    text-align: left;
    float: none;
}

.sub-nav ul
{
    padding-left: 0px;
    padding-top: 1px;
    margin-left: 0;
    color: #fff;
    float: none;
}
.sub-nav ul li
{
    display: inline;
    margin-left: 0px;
}
.sub-nav ul li a
{
    padding: 0.1em 0.5em;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    font-family: Verdana;
    text-decoration: none;
    float: left;
    background-color: #0078C4;
}
.sub-nav ul li a:hover, .sub-nav ul .active a
{
    color: #f6921e;
}

/* SIDEBAR
---------------------------------------------------------*/
.search_box
{
    width: 180px;
    height: 19px;
    margin-left: 2px;
    margin-top: 3px;
    margin-left: 20px;
    background: url(../images/interface/search-back.gif);
    text-align:left;    
}
.search_box #s
{
    float: left;
    text-align:left;
    padding: 0;
    margin: 3px 0 0 6px;
    margin-left: 0px;
    border: 0;
    width: 130px;
    background: none;
    
}
.search_box #go
{
    float: right;
    margin: 0;
}
.prod-menu
{
    margin-left: 20px;
    width: 180px;
}
.prod-menu h3
{
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 0 0;
    padding-bottom: 2px;
    border-bottom: 3px solid #368fea;
}
.prodlist ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
.prodlist li
{
    border-bottom: 1px solid #368fea;
    margin: 0;
    padding: 0;
    display: block;
}
.prodlist li a
{
    display: block;
    background-color: transparent;
    color: #fff;
    padding: 1px;
    text-decoration: none;
    border-bottom: 0;
}
.prodlist li a:hover, .prodlist .active a
{
    color: #f6921e;
    background-color: #27227c;
    text-decoration: none;
}
.prodlist li a span
{
    display: none;
}
.prodlist li a:hover span
{
    display: block;
    margin: -52px 0 0 73px;
    width: 106px;
    height: 41px;
    padding: 5.5px 0 5.5px 16px;
    background: transparent url(../images/interface/tooltip-back.gif) top left no-repeat;
}
.feedback
{
    margin-left: 20px;
    margin-top: 20px;
    width: 180px;
    background: transparent url(../images/interface/feedback-back.gif) top left no-repeat;
}
.feedback h4
{
    font-size: 14px;
    font-weight: bold;
    padding: 2px 55px 0 0;
    margin-bottom: 5px;
    text-decoration: underline;
    text-align: center;
}
.feedback .highlights
{
    font-size: 10px;
    width: 170px;
    height: 80px;
    padding-left: 5px;
    height: 180px;
    overflow-x: hidden;
    overflow: hidden;
}
.feedback .wie
{
    text-align: right;
    font-size: 9px;
    font-style: italic;
    margin-bottom: 0;
    width: 170px;
}

/* CONTENT
---------------------------------------------------------*/
#wisselback
{
    background-image: url(../images/interface/wisselkader-back.gif);
    background-repeat: no-repeat;
}
#wisselkader div.scroller
{
    width: 700px;
    height: 158px;
    margin-top: 5px;
    overflow: hidden;
}
#wisselkader div.scroller div.section
{
    width: 700px;
    height: 158px;
    overflow: hidden;
    float: left;
    padding: 3px;
}
#wisselkader div.scroller div.content
{
    width: 10000px;
}
.controls
{
    padding: 0 0 5px 0;
    margin: 0;
    float: right;
}
.controls dt
{
    display: none;
}
.controls dd
{
    float: left;
    padding: 0;
    margin: 0;
    text-align: center;
}
.controls dd span.aa
{
    display: block;
    width: 12px;
    height: 19px;
    background-image: url(../images/interface/wk-nav-links.gif);
    float: left;
    padding: 0;
}
.controls dd span.bb
{
    height: 1.5em;
    height: 19px;
    background: url(../images/interface/wk-nav-midden.gif);
    float: left;
    padding: 0;
}
.controls dd span.cc
{
    display: block;
    width: 14px;
    height: 19px;
    background: url(../images/interface/wk-nav-rechts.gif);
    float: left;
    padding: 0;
}

.controls a
{
    text-decoration: none;
    cursor: pointer;
}
.controls a:hover, .controls .active
{
    background: none;
    text-decoration: underline;
    color: #f6921e;
}

.promos p
{
    margin: 0;
    float: left;
    padding: 5px 0;
}
.promos .links
{
    padding-right: 30px;
}
.promos .rechts
{
    padding-left: 30px;
}
.indepicture p
{
    margin: 0;
    float: left;
    font-size: 10px;
    width: 145px;
    text-align: center;
    padding: 0 15px;
}
.indepicture p a
{
    text-decoration: none;
}
.lijst-foto
{
    text-align: center;
    width: 160px;
    height: 216px;
    background: transparent url(../images/interface/lens-lijs-back.gif) top left no-repeat;
    margin: 5px 6px;
}
.lijst-foto:hover, .lijst-foto:hover > a
{
    background: transparent url(../images/interface/lens-lijst-backOver.gif) top left no-repeat;
    color: #f6921e;
}
.lijst-foto a
{
    text-align: center;
    text-decoration: none;
}
.lijst-foto a:hover
{
    color: #f6921e;
}
.lijst-foto a:active, .lijst-foto a:focus
{
    outline-style: none;
    -moz-outline-style: none;
}
.detail-data p
{
    margin-bottom: 1.5em;
}
.merk-filter
{
    margin-top: 5px;
}
.merkF option
{
    padding: 0;
    margin: 0;
}
/* FOOTER
---------------------------------------------------------*/
.footer-unizo
{
    float: left;
    padding: 10px 0 0 53px;
    height: 108px;
}
.footer-payment
{
    float: left;
    padding: 35px 0 0 75px;
}
.footer-webshop
{
    float: left;
    text-align: center;
    padding: 15px 0 0 43px;
}
.footer-logo
{
    float: right;
    padding: 30px 53px 0 0;
}

.inputstyle
{
    background: url(../images/interface/search-back.gif);
    color: #404040;
    font-family: Arial;
    font-size: 8pt;
    background-color: #FFFFFF;
}

.smallinput
{
    color: #404040;
    font-family: Arial;
    font-size: 8pt;
    height: 12px;
    font-weight: bold;
}

address
{
    font-style: italic;
}

a
{
    text-decoration: none;
}