/* ===================================================
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-image-bounce-dropdown.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
===================================================*/
.menu { width:149px; height:149px; padding:0; margin:0 1px 0 0; list-style:none; position:relative; font-family:arial, sans-serif; background-color: #da251c; float:left; background-image: -webkit-linear-gradient(-90deg, rgba(218, 37, 28, 0.4), rgba(218, 37, 28, 0)); background-image: -moz-linear-gradient(-90deg, rgba(218, 37, 28, 0.4), rgba(218, 37, 28, 0)); background-image: -ms-linear-gradient(-90deg, rgba(218, 37, 28, 0.4), rgba(218, 37, 28, 0)); background-image: none; left: 100px; }
.menu li.image {width:0; height:0; position:absolute; left:75px; bottom:0; z-index:10;
-moz-transition: 0.15s 0.1s;
-ms-transition: 0.15s 0.1s;
-o-transition: 0.15s 0.1s;
-webkit-transition: 0.15s 0.1s;
transition: 0.15s 0.1s;
}
.menu li.image b {display:block; width:100%; height:100%;
-moz-transition: 0.1s 0s;
-ms-transition: 0.1s 0s;
-o-transition: 0.1s 0s;
-webkit-transition: 0.1s 0s;
transition: 0.1s 0s;
}
.menu li.image b img {display:block; width:100%; height:100%;}

.menu li.list {position:absolute; left:0; top:0; width:149px; height:150px; text-align:center; background:#da251c; z-index:20;
-moz-transition: 0.15s 0.15s;
-ms-transition: 0.15s 0.15s;
-o-transition: 0.15s 0.15s;
-webkit-transition: 0.15s 0.15s;
transition: 0.15s 0.15s;
}
.menu li.list a  /* ME */ { color: #fff; text-decoration: none; }
.menu li.list b  /* same as menu:hover li.list b */ { color: #09c; font-size: 15px; line-height: 225px; text-decoration: none; }
.menu li.list a:hover  /* ME */ { color: #09c; }
.menu li.list b {display:block; margin-top:0; color:#fff; font-weight:normal; font-size:14px; line-height:150px; 
-moz-transition: 0.15s;
-ms-transition: 0.15s;
-o-transition: 0.15s;
-webkit-transition: 0.15s;
transition: 0.15s;
}
.menu:hover {z-index:100;}
.menu:hover li.image {width:180px; height:270px; left:-15px; bottom:-1px;
-moz-transition: 0.2s 0.5s;
-ms-transition: 0.2s 0.5s;
-o-transition: 0.2s 0.5s;
-webkit-transition: 0.2s 0.5s;
transition: 0.2s 0.5s;
}
.menu:hover li.image b {margin:46px 0 0 15px; width:83%; height:83%;
-moz-transition: 0.15s 0.7s;
-ms-transition: 0.15s 0.7s;
-o-transition: 0.15s 0.7s;
-webkit-transition: 0.15s 0.7s;
transition: 0.15s 0.7s;
}
.menu:hover li.list { top:150px; height:200px; margin-left:-1px; -moz-transition: 0.5s 0.25s; -ms-transition: 0.5s 0.25s; -o-transition: 0.5s 0.25s; -webkit-transition: 0.5s 0.25s; transition: 0.5s 0.25s; }
.menu:hover li.list b {margin-top:-20px; color:#09c; font-size:15px; line-height:225px;
-moz-transition: 0.25s 0.75s;
-ms-transition: 0.25s 0.75s;
-o-transition: 0.25s 0.75s;
-webkit-transition: 0.25s 0.75s;
transition: 0.25s 0.75s;
}
.clear {clear:left;}