/*
 * responsive.custom.css is for custom media queries that are not set via the
 * theme settings, such as cascading media queries.
 *
 * By default all the other responsive stylesheets used in Adaptivetheme use a
 * "stacking method", however cascading media queries use a waterfall method so
 * you can leverage the cascade and inheritance for all browsers that support
 * media queries, regardless of screen size.
 *
 * @SEE http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack
 *
 * NOTE: this file loads by default, to disable got to your theme settings and
 * look under the "CSS" settings tab.
 */

/* crappy android portrait */
@media screen and (max-width: 240px) and (orientation: portrait) {
  #page.container {
    min-width:240px;
  }
  #block-search-form {
    display:none;
  }
  #site-name {
    font-size: 12px
  }
}
/* crappy android landscape */
@media screen and (max-width: 320px) and (orientation: landscape) {
  #block-search-form {
    display:none;
  }
  #site-name {
    font-size: 14px
  }
}

/* make the search form turn into just a button remove the input */
@media screen and (max-width: 768px) {
  #block-search-form {
    min-width: 40px;
    width: 40px;
    padding-right:10px;
  }
  #search-block-form input.form-text {
    display:none;
  }
}

/* iphone 5 landscape */
/*
@media only screen 
and (min-width : 320px) 
and (max-width : 568px) 
and (device-aspect-ratio: 40/71)
and (orientation : landscape) {
  #block-search-form {
    width:140px;
    min-width:140px;
  }
  #block-search-form .block-inner {
    margin-left:0;
    margin-right:0;
  }
  #search-block-form input.form-text {
    width:100px;
  }
  #search-block-form input.form-submit {
    margin-left:3px;
  }
}
*/

/* 
 * Float Region blocks example:
 * In smaller screen sizes we can remove the float and widths so all blocks
 * stack instead of displaying horizonally. The selector used here is an
 * "attribute selector" which will match on any float block class. Use your
 * inspector or Firebug to get the classes from the page output if you need
 * more granular control over block alignment and stacking.
 * 
 * "Float Region blocks" is an extension for floating blocks in regions, see
 * your themes appearance settings, under the Extensions tab.
 */
/*
@media only screen and (max-width: 480px) {
  .region[class*="float-blocks"] .block {
      float: none;
      width: 100%;
    }
}
*/