body {
	background-color: #E5D4A1;
	padding: 0;
	margin: 0;
}

#page {
	position: relative; /* this is also set in the IE tweaks file */
}

#header_outer {
	/* we need this to have a background image, plus a background color behind that */
	background-color: #7F5C32;
}

#header {
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px 0 4px 0;
	background: url(/images/templates/header_bg.jpg);
}

#header_logo {
	width: 870px;
	margin: 0 auto;
}

#account_menu_outer {
	/* we need this to right-align the menu within a fixed-size area */
	width: 850px;
	margin: 0 auto 13px auto;
}

#account_menu {
	float: right;
	height: 30px; /* this is also set in the IE tweaks file */
}

#main_menu {
	height: 36px;
	border-top: 2px solid #564B35;
	border-bottom: 2px solid #564B35;
	background: url(/images/templates/menu_bg_0.jpg);
}

#main_menu_inner {
	/* we need this to center the menu items within a full-width background */
	width: 827px; /* is there any way to avoid hard-coding this? */
	margin: 0 auto;
}

#body_outer {
	/* we need this to limit the body width but let the background image fill the window width */
	background: url(/images/templates/body_bg.jpg) top repeat-x;
}

#body {
	position: relative;
	max-width: 960px;
	min-width: 850px;
	margin: 0 auto;
	padding: 10px;
}

#main {
	margin-right: 247px; /* make room for the sidebar and a 20px gutter */
	overflow: visible; /* this is also set in the IE tweaks file */
	border: 0px solid blue;
}

#main_inner {
	/* we need this so that reset divs in the content don't clear the sidebar */
	float: left;
	width: 100%;
}

#sidebar {
	float: right; /* we could use absolute positioning here, and then we could place the main div before the sidebar div in the template, but then there's no way to push the main div to an adequate height */
	width: 206px; /* this is wide enough for three thumbnail photos with 1px borders */
	margin-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	border-left: 1px dashed #564B35;
}

.sidebar_photo_label {
	width: 134px; /* this is the available width beside one thumbnail photo; use it to force text wrapping */
	margin-left: 0px;
	margin-right: 0px;
}

#feedback {
	margin-top: 10px;
}

#footer {
	border-top: 2px solid #564B35;
	max-width: 960px;
	min-width: 850px;
	margin: 0 auto; /* this is also set in the IE tweaks file */
	padding: 10px;
}

#account_menu ul {
	margin: 0;
	padding: 0;
}

#account_menu li {
	list-style: none;
	float: left;
	margin-left: 10px;
}

#account_menu a {
	float: left;
	text-align: center;
}

#main_menu ul {
	float: left; /* this minimizes the block width so we can center the menu */
	margin: 0;
	padding: 0 0 0 2px;
	background: url(/images/templates/menu_divider.jpg) top left no-repeat;
}

#main_menu li {
	list-style: none;
	float: left;
	margin: 0;
	padding: 0 2px 0 0;
	background: url(/images/templates/menu_divider.jpg) top right no-repeat;
}

#main_menu a {
	float: left;
	padding: 6px 10px 7px 8px;
}

#main_menu a:hover { /*, #main_menu a#active { */
	background: url(/images/templates/menu_bg_1.jpg);
}

img.main_menu_end {
	float: left;
	margin: 8px 8px 0 8px;
}

#footer_menu ul {
	margin: 0 auto 0 auto;
	padding: 0;
}

#footer_menu li {
	list-style: none;
	float: left;
	margin-right: 10px;
}

#footer_menu a {
	float: left;
	text-align: center;
}