/*
 * OMSI Mobile Enhancements
 *
 * This stylesheet helps enhance the experience on smaller devices.
 * Original added: June 11, 2013
 *
 */

/**
 * "Aggressive" styling: 
 * Targets even non-dpi values for fennec/android (xhdpi landscape)
 */
@media (max-device-width: 1196px) {
  /**
   * Page Modules: General page modules adjustments, non-small viewport related. 
   Includes specific fix for overlapping content (newsletter module) in Fennec.
   */
  div.page-module section, div.page-search #block-system-main .content {
    padding: 6px 13px 19px;
  }
}

/**
 * "Phones and Tablets"
 * Smaller viewport adjustments.
 * Target most tablet browser widths,
 * and capture at least portrait mode in
 * browsers that report non-dip values (Fennec)
 *
 * See also narrow breakpoint below.
 */
@media (max-device-width: 768px) {

  /**
   * Remove default webkit styling
   */
  input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
  }
  /**
   * Fixes header getting cut off in small viewports.
   */
  #header {
    position: relative;
  }
  #main {
    padding-top: 0;
  }
  /**
   * Header: Allow for content to be larger, fixes spacing to accomodate.
   */
  .region-header {
    margin-bottom: 0;
    width: auto;
  }
    .region-header .block {
      float: none;
    }

    .region-header #block-search-form {
      float: right;
      margin: 10px 15px 0px 149px !important;

    }
    .region-header #block-search-form .content {
      margin-top: 0px !important;
    }

  .navigation-topright {
    width: auto;
    float: right;
  }
    .navigation-topright li {
      font-size: 16px;
      height: auto;
    }
    .navigation-topright li.last {
      min-width: 85px;
      width: auto;
    }
  /**
   * Sidebar Phone: Allow to be more prominent on small devices
   */
  .sidebar .phone {
    font-size: 16px;
  }
  /**
   * Sidebar Navigation: Larger tap targets for the sidebar links for smaller devices.
   */
  .sidebar ul.menu li a {
    padding-top: .25em;
    padding-bottom: .25em;
  }
  .sidebar ul.menu li a.active-trail {
    background-position: right 7px;
  }
  .sidebar ul.menu li.expanded ul li a,
  .sidebar .block .content {
    font-size: 14px;
  }
  /**
   * Upcoming Events: Adjust layout to work better with double-tap zoom so that the date stays in view.
   */
  .page-module .event-list .event-details {
    float: none;
    width: auto;
  }

  /**
   * Makes theater gray area smaller on phones, as to not mess up the zoom
   */

   #theater_story_wrapper {width: 980px !important; margin-left: -20px !important;}

}
  /**
   * Removes homepage slideshow callout on smaller screens
   */
@media screen and (max-width: 1196px) {
.homepage-slideshow .nivo-handwritten-callout {display: none !important;}

}



/**
 * "Phones"
 * Additional styling for smallest screens
 */
@media (max-device-width: 384px), (max-width: 5in) {

  /**
   *  Even larger targets for phones
   */
  .sidebar .phone {
    font-size: 20px;
  }
  .sidebar ul.menu li a {
    padding-top: .45em;
    padding-bottom: .45em;
  }
  .sidebar ul.menu li.expanded ul li a,
  .sidebar .block .content {
    font-size: 16px;
  }

  /**
   * Footer/Sitemap: Adjusts for larger tap targets
   */
  #sitemap-toggle-bar #toggle-sitemap {
    background-position: 0 5px;
    font-size: 16px;
    margin: 10px 0;
  }
  #section_footer_wrapper #sitemap .sitemap-col {
    width: 161px;
  }
  #section_footer_wrapper #sitemap ul li a {
    font-size: 14px;
    padding: 5px 0;
    display: block;
  }
  #section_footer_wrapper #sitemap ul li ul li a {
    font-size: 14px;
    padding: 5px 0;
    display: block;
  }
  #section_footer_wrapper #sitemap .sitemap-col h3 a {
    display: block;
  }
  #footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #footer,
  #footer-wrapper a {
    font-size: 20px;
  }
  #footer-wrapper a {
    padding: 5px 11px;
  }
  #footer .block .content a {
    display: inline-block;
  }
  #footer .block .copyright {
    margin-top: 25px;
    display: block;
    float: none;
    text-align: center;
  }
  #footer .block .content {
    text-align: center;
  }
}