/* ============> Reset Styles (from meyerweb.com)  <============= */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:					0;
	padding:				0;
	border:					0;
	outline:					0;
	font-size:				100%;
	vertical-align:			baseline;
	background:			transparent;
}

body {
	line-height:			1;
}

html {
	height:					100.5%;
	min-height:			100.5%;
	}

/*
ol, ul {
	list-style:				none;
}
*/

blockquote, q {
	quotes:					none;
}

/* remember to define focus styles! */
:focus {
	outline:					0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration:		none;
}
del {
	text-decoration:		line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse:		collapse;
	border-spacing:		0;
}

iframe {
	border:					0px !important;
	}

/* -----------------------------------------------------> DEV HELPERS / ALERTS STYLING
*/

.LocalHelper {
	position:				absolute;
	top:						35px;
	left:						10px;
	padding:				5px;
	text-align:				left;
	border:					1px solid #555;
	background:			#3d5;
	line-height:			1.3;
	font:						10px/14px arial;
	}

.StageAlert {
	position:				absolute;
	top:						0px;
	left:						0px;
	padding:				5px 20px;
	text-align:				left;
	background:			#f00;
	color:					#fff;
	font:						10px/14px arial;
	}

/* ======================================> Website Styling
*/

body {
	font-family:			helvetica,arial,sans-serif;
	background:			url(../img/zoobg2011.jpg) center bottom repeat-x fixed;
	height:					100%;
	}

hr {
	display:					none;
	}

#wrapper {
	margin:					0 auto;
	width:					1040px;
	height:					100%;
	}

#main {
	float:						left;
	width:					1040px;
	padding-bottom:		100px;
	}

#body {
	position:				relative;
	float:						left;
	width:					836px;
	margin-left:			204px;
	display:					inline;
	}

#header {
	position:				fixed;
	float:						left;
	width:					836px;
	height:					119px;
	margin-bottom:		10px;
	}

ul#menu {
	float:						left;
	width:					520px;
	margin-top:			92px;
	}

ul#menu li {
	display:					inline;
	margin-right:			20px;
	}

ul#menu li a {
	font-size:				14px;
	line-height:			18px;
	font-weight:			bold;
	text-decoration:		none;
	}

#header h1 {
	display:					none;
	}

#header h2 {
	width:					276px;
	float:						left;
	font-size:				14px;
	line-height:			16px;
	font-weight:			bold;
	margin-top:			45px;
	margin-left:			10px;
	display:					inline;
	}

#header h2 a {
	text-decoration:		none;
	padding:				0 2px 0 1px;
	}

a#themeSwitcher {
	float:						left;
	width:					30px;
	height:					22px;
	}

#content {
	padding-top:			119px;
	}

.article {
	float:						left;
	width:					797px;
	border-bottom:		1px solid #999;
	padding:				30px 0 20px 0;
	}

.pageimage {
	float:						left;
	width:					520px;
	margin-right:			10px;
	}

.pageimage img {
	margin-bottom:		10px;
	}

.pageimage h1 {
	font-size:				28px;
	line-height:			28px;
	}

.pageimage p {
	font-size:				12px;
	line-height:			16px;
	font-weight:			bold;
	color:					#999;
	}

.copy {
	float:						left;
	width:					267px;
	margin-bottom:		10px;
	}

.copy h3 {
	font-size:				14px;
	line-height:			16px;
	}

.copy p {
	color:					#999;
	font-size:				12px;
	line-height:			16px;
	font-weight:			bold;
	margin-bottom:		16px;
	}

.copy a {
	text-decoration:		none;
	padding:				0 2px;
	}

#footer {
	float:						left;
	clear:					left;
	width:					836px;
	}

#footer p {
	font-size:				12px;
	line-height:			16px;
	font-weight:			bold;
	margin-top:			50px;
	margin-bottom:		6px;
	}

#footer p a {
	text-decoration:		none;
	margin:					0 0 0 30px;
	}