@charset "UTF-8";
/* ---------  Basic Styling ---------*/
* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color:#FFFFFF;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:85%;
}
#wrapper {
	position:relative;
	width:800px;
	margin: 10px auto;
	text-align:left;
	background:url(images/backgrounds/wrapper-bg/text-bg-middle.gif);
}
#wrapper #topcorners {
	height: 23px;
	background:url(images/backgrounds/wrapper-bg/text-bg-top.gif) no-repeat;
}
#clear {
	clear:both;
}
#bottomCorners {
	height: 19px;
	background:url(images/backgrounds/wrapper-bg/text-bg-bottom.gif) no-repeat;
	}
/* --------- Position Container Elements -------*/
#header {
	position:relative;
	height: 50px;
	}
#sidebar {
	float:left;
	width:224px;
	text-align:center;
	}
#content {
	float:right;
	width:576px;
	}
#footer {
	font-size:.7em;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:5em;
	color:#754b2d;
	text-align:center;
	}

/* ---------------- Header ----------------*/
#header {
	padding:0;
	margin:0;
	position:relative;
	height: 120px;
}
#logo {
	position: absolute;
	top:10px;
	left: 50px;
	/*padding-top: 15px;
	padding-bottom: 25px;
	padding-left: 50px;
	padding-right: 0;*/
	}
/* ---- Top Bar ---*/
#header #topNav {
	position:absolute;
	top:20px;
	right: 40px;
	}
#header a {
	text-decoration:none;
	color:#754b2d;
	font-size:.9em;
	}
#header li {
	float:right;
	margin-left:50px;
	}
#header ul {
	list-style:none;
	}
/* --- Section Title --- */
#header #sectionTitle {
	position:absolute;
	bottom:10px;
	right:0;
	width: 576px;
	height: 30px;
	text-align:center;
	font:Arial, Helvetica, sans-serif normal;
	font-size:1.3em;
	color:#754b2d;
	}
#keyboardText {
	height:42px;
	width:163px;
	text-indent:-900%;
	position:absolute;
	outline:none;
	background:url(images/buttons/keyboard-text.gif) no-repeat;
	left: 45px;
	top: 638px
	}

/* ------------ Sidebar -----------*/

/* ---- Main Navigation ---*/

#mainNav {
	margin: 0;
	padding: 0;
	list-style:none;
	position:relative;
	width:224px;
	height:400px;
}
#mainNav a {
	display:block;
	text-indent:-900%;
	position:absolute;
	outline:none;
	}
#mainNav a:hover {
	background-position:left bottom;
	}
#mainNav .bowlsLink {
	width:142px;
	height:25px;
	background:url(images/buttons/bowls-button.gif) no-repeat;
	left: 50px;
	}
#mainNav .hollowformsLink {
	width:142px;
	height:25px;
	background:url(images/buttons/hollow-forms-button.gif) no-repeat;
	left: 50px;
	top: 44px;
	}
#mainNav .treenwareLink {
	width:142px;
	height:25px;
	background:url(images/buttons/treenware-button.gif) no-repeat;
	left: 50px;
	top: 88px;
	}
#mainNav .plattersLink {
	width:142px;
	height:25px;
	background:url(images/buttons/platters-button.gif) no-repeat;
	left: 50px;
	top: 132px;
	}
#mainNav .furnitureLink {
	width:142px;
	height:25px;
	background:url(images/buttons/furniture-button.gif) no-repeat;
	left: 50px;
	top: 176px;
	}
#mainNav .toysLink {
	width:142px;
	height:25px;
	background:url(images/buttons/toys-button.gif) no-repeat;
	left: 50px;
	top: 220px;
	}
#mainNav .accessoriesLink {
	width:142px;
	height:25px;
	background:url(images/buttons/accessories-button.gif) no-repeat;
	left: 50px;
	top: 264px;
	}
#mainNav .boxesLink {
	width:142px;
	height:25px;
	background:url(images/buttons/boxes-button.gif) no-repeat;
	left: 50px;
	top: 308px;
	}
#mainNav .jewelryLink {
	width:142px;
	height:25px;
	background:url(images/buttons/jewelry-button.gif) no-repeat;
	left: 50px;
	top: 352px;
	}
#mainNav .barrettesLink {
	width:142px;
	height:25px;
	background:url(images/buttons/barrettes-button.gif) no-repeat;
	left: 50px;
	top: 396px;
	}	
#mainNav .leftArrow {
	width:26px;
	height:21px;
	background:url(images/buttons/left-arrow.gif) no-repeat;
	left: 85px;
	top: 450px;
	}
#mainNav .rightArrow {
	width:26px;
	height:21px;
	background:url(images/buttons/right-arrow.gif) no-repeat;
	left: 135px;
	top: 450px;
	}

/* ------------- Content-------------- */
#content {
	float:right;
	text-align:center;
	background-position: 0px;
	margin: 0;
	padding: 0;
}
#content h3 {
	margin: 0 0 10px 0;
}
/*------- Menu Arrows Bottom of Page -------*/
#wrapper #sidebar #mainNav li.last {
	margin-left: 0px;
}
#description div.menu-bottom .leftArrow {
	width:26px;
	height:21px;
	background:url(images/buttons/left-arrow.gif) no-repeat;
	left: 250px;
	}
#description div.menu-bottom .rightArrow {
	width:26px;
	height:21px;
	background:url(images/buttons/right-arrow.gif) no-repeat;
	left: 300px;
	}
#description div.menu-bottom a {
	display:block;
	text-indent:-900%;
	position:absolute;
	outline:none;
	}
#description div.menu-bottom a:hover {
	background-position:left bottom;
	}
#description div.menu-bottom {
	position:relative;
}
#description .menu-bottom em {
	background:url(images/buttons/menu-bottom-hint.gif) no-repeat;
	width: 150px;
	height: 75px;
	position: absolute;
	top: 0px;
	right: 90px;
	text-indent: -900%;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display:none;
}
/* --- Contact Page ---*/

#content #contactForm {
	text-align:left;
	margin:30px;
	margin-top:0;
	}
#content #contactForm input.sans, textarea {
	margin-top: 5px;
	margin-bottom: 10px;
	}
/* display labels next to form elements, add a class for when you want them to stack */
label {
	float:left;
	width:6em;
	margin-right: 2em;
	}
label.top {
	display:block;
	float:none;
	margin-bottom:10px;
	}
input {
	width:200px;
	}
#Esubject {
	width: 390px;
	}
/* reset width for submit button and textarea */
#submit {
	width:auto;
	}
textarea {
	width: 500px;
	height: 200px
	}
/* Styles for contact error and success pages as well as description pages*/

#description {
	color: #754b2d;
	position:relative;
	text-align:center;
}
#description img {
	text-align:center;
	}
#description tt {
	color: #000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align:left;
	}
#description #textarea {
	font-family:Arial, Helvetica, sans-serif;
	}	
#description #message {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	width:400px;
	}
#description #confirm {
	border:#754b2d;
	border:1px;
	position:absolute;
	left:100px;
	}
#description #confirmButtons {
	position:absolute;
	width:400px;
	left:0;
	}
#description h1 {
	font-size: 1.6em;
	padding-bottom:10px;
	}
#sentMessagetitle {
	padding-bottom:5px;
	}
#errorMessagetitle {
	margin-bottom:20px;
	margin-top: 20px;
	}
#description a {
	color: #754b2d;
	}
#confirmMessagetitle {
	margin-bottom:10px;
	}
#bottomMessage {
	text-align:center;
	margin-top: 5px;
	}
#sentMessagebody {
	background: #ffffff;
	color: #000000;
	}
#text p {
	margin-bottom:1em;
	}
#text {
	text-align:left;
	width:500px;
	margin-left: 37px;
	margin-top: 2em;
	}
#text h1 {
	text-align:center;
	margin-bottom:.5em;
	}

/* SpryFormValidation.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #ffffff;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	border: 1px solid #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText{
	color: red !important;
}

/*-------- Outdent List on Shows Page --------*/
#text ul.outdent {
	list-style:none;
	position:relative;
	left:30px;
	width:470px;
	margin:10px;
	}
#text ul.outdent li {
	padding-bottom:20px;
	text-indent:-30px;
}
p.center {
	text-align:center;
}
/*-------- padding between 500 px images on Shows Page --------*/
#text img.imgList500 {
	padding-bottom: 30px;
}