
/* the 5000 padding on the bottom extends white space at end of page and stops the site hopping left and right as scroll bar pops in or out. i.e., this way, the scroll bar is usually showing, but it alleviates the bouncing back and forth as you navigate the site */
body {
margin:0px;
padding:17px;
color:#000;
background:#FFF;
}






/* Make HTML5 layout elements block elements for older browsers */
header, nav, main, art{
 display:block;
}


/* wrap dictates the whole page, pretty much. The "auto" centers it */
#wrap {
      max-width:100%;
      width:690px;
      margin:0 auto;
      background:#FFF;
}


#main {
      max-width:100%;
      width:600px;
      margin:0 auto;
      background:#FFF;
}

#footer {
      max-width:100%;
      width:600px;
      margin:0 auto;
      background:#FFF;
}


/* manages main header */
#header {
        float:left;
    }
    
/* manages rotating header image placement */
#headerimage {
        float:left;

    }


#art {
   clear:left;
   padding: 0; margin: 0px 0px 25px 0px;
   text-align: center; 
}


/* styles the horizontal red line */

hr {
    width: 100%;
    height: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #D51320;
    border: 0 none;
}



/* styling darker paragraphs with h2 tag */

h2 {
    letter-spacing: normal;
    line-height: 27px;
    font-family: 'Inter', Helvetica, sans-serif;
    font-weight:700;
    padding-bottom: 5px;
    font-size: 1.35em;
}


 
/* This section is much of the font stuff.  NOTE, for main body text, using Google fonts, I also liked Lustria. */
p {
    letter-spacing: normal;
    line-height: 24px;
    font-family: 'Inter', Helvetica, sans-serif;
    font-weight:500;
    font-size: 1.25em;
    padding-bottom: 10px;
	 }

p  {color:#000000}
p.italic {font-style:italic}
p {text-align: left}


 }



/* === Style classes */

/* Use class="centerall" in p or div to center
 all text and images inside the element */
.centerall {
 text-align: center; 
 
/* Clear any floating elements */
 clear: both;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto }
    
img {
    margin-bottom:20px;
    margin-top:20px;
    max-width:100%;
    height:auto;
 }

img.borderfix {
    text-align:left;
    margin-bottom:0px;
    margin-top:6px;
    max-width:100%;
    height:auto;
 }
 
/*Unvisited links*/
a:link{
   color:#D51320;
   text-decoration:none;
}

/*Visited links*/
a:visited{
   color:#D51320;
   text-decoration:none;
}