/*------------------------------------*\
  OVERVIEW

  Implementation based on: http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/

\*------------------------------------*/


/*------------------------------------*\
  RESET
\*------------------------------------*/
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset, img {
  border: 0;
}
address, caption, cite, dfn, th, var {
  font-style: normal;
  font-weight: normal;
}
caption, th {
  text-align: left;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before, q:after {
  content: '';
}
abbr, acronym {
  border: 0;
}

/*
Notes:
- The div.sys_region_* element has an inline line-height of `normal` which is inherited by content and interferes
- This forces and override but would prefer to remove the inline attribute if possible
*/
div[id*='sys_region_'] {
    line-height: 1.5em ! important;
}
/*
Notes:
- The div.sys_region_* element has an inline padding of 5px which adds unnecessary spacing that interferes with content layout.
- This forces and override but would prefer to remove the inline attribute if possible
*/
div[id*='sys_region_'] {
    padding: 0 ! important;
}

/*------------------------------------*\
  MAIN
\*------------------------------------*/

body {
  line-height: 1.5em;
  margin:0;
}

/*------------------------------------*\
  TYPE
\*------------------------------------*/
/*--- HEADINGS ---*/
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 24px;
  font-weight: bold;
}
h1 {
  font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
  line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */
}

h2 {
  font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */
  line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */
}

h3 {
  font-size: 1.25em; /* 20px --> 20 ÷ 16 = 1.25 */
  line-height: 1.2em; /* 24px --> 24 ÷ 20 = 1.2 */
}

h4 {
  font-size: 1.125em; /* 18px --> 18 ÷ 16 = 1.125 */
  line-height: 1.333em; /* 24px --> 24 ÷ 18 = 1.3333333(3) */
}

h5, h6 {
  font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */
  line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */
}

/*--- PARAGRAPHS ---*/

p {
  margin-bottom: 24px;
}

/*
 clear bottom margin on the last element within text widgets
*/
.sys_txt *:last-child {
  margin-bottom: 0;
}


/*--- LISTS ---*/
ul, ol {
  margin-bottom: 24px;
    /* Remember, if your magic number is
    different to this, use your own. */
}

ul {
  list-style: square;
  padding-left: 2em;
}

ul ul,
ol ol {
  margin: 0 0 0 60px;
}

/*--- QUOTES ---*/
blockquote {
  margin: 0 60px 0 45px;
  border-left: 5px solid;
  padding-left: 12px;
  text-indent: -0.4em;
}

blockquote b, blockquote strong {
  display: block;
  text-indent: 0;
}