/* Quick Color Reference:
 *
 * foreground red:		#b32c2c;
 * background red:		#bc3636;
 *
 */


/****
 **** HTML ELEMENT STYLING
 ****/


/** body styling **/
	body
	{
		margin-top: 0px;
		margin-bottom: 1em;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		background-color: #ffffff;
		color: #000000;
		font-size: 0.875em;	/* 16px * .875 = 14px */
	}

	body, caption, th, td, input, textarea, select, option, legend, fieldset
	{
		font-family: "Times New Roman", Times, "Bitstream Vera Serif", serif;
	}


/** block-level styling **/
	p, ul, ol, li, h1, h2, h3, h4, h5, h6
	{
		margin-top: 0px;
		margin-bottom: 1em;
	}

	/* give headers x-small bottom margins */
	h1
	{
		font-size: 2em; 		/* xx-large	*/
		margin-bottom: 0.375em;
	}

	h2
	{
		font-size: 1.5em;		/* x-large	*/
		margin-bottom: 0.5em;
	}

	h3
	{
		font-size: 1.2em;		/* large	*/
		margin-bottom: 0.625em;
	}

	h4, h5, h6
	{
		font-size: 1em;			/* medium	*/
		margin-bottom: 0.75em;
	}

	h1
	{
		margin: 0px;
		padding: 0px;
		text-align: center;
	}

	h1 img
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}


/** lists.  Each browser uses a different strategy to indent items;
			this CSS standardizes the methods. **/
	ul, ol
	{
		margin-left: 0px;
		padding-left: 0px;
	}

	li	
	{
		margin-left: 2em;
		padding-left: 0px;
	}

	ul ul, ul ol, ol ul, ol ol
	{
		margin-top: 1em;
	}

	ul			{ list-style-type: disc; }
	ul ul		{ list-style-type: circle; }
	ul ul ul	{ list-style-type: square; }
	ul ul ul ul	{ list-style-type: circle; }
	ol 			{ list-style-type: decimal; }
	ol ol		{ list-style-type: lower-alpha; }
	ol ol ol	{ list-style-type: decimal; }


/** links **/
	a:link
	{
		color: #bc3636;
	}

	a:visited
	{
		color: #bc3636;
	}

	a:hover
	{
		color: #ffffff;
		background-color: #bc3636;
	}


/** abbreviations **/
	abbr
	{
		font-style: normal;	/* Safari italicizes abbr! */
		border-bottom: 1px dotted #00ff00;
		cursor: help;
		white-space: nowrap;
	}


/****
 **** GENERAL PAGE LAYOUT (listed in order of appearance in html source code)
 ****/


/** body **/
	#centeredDiv
	{
		margin-left: auto;
		margin-right: auto;
		width: 990px;
		background-image: url(/images/background-sub.gif);
		background-position: top left;
	}

	#homepage #centeredDiv
	{
		background-image: url(/images/background.gif);
		background-color: #bc3636;
		color: #ffffff;
	}

/** main (container for everything else) **/
	#mainWrapper
	{
		background-image: url(/images/background-sidebar.jpg);
		background-position: top left;
		background-repeat: repeat-y;
		padding-left: 30px;
	}

/** content **/
	/*	990 - 30 (sidebar) = 960 main width
		960 - 142 (navbar) - 2 (navbar border) = 816 */
	#contentWrapper
	{
		float: left;
		width: 816px;
		margin-left: 144px;
		margin-right: -960px;
		margin-top: 25px;
	}

	#content
	{
		padding-left: 10px;
		padding-right: 10px;
	}

/** columns **/
	/*	816 - 20 (content padding) = 796
		388 + 388 + 20 = 796 */
	.columnLeft
	{
		float: left;
		width: 388px;
		margin-right: -388px;
	}

	.columnRight
	{
		float: left;
		width: 388px;
		margin-left: 408px;
		margin-right: -796px;
	}

	/* 450 + 326 + 20 = 796 */
	#homepage .columnLeft, #catalog .columnLeft,
	#showroom .columnLeft, #contact .columnLeft
	{
		float: left;
		width: 450px;
		margin-right: -450px;
	}

	#homepage .columnRight, #catalog .columnRight,
	#showroom .columnRight, #contact .columnRight
	{
		float: left;
		width: 246px;
		margin-left: 490px;
		margin-right: -736px;
		font-size: 1.15em;
	}

/** sidebar **/
	#sidebarWrapper	
	{
		float: left;
		width: 132px;
		margin-left: 5px;
		margin-right: -137px;
		margin-top: 25px;
		overflow: visible;
	}

	#sidebar
	{
	}

/** footer **/
	#footerWrapper
	{
		clear: both;
	}

	#footer
	{
	}


/****
 **** GENERAL ELEMENT STYLES (grouped by related styles)
 ****/


/** dbls error messages **/
	.warning
	{
		color: #bc3636;
		font-weight: bold;
	}

	.errorMessage
	{
		padding: 10px;
		background-color: #e5e5e5;
		color: #666666;
		font-size: 0.8em;
		font-family: Arial, sans-serif;
	}

	.errorMessage .errorReason
	{
		margin-top: 0px;
		font-style: italic;
		font-weight: bold;
	}

	.errorMessage p
	{
		margin-bottom: 0px;
	}

/** credits **/
	p#credits, p#credits a:link, p#credits a:visited, p#credits a:hover
	{
		color: #999999;
		text-decoration: none;
	}

	p#credits a:hover
	{
		background-color: transparent;
		color: #333333;
	}

	p#credits a span
	{
		text-decoration: underline;
		margin-left: -2px;
		padding: 0px 2px;
	}

	p#credits a:hover span
	{
		color: #ffffff;
		background-color: #bc3636;
		text-decoration: none;
	}

	p#credits span.more
	{
		display: none;
	}

/** navbar **/
	#sidebarWrapper	
	{
		background-image: url(/images/background-navbar.jpg);
		background-position: top center;
		background-repeat: no-repeat;
		text-align: center;
	}

	#homepage #sidebarWrapper
	{
		background-image: url(/images/background-navbar-homepage.jpg);
	}

	#showroom #sidebarWrapper
	{
		background-image: url(/images/background-navbar-showroom.jpg);
	}

	#contact #sidebarWrapper
	{
		background-image: url(/images/background-navbar-contact.jpg);
	}

	.catalog1 #sidebarWrapper
	{
		background-image: url(/images/background-navbar-iron-furniture.jpg);
	}

	.catalog2 #sidebarWrapper
	{
		background-image: url(/images/background-navbar-bedding.jpg);
	}

	.catalog3 #sidebarWrapper
	{
		background-image: url(/images/background-navbar-lamps.jpg);
	}

	.catalog4 #sidebarWrapper
	{
		background-image: url(/images/background-navbar-wall-hangings.jpg);
	}

	.catalog5 #sidebarWrapper
	{
		background-image: url(/images/background-navbar-pillows.jpg);
	}

	.catalog6 #sidebarWrapper
	{
		background-image: url(/images/background-navbar-wood-furniture.jpg);
	}

	.catalog7 #sidebarWrapper
	{
		background-image: url(/images/background-navbar-gallery.jpg);
	}

	#sidebar ul
	{
		margin-top: 210px;
		list-style-type: none;
		font-weight: bold;
	}

	#sidebar ul li#navbarSubShowroomListItem
	{
		z-index: 100;
	}

	#sidebar ul div
	{
		position: absolute;
		width: 100px;
		height: 300px;
		top: 34px;
		left: 16px;
		visibility: hidden;
		overflow: hidden;
		z-index: -1;
		clip: rect(0 100 300 0);
		font-size: .9em;
	}

	#sidebar ul ul, #homepage #sidebar ul ul
	{
		position: absolute;
		top: 0px;
		left: 0px;
		margin-top: 0px;
		width: 96px;	/* 4px smaller than div */
		border: 2px solid #000000;
		background-color: #ffffff;
		clip: rect(0 100 300 0);
	}

	#sidebar ul li
	{
		margin-left: 0px;
		margin-bottom: 0.8em;
		position: relative;
	}

	#sidebar ul ul li
	{
		margin-bottom: 0px;
		padding-top: .5em;
		padding-bottom: .5em;
	}

	#sidebar a
	{
		display: block;
		border: none;
		padding: 2px;
	}

	#sidebar ul ul a
	{
		display: inline;
		border: none;
	}

	#sidebar a:link, #sidebar a:visited
	{
		color: #ffffff;
		text-decoration: none;
	}

	#sidebar ul ul a:link, #sidebar ul ul a:visited
	{
		color: #000000;
		text-decoration: underline;
	}

	#sidebar a:hover
	{
		color: #000000;
		background-color: #ffffff;
		border: 2px solid #000000;
		padding: 0px;
	}

	#sidebar ul ul a:hover
	{
		background-color: #000000;
		color: #ffffff;
		border: none;
		text-decoration: none;
	}

/** footer text **/
	#footer
	{
		font-size: 0.8em;
		text-align: center;
	}

	#footer p
	{
		margin-bottom: 0px;
		padding-bottom: 1em;
	}

	#homepage #footerGraphic
	{
		text-align: left;
		display: block;
	}

	#footerGraphic
	{
		display: none;
	}

/** content area **/
	#content ul	
	{
		list-style-image: url(/images/bullet.gif);
	}

	.list-header
	{
		margin-bottom: 0em;
	}

/** design page **/
	#design #centeredDiv
	{
		background-image: url(/images/background-design.gif);
	}

	#design #content ul	
	{
		list-style-image: url(/images/bullet.gif);
		margin-left: 2em;
		margin-bottom: 2em;
	}

	#design #content li
	{
		margin-left: 0px;
		margin-bottom: 0em;
	}

/** homepage **/
	#homepage a:link
	{
		color: #ffffff;
	}

	#homepage a:visited
	{
		color: #eeeeee;
	}

	#homepage a:hover
	{
		color: #000000;
		background-color: #ffffff;
	}

	#homepage #shoppingImg
	{
		margin-top: 2em;
		margin-left: -20px;
		margin-right: -20px;
	}

	#homepage #shoppingImg a:hover
	{
		background-color: transparent;
	}

	#homepage #shoppingImg img
	{
		text-align: bottom;
		border: none;
	}

/** contact **/
	#contact .columnRight
	{
		padding-top: 50px;
	}

/** portfolio **/
	#portfolio li
	{
		margin-top: 0px;
		margin-bottom: 0px;
	}

/** showroom **/
	#showroom .columnRight
	{
		padding-top: 20px;
	}

	#catalog .columnLeft, #catalog .columnRight
	{
		height: 404px;
		display: table;
	}

	#catalog .verticallyCentered
	{
		display: table-cell;
		vertical-align: middle;
	}

	#catalog .verticallyCentered div
	{
		position: relative;
	}

	#catalog .verticallyCentered .zoom
	{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 56px;
		height: 20px;
		z-index: 10;
	}

	#catalog .verticallyCentered img
	{
		border: 2px solid black;
		vertical-align: bottom;
	}

	#catalog .columnLeft h3, #catalog .columnRight h3
	{
		margin-bottom: 0.3em;
	}

	#catalog .columnLeft p, #catalog .columnRight p
	{
		margin-bottom: 0.5em;
	}

	#catalogNav
	{
		clear: both;
		padding: 10px 0px;
	}

	#catalogNav p
	{
		margin: 0px 0px 3px 0px;
		text-align: center;
	}

	#catalogNav p a
	{
		margin: 0px 3px 0px 0px;
	}

	#catalogNav img
	{
		vertical-align: bottom;
		border: 1px solid black;
	}

/** clearing floats **/
	/* A clearing div causes the infamous IE peek-a-boo bug. For IE/win,
	you NEED to set the hasLayout property to the container
	(of the float & clearing divs). */
	.spacer
	{
		display: block;
		clear: both;
		margin: 0px;
		border: none;
		padding: 0px;
		font-size: 1px;
		line-height: 1px;
	}

	/*
	div#spacerDivsContainer { _zoom: 1; }
	*/