* {
  box-sizing: border-box;
}

body {
  font-size:18px;
  font-weight:normal;
  line-height:140%;
  background-color: #A98238;
  color: black;
  margin: 0;
  padding:0;
}

h1	{ font-size:32px;  margin:2px 0 10px 0; }
h2	{ font-size:23px;  margin:2px 0  4px 0; }
h3	{ font-size:20px;  margin:2px 0  8px 0; }


body	{ font-family: Inter, sans-serif; }

h1, h2, h3 {
	  font-family: 'Roboto Slab', serif;
}



a, a:link, a:visited, a:hover {
  color:darkred;
  font-weight: normal;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}



ul {
  margin:10px 0 10px -30px;
  list-style:square;
}

li {
  padding-left: 8px;
  text-indent: -8px; 
  margin-bottom:2px;
  list-style-position:inside;
  font-weight:normal;
  line-height:150%;
}


form {
  padding:0;
  margin:0;
}


.cursive {
  font-family: Comic Sans MS, Comic Sans, Bradley Hand, cursive;	/* "Bradley Hand" on Apple is closest to Comic Sans */
}


img.scalingimg {
  width:  100%;
  height: auto;
}



/*============================*/
/*   PAGE LAYOUT and COLORS   */
/*============================*/

.col-container {
  width:100%;
  display: table;
}

.col {
  display: table-cell;
}



.col-pad {
  padding: 5vw;
}

.col-main {
  width: 100%;
  margin:0;
  padding:0;
  text-align:left;
  vertical-align:top; 
  line-height:180%;
}




.flex-container {
  display: flex;
  align-items: center;
}



.background-body,
.background-banner {
  background-color: #A98238;
}


.background-menu,
.background-pad,
.background-main,
.topnav	 {
  background-color: rgba(255,232,191,.9);
}

.color-menu {
  color:white;
}


/*=========================================================================*/

.textbanner {
  font-weight:bold;
  letter-spacing:0.35em;
  color:white;
  line-height:140%;
}

a.textbanner:link, a.textbanner:visited {
  color:white;
  text-decoration:none;
}

a.textbanner:hover {
  color: rgba(84,65,28,1);
  text-decoration:none;
}




.toplogo {
  background-image: url("/images/row1-60.jpg");
  border-bottom:3px solid #573D24;
  width:  100%;
  height: 63px;
  vertical-align:top;
  top: 0;
}



.searchbox {
  vertical-align: top;
  padding-left: 4px;
  width: 80px;
  background-color: #FFE8BF;
  color: black;
  font-size:15px;
  font-weight:bold;
  width:100px;
  line-height: 24px;
  border: 1px solid #563D1E;
  border-radius: 8px;
}


input.searchbox[type=text] {
  transition: width .35s ease-in-out;
}
input.searchbox[type=text]:focus {
  width: 300px;
  background-color: white;
  color: black;
}




/*============================*/
/*   GENERAL CONTENT STYLES   */
/*============================*/

.columns		{ column-width:400px; column-gap:40px; padding-bottom:15px; }

.columns.cols1		{ column-count:1; }
.columns.cols2		{ column-count:2; }
.columns.cols3		{ column-count:3; }


.block			{ clear:both; break-inside:avoid; }
div.block::after	{ clear:both; }


hr			{ border: 5px solid rgba(169,130,56,.2);
			  border-radius: 4px;
			  margin-bottom:12px;
}


hr.orig			{ border:1px solid black;
			  margin-bottom:12px;
}



.item1			{ padding:10px 0  5px 0; clear:left; }
.item2			{ padding: 0px 0 10px 15px; }


.button {
  background-color: rgba(169,130,56,.7);
  border: none;
  color: white;
  font-weight:bold;
  padding: 5px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 10px;
  line-height: 130%;
  margin-left: 4px;
}

a.button {
  color: white;
  text-decoration: none;
}




.full-page-text	{
  display: inline-block;
  text-align: left;
}



.more			{ margin-top:6px; margin-bottom:8px; }



.contentstart		{ margin:0; padding:0; margin-top:15px;}
.content		{ margin-right:5px; }					/* DELETE when switched over to new design */
.letter			{ font-size:22px; font-weight:bold; }

.imageL			{ float:left;  border:1px solid #666666; margin-right:8px; margin-top:8px; }
.imageR			{ float:right; border:1px solid #666666; margin-left: 6px; }




/*===================*/
/*   FOOTER STYLES   */
/*===================*/

.foot			{ font-size:14px; text-align:center; margin-top:4px; }
.foot a			{ font-size:14px; }
.foot a:visited		{ text-decoration:none;      color:darkred; }
.foot a.hover		{ text-decoration:underline; color:darkred; }

.feed			{ vertical-align:middle; padding-bottom:10px; }



/*=================*/
/*   BLOG STYLES   */
/*=================*/

.blog hr {
  margin-bottom:25px;
}

.blog h2 {
  padding:0 0 2px 10px;
}

.blog h3, .blog h3 a {
  color:black;
  padding:0;
}

.blog p {
  padding:0 0 5px 10px;
}

.blog a:hover {
  text-decoration:underline;
}

.blog .section {
  padding:15px 0 10px 2px;
}


.blog .postedby {
  padding-bottom:0;
}

.blog .blogsearchbox, .blog .go {
  margin-top:15px;
}

.blog .blogsearchbox {
  margin-left:6px;
  vertical-align:middle;
}

.blog .go {
  vertical-align:top;
}

.blog .bio {
  font-family: Comic Sans MS, Comic Sans, Bradley Hand, cursive;
  line-height: 170%;
  padding:4px;
}

.blog .bio p {
  padding-left:0;
}

.blog .bioimage {
  float: left;
  margin: 0 8px 2px 0;
}

.blog .imageL {
  margin: 8px 8px 2px 0;
}

.blog .imageR {
  margin: 6px 0 2px 6px;
}

.blog .floatR {
  float:right;
  margin:0 0 15px 20px;
  padding:4px; 
  width:300px;
  border:1px solid rgba(221,202,166,1);
}




/*=========================================================================*/


/* Used in d/article when text is split over muliple pages */

.nextblock		{ margin:20px 20px 20px 0; text-align:right; }
.nextbox		{ border:1px black solid; padding:3px; }
.nexttext		{ font-size:12px; font-weight:bold; line-height:200%; }
a.nextlink		{ font-size:12px; font-weight:bold; text-decoration:underline; }



/* Used in d/article  */

.video			{ margin:0px 10px 6px 0; float:left; clear:both; }



.alphabet		{ font-size:18px; }



/*=======================*/
/*   Primitive classes   */
/*=======================*/

.left			{ text-align: left; }
.right			{ text-align: right; }
.center			{ text-align: center; }

.bold			{ font-weight: bold; }
.normal			{ font-weight: normal; }
.italic			{ font-style:  italic; }

.black			{ color: black; }
.darkred		{ color:darkred; }


.float-right		{ float:right; }
.float-left		{ float:left;  }


.text-small		{ font-size: 17px; }		/* Will be adjusted for mobile */
.text-medium		{ font-size: 18px; }
.text-large		{ font-size: 19px; }
.text-xlarge		{ font-size: 20px; }



/*===================*/
/*   NAVBAR STYLES   */
/*===================*/
/* https://codepen.io/RazorXio/pen/xrwMXJ
*/

.topnav {
  overflow: hidden;
  width:100%;
  text-align:center;
  z-index: 6;
}


.topnav a {
  display: inline-block;			/* WAS block when using float:left */
  margin: 0;
  color: black;
  font-weight:bold;
  text-align: center;
  text-decoration: none;
}


.topnav a {
  z-index: 9;
  transition: background 0.3s linear;		/* transitions background color of icon */
}



.topnav a			{ border-right:  1px solid rgba(221,202,166,1); }	/* medium brown */
.topnav a			{ border-bottom: 1px solid rgba(221,202,166,1); }	/* medium brown */
.topnav a:first-child		{ border-left:   1px solid rgba(221,202,166,1); }	/* medium brown */

.line-below-navbar		{ background-color: rgba(221,202,166,1);		/* medium brown */
				  height:1px;
				  width:100%;
}

.topnavxx			{ background-color: rgba(255,232,191,1); }
.topnav a.active		{ background-color: rgba(221,202,166,1); }		/* medium brown */
.topnav a:hover:not(.active)	{ background-color: rgba(84,65,28,1);    }		/* dark brown */


.topnav a.active		{ color: black; }
.topnav a:hover:not(.active)	{ color: white; }
.topnav a.active:hover		{ color: white; }


.topnav .icon {
  display: none;
}



/*==============================*/
/*   Switch to hamburger menu   */
/*==============================*/

@media screen and (max-width: 800px) {

  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a:first-child {
    float: left;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {
    position: relative;
  }

  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top:   0;
  }

  .topnav.responsive a {
    float:   none;
    display: block;
    text-align: left;
  }

}




/*============================================*/
/*   ADJUSTMENTS for DIFFERENT SCREEN SIZES   */
/*============================================*/

@media screen and (min-width: 1251px) {

  .textbanner		{ font-size: 36px; }
  .topnav a		{ font-size: 18px; padding: 8px 10px; }

  .full-page-text 	{ min-width: 800px; max-width: 800px; }

  .col-pad		{ padding:  5vw; }
  .floatR		{ display:  block; }
  .toplogo		{ position: sticky; }
}


/*============================================*/

@media screen and (min-width: 1101px) and (max-width: 1250px) {

  .textbanner		{ font-size: 36px; }
  .topnav a		{ font-size: 18px; padding: 8px 10px; }

  .full-page-text 	{ min-width: 800px; max-width: 800px; }

  .col-pad		{ padding:  5vw; }
  .floatR		{ display:  block; }
  .toplogo		{ position: sticky; }
}


/*============================================*/

@media screen and (min-width: 901px) and (max-width: 1100px) {

  .textbanner		{ font-size: 28px; }
  .topnav a		{ font-size: 16px; padding: 6px 8px; }

  .full-page-text	{ min-width: 700px; max-width: 800px; }

  .col-pad		{ padding:  5vw; }
  .floatR		{ display:  block; }
  .toplogo		{ position: sticky; }
}


/*============================================*/

@media screen and (min-width: 701px) and (max-width: 900px) {

  .textbanner		{ font-size: 26px; }
  .topnav a		{ font-size: 15px; padding: 6px 8px; }

  .full-page-text 	{ min-width: 500px; max-width: 700px; }

  .col-pad		{ padding:  2vw; }
  .floatR		{ display:  none; }
  .toplogo		{ position: static; }
}


/*============================================*/

@media screen and (max-width: 700px) {

   body			{ font-size: 16px; }
   h1			{ font-size: 26px; }
   h2			{ font-size: 21px; }
   h3			{ font-size: 18px; }

  .text-small		{ font-size: 15px; }
  .text-medium		{ font-size: 16px; }
  .text-large		{ font-size: 17px; }
  .text-xlarge		{ font-size: 18px; }

  .hptitle		{ font-size: 18px; }

  .textbanner		{ font-size: 26px; }
  .topnav a		{ font-size: 13px; padding: 6px 6px; }

  .full-page-text 	{ min-width:250px; max-width:500px; }

  .col-pad		{ padding:  1vw; }
  .floatR		{ display:  none; }
  .toplogo		{ position: static; }
}


/*============================================*/
/*   Styles for print... not sure if needed   */
/*============================================*/

@media print {

  body { margin:0px; padding:0px; background-image:none; }

  body,span,div,p,th,td,h1,h2,h3,h4,ul,ol { color:black; }
}