/* -------- GENERAL STYLE ADJUSTMENTS -------- */
html {
  height: 100%; }

body {
  height: 100%;
  font-family: 'Noto Sans', sans-serif;
  line-height: 1.75em;
  background-color: #fff;
  color: #222; }

hr {
  color: #0088B4; }

ul {
  line-height: 1.5em; }

ul.disc {
  list-style-type: disc; }

ul.circle {
  list-style-type: circle; }

ul.square {
  /*  list-style-type: square;*/
  list-style-image: url(../img/bullet_02.gif); }

ul.none {
  list-style-type: none; }

/* -------- PAGE STYLE ADJUSTMENTS ----------- */
.inset {
  padding-left: 40px;
  padding-right: 40px; }

/* default toggle button display state */
#menuToggle {
  display: none;
  height: 0px; }

.menuBtn {
  background: url("../img/menu-icon.png") center center no-repeat;
  width: 40px;
  border: 0px;
  outline: 0px solid; }

.upCap {
  font-variant: small-caps;
  font-weight: 600; }

.underline2 {
  border-bottom: 2px solid #0088B4; }

.underline3 {
  border-bottom: 3px solid #0088B4; }

.banner {
  background: url("/app/img/background.jpg") repeat;
  max-width: 512px;
  margin-left: 20px; }

/* -------- MEDIA QUERY STYLES --------------- */
@media (max-width: 767px) {
  #contentWrapper {
    margin-left: 0; }
    #contentWrapper.active {
      margin-left: 300px; }

  #sidebar {
    left: 0; }
    #sidebar.active {
      left: 300px; }

  #menuToggle {
    display: inline-block;
    outline: 0px solid;
    height: 40px; } }
@media (min-height: 480px) {
  #sidebarFooter {
    position: absolute; } }
/*
 * Afix (not used)
 * --------------------------------------------------
 */
@media (min-width: 767px) {
  #sidebar.affix-top {
    position: static;
    width: 100px; }
  #sidebar.affix {
    position: fixed;
    top: 40px;
    width: 100px; } }
.post {
  background: url("../img/divider-post.png") right bottom no-repeat;
  background-size: contain;
  padding-bottom: 30px; }

.drop {
  -moz-filter: drop-shadow(12px 12px 8px gray);
  -webkit-filter: drop-shadow(12px 12px 8px gray);
  -o-filter: drop-shadow(12px 12px 8px gray);
  -ms-filter: drop-shadow(12px 12px 8px gray);
  filter: drop-shadow(12px 12px 8px gray); }

.limit200 {
  max-height: 200px; }

/* -------- CODE FORMATTING STYLES ----------- */
code {
  position: relative;
  display: block; }

pre {
  width: 85%;
  display: inline-block;
  margin: 0 30px 30px;
  padding: 20px;
  font-family: monospace;
  font-size: 16px;
  line-height: 22px;
  white-space: pre;
  color: #000;
  background: #ddd; }

/* -------- MAIN CONTENT STYLES -------------- */
#bodyWrapper {
  padding-bottom: 100px;
  /* matched to #contentFooter height */
  height: 100%; }

#contentWrapper {
  position: relative;
  margin-left: 300px;
  border-left: 1px solid #ddd;
  min-height: 100%; }

.contentHeader {
  position: relative; }
  .contentHeader h1 {
    margin: 0;
    margin-left: 20px;
    line-height: 40px;
    display: inline-block; }

.contentFooter {
  position: relative;
  margin-left: 300px;
  font-size: 12px;
  text-align: right;
  height: 100px;
  /* matched to #bodyWrapper height */
  border-left: 1px solid #ddd; }

.content {
  position: relative; }

.slideInset {
  margin: 6px -40px; }

footer {
  bottom: 0px;
  /*	background: url('../img/pattern-c.png') top left -20px no-repeat;
  	background-size: contain; */ }

.top-offset-1 {
  padding-top: 100px; }

.top-offset-2 {
  padding-top: 200px; }

.contentHeader {
  position: relative; }
  .contentHeader h1 {
    margin: 0;
    margin-left: 20px;
    line-height: 40px;
    display: inline-block; }

/* -------- NAVIGATION STYLES ---------------- */
.navGroup {
  position: relative; }
  .navGroup > ul {
    margin: 0px;
    padding: 0px; }

.navGroupItem {
  position: relative;
  display: block;
  padding: 5px 15px;
  margin-bottom: -1px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  width: 220px; }
  .navGroupItem:last-child {
    margin-bottom: 0; }
  .navGroupItem > .badge {
    float: right; }
    .navGroupItem > .badge + .badge {
      margin-right: 5px; }

li.navGroupItem {
  color: #222;
  outline: 0px solid;
  text-decoration: none; }
  li.navGroupItem a {
    color: #222;
    outline: 0px solid;
    text-decoration: none; }
  li.navGroupItem:hover, li.navGroupItem:focus {
    /*	border-right: 1px solid #00f;
    /* Need to provide an indicator symbol */
    background-size: contain; }
  li.navGroupItem.active {
    z-index: 2;
    border-color: #44c; }
    li.navGroupItem.active:hover, li.navGroupItem.active:focus {
      z-index: 2;
      border-color: #44c; }

/* -------- TOC STYLES ----------------------- */
.pgToc {
  /*	position: relative; */ }
  .pgToc ul {
    padding: 0px; }
    .pgToc ul a {
      font-size: 12px; }
      .pgToc ul a:hover, .pgToc ul a:focus {
        outline: 0px solid; }
    .pgToc ul li {
      list-style: none;
      margin: 0px; }
      .pgToc ul li:hover, .pgToc ul li:focus {
        border-right: 2px solid #00f; }
    .pgToc ul .pgToc-h2 {
      padding-left: 10px; }
    .pgToc ul .pgToc-h3 {
      padding-left: 20px; }
    .pgToc ul .pgToc-h4 {
      padding-left: 30px; }
    .pgToc ul .pgToc-h5 {
      padding-left: 40px; }

.pgToc-active {
  border-right: 1px solid #00f;
  color: #f0f; }

.transition {
  -webkit-transition: left 1s ease-in-out;
  -moz-transition: left 1s ease-in-out;
  -o-transition: left 1s ease-in-out;
  transition: left 1s ease-in-out; }

/* -------- SIDEBAR AND NAV STYLES ----------- */
#sidebar {
  margin-left: -300px;
  left: 300px;
  width: 300px;
  position: fixed;
  background: url("../img/noise-pattern.png") top left repeat;
  line-height: 1.25em;
  top: 0;
  bottom: 0; }

#sidebarHeader {
  position: relative;
  margin-top: 150px;
  font-family: 'Noto Serif', serif;
  font-variant: small-caps;
  font-size: 26px;
  text-align: center; }
  #sidebarHeader a {
    color: #222;
    outline: 0px solid;
    text-decoration: none; }

#sidebarFooter {
  height: 80px;
  width: 300px;
  font-family: 'Noto Serif', serif;
  font-size: 12px;
  line-height: 0.85em;
  text-align: center; }
  #sidebarFooter a {
    color: #22d; }
    #sidebarFooter a:hover, #sidebarFooter a:focus {
      color: #00f;
      text-decoration: underline; }

.divider {
  left: 0px;
  width: 300px;
  height: 40px;
  background: url("../img/divider.png") center center no-repeat;
  background-size: 40% 90%; }

.subtitle {
  font-size: 0.5em; }