* {margin: 0; padding: 0}
ul, li {list-style: none;}
body {background: #b3b19b; color: #5f1600; font: 12px/18px Georgia; padding: 0 0 0 25px;}
a {color: #5f1600; text-transform: uppercase; text-decoration: none}
em {font-style: normal}

/*wraps*/
.wrap, .showroomWrap, .overviewWrap, .retailWrap, .workshopWrap, .reachWrap, .accoladesWrap {width: 892px; margin: 40px auto; background: url(../images/bg-w-logo.jpg) top left no-repeat; overflow: hidden}
.showroomWrap {background: url(../images/showroomBg.gif) top left no-repeat}
.overviewWrap {background: url(../images/overviewBg.gif) top left no-repeat}
.retailWrap {background: url(../images/retailBg.jpg) top left no-repeat}
.workshopWrap {background: url(../images/workshopBg.jpg) top left no-repeat}
.reachWrap {background: url(../images/reachBg.jpg) top left no-repeat}
.accoladesWrap {background: url(../images/accoladesBg.jpg) top left no-repeat}

/*topNav*/
.topNavWrap {width: 725px; overflow: hidden; padding: 11px 10px 17px 58px}
.topNav {float: right; width: 390px; overflow: hidden}
.topNav li {float: right}
.topNav li a {display: block}
.topNav li a span {display: none}

a.homeLink, a.homeLinkactive {margin-left: 21px; width: 59px; height: 15px; background: url(../images/homeLink.gif) top center no-repeat}
a.reachLink, a.reachLinkactive, a.accoLink, a.accoLinkactive, a.aboutLink, a.aboutLinkactive {height: 8px; margin-top: 4px}
a.reachLink, a.reachLinkactive {width: 97px}
a.accoLink, a.accoLinkactive {width: 120px}
a.aboutLink, a.aboutLinkactive {width: 93px}

a.reachLink {background: url(../images/reachLink.gif) top center no-repeat}
a.reachLink:hover, a.reachLinkactive {background: url(../images/reachLink.gif) bottom center no-repeat}

a.accoLink {background: url(../images/accoLink.gif) top center no-repeat}
a.accoLink:hover, a.accoLinkactive {background: url(../images/accoLink.gif) bottom center no-repeat}

a.aboutLink {background: url(../images/aboutLink.gif) top center no-repeat}
a.aboutLink:hover, a.aboutLinkactive {background: url(../images/aboutLink.gif) bottom center no-repeat}

/*main*/
.main {width: 854px; padding-left: 46px; overflow: hidden; min-height: 420px}

/*leftBody*/
.leftBody {width: 280px; float: left}
a#homeLogoLink { display: block; height: 140px; width: 240px; margin-top: 25px; margin-left: 25px;}
a#videoLink {display: block; margin-top: 36px; margin-left: 23px; color: #b3b19b; font-size: 10px; letter-spacing: 2.2px;  font-family: Georgia}
a#homeLogoLink span { display: none; }
/*rightBody*/
.rightBody {width: 462px; float: left; overflow: hidden}
.pager {
	display:block;
	font-family:arial;
	font-size:7px;
	height:40px;
	left:411px;
	line-height:40px;
	padding-left:10px;
	position:absolute;
	top:320px;
	width:37px;
	z-index:100;
	cursor: pointer
}
.pager1 {background: url(../images/arrow_01.png) top left no-repeat; }
.pager2 {background: url(../images/arrow_02.png) top left no-repeat; }
.pager3 {background: url(../images/arrow_03.png) top left no-repeat; }
.pager4 {background: url(../images/arrow_04.png) top left no-repeat; }
.pager5 {background: url(../images/arrow_05.png) top left no-repeat; }

/*copyCol*/
.copyCol {float: right; width: 90px; padding: 10px 5px}

/*details*/
.details, .details a {color: #6b6b5c; font-family: georgia; font-size: 12px; letter-spacing: 1px; line-height: 18px}
.details {display: block; padding-top: 265px}
.details .name { font-family: Verdana; font-size: 11px; font-weight: bold;  } 
.details a {color: #5F1600; font-weight: bold; font-size: 9px;}
/*bottomNav*/
.bottomNav {display: block; width: 100%; overflow: hidden; margin-top: -5px;}
.bottomNav li {display: block; float: left}

.home {width: 177px; height: 75px}
.work {width: 185px; height: 75px}
.showroom {width: 198px; height: 75px}
.promo {width: 220px; height: 44px; padding-left: 0px}

.bottomNav a span {display: none}
.bottomNav a em {color:#6C4838; font-family:Georgia; font-size:13.32px; font-style:normal; font-weight:bold; letter-spacing:2px; line-height:44px; padding:0 0 0 56px}
.bottomNav a {display: block; outline: none}

.appletonLink, .appletonLinkfooterActive {height: 75px; width: 177px; background: url(../images/appletonLink.gif) top left no-repeat;}
.appletonLink:hover, .appletonLinkfooterActive {background: url(../images/appletonLink.gif) bottom left no-repeat;}

.restorationWork, .restorationWorkfooterActive {height: 75px; width: 185px; background: url(../images/restorationWork.gif) top left no-repeat;}
.restorationWork:hover, .restorationWorkfooterActive {background: url(../images/restorationWork.gif) bottom left no-repeat;}

.onlineShowroom, .onlineShowroomfooterActive {height: 75px; width: 198px; background: url(../images/onlineShowroom.gif) top left no-repeat;}
.onlineShowroom:hover, .onlineShowroomfooterActive {background: url(../images/onlineShowroom.gif) bottom left no-repeat;}

a#promoTile {margin-top: 10px; height: 44px; width: 220px; background: url(../images/promoTile.gif) top left no-repeat}
a#promoTile:hover {background: url(../images/promoTile.gif) bottom left no-repeat}

#promoTile_exp {display: none; float: left; width: 221px; height: 154px; background: url(../images/promoTile_exp.png) top left no-repeat; margin-left: 38px}
#promoTile_exp .close {display: block; width: 15px; height: 13px; background: url(../images/close.gif) top left no-repeat; margin-left: 195px; margin-top: 10px}
#promoTile_exp span {text-transform: uppercase; color:#835649; font-family:Georgia; font-size:13.32px; font-style:normal; font-weight:bold; letter-spacing:2px; line-height:21px; padding-left: 56px; display: block; margin-top: 10px}
#promoTile_exp p {color: #a09d94; padding-left: 56px; padding-top: 6px; font-family: Verdana; font-size: 10px; letter-spacing: 1px}

/*copyright*/
.copyright {
	width: 678px; 
	margin: 5px auto; text-align: right; font-size: 9px; font-family: Verdana; color: #ccc; display: block; letter-spacing: 0px;
	/* position: absolute; right: 20px; */
}

/*showroomControls*/
#showroomControls {padding:45px 0 0 5px}
#fixtureTypeTitle, #fixtureType, #priceRangeTitle, #priceRange, #search {display: block; text-align: center}
#fixtureType, #priceRange {text-align: left; margin: 5px auto 10px; padding: 1px 0 0 20px; height: 23px; width: 156px; text-transform: uppercase; background: url(../images/showroomButton.gif) top center no-repeat}

/*showroom*/
#showroom {overflow:hidden; padding:20px 0 0 45px; width: 420px; height: 400px}
.fixturesTitle {letter-spacing: 3.5px; font-size: 11px; font-weight: bold; font-family: Georgia; padding-left: 10px }
.resultText, .scrollLegend {font-family: Georgia; font-size: 11px; color: #63625e; letter-spacing: 2px; padding-left: 14px}
.clickThumb {font-family: Verdana; font-size: 9px; color: #63625e; letter-spacing: 2px; padding-left: 10px; line-height: 10px;}
.scrollLegend {display: block; padding: 0; text-align: right; width: 380px;}
#results {padding: 3px 0 10px;}
#results li {display: block; float: left; padding: 10px 25px 3px 7px; width: 67px}
#results li div.thumbContainer {margin-bottom: 10px; height: 127px}
#results li div.thumbContainer div {background: transparent url(../images/loader.gif) no-repeat scroll center 33px; height: 107px}
#results li div span {height: 20px; display: block; }
#results img, #results span {display: block; text-align: center; cursor: pointer}
#results span {font-family: Verdana; text-transform: uppercase; color: #70200b; font-size: 10px; line-height: 14px; padding-top: 5px}

#resultsBox {
	height: 300px;
	width: 410px;
	overflow: hidden;
	position:relative;	
}
#sliderContent {
	 padding: 0 0 0 10px;
	width: 2000em; 
	 position: absolute;
}
#slider { width: 270px; margin-left: 62px;  }
.ui-widget-content { border: 0px; background: none; }
.sliderWrap {text-align: right; width: 410px;}
.slider {height: 8px; width: 409px; display: block; background: url(../images/sliderBar.gif) top center no-repeat}
.moreLink {font-family: Verdana; font-size: 8.5px;  } /*color: #63625e;*/

/* Slider
----------------------------------*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 30px; height: 16px; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-corner-all { }
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget-content {	color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-state-default, .ui-widget-content .ui-state-default {background: url(../images/slider.gif) no-repeat 50% 50%; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {background: url(../images/slider.gif) no-repeat top center; outline: none }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {}
.ui-state-hover a, .ui-state-hover a:hover {}
.ui-state-active, .ui-widget-content .ui-state-active {}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {}


.browseText {float: right; width: 101px; padding-top: 32px}

#mainCategories , #subCategories{ border: 1px solid #ccc; background: #fff; padding: 5px; width: 146px; }
#mainCategories ul li, #subCategories ul li { cursor: pointer; }

/*product + project + video Dialog*/
#productDialog, #projectDialog {z-index: 1000; overflow: hidden; height: 535px; width: 794px; margin: 0 auto; background: url(../images/productDialogBG.gif) top left no-repeat }
#projectDialog {background: url(../images/projectDialogBG2.gif) top left no-repeat}
#videoDialog {background-color: #3d3d38; z-index: 1000; overflow: hidden; height: 375px; width: 742px; margin: 0; }
#videoDialog #swf { height: 375px; width: 717px; float: left; }
#videoDialog  .close {width: 15px; margin: 5px; float: right; display: block; overflow: hidden}
#videoDialog a.closeDialog {display: block; width: 15px; height: 13px; background: url(../images/close.png) top left no-repeat }
.displayWindow { position: absolute; top: 40px; display: none; }

.productImgWrap, .projectImgWrap {float: left; display: block; height: 535px; width: 334px; background: url(../images/big-loader.gif) no-repeat center}
.projectImgWrapTop { width: 330px; background: url(../images/projectDialogBGLeftTop.png) bottom left no-repeat }
.projectImgWrapMiddle {width: 330px; overflow: hidden;}
.projectImgWrapBottom { width: 330px; background: url(../images/projectDialogBGLeftBot.png) top left no-repeat }
.projectImgWrap {
	/* padding-top: 137px; */
}
.largeProduct {height: 535px; width: 334px}

.productDetails, .projectDetails {width: 360px; float: left; padding: 30px 50px}

.dialogNav{width: 360px; overflow: hidden}
.prevNext {width: 170px; height: 27px; padding-top: 18px; float: left; display: block; overflow: hidden}
.goBack {width: 138px; height: 27px; padding-top: 18px; float: right; display: block; overflow: hidden}

a.prev, a.prev_inactive, a.next, a.next_inactive {display: block; height: 13px; float: left}
a.prev {width: 84px; background: url(../images/prev.gif) top left no-repeat }
a.prev_inactive {width: 84px; background: url(../images/prev_inactive.gif) top left no-repeat; cursor: default; }
a.next {width: 65px; background: url(../images/next.gif) top left no-repeat }
a.next_inactive {width: 65px; background: url(../images/next_inactive.gif) top left no-repeat; cursor: default; }
.backThumbs {display: block; width: 138px; height: 13px; background: url(../images/backThumbs.gif) top left no-repeat }
.backWorkshop {display: block; width: 138px; height: 13px; background: url(../images/backWorkshop.gif) top left no-repeat }

.productInfo, .projectInfo {display:block; height:235px; overflow:hidden; padding:50px 10px 20px; width:360px;}
.projectInfo {height:256px}

.productInfo dl, .projectInfo dl {width: 160px}
.productInfo dd, .projectInfo dd {margin-bottom: 15px}
.productInfo span.title, .projectInfo span.title {font-size: 10px}
.productInfo span, .projectInfo span {font-size: 11px; padding-right: 10px; line-height: 18.5px}
.productName {font-size: 11px; line-height: 17.5px; margin-bottom: 20px}
.productInfo dd a.active { color: #fff; }
.otherImages {display: block; width: 340px; padding: 20px 10px; overflow: hidden}
.otherImages ul {width: 210px; float: right; overflow: hidden}
.otherImages ul li {width: 50px; height: 80px; float: left; text-align: center; padding: 10px; }
.otherImages ul li.loader { background: url(../images/small-loader.gif)no-repeat center center; }

/*workshop + retail*/
.workshopSummary, .retailSummary {display: block; padding:10px 30px 10px 76px; letter-spacing: 0.8px}
.retailSummary {padding-top: 27px}
a#viewPastProjects {display: block; float: left; width: 85px; padding: 128px 0 0 75px; text-align: center; font-size: 10px; line-height: 14px; text-transform: none; letter-spacing: 1.7px; font-weight: bold}
.workshopMore, .retailMore {display: block; float: left; width: 236px; padding: 17px 11px 25px 20px}
.workshopMore { padding-bottom: 0px; }
.workshopMore2 {display: block; float: left; width: 236px; padding: 15px 11px 25px 20px}
.retailMore {padding: 6px 11px 25px 185px; line-height: 16px}
.ppImgTrigger { cursor: pointer; }
.invLinks { margin-top: 5px; }
.invLinks li { padding: 3px 0; }
.invLinks li a { font-size: 11px; color: #5e5e5e; text-transform: none;}
a.ppNavTrigger  { text-transform: none;}
/*about-us-interior -*/
.intNav {width: 370px; overflow: hidden; padding: 15px 0 28px 59px; margin: 0 auto; position: relative}
.intNav li {float: left; text-align: center; padding: 5px 9px}
.intNav li a {letter-spacing: 1.5px; font-size: 11px; font-family: Georgia}

.overviewSummary { padding: 27px 10px 10px 167px; }
.overviewSummary p {font-size: 11px; line-height: 17px; letter-spacing: 0.8px}

.comRes {padding: 15px 0 15px 75px; width: 366px; overflow: hidden}
.comRes .left, .comRes .right {width: 110px; font-size: 10px; padding-top: 16px; padding-bottom: 18px; letter-spacing: 0.1px; line-height: 20px}

/*accolades*/
.accolades{overflow: hidden; width: 380px; padding: 85px 0 0 57px}
.press {width: 175px; float: left; padding-left: 10px; padding-top: 10px}
.press li {padding-bottom: 15px}
.headline, .source, .quote {display: block; letter-spacing: 0.1px}
.headline, .quote {font: bold italic 10px/15.3px Georgia; color: #4f4d4d}
.quote {padding-top: 10px}
.source {font: normal 9px/13px Verdana; color: #918f8f; padding-top: 1.5px}
.customers {width: 170px; }
.moreLInk {color: #5f1600; text-transform: uppercase; font: normal 8px/13px Verdana}

/*reachUs*/
.reachUs {overflow: hidden; width: 380px; padding: 85px 0 0 57px; text-align: center}

.reachUs span {display: block; text-transform: uppercase; letter-spacing: 0.8px}
.reachUs span.appleton {color: #918f8f}

.reachUs span.info {color: #5e5e5e; font-size: 10.5px; text-transform: none; font-family: Georgia; letter-spacing: 0.5px}
.hours {margin-top: 27px}
.directions {margin-top: 27px}
.info a { text-transform: lowercase; font-size: 12px; }

.dir {display: block; margin-top: 2px}
input.address {border: 1px solid #d7d7ca; background: #f9f9f5; padding: 2px; width: 240px}
input.getDirections {height: 23px; width: 40px; border: none; background: url(../images/go.gif) top left no-repeat; top:3px;
vertical-align:bottom;
width:40px; position: relative}

/*classes*/
.hide{ display: none; }
.overflow{overflow: hidden}
.block {display: block}
.left {float: left}
.right {float: right}
.georgia {font-family: Georgia}
.verdana {font-family: Verdana}
.maroon{color: #630B07}
.maroonLight {color: #9e6f61}
.white {color: #fff;}
.tan {color: #b3b19b}
.grey {color: #5e5e5e}
.eleven {font-size: 11px}
.ten {font-size: 10px}
.nine {font-size: 9px}
.bold {font-weight: bold}
.italic {font-style: italic}
.lsOne {letter-spacing: 1px}
.lsTwo {letter-spacing: 2px}
.lsThree {letter-spacing: 3px}30B07}
.maroonLight {color: #9e6f61}
.tan {color: #b3b19b}
.grey {color: #5e5e5e}
.eleven {font-size: 11px}
.ten {font-size: 10px}
.nine {font-size: 9px}
.bold {font-weight: bold}
.italic {font-style: italic}
.lsOne {letter-spacing: 1px}
.lsTwo {letter-spacing: 2px}
.lsThree {letter-spacing: 3px}
.dyn {  }
.halfOpacity { opacity: .5; }
.imgLink { cursor: pointer; }

div.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 170px; 
    height:215px; 
} 
 
div.scrollable div.items { width:20000em;  position:absolute; } 
 
div.scrollable div.items div {  float:left; } 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}