@mixin html5-boilerplate-media {
  @media print {
    @include media-print;
  }

  @media all and (orientation:portrait) { 
    @include media-orientation-portrait;
  }

  @media all and (orientation:landscape) {
    @include media-orientation-landscape;
  }

  @media screen and (max-device-width: 480px) {
    @include media-mobile;
  }
}

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

@mixin media-print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } // black prints faster: sanbeiji.com/archives/953
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  // don't show links for images, or javascript/internal links
  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; }
}


//
// media queries for responsive design
// these follow after primary styles so they will successfully override.
//

@mixin media-orientation-portrait {
  // Style adjustments for portrait mode goes here
}

@mixin media-orientation-landscape {
  // Style adjustments for landscape mode goes here
}

// Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
// consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold
@mixin media-mobile($optimize: true) {
  // j.mp/textsizeadjust
  @if not $optimize {
    // don't allow iOS and WinMobile to mobile-optimize text
    html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
  }
}