#wrap {
    width: 940px;
    padding: 0 10px;
    margin: 24px auto;
}

body { color: #333;}
h1 a { color: #333; }
a { text-decoration: none; }
li { list-style-type: none; }
code { border: none; font-family: Consolas, Inconsolata, "Lucida Console", "Courier New", monospace;font-size: inherit;}
pre { padding: .25em; }
p, pre { margin-bottom: 1em; }
p code { padding: 0;background: none;font-style: italic;color: #444;}

a.header { text-decoration: none;color: #333; }
header form.search { text-align: right;margin-bottom: 0;float: right;}
header form input[type=text] { line-height: 23px;font-size: 1em;border-top-right-radius: 2px;border-bottom-right-radius: 2px;padding: 4px 10px;border: 1px solid #ccc;box-shadow: none;}
.surround-icon { border: 1px solid #ccc;background-color: #eee;padding: 4px 5px;height: 23px;min-width: 16px;display: inline-block;text-align: center;line-height: 23px;border-top-left-radius: 2px;border-bottom-left-radius: 2px;}
header .actions { text-align: center;}
header .actions a { margin-right: 0.5em; }

article a { text-decoration: underline; }
article li { list-style-type: disc; }
article header hgroup { margin-bottom: 1.5em;}
article footer a { text-decoration: none; }
article footer .next { text-align: right; }
article div.text { font-family: "ff-tisa-web-pro",serif; }
article div.text p,
article div.text pre,
article div.text ul,
article div.text ol { font-size: 1.5em; }

aside ul { margin: 0; }
aside h4, aside h3 { color: #4f4f4f;margin-bottom: .5em;font-size: 1em; }
aside small, article footer small {color: #444; font-size:.8em;}
aside section { margin-bottom: 2em; }

footer p {
  color: #555;
  font-size: 1em;
  text-align: left;
  line-height: 40px; 
}

footer .copyright {
    color: #555;
}

#contact { border: 1px solid #ddd;padding: 12px;text-align: center;position: fixed;right: 0;top: 12%;}
#contact li { margin-bottom: 1em; }
#contact small, #contact span:not(.fa) { display: none; } 

#latest small { display: block;}
#latest i { display: none; }
#latest li { margin-bottom: 3px; overflow: hidden;text-overflow: ellipsis;}
#latest li span { line-height: 3px;white-space: nowrap;}
#latest .active {border-left : solid 2px #777;padding-left: 3px;margin-left: -5px;}
#latest h2 { display: none; }

.headshot { text-align: center; }
.headshot img { margin: auto;}

#archive ul { margin: 0;}
#archive ul li { list-style-type: none;}
#home article { margin-bottom: 2em;}

#comments > header { font-weight: bold;font-style: italic;font-size: 1.2em;margin-bottom: 2em;}
#comments .comment { display: flex;margin-bottom: 2em;}
#comments .comment .avatar { flex: 0 0 100px; }
#comments .comment .name { font-weight: bold; }

/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
    #wrap { width: 300px; }
    header form.search { text-align: left; float: left; margin-top: 1em; }
    header .actions { text-align: left; }
    header .actions a { margin-right: 1em; }
    header .subheader { font-size: 1em; }
    #contact { border: none;padding: 0;text-align: left;position: relative; }
    #contact small { display: block;}
    #contact span { display: initial; } 
}

/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #wrap { width: 420px; }
    header form.search { text-align: left; float: left;  margin-top: 1em; }
    header .actions { text-align: left; }
}

/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #wrap { width: 748px; }
}

/* Large format tablet and desktop */
@media only screen and (min-width: 768px) {
    
}

@media print {
    header .actions, header .search, #contact { display: none; }
    article { width: 100% !important; } /* bah! - this is what's wrong with non-semantic classes - have to use important'*/    
}