/* demo page styles */
.example {
    position:relative; background:#484848; width:58x0px; float:right; 
    padding-top:25px; padding-left:0px; z-index: 1000;}

/* main menu styles */

.nav,.nav ul {list-style:none; margin:0; padding:0;}

.nav { position:relative; height:20px;}

.nav ul { height:0px; left:0; overflow:hidden; position:absolute; top:30px; }

.nav li { float:left; position:relative; height:30px;}

.nav li a {font-family: Tahoma, Geneva, sans-serif; color:#FFF; display:block; font-size:14px;
		   line-height:15px; padding:0px 12px; text-decoration: none; 
		   border-right-width: 1px; border-right-style: solid; border-right-color: #999999;
	       transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; }

.nav li:hover > a { color:#CCC; }

.nav li:hover ul.subs { height:auto; width:195px;margin-bottom:10px; color:#555555;  }

.nav ul li { -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s;
             opacity:0; transition:0.5s; width:100%; color:#555555; }

.nav li ul li { -moz-transition-delay:0.5s; -o-transition-delay:0.5s; -webkit-transition-delay:0.5s;
                transition-delay:0.5s; color:#555555;}

.nav li:hover ul li { opacity:1; -moz-transition-delay:0.5s; -o-transition-delay:0.5s;
                     -webkit-transition-delay:0.5s;transition-delay:0.5s; color:#555555;}

.nav ul li a { background:#959595; border-color:#999999; color:#555555; line-height:10px; font-size:13px;
              -moz-transition:1.0s; -o-transition:1.0s; -webkit-transition:1.0s; transition:1.0s; }

.nav li:hover ul li a { line-height:40px; color:#FFF; }

.nav ul li a:hover {
    background:#555555; color:#FFF; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));
}