/* -------------------------------------------------------------- layout.css Disposition des blocs principaux cf.: http://romy.tetue.net/structure-html-de-base -------------------------------------------------------------- */ body { text-align: center;background: #FFF url(img/background.png); margin-top: 5px; } .page {background:white; position: relative; width: 990px; margin: 0 auto; padding: 10px 1.5em 0px; text-align: left; } .header {} .main { padding: 1.5em 0; } .footer { clear: both; padding: 1.5em 0 0; border-top: 2px solid; background: #F6F6F6;} /*.test {background:black; opacity:0.7; color:white; position:fixed; bottom:0%;right:0%;width:100%; height:2em;text-align: center;font-weight: bold;padding-top: 5px;}*/ .wrapper { clear: both; float: left; width: 61%; overflow: hidden; padding-bottom: 2.5em;margin-top:0;padding-top:0;} .content { min-height: 350px;margin-top:0;padding-top:0; } .aside { float: right; width: 37%; overflow: hidden; margin-top:0;padding-top:3px;} .page_rubrique .wrapper, .page_article .wrapper {width: 98%; margin:auto;overflow: hidden;padding-bottom: 2.5em;margin-top:0;padding-top:0; } .page_rubrique .content, .page_article .content {padding-bottom:10em;width:98%; margin:0 auto;padding-top:0;} .page_rubrique .aside, .page_article .aside {display:none;} .page_rubrique2 .wrapper, .page_article2 .wrapper {width: 69%; margin:auto;overflow: hidden;padding-bottom: 2.5em;margin-top:0;padding-top:0; } .page_rubrique2 .content, .page_article2 .content {padding-bottom:10em;width:98%; margin:0 auto;padding-top:0;} .page_rubrique2 .aside, .page_article2 .aside {float: right; width: 26%; overflow: hidden; margin-top:0;padding-top:3px;} .page_grille {background:white; position: relative; width: 900px; margin: 0 auto; padding: 10px 1.5em 50px; text-align: left; } .page_grille .wrapper {width: 98%; margin:auto;overflow: hidden; } .page_grille .content {padding-bottom:10em;width:100%; } .navtop {width:95%; margin:auto; padding:5px;text-align:center;margin-bottom: 3em;margin-top: 1em;font-family: Anonymous_Pro, 'Courier New', Courier, serif;} .navtop li {list-style:none;display: inline-block;padding-left: 0.8em;} .navtop h1 {color:#343a3a;font-weight: bold;font-size: 1.5em;border:0;} .navtop p {color:#343a3a;font-weight: bold;font-size: 1.2em;border:0;} .navtop li a {display: block; text-align:center;padding:5px; color:#8c0c19;font-weight: bold;font-size: 1.5em; } .navtop li a:hover, .navtop li a:focus, .navtop li a:active {display: block; text-align:center;padding:5px; color:black;font-weight: bold;font-size: 1.5em;border:0; } .navtop li a.on {display: block; text-align:center;padding:5px; color:black;font-weight: bold;font-size: 1.5em;border:0; } /*Style de la colonne de droite de la rubrique Infos*/ .navinfo {width:99%;margin-top:0;padding-top:0;background:#F6F6F6;padding:5px;} /*Monter en haut de page*/ .remonter {position:fixed;bottom:50%;right:0%; width:34px;padding:0.5em;} .remonter a { display: inline-block;background: url(/IMG/icones/icone_up_noire_32.png) no-repeat ; width:32px;height:32px; border:0;opacity:0.5;} .remonter a:hover { display: inline-block;background: url(/IMG/icones/icone_up_rouge_32.png) no-repeat ; width:32px;height:32px; border:0;opacity:1;} /* Entete et barre de navigation ------------------------------------------ */ .header { padding-bottom: 1.5em; } .header #logo { display: block; margin: 0; line-height: 1; font-weight: bold; } .header #logo, .header #logo a, .header #logo a:hover { background: transparent; text-decoration: none; color: #222; } .header #slogan { margin: 0; } .header img {border:0; overflow: hidden;margin:0;text-align: center;} .header a, .header a:hover, .header a:active .header a:focus {border:0;} /*Menu de navigation du header, inspiré de http://letteringjs.com/*/ .header .swingue {font-family: MyUnderwood; font-size:1.8em;border: 0; } .header .swingue a { color:#343a3a;} .header .swingue a:active, .header .swingue a:focus, .header .swingue a:hover {text-transform: uppercase;} .header .swingue .accueil {display: block;background:black;} .header .swingue .accueil .lettrea {position:absolute;top:44px;right:208px;padding:0;margin:0;} .header .swingue .accueil .lettrec {position:absolute;top:39px;right:192px;padding:0;margin:0;} .header .swingue .accueil .lettrec2 {position:absolute;top:46px;right:178px;padding:0;margin:0;} .header .swingue .accueil .lettreu {position:absolute;top:43px;right:160px;padding:0;margin:0;} .header .swingue .accueil .lettree {position:absolute;top:46px;right:140px;padding:0;margin:0;} .header .swingue .accueil .lettrei {position:absolute;top:46px;right:120px;padding:0;margin:0;} .header .swingue .accueil .lettrel {position:absolute;top:46px;right:100px;padding:0;margin:0;} .header .laradio .lettrel {position:absolute;top:91px;right:192px;padding:0;margin:0;} .header .laradio .lettrea {position:absolute;top:90px;right:175px;padding:0;margin:0;} .header .laradio .lettrer {position:absolute;top:90px;right:150px;padding:0;margin:0;} .header .laradio .lettrea2 {position:absolute;top:92px;right:132px;padding:0;margin:0;} .header .laradio .lettred {position:absolute;top:94px;right:114px;padding:0;margin:0;} .header .laradio .lettrei {position:absolute;top:93px;right:98px;padding:0;margin:0;} .header .laradio .lettreo {position:absolute;top:95px;right:81px;padding:0;margin:0;} .header .programme .lettrep {position:absolute;top:139px;right:230px;padding:0;margin:0;} .header .programme .lettrer {position:absolute;top:138px;right:212px;padding:0;margin:0;} .header .programme .lettreo {position:absolute;top:141px;right:195px;padding:0;margin:0;} .header .programme .lettreg {position:absolute;top:140px;right:177px;padding:0;margin:0;} .header .programme .lettrer2 {position:absolute;top:140px;right:158px;padding:0;margin:0;} .header .programme .lettrea {position:absolute;top:139px;right:142px;padding:0;margin:0;} .header .programme .lettrem {position:absolute;top:141px;right:120px;padding:0;margin:0;} .header .programme .lettrem2 {position:absolute;top:142px;right:105px;padding:0;margin:0;} .header .programme .lettree {position:absolute;top:141px;right:86px;padding:0;margin:0;} .header .nousecouter .lettren {position:absolute;top:187px;right:270px;padding:0;margin:0;} .header .nousecouter .lettreo {position:absolute;top:185px;right:253px;padding:0;margin:0;} .header .nousecouter .lettreu {position:absolute;top:186px;right:238px;padding:0;margin:0;} .header .nousecouter .lettres {position:absolute;top:185px;right:220px;padding:0;margin:0;} .header .nousecouter .lettree {position:absolute;top:186px;right:195px;padding:0;margin:0;} .header .nousecouter .lettrec {position:absolute;top:188px;right:177px;padding:0;margin:0;} .header .nousecouter .lettreo2 {position:absolute;top:187px;right:160px;padding:0;margin:0;} .header .nousecouter .lettreu2 {position:absolute;top:186px;right:143px;padding:0;margin:0;} .header .nousecouter .lettret {position:absolute;top:187px;right:127px;padding:0;margin:0;} .header .nousecouter .lettree2 {position:absolute;top:188px;right:110px;padding:0;margin:0;} .header .nousecouter .lettrer {position:absolute;top:187px;right:90px;padding:0;margin:0;} .header .nousecouter #popup {position:absolute;top:181px;right:12px;padding:0;margin:0;} .header .archivessonores .lettrea {position:absolute;top:237px;right:278px;padding:0;margin:0;} .header .archivessonores .lettrer {position:absolute;top:236px;right:258px;padding:0;margin:0;} .header .archivessonores .lettrec {position:absolute;top:240px;right:244px;padding:0;margin:0;} .header .archivessonores .lettreh {position:absolute;top:238px;right:224px;padding:0;margin:0;} .header .archivessonores .lettrei {position:absolute;top:239px;right:207px;padding:0;margin:0;} .header .archivessonores .lettrev {position:absolute;top:238px;right:191px;padding:0;margin:0;} .header .archivessonores .lettree {position:absolute;top:239px;right:176px;padding:0;margin:0;} .header .archivessonores .lettres {position:absolute;top:237px;right:160px;padding:0;margin:0;} .header .archivessonores .lettres2 {position:absolute;top:242px;right:132px;padding:0;margin:0;} .header .archivessonores .lettreo {position:absolute;top:240px;right:115px;padding:0;margin:0;} .header .archivessonores .lettren {position:absolute;top:239px;right:100px;padding:0;margin:0;} .header .archivessonores .lettreo2 {position:absolute;top:240px;right:84px;padding:0;margin:0;} .header .archivessonores .lettrer2 {position:absolute;top:241px;right:67px;padding:0;margin:0;} .header .archivessonores .lettree2 {position:absolute;top:244px;right:47px;padding:0;margin:0;} .header .archivessonores .lettres3 {position:absolute;top:243px;right:30px;padding:0;margin:0;} .formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; } .nav { border: solid #222; border-width: 1px 0; } .nav ul {} .nav ul li {} .nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 1px solid #222; text-decoration: none; } .nav ul li.on a { background: #EED; color: #222; font-weight: normal; } .nav ul li a:focus, .nav ul li a:hover, .nav ul li a:active { background: #222; color: #FFF; } #formulaire_recherche {position:absolute; top:290px;right:-85px;border: 0; } .play_popup a {display:inline-block; background: url(/IMG/icones/icone_play2_noir_32.png) no-repeat ; vertical-align: middle; width:32px;height:32px;border:0;padding:5px 20px;} .play_popup a:hover, .play_popup a:active, .play_popup a:focus {display:inline-block; background: url(/IMG/icones/icone_play2_rouge_32.png) no-repeat ; vertical-align: middle;width:32px;height:32px;border:0;padding:5px 20px;} .play_popup2 a {display:inline-block; background: url(/IMG/icones/icone_play_noir_32.png) no-repeat ; vertical-align: middle;width:32px;height:32px;border:0;padding:5px 20px;} .play_popup2 a:hover, .play_popup2 a:active, .play_popup2 a:focus {display:inline-block; background: url(/IMG/icones/icone_play_rouge_32.png) no-repeat ; vertical-align: middle; width:32px;height:32px;border:0;padding:5px 20px;} .muses {display:block;width:30%; margin:auto;} .footer .colophon { text-align: center; width: 99%; margin: 0 auto; } .footer .login a {display: inline-block;background: url(/IMG/icones/icone_login_rouge_32.png) no-repeat; width:32px;height:32px; border:0;vertical-align: middle;} .footer .login a:hover {display: inline-block;background: url(/IMG/icones/icone_login_noire_32.png) no-repeat; width:32px;height:32px;border:0; vertical-align: middle;} .footer .logout a {display: inline-block;background: url(/IMG/icones/icone_logout_rouge_32.png) no-repeat; width:32px;height:32px; border:0;vertical-align: middle;} .footer .logout a:hover {display: inline-block;background: url(/IMG/icones/icone_logout_noire_32.png) no-repeat; width:32px;height:32px;border:0; vertical-align: middle;} /* cf. style.css pour les icones rss/podcast hors footer*/ .abo_rss_revert a {display: inline-block;background: url(/IMG/icones/icone_rss_rouge_32.png) no-repeat; width:32px;height:32px; border:0;vertical-align: middle;} .abo_rss_revert a:hover {display: inline-block;background: url(/IMG/icones/icone_rss_32.png) no-repeat; width:32px;height:32px;border:0; vertical-align: middle;} .abo_podcast_revert a {display: inline-block;background: url(/IMG/icones/icone_podcast_rouge_32.png) no-repeat; width:32px;height:32px;border:0;vertical-align: middle; } .abo_podcast_revert a:hover {display: inline-block;background: url(/IMG/icones/icone_podcast_32.png) no-repeat; width:32px;height:32px; border:0;vertical-align: middle;} /* Gabarit d'impression ------------------------------------------ */ @media print { .page, .wrapper, .content { width: auto; } .nav, .arbo, .aside, .footer { display: none; } } /* Affichage sur petits ecrans Cf.: http://www.alsacreations.com/astuce/lire/1177 ------------------------------------------ */ @media (max-width: 640px) { /* passer tous les elements de largeur fixe en largeur automatique */ body, .page, .header, .main, .footer, .wrapper, .content, .aside { width: auto !important; margin: auto !important; padding: auto !important; } .page { margin: 0; padding: 5%; } /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */ .content, .aside { clear: both; float: none !important; width: auto !important; } .nav ul li a { float: none; border: 0; } #formulaire_recherche { display: none; position: static; text-align: center; } .arbo { display: none; } .footer .colophon { width: auto; float: none; } .footer .generator { display: none; } /* header du calendrier full-calendar */ table.fc-header td { display: block; text-align: left; } } /* end */