/**************************************************
 MEDIA QUERIES FOR RESPONSIVE DESIGN
 These styles override the primary styles and
 adjust the design for different screen resolutions

 A good way to test if @media queries are working
 is to set a distinct background color in the 
 body element: body { background: red; } 

Landscape phones and down:       @media (max-width: 480px) { ... }
Landscape phone to portrait tablet: @media (max-width: 767px) { ... }
Portrait tablet to landscape and desktop: @media (min-width: 768px) and (max-width: 979px) { ... }
Large desktop:             @media (min-width: 1200px) { ... }
***************************************************/


/**************************************************
 MEDIA QUERIES FOR SMALLER DEVICES
***************************************************/
@media (max-width: 767px) {

  body {
    background-image: none !important;
    min-width: 300px;
  }

  /* Undo the floating of our layout elements */
  [class*="span"] {
    float: none;
    margin-left: 0;
  }
  .row {
    margin-left: 0;
  }

  .container,
  .page {
    margin: 0;
    /*padding-left:2%;
    padding-right:2%;*/
    width:100%;
  }
  .span-12,
  .span-11,
  .span-10,
  .span-9,
  .span-8,
  .span-7,
  .span-6,
  .span-5,
  .span-4,
  .span-3,
  .span-2,
  .span-1 {
    width: 100%;
  }

  img {
    display: block;
    max-width: 100%;
  }


  .page-12,
  .page-9,
  .page-3,
  .aside,
  footer.container {
    margin: 0 2%;
    padding: 4%;
    width: 88%;
  }


  /* NAVIGATION 
  ------------------------------------------------------------ */
  
  #header {
    position: relative;
  }
  .branding,
  #header nav.primary,
  #header nav.books {
    clear: both;
    display: block;
    float: none;
    line-height: 1.3;
    text-align: center;
    width: 100%;
  }
  
  #header nav.books,
  #header nav.secondary,
  #header .social {
    display:none;
  }
  #header nav li + li:before {
    content: "";
    padding: 0;
  }

  #header .branding {
    padding-bottom: .5em;
    float: left;
    margin-right: .8em;
    width: auto;
  }
  .mobile-menu {
    background: transparent url(/assets/images/icons/menu.png) 100% 0 no-repeat;
    background: transparent url(/assets/images/icons/menu.svg) 100% 0 no-repeat;
    cursor: pointer;
    height: 24px;
    float: left;
    margin-top: -3px;
    width: 24px;
  }

  #header .mobile-social {
    display: inline-block;
    float: right;
  }
  #header .mobile-social .pinterest {
    margin-right: 0;
  }
  
  #header .search input {
    margin-bottom: 0;
  }


  #content  {
    width: 100%;
  }
  #content > header h1, 
  #content > header h2, 
  #content > header h3 {
    width: 100%; 
  }


  #header nav.primary li,
  #header nav.books li,
  #header nav.secondary li {
    border-top: 1px solid #222;
    display: block;
    float: none;
    padding: 6px 0 4px;
    width: 100%; 
  }
  #header nav li a:hover {
    text-decoration: none;
  }
  #header nav li:hover {
    background-color: #232323;
  }

  .desktop-nav {
    display: none;
  }
  .collapsed {
    display: none;
  }

  #header ul {
    list-style-type: none;
  }



  #content>header {
    margin: 0 6% 4%;
    width: 88%;
  }

  section.home .container {
    margin: 0;
  }
  section.home section,
  section.home section+section {
    float: none;
    margin: 0;
    width: 100%;
  }

  aside.book {
    margin: 30px 0;
  }

  .book-image {
    height: 40%;
    width: 40%;
  }

  .person li,
  .person iframe {
    float: none;
    margin: 0;
    width: 100%;
  }
  .person li+li {
    padding: 0;
  }

  .feed {
    margin-top: 20px;
  }


  /* Full Width Image */
  article figure.full-width img {
    margin-bottom: .5em;
  }
  /* Half Width Image */
  article figure.half-width img {
    margin-bottom: .5em;
  }

  article blockquote.pull-quote.left { 
    max-width: 100%;
  }
  article blockquote.pull-quote.right { 
    max-width: 100%;
  }

  article ul.gallery img {
    display: inline;
  }
  
  /**************************************************
   Screens are not big enough to account for floats in your layout
   Modify this style to do away with the elements that float and 
   create more contrast for the mobile environment

  * {
    float: none;
    background: #fff;
    color: #000;
  }

  Consider slightly reducing the font size to reduce need to scroll
  and adjusting the line height to fit the new font size
  
  body { 
    font-size: 80%; 
    line-height: XXpx;
  }


  Stop iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust 
  
  html { 
    -webkit-text-size-adjust:none; 
    -ms-text-size-adjust:none; 
  }
  
  ***************************************************/

}

/**************************************************
 PRINT STYLES
 inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ 

 @todo TEST THIS IN A MORE BROWSERS... and PRINTERS...
***************************************************/

@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}