/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dropslide-pushdown.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
.menu {padding:0; margin:0; list-style:none; width:750px; font-family:arial, sans-serif; min-height:35px; position:relative;}
.menu li.main {float:left; height:35px; padding-right:1px;}
.menu li.main a {display:block; float:left; height:35px; line-height:35px; padding:0 15px; color:#fff; text-decoration:none; font-size:12px; font-weight:bold;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.menu li.t1 a {background:#877666;}
.menu li.t2 a {background:#b99645;}
.menu li.t3 a {background:#b38a7b;}
.menu li.t4 a {background:#c09f7c;}
.menu li.t5 a {background:#90b490;}
.menu li.t6 a {background:#b1ba8f;}
.menu li.t7 a {background:#dea58a;}

.menu li.t8 a {padding:0 10px}

.menu li.sub {clear:left; float:left; width:750px; height:0; overflow:hidden; border:0; position:relative; 
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.menu li.t8 {position:absolute; right:0; bottom:0px; height:0; overflow:hidden;
border-radius: 10px 10px 0 0;
-moz-transition: height 0.5s ease-in-out;
-ms-transition: height 0.5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
-webkit-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}

li.p1 {background:#b99645;}
li.p2 {background:#b38a7b;}
li.p3 {background:#c09f7c;}
li.p4 {background:#90b490;}

.menu li.sub dl {float:left; margin:10px -9px 0 10px; padding:10px; background:#fff;
-moz-border-radius:8px;
border-radius:8px;
}
.menu li.sub dt {line-height:18px; font-size:14px; font-weight:bold; padding:0 10px; margin:1px 0;
-moz-border-radius:20px;
border-radius:20px;
}
.menu li.sub dd a {display:block; padding-left:30px; line-height:20px; font-size:12px; text-decoration:none; color:#666;
-moz-border-radius:20px;
border-radius:20px;
}
.menu li.sub span {position:absolute; left:10px; bottom:10px; display:block; width:730px; background:#000;
-moz-border-radius:8px;
border-radius:8px;
}
.menu li.sub span p {padding:0 0 0 20px; margin:0; line-height:22px; color:#eee; font-weight:bold; font-size:12px;}
.menu li.sub span p a:hover {text-decoration:none;}
.menu li:hover {direction:ltr;}

li.p1 dl {width:223px; height:240px;}
li.p1 dt {color:#b99645; border:1px solid #b99645;}
li.p1 dd {padding:0; margin:0; width:223px;}
li.p1 dd a:hover {background:#b99645; color:#fff;}
li.p1 span p a {color:#b99645; font-weight:bold;}

li.p2 dl {width:223px; height:100px;}
li.p2 dt {color:#b38a7b; border:1px solid #b38a7b;}
li.p2 dd {padding:0; margin:0; width:223px;}
li.p2 dd a:hover {background:#b38a7b; color:#fff;}
li.p2 span p a {color:#b38a7b; font-weight:bold;}

li.p3 dl {width:344px; height:100px;}
li.p3 dt {color:#c09f7c; border:1px solid #c09f7c;}
li.p3 dd {padding:0; margin:0; width:344px;}
li.p3 dd a:hover {background:#c09f7c; color:#fff;}
li.p3 span p a {color:#c09f7c; font-weight:bold;}

li.p4 dl {width:162px; height:170px;}
li.p4 dt {color:#90b490; border:1px solid #90b490;}
li.p4 dd {padding:0; margin:0; width:162px;}
li.p4 dd a:hover {background:#90b490; color:#fff;}
li.p4 span p a {color:#90b490; font-weight:bold;}

.menu li.t2:hover ~ li.p1 {height:330px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}
li.p1:hover {height:330px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}

.menu li.t3:hover ~ li.p2 {height:170px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}
li.p2:hover {height:170px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}

.menu li.t4:hover ~ li.p3 {height:170px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}
li.p3:hover {height:170px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}

.menu li.t5:hover ~ li.p4 {height:240px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}
li.p4:hover {height:240px;
-moz-transition: height 0.5s ease-in-out 0.25s
-ms-transition: height 0.5s ease-in-out 0.25s
-o-transition: height 0.5s ease-in-out 0.25s
-webkit-transition: height 0.5s ease-in-out 0.25s
transition: height 0.5s ease-in-out 0.25s
}

.clear {clear:left;}