/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333333;
	background: url('images/background.jpg'); 
        background-repeat: repeat-x; 
        background-color: #43515c;
}	

a {
	color: #000066;
	text-decoration: none;
}

a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

p {
	padding: 10px;
}

div.clear {
  clear:both;
}

div#wrapper {
	width: 830px;
	margin:0 auto;
}

div#header {
	width: 829px;
	height: 207px;
	background: url('images/header.png'); 
        background-repeat: no-repeat;
}

div#content {
  position: relative;
  /*position: absolute; -- this is what is causing the footer to not be at the bottom, but when i remove the comment tags the bg shows but the footer is hidden and not in its place.*/
	background: url('images/main_bg.png');
        background-repeat: repeat-y;
}

div#main_content h1 {
  font-size: 13px;
  color: #711010;
  padding-left: 15px;
  padding-top: 4px;
  /*width: 277px;*/
  clear:both;
  width: 600px;
  height: 29px;
  margin-left: -1px;
  background: url('images/heading_bg.jpg');
  background-repeat: no-repeat;
}

div#main_content {
	float: left;
	width: 671px;
	margin-top: 15px;
	padding-left: 20px;
}

#main_content a:hover {
	color: #333333;
}

/* INDEX SPECIAL */
#main_content_i h1 {
  font-size: 13px;
  color: #711010;
  padding-left: 15px;
  padding-top: 4px;
  /*width: 277px;*/
  width: 600px;
  height: 29px;
  margin-left: -1px;
  background: url('images/heading_bg.jpg') no-repeat;
}

#main_content_i {
	float: left;
	width: 660px;
	height: 510px;
	margin-top: 10px;
	padding-left: 20px;
  	background: url('images/shea_intro.jpg') top right no-repeat;
}

#main_content_i2 {
	float: left;
	width: 380px;
	font-size: 13px;
	margin-top: 15px;
}

#main_content_i2 p{
	margin: 5px 0 0 10px;
}

/* About the books */
div#main_content .cover {
	float: left;

}
#main_content .info {
	margin-right: 15px;
}


#menu {
	float: left;
	width: 139px;
	padding-top: 15px;
}

#menu ul li {
	margin-left: 19px;
	font-size: 12px;
	list-style-type: none;
}

#menu ul li a {
	display: block;
	height: 31px;
	padding-top: 8px;
	padding-left: 8px;
}

#menu ul li a:hover {
	height: 31px;
	color: #FFFFFF;
	padding-top: 8px;
	padding-left: 8px;
	background: url('images/m_over.png') no-repeat;
}

#footer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 31px;
  color: #E2DDB5;
  background: url('images/footer.png') no-repeat;
}