/*===============================================
	Styles for the main body and debugging
=================================================*/
body {
	background: #d5ea99 url("../img/page_bg.jpg") repeat-x;
	font: normal 12px Arial, sans-serif;
	height: 100%;
	margin-top: 15px;
	padding: 0;
}

.center {
	text-align: center;
}

.fixer {
	clear: both;
	line-height: 1px;
}

.debug {
	clear: both;
	color: #777777;
	font-size: 10pt;
	text-align: center;
}

.success {
	background-color: #f0f0f0;
	border: 1px solid #6699cc;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

	.success span {
		color: #000095;
		font-size: 18px;
		margin: 0;
		padding: 0;
	}

.error {
	background-color: #f0f0f0;
	border: 2px solid #cc9966;
	padding: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

	.error span {
		color: #950000;
		font-size: 18px;
		margin: 0;
		padding: 0;
	}


/*===============================================
	Container the content sits inside of
=================================================*/
#page_container {
	background: transparent url("../img/page_container_bg.jpg") repeat-y;
	margin: 0px auto;
	padding: 0;
	width: 775px;
}


/*===============================================
	Top corners of the page container
=================================================*/
#page_top {
	background: transparent url("../img/page_container_top.jpg") no-repeat;
	line-height: 7px;
	margin: 0;
	padding: 0;
	width: 775px;
}


/*===============================================
	Styles for the home/events/date tab
=================================================*/
#banner_tab {
	background: transparent url("../img/banner_tab.jpg") no-repeat left;
	float: right;
	height: 26px;
	margin: 0;
	padding-right: 10px;
	width: 239px;
}

	#banner_tab a {
		color: #333;
		font: bold 12px Arial, sans-serif;
		text-decoration: none;
	}

		#banner_tab a:hover {
			text-decoration: underline;
		}

	#banner_tab p {
		color: #333;
		font: bold 12px Arial, sans-serif;
		line-height: 26px;
		margin: 0;
		padding: 0 10px 0 5px;
		text-align: right;
	}

#banner_tab2 {
	float: right;
	height: 26px;
	margin: 0;
	padding-right: 10px;
	width: 400px;
}
	#banner_tab2 a {
		color: #333;
		font-weight: bold;
		text-decoration: none;
	}

		#banner_tab2 a:hover {
			text-decoration: underline;
		}

	#banner_tab2 p {
		color: #333;
		line-height: 26px;
		margin: 0;
		padding: 0 5px 0 5px;
		text-align: right;
	}


/*===============================================
	Style for the PAWS banner and menu
=================================================*/
#banner {
	background: transparent url("../img/banner.jpg") no-repeat right;
	clear: both;
	height: 152px;
	margin: 0;
	padding-left: 10px;
	width: 756px;
}

	
	/*===============================================
		Styles for the main menu
	=================================================*/
	#banner #menu {
		float: right;
		margin: 66px 1px 0 0;
		padding: 0;
	}

	#banner #menu li {
		float: left;
		list-style: none;
		margin-right: -1px;
		padding: 0;
		width: 100px;
	}

		#banner #menu li a {
			color: #fff;
			display: block;
			font: bold 14px Arial, sans-serif;
			height: 55px;
			margin: 0;
			padding: 30px 5px 0 5px;
			text-align: center;
			text-decoration: none;
			width: 90px;
		}

			#banner #menu li a.who {
				background: transparent url("../img/menu_who.jpg") no-repeat bottom;
			}

				#banner #menu li a.who:hover { background-position: top; }

			#banner #menu li a.adopt {
				background: transparent url("../img/menu_adopt.jpg") no-repeat bottom;
			}

				#banner #menu li a.adopt:hover { background-position: top; }

			#banner #menu li a.services {
				background: transparent url("../img/menu_services.jpg") no-repeat bottom;
			}

				#banner #menu li a.services:hover {	background-position: top; }

			#banner #menu li a.save {
				background: transparent url("../img/menu_save.jpg") no-repeat bottom;
			}

				#banner #menu li a.save:hover {	background-position: top; }

			#banner #menu li a.join {
				background: transparent url("../img/menu_join.jpg") no-repeat bottom;
			}

				#banner #menu li a.join:hover {	background-position: top; }


/*===============================================
	Styles for the container the content is inside of
=================================================*/
#content_container {
	margin: 0;
	padding: 5px 0 20px 5px;
	width: 765px;
}

	img.animal_image {
		background-color: #888;
		margin-bottom: 0;
		padding: 2px;
	}


	/*===============================================
		Styles for right column container.
	=================================================*/

	#content_container .right {
		float: right;
		margin-right: 9px;
		width: 241px;
	}

		/*===============================================
			Styles for the modules
		=================================================*/
		#content_container .right .module {
			background: transparent url("../img/module_top.jpg") no-repeat top left;
			margin-bottom: 5px;
			padding: 0 10px 5px 10px;
			padding-top: 1px;
		}

			#content_container .right .module .header {
				background-color: #747678;
				color: #f4f4f4;
				display: block;
				font: normal 16px Arial, sans-serif;
				line-height: 26px;
				margin: 6px 0 0 -3px;
				padding-left: 10px;
				text-transform: lowercase;
			}

			#content_container .right .module h1 {
				color: #454545;
				display: block;
				font: bold 14px Arial, sans-serif;
				margin: 0;
				padding: 0;
				text-transform: lowercase;
			}

			#content_container .right .module a {
				color: #329dd5;
				font: normal 12px Arial, sans-serif;
				text-decoration: none;
			}

				#content_container .right .module a:hover { text-decoration: underline; }

			#content_container .right .module p {
				color: #454545;
				font: normal 12px Arial, sans-serif;
				margin: 0;
				padding: 5px 0 5px 0;
			}

			#content_container .right .module ul {
				color: #454545;
				font: normal 12px Arial, sans-serif;
				margin: 0;
				padding: 5px 0 5px 20px;
			}

				#content_container .right .module ul li {
					margin: 0;
					padding: 0;
				}

	/*===============================================
		Styles for main container.
	=================================================*/

	#content_container .main {
		float: left;
		margin: 5px 5px 25px 0;
		padding: 0 10px 30px 10px;
		width: 480px;
	}

		#content_container .main h1 {
			background: transparent url("../img/header_paw.jpg") no-repeat;
			color: #292c31;
			font: normal 18px Arial, sans-serif;
			line-height: 21px;
			margin:  0 0 5px 0;
			padding: 0 0 0 28px;
			text-transform: lowercase;
		}

		#content_container .main h2 {
			color: #292c31;
			font: bold 13px Arial, sans-serif;
			margin:  0;
			padding: 5px 0 5px 0;
			text-transform: lowercase;
		}

		#content_container .main h3 {
			border-bottom: 1px solid #ccc;
			color: #ccc;
			font: bold 20px Arial, sans-serif;
			margin:  0;
			padding: 5px 0 0 0;
			text-transform: lowercase;
		}

		#content_container .main p {
			color: #454545;
			font: normal 12px Arial, sans-serif;
			margin: 0;
			padding: 5px 0 5px 0;
		}

		#content_container .main a {
			color: #329dd5;
			font: normal 12px Arial, sans-serif;
			text-decoration: none;
		}

			#content_container .main a:hover { text-decoration: underline; }

		#content_container .main ul {
			color: #454545;
			font: normal 12px Arial, sans-serif;
			margin: 0;
			padding: 5px 0 5px 35px;
		}

			#content_container .main ul li {
				margin: 0;
				padding: 0;
			}

				#content_container .main ul li .light_text {
					color: #888;
				}


		/*===============================================
			Styles for the adoption containers
		=================================================*/
		#content_container .main .adopt_container {
			background: transparent url("../img/adopt_container_bg.jpg") repeat-y;
			margin: 5px 0 0 0;
			padding: 0;
			width: 490px;
		}

			#content_container .main .adopt_container .top{
				background: transparent url("../img/adopt_container_top.jpg") no-repeat;
				line-height: 4px;
				margin: 0;
				padding: 0;
				width: 490px;
			}

			#content_container .main .adopt_container .bottom{
				background: transparent url("../img/adopt_container_bottom.jpg") no-repeat bottom;
				clear: both;
				line-height: 6px;
				margin: 0;
				padding: 0;
				width: 490px;
			}
			
			#content_container .main .adopt_container .left{
				background: transparent url("../img/adopt_green_paw.jpg") no-repeat center;
				float: left;
				margin: 0;
				padding: 0;
				width: 242px;
			}

			#content_container .main .adopt_container .right{
				background: transparent url("../img/adopt_red_paw.jpg") no-repeat center;
				float: right;
				margin: 0;
				padding: 0;
				width: 242px;
			}

			#content_container .main .adopt_container h1 {
				background: none;
				border: none;
				color: #292c31;
				font: bold 16px Arial, sans-serif;
				padding: 1px 10px 5px 5px;
				margin: 0;
			}

			#content_container .main .adopt_container p {
				color: #292c31;
				font: normal 12px Arial, sans-serif;
				padding: 5px 10px 5px 5px;
				margin: 0;
			}

			#content_container .main .adopt_container a {
				color: #292c31;
				text-decoration: underline;
			}

				#content_container .main .adopt_container a:hover { text-decoration: none; }

			#content_container .main .adopt_container .thumb {
				border: 1px solid #292c31;
				margin: 5px;
			}

		/*===============================================
			Styles for the event detail containers
		=================================================*/
		#content_container .main .event_detail_container {
			float: left;
			margin: 10px 5px 0 0;
			padding: 5px;
			width: 225px;
		}

		/*===============================================
			Styles for the animal detail containers
		=================================================*/
		#content_container .main .animal_detail_container {
			float: left;
			margin: 10px 5px 0 0;
			padding: 5px;
			width: 225px;
		}


		/*===============================================
			Styles for the events containers
		=================================================*/
		#content_container .main .event_container {
			border: 1px solid #c4c8cc;
			margin: 10px 0 5px 0;
			padding-bottom: 5px;
			width: 490px;
		}

			#content_container .main .event_container.blue {
				background: #8ec5e3 url("../img/event_bg_blue.jpg") repeat-x bottom;
			}

			#content_container .main .event_container.tan {
				background: #ebe6c0 url("../img/event_bg_tan.jpg") repeat-x bottom;
			}

			#content_container .main .event_container a.event_content {
				cursor: pointer;
				display: block;
				float: left;
				text-decoration: none;
				width: 490px; 
			}

				#content_container .main .event_container a.event_content.tan {
					background: transparent url("../img/event_content_tan.jpg") no-repeat;
					background-position: top right;
				}

				#content_container .main .event_container a.event_content.blue {
					background: transparent url("../img/event_content_blue.jpg") no-repeat;
					background-position: top right;
				}

				#content_container .main .event_container a.event_content .event_header {
					border: none;
					color: #292c31;
					float: left;
					font: bold 14px Arial, sans-serif;
					margin: 0;
					padding: 5px 0 5px 10px;
					width: 339px;
				}

				#content_container .main .event_container a.event_content .date {
					border-right: 1px solid #292c31;
					color: #292c31;
					float: left;
					font: normal 12px Arial, sans-serif;
					margin-top: 5px;
					padding: 0 10px 0 5px;
				}

				#content_container .main .event_container a.event_content span.event_p {
					background: transparent url("../img/event_p_arrow.jpg") no-repeat;
					background-position: top left;
					color: #292c31;
					float: left;
					font: normal 12px Arial, sans-serif;
					margin: -5px 0 0 70px;
					padding: 5px 0 5px 15px;
					text-align: justify;
					width: 330px;
				}

					#content_container .main .event_container a.event_content .event_p.blue{
						background: transparent url("../img/event_blue_arrow.jpg") no-repeat 0px 8px;
					}

					#content_container .main .event_container a.event_content .event_p.tan{
						background: transparent url("../img/event_tan_arrow.jpg") no-repeat 0px 8px;
					}


	/*===============================================
		Styles for the full width content container
	=================================================*/
	#content_container .main_full {
		margin: 5px 0 0 0;
		padding: 0 10px 0 10px;
		width: 735px;
	}

		#content_container .main_full h1 {
			background: transparent url("../img/header_paw.jpg") no-repeat;
			color: #292c31;
			font: normal 18px Arial, sans-serif;
			line-height: 21px;
			margin:  0;
			padding: 0 0 0 28px;
			text-transform: lowercase;
		}

		#content_container .main_full h2 {
			color: #292c31;
			font: bold 13px Arial, sans-serif;
			margin:  0;
			padding: 5px 0 5px 0;
			text-transform: lowercase;
		}

		#content_container .main_full p {
			color: #454545;
			font: normal 12px Arial, sans-serif;
			margin: 0;
			padding: 5px 0 5px 0;
		}

		#content_container .main_full a {
			color: #329dd5;
			font: normal 12px Arial, sans-serif;
			text-decoration: none;
		}

			#content_container .main_full a:hover { text-decoration: underline; }


/*===============================================
	Style for the bottom of the page container
=================================================*/
#page_bottom {
	background: transparent url("../img/page_container_bottom.jpg") no-repeat;
	clear: both;
	line-height: 12px;
	margin: 0;
	padding: 0;
	width: 775px;
}