html { background-color: #253973; color: #f0baec; font-family: Courier New;
  margin:0; padding:0 }
#container { /*margin: 1% 0 1% 0*/; }
#header { color: #ffffff; /*background-color: #f0baec;*/ }
#headerbar { width: 90%; float: left; background-color: #f0baec; margin: 1% 5% 1% 5%; padding: 1% 0 1% 0; }
.navitem { background-color: #eb4c84; margin: 1% 1% 0 0; padding: 1%; float: left; }
.navitem:first-child { margin-left: 5%; }
.navitem a { font-size: 1.5em; text-decoration: none; /*margin-left: 1%; padding: 1%;*/ }
.navitem a:link { color: #face90 }
.navitem a:visited { color: #face90 }
.navitem a:hover { color: #eb9e4c }
.navitem a:active { color: #eb9e4c }

#content { background-color: #2b1604; margin: 0 5% 0 5%; padding: 1% 2% 1% 2%; }
/*#content h1 { color: #f9415b; }*/
.caption { }
.caption h1 { font-size: 2.0em; /*color: #f9415b;*/ /*padding: 2% 2% 2% 2%;*/ }
p { /*color: #f9415b;*/ /*padding: 1% 2% 1% 2%*/ }
a:link { color: #face90 }
a:visited { color: #face90 }
a:hover { color: #eb9e4c }
a:active { color: #eb9e4c }

#footer { /*background-color: #f0baec;*/ color: #f9415b; }
#footerbar { background-color: #f0baec; margin: 1% 5% 1% 5%; padding: 1% 0 1% 0; width: 90%; float: left; }
#footerbar a:link { color: #eb4c84; }
#footerbar a:visited { color: #eb4c84; }
#footerbar a:hover { color: #eb4c84; }
#footerbar a:active { color: #eb4c84; }

@media only screen and (min-width: 600px) {
  #content { margin: 0 1% 0 1%; }
  #headerbar, #footerbar { margin: 1% 1% 1% 1%; width: 98% }
  .navitem { width: 49% }
}
@media only screen and (min-width: 754px) {
  #content { margin: 0 1% 0 1%; }
  #headerbar, #footerbar { margin: 1% 1% 1% 1%; width: 98% }
  .navitem { width: 24% }
}
@media only screen and (min-width: 1280px) {
  #content { margin: 0 1% 0 1%; }
  #headerbar, #footerbar { margin: 1% 1% 1% 1%; width: 98% }
  .navitem { width: auto }
}
@media only screen and (max-device-width: 1000px) and (orientation: landscape) {
  #content { margin: 0 1% 0 1%; }
  #headerbar, #footerbar { margin: 1% 1% 1% 1%; width: 98% }
}