www/squelettes-dist/css/layout.css

   1 /* --------------------------------------------------------------
   2
   3    layout.css
   4    Disposition des blocs principaux
   5    cf.: http://romy.tetue.net/structure-html-de-base
   6
   7 -------------------------------------------------------------- */
   8
   9 body { text-align: center; background: #FFF url(img/background.png); border-top: 5px solid; }
  10 .page { position: relative; width: 900px; margin: 0 auto; padding: 50px 1.5em; text-align: left;  }
  11
  12 .header {}
  13 .main { padding: 1.5em 0; }
  14 .footer { clear: both; padding: 1.5em 0 0; border-top: 2px solid; }
  15
  16 .wrapper { clear: both; float: left; width: 70%; overflow: hidden; }
  17 .content { min-height: 350px; }
  18 .aside { float: right; width: 25%; overflow: hidden; }
  19
  20
  21 /* Entete et barre de navigation
  22 ------------------------------------------ */
  23
  24 .header { padding-bottom: 1.5em; padding-right: 30%; border-bottom: 1px solid; }
  25 .header #logo { display: block; margin: 0; line-height: 1; font-weight: bold;  }
  26 .header #logo,
  27 .header #logo a,
  28 .header #logo a:hover { background: transparent; text-decoration: none; color: #222; }
  29 .header #slogan { margin: 0; }
  30
  31 .formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }
  32
  33 .nav { border: solid #222; border-width: 1px 0; }
  34 .nav ul {}
  35 .nav ul li {}
  36 .nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 1px solid #222; text-decoration: none; }
  37 .nav ul li.on a { background: #EED; color: #222; font-weight: normal; }
  38 .nav ul li a:focus,
  39 .nav ul li a:hover,
  40 .nav ul li a:active { background: #222; color: #FFF; }
  41
  42 #formulaire_recherche { position: absolute; top: 50px; right: 50px; border: 0; }
  43
  44 .footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
  45 .footer .generator { float: right; }
  46 .footer .generator a { padding: 0; background: none; }
  47
  48 /* Gabarit d'impression
  49 ------------------------------------------ */
  50 @media print {
  51 .page,
  52 .wrapper,
  53 .content { width: auto; }
  54 .nav,
  55 .arbo,
  56 .aside,
  57 .footer { display: none; }
  58 }
  59
  60 /* Affichage sur petits ecrans
  61 Cf.: http://www.alsacreations.com/astuce/lire/1177
  62 ------------------------------------------ */
  63 @media (max-width: 640px) {
  64
  65 /* passer tous les elements de largeur fixe en largeur automatique */
  66 body,
  67 .page,
  68 .header,
  69 .main,
  70 .footer,
  71 .wrapper,
  72 .content,
  73 .aside { width: auto !important; margin: auto !important; }
  74
  75 .page { margin: 0; padding: 5%; }
  76
  77 /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
  78 .content,
  79 .aside { clear: both; float: none !important; width: auto !important; }
  80 .nav ul li a { float: none; border: 0; }
  81 #formulaire_recherche { display: none; position: static; text-align: center; }
  82 .arbo { display: none; }
  83 .footer .colophon { width: auto; float: none; }
  84 .footer .generator { display: none; }
  85
  86 /* header du calendrier full-calendar */
  87 table.fc-header td { display: block; text-align: left; }
  88
  89 }
  90
  91 /* end */