html,BODY 
   {background:#c0c0cc ;
     color:black; 
        font-size:medium;
width:95%;
    padding:0;
    margin:0;
    
    height:70%;}

a:link    
          {color:blue;}

a:active  
         {color:#191cab;}

a:visited
        {color:purple;}

a:visited, a:active, a:link
        {text-decoration:none;font-weight:bold;}

a:hover, .m li a:hover   
        {color:black;}

#haut {width:100%;
        height:15%;}





                     

/* banniere animée */

.banner, .banneruk {
position: absolute;
left:1%;
top:10%;
width: 170px;
height: 100%;
margin-top: 0px;
display:block;
z-index: 99;
}
.banner, .banneruk{ background: url(nom.jpg) no-repeat top left;}

.conteneur
{
position: absolute;
left:20%;
top:35%;
width: 75%;
height: 60%;
text-align:justify;
margin-left: 5px;padding:5px 5px 5px 5px ;
display:block;
z-index: 99;
}




/* CSS issu des tutoriels css.alsacreations.com  et application galerie vacarme*/
#gal{
position:relative; 
width:80%; 
height:70%; 
margin:6% auto 0 auto;
cursor: default;font:bold small "Arial",sans-serif;
 color: #6600cc; 
text-align: center; 
}
#gal ul{
list-style:none;
padding: 0px;
margin: 0px;
position: absolute;
top: 30px;
left: 50px;
text-align: left;
width: 110%;border:1px solid #000;
}
#gal ul span {}
#gal a {
text-decoration: none;
}
#gal a:hover {
background: none;
}
#gal a span {
display: none;
cursor: default;
}
#g {
font-size:large;
}
.pi {
font-size:small;margin-left:21%;
}
/* position et hauteur des vignettes*/
#gal a img {
display: inline;
border: 1px solid black ; 
position: relative;
z-index: 1000;
height: 100px;
}

/*image projetée et du texte commentaire */
#gal a:hover span {
display: inline;
position: absolute;
top: 120%;
left: 0px;
width: 110%;
background: transparent;
}
/* position image initiale*//* image projetée*/
#gal img, #gal a:hover span img {
margin:1px auto 0 auto; border: 0 ;

}


#gal a:hover span img {
float:left; 
height:300px;
}
/* position et caractéristiques du texte commentaire*/
#gal a textarea {
background-color: transparent;
border: 0;
height: 10%; 
width: 42%;
overflow: hidden;
font:bold small "Arial",sans-serif;
color: black;
cursor: default;
position: relative;margin-top:25%;margin-left:55%;
z-index: 1000;
}


/* menu */

.lg {width:20%;height:20%;}

.m li , #mhcour {padding-left:10px;margin-top:10px; }
  
 .m
{
 width: 110%;position:relative;
 list-style-type: none;
 margin: 0;float:left;
   background:url("f2.jpg") no-repeat;   
         font:bold small "Verdana",sans-serif;
 padding: 0;
 border: 0;
}

.m li, #mhcour, #mh
{
 float: left;
 display:block;
width:14%;
 margin: 0;
 padding: 0;
 border: 0;
}
 #mh {width:100%;}
#mlilg {margin:0;}
 #mhcour
         {color:black;
         background:#ffff00;
          width:100%;}

.m li a:link, .m li a:visited
{display: block;
 height: auto;
 color: purple;
 margin: 0;
 text-decoration: none;
}

.m li a:active { background-color:#00ff00; margin:0;}

.m .ssm li a:link,
.m .ssm li a:visited
{
 color: purple;
 margin: 0;
 border: 0;
 text-decoration: none;

}
.m .ssm li a:hover, .m li a:hover
{
 background-color: #00ff00;height:15px;margin-top:2%;
 color:black;}

.m .ssm
{
 list-style-type:none;width: 150px;position:relative;
font:bold x-small "Verdana",sans-serif;
 margin: 0;
  padding: 0;
 border: 0;
}

.m .ssm li
{ margin: 0;width:100%;
 padding: 0;
 border: 0;
 height:15px;
 border-top: 1px solid ;
} 
.ssmlicour {background:yellow;}

/* image et texte a cote */

.txtga {z-index: 1000;
        overflow:auto;margin-top:-3%;
       }  
.txtga , .txtga2  { position:relative;
       font-weight:normal;
        }
.txtga ul {width:85%;}
.txtga2  {margin-top:-3%;margin-left:5%;}
.txtga2 ul {width:80%;}

.gros {font-weight:bold;}

.imgdr {width:25%;height:45%;padding-right:2%;float:left;}
/* bas de page */
.tresbas, .bas {border-top: 1px solid white;color:#6600CC;
font:normal x-small "Verdana",sans-serif;}
.bas {margin-top:20%;}
.tresbas {margin-top:28%;margin-left:15%;}