#body {
	/* move the sidebar to the right on the home page */
	background-position: right;
}

#main {
	padding: 40px 30px 20px 50px;
	width: calc(100% - 320px); /* 240 sidebar width + 80 padding */
}

#home_banners {
	position: relative;
	width: calc(100% + 80px); /* 80 padding */
	aspect-ratio: 2.36;
	margin: -40px -30px 40px -50px; /* cancel out the padding from the main div */
	background: #1B75BB;
	overflow: hidden; /* allows lining up all the banners for scrolling out of the frame */
}

#home_banners_inner {
	width: calc(100% * 8); /* #home_banners .banner should match this */
	position: relative;
}

#home_banners #banner_buttons {
	position: absolute;
	bottom: 8px;
	left: 15px;
	width: 22px;
	z-index: 20;
}

#home_banners #banner_buttons .previous {
	margin-right: 6px;
}

#home_banners .banner {
	float: left;
	width: calc(100% / 8);
	aspect-ratio: 2.36;
	position: relative;
	overflow: auto; /* prevents this div from inheriting home_banner_title's top margin */
}

#home_banners .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% - 32px); /* the image ends above the subtitle */
}

#home_banners .image img {
	width: 100%;
	height: 100%;
}

#home_banners .title {
	position: absolute;
	bottom: 16px; /* not sure why this isn't 32px; maybe something to do with the way the banner height is set as an aspect ratio of the width instead of the image height plus 32 */
	width: 100%;
	height: 53px;
	background: #000000;
	background-color: rgba(0, 0, 0, 0.7); /* this is like opacity but is not inherited */
	overflow: auto; /* prevents this div from inheriting home_banner_title p's top margin */
}

#home_banners .subtitle {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 32px;
	background: #333333;
	overflow: hidden; /* prevents this div from inheriting home_banner_subtitle p's top margin */
}

#home_review_quotes {
	width: 198px; /* 246 - 48 padding */
	height: 120px; /* giving this a fixed height avoids the page changing height for different lengths of quotes */
	padding: 24px 24px 0 24px;
}

#main, #sidebar {
	/* move the sidebar to the right on the home page */
	float: left;
}

