body, td, a, p {
  font-family: Lucida Grande, Lucida Sans, arial, sans-serif;
  font-size: 11pt;
}

body {
  margin: 0;
  padding: 0;
}

img {
  border: none;
}

.clear {
  clear: both;
}

ul {
  	list-style-position: inside;
}

li {
  margin-left: 1.5em;
  padding-bottom: .5em;
}

li > p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

h1 {
/*  font-variant: small-caps;*/
  border-bottom: 1px solid gray;
/*  background: #EEE; */
  padding: .25em;
  padding-left: 0px;
  margin-left: 0px;
  text-shadow: #999 1px 1px 1px;
}

h2 {
  margin-top: 2em;
  background: #FEFEEB;
  padding: .25em;
  border: 1px solid #CCC;
  text-shadow: #999 1px 1px 1px;
}

pre {
  background-color: #f4f4FF;
  border: 1px solid gray;
  padding: .5em 1em;
  overflow: auto;
  
  font-family: Inconsolata,
               Consolas,
               "Andale Mono",
               "Lucida Console",
               "Lucida Sans Typewriter",
               "DejaVu Sans Mono",
               "Bitstream Vera Sans Mono",
               "Liberation Mono",
               "Nimbus Mono L",
               Monaco,
               "Courier New",
               Courier,
               monospace;
}

pre.sh_html {
  background-color: #FFFADE;
}

code {
  background-color: #F4F4FF;
  font-size: 12pt;
}

/* cheatsheet */
table.cheatsheet {
  border-style: outset;
  border-collapse: collapse;
  font-size: 10pt;

  code {
    background-color: #EEEEFF;
  }

  i {
    font-size: 11pt;
  }

  th {
    background-color: #EDEDED;
  }

  tr {
  }

  td, th {
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    padding: .5em;
    font-size: 10pt;
  }

  td {
    vertical-align: top;
  }
}

.separator {
  margin-right: 10px;
  font-size: 36pt;
}

/* top */

div.top {
    background-color: #FEFDCD;
/*  background-color: #FDF909;
*/  text-align: bottom;
  margin: 0;
  padding: 8px 8px 4px;
  
  .logo {
    margin: 2px auto;
    img {
      opacity: 0.6;
    }
  }
}


/* navbar */
div.navbar {
  width: 100%;
  margin: 0 0 2px;
  padding: 8px 0px 11px; /* no idea why, but this centers the buttons*/
  overflow-vertical: auto;
  text-align: left;
  
  background-color: #A3D3D1;  
  border-top: 1px solid #6881BA;
  border-bottom: 1px solid #6881BA;

  h3 {
    margin-bottom: .25em;
  }

  ul {
    list-style-type: none;
    display: inline;
    margin: -1px 0px 0px;
    padding: 8px 0px;
    list-style-type: none;
  }

  li.clickable {
    display: inline;
    color: #ccdcea;
    background-color: #3470a2;
    list-style-type: none;

    margin: 8px;
    padding: 4px 6px;

  /*  font-variant: small-caps;*/
    border: 2px solid #6881BA;

    a, a:visited {
      text-decoration: none;
      /*font-weight: bold;*/
      color: white;
      margin: 0;
      font-size: 10pt;
    }
  }

  li.clickable:hover {
    background-color: blue; 
    cursor: pointer; cursor: hand;
  }
  
  li.clickable.current {
    font-weight: bold;
    border: 2px solid black;
    background-color: #3875D7;
    a {
      color: white;
    }    
  }
  
}

/* main */

.main {
    margin: 0 auto;
}

.footer {
  font-size: 10pt;
  border-top: 1px solid black;
  padding: 1em;
}

.body {
    max-width: 60em;
    margin-left: 100px;
    margin-right: 100px;    
}

.body a {
  color: #6881BA;
  text-decoration: none;
  border-bottom: 1px dotted;
}

.main h1.title {
    margin: 0 200px;
    text-align: center;
}

/* article */
div.toc {
  margin: 1em .25em;
  display: inline-block;    
  border: 1px solid black;    
  h2 {
    margin: 0;
  }
  ul,ol {
    padding: .25em 1em;
  }
}

.promo_wrapper {
  float:right;
}

div.promo_wrapper {
  text-align: center;
  margin: 4px;
  padding: 4px;
}
div.promo {
  display: inline-block;
  border: 2px solid #6881BA;
  text-align: center;
  background: white;

  img {
    border: 2px solid black;
    margin: 2px;
  }
  p {
    padding: .25em .5em;
  }
}

/* example */
div.example {
  position: relative; 
  border: 2px solid darkblue;
  margin: 1em;
  padding: .5em;
  
  .before, .after {
    margin: 1em;
    text-align: top;
    vertical-align: top;
    
    pre {
      margin: 0;
      width: 100%;
    }
  }
}
