/* CSS du site des ELFIC, version 3
Louen, M4urice et widget, mars 2008
D'après http://www.alistapart.com/articles/holygrail */


/* --------------------------------------------------------
   Structure de base de la page (mise en place des colonnes)
   Largeurs courantes des colonnes (width, padding, fullwidth)
   LC (menu)    : 200 10 220
   CC (contenu) : "fluide" 20 N/A
   RC (news)    : 219 10 239
*/

body {
  min-width: 719px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}

#container {
  padding-left: 220px;   /* LC fullwidth */
  padding-right: 279px;  /* RC fullwidth + CC padding */
}

#container .column {
  position: relative;
  float: left;
}

#contenu {
  padding: 0 20px;    /* CC padding */
  width: 100%;
}

#menu {
  width: 200px;          /* LC width */
  padding: 60px 10px;       /* LC padding */
  right: 260px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}

#news { /* On positionne aussi le texte dans son cadre */
  height: 131px;
  width: 158px;          /* RC width */
  padding: 224px 66px 84px 15px;       /* RC padding */
  margin-right: -279px;  /* RC fullwidth + CC padding */
}

#footer {
  clear: both;
  padding-top: 30px;
  }

/* -------------------------------------------------------- */


/* --------------------------------------------------------
   Autres données de style
*/

body { /* Fond de la page et propriétés "universelles" */
  padding: 0;
  margin: 0;
  background-image: url("images/design/fond/fond.png");
  background-color: #E1E8F4; /*la couleur du fond, à accorder avec l'image fond.png*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom right;
  font-family: "Georgia", "Times New Roman", "Serif";
}

a { /* Liens */
  color: #1c7b38;
  text-decoration: none;
}

a:hover, #news a:hover {
  color: #5b0000;
}


/*images de fond diverses*/

#root { /* On met en place la colonne qui se répète */
  background-image: url("images/design/fond/colonne-element.gif");
  background-repeat: repeat-y;
  background-position: right 358px;
}

#header { /* On met comme fond la planche qui se répète */
  width: 100%;
  height: 238px; /* Ce div a la hauteur des images qu'on affiche dans l'en-tête */
  margin-bottom: -50px;
  background-image: url("images/design/fond/header-element.png");
  background-repeat: repeat-x;
  background-position: 999px top; /* La position par rapport au bord gauche est définie par la largeur de l'image de l'en-tête */
}

#connect { /* Positionnement de la barre de login */
  position: absolute;
  left: 350px;
  top: 137px;
}

span.connect { /* on met des marges aux spans de la barre de login pour que les différents liens soient bien écartés les uns des autres */
  margin-right: 4em;
}

.red { /* permet de mettre du texte en rouge */
  color: #ff0000;
}

.underline { /* permet de mettre du texte souligné */
  text-decoration: underline;
}

#contenu {
  font-size: small;
}

#contenu h1 { /* Réglage du titre de niveau 1, qui est dans un espace réduit puisqu'il se trouve en haut de la page */
  margin-left: 30px;
  font-variant: small-caps;
}

#contenu p, #contenu ul { /* Mise en forme des paragraphes de contenu */
  text-align: justify;
}

#contenu p.adresse {
  font-style: italic;
}

#contenu table, #contenu table td, #contenu table th { /* Bordures des tableaux */
  border-style: solid;
  border-color:  #afc7b6;
  border-width: 1px;
  margin: 0px;
}

#contenu table td, #contenu table th {
  padding-left: 0.2em;
  padding-right: 0.2em;
}

#contenu table.noborder, #contenu table.noborder td, #contenu table.noborder th {
  border-style: none;
}

/*gestion des images */

.imageflottante_gauche {
  float: left;
  margin: 1em;
}

.imageflottante_droite {
  float: right;
  margin: 1em;
}

/*photos des ELFIC*/

#nav_photo {
  width : 100%;
}

#photo_prec {
  float : left ;
  padding : 5px ;
  margin : 2px ;
  border : 1px #1c7b38 solid ;
}

#photo_suiv {
  float : right ;
  padding : 5px ;
  margin : 2px ;
  border : 1px #1c7b38 solid ;
}


#footer_photo {
  clear : both;
}

#footer_photo p {
  text-align : center;
}


#menu ul { /* On supprime les puces des listes de la barre de menu */
  list-style: none;
  padding: 0px;
  margin: 0px;
}

#menu img { /* Mise en forme des images qui constituent les boutons du menu */
  display: block;
  margin: 0px;
  border : 0px;
  padding: 0px;
  margin-left: 10px;
}

#news { /* On met en place le chapiteau de la colonne de droite */
  background-image: url("images/design/fond/colonne-haut.png");
  background-position: top right;
  background-repeat: no-repeat;
  margin-top: -17px; /* Décale la colonne vers le haut pour que le chapiteau 
                        soit bien jointif avec l'image du header */
}

#news ul { /* On supprime les puces des listes dans le cadre de news et on limite sa taille */
  list-style: none;
  padding: 0px;
  margin: 0px;
  height: 131px;
  overflow: hidden; /* On fait en sorte que le texte qui sort du cadre soit caché */
}

#news ul li{ /* interligne pour les items des news */
  margin-bottom: 5px
}

#news a { /* Liens de la colonne de news */
  color: #0031b9;
}

#footer {
  text-align: center;
}

#footer img { /* Suppression des vilains cadres autour des images liens */
  margin: 0px;
  border : 0px;
  padding: 0px;
}

/* -------------------------------------------------------- */

/* --------------------------------------------------------
   Hacks et corrections pour IE
*/


* html #menu { /*** Positionnement des colonnes, IE6 ***/
  left: 239px;           /* RC fullwidth */
}

#container > #menu { /*** Positionnement des colonnes, IE7 ***/
  left: -260px;             /* -(LC fullwidth + CC padding) */
  margin-left: expression(document.all.contenu.offsetWidth * -1);
}

#menu ul { /* Supression des espaces entre les boutons du menu */
  line-height: 0px;
}

* html #news {
  margin-top: -21px; /* Position de la colonne de news pour qu'elle soit collée à l'en-tête sous IE6 */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/design/fond/colonne-haut.png', sizingMethod='scale'); /* Gestion du PNG transparent du chapiteau de la colonne sous IE6 */
  background-image: none;
}