@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;
}
h1.style4
{
 color: white;
    float: left;
    font-size: 18px;
    font-weight: bold;
    margin: 0.5em 0;
    width: 75%;
	    line-height: 1;
    margin-bottom: 0.5em;
	}
	
 span#product-prijsshow {
    color: #F6921E;
    float: right;
    font-size: 22px;
    font-weight: bold;
    margin: 0.5em 0;
}
.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-wraper
{
    height: 70px;
    overflow: hidden;
}

.header-logo
{
    float: left;
    padding: 0px 0 0 75px;
    margin-bottom: 10px;
}
.skype-logo
{           
    position:absolute;
    margin-left:400px;
}
.fb_button
{     
    position:absolute;
    width:150px;              
    margin-left:400px;
    margin-top:30px;
}
.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: 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 .item
{
    margin-top:10px;    
}

.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;
}

.footerbottom {
width:600px;
margin:0px auto;
text-align:center;
}

.footblok {
width: 260px;
float:left;
margin:5px 15px;
text-align:left;
    background: #56589D;
    color: #003;
	margin-bottom:20px;
	padding:5px 5px;
	height:140px;
	display:block;
}

#footernavi {
width:900px;
margin:0px auto;
margin-bottom:10px;
text-align:center;
}

#footernavi ul li {
display:inline-block;
margin-right:20px;
}

#footernavi ul li a {
color:white;
}

.footblok  p#ituitleg {
font-style:italic;
text-align:justify;
font-size:11px;
}

.footblok p#ituitleg strong {
color:#000033;
}

.footblok h4 {
padding-bottom:3px;
border-bottom:1px dotted #000033;
margin-bottom: 5px;
width:100%;
text-transform:uppercase;
color: #000033;
font-weight:bold;
}

.footblok ul {
margin-left:15px;
}

#navlist2 li a, #popprod a {
color:#000033;
}

#popprod a {
font-size:10px;margin:2px 4px;
}

#navlist2 li a:hover, #popprod a:hover {color:#f6921e;}

#twitter-logo
{
    float: right;
    padding: 32px 43px 0 0;
}
#facebook-logo
{
    float: right;
    margin: 36px 13px 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;
}


/* thumbs */

a.thumb {
  position: relative;
  width: 160px;
  height: 216px;
  background: transparent url(/images/interface/lens-lijs-back.gif) top left no-repeat;
  margin: 5px 6px;  
  display:block;
  float:left;
}
a.thumb:hover {
  background: transparent url(/images/interface/lens-lijst-backOver.gif) top left no-repeat;
  color: #f6921e;
}

a.thumb span, a.thumb em, a.thumb strong, a.thumb u {
  display: block;
  text-align:center;  
  width:98%;
  padding:2px;
  
}

a.thumb span {
  background: transparent center 75px no-repeat;
  height: 216px;
}

a.thumb em {
  font-size: 10px;
  padding: 10px 0 0;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}

a.thumb strong {
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}

a.thumb u {
  position: absolute;
  bottom: 5px;
  left: 0;
  font-size: 9px;
  text-decoration:none;
}

#sda
{
    margin-top: 8px;
    margin-left: 3px;
    margin-right: 3px;
    height: 40px;
    text-align: center;
    background-color: #0078C4;
    border: 1px solid #808080;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 100%;
}

.company-footer
{
    text-align: center;
    color: #C0C0C0;
    font-size: 9pt;
    font-style: italic;
}

.orderbutton
{
    width:120px;
    cursor:pointer;
    }