html,body {
background-color : white;



}

p,ul,li,td {
font-size : 100%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : black;
background-color : none;
list-style-type:none;
}



h1 {
font-size : 200%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;
text-align: center;
}

h2 {
font-size : 150%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : red;
padding-left:15px;
}

h3 {
font-size : 100%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;
text-align: left;
}

h4 {
font-size : 100%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;
text-align: left;
}
h5 {
font-size : 100%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;
text-align: left;
}
h6 {
font-size : 70%;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
color : navy;
text-align: left;
}

a:link {color: black; text-decoration:underline;}
a:visited {color: gray; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}
table {
border-collapse:collapse
border-style:solid; 
border-width:1px; 
border-color:black;

}
td { 
border-style:solid; 
border-width:1px; 
border-color:red;

}
.grise {
border-style:solid; 
border-width:1px; 
border-color:black; 
background-color:silver;
width:40px;
padding:10px;
height:20
float:left; }

.blue {
border-style:solid; 
border-width:1px; 
border-color:blue;
margin-left:225px; 
padding:10px; 
height:20px;}

.none {
border-style:none;
}
a.bouton:link{
width:150px; 
height:30px; 
text-decoration:none; 
color:white;
text-align:center; 
font-weight:bold; 
background-color:#000080;
padding:5px}

a.bouton:visited{
width:150px; 
height:30px;
text-decoration:none; 
color:white; 
text-align:center;
font-weight:bold;
background-color:#000080;
padding:5px}

a.bouton:hover{
width:150px; 
height:30px; 
text-decoration:none;
color:white; 
text-align:center; 
font-weight:bold; 
background-color:#0000FF;
background-image:url(aqua.jpg);
padding:5px}

.bouton{text-align:center;padding:2px;}
 li {
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 80%;
color: black;
display : list-item;
list-style-image : url(puce.gif);
list-style-position: outside;
}



body {
    margin: 0px;
    padding: 0px;
}
div#header {
    text-align: center;
    color: white;
    background-color: #6666FF;
    height: 90px
    margin: 0px;
    padding: 1px;
}
div#navcol {
    padding: 5px;
    width: 180px;
    float: left;
    background-color: #FFCC66;
}
div#main {
    font-size: 80%;
    padding: 10px;
    margin-left: 220px;
    margin-right: 190px;
}
div#sidecol {
    padding: 10px;
    width: 130px;
    float: right;
    background-color: #FFCC66;
}
div#foot {
    border-top: solid #000 1px;
    background-color: #6666FF;
    padding: 10px;
    text-align: center;
    clear: both;
	color:white;
	font-size:12px;
	font-weight:bold;
	font-family:"MS Sans Serif", "sans-serif", Verdana, Arial;
	border:1px solid #EFB;
	padding:1px;

a, a:visited, {
/* Les liens qui ne sont pas sous le curseur. */
	color:white;
	padding:2px 1px;
	text-decoration:none;
/* Ne pas modifier le block */
	display:block;
/*	Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera... La combinaison
	aucun width et height:100% marche sur tous, donc ne pas toucher ces 2 lignes */
/*	height:100%;
	margin:0px;*/
	margin:0px;
	width:100%;
}

 a:hover, a:focus {
/* Les liens sous le curseur.
	On change les couleurs du texte et de fond, et on enlève le soulignement.
	*/
	background-color:#6666FF;
	color:black;
	text-decoration:none;
} 
}
div#navbar2 {
    height: 30px;
    width: 100%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: #336699;
}
div#navbar2 ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
}
div#navbar2 li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#navbar2 li a:link {
    color: #FFF:
}
div#navbar2 li a:visited {
    color: #CCC;
}
div#navbar2 li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #3366FF;
}

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 6em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #FFCC66;
  border: thin outset #FFCC66;
  color: black;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #FFCC66 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: black }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }


/***** menu CSS *****/
@media print {
/*A l'impression on cache le menu, marche au moins pour IE, Moz et Opéra.*/
	.menu, .ssmenu {
		visibility:hidden;
	}
}

.menu, .ssmenu {
	background-color:#6666FF;
	color:white;
	font-size:12px;
	font-weight:bold;
	font-family:"MS Sans Serif", "sans-serif", Verdana, Arial;
	border:1px solid #EFB;
	padding:1px;
/* width et margin sont au cas où le javascript est désactivé. */
	width:15em;
	margin:1em;
}
/* .menu = les cases toujours visibles (comme Fichier, Edition... dans un logiciel) */
.menu {
	text-align:center;
}
/* .ssmenu = Les parties "déroulantes" qui s'affiche au survol d'un .menu */
.ssmenu {
/* aller pour faire joli sur IE, un petit effet de dégradé !
	Pour voir d'autres effets :
	http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm
	Par exemple :
	transparence à 25% = opacité à 75%:
		FILTER: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=75);
	"Glow" :
		FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ffdead,strength=5);
	Ombre en bas à droite, 5 px :
		FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#ff8c00,strength=5);
	*/
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AA8922,endColorStr=#543210);
	white-space : no-break;
}

.menu span, .ssmenu span {
/* Ne pas toucher
	C'est pour cacher les ; en fin de <li>, ce qui permet aux synthèse vocales de prendre une
	pause dans l'élocution */
	display:none;
}

.ssmenu ul, .ssmenu li {
/* Ne pas trop toucher.
	Les items (les <li>) des sous-menus, notamment pour enlever les puces des liste */
	padding:0;
	margin:0;
	list-style-type:none;
}

.menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited {
/* Les liens qui ne sont pas sous le curseur. */
	color:white;
	padding:2px 1px;
	text-decoration:none;
/* Ne pas modifier le block */
	display:block;
/*	Un width:100% fait planter Mozilla, sans le width:100% c'est IE et Opera... La combinaison
	aucun width et height:100% marche sur tous, donc ne pas toucher ces 2 lignes */
/*	height:100%;
	margin:0px;*/
	margin:0px;
	width:100%;
}
html>body .menu a, html>body .menu a:visited, html>body .menu a:hover, html>body .menu a:active,
html>body .ssmenu a, html>body .ssmenu a:visited, html>body .ssmenu a:hover, html>body .ssmenu a:active {
	width:auto;
}

.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
/* Les liens sous le curseur.
	On change les couleurs du texte et de fond, et on enlève le soulignement.
	*/
	background-color:#6666FF;
	color:black;
	text-decoration:none;
}


img {
/* Si on met une image dans un lien (par exemple un logo à gauche du lien), pas de bordure
	car c'est vilain :-p */
	border:none;
}

.ssmenu img {
/* un petit espacement entre l'image et le texte du lien <a href="..."><img.../>blabla</a> */
	margin-right:2px;
}

.ssmenu img.hr {
/* Encore un peu expérimental, un <hr /> entre deux items pour faire un "séparateur"... */
	margin-top:1px;
	margin-bottom:1px;
	margin-left:0;
	margin-right:0;
	width:100%;
	display:block;
}

/*
Bref... pour résumer, ce qu'il y a à modifier à la base, c'est :
- couleurs, police, bordure.
- l'effet spécial IE pour les ssmenu si on aime ça...
- police et couleurs des liens "non survolés" et "survolés".
*/

.photos-hor .photo{
  float: left;
  width: 185px;
  margin-bottom: 12px;
}

.photos-hor a{
  display: block;
  text-decoration: none;
  background: #fff url(img-hor-bg.png) 0 0 no-repeat;
  color: #002C79;
  font-size: 0.85em;
}

.photos-hor a:visited{
  background-position: -371px 0;
  color: #7E7E7E;
}

.photos-hor a:hover{
  background-position: -185px 0;
  color: #C24F00;
}

.photos-hor span.desc{
  display: block;
  text-align: center;
}

.photos-hor img{
  display: inline;
  margin: 11px 11px 8px 11px;
  width: 163px;
  height: 105px;
}

.photos-hor{ text-align: center; }

.photos-hor .photos-3{ width: 555px; margin: auto; }
.photos-hor .photos-2{ width: 370px; margin: auto; }