html
{
   background-color: rgb(70,190,150);
}

body
{
   background-color:   white;
   color:              rgb(20,20,20);
   margin-top:         0;
   margin-bottom:      0;
   margin-left:        10vw;
   margin-right:       10vw;
   padding-top:        30px;
   padding-bottom:     30px;
   padding-left:       20px;
   padding-right:      20px;
   border-left:         2px solid rgb(30,160,110);
   border-right:       10px solid rgb(30,160,110);
   font-family:        "tahoma", sans-serif, sans;
   font-size:          13pt;
}

@media only screen and (max-width: 768px) {
body
{
   margin-left:        2vw;
   margin-right:       2vw;
   border-left-width:  4px;
   border-right-width: 4px;
}
}

/*
@media screen and (max-width: 499px) {
.content
{      
   font-size:          14pt;
}
}
*/

article time { font-size: 1.4em; font-weight: bold; font-family: monospace; }
article time:before { content: "> \00a0\00a0" }
h1   { font-size: 1.5em; font-weight: bold;   }
h2   { font-size: 1.4em; font-weight: bold;   }
h3   { font-size: 1.3em; font-weight: bold;   }
h4   { font-size: 1.2em; font-weight: bold;   }
h5   { font-size: 1.1em; font-weight: bold;   }
h6   { font-size: 1.0em; font-weight: bold;   }

article time, h1, h2, h3, h4, h5, h6
{
   display:       block;
   margin-top:    14px;
   margin-bottom: 14px;
   text-align:    justify;
}

article .content
{
   white-space: pre-line;
   text-align:  justify;
   line-height: 1.44em;
}

.gallery
{
   text-align:     center;
   line-height:    0;
   margin-top:     0;
   margin-bottom:  0;
}

.gallery a img
{
   border: 2px solid blue;
}

.gallery a img:link    { border-color:    blue; }
.gallery a img:hover   { border-color:  yellow; }
.gallery a img:active  { border-color:   green; }
.gallery a img:visited { border-color: magenta; }

.symbolic
{
   font-family: monospace;
   background-color: rgb(230,230,230);
   white-space: pre;
}

.symbolic.code
{
   font-family: monospace;
   background-color: rgb(230,230,230);
   white-space: pre;
   font-size: 0.8em;
   line-height: 1.2em;
}

.error
{
   font-family: monospace;
   background-color: rgb(230,230,230);
   text-align: left;
}

table, tr, td, table-row-group, table-header-group, table-row
{
   border-spacing: 0;
   padding: 0;
   border: 0;
   padding-left:  4px;
   padding-right: 4px;
}

table.alternating tr:nth-of-type(2n+1)
{
   background-color: rgb(240,230,230);
}

video
{
   display: block;
   margin: auto;
   text-align: center;
   max-width: 100%;
}

section.calendar_section
{
   display:block;
   text-align:center;
   padding-top: 20px;
   padding-bottom: 20px;
}

.calendar_month
{
   margin: 6px;
   background-color: #def;
   display: inline-block;
}

.calendar_month h6
{
   text-align: center;
   display:    block;
}

.calendar_month td
{
   text-align: center;
   color:      #bbb;
}

.calendar_month td a
{
   font-weight: bold;   
}

.calendar_month td a:link
{
   text-align: center;
}

.calendar_month td a:link    { color:    blue; }
.calendar_month td a:hover   { color:  yellow; }
.calendar_month td a:active  { color:   green; }
.calendar_month td a:visited { color: magenta; }

section.navigation
{
   text-align:  center;
   margin:      auto;
   margin-top:  1em;
}

section.navigation nav
{
   display:     inline-block;
   width:       32%;
   text-align:  center;
   font-weight: bold;
}

@media only screen and (max-width: 768px) {
section.navigation nav
{
   display:     block;
   width:       80%;
   margin:      auto;
   text-align:  center;
}
}

section.articles_listing h5   { font-size: 1.4em; font-weight: bold; font-family: monospace; }
section.articles_listing time { display:block; }

section.articles_listing h5:before { content: ">> \00a0\00a0" }
section.articles_listing time:before { content: "> \00a0\00a0" }

section.footer
{
   font-size:   0.8em;
   display:     block;
   text-align:  center;
   font-weight: bold;
   margin-top:  1em;
}

.email::before {content: 'mattcarr';  }
.email::after  {content: 'gmail.com'; }