* {box-sizing: border-box;}

   body { 
      margin: 0;
      font-family: Calibri, Tahoma, Arial;
   }

   .header {
      color: #000000;
      font-size: 14px;
      font-weight: bold;
      overflow: hidden;
      background-color: #ECEAEA;
      padding: 8px 20px;
   }

   .header a {
      float: left;
      color: #04689A;
      text-align: center;
      padding: 12px 30px;
      text-decoration: none;
      font-size: 14px; 
      line-height: 0px;
      border-radius: 4px;
      margin-top: 4px;
   }

   .header a.logo {
      float: none;
      padding: 0px;
      text-decoration: none;
      font-size: 14px;
      font-weight: bold;
      line-height: 14px;
   }

   .header a.logo:hover {
      float: none;
      padding: 3px;
      text-decoration: none;
      font-size: 14px;
      font-weight: bold;
      line-height: 14px;
      color: #FFFFFF;
      background-color: #04689A;
   }

   .header a:hover {
      background-color: #ddd;
      color: #000000;
   }

   .header a.active {
      background-color: #04689A;
      color: #FFFFFF;
   }

   .header-left {
      float: left;
   }

   .header-right {
      float: right;
   }

   @media screen and (max-width: 500px) {
      .header a {
         float: none;
         display: block;
         text-align: center;
      }

      .header-left {
         float: none;
      }

      .header-right {
         float: none;
      }
   }

   @keyframes exInfo {
      from {opacity:0;}
      to {opacity:0.8;}
   }

   .browserInfo {
      display:none;
      width:260px;
      height:70px;
      top:80px;
      color:white;
      left:50px;
      padding:10px;
      position:fixed;
      opacity:0;
      font-size:14px;
      background-color: rgba(64,64,64,.9);
      box-shadow: 0 8px 6px 0 rgba(0,0,0,.41);  
      animation-name: exInfo;
      animation-duration: 6s;
   }