@import "parameters";

/* Styles specific to a small screen, such as iPhone, Android, etc... */
@media (max-width: 640px) {
  body {

    input[type="submit"],
    input[type="text"] {
      -webkit-appearance: none;
    }

    .column-1 {
      width: 100%;
    }

    #menu-icon {
      display: inline-block !important;
    }

    nav.primary,
    nav.secondary {
      float: none !important;
      position: relative;
      display: block;
      clear: both;
    }

    header {
      height: auto;
      min-height: $headerHeight;
      background: #fff;

      h1 {
        padding-bottom: 15px;
      }

      &.closed nav {
        display: none;
      }

      .search_forms {
        display: block;
      }
    }

    #sidebar .search_forms,
    #edit_tab,
    #export_tab {
      display: none;
    }

    nav.primary {
      padding: 0;

      ul, li {
        border: none;
        border-radius: 0;
        width: 100%;
      }

      ul {
        border-top: 1px solid #eee;

        li {
          border-bottom: 1px solid #eee;
          border-right: none;

          > a {
            border-radius: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
          }
        }
      }

      .btn-group {
        width: 100%;
        padding: 10px;
      }
    }

    nav.secondary {
      .user-menu {
        width: 100%;
      }
    }

    #compact-secondary-nav {
      display: none;
    }

    .compact-hide {
      display: inline-block;
    }

    &.map-layout {
      #sidebar, #map {
        position: relative;
        overflow-x: hidden;
        width: 100%;
        height: 50%;
      }

      .overlay-sidebar {
        #sidebar {
          position: absolute;
          width: 300px;
          height: auto;
          overflow: hidden;
        }

        #map {
          height: 100%;
        }
      }

      #map-ui {
        z-index: 9999;
        width: 100%;
        overflow-y: scroll;
      }
    }

    .overlay-sidebar #sidebar .welcome.visible {
      display: none;
    }

    .overlay-sidebar #sidebar #banner {
      display: none;
    }

    .leaflet-top.leaflet-right {
      top: 10px !important;
    }

    .content_map {
      width: 100%;
      border: none;
      float: none;
      height: 200px;
      max-height: none;
      min-height: auto;
    }

    /* Rules for the login form */

    #login_login input#user_email {
      width: 100%;
      max-width: 18em;
    }

    #login_login input#user_password {
      width: 100%;
      max-width: 18em;
    }

    #login_login input#openid_url {
      width: 100%;
      max-width: 18em;
    }

    #login_openid_buttons td {
      padding: 2px;
    }

    /* Rules for the user view */

    .user_map {
      width: 100% !important;
      height: 300px !important;
    }

    #userinformation .deemphasize {
      position: relative;
      right: auto;
      left: auto;
      margin-top: 10px;
      top: auto;
    }

    &.site-about #content .attr h1 {
      font-size: 28px;
    }

  }
}