/* =============================================================================
   Styling and layout for all media
   ========================================================================== */


@media all {

  /* =============================================================================
     Abridged version of Normalize.css
     ========================================================================== */
  /* original authors: Nicolas Gallagher and Jonathan Neal - http://necolas.github.com/normalize.css/ */

  /* corrects block display not defined in IE6-9, Firefox3 */
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  nav,
  section {
    display: block;
  }

  /* corrects inline-block display not defined in IE6-9, Firefox3 */
  audio,
  canvas,
  video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
  }

  /* prevents modern browsers from displaying 'audio' without controls */
  audio:not([controls]) {
    display: none;
  }

  /* addresses styling for 'hidden' attribute not present in IE7-9, Firefox3, Safari4 */
  [hidden] {
    display: none;
  }

  html {
    font-size: 100%;
    /* always force scrollbar padding so we don't get 'jumping' */
    overflow-y: scroll;
    /* prevents iOS text size adjust after orientation change, without disabling user zoom -
        http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
    -webkit-text-size-adjust: 100%;
    /* as above, for Windows Phone */
    -ms-text-size-adjust: 100%;
  }

  /* addresses style set to 'bolder' in Firefox3-4, Safari4-5, Chrome */
  b,
  strong {
    font-weight: bold;
  }

  /* addresses CSS quotes not supported in IE6-7, addresses quote property not supported in Safari4 */
  q {
    quotes: none;
  }
  q:before, q:after {
    content: '';
    content: none;
  }

  /* prevents sub and sup affecting line-height in all browsers */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  /* make table cells align top by default */
  th,
  td {
    vertical-align: top;
  }

  /* reset default padding on lists */
  ul,
  ol,
  dd {
    padding: 0;
  }

  /* corrects inner padding and border displayed oddly in Firefox3-4 - www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
  ::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  /* =============================================================================
     Clearfix
     ========================================================================== */
  /* updated to prevent margin-collapsing on child elements in most situations - http://nicolasgallagher.com/micro-clearfix-hack/ */

  .clearfix {
    *zoom: 1;
  }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }

}


/* =============================================================================
   Styling and layout for screen media > 959px
   ========================================================================== */


@media screen {

  /* =============================================================================
     Layout
     ========================================================================== */

  body {
    width: 960px;
    margin: 0 auto 20px;
    background: white;
  }

  header {
    border-left: solid 1px #d4d4d4;
    border-right: solid 1px #d4d4d4;
    padding: 10px 10px 0;
    background: #f0f2f6;
  }

  header h1 {
    text-shadow: 1px 1px #c8c8c8;
  }

  nav {
    border: solid 1px #e1a61a;
    border-radius: 0 0 5px 5px;
    background: #ffda44;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#ffda44, #fabc2b);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#ffda44, #fabc2b);
    /* IE10 */
    background: -ms-linear-gradient(#ffda44, #fabc2b);
    /* Opera11.10+ */
    background: -o-linear-gradient(#ffda44, #fabc2b);
    /* CSS3 Compliant */
    background: linear-gradient(#ffda44, #fabc2b);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffda44',EndColorStr='#fabc2b');
  }
  nav h1 {
    display: none;
  }
  nav ul {
    list-style: none;
    list-style-image: none;
    margin: 0;
  }
  nav li {
    float: left;
    margin: 0;
    border-right: solid 1px #e1a61a;
  }
  nav a {
    text-decoration: none;
    text-shadow: 1px 1px #ffe991;
    display: block;
    padding: 10px;
    color: #333333;
  }
  nav a:hover, nav a:active {
    text-decoration: none;
    background: #ffe477;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe477), to(#fbcc5d));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#ffe477, #fbcc5d);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#ffe477, #fbcc5d);
    /* IE10 */
    background: -ms-linear-gradient(#ffe477, #fbcc5d);
    /* Opera11.10+ */
    background: -o-linear-gradient(#ffe477, #fbcc5d);
    /* CSS3 Compliant */
    background: linear-gradient(#ffe477, #fbcc5d);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe477',EndColorStr='#fbcc5d');
  }

  [role="main"] {
    float: left;
    width: 640px;
    margin: 20px 10px 0;
  }

  [role="complementary"] {
    float: left;
    margin: 20px 10px;
    border: solid 1px #d4d4d4;
    border-radius: 5px;
    padding: 10px 10px 0;
    width: 258px;
    background: #f0f2f6;
  }

  footer {
    clear: both;
    border: solid 1px #d4d4d4;
    border-radius: 5px;
    padding: 10px;
    /* declare width to fix for IE7 double padding bug */
    width: 938px;
    background: #f0f2f6;
    font-family: Verdana, sans-serif;
  }

  #search-page [role="main"] article:last-of-type {
    margin-bottom: 1em;
  }

  /* =============================================================================
     Links
     ========================================================================== */

  a {
    -webkit-tap-highlight-color: rgba(255, 230, 153, 0.5);
    text-decoration: none;
    color: #114eb1;
  }
  a:hover, a:active {
    /* improves readability when focused and also mouse hovered in all browsers - people.opera.com/patrickl/experiments/keyboard/test */
    outline: 0;
  }

  header a {
    color: #333333;
  }

  [role="main"] a:hover, [role="main"] a:active,
  [role="complementary"] a:hover,
  [role="complementary"] a:active,
  footer a:hover,
  footer a:active {
    text-decoration: underline;
    color: #1a428b;
  }
  [role="main"] a:visited,
  [role="complementary"] a:visited,
  footer a:visited {
    color: #183082;
  }

  [role="main"] h1 a {
    color: #333333;
  }
  [role="main"] h1 a:visited {
    color: #333333;
  }
  [role="main"] h1 a:hover, [role="main"] h1 a:active {
    text-decoration: none;
    color: #333333;
    background: #f0f2f6;
  }

  /* =============================================================================
     Typography
     ========================================================================== */

  body {
    /* 14px / 16px */
    font-size: .875em;
    /* 22px / 13px */
    line-height: 1.69em;
    font-family: Lato, Verdana, "Lucida Grande", Tahoma, Arial, sans-serif;
    color: #333333;
  }

  h1 {
    /* 39px / 13px */
    font-size: 3em;
    font-style: italic;
    font-weight: 900;
    /* 44px / 39px */
    line-height: 1.12820512820513em;
    letter-spacing: -1px;
    margin: 0;
    /* 10px / 39px */
    padding-top: .256410256410256em;
    /* 20px / 39px */
    padding-bottom: .512820512820513em;
  }

  [role="main"] h1 {
    font-size: 2.4em;
  }

  h2,
  h3 {
    /* 24px / 13px */
    font-size: 1.84615384615385em;
    /* 32px / 24px */
    line-height: 1.33333333333333em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    /* 13px / 26px */
    padding-bottom: .5em;
  }

  h4 {
    /* 13px / 13px */
    font-size: 1em;
    margin: 0;
  }

  p {
    margin: 0;
    /* 13px / 13px */
    padding-bottom: 1em;
  }

  blockquote {
    font-style: italic;
    float: right;
    margin: 0 0 .5em 1em;
    border-radius: 5px;
    padding: 1em 10px 0;
    width: 260px;
    background: #f0f2f6;
  }

  dfn,
  q {
    font-style: italic;
    background: #fdf5d9;
  }

  /* addresses styling not present in IE7-9, Safari5, Chrome */
  abbr[title],
  acronym[title],
  dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
  }

  pre,
  code,
  kbd,
  samp,
  var {
    font-family: Consolas, Monaco, monospace;
    background: #fdf5d9;
    border-radius: 5px;
  }

  code,
  kbd,
  samp,
  var {
     padding: 1px 3px;
  }

  pre {
    margin: 0 0 1.3em;
    padding: 1em 10px;
    overflow-x: auto;
  }

  mark {
    background: #fdf5d9;
    color: #333333;
    font-style: italic;
    font-weight: bold;
  }

  small,
  figcaption,
  tfoot,
  .footnote {
    /* 11px / 13px */
    font-size: .84615384615385em;
    /* 15px / 11px */
    line-height: 1.36363636363636em;
  }

  figcaption,
  tfoot,
  .footnote {
    color: #999999;
  }

  figcaption {
    font-style: italic;
  }

  /* =============================================================================
     Embedded content
     ========================================================================== */

  /* removes border when inside 'a' element in IE6-9,
      improves image quality when scaled in IE7 - code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
  img {
    border: 0;
    -ms-interpolation-mode: bicubic;
  }

  /* corrects overflow displayed oddly in IE9 */
  svg:not(:root) {
    overflow: hidden;
  }

  article img, article embed, article object, article video {
    max-width: 100%;
    height: auto;
    margin: 3px 0;
  }

  figure {
    margin: 0 0 1.3em;
  }

  .hero {
    border: 5px solid #f0f2f6;
    border-radius: 50%;
    max-width: 240px;
    height: auto;
    float: right;
  }

  /* =============================================================================
     Tables
     ========================================================================== */

  table {
    margin-bottom: 1.3em;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
  }

  caption {
    font-style: italic;
    text-align: left;
    margin-bottom: .5em;
  }

  thead {
    border-right: 1px solid #f0f2f6;
    border-left: 1px solid #f0f2f6;
    background: #f0f2f6;
  }

  tfoot {
    border-right: 1px solid #f0f2f6;
    border-left: 1px solid #f0f2f6;
    background: #f6f8fa;
  }

  tbody {
    border-right: 1px solid #f0f2f6;
    border-left: 1px solid #f0f2f6;
  }

  th,
  td {
    border-bottom: 1px solid #f0f2f6;
    padding: .25em 9px;
  }

  th {
    text-align: left;
    border-top: 1px solid #f0f2f6;
  }

  /* =============================================================================
     Lists
     ========================================================================== */

  [role="main"] ul, [role="main"] ol, [role="main"] dl,
  [role="complementary"] ul,
  [role="complementary"] ol,
  [role="complementary"] dl {
    margin: 0 0 1em 20px;
  }

  dt {
    font-family: "Droid Serif", Georgia, Times, serif;
    font-style: italic;
  }

  [role="complementary"] #monthly-list {
    list-style: none;
    margin: 0;
    padding: 5px 0 10px;
  }
  [role="complementary"] #monthly-list li {
    text-align: center;
    float: left;
    display: block;
    margin: 0 4px 6px 0;
    min-width: 36px;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  [role="complementary"] #monthly-list li:active {
    position: relative;
    top: 1px;
  }
  [role="complementary"] #monthly-list a {
    text-decoration: none;
    color: #333333;
  }
  [role="complementary"] #monthly-list a:hover, [role="complementary"] #monthly-list a:focus {
    color: #1a1a1a;
  }
  [role="complementary"] #monthly-list a .archive-year {
    /* 10px / 13px */
    font-size: .76923076923077em;
    /* 15px / 10px */
    line-height: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px #ffe991;
    border-radius: 5px 5px 0 0;
    background: #ffda44;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#ffda44, #fabc2b);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#ffda44, #fabc2b);
    /* IE10 */
    background: -ms-linear-gradient(#ffda44, #fabc2b);
    /* Opera11.10+ */
    background: -o-linear-gradient(#ffda44, #fabc2b);
    /* CSS3 Compliant */
    background: linear-gradient(#ffda44, #fabc2b);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffda44',EndColorStr='#fabc2b');
  }
  [role="complementary"] #monthly-list a:hover .archive-year, [role="complementary"] #monthly-list a:focus .archive-year {
    background: #ffe477;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe477), to(#fbcc5d));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#ffe477, #fbcc5d);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#ffe477, #fbcc5d);
    /* IE10 */
    background: -ms-linear-gradient(#ffe477, #fbcc5d);
    /* Opera11.10+ */
    background: -o-linear-gradient(#ffe477, #fbcc5d);
    /* CSS3 Compliant */
    background: linear-gradient(#ffe477, #fbcc5d);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe477',EndColorStr='#fbcc5d');
  }
  [role="complementary"] #monthly-list a .archive-month {
    border-radius: 0 0 5px 5px;
  }
  [role="complementary"] #monthly-list a:hover .archive-month, [role="complementary"] #monthly-list a:focus .archive-month {
    background: #fdf5d9;
  }
  [role="complementary"] #monthly-list span {
    display: block;
  }

  [role="main"] #article-list {
    list-style: none;
    margin: 0 0 2em 0;
    border-top: 1px solid #f0f2f6;
  }

  #article-list li {
    border-bottom: 1px solid #f0f2f6;
    padding-top: 1em;
  }

  /* =============================================================================
     Forms
     ========================================================================== */

  /* corrects margin displayed oddly in IE6-7 */
  form {
    margin: 0;
  }

  /* remove default fieldset styling across browsers */
  fieldset {
    margin: 0;
    border: 0;
    padding: 0;
  }

  /* hand cursor on clickable input elements (except disabled ones) */
  label,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  button {
    cursor: pointer;
  }

  input[disabled] {
    cursor: default;
  }

  /* make Safari render search inputs as text inputs (and unstyled) */
  input[type="search"] {
    -webkit-appearance: textfield;
  }

  ::-webkit-search-decoration {
    display: none;
  }

  /* improves appearance and consistency in all browsers */
  button,
  .button,
  input,
  select,
  textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    /* improves appearance and consistency in IE7 */
    *vertical-align: middle;
  }

  /* colour placeholder text (Webkit and Mozilla only, so far) */
  ::-webkit-input-placeholder {
    color: #bbb;
  }

  :-moz-placeholder {
    color: #bbb;
  }

  /* suppress red glow that Firefox adds to form fields by default, even when user is still typing */
  :invalid {
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  textarea {
    /* 11px / 13px */
    font-size: .84615384615385em;
    /* 15px / 11px */
    line-height: 1.36363636363636em;
    font-family: Verdana, "Lucida Grande", Tahoma, Arial, sans-serif;
    border: solid 1px #d4d4d4;
    padding: .5em 5px .55em;
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  input[type="text"]:hover, input[type="text"]:focus,
  input[type="email"]:hover,
  input[type="email"]:focus,
  input[type="url"]:hover,
  input[type="url"]:focus,
  input[type="search"]:hover,
  input[type="search"]:focus,
  textarea:hover,
  textarea:focus {
    background: #fdf5d9;
  }

  input[type="search"] {
    width: 192px;
    margin-right: 2px;
    padding: .5em 0 .55em 5px;
    display: inline-block;
    /* display and zoom IE7 fix for display:inline-block */
    *display: inline;
    *zoom: 1;
  }

  textarea {
    width: 100%;
    /* removes default vertical scrollbar in IE7-9 */
    overflow: auto;
    /* improves readability and alignment in all browsers */
    vertical-align: top;
    resize: vertical;
  }

  .large input {
    width: 320px;
  }
  .large textarea {
    height: 156px;
  }

  .small input {
    width: 160px;
  }
  .small textarea {
    height: 78px;
  }

  /* addresses box sizing set to content-box and excess padding in IE8-9 */
  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  .checkboxes,
  .radiobuttons {
    padding: 0 0 7px;
  }
  .checkboxes span,
  .radiobuttons span {
    display: block;
  }
  .checkboxes input,
  .radiobuttons input {
    float: left;
    margin: 3px 8px 0 0;
  }
  .checkboxes label,
  .radiobuttons label {
    float: left;
    display: block;
  }

  /* =============================================================================
     Buttons
     ========================================================================== */

  /* make buttons play nice in IE: http://www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
  input,
  button,
  .button {
    width: auto;
    overflow: visible;
  }

  /* fix black border bug on styled buttons in IE7 by remove borders entirely */
  .ie7 button,
  .ie7 .button,
  .ie7 input[type="button"],
  .ie7 input[type="reset"],
  .ie7 input[type="submit"],
  .ie7 #paginator span.disabled {
    border: 0;
  }

  button,
  .button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    /* 11px / 13px */
    font-size: .84615384615385em;
    /* 15px / 11px */
    line-height: 1.36363636363636em;
    font-family: Verdana, "Lucida Grande", Tahoma, Arial, sans-serif;
    font-weight: normal;
    text-align: center;
    text-shadow: 1px 1px #ffe991;
    outline: 0;
    cursor: pointer;
    border: solid 1px #e1a61a;
    border-radius: 5px;
    padding: .5em .8em .5em;
    /* 28px */
    height: 2.545454545454545em;
    display: inline-block;
    /* display and zoom IE7 fix for display:inline-block */
    *display: inline;
    *zoom: 1;
    color: #333333;
    background: #ffda44;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#ffda44, #fabc2b);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#ffda44, #fabc2b);
    /* IE10 */
    background: -ms-linear-gradient(#ffda44, #fabc2b);
    /* Opera11.10+ */
    background: -o-linear-gradient(#ffda44, #fabc2b);
    /* CSS3 Compliant */
    background: linear-gradient(#ffda44, #fabc2b);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffda44',EndColorStr='#fabc2b');
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  button:hover,
  .button:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover,
  input[type="submit"]:hover {
    background: #ffe477;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe477), to(#fbcc5d));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#ffe477, #fbcc5d);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#ffe477, #fbcc5d);
    /* IE10 */
    background: -ms-linear-gradient(#ffe477, #fbcc5d);
    /* Opera11.10+ */
    background: -o-linear-gradient(#ffe477, #fbcc5d);
    /* CSS3 Compliant */
    background: linear-gradient(#ffe477, #fbcc5d);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe477',EndColorStr='#fbcc5d');
  }
  button:active,
  .button:active,
  input[type="button"]:active,
  input[type="reset"]:active,
  input[type="submit"]:active {
    position: relative;
    top: 1px;
    color: #1a1a1a;
    background: #fabc2b;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#fabc2b), to(#ffda44));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#fabc2b, #ffda44);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#fabc2b, #ffda44);
    /* IE10 */
    background: -ms-linear-gradient(#fabc2b, #ffda44);
    /* Opera11.10+ */
    background: -o-linear-gradient(#fabc2b, #ffda44);
    /* CSS3 Compliant */
    background: linear-gradient(#fabc2b, #ffda44);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fabc2b',EndColorStr='#ffda44');
  }

  input[type="submit"].disabled,
  #paginator span.disabled {
    text-shadow: none;
    top: 0;
    cursor: default;
    border: solid 1px #d2d2d2;
    color: #999999;
    background: #e6e6e6;
    /* Safari4+, Chrome */
    background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#dadada));
    /* Safari5.1+, Chrome10+ */
    background: -webkit-linear-gradient(#e6e6e6, #dadada);
    /* Firefox3.6 */
    background: -moz-linear-gradient(#e6e6e6, #dadada);
    /* IE10 */
    background: -ms-linear-gradient(#e6e6e6, #dadada);
    /* Opera11.10+ */
    background: -o-linear-gradient(#e6e6e6, #dadada);
    /* CSS3 Compliant */
    background: linear-gradient(#e6e6e6, #dadada);
    /* IE7-9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e6e6e6',EndColorStr='#dadada');
  }

  #paginator {
    margin: 1em 0;
  }
  #paginator .button {
    padding: .1em .66em;
    height: 1.5em;
  }
  #paginator a.button {
    text-decoration: none;
    color: #333333;
  }

  #paginator-l {
    float: left;
  }

  #paginator-r {
    float: right;
  }

  /* =============================================================================
     Comments
     ========================================================================== */

  .comments {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 1em 10px 0;
    background: #f6f8fa;
  }
  .comments h4 span {
    font-weight: normal;
  }
  .comments h4 .comment-anchor {
    float: right;
  }

  .comments-author {
    background: #f0f2f6;
  }

  #cpreview {
    margin-bottom: 2px;
    border-radius: 5px;
    padding: 1em 10px;
    background: #f0f2f6;
  }

  .comments_error {
    background: #fff4f4 !important;
  }

  .required,
  .error_message li {
    color: #c00;
  }

  /* get rid of proprietary focus glows and add our own */
  a:focus,
  input:focus,
  textarea:focus,
  button:focus {
    outline: 0;
    background: #fdf5d9;
    -webkit-box-shadow: 0 0 5px #fabc2b;
    box-shadow: 0 0 5px #fabc2b;
  }

}


/* =============================================================================
   Additional layout for screen media < 960px
   ========================================================================== */


@media handheld and (max-width:480px),screen and (max-device-width:480px),screen and (max-width:960px) {

  body {
    width: 660px;
  }

  [role="main"] {
    float: none;
  }

  [role="complementary"] {
    float: none;
    margin: 0 10px 20px;
  }

  footer {
    width: 638px;
  }

}


/* =============================================================================
   Additional layout for screen media < 768px
   ========================================================================== */


@media only screen and (max-width: 767px) {

  body {
    width: 440px;
  }

  [role="main"] {
    width: 420px;
  }

  footer {
    width: 418px;
  }

  blockquote {
    margin-bottom: 1em;
    width: 400px;
  }

  h1 {
    /* 30px / 13px */
    font-size: 2.30769230769231em;
    /* 34px / 30px */
    line-height: 1.13333333333333em;
    padding-top: 0;
  }

  h2,
  h3 {
    /* 18px / 13px */
    font-size: 1.38461538461538em;
    /* 24px / 18px */
    line-height: 1.33333333333333em;
  }

  .large input {
    width: 280px;
  }

  .small input {
    width: 140px;
  }
}


/* =============================================================================
   Additional layout for screen media < 480px
   ========================================================================== */


@media only screen and (max-width: 479px) {

  body {
    width: 300px;
  }

  [role="main"] {
    width: 280px;
  }

  footer {
    width: 278px;
  }

  blockquote {
    margin-bottom: 1em;
    width: 260px;
  }

  .hero {
    border: none;
    border-radius: 0;
    display: block;
    float: none;
    height: auto;
    width: 100%;
  }
}


/* =============================================================================
   Styling and layout for print media
   ========================================================================== */


@media print {

  * {
    /* black prints faster: http://sanbeiji.com/archives/953 */
    color: black !important;
    text-shadow: none !important;
    background: transparent !important;
    filter: none !important;
  }

  @page {
    margin: 0.5cm;
}

  body {
    font-size: 8pt;
    line-height: 12pt;
    font-family: "Helvetica Neue", Helvetica, Arial, SunSans-Regular, sans-serif;
    margin: 0;
    padding: 2em 6em;
  }

  header {
    margin-bottom: 24pt;
    border-bottom: 1pt solid black;
  }

  footer {
    margin-top: 12pt;
    border-top: 1pt solid black;
    padding-top: 12pt;
  }

  /* hide unnecessary content from print */
  nav,
  [role="complementary"],
  #paginator,
  #comments-form,
  .comments h4 a:last-child {
    display: none;
  }

  a {
    text-decoration: none;
  }

  /* show URLs for certain links in print */
  a[href]:after {
    content: " (" attr(href) ")";
  }

  h1 a[href]:after,
  h2 a[href]:after,
  h3 a[href]:after,
  sup a[href]:after,
  .comment-count[href]:after,
  a[rel="tag"]:after {
    content: "";
  }

  /* show long-form for abbreviations in print
     acronym to be phased out of textile in favour of abbr */
  abbr[title]:after,
  acronym[title]:after {
    content: " (" attr(title) ")";
  }

  h1 {
    font-size: 32pt;
    line-height: 36pt;
    font-weight: normal;
    padding-bottom: 16pt;
  }

  h2,
  h3 {
    font-size: 14pt;
    line-height: 18pt;
    padding-bottom: 8pt;
    page-break-after: avoid;
    orphans: 3;
    widows: 3;
  }

  p {
    padding-bottom: 8pt;
    orphans: 3;
    widows: 3;
  }

  footer,
  figcaption,
  tfoot,
  small,
  .footnote {
    font-size: 6pt;
    line-height: 9pt;
  }

  blockquote {
    margin-bottom: 8pt;
    border: 1pt solid black;
    padding: 8pt 8pt 0;
    page-break-inside: avoid;
  }

  pre {
    margin-bottom: 8pt;
    border: 1pt solid black;
    padding: 8pt;
  }

  .comments {
    page-break-inside: avoid;
  }

  pre,
  code,
  kbd,
  samp,
  var {
    font-family: "Courier New", Courier, monospace;
  }

  dfn,
  q,
  dt {
    font-style: italic;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  figure {
    margin-bottom: 8pt;
  }

  figcaption {
    margin-top: 4pt;
  }

  ul {
    list-style: square;
    margin: 0 0 8pt 1.8em;
  }

  ol {
    list-style: decimal;
    margin: 0 0 8pt 1.8em;
  }

  dl {
    margin: 0 0 8pt 1.8em;
  }

  table {
    margin-bottom: 8pt;
    width: 100%;
  }

  caption {
    font-weight: bold;
    text-align: left;
    margin-bottom: 4pt;
  }

  thead {
    /* display table head across multi-page tables: http://css-discuss.incutio.com/wiki/Printing_Tables */
    display: table-header-group;
    border-right: 1pt solid black;
    border-left: 1pt solid black;
  }

  tfoot {
    border-right: 1pt solid black;
    border-left: 1pt solid black;
  }

  tbody {
    border-right: 1pt solid black;
    border-left: 1pt solid black;
  }

  tr {
    page-break-inside: avoid;
  }

  th,
  td {
    border-bottom: 1pt solid black;
    padding: 4pt 8pt;
  }

  th {
    text-align: left;
    border-top: 1pt solid black;
  }

}