body {background: #D5E9D7; color: #cc0000; behavior: url(csshover.htc); font-family: Arial, Helvetica, sans-serif;  font-size: 100%;  } 
/* taille du texte: la taille par défaut pour le texte « medium » dans tous les navigateurs modernes est de 16px  */

h1 {color: #00A54E;  padding: 20px 0 20px 2%; font-size: 200%; font-weight: bold; border-bottom: 0px solid; margin-bottom: 0; }
h2 {color: #69C08A;      padding: 10px 0 10px 5%; font-size: 130%;}
h3 {color: #006600;             padding: 10px 0 10px 5%; font-size: 120%;}

#bandeau      { width: 100%; height:80px; border: 0px solid black; background: #D5E9D7; background-image: url(image/); background-repeat: no-repeat; background-size = 100%;}
img#bg { position: fixed; top: 50%; left: 50%; width: 100%; align: center; height: 120px;}


#header      { width: 100%; border: 0px solid black; text-align: left; overflow: hidden; background: #D5E9D7; height: 120;  }
#header h1 { padding: 20px 0 0px 5%; width: 80%; }
#header h2 { padding: 0px 0 0px 2%; width: 80%; }
#header img   { display: inline; float: right; border: 0px; width: 20%; }


/*            menus             */
/* source: http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal  Raphaël GOETTER */

body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif;} 

dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; color: #333399; }

#menu      {position: absolute; left: 0; z-index:10; width: 100%; font-size: 100%;} 
#menu dl  { float: left; width: 16%; }
#menu dt  { cursor: pointer; text-align: center; font-weight: bold; background: #ccc; border: 1px solid gray; margin: 1px; height: 20px;}
#menu dd { display: none; border: 1px solid gray;  }
#menu li    { text-align: center; background: #FFFFFF; }
#menu li a, #menu dt a { color: #333399; text-decoration: none; display: block; height: 15px; border: 0 none; }
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { background: #F9C8D8; }
 

/*            main             */
#main     {background: #D5E9D7; color: #333399; margin-left: 10%; padding: 40px 0 10px 5%;
  border-left: 0px solid; font-size: 100% z-index: 100; }
#main p  {font-size: 100%;}
#main ul { list-style-type: disc; }
#main li   { list-style-type: disc; margin-left: 2em;}

#picture { float: right; width: 100px; } 
.floatstop { clear:both} 

img#marpar1 { width = 168px; height = 200px; align: center;}
img#marpar2 { width = 200px; height = 150px; align: center;}
img#marpar3 { width = 200px; height = 200px; align: center;}


/* autres Class */
.bandbas     { text-align: center ; color: #009900; font-size: 6pt; font-style: italic }
.bandbasR  { text-align: right ; color: #009900; font-size: 6pt; font-style: italic }
.bandbasL   { text-align: left; color: #009900 font-size: 6pt; font-style: italic }
.bandhaut   { text-align: right ; color: #CCCCCC; font-size: 6pt; font-style: italic }
.navig          { text-align: left ; color: #cc0000; font-size: 12pt }
.bouton        { text-align: left ; color: #cc0000; font-size: 8pt }
	
/*                        Conteneurs                            */	
/*                         1ere ligne                            */	
#conteneur { width: 100%; height: 20%; }
#gauche { float:left; text-align: center; position:relative ; width: ; top: ; }
#centre   { float:left; text-align: center; position:relative ; width: ; top: ; }
#droite    { float:left; text-align: center; position:relative ; width: ; top: ; }
	
/*                         2e ligne                            */	
#conteneur2 { width: 100%; height: 20%; }
#gauche2 { float:left; text-align: center; position:relative ; width: ; top: ; }
#centre2   { float:left; text-align: center; position:relative ; width: ; top: ; }
#droite2    { float:left; text-align: center; position:relative ; width: ; top: ; }
	
/*                         3e ligne                            */	
#conteneur3 { width: 100%; height: 20%; }
#gauche3 { float:left; text-align: center; position:relative; width: ; top: ; }
#centre3   { float:left; text-align: center; position:relative; width: ; top: ; }
#droite3    { float:left; text-align: center; position:relative; width: ; top: ; }
	
/*                         4e ligne                            */	
	#conteneur4 { width: 100%; height: 20%; }
#gauche4 { float:left; text-align: center; position:relative; width: ; top: ; }
#centre4   { float:left; text-align: center; position:relative; width: ; top: ; }
#droite4    { float:left; text-align: center; position:relative; width: ; top: ; }
	
/* autres */
/* image portrait */
.image1 { width: 138.666666667px; height: 213.333333333px; }
/* image paysage */
.image2 { width: 213.333333333px; height: 138.666666667px; }

#bas { text-align: center;  width: 100%; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */
	
/* couleurs: bordeaux: #cc0000, vert: #006600, bleu: #333399, blanc: #ffffff, gris: #ECECEC */
/* couleurs: voir      http://www.cookwood.com/html/colors/backflapcolors.html */
/*                            http://meyerweb.com/eric/tools/color-blend/                         */

/* descripteurs: les id sont définis avec le signe dièse (#nom) et les class avec un point (.nom) */
/* --- end of css --- */
CSS;