@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 400;
  src: url('webchurch/online/fonts/inconsolata-regular.eot'); /* IE9 Compat Modes */
  src: local('Inconsolata'),
       url('webchurch/online/fonts/inconsolata-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webchurch/online/fonts/inconsolata-regular.woff') format('woff'), /* Modern Browsers */
       url('webchurch/online/fonts/inconsolata-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webchurch/online/fonts/inconsolata-regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
}

/* crimson-text-regular */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/crimson-text-regular.eot'); /* IE9 Compat Modes */
  src: local('Crimson Text'), local('CrimsonText-Roman'),
       url('fonts/crimson-text-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/crimson-text-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/crimson-text-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/crimson-text-regular.svg#CrimsonText') format('svg'); /* Legacy iOS */
}
/* crimson-text-italic */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/crimson-text-italic.eot'); /* IE9 Compat Modes */
  src: local('Crimson Text Italic'), local('CrimsonText-Italic'),
       url('fonts/crimson-text-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/crimson-text-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/crimson-text-italic.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/crimson-text-italic.svg#CrimsonText') format('svg'); /* Legacy iOS */
}
/* crimson-text-700 */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/crimson-text-700.eot'); /* IE9 Compat Modes */
  src: local('Crimson Text Bold'), local('CrimsonText-Bold'),
       url('fonts/crimson-text-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/crimson-text-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/crimson-text-700.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/crimson-text-700.svg#CrimsonText') format('svg'); /* Legacy iOS */
}
/* crimson-text-700italic */
@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/crimson-text-700italic.eot'); /* IE9 Compat Modes */
  src: local('Crimson Text Bold Italic'), local('CrimsonText-BoldItalic'),
       url('fonts/crimson-text-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/crimson-text-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/crimson-text-700italic.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/crimson-text-700italic.svg#CrimsonText') format('svg'); /* Legacy iOS */
}

html {
    padding: 0;
    margin: 0;
    background-color: #616161;
    background: url(images/grey_wash_wall.png);
}

body {
    padding: 0;
    margin: 0;
    font-family: Crimson Text, Crimson, Georgia;
}

#header {
    background-color: #4ECC77;
    width: 52em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-left: 2em;
    padding-right: 1em;
    color: white;
    border-bottom: 1px solid #666;
}

.headroom {
    z-index: 99999999;
}

.headroom--top {
    transform: none !important;
    -webkit-transform: none !important;
}

.headroom--not-top {
    position: fixed;
    transition: transform 200ms linear;
    -webkit-transition: -webkit-transform 200ms linear;
}

.headroom--pinned {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}

#logotype a {
    font-size: 32px;
    color: white;
    text-decoration: none;
    padding: 5px 20px 5px 20px;
    float: left;
    text-shadow: 1px 1px 2px #555;
}

.authors {
    margin-top: 0em;
    font-size: 120%;
    font-style: italic;
}

/* .toc { */
/*     background-color: #3399CC; */
/*     color: white; */
/*     border-radius: 4px; */
/*     padding: 0; */
/*     padding-bottom: 0.5em; */
/*     position: relative; */
/*     border: 1px solid #3399cc; */
/* } */

/* .toc .name { */
/*     border-top-left-radius: 4px; */
/*     border-top-right-radius: 4px; */
/*     width: 100%; */
/*     background-color: white; */
/*     color: #3399cc; */
/*     text-indent: 0.5em; */
/*     font-weight: bold; */
/*     line-height: 100%; */
/*     font-size: 100%; */
/*     padding-top: 0.5em; */
/*     padding-bottom: 0.3em; */
/* } */

.toc ul {
    padding-left: 2em;
}

.toc ul li {
    margin-top: 3px;
}

/* .toc code { */
/*     background-color: transparent; */
/* } */

/* .toc ul a { */
/*     color: white; */
/*     text-decoration: none; */
/*     padding-bottom: -2px !important; */
/*     border-bottom: 1px solid #ccc; */
/* } */

/* navigation links */

ul#nav {
    float: right;
    margin-top: 1.6em;
    font-family: helvetica, arial, sans-serif;
    font-size: 80%;
}

.all-chapters:hover {
    cursor: pointer
}

.nav0, .nav0:visited {
    color: white;
    text-decoration: none;
}

/* used to make li elements have no number before them
e.g., the "index" item in the list of chapters
  */
.nonum {
list-style-type: none
}

/* top level nav items */
.nav0 > li {
    display: inline;
    padding: 5px 10px 5px 10px;
    font-weight: bold;
    border-radius: 2px;
    border: 1px solid white;
    margin: 5px;
    color: white;
}

/* hover for top level items */
.nav0:hover li {
    background-color: white;
    color: black
}

#nav ol {
    background-color: white;
    border: 1px solid gray;
    border-radius: 2px;
    padding: 0;
    margin: 0;
    margin-top: 3px;
    margin-left: -5em;
    width: 20em;
    display: none;
    position: absolute;
    list-style-position: inside;
    z-index: 9999999;
    color: black;
    box-shadow: 0px 0px 33px 3px #568ec7;
}

#nav ol li {
    display: list-item;
    padding: 5px 10px 5px 10px;
    font-weight: normal;
    color: black
}

#nav ol li:hover {
    background-color: #12858C !important;
    color: white
}

#nav ol a {
    color: black;
    text-decoration: none
}

#nav ol a:hover {
    color: white
}

/* show the list of all chapters when the show class is
   applied */
li.show ol, .nav0:hover ol {
    display: block !important;
}


#chapter-wrapper {
    width: 55em;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 1);
}

#chapter {
    width: 760px;
    margin-top: 0;
    margin-bottom: 3em;
    background-color: white;
    padding: 60px;
    padding-top: 1px;
    font-size: 17px;
    line-height: 125%;
}

#chapter p {
    text-align: justify
}

#chapter > ul li {
    line-height: 130%;
}


.clear {
    clear: both
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 110%;
    border-bottom: 1px dotted gray;
    position: relative;
}

.header-section-number {
    position: absolute;
    left: -70px;
    width: 70px;
    display: block;
    text-align: center;
    /* float: left; */
    color: #cc0066;
}


a:visited {
    color:blue;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: black;
    text-decoration: none
}

h3 {
    font-style: italic
}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    color: black;
    text-decoration: none
}

#chapter-title {
    font-weight: 700;
}

li > code {
    font-family: Inconsolata;
    border-radius: 2px;
    background-color: #fafafa;
    border: 1px solid #dfdfdf;
    font-size: 12px;
    padding: 0 2px 0 2px;
}

#exercises ~ ol {
    margin-left: 0;
    padding-left: 0
}


#references ~ p {
    text-align: left;
}

/* citation hovercards */
span.citekey {
    display: none
}

span.citation {
    position: relative;
    border-bottom: 1px dotted gray;
    cursor: pointer;
}

.citation-expanded {
    /* display: block; */
    opacity: 0;
    position: absolute;
    padding: 1em;
    top: 0px;
    left: 0%;
    z-index: -9999;
    background-color: rgba(255, 204, 102, 0);
    color: rgba(0, 0, 0, 0); /* expanded citation can actually be visible on small screens */
    text-align: left;
    min-width: 10em;
    max-width: 25em;
    cursor: default;
}

.citation-animate {
    top: -30px;
    display: block;
    z-index: 999;
    color: black;
    background-color: rgba(255, 204, 102, 1.0);
    transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    box-shadow: 2px 2px 1px #cccccc;
    opacity: 1
}

/* code settings */

p > code {
    font-family: Inconsolata;
    border-radius: 2px;
    background-color: #fafafa;
    border: 1px solid #dfdfdf;
    font-size: 14px;
    padding: 0 2px 0 2px;
}

.norun {
    border-radius: 2px;
    background-color: #fafafa;
    border: 1px solid #dfdfdf;
    padding: 0 2px 0 2px;
}

.norun > code {
    font-family: Inconsolata;
    font-size: 14px ;
}

.results {
    background-color: #fafafa;
}


h1 > a > code, h2 > a > code, h3 > a > code, h4 > a > code, h5 > a > code, li > a > code {
    font-family: Inconsolata;
    border-radius: 2px;
    background-color: #fafafa;
    border: 1px solid #dfdfdf;
    font-size: 85%;
    padding: 0 0.2em 0 0.2em;
}

/* yellow backgrounds */
.bg-yellow {
    background-color: #f2efc2;
    padding: 5px;
    border: 1px solid #f3ce00;
}

/* codeboxes */

.CodeMirror-focused {
    /* transition: left 0.2s, top 0.2s; */
    transition: box-shadow 0.1s;
    box-shadow: 3px 3px 3px #99ccff;
    /* left: -3px; */
    /* top: -3px */
}

.code-controls {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 1000
}

.code-settings {
    z-index: 999;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    list-style-type: none;
    margin: 2px;
    color: gray
}

.code-settings li {
    display: none;
}

.code-settings .settings-icon {
    display: inline;
    color: gray;
    padding: 0px 1px 0px 1px;
    border-radius: 2px
}

.code-settings:hover li {
    display: inline
}

.CodeMirror:hover .code-controls, .CodeMirror-focused .code-controls {
    opacity: 1
}

.CodeMirror:hover button.run, .CodeMirror:hover .code-settings, .CodeMirror-focused button.run, .CodeMirror-focused .code-settings {
    opacity: 1
}

.error {
    color: red;
    font-weight: bold
}

.CodeMirrorError {
    background-color: #FFA500;
    font-weight: bold
}

/* d3 */


.line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
}

.chart {
    font: 13px Helvetica, Arial, sans-serif;
    fill: steelblue;
    stroke: #333333;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
}

.axis text {
    stroke: none;
    fill: black;
}


.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.bar,
.point {
    fill: steelblue;
    shape-rendering: crispEdges;
}

.lineplot {
    stroke: steelblue;
    stroke-width: 2px;
    shape-rendering: crispEdges;
}

/* chapter tables */
table {
border-collapse: collapse
}

th {
border: 1px solid #afafaf;
padding: 0 0.5em 0 0.5em;
font-weight: 600;
}

td {
border: 1px solid #afafaf;
padding: 0 0.5em 0 0.5em;
}

.math {
    font-size: 14px;
}

/* for smartphones */
@media only screen and (max-device-width: 480px){
    .math {
        font-size: 130%
    }
}