#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:10%;
  background:#999;
  color: #000;
 }
 #header h1 {
  text-align: center; 
  color:black;
 }
#header img {
  float: left;
 }

#left-sidebar{
  position:absolute;
  top:10%;
  left:0px;
  width:22%;
  height:85%;
  background:#ccc;
  color: #000;
  overflow:auto;
 }

#left-sidebar h4{
 text-align:left;
 color: green;
 margin-bottom:0em;
 margin-left:0.5em;
 }

#left-sidebar p{
 white-space: pre;
 line-height: 120%;
 text-indent:10px;
 text-align: left;
 margin-top: 0.1em;
 }

#left-sidebar ul{
  list-style-position:outside;
  margin: 1em  0 1em -1em;
  line-height: 200%;
 }


#content{position:relative;
	top:10%;
	left:22%;
	width: 62%;
        height: 85%;
  background:#fff; 
 overflow:auto;
 padding-left:8%;
 padding-right:8%;
 }

#content h2{
	text-indent:50px;
}

#content ul{
	list-style-position:outside;
     	margin: 1em  0 1em -1em;
  	line-height: 200%;
}


#content ul.tight{
	list-style-position:outside;
     	margin: 1em  0 1em -1em;
  	line-height: 150%;
} 


.clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


html  {height: 100%; width: 100%;}
body  {
	height: 100%; 
	width: 100%;
	background:#ccc;
        margin: 0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
        overflow:hidden;
	}

#wrap {left: 0px;
	height: 100%; width: 100%;}


#main {
      padding-bottom: 0px;
      height:100%;
      }  /* must be same height as the footer */

#footer {position: relative;top:-7.88%;
	background:#999;
	margin-top: 0px; /* negative value of footer height */
	height: 7.88%;
	width: 100%;
	clear:both;} 

#footer h4{
  text-align:center;
  margin-bottom:0em;
 }

#footer p{
  margin-top:0em;
  text-align:center;
 }