body {
	margin: 0;
	background-position: top left;
	background-repeat: repeat-y;
}

#page {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

#header {
	padding-top: 30px;
	height: 80px;
	border: 0px solid red;
}

#header_logo {
	top: 35px;
	left: 15px;
	position: absolute;
	z-index: 1; /* this lets the downward-shifted logo overlap the left sidebar */
}

#header_title_bar {
	margin-right: 230px; /* this matches the width of the right sidebar, including padding */
	border: 0px solid blue;
}

#header_title_bar_main {
	margin-right: 24px; /* make room for the end cap */
	height: 37px; /* 48px minus the top padding */
	padding: 11px 30px 0 206px;
	background-color: #FFFFFF;
}

#header_title_bar_end {
	float: right;
	background-image: url(/images/templates/header_bar_right.png);
	background-position: right;
	background-repeat: no-repeat;
	width: 24px;
	height: 48px;
}

#header_shop_bar {
	position: absolute;
	top: 30px;
	right: 0px;
	width: 200px; /* this matches the right sidebar plus its left padding */
	border: 0px solid green;
}

#header_shop_bar_main {
	margin-left: 24px; /* make room for the end cap */
	height: 37px; /* 48px minus the top padding */
	padding: 11px 0 0 18px;
	background-color: #FFFFFF;
}

#header_shop_bar_end {
	float: left;
	background-image: url(/images/templates/header_bar_left.png);
	background-position: left;
	background-repeat: no-repeat;
	width: 24px;
	height: 48px;
}

#shop_link {
	float: left;
}

#cart_link {
	float: left;
	width: 26px;
	height: 22px;
	margin-left: 30px;
	margin-top: 2px;
	background-position: left;
	background-repeat: no-repeat;
}

#main {
	margin-left: 200px;
	margin-right: 230px;
	position: relative;
	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%;
}

#main_top_left {
	background-position: left;
	background-repeat: no-repeat;
	margin-right: 30px;
	height: 30px;
}

#main_top_right {
	float: right;
	background-position: right;
	background-repeat: no-repeat;
	width: 30px;
	height: 30px;
}

#content {
	/* overflow: visible; this is also set in the IE tweaks file */
	padding: 0px 30px 20px 30px;
	border: 0px solid black;
}

/*
	the sidebars need to appear before the #main container in the document so we can float them around the #main container
	the sidebars need to be floated, rather than absolute positioned, so they "push" the height of the #page container
	we need to push the height of the #page container so we can use a background image that goes to the full height of the page
	we can't use the body container for the background image because we need to center the page and have the background image move with the page
*/

#sidebar_left {
	float: left;
	width: 140px;
	position: relative;
	padding: 56px 30px 0px 30px;
	z-index: 0;
	border: 0px solid green;
}

#sidebar_right {
	float: right;
	width: 170px;
	position: relative;
	padding: 30px 30px 30px 30px;
	margin-bottom: 20px; /* this shows a minimum of background color below the sidebar */
	background-position: bottom left;
	background-repeat: no-repeat;
	z-index: 0;
	min-height: 367px; /* this makes room for the sillhouette even if there's very little content */
	border: 0px solid green;
}

#sillhouette {
	width: 172px;
	height: 387px;
	position: absolute;
	right: 85px;
	bottom: -20px;
	/*
	position: fixed;
	right: 85px;
	bottom: 0px;
	*/
	background-repeat: no-repeat;
	z-index: -1;
}

#language_icons {
	margin-top: 30px;
}

#footer {
	margin-top: 30px;
}

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

#menu li {
	list-style: none;
	margin-left: -42px; /* why do we need this? (IE7 doesn't) */
	padding: 0;
	width: 118px; /* this fixes the width of the button, and doesn't include the right end cap */
	height: 29px;
	margin-bottom: 4px;
	background-position: left;
	background-repeat: no-repeat;
}

#menu a {
	display: block;
	height: 22px;
	padding: 7px 25px 0 25px;
	margin-right: -15px; /* this pulls the right end cap out beyond the enclosing tag */
	background-position: right;
	background-repeat: no-repeat;
}

.button {
	float: left; /* this shrinks the button to its minimum width, but that means we need to put a reset tag after it */
	height: 29px;
	background-position: left;
	background-repeat: no-repeat;
}

.button a {
	display: block;
	height: 22px;
	padding: 7px 25px 0 25px;
	margin-right: -15px; /* this pulls the right end cap out beyond the enclosing tag */
	background-position: right;
	background-repeat: no-repeat;
}