/* CSS Document */

/* Wrapper contains the layout */
#wrapper{
  width:40em;
  background-color: #fff;
/* Put 20px margin above the wrapper */
/* Set right and left to auto for centering */
   margin: 20px auto 0 auto;
}

h1{ 
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size:  55px;     
	text-align: center;
}

h2{
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 40px;     
	text-align: left;
}

h3{
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 30px;     
	text-align: left;
	font: bold;
}

h4{
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 23px;     
	text-align: center;
	font: bold;
}

h5{
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 20px;     
	text-align: left;
	font: bold;
}

body {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 18px;     
	text-align:left; /* changed from justified - accessibility error */
}
img {
	margin: .8em;
}
/* Adding this to hide full title of the Audio version visually for each article. 10/21/2019 
Example:
This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say "HTML" and "PDF." Hidden text describes the purpose of each link.

<dl>
<dt>Winnie the Pooh </dt>
   <dd><a href="winnie_the_pooh.html">
      <span class="visually-hidden">Winnie the Pooh </span>HTML</a></dd>
   <dd><a href="winnie_the_pooh.pdf">
         <span class="visually-hidden">Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
    <dd><a href="war_and_peace.html">
      <span class="visually-hidden">War and Peace </span>HTML</a></dd> 
    <dd><a href="war_and_peace.pdf">
      <span class="visually-hidden">War and Peace </span>PDF</a></dd>
</dl> */

.visually-hidden {
   clip-path: inset(100%);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}
/* this throws an accessibility error for being too small... stop using :( 10/21/2019 */
.listen {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	margin-left: 25em;
}
.indent {
	margin-left: 2em;
}

/* Captioned images */ 
.picture { 
	background-color: #F9F9F9; 
	border: 1px solid #CCCCCC; padding: 3px; 
	font: 15px Arial, sans-serif;
	text-align: center } 
.picture img { 
	border: 1px solid #CCCCCC; 
	vertical-align:middle; margin-bottom: 3px; } 
.right { 
	margin: 0.5em 0pt 0.5em 0.8em; float:right; } 
.left { 
	margin: 0.5em 0.8em 0.5em 0; float:left; 
}
 
.social-share-facebook {
  background: transparent url(images/facebook.png) no-repeat;
  display: block;
  float:left;
  height: 32px;
  width: 32px;
  text-indent: -9999px;
}

.social-share-twitter {
  background: transparent url(images/twitter.png) no-repeat;
  display: block;
  float:left;
  height: 32px;
  width: 32px;
  text-indent: -9999px;
}
 
/* Applies to the image inside a captionpic div */
div.captionpic img {
   width:100%;
   border:none;
}