/* ------------------------------------------------------------------- Boondoggle - Sibran Lens Koninklijke Maatschappij voor Dierkunde vzw 1. Structure 2. Header 3. Navigation 4. Column01 5. Column02 6. Column03 7. Footer 8. Information page always include reset.css, it will reset your style for all browers, it includes the clearfix typography specs must be specified in typography.css form specs must be specified in forms.css ID en class naming => use capitals for seperation: navHome ------------------------------------------------------------------- */ /* ----- imports -------------------------------------------------- */ @import url(typography.css); @import url(forms.css); /* ------------------------------------------------------------------------------------- 1. Structure -------------------------------------------- */ body {background:#333 url(/img/css_backgrounds/bg-droedels.gif) no-repeat center top;} #container {margin:0 auto; width:980px;} #toothed {background:url(/img/css_backgrounds/bg-website-top.png) repeat-x left top; left:0; height:5px; position:absolute; top:0; width:100%; z-index:1000} #header {height:225px; width:980px; position:relative} #header h1 {display:none;} #dashboard {position: relative; width:980px;} #footer {color:#fff; font:normal 0.91em Georgia, "Times New Roman", Times, serif; clear:both; height:35px; padding:20px 0 0 30px; text-align:center; width:900px} object {outline:none;} .left {float: left;} .right {float: right;} .clear {clear: both;} .hide {display: none;} .first {margin-top: 0; padding-top: 0;} .last {margin-bottom: 0; padding-bottom: 0;} hr {display:none;} /* flash alternative styles */ .block { background: #efefef; margin: 0; padding: 25px; border:4px solid #dfdfdf; clear:both; } ul#alternativeNav {list-style:none; padding:10px 0 10px 5px; margin:0 0 20px 0; border-bottom:2px solid #333; border-top:2px solid #333} ul#alternativeNav li {float:left; margin:0 10px 0 0;} /* ------------------------------------------------------------------------------------- 2. Header ----------------------------------------------- */ /* item description */ #header #itemName { } #sharebutton { z-index:100; position: absolute; top:0px; left:689px; } /* ------------------------------------------------------------------------------------- 3. Dashboard ------------------------------------------- */ /* END OF SITE */ .endOfSite {background:url(/img/css_backgrounds/nl/endOfSite.png) no-repeat left top; cursor:pointer; height:591px; left:50%; margin-left:-379px; position:absolute; top:75px; width:758px; z-index:9999} .endOfSite p {display:none;} .endOfSiteFR {background:url(/img/css_backgrounds/fr/endOfSite.png) no-repeat left top;} .blockUI {background-color:#333!important} .dashboarditem {float:none; position: absolute; z-index:0;} .screen {float:none; height:100%; position: absolute; top:0px; width:100%; z-index:10;} .datacontainer {z-index:-10;} .dashboarditem a {color:#000;} /* MODULE BLOG */ #blog {background:url(/img/css_backgrounds/bg-module-blog.gif) no-repeat left top; overflow:hidden; padding:0 0 0 14px; width:295px;} #blog h2 {margin:0; padding:12px 0 0 15px; width:190px;} #blog h3 {color:#000; line-height: 1; margin:0 0 0 -3px;} #blog h3 span {background:#fff0a1; line-height:1.4em; padding:0 4px 0 0} #blog h3 span a {color:#000; font-weight:bold; text-decoration:none;} #blog p {padding:4px 0 0 0} #blog a#rss {display:block; height:86px; float:right; text-indent:-9999px; width:80px;} #blog .post {background:url(/img/css_backgrounds/bg-module-blog-postitem.gif) no-repeat left bottom; height:200px; padding:16px 20px 0 15px; } #blog .post img {height:71px; float:left; padding:3px 7px 0 0; width:95px;} #blog .postDate {background:url(/img/icons/ico-clock.gif) no-repeat left top; color:#787677; height:15px; padding:0 0 5px 20px;} #blog .postFooter {bottom:0; clear:both; font-weight:bold; padding:6px 0 16px 0;} #blog .last {background:none;} #blog #blogPrevNext { text-align: center; } #blog #blogPrevNext a { outline: none; } /* MODULE YOUTUBE */ #youtube {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:0 0 8px 12px; position:relative; width:297px;} #youtube p {padding:0 0 4px 0} #youtube h2 {margin:0; padding:12px 0 8px 0; width:205px;} #youtube a#youtubeChannel {background:url(/img/css_backgrounds/bg-module-youtube-logo.gif) no-repeat left top; display:block; height:84px; margin:-20px 10px 0 0; position:absolute; right:0; text-indent:-9999px; width:71px;} #youtube ul#videoLinks { background: #ececec; list-style: none; margin: 10px 13px 0 0; padding: 5px 0 5px 10px; } #youtube ul#videoLinks a { background: url(/img/general/video-thumb-general.gif) no-repeat; color: #676767; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; height: 28px; margin: 0 9px 0 0; padding: 18px 0 0 25px; text-decoration: none; width: 34px; } #youtube ul#videoLinks a:hover { color: #B63632; } #youtube ul#videoLinks .videoDescripion { display: none; } /* MODULE ABOUT */ #about {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:16px 15px 14px 12px; overflow:hidden; width:281px;} #about p {padding:0 0 6px 0} #about h2 {font-size:1.45em; margin:0; padding:0 0 7px 0} /* MODULE FLICKR */ #flickr {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:0 0 7px 12px; width:297px;} #flickr a#flickrLogo {background:url(/img/css_backgrounds/bg-module-flickr-logo.gif) no-repeat left top; display:block; float:right; height:27px; margin:8px 8px 0 0; text-indent:-9999px; width:81px;} #flickr a#flickrCamera {background:url(/img/css_backgrounds/bg-module-flickr-camera.gif) no-repeat left top; display:block; height:41px; margin:-8px 0 0 0; position:absolute; text-indent:-9999px; width:58px;} #flickr p {clear:both; padding:3px 0 3px 5px} #flickr ul {list-style:none; margin:0; padding:0;} #flickr li {background:url(/img/css_backgrounds/bg-module-flickr-imgs.gif) no-repeat left top; float:left; height:83px; margin:0 4px 0 0; padding:8px 0 0 8px; width:84px;} /* MODULE NAMING GAME */ #naminggame {background:url(/img/css_backgrounds/bg-module-naminggame.gif) no-repeat left top; padding:20px 0 15px 12px; width:297px;} #naminggame h2 {color:#fff; margin:0; padding:0 0 50px 0; width:210px;} #naminggame p {float:left; padding:0 0 0 2px; width:160px} #naminggame img {padding:13px 14px 0 0} /* MODULE NAMING GAME ENDED */ #naminggameEnd {background:url(/img/css_backgrounds/bg-module-naminggame.gif) no-repeat left top; padding:20px 0 15px 12px; width:297px;} #naminggameEnd h2 {color:#fff; margin:0; padding:0 0 40px 0; width:210px;} #naminggameEnd p {float:left; margin:0; padding:0 0 0 2px; width:200px} #naminggameEnd img {float:right; padding:13px 14px 0 0} /* MODULE NAMING GAME ENDED */ #naminggameWinner {background:url(/img/css_backgrounds/bg-module-naminggame.gif) no-repeat left top; padding:20px 0 15px 12px; width:297px;} #naminggameWinner h2 {color:#fff; margin:0; padding:0 0 37px 0; width:210px;} #naminggameWinner p {margin:0; padding:0 0 8px 2px; width:220px;} #naminggameWinner ul {list-style:none; margin:0; padding:0;} #naminggameWinner ul li {float:left; font-weight:bold; height:23px; list-style:none; margin:0; padding:11px 0 0 0; width:100px;} #naminggameWinner ul li.gender {background:url(/img/icons/ico-gender.gif) no-repeat left top; padding-left:38px;} #naminggameWinner ul li.weight {background:url(/img/icons/ico-weight.gif) no-repeat left top; padding-left:29px;} /* MODULE KEEP ME POSTED */ #keepmeposted {padding:0 0 0 1px;} #keepmepostedTop {background:url(/img/css_backgrounds/bg-keepmepostedTop.png) no-repeat left top; height:44px; margin:0 0 0 -1px; overflow:hidden; width:307px;} #keepmepostedCenter {background:url(/img/css_backgrounds/bg-keepmepostedCenter.jpg) no-repeat left top; height:205px; position:relative; width:306px;} #keepmepostedForm {background:url(/img/css_backgrounds/nl/bg-keepmepostedForm.gif) no-repeat left top; height:205px; width:306px;} #keepmepostedFormThx {background:url(/img/css_backgrounds/nl/bg-keepmepostedFormThx.gif) no-repeat left top; height:205px; width:306px;} #keepmepostedBottom {background:url(/img/css_backgrounds/bg-keepmepostedBottom.png) no-repeat left top; height:13px; margin:0 0 0 -1px; overflow:hidden; width:307px;} #inputPostedMail {border:1px solid #c5c5c5; font-size:1em; left:62px; padding:2px; position:absolute; text-align:center; top:92px; width:178px;} #inputPostedGSM {border:1px solid #c5c5c5; font-size:1em; left:62px; padding:2px; position:absolute; text-align:center; top:118px; width:178px;} #inputPostedSubmit {display:block; height:28px; left:107px; outline:none; position:absolute; text-indent:-9999px; top:177px; width:93px;} #vallSummary {background:#b63632; color:#fff; font-weight:bold; left:36px; padding:2px 0; position:absolute; text-align:center; top:50px; width:230px;} /* MODULE KEEP ME POSTED EXTENDED*/ #keepmeposted {padding:0 0 0 1px;} #keepmepostedExtendedTop {background:url(/img/css_backgrounds/bg-keepmepostedExtendedTop.png) no-repeat left top; height:44px; margin:0 0 0 0; overflow:hidden; width:307px;} #keepmepostedExtendedCenter {background:url(/img/css_backgrounds/bg-keepmepostedExtendedCenter.jpg) no-repeat left top; height:252px; position:relative; width:307px;} #keepmepostedExtendedForm {background:url(/img/css_backgrounds/nl/bg-keepmepostedExtendedForm.gif) no-repeat left top; height:252px; width:307px;} #keepmepostedExtendedFormThx {background:url(/img/css_backgrounds/nl/bg-keepmepostedExtendedFormThx.gif) no-repeat left top; height:205px; width:306px;} #keepmepostedExtendedBottom {background:url(/img/css_backgrounds/bg-keepmepostedExtendedBottom.png) no-repeat left top; height:9px; margin:0 0 0 0; overflow:hidden; width:307px;} #txtFirstName {border:1px solid #5f8126; background-color:#e3eacd; position:absolute; left:113px; top:71px; width:180px; padding:2px; font-size:1em;} #txtLastName {border:1px solid #5f8126; background-color:#e3eacd; position:absolute; left:113px; top:97px; width:180px; padding:2px; font-size:1em;} #txtEmail {border:1px solid #5f8126; background-color:#e3eacd; position:absolute; left:113px; top:123px; width:180px; padding:2px; font-size:1em;} #chkKaiOptin {position:absolute; left:23px; top:156px;} #chkGeneralOptin {position:absolute; left:23px; top:178px;} #lnkSubmit {display: block; height:24px; width:112px; position:absolute; text-indent:-9999px; outline:none; left:92px; top:228px;} .fr #keepmepostedExtendedForm {background:url(/img/css_backgrounds/fr/bg-keepmepostedExtendedForm.gif) no-repeat left top; height:252px; width:307px;} .fr #keepmepostedExtendedFormThx {background:url(/img/css_backgrounds/fr/bg-keepmepostedExtendedFormThx.gif) no-repeat left top; height:205px; width:306px;} .fr #chkKaiOptin {position:absolute; left:23px; top:153px;} .fr #chkGeneralOptin {position:absolute; left:23px; top:188px;} #vallSummary {background:#b63632; color:#fff; font-weight:bold; left:36px; padding:2px 0; position:absolute; text-align:center; top:50px; width:230px;} #valCheckSummary {background:#b63632; color:#fff; font-weight:bold; left:36px; padding:2px 0; position:absolute; text-align:center; top:220px; width:230px;} /* MODULE KEEP ME POSTED PROG*/ #keepmepostedProg {padding:10 0 0 1px;background:#FFFFFF;} #keepmepostedFormProg {background:url(/img/css_backgrounds/nl/bg-keepmepostedFormProg.jpg) no-repeat left top; height:149px; position:relative; width:308px;} #keepmepostedFormThxProg {background:url(/img/css_backgrounds/nl/bg-keepmepostedFormThxProg.jpg) no-repeat left top; height:149px; width:308px;} #inputPostedMailProg {border:1px solid #c5c5c5; font-size:1em; left:14px; padding:2px; position:absolute; text-align:center; top:20px; width:178px;} #inputPostedGSMProg {border:1px solid #c5c5c5; font-size:1em; left:14px; padding:2px; position:absolute; text-align:center; top:46px; width:178px;} #inputPostedSubmitProg {display:block; height:28px; left:14px; outline:none; position:absolute; text-indent:-9999px; top:109px; width:93px;} .fr #keepmepostedFormProg {background:url(/img/css_backgrounds/fr/bg-keepmepostedFormProg.jpg) no-repeat left top; height:149px; position:relative; width:308px;} .fr #keepmepostedFormThxProg {background:url(/img/css_backgrounds/fr/bg-keepmepostedFormThxProg.jpg) no-repeat left top; height:149px; width:308px;} .fr #keepmepostedForm {background:url(/img/css_backgrounds/fr/bg-keepmepostedForm-orange.gif) no-repeat left top; height:205px; width:306px;} .fr #keepmepostedFormThx {background:url(/img/css_backgrounds/fr/bg-keepmepostedFormThx-orange.gif) no-repeat left top; height:205px; width:306px;} .fr #vallSummary {top:40px} /* MODULE MAP */ #map {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:0 0 8px 0; position:relative; width:309px;} #map p {padding:0 0 4px 12px;} #map h2 {margin:0; padding:12px 0 8px 12px;} #map #flashWrap {bottom:-1px; overflow:hidden; position:absolute; width:309px; } /* MODULE GAME */ #lnkgame {visibility:hidden;} /* MODULE NAMING GAME */ #slurfometer {background:url(/img/css_backgrounds/bg-module-slurfometer.gif) no-repeat left top; padding:20px 0 0 0; width:309px;} #slurfometer h2 {font-size:1.64em; margin:0; padding:0 0 8px 105px;} #slurfometer p {padding:0 10px 8px 105px;} #slurfometer img {margin:13px 14px 0 105px;} /* MODULE ABOUT POST POSITIVE */ #aboutPostPositive {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:16px 15px 14px 12px; overflow:hidden; width:281px;} #aboutPostPositive p {padding:0 0 6px 0} #aboutPostPositive h2 {font-size:1.45em; margin:0; padding:0 0 7px 0} /* MODULE ABOUT POST NEGATIVE */ #aboutPostNegative {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:16px 15px 14px 12px; overflow:hidden; width:281px;} #aboutPostNegative p {padding:0 0 6px 0} #aboutPostNegative h2 {font-size:1.45em; margin:0; padding:0 0 7px 0} /* MODULE waarblijftbruno */ #waarblijftbruno {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:0 0 8px 0; /*position:relative;*/ width:309px;} #waarblijftbruno p {padding:0 0 4px 12px;} #waarblijftbruno h2 {margin:0; padding:12px 0 8px 12px;} #waarblijftbruno #flashWrap {bottom:-1px; overflow:hidden; position:absolute; width:309px; } /* MODULE AVATAR */ #avatar {background:url(/img/css_backgrounds/bg-module-white.gif) no-repeat left top; padding:0 0 8px 0; width:309px;} #avatar p {padding:0 0 4px 12px;} #avatar h2 {margin:0; padding:12px 0 8px 12px;} #avatar #flashWrap {bottom:-1px; overflow:hidden; position:absolute; width:309px; } /* MODULE GROWPLAN */ #growplan {padding:10px 0 0 0px;} #growplanTop {background:url(/img/css_backgrounds/bg-growplanTop.png) no-repeat left top; height:10px; margin:0; overflow:hidden; width:308px;} #growplanCenter {background:url(/img/css_backgrounds/bg-growplan.jpg) no-repeat left top; height:330px; position:relative; width:308px;} #growplanCenterText {background:url(/img/css_backgrounds/nl/bg-growplanTxt.gif) no-repeat left top; height:330px; position:relative; width:308px;} #growplanBtn {display:block; height:56px; left:95px; outline:none; position:absolute; text-indent:-9999px; top:233px; width:196px;} .fr #growplanCenterText {background:url(/img/css_backgrounds/fr/bg-growplanTxt.gif) no-repeat left top; height:330px; position:relative; width:308px;} .fr #growplanBtn {display:block; height:56px; left:95px; outline:none; position:absolute; text-indent:-9999px; top:215px; width:196px;} /* MODULE fotowidget */ #fotowidgetdiv {width:309px;} .frFotowidgetdiv {display:none;} /* MODULE signeer */ #signdiv {height:120px; width:309px;} .frSigndiv {display:none;} /* ------------------------------------------------------------------------------------- 7. Footer ----------------------------------------------- */ #footer a {color:#fff;} #footer span.copyright {float:right;} #footerLogo {background:url(/img/css_backgrounds/bg-logo-zoo.gif) no-repeat left top; display:block; float:right; height:59px; margin:-20px 0 0 0; text-indent:-9999px; width:59px;} /* ------------------------------------------------------------------------------------- 8. Information page --------------------------------------- */ #informationPage #header {background:none; opacity:1; height:70px; padding:11px 0 0 0} #informationPage #header #logo {background:url(/img/css_backgrounds/nl/bg-logo-informationpage.png) no-repeat left top; height:55px; text-indent:-9999px; width:376px;} #informationPage .fr #header #logo {background:url(/img/css_backgrounds/fr/bg-logo-informationpage.png) no-repeat left top;} #informationPage #dashboard {width:878px; padding:0 0 0 30px;} #informationPage #dashboardTop {background:url(/img/css_backgrounds/bg-pageInformation-contentTop.png) no-repeat left top; height:14px; width:879px;} #informationPage #dashboardCnt {background:#fff; padding:20px 128px 0 120px; width:630px;} #informationPage #footer {height:35px; padding:25px 50px 25px 0;margin:10px 0; text-align:center; width:830px;} #informationPage #footer a {color:#fff;} #informationPage h3 {color:#000; font-size:1.17em; font-weight:bold; padding:16px 0 8px 0;} #informationPage a {color:#666666} #informationPage p {padding:0 0 8px 0}