/* TYPOGRAPHY
   ------------------------------------------------------------------
   Font Stacks: http://code.stephenmorley.org/html-and-css/the-myth-of-web-safe-fonts/
      narrow serif         ->    font-family:'Times New Roman',Times,serif;
      wide serif           ->    font-family:Georgia,Utopia,Charter,serif;
      narrow sans-serif    ->    font-family:Helvetica,Arial,sans-serif;
      wide sans-serif      ->    font-family:Verdana,Geneva,sans-serif;
      monospace            ->    font-family:'Courier New',Courier,monospace;
   ------------------------------------------------------------------ */

/* headings */
   h1, h2, h3, h4, h5, h6 {
      position: relative; /* to allow for absolute positioning of child elements */
      overflow: hidden; /* make room for floated elements so they are next to not under the headings | makes top links clickable */
      clear: left; /* overflow hidden above messes up tabs and headings */
      }

   h1, .h1, h2, .h2, h3, .h3 {
      font-weight: 400;
      font-family: Georgia, "Times New Roman", serif;
      text-transform: capitalize; /* ??? is this technically incorrect because it caps "the" or "a" words in titles */
      letter-spacing: -0.025em;
      }

   h1, .h1 {
      font-size: 36px;
      font-size: 3rem; /* 36px */
      line-height: 72px; /* absolute | multiple of 18px */
      line-height: 2; /* relative to element's font size */
      }

   h2, .h2 {
      font-size: 24px;
      font-size: 2rem; /* 24px */
      line-height: 54px;
      line-height: 2.25;
      }

   h3, .h3 {
      font-size: 16px;
      font-size: 1.33333333333333rem; /* 16px */
      line-height: 2.25; /* 36px */
      text-transform: uppercase; /* override capitalize */
      letter-spacing: .025em; /* override -.025em */
      word-spacing: .25em;
      }

   h4, .h4, h5, h6 {
      font-family: sans-serif; /* override serif */
      font-size: 12px;
      font-size: 1rem; /* 12px | 1.166666666666667em x 12px = 14px */
      line-height: 3; /* 36px | 2.571428571428571 x 14px = 36px*/
      text-transform: uppercase; /* override capitalize */
      letter-spacing: .025em; /* override -.025em */
      word-spacing: .25em;
      }

/* paragraphs and separators */
   p {
   /* give only bottom margin (1.5em x 12px = 18px | maintain vertical rhythm, avoid margin collapsing, easier to swap elements in and out */
      margin: 0 0 18px;
      margin: 0 0 1.5rem;
      color: #444;

   /* break long strings, such as URLs, so they wrap instead of breaking layout | can use the <wbr> tag as well to indicate a good break point
      All 3 below work in Chrome and have the same effect */
      word-wrap: break-word; /* originally proprietary in IE, replaced by overflow-wrap in CSS3 */
      word-break: break-word; /* Non standard for webkit to override break-all (was removed since too aggressive) | does not validate */
      overflow-wrap: break-word;

   /* add hyphens when breaking words | lang attribute may need to be set on p for this to work */
      -webkit-hyphens: auto;
         -moz-hyphens: auto; /* works in FF */
          -ms-hyphens: auto;
              hyphens: auto;
      }

/* word break <wbr> */
   wbr:after { content: "\00200B"; } /* TODO : test support */

   q { quotes: none; } /* remove default "" since some browsers don't show them | using q changes line-height slightly */

/* decorative & */
   .amp {
      font-family: Cochin, Baskerville, Palatino, "Book Antiqua", serif;
      font-style: italic;
      }

/* highlight */
   mark,
   .highlight { background-color: #F9FDA2; }

/* code samples */
   code {
      font-weight: 700;
      color: #B00;
      }

   blockquote,
   .indent {
      font: 400 1.5em serif;
      color: #000;
      margin:0 0 1.5em 3em;
      border-left: 5px solid #ddd;
      padding:0 1.5em;
      }

/* highlighted sections of content; for long asides or content that's not suitable for sidebar; similar to msg error, msg info */
   aside,
   .callout,
   .pull-quote {
      font: 400 1.5em/1 serif;
      color: #000;
      float: right;
      font-style: italic;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      padding: 1em;
      margin: 1em 0 1em 1em;
      width: 25%;
      }