/*
   Style de base des pages web du Laboratoire d'Informatique Fondamentale de
   Lille.

   Copyright (C) 2004 Bruno Beaufils & Jean-Marc Talbot

   Les attributs sont toujours cites dans le meme ordre que voici :

   display
   alignement
   position
   taille
   padding
   margin
   bordures
   couleurs
   listes
   fontes
   textes
 */

@media screen
{
  /**************************************************************************/
  /* Le corps */
  /**************************************************************************/
  body {
    width:100%;
    padding:0;
    margin:0;
    background:repeat-y;
    background-color:white;
    font-family:sans-serif;
    font-size:12px;
  }
  body#base,
  body#annuaire,
  body#contact,
  body#acces,
  body#plan,
  body#mentions_legales {
    background-image:url(/~beaufils/test/lifl/images/fond.jpg);
  }
  body#presentation {
    background-image:url(/~beaufils/test/lifl/presentation/images/fond.jpg);
  }
  body#equipes {
    background-image:url(/~beaufils/test/lifl/equipes/images/fond.jpg);
  }
  body#formations {
    background-image:url(/~beaufils/test/lifl/formations/images/fond.jpg);
  }
  body#recrutement {
    background-image:url(/~beaufils/test/lifl/recrutement/images/fond.jpg);
  }
  body#evenements {
    background-image:url(/~beaufils/test/lifl/evenements/images/fond.jpg);
  }
  body#intranet {
    background-image:url(/~beaufils/test/lifl/intranet/images/fond.jpg);
  }

  /**************************************************************************/
  /* Styles generaux applicables partout */
  /**************************************************************************/
  a:hover {
    background-color:silver;
  }
  a:active, a:link, a:visited {
    color:navy;
    font-style:italic;
    text-decoration:none;
  }
  .warning {
    margin:10px;
    color:red;
    text-align:center;
    font-weight:bold;
    font-size:14px;
    font-style:italic;
  }

  /**************************************************************************/
  /* Le contenu */
  /**************************************************************************/
  div#contenu {
    position:fixed;
    overflow:auto;
    top:170px;
    bottom:55px;
    width:90%;
    padding:1em;
    margin-left:175px;
    text-align:justify;
  }
  div#contenu h1 {
    margin-top:0.2em;
    font-size:18px;
    text-align:left;
  }
  div#contenu h2 {
    margin-top:0.2em;
    font-size:16px;
    text-align:left;
  }
  div#contenu h3 {
    margin-top:0.2em;
    font-size:14px;
    text-align:left;
  }

  /**************************************************************************/
  /* Menu de gauche */
  /**************************************************************************/
  div#menu_gauche {
    border:thin solid red;
    border-width:0;
    position:fixed;
    overflow:auto;
    top:216px;
    left:5px;
    bottom:40px;
    width:10%;
    padding:0;
    margin:0;
  }
/*  div#menu_gauche h1 {
    display:block;
    width:150px;
    padding:0;
    margin:0;
    margin-top:5px;
    margin-left:5px;
    border-width:0;
    color:navy;
    text-align:left;
    font-size:14px;
  }*/
  div#menu_gauche h1 {
    display:block;
    width:150px;
    margin:0;
    padding:0;
    margin-top:5px;
    margin-bottom:5px;
    border-width:0;
    color:navy;
    font-size:12px;
    font-style:italic;
    text-align:right;
  }
  div#menu_gauche ul {
    display:block;
    padding:0;
    margin:0;
    width:155px;
    border-width:0;
    list-style-type:none;
  }
  div#menu_gauche ul li {
    display:block;
    vertical-align:middle;
    padding:0;
    padding-right:16px;
    margin:0;
    margin-top:4px;
    margin-bottom:4px;
    border-width:0;
    background-repeat:no-repeat;
    background-position:100% 0px;
    font-size:11px;
    text-align:right;
  }
  body#base div#menu_gauche ul li,
  body#annuaire div#menu_gauche ul li,
  body#contact div#menu_gauche ul li,
  body#acces div#menu_gauche ul li,
  body#plan div#menu_gauche ul li,
  body#mentions_legales div#menu_gauche ul li
  {
    background-image:url(/~beaufils/test/lifl/images/points/presentation.png);
  }
  body#presentation div#menu_gauche ul li {
    background-image:url(/~beaufils/test/lifl/images/points/presentation.png);
  }
  body#equipes div#menu_gauche ul li {
    background-image:url(/~beaufils/test/lifl/images/points/equipes.png);
  }
  body#formations div#menu_gauche ul li {
    background-image:url(/~beaufils/test/lifl/images/points/formations.png);
  }
  body#recrutement div#menu_gauche ul li {
    background-image:url(/~beaufils/test/lifl/images/points/recrutement.png);
  }
  body#evenements div#menu_gauche ul li {
    background-image:url(/~beaufils/test/lifl/images/points/evenements.png);
  }
  body#intranet div#menu_gauche ul li {
    background-image:url(/~beaufils/test/lifl/images/points/intranet.png);
  }

  /**************************************************************************/
  /* La boite a outils */
  /**************************************************************************/
  div#menu_outils {
    position:fixed;
    top:116px;
    left:29px;
    padding:2px;
    border-width:2px;
    border-style:ridge;
    border-color:#13BEDA;
  }
  div#menu_outils ul {
    padding:0;
    margin:0;
    list-style-type:none;
  }
  div#menu_outils ul li {
    padding:0;
    padding-left:18px;
    margin:0;
    margin-top:2px;
    margin-bottom:2px;
    background-repeat:no-repeat;
    background-position:2px 0px;
  }
  div#menu_outils ul li a {
    display:block;
    vertical-align:middle;
    width:80px;
    padding:1px;
    margin:3px;
    border-width:1px;
    border-style:solid;
    border-color:#13BEDA;
    color:#13BEDA;
    background-color:white;
    font-size:10px;
    font-weight:bold;
    font-style:normal;
    text-align:left;
  }
  div#menu_outils ul li a:hover{
    color:white;
    background-color:#13BEDA;
  }
  li#annuaire {
    background-image:url(/~beaufils/test/lifl/images/pictos/annuaire.jpg);
  }
  li#contact {
    background-image:url(/~beaufils/test/lifl/images/pictos/contact.jpg);
  }
  li#acces {
    background-image:url(/~beaufils/test/lifl/images/pictos/acces.jpg);
  }
  li#plan {
    background-image:url(/~beaufils/test/lifl/images/pictos/plan.jpg);
  }

  /**************************************************************************/
  /* Le logo */
  /**************************************************************************/
  div#logo {
    position:fixed;
    top:0;
    left:0;
    width:150px;
    height:106px;
    padding:0;
    margin:0;
    border-width:0;
    background-color:white;
    text-align:center;
  }
  div#logo a {
    width:134px;
    height:106px;
    border-width:0px;
    padding:0px;
    margin:0px;
  }
  div#logo a img{
    width:134px;
    height:106px;
    border-width:0px;
    padding:0px;
    margin:0px;
  }

  /**************************************************************************/
  /* Menu du haut (bandeau) */
  /**************************************************************************/
  /* Les bandeaux font 658x130 */
  div#menu_haut {
    position:fixed;
    top:0px;
    left:150px;
    width:658px;
    height:167px;
    padding:0;
    margin:0;
    background-color:white;
  }
  div#menu_haut img {
    border:0;
  }
  div#menu_haut ul {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    list-style-type:none;
  }
  div#menu_haut ul li {
    display:block;
    position:absolute;
    text-align:center;
  }
  li#presentation {
    top:130px;
    left:18px;
    width:100px;
  }
  li#equipes {
    top:124px;
    left:120px;
    width:100px;
  }
  li#formations {
    top:117px;
    left:215px;
    width:110px;
  }
  li#recrutement {
    top:103px;
    left:320px;
    width:100px;
  }
  li#evenements {
    top:86px;
    left:410px;
    width:100px;
  }
  li#intranet {
    top:60px;
    left:498px;
    width:100px;
  }
  li#drapeau {
    bottom:99px;
    right:10px;
    width:35px;
    height:28px;
  }

  /**************************************************************************/
  /* Le pied de page */
  /**************************************************************************/
  div#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:36px;
    padding:0;
    margin:0;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:black;
    background-color:white;
    font-size:10px;
    text-align:center;
  }
  div#footer a img {
    height:20px;
    border:0px;
    vertical-align:middle;
  }
}