html {
  background:#f2f7fc;
}

blockquote {
  border-left: 4px solid #ccc;
  font-style:italic;
}

blockquote {
  box-sizing: border-box;
  padding:0 10px;
}

header {
  position:fixed;
  height:4.5em;
  z-index: 1;
  border-bottom:1px solid #cfe4f9;
  max-width: none;
  width: 100%;
  padding:0;
  margin:0;
  background:#fff;
}

header nav {
  display:none;
  font-family: "Museo Sans 500";
  font-weight: normal;
}

header nav h2 {
  font-family: "Museo Sans 500";
  font-weight: normal;
  font-size: 16px;
  background:#1672ce;
  color:#fff;
  margin:0;
  width:169px;
  text-align: left;
  border-radius: .3em;
  margin-bottom:.4em;
  padding:.5em .3em;
  cursor: pointer;
}

header nav h2:after {
  content:'\25BE';
  padding-left:80px;
}

header nav ul {
  display:none;
  z-index: 5;
  margin:0;
  padding:0;
  list-style:none;
  text-align:left;
}

header nav .show {
  display:block;
}

header nav li {
  margin:0;
  padding:0;
  text-align: left;
}

header nav a {
  display:block;
  margin:0;
  padding:.5em .3em;
  text-decoration:none;
  color:#1672ce;
  background: #fff;
  border:solid #c7c7c7;
  border-width:0 1px 1px;
}

header nav a:hover {
  background:#f1f1f1;
}

header nav li:first-of-type a {
  border-top-width: 1px;
  border-radius:.3em .3em 0 0;
}

header nav li:last-of-type a {
  border-radius:0 0 .3em .3em;
}

header nav li.selected a {
  background:#1672ce;
  color:#fff;
}


header .logo {
  text-align:left;
}

header .logo .name {
  font-size:38px;
}

header .logo em {
  color:#777;
  font-style:normal;
}

label[for=menu] {
  position:fixed;
  z-index: 2;
  top:20px;
  right:0;
  display:inline-block;
  box-sizing: border-box;
  background:transparent;
  color:#1672ce;
  width:50px;
  font-size:30px;
  line-height: 1;
  padding:0;
  margin:0;
}

label[for=menu]:hover {
  background:transparent;
  color:#1672ce;
}

main {
  padding-top:4em;
  background:none;
}

pre {
  background:#fff;
  border-radius:.3em .3em 0 0;
}

/* ---------- header automatic permalink -----------*/

.header-permalink {
  text-decoration: none;
  color:transparent;
  font-size:.8em;
  vertical-align: super;
}

.header-permalink:hover,
h1:hover .header-permalink,
h2:hover .header-permalink,
h3:hover .header-permalink,
h4:hover .header-permalink,
h5:hover .header-permalink {
  text-decoration: none;
  color:#777;
}

main article p code,
main article li code,
main article div > code {
  font-family: Consolas,Monaco,'Andale Mono',monospace;
  font-size: 17px;
  line-height: 100%;
  color:#1672ce;
  background: #fff;
  border:none;
}

footer {
  border-top:1px solid #cfe4f9;
  background:#fff;
  max-width: none;
  text-align:center;
  color:#a1a1a1;
}

footer span a {
  color:#007ec6;
}

main menu .menu-section {
  border-bottom:1px dashed #cfe4f9;
  padding-bottom:1em;
}

main menu .menu-section:last-of-type {
  border-bottom:none;
}

main menu h2 {
  margin-top:1.5em;
  padding-left:.7em;
  color:#2b3d50;
  font-size:1em;
  font-weight: bold;
  text-transform: none;
  box-shadow: none;
}

main menu ul li a {
  border-radius:.1em;
  font-size:1em;
  margin:.2em;
  padding:.6em;
  color:#1672ce;
}

main menu ul li a:hover {
  color:#1672ce;
  padding:.6em;
  background:transparent;
  text-decoration: underline;
}

main menu ul li.selected {
  background: none;
}

main menu ul li.selected a {
  color:#fff;
  background:#1672ce;
  padding:.6em;
}

main menu ul li.selected a:hover {
  text-decoration: none;
}

pre {
  border-width:0 0 0 4px;
  background: #fff;
}

table {
  border:1px solid #eee;
  background: #fff;
  box-shadow:0 6px 6px 0 rgba(80, 88, 94, .24);
}

table th {
  color:#fff;
  background: #1672ce;
}

p strong {
  font-weight:bold;
}

@media screen and (max-width: 549px) {
  header {
    padding: 20px 0 25px 10px;
  }

  menu {
    text-align: center;
  }
}

@media screen and (min-width: 460px) {
  header nav {
    display:block;
    position:fixed;
    z-index: 2;
    top:20px;
    right:50px;
    padding:0;
    margin:0;
  }

  main menu .versions-small {
    display:none;
  }
}

@media screen and (min-width: 550px) {
  header {
    background:#fff;
  }

  header .header-content {
    box-sizing: border-box;
    max-width:1192px;
    margin:0 auto;
    padding:1em;
  }

  header .header-content:after {
    content: "";
    display: table;
    clear: both;
  }

  header .logo {
    float:left;
    text-align:right;
  }

  header nav {
    position: static;
    float:right;
    margin:0;
    padding:0;
  }

  label[for=menu] {
    display:none;
  }

  main {
    background: none;
  }

  main menu {
    border-right: 1px dashed #cfe4f9;
  }

  main article p,
  main article li {
    font-size:.9em;
  }
}

@media screen and (min-width: 1200px) {
  header .header-content {
    width:1192px;
  }
  main {
    margin-left:auto;
    margin-right:auto;
    width:1192px;
  }
}

.sponsors {
  background: #f68fc8;
  border-bottom:none;
  color: #ffffff;
  font:normal 1em/1.5 "Museo 300";
  text-align:center;
  margin:0 auto;
  padding:0;
}

.sponsors p {
  margin:0 auto;
  padding:.5em .3em;
}

.sponsors a {
  display:inline-block;
  background: #ea0a86;
  color: #fff;
  border-radius: .3em;
  text-decoration: none;
  padding:.4em;
  cursor: pointer;
}

.sponsors a.close {
  background: transparent;
  color:#ea0a86;
  text-decoration: underline;
  padding:.2em;
  font-size: .8em;
}

.hide {
  display:none;
}

@media screen and (max-width: 520px) {
  .sponsors p {
    width: 250px;
    margin: .3em auto 0;
  }
}