/*===================================================== // Version : 2.0 // Project : �glise Baptiste de Sept-Iles // By : mediadvanced.ca //=====================================================*/ /* ----- HTML TAG RESET & CLEARFIX ----- */ body,div,dl,dt,dd,ul,ol,li,h1, h2,h3,h4,h4,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; vertical-align: bottom; } a,h1 { overflow: hidden; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h4,h6 { font-size: 100%; font-weight: normal; overflow: hidden; } q:before,q:after { content: ''; } abbr,acronym { border: 0;} .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear { display: inline-block; } html[xmlns] .clear { display: block; } * html .clear { height: 1%; } /* ---------- GENERAL */ body { font-family: tahoma, geneva, verdana, sans-serif; font-size: 12px; background: #fff url(../images/bg.png) repeat-x; } #container { width: 980px; margin: 0 auto; position: relative; color: #5f5f5f; } #container a { color: #5f5f5f; text-decoration: none } #container a:hover { color: #548ab4 } /* ---------- HEADER */ #header { background: transparent url(../images/header.jpg) no-repeat; width: 980px; height: 165px } h1 { float: left; text-indent: -9999px; background: transparent url(../images/logo-trans.png) no-repeat; width: 197px; height: 61px; margin: 60px 0 0 20px; } #header ul { float: right; margin: 80px 0 0 0 } #header ul li { float: left; margin: 0 0 0 8px } #header ul li a { display: block; text-indent: -9999px; outline: none; cursor: pointer !important; } #l-accueil { background: transparent url(../images/l-accueil-trans.png) no-repeat; width: 47px; height: 18px; } #l-qui { background: transparent url(../images/l-qui-trans.png) no-repeat; width: 111px; height: 18px; } #l-que { background: transparent url(../images/l-que-trans.png) no-repeat; width: 115px; height: 18px; } #l-nouvelle { background: transparent url(../images/l-nouvelle-trans.png) no-repeat; width: 98px; height: 18px; } #l-messages { background: transparent url(../images/l-messages-trans.png) no-repeat; width: 126px; height: 18px;} #l-ressources { background: transparent url(../images/l-ressources-trans.png) no-repeat; width: 74px; height: 18px; } #l-joindre { background: transparent url(../images/l-joindre-trans.png) no-repeat; width: 84px; height: 18px; } /* ---------- CONTENT */ h2 { font-family: arial; color: #508bb6; font-size: 21px; font-weight: bold; margin: 0 0 15px 0; } h3 { font-family: arial; color: #508bb6; font-size: 16px; font-weight: bold; margin: 0 0 15px 0; } /* ----- home page */ #slideshow { width: 980px; height: 277px; background: #286ea1 } #slideshow-bottom { background: transparent url(../images/slideshow-bottom.png) no-repeat; width: 980px; height: 86px; position: relative; margin: 0 0 40px 0 } #slideshow-bottom h3 { float: left; text-indent: -9999px; background: transparent url(../images/h-horaire-reunions-trans.png) no-repeat; width: 139px; height: 14px; margin: 35px 40px 0 30px } #slideshow-bottom ul { float: left; font-size: 11px; margin: 20px 20px 0 0 } #slideshow-bottom ul li { color: #a2a2a2; } #slideshow-bottom ul li strong { color: #fff; } #english { display: block; text-indent: -9999px; background: transparent url(../images/btn-english.png) no-repeat; width: 92px; height: 39px; position: absolute; top: 22px; right: 30px } #english:hover { background-position: bottom left; } #french { display: block; text-indent: -9999px; background: transparent url(../images/btn-francais.png) no-repeat; width: 92px; height: 39px; position: absolute; top: 22px; right: 30px } #french:hover { background-position: bottom left; } #mission { float: left; width: 250px; height: 230px; border-right: 1px solid #cfcfd1; padding: 0 30px 0 0; line-height: 20px; margin: 0 0 30px 60px; display: inline } #mission p { text-align: justify; } #services { float: left; width: 250px; height: 230px; border-right: 1px solid #cfcfd1; padding: 0 30px 0 0; line-height: 20px; margin: 0 0 30px 30px; display: inline } #services p { text-align: justify; } #activities { float: left; width: 250px; height: 230px; padding: 0 30px 0 0; line-height: 20px; margin: 0 0 30px 30px; display: inline } #activities p { text-align: justify; } /* ----- sub pages */ #banner { width: 980px; height: 168px; } #left-column { float: left; background: transparent url(../images/left-column-bg.png) no-repeat; width: 310px; min-height: 455px; padding: 40px 0 30px 20px } #left-column h2 { margin: 0 0 15px 0 } #left-column h3 { margin: 30px 0 15px 5px } #left-column h3 a { color: #508bb6; } #left-column p { width: 270px; line-height: 18px } #left-column #widget p { font-size: 10px; color: #868686; text-align: right; width: 160px; line-height: 12px; padding: 30px 0 0 100px } #left-column #widget p span { display: block; font-weight: bold; color: #fff; font-size: 14px; margin: 0 0 5px 0 } #right-column { float: left; background: transparent url(../images/right-column-bg.png) repeat-x; width: 630px; padding: 40px 0 30px 20px } #right-column h2 { margin: 0 0 15px 0 } #right-column p { width: 600px; line-height: 20px } #no-column { padding: 30px 0 20px 20px; } #no-column p { width: 800px; line-height: 20px; } /* -- english page */ #schedule ul { float: left; font-size: 12px; margin: 0 20px 0 0 } #schedule ul li { padding: 0 0 2px 0 } /* -- ressources page */ .ressources #right-column p { clear: both; } .ressources #right-column p img { float: left; margin: 0 10px 20px 0 } .ressources #right-column p span { float: left; font-size: 11px } /* -- contact page */ .contact #right-column p { width: auto !important } .contact form { width: 250px; float: left; } .contact form #success { margin: 0 0 10px 0; color: #85c17e; font-weight: bold } .contact form #error { margin: 0 0 10px 0; color: #c04b53; font-weight: bold } .contact form div { clear: both; margin: 0 0 10px 0 } .contact form label { display: block; margin: 0 0 5px 0; font-weight: bold } #contact-email,#contact-tel, #contact-nom { width: 230px; background: #fff; padding: 2px; font-size: 12px; border: 1px solid #508bb6 } #contact-message { width: 230px; background: #fff; height: 120px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #508bb6 } #capt { width: 240px; height: 60px } #capt img { float: left; border: 1px solid #508bb6 } #capt p { float: left; width: 110px; padding: 3px 0 0 10px; } #captcha_response { width: 110px; padding: 2px; font-family: arial; font-size: 12px; border: 1px solid #508bb6 } #contact-submit { clear: both } #map { float: left; padding: 2px; border: 1px solid #508bb6; margin: 18px 0 0 30px; display: inline } #map img { border: 1px solid #508bb6 } /* -- messages page */ .messages #right-column div { margin: 0 0 20px 0 } .messages #right-column div .play { display: block; margin: 5px 0 0 0 } .messages #note { font-weight: bold; font-size: 10px; } /* -- news page */ .news #right-column div { margin: 0 0 20px 0; } .news #right-column div strong { display: block } .news #right-column div img { margin: 5px 0 0 0; display: block; border: 1px solid #508bb6; width: 500px; height: 337px; } .news #right-column div p { width: 620px; text-align: justify } /* ---------- FOOTER */ #footer { clear: both; background: transparent url(../images/footer.png) repeat-x; width: 980px; height: 103px; position: relative; font-size: 11px } #menu-footer { height: 15px; padding: 25px 0 0 20px } #menu-footer li { float: left; margin: 0 10px 0 0 } #menu-footer li a { color: #5f5f5f; text-decoration: none } #menu-footer li a:hover { color: #548ab4 } #copyright { padding: 8px 0 0 20px; line-height: 18px } #address { text-align: right; position: absolute; top: 25px; right: 20px; }