/*

	text colors (body, submenu, fade, account menu):
	A - 000066 (blue), FF6666 (peach), 999999 (gray), FFFFFF (white)
	B - 330066 (purple), CC0066 (pink), 999999 (gray), FFFFFF (white)
	C - 330066 (purple), CC9900 (gold), 999999 (gray), FFFFFF (white)
	D - 660066 (purple), 009966 (green), 999999 (gray), FFFFFF (white)
	E - 333399 (blue), FF6666 (orange), 999999 (gray), FFFFFF (white)
	F - 336666 (green), CC0066 (pink), 999999 (gray), FFFFFF (white)

*/

.title {
	font-family: Times, serif;
	font-size: 24px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 12px;
	color: #000066;
}

.subtitle {
	font-family: Times, serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 10px;
	color: #000066;
}

.heading_large {
	font-family: Times, serif;
	font-size: 13px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	text-transform: uppercase;
	color: #000066;
}

.heading {
	font-family: Times, serif;
	font-size: 12px;
	line-height: 15px;
	font-weight: normal;
	font-style: normal;
	margin-top: 2px;
	text-transform: uppercase;
	color: #000066;
}

.heading_small {
	font-family: Times, serif;
	font-size: 11px;
	font-weight: normal;
	font-style: normal;
	margin-top: 2px; /* this balances out any drop characters */
	margin-bottom: 3px;
	text-transform: uppercase;
	color: #000066;
}

.heading_alt {
	font-family: Times, serif;
	font-size: 15px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #000066;
}

.heading_comments {
	font-family: Times, serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #FF6666;
}

.heading_FAQ {
	/* this is currently the same as .heading */
	font-family: Times, serif;
	font-size: 12px;
	line-height: 15px;
	font-weight: normal;
	font-style: normal;
	margin-top: 2px;
	text-transform: uppercase;
	color: #000066;
}

.body_large {
	font-family: Times, serif;
	font-size: 15px;
	line-height: 19px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	color: #000066;
}

.body {
	font-family: Times, serif;
	font-size: 13px;
	line-height: 15px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	margin-bottom: 9px;
	color: #000066;
}

.body_small {
	font-family: Times, serif;
	font-size: 12px;
	line-height: 14px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	color: #000066;
}

.note_large {
	font-family: Times, serif;
	font-size: 13px;
	line-height: 16px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	color: #000066;
}

.note {
	font-family: Times, serif;
	font-size: 12px;
	line-height: 15px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	color: #000066;
}

.button_text_large {
	font-family: Times, serif;
	font-size: 12px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	text-transform: uppercase;
	color: #FF6666;
}

.button_text_large a {
	text-decoration: none;
	color: #FF6666;
}

.button_text_large a:hover {
	color: #999999;
}

.button_text_small {
	font-family: Times, serif;
	font-size: 10px;
	font-weight: normal;
	font-style: normal;
	margin-top: 0px;
	text-transform: uppercase;
	color: #999999;
}

.button_text_small a {
	text-decoration: none;
	color: #999999;
}

.button_text_small a:hover {
	color: #FF6666;
}

.button_image_1_large, .button_image_2_large {
	font-family: Times, serif;
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
	text-transform: uppercase;
	line-height: 21px;
	margin-top: 0px;
	color: #FFFFFF;
}

.button_image_1_large a {
	background: url(/images/templates/bg_button_1_large_A.jpg) repeat-x #000066;
	/* float: left; /* this was the only way to make the background image appear without using a block display, which requires a fixed width ... IN DREAMWEAVER! ... works fine in browsers ... argh */
	padding: 6px 5px 5px 5px;
	text-decoration: none;
	color: #FFFFFF;
}

.button_image_2_large a {
	background: url(/images/templates/bg_button_2_large_A.jpg) repeat-x #FF6666;
	/* float: left; /* this was the only way to make the background image appear without using a block display, which requires a fixed width ... IN DREAMWEAVER! ... works fine in browsers ... argh */
	padding: 6px 5px 5px 5px;
	text-decoration: none;
	color: #FFFFFF;
}

.button_image_1_small, .button_image_2_small, .button_image_3_small {
	font-family: Times, serif;
	font-size: 10px;
	font-weight: normal;
	font-style: italic;
	text-transform: uppercase;
	line-height: 18px;
	margin-top: 0px;
	color: #FFFFFF;
}

.button_image_1_small a {
	background: url(/images/templates/bg_button_1_small_A.jpg) repeat-x #000066;
	/* float: left; /* this was the only way to make the background image appear without using a block display, which requires a fixed width ... IN DREAMWEAVER! ... works fine in browsers ... argh */
	padding: 4px 4px 4px 3px;
	text-decoration: none;
	color: #FFFFFF;
}

.button_image_2_small a {
	background: url(/images/templates/bg_button_2_small_A.jpg) repeat-x #FF6666;
	/* float: left; /* this was the only way to make the background image appear without using a block display, which requires a fixed width ... IN DREAMWEAVER! ... works fine in browsers ... argh */
	padding: 4px 4px 3px 3px;
	text-decoration: none;
	color: #FFFFFF;
}

.button_image_3_small a {
	background: url(/images/templates/bg_button_3_small_A.jpg) repeat-x #999999;
	/* float: left; /* this was the only way to make the background image appear without using a block display, which requires a fixed width ... IN DREAMWEAVER! ... works fine in browsers ... argh */
	padding: 3px;
	text-decoration: none;
	color: #FFFFFF;
}

.button_image_1_large a:hover, .button_image_2_large a:hover, .button_image_1_small a:hover, .button_image_2_small a:hover, .button_image_3_small a:hover {
	color: #FFFFFF;
}

a.button_scroll_up {
	background: url(/images/templates/button_scroll_up_A_0.gif) no-repeat;
	width: 12px;
	height: 0px;
	padding-top: 6px;
	margin: 2px 2px 6px 2px;
	display: inline-block;
	overflow: hidden;
}

a:hover.button_scroll_up {
	background: url(/images/templates/button_scroll_up_A_1.gif) no-repeat;
}

a.button_scroll_down {
	background: url(/images/templates/button_scroll_down_A_0.gif) no-repeat;
	width: 12px;
	height: 0px;
	padding-top: 6px;
	margin: 6px 2px 2px 2px;
	display: inline-block;
	overflow: hidden;
}

a:hover.button_scroll_down {
	background: url(/images/templates/button_scroll_down_A_1.gif) no-repeat;
}

a.button_scroll_left {
	background: url(/images/templates/button_scroll_left_A_0.gif) no-repeat;
	width: 0px;
	height: 12px;
	padding-left: 6px;
	margin: 0px 2px -2px 2px;
	display: inline-block;
	overflow: hidden;
}

a:hover.button_scroll_left {
	background: url(/images/templates/button_scroll_left_A_1.gif) no-repeat;
}

a.button_scroll_right {
	background: url(/images/templates/button_scroll_right_A_0.gif) no-repeat;
	width: 0px;
	height: 12px;
	padding-left: 6px;
	margin: 0px 2px -2px 2px;
	display: inline-block;
	overflow: hidden;
}

a:hover.button_scroll_right {
	background: url(/images/templates/button_scroll_right_A_1.gif) no-repeat;
}

a.button_discussion_list {
	background: url(/images/templates/icon_discussion_list_A_0.gif) no-repeat;
	padding-left: 22px;
}

a:hover.button_discussion_list {
	background: url(/images/templates/icon_discussion_list_A_1.gif) no-repeat;
}

a.button_swatch {
	background: url(/images/templates/icon_swatch_A_0.gif) no-repeat;
	padding-left: 22px;
}

a:hover.button_swatch {
	background: url(/images/templates/icon_swatch_A_1.gif) no-repeat;
}

a.button_sample {
	background: url(/images/templates/icon_sample_A_0.gif) no-repeat;
	padding-left: 22px;
}

a:hover.button_sample {
	background: url(/images/templates/icon_sample_A_1.gif) no-repeat;
}

a.button_shopping_bag, span.button_shopping_bag {
	background: url(/images/templates/icon_shopping_bag_A_0.gif) no-repeat;
	padding-top: 4px; /* this is also set in the template HTML */
	padding-left: 15px;
}

a:hover.button_shopping_bag, span.button_shopping_bag.active {
	background: url(/images/templates/icon_shopping_bag_A_1.gif) no-repeat;
}

a.button_close {
	background: url(/images/templates/icon_close.gif) right no-repeat;
	padding-right: 12px;
	font-size: 9px;
}

a:hover.button_close {
	color: #999999;
}

a:active, .color_chip a {
	outline: none; /* remove dotted line around links in Firefox */
}

.emphasis {
	font-style: italic;
}

.fade {
	color: #999999;
}

td.fade { /* this is also set in the IE tweaks file; we could apply this once to the tr in other browsers, but in IE it only works on the td's */
	opacity: 0.5;
}

.bigtop {
	margin-top: 20px;
}

.bigbottom {
	margin-bottom: 25px;
}

.nobottom {
	margin-bottom: 0px;
}

ul.main_menu {
	margin: 0;
	padding: 0;
}

ul.main_menu li {
	font-family: Times, serif;
	font-size: 15px;
	line-height: 17px;
	font-style: italic;
	color: #000066;
	text-transform: uppercase;
	list-style: none;
}

ul.main_menu li a {
	color: #000066;
	text-decoration: none;
}

ul.main_menu li a:hover {
	color: #999999;
}

ul.main_menu li.active a {
	color: #000066;
}

ul.main_menu li ul.main_submenu {
	display: none;
}

ul.main_menu li ul.main_submenu.active {
	display: block;
}

ul.main_menu li ul.main_submenu li {
	font-family: Times, serif;
	font-size: 14px;
	line-height: 14px;
	font-style: italic;
	color: #FF6666;
	text-transform: lowercase;
	list-style: none;
	padding-bottom: 11px;
	margin-left: -40px;
	border-bottom: none;
}

ul.main_menu li ul.main_submenu.active {
	display: block;
}

ul.main_menu li ul.main_submenu li a, ul.main_menu li ul.main_submenu span.active {
	color: #FF6666;
	text-decoration: none;
}

ul.main_menu li ul.main_submenu li a:hover {
	color: #999999;
}

.main_submenu_active_flag {
	vertical-align: top;
	padding-top: 3px;
	height: 11px; /* this is the main_submenu li line height, -3 */
	display: inline-block;
}

input, textarea {
	/* or should we apply body and other styles directly to the individual fields? that would eliminate the need to copy other attributes like color here and would let us use a couple different sizes */
	border: 1px solid #999999;
	font-family: Times, serif;
	font-size: 13px;
	color: #000066;
}

select {
	border: 1px solid #999999;
	background: #FFFFFF;
}

option {
	font-family: Times, serif;
	font-size: 11px; /* this matches the body_small size */
	color: #000066;
}

.header_menu {
	font-family: Times, serif;
	font-size: 9px;
	font-weight: normal;
	color: #FFFFFF;
	text-transform: uppercase;
}

.header_menu a {
	color: #FFFFFF;
	text-decoration: none;
}

.header_menu a:hover, .header_menu span.active {
	color: #FF6666;
}

.account_menu {
	font-family: Georgia, Times, serif;
	font-size: 9px;
	letter-spacing: 1px;
	font-weight: normal;
	color: #FFFFFF;
}

.account_menu a {
	color: #FFFFFF;
	text-decoration: none;
}

.account_menu a:hover, .account_menu span.active {
	color: #FF6666;
}

.checkout_menu {
	font-family: Times, serif;
	font-size: 11px;
	font-weight: normal;
	text-transform: uppercase;
	color: #999999;
	padding: 4px 0px 4px 0px;
}

.checkout_menu a {
	color: #999999;
	text-decoration: none;
}

.checkout_menu a:hover, .checkout_menu span.active {
	color: #000066;
}

.item_menu {
	font-family: Times, serif;
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
	text-transform: uppercase;
	color: #FF6666;
	padding: 4px 0px 4px 0px;
}

.item_menu a {
	color: #FF6666;
	text-decoration: none;
}

.item_menu a:hover, .item_menu span.active {
	color: #000066;
}

.callout_small {
	font-family: Times, serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #FF6666;
}

.callout_large {
	font-family: Times, serif;
	font-size: 23px;
	font-weight: normal;
	font-style: italic;
	line-height: 28px;
	margin-top: -10px;
	margin-bottom: 0px;
	text-transform: uppercase;
	color: #FF6666;
}

.callout_home {
	font-family: Times, serif;
	font-size: 26px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0px;
	margin-bottom: 0px;
	text-transform: uppercase;
	color: #000066;
}

.callout_small a, .callout_large a, .callout_home a {
	text-decoration: none;
}

.footer {
	font-family: Times, serif;
	font-size: 9px;
	color: #999999;
	text-transform: uppercase;
}

.footer a {
	color: #999999;
	text-decoration: none;
}

.footer a:hover {
	color: #FF6666;
}

a {
	color: #FF6666;
}

a:hover {
	color: #999999;
}

.nolink a {
	text-decoration: none;
	color: #000066;
}

.fade.nolink a {
	text-decoration: none;
	color: #999999;
}

.nolink a:hover {
	text-decoration: none;
	color: #999999;
}

.fade.nolink a:hover {
	text-decoration: none;
	color: #FF6666;
}

ul.body, ul.body_large, ul.body_small {
	/* this lets us use a custom bullet character in the ul li class */
	list-style: none; /* this is also set in the IE tweaks file */
	margin-left: 0; 
}

ul.body {
	padding-left: 9px;
	text-indent: -9px;
}

ul.body_large {
	padding-left: 12px;
	text-indent: -12px;
}

ul.body_small {
	padding-left: 8px;
	text-indent: -8px;
}

ul.body li:before, ul.body_large li:before, ul.body_small li:before {
	content: "\002A \0020";
}

ol li {
	margin-bottom: 12px;
}

hr {
	border: 0px;
	height: 2px;
	background: url(/images/templates/bg_divider_horizontal_A.png) left repeat-x;
	/*border-top: #000066 2px dotted;*/
	margin-bottom: 15px;
	clear: both;
}

table {
	margin-bottom: 12px;
}

table.borders {
	/*border-top: #000066 2px dotted;*/
	border-collapse: collapse;
	background: url(/images/templates/bg_divider_horizontal_A.png) top repeat-x;
}

table.borders td {
	/*border-bottom: #000066 2px dotted;*/
	padding: 2px;
}

table.borders tr.item_row td {
	padding-top: 8px;
}

table.borders tr {
	background: url(/images/templates/bg_divider_horizontal_A.png) bottom repeat-x;
}

.border_top {
	background: url(/images/templates/bg_divider_horizontal_A.png) top repeat-x;
	padding-top: 7px;
}

.border_bottom {
	background: url(/images/templates/bg_divider_horizontal_A.png) bottom repeat-x;
	height: 18px;
	margin-bottom: 4px;
}

.border_top p, .border_bottom p {
	margin: 0;
	padding: 0;
}

.color_chip {
	float: left;
	width: 20px; /* includes border */
	height: 14px; /* includes border */
	margin-right: 4px;
	margin-bottom: 15px;
}

.color_chip_selected {
	border: 2px solid #999999;
}

.color_chip_unselected {
	border: 2px solid #FFFFFF;
}

.color_chip_small {
	float: left;
	width: 15px;
	height: 7px;
	margin-right: 1px;
	margin-bottom: 1px;
}

.thumbnail_small {
	width: 54px;
	height: 71px;
	margin-bottom: 8px;
}

.thumbnail_medium {
	width: 93px;
	height: 135px;
	margin-bottom: 8px;
}

.thumbnail_medium_shadow {
	width: 93px;
	height: 135px;
	padding: 6px 11px 11px 6px;
	margin: -2px 0px 0px -6px;
	background: url(/images/templates/shadow_thumbnail_medium.jpg);
}

.thumbnail_large {
	width: 155px;
	height: 210px;
	margin-bottom: 8px;
}

.thumbnail_scroll_box {
	width: 54px;
	height: 258px;
	position: relative;
	overflow: hidden;
}

.thumbnail_scroll_content {
	position: relative;
}

.photo {
	width: 259px;
	height: 365px;
	padding: 5px 10px 11px 5px;
	margin: -3px 0px 0px -5px;
	background: url(/images/templates/shadow_normal.jpg);
}

.photo_zoom_item_details, .photo_zoom_discussion_list {
	width: 1px;
	height: 1px;
	position: relative;
	/*
	top: 108px;
	left: 632px;
	*/
	top: 3px;
	left: 345px;
}

.photo_large {
	width: 674px;
	height: 375px;
	padding: 7px 17px 16px 8px;
	margin: -4px 0px 0px -8px;
	background: url(/images/templates/shadow_large.jpg);
}

.shadow_top_left {
	background-image: url(/images/templates/shadow_top_left.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	height: 16px; /* this creates a minimum 8px top margin around the content */
	margin-right: 24px; /* this creates a minimum 8px right margin around the content, and makes room for the right end of the shadow */
}

.shadow_top_right {
	background-image: url(/images/templates/shadow_top_right.png); /* we'd like to give this image a transparent background, but then the left side image bleeds through underneath it */
	background-repeat: no-repeat;
	background-position: bottom right;
	float: right;
	width: 24px;
	height: 16px;
}

.shadow_middle_left {
	background-image: url(/images/templates/shadow_middle_left.png);
	background-repeat: repeat-y;
	background-position: left;
	padding-left: 16px; /* this creates a minimum 8px left margin around the content */
	padding-right: 24px; /* this creates a minimum 8px right margin around the content, and makes room for the right end of the shadow */
}

.shadow_middle_right {
	background-image: url(/images/templates/shadow_middle_right.png);
	background-repeat: repeat-y;
	background-position: right;
	/* border-bottom: 1px solid #036635; /* a gap appears unless we add this hack; why? if the text inside has a bottom margin, that's why */
	/* margin-bottom: -9px; this is also set in the IE tweaks file */ /* this is another hack to remove the gap caused by the text's bottom margin; it would be better if the background just filled that area, because we would have to adjust this for different text sizes */
}

.shadow_bottom_left {
	background-image: url(/images/templates/shadow_bottom_left.png);
	background-repeat: no-repeat;
	background-position: top left;
	height: 24px;
	padding-top: 8px; /* this creates a minimum 8px bottom margin around the content */
	margin-right: 24px; /* this creates a minimum 8px right margin around the content, and makes room for the right end of the shadow */
}

.shadow_bottom_right {
	background-image: url(/images/templates/shadow_bottom_right.png); /* we'd like to give this image a transparent background, but then the left side image bleeds through underneath it */
	background-repeat: no-repeat;
	background-position: bottom right;
	float: right;
	width: 24px;
	height: 24px;
}

.form_element_full {
	width: 400px;
	margin: 0;
	padding: 0;
}

.form_element_twothirds {
	width: 260px;
	margin: 0;
	padding: 0;
}

.form_element_half {
	width: 196px;
	margin: 0;
	padding: 0;
}

.form_element_third {
	width: 128px;
	margin: 0;
	padding: 0;
}

.form_element_quarter {
	width: 94px;
	margin: 0;
	padding: 0;
}

.form_element_fifth {
	width: 74px;
	margin: 0;
	padding: 0;
}

.stack_left {
	float: left;
	margin-right: 8px;
}

.stack_right {
	float: right;
	margin-left: 8px;
}

.column_half {
	float: left;
	margin-right: 2%;
	width: 47%; /* this is also set in the IE tweaks file */
}

.column_third {
	float: left;
	margin-right: 2%;
	width: 30%;
}

.column_fourth {
	float: left;
	margin-right: 2%;
	width: 22%;
}

.column_fifth {
	float: left;
	margin-right: 2%;
	width: 17%;
}

.reset {
	clear: both;
}

.reset_left {
	clear: left;
}

.reset_right {
	clear: right;
}

.hide {
	display: none;
}

.submit_hack {
	/* this allows us to add a standard submit button to all our forms so that IE and Firefox will submit when pressing Enter, and hide the button from users but not from the browsers */
	width:0px;
	height:0px;
	position: absolute;
	top: -100px;
	left: -100px;
}

.feedback_positive {
	font-family: Times, serif;
	font-size: 12px;
	margin-top: 0px;
	padding-bottom: 6px;
	color: #FF6666;
	background: url(/images/templates/bg_divider_horizontal_A.png) bottom repeat-x;
}

.feedback_positive a {
	color: #FF6666;
}

.feedback_negative {
	font-family: Times, serif;
	font-size: 12px;
	margin-top: 0px;
	padding-bottom: 6px;
	color: #FF6666;
	background: url(/images/templates/bg_divider_horizontal_A.png) bottom repeat-x;
}

.feedback_negative a {
	color: #FF6666;
}

.debug {
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #999999;
}

.debug a {
	color: #999999;
}

.contentfile_title {
	font-family: Arial, Helvetica;
	font-size: 22px;
	font-weight: bold;
	color: #000000;
}

.contentfile_fieldlabel {
	font-family: Arial, Helvetica;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #666666;
}