@import url('reset.css');

html {
	height: 101%; /* Force a scrollbar at all times to prevent weird page resizing issues */
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%; /* reset to 10px to account for em usage later. from http://www.clagnut.com/blog/348/ 0.875em;*/
	text-align: center; /* IE 6 trick to center the frame since IE applies text align to elements and not just text */
	background-color: #D18D44;
	background-image: url("../images/woodfloor-background.jpg");
}

h1, h2, h3, h4, h5, h6 {
	color: #283A34;
	font-weight: bold;
	margin: 10px 0px 10px 0px;
}

h1 {
	font-size: 2.0em;
}

h2 {
	font-size: 1.5em;
}

p, td {
	margin-bottom: 10px;
	font-size: 1.3em;
}

a {
	text-decoration: underline;
	color: #471A04;
}

a img {
	border: 0px;
}

fieldset {
	border-width: 1px 1px 1px 10px;
	border-color: black;
	border-style: solid;
	width: 60%;
	margin-bottom: 10px;
}

legend {
	text-transform: uppercase;
	padding: 5px 10px 5px 10px;
	border-width: 1px 1px 1px 10px;
	border-color: black;
	border-style: solid;
}

label {
	cursor: pointer;
	font-weight: bold;
}

label.required-input:after {
	content: "";
}

input[type=text], input[type=password], textarea {
	border: solid #CCCCCC 1px;
	width: 250px;
	font-size: 18px;
	padding: 8px;
	
	-moz-border-radius-bottomleft: 6px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
}

input[type=submit] {
	border: 2px solid black;
	padding: 10px;
	font-weight: bold;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
	background-color: #FAFAFA;
}

input + span, select + span, textarea + span, form p span {
	padding-left: 10px;
	color: #CBCBCB;
	font-weight: bold;
}

select {
	border: solid #CCCCCC 1px;
	font-size: 14px;
	padding: 4px 15px 4px 4px;
}

#outer-wrapper {
	width: 980px;
	min-height: 802px;
	margin: 50px auto 0px auto; /* center the div */
	text-align: left; /* reset the text alignment now that IE6 has already centered the frame */
}

#inner-wrapper {
}

#header {
	width: 980px;
	height: 118px;
}

#logo {
	width: 331px;
	height: 58px;
	position: relative;
	top: 35px;
	left: 50px;
	/*background-image: url("../images/wood-work-specialties-logo.png");
	background-repeat: no-repeat;*/
}

#header-phone {
	position: relative;
	top: -5px;
	left: 750px;
	margin-right: 50px;
	font-size: 225%;
	color: #421C07;
	font-weight: bold;
}

#page-content{
	/* This is needed to place the content section centered underneath the crown molding */
	position: relative;
	top: 0px;
	left: 0px; /*44px;*/
	width: 980px; /*892px;*/
	min-height: 500px;
	height: auto !important; /* IE 6 min-height hack from http://www.dustindiaz.com/min-height-fast-hack/ */
	height: 500px;
	background-image: url("../images/inner-background.png");
	
}

#inner-page-content {
	width: 980px;
	float: left;
	overflow: hidden;
}



#slides {
	height: 110px !important;
	width: 960px;
	margin: 0 auto;
	padding-top: 10px;
}

#slides li {
	list-style-type: none;
}

#navigation {
	width: 200px;
	margin-right: 10px;
	margin-left: 10px;
	min-height: 350px;
	float: left;
	background-color: #7A5640;
	
	/*
	background-color: #803A0B;
	background-image: url("../images/menu-background.png");
	background-repeat: repeat-y;
	*/
	
	
	/*float: left;
	margin-left: 6px;
	width: 204px;
	min-height: 100px;
	height: auto !important;  IE 6 min-height hack from http://www.dustindiaz.com/min-height-fast-hack/ 
	height: 100px;
	background-image: url("../images/navigation-background.png");
	*/
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 

	
}

#navigation ul {
	list-style-type: none;
}

#navigation ul li {
	/*background-image: url("../images/menu-item-background.png");
	background-repeat: no-repeat;
	background-position: bottom left;*/
	font-size: 1.4em;
	color: #FFFFFF; /*#4C0000;*/
	font-weight: bold;
	padding: 10px 0px 0px 10px;
	border-left: 1px solid #D6A976;
}

li.last {
	/*background-image: url("../images/navigation-bottom.png") !important;
	height: 5px;
	border: none !important;*/
}

#navigation ul li a {
	color: #FFFFFF; /*#3E160C;*/
	text-decoration: none;
}

#main-content {
	float: left;
	width: 570px;
	
	margin-right: 10px;
	background-color: #BAAB91;
	
	
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 

}

#main-content ul {
	font-size: 1.3em;
	margin-left: 20px;
}

#sidebar {
	width: 130px;
	float: right;
	background-color: #7A5640;
	margin-right: 10px;
	
	
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 


}



#home-navigation {
	width: 200px;
	margin-right: 10px;
	margin-left: 10px;
	min-height: 350px;
	float: left;
	background-color: #7A5640;
	
}


#home-navigation ul {
	list-style-type: none;
}

#home-navigation ul li {
	/*background-image: url("../images/menu-item-background.png");
	background-repeat: no-repeat;
	background-position: bottom left;*/
	font-size: 1.4em;
	color: #FFFFFF; /*#4C0000;*/
	font-weight: bold;
	padding: 10px 0px 0px 10px;
	border-left: 1px solid #D6A976;
}

li.last {
	/*background-image: url("../images/navigation-bottom.png") !important;
	height: 5px;
	border: none !important;*/
}

#home-navigation ul li a {
	color: #FFFFFF; /*#3E160C;*/
	text-decoration: none;
}


#home-exterior {
	float: left;
	width: 420px;
	height: 300px;
	text-align: center;
}



#home-welcome {
	float: right;
	width: 320px;
	padding: 10px 10px 0px 10px;
}




#product-photos {
	height: 370px;
	width: 450px;
}

#producttour {
	padding: 0px;
	margin-left: 0px !important;
	height: 370px !important!;
}

#producttour li {
	list-style-type: none;
}

#boxes-div {
	background-image: url("../images/boxes-background.png");
}


#footer {
clear:both;
	width: 980px;
	min-height: 66px;
	height: auto !important; /* IE 6 min-height hack from http://www.dustindiaz.com/min-height-fast-hack/ */
	height: 66px;
	background-image: url("../images/footer-background.png");
	background-repeat: no-repeat;
	text-align: center;
	color: #FFFFFF;
	padding-top: 32px;
}

#footer a {
	color: #FFFFFF;
	font-weight: bold;
}

.info-box {
	float: left;
	width: 247px;
	min-height: 280px;
	height: auto !important; /* IE 6 min-height hack from http://www.dustindiaz.com/min-height-fast-hack/ */
	height: 280px;
	
	padding-left: 40px;
	padding-right: 10px;
	/*background-color: #fff;*/
	color: #000;
	/*filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;*/
}

.info-box h1 {
	color: #100801;
}

.arrow {
	background-image: url("../images/box-down-arrow.gif");
	background-repeat: no-repeat;
	background-position: top left;
}

.info-box h2 {
	color: #000; /*#78A279;*/
}

#slides img {
	border: 1px solid black;
}

/*
*** CLASSES ***
*/
.clear {
	width: 100%;
	height: 10px;
	visibility: hidden;
}

.errorInput {
	background-color: #FFC0CB;
	background-image: url('../images/exclamation.png');
	background-repeat: no-repeat;
	background-position: center right;
}

.goodInput {
	background-color: #DFF5DE;
	background-image: url('../images/check.png');
	background-repeat: no-repeat;
	background-position: center right;
}

/* YUI draggable list control */
ul.draggable_list { 
	position: relative;
	width: 400px; 
	list-style: none;
	margin: 0;
	padding: 0;
	/*
	   The bottom padding provides the cushion that makes the empty 
	   list targetable.  Alternatively, we could leave the padding 
	   off by default, adding it when we detect that the list is empty.
	*/
	padding-bottom: 20px;
}

ul.draggable_list li {
	margin: 3px;
	cursor: move;
	padding: 3px;
}

li.draggable_li {
	background-color: #D1E6EC;
	border: 1px solid #7EA6B2;
}