/* Product page styles
	1 - Show/hide elements of the structure
	2 - Positioning elements
      2.1 - Columns
      2.2 - Product details content section (photos, description and price)
      2.3 - Saved Portfolio section - Carousel
      2.4 - About This Product secion
      2.5 - Customer Rated section
      2.6 - Learn More section
         2.6.1 - Learn More tabs
         2.6.2 - Learn More box
         2.6.3 - Learn More box content
      2.7 - Right column
         2.7.1 - Right column tabs
         2.7.2 - Right Column content
      2.8 Zoom view
	3 - Right column links
*/


/* 2 - Show/hide elements of the structure
*************************************************************************************/

/*#product-left-column,*/
/*#product-right-column*/
/*#product-photos,*/
/*#product-additional-images,*/
/*#product-photo-big,*/
/*#product-description,*/
/*#product-price*/
/*#product-saved-portfolio,*/
/*#product-about-this-product,*/
/*#product-customer-rating,*/
/*#product-learn-more,*/
/*#product-order-options div*/
/*
{
	border: dashed 1px gray !important
}
*/

/* 2 - Positioning elements
*************************************************************************************/

/* 2.1 - Columns
*************************************************************************************/

#product-left-column
{
	width: 736px;
	float: left
}

#product-right-column
{
	position: relative;
	margin-top: -17px;
	width: 226px;
	float: left;
	display: block;
	/*min-height: 400px;*/
	/*background-color: #e6eac4*/
	background: url(/img/right-column-background.jpg) repeat-x;
}

/* 2.2 - Product details content section (photos, description and price)
*************************************************************************************/

#product-photos
{
	position: relative;
	width: 720px;
	height: 433px;
	padding-left: 15px;
	float: left
}

.product-green-icon
{
	position: absolute;		
	float: right;
	padding-bottom: 6px;
	bottom: 0px;
	right: 84px;		
	/*background-color: gray;*/
	/*filter: alpha( opacity = 20 ) !important*/
}

.product-confidenceplus-icon
{
	position: absolute;
	float: right;
	padding: 6px;	
	bottom: 0px;
	right: 0px;
}

.product-tigressa-icon
{
	position: absolute;
	float: left;
	padding: 6px;	
	bottom: 0px;
	left: 0px;
}

#product-small-logos img
{
	margin-left: 5px;
}

#additional-images
{
	padding-top: 10px;
}

#additional-images-list *
{
	margin: 7px 10px 0px 0px
}

#additional-images-list
{
	position: relative;
	float: left
}

#additional-images-upload-link
{
	width: 100px;
	float: left;
	position: relative;
	margin-top: 24px
}

.product-photo-big
{
	position: relative;
	width: 347px;
	height: 347px;
	margin-bottom: 15px;
}

#product-description
{
	width: 346px;
	height: 163px;
	padding: 0px 13px 0px 15px;
	float: right;
	position: relative;
	top: 0px;
	right: 0px;
	margin: -433px 0 0 0
}

#product-order-options div *[src]
{
	margin: 5px 0px 5px 0px
}

.product-order-online, .product-order-sample
{
	width: 55px;
	height: 60px;
	float: left;
	margin: 5px 10px 0px 0px
}
	
.product-order-home-consultation
{
	width: 108px;
	height: 60px;
	float: left;
	margin: 5px 10px 0px 0px
}

#product-price
{
	width: 346px;
	height: 168px;
	padding: 0px 13px 0px 15px;
	float: right; 
	position: relative;
	bottom: 0px;
	right: 0px;
	margin: -254px -374px 0 0;
	line-height: 150%;
	/* This background will be used for the background of the estimated cost: */
	/*background: url(/img/estimated-cost-background.jpg)*/ 
}

#product-price-calculator
{
	float: left;
	bottom: 0;
	position: absolute;
	width: 280px
}

/* 2.3 - Saved Portfolio section - Carousel
*************************************************************************************/

#mygallery
{
	margin: 0px 0px 10px 10px;
	width:  632px;
	height: 57px;
	float: left;
	background: url(/img/carousel-background.jpg) repeat-x;
	/*background-color: #f6f8ea*/
	
}
.stepcarousel
{
	position: relative;
	overflow: hidden
}

.stepcarousel .belt
{
	position: absolute;
	left: 0;
	top: 0
}

.stepcarousel .panel
{
	float: left;
	width: 150px;
	/*overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 5px 10px 0px 10px; /*margin around each panel*/
	/*width: 150px /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */	
}

.stepcarousel .panel div
{
	bottom: 0px;
	position: relative;
	float: left;
	margin-left: 4px
}

.stepcarousel .panel .panel-align-bottom
{
	position: absolute;
	bottom: 0px
}

.panel-align-top
{
	position: absolute
}

#product-saved-portfolio
{
	padding-left: 15px;
	height: 140px;
	margin-bottom: 0px
}

#product-saved-portfolio-carousel
{
	margin: 0px 0px -8px 0px;
}

.product-carousel-left-arrow
{
	margin: 0px -10px 10px 15px;
	width: 19px;
	height: 57px;
	float: left
}

.product-carousel-right-arrow
{
	margin: 0px 0px 10px 0px;
	width: 19px;
	height: 57px;
	float: left
}

.carousel-image-button
{
	position: absolute;
	top: 1px;
	right: 1px;
}

#product-saved-portfolio-save-button
{
	float: right;
	width: 300px;
	text-align: right;
	padding-right: 20px
}

#product-saved-portfolio-information-text
{
	float: right;
	width: 200px;
	text-align: right;
	padding-right: 20px
}



#saved-portfolio-box
{
	width: 703px;
	margin: 5px 0px 10px -5px;
	height: 100px
}

#saved-portfolio-box-tabs
{
	width: 703px;
	height: 27px;
	display: inline-block;
	background: url(/img/learn-more-tabs-top.jpg)
}

#saved-portfolio-box-content
{
	height: 62px;
	display: inline-block;
	padding: 5px 5px 5px 5px;
	background: url(/img/learn-more-background.jpg);
}

#saved-portfolio-box-bottom
{
	width: 703px;
	height: 7px;
	display: inline-block;
	background: url(/img/learn-more-bottom.jpg);
}





/* 2.4 - About This Product secion
*************************************************************************************/

#product-about-this-product
{
	padding-left: 15px;
}

/* Tooltip: */

#fixedtipdiv
{
	position:absolute;
	margin-top: 6px;
	/*padding: 2px 5px 5px 5px;/*
	/*background-color: #e6eac4;*/
	/*color: #584719;*/
	/*border: 2px solid #b7b7b7;*/
	width: 218px;
	/*filter: progid:DXImageTransform.Microsoft.Shadow(color=#c5c5c5,direction=135);*/
	z-index:100;
	/*line-height:18px;*/
}

#fixedtipdiv-middle
{
	display: block;
	background: url(/img/tooltip-background.png);
	width: 193px;
	text-align: center;
	padding: 0px 15px 10px 10px;
	color: #574215;
	/*margin-top: 6px;*/
	/*background-color: #e6eac4;*/
	/*border: 2px solid #b7b7b7;*/
	/*width: 150px;*/
	/*filter: progid:DXImageTransform.Microsoft.Shadow(color=#c5c5c5,direction=135);*/
	z-index:101;
	line-height:18px
}

#fixedtipdiv-top
{
	display: block;
	background: url(/img/tooltip-top.png) no-repeat;
	width: 218px;
	height: 8px
}

#fixedtipdiv-bottom
{
	display: block;
	background: url(/img/tooltip-bottom.png) no-repeat;
	width: 218px;
	height: 12px
}

/* 2.5 - Customer Rated section
*************************************************************************************/

#product-customer-rating
{
	padding-left: 15px;
}

/* 2.6 - Learn More section
*************************************************************************************/

#product-learn-more
{
	padding-left: 15px;
}

/* 2.6.1 - Learn More tabs (be careful with this for the other browsers)
*************************************************************************************/

#learn-more-box-tabs
{
	width: 703px;
	height: 27px;
	display: inline-block;
	background: url(/img/learn-more-tabs-top.jpg)
}

#learn-more-box-tabs-list li
{
	list-style: none;
	display: inline
}

.learn-more-box-tabs-list-front
{
	background: url(/img/learn-more-tabs-background.jpg)
}

.learn-more-box-tabs-list-back
{
	background: url(/img/learn-more-tabs-background-behind.jpg)
}

#learn-more-box-tabs-list *
{
	display: inline-block;
	height: 27px
}

#learn-more-box-tabs-list a
{
	margin-top: 7px
}

#learn-more-box-tabs-first
{
	width: 19px;
	height: 27px;
	float: left
}

.learn-more-box-tabs-middle
{
	width: 21px;
	height: 27px;
	float: left
}

#learn-more-box-tabs-last
{
	width: 22px;
	height: 27px;
	float: left
}

.learn-more-box-tabs-item
{
	height: 27px;
	text-align: center;
	float: left
}

.learn-more-hide-tab
{
	visibility: hidden !important;
	display: none !important
}

/* 2.6.2 - Learn More box
*************************************************************************************/

#learn-more-box
{
	width: 703px;
	margin: 5px 0px 10px -5px;
	min-height: 50px
}

#learn-more-box-content
{
	width: 673px;
	min-height: 43px;
	display: inline-block;
	padding: 10px 10px 10px 20px;
	background: url(/img/learn-more-background.jpg);
}

#learn-more-box-bottom
{
	width: 703px;
	height: 7px;
	display: inline-block;
	background: url(/img/learn-more-bottom.jpg);
}

/* 2.6.3 - Learn More box content
*************************************************************************************/

#learn-more-box-content-product-image
{
	float: right
}

.learn-more-box-content-text
{
	padding-left: 20px;
	padding-right: 20px;
	color: #444;
	line-height: 18px;
}

.learn-more-inside-box
{
	width: 600px;
	border: solid 1px #dadad8;
	margin: 10px 0px 10px 0px;
	padding: 15px
}

#ProjectCalculatorTotals
{
	float: left;
	width: 500px;
	text-align: right
}

#ProjectCalculatorTotalsData
{
	float: left;
	width: 130px;
	text-align: right
}

#ProjectCalculatorButtons
{
	text-align: right;
	width: 640px;
	margin: 40px 0px 15px 0px
}

#ProjectCalculatorButtons *
{
	float: right
}

/* 2.7 - Right Column
*************************************************************************************/

.right-column-separator
{
	width: 204px;
	/*width: 94%;*/
	margin: 8px 5px 5px 5px;
	height: 1px;
	/*background-color: #fff;*/
	display: block;
	clear: both;
	border-top: dashed 1px #b6b6b6;
}

.right-column-separator2
{
	width: 208px;
	margin: -8px 0px 7px -24px;
	height: 1px;
	/*background-color: #fff;*/
	border-top: dashed 1px #b6b6b6;
	display: inline-block;
}

.right-column-content-end
{
	background: none;
	height: 16px;
	cursor: hand;
	margin: 2px 0px 0px 0px;
	color: #606060;
	padding: 10px 0px 0px 30px;
	font-size: 8pt;
	/*letter-spacing: -1px*/
}

/* 2.7.1 - Right Columns tabs (be careful with this for the other browsers)
*************************************************************************************/

#product-right-column-tabs
{
	width: 226px;
	height: 29px;
	border-bottom: solid 1px #fff;
	display: inline-block
}

#product-right-column-tabs li
{
	list-style: none;
	display: inline;
}

#product-right-column-tabs *
{
	text-decoration: none;
	display: inline-block;
	height: 25px;
	color: #000;
	font-size: 7.5pt;
	line-height: 11px;
}

#product-right-column-tabs a
{
	margin-top: 5px;
}	

.product-right-column-tab1
{
	width: 45px;
	padding-left: 16px
}

.product-right-column-tab2
{
	width: 70px;
	padding-left: 17px
}

.product-right-column-tab3
{
	width: 50px;
	padding-left: 13px
}

#product-right-column-tabs li a:link, #product-right-column-tabs li a:visited
{
	color: #000
}

#product-right-column-tabs li a:hover
{
	color: #a9a5a2
}

#product-right-column-tabs li a.product-right-column-tabs-current
{
	color: #000
}

/* 2.7.2 - Right Column content
*************************************************************************************/

#product-right-column-tabs-container
{
	padding: 2px;
	width: 226px;
	overflow: hidden
}

#product-right-column-tabs-container *
{
	overflow: hidden;
	font-family: Tahoma
}

.right-column-content-tab1-content
{
	padding: 4px 4px 4px 7px;
	font-family: Tahoma
}

.right-column-content-similar-product-list
{
	margin: 2px;
	font-family: Tahoma
}

.right-column-content-similar-product-list-image
{
	float: left;
	margin: 2px
}

.right-column-content-similar-product-list-text
{
	float: left;
	margin: 2px;
	font-family: Tahoma
}

/* 2.7.1 - Accordion
*************************************************************************************/

.accordion
{
	/*height: 800px*/
}

.right-column-content-tab1-header-class /*old accordion script*/
{
	cursor: hand;
	cursor: pointer;
	margin: 8px 0px 0px 0px;
	color: #5f5f5f;
	padding-left: 8px;
	font-size: 8pt;
	/*letter-spacing: -1px*/
}

.right-column-content-tab2-header-Selected
{
	background: url(/img/column-right-button-arrow-up.gif) no-repeat 10px 10px;
	height: 16px;
	cursor: pointer;
	margin: 2px 0px 0px 0px;
	color: #5f5f5f;
	padding: 10px 0px 0px 30px;
	font-size: 8pt;
	/*letter-spacing: -1px*/
}

.right-column-content-tab2-header
{
	background: url(/img/column-right-button-arrow-down.gif) no-repeat  10px 10px;
	height: 16px;
	cursor: pointer;
	margin: 2px 0px 0px 0px;
	color: #5f5f5f;
	padding: 10px 0px 0px 30px;
	font-size: 8pt;
	/*letter-spacing: -1px*/
}

.right-column-content
{
	/*padding: 2px 2px 2px 15px;*/
	padding-left: 4px;
	font-family: Tahoma
}

.open-content
{
	/*class added to contents when they are open*/
}

.closed-content
{
	/*class added to contents when they are closed*/
}

#accordion-arrow
{
	padding-bottom: -4px
}

/* 2.8 Zoom view
*************************************************************************************/

#zoom-view-box
{
	width: 548px;
	height: 670px;
	padding: 10px 0px 15px 35px;
	margin-top: -10px
}

#zoom-view-image-box
{
	width: 492px;
	height: 512px;
	background-color: #ffffff;
	border: solid 1px silver;
	padding: 10px;
	position: relative;
	margin: 10px 0px 8px 2px
}

#zoom-view-image-box-border
{
	width: 482px;
	height: 502px;
	background-color: #ffffff;
	overflow: hidden;
	position: relative;
	background-color: black;
	border: solid 4px white
}

#zoom-view-image
{
	width: 482px;
	height: 502px;
	background-color: white;
	position: relative;
	left: 0px;
	top: 0px
}

#zoom-view-product-close-window
{
	float: right;
	margin: 7px 34px 0px 0px
}

.zoom-view-aditional-images
{
	float: left;
	position: relative;
	margin: 7px 10px 0px 0px
}

#zoom-view-image-box-Buttons
{
	float: right;
	text-align: right;
	margin: -5px 30px 0px 0px
}

#zoom-view-layer /* Works with #lightbox */
{
	float: left;
	position: absolute;
	margin-top: -110px;
	margin-left: -218px;
	
	width: 600px;
	height: 700px;
	visibility: hidden;
	display:none;
	z-index: 999
}

/* Overlay styles for the Javascript (lightbox.js): */

#lightbox /* Works with #zoom-view-layer */
{
	float: left;
	position: absolute;
	margin-top: -135px;
	margin-left: -230px;
	
	padding: 30px;
	width: 561px;
	height: 653px;
	/*background-color: #333;
	background-color: transparent;*/
	/*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='/img/zoom-view-background.png')*/
	/*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/zoom-view-background.png", sizingMethod="scale")*/
	background-image: url(/img/zoom-view-background.png);
	/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/zoom-view-background.png', sizingMethod='scale');*/
}

#lightboxDetails
{
	font-size: 0.8em;
	padding-top: 0.4em;
}	

#lightboxCaption
{
	float: left;
}

#keyboardMsg
{
	float: right;
}

#closeButton
{
	top: 30px;
	right: 40px;
}

#lightbox img
{
	border: none;
	clear: both;
	visibility: hidden;
	display: none
} 

#overlay img
{
	border: none
}

#overlay
{
	background-image: url(/img/overlay-white.png)
}

* html #overlay
{
	/*
	background-color: #333;
	background-color: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/overlay-white.png", sizingMethod="scale")
	*/
}


/* 3 - Right column links
*************************************************************************************/

#product-right-links
{
	width: 200px;
	float: right;
	position: relative;
	margin-top: -45px
}

#product-right-links a
{
	margin-left: 13px !important;
	margin-right: 13px !important
}