/***********************************************************************
 * Media queries for responsive design. Useful links for finding device
 * resolutions, effective viewport dimensions and media features:
 *
 * http://bjango.com/articles/min-device-pixel-ratio/
 * http://responsejs.com/labs/dimensions/
 * https://developer.mozilla.org/en/docs/CSS/Media_queries
 * http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
 * http://members.ping.de/~sven/dpi.html
 *
 * Here's a handy quick list of physical screen resolutions and the
 * pixel ratio (dppx) for the some common devices, along with their
 * logical resolution. This illustrates some of the boundaries we must
 * work within when making sites 'responsive'.
 *
 * Samsung Galaxy S: 480x800 @ 1 = 480x800
 * Samsung Galaxy S4: 1080x1920 @ 3 = 360x640
 * Samsung Galaxy 10.1: 800x1280 @ 1 = 800x1280
 * Samsung Galaxy Note: 800x1280 @ 2 = 400x640
 * Samsung Galaxy Note II: 720x1280 @ 2 = 360x640
 * Samsung Galaxy Nexus: 720x1280 @ 2 = 360x640
 * Google Nexus 4: 768x1280 @ 2 = 384x640
 * Google Nexus 7: 800x1280 @ 1.325 = 603x966
 * Google Nexus 10: 1600x2560 @ 2 = 800x1280
 * Apple iPhone 4, 4S: 640x960 @ 2 = 320x480
 * Apple iPhone 5: 640x1136 @ 2 = 320x568
 * Apple iPad 1, 2: 768x1024 @ 1 = 768x1024
 * Apple iPad 3, 4: 1536x2048 @ 2 = 768x1024
 * Bedove HY5001 (MTK6589 Device): 720x1280 @ 2: 360x640
 **********************************************************************/
/***********************************************************************
 * Seeing as a lot of devices have displays that have a
 * pixel density greater than one, we should swap out logos and nav
 * elements for higher res versions. This query targets those devices
 * accordingly and swaps out background images for high res ones
 * Very few devices have a pixel ratio great than 3, but this will need
 * to be taken into consideration at some point.
 * ********************************************************************/
/* Up to 1280px, high res tablets (Nexus 10), some desktops/laptops */
/* Up to 1024px, landscape iPads, old computers */
@media only screen and (max-width: 1024px) {
  /* stuctural changes */
  .wrap.wide {
    max-width: 840px; }

  /* navigation */
  nav#main-nav li.contact {
    position: static;
    margin-left: 0; }
    nav#main-nav li.contact a:nth-of-type(2) {
      margin-right: 10px; }
  nav#main-nav li a {
    padding: 10px; } }
/* 800px wide, includes the Nexus 10 in portrait and maybe some other large
 * tablets. These queries should be fluid so that only minor adjustments
 * are needed at 768px. */
@media only screen and (max-width: 800px) {
  .wrap {
    padding: 0 15px; }

  /* navigation */
  nav#main-nav li.contact a {
    font-size: 21px; }
  nav#main-nav li a {
    font-size: 15px; }

  /* carousel */
  div.carousel .carousel-stage {
    margin: 0 80px; }
    div.carousel .carousel-stage h1 {
      font-size: 18px;
      line-height: 155%;
      width: 28%; }
  div.carousel .carousel-sliders a.left {
    margin-left: 0; }
  div.carousel .carousel-sliders a.right {
    margin-right: 0; } }
/* 768px wide, all iPads in portrait, including the iPad mini! */
/* Up to 640px wide in landscape, 570px in portrait to match iPhone 5 */
@media only screen and (max-width: 640px) and (orientation: landscape), only screen and (max-width: 570px) and (orientation: portrait) {
  /* logo */
  h1#logo a {
    display: block;
    text-align: center; }
  h1#logo img {
    width: 150px;
    height: auto; }

  /* navigation */
  nav#main-nav a.mobile-nav-expand {
    display: block; }
  nav#main-nav ul {
    margin-top: 20px; }
  nav#main-nav li {
    float: none;
    text-align: center;
    margin: 5px 0; }

  /* hide carousel */
  div.intro {
    display: none; }

  /* content... */
  #content .page > h1 {
    margin: 20px 0; }

  article .page-body, article aside {
    float: none;
    width: auto;
    margin-bottom: 20px; }
  article.contact .page-body, article.contact aside {
    width: auto; }

  /* footer */
  footer .twocol {
    float: none;
    width: auto;
    margin-right: 0;
    margin-bottom: 20px; }
    footer .twocol h1 {
      padding: 4%; } }
/* 570px. The iPhone 5 in landscape. */
@media only screen and (max-width: 570px) {
  footer .twocol h1 {
    font-size: 28px; } }
/* Up to 480px, iPhones > gen. 5 in landscape */
@media only screen and (max-width: 480px) {
  h1 {
    font-size: 23px; }

  /* homepage intro section */
  div.intro h1 {
    float: none;
    width: auto; }
  div.intro img {
    display: none; } }
/* Up to 360px. Large mobiles, like the Galaxy S4 will match this.
 * Queries for 320 can go here, too. */
/* Up to 320px. iPhones of all flavour in portrait (even 5th gen).
 * A variety of Android devices, too. */
@media only screen and (max-width: 320px) {
  /* disable webkit text size adjust (for iPhone) */
  html {
    -webkit-text-size-adjust: none; }

  header h1 {
    margin-top: 10px; }

  nav#main-nav ul li {
    float: none;
    margin: 10px 0px; }

  form fieldset {
    padding: 35px 20px; } }