html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}

* { margin:0; padding:0; }
html { font-size:100.01%; margin:0; height:100%}
body { font-size:62.5%; margin: 0; padding: 0}
.clearfix { clear:both; }

body,textarea,input,select,option,button { color:#555555; font-family:Century Gothic,Arial,Helvetica Neue,Helvetica,sans-serif; line-height:1.25; }
li,dt,dd,p,th,td,caption,pre { font-size:1.2em; }
ul,ol,dl,p,pre,h1,h2,h3,h4,h5,h6 { margin-bottom:15px; }
a { color:#FF9966; text-decoration:underline; }
a:hover,a:focus,a:active { color:#273278; text-decoration:underline; }
ul,ol,dd,blockquote { padding-left:40px; }
ul ul,ol ol,ul ol,ol ul { margin-bottom:0; }
li *,li p,li li,dt *,dd *,p *,th *,td * { font-size:1em; }
img { border:medium none; }
pre { font-family:"Courier New",monospace; white-space:pre-wrap; }
table { border-collapse:collapse; border-spacing:0; }
button { cursor:pointer; overflow:visible; padding:0 10px; }
button::-moz-focus-inner { border:medium none; padding:0; }
hr { background-color:#CCCCCC; border:medium none; color:#CCCCCC; height:1px; margin:15px 0!important; overflow:hidden; padding:0; }
:first-child + html hr { margin:-7px 0 8px!important; }
.offset { left:-10001px!important; overflow:hidden!important; position:absolute!important; }


/* Layout */


#topContentWrapper {width:100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -200px;}

#bottomContentWrapper {background:url(../images/template/footerBackground.jpg) repeat-x scroll center top #273277; height:200px; position:absolute; width:100%; padding:30px 0 0; }

.push {height: 200px;}



#topContent { margin:0 auto; position:relative; width:927px; }
#homeContent {margin: 0; padding: 0;}
#headerWrapper { height:110px; position:relative; width: 927px; margin: 0 auto; }
#headerLogo { float:left; height:109px; width:182px; }
#searchWrapper { top:0; float:right; position:absolute; right:0; border:0 solid lime; /* margin:10px 0 0; */ padding:10px 0 0; }
form { margin:0; padding:0; }

.headerImage {background: url(../images/template/photobottom.png) no-repeat bottom center;}
#mainImage {padding: 20px 0 0 0;}

#homeBoxesWrapper { display:block; width:940px; overflow:hidden; margin:0 0 15px; border:0 solid blue; }

#navWrapper { bottom:0; float:right; position:absolute; right:0; min-height:50px; border:0 solid orange; }

#bottomContent { display:block; margin:0 auto; width:780px; height:150px; top: 30px; position: relative; }
#bottomContentInner { display:block; margin:0 auto; width:780px; top: 60px; left: 70px; position: relative; }

#footerLeft a {color: black; text-decoration: none; background: transparent url(../images/template/bottomLinkBackground.png); padding: 5px 10px; margin: 5px 0; display: block; font-size: 1.2em; border: 1px solid #7b9edb;}
#footerLeft a:hover {background: #5175cb; color: white;}
#footerLeft h2, #footerMiddle h2, #footerRight h2 {margin: 0; padding: 0;}

#footerLeft { display:block; float:left; width:170px; height:120px; margin:0 30px 0 0; border:0 solid lime; }
#footerMiddle{ position:relative; float:left; display:block; width:215px; padding:0; margin:0 30px 0 0; }
#footerRight {float: left; width: 200px}
#footerRight img {top:-20px; position: relative;}
#designGuideWrapper h2 { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(/images/template/blue_obs.gif) no-repeat scroll right center; font-size:1.2em; font-weight:normal; color:#ff9966; text-transform:uppercase; display:block; width:100px; padding:0 10px 0 0; margin:10px 0 5px; float:left; }
#designGuideWrapper p { font-size:1em; line-height:1.8em; color:#FFF; padding:0; margin:0; float:left; }

#contentCol2 { float:left; width:720px; padding:20px 0 0 0; }
#colContainer { display:block; float:left; width:185px; clear:both; padding: 20px 0 0 0; }

#footer {background:url(../images/template/footerBackground.jpg) repeat-x scroll center top; height:200px; position:relative; width:100%; margin-top: -200px; clear: both; }

#main {overflow: auto; padding-bottom: 200px; width: 927px; margin: 0 auto; }

#contentCol2 .webform label {/* display: block; */ width: 200px; /* float: left; */}
#contentCol2 .webform legend {font-size: 1.8em; font-weight: bold; margin: 0 0 0 10px; padding: 0 10px;}
#contentCol2 .webform fieldset {margin: 0 0 20px 0;}
#contentCol2 .webform td h2 {font-size: 1.8em;}

/* top util nav */
#unav { border:0 solid pink; float:right; }
#unav ul { display:block; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0 0 0 10px; z-index:10; }
#unav ul li { display:inline; float:left; font-size:1.1em; text-transform:uppercase; margin:0 1px; position:relative; z-index:10; }
#unav ul li a { color:#999; display:inline-block; padding:3px 17px; position:relative; text-align:center; text-decoration:none; top:0; }
#unav ul li:hover { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#d1e8ff none repeat scroll 0 0; }
#unav ul li:hover a { color:#6984be; }
#unav ul li.selected { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#d1e8ff none repeat scroll 0 0; }
#unav ul li.selected a { color:#424989; }
#unav ul li ul {display: none;}
#navrule { display:block; height:3px; border-bottom:1px solid #e6e6e6; float:right; width:90%; margin-right:16px; }

/* primary nav */
#pnav {border:0 solid green; float:right; }
#pnav ul { display:block; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0 0 0 10px; z-index:30; }
#pnav ul li { display:inline; float:left; font-size:1.2em; text-transform:uppercase; height:25px; margin:0 1px; position:relative; z-index:30; }
#pnav ul li a { color:#424989; display:inline-block; padding:5px 17px; position:relative; text-align:center; text-decoration:none; top:0; }
#pnav ul li:hover { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#d1e8ff none repeat scroll 0 0; }
#pnav ul li:hover a { color:#424989; }
#pnav ul li.selected { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#d1e8ff none repeat scroll 0 0; }
#pnav ul li.selected a { color:#424989; }

#pnav ul li ul {display: none;}

/*  side nav */
#snav_hdr { border:0 solid green; float:left; width:auto; height:25px; clear:both; font-size:1.2em; text-align:left; line-height:1.7em; text-transform:uppercase; color:#ff9966; margin:0 0 10px 20px; padding:0 18px 0 0; background:url(../images/template/snav_selected.gif) right 5px no-repeat; }
#snav { border:0 solid green; float:left; width:auto; height:auto; }
#snav ul { list-style-image:none; list-style-position:outside; list-style-type:none; margin:0 0 0 20px; padding:0; }
#snav ul li { /* font-size:1.1em; */ text-align:left; line-height:1.7em; width:auto; margin:0 0 10px; }
#snav ul li a { color:#424989; display:block; width:auto; text-decoration:none; text-transform:uppercase; padding:0 5px; }

#snav ul li a:hover { color:#ff9966; }

#snav ul li ul {display: none;}
#snav ul li.selected ul {display: block; margin: 0 0 0 5px;; padding: 0;}
#snav ul li.selected ul li {line-height: 10px;}
#snav ul li.selected ul li a {font-size: 10px;}
#snav ul li.selected ul li a:hover { color:#ff9966; }



#snav li#sub { font-size:.95em; text-align:left; line-height:.7em; width:auto; margin:5px 0 8px; }
#snav li#sub a { color:#999999; display:block; width:auto; text-decoration:none; text-transform:uppercase; }
#snav li#sub a:hover { color:#FF9966; }

#snav li.selected a {color:#FF9966;}
#snav li.selected ul a {color: #424989;}
#snav li.selected ul li.selected a {color:#FF9966;}

/* bottom nav */
#bottomNavWrapper { float:right; display:block; width:120px; height:85px; }
#bottomNav ul { list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0; }
#bottomNav li { font-size:1em; text-align:right; line-height:1.7em; }
#bottomNav li a { color:black; text-decoration:none; }
#bottomNav li a:hover { color:#424989; }


#sideNavWrapper { width:200px; }
#sideNav { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(../images/template/sideNavBackground_middle.png) repeat-y scroll right center; width:200px; }
#sideNav ul { display:block; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; padding:0 0 10px; z-index:10; }
#sideNav ul li { font-size:1.2em; padding:5px 0; }
#sideNav ul li a { color:#313C64; margin:0 0 0 10px; text-decoration:none; }
#sideNav ul li:hover,#sideNav ul li.selected { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#313C64 none repeat scroll 0 0; }
#sideNav ul li:hover a,#sideNav ul li.selected a { color:white; }
#sideNavBottom { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(../images/template/sideNavBackground_bottom.png) no-repeat scroll right bottom; width:200px; }
#sideNavTop { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(../images/template/sideNavBackground_top.png) no-repeat scroll right top; height:12px; width:200px; }



/* Slider Styles */
#container { background-color:#fff; width:720px; margin:15px auto; padding:0; }
#containerHome { background-color:#fff; width:910px; margin:0; padding:0; border: 1px solid #e4e4e4;}

/* slider specific CSS */

.sliderGallery { overflow:auto; position:relative; padding:0px; height:190px; width:100%; margin:4px auto; }
.sliderGallery ul { position:absolute; list-style:none; white-space:nowrap; padding:0; margin:0; }
.sliderGallery ul li { display:inline; position: relative; padding: 0 10px 0 0; }

.sliderContainer { width:600px; height:19px; top:160px; margin:auto; padding:0 60px; position:relative; background:url(../images/slider/scrollbar2.png) no-repeat; }

.slider { width:550px; height:17px; padding:1px; position:relative; margin: 0 auto;}

.ui-slider-handle { position:absolute; cursor:move; height:17px; width:140px; top:0; margin:0 -70px; background:url(../images/slider/scroller2.png) no-repeat; z-index:100; }

span.spaSliderTitle {font-size: .9em; display: block; float: left; padding: 0; width: 120px; text-align: center;}

span.spaSliderTitle a {text-align: center;}
.spaSliderImage {width: 120px; text-align: center;display: block;}
.slider span { color:#bbb; font-weight: bold; cursor:pointer; position:absolute; z-index:110; top:2px; }
span.spaSliderWrapper {display: inline-block; width: 130px; border: 1px solid #e4e4e4; padding: 5px; -moz-border-radius: .5em; -webkit-border-radius: .5em;}

.slider .slider-lbl1 { left:-30px; }
.slider .slider-lbl2 { left:90px; }
.slider .slider-lbl3 { left:200px; }
.slider .slider-lbl4 { left:300px; }
.slider .slider-lbl5 { left:450px; }
.slider .slider-lbl6 { left:500px; }
.slider .slider-lbl7 { left:550px; }

.highlight { border:1px solid #fff; }

#shellColorTip, #cabinetColorTip { 
    display:none; 
    background:transparent url(/images/template/black_arrow2.png) no-repeat; 
    font-size:11px;
    line-height: 11px;
    font-weight: bold; 
    height:23px; 
    width:40px; 
    padding:10px 20px; 
    color:#fff; 
    text-align: center;    
}
#spaDetailsCol-1Wrapper {float: left; width: 400px; padding: 0 20px 0 0;}
#spaDetailsCol-2Wrapper {float: left; width: 300px;}
.spaDetails-TR {padding: 5px 6px; font-size: 1.2em; border-bottom: 1px solid gray;}
.spaDetails-Col1 {display: inline-block; width: 300px;}
.spaDetails-Col2 {display: inline-block; font-weight: bold;}
.hightlight {background: #e4e4e4;}

#shellColors img, #cabinetColors img {margin: 0 5px; cursor: pointer; border: 0;}
#shellColorsWrapper {}
#cabinetColorsWrapper {padding: 20px 0 0 0;}

/* Home Slider Styles */

.sliderGalleryHome { overflow:auto; position:relative; padding:0px; height:160px; width:100%; margin:0 auto; }
.sliderGalleryHome ul { position:absolute; list-style:none; white-space:nowrap; padding:0; margin:0; }
.sliderGalleryHome ul li { display:inline; position: relative; padding: 0 10px 0 0; }

.sliderContainerHome { width:790px; height:19px; bottom:0px; margin:auto; padding:0 60px; position:absolute; background:url(../images/slider/scrollbar-Home.png) no-repeat; }

.sliderHome { width:550px; height:17px; padding:1px; position:relative; margin: 0 auto;}
.sliderHome span { color:#bbb; font-weight: bold; cursor:pointer; position:absolute; z-index:110; top:2px; }
#shellColorPicker img{border: 1px solid gray;}
#cabinetColorPicker img{border: 1px solid gray;}
.spaImg{width:80px;height: 30px;}

.shellItem {float: left; width: 95px;}
.cabinetItem {float: left; width: 95px;}


#grayShell.shellItem, #opalShell.shellItem, #whiteShell.shellItem {display: none;}

#opalShell.Opal {display: block;}
#whiteShell.White {display: block;}
#grayShell.Gray {display: block;}

#grayCabinet.cabinetItem, #mochaCabinet.cabinetItem {display: none;}

#grayCabinet.Gray {display: block;}
#mochaCabinet.Mocha {display: block;}




/* New styles to move  */

.homeCol {float: left; width: 221px; height: 200px; margin: 10px 10px 0 0; }

#homeCol1a {height: 224px; top: -30px; position: relative;}
#homeCol4a {height: 224px; top: -30px; position: relative;}


#staticDisplay .item {float: left; margin: 0 20px 0 0; position: relative;}
#staticDisplay .item .flowLink {}
#staticDisplay .item .flowLink a {height: 130px; width: 130px; display: block; top: 0; position: absolute; z-index: 5000; background: url(./images/template/transparent.gif); text-indent: -9999em;}






#container {
	width:927px;
	height: 400px;
	padding:10px;
	margin:0 auto;
	position:relative;
	z-index:0;
}


#slides {
	position:absolute;
	top:15px;
	left:4px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:927px;
	overflow:hidden;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
	width:927px;
	height:400px;
	display:block;
}


/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:107px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:585px;
}

/*
	Pagination
*/

#slides .pagination {
	margin:26px auto 0;
/* 	width:100px; */
	position: absolute;
	right: 0;
	bottom: 10px;
	z-index: 500;
}

#slides .pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

#slides .pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../javascript/img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

#slides .pagination li.current a {
	background-position:0 -12px;
}