/* --- BASIC STYLES --- */
.clearfix:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

body
{
    background: #f0f0f0 url(../images/bg_body.jpg) 50% 0 repeat-x;
    font: 12px/18px Myriad Pro, Lucida Grande, Lucida Sans Unicode, Verdana, Tahoma, sans-serif;
    color: #6a6a6a;
    text-align: center;
}

a, a:hover, a:active, a:visited
{
    color: #1377cf;
    text-decoration: none;
}
td
{
    vertical-align:top;
}
a:hover
{
    text-decoration: underline;
}

#container
{
    width: 900px;
    text-align: left;
    margin: 0 auto;
}

p
{
    margin-bottom: 15px;
}

/* --- TOP NAVIGATION --- */
#topnav
{
    width: 900px;
    overflow: hidden;
    margin: 15px 0;
}

#topnav ul li a
{
    color: #323232;
    border-left: 1px solid #323232;
    padding: 0 25px;
}

#topnav ul li:first-child a
{
    border-left: none !important;
}

/* --- HEADER --- */
#header
{
    width: 900px;
    overflow: visible;
    position: relative;
}

/* --- CHECKOUT --- */
#header #cart
{
    width: 336px;
    height: 298px;
    background: url(../images/bg_logocart.png) 0 0 no-repeat;
    position: absolute;
    top: -15px;
    left: -40px;
    z-index: 1000;
    text-align: center;
}

#header #cart p
{
    margin: 80px 0 0;
}

#header #checkout
{
    width: 200px;
    margin: 20px auto 0;
}

#header #checkout span.total
{
    color: #1377cf;
    font-size: 30px;
    font-weight: 700;
    float: left;
    line-height: 30px;
    margin: 2px 15px 0 0;
}

#header #checkout a
{
    float: left;
    display: block;
    color: #5a5a5a;
    background: url(../images/bullet_blue.png) 0 50% no-repeat;
    padding: 0 0 0 12px;
}

/* --- SLIDER ITEMS --- */
#header #featured
{
    width: 902px;
    height: 235px;
    position: relative;
}

#header #featured .item
{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0 !important;
    width: 610px;
    height: 235px;
    border: 1px solid #e3e3e3;
    padding: 0 0 0 30px;
}

#header #featured #item1
{
    background-color: #eaeaf6;
}

#header #featured #item2
{
    background-color: #edf1fa;
}

#header #featured #item3
{
    background: #f1f1e8 url(../images/item3_bg.jpg) 100% 0 no-repeat;
}

#header #featured .item img
{
    float: left;
    margin: 0 15px 0 0;
}

#header #featured .item .description h4
{
    color: #1377cf;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 15px;
}

#header #featured .item .description a.moreinfo
{
    background: url(../images/button_moreinfo.png) 0 0 no-repeat;
    display: block;
    float: left;
    width: 81px;
    height: 28px;
    text-align: center;
    color: #333;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 10px;
    margin: 0 30px 0 0;
}

#header #featured .item .description a.next
{
    background: url(../images/button_next.png) 0 0 no-repeat;
    display: block;
    float: left;
    width: 81px;
    height: 28px;
    text-align: center;
    color: #fff;
    line-height: 27px;
    text-transform: uppercase;
    font-size: 10px;
}

/* --- MAIN AND SUB NAVIGATION --- */
#header #mainnav
{
    height: 37px;
    width: 900px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #f0f0f0;
    border-left: 1px solid #e3e3e3;
    border-right: 1px solid #e3e3e3;
}

#header #mainnav a:hover, #header #mainnav a.current
{
    text-decoration: none;
    color: #1377cf;
}

ul.mainnav
{
    list-style: none;
    float: right;
    width: 600px;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

ul.mainnav li
{
    float: left;
    position: relative;
    border-right: 1px solid #ddd;
    margin: 0;
    padding: 0 15px;
}

ul.mainnav li a
{
    color: #333;
    display: block;
    text-decoration: none;
    float: left;
    padding: 10px 5px;
}

ul.mainnav li span
{
    width: 17px;
    height: 35px;
    float: left;
    background: url(../images/subnav_btn.gif) no-repeat center top;
}

ul.mainnav li span.subhover
{
    background-position: center bottombottom;
    cursor: pointer;
}

/*--Hover effect for trigger--*/
ul.mainnav li ul.subnav
{
    list-style: none;
    position: absolute;
    left: 0;
    top: 37px;
    background: #f5f5f5;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
}

ul.mainnav li ul.subnav li
{
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ddd;
    clear: both;
    width: 170px;
    border-right: none;
    margin: 0;
    padding: 0;
}

html ul.mainnav li ul.subnav li a
{
    float: left;
    width: 145px;
    background: #f5f5f5;
    padding-left: 20px;
}

html ul.mainnav li ul.subnav li a:hover
{
    background: #eee;
    color: #1377cf;
}

/* --- CONTENT --- */
#content
{
    width: 900px;
    border: 1px solid #e3e3e3;
    border-top: 1px solid #fff;
    overflow: hidden;
    background: url(../images/bg_content.jpg) 0 0 repeat-y;
}

#content #main
{
    background: #fff url(../images/bg_maincontent.jpg) top left repeat-x;
    border-left: 1px solid #f7f7f7;
    width: 96%;
    float: left;
    padding: 0 10px 0 5px;
}

/* --- CONTENT - HOMEPAGE --- */
#content #main #welcome
{
    overflow: hidden;
    margin: 25px 0;
}

#content #main #welcome h3
{
    font-size: 18px;
    color: #1377cf;
    background: none;
    margin:  0 0 22px;
    padding: 0 10px ;
    
}
#content #main #welcome h1
{
    font-size: 18px;
    color: #1377cf;
    background: none;
    margin:  0 0 22px;
    padding: 0 10px ;
    
}
#content #main #welcome img
{
    background-color: #fff;
    border: 1px solid #cfcfcf;
    margin-left: 30px;
    padding: 3px;
    float:left;
}

#content #main ul#prodnav
{
    width: 536px;
    height: 33px;
    overflow: hidden;
    background: url(../images/bg_prodnav.jpg) no-repeat;
    margin:  0 auto 10px;
}

#content #main ul#prodnav li
{
    line-height: 33px;
    float: left;
}

#content #main ul#prodnav li.latest a
{
    display: block;
    width: 508px;
    height: 33px;
    color: #fafafa;
    text-transform: uppercase;
    padding: 0 0 0 15px;
}

#content #main ul#prodnav li.best a
{
    display: block;
    width: 252px;
    height: 33px;
    color: #333;
    text-transform: uppercase;
    padding: 0 0 0 15px;
}

#content #main #products
{
    height: 450px;
    position: relative;
}

#content #main #products #latest, #content #main #products #best
{
    position: absolute;
    top: 0;
    left: 0 !important;
}

#content #main #latest .product, #content #main #best .product
{
    background: #fff;
    width: 224px;
    float: left;
    margin: 0 28px 15px 0;
    padding: 20px 14px 15px;
}

#content #main #latest .even, #content #main #best .even
{
    margin-right: 0;
}

#best .product h4
{
    color: #fff;
}

#content #main #latest .product h4, #content #main .product h4
{
    font-size: 14px;
    color: #1377cf;
    background: url(../images/bg_dotted.jpg) bottom no-repeat;
    margin: 0 0 10px;
    padding: 0 0 10px;
}

#content #main #latest .product p.price, #content #main #best .product p.price
{
    font-size: 12px;
    font-weight: 700;
    color: #868686;
}

#content #main #latest .product .more, #content #main #best .product .more
{
    display: block;
    float: left;
    width: 84px;
    height: 28px;
    background: url(../images/bg_moreinfo.jpg) top no-repeat;
    text-indent: -9999px;
    margin: 0 15px 0 0;
}

#content #main #latest .product .add, #content #main #best .product .add
{
    display: block;
    float: left;
    width: 84px;
    height: 28px;
    background: url(../images/bg_addtocart.jpg) 0 0 no-repeat;
    text-indent: -9999px;
}

#content #main #designer
{
    width: 486px;
    height: 210px;
    overflow: hidden;
    background: url(../images/bg_designers.jpg) no-repeat;
    padding: 38px 25px 0;
}

#content #main #designer h3
{
    background: url(../images/bg_designers_h3.png) no-repeat;
    text-indent: -9999px;
    height: 24px;
    margin: 0 0 22px;
}

#content #main #designer p
{
    color: #505e86;
    width: 300px;
    margin: 0 0 15px 25px;
}

#content #main #designer p a.moreinfo
{
    display: block;
    float: right;
    width: 84px;
    height: 28px;
    background: url(../images/bg_moreinfo_df.png) 0 0 no-repeat;
    text-indent: -9999px;
    margin: 0 15px 0 0;
}

/* --- CONTENT - SINGLE PRODUCT --- */
#content #main h3
{
    background: url(../images/bg_prodnav.png) 0 0 no-repeat;
    height: 32px;
    line-height: 34px;
    color: #fff;
    margin: 15px 0 22px;
    padding: 0 0 0 20px;
}

#content #main h3 span
{
    text-transform: uppercase;
}

#content #main h3 em
{
    text-transform: none;
}

#content #main #product
{
    width: 536px;
    background: #fafafa url(../images/bg_product_big.png) 0 0 no-repeat;
    overflow: hidden;
    margin: 0 0 30px;
}

#content #main #product h4
{
    color: #1377cf;
    font-weight: 400;
    font-size: 14px;
    background: url(../images/bg_dotted.jpg) 0 100% repeat-x;
    margin: 10px;
    padding: 10px 3px;
}

#content #main strong
{
    color: #3e3e3f;
}

#content #main #product #order
{
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
    margin: 20px 10px;
}

#content #main #product #order a
{
    display: block;
    width: 156px;
    height: 47px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
    background: url(../images/bg_orderlink.png) 0 0 no-repeat;
    margin: 10px 15px;
}

#content #main #product #order a span
{
    color: #ffc1e0;
}

#content #main #product #order a.price
{
    font-size: 24px;
    font-weight: 600;
    float: left;
    color: #fff;
}

#content #main #product #order a.add
{
    float: right;
    color: #fff;
}

#content #main #product #matching
{
    overflow: hidden;
}

#content #main #product #matching h3
{
    background-image: url(../images/bg_matching.png);
    text-transform: uppercase;
}

#content #main #product #matching .match
{
    width: 230px;
    float: left;
    margin: 0 18px 15px;
    padding: 0;
}

#content #main #product #matching .match p
{
    margin: 0;
}

#content #main #product #matching .match p.price
{
    font-size: 14px;
    font-weight: 600;
    color: #868686;
    margin-top: 5px;
}

/* --- CONTENT - PRODUCTEN PAGE --- */
#content #main #products-list ul li
{
    background: #fafafa url(../images/bg_product_big.png) 0 0 repeat-x;
   
    margin: 0 0 15px;
    padding: 15px 10px 10px;
}

#content #main #products-list ul li h4
{
    color: #1377cf;
    font-weight: 400;
    font-size: 14px;
    background: url(../images/bg_dotted.jpg) 0 100% repeat-x;
    margin: 0 0 10px;
    padding: 10px 3px;
}

#content #main #products-list ul li p.price
{
    font-size: 18px;
    font-weight: 800;
    color: #868686;
    margin-top: 5px;
    float: left;
}

#content #main #products-list ul li a.more
{
    background: url(../images/button_moreinfo.png) 0 0 no-repeat;
    display: block;
    width: 81px;
    height: 28px;
    text-align: center;
    color: #333;
    line-height: 30px;
    text-transform: uppercase;
    font-size: 10px;
    float: right;
    margin: 0 15px 0 0;
}

#content #main #products-list ul li a.add
{
    display: block;
    width: 84px;
    height: 28px;
    background: url(../images/bg_addtocart.jpg) 0 0 ;
    text-indent: -9999px;
    float: right;
    margin: 1px 0 0;
}

.pagination  
{
    height: 31px;  
    overflow: hidden;
    margin: 0 0 20px;
      background-color: #5686b4; 
    float:left;
      font-size: 13px;
}

 

.pagination td 
{
    
    text-align: center;
      background-color: white;
    font-size: 13px;
    font-weight:bold;    
    border:1px solid;
    padding: 2px 5px 2px 5px;
     
}

.pagination td :hover
{
    color: lightgrey;
    background-color: #5686b4;
}

 

/* --- SIDEBAR --- */
#content #sidebar
{
    background-color: #f7f7f7;
    border-right: 1px solid #fff;
    width: 299px;
    float: left;
}

#content #sidebar #search
{
    width: 275px;
    margin: 15px 0 20px;
    padding: 0 10px;
}

#content #sidebar #search #searchform label
{
    display: none;
}

#content #sidebar #search #searchform #searchfield, .searchfield
{
    width: 268px;
    font-size: 12px;
    color: #a0a0a0;
    margin: 0 0 5px;
    padding: 7px 0 7px 5px;
}

#content #sidebar #search #searchform #submit, .search 
{
    margin-top: 0;
    float: right;
    border: none;
    width: 81px;
    height: 28px;
    background: url(../images/bg_submit.jpg) no-repeat;
    color: #fafafa;
    text-transform: uppercase;
    cursor: pointer;
}
 

#content #sidebar #categories h3
{
    background: url(../images/bg_categories.jpg) no-repeat;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 14px;
    color: #1377cf;
}

#content #sidebar #categories ul#cat
{
    margin: 15px 0;
    padding: 0 40px 0 25px;
}

#content #sidebar #categories ul#cat li
{
    height: 20px;
    line-height: 20px;
    background: url(../images/bg_dotted.jpg) bottom repeat-x;
    padding: 2px 0;
}

#content #sidebar #categories ul#cat li a
{
    display: block;
    color: #666;
    background: url(../images/bullet_grey.png) 0 50% no-repeat;
    margin: 0 0 0 4px;
    padding: 0 0 0 16px;
}

#content #sidebar #categories ul#cat li a:hover, #content #sidebar #categories ul#cat li.current a
{
    color: #1377cf;
    text-decoration: none;
    background: url(../images/bullet_blue.png) 0 50% no-repeat;
}

#content #sidebar #didyouknow
{
    width: 255px;
    min-height: 274px;
    background: #0362b6 url(../images/bg_didyouknow.jpg) no-repeat;
    overflow: hidden;
    color: #fff;
    margin: 30px auto;
}

#content #sidebar #didyouknow h3
{
    background: url(../images/bg_didyouknow_h3.png) no-repeat;
    width: 152px;
    height: 69px;
    text-indent: -9999px;
    margin: 20px auto;
}

#content #sidebar #didyouknow p
{
    padding: 0 10px;
}

#content #sidebar #didyouknow p.two
{
    width: 95px;
    padding: 0 0 0 25px;
}

#content #sidebar #didyouknow p .button
{
    display: block;
    width: 79px;
    height: 27px;
    line-height: 28px;
    color: #333;
    text-align: center;
    background: url(../images/button_blue.jpg) no-repeat;
    margin: 0 0 0 15px;
}

#content #sidebar #payments
{
    width: 200px;
    margin: 20px auto;
}

#content #sidebar #payments img
{
    margin: 0 4px 5px 0;
}

/* --- FOOTER --- */
#footer
{
    background: transparent url(../images/bg_footer.jpg) 0 0 no-repeat;
    overflow: hidden;
    width: 900px;
    padding: 20px 0;
}

#footer div h5
{
    font-weight: 700;
    font-size: 12px;
    color: #1377cf;
    margin: 0 0 10px;
}

#footer div ul li a
{
    color: #5e5e5e;
}

#footer #siteinfo
{
    width: 116px;
    float: left;
    padding: 0 35px 30px;
}

#footer #improve
{
    width: 120px;
    float: left;
    padding: 0 30px 30px;
}

#footer #newsletter
{
    width: 245px;
    float: left;
    padding: 0 35px 30px;
}

.email
{
    width: 170px;
    color: #5e5e5e;
    float: left;
    margin: 0 5px 10px 0;
    padding: 5px 2px;
}

.subscribe
{
    margin-top: 0;
    width: 58px;
    height: 26px;
    border: none;
    background: url(../images/button_submit.jpg) 0 0 no-repeat;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    float: left;
    vertical-align:middle;
}

#footer #contact
{
    width: 159px;
    float: left;
    padding: 0 35px 30px 25px;
}

#footer #copy
{
    width: 830px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    overflow: hidden;
    clear: both;
    margin: 20px 0;
    padding: 0 35px;
}

#topnav ul, #footer #copy p.design
{
    float: right;
}

#topnav ul li, #footer #copy p.copy
{
    float: left;
}

#header #featured .item .description, #header #featured #item3 .description
{
    float: right;
    width: 200px;
    margin: 35px 20px 0 0;
}
 



#header #featured .item .description a:hover, #content #main ul#prodnav li a:hover, #content #main #products-list ul li a.more:hover
{
    text-decoration: none;
}

#content #main #latest .product img, #content #main #best .product img, #content #main #product #matching .match img, #content #main #products-list ul li img
{
    float: left;
    margin: 0 10px 10px 0;
}

#content #main #latest .product p.price span, #content #main #best .product p.price span, #content #main #product #matching .match p.price span, #content #main #products-list ul li p.price span, #footer div ul li a.vcard, #footer div span
{
    color: #1377cf;
}

#content #main #product img, #content #main #product p
{
    margin: 10px;
}

/* Contact error messages */

p#success
{
    width: 510px;
    height: 40px;
    float: left;
    border: 1px solid #b0e28b;
    background: #e2f9d1;
    color: #337129;
    padding: 22px 10px 0 10px;
    margin-bottom: 10px;
}
p#bademail
{
    width: 510px;
    height: 40px;
    float: left;
    border: 1px solid #fe9090;
    background: #feb1b1;
    color: #820101;
    padding: 22px 10px 0 10px;
    margin-bottom: 10px;
}
p#badserver
{
    width: 510px;
    height: 40px;
    float: left;
    border: 1px solid #111;
    background: #333;
    color: #fff;
    padding: 22px 10px 0 10px;
    margin-bottom: 10px;
}

img.ico
{
    margin: 2px 10px 0 0px;
    float: left;
}

/* Contact Form Styling */

input, textarea
{
    margin-top: 0px;
}
.styled
{
    margin:0px;
}

#nameinput
{
    width: 300px;
    padding: 8px;
    background: #f7f7f7;
    border: 1px solid #eee;
}

#nameinput:hover
{
    background: #fff;
    border: 1px solid #ddd;
}

#nameinput:focus
{
    background: #fff;
    border: 1px solid #ddd;
}

#emailinput
{
    width: 300px;
    padding: 8px;
    background: #f7f7f7;
    border: 1px solid #eee;
}

#emailinput:hover
{
    background: #fff;
    border: 1px solid #ddd;
}

#emailinput:focus
{
    background: #fff;
    border: 1px solid #ddd;
}

#commentinput
{
    width: 450px;
    padding: 8px;
    background: #f7f7f7;
    border: 1px solid #eee;
}

#commentinput:hover
{
    background: #fff;
    border: 1px solid #ddd;
}

#commentinput:focus
{
    background: #fff;
    border: 1px solid #ddd;
}

#submitinput
{
    width: 150px;
    height: 50px;
    background: #0f73e3 !important;
    float: left;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #083d78;
    border-right: 1px solid #083d78;
    border-top: none;
    border-left: none;
}