html, body { width: 100%; } * { margin: 0; padding: 0; } body { border: 0; background: #fff; text-align: center; } /* holder */ #holder { position:relative; width: 956px; margin: 0 auto; padding: 0 20px 10px 20px; text-align: left; background: #fff; z-index: 0;} /* head */ #hhead { position: relative; top: 0; left: 0; width: 100%; height: 360px; margin: 0; padding: 0 0 30px 0; background: #fff; z-index: 2; } #hhead #beeldwissel { position: absolute; top:0; left:0; width: 100%; height: 360px; list-style-type: none; } #hhead #beeldwissel li { position: absolute; left:113px; top:0; z-index: 3; } #hhead #beeldwissel li img { z-index: 3; } #hhead img.groot { position: absolute; right: 50px; top:135px; z-index: 500; } #hhead .logo { position:absolute; top: 30px; left: 0px; width: 138px; height: 104px; z-index: 50; } #hhead .logo a { position:absolute; display: block; width: 100%; height: 100%; /*background: url(pics/nauta-sign_logo-s.gif) no-repeat;} */ } #hhead .logo a span { display: none; } /* LOGO */ #hhead .hhead { background: url(../../skins/default/pics/bg_header_home.jpg) no-repeat 100% 0; } #hhead .logo { width: 111px; height: 138px; } #hhead .logo a { background: url(../../skins/default/pics/nauta-sign_logo-l.gif) no-repeat; } #hhead .logo a img { display:none; } #hhead #shopBox { /*height: 360px;*/ width: 133px;} /*#hhead #shopBox { position:absolute; top: 41px; left: 0; width: 118px; height: 163px; background: #fff url(pics/arcering.gif) repeat; color: #000;}*/ #hbody .column .shopButton { float: left; width:111px; height:93px; padding-bottom: 10px; } #hbody .column .shopButton a { float: left; width:111px; height:93px; background: url(pics/bestel_online.gif) no-repeat; padding-bottom: 10px;} /*#hhead #shopBox .shopButton h2 { position:relative; padding: 2px 9px 0 0; text-align: right; background: #021acf url(pics/gulf_blue.gif) no-repeat -40px 0; font: 18px/18px Helvetica, Arial, sans-serif; color: #fff; }*/ /*#hhead #shopBox .shopButton a { position:relative; display: block; margin: 0 8px; width: 102px; height: 80px; color: #fff; background: url(pics/read-on_white.gif) no-repeat right 100%; }*/ /* body */ #hbody { position:relative; width: 100%; padding: 0 0 15px 0; overflow: hidden; z-index: 1; } #hbody .hbody { position:relative; width: 100%; min-height: 310px; height: auto; z-index: 3; padding-top:16px; } /** html body #hbody .hbody { height: 310px; }*/ #hbody #newsBox { float: right; width: 180px; /*background: #fff;*/ line-height: 15px; color: #000; } #hbody #newsBox ul { position:relative; list-style: none; } #hbody #newsBox ul li { position:relative; /*margin: 10px 0;*/ width: 100%; overflow: hidden; } #hbody #newsBox ul li h3 a { position:relative; font: bold 10px Verdana, Arial, Helvetica, sans-serif; } #hbody #newsBox ul li .more { position:relative; float: right; height: 10px; padding: 6px 18px 2px 0; /*background: #fff url(pics/blue-on_white.gif) no-repeat 100% 6px*/; font: bold 11px/11px Verdana, Arial, Helvetica, sans-serif; color: #20A4BF; } #hbody .tpl {float: left; padding: 0px; width: 800px; } #hbody .tpl #content {float: left; padding: 0px; width: 600px; } /* loginBox */ /* loginBox */ #loginBox { font: 10px/11px Verdana, Arial, sans-serif; float: left; width:113px; margin-top:5px; background: #26d0f2 url(../../skins/default/pics/button_shop.gif) no-repeat left bottom; z-index: 20; } #loginBox h2 { position:relative; /*text-align: right;*/ color: #fff; padding: 5px 0px 2px 5px; /*background:#021acf;*/ font-weight: bold; text-transform: uppercase; font-size: 10px; } #loginBox div { width: 113px; /*overflow: hidden;*/ padding-top: 4px; } #loginBox input { position:relative; width: 93px; margin: 5px 0 0px 5px; padding: 1px; font: 10px/13px Verdana, Arial,Helvetica,sans-serif; border-top: 1px solid #8c8c8c; border-left: 1px solid #8c8c8c; border-right: 1px solid #d6d6ce; border-bottom: 1px solid #d6d6ce; } #loginBox .btn a { float: right; padding-right: 15px; color: #fff; font-size: 10px; font-weight: bold; padding-bottom: 10px;} #loginBox p {float: left; margin: 0; padding:6px; /*width: 107px;*/ } /* newsletter */ #newsletterBox { margin-top: 10px; font: 10px Verdana, Arial, sans-serif; float: left; width:113px; background: #26d0f2 url(../../skins/default/pics/button_shop.gif) no-repeat left bottom; color: #fff; } #newsletterBox h2 { position:relative; /*text-align: right;*/ color: #fff; padding: 5px 0px 2px 5px; /*background:#021acf;*/ font-weight: bold; text-transform: uppercase; font-size: 10px; } #newsletterBox div { width: 113px; /*overflow: hidden;*/ padding-top: 4px; } #newsletterBox p { padding: 4px 2px; margin: 0; /*background: #00b9d3;*/ color: #fff; line-height: 12px; } #newsletterBox input { position:relative; width: 93px; margin: 5px 0 0px 5px; padding: 1px; font: 10px/13px Verdana, Arial,Helvetica,sans-serif; border-top: 1px solid #8c8c8c; border-left: 1px solid #8c8c8c; border-right: 1px solid #d6d6ce; border-bottom: 1px solid #d6d6ce;} #newsletterBox .btn a { float: right; padding-bottom: 15px; padding-right: 5px; color: #fff; font-size: 10px; font-weight: bold; } /* breadcrum */ #hbody .tpl .breadcrum { float: left; width: 100%; position: relative; bottom: 10px; } #hbody .tpl .breadcrum ul {float: left; width: 100%; height: 12px; list-style: none; } #hbody .tpl .breadcrum ul.breadcrumMenu li { position:relative; float:left; padding: 2px 10px 2px 4px; height: 11px; background: url(pics/divBreadCrum.gif) no-repeat 100% 5px; } #hbody .tpl .breadcrum ul.breadcrumMenu li a { position:relative; float:left; color:#989898; font: 10px/12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none; } #hbody .tpl .breadcrum ul.breadcrumMenu li a:hover { text-decoration:underline; } #hbody .tpl .breadcrum ul.breadcrumMenu li.firstNode { padding-left: 0px;} #hbody .tpl .breadcrum ul.breadcrumMenu li.lastNode { background:transparent; } #hbody .tpl .breadcrum ul.breadcrumMenu li.lastNode span { position:relative; float:left; color:#989898; font: 10px/12px Verdana, Arial, Helvetica, sans-serif; } #hbody .hbody .column { float: left; width: 113px; padding-right: 43px; /*min-height: 500px;*/ background: #fff; position: relative; bottom: 15px; top: 4px; } * html #hhead #hbody .tpl .column { height: 200px; } /* main menu */ #mainMenu { width: 100%; position: absolute; top: 366px; left: 172px; height: 15px; z-index:100; background:#fff; } #mainMenu ul.mainMenu { position: relative; height: 15px; list-style: none; } #mainMenu ul.mainMenu li { position:relative; float: left; margin: 0; display: block; height: 15px; background: url(/skins/default/pics/divMainMenu.gif) no-repeat 100% 5px; } #mainMenu ul.mainMenu li.lastNode { background: none; } /* #mainMenu ul.mainMenu li h2 { position:relative; font: 10px/11px Verdana, Arial, Helvetica, sans-serif; } #mainMenu ul.mainMenu li h2 a, #mainMenu ul.mainMenu li h2 a:link, #mainMenu ul.mainMenu li h2 a:active, #mainMenu ul.mainMenu li h2 a:visited { position: relative; float: left; display: block; min-height: 15px; width: auto; text-decoration: none; padding: 0px 10px 0px 5px; line-height: 15px; color: #2a3b5b; text-transform: uppercase; font-weight: bold; } #mainMenu ul.mainMenu li h2 a:hover, #mainMenu ul.mainMenu li h2 a.active, #mainMenu ul.mainMenu li h2 a.mouse, #mainMenu ul.mainMenu li h2 a.active:link, #mainMenu ul.mainMenu li h2 a.active:visited, #mainMenu ul.mainMenu li h2 a.active:hover, #mainMenu ul.mainMenu li h2 a.active:active {position: relative; float: left; display: block; height: 15px; width: auto; text-decoration: none; padding: 0px 10px 0px 5px; line-height: 15px; color: #2a3b5b; } */ #mainMenu ul.mainMenu li a, #mainMenu ul.mainMenu li a:link, #mainMenu ul.mainMenu li a:active, #mainMenu ul.mainMenu li a:visited { position: relative; float: left; display: block; height: 13px; text-decoration: none; padding: 2px 10px 2px 5px; font: bold 10px/13px Verdana, Arial, Helvetica, sans-serif; color: #2a3b5b; text-transform: uppercase; } #mainMenu ul.mainMenu li a:hover, #mainMenu ul.mainMenu li a.active, #mainMenu ul.mainMenu li a.mouse, #mainMenu ul.mainMenu li a.active:link, #mainMenu ul.mainMenu li a.active:visited, #mainMenu ul.mainMenu li a.active:hover, #mainMenu ul.mainMenu li a.active:active {position: relative; float: left; display: block; height: 13px; text-decoration: none; padding: 2px 10px 2px 5px; font: bold 10px/13px Verdana, Arial, Helvetica, sans-serif; color: #25cdee; } /* pop-up menu */ #mainMenu ul.mainMenu ul { position: absolute; z-index: 1000; visibility: hidden; width: 146px; left: 0; top: 15px; padding: 4px 2px; z-index: 100; background: #fff; border-bottom: 2px solid #20a4bf; /*#f3f3f3;*/ } #mainMenu ul.mainMenu li ul li { position: relative; float:none; height: auto; width: 130px; padding: 0 8px; background: #fff; border-top: 1px solid #c5c5c5; } #mainMenu ul.mainMenu li ul li.firstNode { border-top: 0; } #mainMenu ul.mainMenu ul li a, #mainMenu ul.mainMenu ul li a:link, #mainMenu ul.mainMenu ul li a:visited, #mainMenu ul.mainMenu ul li a:active, #mainMenu ul.mainMenu ul li a.active { text-align: left; float:none; display: block; width: 100%; height:auto; min-height:13px; background: #fff; text-decoration: none; padding: 5px 0; font: 10px/12px Verdana, Arial, Helvetica, sans-serif; text-transform: none; } #mainMenu ul.mainMenu ul li a:hover, #mainMenu ul.mainMenu ul li a.active:link, #mainMenu ul.mainMenu ul li a.mouse, #mainMenu ul.mainMenu ul li a.active:visited, #mainMenu ul.mainMenu ul li a.active:hover, #mainMenu ul.mainMenu ul li a.active:active {text-align: left; float:none; display: block; width: 100%; height:auto; min-height:13px; background: #fff; text-decoration: none; padding: 5px 0; font: 10px/12px Verdana, Arial, Helvetica, sans-serif; text-transform: none; } #mainMenu ul.mainMenu ul ul { margin-left: 147px; top: -4px; border-left: 1px solid #f9f9f9; /*display: none; visibility: hidden;*/ } /* foot */ #hfoot { width: 100%; clear: both; bottom: 0; float: left; padding-top: 17px; } #hfoot .banner { float: right; position: relative; height: 98px; width: 800px;} #hfoot .banner a.een, #hfoot .banner a.twee { position: relative; float: right; display: inline; padding: 0 0 0 12px; margin: 0; line-height: 1px; font-size:1px; bottom: 0; } /* foot menu */ #hfoot #footMenu {float: left; width: 119px; bottom: 0; height: 98px; width: 150px; } #hfoot #footMenu ul.footMenu { position: relative; height: 15px; width: 150px; list-style: none; } #hfoot #footMenu ul.footMenu li { float: left; display: block; width: 150px; } #hfoot #footMenu ul.footMenu li a:link, #hfoot #footMenu ul.footMenu li a:visited, #hfoot #footMenu ul.footMenu li a.active { position: relative; /*padding: 1px 10px 2px 16px;*/ text-decoration: none; font: 10px/12px Verdana, Arial, Helvetica, sans-serif; color: #000; } #hfoot #footMenu ul.footMenu li a:hover, #hfoot #footMenu ul.footMenu li a:active, #hfoot #footMenu ul.footMenu li a.active, #hfoot #footMenu ul.footMenu li a.active:visited { text-decoration: underline;} #hfoot .banner a img { margin: 0; padding: 0; border: 0; display: inline; float: none; } #hfoot .hfoot { position: relative; width: 100%; padding: 6px 0; height: 9px; clear: both; overflow: hidden; text-align: center; /*background: #a8a8a8;*/ font: 9px/9px Verdana, Arial, Helvetica, sans-serif; color: #20a4bf;} #hfoot .hfoot a { font: 9px/9px Verdana, Arial, Helvetica, sans-serif; color: #20a4bf; } #hfoot .hfoot .searchMenu { position: relative; display: inline; height: 9px; list-style: none; } #hfoot .hfoot .searchMenu li { display: inline; height: 15px; padding-left: 6px; } #hfoot .hfoot .searchMenu li a:link, #hfoot .hfoot .searchMenu li a:visited, #hfoot .hfoot .searchMenu li a.active { position: relative; text-decoration: none; font: 9px/9px Verdana, Arial, Helvetica, sans-serif; color: #20a4bf; cursor: text; }