/* général */
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; font-family: Verdana, Helvetica, Lucida; margin: 0; padding: 0; }
body { font-size: 75%; }
img { border: none; vertical-align: middle; }
hr { visibility: hidden; clear: both; height: 15px; _height: 2px; }
p { padding: 10px; text-align: left; }


/* liens */
a { color: royalblue; text-decoration: none; }
a:hover { color: orangered; }


/* titres */
h1 { font-size: 1.6em; padding: 5px 10px; font-weight: normal; color: darkred; }
h2 { font-family: impact; font-size: 1.3em; padding: 1px; font-weight: normal; color: royalblue; }
h3 { font-size: 0.8em; letter-spacing: 0.1em; font-weight: bold; color: darkred; }


/* Formulaires */
input { font-size: 0.8em; border: 1px solid #aaa; }
textarea { font-size: 0.9em; border: 1px solid #aaa; }


/* classes générales */
.mini { font-size: 0.8em; }
.big { font-size: 1.3em; }
.rouge { color: red; }
.bleu { color: blue; }
.gauche { text-align: left; }
.centre { text-align: center; }
.droite { text-align: right; }


/* ID */
#fond_du_site { background: #FFFFFF url('data/images/fond-entete.jpg') no-repeat top center; text-align: center; }
#logo { position: relative; left: -30px; margin: 20px auto 10px; }
#menu { position: relative; width: 784px; left: 2px; margin: 0 auto; font-size: 0.8em; }
#menu a { position: relative; display: block; float: left; width: 154px; padding: 5px 0; color: black; border: 1px solid white; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; }
#menu a ul { display: none; }
#menu a:hover { background: lightyellow; font-weight: bold; color: royalblue; }
#menu a:hover ul { display:block; width: 154px; position:absolute; top: 23px; left: -1px; background-color: white; border-left: 1px solid white; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; FILTER: progid:DXImageTransform.Microsoft.dropShadow(Color=cccccc,offX=2,offY=2,positive=true); }
#menu a:hover li { list-style-type: none; padding: 5px 3px; text-decoration: none; text-align: left; }
#menu a:hover li.titre { background-color: lightyellow; border-top: 1px solid white; border-bottom: 1px solid #aaa; }
#menu a:hover li.lien { cursor: hand; cursor: pointer; font-weight: normal; }

#page { width: 780px; background: white; margin: 10px auto; clear: both; }
#page ul { margin: 10px; }
#page li { text-align: left; margin: 5px 15px;}
#fin { width: 780px; background: white; padding: 8px 0; margin: 20px auto 0px; clear: both; font-size: 1em; border-top: 1px solid #eee; }

#utopia { width: 100%; }
#utopia td { width: 33%; text-align: left; vertical-align: top; background: #FFFFFF url('data/images/fond-utopia.gif') no-repeat top left; }
#utopia li { font-size: 0.9em; }

form table { margin: 0 auto; }
form td { text-align: left; }

#tableau { border-collapse: collapse; border: 1px solid #eee; margin: 10px auto; }
#tableau td { font-size: 0.9em; padding: 5px 10px; border: 1px solid #eee; text-align: left; }
#tableau th { font-size: 0.9em; padding: 5px 10px; border: 1px solid #eee; }