#responsive_menu2 {
/*background: url('https://ideasemb.com/images/bluefireback.gif');*/
display: inline-block;
position: relative;
width: 100%;
margin: 0 auto;

div:not(#theme_content); /* HA avoid theme_content id style to hijack this class's styles but will only work in css3+ */
}
.gapforfirstmenu {margin-top:0px;}
/* THE ABOVE CODE IS EXTRA FOR WEBSITE SOFTWARE RESPONSIVE MENU */


#responsive_menu {
/*background: url('https://ideasemb.com/images/bluefireback.gif');*/
display: inline-block;
position: relative;
width: 100%;
margin: 0 auto;
}

.topnav {
  overflow: hidden;
  /*background-color: #4F8DBB;*/ /*menu boxes color*/
}


/* HA div:not(#theme_content) avoids theme_content id style to hijack this class's styles but will only work in css3+ */ 
.topnav a {
    background-color: #4F8DBB;
    border: 1px solid navy; /*menu boxes border color*/
    font-family: Tahoma,Arial; /*menu font*/
  float: left;
  text-align: justify;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 3px 6px;
  text-decoration: none;
  line-height: 30px;
  min-width: 6%;
  display:block;
}

.topnav img {  vertical-align: sub; }


.topnav a:hover {
  background-color: #4DB2D8; /*menu mouseover highlight color*/
    text-decoration: none;
  color: white;
}


.topnav a.active{
   color: #4F8CBB;
   background:#f1d74c;
}


.topnav .icon {
  display: none;
  background: #737BE6;
}

@media screen and (max-width: 800px) {

     #full_menu {display: none;} /* HA hide full menu because screen is smaller than 800px */

  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

.gapforfirstmenu {margin-top:39px;}

}

@media screen and (max-width: 800px) {

     #notmobilefriendly {display: none;} /* HA hide all non mobile friendly content which you marked with id=notmobilefriendly */
    
    
    /* HA this code will convert table columns in FIRST row to display it good in mobile phones. Simply put class="mobilefriendly" in any table you want to make mobile friendly 
    This will make just the first ROW of table responsive which is useful for login tables
    */

       table.mobilefriendly tr:first-child > *{
        display: block;
    }
   
    table.mobilefriendly > tr:first-child {
        display: table-cell;
    }
   
    /*Mobile friendly table code end here*/



    /* HA this code will convert table columns in ALL rows to display it good in mobile phones. Simply put class="mobilefriendly-all" in any table you want to make mobile friendly 
    This will make just the first ROW of table responsive which is useful for login tables
    */

       table.mobilefriendly-all tr > *{
        display: block;
    }
   
    table.mobilefriendly-all > tr {
        display: table-cell;
    }
   
    /*Mobile friendly table code end here*/

    
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} /* END @media screen and (max-width: 800px) */


@media screen and (min-width: 800px) {
     #responsive_menu { display: none;} /* HA show responsive menu because screen is smaller than 800px */
     #full_menu {display: block;} /* HA hide full menu because screen is smaller than 800px */  
     #notdesktopfriendly {display: none;} /* HA hide full menu because screen is smaller than 800px */  
} /* END @media screen and (min-width: 800px) */