/* Constants: Screen sizes; straight out off Bootstrap ***********************/
/* Constants: Colors *********************************************************/
/* Constants: Rhythm and spacing *********************************************/
/* su: space unit ***********************************************************/
/* Constants: Typography *****************************************************/
.btn-request, .page-item.active .page-link {
  color: white;
  font-weight: bold;
  background-color: #92c83e;
  border-color: #86b739; }
  .btn-request:hover, .page-item.active .page-link:hover, .btn-request:focus, .page-item.active .page-link:focus {
    color: white;
    font-weight: bold;
    background-color: #87b939;
    border-color: #6b922d; }

/* Resets *********************************************************************/
@media screen {
  html {
    font-size: 16px; } }
  @media screen and (min-width: 768px) {
    html {
      font-size: 18px; } }

@media print {
  html {
    font-size: 16px; } }

body, header, footer, h1, h2, h3, h4, h5, h6, p, blockquote, li, ol {
  font-size: 100%;
  color: #303535;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.375; }

/* Pseudoclass; To be use only with @extend */
h1, h2, h3, h4, h5, h6, section, p, blockquote, ul, hr {
  padding: 0px; }

/* Tags: Paragraph styles *****************************************************/
blockquote {
  border: 0px; }
  @media screen {
    blockquote {
      background-color: #FAF6E6;
      background-image: url("/img/siskin/diagonal-light-bg.png");
      padding: 1.375rem; } }
  @media print {
    blockquote {
      border-left: 1px dotted black;
      padding: 0.5rem 4rem 0.5rem 1.5rem; } }

body {
  background-color: #ffffff; }

img.cover, img.contributor {
  margin-bottom: 1em;
  width: 100%; }

@media print {
  section {
    margin-bottom: 2.0625rem; } }
@media screen {
  section {
    margin-bottom: 2.75rem; } }

h1 {
  letter-spacing: -0.0125em;
  font-weight: 900;
  font-size: 150%; }
  @media screen and (min-width: 768px) {
    h1 {
      font-size: 218.06%;
      line-height: 1; }
      h1 span.subtitle {
        font-size: 75%; } }

h2 {
  font-style: italic;
  font-size: 125%; }
  @media screen and (min-width: 768px) {
    h2 {
      font-size: 150%; } }
  h2.blocked {
    color: #565656;
    font-style: normal;
    font-size: smaller;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center; }
    @media print {
      h2.blocked {
        letter-spacing: 0.25rem; } }

h3 {
  border-top: 1px solid #f1f1f1;
  color: #808080;
  font-size: 125%; }
  @media screen and (min-width: 768px) {
    h3 {
      font-size: 150%; } }

h4 {
  border-top: 1px solid #808080; }

h4, h5 {
  color: #4d4d4d;
  font-size: 88%;
  font-weight: 900;
  text-transform: uppercase; }

h5 {
  border-top-width: 0px;
  color: #808080; }

h6 {
  font-weight: 900; }

@media screen {
  hr.white {
    background-color: #F7F4ED;
    border-color: #F7F4ED; } }
@media print {
  hr.white {
    border-color: black; } }

p {
  hyphens: auto; }
  blockquote p {
    text-indent: -0.325em; }
    blockquote p:first-child {
      margin-bottom: 0px; }
  p.btn-note {
    color: #808080;
    font-size: 75%;
    margin: 0.25rem 0px 0.75rem 0px; }
  p.featured-quote {
    text-indent: -0.44em;
    font-weight: 700; }
    @media screen and (min-width: 768px) {
      p.featured-quote {
        font-weight: 900;
        font-size: x-large; } }
    @media screen and (min-width: 992px) {
      p.featured-quote {
        font-size: xx-large; } }
    p.featured-quote:before {
      content: '\201C'; }
    p.featured-quote:after {
      content: '\201D'; }
  p.imprint {
    font-size: 76%;
    text-transform: uppercase; }
    p.imprint.with-dark-bg strong {
      color: white; }
  p.nohyphenation {
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none; }
  p.quote-source {
    text-indent: -0.5rem;
    padding-top: 0.25rem;
    margin-bottom: 0px; }
    p.quote-source:before {
      content: '\2014\2009'; }
  .prizes p {
    color: white;
    font-weight: 700; }

ul.bullets {
  padding-left: 0px;
  text-indent: -9px;
  list-style: none; }
  ul.bullets li:before {
    content: '\0b7\020'; }

/* Tags: Character styles *****************************************************/
a {
  color: #387294; }
  a.page-link {
    color: #387294; }
  .with-dark-bg a {
    color: #F7F4ED !important;
    text-decoration: underline;
    text-decoration-style: dotted; }
  a.featured-nav {
    color: #F7F4ED;
    text-decoration: none;
    border: 1px solid #F7F4ED;
    border-radius: 20px;
    padding: 1px 15px 1px 15px; }
    a.featured-nav:hover {
      color: #4b5457;
      background-color: #F7F4ED; }
    a.featured-nav.featured-nav--selected {
      color: #4b5457;
      background-color: #F7F4ED; }

b, strong {
  color: #4d4d4d;
  font-weight: 700; }

footer {
  /* Footer; on every page. */
  border-top: 7px solid #92c83e; }
  footer p, footer a, footer a:hover {
    color: #F7F4ED; }
  footer .footer-logo {
    height: 110px;
    margin-bottom: 1rem; }
  footer .footer-logo-ou {
    height: 37px; }
  footer .menu-section-title {
    border-bottom: 1px solid #F7F4ED;
    color: #F7F4ED;
    font-size: 75%;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 0.0625rem; }
  footer .sm-menu-icon {
    padding: 5px 10px 10px 0px; }

/* Classes ********************************************************************/
/* The following first classes are all related to vertical spacing. ***********/
.debug--red {
  background-color: red; }

.debug--blue {
  background-color: blue; }

.debug--green {
  background-color: green; }

.debug--pink {
  background-color: pink; }

.material-icons {
  font-size: 11pt; }

.oup-light-green {
  background-color: #92c83e; }

.oup-dark-green {
  background-color: #4b5457; }

.mt-6 {
  margin-top: 4.8125rem; }

.mb-6 {
  margin-bottom: 4.8125rem; }

.pt-6 {
  padding-top: 4.8125rem; }

.pb-6 {
  padding-bottom: 4.8125rem; }

/* Boostrap classes; there mostly for print overrides *************************/
@media print {
  .rounded {
    border-radius: 0px !important; } }

@media print {
  .shadow-sm {
    box-shadow: none !important; } }

/* And now classes not related to vertical spacing ****************************/
@media screen {
  .title-header--swallow {
    background-image: url("/img/siskin/background-swallow-240.png");
    background-repeat: no-repeat;
    background-position: center 12%; } }
  @media screen and (min-width: 576px) {
    .title-header--swallow {
      background-image: url("/img/siskin/background-swallow-240-large.png");
      background-position: center 15%; } }

.book--toc ul {
  padding-left: 0px;
  padding-bottom: 1.375rem;
  text-indent: -9px;
  list-style: none; }
  .book--toc ul li:before {
    content: '\0b7\020'; }

.categorizations {
  color: #808080; }
  .categorizations a {
    color: #808080;
    font-weight: bold;
    text-transform: uppercase;
    font-size: small; }
    .categorizations a:hover {
      color: #387294; }

.btn, .form-control {
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  /* Bootstrap thing? Somehow buttons may end up misaligned if line-height
     is kept the same as the line-height of text. */
  line-height: 1.25; }

.btn-buy {
  color: #303535;
  background-color: #ffc353;
  border-color: #fdbb43; }
  .btn-buy:hover, .btn-buy:focus {
    color: #303535;
    background-color: #f2b340;
    border-color: #d9a139; }

.btn-local {
  color: #C02333;
  background-color: #F8F2D9;
  border-color: #f0ead2;
  font-weight: bold; }
  .btn-local:hover, .btn-local:focus {
    color: #303535;
    background-color: #e8e2cb;
    border-color: #dfd9c3; }

.has-error {
  border-color: red; }

.isbn {
  font-size: 88%;
  letter-spacing: 0.025em; }

.message {
  background-color: #ffc255 !important;
  padding-top: 2.75rem !important;
  padding-bottom: 2.75rem !important; }
  .message p {
    font-weight: 700;
    color: #8c6c32 !important;
    margin-bottom: 0px; }
    @media screen and (min-width: 768px) {
      .message p {
        border-left: 7px solid #8c6c32;
        padding-left: 2rem;
        font-size: large; } }

@media screen {
  .prizes {
    border-top: 15px solid #92c83e; } }

.subtitle {
  font-style: italic; }

.title {
  font-size: 103%;
  font-weight: 900; }

@media screen {
  .title-header {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
    text-align: center; } }
  @media screen and (min-width: 576px) {
    .title-header {
      padding-top: 7.5625rem;
      padding-bottom: 7.5625rem; } }

@media print {
  .title-header {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem; } }

.panel, footer {
  padding-top: 2.75rem;
  padding-bottom: 2.75rem; }
  @media screen {
    .panel.textured-bg, footer.textured-bg {
      background-color: #4b5457;
      background-image: url("/img/siskin/diagonal-dark-bg.png"); }
    .panel.contrast-bg, footer.contrast-bg {
      background-color: #f1f1f1;
      border-top: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd; }
    .panel.panel--subscribe, footer.panel--subscribe {
      background-color: #dddddd;
      border-top-width: 0px;
      border-bottom-width: 0px;
      padding-top: 2.75rem;
      padding-bottom: 2.75rem; } }
  @media screen and (min-width: 576px) {
    .panel, footer {
      padding-top: 6.1875rem;
      padding-bottom: 4.8125rem;
      padding-left: 1.375rem;
      padding-right: 2.0625rem; } }

.with-dark-bg {
  color: #F7F4ED !important; }

/* IDs ************************************************************************/
.header-panel {
  display: flex;
  padding: 0.75rem 0px 0.75rem 0px; }
  .header-panel a {
    color: white; }
  .header-panel button {
    color: white;
    flex-grow: 0; }
  .header-panel form, .header-panel .header-nav--links {
    display: flex;
    flex-grow: 2; }
  .header-panel .header-nav--links {
    justify-content: center; }
    .header-panel .header-nav--links.header-nav--column {
      flex-direction: column; }
    .header-panel .header-nav--links .header-nav--link, .header-panel .header-nav--links .header-nav--section {
      padding-top: 0.375rem;
      padding-left: 0.625rem;
      padding-right: 0.625em; }
    .header-panel .header-nav--links .header-nav--section {
      font-weight: bold;
      font-size: small;
      text-transform: uppercase;
      color: #F7F4ED;
      margin-top: 0.75rem;
      border-bottom: 1px solid #F7F4ED; }
  .header-panel .header-nav--menubar {
    justify-content: left; }
  .header-panel .material-icons {
    font-size: 15pt; }

.header-nav {
  border-bottom: 1px solid #89bc3a; }
  .header-nav a.header-nav--logo {
    line-height: 0px;
    text-align: center;
    flex-grow: 2; }
    .header-nav a.header-nav--logo .header-logo {
      height: 33px; }
      @media screen and (min-width: 576px) {
        .header-nav a.header-nav--logo .header-logo {
          height: 37px; } }
    @media screen and (min-width: 576px) {
      .header-nav a.header-nav--logo {
        padding-left: 0.25rem;
        text-align: left; } }