body {
  font-family: Menlo, Monaco, "DejaVu Sans Mono", Consolas, monospace;
  font-size: 14px;
  background: #eee;
}



.container {
  max-width: 700px;
  padding: 10px;
  margin: auto;
  background: #fff;
  border: 1px solid #ddd;
}

@media(min-width: 300px){
  .container {
    padding: 20px 20px;
  }
}

@media(min-width: 700px){
  .container {
    padding: 40px 80px;
  }
}

header {
  overflow: hidden;
  padding-bottom: 21px;
}
header nav {
  float: right
}
header span {
  float: left;
}

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

a:hover {
	border-bottom: 1px solid;
}
time { color: #aaa;}
article time {
  display: block;
  text-align: right;
}

[data-rmd] h1 {
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}
[data-rmd] h1::before {
  content: ""
}
[data-rmd] h2 {
  font-weight: bold;
}
[data-rmd] h2::before {
  color: #aaa;
}
[data-rmd] code {
  color: #999;
}
[data-rmd] a code {
  color: inherit;
}
[data-rmd] em {
  font-style: italic;
}
[data-rmd] strong {
  font-weight: bold;
}

[data-rmd] a.img::before { content: "" }
[data-rmd] a.img::after { content: "" }
[data-rmd] a.img span {
  display: block; text-align: center;
}
[data-rmd] a.img:hover span {
  text-decoration: underline;
}


pre { overflow: auto; }

p.source { text-align: center; color: #aaa; }
p.share { text-align: center; }
p.alt { text-align: center;}
footer { text-align: center; color: #aaa; font-size: 12px; padding: 10px; }
p img {
  display: block;
  margin:auto;
  max-width: 100%;
}

a < img::before {content: ""}

.g table {margin: auto}
.g h1, .g h2 { text-align: center; }
.g table img { width: 600px; }

.g {
  max-width: 1300px;
  padding: 10px;
  margin: auto;
  background: #fff;
  border: 1px solid #ddd;
}

.side-by-side .info,
.two-column .info { display: block; text-decoration: underline; }

@media(min-width: 900px){
  .side-by-side .info,
  .two-column .info { display: none }

  .side-by-side .container { max-width: 1200px; }
  .side-by-side section.content div.highlighter-rouge { width: 50%; float: left; clear: left }
  .side-by-side section.content div.highlighter-rouge + p { width: 48%; float: right; clear: right;}
  .side-by-side section.content div.highlighter-rouge pre { margin-left: 0; }
  .side-by-side section.content * { clear: both }

  .two-columns .container { max-width: 1200px; }
  .two-columns section.content div.highlighter-rouge { width: 50%; float: left; }
  .two-columns section.content div.highlighter-rouge pre { margin-left: 0; }
}