/* These styles for the body of articles. */

	h3 {
		font-family: Lato, Arial, sans-serif; 
		font-weight: bold; 
		font-size: 18px; 
		color: #0072BC; 
		margin: 40px 0 10px 0;
	}

	.highlight {
    padding-left: 16px;
    border-left: 6px solid #404144;
    width: 100%;
    font-family: Lato,Arial,sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    color: #0072BC;
	}
	/* Inline image styles */
	.cap {
		font-size: .85em; font-family: "nunito sans", helvetica, sans-serif; vertical-align: top; text-align: center; padding: 0; margin: 20px 0px; color: #404144; border-bottom: 4px solid #E9F6FF;
	}
	
	.cap p {
  margin: 5px; padding: 10px; text-align: left;
}

	.nocap {
		vertical-align: top; padding: 0; margin: 20px 0px; border: none;
	}

/* For titles above charts e.g. Figure 1, Figure 2, etc */
	.figuretitle {
		width: 150px; text-align: center; background-color: #000; color: #fff; font-size: 16px; font-weight: 700; margin-left: 0px;
	}


/* To float images, sidebars, asides */

	.floatleft {
	  float: left; width: 50%; margin-right: 10px;
	}
	
	.clearfloat {
		clear: both;
	}

	.clearleft {
		clear: left;
	}

	.clearright {
		clear: right;
	}
	
/* To enlarge images */
	.enlargecontainer {
        position: relative;
        width: 0;
        height: 0;
      }      
      }      
      .enlargeicon {
        position: absolute;
        width: 130px;
        left: 0px;
        top: 40px;
      }
      
      @media only screen and (max-width: 600px) {
        .enlargeicon {
        position: absolute;
        width: 100px;
        left: 0px;
        top: 30px;
        }
        
	  }
	  
/* SIDE BY SIDE USING FLEX METHOD FOR IMAGES */

		* {
		  box-sizing: border-box;
		}

		.row {
				display: flex; flex-wrap: wrap;
			}
			
	/* Create two equal columns that sits next to each other */
			
		.column {
				flex: 48%; padding: 5px; text-align: left;
			}

	/* Create three equal columns that sits next to each other */
		.column3 {
		  flex: 33.33%;
		  padding: 5px;
		  text-align: left;
		}


@media only screen and (max-width: 600px) {
		.column {
			flex: 100%; max-width: 100%; 
			margin: 5px;
		}
	
		.column2 {
			flex: 100%;
			max-width: 100%; 
			margin: 5px;
		}
	
}

/* USED IN HERO FOR ARTICLE INDEX AND RELATED ARTICLES */
	
	#toc {
		width: 45%; float: right; margin: 5px auto 5px 10px; background-color: #E9F6FF; padding: 10px 20px; font-family: helvetica, sans-serif; font-size: medium; border-left: 10px solid #0072BC;
	}
	
	#toc h4 {
		font-family: helvetica, sans-serif; color: #0072BC;
	}
	
	.menu {
		list-style-type: square; color: #0072BC; border: none; text-decoration: none;
	}
	
	.menu a:link {
		border: none; text-decoration: none; color: #0072BC;
	}
	
	.menu a:hover {
		border: none; text-decoration: none; color: #1C4974;
	}
	
	.menu a:visited {
		border: none; text-decoration: none; color: #0072BC;
	}
	
	.menu li {
		list-style-type: square;
	}

/* class instead of id for toc */

	.toc {
		width: 45%; float: right; padding: 20px; margin: 5px 0px 5px 15px; font-family: helvetica, sans-serif; background-color: #E9F6FF; border: 1px dashed #1C4974; border-radius: 10px; 
	}

	.toc p {
	  color:#0072BC; font-size:16px;
	}
	
	.toc h3 {
		font-size: 18px; font-weight: 900; font-family: helvetica, sans-serif; color: #1C4974; margin: 0px auto;
	}
	
	.toc h4 {
		font-size: 18px; font-weight: 900; font-family: helvetica, sans-serif; color: #0072BC;
	}	
	
	@media only screen and (max-width: 600px) {
	
	.toc {
		width: 100%; float: none; margin: 20px auto; padding: 10px;
	}
	
	#toc {
		width: 100%; float: none; margin: 20px auto; padding: 10px;
	}
}

/* For Related articles boxes */

    .readMore {
    	.display: inlineblock; float: right; width: 30%; padding: 10px 5px; margin-left: 5px; text-align: center; color: #fff; background-color: #1C4974;
    }
    
    .readMore a:link {
    		border: none; text-decoration: none; color: #FFF;
    	}
    .readMore a:visited {
    		border: none; text-decoration: none; color: #FFF;
    	}
    .readMore a:hover {
    		border: none; text-decoration: none; color: #FFF;
    	}
    .readMore a:active {
    		border: none; text-decoration: none; color: #FFF;
    	}
    	
    @media only screen and (max-width: 600px) {
    	
    	.readMore {
    	.display: inlineblock; float: none; width: 80%; padding: 10px 5px; margin: 5px auto; text-align: center; color: #fff; background-color: #1C4974;
    	}
    
	}

/*simple quote stylesheet border top bottom*/
	
	.pullquote {
		display: block; font-style: italic; font-size: 1.5em; margin: 10px auto; width: 90%; padding: 10px; border-top: 3px solid #404144; border-bottom: 3px solid #404144; float: none; color: #1C4974;
	}
	
/* Used to float an image or sidebar right or left */

	.right {
	  float: right; width: 40%; margin-left: 15px;
	}
	
	.left {
	  float: left; width: 40%; margin-right: 15px;
	}

/* For smaller screens */
  
  @media only screen and (max-width: 600px) {
		.pullquote {
				display: block; font-style: italic; font-size: .9em; margin: 10px 20px 10px 0px; width: 90%; padding: 10px; border-top: 3px solid #404144; border-bottom: 3px solid #404144; float: none; color: #1C4974;
		}
			
		.right {
			float: none; width: 100%; margin: 10px auto;
		}
	
		.left {
			float: none; width: 100%; margin: 10px auto;
		}
}

/* Sidebars */

.sidebarhdrPS {
		background-color: #0072BC; margin: 0px; padding: 10px; font-weight: bold; font-family: ariel, helvetica, sans-serif; width: 100%;
	}
	
  .sidebarhdrPS h4 {
		color: #E9F6FF; font-weight: bold; font-family: ariel, helvetica, sans-serif;
	}
  
	.sidebarPS {
		border: 1px solid #0072BC; border-radius: 0px; background-color: #E9F6FF; font-weight: bold; color: #0072BC; padding: 0px; width: 98%; margin: 0px auto; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	
	.sidebarPS p {
	  padding: 0px 20px;
	}
  
  .sidebarPS strong {
		color: #0072BC; font-family: Arial, Helvetica, sans-serif;
	}
	
/* BREAKOUT BOX STYLE THAT BLEEDS TO SIDES */
	
	.sidebarFullWidth {
		position: relative; left: -30px; margin-right: -60px; color: #fff; padding: 20px 30px; width: auto; box-shadow: none; font-family: Tahoma, Verdana, Segoe, sans-serif; background-color: #E9F6FF;
	}
	
	.sidebarFullWidth h3 {
		color: #1C4974; margin-top: 5px !important;
	}
	
	.sidebarFullWidth p strong {
		color: #000;
	}

/* NOTE: CODE FOR PODCAST THAT DOESN'T FLOAT RIGHT OR LEFT: */

  .side {
		color: #404144; width: 95%; margin: 0px auto; display: inline-block; font-family: ariel, helvetica, sans-serif;
	}
	
	.line {
		background-color: #0072BC; height: 1px; margin-top: 20px;
	}
	
	.side ul {
		padding-left: 20px; font-size: .85em; font-style: italic; margin: 10px 15px 10px 15px;
	}
	
	.side h3 {
		padding: 15px; color: #0072BC; text-align: center;
	}
	
	.side h4 {
		color: #0072BC; text-align: center; margin-top: 20px; margin-bottom: 20px; font-weight: bold;
	}
	
	.side p {
		font-size: .85em; caption-side: bottom; padding: 10px 5px 0px 5px;
	}
	@media only screen and (max-width: 600px) {
		.side {
			margin: 20px auto 20px auto; width: 300px; display: block;
		}
	}
	
	.pod {
		width: 97%; background-color: #0072BC; border-radius: 25px; padding: 20px; display: flex; justify-content: center; align-items: center; margin: 0px auto;
	}
	
/* Podcast. Rounded borders, logo inserted. */
	.floatright {
	  width: 45%; float: right; margin: 0px 0px 20px 20px;
	}
	
	.podborder {
	  width: 100%; padding: 0px 10px 10px 10px; border: 2px solid #0072BC; border-radius: 30px;
	}
	
	.center {
	  display: block; margin-left: auto; margin-right: auto; width: 50%; padding-top: 10px;
	}
	
	@media only screen and (max-width: 600px) {	
		.floatright {
			float: none;
			width: 100%;
			margin: 0px auto 20px auto;
		}
	}
	
/* Used for reference notes at the bottom of articles */

	#footnote {
		font-size: .9em; font-family: Ariel, Helvetica, sans serif; background-color: #f4f5f6; margin: 0px auto; padding: 10px;
	}

	#endnote {
		font-size: .9em; font-family: Ariel, Helvetica, sans serif; background-color: #f4f5f6; margin: 0px auto; padding: 10px;
	}
	
/* The "Top" button that allows you to go back to the top of the page */

		#TopBtn {
		  display: none; /* Hidden by default */
		  position: fixed; /* Fixed/sticky position */
		  bottom: 20px; /* Place the button at the bottom of the page */
		  right: 30px; /* Place the button 30px from the right */
		  z-index: 99; /* Make sure it does not overlap */
		  border: none; /* Remove borders */
		  outline: none; /* Remove outline */
		  background-color: #1C4974; /* Set a background color */
		  color: #fff; /* Text color */
		  cursor: pointer; /* Add a mouse pointer on hover */
		  padding: 15px; /* Some padding */
		  border-radius: 10px; /* Rounded corners */
		  font-size: 18px; /* Increase font size */
		}

		#TopBtn:hover {
		  background-color: #404144; /* Add a dark-grey background on hover */
		}
		
@charset "utf-8";
	/* This contains the hidden content. */
	
	.hideRevealContainer {
		display: none; position: relative; animation: revealDown 0.4s;
	}
	
	.moreButtonContainer {
		display: none;
	position: relative;
	animation: revealDown 0.4s;
	}
	@keyframes revealDown{
		from{
			top: -25px;
			opacity: 0;
		}
		to{
			top: 0;
			opacity: 1;
		}
	}

/* toggle buttons for dropdown sidebars */


#moreBtn, #moreBtnTwo, #moreBtnThree {
  position: relative;
  background-color: #1C4974;
  color: #f4f5f6;
  padding: 5px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
}
#moreBtn-checkbox, #moreBtnTwo-checkbox, #moreBtnThree-checkbox {
  display: none;
}
#moreBtn-checkbox:checked + #moreBtn:after, #moreBtnTwo-checkbox:checked + #moreBtnTwo:after, #moreBtnThree-checkbox:checked + #moreBtnThree:after {
  content: "Close";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1C4974;
  color: #f4f5f6;
  padding: 5px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
}