/*
   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;
    color:black;
    font-family:sans-serif;
    font-size:12px;
  }

  /**************************************************************************/
  /* 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:150px;
    bottom:55px;
    width:666px;
    padding:2em;
    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;
  }
blockquote.resume {display:none;}

*.cliquable {
     cursor:pointer;
    }

}

  /**************************************************************************/
  /* Menu de gauche */
  /**************************************************************************/
  div#menu_gauche { 
    border-width:0;
    position:fixed;
    overflow:auto;
    top:226px;
    left:5px;
    bottom:40px;
    width:165px;
    padding:0;
    margin:0;
  }
  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;
  }

  /**************************************************************************/
  /* 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;
    overflow: hidden;
    vertical-align:middle;
    width:80px;
    height : 13px; 
    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#outil_annuaire { 
    background-image:url(/digitalAssets/0/188_annuaire.jpg);
  }
  li#outil_contact { 
    background-image:url(/digitalAssets/0/189_contact.jpg);
  }
  li#outil_acces { 
    background-image:url(/digitalAssets/0/187_acces.jpg);
  }
  li#outil_plan { 
    background-image:url(/digitalAssets/0/190_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 { 
    display:block;
    width:150px;
    height:106px;
    border-width:0px;
    padding:0px;
    margin:0px;
    background-color:white;
  }
  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;
  }

  body#presentation * li#bandeau_presentation{
  font-weight:bold;
  }

/*  li#bandeau_presentation {*/
  li#bandeau1 {
    top:110px;
    left:18px;
    width:100px;
  }

  body#equipes * li#bandeau_equipes{
  font-weight:bold;
  }

/*  li#bandeau_equipes { */
  li#bandeau2 {
    top:104px;
    left:120px;
    width:100px;
  }

  body#formations * li#bandeau_formations{
  font-weight:bold;
  }

/*  li#bandeau_formations { */
  li#bandeau3 {
    top:97px;
    left:215px;
    width:110px;
  }

  body#recrutement * li#bandeau_recrutement{
  font-weight:bold;
  }

/*  li#bandeau_recrutement {*/
  li#bandeau4 {
    top:87px;
    left:320px;
    width:100px;
  }

  body#evenements * li#bandeau_evenements{
  font-weight:bold;
  }

/*  li#bandeau_evenements { */
  li#bandeau5 {
    top:70px;
    left:410px;
    width:100px;
  }

  body#preintranet * li#bandeau_intranet{
  font-weight:bold;
  }

/*  li#bandeau_intranet { */
  li#bandeau6 {
    top:48px;
    left:498px;
    width:100px;
  }
  li#bandeau_drapeau { 
    bottom:119px;
    right:10px;
    width:35px;
    height:28px;
  }
  li#bandeau_drapeau a { 
    display:block;
    width:35px;
    height:28px;
    border:thin solid black;
  }

  /**************************************************************************/
  /* Le pied de page */
  /**************************************************************************/
  div#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;
    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;
  }
}


  /**************************************************************************/
  /* style pour média d'impression
  /**************************************************************************/


@media print {
  div#menu_gauche, div#menu_outils, div#logo, div#menu_haut { display: none; }

  div#contenu { position: static; 
                top:0; 
                left:0; 
                width: 100%; 
                margin: 1em;}

  div#footer {
    width:100%;
    height:50px;
    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;
  }

}