*{ margin:0; padding:0; } body { font-family: "Arial", serif; font-size: 14px; color: #fff; font-weight: 300; background: #0080ae; } h1 { font-size: 24px; font-weight: 300; letter-spacing: 1px; } h1.project-title { font-size: 24px; font-weight: 300; color: #0080ae; letter-spacing: 1px; padding: 10px 0 0 10px; } h2 { width: 100%; font-size: 18px; color: #ffdca8; margin: 0; padding: 5px 0 0 5px; } h2.toepassing { height: 26px; width: 95%; color: #fff; padding-top: 4px; font-weight: 300; background: #0080ae; } h2.toepassing-active { height: 26px; width: 95%; margin-top: 8px; position: absolute; color: #fff; padding-top: 4px; font-weight: 300; background: #0080ae; z-index: 10; } h2.project-subtitle { font-size: 16px; font-style: italic; letter-spacing: 1px; color: #6e6f71; padding: 0 0 5px 10px; } h3 { font-size: 16px; color: #0080ae; margin-bottom: 10px; padding-left: 20px; } h4 { margin-top: 10px; font-weight: 300; color: #ffdca8; } p { width: 90%; margin: 10px 0; line-height: 18px; } p.one-column { width: 90%; color: #6e6f71; margin: 0 0 25px 0; padding-left: 20px; line-height: 20px; } p.two-columns { width: 45%; float: left; color: #6e6f71; margin: 0 0 25px 0; padding-left: 20px; line-height: 20px; } div.categorie { height: 68%; width: 100%; font-size: 16px; padding-left: 5px; } div.project-btn { font-size: 16px; padding-left: 5px; background: url("../images/project-btn.png") no-repeat; background-position: 110px 6px; } a.grey { text-decoration: none; color: #6e6f71; } a.grey:hover { color: #0080ae; } a.white, a.white2 { text-decoration: none; color: #fff; } a.white:hover { text-decoration: underline; } #container a.white:hover { height: 100%; width: 100%; display: block; text-decoration: underline; } a.white2:hover { text-decoration: underline; } a.blue { color: #0080ae; } a.blue:hover { text-decoration: none; } a.yellow { color: #ffdca8; text-decoration: none; } a.yellow:hover { text-decoration: underline; } span.thicker { font-weight: bold; } #homepage, #drukwerkpage, #narrowcastingpage, #webdesignpage, #bestickeringpage, #reclamebordenpage { background: url("../images/homepage-bg.jpg") no-repeat; background-size: cover; webkit-background-size: cover; moz-background-size: cover; o-background-size: cover; background-position: center 90px; } /* * HEADER AND CONTAINER */ #header-wrap { height: 90px; width: 100%; min-width: 290px; background: #fff; } #header { height: 90px; width: 990px; margin: 0 auto; background: #fff; } #logo { width: 24%; float: left; } #logo a { height: 49px; width: 100%; display: block; text-indent: -9999em; overflow: hidden; background: url("../images/logo.jpg") no-repeat; } #container { height: 100%; width: 990px; min-width: 290px; margin: 0 auto; padding-bottom: 25px; } #page-title { height: 30px; width: 100%; padding: 20px 0; } .content-image { height: 166px; width: 100%; margin-bottom: 20px; } .showcase-images { height: 166px; width: 25%; float: left; position: relative; } .showcase-images-empty { height: 166px; width: 25%; float: left; display: none; background: #fff; } /* * FOOTER */ #footer-wrap { height: 40px; width: 100%; float: left; margin-bottom: 3px; background: #fff; } #footer { height: 16px; width: 990px; margin: 0 auto; padding: 12px 0; color: #6e6f71; } #footer a { text-decoration: none; color: #6e6f71; } #footer a:hover, #footer a.active { color: #0080ae; } #bottom-line { height: 2px; width: 100%; float: left; margin-bottom: 25px; background: url("../images/bottom-line.jpg") repeat-x; } #copyright { width: 25%; float: left; } #contact-info { width: 75%; float: left; text-align: right; } /* * MENUS */ #top { height: 26px; width: 100%; } #nav-extra { width: 255px; float: right; font-size: 16px; text-align: center; padding: 3px 0; background: #6e6f71; } #nav-extra a { text-decoration: none; color: #fff; } #nav-extra a:hover, #nav-extra a.active { color: #ffdca8; } #toggle { width: 60%; float: left; padding-left: 49px; font-size: 16px; text-align: center; } #toggle a { height: 19px; width: 100px; text-decoration: none; color: #fff; padding: 3px 0; display: block; background: #0080ae; } #topmenu { width: 76%; float: left; display: block; } ul.nav { height: 100%; float: right; font-size: 16px; padding-top: 17px; background: none; } ul.nav li { list-style: none; float: left; margin-left: 20px; } ul.nav li a { text-decoration: none; color: #6e6f71; } ul.nav li a:hover, ul.nav li a.active { color: #0080ae; } ul.nav li.drukwerk { width: 85px; margin-left: 0; } ul.nav li.narrowcasting { width: 145px; } ul.nav li.webdesign { width: 100px; } ul.nav li.bestickering { width: 120px; } ul.nav li.over-ons { width: 110px; } .submenu { height: 478px; width: 25%; float: left; padding-top: 20px; background: #fff url("../images/submenu-bg.png") repeat-y; background-position: right; } ul.subnav { height: 100%; width: 100%; line-height: 24px; } ul.subnav li { list-style: none; border-bottom: 1px solid #7fbfd6; } ul.subnav li a { display: block; color: #0080ae; text-decoration: none; padding: 5px 0 5px 20px; background: url("../images/submenu-arrow-blue.png") no-repeat; background-position: 5px 12px; } ul.subnav li a:hover, ul.subnav li a.active { color: #fff; background: #0080ae url("../images/submenu-arrow-white.png") no-repeat; background-position: 5px 12px; } ul#socialmedia { height: 26px; width: 120px; float: right; margin-top: -5px; } ul#socialmedia li { height: 100%; width: 26px; list-style: none; float: left; margin-left: 10px; } ul#socialmedia li#twitter a { height: 26px; width: 26px; display: block; text-indent: 9999em; overflow: hidden; background: url("../images/twitter.png") no-repeat; } ul#socialmedia li#facebook a { height: 26px; width: 26px; display: block; text-indent: 9999em; overflow: hidden; background: url("../images/facebook.png") no-repeat; } ul#socialmedia li#linked-in a { height: 26px; width: 26px; display: block; text-indent: 9999em; overflow: hidden; background: url("../images/linked-in.png") no-repeat; } ul#socialmedia li#twitter a:hover { background-position: 0 -26px; } ul#socialmedia li#facebook a:hover { background-position: 0 -26px; } ul#socialmedia li#linked-in a:hover { background-position: 0 -26px; } #menu { width: 100%; float: left; padding-bottom: 10px; background: #fff; } ul.nav-footer { width: 98%; margin: 0 auto; } ul.nav-footer li { height: 35px; width: 100%; border-bottom: 1px solid #ccc; } ul.nav-footer li.back-to-top { height: 43px; min-width: 290px; text-align: center; border-top: 1px solid #ccc; } ul.nav-footer li.back-to-top a { padding: 20px 0 5px 0; background: url("../images/top.png") no-repeat; background-position: center 5px; } ul.nav-footer li a { height: 20px; text-decoration: none; color: #6e6f71; padding: 10px 0 5px 0; display: block; } ul.nav-footer li a:hover, ul.nav-footer li a.active { color: #0080ae; } ul.bulletlist { color: #6e6f71; } ul.bulletlist li { list-style: none; padding-left: 20px; background: url("../images/submenu-arrow-blue.png") no-repeat; background-position: 0 6px; } /* * HOME PAGINA */ #portfolio { height: 498px; width: 100%; } .portfolio-images { height: 166px; width: 25%; float: left; } .fdw-background { width:100%; height: 166px; background-color:rgba(0,0,0,0.6); opacity:0; } .fdw-background2 { width:100%; height: 158px; padding-top: 8px; background-color:rgba(0,0,0,0.6); opacity:0; } #klantnaam { background: url("../images/klantnaam.png") no-repeat; background-position: center center; } #home-img1 { background: url("../images/homepage/home-img1.jpg") no-repeat; background-position: center center; } #home-img2 { background: url("../images/homepage/home-img2.jpg") no-repeat; background-position: center center; } #home-img3 { background: url("../images/homepage/home-img3.jpg") no-repeat; background-position: center center; } #home-img4 { background: url("../images/homepage/home-img4.jpg") no-repeat; background-position: center center; } #home-img5 { background: url("../images/homepage/home-img5.jpg") no-repeat; background-position: center center; } #home-img6 { background: url("../images/homepage/home-img6.jpg") no-repeat; background-position: center center; } #home-img7 { background: url("../images/homepage/home-img7.jpg") no-repeat; background-position: center center; } #home-img8 { background: url("../images/homepage/home-img8.jpg") no-repeat; background-position: center center; } #home-img9 { background: url("../images/homepage/home-img9.jpg") no-repeat; background-position: center center; } #home-img10 { background: url("../images/homepage/home-img10.jpg") no-repeat; background-position: center center; } #home-img11 { background: url("../images/homepage/home-img11.jpg") no-repeat; background-position: center center; } #home-img12 { background: url("../images/homepage/home-img12.jpg") no-repeat; background-position: center center; } #home-text { height: 100%; overflow: hidden; width: 100%; padding: 25px 0; } #hotchamedia { width: 50%; float: left; } #hotchamedia p { color: #cfcfcf; } #tweets { width: 50%; float: left; } /* * DRUKWERK PAGINA */ #drukwerk { height: 550px; width: 100%; } #huisstijl-img1 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img1.jpg") no-repeat; background-position: center center; } #huisstijl-img2 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img2.jpg") no-repeat; background-position: center center; } #huisstijl-img3 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img3.jpg") no-repeat; background-position: center center; } #huisstijl-img4 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img4.jpg") no-repeat; background-position: center center; } #huisstijl-img5 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img5.jpg") no-repeat; background-position: center center; } #huisstijl-img6 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img6.jpg") no-repeat; background-position: center center; } #huisstijl-img7 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img7.jpg") no-repeat; background-position: center center; } #huisstijl-img8 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img8.jpg") no-repeat; background-position: center center; } #huisstijl-img9 { background: url("../images/drukwerk/huisstijl-identiteit/drukwerk-img9.jpg") no-repeat; background-position: center center; } #fbfp-img1 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img1.jpg") no-repeat; background-position: center center; } #fbfp-img2 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img2.jpg") no-repeat; background-position: center center; } #fbfp-img3 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img3.jpg") no-repeat; background-position: center center; } #fbfp-img4 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img4.jpg") no-repeat; background-position: center center; } #fbfp-img5 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img5.jpg") no-repeat; background-position: center center; } #fbfp-img6 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img6.jpg") no-repeat; background-position: center center; } #fbfp-img7 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img7.jpg") no-repeat; background-position: center center; } #fbfp-img8 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img8.jpg") no-repeat; background-position: center center; } #fbfp-img9 { background: url("../images/drukwerk/folders-brochures-flyers-posters/fbfp-img9.jpg") no-repeat; background-position: center center; } #kleding-img1 { background: url("../images/drukwerk/kleding/kleding-img1.jpg") no-repeat; background-position: center center; } #kleding-img2 { background: url("../images/drukwerk/kleding/kleding-img2.jpg") no-repeat; background-position: center center; } #kleding-img3 { background: url("../images/drukwerk/kleding/kleding-img3.jpg") no-repeat; background-position: center center; } #kleding-img4 { background: url("../images/drukwerk/kleding/kleding-img4.jpg") no-repeat; background-position: center center; } #kleding-img5 { background: url("../images/drukwerk/kleding/kleding-img5.jpg") no-repeat; background-position: center center; } #kleding-img6 { background: url("../images/drukwerk/kleding/kleding-img6.jpg") no-repeat; background-position: center center; } #kleding-img7 { background: url("../images/drukwerk/kleding/kleding-img7.jpg") no-repeat; background-position: center center; } #kleding-img8 { background: url("../images/drukwerk/kleding/kleding-img8.jpg") no-repeat; background-position: center center; } #kleding-img9 { background: url("../images/drukwerk/kleding/kleding-img9.jpg") no-repeat; background-position: center center; } /* * NARROWCASTING PAGINA */ #narrowcasting { height: 550px; width: 100%; } #narrowcasting-textpage { height: 550px; width: 100%; } .narrowcasting-content { height: 498px; width: 75%; float: left; background: #fff; } #tv-kanaal { background: url("../images/tv-kanaal.jpg") no-repeat; background-position: left; } #uitzendingen { background: url("../images/uitzendingen.jpg") no-repeat; background-position: left; } #meetbaarheid { background: url("../images/meetbaarheid.jpg") no-repeat; background-position: left; } #tv-kanaal-bullet { height: 145px; width: 45%; float: left; padding-left: 20px; line-height: 20px; } ul.bulletlist-white { color: #fff; line-height: 22px; margin-top: 5px; margin-bottom: 10px; } ul.bulletlist-white li { list-style: none; margin-left: 10px; padding-left: 20px; background: url("../images/submenu-arrow-white.png") no-repeat; background-position: 0 6px; } #narrowcasting-img1 { background: url("../images/narrowcasting/narrowcasting-img1.jpg") no-repeat; background-position: center center; } #narrowcasting-img2 { background: url("../images/narrowcasting/narrowcasting-img2.jpg") no-repeat; background-position: center center; } #narrowcasting-img3 { background: url("../images/narrowcasting/narrowcasting-img3.jpg") no-repeat; background-position: center center; } #narrowcasting-img4 { background: url("../images/narrowcasting/narrowcasting-img4.jpg") no-repeat; background-position: center center; } #narrowcasting-img5 { background: url("../images/narrowcasting/narrowcasting-img5.jpg") no-repeat; background-position: center center; } #narrowcasting-img6 { background: url("../images/narrowcasting/narrowcasting-img6.jpg") no-repeat; background-position: center center; } #narrowcasting-img7 { background: url("../images/narrowcasting/narrowcasting-img7.jpg") no-repeat; background-position: center center; } #narrowcasting-img8 { background: url("../images/narrowcasting/narrowcasting-img8.jpg") no-repeat; background-position: center center; } #narrowcasting-img9 { background: url("../images/narrowcasting/narrowcasting-img9.jpg") no-repeat; background-position: center center; } /* * WEBDESIGN PAGINA */ #webdesign { height: 550px; width: 100%; } #webdesign-textpage { height: 550px; width: 100%; } #webdesign-dienstenpage { height: 550px; width: 100%; } .webdesign-content { height: 498px; width: 75%; float: left; background: #fff; } .webdesign-content ul.bulletlist { margin-left: 20px; line-height: 24px; } .diensten-column { height: 100%; width: 50%; float: left; text-align: center; } .diensten-column p { width: 95%; color: #6e6f71; margin: 0 auto; padding: 0; } .diensten-column h3 { font-size: 20px; margin-top: 23px; padding-left: 0; } #column-2 { background: url("../images/template-bg.jpg") repeat-x; } #column-3 { background: url("../images/custom-bg.jpg") repeat-x; } ul.bulletlist2 { width: 60%; line-height: 22px; margin: 20px auto; text-align: left; color: #6e6f71; } ul.bulletlist2 li { list-style: none; padding-left: 20px; background: url("../images/submenu-arrow-blue.png") no-repeat; background-position: 0 6px; } .contact-btn { height: 26px; width: 65%; text-align: center; color: #fff; margin: 20px auto 0 auto; background: #0080ae; } .contact-btn a { height: 17px; width: 100%; padding: 5px 0; display: block; } #template { height: 67px; width: 100%; margin: 20px 0; background: url("../images/template.png") no-repeat; background-position: center 0; } #custom { height: 67px; width: 100%; margin: 20px 0; background: url("../images/custom.png") no-repeat; background-position: center 0; } #restyle-website { background: url("../images/restyle-website.jpg") no-repeat; background-position: center; } #responsive-webdesign { background: url("../images/responsive-webdesign.jpg") no-repeat; background-position: center; } #logo-ontwerp { background: url("../images/logo-ontwerp.jpg") no-repeat; background-size: cover; background-position: center; } #seo { background: url("../images/seo.jpg") no-repeat; background-position: center; } #hotchadesign { background: url("../images/hotchadesign.jpg") no-repeat; background-position: center; } #visie { background: url("../images/visie.jpg") no-repeat; background-position: center; } #vertaalslag { background: url("../images/vertaalslag.jpg") no-repeat; background-position: center; } #werkwijze { background: url("../images/werkwijze.jpg") no-repeat; background-position: center; } #webdesign-img1 { background: url("../images/webdesign/webdesign-img1.jpg") no-repeat; background-position: center center; } #webdesign-img2 { background: url("../images/webdesign/webdesign-img2.jpg") no-repeat; background-position: center center; } #webdesign-img3 { background: url("../images/webdesign/webdesign-img3.jpg") no-repeat; background-position: center center; } #webdesign-img4 { background: url("../images/webdesign/webdesign-img4.jpg") no-repeat; background-position: center center; } #webdesign-img5 { background: url("../images/webdesign/webdesign-img5.jpg") no-repeat; background-position: center center; } #webdesign-img6 { background: url("../images/webdesign/webdesign-img6.jpg") no-repeat; background-position: center center; } #webdesign-img7 { background: url("../images/webdesign/webdesign-img7.jpg") no-repeat; background-position: center center; } #webdesign-img8 { background: url("../images/webdesign/webdesign-img8.jpg") no-repeat; background-position: center center; } #webdesign-img9 { background: url("../images/webdesign/webdesign-img9.jpg") no-repeat; background-position: center center; } /* * BESTICKERING PAGINA */ #bestickering { height: 550px; width: 100%; } #raambestickering { background: url("../images/bestickering/raamdecoratie.jpg") no-repeat; background-position: center; background-size: 743px; } #autobelettering { background: url("../images/bestickering/autobelettering.jpg") no-repeat; background-position: center; background-size: 743px; } #car-wrapping { background: url("../images/bestickering/carwrapping.jpg") no-repeat; background-position: center; background-size: 743px; } #bestickering-img1 { background: url("../images/bestickering/bestickering-img1.jpg") no-repeat; background-position: center center; } #bestickering-img2 { background: url("../images/bestickering/bestickering-img2.jpg") no-repeat; background-position: center center; } #bestickering-img3 { background: url("../images/bestickering/bestickering-img3.jpg") no-repeat; background-position: center center; } #bestickering-img4 { background: url("../images/bestickering/bestickering-img4.jpg") no-repeat; background-position: center center; } #bestickering-img5 { background: url("../images/bestickering/bestickering-img5.jpg") no-repeat; background-position: center center; } #bestickering-img6 { background: url("../images/bestickering/bestickering-img6.jpg") no-repeat; background-position: center center; } #bestickering-img7 { background: url("../images/bestickering/bestickering-img7.jpg") no-repeat; background-position: center center; } #bestickering-img8 { background: url("../images/bestickering/bestickering-img8.jpg") no-repeat; background-position: center center; } #bestickering-img9 { background: url("../images/bestickering/bestickering-img9.jpg") no-repeat; background-position: center center; } /* * RECLAMEBORDEN PAGINA */ #reclameborden { height: 550px; width: 100%; } #reclameborden-img1 { background: url("../images/reclameborden/reclameborden-img1.jpg") no-repeat; background-position: center center; } #reclameborden-img2 { background: url("../images/reclameborden/reclameborden-img2.jpg") no-repeat; background-position: center center; } #reclameborden-img3 { background: url("../images/reclameborden/reclameborden-img3.jpg") no-repeat; background-position: center center; } #reclameborden-img4 { background: url("../images/reclameborden/reclameborden-img4.jpg") no-repeat; background-position: center center; } #reclameborden-img5 { background: url("../images/reclameborden/reclameborden-img5.jpg") no-repeat; background-position: center center; } #reclameborden-img6 { background: url("../images/reclameborden/reclameborden-img6.jpg") no-repeat; background-position: center center; } #reclameborden-img7 { background: url("../images/reclameborden/reclameborden-img7.jpg") no-repeat; background-position: center center; } #reclameborden-img8 { background: url("../images/reclameborden/reclameborden-img8.jpg") no-repeat; background-position: center center; } #reclameborden-img9 { background: url("../images/reclameborden/reclameborden-img9.jpg") no-repeat; background-position: center center; } /* * CONTACT PAGINA */ #contact-text-page { height: 550px; width: 100%; } #contact-text-page h3 { padding: 0; } .contact-content { height: 518px; width: 100%; background: #f4f4f4; } #contact-information { width: 100%; height: 166px; color: #6e6f71; line-height: 18px; background: #fff; } #contact-left { width: 48%; float: left; margin-top: 10px; margin-left: 2%; } #contact-right { width: 48%; float: left; margin-top: 38px; margin-left: 2%; } #contact-image { height: 166px; width: 100%; float: left; background: url("../images/contact-opnemen.jpg") no-repeat; background-position: center 0; } #map_container { height: 342px; width: 51%; float: left; padding-top: 10px; background: #f4f4f4; } #map_canvas { height: 250px; width: 90%; margin: 0 auto; } iframe { width: 100%; } #info { font-size: 12px; text-align: right; color: #6e6f71; line-height: 20px; } #error { color: #6e6f71; } #succeeded { color: #6e6f71; } #contact { width: 47%; float: left; margin-top: 10px; margin-left: 2%; } input { height: 25px; width: 60%; float: left; margin-bottom: 10px; padding-left: 5px; font-family: Arial; font-size: 12px; color: #6e6f71; border: 1px solid #ccc; } input#contactsend { width: 35%; padding: 0; font-size: 13px; text-align: center; margin-top: 7px; color: #fff; cursor: pointer; background: #0080ae; border: none; } input#contactsend:hover { color: #fff; background: #6e6f71; } textarea { height: 105px; width: 90%; font-family: Arial; font-size: 12px; color: #6e6f71; padding-left: 5px; padding-top: 5px; resize: none; border: 1px solid #ccc; } /* * PROJECT PAGINA */ .project { height: 550px; width: 100%; } .project-container { height: 502px; width: 73%; margin-left: 2%; float: left; overflow: hidden; } .column-container { height: 479px; width: 1656px; } .column-container2 { height: 479px; width: 850px; } .column-container3 { height: 479px; width: 1150px; } .column-container4 { height: 479px; width: 1400px; } .column { height: 100%; width: 256px; margin-right: 20px; float: left; background: #fff; } .column-image { height: 98%; width: 246px; margin-right: 20px; float: left; background: #fff; padding-left: 10px; padding-top: 10px; } .project-text { margin-left: 10px; color: #6e6f71; } .project-image { height: 157px; width: 236px; margin-left: 10px; margin-bottom: 5px; } .facebook-like-share { margin-left: 10px; } .overzicht { margin-left: 10px; margin-top: 10px; } .projectpage { height: 550px; width: 100%; }