/* ### general ### */ * { padding: 0px; margin: 0px; } html, body { font-family: Arial; font-size: 12px; color: #8c806e; } input, select, textarea { font-family: Arial; font-size: 12px; color: #8c806e; } body { background: #fff url('../images/body-bg.png') repeat-x; } img { border: 0px; display: block; } a, input { outline: none; } /* ### global classes ### */ .clear { clear: both; height: 0px; overflow: hidden; } /* ### wrapper ### */ #wrapper { position: relative; display: block; width: 100%; min-height: 100%; background: url('../images/bg.png') center top no-repeat; } /* ### main container ### */ #mainCntr { margin: 0 auto; width: 982px; } /* ### header container ### */ #headerCntr { position: relative; width: 982px; height: 188px; } #headerCntr h1 { position: absolute; top: 57px; left: 11px; } #headerCntr h1 a { display: block; width: 338px; height: 61px; text-indent: -9999px; background: url('../images/logo3.png') no-repeat; } #headerCntr h2 { padding: 7px 0px 0px 50px; position: absolute; right: 48px; top: 67px; background: url('../images/header-icon.png') left top no-repeat; } #headerCntr h2 a { font-size: 18px; color: #010101; font-weight: normal; font-family: 'TitilliumText22LXBold'; line-height: 40px; cursor: pointer: text-decoration: underline; } /* ### menu box ### */ .menuBox { width: 982px; height: 32px; } .menuBox ul { list-style: none; float: right; background: url('../images/menu-bg.png') repeat-x; } .menuBox li { padding-right: 10px; padding-left: 10px; float: left; font-size: 14px; line-height: 32px; } .menuBox li a { padding-left: 8px; line-height: 32px; display: block; color: #fff; text-decoration: none; } .menuBox li a span { padding: 0px 10px 0px 2px; line-height: 32px; display: block; cursor: pointer; } .menuBox li a:hover, .menuBox li.selected a { background: url('../images/menu-left.gif') left top no-repeat; } .menuBox li a:hover span, .menuBox li.selected a span { background: url('../images/menu-right.gif') right top no-repeat; } .menuBox ul.address { padding-left: 38px; list-style: none; float: right; background: none; } .menuBox ul.address li { padding: 0px 25px 0px 2px; float: left; font-size: 12px; line-height: 32px; color: #626262; } .menuBox ul.address li a { padding-left: 0px; line-height: 32px; display: inline; color: #626262; text-decoration: none; } .menuBox ul.address li a:hover { text-decoration: underline; background: none; } /* ### link box ### */ .linkBox { position: absolute; top: 141px; left: 0px; width: 982px; height: 36px; background: url('../images/link-bg.png') no-repeat; } .linkBox ul { padding-left: 66px; list-style: none; } .linkBox li { padding-right: 100px; float: left; font-size: 20px; font-weight: bold; } .linkBox li a { padding: 0px 10px; display: block; color: #262726; line-height: 34px; text-decoration: none; } .linkBox li a:hover, .linkBox li.selected a { background: url('../images/link-hover.png') repeat-x; } /* ### banner container ### */ #bannerCntr { width: 980px; height: 296px; position: relative; background: url('../images/banner-bg.png') no-repeat; } #bannerCntr img { padding: 1px; } #bannerCntr span.price { position: absolute; right: 33px; top: 138px; display: block; text-indent: -9999px; width: 127px; height: 130px; background: url('../images/price.png') no-repeat; } #bannerCntr .links { position: absolute; left: 24px; top: 40px; } #bannerCntr .midden { position: absolute; left: 212px; top: 40px; } #bannerCntr .rechts { position: absolute; left: 425px; top: 50px; } #bannerCntr .links .text { padding: 10px 18px 10px 22px; min-height: 175px; width: 496px; background: url('../images/banner-bg1.png') repeat; } #bannerCntr .midden .text { padding: 10px 18px 10px 22px; min-height: 100px; width: 496px; background: url('../images/banner-bg1.png') repeat; } #bannerCntr .rechts .text { padding: 10px 18px 10px 22px; min-height: 175px; width: 496px; background: url('../images/banner-bg1.png') repeat; } #bannerCntr .text p { padding: 7px 0px 5px 0px; font-size: 36px; line-height: 36px; color: #fefefe; font-family: 'TitilliumText22L1wt'; } #bannerCntr .text p img { padding: 0px 16px 0px 0px; float: left; } #bannerCntr .text p span { padding-bottom: 8px; display: block; background: url('../images/banner-icon1.png') right bottom no-repeat; } #bannerCntr .text span.name { padding: 10px 67px 0px 0px; display: block; font-size: 24px; color: #c4c5c5; float: right; font-family: 'TitilliumText22L1wt'; } #bannerCntr ul.icon { position: absolute; left: 454px; top: 275px; list-style: none; } #bannerCntr ul.icon li { padding: 0px 2px; float: left; } #bannerCntr ul.icon li a { display: block; text-indent: -9999px; width: 10px; height: 10px; background: url('../images/banner-icon2.png') no-repeat; } #bannerCntr ul.icon li a:hover, #bannerCntr ul.icon li.selected a { background: url('../images/banner-hover.png') no-repeat; } /* ### content container ### */ #contentCntr { margin-top: 23px; overflow: hidden; width: 980px; background: url('../images/mid.gif') repeat-y; } #contentCntr #top { padding-top: 8px; width: 980px; background: url('../images/top.png') left top no-repeat; } #contentCntr #bottom { padding: 0px 24px 17px 24px; overflow: hidden; background: url('../images/bottom.gif') left bottom no-repeat; } /* ### left container ### */ #leftCntr { float: left; width: 444px; } /* ### text box ### */ .textBox { padding: 4px 0px 33px 0px; width: 444px; overflow: hidden; } .textBox h2 { padding-bottom: 8px; font-size: 30px; color: #272727; font-weight: normal; font-family: 'TitilliumText22LXBold'; } .textBox p { padding-bottom: 15px; text-align: justify; color: #272727; line-height: 14px; } .textBox p span { font-weight: bold; } .textBox ul { color: #000000; } .textBox ul#opsomming { list-style-image: url('../images/succes.png'); margin-left: 60px; line-height: 30px; } .textBox a { color: #3300FF; font-weight: bold; text-decoration: none; } .textBox a:hover { text-decoration: underline; } .textBox .breactie { background: #0077AA url('../images/duim_omhoog.png') no-repeat; background-position: center center; width: 48px; height: 48px; border-radius: 4px 4px 4px 4px; } .textBox .reactie { position: relative; left: 75px; top: -48px; } .textBox .reactie p.blogreactie { font-family: verdana; color: #3D3D3D; font-size: 10px; line-height: 10px; } .textBox .reactie p.blogreactie span { color: #0000D6; font-size: 11px; font-weight: none; } .textBox .reactie p.blogreactiebericht { color: #000000; margin-top: -4px; font-size: 14px; } .lijn { height: 1px; width: 400px; border-top: 1px solid black; margin-top: -40px; } /* ### form box ### */ .formBox { padding-top: 0px; width: 444px; overflow: hidden; } .formBox h2 { padding-bottom: 8px; font-size: 30px; color: #272727; font-weight: normal; font-family: 'TitilliumText22LXBold'; } .formBox span { padding-bottom: 35px; display: block; text-align: justify; color: #272727; line-height: 14px; } .formBox fieldset { border: 0px; } .formBox p { padding-bottom: 16px; width: 100%; position: relative; float: left; } .formBox label { padding: 0px 0px 0px 12px; width: 122px; float: left; color: #000000; line-height: 24px; } .formBox input.field { padding: 3px 5px; float: left; border: 0px; width: 298px; height: 16px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid #d1d1d1; border-top: 1px solid #707070; background: #fff; } .formBox input.field1 { padding: 3px 5px; margin-right: 14px; float: left; border: 0px; width: 136px; height: 16px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid #d1d1d1; border-top: 1px solid #707070; background: #fff; } .formBox input.field2 { padding: 3px 5px; float: left; border: 0px; width: 136px; height: 16px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid #d1d1d1; border-top: 1px solid #707070; background: #fff; } .formBox select { float: left; width: 310px; height: 24px; } .formBox textarea { padding: 5px 5px; float: left; border: 0px; resize: none; width: 298px; height: 102px; -moz-border-radius: 2px; border-radius: 2px; border: 1px solid #d1d1d1; border-top: 1px solid #707070; background: #fff; } .formBox input.btn { padding-bottom: 2px; width: 156px; height: 28px; display: block; float: right; cursor: pointer; font-size: 10px; color: #fff; font-weight: bold; text-transform: uppercase; border: 0px; background: url('../images/button.png') no-repeat; background-position: top; } .formBox input.btn:hover { background-position: bottom; } .formBox span.select { padding: 0px 5px; font-size: 11px; position: absolute; top: 0px; left: 134px; line-height: 24px; color: #717171; width: 300px; height: 24px; color: #8a9199; font-weight: normal; border: none; background: url('../images/select.png') no-repeat; } .formBox span.succes { color: #40a43b; background: url('../images/succes.png') no-repeat 5px; padding: 3px 3px 3px 30px; margin-top: -10px; } .formBox span.fout { color: #df2f1a; background: url('../images/error.png') no-repeat 5px; padding: 3px 3px 3px 25px; margin-top: -10px; } .formBox p.fout { color: #df2f1a; background: url('../images/error.png') no-repeat 5px; position: relative; left: 135px; padding: 5px 3px 3px 30px; display: none; } /* ### right container ### */ #rightCntr { float: right; width: 442px; } .coda-slider-wrapper { padding: 0px 0 } /* Change the width of the entire slider (without dynamic arrows) */ .coda-slider, .coda-slider .panel { width: 442px; } /* Change margin and width of the slider (with dynamic arrows) */ .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 442px } .coda-slider-wrapper.arrows .coda-slider { margin: 0 0px } /* Panel padding */ .coda-slider .panel-wrapper { padding: 8px } /* Preloader */ .coda-slider p.loading { padding: 50px; text-align: center } /* Miscellaneous */ .coda-slider-wrapper { clear: both; overflow: auto } .coda-slider { float: left; overflow: hidden; position: relative } .coda-slider .panel { display: block; float: left } .coda-slider .panel-container { position: relative } /* ### video box ### */ .videoBox { width: 442px; overflow: hidden } .videoBox h2 { padding-bottom: 9px; font-size: 30px; color: #272727; font-weight: normal; font-family: 'TitilliumText22LXBold'; } .videoBox p { padding-bottom: 32px; text-align: justify; color: #272727; line-height: 14px; } .videoBox ul { padding-top: 13px; overflow: hidden; list-style: none; } .videoBox ul a:hover { text-decoration: none; } .videoBox li { padding-top: 5px; width: 100%; float: left; } .videoBox li h3 { display: block; border: 1px solid #cacaca; text-decoration: none; line-height: 30px; min-height: 32px; background: #f6f6f6; } .videoBox li a { text-decoration: none; font-weight: normal; font-size: 13px; } .videoBox li h3 span a { padding-left: 29px; cursor: pointer; color: #242424; display: block; height: 32px; background: url('../images/video-icon.png') 10px 7px no-repeat; } .videoBox h3.selected { background: #dbdbdb; } .videoBox li p { padding: 10px 0px 10px 0px; } .videoBox .text { display: none; } .videoBox a { color: #3300FF; font-weight: bold; text-decoration: underline; } /* ### service container ### */ #serviceCntr { padding: 26px 0px 28px 0px; overflow: hidden; width: 982px; } /* ### twitter box ### */ .twitterBox { margin: 0px 0px 0px 2px; width: 310px; float: left; overflow: hidden; height: 195px; background: url('../images/twitter-mid.gif') repeat-y; } .twitterBox .top { padding-top: 13px; background: url('../images/twitter-top.png') left top no-repeat; } .twitterBox .bottom { padding: 0px 12px 19px 12px; overflow: hidden; background: url('../images/twitter-bottom.gif') left bottom no-repeat; } .twitterBox h2 { padding: 0px 0px 12px 64px; font-size: 36px; font-weight: normal; font-family: 'TitilliumText22LXBold'; color: #f1f1f1; line-height: 39px; background: url('../images/twitter.png') left top no-repeat; text-align: left; } .twitterBox a { padding-left: 3px; color: #f3b638; font-weight: bold; text-decoration: none; } .twitterBox a:hover { text-decoration: underline; } .twitterBox p { padding: 0px 0px 14px 3px; line-height: 14px; color: #272727; } .twitterBox p a { font-weight: normal; } /* ### call box ### */ .callBox { margin: 0px 0px 0px 23px; width: 310px; float: left; overflow: hidden; background: url('../images/twitter-mid.gif') repeat-y; } .callBox .top { padding-top: 12px; background: url('../images/twitter-top.png') left top no-repeat; } .callBox .bottom { padding: 0px 12px 8px 15px; overflow: hidden; background: url('../images/twitter-bottom.gif') left bottom no-repeat; } .callBox h2 { padding: 0px 0px 10px 57px; font-size: 36px; font-weight: normal; font-family: 'TitilliumText22LXBold'; color: #f1f1f1; line-height: 38px; background: url('../images/call-icon.png') 2px top no-repeat; } .callBox span { padding: 0px 0px 8px 0px; display: block; line-height: 14px; color: #272727; } .callBox fieldset { border: 0px; } .callBox p { padding: 0px 0px 7px 0px; width: 100%; float: left; } .callBox input.field { padding: 4px 5px; float: left; color: #717171; border: 0px; width: 266px; height: 16px; background: url('../images/field2.png') 100% no-repeat; } .callBox input.btn { padding-bottom: 4px; margin: 1px 6px 0px 0px; display: block; width: 156px; height: 28px; border: 0px; cursor: pointer; float: right; text-transform: uppercase; color: #fff; font-weight: bold; background: url('../images/button.png') no-repeat; background-position: top; } .callBox input.btn:hover { background-position: bottom; } .callBox span.succes, .newsBox span.succes { color: #ffffff; background: url('../images/succes.png') no-repeat 5px; padding: 3px 3px 3px 30px; margin-top: -10px; } .callBox span.fout, .newsBox span.fout { color: #ffffff; background: url('../images/error.png') no-repeat 5px; padding: 3px 3px 3px 25px; margin-top: -10px; } .callBox p.fout, .newsBox p.fout { color: #ffffff; background: url('../images/error.png') no-repeat 5px; padding: 5px 3px 3px 30px; display: none; } /* ### news box ### */ .newsBox { margin: 0px 0px 0px 25px; width: 310px; float: left; overflow: hidden; background: url('../images/twitter-mid.gif') repeat-y; } .newsBox .top { padding-top: 13px; background: url('../images/twitter-top.png') left top no-repeat; } .newsBox .bottom { padding: 0px 12px 8px 11px; overflow: hidden; background: url('../images/twitter-bottom.gif') left bottom no-repeat; } .newsBox h2 { padding: 0px 0px 10px 60px; font-size: 36px; font-weight: normal; font-family: 'TitilliumText22LXBold'; color: #f1f1f1; line-height: 32px; background: url('../images/news-icon.png') 0px 2px no-repeat; } .newsBox span { padding: 5px 0px 8px 4px; display: block; line-height: 14px; color: #272727; } .newsBox fieldset { border: 0px; } .newsBox p { padding: 0px 0px 7px 4px; width: 100%; float: left; } .newsBox input.field { padding: 4px 5px; float: left; color: #717171; border: 0px; width: 266px; height: 16px; background: url('../images/field2.png') 100% no-repeat; } .newsBox input.btn { padding-bottom: 4px; margin: 1px 6px 0px 0px; display: block; width: 156px; height: 28px; border: 0px; cursor: pointer; float: right; text-transform: uppercase; color: #fff; font-weight: bold; background: url('../images/button.png') no-repeat; background-position: top; } .newsBox input.btn:hover { background-position: bottom; } /* ### footer container ### */ #footerCntr { overflow: hidden; width: 100%; min-height: 42px; background: url('../images/footer-bg.png') left bottom repeat-x; } #footerCntr .center { margin: 0px auto; width: 982px; } #footerCntr p { line-height: 18px; text-align: center; color: #6e6e6e; } #footerCntr a { padding: 0px 5px; color: #6e6e6e; text-decoration: none; } #footerCntr a:hover { text-decoration: underline; }