@charset "utf-8";
@media screen and (min-width: 481px) {
.contents {
   display: flex;  
   }
   #main {
      width: 70%; }
   nav {
      width: 30%; }
}

@media screen and (max-width: 480px) {
.contents {
      display: flex;
      flex-direction: column;
   }
   #main {
      order: 1; 
      float: none;
      width: 100%; }
   nav {
     order: 2;  
      width: 100%; }
}

body {
 color: #77b; font-size: 100%;
 line-height: 160%;
 min-width: 720px;
 background-color: #def;
 padding: 0; margin: 0 auto 2em }

header {
 width: 100%;
 box-shadow: 0 2px 3px #38d;
 padding: 0; margin: 0 0 7px }

header h1 {
 text-align: center;
 color: #cef;
 font-size: 190%;
 font-weight: 500;
 background-color: #35a;
 text-shadow: 2px 2px 4px #00a;
 border-top: solid 6px #03a;
 border-bottom: solid 6px #03a;
 padding: 4px 0; margin: 0 }
 
header h1 small {
 font-size: 60%;
 margin: 0 0 5px 2em } 
header h1:before {
    content: '❂ '; }
 
header h2 {
 color: #fff;
 font-size: 120%;
 border-radius: 0;
 text-align: center;
 background: #8be;
 border-top: solid 6px #ace;
 border-bottom: solid 6px #7ad;
 padding: 2px 0; margin: 0 }
 
header h2:before {
    content: '◉ '; }
hr {
border: solid 2px #9ce; }

nav {
 max-width: 700px;
 font-size: 105%;
 padding: 0 0 0 8px;
 margin: 5px 0 }

.info {
 font-size: 100%;
 background-color: #fff;
 border: solid 5px #7ad;
 box-shadow: 2px 2px 5px #37e;
 border-radius: 9px;
 padding: 0; margin: -2px 2px 11px 0 }
.contents {
 padding: 0; margin: 0 }
.info h1 {
 text-align: center;
 font-size: 110%; color: #fff;
  font-weight: 200;
 background-color: #7ad;
 padding: 4px 0; margin: 0 }
 .info h2 {
 text-align: center;
 font-size: 110%;
 background: #fff;
 border-radius: 0;
 border-bottom: solid 2px #7be;
 padding: 0; margin: 0 }
 .info ul {
 border-radius: 0;
 box-shadow: none;
 border: none;
 }
 .info ul li:before {
 content: "▸ ";
}
.contents {
 padding: 0; margin: 0 }

#main {
 max-width: 700px;
 color: inherit;
 background-color: #fff;
 box-shadow: inset 4px 4px 7px #38d;
 border-radius: 9px;
 border: solid 5px #7ad;
 padding: 2em 5px 25px 0; 
 margin:  2px 0 5px 5px }

#main h1 {
 color: #eff; font-size: 120%;
 background-color: #7ad;
 text-shadow: 1px 1px 4px #abf;
 border-radius: 7px;
 font-weight: 400;
 padding: 5px 5px;
 margin: 10px 25px 15px 14px }
 h1.sm {
font-size: 120%;
 padding: 0 20px; margin: 0 }

#main h1 small {
 font-size: 91%; color: #fff;
 background-color: inherit;
 margin: 0 1em }
#main h1:before {
    content: '🔹️ '; }

.box {
 max-width: 700px;
 padding: 0 0 0 1em;
 margin: 10px 5px 2em }
.form {
padding: 0 20px 0 28px;
 margin: 0 }
.blog {
 border-top: solid 2px #abd;
 padding: 5px 12px; margin: 0 }
.form {
padding: 0 20px 0 28px;
 margin: 0 }

h2 {
 font-size: 120%; font-weight: 400;
 color: #46c;
 background-color: #def;
 border-radius: 9px;
 padding: 5px 5px 4px 7px;
 margin: 1em 23px 15px -4px }
#main h2 small {
 font-size: 85%; 
 margin: 0 1em }
#main h2:before {
    content: '✪ '; }
h3 {
 font-size: 110%; font-weight: 400;
 color: #929;
 border-bottom: dotted 2px #949;
 padding: 0 2px;
 margin: 1em 2em 5px 8px }
h3:before {
    content: '✤ '; }
p {
 margin: 1em }
.toph {
 margin-top: 1.5em }
 
 nav {
 padding: 0; margin: 4px 2px 0 5px } 
 nav a {
 color: #57f; display: block;
 padding: 8px 9px; margin: 5px 0 } 

nav ul {
 box-shadow: 2px 2px 5px #37e;
 border-radius: 9px;
 background-color: #fff;
 border: solid 5px #7be;
padding: 0; margin: 0 }
nav ul li {
 list-style-type: none;
 border-bottom: solid 1px #abd;
    margin: 0;
    }
nav ul li:before {
 content: "◉ ";
 color: #abf;
    }
.box ul li:before {
 content: "";
    }
ol li:before {
 content: "☛ ";
 color: #79c;
}
ol, dl {
 padding: 0;
 margin:  10px 5px 20px }
ol li {
 list-style-type: none;
 padding: 5px; margin: 0 }

dt {
color: #07e;
 margin: 10px 5px 0 }
dd {
 margin: 0 1em 1em }
 
strong {
 font-size: 110%; color: #909;
 font-weight: 400;
 background-color: inherit }

div.bla {
 color: #005;
 background-color: inherit;
 margin: 1em 0px }

a {
 text-decoration: none;
 padding: 4px 5px; margin: 0 2px }
 
a:hover, nav a:hover {
 color: #000;
 background-color: #dff }

#map {
 padding: 0; margin: 1em 0 }
img {
margin: 10px 0 5px 1em }
img.mp {
margin: -5px 0 5px 8px }

footer {
 font-style: italic;
 text-align: center; 
 font-size: 90%; color: #77d;
 background-color: inherit;
 padding: 4px 0; margin: 0 }
 
table {
 border-spacing: 0 2px;
  margin: 1em 0 1em 4px; 
 width: 94% }
caption {
 text-align: left; background-color: #abf;
 caption-side: top; font-size: 110%; color: #fff;
 padding: 4px 1em; margin: 0 }
th, td {
 padding: 2px 5px }
thead th {
 color: inherit; background-color: #bcf }
tbody th {
 color: inherit; background-color: #cdf }
tbody td {
 text-align: left;
 color: inherit; background-color: #def }
td.rt {
 text-align: right }
th, td.ct {
 text-align: center }
td.wh {
 color: inherit; background-color: #fff }
 
.entry {
 margin: 0 5em 2em 1em }