/* the hardship of this design was the fact that I wanted two different backgrounds for my content area, so the next two divs were meant to set up where each would go to make sure the text would flow on top of them without me having to do two tables which would lead to a non seamless text */


div#top {
	background: url(images/content_19.gif) no-repeat;
	color: white;
	height: 201px;
}


div#center {
	background: url(images/content_21.gif) repeat-y;
	width: 911px;
}

div#centertext {
	color: white;
	width: 860px;
	padding-left: 30px;
	padding-right: -5px;
	margin-top: -190px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: lighter;
}

/*  another set of different texr csss to different links roll overs I wanted within the page */


.footertext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	line-height: 40px;
}

.footertext a {
	color: #FFFFFF;
}

.footertext a:visited {
	color: #FFFFFF;
}

.footertext a:hover {
	color: #000000;
}

.footertext a:active {
	color: #FFFFFF;
}

.links {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
}

.links a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
}

.links a:visited {
	color: #FFFFFF;
}

.links a:hover {
	color: #ff0000;
}

.links a:active {
	color: #FFFFFF;
}

.bottommenu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 40px;

}

.bottommenu a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
}

.bottommenu a:visited {
	color: #FFFFFF;
}

.bottommenu a:hover {
	color: #000000;
}

.bottommenu a:active {
	color: #FFFFFF;
}

/* the button I added to make sure he would float to the right of the page */


.signup {
	position: relative;
	left: 500px;
}

div#memberContainer {
	width: 911px;
}

div.member {
	height: 243px;
	width: 451px;
	background: url(images/content_25.gif) no-repeat;
	color: white;
	padding-left: 10px;
	padding-top: 10px;
	margin-top: 10px;
	float: left;
}

div#top img.profile {
	float: right;
	clear: both;
	position: relative;
	top: -40px;
	margin-bottom: 0px;
	right: 40px;
	margin-left: 40px;
}

div#top img.header {
	position: relative;
	clear: both;
	margin-left: 20px;
	margin-top: 20px;
}

/*  this was the image that would "float" on top of the image I had set up to be a header - title on the page */


div.member img.profile {
	float: right;
	clear: both;
	position: relative;
	top: -40px;
	margin-bottom: -40px;
	right: 40px;
	margin-left: 40px;
}

/*  this was the code for the header - title of the page */

div.member img.header {
	position: relative;
	clear: both;
	margin-left: 10px;
	margin-top: 10px;
}

div.member div.memberText {
	padding-right: 45px;
	padding-left: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 100;
	line-height: 18px;
}

/*  this next is for the links within a specific part of my page, since I had different background collors, I wanted roll-overs to be different within each background */


.memberText a {
	color: #FFFFFF;
}

.memberText a:visited {
	color: #FFFFFF;
}

.memberText a:hover {
	color: #990000;
}

.memberText a:active {
	color: #FFFFFF;
}

/*  the next two codes is for custom bullets */


	ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

	li {
	background: url(images/bullet.png) left 5px no-repeat;
	padding-left: 15px;
	margin-bottom: 12px;
	}


/*  do this to make sure p tags wont mess up the css */

	p {
	margin: 0;
	padding: 0;
}