/* Theme Name: S'Temps d'Art Africain Theme URI: http://www.stempsdartafricain.com Description: Thème conçu pour la réalisation du site de l'école S'Temps d'Art Africain Author: Benoit Decomble Author URI: http://www.benoitdecomble.com Version: 1.0 . General comments/License Statement if any. . */ body{background: #5e2806 url('images/bg.jpg') center top; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 12px; color:white; line-height: 1.35em;} a{text-decoration: none; color:#b4d605;} a:hover{text-decoration: underline; color:#ffba00;} .left{float:left;} strong, b{font-weight: bold;} em{font-style: italic;} form{margin-top:12px;} .right, .alignright{float:right;} .left, .alignleft{float:left;} #structure{width:100%; background: url('images/bg_top.jpg') no-repeat center top;} #page{width:1000px; margin:auto;} #header{display: block; width:100%; height:181px; background: url('images/top_menu.png') bottom left no-repeat;} #logo{background:url('images/logo.png') no-repeat; display: block; height:87px; margin:56px 0 0 10px; width:593px; float: left; text-indent:-10000px;} #logo a{display: block; height:87px; width:593px;} #adresse{display: block; float:right; width:304px; height:80px; text-indent: -10000px; background: url('images/adresse.png'); margin: 61px 10px 0 0; } #adresse a{display: block; width:100%; height:100%;} #adresse a:hover{background:#ffba00; opacity:0.15;} #titre h1{display: block; height:40px; text-indent:-10000px; margin-bottom: 30px;} /* Comportements du menu */ #menu{display: block; width:980px; height:39px; background-color:#271102; clear:both; margin:0 10px 0 10px;} #menu ul{display: block; width:100%;} #menu ul li{ display: block; float:left; margin-top:9px;} #menu ul li a{display:block; background: url('images/menutop.jpg') no-repeat; text-indent:-10000px; height:24px; } #menu ul li#m_accueil a{width:101px; background-position: 0 0;} #menu ul li#m_nouvelles a{width:120px; background-position: -101px 0;} #menu ul li#m_cours a{width:172px; background-position: -221px 0;} #menu ul li#m_equipe a{width:100px; background-position: -393px 0;} #menu ul li#m_apropos a{width:118px; background-position: -493px 0;} #menu ul li#m_contacts a{width:108px; background-position: -611px 0;} #menu ul li#m_studios a{width:162px; background-position: -727px 0;} #menu ul li#m_accueil a:hover{background-position: 0 -24px;} #menu ul li#m_nouvelles a:hover{background-position: -101px -24px;} #menu ul li#m_cours a:hover{background-position: -221px -24px;} #menu ul li#m_equipe a:hover{background-position: -393px -24px;} #menu ul li#m_apropos a:hover{background-position: -493px -24px;} #menu ul li#m_contacts a:hover{background-position: -611px -24px;} #menu ul li#m_studios a:hover{background-position: -727px -24px;} #menu ul li#m_accueil a.selected{background-position: 0 -24px;} #menu ul li#m_nouvelles a.selected{background-position: -101px -24px;} #menu ul li#m_cours a.selected{background-position: -221px -24px;} #menu ul li#m_equipe a.selected{background-position: -393px -24px;} #menu ul li#m_apropos a.selected{background-position: -493px -24px;} #menu ul li#m_contacts a.selected{background-position: -611px -24px;} #menu ul li#m_contacts a.studios{background-position: -727px -24px;} /* Style des grands titres de chaque page */ #content{background: url('images/fond_page.jpg') repeat-y; padding:28px 38px 28px 38px;} #footer{background: url('images/footer.png') no-repeat top; display: block; height:45px; text-align: right; margin:auto; width:1000px; padding:16px 0 0 0; font-size:10px;} #footer p{padding:0 12px 0 12px;} /* Styles page d'accueil */ #home_top{background: url('images/intro_image.jpg') no-repeat;} #home_top h1{background: url('images/intro_titre.png') 80px top no-repeat; display: block; width:100%; height:40px; text-indent: -10000px;} #home_top p{margin:12px 0 0 0; font-size: 14px; width:615px; line-height: 1.45em; text-indent:89px;} #home_top .left{margin-right:12px;} #home_intro{} #home_intro strong{font-weight: normal;} #home_infos{background: #4b2104; display: block; width:577px; height:58px; padding: 9px; margin-top:15px; margin-bottom:30px; float:left;} #home_infos img{margin-right:10px; float:left;} #nouvelles .nohome{display: none;} #home_photos{} #home_photos a:hover{background:#ffba00; opacity:0.85;} #home_photos img{display: block; background: url('images/bg_home_photo.jpg') no-repeat; padding:7px 4px 6px 8px;} #home_links{background: #271102; display:block; width:202px; height:59px; float:right;} #home_join{display: block; width:300px; height:237px; background: url('images/intro_rejoignez.png') no-repeat; z-index: 2; position:relative; float:right; top:20px; text-indent: -10000px;} /* #home_join a{display: block; width:100%; height:100%;} */ #home_links ul{list-style-image: url('images/puce_fleche.gif'); margin:14px 0 0 18px;} .linkhoraire{display: block; width:100px; height:100px; float:right; margin:40px 10px 20px 0; text-indent: 0; color:white; font-size:12px; text-align:center; padding-top:16px; text-shadow: #ac2b0d 1px 1px 1px;} .linkhoraire:hover{text-shadow: #000 1px 1px 1px; text-decoration: none; color:white;} .linkjoin{clear: both; display: block; width:100%; height:60px; margin:0 10px 0 0; width:200px; float:right;} #home_content{clear:both;} #content_left{width:600px; float:left;} #cours_horaires{} #cours_horaires h2{font-family: Palatino Linotype, Georgia, Lucida, Arial, Tahoma; background: url('images/h2_cours_horaires.jpg') no-repeat; display: block; width:208px; height:26px; text-indent:-1000px; margin-bottom:12px;} #liste_cours{display: block; width:251px; float:left;} #horaires h2{display: block; font-size: 0px; text-indent: -10000px; position: absolute; left:-10000px; background: none;} #liste_cours ul{ text-indent: 20px; } #liste_cours ul li{display:block; width:251px; height:33px;} #liste_cours ul li a{display: block; padding-top:7px; background: url('images/puce_bogolan.png') no-repeat 15px 11px; text-indent: 35px;} #liste_cours ul li.selected{display:block; width:251px; height:33px; background: url('images/cours_selected.jpg'); font-weight:bold;} #horaires{display: block; height:315px; float:left; background: #4b2104 url('images/bg_horaires.jpg') no-repeat right bottom; width:326px; padding:0 9px 9px 9px; overflow:hidden;} #horaires .description{background:#271102; padding:12px; display: block; } #horaires .description p.links{text-align: right; margin-top:4px;} #horaires .details{margin-top:12px;} #horaires .details p.jour_cours{clear:both; color:#ffba00; float:left; display: block; width:70px;} #horaires .details ul.heures_cours{float:right; width:250px; margin-bottom:12px;} #horaires .details_cours{clear:both; padding-top:11px; height: 400px; display: block;} #content_right{float:right; width:295px;} #newsletter{background: url('images/newsletter_bg.jpg') no-repeat; display: block; height:52px; width:302px; margin-bottom:26px;} #newsletter form{padding:14px 0 0 12px;} #newsletter label{ font-size: 12px;} #newsletter input{ } #newsletter #message{ padding:14px 0 0 12px; } label#email_error{color:red; padding:3px; border: 1px solid red; background: pink; margin:-50px 0 0 82px; position:absolute;} #nouvelles{} #nouvelles h2{font-family: Palatino Linotype, Georgia, Lucida, Arial, Tahoma; display: block; width:100%; height:24px; background: url('images/h2_nouvelles.jpg') no-repeat; text-indent:-10000px; margin-bottom:12px; border-bottom:1px dashed #ffba00; padding-bottom:4px;} #nouvelles p.date{font-size:11px;} #nouvelles h3{font-size: 14px; color:#ffba00; margin-bottom: 12px; font-family:Palatino Linotype, Georgia;} #nouvelles .nouvelle{ display:block; border-bottom:1px solid #492005; padding-bottom:10px; margin-bottom:10px;} #nouvelles p.more-link{text-align: right; margin-top:6px;} #nouvelles p.all-link{text-align: right; padding-top:6px; margin-top:6px;} .clearer{clear:both;} /* Styles Cours et Ateliers */ #titre h1.atelier{background: url('images/h1_cours_ateliers.jpg') no-repeat; width:319px;} #cours_top .bloc{display:block; width:287px; margin-right:31px; float:left; background: url('images/fond_cadre_top.jpg') repeat-x; height:390px; padding:0;} #cours_top .atelier{height:277px; margin-right:0px; background: url('images/fond_cadre_ateliers.jpg') repeat-x;} #cours_top h2{font-family: Palatino Linotype, Georgia, Lucida, Arial, Tahoma; display:block; padding-top:2px; height:26px; font-size:18px; color:#ffba00; background: url('images/fond_top_cadre_top.jpg') no-repeat;} #cours_top img{padding:19px 0 15px 19px;} #cours_top p{padding:0 19px 0 70px; margin-bottom:12px; display: block;} #cours_top p.desc_danse{background: url('images/bloc_danse.gif') no-repeat 19px 6px;} #cours_top p.desc_percu{background: url('images/bloc_percu.gif') no-repeat 19px 6px;} #cours_top .atelier p{padding:0 19px 0 19px; margin-bottom:12px;} #cours_top ul{padding-left:19px; text-indent: 10px; list-style-image: url('images/puce_bogolan.png'); margin-bottom:14px;} #cours_top ul li{margin:8px 0 0 17px;} #bouton_inscriptions img{padding:0; margin:0;} #bouton_inscriptions a:hover{opacity:0.85;} #cours_liste{clear:left; padding-top:14px;} #cours_liste .cours{clear:both; } #cours_liste .cours h2{font-family: Palatino Linotype, Georgia, Lucida, Arial, Tahoma; color:#FFBA00; font-size:20px; background: url('images/puce_h2_cours.jpg') no-repeat; text-indent:35px; display: block; height:20px; margin-bottom:12px; border-bottom:1px solid #4b2104; padding-bottom:6px;} #cours_liste .cours img{float:left; margin-right:12px;} #cours_liste .cours .description{float:left; display:block; width:580px; margin-top: 45px;} #cours_liste .cours .details{float:right; background: #4b2104; display:block; padding:18px 10px 10px 18px; width:290px; margin-top: 45px;} #cours_liste .details h3{font-weight: bold; font-size:14px; margin-bottom: 12px; color:#ffba00; font-family:Palatino Linotype, Georgia;} #cours_liste strong{font-weight:bold;} #cours_liste p{margin-top: 10px;} #cours_liste .details ul{margin-bottom:12px;} #cours_liste .details ul li{margin-bottom:6px;} #cours_liste .details .bouton_reservation{display: block; width:100%; margin-top:12px;} #cours_liste .details .bouton_reservation a{padding:4px 0 0 16px; float:right; display: block; width:130px; height:22px; background: url('images/bouton_reserver.jpg') no-repeat; color:white;} #cours_liste .details .bouton_reservation a:hover{color:#ffba00; text-decoration:none;} #cours_liste .details .prix{color:#ffba00; font-weight: bold; font-size: 14px; } .to_top{clear:both; float:right; display: block; height:20px; background: url('images/fleche_top.gif') no-repeat right 5px; padding-right:15px; margin-top:6px;} .to_top a{width:100%; height:100%; display: block;} .horaire_dl{display: block; position:absolute; margin:-115px 0 0 815px; z-index: 1000;} /* Styles L'équipe */ #titre h1.equipe{display: block; background: url('images/titre_equipe.jpg') no-repeat; width:175px; } #presentation{width:610px; float:left;} #presentation-full{width:900px; float:left;} #presentation h2, #presentation h3, #presentation h4, #presentation-full h2, #presentation-full h3, #presentation-full h4{font-family: Palatino Linotype, Georgia, Lucida, Arial, Tahoma; color:#ffba00; font-size: 18px; margin-bottom: 12px; border-bottom:1px dotted #ffba00; padding-bottom:4px;} #presentation h3, #presentation-full h3{font-size: 16px; border-bottom:none;} #presentation h4, #presentation-full h4{font-size: 14px; margin-bottom: 0; font-style: italic; border-bottom:none;} #presentation ol, #presentation-full ol{list-style-type: decimal; margin-bottom:10px; margin-left:16px;} #presentation ol li, #presentation-full ol li{list-style-position: inside;} #presentation p, #presentation-full p{margin-bottom:12px; } #presentation .date, #presentation-full .date{font-size:11px; background: #4b2104; padding:5px; text-align: center; } #presentation .nouvelle, #presentation-full .nouvelle{background:#914919; margin-bottom:12px; padding:10px;} #sous_menu{width:248px; background: #4b2104; float:right; padding:0 19px 19px 19px;} #sous_menu .current_page_item a{font-weight:bold; color:#ffba00;} #sous_menu h2{font-family: Palatino Linotype, Georgia, Lucida, Arial, Tahoma; color: #ffba00; font-size:14px; margin-bottom:8px; margin-top:19px;border-bottom: 1px dashed #ffba00;padding-bottom: 6px;} #sous_menu ul{padding-left:4px; text-indent: 6px; list-style-image: url('images/puce_bogolan.png');} #sous_menu ul li{margin:8px 0 0 12px;} #intro_equipe p{margin-bottom:12px;} #equipe .membre{width:450px; display: block; float:left;} #equipe .membre_gauche{margin-right:24px;} #equipe .membre img{float:left; margin-right: 12px;} #equipe .membre h2{margin-top:45px; width: 100%; border-bottom: 1px dashed #ffba00; color:#FFBA00; font-size:20px; background: url('images/puce_h2_cours.jpg') no-repeat; text-indent:35px; display: block; height:20px; margin-bottom:14px; padding-bottom:6px; font-family:Palatino Linotype, Georgia;} #equipe .membre p{margin-bottom:12px;} #equipe .membre p.role{font-weight:bold;} ul#menu-equipe{display: block; height:30px; width:650px; border-bottom: 1px solid #4d2c17;} ul#menu-equipe li{display: block; float:left; height:30px; margin-right: 10px;} ul#menu-equipe li a{display: block; width:100%; height:100%; background: url(images/menu-equipe.jpg) no-repeat; text-indent: -10000px; cursor: pointer;} ul#menu-equipe li#menu-fondateurs{width:185px;} ul#menu-equipe li#menu-invites{width:139px;} ul#menu-equipe li#menu-musiciens{width:164px;} ul#menu-equipe li#menu-fondateurs a.active{background-position: 0px -36px;} ul#menu-equipe li#menu-invites a.active{background-position: -204px -36px;} ul#menu-equipe li#menu-musiciens a.active{background-position: -360px -36px;} ul#menu-equipe li#menu-invites a{background-position: -204px 0px;} ul#menu-equipe li#menu-musiciens a{background-position: -360px 0px;} ul#menu-equipe li#menu-fondateurs a:hover{background-position: 0px -36px;} ul#menu-equipe li#menu-invites a:hover{background-position: -204px -36px;} ul#menu-equipe li#menu-musiciens a:hover{background-position: -360px -36px;} #invites, #musiciens{display: none;} ul#menu-equipe li#menu-fondateurs{width:185px;} ul#menu-equipe li#menu-invites{width:139px; background-position: -204px 0px;} ul#menu-equipe li#menu-musiciens{width:164px; background-position: -360px 0px;} /* Styles h1 */ #titre h1.contacts{background: url('images/titre_contacts.jpg') no-repeat; width:206px;} #titre h1.nouvelles{background: url('images/titre_nouvelles.jpg') no-repeat; width:212px;} #titre h1.apropos{background: url('images/titre_a_propos.jpg') no-repeat; width:204px;} #titre h1.studios{background: url('images/titre-studios.jpg') no-repeat; width:300px;} h2#citation{text-align: center; font-style: italic; font-size:1.2em; margin:-10px 0 30px 0; font-family: Georgia;}