a {
   color: black;
   text-decoration: none;
   font-size: large;
   font-weight: bold;
   color: whitesmoke;
}
p {
	color: black;
	font-style: oblique;
}

body {
	text-align: center;				/* This is a hack for older browsers to center the page */
}

ul{
  
}

#headcontainer {
	margin: 0 auto;
	height: 65px;
}
#container {
	margin: 0 auto; 				/* This centers the page in modern browsers */
	text-align: left; 				/* This is a hack for older browsers to center the page */
	width: 100%; 	
	padding-top: 10px;
   padding-bottom: 10px;
  			/* This sets our total page width */
}

#header {
	width: 100%;					/* This sets the header to stretch the full page width */
}

#navigation li {
	display: inline; 				/* Make our navigation display in a line */
}

#content {
	float: right;					/* This causes the content to move to the right */
	width: 75%;					/* We need to set the width whenever we float an element */
}


#sidebar {
	float: left; 					/* This causes the sidebar to move to the left */
	width: 25%; 					/* We need to set the width whenever we float an element */
}


#footer {
	clear: both; 					/* This makes sure that the footer clears both the sidebar and content floats */
	width: 100%;
					/* This sets the footer to stretch the full page width */
}


/* 
 * For Demonstration Only
 * This code is just for the purpose of the demonstration to hightlight things so that you can see them 
 */


body {
	background-color: red; 
	color: black;
}
#headcontainer {
	background-color: yellow;
	}
#container {
	background-color: blue; 		/* Set the background of the container to the same as the #content area */
}
#header {
	background-color: white;
	height: 150px;
}
#content {
	background-color: blue; 
}
#sidebar {
	background-color: #CCCCCC;  
}
#footer {
	background-color: black;
	width: 100%;
}