*, *:after, *:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
body, html {font-size:100%; padding:0; margin:0;}

/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after, .grid:before, .grid:after {content:" "; display: table;}
.clearfix:after, .grid:after {clear:both;}

/* Fonts hosted locally. zilla-slab-regular - latin  */
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/zilla-slab-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Zilla Slab'), local('ZillaSlab-Regular'),
       url('/fonts/zilla-slab-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/zilla-slab-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/zilla-slab-v3-latin-regular.svg#ZillaSlab') format('svg'); /* Legacy iOS */
}

/* zilla-slab-italic - latin */
@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/zilla-slab-v3-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Zilla Slab Italic'), local('ZillaSlab-Italic'),
       url('/fonts/zilla-slab-v3-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/zilla-slab-v3-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/zilla-slab-v3-latin-italic.svg#ZillaSlab') format('svg'); /* Legacy iOS */
}

/* zilla-slab-500 - latin */
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/zilla-slab-v3-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Zilla Slab Medium'), local('ZillaSlab-Medium'),
       url('/fonts/zilla-slab-v3-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/zilla-slab-v3-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/zilla-slab-v3-latin-500.svg#ZillaSlab') format('svg'); /* Legacy iOS */
}

/* zilla-slab-500italic - latin */
@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/zilla-slab-v3-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Zilla Slab Medium Italic'), local('ZillaSlab-MediumItalic'),
       url('/fonts/zilla-slab-v3-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/zilla-slab-v3-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/zilla-slab-v3-latin-500italic.svg#ZillaSlab') format('svg'); /* Legacy iOS */
}

/* zilla-slab-700 - latin */
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/zilla-slab-v3-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Zilla Slab Bold'), local('ZillaSlab-Bold'),
       url('/fonts/zilla-slab-v3-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/zilla-slab-v3-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/zilla-slab-v3-latin-700.svg#ZillaSlab') format('svg'); /* Legacy iOS */
}

/* zilla-slab-700italic - latin */
@font-face {
  font-family: 'Zilla Slab';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/zilla-slab-v3-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Zilla Slab Bold Italic'), local('ZillaSlab-BoldItalic'),
       url('/fonts/zilla-slab-v3-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/zilla-slab-v3-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/zilla-slab-v3-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/zilla-slab-v3-latin-700italic.svg#ZillaSlab') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'Zilla Slab', serif;
  color:#111;
  background:#fff url(/img/paper.gif) repeat scroll;
  padding:15px 3px 60px;
  text-align:center;
}

a {
/*  color:#c00d04;*/
/*  color:#3369E8;*/
  color:#1565c0;
/*  color:#e65100;*/
/*  color:#000;*/
  border-bottom:2px solid #ddd;
  text-decoration:none;
}
h1 a, h2 a, h3 a, h4 a {border:0;}
a:hover,
a:active {
  color:#333 !important;
  background:#fff59d;
  border-color:#e5e5e5;
}
.page :target {background:#fff4a2;} /* Shine a light on HTML fragments. */
body#home #nav-home,
body#notebook #nav-notebook,
body#photography #nav-photography,
body#design #nav-design,
body#design #nav-webdesign,
body#code #nav-code,
body#about #nav-about,
body#info #nav-info,
body#shop #nav-shop,
body#when #nav-when,
body#what #nav-what,
body#where #nav-where,
body#what #nav-what-computergames,
body#what #nav-what-education
{color:#111 !important; font-weight:bold;}

#nav-home {font-style:italic;}

nav a {font-weight:normal;}
/*#nav-home {margin-right:15px;}*/

img {display:block; margin:0;}
a.postimglink {border:0 !important;}
img.postimg {max-width:888px !important;
  /* Inner border radius */
/*  background:#000;
  border-radius:0.4em;
  box-shadow:0 0 0 0.3em #000;
  display:inline-block;
  outline:0.4em solid #000;
  border:0*/;
}
  
/*body.single img {margin-bottom:15px;}*/
/* =para =line */
p, li, dt, dd, input {font-size:20px; line-height:27px;}
p {margin:0 0 15px;}
p + p {margin:8px 0 15px;}
dd {padding:0; margin:0;}
blockquote {padding:0; margin:0;}
blockquote p {padding:0 0 0 15px; border-left:3px solid #e5e5e5;}
blockquote + p, blockquote footer {margin-bottom:20px;}
h3 {font-size:20px; font-weight:bold; margin:0;}
ul, ol {padding:0; margin-left:20px;}
ul.nomarginlist {padding:0; list-style:none; margin:0 0 10px;}
dl.linkedlist {margin:0 0 10px;}
dt {margin-bottom:12px; text-transform:uppercase; font-size:17px; letter-spacing:1px;}
dt a {display:inline !important; font-weight:normal;}
dt:hover a.plink {color:#111;}
a.plink {color:#aaa; padding:1px 6px; border:0;}
form#search {margin-bottom:1em;}
input.searchtext {padding:5px;}
input.searchbutton {padding:6px 10px 7px; margin-left:3px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #fafafa; border-left:1px solid #fafafa; background:#eee;}
input.searchbutton:hover {cursor:pointer;}
hr {height:1px; background:#ccc; margin:22px 0; border:none 0; display:block; clear:both; color:#ccc;}

div.homecontent {float:left; margin:0 10px 10px 0;}
aside.sidebar {max-width:20em; float:left;}
aside.sidebar li {font-size:18px; line-height:28px;}
aside.sidebar li a {border-width:1px;}
aside.sidebar h3 a {border-bottom:1px solid #ccc;}

div.videobox {padding:7px 8px 9px;}
div.videobox p {font-size:0.85em; line-height:1.35em;}

/* http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/*/
.fluidmedia {
  position: relative;
  padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
  padding-top: 5px;
  height: 0;
  overflow: hidden;
}
.fluidmedia iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

header,
div.page,
footer {max-width:1190px; margin:0 auto; text-align:left;}
blockquote footer {padding:0 0 10px;}

div.page {padding:0 10px; text-align:left !important;}

body.single div.page {max-width:1190px;}

body.single div.page p,
body.single div.page li,
body.single div.page dt,
body.single div.page dd,
body.single div.page figcaption, body.single div.page blockquote {max-width:39em;}

div.meta {padding:0;}

body.single div.page,
.galleryheading, 
div.intro {padding:0 10px;}
div.intro p {margin:0 0 15px;}
body.single header {padding:0;}
body.single nav {margin-bottom:-10px;}

header {margin:5px 0 4px; padding:0;}

header a {border:0; background:transparent;}

header h1 {
  display:inline-block;
  font-size:24px;
  line-height:28px;
  margin:0 10px 10px 0;
  font-weight:normal;
}
header h1 em {font-size:20px; padding:0 10px 0 0;}

.slogan {}
.slogan a {font-weight:normal; padding:5px 0;}

h1 {margin:0 0 10px; font-size:30px;}
.title, h4 {margin:0 0 10px; font-size:25px; line-height:30px;}
footer {clear:both; padding:20px 10px 0; text-align:left;}

h2 {font-size:22px; margin:30px 0 10px;}

div#picture {width:60%; float:left; padding-right:14px; padding-bottom:20px;}
div#description {width:38%; float:left; padding-left:28px;}

nav {display:inline-block; margin:0 0 10px -6px;}
nav a {
  display:inline-block;
  padding:7px;
}
nav a:hover,
nav a.here,
nav a.here:hover {
  color:#111;
}

/*nav small a {font-style:italic;}*/

nav.pagination {padding-left:20px; margin-bottom:40px; clear:both;}
nav.pagination a {border:3px solid #ccc; padding:15px 20px;}
figure {margin:0 0 20px; padding:0;}
.caption, figcaption {margin:5px 0 20px; font-size:16px;}
div.gcaption {display:none;}

/* Masonry grid */
.grid {
  list-style:none;
  margin:0 auto;
  padding:0;
}
.grid li {
  margin-bottom: 10px;
  padding:0 10px 10px 0;
  width:32%;
}
.grid li.wide:first-child {width:64.83%;} /* Entries with `wide: true` parameter */
.grid li img {
  display: block;
  width: 100%;
  height: auto !important;
  opacity:1;
}

img.tall {max-width:600px !important;}

.clear {clear:both !important;}
.clearfix:after {content:"."; visibility:hidden; display:block; height:0; clear:both !important;}
.nobottommargin {margin-bottom:0 !important;}
.pswp__caption__center {float:left !important; font-size:20px !important; line-height:28px !important;}
.pswp__caption__center a {color:#fc0 !important;}
.pswp__caption__center a:hover, .pswp__caption__center a:active {color:#333 !important;}
.floatleft {float:left; margin:0 20px 10px 0;}
/*.floatleft + blockquote p {padding-left:200px !important; border-left:2px solid #ccc; outline:red double;}*/
.floatleft img {margin-top:0;}
.floatright img {margin-top:0;}
.floatright {float:right; margin:0 0 10px 20px;}
.up {}
.center {text-align:center;}
.titleimage {font-weight:normal; font-size:20px; margin-bottom:0;}
.boom {font-size:120px; margin:0 0 10px; line-height:120px;}
.column2 {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
.quiet {color:#888;}
.caps {font-size:0.8em; letter-spacing:1px; text-transform:uppercase;}
.date {font-style:italic;}
.normal {font-weight:normal;}
.largerh1 {font-size:40px;}
.bold {font-weight:bold !important;}
h1 small, h1 small a, h2 small, h2 small a {font-weight:normal !important;}
.smalltitle {font-size:22px; text-transform:uppercase; letter-spacing:1px; margin:20px 0 0; padding:0 10px;}
.whatcol {float:left; margin-right:60px; margin-top:20px;}
.sharecol {float:left; margin-top:20px;}
.whatcol a, .sharecol a {font-weight:normal !important;}
.blacklink {color:#000;}
.end {padding:20px 0 0; margin:0;}
.capitalize {text-transform:capitalize;}
.nomargin {margin:0 !important;}
.readmore {margin:-15px 0 0 !important;}
sup {line-height:0;}

body.notebookhome .floatleft, body.notebookhome .floatright {float:none; margin:0 0 15px;}

/* Gotta be responsive */
@media only screen and (max-width: 1024px) {
/*  .grid li, .floatleft, .floatright {width:48%;}*/
  .grid li.wide:first-child {width:97%;}
}

@media screen and (max-width:720px) {
  .grid li, .grid li.wide:first-child {width:100%;}
  img {max-width: 100% !important; height: auto !important;}
  div#picture, div#description {width:100%;}
  div#description {padding-left:0;}
  div#picture {padding-right:0;}
  header {margin-bottom:15px;}
  .floatleft, .floatright {width:97% !important; float:none; margin:10px 0 20px !important;}
}

@media screen and (max-width:1350px) {
  body.single img {max-width: 100% !important; height: auto !important;}
/*  div#picture, div#description {width:100%;}
  div#description {padding-left:0;}
  div#picture {padding-right:0;}
  
*/
}