#slide {padding:0; margin:0; list-style:none; width:168px; height:315px; border:1px solid #ccc; position:relative; overflow:hidden; font-family: verdana, sans-serif; font-size:12px; margin-left:1px; text-align:left;}
#slide li.sub,
#slide li.top
{display:block; float:left; height:24px; line-height:24px; width:190px; color:#000; background:#eee; text-decoration:none;border-bottom:1px solid #fff; text-indent:20px; overflow:hidden; cursor:pointer;}
#slide li.sub {background-image: url(out.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(238, 238, 238); color: rgb(0, 0, 0); height: 24px; display: block; background-position: 5px 8px;}
#slide li.top a {text-decoration:none; color:#000; display:block; background:url(out.gif) no-repeat 5px 8px;}
#slide li.top a:hover {color:#069; background:#ddd url(out-over.gif) no-repeat 5px 8px;}
#slide li.clicked {color:#800; background-image: url(down.gif); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(221, 221, 221); color: rgb(204, 0, 0); height: 100px; display: block; background-position: 5px 8px; }
/* #slide li.sub div height = (maximum sub lines * sub line height) + top level link height(variable fY in jQuery) */
#slide li.sub div {background:#fff; height:100px; width:160px; padding:0 15px; line-height:1.2em; font-family: verdana, sans-serif; text-indent:0;}
#slide li div ul {padding:0; margin:0; list-style:none;}
#slide li div ul li {float:left; height:20px; width:100%;}
#slide li div ul li a {padding:0; margin:0;color:#888; text-decoration:none; background:#fff url(out.gif) no-repeat 5px 6px; font-size:12px; display:block; border-bottom:1px solid #ddd; height:19px; line-height:19px; width:100%; text-indent:20px;}
#slide li div ul li a:hover {color:#069; background:#fff url(out-over.gif) no-repeat 5px 6px;}