/* This stylesheet contains styles for elements and classes that are intended to be applied throughout the website pages. If needed, individual property values can be overriden on a specific page or a stylesheet specific to that page. Generally an inline style -- set right in the html element, trumps everything else. */

/* Setting the body margin to 0 lets the content take up the whole page.  Otherwise there will be a small margin around the edges where the background shows though. In the page a background can be set using the logo-background class. It could also be set using an inline style on the body tag. The advantage of the class is that it allows the filename to be changed once in this stylesheet, rather than in each page.*/  

body {margin:0;}

.logo-background {background-image: url('pictures/othtcbg.gif');}

/* The "whitespace div is used to limit the width of content. The white background lets it cover any page background. Use use of max-width allows the width to shrink for smaller-width screens. Any containers within this div, if defined as a % of this div, will then shrink along with this container. The max-width can be overridden with an inline style on the div element in the page html. Setting margin:auto; centers this div. Default paddingprovides consistency among pages. */ 

.whitespace  {
   box-sizing: border-box;
   max-width:900px;
   margin:auto;
   background-color:white;
   padding:10px 30px 30px;
}

/* An optional border can be added. */
.border {border:1px solid #ddd;}

/* Heading and paragraph fonts and link styles are defined for consistency. I used the li tag for bulleted list items. This will automatically display a bullet before each item. The list elements are contained with a ul tag. */

.whitespace h1, .whitespace h2, .whitespace h3 {font-family: Calibri, Geneva, sans-serif;}

.whitespace p, .whitespace li {font-family: "Century Gothic", Geneva, sans-serif;}
.whitespace a {
  text-decoration:none; 
  font-weight:bold;
  color:#53ac6f; 
}  
.whitespace a:hover {
  text-decoration: underline;
}

/* The following row and column CSS is from the W3Schools CSS tutorial -- CSS Responsive, RWD Grid View & RWD Media Queries. It is intended to provide for various responsive column designs. I have only defined one row width, at 100%, but a container can be used to constrain the width. The box-sizing: border-box; style lets the specified width include any padding. The columns float left in their row container, and the floats are cleared after each row.  The columns widths need to add up to 100%, or at least no more than that. */

[class*="row-"]  {
  box-sizing:border-box;
  margin:0 auto;    
}   

.row-1 {width:100%;}

[class*="row-"]::after {
  content: "";
  display: table;
  clear: both;
}

[class*="col-"] {
  box-sizing:border-box;
  float: left;
  padding: 10px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

div.gallery {
  box-sizing:border-box;
  float: left;
  padding: 10px;
  width:25%;  
}

div.gallery img {
  display:block;
  width: 100%;
  height: auto;
}

div.desc {
  padding: 5px;
  text-align: center;
}
@media only screen and (max-width: 800px) {  
  div.gallery {
    width: 50%;
  }
}
@media only screen and (max-width: 550px) {  
 div.gallery {
    width: 100%;
  }
}

/* I altered the above row/columns styles somewhat for the page footer. The footer-container sets a full-width background color for the footer. It is intended to be applied after the end of any whitespace or other limited-width container. A font is defined for the footer content. A footer-row is defined to limit and center the width of the footer content.  I added a second footer-row in the html code to hold the copyright information at the bottom.  I adjusted the margins and padding in the code. */ 

.footer-container  {
  background-color:#629d75;
}
.footer-container p {
 color:white;
 font-size: 14px;
 font-family: Arial, sans-serif;
}   

.footer-row {
  box-sizing:border-box;
  max-width:1000px;
  margin:auto;
}
/* The previously-defined col-4 style is used for three columns, but I added a footer-column style to modify the padding. The ".footer-row .footer-column" CSS selector makes sure that the style has a higher "score" than col-4 to ensure the override. The 5% allows the padding to adjust with the page width. Padding defined as % is the % of the elements container, so here it will be 5% of the row div width. There is additional space, resulting from default paragraph margins, that could be adjusted if desired. */

.footer-row .footer-column{
  padding-left:5%;
  padding-right:5%;
  padding-bottom:0;
}

img.rrca {
  display:block;
  margin:auto;
  max-width:100px;
}
.footer-row::after {
  content: "";
  display: table;
  clear: both;
}

/* These styles are for a button at the bottom of a page that allows the user to jump back to the page top. It is used in conjunction with a button element in the html code and a script that displays the button when the page is scrolled down and then jumps back to the top when the button is clicked.  The script is in a .js file, and the page html code must contain the reference to the script. The icon in the button is from the fontawesome website, and the html page head section must contain the script to access the icon in my "kit" on fontawesome. */
 
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: hsl(157, 100%, 25%, 0.7);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#topBtn:hover {
  background-color: hsl(0, 0%, 30%, 0.7);
}