/* global rule  */
div {
float: left;
clear: both;
}

#container {
background-color: papayawhip;
/*height: 1100px;*/
/* grow to fit all child objects */
width: 80%;
margin-bottom: 40px;
padding-bottom: 10px;
margin-left: 10%;
} 

.pagetitle {
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 90%;
margin-left: 5%;
float: left;
background-color: burlywood;
color: saddlebrown;
/* pixel px height and smaller 26 pt font */
font-size: 40pt;
text-align: center;
}

/* If I add padding --> must reduce width, cannot exceed 100% */
.menusystem {
	padding-top: 10px;
	background-color: pink;
	width: 55%;
	margin-left: 10%;
/*	height: 700px;*/
	margin-top: 10px;
	clear: none;
	padding-bottom: 15px;
}

.barmenu {
	background-color: whitesmoke;
	width: 50%;
	margin-left: 25%;
	margin-top: 8px;
	padding-top: 16px;
	padding-bottom: 20px;
	margin-bottom: 10px;
	clear: none;
	color: saddlebrown;
	font-size: 40pt;
	text-align: center;

}


p {
	color: saddlebrown;
	/* font size is points.  	*/
	font-size: 30pt;
	text-align: center;
	float: left;
	clear: both;
}

img {
	margin-top: 12px;
	width: 22%;
	center: true;
	text-align: center;
/*	this was the bug margin left was huge!  */
/*  margin-left: 66%;*/
	float: right;
	clear: none;
}


.maincontent {
background-color: whitesmoke;
color: saddlebrown;
/* mint green overides  */
margin-top: 10px;
margin-bottom: 40px;
margin-left: 10%;
margin-right: 10%;
padding-top: 40px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 40px;
font-size: 30pt;
text-align: center;
}