/** HTML
		<ul class="dropdown">
			<li><a>How Do I? <span class="arrow"></span></a>
				<ul class="submenu">
					<li>
					stuff that drops down
					</li>
				</ul>
			</li>
		</ul>


*/
/** Dropdown w JQuery **/
/** -------------------------- **/
/* LEVEL ONE */
ul.dropdown {
  position: relative;
  margin: 0 0 0 10px;
  z-index: 9999;
  list-style: none;
  padding: 0; }
  ul.dropdown > li {
    width: 195px;
    height: 30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: url(/data/images/bar_blue44px.png) repeat-x;
    background-size: 100% 100%;
    float: left;
    zoom: 1;
    position: relative;
    padding: 0 0 0 15px;
    margin: 0;
    cursor: pointer; }
    ul.dropdown > li > a {
      height: 30px;
      line-height: 30px;
      display: block;
      padding: 0;
      color: #e3f6ff;
      font-family: "Crimson Text", Georgia, Times, serif;
      font-style: italic;
      font-weight: 600;
      -webkit-transition: all .25s ease-in;
      -moz-transition: all .25s ease-in;
      -o-transition: all .25s ease-in;
      transition: all .25s ease-in;
      font-size: 19px;
      text-decoration: none; }
      ul.dropdown > li > a:hover {
        color: white; }
    ul.dropdown > li.hover, ul.dropdown > li:hover {
      background: #0c2339; }
  ul.dropdown .submenu {
    width: 210px;
    display: none;
    position: absolute;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 99;
    list-style: none; }
    ul.dropdown .submenu > li {
      float: left;
      background: none;
      margin: 0px;
      padding: 0; }
  ul.dropdown .arrow {
    position: absolute;
    width: 10px;
    height: 9px;
    background: url(/data/images/arrow.png) no-repeat;
    top: 10px;
    right: 13px; }
