/* (A) 2 COLUMNS ON BIG SCREENS */
.flexWrap {
display: flex;
width: 100%;
    }
.flexCol-1 {
box-sizing: border-box;
padding: 0.2em;
width: 15%;
background:transparent;
height:auto;
    }

.flexCol-2 {
box-sizing: border-box;
background-color:ivory;
margin:0;
width:80%;
padding:0.5em;
border:solid 1px #000;
border-radius: 10px;
box-shadow: 4px 4px 3px #111;
height:80%;
}

.flexCol {
box-sizing: border-box;
padding: 10px;
width: 33.3%;
background:transparent;
    }
    /* (B) BREAK DOWN 1 COLUMN ON SMALL SCREENS */
    @media only screen and (max-width: 768px) {
      .flexWrap { flex-wrap: wrap; }
      .flexCol-1 { width: 100%; }
      .flexCol-2 { width: 100%; }

    }

body
{
width: 100%;
margin: auto;
min-width:320px;
max-width:1000px;
background-color:#203041;
background-image:url("images/darkblue.png");
}

p,p.center,p.block,p.menu,h1,h2,h3,li,li.big {
font-family: Arial,"Liberation Sans",Helvetica,sans-serif;
color:#000;
}

div#header{
width:auto;
margin:1em 0em 0em 0em;
background-color:transparent;
clear:both;
}

img
{
margin:0;
padding:0;
border:0;
}

img.center {
max-width: 100%;
height: auto;
display: block;
margin: auto;
width: 60%;
border:0;
}

 /* (B) BREAK DOWN 1 COLUMN ON SMALL SCREENS */
    @media only screen and (max-width: 768px) {
img.center {width:90%;
}
}

img.neocities {
max-width: 100%;
height: auto;
display: block;
margin: auto auto 1em auto;
width: 15%;
border:0;
}

img.right{
float:right;
padding:0em 0.3em 0.5em 0.4em;
max-width: 100%;
height: auto;
display: block;
margin: auto;
width: 33%;
border:0;
}

img.right40{
float:right;
padding:0em 0.3em 0.5em 0.4em;
max-width: 100%;
height: auto;
display: block;
margin: auto;
width: 40%;
border:0;
}

hr{
width:60%;
height:0.2em;
margin:1em 0 0 0
}

hr.menu{
width:90%;
height:2px;
margin:1em 0 0 0.5em
}

p.menu
{
color:#fff;
font-size:0.8em;
font-style:normal;
font-variant:small-caps;
font-weight:bold;
letter-spacing: 0.02em;
text-align:center;
margin:0.5em 0em 0em 0em;
padding:0.1em;
background-color:transparent
}

p.date
{
color:#fff;
font-size:0.75em;
font-style:oblique;
font-weight:bold;
text-align:center;
margin:1em 0em 0em 0em;
padding:0;
}

.head{
font-size:1.4em;
font-style:oblique;
font-variant:small-caps;
font-weight:bold;
letter-spacing: 0.1em;
text-align:left;
margin: 0.2em 0em 0.2em 0.2em;
padding:0em
}

p
{
font-size:1em;
font-style:normal;
text-align:left;
margin:0em 0em 0.5em 0.4em
}

p.block
{
font-size:0.8em;
font-style:normal;
text-align:left;
margin:0em 5em 0.5em 5.4em
}

p.block2
{
font-size:1em;
font-style:normal;
font-weight:bold;
text-align:left;
margin:1em 1.5em 0 1.5em
}

p.center
{
font-size:0.6em;
font-weight:bold;
text-align:center;
margin:0.5em 0em 0.5em 0em
}

p.center1
{
color: #fff;
font-size:0.6em;
font-weight:bold;
text-align:center;
margin:1em 0em 1em 0em
}

p.center2
{
font-size:1.2em;
font-weight:bold;
text-align:center;
margin:0.5em auto auto auto;
}

p.copy
{
color:#fff;
font-size:0.7em;
font-style:normal;
text-align:center;
margin:1em 0em 0em 0em
}

.clearit {
clear: both;
}

a:link {color:#356;text-decoration:none}
a:visited {color:#959;text-decoration:none}
a:hover {color:#79a;text-decoration:none}
a:active {color:#7f7;text-decoration:none}

a.menu:link {color:#abc;text-decoration:none}
a.menu:visited {color:#c8c;text-decoration:none}
a.menu:hover {color:#def;text-decoration:none}
a.menu:active {color:#7f7;text-decoration:none}

td{vertical-align:top}

li
{
font-size:0.9em;
list-style-position: outside;
margin: 0em 0em 0.3em 0em;
text-align:left;
}

li.med
{
font-size:1em;
list-style-position: outside;
margin: 0em 0.5em 0.3em 0.5em;
text-align:left;
line-height: 1.2em;
}

li.med2
{
font-size:0.9em;
list-style-position: outside;
margin: 0em 0.5em 0.3em 0.5em;
text-align:left;
line-height: 1em;
}

li.big
{
font-size:1.2em;
font-weight:bold;
list-style-position: outside;
margin: 0.4em 0em 0em 2em;
text-align:left;
}