/*-------------------------------------------------------------------------------------*/
/* Site Juggers Sécurité SA */
/* Feuille de styles principale */
/* Réalisation : Fabien Hamel
/* Dernière modification : 17.08.2006 */
/*-------------------------------------------------------------------------------------*/

<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1"> 

<style type="text/css">

/*-------------------------------------------------------------------------------------*/
/* Modification des paramètres par défaut. */
/* Cela concerne les balises standards en HTML : titres, paragraphes, tableaux, etc. */
/*-------------------------------------------------------------------------------------*/

{}

body   /* Le corps principal, comprenant l'ensemble de la page. Toutes les autres balises héritent de ses propriétés. */
   {
  margin: 0px;   /* Marge extérieure, en pixels (par défaut) */
  padding: 20px 8% 20px 8%;   /* Marge intérieure */
  background: #333333;   /* Couleur du fond : gris foncé */
  color: #333333;   /* Couleur du texte : gris foncé */
  font-family: Verdana, Arial, Georgia, sans-serif;  /* Polices d'affichage, par ordre de préférence. Prévues pour une visualisation à l'écran */
   }

h1   /* Titre de niveau 1 */
   {
  font-size: 3em;
  font-weight: bold;   /* Les caractères sont en gras */
  font-variant: small-caps;   /* Petites majuscules */
  text-align: center;   /* Alignement du texte au centre */
  margin: 0px;
  margin-top: 50px;
  margin-bottom: 50px;
   }

h2   /* Titre de niveau 2 */
   {
  font-size: 1.6em;
  font-weight: bold;
  font-variant: small-caps;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: solid 2px #333333;
  border-bottom: solid 2px #333333;
  margin: 0px;
  margin-bottom: 30px;
   }

h3
   {
  font-size: 1.1em;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: solid 1px #333333;
  border-bottom: solid 1px #333333;
  margin-top: 40px;
  margin-bottom: 40px;
   }

h4
   {
  font-size: 0.9em;
  font-weight: bold;
  font-style: underline;
  margin: 0px;
  padding: 0px;
   } 

p   /* Paragraphe, autrement dit le texte courant */
   {
   }

p a:link   /* La balise <a> désigne un lien. Dans ce cas, cela concerne uniquement les liens compris à l'intérieur d'un paragraphe (balise <p>) */
   {
  color: blue;
  text-decoration: underline;
   }


p a:visited   /* Style des liens (compris dans un paragraphe), une fois déjà visités */
   {
  color: purple;
  text-decoration: underline;
   }

p a:hover   /* Idem, mais lorsque la souris passe par-dessus. Le fait de déclarer ce style APRES le précédent, lui donne la priorité en cas de conflit */
   {
  color: red;
  text-decoration:none;
   }

table   /* Style des tableaux */
   {
  text-align: center;
  border-collapse: collapse;
  margin-bottom: 20px;
   }

td  /* Style des cellules d'un tableau */
   {
  margin: 0px;
  padding: 1px;
   }

td p  /* Style des paragraphes, intégrés à une cellule d'un tableau */
   {
  padding-top: 8px;
  padding-bottom: 2px;
  margin: 0px;
   }

th   /* Style des cellules de titre d'un tableau */
   {
  font-size: 1.1em;
  font-weight: bold;
  border-bottom: 2px solid #808080;
  background-color: #B0B0B0;
   }

img   /* Style des images */
   {
  border: 0px;
   }

form   /* Style des formulaires */
   {
  margin: 0px;
  padding: 0px;
   }

/*-------------------------------------------------------------------------------------*/
/* Définition des blocs principaux : centre, en-tête, pied de page, etc. (spécifiques pour le site) */
/*-------------------------------------------------------------------------------------*/

/* Le "#" avant un nom de variable désigne un identifiant, le "." une classe */
/* Ils ont pratiquement la même fonction, mais un identifiant ne peut être utilisé qu'une seule fois par page */

#accueil
   {
  width: 100%;
  height: 685px;
  background: #FFFFFF;
  background-image: url(../Images/fond.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-position: middle;
   }

#logo_Juggers
   {
  width: 100%;
  height: 100%;
  background-image: url(../Images/logo_Juggers.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-position: middle;
   }

#haut_page
   {
  margin: 10px;
  padding: 5px;
  background: #D4EEFB;   /* Cette couleur correspond à un bleu pâle */
  text-align: center;
   }

#centre_page
   {
  clear: both;
  margin: 10px;
  padding: 10px;
  background: #FFFFFF;
   }

#bas_page
   {
  clear: both;
  margin: 10px;
  padding: 9px;
  background: #D4EEFB;
  text-align: center;
   }

#bas_page p
   {
  font-size: 0.9em;
  font-style: italic;
  margin: 1px;
   }

#contenu /* C'est dans un bloc avec ce style, que viendra s'insérer le contenu du site (textes, images, liens, etc.) */
   {
  padding: 10px;
  padding-left: 129px;
  border-left: 3px solid #808080;
  background-image: url(../Images/fond.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-position: top;
   }

/*-------------------------------------------------------------------------------------*/
/* Définitions des classes spécifiques au site */
/* Le but est soit d'éviter les lourdeurs dans le code, soit de faciliter les changements ultérieurs */
/*-------------------------------------------------------------------------------------*/

.partie_formulaire
   {
  clear: both;
  margin: 10px;
  padding: 20px;
  background: #FFFFFF;
   }

.partie_formulaire table
   {
  width: 100%;
   }

.centre
   {
  text-align: center; 
  margin: auto;
   }

.date
   {
  font-style: italic;
  font-weight: bold;
   }

.bordure
   {
  border-top: 3px solid #606060;
  border-bottom: 3px solid #C0C0C0;
  border-left: 3px solid #808080;
  border-right: 3px solid #A0A0A0;
   }

.rubrique
   {
  text-align: left;
   }

.illustration
   {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
   }

.explication
   {
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 0px;
  font-style: italic;
  font-size: 0.9em;
  background: #E0E0E0;
  border: 1px solid #C0C0C0;
   }

.bas
   {
  border-bottom: 1px solid #808080;
   }

.droite
   {
  border-right: 1px solid #808080;
   }

.note
   {
  font-style: italic;
  font-size: 0.9em;
  margin-left: 10px;
   }

/*-------------------------------------------------------------------------------------*/
/* Définition des éléments et des spécificité du menu  */
/*-------------------------------------------------------------------------------------*/

#menu
   {
  margin-top: 10px;
/*  margin-left: -17px;   La marge négative indique que le menu sortira du bloc dans lequel il est contenu */
  float: left;   /* le menu sera situé sur la gauche */
   }

#menu ul   /* Le menu sera composé d'une liste à puces */
   {
  width: 146px;
  padding: 0px;
  margin: 0px;
  border-top: 2px solid #606060;
  border-bottom: 2px solid #C0C0C0;
  border-left: 2px solid #808080;
  border-right: 2px solid #A0A0A0;
  font-weight: bold;
  font-style: italic;
  font-size: 0.8em;
   }

#menu ul li   /* Chaque ligne de cette liste aura ce style */
   {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border-top: 1px solid #606060;
  border-bottom: 1px solid #C0C0C0;
  border-left: 1px solid #808080;
  border-right: 1px solid #A0A0A0;
   }

#menu ul li a    /* Chaque ligne comprendra un lien (balise <a>) */
   {
  display: block;
  padding: 4px;
  border: 0px;
  border-left: 20px solid #C0C0C0;
  background: #FFFFFF;
  color: #333333;
  text-decoration: none;
  text-align: right;
   }

#menu ul li a:hover   /* Ce lien changera de style, s'il est survolé par le curseur de la souris */
   {
  color: #FFFFFF;
  background: #333333;
  border-left: 20px solid red;
   }

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

</style>