/*        
    Test colors (triadic):
        #8C1D05 - dark red for title text
        #058C1D - use darker shade for subtitles?
        #1D058C - use darker shade for regular text? (#120358?)
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-y: scroll;
}

body {
  height: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 100%;
  color: #120358;
  background-color: white;
}

#header {
    margin-bottom: 30px;
    text-align: center;
}

#site-title {
  font-weight: bold;
  font-size: 2.5em;
  text-align: center;
  color: #8C1D05;  /* dark red */
}

#site-description {
  width:       75%;
  margin:      15px auto 25px auto;
  font-size:   1.3em;
  line-height: 1.5em;
  text-align:  left;
  color:       #120358;
}

#content {
    text-align: center;
}

#float-frame {
  width: 800px;
  margin: 0 auto;
}

#float-frame::after {
  content: "";
  clear:   both;
  display: block;
}

.floater {
  float: left;
  width: 25%;
  text-align: center;
}

.text-box {
  font-size: 1.3em;
  line-height: 1.5em;
}

.float_image {
    width: 100px;
    height: 100px;
}

@media screen and (max-width: 800px) {
    #float-frame {
        width: 75%;
    }
    
    .floater {
        width: 100%;
    }
    
    .text-box {
      margin-bottom: 15px;
      border-bottom: 1px solid #AAAAAA;
    }
}

@media screen and (max-width: 525px) {
    #site-description {
        width: 95%;
    }
    
    #float-frame {
        width: 95%;
    }
}

a { text-decoration: none; }
a:link { color: blue; }
a:active { color: blue; }
a:visited { color: blue; }
a:hover { color: red; }

a.menu:link { color: white; }
a.menu:active { color: black; }
a.menu:visited { color: white; }
a.menu:hover { color: red; }

/*============== Paragraph styles =================*/
p { margin: 12px 0px 12px 0px; }

p.centered { text-align: center; }

p.footnote {
    text-indent: -1em;
    margin-left:  1em;
    font-size:    0.9em;
    line-height:  1.1em;
}

.indent-line1 { text-indent: 20px; }
.no-top-margin { margin-top: 0; }
.no-bottom-margin { margin-bottom: 0; }
.no-vert-margins { margin-top: 0; margin-bottom: 0; }

.in1 { margin-left: 20px; }
.in2 { margin-left: 40px; }
.in3 { margin-left: 60px; }
.in4 { margin-left: 80px; }
/*===========================================================*/