/* @override http://www.systionlive.eu/css/main.css */ /* @override http://www.systionlive.eu/css/main.css */ html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, div, span, img, form, fieldset, legend, table, tr, td, th { margin: 0; padding: 0; } html, body { background: #e0e8ea; color: #666; } body { width: 960px; font-family: Arial, sans-serif; font-size: 10px; margin: 0 auto; } h1, h2 { color: #0192dc; font-weight: normal; font-size: 2.8em; letter-spacing: -1px; line-height: 1; } h1 { position: relative; z-index: 3; } h2 { font-size: 10 px; } h3 { font-size: 10 px; } a { text-decoration: none; color: #ff7f00; } a:hover { text-decoration: underline; } img { display: block; border: none; } a img { opacity: 0.8; } a:hover img { opacity: 1; } fieldset { border: none; margin: 0 ; } fieldset legend { color: #0192dc; font-weight: normal; font-size: 1.6em; line-height: 1; } fieldset ul { list-style: none; padding: 10px 0; width: 600px; } fieldset li { overflow: hidden; padding: 5px 0; font-size: 10 px; } fieldset li.submit { text-align: right; padding: 10px 0 0 0px; margin-right: 15px; } fieldset label { float: left; width: 180px; font-size: 1.2em;} fieldset label.inline { float: none; width: auto; cursor: pointer; vertical-align: middle; } fieldset textarea { width: 400px; border: 2px solid #b2b2b2; font-family: Arial, sans-serif; font-size: 1.2em; color: #666; background: #fff; } fieldset input { } fieldset input.text { float: left; width: 400px; border: 2px solid #b2b2b2; margin-right: 5px; font-family: Arial, sans-serif; font-size: 1.2em; color: #666; background: #fff; height: 20px; } fieldset input.radio { display: inline; vertical-align: middle; } fieldset textarea:focus, fieldset input.text:focus, fieldset input[type="text"]:focus { background: #f0f8fd; } fieldset input.street { width: 340px; } fieldset input.number { width: 49px; } fieldset input.postal { width: 99px; } fieldset input.place { width: 290px; } /*FORM CONTAINER*/ div.form-container { margin-top:12px; font-size:12px; overflow:hidden; } p.legend { margin-bottom: 1em; font-size:11px; } p.legend em { color: #C00; font-style: normal; } /* div.errors { margin: 0 0 10px 0; padding: 5px 10px; border: #FC6 1px solid; background-color: #FFC; } div.errors p { margin: 0; } div.errors p em { color: #C00; font-style: normal; font-weight: bold; } */ div.form-container form { margin:0; padding:0; } div.form-container form p { margin: 0; } div.form-container form p.note { margin-left: 130px; font-size: 90%; color: #333; } div.form-container form p.error { margin:2px 0 0 130px; } div.form-container form fieldset { margin:12px 0; padding:12px 0; } div.form-container form legend { color: #0192dc; font-size:15px; margin:0; padding:0; } div.form-container form fieldset div { padding: 0.25em 0; margin-bottom:1px; overflow:hidden; } div.form-container label, div.form-container span.label { margin-right: 10px; padding-right: 10px; width: 110px; display: block; float: left; text-align: left; position: relative; } div.form-container label.error, div.form-container span.error { color: #C00!important; } div.form-container label em, div.form-container span.label em { position: absolute; right: 0; font-size: 120%; font-style: normal; color: #C00; } div.form-container input.error { border-color: #C00!important; background-color: #FEF!important; } div.form-container input:focus, div.form-container input.error:focus, div.form-container textarea:focus { background-color: #FFC!important; border-color: #FC6!important; } div.form-container div.controlset label, div.form-container div.controlset input { display: inline; float: none; } div.form-container div.controlset div { margin-left: 130px; } div.form-container div.buttonrow { margin-right: 40px; } div.form-container textarea, div.form-container input.text { width: 350px; } div.form-container textarea, div.form-container input.text { border: 2px solid #b2b2b2; font-size: 100%; color: #666; background: #fff; font-family:Trebuchet MS; } .error{font-size:11px!important; } #offerte-aanvragen, #laat-u-bellen { padding: 0 0 0 26px; } .error { color: #f00; } .section { background: #fff url(/img/css/section-bottom.png) no-repeat 0 100%; padding: 22px 25px 21px 25px; margin: 0 0 10px 0; position: relative; overflow: hidden; } .top { background: #fff url(/img/css/section-top.png) no-repeat 0 0; height: 13px; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; } .intro { padding-bottom: 25px; } .intro p { font-size: 1.4em; line-height: 1.8; margin: 5px 0 0 0; width: 460px; position: relative; z-index: 2; } .intro p a { color: #ff7f00; padding: 3px 13px 3px 0; background: #fff url(/img/css/arrows.png) no-repeat 100% -72px; } .intro p a:hover { text-decoration: none; border-bottom: 1px solid #ff7f00; } .intro ul { padding-left: 10px; width: 460px; position: relative; z-index: 3; } .intro p.button { margin: 20px 0 0 0; } .intro p.button a { padding: 0; background: none; } .intro p.button a:hover { border: none; } .intro p.visual { margin: 0; width: auto; position: absolute; bottom: 0; right: 100px; z-index: 1; } .intro p.visualActie { margin: 0; width: auto; position: absolute; right: 0px; z-index: 1; top: 0; } .intro p.visualTop { margin: 0; width: auto; position: absolute; top: 30px; right: 10px; z-index: 1; } .item { float: left; width: 335px; margin: 0 35px 0 0; } .item p { font-size: 1.2em; line-height: 1.8; margin: 5px 0 0 0; position: relative; z-index: 2; } /*.item p { font-size: 1.2em; line-height: 1.5; } .item ul { list-style: none; overflow: hidden; margin: 15px 0 0 0; } .item ul li { float: left; margin: 0 15px 0 0; }*/ .item a { color: #ff7f00; } .item a:hover { text-decoration: none; border-bottom: 1px solid #ff7f00; } .content { } .content p { margin: 1em 0; font-size: 1.2em; } .content ul { margin: 1em 2em; font-size: 1.2em; } .content ol { margin: 1em 2em; font-size: 1.2em; } .content h3 { margin: 1.5em 0 1em 0; font-size: 1.4em; } .arrow { color: #ff7f00; padding: 1px 13px 3px 0; background: #fff url(/img/css/arrows.png) no-repeat 100% -72px; } .arrow a { color: #ff7f00; padding: 1px 13px 3px 0; background: #fff url(/img/css/arrows.png) no-repeat 100% -72px; } .arrow a:hover { text-decoration: none; border-bottom: 1px solid #ff7f00; } .faq { width: 747px; } .faq ul { list-style: disc; margin: 1em 0; } .faq ul li { float: none; margin: 0.2em 2em; font-size: 1.2em; } .buzz { width: 580px; margin-left: 154px; } .buzz ul { list-style: disc; margin: 1em 0; } .buzz ul li { float: none; margin: 0.2em 2em; font-size: 1.2em; } .examples { float: left; width: 411px; position: relative; z-index: 2; } .examples h3 { position: absolute; left: -9999em; } .examples ul { list-style: none; overflow: hidden; margin: 0 0 -25px 0; } .examples ul li { float: left; margin: 0 32px 25px 0; width: 105px; } .examples ul li img { margin: 0 0 3px 0; } .link-to-site { position: absolute; left: 25px; top: 25px; width: 150px; } .link-to-site p { } .link-to-site p a { display: block; margin: 20px 0; } .details { background: #e6f4fc url(/img/css/details-bottom.png) no-repeat 0 100%; width: 142px; position: absolute; right: 10px; top: 10px; bottom: 10px; z-index: 3; } .details h3 { color: #ff7f00; font-size: 1.2em; font-weight: normal; background: transparent url(/img/css/details-top.png) no-repeat 0 0; padding: 10px 7px 2px 7px; } .details ul, .details p { list-style: none; padding: 0 5px 10px 7px; } .details ul li { background: transparent url(/img/css/details-bullet.png) no-repeat 0 0.7em; padding: 1px 0 1px 7px; } ul.points { list-style: none; margin: 25px 0 20px 0; } ul.points li { background: transparent url(/img/css/bullet.png) no-repeat 0 50%; line-height: 1.4; font-size: 1.4em; color: #97bf0d; padding: 3px 0 3px 21px; } ul.points li strong { text-transform: uppercase; font-weight: normal; } .intro ul.points{ list-style: none; margin:12px 0 0 -18px; } .intro ul.points li{ list-style: none; line-height: 1.4; font-size: 1.4em; } #header { background: transparent url(/img/css/header.png) no-repeat 0 0; position: relative; height: 140px; } #logo { padding: 21px 0 0 23px; } #logo a { display: block; width: 292px; height: 84px; text-indent: -9999em; overflow: hidden; } #skip { position: absolute; left: -9999em; } #nav-main { list-style: none; overflow: hidden; position: absolute; bottom: 0; right: 18px; padding: 0 10px 0 25px; } #nav-main li { float: left; margin: 0 10px; } #nav-main li a { font-size: 1.4em; letter-spacing: 1px; color: #99d3f1; display: block; position: relative; } #nav-main li a:hover { color: #fff; text-decoration: none; } #nav-main li a span { display: block; padding: 16px 10px 7px 10px; } #nav-main li a:hover span { } #nav-main li a span span { background: transparent; padding: 0 0 2px 0 !important; display: inline; margin: 0 !important; } #nav-main li a:hover span span { border-bottom: 1px solid #fff; } #nav-main li.current { margin: 0 -10px 0 -15px; } #nav-main li.current a { color: #fff; } #nav-main li.current a span { padding: 16px 0 7px 35px; margin: 0 30px 0 0; } #nav-main li.current a:hover span { border: none; } #nav-main li.current a i { background: transparent url(/img/css/menu.png) no-repeat 100% 0; position: absolute; bottom: 0; right: -5px; width: 35px; height: 39px;} .js #nav-main li.current a { color: #332824; } .js #nav-main li.current a span { background: transparent url(/img/css/menu.png) no-repeat 0 100%; } .js #nav-main li.current a span span { background: transparent; } #nav-language { } #nav-language dt { text-indent: -9999em; overflow: hidden; } #nav-language dd { position: absolute; right: 210px; top: 9px; } #nav-language dd a { color: #fff; padding: 5px 10px; display: block; } #nav-service { list-style: none; position: absolute; top: 11px; left: 764px; width: 210px; } #nav-service li { float: left; margin: 0 10px 0 0; } #main { } #offers { } #offers h2 { position: absolute; left: -9999em; } #offers ul { list-style: none; overflow: hidden; } #offers ul li { float: left; margin: 0 0 0 15px; } #offers ul li:first-child { margin: 0; } #footer { text-align: center; padding: 0 0 50px 0; } #footer p { } #footer p a { color: #ff7f00; font-weight: bold; } #payoff { background: #fff url(/img/css/payoff.png) no-repeat 0 0; margin: 10px 0; } #payoff a { display: block; height: 51px; text-indent: -9999em; overflow: hidden; } /* Specific pages */ #intro { width: 500px; } #intro p { font-size: 1.4em; line-height: 1.8; margin: 5px 0 0 0; width: auto; } #promo { width: 560px; height: 380px; position: absolute; top: 22px; right: 25px; background-image: url('/img/flash-check-beeld.jpg'); } #compare { padding-left: 0; padding-right: 0; } #compare table { width: 100%; border-collapse: collapse; } #compare thead { } #compare thead tr { } #compare thead tr th { line-height: 1; color: #ff7f00; font-weight: normal; font-size: 1.4em; text-align: left; padding: 3px 0 3px 25px; } #compare thead tr th.type-1, #compare thead tr th.type-2, #compare thead tr th.type-3 { font-weight: bold; font-size: 1.3em; text-align: center; width: 115px; padding: 3px 0; background: #fff url(/img/css/table-header.png) no-repeat 0 0; } #compare thead tr th.type-2 { background-position: -115px 0; } #compare thead tr th.type-3 { background-position: -230px 0; } #compare thead tr td.empty { width: 10px; } #compare thead tr td.empty-2 { width: 22px; } #compare tbody { } #compare tbody tr { background: #f0f8fd; } #compare tbody tr.odd { background: #f7fcfe; } #compare tbody tr th { font-size: 1.2em; font-weight: normal; text-align: left; padding: 0 0 0 25px; } #compare tbody tr td { text-align: center; font-size: 1.2em; padding: 5px 0 4px 0; } #compare tbody tr td small { color: #ff7f00; } #compare tbody tr td strong { font-size: 1.2em; position: relative; display: block; overflow: visible; } #compare tbody tr td strong em { position: absolute; top: -10px; right: -10px; } #compare tbody tr td img { display: inline; margin: -1px 0 -4px 0; padding: 0; } #compare tbody tr td.type-1 { background: #f5e7d7; } #compare tbody tr.odd td.type-1 { background: #f9ead8; } #compare tbody tr td.type-2 { background: #e6f0df; } #compare tbody tr.odd td.type-2 { background: #ebf3e0; } #compare tbody tr td.type-3 { background: #ceeaf8; } #compare tbody tr.odd td.type-3 { background: #d3ecf9; } #compare tfoot { } #compare tfoot tr td.type-1 { height: 14px; background: #fff url(/img/css/table-footer.png) no-repeat 0 0; } #compare tfoot tr td.type-2 { background: #fff url(/img/css/table-footer.png) no-repeat -115px 0; } #compare tfoot tr td.type-3 { background: #fff url(/img/css/table-footer.png) no-repeat -230px 0; } #compare ul { float: left; margin: 20px 0 0 25px; list-style: none; } #compare ul li { color: #ff7f00; } #compare ul li small { color: #666; font-size: 1em;} #compare p { float: right; margin: 20px 42px 10px 0; } #prices { padding-left: 0; padding-right: 0; } #prices table { border-collapse: collapse; margin: 0 0 20px 0; width:960px; /*width: 100%; */} #prices table thead { } #prices table thead th { text-align: left; padding: 3px 0 4px 25px; color: #ff7f00; font-size: 1.4em; font-weight: normal; } #prices table thead th.costs-start, #prices table thead th.costs-monthly { width: 115px; text-align: center; padding: 3px 0 4px 0; background: #fff url(/img/css/table-header.png) no-repeat -115px 0; } #prices table thead th.costs-monthly { background-position: -230px 0; } #prices table thead th.empty { width: 20px; padding: 0; } #prices table thead th.empty-2 { width: 30px; padding: 0; } #prices table tbody { } #prices table tbody tr { background: #f0f8fd; } #prices table tbody tr.odd { background: #f7fcfe; } #prices table tbody tr th { text-align: left; font-weight: normal; padding: 10px 0 5px 95px; font-size: 1.1em; } #prices table tbody tr th img { float: left; margin: 0 0 0 -82px; } #prices table tbody tr th strong { display: block; color: #0192dc; font-weight: normal; font-size: 2.18em; letter-spacing: -1px; line-height: 1; } #prices table tbody tr th em { font-weight: bold; font-style: normal; } #prices table tbody tr td { } #prices table tbody tr td.add-remove, #prices table tbody tr td.costs-start, #prices table tbody tr td.costs-monthly { text-align: center; font-size: 2.4em; color: #0192dc; } #prices table tbody tr td.costs-start small, #prices table tbody tr td.costs-monthly small { font-size: 0.5em; font-weight: bold; } #prices table tbody tr td.add-remove { font-size: 1em; width: 115px; } #prices table tbody tr td.add-remove label { margin: 0 auto; width: 72px; height: 17px; text-indent: -9999em; background: transparent url(/img/css/add-remove.png) no-repeat 0 0; display: block; overflow: hidden; cursor: pointer; } #prices table tbody tr td.add-remove label.remove { background-position: 0 -17px; } #prices table tbody tr td.costs-start { background: #e3efe1; overflow: hidden; } #prices table tbody tr.odd td.costs-start { background: #eaf2e1; } #prices table tbody tr td.costs-monthly { background: #cee9f8; overflow: hidden; } #prices table tbody tr.odd td.costs-monthly { background: #d3ecf9; } #prices table tfoot { } #prices table tfoot #continue { padding: 40px 0 0 25px; vertical-align: top; } #prices table tfoot #continue a { float: left; margin: 0 20px 0 0; } #prices table tfoot #continue img { display: block; } #prices table tfoot #total-costs-start, #prices table tfoot #total-costs-monthly { height: 76px; background: #fff url(/img/css/prices-footer.png) no-repeat 0 0; color: #fff; text-align: center; font-size: 1.4em; vertical-align: bottom; visibility: hidden; } #prices table tfoot #total-costs-start strong, #prices table tfoot #total-costs-monthly strong { display: block; font-size: 1.6em; font-weight: normal; letter-spacing: -1px; margin: 0 0 10px 0; } #prices table tfoot #total-costs-monthly { background-position: -115px 0; } #prices table tbody#services-switch { } #prices table tbody#services-switch th { height: 50px; vertical-align: bottom; padding: 0 0 10px 25px; } #prices table tbody#services-switch th a { color: #ff7f00; font-size: 1.4em; } #prices table tbody#more-services { } #prices table tbody#more-services tr th img { margin-left: -55px; } #prices table tbody#more-services tr th strong { font-size: 1.6em; letter-spacing: 0; } .js #prices table tbody tr td.add-remove input { display: none; } .js #prices table tfoot #total-costs-start, .js #prices table tfoot #total-costs-monthly { visibility: visible; } .js #prices fieldset { display: none; } #portfolio { background: #96bf0d url(/img/css/portfolio-bottom.png) no-repeat 0 100%; position: relative; padding: 25px 51px; margin: 0 0 10px 0; } #portfolio .top { background-image: url(/img/css/portfolio-top.png); } #portfolio .item { width: 121px; margin: 0 2px 15px 2px; padding: 9px; } #portfolio .first { clear: left; } #portfolio .item:hover, #portfolio .item-hover { background: #abcc3d url(/img/css/portfolio-item-bottom.png) no-repeat 0 100%; } #portfolio .item .top { background-image: none; background-color: #96bf0d; z-index: -1; } #portfolio .item:hover .top, #portfolio .item-hover .top { background: url(/img/css/portfolio-item-top.png); } #portfolio .item h2 { color: #fff; font-size: 1em; letter-spacing: 1px; font-family: Arial, sans-serif; text-align: center; overflow: hidden; width: 121px; } #portfolio .item h2 a { color: #fff; } #portfolio .item h2 a:hover { border: none; } #portfolio .item h2 img { margin: 0 0 5px 0; } #portfolio .item .details { background: #fff; position: static; width: auto; padding: 5px; margin: 10px 0 0 0; } #portfolio .item .details .top { height: 20px; background: transparent url(/img/css/portfolio-details-top.png) no-repeat 50% 0; top: -20px; } #portfolio .item .details h3 { background: transparent; padding: 0; } #portfolio .item .details p, #portfolio .item .details ul { padding: 0; margin: 5px 0 10px 0; font-size: 1em; } #portfolio .item .details p.desc { color: #0192dc; font-size: 1.2em; margin: 0 0 5px 0; } .js #portfolio { } .js #portfolio .item { position: relative; } .js #portfolio .item:hover, .js #portfolio .item-hover { z-index: 100; } .js #portfolio .item .details { display: none; position: absolute; top: auto; width: 174px; left: -35px; bottom: 80px; margin: 0; padding: 0 20px 40px 20px; background: transparent url(/img/css/portfolio-details-bottom.png) no-repeat 0 100%; } .js #portfolio .item:hover .details, .js #portfolio .item-hover .details { display: block; z-index: 50; } #nav-portfolio { position: relative; clear: both; width: 844px; margin: 0 auto; padding: 0; background: #96bf0d url(/img/css/portfolio-nav.png) no-repeat 50% 100%; height: 33px; line-height: 33px; } #nav-portfolio p { text-align: center; color: #fff; font-size: 1.1em; font-weight: bold; } #nav-portfolio ul { list-style: none; } #nav-portfolio ul li { position: absolute; left: 10px; top: 8px; } #nav-portfolio ul li#nav-portfolio-next { left: auto; right: 10px; } #nav-portfolio ul li a { } #nav-portfolio ul li a img { } #contact { width: 345px; float: left; margin: 0 30px 0 0; } #contact p { margin: 10px 0; font-size: 1.2em; line-height: 1.7; } #contact a { color: #ff7f00; } #contact a:hover { text-decoration: none; border-bottom: 1px solid #ff7f00; } #contact p.button a:hover { border: none; } #contact .intro p { width: 340px; margin: 5px 0 30px 0; font-size: 1.4em; line-height: 1.8; } #tellfriend { width: 460px; float: left; margin: 0 30px 0 0; } #tellfriend .intro p { width: 460px; margin: 5px 0 20px 0; font-size: 1.4em; line-height: 1.8;} #tellfriend h3 { font-size: 1.2em; line-height: 1.8; margin: 5px 0 0 0; position: relative; z-index: 2; font-weight: normal; font-style: normal;} #tellfriend h3 ul { list-style: disc; margin: 1em 0; } #tellfriend h3 ul li { float: none; margin: 0.2em 2em; font-size: 10px; } #routeplanner { background: #daedfb url(/img/css/routeplanner.png) no-repeat 0 0; width: 503px; height: 430px; float: left; padding: 14px; } #routeplanner #google-maps { margin: 10px 0; background: #fff; padding: 0 10px 10px 10px; } #routeplanner .google-maps-styled { width: 500px; height: 300px; padding: 0 !important; } #routeplanner fieldset { margin: 0; position: relative; } #routeplanner p { overflow: hidden; font-size: 1.2em; padding: 10px 0 0 0; } #routeplanner p label { float: left; width: 45px; padding: 2px 0; } #routeplanner p input { float: left; border: 2px solid #b2b2b2; margin: 0 5px 0 0; padding: 0 1px; width: 100px; } #routeplanner p.submit { position: absolute; padding: 0; top: 11px; left: 320px; } #routeplanner p.submit input { border: none; padding: 0; width: auto; margin: 0; float: none; } #directions { padding: 22px 25px 21px 25px !important; font-size: 1.2em; } /* sIFR sTUFF */ .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; } .sIFR-unloading .sIFR-flash { visibility: hidden !important; } .sIFR-replaced, .sIFR-ignore { visibility: visible !important; } .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-replaced div.sIFR-fixfocus { margin: 0; padding: 0; overflow: auto; letter-spacing: 0; float: none; } .sIFR-dummy { width: 0; height: 0; margin-left: 42px; z-index: 0; } .sIFR-active h1 { visibility: hidden; font-family: Verdana; font-size: 28px; margin-bottom: -10px; } .sIFR-active .section h2 { visibility: hidden; font-family: Verdana; font-size: 24px; margin-bottom: -10px; } .sIFR-active #main-services th strong { visibility: hidden; font-family: Verdana; font-size: 24px; margin-bottom: -10px; } #contactlandinga fieldset ul{ margin:0; padding:0; } #contactlandinga fieldset li{ overflow: hidden; padding: 5px 0; margin:0; font-size: 10 px; } #contactlandinga fieldset li .submit{ float:right; margin:0 55px 0 0;} #contactlandinga fieldset legend{ padding:12px 0 12px 0; } #contactlandingb fieldset ul{ margin:0; padding:0; width:380px; } #contactlandingb fieldset li{ overflow: hidden; padding: 5px 0; margin:0; font-size: 10 px; } #contactlandingb fieldset li input.text{ width:370px;} #contactlandingb fieldset li .submit{ float:right; margin:0 5px 0 0;} #contactlandingb fieldset legend{ padding:12px 0 12px 0; } .intro ul li {list-style-type: disc; font-size: 1.2em; margin-left: 10px;} #buzz .intro ul li {list-style-type: none; margin-left: 10px;} #scrollcollection .section .item li { list-style-type: none; } /* imageGallery */ ul#imageGallery { list-style: none; margin: 0 0 10px 0; display:none; } ul#imageGallery li { width:200px; height:150px; display: block; float: left; margin: 0 5px 5px 0; } ul#imageGallery li img { width:200px; height:150px; } .photoBg{ position: absolute; top: 0; left: 0; z-index: 200; height:100%; width: 100%; background:#0098D4 url(../img/css/fotoalbumBg.gif) no-repeat center; } .label{ font-size: 14px; }