/* styles to use on small screens */
@media (max-width: 800px) {
	body {
	  background-color: #FFFFFF;
	}
        .c1 { /* make c1 into a header */
	  width: 100%;
	  height: 9em;
	  text-align: center;
	}
	.c2 { /* make content span 100% of width */
	  width: 100%;
	}
	.content p.par { /* define margins for content text */
          margin-left: 1.5em;
          margin-right: 1.5em;
	}
        hr.crimsonbar { /* adjust crimson bar */
          height: 0.2em;
          width: 95%;
	}
	img.mainpicture { /* format main picture */
	  display: inline;
	  max-height: 8em;
	  width: auto;
	  margin: 0.5em;
	}
	.headtitlelarge { /* supress large title on small screen */
	  display: none;
	}
        .c11 { /* container for main picture */
	  width: 15%;
	  height: 100%;
	  background-color: #990000;
	  float: left;
        }
        .c12 { /* container for name / title */
	  background-color: #990000;
	  height: 100%;
        }
        .c13 { /* container for menu button */
	  width: 15%;
	  height: 100%;
	  background-color: #990000;
	  float: right;
        }

	/**************************************/
	/* navigation styles for small screen */
	/**************************************/
	ul.simple-toggle { 
	  display: none; 
        }
	.anchor-link, #mobile-nav { 
	  display: block;
        }

  	ul.open { 
          display: block; 
	  background-color: #990000; 
	  color: #000000;
	  padding: 0;
	  margin: 0;
          list-style: none outside none; 
          position: absolute; 
          right: 0.75em; 
          top: 100%; 
          width: 150%; 
          z-index: 500;
        }

	ul.open li { 
	  display: block; 
	  margin-bottom: 0em;
          list-style: none; 
          text-align: center;
	  outline-style: inset;
	  outline-width: thin;
        }

	ul.open li a { 
	  display: block;
	  color: #FFFFFF;
	  background: #990000;
        }

	ul.open li a:hover { 
          color: #000000; 
          font-weight: bold;
        }
}

/* styles to use on large screens */
@media (min-width: 800px) {
        .container { /* format overall container */
          width: 800px;
          margin-left: auto;
          margin-right: auto;
	  margin-top: 30px;
	  margin-bottom: 10px;
	  border-width: 4px;
	  border-spacing: 0px;
	  border-collapse: collapse;
	  border-style: solid;
	  border-color: #000000;
	  min-height: 625px;
	}
	.c1 { /* make c1 be a side-bar */
	  width: 22.5%;
	}
	.c2 { /* make c2 fill up balance of width after side-bar */
	  width: 77.5%;
	}
	.headtitlesmall { /* supress small title on large screen */
          display: none;
        }
	img.mainpicture { /* format main picture */
	  max-width: 75%;
	  height: auto;
	  clear: both;
	  margin-left: 12.5%;
	  margin-right: 12.5%;
	  margin-top: 1.5em;
        }
}

/* styles to use on very large screens */
@media (min-width: 1143px) {
        .container { /* width adjustment for overall container */
	  margin-left: 15%;
	}
}
      
/* styles to use on very small screens */
@media (max-width: 400px) {
  .headtitlesmall { /* format for heading title on very small screen */
    font-size: 1.25em;
    line-height: 1.25em;
  }
  .anchor-link {
    font-size: 1.25em;
    line-height: 1.25em;
  }
}