/*-*- css -*-*/
/* À peu près 1/3 du contenu sur un écran 1024 */
/* Il s'agit d'un contenu comme une carte de visite, un évènement, un
   document, etc. qui contient un titre, une vignette, un listing
   d'information détaillés et peut-être plus */
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-size: 9pt;
  padding: 0;
  margin: 0; }

#header {
  width: 100%;
  height: 80pt;
  position: relative;
  overflow: hidden;
  margin: 2em auto 1em; }
  #header > .h {
    display: block;
    font-size: 26.66667pt;
    line-height: 80pt;
    margin: 0; }
  #header #branche {
    position: absolute;
    bottom: 0; }

#contentwrapper {
  margin: 0 auto; }
  #contentwrapper div.dialog {
    position: relative;
    width: 50%;
    max-width: 40em;
    padding: 1em;
    margin: 3em auto; }

#document {
  overflow: auto;
  border-width: 1pt; }
  #document #flash {
    margin: 1em auto 2em; }

@media screen {
  html {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100%; }
  body {
    margin: 0 auto 31em;
    padding: 0;
    width: 96%;
    min-height: 100%;
    min-width: 60em;
    max-width: 124em;
    overflow-x: hidden;
    overflow-y: auto; }
    body > div {
      margin: 1ex auto; }
  #header .h {
    text-align: center;
    padding: 0 160pt; }
  #contentwrapper {
    float: right;
    width: 100%; }
  #document {
    padding: 0.9em;
    padding-top: 5em;
    margin-right: 18em;
    min-height: 40em; }
  #aside {
    float: right;
    width: 18em;
    margin: 0;
    margin-right: -100%; }
  #footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25em;
    overflow: hidden; }
    #footer #wrapper {
      margin: 0 auto;
      width: 96%;
      min-width: 50em;
      max-width: 80em;
      text-align: center; }
      #footer #wrapper div.section {
        display: inline-block;
        padding: 1ex 2em;
        margin: 0;
        vertical-align: top;
        width: 30%;
        max-width: 15em;
        text-align: left; }
      #footer #wrapper #citation {
        width: 35%;
        max-width: none; }
      #footer #wrapper #menu {
        width: 20%;
        max-width: 15em; }
      #footer #wrapper #about {
        width: 40%;
        max-width: 40em; }
      #footer #wrapper .date, #footer #wrapper .author {
        display: none; } }

@media print {
  body {
    margin: 0.5ex;
    padding: 0.5ex; }
  #contentwrapper {
    position: relative;
    top: 2em;
    width: auto;
    margin: 0 auto;
    padding: 0; }
    #contentwrapper #document > h1 {
      font-size: 250%;
      margin-bottom: 10pt; }
  #footer #about .author {
    display: block;
    position: absolute;
    top: 20pt;
    left: 0.5ex;
    margin: 0;
    padding: 0; }
  #header, #footer #citation, #footer #menu, #footer #about .h, #footer #about li, #branche, #aside, #historique {
    display: none; } }