@charset "UTF-8";

/* parks.css; 2/5/2021. c:\waparksllc\css */

/* For old browsers that don't know about new HTML5 tags, create those tags
   and set to start on a new line. I probably won't even use these new tags for now.*/
address, article, aside, footer, header, main, nav, section {
   display: block;
}

/* Can set some values for tags being used, so we don't get effected by
   browser defaults.  */
html, body, h1, h2, h3, ul, li, a, p,
address, article, aside, footer, header, main, nav, section {
  /* padding: 0;
     margin:  0;  */
}

/* When you use padding and width on an element, you usually should use "box-sizing: border-box;", which 
   counts padding and border in total width and height. This will change box size, and layout, but they say
   it keeps the math simple - not sure. */

* {
    box-sizing: border-box;
  }

body { 
  font-family: Arial;
  color: black;
  background: #f3f3f3;  /* light grey */
  border: 0px solid black;


}

.container {
   margin: 5px;
   border: 0px solid red;
}

.header_area {
  max-width: 1175px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;    /* vertically */
  justify-content: space-between;
  background-color: #ffffff; /* white */
  border-left: 1px solid #EAE0CC;
  border-right: 1px solid #EAE0CC;
}

/* Logo will usually be in the left of the header_area. */
.logo_area {
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  width: 400px;
  margin: 5px;
  margin-left: 20px;
  padding: 5px;
  /* background-color: #EAE0CC; */
  border: 0px solid green;
}

/* The slogan can be a small amount of text with who, what, contact, etc. */
/* Will usually be in right side of header_area. */
.slogan_area {
  font-family: Georgia, serif;
  font-style: italic;
  text-align: center;
  width: 600px;
  margin: 5px;
  margin-right: 40px;
  margin-bottom: 0px;
  padding: 0px;
  border: 0px solid green;
}

.slogan_area h2 {
  line-height: 1.3;
  margin-bottom: 5px;
}

.slogan_area p {
   margin-top: 5px;
   line-height: 1.5;
   font-size: 120%;
   font-style: normal;
   font-weight: bold;
}

/* this lets us put a space area in middle of line */
span.space10 {
  display: inline-block;
  width: 10px;
  height: 1px;
  /* border: 1px solid red; */
}

/* directly under header_area */
.nav_bar_area {

}

/* usually right under the nav bar, if used. */
.photo_area {
  max-width: 1175px;
  margin: auto;         /* auto centers in container */
  padding: 5px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #ffffff; /* white */
  border-top: 3px solid #EAE0CC;
  border-left: 1px solid #EAE0CC;
  border-right: 1px solid #EAE0CC;
}

.photo {
    padding: 4px;
    margin: 0px;
    flex: 1;
}

.main_area {
  max-width: 1175px;
  background-color: #FFF;
  margin: 0px auto 0 auto;
  line-height: 2.0;
  padding: 5px 20px;
  display:flex;
  border: 0px solid red;
  border-left: 1px solid #EAE0CC;
  border-right: 1px solid #EAE0CC;

  font-family: Helvetica, sans-serif;
  font-size: 125%;

}

.main_col_1 {
  flex: 1;
  
  margin-right: 20px;
  padding: 10px 20px;
  background: #f3f3f3;   /* light grey */
  border: 0px solid #EAE0CC;

}

.main_col_2 {
  flex: 1;
  margin-left: 20px;
  padding: 10px 20px;
  background: #f3f3f3;
  border: 0px solid #EAE0CC;
}

.main_col_3 {

}

.footer_area {
  max-width: 1175px;
  font-family: Georgia, serif;
  font-style: italic;
  text-align: center;

  margin: 0px auto 0px auto;   /* auto centers horozontally in container */
  padding: 1px;                /* need at least a 1px to preven margin collapse */
  background-color: #EAE0CC;
}