﻿
#design-menu
{
    position:relative;
    top: 465px;
    text-align:left;
}

#design-image
{
    height:496px;
    width:730px;
    background-image:url(/assets/images/design/garden-studio.jpg);
    border-bottom: 1px solid #fff;
    position:relative;
}

#design-content
{
    height:194px;
    text-align:left;
    position:relative;
}

#div-Roof, #div-Windows, #div-Walls, #div-Foundations
{
    position:absolute;
    background-color:#646351;
}

#design-content .greenbox
{
    position:relative;
    float:right; 
    margin: 20px 40px 20px 20px; 
    z-index:10
}

.title
{
    margin:15px;
}

.design-scroll
{
    overflow:auto;
    height:125px;
    width: 480px;
    padding-right:20px;
    margin-left:20px;
    margin-top:10px;
}


a.green 
{
    text-decoration: none;
    color:#ffffff;
    font-weight:bold;
}

a.green.gselect
{
    color:#aead94;
}

#Roof-button
{
    top:85px;
    left: 230px;
    position:absolute;
}

#Walls-button
{
    top:325px;
    left: 475px;
    position:absolute;
}

#Windows-button
{
    top:260px;
    left: 300px;
    position:absolute;
}

#Foundations-button
{
    top:360px;
    left: 150px;
    position:absolute;
}

.images 
{
    width:194px;
    height:194px;
    float:right;
    padding:0;
    position:relative;
    z-index: 25;
}
.images img 
{
    margin-top: 8px;
    margin-right: 8px;
    border: 1px solid #ffffff;
}
.images a
{
    float:left;
}

ul#design-nav { background-image:url(/assets/images/design/menu.png); width: 265px; height: 194px; padding:0; margin: 8px 0 0 0;}
ul#design-nav li {list-style-type:none; display: block; float:left; padding:0; margin:0;}
ul#design-nav li a { height:48px; width: 265px; display:block; text-indent:-9999999px; outline:none; background:url(/assets/images/design/menu.png);}


li#design-roof a 						{ background-position:265px 0px;}
li#design-roof a:hover					{ background-position:0px 0px }
li#design-roof a.select					{ background-position:0px 0px }
body li#design-roof a 			        { background-position:265px 0px }

li#design-walls a 					    { background-position:265px -48px;}
li#design-walls a:hover				    { background-position:0px -48px }
li#design-walls a.select				{ background-position:0px -48px }
body li#design-walls a 		            { background-position:265px -48px }

li#design-windows a 					{ background-position:265px -96px;}
li#design-windows a:hover				{ background-position:0px -96px }
li#design-windows a.select				{ background-position:0px -96px }
body li#design-windows a 	            { background-position:265px -96px }

li#design-foundations a 				{ background-position:265px -144px;}
li#design-foundations a:hover			{ background-position:0px -144px }
li#design-foundations a.select			{ background-position:0px -144px }
body li#design-foundations a 		    { background-position:265px -144px }

/**************************************/
/*             SCROLL PANE            */
/**************************************/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 4;
    margin-top:0px;
}
#main .content .jScrollPaneContainer .inner { margin: 0px; }
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #767561;
}
.jScrollPaneDrag {
	position: absolute;
	background-color: #ffffff;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	height: 4px;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	height: 4px;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 4;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 2px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 4;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 2px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

#quote {position:absolute; width:240px; top:15px; left: 12px; text-align:left;}
