/*-------------------------------------------------- DEFINITION Feuille de style par défaut PROJET Magev CONTENU 1. Reset 2. Styles prédéfinis 3. Typographie --------------------------------------------------*/ /*----- 1. RESET -----*/ /* Remise à zéro des styles (cf. http://developer.yahoo.com/yui/reset/ et http://covertprestige.info/css/base-stylesheet/) */ html { font-size:100%;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,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;} address,caption,cite,code,dfn,th,var { font-style:normal; font-weight:normal;} ol,ul { list-style:none;} caption,th { text-align:left;} h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;} q:before,q:after { content:'';} abbr,acronym { border:0;} em { font-style:italic;} strong { font-weight: bold;} /*----- 2. STYLES PREDEFINIS -----*/ /* Clear Fix (cf. http://nclud.com/sketchbook/clearfix-is-out-were-moving-on/) */ .clear { display:inline-block;} .clear:after { display:block; visibility:hidden; clear:both; height:0; content: ".";} /* Styles utiles (cf. http://csswizardry.com/web-design+/) */ .left { float:left;} .right { float:right;} img.justifyleft { float:left; margin-right:1em; margin-bottom:1em;} img.justifyright { float:right; margin-left:1em; margin-bottom:1em;} .hide { visibility:hidden; width:0!important; height:0!important; line-height:0!important; padding:0!important; margin:0!important;} /*----- 3. TYPOGRAPHIE -----*/ /* Taille du texte (cf. http://csswizardry.com/web-design+/) */ html { font-size:16px;} /* Make sure the default is always 16px */ body { font-size:62.5%;} /* 16px * 62.5% = 10px : 1em now = 10px */ /*-------------------------------------------------- DEFINITION Feuille de style générale PROJET Magev VERSION 20-08-2010 CONTENU I. Typographie générale II. Mise en page des blocs principaux III. Styles spécifiques --------------------------------------------------*/ body { background:#bbeafe url("/img/magev/bg-body.png") no-repeat center top; background-attachment:fixed; font-family:Verdana, Arial, sans-serif; } /*----- I. TYPOGRAPHIE GENERALE -----*/ /*--- Titres ---*/ h1, h2, h3, h4 { font-weight:bold; font-family:"Arial Black", Arial, Verdana, sans-serif;} h2 { font-size:2em; font-weight:bold; font-family:"Arial Black", Arial, Verdana, sans-serif; color:#0099cc; margin:.6em 0 .8em;} h3 { font-size:1.5em;} h3 a { text-decoration:none;} /*--- Liens ---*/ a { color:#000; text-decoration:underline;} a:hover { text-decoration:none;} /*--- Paragraphes ---*/ p, blockquote, label { line-height:1.7em; margin-bottom:1em;} ul li, ol li { line-height:1.7em;} blockquote { font-style:italic;} /*--- Rangées ---*/ .rg { overflow:hidden;} .imgLeft img { margin:0 15px 10px 0; float:left;} .imgRight img { margin:0 0 10px 15px; float:right;} /*--- Formulaires ---*/ #content .cms_forms { background:#d6ebf5; border:1px dashed #0099cc; padding:10px;} #content .cms_forms td { padding:5px;} #content .cms_forms label { color:#000; font-size:12px;} #content .cms_forms input, #content .cms_forms textarea { border:1px solid #0099cc; background:#fff; padding:3px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;} #content .cms_forms input.button { background:#0099cc; border:0; color:#fff; cursor:pointer; line-height:18px; width:60px;} .cms_forms_error_msg { color:#FF0000; border:1px dashed #FF0000; padding:10px; margin-bottom:10px; background:#fee; font-size:11px; } .cms_forms_msg { color:#6FAE03; border:1px dashed #6FAE03; padding:10px; background:#fbfff5; font-size:11px;} #cms_forms_5 input { border:1px solid #c1bfbf; padding:3px; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;} #cms_forms_5 input.button { color:#452646; border:1px solid #c1bfbf; background:#fff url("/img/magev/bg-btn-newsletter.gif") repeat-x; width:30px; height:20px; line-height:20px; font-weight:bold; padding:0;} #cms_forms_5 { padding:5px 0;} #cms_forms_5 #zY21zX2ZpZWxkXzMzX2VtYWlsX3JlcQ { width:145px; color:#777;} /*----- II. MISE EN PAGE -----*/ #wrapper { width:845px; margin:0 auto; padding:190px 0 0 92px; background:transparent url("/img/magev/bg-wrapper.png") no-repeat 0 90px; position:relative;} #main { overflow:hidden; background:#fff;} #sidebar { float:left; width:196px; padding:45px 0 0 12px;} #content { float:right; width:610px; min-height:600px; padding:0 15px 15px 10px; overflow:hidden;} #content-main { float:left; width:400px;} #content-side { float:right; width:196px; padding-top:15px;} #footer { font-size:1.2em; clear:both; background:#ebf9ff; overflow:hidden; padding:15px;} /*--- Header ---*/ h1#logo { position:absolute; top:10px; left:10px;} a#lnk-admin { background:url("/img/magev/ico-star.png") no-repeat left center; padding:3px 0 3px 25px; position:absolute; top:45px; right:0; font-size:1.2em; color:#003366;} p#slogan { position:absolute; top:154px; left:312px; color:#e95d0f; font-size:1.5em; letter-spacing:-1px;} p#slogan strong { font-size:1.4em; font-family:"Arial Black", Arial, Verdana, sans-serif;} /*--- Menu ---*/ #menu-nav { overflow:hidden;} #menu-nav li { display:inline; margin-right:10px; font-size:1.2em; line-height:0;} #menu-nav li a { background:url("/img/magev/bg-menu-nav-li.png") no-repeat 0 0; color:#fff; display:block; float:left; width:95px; height:32px; text-decoration:none; line-height:30px; text-align:center; margin-right:7px;} #menu-nav li a:hover, #menu-nav li a.CMS_parent { background:url("/img/magev/bg-menu-nav-li.png") no-repeat 0 -32px;} #menu-nav li.menu0 a:hover, #menu-nav li.menu0 a.CMS_parent,#menu-nav li.menu2 a:hover, #menu-nav li.menu2 a.CMS_parent { background:url("/img/magev/bg-menu-nav-li_asso.png") no-repeat 0 -32px;} #menu-nav li.menu1 a:hover, #menu-nav li.menu1 a.CMS_parent { background:url("/img/magev/bg-menu-nav-li_spect.png") no-repeat 0 -32px;} #menu-nav li.menu4 a { background:url("/img/magev/bg-menu-nav-li_orange.png") no-repeat 0 0; margin-left:5px;} #menu-nav li.menu4 a:hover, #menu-nav li.menu4 a.CMS_parent { background:url("/img/magev/bg-menu-nav-li_orange.png") no-repeat 0 -32px;} #menu-nav li.menu5 a { background:url("/img/magev/bg-menu-nav-li_violet.png") no-repeat 0 0; margin-right:0;} #menu-nav li.menu5 a:hover, #menu-nav li.menu5 a.CMS_parent { background:url("/img/magev/bg-menu-nav-li_violet.png") no-repeat 0 -32px;} /*--- Sidebar ---*/ #menu-sec, .menu-sec_CMS_lvl2 { background:#d6ebf5; margin:0 3px 0; padding:10px 15px 5px 10px; margin-bottom:15px;} #menu-sec li, .menu-sec_CMS_lvl2 > li { display:block; margin-bottom:10px; font-size:1.2em; line-height:1.4em;} #menu-sec li a, .menu-sec_CMS_lvl2 > li a { color:#000; padding:3px 0 3px 30px; display:block; text-decoration:none;} #menu-sec li a:hover, .menu-sec_CMS_lvl2 > li a { text-decoration:underline;} #menu-sec li a.CMS_current, .menu-sec_CMS_lvl2 > li > a.CMS_parent { background:url("/img/magev/ico-star_blue.png") no-repeat 0 0; color:#0099cc; text-decoration:none;} li.CMS_lvl2 a { text-decoration:none;} .menu-sec_CMS_lvl3 > li { font-size:11px;} .menu-sec_CMS_lvl3 > li > a { padding:3px 0 3px 45px; text-decoration:none;} .menu-sec_CMS_lvl3 > li > a.CMS_current { color:#0099cc; text-decoration:none;} #sidebar h2 { color:#fff; font-family:Arial, Verdana, sans-serif; font-weight:normal; font-size:1.3em; text-align:center; background:url("/img/magev/bg-sidebar-h2.png") no-repeat 0 0; height:27px; line-height:27px; margin:0;} #sidebar h3 { color:#0099cc;} #sidebar p { font-size:1.2em;} #sidebar .center img { margin-bottom:1em;} h3#newsletter-titre { color:#663399; font-size:13px;} /*--- Content ---*/ #content p, #content blockquote { font-size:1.2em;} #content ul, #content ol { margin:0 0 .8em 2em; display:block;} #content-main ul li a { color:#000; text-decoration:underline;} #content-main ul li a:hover { text-decoration:none;} #content-main ul > li { list-style-type:disc; margin-bottom:.5em; font-size:1.2em;} #content-main ul > li li { font-size:12px;} #content-main ol > li { list-style-type:decimal ; margin-bottom:.5em; font-size:1.2em;} #content h3 { margin-top:1.2em; clear:both;} #content .center img { margin-bottom:1em;} #content #menu-nav, #content #menu-presse { margin:0;} #content-side h2 { color:#fff; font-family:Arial, Verdana, sans-serif; background:url("/img/magev/bg-content-side-h2.png") no-repeat 0 0; height:27px; line-height:27px; font-weight:normal; font-size:1.3em; text-align:center;} /*--- Footer ---*/ #footer p { float:left;} #menu-footer { float:right; width:196px;} /*----- III. STYLES SPECIFIQUES -----*/ /*--- Styles de blocs ---*/ div.center { display:block; text-align:center;} div.center img { display:block; margin:0 auto;} /*--- Accueil ---*/ #accueil #sidebar h2 { color:#663399; font-family:"Arial Black", Arial, Verdana, sans-serif; text-align:left; background:none; font-size:2em; margin-bottom:.8em;} #accueil #content-main { padding-top:15px;} #proch-spectacles { background:#0099cc url("/img/magev/bg-proch-spectacles.png"); padding:5px 10px 5px; margin-bottom:15px;} #proch-spectacles { color:#fff;} #proch-spectacles h3 { font-size:1.3em; margin:0 0 1em;} #proch-spectacles ul li { text-transform:uppercase; line-height:1.3em;} #proch-spectacles ul li em { text-transform:none; color:#000;} .lnk-liste-spectacles { text-align:right; font-style:italic; color:#fff; margin-bottom:0;} .lnk-liste-spectacles a { color:#fff;} #gal-dessins { float:left; width:200px;} #dernier-temoignage { float:right; width:191px;} #dernier-temoignage h3 { background:url("/img/magev/bg-temoignage-h3.png") no-repeat 0 0; color:#fff; font-family:Arial, Verdana, sans-serif; font-weight:normal; font-size:1.3em; text-align:center; padding:5px 0 15px; margin-top:0;} .lnk-liste-temoignages { text-align:right; font-style:italic;} .lnk-ttes-actus { text-align:right; font-style:italic;} /*--- Actualités ---*/ .txt-date { color:#888; font-style:italic;} #tri-actus { margin-bottom:15px;} .vignette-actu { float:left; padding:5px; background:#efefef; margin:0 15px 10px 0;} .pagination { clear:both; text-align:center; margin-top:10px;} .lnk-num-page { padding:3px 4px; background:#d6ebf5; margin-right:5px;} .lnk-page-prec { margin-right:5px;} /*--- Spectacles ---*/ .liste-spectacles em { color:#888;} #tri-annee { background:#eee; padding:5px 10px; -moz-border-radius:3px; -webkit-border-radius:3px; margin-bottom:15px;} #tri-annee label { display:inline;} /*--- Magiciens ---*/ .bloc-mag { margin-bottom:2em;} .bloc-mag .text { margin-left:95px;} .txt-mag { margin-bottom:0; font-weight:bold;} .photo-mag { float:left; border:1px solid #c6c5c6; padding:5px 5px 15px; margin:0 15px 10px 0;} a.lnk-mag { color:#0099cc; display:block; text-align:right; line-height:1.7em; margin-bottom:1em; font-size:12px; } /*--- Dons ---*/ #content ul#menu-dons { margin-left:0;} #menu-dons li { display:inline; font-size:1.2em; padding-left:0;} #menu-dons li a { color:#0099cc; margin-right:15px; text-decoration:none;} #menu-dons li a.CMS_current { font-weight:bold;} #content .cms_forms table tr td.txt-reduc-impots { font-size:10px; line-height:16px;} .calc-don { color:#0099cc; font-weight:bold;} input.montant-don { width:40px;} .euro { color:#0099cc; font-weight:bold; padding-left:2px;} /*--- Témoignages ---*/ #temoignages #content h2 { color:#ff6600;} #temoignages #menu-sec { background:#ffe0cc;} #temoignages #menu-sec li a.CMS_current { background:url("/img/magev/ico-star_orange.png") no-repeat 0 0; color:#ff6600;} #temoignages #sidebar h2 { background:url("/img/magev/bg-sidebar-h2_orange.png") no-repeat 0 0;} #temoignages #content-side h2 { color:#fff;} #temoignages #content p.txt-metas-temoignage, #accueil #content p.txt-metas-temoignage { text-align:right; font-weight:bold; font-size:11px; margin-bottom:30px;} #temoignages h3#lettres-tem { margin-bottom:10px;} .txt-date-tem { font-weight:normal; font-style:italic; color:#888;} /*--- Presse ---*/ #presse #content h2 { color:#663399;} #presse #content-side h2 { color:#fff;} #content ul#menu-medias { margin-left:0;} #content #menu-medias li { display:inline; font-size:1.2em;} #content #menu-medias li a { color:#663399; margin-right:15px; text-decoration:none;} #content #menu-medias li a.CMS_current { font-weight:bold;} /*--- Documents à télécharger ---*/ .bloc-doc { overflow:hidden; margin-bottom:15px;} .bloc-doc .text { margin-left:120px;} .imgLeft { float:left; min-width:120px; text-align:center;} /*--- Webmail & admin ---*/ body.admin { background:#bbeafe url("/img/magev/bg-body.png") no-repeat center -100px;} #wrapper-admin { width:845px; margin:0 auto; position:relative; overflow:hidden;} #admin { width:462px; height:275px; background:url("/img/magev/bg-admin.png") no-repeat 0 0; margin:230px auto 0; position:relative;} #admin #btn-webmail { position:absolute; top:80px; left:50px;} #admin #btn-admin { position:absolute; top:80px; right:50px;} #admin #btn-webmail:hover, #admin #btn-admin:hover { top:81px;} /*----- IV. SCRIPTS -----*/ /*--- S3 Slider ---*/ #s3slider { width:400px; /* important to be same as image width */ height:300px; /* important to be same as image height */ position:relative; /* important */ overflow:hidden; /* important */ margin-bottom:5px; } #s3slider ul { padding:0; margin:0;} #s3slider ul li { list-style:none;} #s3slider a:hover span { text-decoration:underline;} #s3sliderContent { width:400px; /* important to be same as image width or wider */ height:300px; position:absolute; /* important */ top:0; /* important */ margin-left:0; /* important */ background:#000; } .s3sliderImage { float: left; /* important */ display: none; /* important */ } .s3sliderImage span { position:absolute; left:0; font:12px/15px Verdana, Arial, Helvetica, sans-serif; padding: 10px 13px; width: 374px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; } .clear { clear:both;}