/* General font styling */
body {
  font-family: "Source Sans Pro";
  font-size: 14px;
  color: #333;
  padding: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Source Sans Pro";
}
h1:first-child, h2:first-child {
  margin-top: 0;
}
h1 {
  font-size: 44px;
}
code, tt {
  font-family: 'Source Code Pro', 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace;
}
th {
  font-weight: 600;
}
/* Override default red code from Bootstrap */
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
/* No gray background for code in headers */
h1 > code, h2 > code, h3 > code, h4 > code, h5 > code, h6 > code {
  background-color: inherit;
}

pre {
  border: none;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-radius: 0;
  box-shadow: 5px 5px 0 #DDD;
  margin-bottom: 16px;
}


/* Utility classes */
.fullwidth {
  width: 100%;
}
.punchup {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.constrain-image-width img {
  max-width: 100%;
}

.img-thumbnail {
  border-radius: 0;
}

/* Global layout */
.header, header {
  background-image: url(/images/texturebg.png);
}
.header, .navbar, header a {
  background-color: #428bca;
  color: white;
  margin-bottom: 48px;
  height: 50px;
  border-radius: 0 !important;
  border: none;
}
@media (max-width: 991px) {
  .header {
    margin-bottom: 12px;
  }
}
.brand, .navbar-brand {
  font-size: 30px;
}
.brand {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 2px;
  padding-bottom: 4px;
}
.brand #credits {
  font-weight: 200;
  font-size: 14px;
}
.brand a, a.navbar-brand {
  color: white;
  text-decoration: none;
}
.brand .search {
  margin-top: 8px;
}
#st-search-input {
  width: 150px;
  border-radius: 16px;
}
.content {
  max-width: 1000px;
}
.footer {
  margin-top: 64px;
}
.footer-inner {
  max-width: 970px;
  margin: 0 auto;
  padding-top: 36px;
  padding-bottom: 36px;
  text-align: center;
}

@media print {
  .header {
    display: none;
  }
  .nav.nav-primary {
    display: none;
  }
}
/* Nav layout */
.nav.nav-primary {
  margin-top: 26px;
  font-size: 13px;
  color: #848484;
}
.nav.nav-primary li {
  position: relative;
  left: -6px;
  margin-bottom: 18px;
  border-radius: 1.5px;
}
.nav.nav-primary li a {
  padding: 1px 6px 1px 6px;
  text-decoration: none;
}
.nav.nav-primary li.active a {
  background-color: #428bca;
  color: #FFF;
}
@media (max-width: 991px) {
  .nav.nav-primary li {
    display: inline;
    padding-right: 16px;
    white-space: nowrap
  }
  .nav.nav-primary {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 12px;
  }
}

/* Shared styles */
.metadata {
  color: #848484;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-bottom: 24px;
}
.metadata span {
  margin-right: 24px;
  white-space: nowrap;
}
@media print {
  .pagination {
    display: none;
  }
}
.pagination > li > a {
  border: none;
  padding: 3px 9px;
  margin: 0 1px;
  border-radius: 1.5px;
}
.pagination > li.active > a {
  color: white;
  background-color: #428bca;
  font-weight: 600;
}

/* Specific styles */
.article-action {
  margin-bottom: 12px;
}
.article-action a.btn {
  font-size: 12px;
}

.article-group {
  line-height: 1.25;
}
.article-group h3 {
  margin-bottom: 3px;
}
.article-group-desc {
  margin-bottom: 9px;
}
.tutorial-lesson-number {
  font-size: 20px;
}
.tutorial h1 {
  margin-top: 0;
}
.tutorial h2 {
  margin-top: 24px;
}
.tutorial h4 {
  margin-top: 16px;
  font-weight: 600;
}
.tutorial table {
  margin-bottom: 10px;
}

.answer-content {
  display: none;
}
@media print {
  .answer-content {
    display: block;
  }
  .answer-toggle {
    display: none;
  }
}

.gallery-app-item {
  margin-bottom: 16px;
}
.gallery-app-thumbnail-text {
  margin-top: 3px;
}
.shiny-app-frame {
  position: fixed;
  left: 0;
  top: 50px;
  bottom: 0;
  right: 0;
}
.shiny-app-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.swiftype-hidden-content {
  display: none;
}
.header.app .brand {
  display: inline-block;
  width: 300px;
  margin: 0 0 0 20px;
}
.header.app .dropdown {
  display: inline-block;
}

/* Font styling for code highlighting with pygments*/
.hll { background-color: #ffffcc }
.c { color: #408080; font-style: italic } /* Comment */
.err { border: 1px solid #FF0000 } /* Error */
.k { color: #008000; font-weight: bold } /* Keyword */
/*.o { color: #408080 } /* Operator */
.ch { color: #408080; font-style: italic } /* Comment.Hashbang */
.cm { color: #408080; font-style: italic } /* Comment.Multiline */
.cp { color: #BC7A00 } /* Comment.Preproc */
.cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
.c1 { color: #408080; font-style: italic } /* Comment.Single */
.cs { color: #408080; font-style: italic } /* Comment.Special */
.gd { color: #A00000 } /* Generic.Deleted */
.ge { font-style: italic } /* Generic.Emph */
.gr { color: #FF0000 } /* Generic.Error */
.gh { color: #000080; font-weight: bold } /* Generic.Heading */
.gi { color: #00A000 } /* Generic.Inserted */
.go { color: #888888 } /* Generic.Output */
.gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.gs { font-weight: bold } /* Generic.Strong */
.gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.gt { color: #0044DD } /* Generic.Traceback */
.kc { color: #008000 } /* Keyword.Constant */
.kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.kp { color: #008000 } /* Keyword.Pseudo */
.kr { color: #008000 } /* Keyword.Reserved */
.kt { color: #B00040 } /* Keyword.Type */
.m { color: #666666 } /* Literal.Number */
/*.s { color: #BA2121 } /* Literal.String */
.na { color: #7D9029 } /* Name.Attribute */
/*.nb { color: #008000 } /* Name.Builtin */
.nc { color: #0000FF; font-weight: bold } /* Name.Class */
.no { color: #880000 } /* Name.Constant */
.nd { color: #AA22FF } /* Name.Decorator */
.ni { color: #999999; font-weight: bold } /* Name.Entity */
.ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.nf { color: #0000FF } /* Name.Function */
.nl { color: #A0A000 } /* Name.Label */
.nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.nt { color: #008000; font-weight: bold } /* Name.Tag */
.nv { color: #19177C } /* Name.Variable */
.ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.w { color: #bbbbbb } /* Text.Whitespace */
.mb { color: #666666 } /* Literal.Number.Bin */
.mf { color: #666666 } /* Literal.Number.Float */
.mh { color: #666666 } /* Literal.Number.Hex */
.mi { color: #666666 } /* Literal.Number.Integer */
.mo { color: #666666 } /* Literal.Number.Oct */
.sb { color: #B56247; font-weight: 500; } /* Literal.String.Backtick */
.sc { color: #BA2121 } /* Literal.String.Char */
.sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.s2 { color: #BA2121 } /* Literal.String.Double */
.se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.sh { color: #BA2121 } /* Literal.String.Heredoc */
.si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.sx { color: #008000 } /* Literal.String.Other */
.sr { color: #BB6688 } /* Literal.String.Regex */
.s1 { color: #BA2121 } /* Literal.String.Single */
.ss { color: #19177C } /* Literal.String.Symbol */
.bp { color: #008000 } /* Name.Builtin.Pseudo */
.vc { color: #19177C } /* Name.Variable.Class */
.vg { color: #19177C } /* Name.Variable.Global */
.vi { color: #19177C } /* Name.Variable.Instance */
.il { color: #666666 } /* Literal.Number.Integer.Long */


pre .operator,
pre .paren {
  color: rgb(104, 118, 135)
}

pre .literal {
  color: rgb(88, 72, 246)
}

pre .number {
  color: rgb(0, 0, 205);
}

pre .comment {
  color: rgb(76, 136, 107);
}

pre .keyword {
  color: rgb(0, 0, 255);
}

pre .identifier {
  color: rgb(0, 0, 0);
}

pre .string {
  color: rgb(3, 106, 7);
}

img.example-screenshot {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* Iframe styling */
iframe.scale65 {
  width: 154%;
  border: #ddd 8px solid;
  overflow: hidden;
  position: relative;
  -ms-zoom: 0.65;
  -moz-transform: scale(0.65);
  -moz-transform-origin: 0px 0;
  -o-transform: scale(0.65);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.65);
  -webkit-transform-origin: 0 0;
}

iframe.scale80 {
  width: 125%;
  border: #ddd 8px solid;
  overflow: hidden;
  position: relative;
  -ms-zoom: 0.80;
  -moz-transform: scale(0.80);
  -moz-transform-origin: 0px 0;
  -o-transform: scale(0.80);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.80);
  -webkit-transform-origin: 0 0;
}

/* Posts */

.post img {
  border: 1px solid #ddd;
  box-shadow: 1px 2px 20px -5px rgba(0, 0, 0, 0.25);
}

/* Embedded Vimeo videos */

.embedded-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

iframe.embedded-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
}

/* Three column layout for tutorial video pieces */
/* From http://stackoverflow.com/questions/20566660/3-column-layout-html-css */

.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.container div {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  text-align: left;
}

.column_center {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}