/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
 margin:0;
 padding:0;
}

img, fieldset {
 border:none;
}

* {
 box-sizing:border-box;
}

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

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

html, body {
 width:100%;
 height:100%;
}

body {
 display:-webkit-flexbox;
 display:-ms-flexbox;
 display:flex;
 -webkit-flex-direction:column;
 -ms-flex-direction:column;
 flex-direction:column;
 min-width:48em; /* for pre CSS3 browsers */
 font:normal 85%/150% helvetica,arial,sans-serif;
}

#top,
#main,
#footer {
 flex-shrink:0;
}

.widthWrapper {
 overflow:hidden; /* wrap floats and margins */ 
 zoom:1; /* trip haslayout, wrap floats and margins legacy IE */
 max-width:64em;
 padding:0 1em;
 margin:0 auto;
}

* html .widthWrapper {
 width:48em; /* Shove a fixed width for legacy IE */
}

h1 { 
 padding-bottom:0.5em;
 font:bold 225%/110% helvetica,arial,sans-serif;
}

h1 a {
 text-decoration:none;
 color:#036DA7;
 text-shadow: 0px 0px 3px #AAA;
}

p {
 padding-bottom:1em;
}

#top {
 background:rgba(187,217,238,0.75) /*#BBD9EE*/;
 padding-top:1em;
		border-radius: 0px 0px 33px 0px;
}

.columnWrapper {
 clear:both;
 -webkit-flex:1 0 auto;
 -ms-flex:1 0 auto;
 flex:1 0 auto;
}

#mainMenu {
 list-style:none;
 padding:0;
}

#mainMenu li {
 display:inline;
 margin:0;
}

#mainMenu a {
 display:inline-block;
 text-align:center;
 color:#4D4D4D;     /* WCAG AAA compliance */
 background:#E7F1F8;
 width:7em;
 //text-transform:uppercase;
 text-decoration:none;
 padding:0.25em 0.25em;
 vertical-align:center;
 border-top:1px solid #FFF;
 border-right:1px solid #FFF;
 border-left:1px solid #FFF;
}

#mainMenu a.current,
#mainMenu li a:active,
#mainMenu a:focus,
#mainMenu a:hover {
 color:#000;
 background:#FFF;
 // text-shadow: 0px 0px 9px #777;
}

#main {
 padding:1.25em 0 0.25em 0;
}

h2 {
 padding-bottom:0.75em;
}

h3 {
 padding-bottom:0.75em;
}

h3 span {
 font:normal 90%/75% helvetica,arial,sans-serif;
 padding-right:1em;
}

pre,
code {
 font-size:95%;
 font-height:130%;
 font-family:courier,helvetica,arial,sans-serif;
}
 
pre { 
 border:1px dashed #999;
 padding:0.25em;
 margin:0;
 margin-bottom:1em;
}

#footer {
 background:rgba(187,217,238,0.75) /*#BBD9EE*/;
 padding:1em 0;
}

@media (max-width:46em) {
 body {
  min-width:192px;
 }
}

@media (max-width:38.25em) {
 h1,
 #mainMenu {
  text-align:center;
 }
 h1 {
  padding-bottom:0.175em;
 }
 #mainMenu {
  padding:0.25em 0 1em 0;
 }
 #mainMenu a {
  margin:0.25em;
  border-bottom:1px solid #FFF;
 }
}

@media (max-width:15em) {
 h1 {
  font:bold 175%/105% helvetica,arial,sans-serif;
 }
}