html{
    background: #ffffff;
    font: 1.1em sans-serif;
}
ul{
    display: table;
    width: 100%;
    padding: 0;
}
ul li{
    display: table-cell;
}
ul{
    background: linear-gradient(deepskyblue, #FFFFFF);
}
ul{
    background: -webkit-linear-gradient(deepskyblue, #FFFFFF);
    background:    -moz-linear-gradient(deepskyblue, #FFFFFF);
    background:     -ms-linear-gradient(deepskyblue, #FFFFFF);
    background:      -o-linear-gradient(deepskyblue, #FFFFFF);
    background:         linear-gradient(deepskyblue, #FFFFFF);
}
ul{
     background: #FFFFFF;
border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
                0 3px 5px rgba(0, 0, 0, .2),
                0 5px 10px rgba(0, 0, 0, .2),
                0 20px 20px rgba(0, 0, 0, .15);
 }
ul li a{
    display: block;
    text-align: center;
    color: rgba(0, 0, 0, .7); 
    text-decoration: none;
    padding: 8px 8px 17px 8px;
}
ul li a{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 32%) inset, 
                0 -2px 0 hsl(210, 100%, 38%) inset, 
                0 -3px 0 hsl(210, 100%, 44%) inset, 
                0 -4px 0 hsl(210, 100%, 50%) inset, 
                0 -5px 0 hsl(210, 100%, 60%) inset;
}
ul li:first-child a{
    border-radius: 3px 0 0 3px;
}
ul li:last-child a{
    border-radius: 0 3px 3px 0;
}
ul li a:hover, 
ul li a:focus{
    background: rgba(255,255,255,.2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                0 -1px 0 hsl(210, 100%, 42%) inset, 
                0 -2px 0 hsl(210, 100%, 48%) inset, 
                0 -3px 0 hsl(210, 100%, 54%) inset, 
                0 -4px 0 hsl(210, 100%, 60%) inset, 
                0 -5px 0 hsl(210, 100%, 70%) inset; 
padding: 8px 25px 17px 25px;
transition: padding .3s;
} 
ul li a:active{
    background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1)); 
    box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}