html, body {
	/* this is required for our sticky footer */
	/* thanks http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ */
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

#page {
	/* this second tag is needed to put a min-width on the background, which we can't do in the body */
	min-width: 978px;
	background: #FFFFFF url(/images/templates/bg_header.png) center top no-repeat;
	/* this is required for our sticky footer */
	min-height: 100%;
	margin-bottom: -150px;
}

#page_inner, #footer_inner {
	position: relative;
	width: 780px;
	margin: 0 auto;
	padding: 0 98px 0 100px;
}

#header {
	position: relative;
	height: 325px;
	/* overflow: auto; this forces this div to respect the top margin of #header_logo, but we can't use it because then the left side of the header menu with the -8px left margin is cut off; instead we have to use top padding instead of top margin on the header logo */
}

#header_logo {
	width: 342px;
	padding: 56px 0 0 0;
	margin: 0 auto 30px auto;
}

#header_menu {
	margin-left: -8px; /* this aligns the default menu text even though the rollover menu text has a padded background */
	position: absolute; /* this moves the menu above the new items label; it will not be necessary when that's gone */
	z-index: 20; /* ditto */
	margin-top: -11px; /* ditto */
}

#header_networking {
	position: absolute;
	top: 230px;
	right: 0;
	text-align: right;
}

#header_networking img {
	margin-left: 4px;
}

#header_divider {
	/* this div is actually positioned outside the page div in the template so it can extend the full width of the window */
	position: absolute;
	top: 264px;
	width: 100%;
	height: 14px;
	background: url(/images/templates/bg_divider.png);
}

#header_search {
	position: absolute;
	top: 293px;
	right: 0;
	text-align: right;
}

#body {
	position: relative;
}

#footer_push {
	/* this is required for our sticky footer */
	height: 150px;
}

#footer {
	height: 150px;
	background: url(/images/templates/bg_footer.png) center bottom no-repeat;
}

.post_date { /* this is also used by the question and answer headings on the FAQ page */
	position: relative;
	left: -83px;
	margin-bottom: -55px; /* 67 - 55 = 12px above the top of the heading */
	width: 67px;
	height: 67px;
	background: url(/images/templates/bg_date.png) no-repeat;
	text-align: center;
	overflow: auto; /* this forces this div to respect the top margin of #header_logo */
}

.post_info {
	padding: 16px 0;
	margin: 20px 0;
	border-top: 8px solid #E9ECEC;
	border-bottom: 8px solid #E9ECEC;
}

.comment_button {
	position: relative;
	background: url(/images/templates/bg_comments_count_small_0.png) right no-repeat;
}

.comment_button:hover {
	background: url(/images/templates/bg_comments_count_small_1.png) right no-repeat;
}

.home .share_buttons, .post .share_buttons {
	margin-top: 2px;
	margin-bottom: -3px; /* tighten up some extra space in the AddThis toolbox */
}

.quickview .share_buttons {
	margin-bottom: 12px;
}

.addthis_button_email .at15t_email, .addthis_button_print .at15t_print {
	/* hide the default AddThis icons */
	display: none;
}

.at300b:hover {
	/* remove the default AddThis shading */
	opacity:1;
}

a.addthis_button_email {
	padding-left: 26px !important;
	padding-right: 5px !important;
	background-image: url(/images/templates/icon_email_0.png) !important;
	background-position: 5px 5px !important;
	background-repeat: no-repeat !important;
	margin-right: 4px;
}

a.button.print {
	padding-left: 26px !important;
	padding-right: 5px !important;
	background-image: url(/images/templates/icon_print_0.png) !important;
	background-position: 5px 5px !important;
	background-repeat: no-repeat !important;
	margin-right: 4px;
}

a:hover.addthis_button_email {
	background-image: url(/images/templates/icon_email_1.png) !important;
}

a:hover.button.print {
	background-image: url(/images/templates/icon_print_1.png) !important;
}

.quickview .addthis_button_email, .quickview .addthis_button_print {
	margin-right: 4px;
}

.quickview p img { /* this should apply only to the product photo in the quick view window */
	margin: 38px 0 33px 0;
}

.comment_button .comments_count {
	position: absolute;
	right: -.1em; /* this keeps the text centered when letter-spacing is added */
	top: 0;
	width: 55px;
	text-align: center;
}

.post_comments_count {
	position: relative;
	left: -60px;
	margin-bottom: -120px;
	width: 120px;
	height: 120px;
	background: url(/images/templates/bg_comments_count_large.png) no-repeat;
	text-align: center;
	overflow: auto; /* this forces this div to respect the top margin of #header_logo */
}

.post_comments_display {
	float: left;
	margin-left: 80px;
	width: 330px;
}

.post_comments_form {
	float: left;
	margin-left: 40px;
	width: 298px; /* 330 - padding */
	padding: 26px 16px;
	background: url(/images/templates/bg_divider.png);
}

.contact_form {
	width: 298px; /* 330 - padding */
	padding: 26px 16px;
	background: url(/images/templates/bg_divider.png);
}

.subscribe_form {
	width: 480px; /* 512 - padding */
	padding: 16px;
	background: url(/images/templates/bg_divider.png);
}

.features {
	margin-top: 24px;
}

.feature_colors {
	width: 160px; /* 188 - padding */
	height: 282px; /* 310 - padding */
	padding: 14px;
	background: url(/images/templates/bg_divider.png);
	margin-right: 8px;
}

.feature_colors .middle {
	background: #FFFFFF;
	height: 154px; /* 202 - padding */
	padding: 24px 10px;
	margin-top: 36px;
}

.feature_shop {
	width: 160px; /* 188 - padding */
	height: 282px; /* 310 - padding */
	padding: 14px;
	background: url(/images/templates/bg_feature_shop.png);
	cursor: pointer;
	margin-right: 8px;
}

.feature_shop .middle {
	margin-top: 22px;
}

.feature_gallery {
	width: 316px; /* 384 - padding */
	height: 282px; /* 310 - padding */
	padding: 14px 34px;
	background: url(/images/templates/bg_feature_gallery.png);
}

.feature_gallery .middle {
	background: #FFFFFF;
	margin: 28px auto 10px auto;
	width: 255px;
	height: 187px;
	overflow: hidden; /* this lets us crop off the images, since we're not creating separate image sizes for this */
}

.feature_gallery .buttons {
	width: 255px;
	margin: 0 auto; /* this aligns with the centered image */
}

.feature_gallery .buttons_inner {
	float: right; /* this moves the buttons to the right */
}

.feature_subscribe {
	width: 348px; /* 384 - padding */
	height: 49px; /* 69 - padding */
	padding: 10px 18px;
	background: #D0FF68;
	margin-right: 8px;
}

.feature_pinterest {
	width: 384px;
	height: 69px;
}

#popup_background {
	display: none;
	position: absolute;
	top: 50px; /* this is just for testing and will be overridden when we show the popup */
	left: 50px; /* this is just for testing and will be overridden when we show the popup */
	/* this inherits to all the children, which we don't want:
	opacity: 0.97;
	filter: alpha(opacity=97);
	*/
}

#popup_content {
	width: 200px; /* this is just for testing and will be overridden when we show the popup */
	height: 100px; /* this is just for testing and will be overridden when we show the popup */
	/* overflow: hidden; this avoids a gap under the content where the background doesn't fill in the bottom margin area (but it also cuts off the Facebook comments box) */
	background: #FFFFFF;
    background: rgba(255, 255, 255, 0.97);
}

#popup_content_inner {
	padding: 5px 20px 5px 24px; /* this lets us pad the contents while measuring the outer dimensions of #popup_content */
	position: relative; /* this stops opacity inheritance in IE */
}

#popup_close {
	position: absolute;
	top: -7px;
	right: 5px; /* -11 + 16 shadow padding */
	z-index: 10;
}

.shadow_right {
	background-image: url(/images/templates/shadow_right.png);
	background-repeat: repeat-y;
	background-position: right top;
	padding-right: 16px; /* this makes room for the shadow image */
}

.shadow_bottom {
	background-image: url(/images/templates/shadow_bottom.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 16px;
	padding-top: 16px; /* this makes room for the shadow image */
	margin-right: 16px; /* this makes room for the corner image */
}

.shadow_corner {
	background-image: url(/images/templates/shadow_corner.png);
	background-repeat: no-repeat;
	background-position: right top;
	float: right;
	width: 16px;
	height: 16px;
}