/*<!--style css pour menu index  -->*/

#red    {background: rgb(255,0,0);} 
 
img:hover{width:300;height:300;
          opacity:1.0;
          filter:alpha(opacity=100);   } 
.right {  position: absolute;
          top:20px;
	      right: 120px;   
          /*border: 3px solid #73AD21;*/
          /* padding: 10px;*/
}
.left { position: absolute;
	    right:75%;  
        /* padding: 10px;*/
} 
.gradients {
background-image: -webkit-linear-gradient(right top, lightsteelblue 0%, white 100%);
background-image:    -moz-linear-gradient(right top, lightsteelblue 0%, white 100%);
background-image:     -ms-linear-gradient(right top, lightsteelblue 0%, white 100%);
background-image:      -o-linear-gradient(right top, lightsteelblue 0%, white 100%);
background-image:         linear-gradient(right top, lightsteelblue 0%, white 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D60F0F',endColorstr='#FFDD00', GradientType=1);
}
body{
background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, white 50%);
background-image:    -moz-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);
background-image:     -ms-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);
background-image:      -o-radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);
background-image:         radial-gradient(50% 50%, ellipse closest-side, #53B8EB, #B8FB97 50%);}
 

/****************************/










ul.svertical{ width: 100px; /* width of menu */
              overflow: auto;
              background: #b7c9e1; /* background of menu */ 
              margin: 0;
              padding: 0;
              padding-top: 7px; /* top padding */ list-style-type: none;} 
ul.svertical li{ text-align: right; /* right align menu links */ } 
ul.svertical li a{ position: relative;
                display: inline-block;
                text-indent: 5px;
                overflow: hidden;
                background: rgb(127, 201, 68); /* initial background color of links */
                font: bold 16px Germand;
                text-decoration: none;
                padding: 10px;
                margin-bottom: 7px; /* spacing between links */
                color: black;
               -moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /*inner right shadow added to each link */
               -webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
                box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
               -moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
               -webkit-transition: all 0.2s ease-in-out;
               -o-transition: all 0.2s ease-in-out;
               -ms-transition: all 0.2s ease-in-out;
               transition: all 0.2s ease-in-out;} 
ul.svertical li a:hover{ padding-right: 40px; /* add right padding to expand link horizontally to the left */
                        color: black;
                        background: rgb(153,249,75);
                       -moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
                       -webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
                        box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);  } 
ul.svertical li a:before{ /* CSS generated content: slanted right edge */
                        content: "";
                        position: absolute;
                        left: 0;
                        top: 0;
                        border-style: solid; 
                        border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
                        border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */ } */