html,body {
	position:relative;
	margin:0;
	padding:0;
	height:100%;
	width: 100%;
	font-family:Trebuchet MS,Sans Serif;
	font-size:13px;
}

html {display: table;}

body {
	display: table-cell;
	/*vertical-align: middle;*/
}

.container {
  position:relative;
  top:0px;
  height:100%;
  max-width:1000px;
  margin:0 auto;
  background:#ffffee;
  display: flex;
  flex-wrap: wrap
}

.header {
  position:absolute;
  width: 100%;
  top: 0px;
  height: 140px;
  display:block;  
  background:#eeeedd;
  border-bottom:5px solid #ddddcc
}

.header .headertext {
  position: absolute;
  top:10px;
  width: 60%;
  left: 20%;
  text-align: center;
  color: #a30000;
}

.header .headertext img {width:100%}

.header .headertext h1 {
	font:bold 1.5em Trebuchet MS,Sans Serif;
	/*text-shadow: 1px 1px #225522;*/
	padding-top:10px;
}


.header .headertext h2 {
	font:bold 1.2em Verdana,Sans Serif;
	/*text-shadow: 1px 1px #225522;*/
	padding-top:10px;
}


.header .headertext p {
  font:italic 1.1em Arial,Sans Serif;
  color:#663333;
}


.sub-menu {
  position:absolute;
  width: 16%;
  top: 145px;
  left: 0px;
  background:#ffffee;
  padding:0px 10px 30px 10px;
}

.sub-menu a {
    width:70%;
    margin:5px auto;
    color: #ffffff;
    background-color: #ff8383;
    padding: 2px 5px;
    text-decoration: none;
    font-size:13px;
    font-weight:bold;
    display:block
}

.sub-menu a:hover {
color: #d3d3ff
}

.sub-menu p {
    width:70%;
    margin:3px auto;
    color: #ff8383;
    background-color: #ffffee;
    padding: 15px 5px 3px 5px;
    text-decoration: none;
    font-size:13px;
    font-weight:bold;
    display:block
}

.content-text {
  position:absolute;
  width:68%;
  top:180px;
  left:24%;
  padding: 0px 2%;
  display: flex;
  flex-wrap: wrap;
  color:#604040
}

.content-text h2 {width:100%; text-align:center}
.content-text h3,h4 {width:100%; text-align:left; margin:10px 0}
.red {color:#b30000}
.green {color:#339933}
.size16px {font-size:15px; font-style:normal}


.content-img {
  width:auto;
  margin:0 auto;
  padding:10px;
}

.content p {
  font-family:Trebuchet MS, Sans Serif;
  font-size:14px;
  font-style:normal;
  font-weight:normal;
  text-align:justify;
  color:#604040
}

.content p,h1,h2,h3,h4 {margin: 5px 20px}
.content-text h2,h3,h4 {margin:5px 0px}
.content p a {text-decoration:none}

.content p a:hover {color:#990099}

.content .headlines a {
  text-decoration:none;
  font-size:16px;
  color:#ffffff;
  background:#77aa77;
  display:block;
  max-width:30%;
  margin:0 auto;
  padding:8px 15px;
  }

.content .headlines a:hover {background:#99cc99}

/* Desktop Styles */
@media only screen and (min-width:1024px) {

  .sub-menu {
  width:16%
  }

  .content-text {
  left:24%;
  width:68%
  }


}

/* Tablet Styles */
@media only screen and (min-width: 769px) and (max-width: 1023px) {
.content-text {
  left:24%;
  width:73%
  }

.content p {padding: 0 20px}

.content-img {
    width:auto;
    float:left;
    padding-bottom:20px
  }
}

.sub-menu {
  position:absolute;
  width: 24%;
  top: 200px;
  left: 0px;
  background:#ffffee;
  padding:0px 10px 30px 10px;
}

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

  .header .headertext {width:100%; left:0%}
    
  .header h1 {
  font-size:1.1em;
  padding:0 15px
  }

  .content-text {
  left:0%;
  width:94%;
  top:530px;
  padding: 0% 2%;
  text-align:justify
  }
  .content-img {
  width:100%;
  text-align:center;
  padding:10px 0px
  }
  .content-img img {
  width:90%;
  }
  .content p {padding: 0 20px}

  .sub-menu {
    width:96%;
    top:160px
  }

  .sub-menu a {
   width:40%;
   padding-left:10%;
   padding-top:2px;
   padding-bottom:2px
  }
  
  .sub-menu p {
    width:40%;
    padding-left:0;
}

@media only screen and (max-width: 600px) {
   .sub-menu a, .sub-menu p {width:40%;}
}

@media only screen and (max-width: 480px) {
   .sub-menu a, .sub-menu p {width:60%;}
}