html {
  display: table;
  margin: auto;
}

body {
  display: table-cell;
  vertical-align: middle;
  max-width: 800px;
  font-size: 11pt;
  font-family: georgia, verdana, georgia, verdana;
  line-height: 150%;
}

footer {
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
  text-align: center;
  font-size: 10px;
}

footer a {
  color: #999;
}

h1 { 
  color: black;   
  margin: 0px;  
  font-style: bold; 
  display: inline; 
  font-size: 16pt;
}

h1 a { 
  color: black; 
  font-style: none; 
  text-decoration: none; 
  font-size: 18pt; 
}

h2 { 
  color: black; 
  margin: 0px 0px 2px 0px; 
  font-size: 16pt; 
  font-style: bold;  
  display: inline; 
}

h3 {
  color: black;
  margin: 0px 0px 3px 0px;
  font-size: 12pt;
  font-style: bold;
  font-style: italic;
}

a { 
  text-decoration: none; 
}

p { 
  margin: 0px 0px 20px 0px; 
  line-height: 150%; 
}

ul.spaced > li {
  margin-bottom: 7px;
}

img.content-image {
  float: right;
}

img.image { 
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
  margin: 5px;
}

img.center {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
}

table {
  line-height: 150%;
}

pre { 
  margin: 15px !important;
}

.header-title { 
  margin: 4px 5px 1px 5px;
}

.header-tagline { 
  font-style: italic;
  margin-left: 6px;
}

#header-divider { 
  display: block;
  height: 1px;
  border: 0;
  border-top: 4px solid black;
  margin: 0;
  padding: 0;
}

#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: url(/images/menu-icon-small.png) center;
}

#header-nav-container ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: right;
}

#header-nav-container ul li { 
  display: inline; 
}

#header-nav-container li { 
  margin: 5px;
}

a.header-nav-link {
  color: #999999; 
}

a.header-nav-link:hover {
  color: blue;
}

.indentable { 
  margin: 0px 40px 20px 40px; 
}

.indentableSubtle {
  padding: 5px; 
  margin:  0px 40px 20px 40px; 
  background-color: #dddddd; 
}

#content-title { 
  margin: 5px 25px 5px 25px;
}

#content-subtitle {
  font-weight: normal;
  font-size: 12pt;
  margin-top: 5px;
  margin-left: 10px;
  font-style: italic;
}

#content { 
  margin: 5px 25px 5px 25px; 
}

#content-date { 
  margin: 5px 0px 5px 20px;
  color: #666666;
}

#content-title-divider { 
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #aaaaaa;
  margin: 0;
  padding: 0;
}

#setup-blurb {
  background-color: #CDDED3;
  margin: 5px 0px 25px 0px; 
  padding: 10px;
  font-style: italic;
  line-height: 150%;
  border-radius: 10px;
}

#signature { 
  margin: 25px 25px 5px 25px; 
  padding: 10px;
  background-color: #eeeeee;
  color: #333333;
  border-radius: 10px;
}

#signature-photo { 
  border-width: 1px; 
  border-style: solid; 
  border-color: aaaaaa;
  border-radius: 50px;
  width: 80px;
  float: left;
  margin: 0px 10px 5px 0px;
}

#signature-content { 
  line-height: 150%; 
}

.mobile-only { 
  display: none;
}

#comment-form { 
  margin: 25px 25px 25px 25px;
  background-color: #CDDED3;
  padding: 10px;
  border-radius: 10px;
}

.comment-form-label { 
  margin-top: 5px;
  width: 200px;
  display: block;
}

#comment-form-button { 
  margin-top: 5px;
}

#comments { 
  margin: 5px 25px 5px 25px; 
}

.comment-other { 
  margin: 20px 0px 0px 0px;
  background-color: #eeeeee;
  padding: 10px;
  border-radius: 10px;
}

.comment-mine { 
  background-color: #CDDED3;
}

.comment-person { 
  font-weight: bold;
  display: inline;
}

.comment-date { 
  font-weight: bold;
  display: inline;
  float: right;
}

.comment-content { 
  line-height: 150%;
}

@media only screen and (max-width : 640px) {

  .mobile-only { 
    display: initial;
  }

  body {
    font-size: 12pt;
  }

  img.content-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    float: none;
  }

}


.commandPrompt  { background-color: white; color: #006600; font-family: courier new; font-size: 10pt; margin: 10px 50px 15px 10px; padding: 3px; }
.codeSample  { background-color: white; color: #006600; font-family: courier new; font-size: 10pt; margin: 10px 50px 15px 10px; padding: 3px; }

.simpleTable { background-color: #dddddd; border-width: 1px; border-color: white; border-style: solid;  border-collapse: collapse; }

.simpleTable TD { border-color: white; border-style: solid; border-width: 1px; padding: 2px; }

.tableBorder { background-color: 5c3317; padding: 0px; margin: 3px; }
.titleTable { width: 100%; padding: 1px; margin: 0px 0px 8px 0px; background-color: white; border-width: 0px 0px 1px 0px; border-color: gainsboro; border-style: solid; font-family: georgia, verdana; }
.titleTable TD { padding: 1px; color: #666666; font-size: 11pt;  }

.optionsTable { margin: 0px; border: 0px; padding: 0px; color: 5C3317; } 
.optionsTable A { color: 5C3317; font-style: none; text-decoration: none; font-style: none; font-weight: normal; font-size: 8pt; }

.mainTable { border-width: 1px; border-color: black; border-style: solid; padding: 0px;  background-color: white; font-size: 11pt; font-family: georgia, verdana; }

.sideTable { width: 220px; border-width: 0px 0px 1px 0px; background-color: white; border-color: gainsboro; border-style: solid; font-size: 8pt; 
              padding: 0px;  margin: 0px 0px 0px 0px; }
.sideTable TH { font-weight: bold; font-family: georgia, verdana;  padding: 3px; text-align: left; background-color: white;
                border-width: 0px 0px 1px 0px; border-color: black; border-style: ; font-size: 8pt; }
.sideTable TD { padding: 3px 10px 3px 10px; font-size: 8pt;  }
.sideTable a {  font-style: none; text-decoration: none; font-size: 8pt; }

.toolTable { border-width: 1px; border-color: 5c3317; border-style: solid; font-size: 10px; padding: 2px; background-color: white; margin: 3px; }
.toolTable TD { padding: 5px; background-color: white; }

.commentTable { font-size: 11pt; font-family: georgia, verdana; padding: 6px; width: 100%; }

.isMe { background-color: #F2E6B6; }

.headTable { margin: 00px 0px 0px 0px; color: white; padding: 0px; border-width: 1px 1px 0px 1px; 
              border-color: black; border-style: solid; background-color: black; }
.headTable a { color: gainsboro; font-style: none; text-decoration: none;  font-size: 8pt; font-family: georgia, verdana; }
.headTable H1 a { font-size: 14pt; }
.headTable TD { padding: 0px; margin: 0px; }

.myThoughtsTable TD { margin: 0px; padding: 0px; }

.tableMatrix { border-width: 1px; border-style: solid; border-color: gainsboro; font-size: 10px; }
.tableMatrix TD { border-width: 1px; border-style: solid; border-color: gainsboro; font-size: 10px; font-family: georgia, verdana;}
.blogTable { border-style: solid; border-color: 325C74; border-width: 0px; margin: 0px; padding: 0px; font-size: 11pt; }
.blogTable TD { border-style: solid; border-color: gainsboro; border-width: 1px; margin: 2px; padding: 3px; }
.blogTable TH { font-style: bold; text-align: left; padding: 3px; border-width: 1px; 
                border-style: solid; border-color: gainsboro; border-color: gainsboro; background-color: ; color: 325C74; }
.indentTable { border-width: 0px; margin: 0px 20px 0px 20px; font-size: 11pt; font-family: georgia, verdana; }

.tableQuiz { padding: 2px; margin: 2px; font-size: 11pt; font-family: georgia, verdana; }
.tableQuiz TH { font-style: bold; text-align: left; background-color: gainsboro; padding: 5px; }
.tableQuiz TD { border-style: solid; border-color: gainsboro; border-width: 1px; padding: 5px; }

.tableQuiz .radio { border-style: none; }

.standardFont { font-family: georgia, verdana; font-size: 11pt; }

.codeBlock { margin: 0px 0px 20px 20px; }

.listTable TABLE { padding: 4px; border-width: 0px; border-style: none; font-size: 11pt; font-family: georgia, verdana; }
.listTable TH { border-width: 0px 0px 1px 0px; border-style: solid; border-color: black; }
.listTable TD { border-width: 0px 0px 1px 0px; border-style: solid; border-color: #cccccc;
                vertical-align: top; }
                

TD .numberCell { text-align: right; }
TD .lineCell { border-color: #333333; border-width: 0px 0px 1px 0px; border-style: solid; padding: 0px; margin: 0px; }

H2.cruft4j { display: block;  font-size: 13pt; color: black;}
H3.cruft4j { display: block; font-size: 12pt; color: black; font-style: italic; }
.cruft4jProjects TH { font-weight: bold; vertical-align: top; border-color: #333333; border-width: 0px 0px 1px 0px; border-style: solid; }           
.green { background-color: green; color: white; }
.yellow { background-color: yellow; color: #333333; }
.orange { background-color: orange; color: white; }
.red { background-color: red; color: white; }
.totalScore { font-size: 24pt; padding: 3px; text-align: center; font-weight: bold; }