/* null margins and padding to give good cross-browser baseline */
html,body,div,p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,
dl,dt,dd,
main,section,footer,header,nav {
 margin:0;
 padding:0;
}

img, fieldset {
 border:none;
}

*, *:after, *:before {
 box-sizing:border-box;
}

@media (max-width:480px) {
 /* Fix for pre "viewport <meta>" mobile browsers */
 * {
  -webkit-text-size-adjust:none;
  -ms-text-size-adjust:none;
 }
}

hr {
 /*
  HR in my code are for semantic breaks in topic/section, NOT
  style/presenation, so hide them from screen.css users
 */
 display:none;
}

body {
 display:flex;
 flex:1 0 auto;
 flex-direction:column;
 min-height:100vh;
 font:normal 1em/1.5 arial,helvetica,sans-serif;
 padding:2em 0;
 background:rgba(0,0,170,0.075);
}

h1 {
 float:left;
 font:bold 235%/115% arial,helvetica,sans-serif;
 padding:0.125em 0;
}

h1 span {
 color:#FFF;
 background:#000;
 padding:0 0.175em;
 border-radius:0.175em;
}

h1 a,
h1 a:visited,
h1 a:hover {
 text-decoration:none;
 color:#000;
 position:relative;
}

hgroup h3 {
 padding:0;
}

h2 {
 font:bold 165%/110% arial,helvetica,sans-serif;
}

h2 i {
 font:bold 150%/110% arial,helvetica,sans-serif;
} 

h3 {
 font:bold 125%/125% arial,helvetica,sans-serif;
}

h2,
h3 { 
 padding-bottom:0.5em;
}

h2 span {
 padding-left:0.175em;
}

h3 span {
 padding-left:0.275em;
}

p {
 padding-bottom:0.75em;
}

a {
 text-decoration:none;
 color:#00A;
}

a:hover {
 text-decoration:underline;
}

#mainMenu {
 float:right;
 padding:0.75em 0.5em 0 0;
}

#mainMenu ul {
 list-style:none;
}

#mainMenu li {
 display:inline;
 padding-left:0.5em;
}

#mainMenu a {
 display:inline-block;
 font-family:arial,helvetica,sans-serif;
 font-size:1.125em;
 line-height:1.5em;
 font-weight:normal;
 text-align:center;
 text-decoration:none;
 text-transform:uppercase;
 color:#000;
 padding:0.075em 0.375em;
 margin-bottom:0.5em;
 border-radius:0.5em;
}

#mainMenu a:hover {
 background:#000;
 color:#FFF;
}

#mainMenu strong a {
 background:#000;
 color:#FFF;
}

header {
 clear:both;
 overflow:hidden;
 padding:1em 0;
}

.heightWrapper {
 flex:1 0 auto;
 clear:both;
 overflow:hidden;
}

#top {
 display:flex;
 flex-grow:1;
 flex-direction:column;
 max-width:52em;
 width:100%;
 margin:0 auto;
 border-radius:1em;
 padding:0 1em 1em 1em;
 box-shadow:0 0.25em 1em rgba(0,0,0,0.25);
 background:#FFF;
}

footer {
 border-top:3px solid #EEE;
 text-align:center;
 padding:0.75em 0 0 0;
}

footer span {
 display:none;
}

main ol,
main ul {
 padding:0 0 0.75em 2em;
}

main ol li,
main ul li {
 padding-bottom:0.25em;
}

.accesibilityBadge {
 float:left;
 font-size:2em;
 line-height:1em;
 font-family:arial;
}

.views > * {
 width:100%;
 max-width:24.5em;
}

.views {
 display:flex;
 flex-wrap:wrap;
 width:100%;
 padding-bottom:1em;
 margin-top:-0.5em; /* negative .views > article margin-top */
}

.views > article {
 flex:1 0 auto;
 width:100%;
 margin:0.5em 0.5em 0 0;
 padding:1em;
}

@media (min-width:65em) {
 #top {
  max-width:62em;
 }
 .views > * {
  max-width:29.5em;
 }
}

@media (max-width:53em) {
 .url {
  padding-bottom:0.5em;
 }
 .views > article {
  padding:0;
 }
 #top {
  border-radius:0;
 }
 h1,
 h1 small,
 #mainMenu {
  float:none;
  margin:0 auto;
  text-align:center;
 }
 .views > * {
  max-width:100%;
 }
}

@media (max-width:30em) {
 h1 {
  font:bold 170%/115% arial,helvetica,sans-serif;
 }
 h2 {
  font:bold 130%/115% arial,helvetica,sans-serif;
 }
 h2 i {
  font:bold 120%/115% arial,helvetica,sans-serif;
 }
}