scratch/content/css/layout.css

-----

-----

// /*
//  La dedans, seulement ce qui concerne le layout
//  La largeur, la hauteur des objets. S'ils sont en float
//  Les marges, le padding...
//
//  En particulier, il n'y a rien relatif à la couleur ou aux fontes
//  ni aux background image.
//  Rien relatif aux border non plus.
//

$VPadCorps: 3em
$HPadCorps: 5em
$VMarginCorps: 3em

// ATTENTION DOIT ETRE 0 pour le bon callage
$HMarginCorps: 0
$content_width: 52em

body
  text-align: center
  font-size: 1em

// /* l'entete
#entete
  position: relative
  left: 0
  top: .5em
  width: 100%
  min-width: $content_width - 2em
  z-index: 2000
  padding-bottom: 1em
  margin-bottom: $VMarginCorps

.corps_spaced
  margin-bottom: $VMarginCorps
  margin-top: $VMarginCorps

#titre h2
  width: 80%
  margin-left: auto
  margin-right: auto
  text-align: center

#titre
  text-align: center
  width: 100%
  margin-top: $VMarginCorps
  margin-bottom: $VMarginCorps

#titre h1, #titre h2
  padding-left: 1em
  padding-right: 1em

// /* le pied de page
#bottom
  clear: right
  margin-right: 0px
  text-align: right
  width: 45%
  margin-top: 0px
  padding: 5px
  float: right

// Les menus

#sousliens
  padding: 1em 0
  line-height: 2em

ul.horizontal li
  display: inline
  font-size: 0.9em

ul.horizontal
  margin-top: 0px
  margin-bottom: 0px

#liens
  width: 100%
  padding: 0
  clear: both
  margin-top: 1em

#liens ul
  width: 100%
  clear: both
  padding: 0
  margin: 0

$hauteur_menu: 2em

#liens ul li
  display: inline-block
  height: $hauteur_menu
  margin-left: 0.2em
  margin-right: 0.2em
  width: 23%

#liens ul li a,
#liens ul li span
  width: 100%
  display: block
  line-height: $hauteur_menu

// Un 'helper'
.clear
  clear: both

// Le Contenu
#content
  margin-left: auto
  margin-right: auto
  margin-top: 0
  position: relative
  padding-bottom: 10px
  width: $content_width
  top: -1em
  clear: both

$contentMargin: 0em

.encadre, .black, .red, .intro, .resume, .shadow
  padding:
    left: 2em
    right: 2em
  margin:
    top: 2em
    bottom: 2em

#afterheader
  padding-left: $contentMargin
  padding-right: $contentMargin

#sousliens
  width: 100%
  margin-left: auto
  margin-right: auto
  margin:
    top: $VMarginCorps
    bottom: $VMarginCorps
  font-size: 1.2em
  letter-spacing: 1px
  text-align: left
  clear: both

.corps
  text-align: left
  padding: $VPadCorps $HPadCorps
  margin: $VMarginCorps $HMarginCorps
  clear: both

.twilight
  line-height: 1.1em

.corps h1
  width: 90%

.corps h2
  width: 80%

.corps h3
  width: 70%

.corps h4
  width: 60%

.corps h1,
.corps h2,
.corps h3,
.corps h4
  padding-top: 5px
  padding-bottom: 5px
  clear: both
  text-align: center

// /* on decale les titres pour qu'ils touchent le bord
$fonth1: 2em
$fonth2: 1.6em
$fonth3: 1.25em
$fonth4: 1em

$htopbottommargin: 2em

.corps h1
  margin:
    bottom: #{$htopbottommargin / $fonth1}em
    top: #{$htopbottommargin / $fonth1}em

.corps h2
  margin:
    bottom: #{$htopbottommargin / $fonth2}em
    top: #{$htopbottommargin / $fonth2}em

.corps h3
  margin:
    bottom: #{$htopbottommargin / $fonth3}em
    top: #{$htopbottommargin / $fonth3}em

.corps h4
  margin:
    bottom: #{1em / $fonth4}em
    top: #{1em / $fonth4}em

.corps h1,
.corps h2,
.corps h3,
.corps h4
  position: relative
  margin:
    left: 0px

.corps h1
  left: #{-$HPadCorps / $fonth1}em

.corps h2
  left: #{-$HPadCorps / $fonth2}em

.corps h3
  left: #{-$HPadCorps / $fonth3}em

.corps h4
  left: #{-$HPadCorps / $fonth4}em

$fontcorps: 1.25

.corps
  font-size: #{$fontcorps}em

.corps h1
  font-size: $fonth1

.corps h2
  font-size: $fonth2

.corps h3
  font-size: $fonth3

.corps h4
  font-size: $fonth4

$corps_width: ($content_width - 2 * $contentMargin) / $fontcorps
$hpadding: 1

.corps h1,
.corps h2,
.corps h3,
.corps h4
  padding: 0 #{$hpadding}em

.corps h1.first,
.corps h2.first,
.corps h3.first,
.corps h4.first
  padding: 1em #{$hpadding}em
  margin:
    top: 0
    bottom: 0

.corps h1.first
  top: #{-$VPadCorps / $fonth1}em
  width: #{$corps_width / $fonth1 - 2 * $hpadding}em

.corps h2.first
  top: #{-$VPadCorps / $fonth2}em
  width: #{$corps_width / $fonth2 - 2 * $hpadding}em

.corps h3.first
  top: #{-$VPadCorps / $fonth3}em
  width: #{$corps_width / $fonth3 - 2 * $hpadding}em

.corps h4.first
  top: #{-$VPadCorps / $fonth4}em
  width: #{$corps_width / $fonth4 - 2 * $hpadding}em

.corps img
  max-width: 30em

//  les clear

#address
  clear: both

.definitionCell
  width: 5em
  vertical-align: top
  font-weight: bold
  text-align: center

.valueCell
  text-align: right

.smallblock
  float: left
  width: 50%
  font-size: 1em
  font-weight: bold

.largeblock
  float: right
  width: 70%
  font-size: 1em

#blackpage, #nojsredirect
  top: 0
  left: 0
  width: 100%
  height: 100%
  margin-left: 0
  margin-right: 0
  margin-top: 0
  margin-bottom: 0
  position: absolute
  text-align: center

#blackpage
  color: #666666
  padding-top: 10em
  background-color: #eeeeee
  z-index: 9000
  cursor: wait
  img
    background: none
    border: none
  a
    cursor: pointer

#nojsredirect
  z-index: 9001

.nojsbutton
  width: 50%
  padding: 1em
  border: solid 3px white
  margin-left: auto
  margin-right: auto
  margin-top: 2em
  z-index: 9002

.file
  font-size: 0.8em
  text-align: right
  float: right
  width: 80%
  margin-right: 0.3em

.flush
  clear: both

table.description
  border-spacing: 5px
  border-collapse: separate
  margin-right: auto
  margin-left: auto

table.description tr td
  padding-left: 0.5em
  padding-right: 0.5em
  padding-top: 0.5ex
  padding-bottom: 0.5ex
  vertical-align: middle
  margin-right: 5px

ul.long li
  margin-bottom: 1em

img
  display: block
  margin-left: auto
  margin-right: auto

img.left
  float: left
  max-width: 30%
  margin:
    right: 1em

img.inside
  display: inline
  vertical-align: middle

pre
  overflow: hidden

.withfile pre
  overflow: hidden
  width: 96.6%

.navigationprev, .navigationnext
  padding: 0px
  margin-left: 0.2em
  margin-right: 0.2em
  margin-bottom: 0
  margin-top: $VMarginCorps
  width: 45%

.navigation .navigationprev,
.navigation .navigationnext
  width: 30%
  margin-top: 0

.navigation
  font-size: 2em

.presarticleleft,
.presarticleright
  font-size: 1em

.navigationprev
  float: left
  text-align: left

.navigationnext
  float: right
  text-align: right

.impact, .darkimpact
  text-align: left
  width: 66%
  padding-left: 0.25em
  padding-right: 0.25em

table.impact
  text-align: left

table.impact tr td
  padding-left: 0.25em
  padding-right: 0.25em

#liens
  font-size: 1.5em

#iemessage
  font-size: 1.5em

.tag
  display: inline
  cursor: pointer
  margin-left: 0.5em
  margin-right: 0.5em

.list
  margin-top: $VPadCorps

#menuMessage
  font:
    size: 1.2em
  line:
    height: 1.5em
  width: 100%
  text-align: center

#choixrss
  float: right
  width: 25%

#choix
  text-align: left
  font-size: 1.2em

.date
  font-size: 0.8em

.date, .date .year, .date .month, .date .year
  display: block

#next_before_articles
  clear: both
  width: 100%
  font-size: 1.2em
  padding:
    top: 1em
    bottom: 1em

#previous_articles
  float: left
  margin-left: 1em
  width: 45%
  text-align: left

#next_articles
  float: right
  width: 45%
  margin-right: 1em
  text-align: right

#choixlang
  margin-left: 0
  padding-left: 0
#choixlang a,
#clickcomment
  padding: .1em 1em

#clickcomment
  margin-left: 0
  width: 25%

#rss
  text-align: center
  display: block
  width: 100%
  float: right
  padding: .1em 1em


.return a
  line-height: 1.5em
  text-align: center
  font-size: 1.5em
  height: 1.5em
  float: right
  padding: .1em

.corps .return a
  float: left
  font-size: 2em
  margin-top: -0.5em
  margin-left: -2em

.footnotes
  font-size: 0.8em

.fontnotes ol
  margin-left: 0

#whatsthis
  font-size: .8em
  font-weight: normal
  text-align: center