/* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*,
*:after,
*:before { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

html { 
  overflow-y: scroll; 
  overflow-x: hidden; 
  height: 100%; 
  margin: 0;
  padding: 0; 
}

body { 
  height: 100%;
  margin: 0;
  padding: 0; 
}
  
/* match backgrounds to blend in */
body, .header-top {  background: #eaeaea; }

/*.header-top { background: rgba(234,234,234, 0.85); }*/

/* can't assume only one "header" element in HTML5 */
.header-top { 
  /* pin to top - 0 is default */
  position: fixed;
  /* raise z-index to cover */
  z-index: 1;
  /* in this example, height is fixed -- set on .header-content-wrap 
     below -- and used to derive padding-top on .main div */
  min-height: 128px;
  /* 100% - .header-wrap can be a percentage - 
     also covers full width when zoomed */
  width: 100%;
}

/* .header-top:after {
  transition: height 1s linear;
  content:"";
  position: absolute;
  bottom:-1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,.1);
} */

/* match widths & margins -- add min-width value 
   to .header-content below */
.page-wrap, .header-wrap, .wrap { 
  width: 90%; 
  min-width: 320px; 
  max-width: 640px; 
  /* center on page */
  margin: 0 auto; 
  /* separate content from window edge -- 
     padding-top and -bottom specified below.
     Here (not on body) to work on fixed header */
  padding: 0 10px;
}

.page-wrap {
  /* leave room for fixed header height -- matched below -- 
     padding-left and -right assigned above */
  padding-top: 128px;
}

/* padding-left and -right added above */
.header-wrap { 
  /* to position child elements absolutely */
  position: relative;
  /* declaring height in this example */
  height: 128px;
  /* padding overridden by absolutely positioning 
     on child element below */
  padding: 10px; 
  /* overflow:hidden optional -- if height declared 
     and .header-content resizes downward */ 
  /*overflow: hidden;*/
}

.header-content { 
  position: absolute;
  /* fill width regardless of content 
     (same as padding value above) */
  left: 10px;
  right: 10px;
  padding: 10px 2em;
  background: #bab2a0;
}

.header-content.align-center {
  top: 50%;
  margin-top: -7%; 
}

.header-content.align-bottom { 
  /* make header content resize upward */
  top: inherit;
  margin-top: inherit;
  bottom: 10px; }

.main { 
  padding: 1em 2em 2em;
  background: white; 
}

/* Example Media Queries - e.g., iPhone5 landscape width = 568px */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 599px) {
 
  .header-top { 
  /* unpin header so it scrolls with content */
    position: absolute; }
  
  /* even if you keep the header fixed, you might 
     change width to 100% for better mobile zooming */
  
  .page-wrap, .header-wrap { 
    width: 100%; }

}

/* for better mobile zooming, change percentage 
   from 80 or 90 to 100 when viewport = min-width */
@media only screen 
and (max-width : 320px) {
   
  .page-wrap, .header-wrap { 
    width: 100%; }

}

/* Presentational CSS Below */

/* force a vertical scrollbar to prevent a jumpy page */
html { overflow-y: scroll; }

body {
  line-height: 1.3125; }

.main { padding-bottom: 30em; }

sidebar { 
  display: block;
}

figure {
  margin: 1.5em auto 1em;
  padding: 8px;
  background: #f1f1ea;
  text-align: center; }

figure img {border: 4px solid #ffffff; }

figcaption {
  margin: .5em 0;
  color: #999;
  text-align: center;
  font-size: 85%;
  font-style: italic; }

h1 {margin: 0; line-height: 1.0625;}

h2 {color: #999; font-weight:300;}

header h2 {margin:0; color: #666;}

code {
  background: lightyellow;
  padding: 1px .25em;
  font-family: Menlo, Monaco, monospace;
  font-size: 90%;}

pre[rel]{
    position: relative;
    padding: .875em 0 0; }

pre[rel]:before{
    content:attr(rel);
    color:white;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background:#e18728;
    font-family: sans-serif;
    padding:5px 0;
    text-indent:15px; }

pre code {
  display: block; padding: 1.5em; }

pre code i {
    color: #998;
    font-style: italic; }

.nowrap, nobreak, .nobr { white-space: nowrap; }

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */
img {
  vertical-align: middle;
}

img.scale, object.scale {
  /* corrects small inline gap at bottom of containing div */
  display: block;
  /* weird Firefox bug: needs width:100% or else it will break context-block trick
     (where display:table-cell fills in remaining width after fixed-width column float) */
  width: 100%;
  max-width: 100%;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  /*width: auto\9; /* ie8+9, but alas, breaks in IE10 */
  /* lt ie8 */
  -ms-interpolation-mode: bicubic;
  /* optionally force a minimum size if img src size is known: */
  /* min-height: 320px; /* max-height of .crop-height */
  /* min-width: 480px; /* proportional to above */
}

.lt-ie9 img.scale, object.scale {
  width: auto\9; /* ie8+9 - need to test*/
}