@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

body {
  position: relative;
  padding-top: 50px;
  padding-bottom: 20px;

  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff
}

#content ul {
  padding: 0 0 0 18px;
}
  #content ul li {
    list-style: square;
    margin: .36em 0;
  }

/* navbar
--------------------------------------------------------------------------- */
.navbar {
  border: none;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
  .nav>li>a {
    display: inline-block;
    font-size: 1em;
    padding-left: 9px;
    padding-right: 9px;
  }
    .nav>li>a:hover {
      background-color: #fff;
    }
  .nav .caret {
    cursor: pointer;
  }

#logo img {
  height: 40px;
  margin-top: 4px;
}

#github-logo {
    max-width: 16px;
    position: relative;
    top: -3px;
}

@media print {
  .breadcrumb {
    display: none;
  }
}

/* search
--------------------------------------------------------------------------- */
.cse .gsc-search-button input.gsc-search-button-v2,
input.gsc-search-button-v2 {
    height: 26px !important;
    margin-top: 0 !important;
    min-width: 13px !important;
    padding: 5px 26px !important;
    width: 68px !important;
}

/* footer
--------------------------------------------------------------------------- */
.footer {
  padding-top: 16px;
  color: #777;
  font-size: 90%;
  text-align: center;
}
  .footer p {
    margin: 0px;
  }

/* main styles
--------------------------------------------------------------------------- */
body {
  background: #e6eaec url(tile.png);
}
  .page-wrapper {
    max-width: 850px;
    margin: 0 auto;
  }
  .container {
    max-width: 800px;
  }
  .main {
    background-color: #fefefe;
    padding: 15px;

    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

.page-header {
  margin: 15px 0 0;
  padding: 1px 55px 15px;
  background-color: #3e4549;
  border: none;

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
  .page-header h1, .page-header h2 {
    color: #fefefe;
    font-weight: 300;
    margin-bottom: 0;
  }
  .page-header h1 { font-size: 1.6em; }
  .page-header h2 {
    margin-top: .6em;
    font-size: 1em;
    letter-spacing: .4px;
  }


/* sidenav
--------------------------------------------------------------------------- */
.noleftpadding {
  padding-left: 0 !important;
}

.sidenav {
  padding: 0;
}
  .sidenav li {
    list-style: none;
  }
  .sidenav li:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    }
  .sidenav li a {
    display: block;
    padding: 5px 8px 6px 20px;
    color: #3e5569;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    }
    .sidenav li a span { /* this is the count */
      font-size: 10px;
      color: #888;
      background-color: #e6e6e6;
      padding: 2px 6px;
      margin-left: 8px;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      }
  .sidenav li a:hover {
    color: #1e3559;
    text-decoration: none;
    background: rgba(0,0,0,.03);
    }

  .sidenav li.active a, .sidenav li.active a:hover {
    background-color: #3e4549;
    color: #eee;
    }
    .sidenav li.active a span {
      color: #bbb;
      background-color: #5e6569;
      }


/* widgets (on docs/ and about/ index pages)
--------------------------------------------------------------------------- */
.widget {
  display: block;
  width: 100%;
  margin-top: 1em;
  border-top: 3px solid #2790ae;
  color: #333;
  padding: .7em 1em;
}
  .widget:hover, .widget:active {
    border-top: 3px solid #3e5569;
    text-decoration: none;
    color: #222;
    background-color: #f7f8f9;

    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .widget h3 {
    margin-top: .4em;
    color: #2790ae;
  }
    .widget:hover h3 {
      color: #3e8599;
    }


/* slats (for examples)
--------------------------------------------------------------------------- */
ol.slats {
  padding: 0;
  margin: 2em -31px 0 0;
}
  ol.slats li {
    list-style: none;
    clear: both;
  }
    ol.slats a {
      display: block;
      width: 100%;
      color: #111;
    }
      ol.slats a:hover, ol.slats a:active {
        text-decoration: none;
        }
      ol.slats li a .thumbwrapper {
        text-align: center;
        float: right;
        width: 130px;
        height: 60px;
        margin-right: 15px;
        }
      ol.slats li a .thumbwrapper img {
        max-width: 130px;
        max-height: 60px;
      }
      ol.slats li a h3 {
        color: #1e6579; /* #2790ae */
        margin-bottom: 0;
        margin-right: 160px;
        font-weight: 600;
        line-height: 1.45em;
      }
      ol.slats li a p {
        margin: .4em 160px .4em 0;
        color: #333; /* #555 */
      }
        ol.slats li a:hover p {
          color: #333;
        }
      ol.slats li a p span.tags {
        display: block;
        color: #777;
      }
      ol.slats li a p span.tags .tag {
        color: #777;
        font-size: 10px;
      }

ol.examples.slats {
}
    ol.examples.slats a {
      border-right: 1px solid transparent;
      opacity: 0.95;
      filter: alpha(opacity=95); /* For IE8 and earlier */
      padding-bottom: .5em;
    }
      ol.examples.slats a:hover, ol.examples.slats a:active {
        border-color: #bbb;
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
        }
        ol.examples.slats li a:hover h3 {
          /*color: #2e7589;*/
        }

ol.guide.slats {
}
  ol.guide.slats li a span {
    font-size: 40px;
    float: left;
    width: 50px;
    text-align: right;
    margin-right: 20px;
    position: relative;
    top: -10px;
    color: #555;
  }
ol.guide.slats {
}
    ol.guide.slats a {
      opacity: 0.95;
      filter: alpha(opacity=95); /* For IE8 and earlier */
    }
      ol.guide.slats a:hover, ol.guide.slats a:active {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
        }
        ol.guide.slats li a h3, ol.guide.slats li a p {
          margin-left: 50px;
        }


ol.news.slats {
  margin: 0;
}
  ol.news.slats li a h3 span.date, ol.news.slats li a h3 span.sep {
    color: #777;
    font-weight: normal;
  }
    ol.news.slats li a h3, ol.news.slats li a p {
      margin-left: 0;
      margin-right: 0;
    }
    ol.news.slats a h3 {
      color: #2790ae;
    }
    ol.news.slats a:hover h3, ol.news.slats a:active h3 {
      color: #2e7589;
    }
    ol.news.slats a p {
      color: #555;
    }
    ol.news.slats a:hover p, ol.news.slats a:active p {
      color: #333;
    }


/* examples and guide components
--------------------------------------------------------------------------- */
.pull-left-15px { /* to make the title align with the sidenav */
  /*margin-left: -15px;*/
}
.sep {
  padding: 0 10px;
  color: #bbb;
}
.sep-sm {
  padding: 0 6px;
  color: #bbb;
}
.page-header a {
  color: #b5d5e5;
}
  .page-header a:hover {
    color: #cfe8f8;
    text-decoration: none;
  }
.page-header h2 span {
  float: right; /* download & github links for examples */
}
  .page-header h2 span span {
    float: none;
  }

  .page-header span.chapter_number { /* for the Guide chapter numbers */
    font-size: 45px;
    float: left;
    text-align: right;
    margin-right: 20px;
    position: relative;
    top: 5px;
    color: #ededed;
  }

/* Overwriting bootstrap css*/
code {
  /*padding: 2px 4px;*/
  padding: 0px 0px;
  font-size: 90%;
  /*color: #c7254e;*/
  color: black;
  /*background-color: #f9f2f4;*/
  background-color: white;
  white-space: nowrap;
  /*border-radius: 4px;*/
  border-radius: none;
}

h1 code, h2 code, h3 code, h4 code {
  color: inherit;
}
ol.examples h3 code {
  background-color: #eee;
}
.page-header h1 code {
  background-color: #4e5559;
}

.figure {
  margin: 2.5em auto 1.8em;
  display: block;
}

blockquote {
  margin: 0;
  padding: 10px 15px;
  font-size: inherit;
  border-left: 4px solid #686868;
}

.mcode-error {
  color: #900;
  }
.mcode-input { padding:10px;
  border:1px solid #d3d3d3;
  background:#f7f7f7;
  }
.mcode-output {
  padding:10px 11px;
  border:none;
  margin:0px 0px 20px;
  color:#666;
  font-style: italic;
  }

#content h3 {
  font-weight: 600;
}

#content.example ol:last-of-type {
    counter-reset: list;
    margin: 0 0 1em;
}
#content.example ol:last-of-type > li {
    list-style: none;
    position: relative;
}
#content.example ol:last-of-type > li:before {
    counter-increment: list;
    content: "[" counter(list, decimal) "]";
    position: absolute;
    left: -2em;
}

/* function reference
--------------------------------------------------------------------------- */
.helptext pre {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: inherit;
}

.sectiontitle {
  font-size: 1.17em;
  font-weight: 600;
  margin: 1.3em 0 1em;
  border-bottom: 1px solid #666;
}
.helptopic {
  font-weight:bold;
}
.footerlinktitle {
  font-size: 1.17em;
  font-weight: 600;
  margin: 1em 0 .4em;
}
.footerlink {
  margin: 0 0 1em 1em;
}
  .footerlink a {
    font-family: monospace;
  }
.class-details {
}
  .class-detail-label {
    font-weight: 600;
    padding: 3px 20px 3px 15px;
  }
.summary-list .m-help {
}
  .summary-list .summary-item {
  }
    .summary-list .summary-item .name  {
      font-family: monospace;
      font-weight: 600;
      padding: 3px 15px;
    }
    .summary-list .summary-item .m-help {
      width: 95%;
    }
    .summary-list .summary-item .attributes {
    }



/* news-related
--------------------------------------------------------------------------- */
.read-more {
  margin-left: .8em;
  display: inline-block;
  float: right;
  color: #2790ae;
}
  a:hover .read-more {
    text-decoration: underline;
  }


/* thumbnail gallery (for about/people.html)
--------------------------------------------------------------------------- */
.chebpeople {
  margin-bottom: 2em;
  font-size: .9em;
}
.thumbnail.profile {
  width: 100%;
}


/* videos
--------------------------------------------------------------------------- */
/* from <http://amobil.se/2011/11/responsive-embeds/> */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16/9 ratio */
  padding-top: 30px;      /* IE6 workaround*/
  height: 0;
  overflow: hidden;
  margin-bottom: 35px;
}
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }


/* other pages
--------------------------------------------------------------------------- */
form.subscribe {
  text-align: center;
}
  form.subscribe div {
    width: 60%;
  }

.faq .panel-title {
  font-size: 1em;
}

/* homepage
--------------------------------------------------------------------------- */
.homepage .page-header h1 {
  text-align: center;
}
  .homepage .page-header h1 span {
    color: #ccc;
  }

.homepage .description {
}
  .homepage .description p {
    font-size: 15px;
    font-weight: 400;
    margin: .4em 15px 1.7em;
  }
.homepage .links {
  text-align: center;
  padding: 0 0 .8em;
}
  .homepage .links a {
    font-size: 14px;
    letter-spacing: 1px;
    padding: .6em .9em;
    background-color: #ecf6ff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  .homepage .links a.download {
    color: #090;
    background-color: #dffddf;
  }
    .homepage .links a.download:hover {
      color: #006b00;
    }

.flexslider {
  /*-webkit-box-shadow: none;*/
  /*-moz-box-shadow: none;*/
  /*box-shadow: none;*/
}
.flexslider .slides li {
  vertical-align: middle;
}
.flexslider .codewrap, .flexslider .imagewrap {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  margin: 0;
  padding: 0;
}
.flexslider .codewrap {
  background-color: #2e3539;
}
  .flexslider pre.code {
    background: transparent;
    border: none;
    color: #eee;
    text-shadow: 1px 1px #555;
    margin: 0;
  }
    .flexslider pre.code .comment {
      color: #5d6;
    }
.flexslider .imagewrap {
  /*background-color: #fefefe;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  height: 100%;*/
}


.main.detached {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
  .main.detached h2 {
    margin: .2em 0;
  }
  .main.detached ol.news.slats li a p.oneline {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .main.detached .widgets {
    margin: 1.2em -7.5px 0;
  }
    .main.detached .widgets .col {
      padding: 0 7.5px;
    }
      .main.detached .widgets .col .widget {
        /*margin-top: 0;*/
      }
.main.detached.alert {
  background-color: #dffddf;
}