/* Navbar */
.topnav{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("../images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
.topnav>li{display:block;float:left;margin:0;padding:0;position:relative;}
.topnav>li>a{display:block;float:left;color:#366;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("../images/bgDIVIDER.gif") no-repeat top right;}
.topnav>li>a:hover, .topnav>li:hover, .topnav .hover{background:transparent url("../images/bgHOVER.gif") no-repeat top right;}
.topnav>li>a>span{display:block;height:24px;}
.topnav>li>a:hover>span{background:transparent url("../images/menu-ptr.png") center 15px no-repeat;}
.topnav>li>a.current,.topnav  li a.current:hover{color:#fff;background:transparent url("../images/bgON.gif") no-repeat top right;}

/* submenu */
.topnav .submenu{display:none;position:absolute;top:36px;left:0px;background-color:#366;border-top:4px solid #336666;border-bottom:2px solid #336666;z-index:10;}
.topnav .submenu ul{}

/* submenu_javascript styles */
.submenu_javascript{
	width:280px;
	font-size:10px;
}
.submenu_javascript ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.submenu_javascript li{
	width:100px;
	height: 40px;
	padding:10px;
	background-color: silver;
	float: left;
	margin:10px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

.submenu_javascript li:hover{
	background-color: lightblue;
	cursor: pointer;
}

.submenu_javascript li span{
	font-size:smaller;
	font-style: italic;
}

/* submenu_tutorial styles */
.submenu_tutorial{
	width:150px;
}
.submenu_tutorial ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.submenu_tutorial li{
	padding:5px;
}
.submenu_tutorial li:hover{
	background-color:silver;
}