/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
/* Copyright Stu Nicholls */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
.menu {margin:0 auto; padding:0; list-style:none; height:280px; position:relative; z-index:10; width:300px;}
.menu li {float:left; clear:left; height:35px; background:url(trans.gif);}
.menu li a {display:block; width:300px ; text-align:center; height:35px; float:left; position:relative; z-index:10; line-height:35px; white-space:nowrap; font:bold 12px/35px georgia, serif; opacity:0; filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
.menu li.icons {width:auto; position:absolute; left:0; top:0; z-index:-1;}

.menu li.icons b {display:block; width:300px; font:normal normal 14px/35px Arial, Helvetica, sans-serif; color:#fff; text-align:center;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}

.menu li:hover a {font-size:30px;}

.menu li.p1:hover ~ li.icons b.m1 {font-size:30px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}
.menu li.p1:hover ~ li.icons b.m2 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p1:hover ~ li.icons b.m3 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p1:hover ~ li.icons b.m4 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}

.menu li.p2:hover ~ li.icons b.m1 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p2:hover ~ li.icons b.m2 {font-size:30px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}
.menu li.p2:hover ~ li.icons b.m3 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p2:hover ~ li.icons b.m4 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p2:hover ~ li.icons b.m5 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}

.menu li.p3:hover ~ li.icons b.m1 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p3:hover ~ li.icons b.m2 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p3:hover ~ li.icons b.m3 {font-size:35px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}
.menu li.p3:hover ~ li.icons b.m4 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p3:hover ~ li.icons b.m5 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p3:hover ~ li.icons b.m6 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}

.menu li.p4:hover ~ li.icons b.m1 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}
.menu li.p4:hover ~ li.icons b.m2 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p4:hover ~ li.icons b.m3 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p4:hover ~ li.icons b.m4 {font-size:30px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}
.menu li.p4:hover ~ li.icons b.m5 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p4:hover ~ li.icons b.m6 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p4:hover ~ li.icons b.m7 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}

.menu li.p5:hover ~ li.icons b.m2 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}
.menu li.p5:hover ~ li.icons b.m3 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p5:hover ~ li.icons b.m4 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p5:hover ~ li.icons b.m5 {font-size:30px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}
.menu li.p5:hover ~ li.icons b.m6 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p5:hover ~ li.icons b.m7 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p5:hover ~ li.icons b.m8 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}

.menu li.p6:hover ~ li.icons b.m3 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}
.menu li.p6:hover ~ li.icons b.m4 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p6:hover ~ li.icons b.m5 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p6:hover ~ li.icons b.m6 {font-size:30px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}
.menu li.p6:hover ~ li.icons b.m7 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p6:hover ~ li.icons b.m8 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}

.menu li.p7:hover ~ li.icons b.m4 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}
.menu li.p7:hover ~ li.icons b.m5 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p7:hover ~ li.icons b.m6 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p7:hover ~ li.icons b.m7 {font-size:30px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}
.menu li.p7:hover ~ li.icons b.m8 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}

.menu li.p8:hover ~ li.icons b.m5 {font-size:14px; color:#777; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}
.menu li.p8:hover ~ li.icons b.m6 {font-size:18px; color:#666; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);}
.menu li.p8:hover ~ li.icons b.m7 {font-size:24px; color:#444; text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);}
.menu li.p8:hover ~ li.icons b.m8 {font-size:30px; color:#000; text-shadow: 0px 8px 4px rgba(0, 0, 0, 0.6);}