/************************************************************************************************/ /*TEMPLATE*/ /************************************************************************************************/ * {margin:0;padding:0; font-family:Verdana;} img {border:0px;} .clear{clear:both; font-size:0px;} body{background:url(../images/background.png) top center repeat-x; height:100%;} html{height:100%;} ul{list-style:none;} /************************************************************************************************/ /*CONTAINER*/ /************************************************************************************************/ #container{width:1062px; margin:auto auto; position:relative; min-height:100%; height:auto !important; height:100%; background:url(../images/page_background.png) top center repeat-y;} #container .banner{background:url(../images/left_banner.png); width:98px; height:650px; position:absolute; left:-98px; top:148px;} /************************************************************************************************/ /*TOP*/ /************************************************************************************************/ #top{height:148px; width:1062px; position:relative; background:url(../images/top_image.jpg);} /*logo*/ #top .logo h4 a{text-indent:-4000px; display:block; position:absolute; top:10px; width:186px; height:120px;} /*menu*/ #top .menu{list-style:none; position:absolute; bottom:10px; right:200px;} #top .menu li{float:left;} #top .menu li span{font-size:11px; font-weight:bold; color:white; padding:0px 5px 0px 5px;} #top .menu li a{font-size:11px; font-weight:bold; color:white; text-decoration:none;} /*zoeken*/ #top .zoeken{position:absolute; bottom:4px; right:4px;} #top .zoeken input{border:1px solid #6c8c9f; color:#6c8c9f; font-size:11px; background:white; padding:5px;} #top .zoeken input:focus{outline:none} #top .zoeken #search {width: 56px; height:25px;} /************************************************************************************************/ /*PAGE*/ /************************************************************************************************/ #page{ width:1062px;} /************************************************************************************************/ /*LEFT*/ /************************************************************************************************/ #left{width:185px; float:left; /* JOHAN padding-bottom: 300px;*/ } #left h2{color:white; font-family:Arial; font-size:22px; font-weight:normal; padding:8px 0px 0px 5px; height:35px; border-bottom:0px solid white;} #left ul{border-bottom:0px solid white; margin-top:0px; list-style:none;} #left ul li{display:inline;} #left ul li a{color:white; font-size:11px; display:block; text-decoration:none; font-weight:bold; border-top:1px solid white; padding:8px 0px 8px 5px;} #left ul li a:hover{background:#85899e;} #left ul li.active a{background:#85899e !important;} /*boxholder*/ #left .boxholder{ /* JOHAN position:absolute;*/ bottom:0px; margin-top:20px;} #left .box{background:#5c627e; width:149px; margin:0px 0px 5px 18px;} #left .box .top{width:149px; height:9px; background:url(../images/box_top.gif);} #left .box .bottom{width:149px; height:9px; background:url(../images/box_bottom.gif);} #left .box p a,#left .box p{color:white; padding:0px 2px 0px 7px; font-size:11px; line-height:16px;} /************************************************************************************************/ /*CENTER*/ /************************************************************************************************/ #center{ width:704px; float:left; border-left:1px solid white; border-right:1px solid white; padding:0px 0px 0px 0px; } #center span.fakeH1{ display:block; color:#85899e; font-family:Arial; background:#333b5e; font-size:18px; font-weight:normal; padding:10px 0px 0px 35px; height:33px; line-height:22px; border-bottom:1px solid white; } #center span.fakeH1 h1 { float:left; height: 18px; line-height:18px; padding-left:0; margin:0; border-bottom:0; display:inline; clear:none; padding:0 0 0 6px;} #center span.fakeH1 span.headingding { display:block; float:left; color:#85899e; font-family:Arial; background:#333b5e; font-size:18px; } #center span.fakeH1 a {color:#85899e; font-family:Arial; font-size:18px; font-weight:normal; } /*#center span.fakeH1 h1{ color:#85899e; font-family:Arial; background:#333b5e; font-size:18px; font-weight:normal; padding:0px; height:33px; border-bottom:none; }*/ #center h1{color:#85899e; font-family:Arial; background:#333b5e; font-size:18px; font-weight:normal; padding:10px 0px 0px 35px; height:33px; border-bottom:1px solid white;} #center h2{color:#85899e; font-family:Arial; background:#333b5e; font-size:18px; font-weight:normal; padding:10px 0px 0px 35px; height:33px; border-bottom:1px solid white;} #center h2 a{color:#85899e; font-family:Arial; font-size:18px; font-weight:normal; } /*center_menu*/ #center .center_menu{background:url(../images/center_menu_back.png); height:28px; padding:7px 0px 0px 35px;} #center .center_menu li{float:left;} #center .center_menu li a{font-size:11px; font-weight:bold; color:white;} #center .center_menu li span{font-size:11px; font-weight:bold; color:white; padding:0px 5px 0px 5px;} /*marquee*/ #center .marquee {margin-left: -10px;} /* Category*/ .short .mainimage {float: left;display:inline; margin:0px 0px 0px 15px; width: 200px; } #center .content p.short-desc {width: 355px; margin:0px 55px 0px 15px; float: left;} #center * {color:#333b5e; font-size:12px; line-height:16px; } /*Product*/ a.mainimage img {padding-bottom: 5px;} img.mainimage {display:inline; margin:px auto; width: 175px; vertical-align: top;} #center .product td.content {padding-left: 15px; width: 390px !important; } #center .product .description-long {width: 600px; float: left;} #center .product td ul,#center .product td ol {margin-left: 2em;} #center .product td li {width: 280px; left: 0; margin-left: 0; position: inherit; vertical-align: top; display: list-item;} #center .product td ol li {list-style:decimal;} #center .product td ul li {list-style:disc;} /*Normal page*/ .long .mainimage {float: left;display:inline; margin:0px 0px 0px 15px; width: 175px; } .description-full * {color:#333b5e; font-size:12px; line-height:16px; } #center .static .content p {margin:0px 45px 1em 23px;} #center .product .description-full p {width: 590px !important; float: left; display: inline; margin-left: 15px;} #center .product h3{background:#b7b9bf; height:22px; padding:8px 0px 0px 23px; font-size:11px; font-weight:bold; color:white; border-bottom:1px solid white;} #center .product div.content {background:#e5e5e5 url(../images/product_back.gif) top right repeat-y; border-bottom:1px solid white; padding:10px 0px 10px 0px; overflow: display;} #center .product div.content-long { background:#e5e5e5 url(../images/product_back_alt.gif) top right repeat-y; } #page-magazijn #center .product div.content-long { min-height:774px; } #center .product .content p {padding-bottom: 1em;} #center .product .content p img{float:left; padding:0px 10px 5px 0px;} #center .product .content table {border:0;margin-top: 0px;margin-right: 58px;margin-bottom: 1em;margin-left: 23px;} #center .product .content td {color:#333b5e; line-height:16px; font-size:12px; border:0;} /*Product & Category*/ #center .product {margin:20px 15px 0px 15px;} #center .product .content ul.features{list-style:disc; float:left; width:240px; margin-left: 1em; margin-bottom: 1em;} #center .product .content ul.features li{color:#333b5e; font-size:12px; font-weight:bold;} #center .product .content ul.features li a {color:#333b5e; display:inline; line-height:16px; font-size:12px;} #center .product .description-long ul.features {margin-left: 4em !important; width:300px !important;} #center .product .content ul.iconsprod {float:right !important; padding:0px 8px 0px 0px; left: -0.25em !important;} #center .product .content ul.iconsprod li{display:block !important; height:24px !important; width:24px !important; margin-bottom:8px; list-style:none; padding-left: -1em !important;} #center .product .content ul.iconsprod li a{display:block; height:24px !important; width:24px !important; text-indent:-5000px; padding-left: -1em !important;} #center .product .content ul.iconsprod li.mail{background:url(../images/icon_mail.gif);} #center .product .content ul.iconsprod li.print{background:url(../images/icon_print.gif);} #center .product .content ul.iconsprod li.file{background:url(../images/icon_file.gif);} #center .product .content ul.iconsprod li.special{background:url(../images/icon_special.gif);} #center .product .content ul.iconsprod li.pdf{background:url(../images/icon_pdf.gif);} #center .product .content ul.iconsprod li.meer{background:url(../images/icon_meer.gif);} #center .product .content ul.iconsprod li.minder{background:url(../images/icon_minder.gif);} #center .product .content ul.iconsprod li.mail-f2{background:url(../images/icon_mail_f2.gif);} #center .product .content ul.iconsprod li.print-f2{background:url(../images/icon_print_f2.gif);} #center .product .content ul.iconsprod li.file-f2{background:url(../images/icon_file_f2.gif);} #center .product .content ul.iconsprod li.special-f2{background:url(../images/icon_special_f2.gif);} #center .product .content ul.iconsprod li.pdf-f2{background:url(../images/icon_pdf_f2.gif);} #center .product .content ul.iconsprod li.meer-f2{background:url(../images/icon_meer_f2.gif);} #center .product .content .references,#center .product .content .files {margin:1em 45px 1em 23px; display: block; float: left;} #center .warning {margin:20px 15px 0px 15px; padding: 4px; text-align: center; color: #b7b9bf; line-height:16px; font-size:12px; border: 2px solid #b7b9bf;} #center .product .content .references h4 { color:#333b5e; font-size: 12px; background-color: transparent; } #center .product .content h3 {background-color: transparent; color:#333b5e;border:0; } .pics {height: 250px; width:220px; margin: 10px; background: #fff; display: block; float: left; position: relative;} .pics img {padding: 10px;} #center .product .footer{background:#ebebeb; padding:7px;} #center .product .footer p{text-align:center; color:#85899e; font-size:12px;} #center .product .footer p em{font-size:18px; font-style:normal;} #center .product .footer p span, #center .product .footer p em{padding-left:15px;} /*Normal content*/ #center .product .details {font-size: 10px; margin:0px 45px 1em 23px; color:#333b5e; } #center .product .content hr {margin-bottom: 1em;} #center .product .content fieldset {margin:0px 45px 0px 23px; display: block; height: 100%; min-height: 100%; height: auto; border: 0;} #center .product .content legend {display: none !important;} #center .product .content label {font-weight: normal; font-size: 12px; width: 130px;display:block; float: left; color:#333b5e; } #center .product .content span.req {color: #ff0000; font-weight: normal; font-size: 12px;} #center .product .content fieldset div.input {padding: 3px 0; color:#333b5e; font-size: 12px;} #center .product .content fieldset .error {color: #ff0000; padding-bottom: 3px; margin-left: 130px;} #center .content h3 { font-size: 14px; font-weight: bold; padding-top: 1em;} /*Leaflets*/ #center .leaflets {padding: 4px; color: #707070; line-height: 16px; font-size: 12px; border: 0px solid #b7b9bf;} #center .leaflets .category { width: 222px; margin: 0.25em 4em 4em 4em; float: left;} #center .leaflets .category .title {background: #5C627E url(../images/cat-top.gif) top left no-repeat;color:#fff;font-weight:bold; padding:2px 4px;} #center .leaflets .category .block {border: 1px solid #5C627E;padding-bottom: 1em; text-align:center;} #center .leaflets .category li a {color: #707070;text-decoration: none;} #center .leaflets li {margin-left: 2em; list-style: disc;font-size: 12px;color:#333b5e} #center .leaflets ul li {list-style: bullet;} /*Portal*/ #center .portal {padding: 4px; color: #707070; line-height: 16px; font-size: 12px; border: 0px solid #b7b9bf;} #center .portal .category { width: 222px; margin: 0.25em 0.25em; float: left;} #center .portal .category .title {background: #5C627E url(../images/cat-top.gif) top left no-repeat;color:#fff;font-weight:bold; padding:2px 4px;} #center .portal .category .block {border: 1px solid #5C627E;padding-bottom: 1em;} #center .portal .category li a {color: #707070;text-decoration: none;} #center .portal li {margin-left: 2em; list-style: disc;font-size: 12px;color:#333b5e} #center .portal ul li {list-style: bullet;} /*References*/ #center .static .content .references { margin:20px 15px 0px 15px; background: #e5e5e5; border: 2px solid #85899E; margin-top: 1em; } #center .static .content .references ul { display: block; float: left; width: 230px; padding: 21px; list-style: disc; margin-left: 2em; } #center .static .content .references ul li { padding-left: 1em;} #center .static .content table { width:100%;border:0;border-collapse:collapse; } #center .product .content label {font-weight: bold;} /************************************************************************************************/ /*RIGHT*/ /************************************************************************************************/ #right{width:170px; float:left; padding-bottom:60px; } #right h2{color:white; font-family:Arial; background:#cccccc; font-size:22px; font-weight:bold; padding:8px 0px 0px 5px; height:35px; border-bottom:1px solid white;} /*box*/ #right .box{padding:10px 7px 20px 7px;} #right .box h3{color:#707070; font-size:11px; font-weight:bold; padding:3px 0px 10px 0px;} #right .box p{color:#707070; font-size:11px; } #right .box p a{color:#707070; font-size:11px; font-style:italic;} #right .box.color1{background:#cccccc;} #right .box.color2{background:#dbdbdb;} #right .box.color3{background:#e6e6e6;} #right .newsletter {text-align:center;font-size:10px;margin-top:50px;} /*footer*/ #right .footer{background:#EEEEEE; padding:10px; font-size:11px; text-align:center; color: #707070; position:absolute; bottom:0px; right:0px; width:150px; margin-left:-300px;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; } .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; } * html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; } #TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left; } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; } #TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title{ background-color:#e8e8e8; height:27px; } #TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB_ajaxContent.TB_modal{ padding:15px; } #TB_ajaxContent p{ padding:5px 0px 5px 0px; } #TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } * html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; } /* Pagination */ .pipe {padding: 10px 0;width: 100%;margin: 0 auto;} .pipe ul {display: block;width:50em;} .pipe ul li {margin: 0;padding: 0px 1em;border-left: 1px solid #000;list-style: none;display: inline;} .pipe ul li.first {margin-left:0;border-left:none;list-style: none;display: inline;} /* Carousel */ .jcarousel-skin-tango .jcarousel-container { /*-moz-border-radius: 10px; background: #F0F6F9; border: 1px solid #346F97; */ } .jcarousel-skin-tango .jcarousel-container-horizontal { width: 480px; padding: 20px 50px; margin: 25px; height: 105px; } .jcarousel-skin-tango .jcarousel-container-vertical { width: 75px; height: 245px; padding: 40px 20px; } .jcarousel-skin-tango .jcarousel-clip-horizontal { height: 105px; } .jcarousel-skin-tango .jcarousel-item { width: 140px; height: 105px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: 2px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; } .jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 43px; right: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(../images/next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 43px; left: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(../images/prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; } /** * This
element is wrapped by jCarousel around the list * and has the classname "jcarousel-container". */ .jcarousel-container { position: relative; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0 auto; overflow: hidden; position: relative; width: 450px; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0 !important; padding: 0 !important; display: block !important; } .jcarousel-list li, .jcarousel-item { float: left; list-style: none !important; /* We set the width/height explicitly. No width/height causes infinite loops. */ width: 140px; height: 105px; padding: 5px !important; margin: 0 !important; } /** * The buttons are added dynamically by jCarousel before * the