﻿/* 

Author: E. Post
Date: 7/7/08
Purpose: Control layout/display properties for product pages (computer-furniture.aspx).
This page contains three primary sections:  
- Section A: Product pic/zoom area, product title & description, "Photos" buttons and sub descriptions, how to save link and lucky dog display
- Section B: Dimensions image(s), Steps 1-3.
- Section C: Accessories and Configurator.

*/


/* 
---------------------------------------------------------------------------------
	Misc (used in more than one area  
---------------------------------------------------------------------------------
*/

#section_a_subcontainer
{
	width: 970px;
}

/* PL Color schemes */

.pagecontainer_enook
{
	background-color: #EEA356;
	margin: 0;
}

.pagecontainer_anthrobench
{
	background: #A13229;
	margin: 0;
}

.pagecontainer_anthrocart
{
	background: #727D43;
	margin: 0;
}

.pagecontainer_elevate
{
	background: #746E9C;
	margin: 0;
}

.pagecontainer_fitsystem
{
	background: #3777A5;
	margin: 0;
}

.pagecontainer_uniquesolutions
{
	background: #EEA356;
	margin: 0;
}

.pagecontainer_zido
{
	background: #A5B56F;
	margin: 0;
}

.pagecontainer_racksystem
{
	background: #666;
	margin: 0;
}

.pagecontainer_anniversarycart
{
	/* background: #727D43; */
	background: #fff url("../images/anniversarycart/sectiona-bkg.jpg") repeat scroll left top;
	margin: 0;
}

.pagecontainer_mcart
{
	background: #cfad78;
	margin: 0;
}

/* All Sections */
#section_a, #section_b, #section_c
{
	margin: 0;
	padding: 0;
}

#section_a h2, #section_b h2
{
	font: bold 19px tahoma, arial;
	color: #fff;
	text-decoration: none;
	margin: 0;
}

#section_a .header, #section_b .header
{
	background: #BEB7AE;
	padding: 10px;
	margin: 0;
}

#section_b .subheader, #section_c2 .subheader
{
	font-size: 11px;
	font-family: verdana;
	color: Black;
}

.images
{
	border: 0;
}

/* --------------------------- */



/* 
---------------------------------------------------------------------------------
  SECTION A 
---------------------------------------------------------------------------------
*/

#section_a
{
	margin: 0;
	padding: 0;
	text-align: left;
	height: 400px;
	overflow: hidden;
}

#zoomproductcontainer
{
	float: left;
	width: 400px;
}

#img_zoom
{
	background: #fff;
	margin: 0;
}

/* Zoom control */
.zoomcontrol
{
	background: #fff;
}

/* How to save link */

#howtosave
{
	float: right;
	margin-left: 15px;
}

a.howtosavelink
{
	width: 150px;
	color: #fff;
	font-weight: bold;
	text-transform: capitalize;
	font-family: Verdana;
	font-size: 11px;
	text-decoration: none;
	display: block;
	margin: 2.5em 0 1em 0;
}

a.howtosavelink:hover
{
	text-decoration: underline;
}

/* --------------- */


/*	Container for product title, description, photos buttons, 
	sub description, how to save link, ld image */

#productinfo
{
	width: 340px;
	margin: 0;
	padding: 0;
	float: left;
}

#producttitleanddesc
{
	color: #fff;
	padding: .5em 0 0 .5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	height: 210px;
	overflow: auto;
}

/* Enusure conistency with product description links */
#producttitleanddesc a:link, #producttitleanddesc a:visited, #producttitleanddesc a:hover
{
	text-decoration: underline;
	color: #fff;
	font-size: 13px;
}

#producttitleanddesc a:hover
{
	text-decoration: none;
}

#section_a_configlinks
{
	margin: 5px 0 0 0;
	padding: 0 0 0 10px;
	width: 350px;
}

.link1_section_a
{
}

.link2_section_a
{
	margin-left: 5px;
}

.producttitle
{
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.productdescription
{
	font-size: 13px;
	font-weight: normal;
}

/* Product pics number buttons. */
#productpics
{
	background: #fff;
	margin: 0px;
	margin-top: 5px;
	margin-bottom: 0;
	height: 300px;
}

/* Product photo buttons */
#photobtns
{
	background: whitesmoke;
	height: 19px;
	padding: 4px;
}

#photosbtn
{
	float: left;
	margin-top: 3px;
}

#btn_box_container
{
	float: left;
	text-align: center;
	margin-left: 4px;
}

.btn_box
{
	float: left;
	padding: 1px;
	background: #A13229;
	margin: 0 1.75px;
}

.photosbtn_on, .photosbtn_off
{
	font-size: 9px;
	padding: 0px;
	height: 18px;
	margin: 0 auto;
	width: 17px;
}

.photosbtn_off
{
	background: #A13229;
	color: #fff;
	border: solid 1px #fff;
}

.photosbtn_on
{
	background: #EEA557;
	color: #A13229;
	border: solid 1px #fff;
}

/* Lucky dog image */
.section-a-image1
{
	clear: both;
	display: block;
	margin: 0 0 15px 0;
}

.section-a-image2
{
}

#imagedescriptions
{
	clear: both;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 85px;
	overflow: auto;
}

/* 
---------------------------------------------------------------------------------
  SECTION B 
---------------------------------------------------------------------------------
*/

#section_b
{
	background: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	overflow: hidden;
}

#configurationcontainer
{
}

#section_b #configurationcontainer #step1, #section_b #configurationcontainer #step2, #section_b #configurationcontainer #step3
{
	border-left: solid 1px #BEB7AE;
	margin: 5px 0;
	padding-left: 5px;
	margin-bottom: -3000px;
	padding-bottom: 3000px;
}

#section_b_header_container
{
	width: 1004px;
}

/* P.S. Msg */
#ps
{
	float: right;
	margin-top: -40px;
	vertical-align: middle;
	margin-right: 30px;
	font-size: 11px;
	font-family: verdana;
}

#psimg
{
	float: left;
	margin: 0;
	margin-right: 10px;
	margin-bottom: 15px;
}

#section_b .header #ps
{
	background: #xxxBEB7AE;
}

/* ------- */

/* debug */

#configurationcontainer
{
	padding: 0;
	margin: 0;
}

/* Within Section B, this container holds steps 1-3*/
.section_b_fields
{
	width: 1000px;
}

/* AnthroBench */

.section_b_config_prod_anthrobench #dimensions
{
	width: 200px;
}
.section_b_config_prod_anthrobench #step1
{
	width: 200px;
}
.section_b_config_prod_anthrobench #step2
{
	width: 300px;
}

.section_b_config_prod_utilitybench #dimensions
{
	width: 130px;
}
.section_b_config_prod_utilitybench #step1
{
	width: 250px;
}
.section_b_config_prod_utilitybench #step2
{
	width: 300px;
}

/* AnthroCart */

.section_b_config_prod_24anthrocart #dimensions
{
	width: 90px;
}
.section_b_config_prod_24anthrocart #step1
{
	width: 230px;
}
.section_b_config_prod_24anthrocart #step2
{
	width: 350px;
}

.section_b_config_prod_30anthrocart #dimensions
{
	width: 90px;
}
.section_b_config_prod_30anthrocart #step1
{
	width: 220px;
}
.section_b_config_prod_30anthrocart #step2
{
	width: 340px;
}

.section_b_config_prod_36anthrocart #dimensions
{
	width: 200px;
}
.section_b_config_prod_36anthrocart #step1
{
	width: 260px;
}
.section_b_config_prod_36anthrocart #step2
{
	width: 300px;
}
.section_b_config_prod_36anthrocart #step3
{
	width: 160px;
}

.section_b_config_prod_48anthrocart #dimensions
{
	width: 240px;
}
.section_b_config_prod_48anthrocart #step1
{
	width: 220px;
}
.section_b_config_prod_48anthrocart #step2
{
	width: 315px;
}

.section_b_config_prod_60anthrocart #dimensions
{
	width: 250px;
}
.section_b_config_prod_60anthrocart #step1
{
	width: 220px;
}
.section_b_config_prod_60anthrocart #step2
{
	width: 315px;
}

.section_b_config_prod_72anthrocart #dimensions
{
	width: 250px;
}
.section_b_config_prod_72anthrocart #step1
{
	width: 220px;
}
.section_b_config_prod_72anthrocart #step2
{
	width: 315px;
}

.section_b_config_prod_printercart #dimensions
{
	width: 150px;
}
.section_b_config_prod_printercart #step1
{
	width: 270px;
}
.section_b_config_prod_printercart #step2
{
	width: 330px;
}

.section_b_config_prod_minicart #dimensions
{
	width: 180px;
}
.section_b_config_prod_minicart #step1
{
	width: 270px;
}
.section_b_config_prod_minicart #step2
{
	width: 330px;
}

.section_b_config_prod_ultracompactcart #dimensions
{
	width: 200px;
}
.section_b_config_prod_ultracompactcart #step1
{
	width: 210px;
}
.section_b_config_prod_ultracompactcart #step2
{
	width: 330px;
}

.section_b_config_prod_ideacart #dimensions
{
	width: 180px;
}
.section_b_config_prod_ideacart #step1
{
	width: 270px;
}
.section_b_config_prod_ideacart #step2
{
	width: 330px;
}

/* Elevate */

.section_b_config_prod_elevateadjusta #dimensions
{
	width: 180px;
}
.section_b_config_prod_elevateadjusta #step1
{
	width: 180px;
}
.section_b_config_prod_elevateadjusta #step2
{
	width: 310px;
}

.section_b_config_prod_corner #dimensions
{
	width: 300px;
}
.section_b_config_prod_corner #step1
{
	width: 140px;
}
.section_b_config_prod_corner #step2
{
	width: 270px;
}

.section_b_config_prod_singlesurface #dimensions
{
	width: 220px;
}
.section_b_config_prod_singlesurface #step1
{
	width: 210px;
}
.section_b_config_prod_singlesurface #step2
{
	width: 290px;
}

.section_b_config_prod_wrap #dimensions
{
	width: 280px;
}
.section_b_config_prod_wrap #step1
{
	width: 120px;
}
.section_b_config_prod_wrap #step2
{
	width: 280px;
}

/* ENook */

.section_b_config_prod_enook #dimensions
{
	width: 150px;
}
.section_b_config_prod_enook #step1
{
	width: 190px;
}
.section_b_config_prod_enook #step2
{
	width: 370px;
}

/* FitSystem */

.section_b_config_prod_standardunit #dimensions
{
	width: 130px;
	padding-right: 0;
}
.section_b_config_prod_standardunit #step1
{
	width: 280px;
	padding-right: 0;
}
.section_b_config_prod_standardunit #step2
{
	width: 320px;
}
.section_b_config_prod_standardunit #step3
{
	width: 150px;
}

.section_b_config_prod_adjustaunit #dimensions
{
	width: 130px;
}
.section_b_config_prod_adjustaunit #step1
{
	width: 250px;
}
.section_b_config_prod_adjustaunit #step2
{
	width: 320px;
}

.section_b_config_prod_consoleunit #dimensions
{
	width: 130px;
}
.section_b_config_prod_consoleunit #step1
{
	width: 250px;
}
.section_b_config_prod_consoleunit #step2
{
	width: 320px;
}

.section_b_config_prod_utilityunit #dimensions
{
	width: 130px;
}
.section_b_config_prod_utilityunit #step1
{
	width: 250px;
}
.section_b_config_prod_utilityunit #step2
{
	width: 320px;
}

.section_b_config_prod_sidetable #dimensions
{
	width: 130px;
}
.section_b_config_prod_sidetable #step1
{
	width: 250px;
}
.section_b_config_prod_sidetable #step2
{
	width: 320px;
}

/* Unique Solutions */

.section_b_config_prod_adjustablelaptopcart #dimensions
{
	width: 130px;
}
.section_b_config_prod_adjustablelaptopcart #step1
{
	width: 250px;
}
.section_b_config_prod_adjustablelaptopcart #step2
{
	width: 320px;
}

.section_b_config_prod_convoi #dimensions
{
	width: 130px;
}
.section_b_config_prod_convoi #step1
{
	width: 250px;
}
.section_b_config_prod_convoi #step2
{
	width: 320px;
}

.section_b_config_prod_laptopstoragecart #dimensions
{
	width: 130px;
}
.section_b_config_prod_laptopstoragecart #step1
{
	width: 250px;
}
.section_b_config_prod_laptopstoragecart #step2
{
	width: 320px;
}

.section_b_config_prod_poccart #dimensions
{
	width: 130px;
}
.section_b_config_prod_poccart #step1
{
	width: 250px;
}
.section_b_config_prod_poccart #step2
{
	width: 320px;
}

.section_b_config_prod_powersupplycartii #dimensions
{
	width: 130px;
}
.section_b_config_prod_powersupplycartii #step1
{
	width: 250px;
}
.section_b_config_prod_powersupplycartii #step2
{
	width: 320px;
}

.section_b_config_prod_securitycart #dimensions
{
	width: 130px;
}
.section_b_config_prod_securitycart #step1
{
	width: 250px;
}
.section_b_config_prod_securitycart #step2
{
	width: 320px;
}

.section_b_config_prod_trolley #dimensions
{
	width: 130px;
}
.section_b_config_prod_trolley #step1
{
	width: 250px;
}
.section_b_config_prod_trolley #step2
{
	width: 320px;
}

.section_b_config_prod_notebookchargingcart #dimensions
{
	width: 130px;
}
.section_b_config_prod_notebookchargingcart #step1
{
	width: 250px;
}
.section_b_config_prod_notebookchargingcart #step2
{
	width: 320px;
}

/* Zido */

.section_b_config_prod_zidofixed-height #dimensions
{
	width: 130px;
}
.section_b_config_prod_zidofixed-height #step1
{
	width: 250px;
}
.section_b_config_prod_zidofixed-height #step2
{
	width: 320px;
}

.section_b_config_prod_zidoadjustable-heightcart #dimensions
{
	width: 130px;
}
.section_b_config_prod_zidoadjustable-heightcart #step1
{
	width: 250px;
}
.section_b_config_prod_zidoadjustable-heightcart #step2
{
	width: 320px;
}

.section_b_config_prod_zidopolecart #dimensions
{
	width: 130px;
}
.section_b_config_prod_zidopolecart #step1
{
	width: 250px;
}
.section_b_config_prod_zidopolecart #step2
{
	width: 320px;
}

/* Anniversary Cart - Deluxe */
.section_b_config_prod_deluxeanniversarycart #dimensions
{
	width: 120px;
}
.section_b_config_prod_deluxeanniversarycart #step1
{
	width: 230px;
}
.section_b_config_prod_deluxeanniversarycart #step2
{
	width: 300px;
}

/* Anniversary Cart - Standard */
.section_b_config_prod_standardanniversarycart #dimensions
{
	width: 150px;
}
.section_b_config_prod_standardanniversarycart #step1
{
	width: 200px;
}
.section_b_config_prod_standardanniversarycart #step2
{
	width: 300px;
}

.section_b_config_prod_standardanniversarycart #ctl00_cph_content_tbl_step1 .step1fieldlabel
{
	width: 40px;
}

#ctl00_cph_content_tbl_step1
{
	width: 200px;
}

#dimensions
{
	float: left;
	padding: 10px 0 10px 10px;
}

.img_dimension
{
	display: block;
}


#step1
{
	float: right;
	background: #fff;
	font-size: 11px;
	padding-top: 8px;
}

/* Step 1 selection table */

#step1 table td
{
	vertical-align: top;
}

#step1 table td.step1fieldlabel
{
	padding-top: 4px;
	width: 70px;
	text-align: left;
}

#dimensions p, #step1 p.fieldheader, #step2 p
{
	font-size: 11px;
	font-weight: bold;
}

#step2
{
	float: right;
	font-size: 11px;
	padding-top: 8px;
	padding-right: 5px;
}

.pnlstep2
{
	float: left;
}
.step2selections
{
	margin: 5px 0 15px 0;
}

.step2selections td
{
	vertical-align: middle;
}

.step2selections .rbcell
{
	margin-left: 5px;
}

#step2 .pnlstep2 .fieldsubheader
{
	margin: 0;
	font-weight: normal;
	font-size: 10px;
}

/* Color field container */
.colorfieldcontainer
{
	width: 125px; /* border: solid 1px blue; */
}

#step3
{
	float: right;
	padding-top: 8px;
	width: 180px;
	font-size: 11px;
}

.sectionlabel
{
	font-weight: bold;
	display: block;
	margin: 5px 0 10px 0;
}

.fieldlabel
{
	font-weight: bold;
}

/* Flash image */
#colorConcept
{
	float: right;
	border: solid 1px black;
	margin-top: -20px;
}

/* Step 2 Color selection image (Anniversary Cart product pages). */
.step2-color-selections
{
	border: solid 2px red;
	margin: 0 0 0 30px;
}


/* Add to Configurator */
a.btn_atc
{
	display: block; /* Change the link element to behave as a block-level instead of its native inline */
	margin: 20px 0 10px 0;
	background: url(            "../../../../images/buttons/button-addtoconfig.gif" ); /* default img */
	text-decoration: none; /* take away default line under link */ /* define so image appears correctly - should be img dim */
	width: 157px;
	height: 24px;
}

a.btn_atc:hover
{
	background: url(            "../../../../images/buttons/button-addtoconfig-over.gif" ); /* img to appear when mouse-over */
}


/* 
---------------------------------------------------------------------------------
  SECTION C 
---------------------------------------------------------------------------------
*/

#section_c
{
}

#section_c1
{
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#section_c2
{
	background: #fff;
	border: solid 10px #A13229;
	width: 350px;
	min-height: 670px;
	float: right;
	margin-top: -676px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#section_c1 #section_c_header
{
	width: 320px;
	clear: both;
}

#section_c1 #step4image
{
	float: left;
}

#section_c1 h2
{
	font-size: 19px;
	color: #fff;
	text-decoration: none;
	float: right;
	margin: 2px 0 0 0;
}

#section_c1 .header
{
	background: #BEB7AE;
	padding: 10px;
	margin: 0;
	vertical-align: middle;
	font-size: 11px;
}

#section_c1 .header #header_text
{
	clear: both;
	padding: 5px 0 0 0;
	width: 550px;
}

#accessorieslisting
{
	text-align: center;
	margin: 0 390px 0 0;
	padding: 50px 0 0 50px;
	background: #fff;
	height: 550px;
}

#section_c2 h2
{
	background: #A13229;
	text-decoration: none;
	margin: 0;
	padding: 5px 5px 0 5px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	line-height: 25px;
}

#section_c2 .subheader
{
	background: #A13229;
	font-size: 11px;
	color: #fff;
	padding: 0 5px 10px 5px;
}

/* Accessories */
.accessories
{
	background: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border-collapse: collapse;
	width: 350px;
	margin: 0 auto;
}

.accessories td
{
	vertical-align: top;
	text-align: left;
	padding: 0 5px 10px 5px;
	margin: 0;
	width: 100px;
}

.accessories img
{
	border: solid 1px gainsboro;
}

/* Accessory pager bars */
.pager
{
	margin: 0 auto;
	width: 550px;
	font: normal 11px verdana;
}

#pager1
{
	margin-bottom: 10px;
}

#pager2
{
	margin-top: 10px;
}

.pager a
{
	text-decoration: none;
	margin: 0 5px;
	color: #336699;
}

.pager a:hover
{
	text-decoration: underline;
}

.pager a.currentpage
{
	font-weight: bold;
}

#accessorieslisting table a
{
	text-decoration: none;
	color: #336699;
}

#accessorieslisting table a:hover
{
	text-decoration: underline;
}

/* Accessory popup window */
.accessorypopupwindow
{
	/*     top: 99%;     left: 35%;     */
	width: 560px;
	height: 385px;
	padding: 5px;
	z-index: 1005;
	border-top: solid 1px #999;
	border-right: solid 3px #555;
	border-bottom: solid 3px #555;
	border-left: solid 1px #999;
	text-align: left;
	background: #fff;
}

#btns
{
	float: left;
	margin: 0 10px 10px 0;
	width: 550px;
}

.accessorypopupwindow .accessoryimg
{
	display: block;
	border: 1px solid gainsboro;
	float: left;
	clear: both;
	width: 250px;
}

.accessorypopupwindow #accessorytitle, .accessorypopupwindow #accessorydescription
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: right;
	width: 285px;
	padding: 10px;
}

.accessorypopupwindow #accessorytitle
{
	font-weight: bold;
	font-size: 12px;
}

.accessorypopupwindow #accessorydescription
{
	font-size: 11px;
	height: 150px;
	overflow: auto;
}

.accessorycolor
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 11px;
	float: right;
	width: 270px;
	padding: 10px;
}

.accessorycolor .colorimg
{
	margin-top: 5px;
}

/* Configurator */

#configuratorcontents
{
	padding: 0;
	margin: 5px 6px 0 6px; /* 5px 6px -20px 6px; */
}

.configurator
{
	margin: 0;
	padding: 0;
	width: 338px;
}

.configurator td
{
	margin: 0;
	padding: 0;
	border: 0;
}

.configurator div, .configurator div span
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

/* Configurator fields */
.configurator .row1
{
	padding: 5px 0 0 0;
	clear: both;
	width: 335px;
}

.config_matnbr
{
	float: left;
	padding: 0 0 0 5px;
}

.config_configtitle
{
	float: right;
	width: 230px;
}

.configurator .row2
{
	padding: 10px 0 5px 0;
	clear: both;
}

.config_qty
{
	float: left;
	width: 100px;
	padding: 0 0 10px 5px;
}

.config_listprice
{
	float: left;
	padding: 8px 0 0 0;
}

.config_removelink
{
	float: right;
	padding: 0 10px 0 0;
	width: 55px;
	padding: 8px 0 0 0;
}


.link_remove
{
}

#configuratorcontents td.fieldlabel
{
	font-weight: bold;
}

#configuratorfooter
{
	background: #EEA557;
	margin: 0 6px;
	font-size: 11px;
	text-align: right;
}

#configuratorfooter p
{
	margin-top: 0;
}

#configuratorfooter p #discountlabel
{
	color: #336699;
}

#configuratorfooter p
{
	padding: 2px 4px 4px 0;
}

#configbuttons
{
	text-align: right;
	margin-right: 6px;
}

.btnupdateconfigurator
{
	margin-left: 100px;
}

/* Modal Pop up that confirms user's intention to add to configurator */

.modal_confirmaddtocart_container
{
	width: 300px;
	height: 130px;
	z-index: 1005; /* display: none; */
	border: 3px outset #fff;
	background: gainsboro;
	padding: 30px;
	font: 12px arial, verdana;
}

#modal_btns_container
{
	text-align: center;
}

.modal_btns
{
	width: 75px;
	background: #fff;
	border: solid 1px #000;
}

/* Error messages */
.qtyerror
{
	clear: both;
	font-size: 10px;
	margin: -2px 0 5px 5px;
	display: block;
}

/* Hide Accessory pager numbers when on first/last link (or only 1 page exists) */
.hidelink
{
	display: none;
}

.error-configurator
{
    color: Red;
    font-size: 11px;
    padding-left: 120px;
    text-align: left;
}
.swatch-library-btn {margin-top:200px; width:300px; height:26px;}
.swatch-library-btn-link {background-image: url("../../../../images/swatch-library/swatch-library-btn.jpg"); background-position: 0 -27px; color:#FFF; text-decoration:none; padding:3px 60px 5px 10px; font-size:13px; font-weight:bold; background-repeat:no-repeat;}
.swatch-library-btn-link:hover {background-position: 0 -2px;}
.IE7-fix a{height:15px; }
