/** * Peppered screen css * * @author DS / peppered.nl * * ToC: * `body Body * `lay Layout * `header Header * `sbmenu Submenu * `smenu Service menu * `mmenu Main menu * `blog Blog/home * `info Info pages * `form Forms * `rt RichText * `glob Global classes * */ @import url("defaults.css"); /* Body [`body] ----------------------------------------------- */ body { margin: 0; padding: 0; font: normal 12px/19px verdana, arial, helvetica, sans-serif; background-color: #c3d3d4; } /* links */ a:link, a:visited { color: #e21a38; } a:link:focus, a:visited:focus, a:link:hover, a:visited:hover, a:link:active, a:visited:active { color: #e21a38; } a:hover { text-decoration: underline; } .hr hr { display: none; } .hr { background: transparent url(/images/hrContent.gif) repeat-x 0 0; height: 1px; margin: 8px 0px 10px 0px; } .hr.grey { background: transparent url(/images/hrContentGrey.gif) } /* -------- headers -------- */ /* Layout [`lay] ----------------------------------------------- */ #contentBg { background: transparent url(/images/bgBody.jpg) repeat center -500px; } #container { width: 881px; margin: auto; position: relative; /* fixes ie6 leftcolumn quirks when resizing */ } #headerContainer { background: transparent url(/images/bgTopMenu.gif) repeat-x center top; width: 100%; height: 85px; } #columnContainer { float: left; width: 576px; } #columnContainer div.layColumn { float: left; position: relative; } #mainColumn { width: 100%; margin-top: 5px; } #main { width: 576px; margin: 0 auto; } #subColumn1 { width: 305px; margin-right: -305px; /* == column width */ } #footerContainer { clear: both; height: 246px; background: #c3d3d4; line-height: 13px; } #contentContainer { background: transparent url(/images/bgMaincolumn.png) repeat-y right top; } #contentContainer .footer { margin-top: 140px; height: 5px; background: transparent url(/images/ftrContent.gif) no-repeat 15px 0; } /* Header [`header] ----------------------------------------------- */ #header { width: 881px; margin: auto; padding-left: 20px; } #logo { margin: 15px; float: left; } #pageHeader { float: left; margin-left: 11px; z-index: 1; position: relative; } #bodyProducten #pageHeader .hdrFlash { margin: 5px 6px 0px 4px; } #pageHeader .hdrFlash { margin: 5px 6px -38px 4px; } #pageHeader .hdrTop { width: 868px; height: 7px; background: transparent url(/images/mainHdrTop.png) no-repeat 0 0; } #pageHeader .hdrBottom { width: 868px; height: 7px; background: transparent url(/images/mainHdrBottom.png) no-repeat 0 0; } #pageHeader .hdrBody { width: 868px; background: transparent url(/images/mainHdrBody.png) repeat-y 0 0; padding: 0px 6px; } #pageHeader .hdrBody img, #pageHeader .hdrBody object { margin-bottom: -5px; } #pageHeader .hdrBody .foldout { font-size: 10px; background: #fff; padding: 4px; position: absolute; right: 32px; top: 215px; } #pageHeader .hdrBody .foldout a { background: transparent url(/images/bulletRed.gif) no-repeat 5px 9px; padding: 5px 5px 5px 14px; } /* Service menu [`smenu] ----------------------------------------------- */ #servicemenu { width: 881px; margin: auto; font-size: 10px; color: #3d6968; } #servicemenu a { color: #3d6968; } #servicemenu ul { margin-left: 15px; padding-top: 20px; height: 155px; } #servicemenu ul ul { float: none; margin: 0; padding: 0; height: auto; } #servicemenu li { width: 140px; padding: 5px 0 0 25px; float: left; background: transparent url(/images/hrVertFooter.gif) repeat-y right top; } #servicemenu li li { width: auto; padding: 0; float: none; background: none; } #servicemenu .bulletLink { background: transparent url(/images/bulletBlue.gif) no-repeat 0 4px; padding-left: 8px; } #servicemenu .feed a { background: transparent url(/images/bulletFeed.gif) no-repeat 0 0px; padding-left: 21px; display: block; height: 14px; } #servicemenu li .newsletter { margin-top: 40px; } #servicemenu h3 { overflow: hidden; text-indent: -99999px; margin-bottom: 15px; } #servicemenu .address, #servicemenu .jobs, #servicemenu .feeds, #servicemenu .admin { height: 145px; } #servicemenu .address h3 { width: 71px; height: 10px; background: transparent url(/images/hdrAddress.gif) no-repeat 0 0; } #servicemenu .jobs h3 { width: 74px; height: 10px; background: transparent url(/images/hdrJobs.gif) no-repeat 0 0; } #servicemenu .feeds h3 { width: 37px; height: 10px; background: transparent url(/images/hdrFeeds.gif) no-repeat 0 0; } #servicemenu .newsletter h3 { width: 83px; height: 10px; background: transparent url(/images/hdrNewsletter.gif) no-repeat 0 0; } #servicemenu .admin { background: none; } #servicemenu .admin h3 { width: 48px; height: 10px; background: transparent url(/images/hdrAdmin.gif) no-repeat 0 0; } /* Main menu [`mmenu] ----------------------------------------------- */ #menuContainer { float: right; margin-right: 75px; } #menuContainer li { float: left; } #menuContainer li a { height: 96px; display: block; background: transparent url(/images/mainMenuSprite.png) no-repeat 0 0; overflow: hidden; text-indent: -99999px; } #menuContainer .blogBtn a { width: 82px; background-position: 0 0; } #menuContainer .profielBtn a { width: 101px; background-position: -82px 0; } #menuContainer .projectenBtn a { width: 125px; background-position: -183px 0; } #menuContainer .productenBtn a { width: 131px; background-position: -308px 0; } #menuContainer .contactBtn a { width: 113px; background-position: -439px 0; } #menuContainer .blogBtn a:hover { width: 82px; background-position: 0 -96px; } #menuContainer .profielBtn a:hover { width: 101px; background-position: -82px -96px; } #menuContainer .projectenBtn a:hover { width: 125px; background-position: -183px -96px; } #menuContainer .productenBtn a:hover { width: 131px; background-position: -308px -96px; } #menuContainer .contactBtn a:hover { width: 113px; background-position: -439px -96px; } #menuContainer .blogBtn .menuItemActive, #menuContainer .blogBtn .menuItemActive:hover { background-position: 0 -192px; } #menuContainer .profielBtn .menuItemActive, #menuContainer .profielBtn .menuItemActive:hover { background-position: -82px -192px; } #menuContainer .projectenBtn .menuItemActive, #menuContainer .projectenBtn .menuItemActive:hover { background-position: -183px -192px; } #menuContainer .productenBtn .menuItemActive, #menuContainer .productenBtn .menuItemActive:hover { background-position: -308px -192px; } #menuContainer .contactBtn .menuItemActive, #menuContainer .contactBtn .menuItemActive:hover { background-position: -439px -192px; } /* Submenu [`sbmenu] ----------------------------------------------- */ #submenuContainer { width: 300px; margin: 50px 10px 0px 4px; } #submenuContainer a { color: #3d6968; } #submenuContainer .header { width: 300px; height: 60px; background: transparent url(/images/hdrSubmenu) no-repeat 0 0; } #submenuContainer .submenu { width: 279px; background-color: #f5faf8; margin-left: 16px; padding: 25px 0 160px 0; } #submenuContainer h3 { margin: 0 0 10px 25px; text-indent: -99999px; overflow: hidden; } #submenuContainer .submenu ul, #submenuContainer .submenu p { margin: 15px 25px 30px 25px; } #submenuContainer .submenu p a { font-weight: bold; } #submenuContainer .submenu .showAllCustomers { margin: 0 0 30px 25px; display: block; } #submenuContainer .hr { background: transparent url(/images/hrSubmenu.gif) repeat-x 0 0; height: 2px; margin: 0 25px; /*margin: 30px 25px 20px 25px;*/ } #submenuContainer .hdrCategories{ width: 119px; height: 22px; background: transparent url(/images/hdrCategories.gif) no-repeat 0 0; } #submenuContainer .hdrTags { width: 45px; height: 22px; background: transparent url(/images/hdrTags.gif) no-repeat 0 0; margin-top: 30px; } #submenuContainer .hdrRecentProj{ width: 180px; height: 23px; background: transparent url(/images/hdrRecentProj.gif) no-repeat 0 0; } #submenuContainer .hdrOurClients{ width: 131px; height: 23px; background: transparent url(/images/hdrOurClients.gif) no-repeat 0 0; } #submenuContainer .hdrRecentProjects{ width: 180px; height: 23px; background: transparent url(/images/hdrRecentProjects.gif) no-repeat 0 0; } #submenuContainer .hdrOurProd { width: 180px; height: 23px; background: transparent url(/images/hdrOurProd.gif) no-repeat 0 0; } #submenuContainer .hdrJobOffers { width: 169px; height: 23px; background: transparent url(/images/hdrJobOffers.gif) no-repeat 0 0; } #submenuContainer .hdrEmployees { width: 128px; height: 23px; background: transparent url(/images/hdrEmployees.gif) no-repeat 0 0; } .menuItems li { margin: 0 0 5px 0; } #submenuCategories .menuItems li{ margin: 0px; padding: 0 0 5px 0; background: transparent url(/images/submenu_seperator.gif) repeat-x 0 100%; } .menuItems li.last { background-image: none!important; } .menuItems li.ir { margin-bottom: 0; padding-bottom: 0px; overflow: visible; height: 31px; } .menuItems li a.ir .txtwrap { display: block; height: 100%; width: 88%; overflow: hidden; } .menuItems li a.ir { /* w: 302px, h: 27/31px */ display: block; width: 257px; height: 21px; padding-top: 6px; padding-left: 45px; margin: 0; left: -36px; font-size: 1.25em; line-height: 1.0; font-weight: bold; background: transparent; overflow: visible; } .menuItems li a.ir .ir-aid { height:27px; } .menuItems li a.ir .hover { height: 31px; visibility: hidden; } .plus20 { margin-top: -25px!important; } #submenuContainer .menuItems li a.ir:hover { color: #fff; text-decoration: none; } .menuItems li a.ir .ir-aid, .menuItems li a.ir .hover { background: transparent url(/images/submenu.png) no-repeat; } .menuItems li a.ir:focus .hover, .menuItems li a.ir:hover .hover, .menuItems li a.ir:active .hover{ visibility: visible; } /* these don't seem to work in friend IE6 */ #subMenu-alles a.ir .ir-aid { background-position: 0 0; } #subMenu-actueel a.ir .ir-aid { background-position: 0 -31px; } #subMenu-projecten a.ir .ir-aid { background-position: 0 -62px; } #subMenu-tips a.ir .ir-aid { background-position: 0 -93px; } #subMenu-ontwerpers a.ir .ir-aid { background-position: 0 -124px; } #subMenu-front_enders a.ir .ir-aid { background-position: 0 -155px; } #subMenu-programmeurs a.ir .ir-aid { background-position: 0 -186px; } #subMenu-research_development a.ir .ir-aid { background-position: 0 -217px; } #subMenu-producten a.ir .ir-aid { background-position: 0 -248px; } #subMenu-alles a.ir .hover, #subMenu-alles a.active .ir-aid { background-position: -302px 0; } #subMenu-actueel a.ir .hover, #subMenu-actueel a.active .ir-aid { background-position: -302px -31px; } #subMenu-projecten a.ir .hover, #subMenu-projecten a.active .ir-aid { background-position: -302px -62px; } #subMenu-tips a.ir .hover, #subMenu-tips a.active .ir-aid { background-position: -302px -93px; } #subMenu-ontwerpers a.ir .hover, #subMenu-ontwerpers a.active .ir-aid { background-position: -302px -124px; } #subMenu-front_enders a.ir .hover, #subMenu-front_enders a.active .ir-aid { background-position: -302px -155px; } #subMenu-programmeurs a.ir .hover, #subMenu-programmeurs a.active .ir-aid { background-position: -302px -186px; } #subMenu-research_development a.ir .hover, #subMenu-research_development a.active .ir-aid{ background-position: -302px -217px; } #subMenu-producten a.ir .hover, #subMenu-producten a.active .ir-aid { background-position: -302px -248px; } #submenuContainer .tags { margin: 0 25px; } #submenuContainer .tags a { margin-right: 10px; } #submenuContainer .tag-s1 { font-size: 0.9em; } #submenuContainer .tag-s2 { font-size: 0.95em; } #submenuContainer .tag-s3 { font-size: 1.0em; } #submenuContainer .tag-s4 { font-size: 1.05em; } #submenuContainer .tag-s5 { font-size: 1.1em; } #submenuContainer .tag-s6 { font-size: 1.15em; } #submenuContainer .tag-s7 { font-size: 1.2em; } #submenuContainer .tag-s8 { font-size: 1.25em; } #submenuContainer .tag-s9 { font-size: 1.3em; } #submenuContainer .tag-s10 { font-size: 1.35em; } #submenuContainer .tag-s11 { font-size: 1.4em; } #submenuContainer .tag-s12 { font-size: 1.45em; } #submenuContainer .btnToProjects, #submenuContainer .btnToContact, #submenuContainer .btnToJobs { margin: 10px 25px; height: 15px; display: block; text-indent: -99999px; overflow: hidden; } #submenuContainer .btnToProjects { background: transparent url(/images/btnToProducts.gif) no-repeat 0 0px; } #submenuContainer .btnToContact { background: transparent url(/images/btnToContact.gif) no-repeat 0 0px; } #submenuContainer .btnToJobs { background: transparent url(/images/btnToJobs.gif) no-repeat 0 0px; } #submenuContainer .btnToProjects:hover, #submenuContainer .btnToContact:hover, #submenuContainer .btnToJobs:hover { background-position: 0 -15px; } /* Blog [`blog] ----------------------------------------------- */ #hdrBlog { width: 100%; height: 109px; background: transparent url(/images/hdrBlog.png) no-repeat right top; overflow: hidden; text-indent: -999999px; } #blogArticles { margin: 0 40px 0 65px; padding: 25px 0 0 0; } #blogArticles li { margin-bottom: 30px; padding-left: 70px; position: relative; color: #231f20; } #blogArticles h2 { color: #e21a38; font-size: 24px; font-weight: bold; } #blogArticles h2 object { position: relative; } #blogArticles h3 { font-size: 11px; font-weight: bold; } #blogArticles .date { font-size: 13px; font-weight: bold; margin-top: 7px; } #blogArticles .date object { position: relative; } #blogArticles .date.sIFR-replaced { margin-top: -3px; } #blogArticles .author { position: absolute; top: 0px; left: 0px; height: 70px; background: transparent url(/images/avatars/onbekend.jpg) no-repeat 0 0; } #blogArticles .author a { color: #231f20; font-size: 10px; display: block; padding-top: 52px; width: 50px; } #blogArticles .body { margin-top: 10px; } #blogArticles .teaserDetail { font-weight: bold; } #blogArticles .tags { color: #e21a38; font-weight: bold; } #blogArticles .tags .label { color: #231f20; } #blogArticles .tags a { color: #e21a38; } #blogArticles .arjen { background: transparent url(/images/avatars/arjen.jpg) no-repeat 0 0; } #blogArticles .coen { background: transparent url(/images/avatars/coen.jpg) no-repeat 0 0; } #blogArticles .dave { background: transparent url(/images/avatars/dave.jpg) no-repeat 0 0; } #blogArticles .david { background: transparent url(/images/avatars/david.jpg) no-repeat 0 0; } #blogArticles .frankw { background: transparent url(/images/avatars/frankw.jpg) no-repeat 0 0; } #blogArticles .ivo { background: transparent url(/images/avatars/ivo.jpg) no-repeat 0 0; } #blogArticles .joline { background: transparent url(/images/avatars/joline.jpg) no-repeat 0 0; } #blogArticles .lieselot { background: transparent url(/images/avatars/lieselot.jpg) no-repeat 0 0; } #blogArticles .martine { background: transparent url(/images/avatars/martine.jpg) no-repeat 0 0; } #blogArticles .marvin { background: transparent url(/images/avatars/marvin.jpg) no-repeat 0 0; } #blogArticles .max { background: transparent url(/images/avatars/max.jpg) no-repeat 0 0; } #blogArticles .merel { background: transparent url(/images/avatars/merel.jpg) no-repeat 0 0; } #blogArticles .producten { background: transparent url(/images/authorIconProducten.gif) no-repeat 0 0; } .backBtn { margin: 0 0 20px 135px; } .backBtn a { color: #E21A38; font-weight: bold; } #bodyContact .backBtn { margin: 30px 0 0 0; } #pagination { width: 300px; margin: 0px auto; clear: both; line-height: 2.5em; padding-left: 80px; } #pagination ul, #pagination ul li { display: inline; margin: 0; } #pagination ul li a { color: #231f20; font-weight: bold; } #pagination li.pages { text-align: center; padding: 0 75px; } #pagination .pages li a { font-size: 11px; padding: 0.05em 0.1em; width: 1.1em; height: 1.1em; margin: 0px; } #pagination .pages .active b { color: #fff; background: #231f20; padding: 2px 3px; } #pagination .pages .active a:hover { color: #fff; text-decoration: none; } #pagination .pages li a:hover { color: #e21a38; } #pagination .toRight { float: right; margin: 0; text-align: right; width: auto; } #pagination .toLeft { float: left; width: auto; } #pagination .toRight a, #pagination .toLeft a, #pagination .toRight, #pagination .toLeft { font-size: 11px; color: #e21a38; font-weight: bold; } /* Info [`info] ----------------------------------------------- */ .body a { color: #E21A38; font-weight: bold; } .body p { margin-bottom: 20px; } .body p img { float: right; } .body th, .body td { padding: 4px 16px 4px 0; } .body th { font-weight: bold; text-transform: uppercase; } .body ul { list-style-type: disc; } .body li { margin: 0!important; padding: 0!important; } .body ul, .body ol { list-style-image: none; list-style-position: outside; margin: 1em 0 1em 4em; } .body ol { list-style-type: decimal; } #hdrFout { width: 100%; height: 109px; background: transparent url(/images/hdrFout.png) no-repeat right top; overflow: hidden; text-indent: -999999px; } #hdrProfiel { width: 100%; height: 109px; background: transparent url(/images/hdrProfiel.png) no-repeat right top; overflow: hidden; text-indent: -999999px; } #hdrProjecten { width: 100%; height: 109px; background: transparent url(/images/hdrPortfolio.png) no-repeat right top; overflow: hidden; text-indent: -999999px; } #bodyProducten #hdrProducten { width: 100%; height: 98px; background: transparent url(/images/hdrProducten.png) no-repeat left top; overflow: hidden; text-indent: -999999px; } #bodyProductenDetail #hdrProducten { width: 100%; height: 98px; background: transparent url(/images/hdrProductenDetail.png) no-repeat left top; overflow: hidden; text-indent: -999999px; } #hdrVacatures { width: 100%; height: 109px; background: transparent url(/images/hdrVacatures.png) no-repeat right top; overflow: hidden; text-indent: -999999px; } #hdrContact { width: 100%; height: 109px; background: transparent url(/images/hdrContact.png) no-repeat right top; overflow: hidden; text-indent: -999999px; } #hdrNieuwsbrief { width: 100%; height: 109px; background: transparent url(/images/hdrNieuwsbrief.png) no-repeat right top; overflow: hidden; text-indent: -999999px; } #pageContent { padding: 20px 60px; } #bodyInfo #pageContent { min-height: 420px; } #pageContent p { margin: 0 0 10px 0; } #pageContent p a, #pageContent li a { font-weight: bold; } .download { width: 405px; height: 62px; padding: 30px 0 50px 0; } .download a { display: block; height: 40px; padding: 22px 10px 0 90px; } .download .pdf { background: transparent url(/images/bgDownloadPDF.gif) no-repeat 0 0; } .richtext h2 { color: #231f20; font-size: 18px; font-weight: bold; } .richtext h3 { font-size: 11px; font-weight: bold; color: #231f20; } #bodyErrorPage-404 #pageContent { padding-bottom: 150px; } #bodyErrorPage-404 #pageContent ul { list-style: none; padding: 0px; margin: 0px; } #bodyErrorPage-404 #pageContent img { margin: 20px 30px; } #bodyErrorPage-404 #pageContent .hr { margin: 30px 0; } .addressImgContainer { width: 214px; height: 277px; background: url(/images/contactImg.gif) no-repeat 0 0; position: absolute; right: 30px; margin-top: -40px; } #seriesForm { margin: 20px 60px 0 0; } #nwsbriefForm { margin-bottom: 30px; } #seriesForm fieldset, #nwsbriefForm fieldset { margin: 20px 0 0 0; width: 383px; } #contactForm fieldset { margin-top: 0px } #seriesForm label, #nwsbriefForm label { width: 120px; float: left; padding-top: 4px; } #nwsbriefForm label { font-weight: bold; } #contactForm label { float:left; padding-top:4px; width:120px; } #seriesForm .hdr { width: 100%; margin-bottom: 5px; font-size: 15px; font-weight: bold; color: #E21A38; } #seriesForm label span, #nwsbriefForm label span { color: #E21A38; } #seriesForm .text, #nwsbriefForm .text { width: 255px; padding: 2px 3px; } #seriesForm .mandatory, #nwsbriefForm .mandatory { color: #E21A38; float: left; } #contactForm .mandatory { color: #3d6968; font-size: 10px; float: left; } #seriesForm .submit, #nwsbriefForm .submit { float: right; } #contactForm .submit { border: none; color: #f2ecd9; cursor: pointer; float: right; height: 24px; padding: 0 22px; margin-right: 19px; width: 104px; background: transparent url(/images/btnBgContact_over.gif) repeat-x 0 0; } #contactForm .submit:hover { background: #3d6968; } #contactForm input { background: #e1e9ea; border:1px solid #3d6968; color: #3d6968; height: 17px; width: 227px; } /* Vacatures [`vaca] ----------------------------------------------- */ #vacatures { margin: 0 40px 0 65px; padding: 20px 0 0 0; } #vacatures li { margin-bottom: 30px; padding-left: 0px; position: relative; color: #231f20; } #vacatures h2 { color: #e21a38; font-size: 20px; font-weight: bold; } #vacatures h2 object { position: relative; } #vacatures h2 a { color: #e21a38; } #vacatures .date { font-size: 13px; font-weight: bold; } #vacatures .date object { position: relative; } #vacatures .body { margin-top: 10px; } #vacatures .tags { color: #e21a38; font-weight: bold; } #vacatures .tags .label { color: #231f20; } #vacatures .tags a { color: #e21a38; } /* Productpagina [`prod] ----------------------------------------------- */ #bodyProducten #contentContainer { float: left; width: 881px; background: none;} #bodyProducten #main { width: 881px; } #bodyProducten #producten { float: left; margin-bottom: 20px; padding-left: 30px; position: relative; width: 851px; background: url(/images/bgProductPage.png) repeat-y left top;} #bodyProducten #producten .prodBox { overflow: hidden; float: left; border-bottom: 1px solid #fff; background: url(/images/bgProductPageBox.gif) repeat-y -9px 0; } #bodyProducten .prodBoxToggle { float: left; position: relative; width: 844px; border-top: 1px solid #dedcda; background: #fff; } #bodyProducten .prodBoxToggle a { font-size: 14px; font-weight: bold; display: block; float: left; margin: 20px 0 30px 15px; padding-left: 10px; background: transparent url("/images/bulletRedBig.gif") no-repeat left center; } #bodyProducten #contentContainer h2, #bodyProducten#contentContainer h3 { margin: 0px; } #bodyProducten .productItem { position: relative; float: left; padding:5px 2px 20px 12px; width: 197px; } #bodyProducten .productSpe { border: 0px; } #bodyProducten .productArtikel { float: left; margin-bottom: 20px; padding-left: 42px; width: 839px; background: url("/images/bgProductArtikel.png") repeat-y scroll right top transparent; } #bodyProducten .productArtikel ul { margin: 0 0 0 15px; list-style: square; } #bodyProducten .productItem li { float: left; position: relative; width: 100%; } #bodyProducten .productContact { float: left; margin-bottom: 20px; padding-left: 42px; width: 839px; background: url("/images/bgProductContact.png") repeat-y scroll right top transparent; } #bodyProducten .productArtikelLast { margin-bottom: 0px; } #bodyProducten .footer { float: left; margin-top: 0px; width: 100%; background:url("/images/ftrProducten.gif") no-repeat scroll 4px 0 transparent; } #bodyProducten .contactItem { color: #3d6968; float: left; width: 367px; } #bodyProducten .contactItem h3 { font-weight: bold; } #bodyProducten .contactItem .notice { margin-bottom: 0px!important; } #bodyProducten .telefoon { margin: 30px 0; padding: 0 25px 0 0; background: transparent url("/images/hrVertFooter.gif") repeat-y top right; } #bodyProducten .mail { padding: 30px 50px 30px 30px; } #bodyProducten .left { float: left; margin: 30px 0; padding: 0 25px 0 0; width: 367px; background: transparent url("/images/hrVert.gif") repeat-y top right; } #bodyProducten .right { float: right; padding: 30px 50px 30px 30px; width: 367px; } #bodyProducten a .btnMail { display: block; height:37px; overflow: hidden; text-indent: -6666666px; width:135px; background: url("/images/btnContact.gif") no-repeat -135px 0; } #bodyProducten a:hover .btnMail { background-position: -135px -37px; } #bodyProducten a .btnBel { display: block; height:37px; overflow: hidden; text-indent: -6666666px; width:135px; background: url("/images/btnContact.gif") no-repeat 0 0;} #bodyProducten a:hover .btnBel { background-position: 0px -37px; } #bodyProducten .productDetail { float: left; padding-left: 30px; margin: 0px; width: 851px; background: url("/images/bgProductPage.png") repeat-y scroll left top transparent; } span.icon { display: block; position: absolute; height: 34px; right: 4px; text-indent: -6666666px; top: -3px; width: 40px;background: transparent url(/images/icons/product_icons.png); } .productMar span.icon { background-position: 0 -39px; } .productSoc span.icon { background-position: 0 -72px; } .productKop span.icon { background-position: 0 -107px; } .productSpe span.icon { background-position: 0 -1px; } .hoverbox { position: absolute; display: none; } .hoverbox { padding: 0px 0px 0px 8px; position: absolute; width: 424px; z-index: 2; background: transparent url("/images/ArrowHoverbox.png") no-repeat 0px center; } .hoverboxLeft { padding: 0px 6px 0px 0px; background: transparent url("/images/ArrowHoverboxLeft.png") no-repeat 100% center; } .hoverbox .wrapper { border: 1px solid #dedcda; border-width: 1px 1px 1px 0px; font-size: 11px; min-height: 40px; padding: 10px; background: url("/images/bgHoverbox.gif") repeat-x scroll left bottom #ffffff;} .hoverboxLeft .wrapper { border-width: 1px 0px 1px 1px; } /* Tijdelijk uitgezet. Andere oplossing. LET OP! #bodyProducten #producten .prodBox: margin-bottom 0px aanpassen als dit weer actief wordt. #bodyProducten .seeAll { bottom: 0px; float: left; position: relative; height: 60px; left: -9px; width: 860px; background: url("/images/bgProductenSeeAll.gif") repeat-x; } #bodyProducten .seeAll p { margin: 0px 20px; padding: 15px 0px 0px 2px; background: url("/images/bgSeeAll.gif") repeat-x; } #bodyProducten .seeAll a { padding-left: 10px; background: url("/images/ArrowBtn_sprite.gif") no-repeat 2px 4px; } */ /* Contact [`cont] ----------------------------------------------- */ #bodyContact .menuItems { margin-bottom: 20px!important; } #bodyContact .menuItems li { margin: 0; } #bodyContact .menuItems h4 { margin: 0; font-weight: bold; } #bodyContact .menuItems .detailToggle { color: #000!important; padding-left: 8px; background: transparent url(/images/bulletBlackRight.gif) no-repeat 0 5px; } #bodyContact .menuItems .detail { margin: 0 0 10px 8px; } #bodyContact .social { margin: 0px!important; padding: 5px 0 15px 0; } #bodyContact .social li { float: left; margin: 0 5px 0 0; } #bodyContact .social li a { display: block; width: 16px; height: 16px; overflow: hidden; text-indent: -999999px; } #bodyContact .social li a:hover { background-position: 0 0; } #bodyContact .flickr a { background: transparent url(/images/icnFlickr.gif) no-repeat 0 -16px; } #bodyContact .twitter a { background: transparent url(/images/icnTwitter.gif) no-repeat 0 -16px; } #bodyContact .youtube a { background: transparent url(/images/icnYoutube.gif) no-repeat 0 -16px; } #bodyContact .blogger a { background: transparent url(/images/icnBlogger.gif) no-repeat 0 -16px; } #bodyContact .facebook a { background: transparent url(/images/icnFacebook.gif) no-repeat 0 -16px; } #bodyContact .hyves a { background: transparent url(/images/icnHyves.gif) no-repeat 0 -16px; } #bodyContact .linkedIn a { background: transparent url(/images/icnLinkedIn.gif) no-repeat 0 -16px; } #bodyContact #socNetworks { margin: 0; padding: 10px 0 0 0; float: left; } #bodyContact #socNetworks li { width: 218px; height: 34px; padding: 6px 0 0 0; margin: 0 10px 0 0; list-style: none; float: left; background: transparent url(/images/hrVert.gif) repeat-y top right; } #bodyContact #socNetworks .nobg { background: none; } #bodyContact #socNetworks li a { font-weight: bold; padding: 6px 0 6px 32px; } #bodyContact #socNetworks .flickr a { background: transparent url(/images/icnFlickrBig.gif) no-repeat 0 0; } #bodyContact #socNetworks .twitter a { background: transparent url(/images/icnTwitterBig.gif) no-repeat 0 0; } #bodyContact #socNetworks .linkedIn a { background: transparent url(/images/icnLinkedInBig.gif) no-repeat 0 0; } #bodyContact #socNetworks .youtube a { background: transparent url(/images/icnYoutubeBig.gif) no-repeat 0 0; } #bodyContact #socNetworks .hyves a { background: transparent url(/images/icnHyvesBig.gif) no-repeat 0 0; } /* Forms [`form] ----------------------------------------------- */ /* --- FORMS */ form div { margin: 3px 0px; } form legend { display: none; } form .radio div, form.geslacht div { margin: 0px; } form label { width: 180px; } form input { color: #000; background: #f2ecd9; border: 1px solid #231f20; } form .radio input, form .geslacht { float: left; width: 100%; clear: both; } form .checkbox input, form .radiobutton input { float: left; margin-right: 5px; } form .radiobutton label { width: auto!important; margin-right: 20px; } form .checkbox { margin-left: 90px; } form .checkbox div input { width: auto; margin-bottom: 10px; } form .checkbox div label { float: left; } form .checkbox div { clear: left; } form textarea { width: 380px; background: #f2ecd9; border: 1px solid #231f20; } form .submit { padding: 0 22px; height: 24px; border: none; color: #f2ecd9; background: transparent url(/images/btnBg.gif) repeat-x 0 0; cursor: pointer; } form .submit:hover { background: transparent url(/images/btnBg_over.gif) repeat-x 0 0; } /* Richtext [`rt] ----------------------------------------------- */ .richtext h1, .richtext h2, .richtext h3, .richtext h4, .richtext h5, .richtext h6, .richtext dl, .richtext table, .richtext pre, .richtext blockquote { margin: 1em 0; } .richtext table { border-collapse: separate; table-layout: auto; border-spacing: 0.18em; } .richtext th, .richtext td { padding: 0.5em; } .richtext blockquote { margin: 1em 0 1em 4em; } .richtext ul, .richtext ol { margin: 1em 0 1em 4em; list-style: outside; } .richtext ul { list-style-type: disc; } .richtext ol { list-style-type: decimal; } /* various FCK features/styles */ .richtext .indent1 { margin-left: 2em; } .richtext .indent2 { margin-left: 4em; } .richtext .indent3 { margin-left: 6em; } .richtext .justifyLeft { text-align: left; } .richtext .justifyRight { text-align: right; } .richtext .justifyCenter { text-align: center; } .richtext .justifyFull { text-align: justify; } .richtext img.left { float: left; margin: 1em 1em 1em 0; } .richtext img.right { float: right; margin: 1em 0 1em 1em; } /* Global classes [`glob] ----------------------------------------------- */ .notice { margin-bottom: 30px!important; display: block; } .noticeFinal { margin-bottom: 30px!important; display: block; color: #fff; background: #4f7776; font-weight: bold; padding: 3px 10px;} .error { color: #fff; background: #e21a38; font-weight: bold; padding: 3px 10px; } /*** IR (js) */ .ir { position: relative; overflow: hidden; display: block; } .ir .ir-aid, .ir .hover { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: transparent no-repeat 50%; } .ir .ir-aid span { /*+ie6c*/ display: block; width: 100%; height: 100%; } /* IR ***/