/* the structural definitions */
body {
  min-height:500px;
  min-width:300px;
}

/* --- header and footer --- */
#header {
  height:19%;
  position:absolute;
}

#footer {
  position:absolute;
  bottom:3px;
}

/* --- main content --- */
#container {
  height:100%;
  overflow-x:scroll;
  overflow-y:auto;
  width:100%;
  min-height:500px;
  z-index:3;
  position:absolute;
  display:block;
}

#container .nodes-container {
  -moz-column-width:19em;
  -moz-column-gap:0.4em;
  -webkit-column-width:19em;
  -webkit-column-gap:0.4em;
  column-width:19em;
  column-gap:0.4em;
  height:70%;
  overflow:visible;
  position:relative;
}

#container .node {
  /* for webkit - break column before this block! */
  -webkit-column-break-before:always;
  break-before:always;
}

/* --- backgrounder and main content --- */
#backgrounder-container {
  height:100%;
  overflow-x:scroll;
}

/* --- delimiters --- */
#container .delimiter {
  height:100%;
  /* for webkit - break column before this block! */
  -webkit-column-break-before:always;
  break-before:always;
}

#container .delimiter .left,
#container .delimiter .right {
  display:table-cell;
  width:1%;
}

#container .delimiter .left .nav-container .node-return-link {
  bottom:0px;
  right:-10px;
}

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

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


/* -------------------------- */
/* --- experimental stuff --- */
/* -------------------------- */
/* --- about section --- */
#about-container > .head-fill {
  width:100%;
  height:20%;
}

#about-container {
  height:100%;
  min-height:500px;
  overflow-x:scroll;
  overflow-y:auto;
}

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

#about-container .about-inner-container .about-info-container {
  min-width:400px;
}

#about-container .about-inner-container .bio,
#about-container .about-inner-container .contact,
#about-container .about-inner-container .social {
  display:table-cell;
}

/* --- table of contents --- */
#toc-container > .head-fill {
  width:100%;
  height:20%;
}

#toc-container {
  width:100%;
  height:100%;
  overflow:auto;
  position:absolute;
  display:none;
  min-height:500px;
  overflow-x:scroll;
  overflow-y:auto;
}

/* sweet, sweet magic */
#toc-container .toc-inner-container {
  width:100.1%;
  background:#181818;
  background-image:-moz-linear-gradient(175deg, #333, #333 40%, #181818 60%, #181818);
  background-image:-webkit-linear-gradient(175deg, #333, #333 40%, #181818 60%, #181818);
  background-image:-o-linear-gradient(175deg, #333, #333 40%, #181818 60%, #181818);
  background-image:linear-gradient(175deg, #333, #333 40%, #181818 60%, #181818);
}

#toc-container .toc-inner-container .toc-header-container {
  min-width:400px;
}

#toc-container .toc-inner-container .toc-data {
  overflow-x:hidden;
  overflow-y:scroll;
  height:90%;
  min-width:400px;
}

#container .nodes-container .node-inner-container {
  position:relative;
}