.menu-container-positioner{
    position: relative;
    z-index: 10000;
  }

/*NAV STYLES*/

/*   This is the new mobile menu - it has a media query so no styles will be inherited by the fullsize menu  */
@media screen and (max-width: 960px){
  
  
  /* Common font formatting */
  ul#topnav,
  ul#topnav a,
  ul#topnav h4{
    font: normal normal 14px/1 Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000;
    margin: 0;
    display: block;
  }
  
  ul#topnav h4 strong{
    display: inline;
  }
  
  ul#topnav a,
  ul#topnav h4{
    display: block;
    cursor: pointer;
    padding: 1em;
    border-bottom: 1px solid #d6d6d6;
  }
  
  ul#topnav h4.with-link{
    padding: 0;
    border-bottom: none;
  }
  
  /* Common list formatting */
  ul#topnav,
  ul#topnav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  
  ul#topnav li,
  ul#topnav ul li{
    display: block;
  }
  
  ul#topnav img{
    display: none;
  }
  
  /*1st level links*/
  ul#topnav > li > a{
    background-color: #EEEEEE;
  }
  
  ul#topnav > li > a:before{
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-style: solid;
    border-width: .4em 0 .4em .55em;
    border-color: transparent transparent transparent #C8C6DB;
    margin: 0 .75em 0 0;
  }
  
  /*2nd level links*/
  ul#topnav .sub{
    background-color: #fff;
  }
  
  ul#topnav .sub h4 a,
  ul#topnav .sub .h4-submenu h4.without-link,
  ul#topnav .sub .h4-submenu h4 a{
    padding-left: 2em;
  }
  
  ul#topnav .sub .h4-submenu h4.without-link:before,
  ul#topnav .sub .h4-submenu h4 a:before{
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    border-style: solid;
    border-width: .4em 0 .4em .55em;
    border-color: transparent transparent transparent #C8C6DB;
    margin: 0 .75em 0 0;
  }
  
  ul#topnav .sub .h4-submenu a{
    padding-left: 3.35em;
  }
  
  
  /*The dynamic stuff...
  -------------------------------------*/
  
  /*Top level links*/
  ul#topnav{
    display: none;
  }
  
  ul#topnav.show-mobilemenu{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  
  /*Opening submenus*/
  .sub{
    display: none;
  }
  
  .open .sub{
    display: block;
  }
  
  ul#topnav .h4-submenu ul{
    display: none;
  }
  
  ul#topnav .open.h4-submenu ul{
    display: block;
  }
  
  /*Changing the arrows*/
  ul#topnav > li.open > a:before{
    border-width: .55em .4em 0 .4em;
    border-color: #C8C6DB transparent transparent transparent;
  }
  
  ul#topnav .sub .h4-submenu.open h4.without-link:before,
  ul#topnav .sub .h4-submenu.open h4 a:before{
    border-width: .55em .4em 0 .4em;
    border-color: #C8C6DB transparent transparent transparent;
  }
}


/*   

This is the original "full size" menu - I added a media query so the mobile menu wouldn't inherit anything
I had to modify the HTML code to move the classes that float items - for example, ul.left
I updated the CSS to use the class w/o the selector - example, ul.left became .left

*/
 /* hiding old mobile menu */
  body .rwdNav 
  { border: none; }

@media screen and (min-width: 961px){
  
  /*New stuff
  ------------------------------------*/
  ul#topnav .mobile-title{
    display: none;
  }
  
  ul#topnav h4{
    display: block;
  }
  
  body ul#topnav .margin-top{
    margin-top: 1em;
  }
  body ul#topnav .margin-bottom{
    margin-bottom: 1em;
  }


  
  /*End new stuff
  ------------------------------------*/
  
  #home ul#topnav li.first
  {
     /* margin-left:3px;*/
  }

  .sub.government .left h4
  {
      padding:10px 0! important;
  }

  #topnav h4,
  #topnav h4 a
  {
    color: #52477A;
    font: 600 16px/20px 'Cabin Condensed',Arial, sans-serif! important;
    margin: 0px;
    padding: 0 0 .25em 0;
    text-decoration:none;
  }

  #topnav h4 a:hover
  {
      text-decoration:underline! important;
  }

  /*   * * * *  .sub  * * * *   */
  .sub .left {
      float:left;
      width:130px;
      border-right:1px #dbdbdb solid;
      height:100%;
      padding-right:10px! important;
  }
  
  .sub .right {
      float:left;
      width:210px;
      padding-left:20px! important;
  }

  .sub .right li
  {
      float:none! important;
  }
  /*   * * * *  ul#topnav  * * * *   */
  ul#topnav {
      margin: 0 auto;
      padding: 0;
      width: 935px;
      list-style: none;
      border-bottom: 2px solid #E47D03;
      height:63px;
    background: #FFF;
  }
  ul#topnav li 
  {
      float:left;
      margin: 0;
      padding: 0;
      position: relative;
      z-index: 50;
  }
  /*
  ul#topnav li a Styles main nav buttons {
      float: left;
      display: block;
  }
  */

  ul#topnav li .sub 
  {
      background:white;
      float: left;
      display: none;
      z-index: 100 !important;
      position: absolute;
      top: 65px;
      left: 0;
      width:390px! important;
      min-height: 270px;
      height:100%;
      padding: 15px;
      border-left:3px solid #9b999a;
      border-right:3px solid #9b999a;
      border-bottom:3px solid #9b999a;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      -moz-border-radius-bottomleft:10px;
      -moz-border-radius-bottomright:10px;
  }
  ul#topnav li .row {
      clear: both;
      float: left;
      width: 100%;
  }
  ul#topnav li .sub ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }

  ul#topnav li .sub ul.right a {
      margin:0;
      padding:0;
  }

  ul#topnav .sub ul li
  {
      float:none! important;
  }

  ul#topnav li .sub.resources .resoures-topic a,
  ul#topnav .sub ul li a /*Styles subnav buttons*/ {
      float: none;
      text-indent: 0; /*--Reset text indent--*/
      height: auto;
      display: block;
      border: none;
      color:#652a96;
      font-size:14px;
      font-family:'Cabin Condensed',Arial, sans-serif! important;
      padding:3px 0! important;
  }

  ul#topnav .sub ul li a:hover
  {
      text-decoration:none;
  }
  /***********RESOURCES***********/
  ul#topnav li .sub.resources
  {
      width:800px! important;
      height:280px;
      margin-left:11px;
  }

  ul#topnav li .sub.resources .left
  {
      float:left;
      width:380px;
  }

  ul#topnav li .sub.resources .right
  {
      float:right;
      width:380px;
  }

  ul#topnav li .sub.resources .left .left-left,
  ul#topnav li .sub.resources .right .right-left
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      height:100%;
  }

  ul#topnav li .sub.resources .left .left-right,
  ul#topnav li .sub.resources .right .right-right
  {
      float:right;
      width:180px;
  }

  ul#topnav li .sub.resources .resoures-topic
  {
      clear: both;
      float: right;
      margin: -40px 20px 0 0;
  }

  ul#topnav li .sub.resources .resoures-topic h4 a
  {
      font-size:18px! important;
  }

  /***********NEWS************/
  ul#topnav li .sub.news
  {
      width:600px! important;
      height:230px;
  }

  ul#topnav li .sub.news .left
  {
      float:left;
      width:180px;
      height:100%;
  }

  ul#topnav li .sub.news .center
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      padding-left:10px;
      height:100%;
  }

  ul#topnav li .sub.news .right
  {
      float:left;
      width:180px;
      padding-left:10px! important;
      height:100%;
  }

  ul#topnav li .sub.news .left li,
  ul#topnav li .sub.news .center li,
  ul#topnav li .sub.news .right li
  {
      float:none! important;
  }

  /***********EVENTS**********/
  ul#topnav li .sub.events
  {
      /* width:600px! important; -- use rwith 3 columns **/

      width:800px! important;
      height:200px;
      margin-left:-138px;
  }

  /*ul#topnav li .sub.events ul.left
  {
      float:left;
      width:200px;
      height:100%;
  }

  ul#topnav li .sub.events ul.center
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      padding-left:10px;
      height:100%;
  }

  ul#topnav li .sub.events ul.right
  {
      float:left;
      width:160px;
      padding-left:10px! important;
      height:100%;
  }

  ul#topnav li .sub.events ul.left li,
  ul#topnav li .sub.events ul.center li,
  ul#topnav li .sub.events ul.right li
  {
      float:none! important;
  }
  */

  ul#topnav li .sub.events .left
  {
      float:left;
      width:380px;
  }

  ul#topnav li .sub.events .right
  {
      float:right;
      width:380px;
  }

  ul#topnav li .sub.events .left .left-left,
  ul#topnav li .sub.events .right .right-left
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      height:100%;
  }

  ul#topnav li .sub.events .left .left-right,
  ul#topnav li .sub.events .right .right-right
  {
      float:right;
      width:180px;
  }


  /***********SAFETY**********/
  ul#topnav li .sub.government
  {
      /*width:600px! important; -- use with 3 columns*/
      width:800px! important;
      height:200px;
      margin-left:-283px;
  }

  /*ul#topnav li .sub.government ul.left
  {
      float:left;
      width:180px;
      height:100%;
  }

  ul#topnav li .sub.government ul.center
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      padding-left:10px;
      height:100%;
  }

  ul#topnav li .sub.government ul.right
  {
      float:left;
      width:180px;
      padding-left:10px! important;
      height:100%;
  }

  ul#topnav li .sub.government ul.left li,
  ul#topnav li .sub.government ul.center li,
  ul#topnav li .sub.government ul.right li
  {
      float:none! important;
  }
  */
  ul#topnav li .sub.government .left
  {
      float:left;
      width:380px;
  }

  ul#topnav li .sub.government .right
  {
      float:right;
      width:380px;
  }

  ul#topnav li .sub.government .left .left-left,
  ul#topnav li .sub.government .right .right-left
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      height:100%;
  }

  ul#topnav li .sub.government .left .left-right,
  ul#topnav li .sub.government .right .right-right
  {
      float:right;
      width:180px;
  }


  /***********CONNECT*********/
  ul#topnav li .sub.connect
  {
      width:600px! important;
      margin-left:-221px;
  }

  ul#topnav li .sub.connect .left
  {
      float:left;
      width:180px;
      height:100%;
  }

  ul#topnav li .sub.connect .center
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      padding-left:10px;
      height:100%;
  }

  ul#topnav li .sub.connect .right
  {
      float:left;
      width:180px;
      padding-left:10px! important;
      height:100%;
  }

  ul#topnav li .sub.connect .left li,
  ul#topnav li .sub.connect .center li,
  ul#topnav li .sub.connect .right li
  {
      float:none! important;
  }
  /***********ABOUT***********/
  ul#topnav li .sub.about
  {
      width:600px! important;
      height:230px;
      margin-left:-334px;
  }

  ul#topnav li .sub.about .left
  {
      float:left;
      width:180px;
      height:100%;
  }

  ul#topnav li .sub.about .center
  {
      float:left;
      width:180px;
      border-right: 1px #DBDBDB solid;
      padding-left:10px;
      height:100%;
  }

  ul#topnav li .sub.about .right
  {
      float:left;
      width:180px;
      padding-left:10px! important;
      height:100%;
  }

  ul#topnav li .sub.about .left li,
  ul#topnav li .sub.about .center li,
  ul#topnav li .sub.about .right li
  {
      float:none! important;
  }
  /***********EXPOS***********/
  ul#topnav li .sub.expos
  {
      width:884px! important;
      height:230px;
      margin-left:-732px;
  }

  ul#topnav li .sub.expos .left
  {
      float:left;
      width:440px;
  }

  ul#topnav li .sub.expos .right
  {
      float:right;
      width:390px;
  }

  ul#topnav li .sub.expos .left .left-left,
  ul#topnav li .sub.expos .right .right-left
  {
      float:left;
      width:215px;
      border-right: 1px #DBDBDB solid;
      height:100%;
  }

  ul#topnav li .sub.expos .left .left-left .left,
  ul#topnav li .sub.expos .right .right-left .left,
  ul#topnav li .sub.expos .left .left-right .left
  {
      float:left;
      width:100px;
      padding:0! important;
      border:none! important;
  }

  ul#topnav li .sub.expos .left .left-right
  {
      float:right;
      width:215px;
  }

  ul#topnav li .sub.expos .right .right-right
  {
      float:right;
      width:140px;
  }

  ul#topnav li .sub.expos .left .left-right .right,
  ul#topnav li .sub.expos .right .right-right .right,
  ul#topnav li .sub.expos .left .left-left .right,
  ul#topnav li .sub.expos .right .right-left .right
  {
      float:right;
      width:100px;
      padding:0! important;
      border:none! important;
  }
}