@charset "utf-8"; /*-------------------------------------------------------------------------------------------------- CSS Styles for . version: 1.0 --------------------------------------------------------------------------------------------------*/ /* =CSS Reset --------------------------------------------------------------------------------------------------*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, img, 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, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* End CSS Reset --------------------------------------------------------------------------------------------------*/ /* =Toolkit --------------------------------------------------------------------------------------------------*/ /* Micro Clearfix Hack by Nicholas Gallagher (http://nicolasgallagher.com/micro-clearfix-hack/) */ /* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; } /* general purpose classes */ .nodisplay { display:none; } .nodisplay_strict { display:none !important; } .alignleft { float:left; } .alignright { float:right; } /* End Toolkit --------------------------------------------------------------------------------------------------*/ /* =Normalization - mostly derived from normalize.css (https://github.com/necolas/normalize.css/) but without comments and compressed to keep the file small --------------------------------------------------------------------------------------------------*/ hr { display:block; height:1px; border:0; margin:1em 0; padding:0; border-top:1px solid #cccccc; /* change border colour to suit your needs */ } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, button, input, select, textarea { font-family: sans-serif; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } h1 { font-size: 2em; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul { margin: 0; } del { text-decoration: line-through; } abbr[title] { border-bottom: 1px dotted; cursor:help; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } small { font-size: 75%; } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; *margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } input, select { vertical-align:middle; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } .cleaner {clear: both; height: 1px; font-size: 1px;} /* End Normalization --------------------------------------------------------------------------------------------------*/ /* =Typography --------------------------------------------------------------------------------------------------*/ /* Setting up the fonts */ body, html{font:normal 20px/24px 'MyriadPro', Arial, Helvetica, sans-serif; color:#000; height:100%; background:#ededee; letter-spacing:-1px;} #wrapper{ min-height:100%; position:relative; z-index:100;} a{ text-decoration:none; color:#005cb2;} a:hover{ text-decoration:underline;} a img{ border:none;} .clear{ clear:both; line-height:1px; height:1px; display:block;} .break{ clear:both; line-height:1px; height:110px; display:block;} li{ list-style:none;} .fl_l{ float:left;} .fl_r{ float:right;} .container{ width:1000px; margin:0 auto;} .wide_col{ width:657px; padding-right:13px; float:left;} .wide_col2{ width:990px; padding-right:13px; float:left;} .narrow_col{ width:276px; padding:5px 0 0 40px; float:left;} h1{ font:normal 26px/30px 'MyriadPro', Arial, Helvetica, sans-serif; color:#000; margin-bottom:19px;} h2{ font:normal 24px/30px Arial, Helvetica, sans-serif; color:#000; margin-bottom:20px;} p{ margin-bottom:23px; font-size: 100%; } .button{ display:inline-block; height:29px; position:relative; margin-right:14px; padding:0 4px 0 18px; color:#7a797b; text-decoration:none;} .button span{ display:inline-block; height:29px; width:14px; position:absolute; right:-14px; top:0; background:url(../fonts/bauhaus/bauhauscct-webfont.ttf)} @font-face { font-family: 'MyriadPro'; src: url('../fonts/myriadpro/myriadpro-regular-webfont.eot'); src: url('../fonts/myriadpro/myriadpro-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/myriadpro/myriadpro-regular-webfont.woff') format('woff'), url('../fonts/myriadpro/myriadpro-regular-webfont.ttf') format('truetype'), url('../fonts/myriadpro/myriadpro-regular-webfont.svg#MyriadProRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Bauhaus'; src: url('../fonts/bauhaus/bauhauscct-webfont.eot'); src: url('../fonts/bauhaus/bauhauscct-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/bauhaus/bauhauscct-webfont.woff') format('woff'), url('../fonts/bauhaus/bauhauscct-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* End Typography --------------------------------------------------------------------------------------------------*/ /* =Headings --------------------------------------------------------------------------------------------------*/ #header{ height:510px; background:url(../img/top_bg.gif) left bottom repeat-x #fff; padding-top:15px;} #header .container{ position:relative; height:510px;} #logo{ display:inline-block; width:404px; height:101px; background:url(../img/logo.gif) left top no-repeat; text-indent:-9999px; float:left;} .top_block{ margin-bottom:10px;} .top_block ul{ float:right; border-left:solid 3px #b1c903; margin-right:23px;} .top_block li{ line-height:16px;} .top_block li a{ padding-left:9px; color:#b1b3b4; font:normal 16px/18px 'MyriadPro', Arial, Helvetica, sans-serif; letter-spacing:0;} .sub_navi{ text-align:left; position:absolute; left:17px; top:172px; width:100%; z-index:100; } .sub_navi li{ display:inline-block; margin-right:80px;} .sub_navi li1{ color:#868889; font:normal 12px/16px 'MyriadPro', Arial, Helvetica, sans-serif;} .sub_navi li2{ color:#868889; font:normal 12px/16px 'MyriadPro', Arial, Helvetica, sans-serif;} .navi_block{ position:absolute; left:0; top:142px; z-index:1111;} /* End Headings --------------------------------------------------------------------------------------------------*/ /* =Main Nav --------------------------------------------------------------------------------------------------*/ #navigation{ margin-left:12px; margin-top: -1px;} #navigation li{ float:left; margin-right:17px;} #navigation li a{ padding:0 0 0 25px; color:#000; text-transform:uppercase; display: block; height:34px; position:relative; margin-right:24px; font:normal 17px/33px 'MyriadPro', Arial, Helvetica, sans-serif;} #navigation li.with_menu:hover{ position:relative; left:-7px;} #navigation li.with_menu:hover{ background:#41a62a; -o-border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; margin-top:-6px; margin-right:2px;} #navigation li.with_menu:hover a.act{ background:url(../img/with_menu_bg.gif) left top no-repeat; padding:0 0 0 16px; margin:11px 32px 20px 16px; height:23px; line-height:23px;} #navigation li.with_menu:hover a.act span{ background:url(../img/with_menu_bg.gif) right top no-repeat; width:16px; right:-16px; height:23px;} #navigation li ul{ display:none;} #navigation li:hover ul{ display:block; background:#41a62a; position:absolute; top: 0; left:0; top:43px; width:100%; z-index:102; padding-top:5px; border-top:solid 1px #389327; -moz-border-radius:0 0 3px 3px; -o-border-radius:0 0 3px 3px; -webkit-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px;} #navigation li li{ background:url(../img/ul_cursor_1.gif) 9px 2px no-repeat; border-bottom:solid 1px #389327; margin-bottom:3px; margin-right:0; height: auto; min-height: 1px;} #navigation li li a{ color:#40654a; font:normal 12px/16px 'MyriadPro', Arial, Helvetica, sans-serif; height:19px; margin:0; padding:0 20px 0 33px; background:url(../img/ul_cursor_2.gif) 139px 4px no-repeat; text-transform:none; display:block; height: auto; min-height: 1px;} #navigation li li a:hover{ background:url(../img/ul_cursor_2.gif) 139px -28px no-repeat; color:#fbf3a1;} #navigation li li:hover{ background-position:9px -27px;} #navigation li li{ float:none;} #navigation li a span{ display:inline-block; height:34px; width:24px; position:absolute; right:-24px; top:0;} #navigation li a:hover{ text-decoration:none; background:url(../img/navi_bg.jpg) left top no-repeat;} #navigation li a:hover span{ background:url(../img/navi_bg.jpg) right top no-repeat;} #navigation li.active a{ color:#41a62a; -o-text-shadow:0 1px 0 #46843a; -moz-text-shadow:0 1px 0 #46843a; -webkit-text-shadow:0 1px 0 #46843a; text-shadow:0 1px 0 #46843a;} /* End Main Nav --------------------------------------------------------------------------------------------------*/ /* =Main Content --------------------------------------------------------------------------------------------------*/ #content{ margin-top:17px;} #content .container{ background:url(../img/border.gif) 660px 0 repeat-y;} .list_block p{ margin-bottom:21px;} .list_block ul{ width:320px; float:left;} .list_block ul2{ width:400px; float:left;} .list_block li{ font-size:17px; line-height:20px; letter-spacing:-1px;} .list_block li2{ font-size:15px; line-height:20px; letter-spacing:-1px;} .img_cont{ background:url(../img/img_border.gif) 0 0 no-repeat; display:inline-block; padding:12px 0 0 13px; width:324px; height:245px; float:right; margin-right:-3px;} .contact_block{ margin-bottom:24px; color:#838181; width:255px;} .phone_number{ padding:5px 0 5px 82px; background:url(../img/contact_icon.gif) left top no-repeat; border-bottom:solid 1px #d1d3d4; height:68px; margin-bottom:5px;} .phone_number1{ padding:5px 0 30px 82px; background:url(../img/img_klant2.jpg) left top no-repeat; border-bottom:solid 1px #d1d3d4; height:68px; margin-bottom:5px;} .phone_number2{ padding:5px 0 5px 82px; background:url(../img/img_jezuh2.jpg) left top no-repeat; border-bottom:solid 1px #d1d3d4; height:68px; margin-bottom:5px;} .phone_number3{ padding:5px 0 5px 82px; background:url(../img/panoair.png) left top no-repeat; border-bottom:solid 1px #d1d3d4; height:68px; margin-bottom:5px;} .phone_number p{ margin-bottom:10px; padding-left:9px;} #content .button{ background:url(../img/content_button.gif) left top no-repeat; font:normal 16px/28px 'MyriadPro', Arial, Helvetica, sans-serif; text-transform:none;} #content .button span{ background:url(../img/content_button.gif) right top no-repeat;} #content .button:hover{ background-position:left -29px; text-decoration:none;} #content .button:hover span{ background-position:right -29px;} .number{ color:#41a62a;} .number2{font-size:18px;color:#41a62a;} .number3{font-size:22px;color:#03F;} .contact_block dl{ margin:0 15px 5px 40px;} .contact_block .button{ float:right; margin-right:35px;} /* =End Main Content --------------------------------------------------------------------------------------------------*/ /* =Footer --------------------------------------------------------------------------------------------------*/ #footer{ height:89px; margin-top:-89px; background:url(../img/footer_bg.gif) left top repeat-x; position:relative; z-index:111; text-align:center;} #footer .container{ padding-top:26px; padding-right:15px;} #footer .button{ background:url(../img/footer_button.gif) left top no-repeat; font:normal 11px/29px 'MyriadPro', Arial, Helvetica, sans-serif;} #footer .button span{ background:url(../img/footer_button.gif) right top no-repeat;} #footer .button:hover{ background-position:left -29px; text-decoration:none;} #footer .button:hover span{ background-position:right -29px;} .button_block{ margin-bottom:6px;} .copy{ color:#58585a; font:normal 13px/16px 'MyriadPro', Arial, Helvetica, sans-serif;} .f_13{ font-size:16px !important;} /* End Footer --------------------------------------------------------------------------------------------------*/ /* =Forms --------------------------------------------------------------------------------------------------*/ /* Removing fieldset borders (remove if you want to keep the defaults defined in Normalization) */ fieldset { border: 1px solid transparent; margin: 0; padding: 0; } /* End Forms --------------------------------------------------------------------------------------------------*/ /* =Additional 1 --------------------------------------------------------------------------------------------------*/ div#slide-holder { z-index : 40; width : 998px; height : 248px; position : absolute; left:-9px; bottom:47px; } div#slide-holder div#slide-runner { top : 0; left :0; width : 998px; height : 295px; overflow : hidden; position : absolute; zoom: 1; } .slide-bg { background: url(../img/gallery_bg.jpg) center bottom no-repeat; width: 998px; height: 47px; position: absolute; bottom: -47px; left: 0; } div#slide-holder img { margin : 0; display : none; position : absolute; } div#slide-holder div#slide-controls { display:none; } div#slide-holder div#slide-controls p#slide-nav { height : 24px; display : inline; margin : 11px 15px 0 0; float:left; position:absolute; left:475px; bottom:-32px; z-index:11111; } div#slide-holder div#slide-controls p#slide-nav a { float : left; width : 12px; height :11px; display : inline; font-size : 11px; margin : 0 8px 0 0; line-height : 24px; font-weight : bold; text-align : center; text-decoration : none; background-position : 0 0; background-repeat : no-repeat; text-indent:-9999px; } div#slide-holder div#slide-controls p#slide-nav a.on { background-position : 0 0; } div#slide-holder div#slide-controls p#slide-nav a { background: url(../img/slider_buttons.jpg) left top no-repeat; } div#nav ul li a { background : url(images/nav.png) no-repeat; } #slide-client{ display:none !important;} /* End Additional 1 --------------------------------------------------------------------------------------------------*/