body {
 color: #333;
 font-family: "Helvetica Neue", Helvetica, verdana, arial, tahoma, "sans-serif";
}

#content {
 margin: 0px 1em;
}

a {
 text-decoration: none;
 color: #006699;
}

a:hover {
 background-color: #3399cc;
 color: white;
}

/*
h1, h2 {
 background: #fcfcfc;
}
*/

h1, h2 {
 border: 1px dotted #ccc;
 border-left: none;
 border-right: none;
}

h1 {
 max-width: 16.65em;
 font-size: 300%;
 margin-top: 0.25em;
 margin-bottom: 0.5em;
}

h1 span {
 display: inline-block;
 background: #fff;
 border-top: none;
 border-bottom: 0.15em solid #333;
 padding-bottom: 0.05em;
 margin-bottom: -1px;
}

h1 a {
 color: #000;
 text-decoration: none;
}

h1 a:hover {
 color: #fff;
}

h2 {
 margin-top: 2em;
 color: #333;
}

h2 span {
 display: inline-block;
 border-bottom: 0.2em solid #333;
 padding: 0.2em 0px 0.1em 0px;
 margin-bottom: -1px;
}

ul {
 padding-left: 1.5em;
 font-size: small;
 line-height: 1.75em;
}

ul li span {
 font-weight: bold;
}

ul li {
 position: relative;
}

ul li button {
 position: absolute;
 right: 0px;
 top: 2px;
}

p {
 line-height: 1.5em;
}

#device-status {
 color: #999;
}

.column-wrapper {
 /* two-column flex layout? This seems to work in modern browsers. */
 display: table;
 width: 50em;
 margin: -1.25em 0px 0px 0px;
}

.column {
 display: table-cell;
}

.column:first-child {
 padding-right: 1em;
}

.column p {
 font-size: small;
}

#canvas-box {
 padding: 0px 5px;
 border: 1px dotted #ccc;
 display: inline-block;
}

pre, code {
 margin: 0px;
 padding: 0px;
}

code {
 color: #006600;
}

p code,
li code {
 font-size: 1.1em;
 line-height: 1em;
}

code span {
 color: #666;
}

pre {
 background: #fcfcfc;
 padding: 1.5em;
 border-left: 0.4em solid #eee;
 font-size: small;
}

#publish-date {
 position: absolute;
 right: 1.5em;
 top: 0px;
 color: #999;
 font-size: small;
}

#device-status-text {
 margin-bottom: 0px;
}