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

	/* Inline image styles */
	.cap {
		font-size: .85em; font-family: "nunito sans", helvetica, sans-serif; vertical-align: top; text-align: center; padding: 0; margin: 0px 0px 10px 0px; color: #404144; border-bottom: 1px solid #7e6e66;
	}
	
	/* For the first image next to skyscraper. Class="firstimage cap" */
	.firstimage {
	  width: 98%; margin: 0px auto;
	}
	
	.cap p {
		margin: 5px; padding: 10px; text-align: left;
	}

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

	.floatright {
	  float: right; width: 50%; margin-right: 10px;
	}


	@media only screen and (max-width: 600px) {
		.cap {
			display: block;
			float: none;
			margin: 0px auto;
		}
		.side {
			margin: 20px auto 20px auto; width: 300px; display: block;
		}
		.sidebyside {
			width: 100%; float: none; display: block;
		}
		.floatleft {
			display: block;
			float: none;
			margin: 0px auto;
		}
		.floatright {
			display: block;
			float: none;
			margin: 0px auto;
		}
		
	}
	
	.sidebyside {
		width: 48%; float: left; display: block; display: inline-block; margin-bottom: 20px;
	}
	
	.sidebyside img {
	  width: 100%;
	}
	
	.clearfloat {
		clear: both;
	}

	.clearleft {
		clear: left;
	}

	.clearright {
		clear: right;
	}

/*Pull quote styles*/
	
	.pullquoteBrown {
		display: block; margin: 10px auto; width: 90%; padding: 10px; float: none; color: #7E6E66;
	}
	
	.pullquoteBrown p {
	  font-weight: bold; font-style: italic; font-size: 1.5em; 
	}

	.pullquoteRed {
		display: block; margin: 10px auto; width: 90%; padding: 10px; float: none; color: #E71D13;
	}
	
	.pullquoteRed p {
	  font-weight: bold; font-style: italic; font-size: 1.5em; 
	}
	
	.topbottomborder {
		
		border-top: 3px solid silver; border-bottom: 3px solid silver; margin: 10px; 
	}
	
	.leftrightborder {
		
		border-left: 3px solid silver; border-right: 3px solid silver; margin: 10px; 
	}
		

	.quotesig {
			font-size: 14px; color: 404144;
		}

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

/* For smaller screens */
  
  @media only screen and (max-width: 600px) {
	
		.pullquoteBrown p {
		  font-size: .9em; 
		}
		
		.pullquoteRed p {
		  font-size: .9em; 
		}
		
		.topbottomborder {
			
			border-top: 1px solid #404144; border-bottom: 1px solid #404144; 
		}
		
		.leftrightborder {
			
			border-left: 1px solid #404144; border-right: 1px solid #404144; 
		}
			

		.quotesig {
				font-size: 11px; color: 404144;
			}

		.right {
		  float: none; width: 95%; margin: 0px auto;
		}
		
		.left {
		  float: none; width: 95%; margin: 0px auto;
		}
	}


/* Sidebar */
	.sidebarhdrCSTD {
		background-color: #7E6E66; margin: 0px; padding: 10px; font-weight: bold; font-family: ariel, helvetica, sans-serif; width: 100%; color: #fff;
	}
	
  .sidebarhdrCSTD h4 {
		color: #ffffff; font-weight: bold; font-family: ariel, helvetica, sans-serif;
	}

	.sidebarhdrCSTD p {
		color: #ffffff; font-weight: bold; font-family: ariel, helvetica, sans-serif;
	}
  
	.sidebarCSTD {
		border: 1px solid #7E6E66; color: #404144; 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);
	}

	.sidebarCSTD p {
	  padding: 0px 20px;
	}
  
  .sidebarCSTD strong {
		color: #7E6E66; font-family: Arial, Helvetica, sans-serif;
	}

	.sidebarCSTD ul li {
		list-style: none;
		margin-left: 20px;
		margin-right: 20px;
	}
	
	@media screen and (max-width: 600px) {
		.cap {
			font-size: .8em;
		}
		.sidebyside {
			width: 100%; float: none; display: block;
		}
		
		.floatleft {
	  float: none; display: block; width: 100%;
		}
	}

/* Menu button styles */
.Menubutton {
	border: 2px solid #7E6E66; background-color: #7E6E66; color: #fff; margin: 3px 5px; padding: 5px; font-size: 18px; font-weight: bold; width: 250px; height: 50px; font-family: ariel, helvetica, sans serif;
	}
	
.Menubutton:hover {
	border: 5px solid #7E6E66; background-color: #fff; color: #7E6E66; margin: 3px 5px; padding: 5px; font-size: 18px; width: 250px; height: 50px; font-family: ariel, helvetica, sans serif;
	}

.Menucontainer {
  width: 97%;
  height: 500px;
  margin: 0px auto 0px 20px;
  padding: 10px;

}

.center {
  margin: 0px 0px 0px 10px;

}

/* Back to the menu bar in product articles */

.back2menu {
	border: 2px solid #7E6E66; background-color: #7E6E66; color: #fff; margin: 3px 5px; padding: 5px; font-size: 18px; font-weight: bold; width: 100%; height: 50px; font-family: ariel, helvetica, sans serif;
	}
	
.back2menu:hover {
	border: 5px solid #7E6E66; background-color: #fff; color: #7E6E66; margin: 3px 5px; padding: 5px; font-size: 18px; width: 100%; height: 50px; font-family: ariel, helvetica, sans serif;
	}
	
/* For a link bar in product pages just below the product info */
a.linkbar:link, a.linkbar:visited {
  background-color: #7E6E66;
  color: white;
  width: 100%;
  padding: 0px 10px;
  margin: 0px auto;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.linkbar:hover, a.linkbar:active {
  background-color: #7E6E66;
}

/* Smaller screens Menu buttons */
@media only screen and (max-width: 600px) {
  
    .Menubutton {
	border: 2px solid #7E6E66; background-color: #7E6E66; color: #fff; margin: 3px 3px; padding: 3px; font-size: 14px; font-weight: bold; width: 75px; height: 75px; font-family: ariel, helvetica, sans serif;
	}
	
	.Menubutton:hover {
		border: 3px solid #7E6E66; background-color: #fff; color: #7E6E66; margin: 3px 3px; padding: 3px; font-size: 14px; width: 75px; height: 75px; font-family: ariel, helvetica, sans serif;
		}
		
	.Menucontainer {
	  width: 97%;
	  margin: 0px auto;
	  padding: 10px;
	}
  
}

/* 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: #7E6E66; 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: #7E6E66; text-align: center;
	}
	
	.side h4 {
		color: #7E6E66; 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: #7E6E66; border-radius: 25px; padding: 20px; display: flex; justify-content: center; align-items: center; margin: 0px 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: #7E6E66; /* 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 */
}