html {background: #005A9C; padding: 1em}
body {background: white; color: #333; border-radius: 0.6em; padding: 1em 3em;
  font: 1.1em/1.3 Helvetica, Arial, Verdana, sans-serif; margin: 0 auto;
  max-width: 65em; -moz-hyphens: auto; hyphens: auto}
h2 {color: #148080}
h3 {color: #F74900}
.graphic {height: 13em; position: relative; overflow: hidden; margin: 0 -1.5em}
.graphic img {width: 100%; position: absolute; bottom: 0; left: 0; height: 100%}
/* If you rather clip than squeeze the image, remove 'height: 100%' */
.box {float: right; border: 1px solid #CCC; border-radius: 0.6em; color: #666;
  box-shadow: 0.2em 0.4em 0.5em #888; padding: 0.3em; text-align: center;
  font-size: smaller; margin: 0 0 1em 0.6em; width: 19em; clear: right}
.box h2 {font-size: 120%}
#footer {clear: both; margin: 1em 0; font-size: smaller; color: #555}
.menu {margin: 0 0 2em 0; display: table; table-layout: fixed; width: 100%;
  border-collapse: collapse; background:#005A9C; border: hidden;
  font-size: smaller; font-weight: bold}
.menu li {display: table-cell; border: 1px solid white; border-top: none;
  padding: 0.3em 0.2em; text-align:center; vertical-align: middle}
.menu a {display: block; color:#eee; text-decoration: none}
.menu a:hover {background:#a2b3a1; color: black}
ul {margin-left: 0; padding-left: 1em; list-style: square}
blockquote {margin-left: 1em}
dd {margin: 0 0 0.6em 0}
dt {font-weight: bold}
img {max-width: 100%}
h1, h2, h3, h4 {break-after: avoid}


@media all and (max-width: 40em) {

/* The right-floating boxes become normal blocks */
body {padding: 1em}
.graphic {height: 10em; margin: 0}
.box {float: none; width: auto}

/* The horizontal menu becomes vertical */
.menu ul {display: block; margin: 0; padding: 0}
.menu li {display: block; border-style: none none solid none}

}


@page {margin: 2cm 2cm}

@media print {

html {background: none; padding: 0}
body {background: none; border-radius: 0; padding: 0}

}