html, body{ height:100%; width:100%; background:#fff url(../images/Bg.png) repeat-x; } body, p, div, ul, ol, h1, h2, h3, h4, form, fieldset, legend, label, input, select, textarea, button, a{ font-family:Arial,Verdana,Tahoma,Helvetica,sans-serif; font-size:13px; color:#888; line-height:18px; margin:0; padding:0; } img{ border:0; line-height:0; font-size:0; display:block; } ul, ol{ list-style:none; } fieldset{ border:0; } legend{ display:none; } label, input, textarea, select, button{ float:left; } a{ text-decoration:underline; } a:hover{ text-decoration:none; } .clearBoth, form br{ clear:both; } /* Layout instellingen */ div#main{ margin:0 auto; width:919px; padding-top:20px; } /* Header */ div#header{ width:100%; height:100px; background:url(../images/headerBg.png) no-repeat; position:relative; } div#logo a{ position:absolute; float:left; height:90px; width:214px; overflow:hidden; margin-left:55px; } /* Menu */ ol#menu{ float:right; margin:40px 80px 0 0; } ol#menu li{ height:30px; float:left; margin-left:5px; } ol#menu li a { color:#fff; font-size:18px; font-weight:bold; text-decoration:none; } ol#menu li a img, ol#menu li a img.hover { height: 30px; position: relative; display: block; } ol#menu li a img.hover, ol#menu li.active a img.hover { position:absolute; margin-top:-30px; } ol#menu li a img { visibility:hidden; display:none; } ol#menu li a span { padding: 0 20px; } /* Home - Carousel */ div.carousel{ clear:both; position:relative; height:296px; } div.carousel ul{ position:absolute; left:0; } div.carousel ul li{ float:left; position:relative; height:296px; width:919px; background:#fff url(../images/carouselBg.png) no-repeat top; display:none; } div.carousel ul li h1{ padding:35px 0 0 52px; } div.carousel ul li.first{ display:block; } div.carousel ul li img{ position:absolute; z-index:1; left:0; top:0; } div.carousel ul li span.title{ position:relative; z-index:2; font-size:41px; line-height:46px; color:#fff; display:block; } div.carousel ul li span.short{ position:relative; z-index:2; color:#fff; font-size:20px; line-height:28px; } div.carousel ul li span.shadow{ position:absolute; left:0; bottom:5px; background:#fff url(../images/shadowBg.png) no-repeat; height:12px; width:919px; z-index:1; } div.carousel ul li a.link{ position:absolute; z-index:2; left:55px; bottom:0; color:#fff; font-weight:bold; line-height:28px; text-decoration:none; cursor:pointer; display:block; } div.carousel ul li a.link span, div#content a.link span, div#portfolio a.link span{ height:35px; float:left; } div.carousel ul li a.link span.left, div#content a.link span.left, div#portfolio a.link span.left, div#content button span.left{ background:url(../images/btnCarouselLeft.png) no-repeat; width:19px; text-align:right; } div.carousel ul li a:hover span.left, div#content a:hover span.left, div#portfolio a:hover span.left, div#content button:hover span.left{ background:url(../images/btnCarouselLeftHover.png) no-repeat; } div.carousel ul li a.link span.center, div#content a.link span.center, div#portfolio a.link span.center, div#content button span.center{ background:url(../images/btnCarouselCenter.png) repeat-x; } div.carousel ul li a:hover span.center, div#content a:hover span.center, div#portfolio a:hover span.center, div#content button:hover span.center{ background:url(../images/btnCarouselCenterHover.png) repeat-x; } div.carousel ul li a.link span.right, div#content a.link span.right, div#portfolio a.link span.right, div#content button span.right{ background:url(../images/btnCarouselRight.png) no-repeat; width:18px; } div.carousel ul li a:hover span.right, div#content a:hover span.right, div#portfolio a:hover span.right, div#content button:hover span.right{ background:url(../images/btnCarouselRightHover.png) no-repeat; } /* Home - Jquery Carousel */ div.carousel div.carousel-pagination{ position:absolute; bottom:-10px; right:60px; } /* Home - Content */ div#home{ float:left; background-color:#fff; padding:40px 24px 12px 24px; width:871px; } div#homeBg{ float:left; background:#fff url(../images/bottomBg.png) bottom repeat-x; margin-top:-20px; } /* Portfolio */ div#portfolioBg{ float:left; background:#fff url(../images/bottomBg.png) bottom repeat-x; } div#portfolioBg div#content{ padding:0 35px; margin:0 0 -20px 0; } div#portfolioBg form { padding:35px 0 0 34px; } ul#portfolio{ padding:25px 35px 35px 35px; margin-bottom:35px; } ul#portfolio li{ width:155px; float:left; margin:0 60px 35px 0; } ul#portfolio li.last{ margin-right:0; } ul#portfolio li div{ margin-top:9px; padding-top:10px; background:url(../images/portfolioImgBottom.png) top left no-repeat; } ul#portfolio li div h2, ul#portfolio li div p{ padding-left:2px; } ul#portfolio li div h2 a{ font-size:15px; line-height:22px; color:#0099ff; margin-top:5px; text-decoration:none; } /* Portfolio - detail */ div#nav a{ position:absolute; padding:250px 20px; width:17px; height:33px; } div#nav a.left{ left:-23px; background:url(../images/arrowLeft.png) center center no-repeat; } div#nav a.right{ right:-23px; background:url(../images/arrowRight.png) center center no-repeat; } div#nav a.left:hover{ background:url(../images/arrowLeftHover.png) center center no-repeat; } div#nav a.right:hover{ background:url(../images/arrowRightHover.png) center center no-repeat; } h1.portHeader, h2.portHeader{ margin-bottom:8px; } div.portCarousel{ position:relative; float:left; width:546px; padding-bottom:50px; } div.portCarousel ul li{ float:left; height:460px; width:546px; } div#portfolio{ float:left; width:235px; padding-left:30px; } div#portfolio h2{ font-size:18px; line-height:22px; color:#0099ff; margin:5px 0; } div#portfolio strong{ display:block; margin-top:15px; } div#portfolio a.website{ font-weight:bold; margin:25px 0; display:block; } /* Portfolio - detail - Jquery Carousel */ div.portCarousel div.carousel-pagination{ position:absolute; right:0; margin-top:10px; } /* Pagina */ div#page{ float:left; background:#fff url(../images/shadowBg.png) no-repeat; padding:50px 24px 12px 24px; } div#pageBg{ position:relative; float:left; background:#fff url(../images/bottomBg.png) bottom repeat-x; padding:0 30px; width:811px; } div#page div#pageBg{ min-height:500px; } div#pageBg ol{ width:215px; float:left; } div#pageBg ol li{ text-align:right; height:36px; border-bottom:1px solid #0099ff; } div#pageBg ol li a{ font-size:17px; font-weight:bold; line-height:36px; color:#0099ff; text-decoration:none; padding-right:2px; font-variant:small-caps; } div#pageBg ol li a:hover, div#pageBg ol li a.active{ color:#0053a0; } div#pageBg div#content{ float:right; width:536px; margin-bottom:50px; } div#pageBg div#content h1, div#portfolioBg div#content h1, h1.portHeader, div#contactData h1{ font-size:41px; line-height:46px; color:#0099ff; } div#pageBg div#content p#short, div#portfolioBg div#content p#short{ font-size:20px; line-height:28px; color:#0099ff; margin-bottom:10px; } div#pageBg div#content strong, div#pageBg div#content a{ color:#0099ff; } div#pageBg div#content a{ font-weight:bold; } div#pageBg div#content a.link, div#pageBg div#portfolio a.link{ margin:25px 0 0 -2px; color:#fff; font-weight:bold; line-height:28px; text-decoration:none; cursor:pointer; display:block; } /* Contact */ div#contactData{ width:215px; float:left; padding-top:5px; } div#contactData a img{ border:1px solid #ccc; margin-bottom:10px; } div#contactData h1{ margin-bottom:10px; } div#contactData strong{ color:#0099ff; } div#content form label, div#content form input{ margin-bottom:5px; } div#content form label{ width:125px; } div#content form input{ width:250px; } div#content form textarea{ width:450px; height:100px; margin-bottom:10px; } div#content form button{ border:0; cursor:pointer; background:none; } div#content form button.btnSignoff{ margin-top:5px; } div#content form button span{ color:#fff; font-weight:bold; height:35px; display:block; float:left; line-height:28px; } /* Tags */ ul#tags{ display:block; padding:0 62px; } ul#tags li{ display:block; float:left; padding:10px 5px 20px 0; } ul#tags li a, ul#tags li strong{ font-size:11px; color:#bbb; } /* Footer */ div#footer{ background:#fff url(../images/shadowBg.png) no-repeat; padding:8px 60px 0 62px; height:45px; clear:both; } div#footer ul li{ float:left; margin:8px 5px 0 0; } div#footer ul li.copy{ font-size:11px; color:#bbb; margin-left:10px; } div#footer form{ float:right; margin-top:6px; } div#footer form label{ font-size:16px; line-height:22px; color:#0099ff; font-weight:bold; margin:0 10px 0 0; } div#footer form input.btnNewsletter{ cursor:pointer; height:16px; width:15px; background:#fff url(../images/btnNewsletter.png) top right no-repeat; border:0; margin:4px 0 0 3px; } div#footer form input.btnNewsletter:hover{ background:#fff url(../images/btnNewsletterHover.png) top right no-repeat; } /* Jquery Carousel */ div.carousel-pagination a{ background:url(../images/itemCarouselBg.png) no-repeat; width:14px; height:16px; display:block; float:left; text-align:center; color:#fff; font-weight:bold; text-decoration:none; line-height:16px; margin-left:2px; cursor:pointer; font-size:11px; } div.carousel-pagination a:hover, div.carousel-pagination a.active{ background:url(../images/itemCarouselHoverBg.png) no-repeat; }