/* the structural definitions */
body {
  min-width:320px;
}

/* --- header and footer --- */
#header {
  position:fixed;
  height:100px;
}

#footer {
  position:fixed;
  bottom:0px;
}

/* --- main content --- */
div:target ~ #container {
  display:none;
}

#container {
  width:100%;
  z-index:6;
  position:absolute;
  margin-top:120px;
  background:-moz-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
  background:-webkit-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
  background:-o-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
  background:linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
  display:block;
}

#container .nodes-container {
  width:70%;
  min-width:320px;
  margin:auto;
}

#container .node {
  border-left:solid 3em #dd6600;
  border-right:solid 1em #dd6600;
  background:-moz-linear-gradient(150deg, #111, #000) no-repeat scroll 0 0 transparent;
  background:-webkit-linear-gradient(150deg, #111, #000) no-repeat scroll 0 0 transparent;
  background:-o-linear-gradient(150deg, #111, #000) no-repeat scroll 0 0 transparent;
  background:linear-gradient(150deg, #111, #000) no-repeat scroll 0 0 transparent;
  box-shadow:1px 1px 7px 1px black;
}

/* --- backgrounder and main content --- */
#container > .head-fill {
  width: 1px;
  height: 1px;
  background: transparent;
  position: absolute;
  bottom: -75px;
}

#backgrounder-container {
  display:none;
}

/* --- delimiters --- */
#container .delimiter .fill {
  display:none;
}

#container .delimiter .right .nav-container {
  left:2.7em;
  z-index:1;
}

#container .delimiter .left .nav-container .node-return-link {
  bottom:5em;
  right:2px;
}

#container .delimiter.ender .left .nav-container .node-return-link {
  bottom:0em;
}

/* --- post style --- */
#container .nodes-container .node-inner-container {
  margin: 0em;
}

#container .nodes-container .node-inner-container ~ .node-inner-container {
  margin-top: 5em;
}

/* normal styles */
body {
  background:-moz-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
  background:-webkit-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
  background:-o-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
  background:linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 transparent;
}


/* --- main content --- */
#container .node .node-content {
  padding: 1em;
}

/* -------------------------- */
/* --- experimental stuff --- */
/* -------------------------- */
/* --- about section --- */
#about-container > .head-fill {
  width:1px;
  height:1px;
  background:transparent;
  position:absolute;
  z-index:-1;
  bottom:-100px;
}

#about-container {
  width:100%;
  overflow:visible;
  top:120px;
  box-shadow:0px -15px 10px 0px #333, 0px 15px 10px 0px #181818;
}

/* sweet, sweet magic */
#about-container .about-inner-container {
  width:100%;
}

#about-container .about-inner-container .bio,
#about-container .about-inner-container .contact,
#about-container .about-inner-container .social {
  display:block;
  float:left
}

#about-container .about-inner-container .bio {
  max-width:50%;
  padding-right:1em;
}

#about-container .about-inner-container .social {
  display:table;
  padding-top:1.3em;
}

/* --- table of contents --- */
#toc-container > .head-fill {
  width:1px;
  height:1px;
  background:transparent;
  position:absolute;
  z-index:-1;
  bottom:-100px;
}

#toc-container {
  width:100%;
  overflow:visible;
  position:absolute;
  display:none;
  top:120px;
  box-shadow:0px -15px 10px 0px #333, 0px 15px 10px 0px #181818;
  background:-moz-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 red;
  background:-webkit-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 red;
  background:-o-linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 red;
  background:linear-gradient(177deg, #333, #333 40%, #181818 60%, #181818) no-repeat fixed 0 0 red;
}

/* sweet, sweet magic */
#toc-container .toc-inner-container {
  width:100%;
}

#toc-container .toc-inner-container .toc-data {
  min-height:300px;
}