* {
margin: 0;
padding: 0;
box-sizing: border-box;}
body {
font-family: 'MS Gothic', Arial, sans-serif;
font-size:14px;
background: #f0f0f0 url(images/waves.gif);
display: flex;
justify-content: center;
letter-spacing:1px;
color:#3d5875;
padding: 8px 0;}

textarea {font:9px calibri;letter-spacing:1;color:#999;background:#eee;}
  
a:link,a:visited,a:active {
color: #5895d6;
cursor:pointer;
text-decoration: none;}

a:hover {
color: #888;text-decoration:underline;}

b {font-weight:bold;font-style:normal;}
i {color:#5895d6;letter-spacing:1px;font-family:monospace;font-size:14px;font-style:normal;font-weight:bold;text-transform:uppercase;letter-spacing:2px;}
u {text-decoration:none;font-style:italic;}

.container {
width: 800px;
max-width: 95%;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
border:1px dashed #97ed27;}

.header {
width: 100%;
height: 220px;
background: url(/images/sitebanner2.png) center;
background-size: cover;
background-position: center;
border-bottom: 1px solid #ddd;
color: #fff;
text-align:center;}
  
.sitename {font:23px 'pixelify sans';letter-spacing:3px;padding-top:126px;padding-right:200px;}

.layout {
display: flex;
flex-wrap: wrap;}

.leftside {
width: 160px;
background-color: #fff;
padding: 5px;
flex-shrink: 0;
border-right:1px solid #ddd;}

.navi {
display: block;
padding: 6px 5px;
border-radius: 3px;
transition: background 0.2s;
background: linear-gradient(145deg, #f0f4f7, #98c7eb);
margin-bottom:4px;
text-transform:uppercase;
font-weight:bold;
letter-spacing:3px;}
  
.navi:hover { background-color: #ddd; }

.sublinks {
display: none;
padding-left: 8px;
margin-top: 0px;
cursor:pointer;}
  
.sublinks a {
display: block;
padding: 4px 0;
color: #5895d6;
text-decoration: none;}
  
.sublinks a:hover { color: #666; }

.rightside { flex: 1; padding: 8px; }

.mainbox {
width: 100%;
background-color: #fff;
padding: 8px;
text-align: justify;
margin-bottom: 8px;
border-radius: 4px;}

p {
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, p  { 
    margin: 5px;
    line-height: 1.2;
    padding-bottom: 7px;
}
h1 { 
    font-size: 1.4rem;
    letter-spacing: 2px;
    font-weight: normal;
    text-align: center;
    border-bottom: 2px ridge;
    padding-bottom: 5px;
}
h2 { 
    font-size: 1.25rem;
    font-weight: normal;
    text-align: center;
}
h3 { 
    font-size: 1.1rem;
}
h4 { 
    font-size: 1rem;
    padding-left: 12px;
}

.maintitle {
text-transform:uppercase;font-weight:bold;border-bottom:1px solid #ABEBA5;margin-bottom:4px;padding-top:2px;
letter-spacing:3px;font:30px 'ms gothic', courier new, arial;padding-left:5px;}

.grid {
column-count: 3;
column-gap: 8px;}

.box {
background-color: #f9f9f9;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 8px;
text-align:justify;
padding: 4px;
display: inline-block;
width: 100%;}
  
/* Heights */
.box:nth-child(1) { height: 180px; }
.box:nth-child(2) { height: 140px; }
.box:nth-child(3) { height: 90px; }
.box:nth-child(4) { height: 120px; }
.box:nth-child(5) { height: 110px; }
.box:nth-child(6) { height: 100px; }
.box:nth-child(7) { height: 130px; }
.box:nth-child(8) { height: 95px; }
  
.boxleft {
background-color: #f9f9f9;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-align:justify;
margin-top:5px;
padding: 4px;
display: inline-block;
width:100%;}
  
.boxtitle {
text-transform:uppercase;font-weight:bold;border-bottom:1px solid #ABEBA5;margin-bottom:4px;padding-top:0px;
letter-spacing:3px;font:10px 'ms gothic', courier new, arial;padding-left:5px;}

ul, ol {
  padding-left: 30px;
  margin-left: 20px;
}

@media (max-width: 800px) { .grid { column-count: 2; } }
@media (max-width: 600px) {
.layout { flex-direction: column; }
.leftside { width: 100%; }
.grid { column-count: 1; }
}