/* 
    Document   : menus
    Created on : Feb 4, 2009, 3:15:56 PM
    Author     : mafias
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/


#menu {
	/*width: 100%;
	background: #00A5A5;
	border-bottom: 0px #D0DADB solid;
	padding-left: 10px;
	height: 33px;
    */
}

#menu  ul {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1em;
	list-style: none;
	z-index: 90
}

#menu  ul li {
	float: left;
	margin: 0 3px 0 0;
	padding: 0;
	/*font-size: 12px;*/
	/*line-height: 1,5em;*/
	list-style-type: none;
}
/*
#menu ul li a {
	float: left;
	display: block;
	width: auto;
	font-weight: normal;
	background: transparent;
	text-decoration: none;
	color: #fff;
	margin: 0;
	padding: 0.9em 0.8em 0.5em 1em;
}

#menu  ul li a:hover {
	color: #fff;
	text-decoration: none;
}
*/
#menu  ul li.sep {
	color: white;
	padding: 0.8em 0em 0.5em 0em;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu  ul li a {
	float: none;
}

/* End IE5-Mac hack */
#menu  ul.level2, #menu ul.level3 {
	position: absolute;
	top:0;
	left:0;
    margin:2px 0 0 10px;
	visibility: hidden;
}

#menu  ul.level2 li, #menu ul.level3 li {
	/*border-bottom: 1px solid #fff;*/
	display: block;
	float: none;
	margin-bottom: 2px;
	padding:0;
	width: 150px;
    background: #CBB385;

}

#menu  ul.level2 li a, #menu ul.level3 li a {
    display: block;
	padding: 5px 0px 0px 7px;
    text-decoration:none;
    color:#362C34;
    background-image:none;
    font-family:Verdana, Arial, Helvetica;
    font-size:12px;
   	width: 150px;
}

#menu  ul.level2 li a:hover,#menu  ul.level3 li a:hover {
	font-weight: normal;
	text-decoration:underline;
	background-image: none;
}

}
/*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Dropdown Menu with Scriptaculous/Prototype</title>
		 <link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
		<script src="../prototype.js" type="text/javascript"></script>
		<script src="../scriptaculous.js" type="text/javascript"></script>

		<link href="menu.css" rel="stylesheet" type="text/css" />
		<script src="menu.js" type="text/javascript"></script>

		<style type="text/css">
		body {
		  background: #ffffff;
		  margin: 0px;
		  padding: 0px;
		  color: #000000;
		  font-family: Verdana;
		}
		</style>


	</head>
	<body>
		<br />

		<div id="menu">
		<ul class="level1" id="root">
		  <li>
		    <a href="#">Top One</a>
		    <ul class="level2">
		      <li><a href="#">Sub A</a></li>
		      <li>

		        <a href="#">Sub B</a>
		        <ul class="level3">
		          <li><a href="#">Level 3 One</a></li>
		          <li><a href="#">Level 3 Two</a></li>
		          <li><a href="#">Level 3 Three</a></li>
		        </ul>
		      </li>

		      <li><a href="#">Sub C</a></li>
		      <li>
		        <a href="#">Sub D</a>
		        <ul class="level3">
		          <li><a href="#">Level 3 AAA</a></li>
		          <li><a href="#">Level 3 BBB</a></li>
		          <li><a href="#">Level 3 CCC</a></li>

		          <li><a href="#">Level 3 EEE</a></li>
		        </ul>
		      </li>
		    </ul>
		  </li>
		  <li class="sep">|</li>
		  <li><a href="#">Top Two</a></li>

		  <li class="sep">|</li>
		  <li><a href="#">Top Three</a></li>
		  <li class="sep">|</li>
		  <li>
		    <a href="#">Top Four</a>
		    <ul class="level2">
		      <li><a href="#">Sub A</a></li>

		      <li>
		        <a href="#">Sub B</a>
		        <ul class="level3">
		          <li><a href="#">Level 3 One</a></li>
		          <li><a href="#">Level 3 Two</a></li>
		          <li><a href="#">Level 3 Three</a></li>
		        </ul>

		      </li>
		      <li><a href="#">Sub C</a></li>
		      <li><a href="#">Sub D</a></li>
		    </ul>
		  </li>
		  <li class="sep">|</li>
		  <li><a href="#">Top Five</a></li>

		</ul>
		</div>

	</body>
</html>





*/




