/* basic styles */
body {
  background-color: #565d64;
}

h1:first-child, h2:first-child {
  margin-top: 0;
}
h2 > em {
  font-size: smaller;
}
h2 > a {
  text-decoration: none;
}
h2 > a:focus, h2 > a:hover {
  text-decoration: underline;
}

tbody > tr:nth-child(even) {
  background-color: #ededed;
}
td, th {
  padding: 4px 8px;
  padding: .25em .5em;
}

article {
  background-image: none;
  background-color: #fff;
  margin: 16px auto;
  margin: 1rem auto;
  max-width: 800px;
  max-width: 50rem;
  padding: 16px;
  padding: 1rem;
}

/* widget styles */

table.pts-results {
  display: inline-table;
  margin-left: 1em;
}

article.post figure {
  display: inline-block;
  max-width: 45%;
}

article.post figure:focus {
  display: block;
  max-width: 100%;
}

/* social button styles */
.right {
  text-align: right;
}

.social:focus, .social:hover {
  opacity: .90;
}

.social svg.icon {
  display: inline-block;
  vertical-align: bottom;
  width: 24px;
  height: 24px;
}

.social.google {
  background-color: #dd4b39;
  color: #fff;
}
.social.google:active {
  background-color: #fff;
  color: #dd4b39;
}
.social.google:focus, .social.google:hover {
  background-color: #dd4b39;
  color: #fff;
}
.social.google svg.icon {
  fill: #fff;
}

.social.twitter {
  background-color: #55acee;
  color: #f5f8fa;
}
.social.twitter:active {
  background-color: #f5f8fa;
  color: #55acee;
}
.social.twitter:focus, .social.twitter:hover {
  background-color: #55acee;
  color: #f5f8fa;
}
.social.twitter svg.icon {
  fill: #f5f8fa;
}

.social.github {
  background-color: #ddd;
  color: #000;
}
.social.github:active {
  background-color: #4183c4;
  color: #ddd;
}
.social.github:focus, .social.github:hover {
  background-color: #ccc;
  color: #4183c4;
}
.social.github svg.icon {
  fill: #000;
}


.social.stackexchange {
  background-color: #2a3b5c;
  color: #eee;
}
.social.stackexchange:active {
  background-color: #eee;
  color: #2a3b5c;
}
.social.stackexchange:focus, .social.stackexchange:hover {
  background-color: #2a3b5c;
  color: #eee;
}
.social.stackexchange svg.icon {
  fill: #eee;
}

.social.codeschool, .social.codeschool:focus, .social.codeschool:hover {
  background-color: #f6f5ed;
  color: #3f4944;
}
.social.codeschool:active {
  background-color: #3f4944;
  color: #f6f5ed;
}
.social.codeschool svg.icon {
  fill: #3f4944;
}

.social.codepen, .social.codepen:focus, .social.codepen:hover {
  background-image: linear-gradient(#111, #222);
  background-color: #222;
  color: #fff;
}
.social.codepen:active {
  background-color: #111;
  color: #fff;
}
.social.codepen svg.icon {
  fill: #fff;
}

/* top bar menus */
.pure-menu .pure-menu-label:focus + ul,
.pure-menu .pure-menu-label:hover + ul,
.pure-menu .pure-menu-label + ul:focus,
.pure-menu .pure-menu-label + ul:hover {
  position: absolute;
  visibility: visible;
  top: 2em;
  left: -50%;
}

/* override Pure.CSS top bar */
@media (max-width: 480px) {
  .pure-menu-children li {
  display: inline-block;
  border-bottom: 0;
  }
}