html, body { height: 100%; }

body {
width: 87.5%;
       margin-left: auto;
       margin-right: auto;
       padding-left: 12.5%;
       max-width: 1400px;
       counter-reset: sidenote-counter; 
  background-color: #FFF;
  font-family: 'Lucida Grande', Verdana, sans-serif;
  font-weight: normal;
  font-size: medium;
  line-height: 200%;
//  line-height: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1em;
  font-size: 100%; 
  text-transform: uppercase;
}

address {
  line-height: 1.2em;
}

h3 {  font-style: italic; }

h1 { margin-bottom: 0.5em;  /*font-family: sans-serif;*/ }

subtitle { font-style: italic;
           margin-top: 1rem;
           margin-bottom: 1rem;
           display: block;
           color: #aaa;
           font-style: italic;
           line-height: 1.2em;
}

subtitle a {
  color: #aaa;
  text-decoration: none;
}

subtitle a:hover {
  color: #00a;
}

subtitle a:visited {
  color: #aaa;
}


subtitle p {
    margin-top: 0;
    -webkit-margin-after: 0;
}

p { margin-top: 1em; 
    padding-right: 0;
    vertical-align: baseline;
}

article { position: relative;
          padding: 5rem 0rem; }

section { padding-top: 0.7rem;
          padding-bottom: 0.7rem; }


a         { color: #00a; }
a:hover   { color: #000; }
a:visited { color: #a0a; }

table {
  font-size: inherit;
  font: 100%;
}

small {
  font-size: 70%;
}

img { max-width: 100%; }

p, footer, pre.code, div.table-wrapper { width: 55%; }

.sidenote, .marginnote { float:right;
                         clear: right;
                         margin-right: -60%;
                         width: 50%;
                         margin-top: 0;
                         margin-bottom: 0;
                         font-size: 90%;
//                         font-size: 1.0rem;
//                         line-height: 1.6;
                         vertical-align: baseline;
                         position: relative; 
                         line-height: 1.6em;
                         }


.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number:after, .sidenote:before { content: counter(sidenote-counter) " ";
                                           position: relative;
                                           vertical-align: baseline;
                                           color: #f00000; }

.sidenote-number:after { content: counter(sidenote-counter); 
                         font-size: 0.5rem;
                         top: -0.5rem;
                         left: 0.1rem; }

.sidenote:before { content: counter(sidenote-counter) ". ";
                   position: absolute;
                   /* 100% refers to the computed width of the number, so this transform
                    * shifts the number just outside the left edge of the sidenote box,
                    * with a buffer of 0.25rem, no matter how many digits the number has. */
                   -webkit-transform: translateX(-100%) translateX(-0.25rem);
                   -ms-transform: translateX(-100%) translateX(-0.25rem);
                   transform: translateX(-100%) translateX(-0.25rem); }


// p, footer, pre.code, div.table-wrapper { width: 55%; }

@media screen and (max-width: 760px) { p, footer, pre.code { width: 90%; }
                                       blockquote p, blockquote footer { width: 90%; }}

.sans { /* font-family: sans-serif; */ }


.code { font-family: Menlo, monospace;
        color: #222;
        font-size: 0.8rem;
        line-height: 1.0rem; }


@media(max-width: 760px) { label.margin-toggle:not(.sidenote-number) { display: inline; }
                           .sidenote, .marginnote { display: none; }
                           .margin-toggle:checked + .sidenote, 
                           .margin-toggle:checked + .marginnote { display: block;
                                                                  float: left;
                                                                  left: 1rem;
                                                                  clear: both;
                                                                  width: 95%;
                                                                  margin: 1rem 2.5%;
                                                                  vertical-align: baseline;
                                                                  position: relative; }
                           label { cursor: pointer; }
                           pre.code { padding: 0; }
                           .table-caption { display: block;
                                            float: right;
                                            clear: both;
                                            width: 98%;
                                            margin-top: 1rem;
                                            margin-bottom: 0.5rem;
                                            margin-left: 1%;
                                            margin-right: 1%;
                                            vertical-align: baseline;
                                            position: relative; }
                           table, table.booktabs { width: 85%; }
                           img { width: 100%; } }


/*****************************************************************************/
/*
/* Home
/*
/*****************************************************************************/
ul.posts {
  list-style-type: none;
  margin-bottom: 2em;
}

ul.posts li {
  line-height: 1.75em;
}

ul.posts span {
  color: #aaa;
//  font-family: Monaco, "Courier New", monospace;
  font-style: italic;
  font-size: 80%;
}


#headshot {display:table;}
#rightbar {margin-left: 1em; display:table-cell; vertical-align:middle;}



/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/



.header {
  position: absolute;
  border: 0;
  top: 0em;
  left: 0.5em;
}


.header a {
  font-weight: bold;
  text-decoration: none;
}

.header h1.title {
  display: inline-block;
  margin-bottom: 2em;
}

.header a.extra {
  color: #aaa;
  margin-left: 1em;
}

.header a.extra:hover {
  color: #000;
}

.meta {
  color: #aaa;
  font-style: italic;
}

.meta a {
  color: #aaa;
  text-decoration: none;
}

.footer {
  font-size: 80%;
  color: #666;
//  border-top: 4px solid #eee;
  margin-top: 2em;
  overflow: hidden;
  text-align: right;
}

.footer .contact {
  float: left; 
  margin-right: 3em;
}

.footer .contact a {
  color: #8085C1;
}

.footer .rss {
  margin-top: 1.1em;
  margin-right: -.2em;
  float: right;
}

.footer .rss img {
  border: 0;
}

/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/

/* standard */
article pre {
//  border: 1px solid #ddd;
//  background-color: #eef;
	margin-top: 1em;
	margin-left: 1em;
	padding-left: 1em;
	margin-bottom: 1em;
}

article ul, article ol {
  margin-left: 1.35em;
}

article code {
//  border: 1px solid #ddd;
//  background-color: #eef;
  padding: 0 .2em;
}

article pre code {
  border: none;
}

/* terminal */
article pre.terminal {
  border: 1px solid #000;
  background-color: #333;
  color: #FFF;
}

article pre.terminal code {
  background-color: #333;
}

.in {
	margin-left: 0.5in;
	margin-right: 0.5in;
}

.spacer {
	margin-bottom: 2em;
}

blockquote {
//	border-left: 1px solid #999;
//	margin-left: 1em;
//	padding-left: 1em;
//	margin-bottom: 1em;
	width: 50%
}

blockquote footer { width: 50%;
                    text-align: right; }


dd {
	margin-left: 1em;
	padding-left: 1em;
	margin-bottom: 1em;
}