/* File Name:    h5-nav-css                                              */
/* Date Created: 2015-08-01T21:09-04:00 by TS2                           */
/* Last Updated: 2018-09-07T20:12-04:00                                  */
/* Purpose:      Define navigation bar for OAA Site                      */
/* Source:                                                               */
/* http://www.adam-bray.com/blog/91/easy-html-5-css-3-navigation-menu/   */
nav {
  background-color: #dddddd;
  border: 1px solid #808080;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  color: #888888;
  display: block;
  height: 30px;
  margin: 8px 2px 8px 2px;
  overflow: hidden;
  text-align: left;
  width: auto; 
}
nav ul {
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline-block;
    list-style-type: none;
      
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; 
}
      
nav > ul > li > a > .caret,
nav > ul > li > div ul > li > a > .caret {
    border-top: 4px solid #aaa;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    vertical-align: middle;
  
    -webkit-transition: color 0.1s linear;
    -moz-transition: color 0.1s linear;
    -o-transition: color 0.1s linear;
    transition: color 0.1s linear; 
}  
nav > ul > li > div ul > li > a > .caret {
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-right: 4px solid transparent;
	border-left: 4px solid #aaa;
	margin: 0 0 0 8px;
}

nav > ul > li > a {
    color: black;
    display: block;
    line-height: 30px;
    padding: 0 4px;
    text-decoration: none;
}
nav > ul > li:hover {
    background-color: rgb(238, 238, 238); /* #eeeeee */
}
nav > ul > li:hover > a {
    color: rgb(0, 0, 128); /* navy */
}
nav > ul > li:hover > a > .caret {
    border-top-color: rgb(0, 0, 0);
}	
nav > ul > li > div ul > li:hover > a > .caret {
	border-left-color: rgb(0, 0, 0);
}      
nav > ul > li > div,
nav > ul > li > div ul > li > div {
    background-color: rgb(204, 204, 204); /* #cccccc */
    border-top: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    display: none;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 140px;
    visibility: hidden;
  
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
}
nav > ul > li > div ul > li > div {
	background-color: rgb(204, 204, 204);
	border-radius: 0 4px 4px 4px;
	box-shadow: inset 2px 0 5px rgba(0,0,0,.15);
	margin-top: -42px;
	right: -140px;
}
nav > ul > li:hover > div,
nav > ul > li > div ul > li:hover > div {
    display: block;
    opacity: 1;
    visibility: visible;
}

nav > ul > li > div ul > li,
nav > ul > li > div ul > li > div ul > li {
    display: block;
	position: relative;
}
nav > ul > li > div ul > li > a,
nav > ul > li > div ul > li > div ul > li > a {
    color: black;
    display: block;
    padding: 12px 24px;
    text-decoration: none;
}
nav > ul > li > div ul > li:hover > a {
    background-color: rgba( 255, 255, 255, 0.1);
}