/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
background:transparent;
}
img {border:0; outline:0; font-size:100%; background:transparent;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
/* tables benodigen nog 'cellspacing="0"' in de markup */
table {border-collapse:collapse; border-spacing:0;}
/* MAIN */
html, body {font-family:"Tahoma"; font-size:11px; line-height:16px; color:#5d5d5e; height:100%; min-height:100%;}
/*body {height:100%; min-height:100%; background-color:#e7e8e9; background-image:url("../images/bodyBg-wide.jpg"); background-repeat:no-repeat; background-position:top left;}*/
body {height:100%; min-height:100%; background-color:#d6d6d6; background-image:url("../images/bodyBgRing.jpg"); background-repeat:no-repeat; background-position:top center;}
body#detailBox {background-image:none; background-color:transparent; overflow:hidden;}
/*
body#homepageView {background-image:url("../images/bodyBg-wide2.jpg"); background-repeat:no-repeat; background-position:top center;}
body#homepageView #outerWrap {margin:0 auto;}
*/
/* LAYOUT */
/*#outerWrap {width:1013px; padding-left:11px; height:611px; background:url("../images/outerWrapBg.png") no-repeat;}*/
#outerWrap {width:1013px; padding-left:11px; height:611px; background:url("../images/outerWrapBg.png") no-repeat; margin:0 auto;}
#wrap {width:1002px; height:600px; background-image:url("../images/wrapBg.jpg"); background-repeat:no-repeat; position:relative;}
#content {position:absolute; top:202px; left:162px; width:545px; height:380px; z-index:1;}
#content-inner {width:545px; height:380px; z-index:1; overflow:auto;}
#productView #content {width:800px;}
#logo {position:absolute; top:0; left:144px; width:425px; height:110px;}
#logo a {display:block; width:425px; height:110px;}
#logo span {display:none;}
#imgRight {position:absolute; top:1px; right:6px; width:435px; height:406px; z-index:0;}
#pointsofsale {width:500px; height:375px; border:#807f83 1px solid;}
/* navtop */
#navtop {position:absolute; top:143px; left:144px; z-index:1; height:20px; line-height:18px; text-transform:uppercase; letter-spacing:2px;}
#navtop li {float:left; width:171px; margin-right:1px;}
#navtop a {text-indent:20px; color:#fff; display:block; height:20px; float:left; width:171px;}
#navtop li.selected a, #navtop li:hover a {background:#4d4d4f;}
#navtop ul {text-transform:none; line-height:21px; letter-spacing:1px;}
#navtop ul li {margin:0;}
#navtop ul a, #navtop li.selected ul a {width:141px; padding:0 10px 0 20px; background:#807f83 !important; color:#f7f6f7; height:21px; text-indent:0; border-top:#dfdedf 1px solid;}
#navtop ul a:hover, #navtop li.selected ul a:hover,
#navtop li.selected ul a.selected {background:#bebdbe !important;}
#navtop li ul {display:none;}
/* navmain */
#navmain {position:absolute; top:163px; left:18px; width:126px; line-height:22px;}
#navmain a {display:block; width:101px; padding:0 10px 0 15px; color:#807f83; background:url("../images/navmainBullet.png") no-repeat left center;}
#navmain a:hover {color:#002b5c;}
#navmain a.selected {font-size:12px; font-weight:bold; color:#002b5c;}
#navmain ul {padding-left:10px;}
#navmain ul a {font-style:italic; background:none;}
#navmain ul a.selected {font-size:11px; font-weight:normal;}
/* navbottom */
#navbottom {position:absolute; bottom:10px; left:18px; width:126px; line-height:22px;}
#navbottom a {display:block; width:101px; padding:0 10px 0 15px; color:#807f83; background:url("../images/navmainBullet.png") no-repeat left center;}
#navbottom a:hover {color:#002b5c;}
#navbottom a.selected {font-size:12px; font-weight:bold; color:#002b5c;}
/* HOMEPAGEVIEW */
#homepageView #wrap {background-image:url("../images/wrapBgHomeMiddle.jpg"); background-color:#fff;}
/*#box-fullpic, #boxes {display:none; position:absolute; top:142px; left:144px; width:713px; height:381px; border:#a09fa2 1px solid;}*/
#box-fullpic {display:none; position:absolute; top:142px; left:144px; width:713px; height:381px; border:#a09fa2 1px solid;}
#boxes {display:none; position:absolute; top:142px; left:263px; width:475px; height:381px; border:#a09fa2 1px solid;}
#boxes a {border:0 !important;}
.box {display:block; height:381px; width:237px; float:left;}
.box h2 {color:#fff; background:#807f83; height:20px; line-height:18px; margin-bottom:1px; text-indent:19px; letter-spacing:2px; text-transform:uppercase; padding:0;}
.box-separator {width:1px; height:380px; background:url("../images/box-separator.gif") no-repeat; float:left;}
/* SIERADEN */
#sieradenView #content {width:800px; position:relative;}
#sieraden-image {width:254px; height:254px; border:#9b9b9e 1px solid; position:absolute; bottom:18px; left:280px;}
#sieraden-image a {border:0 !important;}
#sieraden-image span {font-weight:bold;}
/* WISHINGLIST */
.prod-deleted {position:absolute; top:0; left:405px;}
#wishinglist {width:458px; height:315px; padding:0 0 0 39px; background:#fff url("../images/wishinglist-bg.png") no-repeat;}
#wishinglist-content {width:458px; height:294px; padding:21px 0 0 0; overflow-y:auto;}
#wishinglist-top {position:absolute; top:36px; left:0; height:21px; width:475px; background:#fafafa url("../images/wishinglist-top-bg.png") no-repeat; z-index:99;}
.wishinglist-item {margin-bottom:20px;}
.wishinglist-item .image {display:block; width:104px; height:104px; border:#807f83 1px solid; margin-right:28px;}
.wishinglist-item .image:hover {border:#807f83 1px solid !important;}
.wishinglist-item .image, .wishinglist-item .content {float:left;}
.wishinglist-item .content {width:290px; position:relative;}
.wishinglist-item .content p {width:200px; padding:0 !important;}
.wishinglist-item .delete {position:absolute; left:210px; bottom:0; color:#a2a2a3 !important; font-style:italic;}
#wishinglist-options {position:absolute; width:250px; top:288px; left:540px; line-height:22px; list-style-type:none !important; padding:0 !important;}
#wishinglist-mail {padding:35px 0 0 30px;}
#wishinglist-mail h1 {padding-bottom:5px;}
#wishinglist-mail h2 {margin-top:10px;}
.wishinglist-mail-form label {width:160px !important;}
.wishinglist-mail-form .button {position:static !important; margin:5px 0 0 163px !important;}
.wishinglist-mail-form .row {position:relative; margin-bottom:15px !important;}
.wishinglist-mail-form label.error {position:absolute; left:165px; top:17px; font-style:italic; font-size:10px; width:100% !important;}
.form-submitted {position:absolute; top:70px; left:30px; z-index:9999;}
/* Scrollbar */
.jScrollPaneContainer {position:relative; overflow:hidden; z-index:1;}
.jScrollPaneTrack {position:absolute; cursor:pointer; right:0; top:0; height:100%; background:url("../images/scrollbar-bg.png") repeat-y center;}
.jScrollPaneDrag {position:absolute; background:url("../images/scrollbar-drag-bg.png") repeat-y; cursor:pointer; overflow:hidden;}
.jScrollPaneDragTop {position:absolute; top:0; left:0; overflow:hidden;}
.jScrollPaneDragBottom {position:absolute; bottom:0; left:0; overflow:hidden;}
a.jScrollArrowUp {background:url("../images/scrollbar-top-bg.png") no-repeat; display:block; position:absolute; z-index:1; top:0; right:0; text-indent:-2000px; overflow:hidden; height:14px; border:0 !important;}
a.jScrollArrowDown {background:url("../images/scrollbar-bottom-bg.png") no-repeat; display:block; position:absolute; z-index:1; bottom:0; right:0; text-indent:-2000px; overflow:hidden; height:10px; border:0 !important;}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {background-color: #f00;}
/* Default scrollbar */
#defaultView .jScrollPaneTrack {background:url("../images/scrollbar-default-bg.png") repeat-y center !important;}
#defaultView .jScrollPaneDrag {background:url("../images/scrollbar-default-drag-bg.png") repeat-y;}
#defaultView a.jScrollArrowUp {background:url("../images/scrollbar-default-top-bg.png") no-repeat; height:14px;}
#defaultView a.jScrollArrowDown {background:url("../images/scrollbar-default-bottom-bg.png") no-repeat; height:10px;}
/* PERS */
#retailer-login .button {position:static; margin:0 0 0 93px;}
#pers {width:458px; height:370px; padding:0 0 0 39px; background:#fff url("../images/pers-bg.png") no-repeat;}
#pers-content {width:458px; height:349px; padding:21px 0 0 0; overflow-y:auto;}
#pers-top {position:absolute; top:0; left:0; height:21px; width:475px; background:#fafafa url("../images/wishinglist-top-bg.png") no-repeat; z-index:99;}
#pers table {margin-bottom:20px;}
#pers table p {padding:0 !important;}
#pers td {vertical-align:middle; padding:0 0 10px 0 !important;}
#pers td.image {width:104px; padding-right:10px !important;}
#pers td.image img {width:102px; height:102px; border:#807f83 1px solid;}
#pers td.name {width:230px; padding-right:10px !important;}
#pers td.download {width:60px;}
#pers td.download a {display:block; width:auto; line-height:16px; height:16px; background-position:left center; background-repeat:no-repeat; border:0;}
#pers td.download a span {margin-left:25px;}
#pers td.download a:hover span {border-bottom:2px solid;}
#pers .icon-pdf {background-image:url("../images/icon_pdf.png");}
#pers .icon-word {background-image:url("../images/icon_word.png");}
#pers .icon-image {background-image:url("../images/icon_image.png");}
/* SCROLLABLE */
/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
#scrollableWrap {margin-top:40px; width:797px; height:126px; background:url("../images/scrollableBg.png") no-repeat left 60px; position:relative;}
#scrollableWrap a {border:0 !important;}
.scrollable {
/* required settings */
position:relative;
margin-left:35px;
overflow:hidden;
width:720px;
height:126px;
}
/*
root element for scrollable items. Must be absolutely positioned
and it should have a extremely large width to accomodate scrollable items.
it's enough that you set the width and height for the root element and
not for this element.
*/
.scrollable .items {
/* this cannot be too large */
width:20000em;
position:absolute;
clear:both;
}
/* single scrollable item */
.scrollable .item {
float:left;
width:133px;
height:126px;
background:url("../images/itemBg.png") no-repeat;
margin:0 7px;
}
.scrollable img {cursor:pointer; position:relative; top:7px; left:11px;}
/* active item */
.scrollable .active {z-index:9999; position:relative;}
/* prev, next, prevPage and nextPage buttons */
a.browse {
background:url(../images/scrollableButtons.png) no-repeat;
position:absolute;
top:53px;
display:block;
width:14px;
height:16px;
cursor:pointer;
text-indent:-9999px;
}
/* right */
a.right {right:0; background-position:-14px 0;}
/* left */
a.left {left:0;}
/* disabled navigational button */
a.disabled {visibility:hidden !important;}
/* DETAIL BOXES */
/* Products */
.detailBox {position:relative; width:495px; height:333px; background-image:url("../images/detailBoxBg.png"); background-repeat:no-repeat; background-position:center;}
.detailBox .zoom {position:absolute; top:50px; left:31px;}
.detailBox .zoomit {border:#b8b8b9 1px solid;}
.detailBox .largeImg {position:absolute; right:38px; top:51px; width:244px; height:244px; border:#979693 1px solid; overflow:hidden;}
.detailBox .largeImg img {margin:-50% 0 0 -50%;}
.detailBox .addWishinglist {position:absolute; top:25px; left:211px; color:#5d5d5e; border-bottom:1px solid;}
.detailBox .addWishinglist:hover {border-bottom:2px solid;}
.detailBox .details {position:absolute; top:185px; left:31px; width:171px; height:110px; overflow:hidden;}
.detailBox .details p {margin:0 !important; padding:0 !important;}
.detailBox .wishinglist-action {display:block; position:absolute; top:25px; left:32px;}
/* Sieraden */
.detailSieraden {position:relative; width:495px; height:515px; background-image:url("../images/detailSieradenBg.png"); background-repeat:no-repeat; background-position:center;}
.detailSieraden img {position:absolute; top:55px; left:33px; width:420px; height:420px; border:#b1b1b3 1px solid; overflow:hidden;}
/* SUPERBOX (popups) */
/* Base Superbox Styles */
#superbox-overlay {position:fixed; top:0; left:0; z-index:9998; width:100%; height:100%;}
#superbox-wrapper {position:fixed; z-index:9999; top:0; display:table; width:100%; height:100%;}
#superbox-container {position:relative; display:table-cell; width:100%; height:100%; margin:0; padding:0; vertical-align:middle;}
#superbox, #superbox-sieraden {margin:0 auto;}
#superbox-container .loading {margin:0; text-align:center;}
/* Default Theme */
#superbox-overlay {background:#fff;}
#superbox-container .loading {width:43px; height:43px; margin:-300px auto 0 auto; text-indent:-9999px; background:url("../images/ajaxLoader.gif") no-repeat 0 0;}
#superbox, #superbox-sieraden {position:relative !important;}
#superbox .close a, #superbox-sieraden .close a {
background-image:url(../images/close.png);
background-position:top;
position:absolute;
right:38px;
top:23px;
cursor:pointer;
height:18px;
width:18px;
text-indent:-9999px;
}
#superbox-sieraden .close a {right:40px;}
#superbox .close a span, #superbox-sieraden .close a span {display:none;}
#superbox .close a:hover, #superbox-sieraden .close a:hover {background-position:bottom;}
/* ZOOM */
div.jqZoomTitle {display:none;}
.jqZoomPup {
overflow:hidden;
background-color:#fff;
-moz-opacity:0.6;
opacity:0.6;
filter:alpha(opacity=60);
z-index:10;
border-color:#969899;
border-style:solid;
cursor:crosshair;
}
.jqZoomPup img {border:0px;}
.preload {
-moz-opacity:0.8;
opacity:0.8;
filter:alpha(opacity = 80);
color:#333;
border:#b8b8b9 1px solid;
background-color:white;
padding: 8px;
text-align:center;
background-image: url("../images/zoomloader.gif");
background-repeat: no-repeat;
background-position: 43px 30px;
width:90px;
* width:100px;
height:43px;
*height:55px;
z-index:10;
position:absolute;
top:3px;
left:3px;
}
.jqZoomWindow {margin-left:45px; border:1px solid #979693; background-color:#fff;}
/* FORMS */
input, textarea, select {font-family:"Tahoma"; font-size:11px; color:#5d5d5e;}
#id_form_3 {margin-top:-10px;}
.basicForm {position:relative;}
.basicForm p {padding-bottom:5px !important;}
.basicForm h2 {padding-bottom:5px !important;}
.basicForm .row {margin-bottom:5px;}
.basicForm label {display:inline-block; width:90px; line-height:23px; vertical-align:top; color:#5d5d5e;}
.basicForm .field {width:250px; padding:3px; border:#adadad 1px solid;}
.basicForm textarea {width:250px; padding:3px; border:#adadad 1px solid; height:80px;}
.basicForm .button {color:#fff; font-weight:bold; border:0; background:#807f84; padding:3px 5px; margin:10px 0 0 0; cursor:pointer;}
.basicForm .button:hover {background:#002b5c;}
.basicForm .requiredFields p {padding:0 0 2px 0 !important; width:100%;}
.basicForm #captcha {padding:0 0 0 0;}
.basicForm .required {padding-left:3px;}
.basicForm ul {width:100%; list-style-type:none !important; padding:0 0 0 93px !important;}
.basicForm ul label {width:210px; line-height:20px;}
/* Positioning right side form */
.basicForm .requiredFields, .basicForm #captcha, .basicForm .button {position:absolute; left:373px;}
.basicForm .requiredFields {bottom:109px; width:100%;}
.basicForm #captcha {bottom:35px; width:100%;}
.basicForm .button {bottom:7px;}
.basicForm .captchaError {position:absolute; left:0; bottom:93px; width:160px; font-weight:bold; font-style:italic; height:32px;}
.basicForm #captcha .field {width:160px !important;}
/* ELEMENTS */
h1 {font-size:13px; padding-bottom:20px;}
h2 {padding-bottom:20px;}
a {text-decoration:none;}
#content a {color:#5d5d5e; border-bottom:1px solid;}
#content a:hover {color:#002b5c; border-bottom:2px solid;}
#content p {padding-bottom:20px;}
#content ul {list-style-type:disc; padding:0 0 20px 15px;}
#content ol {list-style-type:decimal; padding:0 0 20px 20px;}
/* CLEARFIX */
.clearfix:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}