/* Add a black background color to the top navigation */
.topnav {
/*  background-color: #333;*/
  overflow: hidden;

/*  max-width: 800px;*/
  width: 100%;
  min-width: 200px; /* make sure logo and menu icon still on the same line for width smaller than this size */
/*  following attributes are to make jsp menu consistent with html menu */
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 24px;
  -webkit-font-smoothing: auto;
/*  margin: 0 auto;  */
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #2db0db;
  text-align: center;
  padding: 0px 16px; /*14px 16px;*/
  text-decoration: none;
  font-size: 15px;
/*  font-size: 17px;*/
}

/* Change the color of links on hover */
.topnav a:hover {
/*  background-color: #eee;*/ /*#ddd*/
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
  padding-right: 5px;
}


body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }
.topnav-link {
    text-transform: uppercase;
    margin-top: 20px;
    font-weight: 600;
    /*font-size: 0.9rem;
    
    letter-spacing: .2rem;
    margin-right: 24px;
    text-decoration: none;
    line-height: 2.5rem;*/
    color: #2db0db; }
.topnav-logo {
  padding-left: 0px !important;
}
/*.menu-container {
  max-width: 960px;
}*/

/*Add media queries*/

/* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* 850px for portal menu */
@media (max-width: 700px) { /*@media screen and (max-width: 700px) */
  .topnav {display: block;}

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

    margin-top: 15px;
    font-size: 22px;
  }


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav-link {
/*    text-transform: uppercase;*/
    margin-top: 8px;
    margin-left: 8px;
/*    color: #2db0db;*/ }
}