wren/style.css

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body, code, h1, h2, h3, p, pre {
  margin: 0;
  padding: 0; }

body {
  background: white;
  color: #333333;
  font: 16px/25px "Source Sans Pro", georgia, serif; }

.page {
  margin: 0 auto;
  width: 800px; }
  .page:after {
    content: "";
    display: table;
    clear: both; }

.main-column, main {
  position: relative;
  width: 560px; }

header {
  text-shadow: 0 1px 1px #14191f;
  background: #394046;
  border-bottom: solid 1px #14191f; }
  header .page {
    height: 120px; }
  header h1 {
    position: absolute;
    left: 0;
    top: 63px;
    padding: 0;
    font: 400 48px "Sanchez", helvetica, arial, sans-serif;
    letter-spacing: 2px; }
  header h2 {
    position: absolute;
    right: 0;
    top: 72px;
    padding: 0;
    font: 500 13px "Lato", helvetica, arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #9c9fa2; }
  header a {
    color: #d7d8da; }
  header a:hover {
    color: #99ccff;
    text-shadow: 0 0 6px rgba(0, 127, 255, 0.4); }

nav {
  float: right;
  width: 160px;
  padding-top: 110px; }
  nav h2 {
    color: #c3c5c7;
    font: 500 11px "Lato", helvetica, arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0; }
  nav ul {
    padding: 0;
    margin: 6px 0 20px 0; }
  nav li {
    font: 16px "Source Sans Pro", georgia, serif;
    color: #c3c5c7;
    list-style-type: none;
    margin: 0 0 4px 0; }

h1 {
  padding-top: 30px;
  font: 500 36px/60px "Sanchez", helvetica, arial, sans-serif;
  color: #3399cc; }

h2 {
  font: 500 24px "Sanchez", helvetica, arial, sans-serif;
  margin: 24px 0 0 0;
  color: #3399cc; }

h3 {
  font: 20px "Source Sans Pro", georgia, serif;
  margin: 24px 0 0 0;
  color: #3399cc; }

a {
  color: #3399cc;
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
  outline: none; }

main {
  padding-top: 12px; }

a:hover {
  color: #143352; }

.header-anchor {
  color: white; }

h2:hover > .header-anchor,
h3:hover > .header-anchor {
  color: #ebebec; }

h2:hover > .header-anchor:hover,
h3:hover > .header-anchor:hover {
  color: #143352; }

p, li {
  margin: 10px 0; }

p + p {
  margin-top: 20px; }

code, pre {
  color: #52667a;
  font: 13px "Source Code Pro", Menlo, Monaco, Consolas, monospace;
  background: #f9fafb;
  border-radius: 2px;
  border: solid 1px #f0f3f5;
  border-bottom: solid 1px #e0e7eb; }

code {
  padding: 1px 2px;
  white-space: nowrap; }

pre {
  margin: 10px 0;
  line-height: 18px;
  padding: 10px;
  overflow: auto; }

footer {
  margin-top: 40px;
  padding: 20px 0 40px 0;
  font: 14px "Source Sans Pro", georgia, serif;
  background: #394046;
  color: #d7d8da;
  border-top: solid 1px #14191f;
  text-align: center;
  text-shadow: 0 1px 1px #14191f; }
  footer a {
    color: #99ccff; }
  footer a:hover {
    color: #3399cc; }

.codehilite pre span.c1, .codehilite pre span.cm {
  color: #94a1ad; }
.codehilite pre span.k, .codehilite pre span.kd, .codehilite pre span.kc {
  color: #4799eb; }
.codehilite pre span.m, .codehilite pre span.mi {
  color: #59a112; }
.codehilite pre span.s, .codehilite pre span.s2 {
  color: #e6a219; }
.codehilite pre span.se {
  color: #e68019; }

body.core header a {
  color: #d7d8da; }
body.core header a:hover {
  color: #7de88f;
  text-shadow: 0 0 6px rgba(13, 242, 51, 0.4); }
body.core a {
  color: #1fad66; }
body.core a:hover {
  color: #19664d; }
body.core .header-anchor {
  color: white; }
body.core main h1, body.core main h2, body.core main h3 {
  color: #1fad66; }
body.core main h2:hover > .header-anchor:hover,
body.core main h3:hover > .header-anchor:hover {
  color: #19664d; }
body.core footer a {
  color: #7de88f; }
body.core footer a:hover {
  color: #1fad66; }

table.chart {
  width: 100%;
  padding-left: 25px; }
  table.chart td, table.chart th {
    line-height: 14px;
    margin: 0;
    padding: 0; }
  table.chart th {
    font-size: 14px;
    text-align: left;
    width: 100px; }
  table.chart .chart-bar {
    display: inline-block;
    font: 13px "Source Sans Pro", georgia, serif;
    color: white;
    background: #3399cc;
    border-bottom: solid 1px #143352;
    text-align: right;
    border-radius: 2px; }
  table.chart .chart-bar.wren {
    background: #1d5176;
    border-bottom: solid 1px #143352; }

@media only screen and (max-width: 839px) {
  .page {
    width: 720px; }

  nav {
    width: 144px; }

  .main-column, main {
    width: 504px; } }
@media only screen and (max-width: 759px) {
  .page {
    width: 640px; }

  nav {
    width: 128px; }

  .main-column, main {
    width: 448px; } }
@media only screen and (max-width: 679px) {
  .page {
    width: 560px; }

  nav {
    width: 112px; }

  .main-column, main {
    width: 392px; }

  header h2 {
    font-size: 12px;
    letter-spacing: 1px; } }
@media only screen and (max-width: 639px) {
  .page {
    width: 100%; }

  nav {
    float: none;
    width: 100%;
    padding: 10px 10px;
    margin: 0;
    background: #ebebec;
    text-align: center; }
    nav section {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      width: 30%; }

  .main-column, main {
    padding: 0 20px;
    width: 100%; }

  header h1 {
    position: relative;
    top: 10px;
    left: 0;
    text-align: center; }
  header h2 {
    position: relative;
    top: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px; }

  main {
    float: none;
    width: 100%; }

  pre {
    font-size: 13px; }

  footer {
    padding: 20px 20px 40px 20px; } }