1 /* --------------------------------------------------------------
4 Disposition des blocs principaux
5 cf.: http://romy.tetue.net/structure-html-de-base
7 -------------------------------------------------------------- */
10 ------------------------------------------ */
11 body
{ text-align: center
; background:#ddd;}
12 .page { position: relative
; width: 960px; max-width:95%; margin:2em auto
; text-align: left
; }
14 .main { padding: 1.5em 0; }
15 .footer { clear: both
; padding: 1em 0 0; margin:1em 0 0 0; border-top:1px solid
#999; }
17 /* largeur calculee du wrapper: 960*70% = 672px */
18 .wrapper { clear: both
; float: left
; width: 70%; overflow: hidden
; }
19 .content { min-height: 350px; }
20 /* largeur calculee du aside: 672px / 3 = 224px = 23.333 %*/
21 .aside { float: right
; width: 23.333%; overflow: hidden
; }
23 /* Entete et barre de navigation
24 ------------------------------------------ */
25 .header { padding-bottom: 1.5em; }
26 .header .spip_logo_site { display: block
; margin: 0; line-height: 1; font-weight: bold
; }
27 .header
.spip_logo_site
,
28 .header
.spip_logo_site a
,
29 .header .spip_logo_site a:hover { background: transparent
; text-decoration:none
; color:#222; }
30 .header .spip_logo_site a:hover {color:#db1762;}
31 .header .spip_logo_site a:hover img {opacity:0.7;}
32 .header .spip_logo {margin-bottom:0;}
33 .header #slogan { margin: 0; }
35 .formulaire_menu_lang { position: absolute
; right: 0; top: .9em; display: block
; width: 30%; }
38 .nav li {display:inline
;}
39 .nav li a { display: inline-block
; padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 0.25em; text-decoration: none
; background: #f0f0f0; color: #db1762; }
40 .nav li.on a { background:#c41558; color:#fff; font-weight: normal
; }
43 .nav li a:active { background: #c41558; color:#fff; }
46 .footer .colophon { float: left
; height: 40px; width: 70%; margin: 0; }
47 .footer .generator { float: right
; }
48 .footer .generator a { padding: 0; background: none
; }
50 /* Gabarit d'impression
51 ------------------------------------------ */
55 .content { width: auto
; }
59 .footer { display: none
; }
62 /* Affichage sur petits ecrans
63 Cf.: http://www.alsacreations.com/astuce/lire/1177
64 ------------------------------------------ */
66 /* largeur maximum 767px */
67 @media (max-width: 767px) {
68 body
{ width: 100%; padding: 0 20px; }
69 .page { width: 100%; max-width: none
; }
72 /* largeur maximum 640px */
73 @media (max-width: 640px) {
77 .aside { width: 100%;}
79 .aside { clear: both
; float: none
; width: 100%; }
81 /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
82 .nav ul li a { float: none
; border: 0; }
83 .arbo { display: none
; }
84 .footer .colophon { width: auto
; float: none
; }
85 .footer .generator { display: none
; }
87 /* header du calendrier full-calendar */
88 table
.fc-header td
{ display: block
; text-align: left
; }