html
 {
 	font-family: TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif; 
 }

 header
 {
 	width:95%;
 	height:185px;
 padding:5px;
 font: bold 24px Arial ;

}
 #left
 {
 
 color:white;	
 }
a{outline:none; text-decoration:none;}

.ca-menu{
    padding: 0px;
    margin: 10px auto;
    width: 100%;height:100px;font-size:20px; 
    background-image: url('imags/bgf.jpg');
		background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color:#666666;
 border-radius: 25px;
    color:white;
}
.ca-menu li:hover{
    background-color: white;width:200px;;padding:5px;height:80px;

}
.ca-menu li:hover .ca-icon{
    color: black;
    font-size: 25px;
}
.ca-menu li:hover .ca-main{
    color: #00ccff;
    animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    animation: moveFromBottom 500ms ease;
}
@keyframes moveFromLeftRotate{
    from {
        transform: translateX(-100%) rotate(-90deg);
    }
    to {
        transform: translateX(0%) rotate(0deg);
    }
}
li {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    vertical-align: bottom; 
    border-radius: 15px 50px;/* IE9 fix: li v-aligns with baseline on hover without this */
}