/* http://dreamweaver.media-box.net/index.php?showtopic=12050    Redirection en fonction resolution CSS*/

body { 
	background-color: #fff;
	width: 985px;    /* 760 */
	margin: auto; /* Pour centrer notre page */
	margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 10px;    /* Idem pour le bas du navigateur */ 
	font: 14px Verdana, Arial, sans-serif;	}

#page{  
	position: absolute;
	background-color:#BFCFFF; }

#en_tete {  /* La photo du haut */

    background: url("../photos/divers/bandeau-indo.jpg") center;
    background-repeat: no-repeat;	
    width: 985px;   /* 760 */
    height: 92px; 
    margin-bottom: 0px; 
	margin-left:3px;	
	padding:0px}

#en_tete a{text-decoration:none}
#en_tete a:visited {text-decoration:none}

.tabheader { width: 980px; height: 80px }

#banniere {  
    margin: 0px;	
	padding:0px;
	vertical-align:baseline }

#banniere a:visited {text-decoration:none}


/* ======================================================================================================================== */  
/*                                                          MENUS                                                           */   
/* ======================================================================================================================== */  

#menu {
	position:absolute;
	left: 0px;
    width: 160px; /* Très important : donner une taille au menu */
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 15px;
	padding-left: 5px;
	margin: 0px	}

#menu ul{
	padding: 0px;
	margin: 0px;
	text-align: center;	}
	
#menu li {
	list-style-type: none;
	line-height: 20px;
	border: 1px solid gray;	
	font-weight: bold;
	background-color: #FFFF00;	
	margin: 4px 0;
	margin-left:0px	}

#menu a {
	color:#1F337B;
    text-decoration:none; }

#menu a:hover /* Quand on pointe sur un lien du menu */{
    background-color: #FFFF00 ;
	color: #1F337B}

#menud {
	position:absolute;
	right:0px;
    width: 160px; /* Très important : donner une taille au menu */
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
	padding-top: 15px;
	padding-right: 5px;	
	margin: 0px}

#menud a { color: #1F337B ; text-decoration:none; }
#menud a.blanc { color: #fff ; text-decoration:none; }

#menud a:visited {color: #1F337B ; text-decoration:none}
#menud a.blanc:visited {color: #fff ; text-decoration:none}

#menud a:hover /* Quand on pointe sur un lien du menu */{
    background-color: #FFFF00 ;	color: #1F337B}
	
#menud a.blanc:hover{background-color: #FFFF00 ; color: #1F337B}

/* ======================================================================================================================== */  
/*                                                          CORPS                                                           */   
/* ======================================================================================================================== */  

div#corps{
	height:auto;
	overflow: auto;
	width:100%-170px;
	font-family: Arial, Helvetica, sans-serif;	
	background-color: #fff;	
	margin-top: 0px;
    margin-left: 170px; /* Une marge de 140 à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    margin-bottom: 2px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ 
    border: 2px solid #BF8660; /* Une bordure pour bien marquer les limites du corps et pour faire joli */ 
    border-top: 0px solid; /* Une bordure pour bien marquer les limites du corps et pour faire joli */ 			}
	
#corps ul {
	list-style-type:disc;
	padding: 0px;
	margin: 0px;
	padding-left: 40px;		
	text-align: justify; }	

#corps li {
	margin-bottom: 10px; 
    list-style-image: url("../images/presentation/puce_verte.gif"); }	

#corps li.fleche {
	margin-bottom: 10px; 
    list-style-image: url("../images/presentation/fleche.gif"); }	

#corps ol {
	padding: 0px;	margin: 0px;	margin-left: 60px;		text-align: left; }	
	
#pied_de_page {
	position:relative;    padding-left: 10px;    padding-right: 10px;      text-align: center; }

.date  /* date de creation*/ {
	font-size: 85%;
    text-indent: 0px; 
	text-align: center}

.pdp   /*copyright*/ {
	font-size: 75%;
    text-indent: 0px; 	
	text-align: justify; }

.dessous {  /* parag suivant celui de l'image flotante*/
   clear: both; }

p {
	text-indent: 0px;    /* alinea*/
   	font-size: 100%;
	text-align: justify;
    border: 50px ;	
    margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */ 
	margin-bottom: 20px;		
	padding-bottom: 0px;	}	

.fleches {     /* gestion des fleches Suivant Précédent */
	padding-bottom: 0px;
	margin-bottom: 10px;
	text-align: center;
	background-color:#DDFF55; }

span.note { /* notes et dates en plus petits */
	font-size:0.8em;
	font-style:italic;}

p.centrer_p { /* centre les patagraphes */
	color:#339933; 
	font-weight:bold;
	text-align:center; 
    font-size: 120%; }

p.centrer_p:first-letter {
    font-size: 120%; 
	color:#339933; }
	
.fleches_im {
	height: 20px;
	width: 50px ; }

q  {     /*  note explicative centrée */
   	font-size: 75%;  }	


blockquote {
	margin-left: 0px;
	margin-right: 0px;
	text-indent: 0px;
	text-align: justify;
    font-weight: bold; 	
	color: #339933; }

blockquote p:first-letter  {
	font-weight: normal; 
    font-size: 100%; 
    color: #339933; }

#pied_de_page p:first-letter {
	font-weight: normal; 
    font-size: 100%; 
    color: black; }

a:visited /* Quand le visiteur a déjà vu la page concernée */{
	text-decoration:line-through }

a.ancre:visited /* Quand le visiteur a déjà vu la page concernée */{
	text-decoration:none;
    font-weight: bold;	
	color: blue; 	}

#corps a:hover /* Quand on pointe sur un lien*/{
    color: #339933;  }

/* ======================================================================================================================== */  
/*                                                          TITRES                                                          */   
/* ======================================================================================================================== */  

h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 160%;
	text-align: center;	
    font-weight: bold;	
    color: #6078BF;}

h2 {
	font-size: 120%;
	text-align: justify;		
	line-height:140%;
	background-color:#FE8D11;
	font-style:oblique;
   	color: white;	}


h3 {
	line-height:140%;	
	text-align: justify;	
   	color: #FE8D11;
	border-top: 2px solid #FE8D11;	
	border-bottom: 2px solid #FE8D11;} 

/*h4 {
	line-height:140%;	
	text-align: justify;	
   	color: #339933;
	border-top: 2px solid #339933;	
	border-bottom: 2px solid #339933;} */

div.taille45 { /* centre les images */	
	text-align:center;
	width:45% }

div.taille30 { /* centre les images */	
	text-align:center;
	width:30% }	

div.taille30g { /* centre les images */	
	text-align:center;
	float:left;
	width:30% }	
		
/* ======================================================================================================================== */  
/*                                                          IMAGES                                                          */   
/* ======================================================================================================================== */  

.bloc-centrage { /* centre les images */	
	text-align:center; }

img.taille100 { /* centre les images */	
	text-align:center;
	width:100% }

img.taille90 { /* centre les images */	
	text-align:center;
	width:90% }

img.taille80 { /* centre les images */	
	text-align:center;
	width:80% }
	
img.taille70 { /* centre les images */	
	text-align:center;
	width:70% }	

img.taille60 { /* centre les images */	
	text-align:center;
	width:60% }

img.taille50 { /* centre les images */	
	text-align:center;
	width:50% }	

img.taille45 { 
	text-align:center;
	width:45% }	

img.taille40 { 
	text-align:center;
	width:40% }	
	
img.taille30 { 
	text-align:center;
	width:30% }

img.taille20 { 
	text-align:center;
	width:20% }	
	
img.taille10 { 
	text-align:center;
	width:10% }		
	
img.g-taille20 { 
	text-align:center;
	float:left;
	margin-top:3px;	
	margin-right:8px;
	width:20% }	

img.d-taille20 {	
	text-align:center;
	float:right;
	margin-top:3px;	
	margin-left:8px;
	width:20% }	

img.g-taille40 { 
	text-align:center;
	float:left;
	margin-top:3px;	
	margin-right:8px;
	width:40% }	
   
img.centrer { /* centre les images */
   display: block;
   margin-left: auto;
   margin-right: auto;  }
   
img.imgcentreevert {vertical-align:middle ; z-index:50}    /* images de menu*/

.zimages  {                  /* images de bas de page   XHTML*/
    text-indent: 0px; 	
	text-align: center;  }

.imageflottante  {
	margin-right:5px;
	padding-right:0px;
	margin-bottom:5px;
    float: left;    }

.imageflottante_d  {
	margin-right:5px;
	padding-right:0px;
	margin-bottom:5px;
    float: right;    }

a img /* Toutes les images contenues dans un lien */  {
   border: none; /* Pas de bordure */ }

.imgnews   { display: block;  margin: 0 auto; /* Pour les news du tab */    }

.imgphoto { }

.imgpuce {
	vertical-align: bottom;}

/* ======================================================================================================================== */  
/*                                                          TABLEAUX                                                        */  
/* ======================================================================================================================== */  

/* ===========     tab pour la banniere   ============ */  
.tabban { border-spacing: 0px; border-collapse:collapse; border:hidden; width:985px; height:18 ; background-image: url("../images/presentation/pics/orange_haut_milieu.gif")}

.tabban a {text-decoration:none ; font-family:Verdana, Arial, Helvetica, sans-serif ; font-weight:bold ; color:#1F337B }

.tdbang { width:175px; background-image: url("../images/presentation/pics/orange_haut_gauche.gif") }
.tdband { width:207px; background-image: url("../images/presentation/pics/orange_haut_droite.gif") }

/* ===========     tab pour le h1 d'accueil   ============ */  

.tabacc { width:98% ; height:78px; border-width:0px ;  border-spacing: 0px; border-collapse: collapse ; margin:0px}

.tdacc { width:70px; background-image: url("../images/levallois.jpg") ; background-position:center ; background-repeat: no-repeat}

/* ===========     tab pour les menus   ============ */  

table.tabmenu { border-spacing: 0px; border-collapse:collapse; border:hidden ; margin:0px ;}

.chapocell { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bolder; color: #fff; text-decoration: none; background-color:#6078BF; text-align:center; height: 24px; width: 160px;}

.chapocell2 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bolder; color: #fff; text-decoration: none; background-color:#BF8660; text-align:center; height: 24px; width: 160px;}

.corcell { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bolder; color: #1F337B; text-decoration: none;  width: 160px; padding-left: 5px; background-color:#fff}

.corcellcent { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #1F337B; text-decoration: none; text-align:center;  width: 160px; padding-left: 5px; background-color:#fff}

/* ===========     tab pour les news   ============ */  

/* premiere ligne - bleue ou orange */  

.tdnewsbg { width:15px ; height:19px ; padding:0px ; border-style:none ; border-width: medium ; background-image: url("../images/presentation/pics/arrondi_gauche_bleu.gif") }
.tdnewsbc { background-color:#838DAE; padding:0px ; color:#fff ; font-weight:700; text-align:left; border-style:none ; border-width: medium ; }
.tdnewsbd { width:15px ; height:19px ; padding:0px ; border-style:none ; border-width: medium ; background-image: url("../images/presentation/pics/arrondi_droit_bleu.gif") }

.tdnewsog { width:15px ; height:19px ; padding:0px ; border-style:none ; border-width: medium ; background-image: url("../images/presentation/pics/arrondi_gauche_orange.gif") }
.tdnewsoc { background-color:#FFC76D; padding:0px ; color:#071C5D; font-weight:700; text-align:left; border-style:none ; border-width: medium ; }
.tdnewsod { width:15px ; height:19px ; padding:0px ; border-style:none ; border-width: medium ; background-image: url("../images/presentation/pics/arrondi_droit_orange.gif") }

/* tableaux de news */ 

.tabnews1 { width:98% ; border-width:0px ;  border-spacing: 0px; border-collapse: collapse ; margin:0px ; margin-bottom: 20px }  
.tabnews2 { width:100% ;  padding:0px ; border-width:0px ;  border-spacing: 0px; border-collapse: collapse; margin:0px } 
.tdtab3b { padding:0px ; border-right:1px solid #838DAE; border-top:medium none #838DAE; border-bottom:1px solid #838DAE; border-left:1px solid #838DAE; }
.tdtab3o { padding:0px ; padding-left:8px;  border-right:1px solid #FFC76D; border-top:medium none #FFC76D; border-bottom:1px solid #FFC76D; border-left:1px solid #FFC76D; }
.tabnews4 { width:98% ;  padding:0px ; border-width:0px ;  border-spacing: 0px; border-collapse: collapse; } 
.tdtab5 {width:480px ; font-size: small ; text-align:justify}       /* news */ 
.tdtab6 {width:480px ; font-size: small ; font-style:italic ; padding-bottom: 6px}
.tdtab7 {width:480px ; font-size: small ; font-family:Verdana, Arial, Helvetica, sans-serif ; font-weight:bold ; text-align:right}
.tdtab8 {width:480px ; font-size: small ; text-align:center}   

.trsoul {border-bottom:1px solid #FFC76D; } /* menu */ 


.tdform1 {width:100% ; font-size: small}
.tdform2 {width:200px ; text-align:right}
.tdform3 {width:20px ; text-align:left}


/*
border-bottom: 2px solid #339933

table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}

#menu {background-color: green}
#menu li {background-color: lightgreen; border-color:#FF6600} 
#sss_menu {background-color: green}
#sss_menu li {background-color: lightgreen; border-color:#FF6600; border-top-color:#9900FF} 

* {margin: 0; padding: 0;}     

* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
http://forum.alsacreations.com/faq/#item54
*/