/******************************************************** CSS pour le site de Conceptö Création du css : Martin Durette Date : Mars 2012 Une réalisation de Conceptö ********************************************************/ /* Gris: #807f7f */ /* Gris #2 #797a7c */ /* Vert: #97bf0d */ /******************************************************** Styles de base ********************************************************/ body{margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:12px; background:url(../images/background.jpg) top center no-repeat #c6af8b} a{outline:none;} .clear{clear:both} #wrapper{position:relative; margin:-15px auto; width:955px; padding:0; background:url(../images/bg-contenant.png) top left no-repeat; min-height:1006px; z-index:5;} /******************************************************** Menu ********************************************************/ #menu{margin:0 auto; width:912px;} .menutop1{position:absolute; top:154px; margin-left:0; background:#fff; height:34px; width:177px} .menutop2{position:absolute; top:154px; margin-left:182px; background:#fff; height:34px; width:171px} .menutop3{position:absolute; top:154px; margin-left:358px; background:#fff; height:34px; width:174px} .menutop4{position:absolute; top:154px; margin-left:537px; background:#fff; height:34px; width:177px} .menutop5{position:absolute; top:154px; margin-left:719px; background:#fff; height:34px; width:175px} #sous-menu{margin:0 auto; width:912px; height:154px;} #sousmenu1{position:absolute; top:154px; margin-left:0; height:0px; background:#999; width:177px; background:url(../images/menu/Fr/sous-menu-fondatrice.png); filter: alpha(opacity=0); opacity:0; } #sousmenu2{position:absolute; top:154px; margin-left:182px; height:0px; background:#999; width:171px; background:url(../images/menu/Fr/sous-menu-spiritualite.png); filter: alpha(opacity=0); opacity:0; } #sousmenu3{position:absolute; top:154px; margin-left:358px; height:0px; background:#999; width:174px; background:url(../images/menu/Fr/sous-menu-famille.png); filter: alpha(opacity=0); opacity:0; } #sousmenu4{position:absolute; top:154px; margin-left:537px; height:0px; background:#999; width:177px; background:url(../images/menu/Fr/sous-menu-travers.png); filter: alpha(opacity=0); opacity:0; } #sousmenu5{position:absolute; top:154px; margin-left:719px; height:0px; background:#999; width:175px; background:url(../images/menu/Fr/sous-menu-connaitre.png); filter: alpha(opacity=0); opacity:0; } #sous-menu ul{margin:0; padding:20px} #sous-menu ul li{color:#fff; list-style:none; margin:0; padding:1px 0 1px 0} #sous-menu ul li.spacer{color:#fff; font-size:4px} #sous-menu ul li a{font-family:Verdana, Geneva, sans-serif; color:#fff; text-decoration:none} #sous-menu ul li a:hover{text-decoration:underline; color:#000} /******************************************************** Top ********************************************************/ #bandeau{margin:0 0 0 0; width:100%; background:url(../images/bandeau-top.png) top left repeat-x; height:58px} /******************************************************** Main ********************************************************/ #sidebar-gauche{float:left; width:177px; margin:0 0 0 22px; min-height:500px; background:url(../images/bg-main.jpg) repeat} #sidebar-gauche #bloc-1{width:177px; margin:0} #sidebar-gauche #bloc-2{width:177px; margin:10px 0 0 0; background:url(../images/bg-precurseur.jpg) top left repeat} #main{float:left; margin:0 0 0 6px; width:714px; min-height:500px;} #header{height:265px;} #header img:not(:first-child) {display:none;} #contenu{margin:10px 0 0 0; background:url(../images/bg-main.jpg); min-height:500px} #principal{float:left; width:493px; padding:10px 15px 10px 15px;} #principal h1{background:#cec069; padding:5px 0 5px 10px; color:#000; font-size:1.5em} #principal h2{text-transform:uppercase; color:#8e8c8c; font-size:1.4em} #principal .mce_img_gauche{float:left; margin:0 15px 15px 0} #principal .mce_img_droite{float:right; margin:0 0 15px 15px} #principal .mce_bas_vignette{font-size:0.9em; line-height:100%; background:#d9d8d8; padding:10px; margin:-12px 0 0 0; width:505px;} #principal .mce_exposant{font-size:9px; vertical-align: baseline;position: relative;top: -0.4em;} #principal .mce_spacer{border-bottom:4px dotted #e6a28b;;margin-bottom:2em; clear:both} table.formail{margin:15px 0 0 0} table.formail td{color:#c37960;} /* Actualités */ #principal.actualites h1{color:#c37960; background:none; padding:0; margin-top:1em; font-size:2em; text-transform:uppercase; font-weight:normal} #principal.actualites h1 span{font-size:0.6em} #principal.actualites h2{text-transform:none; color:#6f6e6e; margin-top:0; padding-top:0} #principal.actualites p{color:#000; line-height:150%} #principal.actualites a{color:#c37960; text-decoration:none; text-transform:uppercase; font-style:italic;} #principal.actualites a:hover{text-decoration:underline;} #principal.actualites #actualite-contenu{border-top:4px dotted #e6a28b; padding:15px 0 15px 0} #principal.actualites #actualite-thumb{float:left; margin:0; width:150px} #principal.actualites #actualite-text{float:left; margin:0 0 0 15px; width:318px} #principal.actualites p.actualite-date{font-weight:bold; margin-top:0; padding-top:0; color:#c37960} /* Précurseur */ #principal.precurseur h1{color:#c37960; background:none; padding:0; margin-top:0; font-size:2em; text-transform:uppercase; font-weight:normal} #principal.precurseur h2{border-top:4px dotted #e6a28b; padding:15px 0 0 0;} #principal.precurseur h3{color:#c37960; line-height:150%; margin-top:0; padding-top:0} #principal.precurseur p{color:#000; line-height:150%} #principal.precurseur div.encadre{border:1px solid #c37960; background:#fff; padding:20px; margin:20px; text-align:center} #principal.precurseur input[type=text], #principal.precurseur textarea{border:1px solid #c37960; padding:3px 0 3px 0; color:#c37960; background:#ffffff; width:100%} #principal.precurseur input[type=submit]{border:1px solid #c37960; padding:3px 10px 3px 10px; color:#c37960; background:#ffffff; cursor:pointer; cursor:hand} #principal.precurseur input[type=submit]:hover{color:#ffffff; background:#c37960;} #sidebar-droite.precurseur{width:146px; padding:0 15px 0 30px} #sidebar-droite.precurseur h4{color:#c37960;padding:0; margin:1em 0 0.5em 0; font-size:1.4em; font-weight:normal; text-transform:uppercase; border-bottom:1px solid #c37960} #sidebar-droite.precurseur h4 a{color:#c37960;} #sidebar-droite.precurseur h4 a:hover{color:#666; text-decoration:none} #sidebar-droite.precurseur a{color:#666; text-decoration:none} #sidebar-droite.precurseur a:hover{text-decoration:underline} #sidebar-droite.precurseur p{margin:0 0 0 10px; padding:0;} #sidebar-droite{float:left; margin:0; width:191px; background:url(../images/bg-sidebar-droite.png) top left no-repeat; min-height:600px} #citation{background:url(../images/bg-citation.jpg) top left no-repeat; width:146px; min-height:97px; margin:0 0 0 15px; padding:10px 10px 10px 20px} #citation p{color:#434344; font-family:Verdana, Geneva, sans-serif; font-size:1.2em; font-style:italic} div.menu-sidebar{background:url(../images/bg-sidebar-droite.jpg); width:175px; margin:0 0 0 15px; padding:0} div.menu-sidebar ul{margin:0; padding:10px 20px 10px 20px; list-style:none} div.menu-sidebar ul li{margin:0; padding:10px 0 10px 0;} div.menu-sidebar ul li a{text-decoration:none; color:#6f6e6e; font-family:Verdana, Geneva, sans-serif; font-size:1.2em;} div.menu-sidebar ul li a:hover{color:#000; } div.menu-sidebar-calendrier{background:url(../images/bg-sidebar-droite.jpg); width:165px; margin:0 0 0 15px; padding:10px 0 10px 10px; text-transform:uppercase; font-weight:bold; color:#6f6e6e; letter-spacing:0.1em} #dons-sidebar{width:175px; margin:0 0 0 15px;} #you-tube{width:160px; margin:0 0 0 15px; padding:15px 0 15px 15px } /******************************************************** SideBar (Gauche) ********************************************************/ p {margin:10px 0 0 0; padding:0} a.menu{display:block; padding:5px 0 5px 0; width:198px; text-align:center; text-transform:uppercase; color:#593f36; font-size:1.2em; text-decoration:none; font-weight:bold; background:url(../images/bg-menu-sidebar.jpg)} a.menu:hover{color:#fff} #calendrier{background:url(../images/bg-calendrier.jpg) top left repeat; padding:5px 0 5px 0; margin:10px 0 0 0} div.sous-menu{height:22px; width:100%; background:url(../images/btn-sidebar.jpg) top left no-repeat; text-align:center; color:#593f36; margin:10px 0 0 0; padding:5px 0 0 0} div.sous-menu a{color:#593f36; text-transform:uppercase; text-decoration:none; font-weight:bold;} div.sous-menu a:hover{color:#fff; text-decoration:underline} div.sous-menu a.active{color:#fff; text-decoration:underline} #precurseur-thumb{margin:0; width:161px; height:212px; padding:15px 0 0 16px} #precurseur-link p{margin:0; padding:0} /******************************************************** Footer ********************************************************/ #footer{text-align:center; background:url(../images/bg-main.jpg); padding:0 20px 0 20px; color:#828181} #footer a{color:#828181; text-decoration:none} #footer a:hover{color:#000; text-decoration:underline} #footer p.copyright{font-size:0.9em; padding-bottom:2em} /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.stunicholls.com/menu/vertical-concertina-6.html Copyright (c) 2005-2008 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* #slide height = (number of top level links - 1) * height of links + inner div height */ #slide {padding:0; margin:0 0 0 15px; list-style:none; width:176px; position:relative; overflow:hidden; font-family: verdana, sans-serif; font-size:12px; } #slide li.sub, #slide li.top {display:block; float:left; height:24px; line-height:24px; width:176px; color:#666; text-decoration:none;border-bottom:1px solid #fff; text-indent:20px; overflow:hidden; cursor:pointer;} #slide li.sub {background:url(../images/out.gif) no-repeat 5px 8px;} #slide li.top a {text-decoration:none; color:#666; display:block; background:url(../images/out.gif) no-repeat 5px 8px;} #slide li.top a:hover {color:#fff; background:#d7c9db url(../images/out-over.gif) no-repeat 5px 8px;} #slide li.clicked {color:#17375e; background:#d7c9db url(../images/down.gif) no-repeat 5px 8px;} /* #slide li.sub div height = (maximum sub lines * sub line height) + top level link height(variable fY in jQuery) */ #slide li.sub div {background:#fff; height:165px; width:160px; padding:0 15px; line-height:1.2em; text-indent:0;} #slide li div ul {padding:0; margin:0; list-style:none;} #slide li div ul li {float:left; height:20px; width:100%;} #slide li div ul li a {padding:0; margin:0;color:#17375e; text-decoration:none; background:#fff url(../images/out.gif) no-repeat 5px 6px; font-size:10px; display:block; border-bottom:1px solid #ddd; height:19px; line-height:19px; width:100%; text-indent:20px;} #slide li div ul li a:hover {color:#069; background:#fff url(../images/out-over2.gif) no-repeat 5px 6px;} #precurseur-slide #slide {padding:0; margin:0 0 0 0; list-style:none; width:150px; position:relative; overflow:hidden; font-family: verdana, sans-serif; font-size:12px; } #precurseur-slide #slide li.sub div {background:#fff; height:165px; width:150px; padding:0; line-height:1.2em; text-indent:0;} #precurseur-slide #slide li div ul li a {padding:0 0 0 20px; margin:0; width:90%; text-indent:0;} #precurseur-slide .menu-archive ul{margin:0; padding:0;} #precurseur-slide .menu-archive li{margin:0; padding:0; height:24px; line-height:24px; width:151px; color:#666; text-decoration:none;border-bottom:1px solid #fff; text-indent:20px; overflow:hidden; cursor:pointer;} #precurseur-slide .menu-archive li a {text-decoration:none; color:#666; display:block; background:url(../images/out.gif) no-repeat 5px 8px;} #precurseur-slide .menu-archive li a:hover {color:#fff; background:#d7c9db url(../images/out-over.gif) no-repeat 5px 8px;} /******************************************************** JQuery Calendar ********************************************************/ .ui-datepicker-calendar tbody td.highlight > a {background: #829271;color: #ffffff;border: 1px solid #829271;} .ui-datepicker { width: 164px; padding: .2em .2em 0; display: none; font-size: 90%; } .ui-datepicker .ui-datepicker-header {font-size:1.1em} .ui-datepicker td { border: 0; padding: 1px;} .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: center; text-decoration: none; }