/* général */
body {
background: url('../../images/asphalte2.jpg');
font: 12px Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
margin: 6px 0 6px 0;
padding: 0;
}
.body {
background: #fff;
padding: 4px;
}
#conteneur {
position: relative;
width: 850px;
margin: 0 auto; 
background: #d6d6d6;
border: 2px solid #000;
}
#head {
background: url('../../images/bangestionnu.jpg');
width: 850px;
height: 252px;
}
#haut {
background: url('../../images/hautligne.gif');
width: 850px;
height: 76px;
margin: -10px 0 0px 0px;
padding-top: 1px;
border-top: 2px solid #fee900;
border-bottom: 2px solid #fee900;
}
#centre {
background: #fff;
border: 4px solid #000;
margin: 10px 4px 10px 190px;
padding: 4px;
}
#centreform {
width: 642px;
height: 850px;
background: #fff;
border: 4px solid #000;
margin: 6px 0 10px 189px;
padding: 4px;
}
#centre2 {
background: #fff;
border: 1px solid #555;
width: 800px;
margin: 4px 0px 4px 15px;
padding: 10px;
}
#machin {
width: 640px;
height: 400px;
margin: 0px 0 10px -2px;
padding: 4px;
}
#gauche {
background: transparent;
border: 0px solid #a6a6a6;
position: absolute;
margin: 140px 0 0 6px;
width: 210px;
}
#pied {
background: url('../../images/foot.gif');
height: 100px;
border-top: 3px solid #fee900;
clear: both;
}
#foot{
background: url('../../images/intro.gif');
height: 222px;
border-top: 3px solid #fee900;
clear: both;
}
#zone {
position: relative;
width: 850px;
height: 162px;
margin: -115px 0 10px 0px;
border: 0px solid #600003;
}
#video {
border: 2px solid #d6d6d6;
width: 420px;
height: 334px;
padding: 0px; 
margin: 20px 0 0px 110px;
} 
#meteo {
position: absolute;
width: 167px;
background: #fff;
margin: -192px 0 0 3px;
padding-left: 12px;
border: 1px solid #000;
}
#card {
margin: 10px 0 -30px 25px;
padding: 6px;
}
/* les class image */
.image {
border: 0px;
}
#img {
position: absolute;
width: 175px;
background: #fff;
border: 1px solid #000;
margin: 680px 0px 80px 5px;
}
.img2 {
float: right;
margin-top: 20px;
padding: 0px 20px 0 20px;
}
.img3 {
float: right;
margin: -190px 20px 20px 0;
}
.imgcont {
margin: 20px 0 0 55px;
font: bold 1.1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #000; 
text-align: justify;
}
.float {
margin: 10px 2px 2px 10px;
}
.imagefloat {
float: right;
padding: 2px 6px 6px 6px;
}
/* les fonts */
h1 {
font: bold 1.2em Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
color: #000;
text-align: justify; 
margin: 6px 0 0 10px;
padding: 8px;
} 
h2 {
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #000;
text-align: center; 
margin: 6px 0 0 10px;
padding: 6px 0 0 0;
} 
h3 {
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #000;
text-align: justify;
margin: 6px 0 0 10px;
padding: 6px 0 0 0;
} 
h6 {
font: bold 0.8em  Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
color: #fff;
text-align: center;
margin: 30px 0 0 0;
padding: 8px 0 8px 0;   
}
.h6 {
font: bold 0.9em  Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
color: #fff;
text-align: center;
background: #000;
margin: 0 0 0 0;
padding: 6px 0 6px 0;   
}      
p {
font: 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #000; 
text-align: justify;
margin: 2px 8px 0 10px;
padding: 8px
}
.p {
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #000; 
text-align: center;
margin: 2px 8px 0 10px;
padding: 2px
}
.b {
background: #e6e6e6;
width: 70%;
border: 1px solid #000;
font: bold 1.1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #841028; 
text-align: center;
margin: 10px 10px -4px 95px;
padding: 8px
}
.back {
background: #e6e6e6;
border: 1px solid #555;
width: 32%;
margin: 10px 0 0 20px;
padding: 8px
}
.font {
font: bold 1.1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #fff; 
text-align: justify;
margin: 2px 8px 0 10px;
padding: 8px
}
.font2 {
font: bold 1.2em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #841028; 
text-align: justify;
margin: 2px 8px 0 10px;
padding: 8px
}
.strong {
font: bold 1.1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #000; 
text-align: justify;
margin: 20px 8px 0 10px;
padding: 8px
}
.error { 
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;  
color: #841028; 
text-align: justify;
margin: 20px 8px 0 10px;
padding: 8px
}
.ul { 
list-style-type: square;
margin: 0 0 20px 40px;
padding: 4px
}
/* les espaces */
.dessous {
clear: both;
}
.espace {
margin: 40px 0 0 0;
}
.espace1 {
margin: 10px 0 5px 0;
}
.espace2 {
margin: 275px 0 0 0;
}
.espace4 {
margin: 10px 20px 10px 20px;
border-bottom: 1px dotted #000000;
}
.espace5 {
margin: 240px 0 0 0;
}
.space {
margin: 20px 25px 0 25px;
border-bottom: 4px dashed #ffff0e;
}
/* les class */
.div {
margin: 8px auto 0 20px;
}
hr {
border: 0; 
width: 90%; 
color: #162039; 
background: #162039; 
height: 1px; 
}
/* les menus */
#navcontainer { 
width: 200px; 
}
#navcontainer ul  {
float: left;
margin: 205px 0 0 3px;
padding-left: 0;
list-style-type: none;
font: bold 1.1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
clear: both; 
}
#navcontainer a {
display: block;
margin: 3px 0 0 0;
padding: 5px;
width: 170px;
background: #000000;
border: 1px solid #eee;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background: #fee900;
color: #000;
border: 1px solid #000;
}
/* les liens */
a.bot:link, a.bot:visited {
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-align: right;
color: #000;
margin: 0 0 0 530px;
}
a.bot:hover {
color: #b6b6b6; 
text-decoration: underline;
} 
a.retour:link, a.retour:visited {
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-align: right;
color: #000; 
margin: 0 0 0 700px;
}
a.retour:hover {
color: #841028; 
text-decoration: underline; 
} 
a.email:link, a.email:visited   {
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #000;
text-decoration: none;   
margin: 4px; 
display: inline;
}
a.email:hover {
color: #daa520; 
margin: 4px;
text-decoration: underline; 
}
.message {
font: bold 1.1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none;
color: #000;
margin: 20px 0 0 280px;
padding-top: 40px;
}
.message:hover {
font: bold 1.1em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-decoration: none;
color: #841028;
margin: 20px 0 0 280px;
padding-top: 40px;
}
a.lien:link, a.lien:visited  {
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #fff;  
margin: 4px; 
background: transparent; 
text-decoration: none;
} 
a.lien:hover {
color: #8a1d03; 
margin: 4px; 
text-decoration: underline; 
} 
a.livre:link, a.livre:visited  {
font: .95em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #396a86;  
margin: 2px; 
background: transparent; 
text-decoration: none;
} 
a.livre:hover {
color: #8a1d03; 
margin: 2px; 
text-decoration: underline; 
} 
/* les formulaires */ 
.form { 
background: #fff;
border: 1px solid #000;
margin: 216px 0 0 3px;
padding: 8px;
width: 163px;
height: 47px;
}
form { 
background: #d6d6d6;
border: 1px solid #000;
margin-left: 120px;
padding:8px;
width: 400px;
} 
label { 
font: bold 1.0em  Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
} 
input { 
border: 1px solid #18499a;
background: #f5f5f5;
font: 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
padding: 1px;
} 
select, option { 
background: #fff;
color: #000080;
} 
textarea { 
border: 1px solid #18499a;
background: #fff;
font: 12px Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #000;
} 
input.bouton { 
border: 1px outset #18499a;
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
cursor : pointer;
padding: 2px;
} 
input.bouton:hover { 
background: #000;
color: #d6d6d6;
} 
input.bouton:active { 
border: 1px inset #18499a;
background: #f7f9fa;
color: #fff;
} 
/* CSS issu des tutoriels css.alsacreations.com  et application galerie vacarme*/
#gal{
position: relative; 
width: 570px; 
height: 350px;
background: #ffffff; 
margin: 4px auto 4px auto; 
border: 0px solid #600003;
cursor: default;
font: 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #000; 
text-align: center; 
}
#gal ul{
list-style:none;
padding: 0px;
margin: 0px 0 0 0px;
position: absolute;
top: 270px;
left: 0px;
text-align: center;
width: 100%;
}
#gal a {
text-decoration: none;
}
#gal a:hover {
background: none;
}
#gal a span {
display: none;
cursor: default;
}
/* position et hauteur des thumbs*/
#gal a img {
display: inline;
margin: 0 0 0 0; 
border: 1px solid black; 
position: relative;
z-index: 1001;
height: 25px;
}
/*image projetée et du texte commentaire*/
#gal a:hover span {
display: inline;
position: absolute;
top: -270px;
left: 0px;
width: 100%;
background: transparent;
}
/* position image initiale*//* image projetée*/
#gal img, #gal a:hover span img {
margin: 10px auto 0 auto;
border: 1px solid black ;
height: 250px;
}
/* position et caractéristiques du texte commentaire*/
#gal a textarea {
background: transparent;
border: 0 solid #841028;
height: 15px; 
width: 300px;
overflow: hidden;
margin: 300px auto 0 auto; 
font: 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
text-align: center;
color: #000;
cursor: default;
position: relative;
z-index: 1000;
}
/* les livres */
.livres {
float: left;
background: transparent;
margin: 2px;
width: 135px;
}
.cadre {
background: #fff;
margin: 20px 10px 30px 10px;
}
.spacer {
clear: both;
}
/* info bulle */
.formbulle { 
background: #fff;
margin: 0px;
padding: 0px;
}
.formbulle  p { 
font: bold 1.0em Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
color: #396a86;
text-align: center;
}