.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Boxes */
.boxes {
  overflow:hidden;
  text-align: center;
}
.box {
  width: 32px; height: 32px;
  margin: 2px; padding: 2px;
  float: right;
  color: white;
  font-weight: bold; text-align: center; font-size: 1.6em;
}
.wrapper {
  padding-top: 2em;
}

.wrapper h1 {
  font-size: 1.2em; text-align: left;
}
.wrapper h1 img {
  margin: 0;
  margin-bottom: -2.8em; margin-left: 2em;
  width: 64px; 
  /*margin-top: calc(-32px - 2em);*/
  border: 3px solid white;
}

article {
  margin-left: auto; margin-right: auto;
  width: 90%;
  min-height: 100%;
}

@media screen and (min-width: 1024px) {
  article {
    width: 50%;
  }
  .wrapper {
    background-image: url('https://i.amy.gy/headers/20170910_portobello.jpg');
    background-size: contain;
    background-repeat: repeat-x;
    background-position: top center;
    padding-top: 20em;
  }
}

nav {
  text-align: center;
  overflow: hidden;
}
nav p a {
  display: inline-block;
  padding: 0.4em; margin: 0.4em;
  background-color: white; opacity: 0.6;
  border: 1px solid silver;
  font-weight: bold;
  text-decoration: none; color: inherit;
}
nav a:hover {
  opacity: 1;
}
nav a.left { float: left; }
nav a.right { float: right; }
nav a img {
  margin-bottom: -2em; 
  opacity: 0.6;
  margin-left: auto; margin-right: auto;
  float: none;
  width: 32px; height: 32px;
  margin-bottom: -2em;
}
nav a:hover img {
  opacity: 1;
}

#me {
  background-color: white;
}

#me article {
  width: 64%;
  border-bottom: 1px solid #eee;
  padding: 2em;
}
#me a, #me a:visited {
  text-decoration: underline;
  color: inherit;
}
#me a:hover {
  color: white;
}
#me time{
  display: inline;
}
#me time a, #me time a:visited {
  padding: 0.2em;
  text-decoration: none;
}

#latest a img {
  max-width: 100%;
  width: 264px;
  padding: 4px; border: 1px solid #ccc;
  text-decoration: none;
}
#latest h1 {
  font-size: 2em;
}

#stats {
  background-color: white;
  text-align: left;
  line-height: 1.2;
  padding: 1em 2em 1em 2em;
}

.tags a {
  font-size: 0.8em;
  text-decoration: none!important;
  padding: 0.4em; margin: 0.4em 0.2em;
  display: inline-block;
  color: inherit;
  border: 1px solid #ccc;
}
.tags a:hover {
  background-color: #ccc;
}
.wee {
  font-size: 1em;
}

/* Grid */
.w1of1, .w1of2, .w1of3, .w1of4, .w1of5, .w1of7,
.w2of3, .w3of4, .w2of5, .w3of5, .w4of5 {
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;
}
@media screen and (min-width: 768px){

  .w1of2 { width: 50%; float: left; }
  .w1of3 { width: 33%; float: left; }
  .w1of4 { width: 25%; float: left; }
  .w1of5 { width: 20%; float: left; }
  .w1of7 { width: 14.2%; float: left; }
  .w2of3 { width: 66%; float: left; }
  .w3of4 { width: 75%; float: left; }
  .w2of5 { width: 40%; float: left; }
  .w3of5 { width: 60%; float: left; }
  .w4of5 { width: 80%; float: left; }

}

article img {
  max-width: 100%;
  cursor: pointer;
}

.imgholder {
  position: absolute; top: 0px; left: 0px;
  width: 100%; padding-top: 8px; padding-bottom: 8px;
  background-color: #2d2d2d;
  text-align: center;
  cursor: pointer;
  color: #555555;
  height: 100%; max-height: 100%;
}
.imgholder:after {
  content: "x";
  position: absolute; top: 8px; right: 16px;
  font-size: 2em;
  clear: both;
  z-index: 2;
}
.imgholder img {
  width: auto; max-height: 90%;
  z-index: -1;
}

.stuff {
  background-size: cover;
  height: 264px; width: 264px; float: left;
  margin: 0;
}
.stuff p {
  display: none;
}
.stuff:hover p {
  display: block;
  background-color: #2d2d2d;
  opacity: 0.6;
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  text-align: center;
}
.stuff p {
  margin: 0; padding: 0;
}
.stuff datetime {
  font-size: 0.6em;
  font-family: sans-serif;
  color: white;
  line-height: 1;
}
.stuff .cost {
  font-size: 3em;
}