/*
  Red: #a42b22
  Blue: #0699cc
  Grey: #c1c1c1
  "Cream": #f2f2f2
*/

body {
  background: #ffffff;
  color: #000000;
  font: 1.1em/1.7 'Calibri', 'Trebuchet MS', 'Helvetica Neue', 'Arial', sans-serif;
  //max-width: 34em;
  margin: 0 auto;
  padding: 1em 3%;
}

h1,h2,h3 {
  font-family: 'Calibri', 'Trebuchet MS', 'Helvetica Neue', 'Arial', sans-serif;
}

h1 {
	font-size: 1.5em;
	line-height: 1em;
	margin-top: 2em;
}

h2 {
  font-size: 1.25em;
  line-height: 1em;
  margin-top: 1.6em;
}

img {
  max-width: 100%;
  border: 0;
  padding: 0.5em;
}

p, ul {
  margin: 1.2em .2em 0;
}

section,nav,header,footer {
  display: block;  
}

section header {  
  border-bottom: 2px solid #bebdbd;
  text-align: center;
  margin: 0 0 2em;
}

header h2 {
  position: relative;
  margin-bottom: -0.5em;
  display: inline-block;
  bottom: -0.85em;
}

header h2:before, header h2:after {
  display: inline-block;
  font-size: 0.4em;
  padding: 0 1em;
  position: relative;
  top: -0.3em;
}

[role="navigation"] ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

[role="navigation"] li {
  margin-bottom: 1em;
}

[role="navigation"] li a:link,
[role="navigation"] li a:visited {
  color: #91afd5;
}

[role="navigation"] li:before, [role="navigation"] li:after {
  display: inline-block;
  color: #0397cc;
  font-size: 0.4em;
  padding: 0 0.6em;
  position: relative;
  top: -0.3em;
}

[role="content"] {
  border-top: 2px solid #bebdbd;
  margin: 1em;
  padding: 0.5em;
  font-size: 0.85em;
  text-align: center;
}

[role="content"] ul,
[role="content"] li {
  list-style: none;
  margin: 0;
  padding: 0;
}

[role="content"] li {
	margin-bottom: 1em;
}

#content > header p {
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  line-height: 1.4em;
  margin: 0;
}

@media all and (min-width: 37.5em) {
  body {
    line-height: 2;
    font-size: 1.2em;
    padding: 0 3%;
  }
  [role="navigation"] li {
    display: inline-block;
    margin-bottom: 0;
  }
  [role="navigation"] li a {
    display: inline-block;
    padding: 0 .7em;
  }
  [role="navigation"] li:before {
    content: '';
  }
  [role="navigation"] ul:before, [role="navigation"] li:after {
    display: inline-block;
    content: "•••";
    color: #0397cc;
    font-size: 0.4em;
    padding: 0 0 0 0.6em;
    position: relative;
    top: -0.3em;
  }
  [role="content"] li {
    display: inline;
    margin-bottom: 0;
  }
  content > header p {
    margin: 0 4em;  
    font-size: 0.95em;
    line-height: 1.75em;
  }
}