* {margin:0;padding:0;}
body, html {margin:0px; width:100%; height:100%;}
html {overflow-y: scroll; }
input, textarea, select{ font-family: Arial; font-size: 11px; margin: 0px; padding:1px; }
form { margin:0px;}
p { font-family:Arial; font-size:11px; color:#575859; line-height:16px; margin:0px; padding:0; margin-left:2px; margin-right:2px;}
a { color:#575859;}
h2 { font-family:Arial; font-size:11px; color:#b01016; line-height:22px; margin:0px; margin-left:2px; margin-right:2px;}
.red { color:#b01016; text-decoration:none}
.dark { color:#292b2c;}
.bi img { border: 1px solid #bbb6b4;}
.bi:hover img { border: 1px solid #692517; }
.bi:hover { color: #692517; border: 0px ; }
@font-face {
font-family: 'DINRegular';
src: url('din-webfont.eot');
src: url('din-webfont.eot?#iefix') format('embedded-opentype'),
url('din-webfont.woff') format('woff'),
url('din-webfont.ttf') format('truetype'),
url('din-webfont.svg#DINRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#all { width:100%; position:absolute}
#header_intro { width:100%; height:110px; background-image:url(img/bgtop_intro.gif); background-repeat:repeat-x; position:absolute}
#header { width:100%; height:110px; background-image:url(img/bgtop_site.gif); background-repeat:repeat-x; position:absolute}
#header_all { width: 814px; height:40px; left:50%; margin-left:-407px; top:0px; position:relative; line-height:40px; font-family:Arial; font-weight:bold; font-size:11px; color:#7b7c7c}
#taal { width: 400px; height:40px; position:absolute; left:0px}
#taal a { color: #7b7c7c; text-decoration:none; }
#taal a img { padding:10px 10px 0 0; float:left; }
#menu_all { width: 434px; height:40px; position:absolute; text-align:right; line-height:40px; left:380px}
#menu_all a { color: #7b7c7c; text-decoration:none}
#menu { width: 814px; height:65px; left:50%; margin-left:-407px; top:1px; position:relative}
#logo { position:absolute; left:564px; top: 0px; width:250px; height:65px}
#menu_cat { position:absolute; left:0px; width:564px; height:65px; font-family:Arial; font-weight:bold; font-size:12px; color:#7b7c7c;}
#menu_cat a { color: #7b7c7c; text-decoration:none}
#main { width: 814px; height:40px; left:50%; margin-left:-407px; top:130px; position:absolute}
#main_intro { width: 100%; height:330px; top:110px; position:absolute}
.prevnextbox { width: 814px; height:30px; left:50%; margin-left:-407px; top:441px; position:absolute}
#knoppen_intro { width: 479px; height:300px; left:50%; margin-left:-63px; top:0px; position:relative; padding-top:-20px; font-family:Arial; font-size: 11px; color: #5e5653; line-height:16px}
#knop_intro0 { height:68px; width: 84px; background: url(img/yksi_new.gif) no-repeat; position:absolute; left:-10px}
#knop_intro1 a { height:68px; width: 169px; background: url(img/ontwerp_new.gif) no-repeat; position:absolute; left:73px; overflow:hidden; text-indent:300px}
#knop_intro2 a { height:68px; width: 97px; background: url(img/expo_new.gif) no-repeat; position:absolute;left:242px; overflow:hidden; text-indent:300px}
#knop_intro3 a { height:68px; width: 129px; background: url(img/winkel_new.gif) no-repeat; position:absolute;left:341px; overflow:hidden; text-indent:300px}
#knop_intro1 a:hover, #knop_intro2 a:hover, #knop_intro3 a:hover { background-position: 0 -68px}
#infoblock { width: 644px; height:330px; left:50%; margin-left:-322px; top:0px; position:relative; padding-top:30px}
#tekst1 { position:absolute; display:none; left:0px; top: 70px; padding:15px; z-index:999; background-image:url(/img/hometransp.png); background-repeat:repeat; }
#tekst2 { position:absolute; display:none; left:0px; top: 70px; padding:15px; z-index:999; background-image:url(/img/hometransp.png); background-repeat:repeat; }
#tekst3 { position:absolute; display:none; left:0px; top: 70px; padding:15px; z-index:999; background-image:url(/img/hometransp.png); background-repeat:repeat; }
#sm2 { position:absolute; left:745px; width: 70px; padding-top:20px; }
#sm2 a img { padding-left:10px; float:left; }
.grijsblok { background-color:#eaeaea; height:300px; width:815px; left:50%; margin:20px 0 10px 0; margin-left:-408px; position:relative; z-index:2; overflow:hidden; }
.prevnextbox a img { border:none; }
.prevnextbox a.left { float:left; }
.prevnextbox a.right{ float:right; }
.infoingrijs { background-image:url(/img/hometransp.png); background-repeat:repeat; width:220px; height:180px; padding:25px; z-index:9999; position:absolute; top:35px; left:35px; }
.infoingrijs h1 a { font-family:DINRegular; font-size:30px; text-decoration:none; }
#shop_left { width: 364px; top:3px; position:absolute}
#shop_right { width: 450px; top:0px; left:364px; position:absolute}
#product_thumb { width: 142px; font-family:Arial; font-size:11px; color:#292b2c; float:left}
#thumb { border:1px solid #7b7c7c; width:140px; height:105px; overflow:hidden; margin:0px}
#thumb:hover { border:1px solid #19a6d3; cursor:pointer}
#menu_subcat { left:0px; font-family:Arial; font-weight:bold; font-size:12px; color:#7b7c7c; line-height:16px}
#intro p { font-family:Arial; font-size:11px; color:#575859; line-height:16px; margin:0px; padding:0; margin-left:2px; margin-right:2px;}
#menu_subcat a { color: #7b7c7c; text-decoration:none}
#cart { }
#subblok { position:relative; width:450px; clear:left;}
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to solve some problems I experienced
in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(/img/cursors/cursor_arrow_left.png), url(/img/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(/img/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35; /* Standard CSS3 opacity setting */
-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(/img/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(/img/cursors/cursor_arrow_right.png), url(/img/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(/img/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and height as the containing element (div).
Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}