/*
DESIGN DU SITE OFFICIEL DE Patrick DUPONT, P H O T O G R A P H E
inspir? par
<lien url="http://www.siteduzero.com">http://www.siteduzero.com</lien>
et
http://css.mammouthland.net
*/

/* ********************************************************************************************************** */
/*  TOUTES LES PAGES */
/* ********************************************************************************************************** */

body
{
   width: 950px; 
   height: auto;
   padding: 0px;
   
   background-image: url("composants_pages/fond_degrade.jpg");
   background-repeat: no-repeat;
   
   font-family: Arial, Times, "Times New Roman", serif;
   color: red;
}

#titre
 /* INDIQUE A CHAQUE PAGE DANS QUEL SUJET NOUS SOMMES*/
{
   position: absolute;
   float: left;
   top: 3px;
   left: 80px;
   width: 200px;
   height: 30px;
   
   font-family: Arial, Times, "Times New Roman", serif;
   color: rgb(70,70,70);
 }
 
#en_tete
{
   position: absolute;
   left: 0px;
   width: 1400px;
   height: 50px;

   margin-top: 30px;
   margin-left: 0px;
   
   background-image: url("composants_pages/banniere_haut.jpg");
   background-repeat: no-repeat;
}

 #retour_accueil
{
   position: absolute;
   float: right;
   width: 150px;
   left: 1130px;
   top: 25px;
   
   margin-right: 150px;
   border: none; /* Bordure du tableau */
   border-collapse: collapse; /* Colle les bordures entre elles */
 }

#pied_de_page
{
   position: absolute;
   top: 730px;
   left: 0px;
   width: 1400px;
   height: 25px;
   
   margin-top:10px;
   margin-bottom:10px;
   
   /* margin-right: 150px;*/
   /* DECALE LE TEXTE "copyright ..." plus bas dans le pied sde page;*/
   padding-top: 25px;
   
   color: rgb(100,100,100);
   font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: 9px;
   text-align: right;

   background-image: url("composants_pages/banniere_bas.jpg");
   background-repeat: no-repeat;
}

 #element_texte_retour_accueil
{
   font-family: Verdana, "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   color: white;
   text-align: left; /* Tous les textes des cellules seront centr?s*/
   padding-left: 10px;
   padding-top: 30px;
   height : 39px;
   background-color: transparent;
   border: none; /* ... auront une bordure de 1px */
}

#texte_corps
{
   position: absolute;
   left: 80px;
   top: 180px;
   float: left;
   width: 200px;
   height: 330px;
   padding: 15px;
   
   font-family: Arial, Times, "Times New Roman", serif;
   color: rgb(180,180,180);
   border: 1px solid purple;
   background-color: black;
}

a:hover /* Quand le visiteur pointe sur le lien */
{text-decoration : none; color: purple}
a /* Lien normal */
{text-decoration : none; background-color: transparent; color: white; font-style: normal}
a:active /* Quand le visiteur s?lectionne le lien ?mot-cl?: active ou focus ?*/
{text-decoration : none; color: red}

#sous_menu_texte
{
   position: absolute;
   float: right;
   width: 150px;
   left: 1130px;/*left: 1130px;*/
   top: 115px;
}

#sous_menu_texte_accueil
{
   position: absolute;
   float: right;
   width: 150px;
   left: 980px;/*left: 1130px;*/
   top: 115px;
}

img.center {   display: block;   margin-left: auto;   margin-right: auto; margin-top: auto;   margin-bottom: auto; }

#element_image_icone
{
   font-family: Verdana, "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   color: white;
   text-align: center; /* Tous les textes des cellules seront centr?s  original : left*/
   background-position: center;
   /*padding: 5px; /* Petite marge int?rieure aux cellules pour ?viter que le texte touche les bordures */
   height : 180px;
   width: 500px;
   overflow: hidden;
   border: none;
   display: block;
   }
   
#element_image_full
{            
   position: absolute;
   left: 50px;/* pour 12 images: left: 200px; pour 15images: left: 50px;*/
   top: 115px;/*top: 118px;*/
   width: 1010px;  /* pour 12 images: width: 819px; pour 15 images: width: 1010px;*/             
   height : 600px; /*  height : 610px;*/
                      
   /*padding: 5px; /* Petite marge int?rieure aux cellules pour ?viter que le texte touche les bordures */
   padding: 5px;
   border: 1px solid purple;
   background-position: center;
   
   font-family: Verdana, "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   color: white;
   text-align: center; /* Tous les textes des cellules seront centr?s*/
}

/* ********************************************************************************************************** */
/*  PAGE PAR SUJET */
/* ********************************************************************************************************** */

#menu_images_icones
/* CADRE DANS LEQUEL LES ICONES DES IMAGES SE REPARTISSENT */
{
   position: absolute;
   left: 50px;
   top: 115px;
   width: 1010px;       
   height : 600px;
   padding: 5px;
   border: 1px solid purple;
}
#image_icone
{
   float: left;
   width: 195px;
   height: 195px;
   background-position: center;
   border: 1px solid black;

   /*    MARGES A L'EXTERIEUR DES PETITS CADRES CONTENANT LES IMAGES    */
   margin-bottom: 5px;
   margin-right: 5px;
   /*background-image: none;*/
   background-repeat: no-repeat;
   overflow: hidden;
}

/* ********************************************************************************************************** */
/*  PAGE ACCUEIL */
/* ********************************************************************************************************** */
/* original pour 10 sujets :
a.A { background-image: url('accueil/tranche_sujet_01.jpg'); display: block;  height : 66px; width: 1150px}
a.A:hover { background-image: url('accueil/rollover_tranche_sujet_01.jpg')}
*/

a.A { background-image: url('accueil/tranche_sujet_01.jpg'); display: block;  height : 53px; width: 1150px}
a.A:hover { background-image: url('accueil/rollover_tranche_sujet_01.jpg')}
a.B { background-image: url('accueil/tranche_sujet_02.jpg'); display: block;  height : 53px; width: 1150px}
a.B:hover { background-image: url('accueil/rollover_tranche_sujet_02.jpg')}
a.C { background-image: url('accueil/tranche_sujet_03.jpg'); display: block;  height : 53px; width: 1150px}
a.C:hover { background-image: url('accueil/rollover_tranche_sujet_03.jpg')}
a.D { background-image: url('accueil/tranche_sujet_04.jpg'); display: block;  height : 53px; width: 1150px}
a.D:hover { background-image: url('accueil/rollover_tranche_sujet_04.jpg')}
a.E { background-image: url('accueil/tranche_sujet_05.jpg'); display: block;  height : 53px; width: 1150px}
a.E:hover { background-image: url('accueil/rollover_tranche_sujet_05.jpg')}
a.F { background-image: url('accueil/tranche_sujet_06.jpg'); display: block;  height : 53px; width: 1150px}
a.F:hover { background-image: url('accueil/rollover_tranche_sujet_06.jpg')}
a.G { background-image: url('accueil/tranche_sujet_07.jpg'); display: block;  height : 53px; width: 1150px}
a.G:hover { background-image: url('accueil/rollover_tranche_sujet_07.jpg')}
a.H { background-image: url('accueil/tranche_sujet_08.jpg'); display: block;  height : 53px; width: 1150px}
a.H:hover { background-image: url('accueil/rollover_tranche_sujet_08.jpg')}
a.I { background-image: url('accueil/tranche_sujet_09.jpg'); display: block;  height : 53px; width: 1150px}
a.I:hover { background-image: url('accueil/rollover_tranche_sujet_09.jpg')}
a.J { background-image: url('accueil/tranche_sujet_10.jpg'); display: block;  height : 53px; width: 1150px}
a.J:hover { background-image: url('accueil/rollover_tranche_sujet_10.jpg')}

#menu_texte
{
   float: right;
   width: 150px;
   position: absolute;
   
    /* original pour 8 sujets:
  	 top: 115px;*/

   top: 135px;/*top: 135px;*/
   left: 700px;/*left: 850px;*/

  /* border-top: 10px;*/
   margin-right: 150px;
   border: 1px solid purple; /* Bordure du tableau */
   border-collapse: collapse; /* Colle les bordures entre elles */
}

#element_texte
{
   font-family: Verdana, "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   color: white;
   text-align: left; /* Tous les textes des cellules seront centr?s*/
   padding-left: 10px; /* Petite marge int?rieure aux cellules pour ?viter que le texte touche les bordures */
   /* original pour 8 sujets:
  	padding-top: 25px;
   	height : 39px;
    */
   
   padding-top: 15px;
   height : 36px;
   background-color: transparent;
   border: 1px solid purple; /* ... auront une bordure de 1px */
}

#menu_images_accueil
{
   position: absolute;
   width: 1150px;
   left: 80px;
   top: 115px;/*top: 128px;*/
               
   margin-right: 150px;
   border: 1px solid black; /* Bordure du tableau initialement ? 3 px*/
   border-collapse: collapse; /* Colle les bordures entre elles */
   overflow: hidden;
}

/* ********************************************************************************************************** */
/*  PAGE CONTACT */
/* ********************************************************************************************************** */
#situation
 /* CARTE DU CENTRE DE LAUSANNE */
{
   position: absolute;
   left: 190px;/* 220px*/
   top: 120px;/* 140px*/
   width: 600px;
   height: 300px;  
}

#situation_detail
 /* CARTE DE LA RUE DU VALENTIN */
{
   position: absolute;
   left: 680px;
   top: 280px;
   width: 313px;
   height: 390px;
   border: 3px solid red;
}

/* ********************************************************************************************************** */
/*  AVERTISSEMENT - EN CONSTRUCTION
/* ********************************************************************************************************** */
#avertissement
/* INDIQUE QUE LE SITE OU QUELQUES PAGES SONT EN CONSTRUCTION */
{
   position: absolute;
   left: 120px;
   top: 180px;
   float: left;
   width: 180px;
   height: 150px;
   
   font-family: Arial, Times, "Times New Roman", serif;
   color: yellow;
   border: 2px solid red;
   background-color: black;
   padding: 15px;/* Petite marge int?rieure aux cellules pour ?viter que le texte touche les bordures */
   text-decoration: blink;
}