/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### Retina screen (iphone4, samsung note, etc.) Portrait or Landscape #### */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx),
only screen and (                   max-height : 640px) ,
only screen and (                   max-device-height : 640px) {

  /* Retina-specific stuff here */
  body{
    padding-top : 60px;
  }
  #header {
    height : 30px;
  }
  #logo {
    height : 30px;
    margin: 0px 5px;
  }
  #logo h1 {
    font-size : 1.5em;
    margin: 5px 5px 5px 40px;
    line-height: 20px;
  }
  #title{
    height : 30px;
    margin : 0px 5px;
    padding-right:5px;
  }
  #title h1 {
    margin : 0px 5px;
    font-size : 1.5em;
    line-height: 30px;
  }
  #headermenu{
    height:30px;
    position: fixed;
    margin-top: 0; /*edited*/
  }
  .navbar-inner {
    min-height:30px;
    padding: 0px 10px;
  }

  /*  for ie*/
/*  .navbar-inner ul {*/
/*    height:30px\9;*/
/*  }*/

  /*  for ie*/
  .navbar-inner ul li{
    display:inline\9;
  }

  #overview-box {
    right:10px;
    bottom:40px;
  }

  #bottom-dock  {
    width: 100%;
    height: auto;
  }
  #bottom-dock.visible {
    height: 100%;
    opacity: 1;
  }
  #bottom-dock.half-transparent {
    height: 100%;
    opacity: 1;
  }

}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}







/*========================================================= edited */
/*navbar right*/
@media (hover: none) and (pointer: coarse){
  #navbar button.btn {
      height: 39px;
      width: 39px;
      margin-bottom: 0.3em;
  }


  /*#menuToggle {
    background: transparent;
  }

    #menuToggle span {
      background: #444444;
    }

    #menuToggle.opened span {
      background: white;
    }*/


/*hamburger*/

  #menuToggle {
    background: #ffffff6b;
    border-radius: 3px;
    top: 6px;
    left: 6px;
    padding: 10px;
  }

  #menuToggle.opened {
      padding-right: 3px;
  }

  #menuToggle.opened span {
      background: white;
  }

  #menuToggle span {
      width: 21px;
      height: 3px;
      margin-bottom: 4px;
      background: #444444c7;
    }

  #menuToggle.opened span:nth-child(3) {
      transform: rotate(-45deg) translate(0, -3.5px);
  }

  #menuToggle.opened span {
      opacity: 1;
      transform: rotate(45deg) translate(0px, -1px);
  }


/*mapmenu*/
  #mapmenu > div {
    top: 48px;
}




/* #### Retina screen (iphone4, samsung note, etc.) Portrait or Landscape #### */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx),
only screen and (                   max-height : 640px) ,
only screen and (                   max-device-height : 640px) {





    #header #title h1 {
        margin : 0px 5px;
        font-size : 1em;
        line-height: 30px;
      }

    
    #header #title > h2 {
      display: none;
    }
}