/* ================================================================ 
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/css3-slide-list.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#css3Slide {width:750px; height:24px; margin:20px auto 70px auto; position:relative; z-index:500;}
#css3Slide ul {padding:0; margin:0; list-style:none; height:27px; float:left; position:relative; z-index:500;}
#css3Slide ul li {float:left; height:27px; font: 12px/24px arial, sans-serif; margin:0 0 0 10px;}
#css3Slide ul li span {display:block; float:left; height:27px; padding:0 15px 0 0;}
#css3Slide ul li b {display:block; float:left; height:27px; padding:0 0 0 15px; margin-left:-10px; cursor:default;}

#css3Slide ul li:hover > span {background:url(tab.png) no-repeat right top; color:#fff;}
#css3Slide ul li:hover > span b {background:url(tab.png) no-repeat left top;}

#css3Slide ul li.blank {width:750px; height:0; position:absolute; left:0; top:24px; overflow:hidden; border-top:3px solid #666; z-index:-1; margin:0; padding:0;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.base {width:750px; height:310px; background:url(back.png) repeat-x; position:absolute; top:-310px;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
.shadow {width: 750px; height:10px; position:absolute; left:0; bottom:0; background:url(shadow.png);}

#css3Slide ul:hover li.blank {height:310px;}
#css3Slide ul:hover li.blank .base {top:0;}

#css3Slide ul li .container {width:750px; height:0; position:absolute; left:0; top:27px; z-index:500; overflow:hidden;  background: url(trans.png);
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide ul li:hover .container {height:310px;}

#css3Slide ul li .container .sub {width:750px; position:relative; height:260px; padding:20px 0; top:-300px;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#css3Slide ul li:hover .container .sub {top:0;}

#css3Slide ul li .container .sub h4 {font-size:18px; padding:0 0 20px 10px; margin:0;}
#css3Slide ul li .container .sub dl {padding:0; margin:0;}
#css3Slide ul li .container .sub dl dt {font-size:14px; font-weight:bold; height:30px; padding-left:10px;}
#css3Slide ul li .container .sub dl dd {display:block; height:30px; line-height:30px; padding:0 0 0 10px; margin:0; font-weight:bold; color:#888; width:150px; background: url(trans.png);}

#css3Slide ul li .container .sub dl dd p {display:block; position:absolute; left:150px; top:65px; width:270px; height:230px; font-weight:normal; padding:0; margin:0; line-height:20px; opacity:0; filter: alpha(opacity=0); background: url(trans.png); z-index:1;
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide ul li .container .sub dl dd p em {font-style:normal; font-weight:bold; text-decoration:none;}
#css3Slide ul li .container .sub dl dd p a {color:#069; font-weight:bold; text-decoration:none;}
#css3Slide ul li .container .sub dl dd p a:hover {text-decoration:underline;}

#css3Slide ul li .container .sub dl dd img {position:absolute; right:0; padding-right:30px; top:50px; opacity:0; filter: alpha(opacity=0); z-index:1; 
transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}

#css3Slide ul li .container .sub dl dd.current {color:#000; background:url(arrow.gif) no-repeat 120px center;}
#css3Slide ul li .container .sub dl dd.current p {opacity:1; filter: alpha(opacity=100); z-index:20;}
#css3Slide ul li .container .sub dl dd.current img {opacity:1; filter: alpha(opacity=100); z-index:20;}

#css3Slide ul li .container .sub dl:hover dd.current {color:#888; background:none;}
#css3Slide ul li .container .sub dl:hover dd.current p {opacity:0; filter: alpha(opacity=0); z-index:10;}
#css3Slide ul li .container .sub dl:hover dd.current img {opacity:0; filter: alpha(opacity=0); z-index:10;}

#css3Slide ul li .container .sub dl:hover dd:hover {color:#000; cursor:default; background:url(arrow.gif) no-repeat 120px center;}
#css3Slide ul li .container .sub dl:hover dd:hover p {opacity:1; filter: alpha(opacity=100); z-index:20;}
#css3Slide ul li .container .sub dl:hover dd:hover img {opacity:1; filter: alpha(opacity=100); z-index:20;}