/* +------------------------------------------------------------------------+ *\
|* | animations                                                             | *|
\* +------------------------------------------------------------------------+ */
@keyframes message-error {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 0, 0);
  }
  to {
    border-color:rgb(64, 0, 0);
    color:rgb(64, 0, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-webkit-keyframes message-error {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 0, 0);
  }
  to {
    border-color:rgb(64, 0, 0);
    color:rgb(64, 0, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-moz-keyframes message-error {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 0, 0);
  }
  to {
    border-color:rgb(64, 0, 0);
    color:rgb(64, 0, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-o-keyframes message-error {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 0, 0);
  }
  to {
    border-color:rgb(64, 0, 0);
    color:rgb(64, 0, 0);
    background-color:rgb(128, 128, 128);
  }
}
@keyframes message-warning {
  from {
    border-color:white;
    color:white;
    background-color:#aa5500;
  }
  to {
    border-color:rgb(96, 64, 0);
    color:rgb(96, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-webkit-keyframes message-warning {
  from {
    border-color:white;
    color:white;
    background-color:#aa5500;
  }
  to {
    border-color:rgb(96, 64, 0);
    color:rgb(96, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-moz-keyframes message-warning {
  from {
    border-color:white;
    color:white;
    background-color:#aa5500;
  }
  to {
    border-color:rgb(96, 64, 0);
    color:rgb(96, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-o-keyframes message-warning {
  from {
    border-color:white;
    color:white;
    background-color:#aa5500;
  }
  to {
    border-color:rgb(96, 64, 0);
    color:rgb(96, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@keyframes message-info {
  from {
    border-color:white;
    color:white;
    background-color:rgb(0, 64, 0);
  }
  to {
    border-color:rgb(0, 64, 0);
    color:rgb(0, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-webkit-keyframes message-info {
  from {
    border-color:white;
    color:white;
    background-color:rgb(0, 64, 0);
  }
  to {
    border-color:rgb(0, 64, 0);
    color:rgb(0, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-moz-keyframes message-info {
  from {
    border-color:white;
    color:white;
    background-color:rgb(0, 64, 0);
  }
  to {
    border-color:rgb(0, 64, 0);
    color:rgb(0, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@-o-keyframes message-info {
  from {
    border-color:white;
    color:white;
    background-color:rgb(0, 64, 0);
  }
  to {
    border-color:rgb(0, 64, 0);
    color:rgb(0, 64, 0);
    background-color:rgb(128, 128, 128);
  }
}
@keyframes message-debug {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 64, 64);
  }
  to {
    border-color:rgb(64, 64, 64);
    color:rgb(64, 64, 64);
    background-color:rgb(128, 128, 128);
  }
}
@-webkit-keyframes message-debug {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 64, 64);
  }
  to {
    border-color:rgb(64, 64, 64);
    color:rgb(64, 64, 64);
    background-color:rgb(128, 128, 128);
  }
}
@-moz-keyframes message-debug {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 64, 64);
  }
  to {
    border-color:rgb(64, 64, 64);
    color:rgb(64, 64, 64);
    background-color:rgb(128, 128, 128);
  }
}
@-o-keyframes message-debug {
  from {
    border-color:white;
    color:white;
    background-color:rgb(64, 64, 64);
  }
  to {
    border-color:rgb(64, 64, 64);
    color:rgb(64, 64, 64);
    background-color:rgb(128, 128, 128);
  }
}

/* +------------------------------------------------------------------------+ *\
|* | common rules -- the structural definitions                             | *|
\* +------------------------------------------------------------------------+ */
body {
  position:relative;
  height:100%;
}

/* --- header and footer --- */
#header {
  top:0px;
  width:100%;
  display:block;
  min-height:100px;
  z-index:5;
}

#footer {
  width:100%;
  height:auto;
  display:block;
  z-index:5;
}

#header .backgrounder {
  height:100%;
}

#header .content {
  position:static;
  width:100%;
  height:100%;
  padding-top:1%;
}

#footer .content {
  position:static;
  height:auto;
  width:100%;
}

#header .content .logo {
  margin-top:0px;
  height:30%;
  margin-bottom:-1%;
  width:auto;
  display:block;
}

#header .content .logo > img {
  min-height:28px;
}

#container .nodes-container {
  z-index:4;
  display:block;
}

#container .node {
  position:relative;
  display:block;
}

/* --- backgrounder and main content --- */
#container > .head-fill,
#backgrounder-container > .head-fill {
  width:100%;
  height:20%;
}

#backgrounder-container {
  width:100%;
  overflow:auto;
  position:absolute;
  z-index:1;
  min-height:500px;
  overflow-y:auto;
}

#backgrounder-container .backgrounder {
  z-index:2;
  width:101%;
  height:70%;
}

/* --- delimiters --- */
#container .delimiter {
  /* for webkit to actually display the right-overflowing content */
  position:relative;
  /* for opera and firefox to not break the block between columns */
  display:table;
  width:100%;
}

#container .delimiter .fill {
  display:table-cell;
  width:8%;
}

#container .delimiter .fill > div {
  position:relative;
}

#container .delimiter .fill > .prev-link-container {
  position:absolute;
  top:0px;
  width:50%;
  left:30%;
}

#container .delimiter .left .nav-container {
  width:100%;
  height:100%;
  position:relative;
}

#container .delimiter .right .nav-container {
  position:absolute;
  top:0px;
}

#container .delimiter .left .nav-container .node-return-link {
  display:block;
  position:absolute;
}

/* --- post date --- */
#container .delimiter .right .date {
  display:block;
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  white-space:nowrap;
  overflow:visible;
  position:relative;
  margin-left:-1em;
  margin-top:5.5em;
  width:1px;
  height:1px;
}

/* --- navigation --- */
.nav-checkbox {
  display:none;
}

#nav-messages-container:checked + #messenger {
  display:block !important;
}

#messenger .message-check {
  display:none;
}

#messenger .message-check + .message {
  display:none !important;
}

#messenger .message-check:checked + .message {
  display:block !important;
}

#messenger .message-check:checked ~ #hide-messages {
  display:block;
}

label[for|="nav"] {
  cursor:pointer;
}

#msg-indicator:hover,
#main-nav > label:hover,
#main-nav > div > span a:hover {
  background:rgb(255, 128, 0) !important;
  color:#000 !important;
}

#main-nav > label:hover {
  width:9em !important;
}

#main-nav > label:hover > span {
  width:5.5em !important;
}
.content-container {
  display:none;
}
.content-container#container {
  display:block;
}
.nav-checkbox:checked + .content-container {
  display:block !important;
}
.section-checkbox:checked ~ #nav-container:not(:checked) + .content-container {
  display:none !important;
}
.targeter#about:target ~ #nav-default:checked ~ #about-container,
.targeter#toc:target ~ #nav-default:checked ~ #toc-container {
  display:block;
}

/* --- for webkits --- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* date */
  #container .delimiter .right .date {
    position:absolute;
    margin-left:-3em;
    margin-top:3em;
    width:auto;
    height:auto;
  }
  /* menu */
  #main-nav > * > span {
    top:0px !important;
  }
}

/* --- fonts --- */
@font-face {
  font-family: "Play";
  src: url("../fonts/play/Play-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Play";
  src: url("../fonts/play/Play-Bold.ttf") format("truetype");
  font-weight:bold;
}

/* +------------------------------------------------------------------------+ *\
|* | common rules -- regular styles                                         | *|
\* +------------------------------------------------------------------------+ */
body {
  margin:0px;
  padding:0px;
  font-family:Play, Ubuntu, Arial;
  font-size:10pt;

  background:#181818;
  color:#ddd;
}

a {
  color:#ddd;
  text-decoration:none;
  border-bottom:solid 1px #ff8800;
  -moz-transition:color linear 0.25s, border-bottom linear 0.25s;
  -webkit-transition:color linear 0.25s, border-bottom linear 0.25s;
  transition:color linear 0.25s, border-bottom linear 0.25s;
}

a:visited {
  color:#aaa;
}

a:hover {
  color:#ff8800;
  border-bottom:solid 1px #fff;
}

a[href^='http://']:not([class])::before,
a[href^='https://']:not([class])::before {
  content: "»";
  color:#ff8800;
  line-height:80%;
  -moz-transition:color linear 0.25s;
  -webkit-transition:color linear 0.25s;
  transition:color linear 0.25s;
}

a[href^='http://']:not([class]):hover::before,
a[href^='https://']:not([class]):hover::before {
  color:#fff;
}

a.imglink {
  border:none;
}

a.imglink[rel="alternate"] img {
  border-width:0;
  height:15px;
  width:15px;
}

/* --- header --- */
#header {
  background-image:none;
  background-color:#444;
  -moz-transition:background-color ease-in 1s;
  -webkit-transition:background-color linear 1s;
  transition:background-color linear 1s;
}

#header:hover {
  background-image:none;
  background-color:#f80;
}

#header .backgrounder {
  background-image: -moz-radial-gradient(50% 0%, rgba(61, 61, 61, 0), #333 50%);
  background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, from(rgba(61, 61, 61, 0)), to(#333));
}

#header .content * {
  text-align:center;
}

#header .content h1,
#header .content h1 a {
  color:#222;
  text-shadow:1px 1px #666;
  margin-bottom:0.2em;
  border:none;
}

#header .content p {
  color:#111;
  text-shadow:1px 1px #444;
  margin-top:0.2em;
}

/* --- main content --- */
#container .node {
  text-align:justify;
}

#container .node * {
  text-shadow:1px 1px #000;
  line-height:1.3;
}

#container .node pre {
  background: none repeat scroll 0 0 #090909;
  border: 1px dotted #444444;
  font-size: 90%;
  padding: 0.3em;
}

#container .node tt {
  font-size: 90%;
  white-space:pre-wrap;
}

#container .node h2 {
  margin-top:0px;
  text-align:left;
  box-shadow:0px 1px black;
}

#container .node h2 > a {
  display:block;
}

#container .node h2 > a:visited {
  color:#ddd;
}

#container .node h2 > a:hover {
  color:#ff8800;
  border-bottom:solid 1px #fff;
}

#container .node ul {
  padding-left:1.7em;
}

#container .node hr {
  height:0px;
  border:none;
  border-top:solid 1px #aaa;
  border-bottom:solid 1px #000;
  border-right:solid 1px #000;
  width:55%;
  margin:1.7em auto 1.5em auto;
}


/* --- blockquote --- */
#container .node blockquote {
  background: rgba(128, 128, 128, 0.1);
  border-left: solid 0.4em #444;
  font-size: 100%;
  padding: 0.7em 0.7em 0.5em 1.5em;
  margin: 0.7em 0em 0em 0em;
}


/* --- headings --- */
#container .node h3,
#container .node h4 {
  margin-top: 1.6em;
  margin-bottom:1em;
}

#container .node h3 {
  font-size: 135%;
}

#container .node h4 {
  font-size:120%
}


/* --- heading links --- */
#container .node h3 > a:first-child::after,
#container .node h4 > a:first-child::after {
  content: '#';
  font-weight: normal;
  float: right;
  font-size: 80%;
  margin-top:0.3em;
  margin-left:0.5em;
  font-family: monospace;
  opacity: 0.3;
  -moz-transition:opacity linear 1s;
  -webkit-transition:opacity linear 1s;
  transition:opacity linear 1s;
}

#container .node h3:hover > a:first-child::after,
#container .node h4:hover > a:first-child::after {
  opacity:1;
}


/* --- backgrounder --- */
#backgrounder-container .backgrounder {
  background:-moz-linear-gradient(150deg, #222, #000) no-repeat scroll 0 0 transparent;
  background:-webkit-linear-gradient(150deg, #222, #000) no-repeat scroll 0 0 transparent;
  background:-o-linear-gradient(150deg, #222, #000) no-repeat scroll 0 0 transparent;
  background:linear-gradient(150deg, #222, #000) no-repeat scroll 0 0 transparent;
}


/* --- content delimiters --- */
#container .delimiter .fill {
  background:#181818;
  background-image:-moz-linear-gradient(165deg, #333, #333 30%, #181818 70%, #181818);
  background-image:-webkit-linear-gradient(165deg, #333, #333 30%, #181818 70%, #181818);
  background-image:-o-linear-gradient(165deg, #333, #333 30%, #181818 70%, #181818);
  background-image:linear-gradient(165deg, #333, #333 30%, #181818 70%, #181818);
  border-left:solid 1em #dd6600;
  border-right:solid 3em #dd6600;
}

#container .delimiter.starter .fill {
  border-left:none;
}

#container .delimiter.ender .fill {
  border-right:none;
}

#container .delimiter .left .nav-container .node-return-link {
  color:black;
  text-decoration:none;
  font-weight:normal;
  border:none;
  text-shadow:none;
}


/* post date */
#container .delimiter .right .date {
  font-size:250%;
  color:black;
  text-shadow:-1px 1px #fa4;
}


/* --- footer --- */
#footer .content {
  text-align:center;
}

#footer .content > div {
  position:absolute;
  bottom:1em;
  width:100%;
}

#footer .content hr {
  height:1px;
  border:none;
  background:#111;
  border-bottom:solid 1px #222;
  border-right:solid 1px #222;
  width:50%;
}

#footer .content p {
  margin:0.5em 0em;
}

#footer .content p,
#footer .content p a {
  color:#555;
  text-shadow:-1px -1px #000;
  -moz-transition:color linear 1s;
  -webkit-transition:color linear 1s;
  transition:color linear 1s;
  border-bottom:none;
}

#footer .content p:hover,
#footer .content p a:hover {
  color:#a60;
}

#footer .content img {
  opacity:0.2;
  -moz-transition:opacity linear 1s;
  -webkit-transition:opacity linear 1s;
  transition:opacity linear 1s;
}

#footer .content img:hover {
  opacity:1.0;
}


/* --- the Node action --- */
body.action-node #backgrounder-container .backgrounder,
body.action-node #container .delimiter .fill {
  background:-moz-linear-gradient(180deg, #333, #333 30%, #181818 70%, #181818) repeat scroll 0 0 #181818;
  background:-webkit-linear-gradient(180deg, #333, #333 30%, #181818 70%, #181818) repeat scroll 0 0 #181818;
  background:-o-linear-gradient(180deg, #333, #333 30%, #181818 70%, #181818) repeat scroll 0 0 #181818;
  background:linear-gradient(180deg, #333, #333 30%, #181818 70%, #181818) repeat scroll 0 0 #181818;
}

body.action-node .nodes-container {
  -moz-column-gap:0em !important;
  -webkit-column-gap:0em !important;
  -o-column-gap:0em !important;
  column-gap:0em !important;
}

body.action-node .node, body.action-node .delimiter {
  background:#090909;
}


/* -------------------------- */
/* --- experimental stuff --- */
/* -------------------------- */

/* --- messenger --- */
#messenger {
  overflow:hidden;
  position:fixed;
  width:100%;
  height:auto;
  top:0px;
  z-index:8;
  display:none;
  text-align:center;
  background: transparent;
  box-shadow: none;
  min-width:320px;
  padding-bottom:2em;
}

#messenger > a {
  display:block;
/*   font-style:italic; */
/*   font-weight:bold; */
  border:none;
  padding:3em 0.1em 0.1em 0.1em;
  margin-top:-2.9em;
  color:#f80;
  -moz-transition:background-color linear 0.5s, color linear 0.5s;
  -webkit-transition:background-color linear 0.5s, color linear 0.5s;
  transition:background-color linear 0.5s, color linear 0.5s;
  position:relative;
  font-variant:small-caps;
  border-radius:0px 0px 40px 40px;
}

#messenger > a:visited {
  color:#f80;
}

#messenger > a:hover {
  color:black;
  background-color:#f80;
}

#messenger .message {
  border-radius: 0 0 25px 25px;
  margin-top: -3em;
  border-bottom:solid 1px;
  display:block;
  -moz-transition:background-color linear 0.5s, color linear 0.5s;
  -webkit-transition:background-color linear 0.5s, color linear 0.5s;
  transition:background-color linear 0.5s, color linear 0.5s;
  position:relative;
  margin-top: 0;
  padding: 0.3em 3em 0.3em;
  cursor:pointer;
}

#messenger .message.debug {
  border-color:rgb(64, 64, 64);
  color:rgb(64, 64, 64);
  background-color:rgb(128, 128, 128);
  -webkit-animation:message-debug 2s ease-in-out 0.1s 1;
  -moz-animation:message-debug 2s ease-in-out 0.1s 1;
  -o-animation:message-debug 2s ease-in-out 0.1s 1;
  animation:message-debug 2s ease-in-out 0.1s 1;
}

#messenger .message.debug:hover {
  border-color:white;
  color:white;
  background-color:rgb(64, 64, 64);
}

#messenger .message.info {
  border-color:rgb(0, 64, 0);
  color:rgb(0, 64, 0);
  background-color:rgb(128, 128, 128);
  -webkit-animation:message-info 2s ease-in-out 0.1s 1;
  -moz-animation:message-info 2s ease-in-out 0.1s 1;
  -o-animation:message-info 2s ease-in-out 0.1s 1;
  animation:message-info 2s ease-in-out 0.1s 1;
}

#messenger .message.info:hover {
  border-color:white;
  color:white;
  background-color:rgb(0, 64, 0);
}

#messenger .message.warning {
  border-color:rgb(96, 64, 0);
  color:rgb(96, 64, 0);
  background-color:rgb(128, 128, 128);
  -webkit-animation:message-warning 2s ease-in-out 0.1s 1;
  -moz-animation:message-warning 2s ease-in-out 0.1s 1;
  -o-animation:message-warning 2s ease-in-out 0.1s 1;
  animation:message-warning 2s ease-in-out 0.1s 1;
}

#messenger .message.warning:hover {
  border-color:white;
  color:white;
  background-color:#aa5500;
}

#messenger .message.warning a:hover {
  color:#000;
}

#messenger .message.error {
  border-color:rgb(64, 0, 0);
  color:rgb(64, 0, 0);
  background-color:rgb(128, 128, 128);
  -webkit-animation:message-error 2s ease-in-out 0.1s 1;
  -moz-animation:message-error 2s ease-in-out 0.1s 1;
  -o-animation:message-error 2s ease-in-out 0.1s 1;
  animation:message-error 2s ease-in-out 0.1s 1;
}

#messenger .message.error:hover {
  border-color:white;
  color:white;
  background-color:rgb(64, 0, 0);
}

#messenger .message:before {
  content: " ";
  display: block;
  width: 100%;
  height: 2em;
  position: absolute;
  margin-top: -2em;
  z-index: -1;
  left: 0px;
  right: 0px;
  background-color:rgb(128, 128, 128);
  transition:background-color 0.5s linear;
}

#messenger .message.error:before {
  -webkit-animation:message-error 2s ease-in-out 0.1s 1;
  -moz-animation:message-error 2s ease-in-out 0.1s 1;
  -o-animation:message-error 2s ease-in-out 0.1s 1;
  animation:message-error 2s ease-in-out 0.1s 1;
}

#messenger .message.warning:before {
  -webkit-animation:message-warning 2s ease-in-out 0.1s 1;
  -moz-animation:message-warning 2s ease-in-out 0.1s 1;
  -o-animation:message-warning 2s ease-in-out 0.1s 1;
  animation:message-warning 2s ease-in-out 0.1s 1;
}

#messenger .message.info:before {
  -webkit-animation:message-info 2s ease-in-out 0.1s 1;
  -moz-animation:message-info 2s ease-in-out 0.1s 1;
  -o-animation:message-info 2s ease-in-out 0.1s 1;
  animation:message-info 2s ease-in-out 0.1s 1;
}

#messenger .message.debug:before {
  -webkit-animation:message-debug 2s ease-in-out 0.1s 1;
  -moz-animation:message-debug 2s ease-in-out 0.1s 1;
  -o-animation:message-debug 2s ease-in-out 0.1s 1;
  animation:message-debug 2s ease-in-out 0.1s 1;
}

#messenger .message.error:hover:before {
  background:rgb(64, 0, 0);
}

#messenger .message.warning:hover:before {
  background-color:#aa5500;
}

#messenger .message.info:hover:before {
  background:rgb(0, 64, 0);
}

#messenger .message.debug:hover:before {
  background:rgb(64, 64, 64);
}

#messenger #hide-messages {
  display:none;
  font-size:80%;
  color:#666;
  transition:color 1s ease-in-out;
  padding:0.2em 0em 0.5em 0em;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 0px 10px 3px black;
  border-radius:0px 0px 40px 40px;
  background:black;
}

#messenger:hover #hide-messages {
  color:#fff;
}

#messenger #hide-messages:before {
  content:" ";
  background:black;
  display:block;
  left:0px;
  right:0px;
  height:2em;
  margin-top:-2em;
}

#msg-indicator, #main-nav {
  display: block;
  position: fixed;
  z-index: 9;
  border:none;
  background: none repeat scroll 0 0 rgb(0, 0, 0);
  color:#f80;
  border-radius:0px 0px 20px 0px;
  padding:0.1em 2em 0.1em 1em;
  box-shadow:1px 1px 5px #000;
  -moz-transition:background-color linear 0.5s, color linear 0.5s;
  -webkit-transition:background-color linear 0.5s, color linear 0.5s;
  transition:background-color linear 0.5s, color linear 0.5s;
}

#main-nav {
  border-radius:0px 0px 0px 20px;
  padding:0.1em 1em 0.1em 2em;
  right:0px;
}

#main-nav > * {
  padding:0em 0.2em;
  display:inline-block;
  background:black;
  width:1.5em;
  overflow:hidden;
  white-space:nowrap;
  margin-left:-5px;
  color:#f80;
  text-decoration:none;
  border:none;
  -moz-transition:background-color linear 0.5s, color linear 0.5s, width 0.3s;
  -webkit-transition:background-color linear 0.5s, color linear 0.5s, width 0.3s;
  transition:background-color linear 0.5s, color linear 0.5s, width 0.3s;
}

#main-nav > * > span {
  display:inline-block;
  width:2px;
  overflow:hidden;
  text-align:right;
  margin-left:2em;
  -moz-transition:width 0.3s;
  -webkit-transition:width 0.3s;
  transition:width 0.3s;
  position:relative;
  top:2px;
}

#main-nav > div > span a {
  padding:0em 0.3em;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  color:#f80;
  text-decoration:none;
  border:none;
}

#msg-indicator:hover,
#main-nav a:hover,
#main-nav > div > span a:hover {
  background:rgba(255, 128, 0, 0.9);
  color:#000;
}

#main-nav > a:hover,
#main-nav > div:hover {
  width:9em;
}

#main-nav > a:hover > span,
#main-nav > div:hover > span {
  width:5.5em;
}


/* --- about section --- */
#about-container {
  width:100%;
  position:absolute;
  z-index:7;
  display:none;
}

/* sweet, sweet magic */
#about-container .about-inner-container {
  height:70%;
  background:#181818;
  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;
}

#about-container .about-inner-container .about-info-container {
  width:75%;
  max-width:70em;
  margin:auto;
  display:table;
}

#about-container .about-inner-container h2,
#about-container .about-inner-container p,
#about-container .about-inner-container a {
  text-shadow:-1px -1px black;
}

#about-container .about-inner-container a.iconic {
  display:table;
  border:none;
  height:3em;
}

#about-container .about-inner-container a.iconic > * {
  display:table-cell;
  min-width:3em;
}

#about-container .about-inner-container a.iconic > *:first-child {
  text-align:center;
  padding-right:0.2em;
}

#about-container .about-inner-container a.iconic:visited {
  color:#ddd;
}

#about-container .about-inner-container a.iconic:hover {
  color:#f80;
}

#about-container .about-inner-container a.iconic::before {
  content:none;
}

#about-container .about-inner-container .bio,
#about-container .about-inner-container .contact,
#about-container .about-inner-container .social {
  min-width:180px;
  height:auto;
}

#about-container .about-inner-container a img {
  max-width:3em;
  max-height:2em;
  vertical-align:middle;
}

#about-container .about-inner-container .vcard a img {
  max-width:none;
  max-height:none;
  vertical-align:auto;
  border:solid 1px black;
  border-right:none;
  border-bottom:none;
}

#about-container .about-inner-container .affiliation-container {
  padding:1em 1em 0em 0em;
}

#about-container .about-inner-container .former-affiliation-container {
  padding:1em 0em 0em 0em;
}

#about-container .about-inner-container .affiliation-container {
  float:left;
}

#about-container .about-inner-container .affiliation-container h2,
#about-container .about-inner-container .former-affiliation-container h2 {
  margin-top:0px;
}

#about-container .about-inner-container .former-affiliation-container {
  opacity:0.5;
  display:inline-block;
}

#about-container .about-inner-container a#affiliation-hswaw img {
  height:1.5em;
}

#about-container .about-inner-container a#social-Diaspora img {
  height:2em;
}

#about-container .about-inner-container a#social-Failbook {
  border:none;
}

#about-container .about-inner-container a#social-Failbook::before {
  content:none;
}

#about-container .about-inner-container a#social-Failbook img {
  max-width:180px;
  max-height:none;
  vertical-align:auto;
  border:none;
}

/* --- table of contents --- */
#toc-container {
  z-index:7;
}

#toc-container .toc-inner-container {
  height:70%;
}

#toc-container .toc-inner-container .toc-header-container {
  width:75%;
  height:10%;
  max-width:70em;
  margin:0px auto;
}

#toc-container .toc-inner-container h2 {
  margin:0px auto;
  text-shadow:-1px -1px black;
}

/* languages handling magic */
#toc-container input[type="checkbox"] {
  display:none;
}
#toc-container .langs {
  width: 75%;
  max-width: 70em;
  margin: 0.5em auto 1em auto;
  text-indent:0.3em;
}
#toc-container .langs * {
  text-indent:0em;
}
#toc-container .langs label {
  opacity:0.3;
  cursor:pointer;
  display:inline-block;
  padding:0.3em 0em;
  width:3em;
  font-weight:bold;
  text-align:center;
  background:black;
  color:#f80;
  font-size:80%;
  transition:background-color 0.5s ease-out, color 0.5s ease-out;
}
#toc-container .langs label:hover {
  background:#f80;
  color:black;
}
#toc-container  .toc-data > .toc-entry {
  opacity:0.3;
  transition:opacity 1s ease-out;
}
/* rest of the magic is handled in the toc.phpt template, as it needs to be generated */

#toc-container  .toc-data > .toc-entry .title-langs {
  position:absolute;
  bottom:0.1em;
  font-size:60%;
  color:white;
}

#toc-container  .toc-data > .toc-entry .title-langs > span {
  opacity:0.2;
}

#toc-container  .toc-data > .toc-entry .title-langs > .active {
  opacity:0.4;
  color:#f80;
}

#toc-container .toc-inner-container .toc-data {
  margin:0px auto;
  text-align:center;
  width:75%;
  max-width:70em;
}

#toc-container .toc-inner-container .toc-data .toc-entry {
  text-align:left;
  display:inline-block;
  width:27%;
  min-width:200px;
  height:auto;
  min-height:4em;
  font-size:150%;
  border:none;
  padding:0.2em;
  border-left:solid 1em #dd6600;
  background:#111;
  background-image:-moz-linear-gradient(175deg, #111, #111 40%, #090909 60%, #090909);
  background-image:-webkit-linear-gradient(175deg, #111, #111 40%, #090909 60%, #090909);
  background-image:-o-linear-gradient(175deg, #111, #111 40%, #090909 60%, #090909);
  background-image:linear-gradient(175deg, #111, #111 40%, #090909 60%, #090909);
  margin:1%;
  position:relative;
}

#toc-container .toc-inner-container .toc-data .toc-entry .date {
  display:block;
  float:left;
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  white-space:nowrap;
  overflow:visible;
  position:relative;
  margin-left:-1.5em;
  margin-top:5em;
  width:1px;
  height:1px;
  color:black;
  font-size:80%;
  font-weight:bold;
  text-shadow:-1px 1px #fa4;
}

#toc-container .toc-inner-container .toc-data .toc-entry .title {
  display:block;
  z-index:1;
  position:absolute;
  top:0.1em;
  left:0.3em;
  right:0.2em;
  height:3.5em;
  overflow:hidden;
  text-overflow: ellipsis;
  font-size:90%;
}

#toc-container .toc-inner-container .toc-data .toc-entry .node-id {
  position:absolute;
  width:100%;
  bottom:0px;
  left:0px;
  z-index:0;
  text-align:right;
  color:#dd6600;
  font-size:250%;
  opacity:0.1;
}

/* --- available languages --- */
#container .delimiter .right .nav {
  position:relative;
  left:-2.3em;
  text-align:right;
  font-size:125%;
  width:2.3em;
}

#container .delimiter.starter .right .nav {
  left:-2.4em;
}

#container .delimiter .right .nav > * {
  display:inline-block;
  padding:0.1em 0.3em;
  text-align:center;
  border:none;
  color:black;
  text-shadow:-1px 1px #fa4;
}

#container .delimiter .right .nav a::before {
 content:none;
}

#container .delimiter .right .nav > .prev {
  float:right;
}

#container .delimiter .right .nav a:hover {
  color:white;
}

#container .delimiter .right .nav > span {
  opacity:0;
}

#container .delimiter .fill a {
  text-decoration:none;
  border:none;
  color:#111;
  font-size: 3000%;
  opacity: 0.2;
  text-shadow: -1px -1px #000000, 1px 0px #444;
  -moz-transition:ease 2s opacity, ease 2s color;
  -webkit-transition:ease 2s opacity, ease 2s color;
  -o-transition:ease 2s opacity, ease 2s color;
  transition:ease 2s opacity, ease 2s color;
  display: block;
  line-height: 90%;
  position: absolute;
  text-align: center;
  text-decoration: none;
  text-shadow: -1px -1px #000000, 1px 0 #444444;
  width: 100%;
}

#container .delimiter .fill a::before {
  content:none;
}

#container .delimiter .fill a:hover {
  opacity: 1.0;
  color:#000;
}

#container .nodes-container .node .node-content p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

#container .nodes-container .node .node-content h2 {
  margin-bottom:0px;
}

#container .nodes-container .node .node-content .langs {
  font-size:90%;
  text-align:right;
  padding-right:0.1em;
}

#container .nodes-container .node .node-content .langs a {
  border-bottom:none;
  color:white;
  text-shadow:none;
}

#container .nodes-container .node .node-content .langs a:hover {
  color:#f80;
}

#container .nodes-container .node .node-content .langs span {
  color:white;
  text-shadow:0px 0px 1px #f80;
}

#container .nodes-container .node .node-content .node-message {
  background: rgba(128, 128, 128, 0.2);
  color: #f80;
  text-shadow: none;
  font-size: 80%;
  text-align: center;
  border-left: solid 0.4em #dd6600;
  padding: 0.7em 1.9em 0.5em 1.5em;
  margin: 1em 0em;
}