@import url(https://fonts.googleapis.com/css?family=Lato:400italic,700italic,400,700);

/* Scale included media */
article img,article video,article object,aside img{max-width:100%;height:auto}
article iframe{max-width:100%}
.thumbnail{width:auto}

body {
  padding:15px;
  font:14px/1.5 Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:#777;
  font-weight:300;
  word-wrap:break-word}

h1, h2, h3, h4, h5, h6 {
  color:#222;
  margin:0 0 20px}

p, ul, ol, table, pre, dl, article img, article video, article iframe, article object, article embed {
  margin:0 0 15px}

h1, h2, h3 {
  line-height:1.1}

h1 {
  font-size:28px;
  text-transform:uppercase}

.meta{
  font-size:12px;
  margin:-15px 0 20px;
}

h1 a, h2 a, h3 a,.meta a{
  color:#222 !important;
  border-color:#222 !important
}

a {
  color:#39c;
  text-decoration:none}

#wrapper {
  width:auto;
  margin:0}

div#stats{margin:0 -30px 0 -10px;overflow:hidden;padding:10px 0}
div#stats ul{list-style:none;margin:0;padding:0}
div#stats li{width:25%;display:inline-block;border-left:5px solid #aeaeae;padding-left:10px;margin:10px}
div#stats li span{font-size:0.8em;text-transform:uppercase;letter-spacing:1.2px}
div#stats li h4{margin:0;padding:0}

img#intro{width:100%;max-width:600px;display:block;margin:0 auto}

img.inset{max-width:250px;display:block;margin:0 auto 15px}

#content{overflow:hidden}

blockquote {
  border-left:1px solid #e5e5e5;
  margin:0 0 20px;
  padding:0 0 0 20px;
  font-style:italic;
  white-space:pre-wrap;
  word-wrap:break-word}

code, pre {
  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  color:#333;
  font-size:12px}

pre {
  padding:8px 15px;
  background:#f8f8f8;
  border:1px solid #e5e5e5;
  overflow-x:auto}

table {
  width:100%;
  border-collapse:collapse}

th, td {
  text-align:left;
  padding:5px 10px;
  border-bottom:1px solid #e5e5e5}

dt {
  font-weight:700}

th, dt {
  color:inherit}

img {
  max-width:100%}

img.thumbnail{
  width:190px;
  height:190px;
  padding:0;
  margin:5px}

a.colorbox, #columns + article a {border:none !important}

header {
  padding:0}

header ul {
  overflow:hidden;
  width:100%;
  padding:0;
  margin:0;
  background-color:#39c;
  list-style:none}

header ul li {
  float:left}

header ul li a {
  padding:9px 12px;
  font-size:15px;
  text-transform:uppercase;
  display:block;
  text-align:center;
  color:#fff;
  font-weight:700}

header ul li:hover {
  background-color:#fff}

header ul li:hover a {
  color:#39c}

article {
  padding:20px 0;
  margin:0;
  border-top:2px solid #e5e5e5}

p{text-align:justify}

small {
  font-size:11px}

hr {
  border:0;
  background:#e5e5e5;
  height:1px;
  margin:0 0 20px}

footer{
  font-size:13px}

nav[role="pagination"] .nav-left {
  margin:40px 0;
  float:left}
nav[role="pagination"] .nav-right {
  margin:40px 0;
  float:right}

@media all and (min-width:480px) {
  body {
    padding:50px}
  img.inset{
    float:right;
    margin-left:20px} }

@media all and (min-width:720px) {
  header ul li a, a{
    transition:background-color 50ms linear, color 50ms linear}
  header ul {
    position:absolute;
    width:270px;
    right:58px;
    top:52px;
    padding:0 58px 0 0;
    margin:0 -58px 0 0} }

@media all and (min-width:960px) {
  #wrapper {
    width:860px;
    margin:0 auto}

  header {
    width:270px;
    float:left;
    position:fixed}

  header ul {
    position:relative;
    right:0;
    top:0;
    padding:0 0 0 1000px;
    margin:0 0 0 -1000px}

  article {
    width:500px;
    float:right;
    padding:20px 0;
    margin:0}

  article:first-child{
    border-top:none;
    padding-top:0}

  footer {
    width:270px;
    float:left;
    position:fixed;
    bottom:20px}}

@media all and (min-width:1060px) {
  #wrapper{width:960px}
  article{width:600px}}

/*fullwidth*/
body#fullwidth{padding:15px}
#fullwidth #wrapper, #fullwidth article, #fullwidth header, #fullwidth header ul, #fullwidth footer{position:relative;width:100%}
#fullwidth header{padding-right:0;float:none}
#fullwidth header ul {margin:0 -23px 15px;padding:0 23px;top:0;right:0}
#fullwidth #content {margin:-15px -23px;padding:15px 23px}
#fullwidth header p {display:none}

/*feeds*/
#fullwidth #content ul{
  margin:0 0 10px 0;
  padding:4px 0;
  list-style-type:none;
  display:inline-block;
  width:100%;
}
#fullwidth #content article:first-child{border-top:none;padding-top:0}
#fullwidth #content a{font-weight:700;font-size:14px}
#fullwidth article+article img{padding:0;margin:0}

@media all and (min-width:480px){
  #fullwidth #columns {
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-gap:20px;
    -moz-column-gap:20px;
    -webkit-column-gap:20px}
  #fullwidth #content{
    background-color:#fff}}
@media all and (min-width:960px){
  #fullwidth #columns {
    column-count:3;
    -moz-column-count:3;
    -webkit-column-count:3}
  #fullwidth #content{
    background-color:rgba(255,255,255,0.8)}}

/*archive*/
@media all and (min-width:480px){
  #archive #content article{
    column-count:2;
    -moz-column-count:2;
    -webkit-column-count:2;
    column-gap:20px;
    -moz-column-gap:20px;
    -webkit-column-gap:20px;
  }
  #archive #content article div{
    display:inline-block;
    width:100%}}