* { margin: 0; padding: 0;}

body {
	background-color: #c0d58e;/*#f5f5f5;*/
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;	
	/*
	why is body not cenetered?
		padding: 10px auto 20px auto;
	*/
	font-size: .82em;
	text-align: center;
	margin: 16px auto 23px auto;
}

.container, .containertop, .containerbot {
	color: #222;
	background: url(../images/rounded-outside_02.jpg) repeat-y;
	margin: 0px auto 0px auto;
	padding: 0 15px 0 55px;
	width: 589px;
	text-align: left;
}

.container {
  padding-bottom: 17px;
}
.containertop {background: url(../images/rounded-outside_01.jpg) no-repeat;}
.containerbot {background: url(../images/rounded-outside_04.jpg) no-repeat; padding-bottom: 10px;}

/* a <p> tag will mess up the margin below .boxmid
where do these extra margins come from?
 */
.boxtop {	background: url(../images/rounded-inside_01.jpg) no-repeat; }
.boxbot {	background: url(../images/rounded-inside_04.jpg) no-repeat; padding-bottom: 18px;}

.boxmid {	
	background: url(../images/rounded-inside_02.jpg) repeat-y;
	width: 430px;
	/* 467px; 410 hides the right border? */
	padding: 3px 30px 3px 18px;
}

.link {margin: 0; padding: 0;margin-top: 9px;}


h1, h2, h3, h4, h5 {
	color: #416B73;/*#527384;*/
}

a, A:visited, A:link, A:active {
	text-decoration: none;
	color:#A040BD;
} 

/* i can't get this to inset at all? odd */
h1 {
  padding: 20px 0 20px 0;
}
h2 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-size:15px;
	margin: 0px 5px 3px 7px;
/*  padding: 10px 0 10px 0;*/
	color: #222;
	font-weight: normal;
}

.title {
	font-size: 26px;font-weight: bold;

}