/*** Container ***/
.OptionNav {
   position: relative;
   display: inline-block;
}

/*** Menu Icon ***/
.OptionNav > span {
   font-family: arial;
   font-size: 13px;
   background: #EEEEEE;
   padding: 2px 3px;
   border-radius: 2px;
   border: 1px solid #C0C0C0;
   cursor: pointer;
   position: relative;
}
.OptionNav:hover > span,
.OptionNav.On > span {
   background: #c0c0c0;
}

/*** Pseudo Title Text ***/
.OptionNav > span > b {
   display: none;
   position: absolute;
   top: -30px;
   left: -15px;
   background-color: white;
   padding: 5px;
   border: 1px solid #C0C0C0;
   font-weight: normal;
   font-size: 11px;
}
.OptionNav > span:hover > b {
   display: block;
}
.OptionNav.On > span:hover > b {
   display: none;
}

/*** Container of Flyout ***/
.OptionNav > div {
   position: absolute;
   top: 18px;
   left: 0px;
   background-color: #EEEEEE;
   border: 1px solid #C0C0C0;
   box-shadow: 2px 2px 3px black;
   text-align: left;
   z-index: 100;
   display: none;
}
.OptionNav.On > div {
   display: block;
}

/*** Flyout Links ***/
.OptionNav a {
   font-family: verdana;
   font-size: 11px;
   color: black;
   padding: 5px 20px 5px 10px;
   display: block;
   text-decoration: none;
   white-space: nowrap;
}
.OptionNav a:hover,
.OptionNav a:active {
   color: black;
   text-decoration: none;
   background-color: #c0c0c0;
}

.OptionNav.Rev > div {
   right: 0px;
   left: auto;
}
@media (max-width: 910px ) {
   .OptionNav > div {
      right: 0px;
      left: auto;
   }
}