/*===================================================== // Version : 2.0 // Projet : Rene Bolduc // Le Logique : mathieuallaire.ca // Le Creatif : davidbilodeau.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; } address,caption,cite,code, dfn,em,strong,th,var { font-style:normal; font-weight:normal; } 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: Georgia,"Times New Roman",sans-serif; font-size: 11px; background: #fff; color: #000; text-align: center; } #container { width: 975px; padding: 30px 0px 0 20px; margin: 0 auto; position: relative; text-align: left; } .invisible { display: none; } .play { display: block; text-transform: uppercase; color: #000; text-decoration: none; background: #fff url(../images/play.png) no-repeat top left; width: 260px; height:37px; line-height: 34px; text-indent: 50px; font-weight: bold; margin: 20px 0 0 0; } .play:hover { background-position: bottom left; text-decoration: underline; } /* ---------- Colonne Gauche */ #columnLeft { float: left; width: 214px; } h1 { text-indent: -9999px; background: #fff url(../images/logo.png) no-repeat; width: 95px; height: 95px; display: none; } #menu { margin: 25px 0 0 5px; } .links { color: #000; text-decoration: none; font-size: 20px; font-family: "Times New Roman"; text-transform: uppercase; outline: none; } .link01:hover { color: #00a651; } .link02:hover { color: #ffc500; } .link03:hover { color: #f58724; } .link04:hover { color: #e7352b; } .link05:hover { color: #ae3091; } .link06:hover { color: #00a3e5; } .link07:hover { color: #072e6f; } .linksSub { margin: 4px 0 4px 2px; } .linksSub li { margin: 0 0 4px 0; } .linksSub a { font-size: 11px; text-transform: uppercase; text-decoration: none; color: #000; font-family: Georgia; font-style: italic; } .linksSub a:hover { color: #999999; } #informations { background: #fff url(../images/informations-top.png) no-repeat top left; padding: 22px 0 0 0; margin: 15px 0 0 5px; } #informations h2 { background: #fff url(../images/ligne-coord.png) no-repeat bottom left; padding: 0 0 15px 0; font-size: 15px; font-weight: bold; text-transform: uppercase; font-family: "Times New Roman"; } #informations h2 span { display: block; font-size: 12px; text-transform: lowercase; font-style: italic; letter-spacing: 2px; margin: 0 0 0 2px; } #contact { background: #fff url(../images/ligne-coord.png) no-repeat bottom left; padding: 12px 0 15px 0; } #contact li { margin: 0 0 2px 0; } #tel { margin: 0 0 10px 0 !important; font-size: 12px; } #mailto { color: #000; text-decoration: none; display: block; width: 128px; margin: 8px 0 0 0; font-size: 10px; font-style: italic; } #mailto:hover { color: #999999; text-decoration: underline; } /* ---------- Colonne Centre */ #columnCenter { float: left; width: 430px; height: 522px; background: #fff url(../images/centre-top.png) no-repeat top left; margin: 70px 0 0 0; padding: 50px 0 0 0; position: relative; } /* --- nouvelles */ #news { width: 445px; height: 500px; overflow: auto; } #news div { margin: 0 0 35px 0; width: 380px; } #news p { line-height: 18px; } #news p a { text-decoration: none; color: #808080 } #news p a:hover { color: #000 } h3 { font-size: 12px; display: block; margin: 0 0 8px 0; font-weight: bold; } h3 span { font-size: 11px; } #centerFooter { background: #fff url(../images/centre-bas.png) no-repeat 220px 3px; width: 430px; height: 12px; font-size: 9px; color: #808080; position: absolute; bottom: 0; left: 0; } #centerFooter span { text-transform: uppercase; } /* --- textes */ .texte { width: 445px; height: 500px; overflow: auto; } .texte p { text-align: left; line-height: 18px; width: 380px; margin: 10px 0 0 0; } .texte p a { text-decoration: none; color: #808080 } .texte p a:hover { color: #000 } .texte h3 { background: #000; color: #fff; display: inline; font-family: "Times New Roman"; font-size: 18px; font-weight: normal; font-style: italic; padding: 1px 0; text-transform: uppercase; } .photoL { float: left; } .photoR { float: right; } /* ---------- Colonne Droite */ #columnRight { float: left; width: 260px; padding: 65px 0 0 50px; } #columnRight h3 { text-indent: -9999px; background: #fff url(../images/envoyez-nouvelles.png) no-repeat; width: 254px; height: 114px; } #columnRight form { margin: 15px 0 0 0; } .error { margin: 0 0 5px 0; color: #ff0000; } .valid { margin: 0 0 5px 0; font-weight: bold; color: #0cff00; } #columnRight form div { margin: 0 0 10px 0; } #nom { margin: 5px 0 0 0; } #nom,#email { font-family: Georgia; font-size: 9px; color: #999999; padding: 2px; border: 1px solid #bfbfbf; width: 250px; height: 12px; } #message { font-family: Georgia; font-size: 9px; color: #999999; padding: 4px; border: 1px solid #bfbfbf; width: 246px; height: 200px; } #formButtons { background: #fff url(../images/facteur-bg.png) no-repeat bottom right; width: 142px; height: 97px; padding: 37px 0 0 112px; } #envoyer { background: #fff; border: 0; font-family: georgia; font-style: italic; font-size: 11px; font-weight: bold; width: 69px; cursor: pointer; margin: 0 2px 0 0; } #effacer { background: #fff; border: 0; font-family: georgia; font-style: italic; font-size: 11px; font-weight: bold; width: 68px; cursor: pointer; } #collab { background: #fff url(../images/collaboration.png) no-repeat; width: 260px; height: 30px; } #ma { display: block; width: 48px; height: 18px; background: #fff url(../images/ma.png) no-repeat; text-indent: -9999px; float: left; margin: 5px 0 0 150px; display: inline; } #db { display: block; width: 21px; height: 21px; background: #fff url(../images/db.png) no-repeat; text-indent: -9999px; float: left; margin: 3px 0 0 30px; display: inline; } #ma:hover,#db:hover { background-position: bottom left !important; }