body
{
  box-sizing:border-box; margin:0.5em;
  background-color:#999;
  font-family:Verdana, sans-serif; font-size:10pt;
}

*, *:before, *:after { box-sizing:inherit; }

h1 { font-size:150%; }
h2 { font-size:125%; }
h3 { font-size:115%; margin-bottom:0px; }
h4, h5, h6 { font-size:100%; margin-bottom:0px; }
h1, h2, h3, h4, h5, h6 { margin-top:0px; }

p:first-of-type { margin-top:0px; }

.left { float:left; }
.right { float:right; }
.clear { clear:both; }
.alignLeft { text-align:left; }
.alignRight { text-align:right; }
.justify { text-align:justify; }

header, footer { background-color:#354463; color:white; border:1px solid black; }
header { margin-bottom:0.25em; padding:0.25em; }
header h1 { margin:0px 0px 0px 0.75em; }
header aside, header blockquote { text-align:right; font-size:90%; }
header blockquote { margin:0px; }
footer { padding:0.125em 0.25em; margin-top:0.25em; font-size:80%; text-align:center; }

.navbar { width:100%; overflow:hidden; background-color:#5f7797; border:1px solid black; }
.navbar a
{
  padding:0.375em 1em; float:left; width:auto; display:block;
  color:white; text-decoration:none;
}
.navbar a, .navbar a.menuButton { border-right:1px solid #354463; }
.navbar a:hover, .navbar a.selected { background-color:#354463; }
.navbar a.selected { font-weight:bold; }

.mainArea
{
  background-color:#f0f0f0; color:black; padding:0.5em; border:1px solid black; border-top:0px;
}

main { width:100%; }
main > h2::before
{
  display:inline-block; margin-right:0.25em; padding:0.125em 0.25em;
  content:".:"; background-color:#b0b0b0; color:white;
}
main.twoCol { width:87.4%; float:right; }

.sidebar { width:12.5%; min-width:10em; }

.box
{
  background-color:#5f7797; color:white; border:1px solid black;
  margin:0px 0.5em 0.5em 0px;
}
.box:last-of-type { margin-bottom:0px; }
.box A { color:white; }
.box .title
{
  width:100%; padding:0.25em 0.5em;
  font-weight:bold; text-transform:uppercase; background-color:#354463; 
}
.box .title span::before { content:":: "; }
.box .content { padding:0.25em 0.5em; font-size:80%; text-align:center; }
.box .content h4 { margin:0px; font-weight:normal; }
.box .content ul { padding:0px 0px 0px 1em; margin:0.1875em 0px; }
.box .content li { margin-top:0.375em; }
.box .content li:first-of-type { margin-top:0px; }

ul.unbulleted, .box .content ul.unbulleted { margin:0px; padding:0px; list-style-type:none; }

.code
{
  margin-left:1em; margin-bottom:1em; padding:2px 3px; border:1px solid #333333;
  background-color:#cccccc; clear:both; overflow:auto;
}

.imgBox, .imgBoxRight { text-size:smaller; text-align:center; }
.imgBox { display:inline-block; }
.imgBoxRight { float:right; margin-left:1em; margin-bottom:1em; }
.imgBox img, .imgBoxRight img { display:block; }

article
{
  background-color:white; margin-bottom:1em; padding:0.25em 0.5em;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}
article:last-of-type { margin-bottom:0.5em; }
article .header { margin-bottom:0.25em; }
article .header .title { font-weight:bold; font-size:110%; }
article .header .date { color:#666; }
article .footer { margin-top:0.25em; }
article .footer a { margin-right:0.5em; }
article .footer a:last-of-type { margin-right:0px; }

.blogPost { background-color:white; padding:0.25em 0.5em; border:1px solid #999; }
.blogPost > .header { margin-bottom:0.5em; }
.blogPost > .header h2 { margin-bottom:0px; }
.blogPost > .header .date { color:#666; font-size:85%; }
.blogPost > .content { padding-bottom:1em; text-align:justify; }

.comments { margin-top:1em; }
.comments > h2 { font-size:115%; }
.comment { background-color:white; padding:0.25em 0.5em; border:1px solid #999; margin-top:1em; }
.comment .header { margin-bottom:0.5em; }
.comment .header .title { font-weight:bold; }
.comment .header .date { color:#666; }
.comment .poster { text-align:right; }

form input, form textarea { margin:0.125em 0px; }
form input[type=text], form input[type=email], form input[type=password], form textarea
{
  width:100%;
}
form textarea { height:10em; }

.indent { padding-left:1.4em; }
.text { padding-left:1.4em; text-align:justify; }

.show-small { display:none !important; }
@media only screen and (min-width:1200px)
{
  form { max-width:40em; }
}
@media only screen and (min-width:769px) and (max-width:1199px)
{
  form { max-width:40em; }
  .hide-medium { display:none !important; }
  .sidebar { width:20%; }
  main.twoCol { width:79.8%; }
}
@media only screen and (max-width:768px)
{
  .hide-small, .hide-medium { display:none !important; }
  .show-small { display:initial !important; }
  .navbar a { border:none; }
  header h1, header blockquote { text-align:center; margin:0px; }
  header blockquote { font-size:80%; }
  .sidebar, main.twoCol { width:100%; }
  .box { margin-right:0px; margin-top:1em; }
  .code { margin-left:0px; }
  form, form input[type=submit] { width:100%; }
  .indent { padding-left:0.75em; }
  .text { padding-left:0px; }
  ul, ol { padding-left:1.25em; }
}