/* we could use sliding doors for this box, but it will appear on a multi-colored background and that technique doesn't work with transparent edge images */

.box_shadow {
	position: relative;
	margin: -4px; /* this expands the box by the amount of the shadow, so we can do measurements and alignments from the inside of the shadow */ /* this is also set in the IE tweaks file */
}

.box_shadow_top {
	height: 6px;
}

.box_shadow_top_left {
	background-image: url(/images/templates/box_shadow_top_left.png);
	position: absolute;
	width: 6px;
	height: 6px;
	top: 0px;
	left: 0px;
}

.box_shadow_top_middle {
	background-image: url(/images/templates/box_shadow_top_middle.png);
	background-repeat: repeat-x;
	height: 6px;
	top: 0px;
	margin-left: 6px;
	margin-right: 6px;
}

.box_shadow_top_right {
	background-image: url(/images/templates/box_shadow_top_right.png);
	position: absolute;
	width: 6px;
	height: 6px;
	top: 0px;
	right: 0px;
}

.box_shadow_middle {
	margin-top: -2px; margin-bottom: -2px; /* this makes up for the overlap required to capture the full shadow style in the corner images */
	padding-top: 2px; padding-bottom: 2px; /* this prevents the left and right images from overlapping the top and bottom images */
	margin-left: 4px; margin-right: 4px; /* this makes room for the left and right images (6px for the image minus 2px for the overlap) */
	background-color: #FFFFFF; /* it would be nice to put this in the inner class, but it needs to stay here */
}

.box_shadow_inner {
	margin-left: 4px; margin-right: 4px; /* this aligns the width of the inner box so we can take horizontal measurements from inside the shadow; vertical measurements still need to take into account the 2px overlap */
	padding-bottom: 1px; /* this avoids collapsing margins with content inside the box */
	/*border: 1px solid blue;*/
}

.box_shadow_middle_left {
	background-image: url(/images/templates/box_shadow_middle_left.png);
	background-repeat: repeat-y;
	background-position: left;
	margin-left: -4px; /* this moves the image to the outside of the inner box (6px for the image minus 2px for the overlap) */
}

.box_shadow_middle_right {
	background-image: url(/images/templates/box_shadow_middle_right.png);
	background-repeat: repeat-y;
	background-position: right;
	margin-right: -4px; /* this moves the image to the outside of the inner box (6px for the image minus 2px for the overlap) */
}

.box_shadow_bottom {
	height: 6px;
}

.box_shadow_bottom_left {
	background-image: url(/images/templates/box_shadow_bottom_left.png);
	position: absolute;
	width: 6px;
	height: 6px;
	bottom: 0px;
	left: 0px;
}

.box_shadow_bottom_middle {
	background-image: url(/images/templates/box_shadow_bottom_middle.png);
	background-repeat: repeat-x;
	height: 6px;
	bottom: 0px;
	margin-left: 6px;
	margin-right: 6px;
}

.box_shadow_bottom_right {
	background-image: url(/images/templates/box_shadow_bottom_right.png);
	position: absolute;
	width: 6px;
	height: 6px;
	bottom: 0px;
	right: 0px;
}


.button_small {
	float: left; /* this shrinks the button to its minimum width, but that means we need to put a reset tag after it */
	height: 18px;
	background-image: url(/images/templates/button_small_left_0.png);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0 34px 10px 0; /* the right margin is the end cap size plus 10px */
}

.button_small:hover {
	background-image: url(/images/templates/button_small_left_1.png);
}

.button_small a {
	display: block;
	height: 18px; /* this is only needed by IE7 */
	padding-left: 14px;
	padding-right: 14px;
	margin-right: -24px; /* this pulls the right end cap out beyond the enclosing tag */
	background-image: url(/images/templates/button_small_right_0.png);
	background-position: top right;
	background-repeat: no-repeat;
}

.button_small a:hover {
	background-image: url(/images/templates/button_small_right_1.png);
}

.button_small.alt {
	background-image: url(/images/templates/button_small_alt_left_0.png);
}

.button_small.alt:hover {
	background-image: url(/images/templates/button_small_alt_left_1.png);
}

.button_small.alt a {
	background-image: url(/images/templates/button_small_alt_right_0.png);
}

.button_small.alt a:hover {
	background-image: url(/images/templates/button_small_alt_right_1.png);
}


.button_medium {
	float: left; /* this shrinks the button to its minimum width, but that means we need to put a reset tag after it */
	height: 24px;
	background-image: url(/images/templates/button_medium_left_0.png);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0 36px 10px 0; /* the right margin is the end cap size plus 10px */
}

.button_medium:hover {
	background-image: url(/images/templates/button_medium_left_1.png);
}

.button_medium a {
	display: block;
	height: 24px; /* this is only needed by IE7 */
	padding-left: 16px;
	padding-right: 16px;
	margin-right: -26px; /* this pulls the right end cap out beyond the enclosing tag */
	background-image: url(/images/templates/button_medium_right_0.png);
	background-position: top right;
	background-repeat: no-repeat;
}

.button_medium a:hover {
	background-image: url(/images/templates/button_medium_right_1.png);
}


.button_large {
	float: left; /* this shrinks the button to its minimum width, but that means we need to put a reset tag after it */
	height: 32px;
	background-image: url(/images/templates/button_large_left_0.png);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0 53px 10px 0; /* the right margin is the end cap size plus 10px */
}

.button_large:hover {
	background-image: url(/images/templates/button_large_left_1.png);
}

.button_large a {
	display: block;
	height: 32px; /* this is only needed by IE7 */
	padding-left: 18px;
	padding-right: 18px;
	margin-right: -43px; /* this pulls the right end cap out beyond the enclosing tag */
	background-image: url(/images/templates/button_large_right_0.png);
	background-position: top right;
	background-repeat: no-repeat;
}

.button_large a:hover {
	background-image: url(/images/templates/button_large_right_1.png);
}