#article, #sidebar {
 white-space: pre-line;
 }

.indent {
 padding-left: 20px;
 display: inline-block;
 }

#date {
 font-size: .8em;
 color: rgb(80,80,80);
 font-style: italic;
 margin: .5em 0 0 0;
 padding: .5em 0 1em 0;
 border-bottom: solid 1px rgb(230,230,230);
 }

#date:before {
 content: "Last updated ";
 }

td {
 vertical-align: baseline;
 }

ul {
 margin-top: 0;
 margin-bottom: 0;
 }

form[action$=-comments]:before {
  content: "Leave a comment ";
  font-size: 13pt;
  color: rgb(0,173,0);
  font-weight: bold;
  line-height:2em;
  }

form[action$=-comments] {
 margin-top: 3em;
 }

form[action$=-comments] input, textarea {
 margin-bottom: .75em;
 }

form[action$=-comments] textarea {
 margin-bottom: .75em;
 height: 5em;
 }

form[action$=-comments] input[type=submit] {
 box-sizing: content-box;
 padding: 2px;
 }

h2 {
 margin: 0;
 display: inline; 
 }

h3 {
 margin: 0;
 font-size: 1.5em;
 text-align: center;
 }

.excerpts h1 {
 font-size: 175%;
 display: inline-block;
 border-bottom: solid 1px rgb(200,200,200);
 padding-bottom: 1em;
 margin-bottom: 1em;
 }

.excerpts a:first-of-type {
 font-size: 13pt;
 color: black;
 text-decoration: none;
 font-weight: bold;
 }

.excerpts a:last-of-type {
 display: block;
 margin-top: 1em;
 text-decoration: none;
 }


@media screen {
 html, body {
  font-family: Segoe UI, Arial;
  font-size: 10pt;
  margin: 0;
  background: rgb(250,250,250);
  line-height: 1.5em;
  }
 h1 {
  font-size: 13pt;
  color: rgb(0,173,0);
  margin: 0;
  padding: 0;
  }
 #header {
  position: absolute;
  top: 0;
  left: 0;
  height: 6em;
  background: linear-gradient(180deg, rgba(255,255,255,1) 94%, rgba(225,225,225,1) 95%, rgba(250,250,250,0) 100%); 
  }
 #header a {
  text-decoration: none;
  color: black;
  }
 #logo {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggc3R5bGU9ImZpbGw6I0IzOEE2NTsiIGQ9Ik0zNjAuMTg5LDE1My40NzJsLTEuNDMtMjkuOTdjMCwwLTAuMjkxLTAuMDItMC44MzgsMC4wNzNjMC4yNTQtMC4wNDMsMjUuNzE3LTUuMDc3LDQ3LjM3NS03MS4yMDUNCglsMjguNTEzLDkuMzM5Yy0xMS42ODUsMzUuNjc4LTI2LjU0NSw2MS42NjEtNDQuMTY2LDc3LjIzM0MzNzQuNjk2LDE1Mi4xNDcsMzYyLjQ4NSwxNTMuMzYyLDM2MC4xODksMTUzLjQ3MnoiLz4NCjxwYXRoIHN0eWxlPSJmaWxsOiMyREQ3Mjk7IiBkPSJNNTEyLDEzMS4zMzhsLTE1LjQwMiwxMS43NDFjLTI2LjA0MywxOS44MzItNDguNjI1LDI5LjgxMy02Ny4zODcsMjkuODEzDQoJYy01Ljk5MSwwLTExLjU5MS0xLjAyLTE2Ljc5Mi0zLjA2Yy0xOC4zNzItNy4xOTEtMjYuMTAzLTI1LjI1My0yNy43NzMtMzQuNzgzbC0wLjQtMi4zM2wwLjM1LTIuMzQNCgljMS40Ny05LjU3MSw4LjgwMS0yNy43OTMsMjcuMDEzLTM1LjM3NGMyMS4zMTItOC44ODEsNDkuODI1LTAuNDksODQuNzM4LDI0LjkzMkw1MTIsMTMxLjMzOHoiLz4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRkFBMjA7IiBkPSJNMzY2Ljk0NSwzNjAuODdjLTM4LjQxNCw0NS43MDUtOTUuNDYsNzkuNDg4LTE1Ni40OTYsOTIuNjg5Yy0xOC43NzIsNC4wNy0zNy4yODQsNi4wNzEtNTUuMjQ1LDYuMDcxDQoJYy0zNy45MDQsMC03My40MTctOC45MzEtMTA0LjAxLTI2LjMzM2MtNS42MDEtMy4xOS0xMS4wMzEtNi42NjEtMTYuMjgyLTEwLjQxMWMtNDAuOTI0LTI5LjIyMy0zNy4xOTQtNTguMzM2LTMxLjMzMy03My4wODcNCgljNC44NC0xMi4xNjEsMTQuMTQxLTIwLjUxMiwyMS42MjItMjcuMjIzYzMxLjgxMy0yOC41MzMsNDkuNDg1LTUyLjI0NSw2MC45ODYtODEuODM4YzE1LjEyMi0zOC44NzQsMzguMzk0LTc0LjU3Nyw2NS41NTctMTAwLjUxDQoJYzMzLjAyMy0zMS41NDMsNzEuNzY3LTQ4Ljg5NSwxMTIuMDUxLTUwLjE5NWM0NS43MjUtMS40OCw4Ny4xMjksMTYuMDMyLDExNS45NTIsNDcuNDI1YzEwLjYzMSwxMS41ODEsMTkuNTUyLDI1LjA0MywyNi4zNDMsNDAuMTQ0DQoJQzQzMy43NTIsMjM5LjEzOCw0MDYuMzY5LDMxMy45ODYsMzY2Ljk0NSwzNjAuODd6Ii8+DQo8cGF0aCBzdHlsZT0iZmlsbDojRkY4OTAwOyIgZD0iTTM2Ni45NDUsMzYwLjg3Yy0zOC40MTQsNDUuNzA1LTk1LjQ2LDc5LjQ4OC0xNTYuNDk2LDkyLjY4OWMtMTguNzcyLDQuMDctMzcuMjg0LDYuMDcxLTU1LjI0NSw2LjA3MQ0KCWMtMzcuOTA0LDAtNzMuNDE3LTguOTMxLTEwNC4wMS0yNi4zMzNsMzI4LjU1My0yOTUuODM5YzEwLjYzMSwxMS41ODEsMTkuNTUyLDI1LjA0MywyNi4zNDMsNDAuMTQ0DQoJQzQzMy43NTIsMjM5LjEzOCw0MDYuMzY5LDMxMy45ODYsMzY2Ljk0NSwzNjAuODd6Ii8+DQo8cGF0aCBzdHlsZT0iZmlsbDojMDBBRDAwOyIgZD0iTTUxMiwxMzEuMzM4bC0xNS40MDIsMTEuNzQxYy0yNi4wNDMsMTkuODMyLTQ4LjYyNSwyOS44MTMtNjcuMzg3LDI5LjgxMw0KCWMtNS45OTEsMC0xMS41OTEtMS4wMi0xNi43OTItMy4wNmMtMTguMzcyLTcuMTkxLTI2LjEwMy0yNS4yNTMtMjcuNzczLTM0Ljc4M2wtMC40LTIuMzNMNTEyLDEzMS4zMzh6Ii8+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
  background-repeat: no-repeat;
  margin-top:1em; /* margin + line-height must == header height */
  line-height: 4em;
  color: black;
  text-decoration: none;
  }
 #logo:before {
  content: "The Fruits of my Labour ";
  font-size: 1.2em;
  font-weight: bold;
  padding-left: 4.5em;
  
  }
 #logo:after {
  content: "by Mango";
  font-size: .9em;
  font-style: italic;
  }
 #featured {
  width: 110%;
  margin-left: -5%;
  margin-top: 0;
  }
 #article {
  background: white;
  margin-top: 5.5em;
  border: solid 1px rgb(220,220,220);
  }
 #sidebar div:before {
  font-size: 13pt;
  font-weight: bold;
  line-height: 3em;
  padding-bottom: .5em;
  border-bottom: solid 1px rgb(45,215,41);
  }
 #categories:before {
  content: "Blog Archive\A";
  }
 #categories a {
  display: block;
  text-decoration: none;
  margin: .5em 0 0 .5em;
  }
 #about:before {
  content: "About my blog\A";
  }
 #about:after {
  content: "Many years ago I started writing down solutions to random problems I solved at work and in life.  I decided to turn it into a blog so that others could benefit.  Sometimes the things I post on the internet garner two views.  Sometimes they get tens or even hundreds of thousands.  It's always an unpredictable adventure.\A\A";
  line-height: 1.75em;
  }
 .comments:before {
  content: "Comments ";
  font-size: 13pt;
  color: rgb(0,173,0);
  font-weight: bold;
  line-height:2em;
  }
 .comments {
  max-width: 500px;
  margin-top:2em;
  white-space: normal;
  }
 .comments .comment, .comments .admincomment {
  border: solid 1px rgb(220,220,220);
  padding: 1em;
  margin: 0 0 1em 0;
  white-space: pre-line;
  color: rgb(50,50,50);
  }
 .comments .author {
  font-weight: bold;
  display: inline;
  }
 .comments .date {
  font-style: italic;
  color: rgb(80,80,80);
  font-size: .8em;
  display: inline;
  }
 .comments .date:before {
  content: " - ";
  }
 .comments .date:after {
  content: "\A";
  }
 .comments .comment {
  background: rgb(250,250,250);
  margin-right: 4em !important;
  }
 .admincomment {
  background: rgb(245,245,252);
  margin-left: 4em !important;
  }
 pre {
  background: #f5f2f0;
  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
  padding: 1em;
  margin: 0 0 -1em 0 !important;
  }
 }

@media screen and (max-width: 1250px) {
 #header {
  padding: 0 2%;
  width: 96%;
  }
 #article, #sidebar {
  padding: 2% 2% 15% 2%;
  }
 form[action$=-comments] input, textarea {
  width: 50%;
  }
 }

@media screen and (max-width: 500px) {
 form[action$=-comments] input, textarea {
  width: 98%;
  }
 }

@media screen and (min-width: 720px) and (max-width: 1250px) {
 #article {
  width: 61%;
  margin-left: 1%;
  padding-bottom: 10%;
  }
 #sidebar {
  width: 29%;
  margin-top: 5.5em;
  }
 }

@media screen and (min-width: 720px) {
 /* min-width is necessary; otherwise it causes conflicts with prism. */
 #article, #sidebar {
  overflow-x: hidden;
  float: left;
  }
 }

@media screen and (min-width: 1251px) {
 #header {
  padding: 0 7% 0 12%;
  width: 81%;
  }
 #article {
  width: 53%;
  margin-left: 10%;
  padding: 0 2% 10% 2%;
  }
 #sidebar {
  width: 20%;
  padding: 2% 0 2% 5%;
  margin-top: 5.5em;
  }
 form[action$=-comments] input, textarea {
  width: 50%;
  }
 }

@media print {
 #header, #sidebar, #featured, form[action$=-comments] {
  display: none;
  }
 html, body, h1 {
  font-family: Times New Roman, Serif;
  margin: 0;
  padding: 0;
  }
 #article {
  margin: 0 0.25in;
  }
 h1:after {
  font-size: 12pt;
  font-weight: normal;
  content: "\A by Mango - http://toao.net/"
  }
 .comments {
  display: none;
  }
 }