/* book-author.css
 * 
 * @brief Styles used on author-info pages.
 *
 * @nee drupal/sites/ccel.org/modules/ccelmod/book-author.css.
 * @see also js/book-author.js:windowResized(), which was attached in CCEL 2
 *   by ccelmod/templates/author-navbar.tpl.php. Now @see CCELStart.js.
 * @TODO integrate with author-info and rename (see NavbarSimple blade).
 * @TODO remove obsolete/unused parts.
 */

#author-content {
  padding: 0px;
  width: 100%;
  margin-right: 0px;
  margin-left: 0px;
  background: #e9e7e6;
}
#main-content {
  padding: 0px;
  margin: 0px;
}

#moving_ads {
  position: relative;
  background-color: #e9e7e6;
  max-width: 320px;
  height: auto;
  box-sizing: border-box;
  padding: 0px;
  left: 0px;
  float: right;
}

#moving_ads img {
  width: auto;
  height: auto;
}
#moving_ads small {
  clear: both;
  display: block;
}
#moving_ads .block {
  padding: 0.5em 1em;
}
#moving_ads .block-advertising {
  padding: 10px;
  margin: 0;
}

#author-content-foot {
  text-align: center;
  padding: 20px 0px;
  background-color: #ffffff;
}

#author-content-foot br {
  display: none;
}

/* OBSOLETE? */
#preloader {
  width: 100%;
  padding: 30px 4%;
  background-color: #fff;
  color: #587436;
  font: 1.65rem Arial;
  position: fixed;
  bottom: 0px;
  box-shadow: 0px 0px 20px 0px #666;
  margin-bottom: 0px;
}

#preloader span,
#preloader img {
  vertical-align: middle;
}

ul.authorInfo-listOfWorks {
  list-style: none;
  margin: 1em 0em;
  padding: 0em;
}

ul.authorInfo-listOfWorks li {
  text-indent: -3em;
  margin: 0.4em 0em 0.4em 3em;
  padding: 0em;
}

*.contentBox {
  padding: 20px 30px 50px;
  color: #222222;
  width: auto;
  overflow-y: auto;
}

*.contentBox h1 {
  color: #587436;
  text-align: left;
  margin: 0px;
  font: 1.65rem Arial;
  margin: 15px 0px 15px 0px;
}

*.contentBox h2 {
  text-align: Left;
  margin: 0px 0px 5px 0px;
  font: 1.05rem Georgia;
  font-weight: bold;
}

*.contentBox p {
  font-family: Georgia;
  font-size: 0.85rem;
}

/*
	 * Content Box: Title
	 */
*.contentBox.title {
  padding-top: 25px;
  padding-bottom: 35px;
  margin: inherit;
}

*.contentBox.title h1 {
  color: #587436;
  margin: 0px;
  font-size: 2.4rem;
  font-family: Georgia;
  font-weight: bold;
}

*.contentBox.title h3 {
  margin: 0px;
  font: 1.05rem Georgia;
  font-weight: bold;
}

#titleWrapper {
  display: inline-block;
  margin-left: 30px;
}

/*
	 * Content Box: Biography
	 */

*.contentBox.bio .bioPic {
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
  padding: 2px;

  width: 20%;
  max-width: 250px;
}

*.contentBox.bio img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: inherit;
}

*.contentBox.bio .citation {
  font-size: 0.7rem;
  width: 100%;
}

*.contentBox.bio,
*.contentBox.bio p {
  margin-top: 0px;
  font-size: 0.85rem;
  font-family: Georgia, Arial, Helvetica, sans-serif;
}

/*
	 *	Content Box: Quotes
	 */
*.contentBox.quotes *.hiddenQuote {
  display: none;
}

.contentBox.quotes .table {
  border-bottom: 0;
  border-top: 1px solid #eee;
}

/*
	 * Content Box: Works By
	 */

#titleAscDesc {
  color: rgba(0, 0, 0, 0.001);
  font-size: 0.6em;
}

#popAscDesc {
  color: rgba(0, 0, 0, 0.001);
  font-size: 0.6em;
}

*.contentBox.worksBy .table .table-head {
  white-space: nowrap;
  font-family: Arial;
}

*.contentBox.worksBy .hiddenWorkBy {
  display: none;
}

*.contentBox.worksBy .searchDiv {
  display: table;

  width: 100%;
  padding: 5px;
  margin-bottom: 15px;

  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;

  /* The following disallows the padding from making the total width > 100% */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*.contentBox.worksBy .searchDiv .innerWrapper {
  display: table-row;
}

*.contentBox.worksBy .searchDiv .innerWrapper .section {
  display: table-cell;
}

.worksBy * div.section:nth-child(n + 2) {
  padding-left: 10px;
  width: 0px;
}

.worksBy .row .column:last-child {
  /* column in a last row */
  padding-left: 0.75%;
  padding-right: 0.75%;
}

*.contentBox.worksBy .table .table-head *.selected {
  background: #d9c756;
}

/* The Search section of Works About */

#searchSection {
  width: 99%;
}

#searchText {
  width: 100%;
  margin: 2px 5px 0 0;
  display: block;
  max-width: 600px;
  border-color: #d4d0cd;

  /* The following disallows the padding from making the total width > 100% */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  /* Get rid of rounded edges in mobile browsers */
  -webkit-appearance: none;
  border-radius: 0;
}

/* The Filter Toggler */

*.contentBox.worksBy .whichToFilter {
  display: table-cell;
  background: white;
  padding: 3px 5px;
  border: 1px solid #c2bcb8;
  white-space: nowrap;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  cursor: pointer;

  color: #555;
}

*.contentBox.worksBy .whichToFilter.selected {
  background: #587436;
  border: 1px solid #aaa;
  color: #fff;
}

*.contentBox.worksBy .whichToFilter.selected:hover {
  background: #8a9d72;
  color: #fff;
}

*.contentBox.worksBy .whichToFilter:hover {
  background: #ddd;
  color: #000;
}

.worksBy * div.section:nth-child(2) {
  width: 0px;
}

/* The Show Toggler */

*.contentBox.worksBy .whichToShow:nth-of-type(1) {
  border-radius: 5px 0px 0px 5px;
  white-space: nowrap;
}

*.contentBox.worksBy .whichToShow:last-of-type {
  border-radius: 0px 5px 5px 0px;
  white-space: nowrap;
}

*.contentBox.worksBy .whichToShow {
  display: table-cell;
  background: white;
  padding: 3px 5px;
  border: 1px solid #bbb;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  cursor: pointer;

  color: #555;
}

*.contentBox.worksBy .whichToShow.selected {
  background: var(--ccel-red);
  border: 1px solid #aaa;
  color: #fff;
}

*.contentBox.worksBy .whichToShow.selected:hover {
  background: #ab4c4c;
  color: #fff;
}

*.contentBox.worksBy .whichToShow:hover {
  background: #ddd;
  color: #000;
}

.contentBox.worksBy .table-head .column:nth-of-type(n + 2):hover {
  cursor: pointer;
  background: #e4d788;
}

.contentBox.worksBy .row:hover {
  background: #e4d788;
}

.contentBox.worksBy .row:hover:not([is-external-work='TRUE']) {
  cursor: pointer;
}

/* 	The next three classes are for wrapper elements that help layout the
			cover art and title in the condensed layout. They have no effect in the normal layout. */
.mobileWrapperTable {
  margin: 0px;
}

.mobileWrapperRow {
  margin: 0px;
  display: table-row;
}

/*	Hide the cover art that we will show in the condensed layout */
.mobileWrapperColumn img,
.mobileWrapperColumn canvas {
  display: none;
}

/*
		 * Classes for the clickable div that shows or hides the Works By (And, if applicable, Works About)
		 * that are hidden by default
		 */
*.toggler {
  margin-top: 5px;
  padding: 10px 20px;
  cursor: pointer;
  background: #eeeceb;
}
*.toggler:hover {
  background: #d9c756;
}

.highlight {
  background-color: yellow;
}

.searchTipContainer {
  display: none;
  position: absolute;
  width: auto;
  max-width: 300px;
}
.searchTipTriangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #83786f transparent;
  margin-bottom: 0px;
  margin-left: 5px;
}
#searchTip {
  margin-top: 0px;
  background-color: #83786f;
  color: #eeeeee;
  width: auto;
  text-align: center;
  padding: 4px;
  font-family: Arial;
  font-size: 0.85rem;
}
.contentBox.worksBy .table .row.externalWork {
  display: none;
}
.contentBox.worksBy .table .row:nth-of-type(n + 5) {
  display: none;
}

#hiddenSeries {
  display: none;
}

.showHideSeriesToggler {
  padding: 1px 3px;
  margin: 0px 20px;

  font-weight: normal;
  cursor: pointer;

  color: #fff;
  background: #83786f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.7em;

  line-height: 1.42857em;
  display: inline-block;
  vertical-align: top;

  text-shadow: none;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.showHideSeriesToggler .highlight {
  background: inherit;
}

.showHideSeriesToggler:hover {
  /*	background: none;
			border: 2px solid #83786f;	*/
}

/*
	 * Content Box: Works About
	 */

*.contentBox.worksAbout .hiddenWorkAbout {
  display: none;
}

*.contentBox.worksAbout .toggler:hover {
  background: #aab3bd;
}

.worksAbout .column {
  vertical-align: middle;
}

.contentBox.worksAbout .table .table-head {
  font-family: Arial;
}

/*
	 * Content Box: Visualizations
	 */
#visuals {
  margin-bottom: 0px;
}

/* The style for the canvases that we will draw graphs to */
.graphCanvas {
  width: 100%;
  height: 200px;
  box-shadow: 0px 0px 3px 2px #bbbbbb;
  margin: 0px;
}

.outerContainer {
  display: table-row;
}

.innerContainer {
  display: table-cell;
  padding: 3px;
}

.questionMark {
  width: auto;
  height: auto;

  border-radius: 3px;
  background: linear-gradient(to bottom, #ffffff, #cccccc);
  border-color: #ffffff;
  border-style: solid;
  border-width: 1px;

  text-align: center;

  padding: 0px 5px;
  margin: 2px;
  cursor: default;
}

.questionMark:hover {
  background: #cccccc;
}

.mobileContentsButton {
  display: none;
}

/*
 * Navbar layout
 */
*.authorNavbar {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  padding: 5px 4% 5px 30px;

  background: #a8a09a;

  width: 100%;
  text-align: left;
  overflow-y: hidden;
  height: auto;
  z-index: 10;
  font-family: Arial;

  /* The following disallows the padding from making the total width > 100% */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*.authorNavbar .navbarElement {
  /* 	Firefox (maybe others, too) won't permit the one-line declaration 'padding: inherit 10px'
			so, we do this the hard way instead */
  padding-top: inherit;
  padding-bottom: inherit;

  padding-left: 10px;
  padding-right: 10px;

  color: white;
  text-align: center;

  cursor: pointer;
  white-space: nowrap;
}

button.bg-light-hover:hover {
  background: #d9c756;
}

*.fixedNavbar {
  position: fixed;
  left: 0;
  padding-left: 75px;
}

/*
 * Our table layout that automatically reconfigures itself for condensed mode.
 */
.table {
  display: table;

  width: 100%;
  margin: 10px 0;
  border-bottom: 2px solid #eeeeee;

  font-family: Georgia, Helvetica, sans-serif;
  font-size: 0.85rem;
}

.table-head {
  display: table-header-group;
}
.table-head .column {
  background: #d9c756;
  color: #222222;
  border-right: 1px solid #eeeeee;
  border-bottom: none;
}

.table-head .column:last-child {
  border-right: none;
}

/* Gives us the darker background every-other row */
.row:nth-of-type(2n), .table-alternate-colors:nth-of-type(2n) {
  background-color: #d4d0cd;
}

.column {
  display: table-cell;
  padding: 10px 20px;
  border-bottom: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  line-height: 1.2em;
  vertical-align: top;
}

.row .column:nth-child(1) {
  border-left: 1px solid #eeeeee;
}

.row:last-child .column {
  border-bottom: none;
}

/* We give this class to paragraphs in the full layout so that we can easily hide them
		 * in the condensed layout. */
.column p *.hiddenDesc {
  display: block;
}

div.authorPicture {
	color: grey;
	float: left;
}

/* For all browsers at least 1100px wide */
@media all and (min-width: 1100px) {
  #author-content {
    padding: 0px;
    width: auto;
    margin-right: 0px;
    margin-left: 0px;
  }
  #moving_ads {
    height: auto;
    padding: 0px;
    width: auto;
    left: 0px;
  }
}

/* For all browsers up to 850px wide */
@media all and (max-width: 850px) {
  .worksBy .table-head .column:last-child,
  .worksBy .row .column:last-child {
    display: none;
  }
}

/* advertisements on side disappear */
@media only screen and (max-width: 769px) {
  #moving_ads {
    display: none;
  }
}

/* For all browsers up to 600px wide (This defines full condensed mode) */
@media all and (max-width: 600px) {
  div.authorPicture {
	float: unset;
  }
  div#fatness {
    min-width: 0;
    padding: 0;
  }

  .mobileContentsButton {
    margin-top: 35px;
    margin-bottom: -10px;
    padding-bottom: 2px;
    text-align: center;
    color: #ffffff;
    background: #a8a09a;
    cursor: pointer;
    display: block;
    width: 100%;
  }

  .arrow {
    height: 0;
    width: 0;
    border: 4px solid transparent;
    margin: 0px auto;
  }

  .arrow.up {
    border-bottom-color: #83786f;
  }

  /*
	 * Summary Section: specific changes
	 */
  .table.summary .column {
    width: auto;
  }

  /*
	 * Bio Section: specific changes
	 */
  *.contentBox.bio .bioPic {
    width: auto;
    height: auto;
    max-width: 300px;

    float: none;
    margin: 0 0 10px 0;
  }

  *.contentBox.bio p {
    margin-top: 0px;
    font-size: 1.1em;
    line-height: 1.5em;
  }

  *.contentBox.bio img {
    width: 100%;
    height: auto;
  }

  /*
	 * Navbar specific changes
	 */
  *.authorNavbar {
    border: 1px solid #aaaaaa;

    padding: 0px;

    color: #222222;

    width: auto;
    text-align: center;

    overflow-y: auto;

    font-size: 100%;
  }

  .authorNavbar .navbarElement {
    display: block;

    padding: 3% 0px;

    cursor: pointer;

    font-size: 150%;
    text-align: center;

    white-space: normal;
  }

  *.fixedNavbar {
    position: relative;
    box-shadow: none;
    left: 0;
  }

  /*
	 * Automatically reconfigure the tables for smaller screens:
	 */
  /* Make each row of each table into a standalone, vertically stacking block */
  .table,
  .row,
  .column,
  .column:before {
    display: block;
    box-shadow: none;
    border-style: none;
  }

  /* Remove unncessary borders */
  .table,
  .row .column:last-child {
    border-bottom: none;
  }

  /* Hides the table head (without using display:none, which might mess up how the table displays) */
  .table-head {
    position: absolute;
    top: -1000em;
    left: -1000em;
  }

  /* Add a border and soft shadow around each block */
  .row {
    border: 1px solid #eeeeee;
    margin: 20px 0;
  }
  .row .column:nth-child(1) {
    border-left: none;
  }

  .row .column:nth-child(1) img {
    margin: auto;
  }

  .row:last-child .column,
  .column {
    /* Column in the last row and column */
    border-bottom: 1px solid #eeeeee;
  }
  .column:before {
    text-align: left;
    font-weight: bold;
    padding-right: 20px;
    font-size: 12px;
    content: ' ' attr(data-label) ': ';
  }
  .row .column {
    cursor: pointer;
    text-align: left;
  }

  .summary .row {
    border-top: 1px solid #eeeeee;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
  }

  /*
		 * "works By" specific settings
		 */

  /* Don't use the :before pseudo element */
  .worksBy .column:before {
    display: none;
  }

  /* Don't show the dedicated cover art column */
  .worksBy .row .column:nth-child(1) {
    display: none;
  }

  /* Give the cover art 20% of the width */
  .mobileWrapperColumn:nth-child(1) {
    width: 20%;
  }

  /* Give the title 80% of the width */
  .mobileWrapperColumn:nth-child(2) {
    width: 80%;
  }

  /* Make mobileWrapperTable behave like a table*/
  .mobileWrapperTable {
    display: table;
  }

  /* Make mobileWrapperColumn behave like a table cell*/
  .mobileWrapperColumn {
    display: table-cell;
    margin: 0px;
    vertical-align: middle;
    text-align: center;
  }

  /* Have the cover art in the condensed mode span the width, not necessarily the height,
			 * of the the description block. */
  .mobileWrapperColumn img,
  .mobileWrapperColumn canvas {
    display: block;
    width: 100%;
    height: auto;
    margin-right: 10px;
  }

  /* For book titles, remove the shadow, darken the text, and slightly shrink the text */
  .worksBy .column h2 {
    font-size: 0.9em;
    padding-left: 5px;
    text-shadow: none;
    color: #663333;
  }

  /* The style for the "Tap here to show [hide] description blocks */
  .worksBy .column:after {
    display: block;

    margin: 10px auto 0px auto;
    padding: 5px;

    border: 0px solid #ffffff;

    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0px 0px 1px 2px rgba(255, 255, 255, 0.6);

    content: 'Tap here to view description';
    color: #444444;
    font-family: Arial;
    font-size: 11px;
  }

  /* The :after text for when the user is viewing a description */
  .worksBy .column.showing:after {
    content: 'Tap here to hide description';
  }

  /* Don't show a pointer cursor when the user mouses over a description block for a book
			 * with no descritpion in our database.  */
  .worksBy .column.noDescription {
    cursor: default;
  }

  /* Let the user know when we have no description for a book. */
  .worksBy .column.noDescription:after {
    color: #aaaaaa;
    content: 'No description available.';
  }

  /* Hide the full-mode description */
  *.hiddenDesc {
    display: none;
  }

  *.contentBox.worksBy #whichBooksSpan {
    display: block;
  }

  *.contentBox.worksBy #searchText {
    width: 100%;
    display: block;
  }

  *.contentBox.worksBy .searchDiv {
    padding: 10px;
  }

  *.contentBox.worksBy .searchDiv .innerWrapper .section {
    display: block;
    padding-left: 0px;
    margin-bottom: 5px;
  }

  .showHideSeriesToggler {
    margin: 5px 0px;
    padding: 5px;
    display: table;
  }

  /* Don't offer tool tips in condensed mode for the graphs */
  .questionMark {
    display: none;
  }

  .toolTipContainer {
    display: none;
  }
}

/* The font for headings */
@font-face {
  font-family: 'Georgia';
  font-weight: normal;
  font-style: normal;
}