/**
* Page overrides
**/

button {
  background: #e7ba52;
}

@media(max-width: 500px) {
  table {
    font-size: 0.8em;
    margin: 0;
  }

  table td,
  table th {
    padding: 7px;
  }

  .well table {
    width: 100%;
  }
}

h3 {
  text-align: center;
}

/**
* Global chart styles
**/

.chart {
  text-align: center;
}

.axis text {
  font-size: 14px;
}

.axis .domain {
  fill: none;
  stroke: #888;
}

.axis line {
  stroke: #888;
}

.axis path,
path.line {
  fill: none;
}

/**
* Grid chart styles
**/

.grid .grid-background {
  fill: #eae8e8;
}

.grid .axis line {
  stroke: #fff;
}

.grid .domain {
  stroke: #888;
  display: none;
}

/**
* Quotebox
**/

.quotebox {
  padding: 0 20px;
}

.quotebox .quotebox-entry {
  margin: 20px 0;
}

.quotebox .quotebox-headshot {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  float: left;
  margin-right: 15px;
}

.quotebox .quotebox-headshot.rose {
  background-image: url(/_includes/chapters/cheap-literature/images/scholars/mark-rose.jpg);
}

.quotebox .quotebox-headshot.patry {
  background-image: url(/_includes/chapters/cheap-literature/images/scholars/william-patry.jpg);
}

.quotebox .quotebox-headshot.woodmansee {
  background-image: url(/_includes/chapters/cheap-literature/images/scholars/martha-woodmansee.jpg);
}

.quotebox .quotebox-name {
  font-weight: 500;
  line-height: 1em;
}

@media(max-width: 600px) {
  .quotebox {
    margin: 0;
    padding: 0;
  }

  .quotebox .quotebox-headshot {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-right: 15px;
  }

  .quotebox .quotebox-quote {
    margin-left: 0;
  }
}

/**
* Lightbox pages
**/

.lightbox-pages-container {
  max-width: 100%;
  overflow: auto;
  margin-bottom: 20px;
}

.lightbox-pages-container .lightbox-pages {
  width: 100%;
  height: 140px;
  box-sizing: border-box;
  text-align: center;
  width: 670px;
}

.lightbox-pages-container .default-image img {
  max-width: 14%;
  height: 170px;
  padding: 0 10px;
  margin: 0 6px;
  background: #fff;
  border: 1px solid #ababab;
  border-radius: 3px;
  margin-bottom: -4px;
  display: inline-block;
}

/**
* Price data sampler
**/

#price-data-sample {
  width: 600px;
  margin-bottom: 20px;
}

#price-data-sample th {
  text-align: center;
}

#price-data-sample tr {
  vertical-align: top;
}

#price-data-sample td:nth-child(1) div {
  width: 80px;
  text-align: left;
}

#price-data-sample td:nth-child(2) {
  width: 400px;
}

#price-data-sample td:nth-child(3) {
  text-align: center;
}

#price-data-sample td div {
  height: 50px;
  overflow: hidden;
}

#price-data-sample button {
  margin-top: 20px;
}

@media(max-width: 800px){
  #price-data-sample {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  #price-data-sample th:nth-child(1),
  #price-data-sample td:nth-child(1) {
    display: none;
  }

  #price-data-sample td,
  #price-data-sample th {
    padding: 6px;
    font-size: 14px;
    text-align: left;
  }

  #price-data-sample th {
    font-size: 16px;
  }

  #price-data-sample td div {
    height: 70px;
  }
}

/**
* Price sample size chart
**/

.price-sample-size svg rect {
  stroke: #666;
  stroke-width: 0.2px;
}

.price-sample-size .legend {
  text-align: center;
}

.price-sample-size .legend * {
  display: inline-block;
}

.price-sample-size .swatch {
  width: 15px;
  height: 15px;
  margin-top: 4px;
}

.price-sample-size .swatch.octavo {
  background: #e7ba52;
}

.price-sample-size .swatch.duodecimo {
  background: #ee6559;
}

.price-sample-size .swatch.quarto {
  background: #aec7e8;
}

.price-sample-size .swatch.folio {
  background: #1f77b4;
}

.price-sample-size .legend-label {
  vertical-align: top;
  margin: 0 15px 0 2px;
}

@media(max-width: 600px) {
  .swatch-container {
    width: 130px;
    display: inline-block;
    text-align: left;
  }
}

.price-sample-size .buttons {
  text-align: center;
  margin-bottom: 20px;
}

.price-sample-size button {
  display: inline-block;
  margin: 2px;
  opacity: 0.4;
}

.price-sample-size button.active {
  opacity: 1;
}

/**
* Pages per sheet table
**/

.pages-per-sheet td:nth-child(2) {
  text-align: center;
}

/**
* Price by factor buttons
**/

.price-by-factor .price-by-factor-buttons {
  text-align: center;
}

.price-by-factor .factor-button {
  width: 85px;
  text-align: center;
  display: inline-block;
  padding: 12px 5px 4px;
  border: 1px solid rgba(0,0,0,0);
  cursor: pointer;
}

.price-by-factor .factor-button.active {
  border: 1px solid lightgray;
  border-radius: 4px;
  background: #efefef;
}

.price-by-factor .factor-button img {
  width: 50px;
}

/**
* Price by factor title
**/

#price-by-factor-title {
  text-align: center;
  margin-top: 15px;
}

.factor-title-prefix, .factor-title {
  display: inline-block;
  margin: 0;
}

/**
* Price by factor brush
**/

#price-by-factor-brush .group {
  pointer-events: none;
}

#price-by-factor-brush .x.axis text,
#price-by-factor-brush .axis .domain {
  display: none;
}

#price-by-factor-brush .extent {
  stroke: grey;
  stroke-width: 1px;
  fill: black;
  fill-opacity: 0.2;
}

/**
* Price by subject
**/

.price-by-subject {
  text-align: center;
}

/**
* Price by title
**/

.price-by-title .grid-background {
  fill: none;
}

/**
* Slope buttons
**/

.slope-buttons {
  text-align: center;
}

.slope-buttons label {
  display: inline-block;
  margin-top: 12px;
}

@media(max-width: 400px) {
  .slope-buttons label {
    display: block;
  }
}

.slope-button {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: #efefef;
  padding: 8px;
  border-radius: 11px;
  box-sizing: border-box;
  vertical-align: top;
  border: 2px solid #707070;
  margin: 0 5px;
  cursor: pointer;
  opacity: 0.5;
}

.slope-button.active {
  opacity: 1;
}

.slope-button img {
  height: 100%;
  margin: 0;
}

/**
* Subject button
**/

.subject-buttons {
  text-align: center;
}

.subject-button {
  width: 70px;
  display: inline-block;
  margin: 0 10px;
  text-align: center;
  opacity: 0.3;
  cursor: pointer;
}

.subject-button.active {
  opacity: 1;
}

.subject-button img {
  width: 50px;
}

/**
* Author publications
**/

.author-publications {
  text-align: center;
  overflow-y: auto;
}

.author-publications .author-row {
  display: inline-block;
}

.author-publications .author-name {
  text-align: left;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #555;
}

.author-publications .author-headshot {
  width: 44px;
  border-radius: 100%;
  vertical-align: top;
  display: inline-block;
}

@media(max-width: 800px) {
  .author-publications .author-row {
    display: block;
  }

  .author-publications .author-headshot {
    display: none;
  }
}

.author-publications-range * {
  display: inline-block;
}

.author-publications-range .range-start,
.author-publications-range .range-end {
  color: rgb(238, 101, 89);
  font-weight: 500;
  font-size: 1.5em;
  margin-left: 2px;
}

.author-publications-range span {
  margin-top: 0px;
  vertical-align: top;
}

.author-publications-buttons {
  margin: 5px 0;
}

.author-publications-buttons * {
  display: inline-block;
  background: #888;
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
  width: 115px;
  margin: 0 1px;
  cursor: pointer;
  white-space: nowrap;
}

.author-publications svg .axis text {
  font-size: .5em;
  fill: #999;
}

.author-publications svg .y.axis line {
  display: none;
}

/**
* Price model coefficients
**/

#estc-price-model-coefficients {
  text-align: center;
}

.feature {
  display: table;
  margin-bottom: 15px;
}

.feature * {
  display: table-cell;
  vertical-align: middle;
}

.feature-weight {
  display: table-cell;
  font-weight: 500;
  font-size: 1.45em;
  width: 50px;
}

.feature .feature-label {
  width: 76px;
  text-align: center;
  line-height: 1.1em;
}

.feature .feature-label img {
  width: 44px;
  display: block;
  margin: 0 auto;
  padding-bottom: 3px;
}

.feature-label span {
  display: inline-block;
}

.feature .description {
  display: table-cell;
  padding-left: 10px;
  text-align: justify;
}

@media(max-width: 600px) {
  .feature {
    display: block;
    text-align: center;
  }

  .feature-weight {
    display: inline-block;
    margin-right: -12px;
  }

  .feature-label {
    display: inline-block;
  }
}