/* ------------------------------------------------------------------- Boondoggle - 1. Structure 2. Header 3. Navigation 4. Content 5. Footer 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:#f2f2f2 url(/img/css_backgrounds/bg-website.gif) repeat-x left top;} #container {width:780px; margin:0 auto;} #wrapper { } #header {width:780px; height:81px;} #homepage #navigation {display:none;} #subpages #navigation {width:480px; height:72px; overflow:hidden; margin:0 0 0 30px; float:left; position:relative;} #content {width:780px; margin:17px 0 0 0; min-height:400px; height:auto !important; height:400px; padding:0 0 10px 0} #footer {width:780px; clear:both; background:url(/img/css_backgrounds/bg-line-footer.gif) repeat-x left 6px; margin:10px 0 0 0; padding:0 0 25px 0; float:left;} .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;} /* ------------------------------------------------------------------------------------- 2. Header ----------------------------------------------- */ /* s-p-a timeline logo and title */ #header h1 {margin:0; padding:0} #header a#spaTimeline {display:block; width:255px; height:55px; background:url(/img/css_backgrounds/bg-header.gif) no-repeat left top; text-indent:-9999px; margin:27px 0 0 0; float:left;} /* ------------------------------------------------------------------------------------- 3. Navigation ------------------------------------------- */ /* navigation list */ #navigation ul {list-style:none; padding:0; margin:0;} #navigation ul li a {position:relative; text-indent:-9999px;} /* navigation level 01 */ #navigation ul#navLevel01 {position: absolute; margin:11px 0 0 70px} #navigation ul#navLevel01 li {float:left; width:64px; height:61px; background:url(/img/css_backgrounds/bg-nav-level01.png) no-repeat left top; margin:0 4px 0 0;} #navigation ul#navLevel01 li a {display:block; width:64px; height:30px; background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat 0px 0px} #navigation ul#navLevel01 li a#navLevel01Item01 {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat 13px 8px} #navigation ul#navLevel01 li a#navLevel01Item01:hover {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat 13px -48px} #navigation ul#navLevel01 li a#navLevel01Item02 {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat -55px 8px} #navigation ul#navLevel01 li a#navLevel01Item02:hover {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat -55px -48px} #navigation ul#navLevel01 li a#navLevel01Item03 {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat -123px 8px} #navigation ul#navLevel01 li a#navLevel01Item03:hover {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat -123px -48px} .navAffiches #navigation ul#navLevel01 li a#navLevel01Item01 {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat 13px -48px} .navParty #navigation ul#navLevel01 li a#navLevel01Item02 {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat -55px -48px} .navDemocracy #navigation ul#navLevel01 li a#navLevel01Item03 {background:url(/img/css_backgrounds/bg-links-navLevel01.gif) no-repeat -123px -48px} /* navigation level 02 */ #navigation ul#navLevel02 {position: absolute; z-index:10; margin:46px 0 0 40px;} #navigation ul#navLevel02 li {float:left; width:64px; height:26px; background:url(/img/css_backgrounds/bg-nav-level02.png) no-repeat left top; margin:0 4px 0 0} #navigation ul#navLevel02 li a {display:block; width:64px; height:26px; background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat 0px 0px} #navigation ul#navLevel02 li a#navLevel02Item01 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat 13px 8px} #navigation ul#navLevel02 li a#navLevel02Item01:hover {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat 13px -48px} #navigation ul#navLevel02 li a#navLevel02Item02 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -55px 8px} #navigation ul#navLevel02 li a#navLevel02Item02:hover {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -55px -48px} #navigation ul#navLevel02 li a#navLevel02Item03 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -123px 8px} #navigation ul#navLevel02 li a#navLevel02Item03:hover {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -123px -48px} #navigation ul#navLevel02 li a#navLevel02Item04 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -187px 8px} #navigation ul#navLevel02 li a#navLevel02Item04:hover {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -187px -48px} .navTimeLine01 #navigation ul#navLevel02 li a#navLevel02Item01 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat 13px -48px} .navTimeLine02 #navigation ul#navLevel02 li a#navLevel02Item02 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -55px -48px} .navTimeLine03 #navigation ul#navLevel02 li a#navLevel02Item03 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -123px -48px} .navTimeLine04 #navigation ul#navLevel02 li a#navLevel02Item04 {background:url(/img/css_backgrounds/bg-links-navLevel02.gif) no-repeat -187px -48px} /* ------------------------------------------------------------------------------------- 4. Content ---------------------------------------------- */ /* pdf */ #content .pdf {background:url(/img/icons/ico-pdf.gif) no-repeat left top; padding:0 0 0 15px} /* lists */ #content ul {margin:0 0 30px 15px; padding:0 0 0 0; list-style-type:disc;} #content ul li {padding:0 0 4px 0} #content ul li span.level3 {padding:0 0 0 15px} #content ul.HorizStripe {margin:0 0 15px 20px; padding:0; list-style:none;} #content ul.HorizStripe li {background:url(/img/css_backgrounds/bg-li-stripe.gif) no-repeat left 6px; padding:0 0 4px 10px;} #content ol {margin:0 0 15px 25px; padding:0 0 0 10px;} #content ol li {padding:0 0 4px 0} /* img border */ #content .imgBorder {border:2px solid #ccc;} /* button sp-a in Belgie */ #content h2#spaInBelgium {float:right; width:115px; height:52px; background:url(/img/css_backgrounds/bg-home-spaInBelgium.gif) no-repeat left top; margin:0 0 -12px 0; padding:0; text-indent:-9999px;} /* homepage blocks timeline */ #content #timeLineBlocks {width:780px; clear:both;} #content #timeLineBlocks h3 {margin:0; padding:0; clear:none;} #content #timeLineBlocks a {float:left; display:block; width:138px; height:223px; margin:0 63px 0 0; text-indent:-9999px} #content #timeLineBlocks a#block01 {background:url(/img/css_backgrounds/bg-home-block-01.gif) no-repeat left top;} #content #timeLineBlocks a#block02 {background:url(/img/css_backgrounds/bg-home-block-02.gif) no-repeat left top;} #content #timeLineBlocks a#block03 {background:url(/img/css_backgrounds/bg-home-block-03.gif) no-repeat left top;} #content #timeLineBlocks a#block04 {background:url(/img/css_backgrounds/bg-home-block-04.gif) no-repeat left top; margin:0} /* homepage general elements blocks */ #content #generalBlocks {width:780px; clear:both; padding:15px 0 0 0} #content #generalBlocks a {float:left; display:block; width:224px; height:206px; margin:0 53px 0 0; text-indent:-9999px} #content #generalBlocks a#block-posters {background:url(/img/css_backgrounds/bg-home-posters.jpg)} #content #generalBlocks a#block-president {background:url(/img/css_backgrounds/bg-home-president.jpg)} #content #generalBlocks a#block-socialDemocracy {background:url(/img/css_backgrounds/bg-home-socialDemocracy.jpg); margin:0} /* button back */ .btnBack {display:block; width:37px; height:10px; background:url(/img/buttons/bg-btn-back.gif) no-repeat left top; margin:25px 0 10px 0; text-indent:-9999px} /* back to top of page */ p.top {text-align:right; padding:0 0 10px 0; margin:0} /* image alignments */ img.imgLeft {float:left; margin:0 10px 10px 0} img.imgRight {float:right; margin:0 0 10px 10px} /* affiches */ ul#affiches {list-style-type:none; margin:0} ul#affiches li {width:200px; height:240px; margin:0 30px 30px 0; float:left} ul#affiches li h4 {background:#d2cbcb } /* ------------------------------------------------------------------------------------- 5. Footer ----------------------------------------------- */ #footer span {background:#f2f2f2; padding:0 4px} #footer a.pdf {background:url(/img/icons/ico-pdf.gif) no-repeat left top; padding:0 0 0 15px}