/* ------------------------------------------------------------------- Boondoggle - Hans Dreesen Stichting Marketing 1. Structure 2. Navigation 3. Column01 4. Column02 5. Column03 6. Footer 7. Homepage 8. Miscellaneous 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: #ddd url(/img/css_backgrounds/bg-body.jpg) center top repeat-y; min-width: 960px; } #wrapper { min-width: 960px; overflow: hidden; } #container { padding: 0; position: relative; margin: 0 auto; width: 960px; } #column01 { color: #FFF; float: left; margin: 0 25px 0 0; padding: 40px 0 0; position: relative; width: 175px; } #column02 { background: #091c2d url(/img/css_backgrounds/bg-column02.gif) repeat-y 0 0; float: left; margin: 80px 0 0; padding: 0; position: relative; width: 760px; } #content { background: #d8d7dd url(/img/css_backgrounds/bg-content.gif) repeat-y 0 0; float: left; margin: 0 0 10px; min-height: 350px; padding: 0 20px 20px 30px; width: 700px; } #footer { padding: 10px 0 15px 235px; text-align: center; } /* ------------------------------------------------------------------------------------- 2. Navigation ------------------------------------------- */ .navigation { margin: 20px 0 0 0; } .navigation ul { list-style: none; margin: 0; } .navigation li { margin: 0 0 4px; } .navigation a { color: #000; display: block; font-family: "Interstate Bold", Arial, Verdana, Helvetica, Geneva, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; letter-spacing: -1px; padding-left: 8px; text-decoration: none; text-transform: uppercase; } .navigation a:hover { color: #62afc9; } /* sub navigation */ .navigation ul ul { display: none; margin: 7px 0 10px 15px; } body#practicalInformation .navigation li#navPracticalInformation ul, body#whereAndWhen .navigation li#navPracticalInformation ul, body#howToGetThere .navigation li#navPracticalInformation ul, body#fees .navigation li#navPracticalInformation ul, body#hotels .navigation li#navPracticalInformation ul, body#congressCommission .navigation li#navPracticalInformation ul, body#contact .navigation li#navPracticalInformation ul { display: block; } body#practicalInformation .navigation li#navPracticalInformation li a { background: none; color: #000; } body#practicalInformation .navigation li#navPracticalInformation li a:hover { color: #62afc9; } /* sub navigation Programme */ .navigation li#navProgramme ul { display: none; } /* all active states */ body#home .navigation li#navHome a, body#about .navigation li#navAbout a, body#highlights .navigation li#navHighlights a, body#programme .navigation li#navProgramme a, body#registration .navigation li#navRegistration a, body#practicalInformation .navigation li#navPracticalInformation a, body#sponsors .navigation li#navSponsors a, body#books .navigation li#navBooks a, body#whereAndWhen .navigation li#navWhereAndWhen a, body#howToGetThere .navigation li#navHowToGetThere a, body#fees .navigation li#navFees a, body#hotels .navigation li#navHotels a, body#congressCommission .navigation li#navCongressCommission a, body#contact .navigation li#navContact a { background: url(/img/css_backgrounds/bg-sprite-site-elements.png) no-repeat -274px -95px; color: #62afc9; } /* ------------------------------------------------------------------------------------- 3. Column01 --------------------------------------------- */ #teaserBox { background: #62afc9; color: #fff; font-family: "Interstate Bold", Arial, Verdana, Helvetica, Geneva, sans-serif; font-style: normal; font-weight: bold; letter-spacing: -1px; margin: 25px 0 0; padding: 10px; width: 155px; } #teaserBox p { font-size: 1.4em; line-height: 1em; margin: 0 0 10px; } #teaserBox a { background: url(/img/css_backgrounds/bg-sprite-site-elements.png) no-repeat 1px -125px; color: #000; font-size: 1.6em; padding-left: 15px; text-decoration: none; } #teaserBox a:hover { color: #fff; } #twitterFeed { background: #fff; height: 330px; margin-top: 20px; padding: 5px; width: 170px; } #twitterFeed ul { background: #62afc9; margin: 0; padding: 9px 7px 0; } #twitterFeed ul li { float: left; list-style: none; margin: 0 6px 0 0; } #twitterFeed ul li a { background: #407384; color: #fff; float: left; padding: 8px 6px 5px; text-decoration: none; } #twitterFeed ul li a.active { background: #d6eaf1; color: #000; } #twitterFeed .twtr-hd { display: none; } #twitterFeed .twtr-bd { padding: 0; } #twitterFeed .twtr-tweet-wrap { border-bottom: 1px solid #000; } #twitterFeed .twtr-widget .twtr-tweet { border: none; } #twitterFeed .twtr-tweet-text { padding-bottom: 5px; } #twitterFeed .twtr-ft span { float: left; } #twitterFeed .twtr-ft span a { text-decoration: underline !important; } #twitterFeed .twtr-ft span a:hover { text-decoration: none !important; } #twitterFeed .twtr-ft div { padding-bottom: 5px; } #column01 #twitterFeed .twtr-timestamp { color: #407384 !important; font-size: 11px; } #column01 #twitterFeed .twtr-timeline { background: #D6EAF1 url(/img/css_backgrounds/bg-twitterbox-shadow.png) repeat-x left bottom !important; -moz-border-radius: 0; -o-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; } /* ------------------------------------------------------------------------------------- 5. Column02 --------------------------------------------- */ #content h2, #content h3 { margin-left: -30px; } #content h4 {color:#091b2b; font-weight:bold; margin:0; padding:0; text-transform:uppercase;} .btn { background: #62AFC9 url(/img/css_backgrounds/bg-sprite-site-elements.png) no-repeat 7px -92px; color: #000; font-family: "Interstate Bold", Arial, Verdana, Helvetica, Geneva, sans-serif; font-size: 1.3em; font-style: normal; font-weight: bold; letter-spacing: -1px; padding: 5px 10px 5px 25px; text-decoration: none; text-transform: uppercase; } .btn:hover { color: #fff; } /* inner columns */ #column02 .innercolumn01 {float:left; padding:20px 10px 0 0; width:48%} #column02 .innercolumn02 {float:left; padding:20px 0 0 10px; width:48%} /* highlights page */ #column02 p.attention {border:10px solid #dadbdb; padding:11px;} #column02 div.speakersHighlights {padding: 3px 2px; height:254px; width:337px;} /* register language choice */ #regLangChoice { border: 1px solid #DDD; color: #0f1c2d; font-weight: bold; margin: 40px auto 0; padding: 20px; text-align: center; width: 300px; } #regLangChoice p { margin: 0 0 10px; } #regLangChoice a { background-image: url(/img/css_backgrounds/bg-sprite-site-elements.png); float: left; height: 51px; } #regLangChoice #regLangButtons { margin: 0 auto; padding-left: 10px; width: 210px; } #regLangChoice a#regNL { background-position: -50px -30px; margin-right: 10px; width: 92px; } #regLangChoice a#regFR { background-position: -150px -30px; width: 108px; } /* programme */ body#programme #content h2 { width: 700px; } body#programme table { line-height: 1.5; margin-bottom: 3em; } body#programme table #time { width: 100px; } body#programme th { display: none; } body#programme td { padding: 10px 0; vertical-align: middle; } body#programme td.time { color: #676767; text-transform: uppercase; width: 85px; } body#programme td img { border: 2px solid #00539f; float: left; margin: 0 15px 0 0; } body#programme td a:hover img { border-color: #62afc9; } body#programme td .special, body#programme td .speakerName, body#programme td .subject, body#programme table a { font-weight: bold; } body#programme td .speakerName { color: #00539f; font-family: "Interstate Bold", Arial, Verdana, Helvetica, Geneva, sans-serif; font-size: 1.1em; text-transform: uppercase; } body#programme td .special { background: #d1dfe4; color: #444; display: block; line-height: 1; margin-bottom: -12px; padding: 4px; text-transform: uppercase; } body#programme td .sponsoredBy { color: #676767; font-size: 0.9em; } /* speaker info pages */ .speakerInfo img.speakerPhoto { border: 2px solid #00539f; float: left; margin: 0 23px 5px 0; } .speakerInfo img.right { float: right; margin: 13px 0 5px 17px; } .speakerInfo img.top { margin-top: 25px; } /* fancy programme (JavaScript enabled) */ .progWrapper { overflow: hidden; position: relative; width: 750px; } .progWrapper #content h2 { margin-left: 0; } .progFancy { overflow: hidden; } .progFancy p { padding: 0 25px; } .progFancy #content { padding: 10px 0 0; width: 2000px; } .progFancy .progCol { float: left; min-height: 1035px; padding: 10px 30px 0; position: relative; width: 505px; } .progFancy .progCol h2, .progFancy .progCol h3 { margin-left: -30px; } .progFancy #progCol01 { z-index: 0; } .progFancy #progCol02 { background: url(/img/css_backgrounds/bg-content.gif) -205px top repeat-y; border-left: 1px solid #DDD; z-index: 1; } /* hidden column */ .progFancy #progCol02.hidden { background: none; } .progFancy .hidden h2 { background: none; border-left: 7px solid #666; color: #666; padding-left: 18px; } .progFancy .hidden table { border-bottom-color: #ccc; border-top-color: #bcbcbc; } .progFancy .hidden td { border-bottom-color: #bcbcbc; border-top-color: #ccc; } body#programme .progFancy .hidden td, body#programme .progFancy .hidden span, body#programme .progFancy .hidden .speakerName, body#programme .progFancy .hidden .subject, body#programme .progFancy .hidden .special, body#programme .progFancy .hidden table a { color: #AAA; } body#programme .progFancy .hidden .special { background: #CCC;} body#programme .progFancy .hidden td img { border-color: #999; } .progFancy .hidden span.mask { background: #000; cursor: pointer; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 99; filter: alpha(opacity=5); -moz-opacity: 0.05; -khtml-opacity: 0.05; opacity: 0.05; } /* sponsors */ .sponsorList { list-style: none; margin: 0 auto 2em; width: 100%; } .sponsorList:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } /* mimic clearfix */ .sponsorList a { background: url(/img/css_backgrounds/bg-sprite-logos2010.gif) no-repeat; display: block; float: left; height:30px; margin: 0 6px; outline: none; text-indent: -9999px; } .sponsorList .standaard { background-position: 0 0; width: 53px; } .sponsorList .jobat { background-position: -53px 0; width: 70px; } .sponsorList .living { background-position: -123px 0; width: 64px; } .sponsorList .redworks { background-position: -187px 0; width: 38px; } .sponsorList .rossel { background-position: -225px 0; width: 90px; } .sponsorList .tnsdimarso { background-position: -315px 0; width: 32px; } .sponsorList .trends { background-position: -347px 0; width: 65px; } .sponsorList .vanbavel { background-position: -412px 0; width: 66px; } .sponsorList .var { background-position: -478px 0; width: 46px; } .sponsorList .vertigo { background-position: -524px 0; width: 40px; } .sponsorList .xerox { background-position: -564px 0; width: 67px; } .sponsorList .bpost { background-position: -631px 0; width: 50px; } #sponsors #content .sponsorList { margin-top: 40px; } /* congress commission */ #ccPhotos { height: 120px; position: relative; } #ccPhotos img { position: absolute; } #ccPhotos img#caluwaertsDavy { left: 0px; top: 8px; z-index: 0; } #ccPhotos img#prietoNathalie { left: 100px; top: 25px; z-index: 1; } #ccPhotos img#berxNicole { left: 165px; top: 0px; z-index: 0; } #ccPhotos img#vanBostPhilip { left: 265px; top: 20px; z-index: 0; } #ccPhotos img#raletPierre { left: 350px; top: 10px; z-index: 0; } #ccPhotos img#vanDesselAnn { left: 460px; top: 25px; z-index: 0; } #ccPhotos img#viaenePatrick { left: 560px; top: 0px; z-index: 1; } #ccPhotos img#brionJeanPierre { left: 625px; top: 35px; z-index: 0; } /* fancy version with JavaScript */ .ccPhotosFancy img { cursor: pointer; } .ccMemberListFancy tr.hover { background: #D1DFE4; cursor: pointer; } .msgBox { background: #62AFC9; color: #fff; font-family: "Interstate Bold", Arial, Verdana, Helvetica, Geneva, sans-serif; float:right; font-size: 1.3em; font-style: normal; font-weight: bold; line-height: 1.3em; margin: 0 100px 0 0; padding: 10px; width: 375px; } /* twitter feed */ #twitterFeed #tab2 { display: none; } /* ------------------------------------------------------------------------------------- 6. Column03 --------------------------------------------- */ /* ------------------------------------------------------------------------------------- 7. Footer ----------------------------------------------- */ #footer .sponsorList { width: 830px; } /* ------------------------------------------------------------------------------------- 8. Homepage --------------------------------------------- */ /* These apply to the homepage only. They will reset some general styles. */ body#home h1 { margin-top: 40px; padding: 0; } body#home h2 { border:none; float:left; padding:8px 25px 65px 50px } body#home #column02 p {padding-right:25px} body#home #column02 p img { margin: 0 0 -1px 5px; } body#home #column02 { background: none; margin: 0; } body#home #footer { padding-left: 0px; } body#home #footer .sponsorList { margin: 0; } /* ------------------------------------------------------------------------------------- 9. Miscellaneous ---------------------------------------- */ .imgReplaced { background-repeat: no-repeat; display: block; outline: none; text-indent: -9999px; } .left { float: left; } img.left { margin-right: 10px; } .right { float: right; margin: 0 0 5px 15px; } .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; border: 4px solid #dfdfdf; clear: both; margin: 25px 0; padding: 25px; } ul#alternativeNav { border-bottom: 2px solid #333; border-top: 2px solid #333; list-style: none; padding: 10px 0 10px 5px; margin: 0 0 20px 0; } ul#alternativeNav li { float: left; margin: 0 10px 0 0; } /* clearfix */ .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }