html {// background-color:  #369;
 background: url(../style/clouds.png) top right repeat-x  #58F;
  background: url(../style/chatel.jpg) bottom right no-repeat  #5376B8;
padding-bottom: 15px; 
 }	
body {
position:relative;
border-radius: 1em;
  margin: 5px auto; padding:20px 20px;
  background: white;
  text-align: center;
  left: 10px; max-width: 770px;
  font-family: verdana,geneva,"Courier New",sans-serif, Courier;
  font-size: 0.8em;
  line-height: 130%;
  border-right: 4px solid #555;
border-bottom: 4px solid #555;
}
body:after {  font-size: 0.7em;
content: "Tous droits réservés";
}

#page:before{
opacity:0.7;
position: absolute; top:74px;
 left: 390px; width: 350px; height:32px;
font-size: 2em; font-weight: bold ;
font-family: verdana, arial;
font-style:italic;
color:red;
content: "Parapente dans les Vosges";
//content: "MEILLEURS VOEUX"; top:90px; left:300px;
//font-size:3em; width:420px;z-index:10; opacity:0.9;
text-shadow: black 2px 2px 1px, black 1px 1px 2px, white 0 0 4px,white 0 0 8px;
}

/*
#contenu:before {
z-index:1;
position:absolute; top:30px; right:40px; 
padding: 14px 15px;
border: 0px solid black; 
color:navy; font-weight:bold; font-size:140%;
content: "ESPACE AERIEN  ET RALLYE D'ALSACE 3-5 octobre (voir accueil - home page)";
background:yellow;
background: rgba(255,255,0,0.9);
//background: radial-gradient(ellipse at 50% 50%, yellow ,  orange, red 30%, rgba(0,0,0,0), rgba(0,0,0,0) );
// background: radial-gradient(400px 25px at 50% 50%, yellow,  red, rgba(0,0,0,0), rgba(0,0,0,0) );
// -transform: rotate(12deg);
// background: linear-gradient( 120deg, blue,rgba(0,0,0,0), yellow,  red,green,rgba(0,0,0,0) );
  background: linear-gradient( 120deg, red, yellow,  yellow,yellow,yellow, red );
 border-radius:12em;
}
*/



#page {
  position: relative;
  width: 770px;  max-width: 770px;
  margin: 0 auto 0 auto;
  text-align: left;
  background:url(../images/U3.png) 70px 80% no-repeat ;
}
@media all and (max-width: 1024px)
{
    #page    { width: auto; }
}
h1 {
	margin: 20px 2px; padding-left:1em;
    text-shadow: red 2px 2px 1px, black 1px 1px 2px;
    font-size: 140%; line-height: 160%;
    font-weight: bold; text-transform: uppercase;
    color:   #FFF ;
background: url(http://lavl.free.fr/style/bleu_transparent.png);
background: linear-gradient(rgba(0,0,0,0.1), blue 70%); 
//color: #036; /*  color:#69C; IE*/
border-radius: 80px 1000px 1180px 00px / 10px 70px 70px 70px ;
}

h2 {
text-shadow:   1px 1px 0px #AAA;
color:blue;
border-bottom: 1px dotted blue;
text-align:right;
  margin: 3em 0 1em 0 ;
  font-size: 110%;line-height:140%;
  font-weight: bold; text-transform: uppercase;
}
h2:nth-of-type(2n){text-align:left;}

h1 + h2 {margin: 1.5em 0 1em 0}

h3 {
  margin: 1em 0.5em 1em 1.5em;
  font-size: 100%; text-transform: uppercase;
}
h4 {font-size:100%; margin:.5em; 
text-transform: lowercase;}
#contenu h4 {margin-left: 4em; }
figure {margin:0px; padding:5px;}
figcaption {font-style:italic; text-align: center; }

#contenu h4::before {
 color:red;font-size:20%;
content:":o:"; margin-right:0.5em;
}

#contenu hr { margin: 0.4em auto;}

#contenu p:first-letter {
  font-family: "Bookman Old Style","Times New Roman", Times,verdana,geneva,"Courier New",sans-serif, Courier;
  text-shadow:   1px 1px 1px #007;
 margin-right:0.1em;
font-style:italic; font-weight: bold;
color: #D22;
  font-size: 130%;
}
#contenu  img{
border-radius: 0 2em;
box-shadow: 7px 7px 5px #77B;
}
#contenu  img[src$=".gif"], #contenu img[src$=".png"]{
border-radius: 0; box-shadow: none;
}
#contenu  .sticker img{
border-radius: 0; box-shadow: none;
}
#contenu  img[src*="icones"]{
border-radius: 0; box-shadow: none;
}
/* google maps */
#map_canvas img {border-radius:0; box-shadow:none;}

#contenu [href^="http://"]:not([href*="lavl.free.fr"])::after {
    content: "\2197";
}

#contenu * p, #gauche p { margin: 0.5em 0;}

#contenu ul, #contenu ol {
margin: 0.2em; margin-left: 5px;
  padding-left: 15px;
  line-height: 1.2em;
  list-style-position: inside;
}
#contenu li{ margin: 0.1em 0}
strong {
  font-weight: bolder;
  text-shadow: 1px 0px 0 silver;
 letter-spacing: 1px; 
}

.menu ul, .menu ul li {padding: 0; margin:0;}

table {
margin: 5px auto;border-collapse: collapse;
  font-family: verdana, geneva, arial,"Courier New",Courier,monospace;
  font-size:1.1em;
  line-height: 150%;
  border:none;
}
caption {font-style:italic; font-weight: bold;}
thead, thead+tr {border:none;}
th /*cellules d'en-tête */
{
   vertical-align: middle;
   background-color: #55F;
   color: white;
   font-weight:bold;text-align:center;
   border-radius:0.5em;
}
tbody {}

tr{padding:3px;  border-bottom:1px dashed grey;}
td{padding:3px; border-right:1px dotted #CCC;}
/*tr:nth-of-type(2n) td:nth-of-type(2n+1) {background:#FA0;}
tr:nth-of-type(2n) td:nth-of-type(2n){background:#FC0;}*/
tr:nth-of-type(2n) td:nth-of-type(2n+1) {background:#DDF;}
tr:nth-of-type(2n) td:nth-of-type(2n){background:#EEF;}
tr:nth-of-type(2n+1) td:nth-of-type(2n) {background:#DDF;}
tr:nth-of-type(2n+1) td:nth-of-type(2n+1){background:#EEF;}

.col1_titre tr:first-child th:first-child{border: none;background-color: transparent;}
.col1_titre  td:first-child { font-weight: bold;  text-shadow:  white 2px 2px 3px; }


:link img, :visited img {	border: 0;}

img { border: none;}

#gauche {
position: absolute;
top:150px;left:-10px;
}
#contenu{
-moz-border-radius: 3em .4em;
border-radius: .8em ;
  border-left: 1px double #f0eeff;
  border-top: 1px double  #f0eeff;  
  margin: 30px 0px 10px 160px;
  padding: 0 10px 10px 20px;
  max-width: 700px;
  max-width: 100%;
  text-align: justify;
  font-family:  Arial,Helvetica,serif,monospace;
 background:  #eeeeF0;
  background:  rgba(230, 230,255,0.85);
}
@media all and (max-width: 1024px)
{
    #contenu    { margin-left: 0; width: auto;  }
	#gauche     { position:relative; top:0; left:0}
}

#contenu a {
color:#669;font-weight: bold;font-style:italic;
}
#contenu a:visited {
text-decoration:none;}

#contenu a:hover, #contenu a:active, #contenu a:focus {
  text-shadow: 1px 0px 0px #555;
  text-decoration: transparent;font-style:none;
  background:none;
  color: #F00 ;
}

.menu {
-webkit-box-shadow: 10px 10px 5px rgba(80,80,80, 0.5);
-moz-box-shadow: 10px 10px 5px rgba(80,80,80, 0.5); 
box-shadow: 10px 10px 5px rgba(80,80,80, 0.5);
border-radius: 3em 0;
text-shadow: 2px 2px 2px #555;
margin: 20px 0; padding: 15px 0 15px 10px;
line-height: 1.5em;
width: 148px;
font-family: verdana,"Bitstream Vera Sans",arial,geneva, sans-serif, Courier,monospace;
font-size: 80%;
text-align: left; text-transform: uppercase;
background: url(http://lavl.free.fr/style/bleu_transparent.png);
// background: -webkit-gradient(radial,center center,20,center center,140,from(rgba(0,0,250,1)),to(rgba(70,120,250,0.6)));
// background: linear-gradient(-125deg, rgba(0,0,5,0.9), rgba(0,200,00,0.9), rgba(70,220,120,0.8), rgba(0,0,0,1));

}

.menu:first-child {
//background: linear-gradient(-125deg, rgba(240,240,255,0.9),   rgba(0,0,200,0.9) 40%, rgba(70,120,200,0.9),rgba(250,250,240,0.8));
}
.menu:hover:first-child  {
//background: linear-gradient(-125deg, navy 15%,   rgba(30, 30,255,0.85) 20%, navy 95%);
}}

.menu input{ display:block;}

.menu a {
text-decoration: none;
font-weight: bold;
color: white;
}
/*
.menu a:hover, .menu a:focus {
border-radius: 1em;
border-left: 5px solid red;
padding-left:5px;
border-right: 5px solid red;
padding-right:5px;
border-bottom:none;
}
*/
.menu a:hover, .menu a:focus {
color:#f10;
text-shadow: 2px 0px 3px #FF0,-1px 0px 3px #FF0, 0px 1px 5px #FF0,0px -1px 5px #FF0;
}

.menu a[ href^="http://federation.ffvl.fr"]:hover, .menu a[ href^="http://federation.ffvl.fr"]:focus {
border: 0px solid red;
padding:0 0 0 0px;
}
.menu a[ href^="http://www.ffvl.fr"]:hover, .menu a[ href^="http://www.ffvl.fr"]:focus {
border: 0px solid red;
padding:0 0 0 0px;
}
.menu [href^="http://www.ffvl"]:hover:after, .menu [href^="http://federation"]:hover:after
{ 
position:relative; top:-15px;
border:none;line-height:0.5em;
font-size:2em;color:red; 
content:"*"; 
}

#menuhaut {
z-index:1;
position:absolute;
top:0px;margin: -3px 0 0 40px;
width: 780px; height: 20px;  
}
#menuhaut a {
border-radius: 3em 3em 0.5em 0.5em ;
border:1px solid rgba(0,0,0,0);
border-bottom: 1px solid grey;
border-right: 1px solid grey;
text-shadow: -1px -1px 2px #FFF;
  padding: 4px 10px; 
  font-family: verdana,"Bitstream Vera Sans",arial, geneva, sans-serif, Courier,monospace;
  font-size: 0.8em; font-weight: bold;
  color:  blue;
  text-decoration: none;
background:#F0F0F0;
transition-property: background-color;
transition-duration: 2s, 3s;
transition-timing-function: linear, ease-out;
}

#menuhaut a:hover {
text-shadow: 2px 0px 3px #FF0,-1px 0px 3px #FF0, 0px 1px 5px #FF0,0px -1px 5px #FF0;
box-shadow: none;
border:5px solid white; 
border-radius: 3em;
padding: 8px 6px;
color:#f10; background:white;
background:rgba(0,0,255,0.35);
}

#menuhaut a +a{ 
margin-left: 5px;
}

@media screen and (max-width: 800px)
{
#menuhaut a +a{ 
margin-left: 5px;
}
}

@media screen and (max-width: 600px)
{
#menuhaut a { 
display:flex;
  width:10em;
  margin-left:150px;
}
#menuhaut a+a{ 
   margin-left:150px; 
}
}


.menu h3, .tete_menu{
border-radius: 1em;
margin:0;
  font-weight: bold; text-align: center;
  color: #AFB; background-color: #345;
}
.menu h4{
border-radius: 1em;
  overflow: visible;
  font-weight: bold;font-size:1.2em;
  color: #333;
}
/*
#prepa{
font-size: smaller;
line-height:1.2em;
border-radius: 3em .8em;
text-shadow: 1px 1px 2px #555;
margin: 20px 0;
background: #ddeeaa;
background: rgba(220,250, 170, 0.9);
//background: -moz-linear-gradient(125deg, rgba(200,50,0,0.9), rgba(200,220,50,1), rgba(60,220,50,0.9), rgba(210,50,0,0.8));
background: linear-gradient(0deg, rgba(50,50,5,0.8),rgba(50,250,50,1)10%, rgba(250,250,250,1) 48%,rgba(250,250,250,1) 65%, rgba(50,50,250,0.9) 90%);
}
#prepa a {
text-shadow: -1px -0px 0px #444;
color:#55A;
}
#prepa a:hover {
text-shadow: 2px 0px 3px #FF0,-1px 0px 3px #FF0, 0px 1px 5px #FF0,0px -1px 5px #FF0;
border:none;
border-right: 3px red solid;
border-left: 3px red solid;
color:#f10;
padding:0 3px;
}
#maj {
border-radius: .8em 3em ;
margin: 20px 0;width:148px;
padding: 10px 5px 10px 5px;
line-height: 1.3em;
font-size:0.8em;
font-family: verdana, arial, geneva, sans-serif, Courier,monospace;
text-align: left;
text-decoration: none;
background-color: #ccccff;
}
#maj a {text-decoration: none;}
#maj a:visited { color: teal;}
#maj a:hover, #maj a:focus {
  color: red;
  background-color: #FFF;
  text-decoration: none;
}
*/
#basdepage {
border-radius: .8em;
border: 1px solid #9ebcff;
margin: 25px 0px 10px 0px;
width: 100%;
color: #333;font-size: smaller;
text-align: center;
}
#retour {
bottom:5px; position:fixed;
left:50%; margin-left:385px;
}
#retour img {display: block; margin:10px 0;}
#retour img:hover {padding-left:5px;}

#header {
-moz-border-radius: 800px 140px 90px 750px / 90px 70px 70px 70px ;
border-radius: 800px 140px 90px 750px / 90px 70px 70px 70px ;
//background-image: url(../images/LAVL-cretes-hiver.jpg);
background-image: url(../images/Bandeau.jpg);
width: 770px; height: 114px;
}

#est {
border-radius: 12em 12em;
  background-image: url(../images/Bandeau.jpg);
  width: 770px; height: 114px;
}

.logo {z-index:0;
  position: absolute;
  top: 34px;left: 0px;
}
img.logo {
  width: 180px; height: 100px;
rgba(0,0,0,0)); opacity:0.82;
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.logo:hover { 
opacity:1.0;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
border: black 1px solid;
border-right: black 3px solid;
border-bottom: black 3px solid;
box-shadow: 5px 5px 15px rgba(0,0,20,0.7), inset -2px -2px 3px #555, inset 1px 1px 2px #FFF;
border-radius: 2em 0.5em;
}
/*animation soleil */
#header a::before {
content:""; display:none
position:absolute; width:180px; height:150px;
//background: radial-gradient(100em at 80% 37%, yellow 1.5em,  rgba(230, 230,255,0.0) 3em);
background:url(../images/icones/Usport.png) no-repeat center center;
}
#header a:hover::before { display:block;
 transform: translate(1000px, -100px);
transition:all 18s linear;
 transition-delay: 3s;
opacity:0.0;
}

img.logo-lavl-ev {
  position: absolute;
  width: 180px;height: 100px;
  margin: 35px 0 0 15px; padding-left: 5px;
}
#llvl-logo {
z-index:1;
box-shadow: 5px 5px 15px rgba(0,0,20,0.9);
 width: 87px; height: 138px;
  position:absolute;
  margin-left: 675px; margin-top: 5px;
}
a #llvl-logo:hover {box-shadow:none;}

img.ffvl {
  margin-left: 20px;
}
.envaleur:hover {  
background: radial-gradient(circle 300px at 0px 0px, yellow,  rgba(230, 230,255,0.85) );
}

.encadre {
border-radius: .8em;
box-shadow: 0px 0px 12px #770;
  border: 1px solid grey;
  margin: 10px;
  padding: 10px;
  background-color: #ddeeaa;
}

.mise_en_valeur { 
display:block; 
margin: 0.5em auto;
font-weight: bolder;font-size: 140%;
text-transform: uppercase;
text-align: center;
text-shadow: 2px 0px 3px #FF0,-1px 0px 3px #FF0, 0px 1px 5px #FF0,0px -1px 5px #FF0;
}
.nouveaute { 
border-left: 4px solid #ff6600;
padding-left: 20px;
margin-left: -25px;
}
.sommaire {
border: 1px dashed blue;
margin-left: 10px; padding-left: 5px;
width: 140px;
float: right;
font-weight: lighter;
}
.sommaire a { color: gray;font-size: 0.8em;}

.navigation {
  border-bottom: 2px solid #ffffff;
  font-size: 0.7em;color: gray;
  padding-top: 3px;
  margin-left: -6px;margin-right: -6px;
}
.navigation a { color: gray;}

.important {font-weight: bold;}

.conseil {
clear:both;
box-shadow: 0 0 10px #700;
border-radius:1em;
  border: 3px double #ff9900;
  margin:  5px 0;padding: 5px ;
  background-color: #ffcc00;
}

.cadre3d {
  border: 2px outset #ff9900;
  padding-right: 10px; padding-left: 10px;
}

.sticker {
border-radius: 0 4em;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-webkit-box-shadow: 7px 7px 5px #77B;
-moz-box-shadow: 7px 7px 5px #77B;
transform: rotate(-2deg);
box-shadow: 7px 7px 5px #77B;
border: 1px dashed grey;
padding: 20px 10px;
background: white none repeat scroll 0%;
text-align: center;
}
.sticker:hover{ transform: rotate(0deg);}
.sticker  img{
border-radius: 0 2em;
box-shadow: 7px 7px 5px #77B;
margin-bottom:10px;
}

.notes {font-size: smaller;font-style: italic;}

.lucarne {
  overflow: auto; height: 100px;
  background:white;
}
.lucarne_hor {
overflow: auto;
width: 580px;height: 100px;
border: 1px dotted blue;
padding: 0 5px;
font-size: 0.6em;
font-family: Verdana, Arial, Geneva, sans-serif, monospace;
background-color: white;
}

.flux {  clear: both;}
.g_float {
  margin: 5px 10px 5px 0px;
  float: left;
}
.d_float {
  margin: 5px 0px 5px 10px;
  float: right;
}
.colonneX2 {
  -moz-column-count:2;-moz-column-gap:2em;
  -webkit-column-count:2;-webkit-column-gap:2em;
}
.colonneX3 {
  -moz-column-count:3;
  -moz-column-gap:2em;
  -webkit-column-count:3;
  -webkit-column-gap:2em;
}
.col-gauche {
  width: 170px;
  float: left;
  margin-right: 20px;
}
.col-droite {
  width: 170px;
  float: right;
  margin-left: 20px;
}
.col#contenu {padding-top: 1px;}

.fond-record { background-color: yellow!important;
  border: 3px double green;
}

.vl {font-weight: bold;color: #3333ff;font-style: italic;}

#drapeaux {
  width: 35px;float:right;
  margin-top: -45px; margin-right: -5px;
}
#drapeaux a {padding:4px 0 0 2px;}
#drapeaux a:hover{background:blue;}

#nav-menu>li:before{
font-size:2em;color:red;
vertical-align:middle;
margin-right:0.5em;border-radius:2em;
background:grey;content:"+";
}
#nav-menu>:after {content:'>>>... affichage au survol'; color:grey;}


ul#nav-menu {  
background: url(http://lavl.free.fr/style/bleu_transparent.png);
background: linear-gradient(-125deg, rgba(240,240,255,0.9),   rgba(0,0,200,0.9) 40%, rgba(70,120,200,0.9),rgba(250,250,240,0.8));
color:white; padding: 3px 20px ;font-weight:bold;
text-shadow: 1px 1px 1px black;
border-radius: 6em 0;}

ul#nav-menu ul { 
    margin: 5px;padding: 5px 10px;
  background: transparent url(http://lavl.free.fr/style/bleu_transparent.png) repeat scroll 0%;
  font-size: 100%; color: white;
}

ul#nav-menu li { 
  position: relative;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}

ul#nav-menu li a { 
display:block;
  border: none;padding: 0px;
  text-decoration: none;
  color: #ffffff;
  font-size: 1.2em;font-weight: bold;
    }

ul#nav-menu ul { 
  border-style: solid;
  border-color: #cccccc black black #cccccc;
  border-width: 0px 1px 1px 0px;
  box-shadow: 6px 6px 8px #555;
  position: absolute;
/* display:block !important; hack IE*/
 display: none; 
  top: 10px;
  background: -moz-linear-gradient(45deg, rgba(4,4,55,0.7), rgba(0,0,200,0.9), rgba(70,120,200,0.6), rgba(0,0,20,0.9));
  background: linear-gradient(45deg, rgba(4,4,55,0.7), rgba(0,0,200,0.9), rgba(70,120,200,0.6), rgba(0,0,20,0.9));
  /* pour remplacer display none mais non compatible IE7
    transform: scaleY(0);
  transform-origin: 50% 0;
  transition:transform 1s ease; */
}
body:nth-of-type(1) ul#nav-menu ul{  /*  pour vrais navigateurs */
display:block; transform: scaleY(0);
  transform-origin: 50% 0;
  transition:transform 1s ease;
  }
ul#nav-menu ul li{
margin:0 1px; padding:2px 0px;
list-style-position: inside;
} 


ul#nav-menu li ul li a {padding: 2px 0px;}

ul#nav-menu li:hover ul { display: block; }/* Pour IE*/
body:nth-of-type(1) ul#nav-menu li:hover ul {transform: scaleY(1);} /*hack */


ul#nav-menu li a:hover { 
  background: white none repeat scroll 0%;
  color: #ff2222;
  font-weight: bold;
}