/*  From http://pausepress.net/EpigramMicrophone/EpigramMicrophone.html */
/* The following code was modified from CSS provided as part of the NLM/NCBI
   JATS Preview XSLT (cf https://github.com/ncbi/JATSPreviewStylesheets)
*/

/* --------------- Page setup ------------------------ */

/* page and text defaults */

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond|Proza+Libre');

@media screen and (max-width: 700px) {

.chapter {
  flex-direction: column;
  height: auto;
}

table tbody tr td {
  font-size: smaller;
  margin: 0;
  padding: 0;
}
}

main {
  /*margin-left: 10%;*/


/*max-width: 45em;*/
font-family: 'Proza Libre', sans-serif;
font-size: 14pt;

 }

/*body {
  max-width: 100%;

}*/



div.headnote {

  padding: 10px 10px 10px 10px;
  font-size: 12pt;
  background-color: WhiteSmoke;
}

div.contents {
  margin: 0em 5em 0em;
}

.checkbox:checked + a {
  display: inline;
}

.breadcrumbs {

  display: inline;
}

.breadcrumb {
  display: inline;
}

div.nav-container {


}

div.titlePage {
  border-style: solid;

}



/*
div > *:first-child { margin-top:0em }*/




/*  end */


div.shortwork {
   margin-top: 1em; margin-bottom: 0.5em
}

div.ss {
    margin-bottom: 0.5em
}

div.ab {
   /*  margin-top: 2em; margin-bottom: 0.5em;*/
   padding-left:7px;
   background-color: lightgrey;
}

div.auto-clipping {
  border: solid;
  border-width: thin;
  padding: 2em;
  margin:1em;
  font-size: smaller;

}

div.auto-clipping-slim {
  border: solid;
  border-width: thin;
  padding: 2em;
  margin-top:1em;
  margin-bottom:1em;
  margin-left:13em;
  margin-right:13em;
  font-size: smaller;

}

div.auto-letter {
  background-color: lightgrey;
  padding: 2em;
  margin: 2em;
  font-size: smaller;

}

div.auto-letter span.pb {
  background-color: white;
  margin: 0 -2em 0;

}

div.auto-clipping span.pb {
  background-color: white;
  margin: 0 -3em 0;

}

div.textsec {
  margin: 0em 2em 0em;
  font-size:12pt;
}

div.commentary {

  padding: 10px 10px 10px 10px;
  font-size:12pt;
  background-color: WhiteSmoke;
}

div.sub-commentary {
  margin: 1em;
  padding: 0 10px 0 10px;
  font-size:12pt;
  background-color: WhiteSmoke;
}


span.hi-italic {
  font-style:italic;
}

span.hi-smallcaps {
  font-variant:small-caps;
}

span.hi-bold {
  font-weight:bold;
}

span.hi-underline {
  text-decoration:underline;
}

span.hi-superscript {

  vertical-align: super;
  font-size: 10px;
}

span.hi-subscript {
  vertical-align: sub;
  font-size: 10px;
}

span.hi-xs-smallcaps {
  font-variant:small-caps;
  font-size: smaller;
}

span.hi-normal {
  font-style:normal;
  background-color:white;
}

span.hi-dot-underline {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

span.hi-dbul {
  text-decoration-line: underline;
  text-decoration-style: double;
}

span.hi-shaded {
  background-color: lightgrey;
}

span.hi-paraph{
  background-position:bottom center;
  background-repeat:no-repeat;
  padding-bottom:.7em;
  background-image:url(/images/writings/ts_paraph.png);
}


/*  add; followed by insert carat before and after */
span.add {
  color: blue;

}

span.add::before {
 content: '‸';
 font-size: larger;
}

span.add::after {
 content: '‸';
  font-size: larger;
}

/* I REMOVED THE SUBSCRIPT AND SMALLER SIZING STYLES HERE BECAUSE THEY ARE MORE RELEVANT TO POLICIES FOR LETTERS AND BECAUSE CORR IS USED FOR SQUARE BRACKETS IN mt AND EDITORIAL TEXTS TOO MUCH TO CHANGE THE ELEMENT*/
span.corr:before {
  content: '[';

}

span.corr:after {
  content: ']';

}

.toggleButton {
  font-family: 'Proza Libre', sans-serif;
  font-size: 14pt;
  background: white;
  width: 100%;
  border-style:solid;

  padding: 7.5px;
  font-weight: bold;

}

.toggleButton:hover {
  cursor: pointer;
  color: blue;

}

.buttonContainer {
  text-align: center;

}

/*  del */
span.del {
  color: red;
  text-decoration:line-through;

}

/*  unclear, followed by open square bracket before and "?" close square bracket after */
span.unclear {

    font-size:smaller;
    color:salmon;

}

span.unclear::before {
 content: '[';
}

span.unclear::after {
 content: '?]';
}

/* pb */
span.pb {
  display:block;
  text-align:center;
  font-size:12pt;
  font-weight:normal;
  padding:20px 0px 20px ;

}

.add .pb {
  color: black;
}


span.list .label {
  font-weight:bold;

}

 span.list .item {
   display: block;
  text-indent: -36px;
  padding-left: 36px;

}

div.contents .item {
  display: block;
 text-indent: -36px;
 padding-left: 36px;

}


/* style thumb (from xsl), which grabs value of @facs from pb */
img.thumb {

  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 50px; /* Set a small width */
}

img.thumb:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

/* style img (from xsl), which grabs value of @facs from figure */

img {
   width: 20%;

}

.parallel-img {
  width: 90%;
  margin: 0 auto;
}

.parallel-img img {
  width: 80%;

}

.parallel-img p {
  font-size: 10pt;

}

.parallel-img .note-inline-ed {
  font-size: 12pt;
}


.figure {
  padding: 10px 0 10px 0;
  width: auto;
  text-align: center;
}



.post {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

}

.chapter, .shortwork, .introduction {
  padding: 0 10px 0 10px;

}



  .witness {

  display:block;
}

  .witness-sigil {
    font-weight:bold;
  }

/* p (BBB removed the indent for p in css because it was messing up the centering of texxt)*/
p {

    text-align: justify;

    /*text-indent:3em;*/

}

p.hangbib1 {
  text-indent: -36px;
  padding-left: 36px;
}

/* prevent p from starting a new line after endnote number */

div.endnote > p:first-of-type {

   display:inline;

}

/* prevent commentary from starting a new line after head */

div.commentary > div p:first-of-type {

    display:inline;
}


/* tentative indentation for verse */

/*
span.lg  {

    margin-left:0em;
}
*/

/* controlling verse indentation with span.l work better than using span.lg, which indents the first line 2em more than the following lines*/
span.lg > span.l  {

    margin-left:5em;
}

div.quote

{
  font-size:12pt;
  margin-left:6em;
  margin-right:4em;
}

div.quote > p > span.pb {

font-size: 12pt;

}

div.headnote span.pb {
  font-size: 12pt;
}


/* head for divs in body of text */
div.head {

    text-align:center;
    font-size:16pt;
    padding-bottom:20px;
    font-weight: bold;
    margin: 0em 3em 0em 3em;

}

div.argument {
  font-size:14pt;
  font-weight: bold;
  margin: 0em 4em 0em 4em;

}

div.argument p {
  text-align: center;
}

/* style head for commentary sections */

div.commentary > div > div

{

    text-align:left;
    font-size:larger;
    font-style:italic;
    display:inline;
}

/* style head for enclosure section */

div.enclosure > div {

    text-align:left;
    font-size:larger;
    font-style:italic;

}

/* style head for envelope section */

div.envelope > div {

    text-align:left;
    font-size:larger;
    font-style:italic;

}

/* style head for endnotes sections

div.endnotes > div.head
{

    text-align:left;
    font-size:larger;
    font-style:italic;
}*/

/* add space between commentary sections */


/* add space between endnote sections */

div.endnotes {

    margin-bottom:2em;
    padding-left:2em;
    position:sticky;

}



span.note-inline-au {
  font-size:12pt;
  margin-left: 2em;
  display: block;
  text-indent: 2em;
}

.note-inline-au-hr {
  height: 1px;
border: 0;
color: #333;
background-color: #333;
max-width: 20%;
text-align: left;
margin-left: 0;
}

span.note-inline-au p {
  font-size:12pt;
  margin-left: 2em;
}



/* milestone for letters */

hr.heavyrule
{
 color:#fff;
 background-color:#fff;
 border:1px dotted #BBD0D3;
 border-style:none none dotted;
}

span.milestone {
  display: block;
  text-align:center;
}


hr.lightparallel {

  display:block;
  width:4em;
  margin-top:.5em;
  margin-bottom:.5em;
  margin-left:auto;
  margin-right:auto;
  height:.1em;
  border-top:.15em solid #333;
  border-style:none none dotted;


}

hr.lightrule {

  display:block;
  width:4em;
  margin-top:2em;
  margin-bottom:2em;
  margin-left:auto;
  margin-right:auto;
  height:.5px;
  background-color: #333;
  border-top:.06em solid #000;

}

hr.lightparallel {
  height:.3em;
  border-top:.08em solid #333;
  border-bottom:.08em solid #333;
  background-color: transparent;
}

hr.lighttriple {
 background-image:url(/images/writings/underscore_triple.png);
 background-position:100%;
 display:block;
 height: .5em;
 width: 4em;
 margin-left:auto;
 margin-right:auto;
 border: none;
}

hr.plainrule {
  margin-top:2em;
  margin-bottom:2em;
}


/* style inline editorial note; insert open square bracket before and close square bracket after */

span.note-inline-ed {
    font-style:italic;
}

span.note-inline-ed:before {
    content:"[";
    font-style: normal;

}

span.note-inline-ed:after {
    content:"]";
    font-style: normal

}


/* metamark */

span.metamark {

    text-align:center;

}

/* lb */

span.lb {
    font-size:smaller;
    text-align:right;
    margin-right:5em;
    color: purple;
}

/* styles for letter-specific elements */

span.dateline {
    display:block;
    text-align:right;
    padding-right:2em;
}

span.sourceline {
    display:block;
}

span.salute {
    display:block;
    text-indent:2em;
}

span.closer {
    display:block;
    text-align:right;
    padding-right:5em;
}

span.signed {
    display:block;

}

/* style links to endnotes in body of text */

span.a {
  vertical-align: super;
/*  font-size: 67%;*/
  font-weight: normal;
  font-size-adjust: unset;
}

/*
span.note-ref:hover {
  background-color: yellow;
}*/

/* Modal */


/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  padding-top: 1em;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 30%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}




/* grid layout for autobiography margin notes */

.item1 { grid-area: main; }
.item2 { grid-area: right; }
/*
.item3 { grid-area: top-right; }
.item4 { grid-area: left-middle; }
.item5 { grid-area: main; }
.item6 { grid-area: right-middle; }
.item7 { grid-area: bottom-left; }
.item8 { grid-area: bottom-middle; }
.item9 { grid-area: bottom-right; }*/

.grid-container {
  display: grid;
  grid-template-areas:
  'main right';
  background-color: #FFF8DC;
  /*
    'top-left top-center top-center top-center top-center top-right'
    'left-middle main main main main right-middle'
    'bottom-left bottom-middle bottom-middle bottom-middle bottom-middle bottom-right';*/
}

.grid-container > div.item1 {

  /*text-align: center;*/
  text-align: left;

}



.grid-container > div.item2 {

  /*text-align: center;*/
  padding-left: 20px;
max-width:100px;
}

.grid-container > div.item2 > span.rightMargin {

  display:block;
}

}

.grid-container > div {

  /*text-align: center;*/

  /*font-size: 18px;*/
}

div.quote > p > span.note-inline-au
{
  font-size:12pt;
  text-indent:0em;
}


/* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

span.tocOpen {
  font-size: 30px;

}

span.tocOpen:hover {
  font-style: italic;
}


/* Position and style the close button (top right corner) */
span.tocClose {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

span.tocClose:hover {
  color: #f1f1f1;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
/*main {
  transition: margin-left .5s;
  padding: 20px;
}*/

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* unused styles are below: pop up window and grid layout */

/* Popup container */
.popup {
  position: relative;
  display: block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;


}

.refPopup {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1000;
      max-width: 300px;
      font-size: 14px;

}



.refPopup.active {
    display: block;
}
@media (hover: none) {
    .ref::after {
        content: " [i]";
        font-size: 0.8em;
        vertical-align: super;
    }
}

table.tblInset {
  border: none;
  margin-left: 8em;
}


table.tblInset tr {
  border: none;

}

table.tblInset td {
  border: none;

 padding-left: 2em;
}

table.two-columns {
  width: 30em;
}

table.tblInset2 {
  border: none;

}

table.tblInset2 td {
  border: none;
  padding-right: 2em;
}

/* automargnote for tables in autobio textual documentation | #object #content-primary | #object #content-primary | #object #content-primary | #object #content-primary  */

table.automargnote {
 margin:3px;
 border:thin solid black;

}

 table.automargnote tr td{
  margin:3px;
  border:thin solid black;

}

table.automargnote thead td,
tr.label td{

  text-align:center;
  font-weight: bold;

}

table.automargnote thead td,
tr td{
  padding:5px;

}

div. parallel-text {
position: inherit;
}

.clear {
  clear: both;
}

div.subsec {
  padding-top: 20px;
}

div.subsec1 {
  float: left;
  width: 45%;
  top: 5px;
}

div.subsec2 {
  float: right;
  width: 45%;
  top: 5px;
}

.ms-mark img {
  max-width: 75px;
}

.ucpmini img {
  max-width: 40px;
}
/*added css for endnote and top button style and functionality viz JS from single pages of HF and Autobio so that it is centralized here*/

.navigation > a:hover {
  text-decoration: underline;
}

.unpub-metadata {


  width: 100%;
  margin: 0;
}

.unpub-metabox-text {

text-decoration: underline;
margin-left: 2em;
}

.unpub-metabox-text a {
  font-weight: bold;
  color: blue;
}

.unpub-notice {
  font-size: 14pt;
  text-align: center;
  background-color: WhiteSmoke;
  border-bottom-style: solid;
  border-width: 1px;

}

.unpub-notice a {
  color: blue;
}


	.navigation {
    text-align: center;
  }

  .navigation a {

    font-size: 12pt;
  }

  .navigation a:hover {
    color: blue;
    text-decoration: none;
  }

  .introduction .unpub-note-link,
  .bmsec .unpub-note-link,
  .fmsec .unpub-note-link,
  .edsec .unpub-note-link,
  .appendix .unpub-note-link {
      display: none;
  }


/* commented out because not used in table
table.automargnote tbody td{
  line-height:1.4em;
  text-align:left;
  border:1px solid black;
}
*/

/* Add animation (fade in the popup)
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}*/