* { margin: 0; padding: 0; }
html, body { height: 100%; }

html { overflow-y: scroll; font-family: Helvetica, Arial, sans-serif;}


/* <details> */
  summary { cursor: pointer }
  
  details summary::-webkit-details-marker,
  .no-details details > summary::before  { color: #555; }

/* nav */
  nav {
    margin-top: -55px;

    display: inline-block;
        float:left;
        text-align:left;

    width: 170px;  min-height: 100%;
    padding: 0 1em;
    
    background-color: #eee; color: #222;
    border-right: 1px solid #ccc;
  }
    nav .logo { text-align: center; margin: 1em 0; padding-top: 55px; }
    nav ul { list-style-type: none;}
    nav a { display: block; padding: 0.25em 0; color: #555; text-decoration:none; font-size:14px;}
      nav a:hover { ; text-decoration:underline; }
    nav details { margin: 0.5em 0; font-size:14px;}
    nav summary { margin-bottom: 0.25em;}
    nav ul ul { padding-left: 1em;}

  article { display: inline-block; vertical-align: top;}


  /* "Borders" between submenus */
  /* http://www.colorzilla.com/gradient-editor/ */
  nav .divider
  {
    display: block; content: ' '; width: 100%; height: 1px; margin-bottom: 0.5em;
    background: -moz-linear-gradient(left,  rgba(181,181,181,0) 0%, rgba(181,181,181,1) 25%, rgba(181,181,181,1) 75%, rgba(181,181,181,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(181,181,181,0)), color-stop(25%,rgba(181,181,181,1)), color-stop(75%,rgba(181,181,181,1)), color-stop(100%,rgba(181,181,181,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(181,181,181,0) 0%,rgba(181,181,181,1) 25%,rgba(181,181,181,1) 75%,rgba(181,181,181,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(181,181,181,0) 0%,rgba(181,181,181,1) 25%,rgba(181,181,181,1) 75%,rgba(181,181,181,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(181,181,181,0) 0%,rgba(181,181,181,1) 25%,rgba(181,181,181,1) 75%,rgba(181,181,181,0) 100%); /* IE10+ */
    background: linear-gradient(left,  rgba(181,181,181,0) 0%,rgba(181,181,181,1) 25%,rgba(181,181,181,1) 75%,rgba(181,181,181,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b5b5b5', endColorstr='#00b5b5b5',GradientType=1 ); /* IE6-9 */
    margin-top: 5px;
  }

    /* Hide WebKit arrow */
details > summary::-webkit-details-marker { display: none; }

/* Add our closed arrow */
details > summary::before
{
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    background-image:url("sidebar/right_arrow.png");
}

/* Add our open arrow */
details[open] > summary::before, /* Native */
details.open > summary::before /* Polyfill */
{
    content: '';
    display: inline-block;
    width: 16px;
    height: 14px;
    background-image: url("sidebar/down_arrow.png");
}