/* Polyconseil stylesheet */ /***** Layout *****/ #header, #breadcrumbs, #content, #footer { width: 920px; margin: 0 auto; background-color: #FFF; /* This hides background */ } #header { position: relative; /* To position the logo inside */ border: 1px solid #F6F6F6; } /* #breadcrumbs { margin-top:5px; margin-bottom: 5px; border: 1px solid #F6F6F6; padding: 3px 15px; width: 890px; } */ #content { clear: both; border: 1px solid #F6F6F6; } #main-column { float: left; width: 75%; padding: 8px 0; /* Slight grey gradient on the top right corner of the main column */ background: #FFFFFF url(../img/bg_content_top.jpg) no-repeat top right; } #right-column { float: right; width: 24%; padding-left: 1%; background: transparent; } #footer { clear: both; margin-top: 8px; } /***** General styles *****/ body { margin: 0; padding: 0; /* background: #FFF url(../img/bg.gif); */ background-color: #F7F7F7; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 100%; /* 16px */ line-height: 1.25em; /* 20 px */ } img { border: 0; } a img { text-decoration: none; } .center { text-align: center; } .clear { clear: both; } ul.errorlist { margin-bottom: 0; } ul.errorlist li { list-style: none; color: red; font-size: 90%; font-style: italic; margin-bottom: 0; } /**** Specific styles *****/ /* Header */ #logo { position: absolute; z-index: 2; top: 0; left: 40px; } #logo a { outline: 0; } #banner { background: #91150B url(../img/bg-red.png) repeat-x; height: 32px; /* Same as footer for balance */ border-bottom: 1px solid #F6F6F6; } #lang, #contact, #client { float: right; margin: 6px 12px 0 12px; font-size: 75%; color: #EFEFEF; } #lang form, #contact img { display: inline; margin: 0 6px 2px 6px; } #lang form { vertical-align: middle; } #contact img { vertical-align: text-bottom; } #contact a { text-decoration: none; } #contact a span, #client a { color: #EFEFEF; font-weight: normal; text-decoration: none; } #contact a:hover span, #client a:hover { border-bottom: 1px dotted #EFEFEF; } #banner-photo { position: relative; width: 920px; height: 180px; } #banner-headline { position: absolute; z-index: 2; bottom: 0; } /* Navigation and sub-navigation */ #navigation { overflow: hidden; padding: 0; margin: 0; border-top: 1px dotted gray; border-bottom: 1px dotted gray; } #navigation li { float: left; display: inline; width: 230px; /* width: 184px; For 5 elements */ text-align: center; list-style: none; } #navigation li:last-child { width: 229px; /* width: 183px; For 5 elements */ } #navigation a { display: block; padding: 4px 0; font-size: 85%; text-decoration: none; font-weight: bold; color: #7F7F7F; background-color: #FFFFFF; } #navigation a:hover { color: #000000; background-color: #CFCFCF; } #navigation li.current a { background-color: #AA1205; color: #EFEFEF; } #sub-navigation { overflow: hidden; height: 21px; margin: 8px 0 8px 80px; padding: 0 30px; background: #AFAFAF url(../img/sub-navigation_round.gif) no-repeat left center; } #sub-navigation li { float: left; display: inline; margin-right: 40px; padding: 4px 0 3px; line-height: 12px; list-style: none; } #sub-navigation a { font-size: 12px; line-height: 12px; text-decoration: none; font-weight: bold; color: #FFFFFF; } #sub-navigation a:hover { color: #AA1205; } #sub-navigation li.current a { color: #444444; } /*** Breadcrumbs ***/ /* #breadcrumbs { font-size: 75%; } #breadcrumbs a { color:#7F7F7F; font-weight:bold; text-decoration:none; } #breadcrumbs a.current { color: #AA1205; } */ /*** Main content ***/ /* Misc stylings */ #content { overflow: visible; background-color: #FFFFFF; color: #3F3F3F; font-size: 80%; line-height: 125%; margin-top: 8px; } #main-column p, #main-column ul, #main-column ol { margin: 1em; padding: 0; text-align: justify; } #main-column ul, #main-column ol { padding-left: 1.5em; } #main-column li { margin: 0 0 0.3em 1.5em; } /* Headings */ #main-column h1, #main-column h2, #main-column h3, #main-column h4 { color: #000; margin: 0.6em 0 0.8em 0; } #main-column h1 { font-size: 1.3em; letter-spacing: 2px; font-variant: small-caps; padding: 2px 0 2px 25px; background: transparent url(../img/puce_check.jpg) no-repeat 6px center; border-bottom: 2px solid #F9F9F9; border-left: 5px solid #F0F0F0; margin-top: 2px; margin-bottom: 1.2em; } #main-column h1 b { color: #9C1000; font-weight: bold; } #main-column h2 { font-size: 1.1em; letter-spacing: 1px; margin-top: 1.5em; margin-left: 1em; padding-left: 6px; padding-bottom: 4px; border-bottom: 1px solid #CFCFCF; } #main-column h3 { margin-left: 10px; margin-right: 10px; border: 1px solid #CFCFCF; padding: 3px 10px; font-size: 1.2em; } #main-column h4 { margin-left: 20px; margin-right: 20px; border-left: 3px solid #AFAFAF; border-top: 1px solid #CFCFCF; color: #6F6F6F; padding: 5px 3px; font-size: 1.1em; } /* Links */ #main-column a { color: #A15; font-weight: normal; font-style: italic; text-decoration: none; } #main-column a:hover { text-decoration: underline; } #main-column a.button { display: block; padding: 3px 7px; margin: 0 auto; max-width: 75%; background-color: #FFF; color: #AA1205; border: 1px solid #6F0E07; text-align: center; text-decoration: none; font-weight: bold; font-variant: small-caps; font-style: normal; } #main-column a.button:hover { text-decoration: underline; } /* Special paragraphs */ #main-column p.link { text-align: right; font-size: 0.9em; font-style: italic; } #main-column p.center { text-align: center; } /* Login form */ #main-column form { margin-top: 0; margin-bottom: 0; } #main-column form label { width: 7em; font-size: 0.9em; float: left; display: inline; text-align: right; margin-right: 0.5em; } #main-column form input, #main-column form textarea { padding: 0.1em 0; } /* Home page styles */ div#missions { margin: 30px auto; position: relative; height: 320px; width: 640px; display: none; } div#missions div.mission { position: absolute; z-index: 1; top: 0; left: 320px; height: 320px; width: 320px; overflow: visible; } div#missions div.mission h3 { position: absolute; top: 0; left: 0; height: 50px; width: 240px; margin: 0; padding: 15px 20px 15px 60px; line-height: 1.25em; border: none; text-align: right; color: white; background-color: black; /* Should be overridden by an inline style */ } div#missions div.mission img { position: absolute; height: 320px; width: 320px; } div#missions div.mission div.text { position: absolute; top: 80px; left: 0; height: 240px; width: 320px; margin: 0; color: black; background-color: white; } div#mission_1 img { top: 0; left: -320px; } div#mission_2 img { top: 0; right: 320px; } div#mission_3 img { bottom: 0; left: -320px; } div#mission_4 img { bottom: 0; right: 320px; } div#missions div.text ul { text-align: left; line-height: 1.35em; } div#missions div.text p { text-transform: lowercase; font-variant: small-caps; font-size: 14px; } /* Slider */ /* Source: http://css.dzone.com/news/jquery-coda-slider-effect */ .slider { width: 640px; margin: 0 auto; /* Buttons will protrude, this is OK */ position: relative; overflow: visible; /* keep the buttons visible */ } .scroll { height: 300px; overflow: auto; position: relative; /* fix for IE to respect overflow */ clear: left; /* background: #FFF url(../img/content_pane-gradient.gif) repeat-x scroll left bottom; Commenting this out since the image does not exist */ } .scrollContainer .panel { height: 300px; width: 640px; } .scrollButtons { position: absolute; top: 134px; cursor: pointer; } .scrollButtons.left { left: -36px; } .scrollButtons.right { right: -36px; } /* Page: expertise/ and clients/ */ #main-column div.fifth, #main-column div.third { float: left; margin-right: 4px; border: 1px solid #CFCFCF; } #main-column div.fifth { width: 128px; } #main-column div.third { width: 216px; } #main-column div.fifth h2, #main-column div.third h2 { font-variant: small-caps; font-weight: bold; text-align: center; font-size: 1.1em; letter-spacing: 1px; margin: 0 auto; padding: 5px; border: none; } #main-column div.fifth img { display: block; margin: 10px auto 3px; } /* Page: expertise/case_studies/ */ #case_studies .scroll { height: 420px; border: 1px solid #CFCFCF; } #case_studies .scrollContainer div.panel { height: 400px; } /* Page: expertise/ and clients/ */ #main-column div.fifth, #main-column div.third { float: left; margin-right: 4px; border: 1px solid #CFCFCF; } #main-column div.fifth { width: 128px; } #main-column div.third { width: 216px; } #main-column div.fifth h2, #main-column div.third h2 { font-variant: small-caps; font-weight: bold; text-align: center; font-size: 1.1em; letter-spacing: 1px; margin: 0 auto; padding: 5px; border: none; } #main-column div.fifth img { display: block; margin: 10px auto 3px; } #main-column div.fifth ul, #main-column div.third ul { text-align: left; padding-left: 0; margin-left: 0; } #main-column div.fifth li, #main-column div.third li { padding-left: 0; margin-left: 30px; } /* Page: expertise/support/ */ table#technologies { width: 60%; margin: 10px auto; text-align: center; color: #3F3F3F; border: 1px dashed #AFAFAF; } table#technologies .first_col { width: 30%; font-weight: bold; font-variant: small-caps; } table#technologies .content { margin: 0 auto; text-align: center; height: 100%; } table#technologies .content td { width: 80px; height: 40px; border: 1px solid #8DA9C3; } /* Page: clients/XXX/ */ #main-column div.missions { width: 60%; margin: 5px auto 15px; background-color: #FFEFFF; border: 2px solid #EFB3B3; padding: 0 1em; } #main-column div.missions h2 { border: 0px; text-align: center; margin: 1em 0; } #main-column div.missions li { margin-left: 0; } /* Page: careers/positions */ .job_position { width: 80%; margin: 10px auto; border: 1px solid #AFAFAF; padding-top: 1em; } /*** Right column ***/ .right-block { text-align: center; padding-top: 8px; margin-bottom: 10px; background: #FFFFFF; } .right-block h1 { font-size: 112.5%; width: 100%; margin: 0 auto 10px; padding: 4px 0; } .right-block .content { font-size: 87.5%; min-height: 80px; padding-bottom: 3px; } .right-block p { margin: 0 1em; } /* Slideshow of client logos */ #references.right-block h1 { background: #FFFFFF url(../img/block_round_grey.gif) no-repeat center center; color: #3F3F3F; } #references_slideshow { height: 100px; width: 100px; margin: 0 auto; padding: 12px 0; overflow: hidden; } #references_slideshow img { width: 100px; height: 100px; top: 0; left: 0; } /* Careers */ #carrieres.right-block h1 { background: #FFFFFF url(../img/block_round_red.gif) no-repeat center center; color: #FFFFFF; } #carrieres.right-block a { /* Text integrates smoothly within the image */ background: #FFFFFF url(../img/join_us.png) no-repeat center center; /* Make the whole area a clickable link with hover effect */ display: block; padding-top: 124px; height: 20px; padding-bottom: 18px; /* Link styling */ text-decoration: none; font-size: 120%; font-weight: bold; color: #5F5F5F; } #carrieres.right-block a:hover { color: #9C1000; } /** More info (Study case) **/ #moreinfo.right-block h1 { background: #FFFFFF url(../img/block_round_red.gif) no-repeat center center; color: #FFFFFF; } /* Careers : job offers */ #offers.right-block h1 { background: #FFF url(../img/block_round_white.gif) no-repeat center center; } #offers ul { padding-left: 0; list-style: none; } #offers ul li { margin-bottom: 10px; } /* Careers : offers and questions */ #questions.right-block h1 { background: #FFF url(../img/block_round_red.gif) no-repeat center center; color: #FFF; } #questions div p { margin-bottom: 10px; } #questions div p a, #offers a { font-size: 1.1em; font-weight: bold; margin:0 4px; color: #676767; text-decoration: none; border-bottom: 1px solid #BEBEBE; } #questions div p a:hover, #offers a:hover { color: #2F2F2F; border-bottom: 1px solid #4F4F4F; } /* Page: contact */ textarea#id_body { width: 300px; height: 90px; } /***** Footer *****/ #footer { background: #91150B url(../img/bg-red.png) repeat-x; color: #EFEFEF; } #footer p { text-align: center; font-size: 75%; line-height: 16px; height: 16px; margin: 0; padding: 8px 16px; } #footer p.copyright { float: left; } #footer p.standards { float: right; } #footer p.standards img { height: 15px; width: 80px; } #footer p.links a { color: #EEE; text-decoration: none; font-style: normal; } #footer p.links a:hover { color: #FFF; border-bottom: 1px dotted #FFF; }