/**
 * Structural things that apply everywhere.
**/
html, body { height: 100%; }

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

.nobr { white-space: nowrap; }

/**
 * Non-homepage navigation
 * TODO: sort this out.
**/

nav {
  text-align: center;
  overflow: hidden;
  min-height: 32px;
}
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;
  display:inline;
}
nav a:hover img {
  opacity: 1;
}
/* needs two profile images */
header #rhiaro img:last-child {
  display: none;
}
header #rhiaro:hover img:last-child {
  display: inline;
}
header #rhiaro:hover img:first-child {
  display: none;
}

/**
 * Grid
**/

body {
  display: grid;
  grid-template-areas:
    "nav"
    "header"
    "main"
    "footer";
  grid-template-rows: max-content max-content 1fr max-content;
}

header {
  grid-area: header;
}

nav:first-of-type {
  grid-area: nav;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
  min-height: 1em;
}

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

@media screen and (min-width: 1024px) {
  body {
    grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  }
  article {
    width: 50%;
  }
}

/**
 * Old Grid
 * Need to keep this here for classes used in post content.
**/

.w1of1, .w1of2, .w1of3, .w1of4, .w1of5, .w1of7,
.w2of3, .w3of4, .w2of5, .w3of5, .w4of5 {
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;
}
.inner {
  padding: 8px;
}
@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 {
  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;
}