/* This is a global style, it will effect every page */

body {
	color: #000;
	font: 12px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background : #78BADD url(images/bg_text.gif) repeat-y;
	}
	
/* This is the header area for the homepage */	
#Header {
	margin: 0;
	padding: 0;
	background: #FFE78A; 
	height: 200px;
	border-bottom: medium solid #EEBE03;
	}
	
/* This is the header area for the rest of the site, the difference is the height */	
#Header2 {
	margin: 0;
	padding: 0;
	background: #FFE78A;
	height: 150px;
	border-bottom: medium solid #EEBE03;
	}

/* The background is what gives us the blue and white with drop shadow area for the text  */	
#Container {
	width: 920px;
	margin: 0;
	padding: 0;
	background : #78BADD url(images/bg_text.gif) repeat-y;
	}
	
/* This controls the width of the text in the white area, changing the width is not advised */	
#MainContent {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	background : #fff;
	left: 80px;
	width: 500px;
	}

/* This controls that area where all the text links go and the color of the text in that area */	
#BlueContent {
	position: relative;
	float: right;
	left: 20px;
	color: #000000;
	margin: 0;
	padding: 0;
	text-align: left;
	background: #78BADD;
	width:270px; 
	}

/* This sets up the about us section, the content inside is set with the style below this one */	
#BottomSection {
	position: relative;
	margin: 0;
	padding: 0;
	background : #4E8CAD;
	border-top: medium solid #fff;
	}

/* The content for the About Us is controlled here, except for the address and contact info, see the next one for that */	
#BottomContent {
	position: relative;
	color: #fff;
	margin: 0;
	padding: 0 0 30px 0;
	left: 50px;
	width: 800px;
	}

/* The address and contact info in the footer is controlled here */	
.FooterText {
	margin: 0;
	padding: 20px 0 0 0 ;
	left: 60px;
	text-align: center;
	font: 12px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	}


	
	
/* Some general styles for spacing */		

/* if you see 4 numbers like in the padding below, the pattern  is top - right - bottom - left */	
/* in LogoPadding the logo is moved down 10 pixels, with 5 pixels of padding on the right, nothing on the bottom and, 5 pixels from the left side. */	
.logoPadding {
	margin: 0;
	padding: 10px 5px 0 5px;
	}
	
/* This sets the bullet in the navigation */	
.HomeNavigation {
	margin: 0;
	padding: 0;
	list-style: disc url(images/bullet_blue.gif);
	}

/* With copy on a blue background, this will make the links white */	
.WhiteLink {
	color: #000000;
	}

/* On the homepage, this is used for the headlines, it will also create the 1 pixel line under it */	
.BlueHeader {
	color: #4E8CAD;
	font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	border-bottom: thin solid #4E8CAD;
	}

/* Sometimes it is easier to listo ut the event as an unordered list, but we don't want any bullets, so this removes the bullet. */	
ul.NewsEvents {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
	
/* I do not know where this is being used maybe the home page, but it creates a 1 pixel line with 15 pixels of space above and below it */		
.Divider {
	border-top: solid 1px #fff;
	margin: 15px 0 15px 0;
	}

/* Same as above, but this one is blue */	
.BlueDivider {
	border-top: solid 1px #4E8CAD;
	margin: 15px 0 15px 0;
	}	
	
/* Pet of the week name, yes, the name gets its own style */	
h3 {
	margin: 0;
	padding: 0;
	}

/* I removed all of the spacing around the paragraph tag seemed like a good idea, not sure if it was let me know if this causes problems */	
p {
	margin: 0;
	padding: 0;
	}

/* Now we don't have to set image border at zero for every image */
img {
	border: 0;
	}

/* on the adopt a cat and dog pages, looks good in Internet Explorer, but when people mouse over an animal this is what gives you the yellow background color */		
a.adopt:hover {
	background-color: #A9DBF5;
}