/* This is the main CSS design page for eprevue4					*/
		/* Information about css options can be found in the comments		*/
		/* Numbers contained in comments at the beginning of a class or id 	*/
		/* is used for basic css editing using our css editing page  and need 	*/
		/* to be left in your css page.								   	*/
/*20*/.browserCellTable:hover, .compareimageanchor:hover, .otherphotoimagesanchor:hover {
	border: 1px solid #336;		/*used to change the border elements of Item boxes on :hover */ 
} 		/* This :hover class goes here for speed purposes */
		/* on IE browsers */
/* All classes - used for Fonts and Text attributes */
body		{		/* settings for main body background color */
	background-color : white;
}
/*1*/* {		/* *=default - used to define the default for all areas	*/
	font-family: sans, arial, helvetica, sans-serif; 		/* default font families */
	color: #636161; 		/* default color for all text */
	font-size: 100%;		/* default font site for all text */
}
/*3*/.areaheader {		/* used for larger headers of area text such as SKUs, area names, etc... */
	font-size: .75em; 		/* sets font size for areaheader */
	font-weight: 700;		/* sets font weight for areaheader */
}
/*3*/.areaheader2 {		/* a slightly smaller text for area subheaders */
	font-size: .7em;
	font-weight: 600;
}
dt.areaheader {		/* an areaheader class for a definition term */
	padding-right: 10px;		/* sets padding-right of the dt.areaheader*/
	padding-left: 2px; 		/* sets padding-left of the dt.areaheader*/
	width: 150px;		/* sets the width of the dt.areaheader*/
}
/*4*/.areachoice {		/* used for "dynamic" information next to headers */
	font-size: .8em;	
}
/*4*/.areachoice2 {		/* a smaller version of .areachoice */
	font-size: .75em;
	color: #636161;
}
.areachoice3 {		/* an even smaller version of .areachoice */
	font-size: .7em;
	color: #636161;
}
/*2*/#mastermenu {		/* menu containing Home, Favorites, Login, Help & Search */
	font-weight: 700; 
	font-size: .8em;
	text-align: right; 		/* sets the mastermenu to align on the right */
	/*font-variant: small-caps;*/
}
/*4*/.dynamicdata {		/* information displayed dymically (usually in information tables or dropdown menus) */
	font-size: .75em; 
	line-height: 1em;		/*set the height of the txt area to be 1 (useful for dropdown menus to make them a little larger than the data inside) */
}
/*3*/.dynamicheader {		/* the header used to display the dynamic data (similar to areaheader and used for information pages) */
	font-weight: 700;
}
.fixlineheight {		/* use to alter the line height of the item/cover SKU names */
	line-height: 1em;		/* sets the height of the text line */
}
div span.areaheader, span.areaheader2, th.areaheader {		/* modifies the look of the areaheaders for "Other Photos", "Correlates", "Compare", browsermenu, etc */
	padding: 1px 10px 3px 10px; 
	background: url(../../images/gold-trans2.gif) white;  /* used to set the background color or image */
	border: 1px solid #336; 
	color: #616261; 
	font-variant: small-caps;		/* sets the "small caps" option to make all letters capital but to make the first letters larger */
}
div.areaheader {
	padding: 2px 0px 2px 0px; 
	background: #F2F3E5 repeat-x; 
	border: 1px solid #336; 
	color: #616261;
}
div.searchtext {
	/*border-bottom: 1px solid #EEEFDD;
	padding-bottom: 2px;*/
}
div.searchtext2 {
	/*border-bottom: 1px solid #F2F3E5; */
	padding-bottom: 2px;
}
/* Div classes - used to define item in or related to division elements */
/*6*/div.header {		/* top area of all pages containing mastermenu, logo and search elements */
	background: url(../../images/gold-trans4.gif) white;
	border-bottom: 2px solid #336; 
	border-right: 2px solid #336; 
	height: 62px; 		/* sets the hieght of the div.header, must change "top=xxx" of div.workspace + and border when modifying this element */
	width: 100%; 		/* sets the width to always be 100% of the area of the browser */
	min-width: 720px; 		/* sest a minimum width of 720px, recognized by mozilla, galeon and other browsers, not recognized in IE 5.x and 6.x */
	top: 0px; 		/* sets the top positioning where the top of the table will begin 0=top of browser area */
	left: 0px; 		/* sets the left positioning where this area starts from the left */
	position: absolute; 		/* tells the browser to make this position absolute not relational, i.e. exactly "here" without regard for it's parent elements */
	z-index: 0;		/* tells the browser to make this element 0 on the -10 to +10 scale of layering, anything set < this is below it on the z axis, anything > is above it on the z axis */
}
/*8*/div.workspacearea { /* middle area were all menus, browser, options, information and photos are displayed */
	background-color: white; 
	top: 65px; 
	left: 0px; 
	width: 100%; 
	min-width: 720px; 
	height: 100%;		/* tells the browser to set the height of this are to 100% starting from the top=XXX number and working down */
	position: absolute; 
	z-index: 3;		/* old value used during testing maybe depricated now */
}
div.workspaceareaduplicate { /* middle area were all menus, browser, options, information and photos are displayed */
	background-color: white; 
	top: 95px; 
	left: 0px; 
	width: 100%; 
	min-width: 720px; 
	height: 100%;		/* tells the browser to set the height of this are to 100% starting from the top=XXX number and working down */
	position: absolute; 
	z-index: 3;		/* old value used during testing maybe depricated now */
}
div.workspaceRelative
{
	background-color: white; 
	width: 100%; 
	min-width: 720px; 
	height: 100%;		/* tells the browser to set the height of this are to 100% starting from the top=XXX number and working down */
	position: relative; 
	z-index: 3;		/* old value used during testing maybe depricated now */	
}
div.workspaceRelative #browserarea.searchBrowserArea
{
	position: relative;
	clear: both;
}
div.dynamicHeader
{
	position:relative;	
}
.dynamicFooter
{
	position:relative;	
}

div#footer {		/* bottom area where a footer may go should you choose to include one */
	z-index: 4; 
	display: none;		/* tells the browser to hide the element - this completely removes the element from the layout, use "visibility: none" to have it's area reserved but just hidden from view */
}
div.spacer {		/* this is used only to keep IE from smashing the pages to below a 720px width - NOTE: maybe depricated in new design */
	width: 720px;
}
div.workspace {		/*sets the begining of data inside the workspace area - used to keep a small left and right margin on the pages */
	margin-left: 20px; 
	margin-right: 15px;
}
/*div#roomplanner {		/* used to set excactly where the roomplanner div will show up
	left: 17%; 
	top: 2%; 
	position: absolute;
}*/
/*applet#roomplannerapplet {		/* used to tell the roomplanner applet what background color and font color to use for it's windows 
	background-color: #336; 
	color: #636161;
}*/
/* Header classes - used to define elements in the master menu area */
div.search {		/* settings for the SKU search box */
	right: 0px; 		/* starts the div on the right */
	bottom: 3px; 		/* starts the div from the bottom of it's parent div (the header) */
	position: absolute; 
	font-size: .75em;
}

/* Addtional Attachments Links*/
.AddtionalLinksTitleText
{
	font-weight:bold; 
	font-size:14px; 
	text-align:center;
}
div.AddtionalLinkArea
{
	position:relative;
	border:solid 2px #E4E5C6; 
	padding:1px 0px 0px 0px;
}
div.AddtionalLinksCoverPosition
{
	width:250px;
	top:175px; 
	left:595px;
}
div.AddtionalLinksItemPosition
{
	width:365px;
	top:120px; 
	left:190px;
}
.BoldFont
{
	font-weight:bold;	
}
.additionalLinks
{
	position:absolute; 
	top:400px; 
	left:300px;
}

/* end addtional attachment links*/

/* Settings for Specials*/
.divSpecialInformation
{
position:relative; 
top:100px; 
left:170px; 
width:400px; 
text-align:center; 
display:none;	
}
.SpecialInformationTable
{
	text-align:center; 
	width:100%;	
}
.SpecialBrowserBorderColor
{
	border-color:#E4E5C6;	
}
.SpecialBrowserPadding
{
	padding-left:65px;	
}
.ShowSpecialBrowserOnSale
{
	display:block;	
}
.divSpecialBrowserOnSale
{
	height:18px; 
	display:none;	
}
.SpecialGridHeading
{
	font-weight:bold;	
}
.SpecialGrid
{
	position: absolute; 
	top: 15px; 
	left: 200px;	
}
.SpecialControlOnMS
{
	position:absolute; 
	top:280px; 
	left:10px;
}
.SpecialControlOnSearch
{
	position:absolute; 
	top:30px; 
	left:700px;
}

.spnSpecialBrowserOnSale
{
	vertical-align:text-top; 
	font-size:.75em; 
	color:Red; 
	font-weight:bold;	
}
.SpecialPreviewImage
{
	height:75px; 
	padding-top:0px;	
}
.SpecialPreviewText
{
	font-size:.75em; 
	color:#891709; 
	font-weight:bold;
}
.SpecialPreviewTextRed
{
	font-size:.75em; 
	color:Red; 
	font-weight:bold; 
	font-style:italic;	
}
div.BrowseAllSpecialDiv
{
	text-align:center; 
	padding:20px 0px 8px 0px;	
}
.LinkText
{
	font-size:.75em; 
	color:Blue; 
	text-decoration:underline;
}
div.SpecialPreviewArea
{
	border:solid 2px #E4E5C6; 
	padding:1px 0px 0px 0px;
	width:160px;
}
div.TitleDiv
{
	padding:4px; 
	height:15px;
	background-color:#E4E5C6; 
	text-align:center;
}
.TitleText
{
	font-weight:bold; 
	font-size:14px; 
	text-align:center;
}
.TitleTextColor
{
	color:Red;	
}

#welcomemsg {		/* settings for the little "welcome: you are logged in as ..." message */
	left: 40%; 
	bottom: 2px; 
	position: absolute; 
	font-size: .7em; 
	color: #336;
}
/* #welcomemsgerr, #loginerranchor {		/* settings for the (not you? clcick here) message uncomment to set color other than default color
	color: #efebe8;
}*/
.powered_by {		/* settings for MicroD, Inc's "poweredby" logo - cannot be removed or hidden - but can be place anywhere you want limited to the "workspace" division only */
	right: 1px; 
	top: 1px; 
	position: absolute;
}
#poweredbygrey {		/* hides the "grey" poweredby icon showing the "gold" one */
	display: none;
}
span .prevnext {	/* settings for the "Prev" and "Next" text in the header of the browser table */
	font-size: .9em;
	/*font-variant: small-caps; */
	color: #336;
}
input#search, input#coversearch {
	background-color: white;
	padding-left: 2px;
}
.loginname {		/* sets the color for the "welcomemsg" area for the login name */
	color: #336;
}
/* Paragraph - used to define elements pertaining to paragraphs */
.address {		/* settings for MicroD's address area our HOME page */
	font-style: italic; 
	font-size: .8em; 
	padding-left: 15px;
}
/*2*/.definitions {		/* settings for the class=definitions, only found in the "addto" popup for moving favorites to specific folders */
	color: #fff; 
	font-size: .8em; 
	position: absolute; 
	top: 7px; 
	left: 15px; 
	font-weight: 700; 
	letter-spacing: 0px;
}
#definitions {		/* settings for the id=definitions, only found on the "definitions" popup page */
	margin-left: 15px;
}
/* Anchor classes - used to define anchors or elements in anchors */
/*13*/a:link, a:visited {		/* settings for all achors that are linked or already visited */
	text-decoration: none;		/* sets the text decoration of the link and visited achors */
}
/*14*/a:hover {		/* settings for all anchors while they are being hovered */
	color: #336; 
	text-decoration: underline; 
	text-shadow:  #7F7E7E -2px 2px 2px;		/* testing of feature in CSS 2.1 - doesn't show up in any browser as of yet */
}
/*16*/a.mastermenu:hover {		/* settings for hovering of mastermenu class anchors */
	text-decoration: underline;
}
a.itemimagesanchor, .compareimageanchor {		/* settings for images anchors */
	display: block;			/* used to make sure images get rendered correctly inside tables */
	border: 1px solid #fff;
}
img#itemimagelarge	{		/* settings for the border surrounding the image on the large view page */
	border-style: none;
}
/* Table Classes - defines elements used in tables or tables themselves */
.correlateimg, .itemimg {		/* settings for all borders of item images and correlage images */ 
	border: 1px solid #FFF;
}
table div select {		/* settings for dropdown menus in email, account info, etc.. */
	font-size: 1em; 
	line-height: 80%; 
	letter-spacing: 0px;
}
table.compare {		/* settings for the borders on the compare table */
	border-color: #E4E5C6;
}
.dynamicdatabtn {		/* settings for the buttons used at the bottom of forms and the bottom of all the images used for navigation */
	font-size: .75em; 
	border: 1px solid #336; 
	background: #F2F3E5;		/* set the background color for the buttons */
	padding: 2px 10px 2px 10px; 		/* apllies padding around the buttons */ 
}
.selectbutton	{		/* used to make the "button" elements and the "a pseudobuttons" elements to look the same */
	padding: 3px 11px 3px 11px;
}
.dynamicdatabtn:hover {		/* settings for the hovering of dynamicdatabutn elements */
	font-size: .75em; 
	border: 1px solid #336;
	text-decoration: none;
}
.tdbtn {		/* settings for the td of the buttons - used to keep the button from getting truncated on top and bottom, do to td height */
	font-size: 1.2em; 
	padding-top: 4px; 
	padding-bottom: 4px; 
}
.tdbtn2 {		/* settings for the td of the buttons for elements with larger parent fonts  - compare page is an example */
	padding-top: 4px; 
	padding-bottom: 4px; 
}
.nobtn	{		/* hiddes the "button" elements (background, borders and padding) of a button */
	border: none;
	background: none;
	padding: 0;
	margin: 0;
}
.browserSkuTdHeight {		/* settings for the height of the box containing the SKU number, checkbox and icons */
	height: 39px;
}
.browserSkuTdTop	{		/* settings for the top of the browser sku area */
	background-color: #F2F3E5;
	border: 1px solid #E4E5C6;
}
.browserSkuTdBottom		{		/* settings for the bottome of the browser sku area */
	padding: 2px;
	line-height: .8em;
	background-color: transparent;
}
div#browserarea div.areachoice, div#browserarea2 div.areachoice {		/* settings for browser area division used mostly on login/account/email pages, browser and error pages */
	margin-left: 5px; 
	margin-top: 8px;
}
form.nomargin {		/* settings for the margin class of all forms */
	margin: 0px;		/* setting it to 0 keeps IE from adding a top 4px margin to all forms */
}
/* contrastTable */
/*table#contrastTable td {		/* settings for the child td of a parend contrastTable ID, used only on the fabricselector page 
	width: 125px;		/* sets the width of the contrast menu table for each td 
}*/
table#contrastTable, table#roomtypeTable {	/* see settings above, also roomtypeTable is located in the favorites page */ 
/*	border: 1px solid #336; 
	padding: 0px 3px 0px 3px;
	background-color: #F2F3E5;*/
}
div#contrastTable2 {
	padding-left: 10px;
}
div#contrastTable2 table#contrastTable table{
	margin: 0px;
	padding: 0px;
}
	
/*div#contrastTable2 table#contrastTable td.	coverImage {
	width: 40px;
}
	
div#contrastTable2 table#contrastTable td.coverInfo table {
	width: 150px;
}*/
/*div#contrastTable2 table#contrastTable {
	text-align: left;
}*/
	
div#contrastTable2 table#contrastTable td.availableAreas {
	border-top: 1px dashed #E4E5C6;
	padding-top: 4px;
}
	
div#contrastTable2 table#contrastTable td.availableAreasTd {
	padding-left: 5px;
}
	
div#contrastTable2 table#contrastTable td.selectArea {
	padding: 4px 0px;
}
table#searchTable {		/* settings for the search table used on the search.html page */
	margin-top: 10px;
}
#moreOptions td {		/* settings for "more" item in the search page under "covers" */
	padding-top: 10px;
	padding-bottom: 5px;
}
.underline {		/* used to set an underlining for items in search and fabricselector pages */
	border-bottom: 1px solid #E4E5C6;
	font-size: 120%;
}
.underline2 {
	border-bottom: 1px solid #E4E5C6;
}
.boxed {		/* used for the area displaying the sku in the "contrast areas" tables in both fabricselector and coverinformation pages */
	border: 1px solid #FFF; 
	background: #FFF; 
	padding: 1px 0px 1px 2px;
}
.contrastAreaTable {		/* used to set the width of the table that displays sku,type and color in contrast area */
	width: 90px;
}
.browserCellInfo {		/* used to define the area below the images in the browser that contain the magnifying glass, add to favorites, and check box buttons */
	/* border-top: 1px solid #E4E5C6; */
	background: #FFF;
}
.browserCellTable {		/* used to define the area that contains the images in the browser */
	/*border: 1px solid #E4E5C6;*/
	border: 1px solid #FFF;
}
.prevcell {		/* used to define the area that contains the previously selected covers in the browser */
	padding: 2px 0px 2px 0px;
	border: 1px solid #336;
	background-color: #F2F3E5;
	width: 92px;
}
.prevcell table {
	margin-top: 10px;
	}
#prevCellTitle {		/* used to define the table tr that contains the <uparrow> previous selections, current selection: xxx <down arrow> title */
	background-color: #F2F3E5; 
	height: 16px;
}
#prevAndCurrTitle {		/* used to define the span that contains the the <uparrow> previous selections, current selection: xxx <down arrow> title */
	background-color: white; 
	padding: 0px 4px 2px 0px; 
}
.pad {		/* adds padding to the previously selected covers tr elements */
	padding: 0px 3px 0px 2px;
}
/*#prevCellInfo {		/* settings for the entire previously selected cover area
	border: 1px solid #E4E5C6; 
	background: #F2F3E5;
}*/
#prevTD {		/* the td ID for the above mentioned tr */
	padding-top: 2px;
}
.navy {		/* sets the color listed below to a certain text element, for example in the prevCellInfo area for the area name and sku listing, overrides parent color settings */
	color: #336;
}
.block {		/* sets images in the prevCellInfo area to be blocks in an inline table element, helps keep the following text to flow and the outlining to work */
	display: block;
}
.bold {		/* sets a classed element to be bold, for example the "change" button and the current area "name" in the browser page */
	font-weight: bold;
}
.clickme {		/* settings for the "click to change" area in the fabricselector page */
	background: #FFF; 
	border-bottom: 1px solid #FFF; 
	border-left: 1px solid #FFF; 
	border-right: 1px solid #FFF; 
	color: #336; 
	text-align: center; 
	font-size: .6em;
}
.widetd {		/* settings to make certain td's extra wide */
	width: 150px;
}
.gobutton {		/* the go button used at the top of the SKU search area */
	color: #336;
	font-size: 1em;
}
.jump {		/* used to for the "jump to" area */
	margin-left: 2%;
}
.sortarea {		/* used for the "sort" drop-down menu */
	margin-left: 5px;
}
#sortArea {
	margin-left: 25px;
	padding-left: 10px;
	border-left: 1px solid #336;
	line-height: 1.3em;
	}
.largeImagesBtn {		/* used for the photo buttons for large and small stamps */
	margin-left: 6px;
}
/* Miscellaneous */
img {		/* sets borders on all images */
	border: 0px solid #636161; 
	padding: 0px; 
	margin: 0px;
}
img.clientlogo {		/* positional settings for the xclient logo at the top of the page */
	position: absolute; 
	top: 1px; 
	left: .5%;
	height: 59px;
	width: 218px;
	margin: 0px;
	padding: 0px;
}
/*span.clientlogospan {
	background: url(logo.gif);
	height: 59px;
	width: 218px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1px;
	left: .5%;
}*/
#required {		/* positional settings for the "required" text used in forms such as login, email, account, etc */
	top: 475px; 
	left: 18px; 
	position: absolute;
}
.disclaimer1 {		/* disclaimer for the fabric selector page - is relocated on print.css page */
	/*top: 205px;
	left: 12px;
	position: absolute;*/
	width: 156px;
	margin-top: 15px;
	margin-left: 12px;
	border: 1px solid #336;
	background: #F2F3E5;
	padding: 2px;	
}
#infoPrintDisclaimer {
	display: none;
}
#entryinfo {		/* settings for the area that defines all fill in forms such as login, email, account, etc */
	top: 55px; 
	left: 190px; 
	position: absolute; 
	padding: 10px 1px 0px 11px; 
	margin-top: -6px;
}
#vendorname {		/* classed used for displaying/hidding vendor name in the html, so that a print.css page can view the vendor name but hidden on an html page */
	display: none;
}
#vendorwebsite {		/* see #vendorname */
	display: none;
}
/*li img, .unselected {		/* used to set the background color of images inside a LI or images with a class of .unselected, example the mfgs correlage checkbox or the > arros in the options menu
	background-color: #FFAA55;
}*/
td span img.selected {		/* the oposite of the .unselected class */
	display: none;
}
/* Options Area */
#optionsarea {		/* sets the list style for the li elements in the options area */
	list-style-type: none;
}
.optionsdiv {		/* positioning used for the options list division */
	height: 15em; 
	margin-left: 12px; 
	margin-top: 15px;
}
/* Info Area */
.infodiv {		/* postioning used for the infodiv class used for information area below the options menu */
	margin-left: 1%;
}
.infodiv2 {		/* positioning of information on fabricselector page and item information page */
	left: 595px; 
	top:20px; 
	position: absolute;
}
.infodiv2alt {		/* positioning of information on alternative fabricselector page, left to Cover Selections by default */
	left: 12px; 
	top: 345px; 
	position: absolute;
	width: 156px;
}
.infodiv3 {		/* positioning of information on the largeview page */
	left: 795px; 
	top: 35px; 
	position: absolute;
}
.infodiv4 {		/* positioning of information used on the email, account, pages */
	left: 430px; 
	width: 250px; 
	top: 15px; 
	position: absolute;
}
.infodiv5 {		/* positioning of information used on the customize css page */
	left: 450px; 
	width: 250px; 
	top: 15px; 
	position: absolute;
}
#infoareafull li {		/* settings for the infoareafull for iteminformation and fabricselector pages */
	list-style-type: none; 
	padding: 0px 5px 5px 5px; 
	margin: 0px;
}
.infodiv2 ul, .infodiv3 ul {		/* settings for the UL elements of infodiv2 and infodiv3 */
	margin-top: 0px;
}
.infodiv4 p {		/* settings for the paragraph children of the infodiv4 areas */
	padding: 3px 5px 3px 5px;
}
.shortinfo {		/* settings for the text found in the contrast area and contrast selections tables, such as color, sku, grade, etc */
	padding: 3px 0px 3px 4px;
	font-size: .9em;
}
#infoareafull {		/* width settings for the infoareafull class */
	width: 95%;
	font-size: .8em;
}
.nobullet {		/* a class created to hide list style type for li items not already stripped away */
	list-style-type: none; 
	margin: 0px; 
	padding-left: 0px;
}
ul.ulcontrast {		/* used in the fabricselector page */
	margin: 0px; 
	padding: 4px 5px 4px 10px;
}
/*.ulcontrast li a span {
	text-transform: lowercase;
}*/
/* Rendered Item - used to define elements surrounding a rendered image */
#selecteditem {		/* positioning of the selected item image on the fabricselector page */
	left: 25.5%; 
	top: 35px; 
	position: absolute;
}
.selecteditemimage {	/* same as above but linked directly to the img element */
	left: 190px; 
	top: 50px; 
	border: none; 
	position: absolute; 
	text-align: center;
}
/* Item Image - define elements relating to the item images */
.itemimage {		/* settings for item image - used in item information and fabricselector pages */
	left: 180px; 
	top: 15px; 
	position: absolute; 
	text-align: center;
	width: 400px;
}
.itemimageCoverBrowser {
	text-align: center;
	margin-right: 10px;
	margin-left: 10px;
	width: 285px;
	}
.itemimage2 {		/* settings for item image2 - used in sectional and assembly pages */
	left: 250px; 
	top: 15px; 
	position: absolute; 
	text-align: center;
}
.itemimagelarge {		/* settings for image in largeview page */
	left: 15px; 
	top: 10px; 
	position: absolute; 
	width: 768px; 
	text-align: center;
}
#itemimageinfo {		/* settings for the sku information below the image */
	font-weight: bold; 
	font-size: .9em;
	line-height: 1.6em;
}
/* Other Photos & Correlates - defines elements that are in the correlates or other photos tables */
/*11*/.infocorrelates, .infootherphotos {		/* settings for the areas that containg correlages and other photos in inteminformation, coverinformation and fabricselector pages */
	margin-left: 190px; 
	top: 445px; 
	position: absolute;
}
.coverselectionsalt {		/* settings for the Cover Selections on alternate fabricselector page, aligned with the itemimage by default */
	margin-left: 1%; 
	left: 190px; 
	top: 405px; 
	position: absolute;
}
.infootherphotos td {		/* settings for the other photo images on the iteminformation page */
	padding-right: 10px;
}
.infocorrelates td.selectedCoverCellTd, .coverselectionsalt td.selectedCoverCellTd	{		/* settings for the selected cover td on fabricselector page -- used to space the td elements out */
	padding-right: 10px;
}
table.correlates {		/* settings for the table that is inside the above mentioned areas in inteminformation, coverinformation and fabricselector pages */
	margin-top: 10px;
	margin-left: 0px;
}
/* Browser Images - defines elements that are in the main browser table */
/*10*/.itemimagesarea {		/* settings for the itemimages area found in the browser page in the div that contains the browser header */
	padding-left: 0px; 
	margin-top: 0px; 
	padding-top: 0px;
}
#browserarea {		/* settings defining the area that starts the div that contains errors, email, browser and other divs that start in the "center" of the page */
	left: 190px; 
	top: 15px; 
	position: absolute;
}
#browserarea2 {
	left: 190px;
	top: 255px;
	position: absolute;
}
#browserareaReport {
	left: 30px;
	top: 15px;
	position: absolute;
}
table.browserareaReportTable {
	border: 2px solid #E4E5C6;
}
table.browserareaReportTable th, table.browserareaReportTable td, table.browserareaReportTable tr {
       border: 1px solid #E4E5C6;
       padding: 2px 2px;
}
table.browserareaReportTable th {
       background-color: #EEEFDD;
}
table.browserareaReportTable td {
       padding-top: 5px;
       padding-bottom: 5px;
}
/* Middle Area - defines elements in the middle area such as email, byo, errors, etc */
/*10*/.middlearea {		/* settings for items used for some elements in the middle of the page such as compare and confirmdelete */
	left: 190px; 
	top: 57px; 
	position: absolute;
}
/*10*/.middlemiddlearea {		/* settings for middle from top middle from side areas such as the assembly table on the assembly page */
	top: 205px; 
	width: 125%; 
	left: 190px;
	position: absolute;
}
#referenceimage {		/* settings for the reference images used in email and requestinfo pages */
	top: 100px; 
	left: 49%; 
	position: absolute;
}
/*10*/#errormessage {		/* settings used to position elements in the middle of the page such as confirmdelete, error and searchresults */
	margin-left: 6px; 
	margin-top: 8px;
	width: 100%;
}
#comparetable {		/* settings for the table in the compare page */
	margin-left: 6px; 
	margin-top: 8px;
}
#assemblytable {		/* settings for the table in the assembly page */
	margin-left: 6px; 
	margin-top: 8px;
}
/* Ordered Lists and Unordered List - items such as options menu, information area and simple search menu */
/* Added 4-11-07 by MicroD - this replaced the .makemenu with a new simple search menu */
/* START RAD MENU */
.ep5menu /* this is the core menu where you set the width of the main menu as well as it's border colors */
{
	width: 210px !important;
	border-left: solid 1px #E4E5C6;
	border-right: solid 1px #E4E5C6;
	border-top: solid 1px #E4E5C6;
}
.ep5menu .rmLink /* this is the listings inside the menu, the type like sofa/chair/ottoman, set the background colors, bottom-border, text color and decorations here */
{
	width: 210px !important;
	line-height: 22px;
	text-decoration: none;
	color: #636161;
	background-color: #F2F3E5;
	border-bottom: solid 1px #E4E5C6;
}
.ep5menu .rmLink:hover, .ep5menu .rmFocused, .ep5menu .rmExpanded /* this is what happens when the user mouses/hovers over the .link listed above; .expanded tells it how to behave when then link is expanded. If you want it to behave the same as a link, leave it here, otherwise move the .expanded class call out to it's own */
{
	color: #636161;
	background: #E4E5C6;
	border-bottom: 1px solid #636161;
	cursor: pointer;
	text-decoration: none;
}
.ep5menu .rmText /* this is the text inside the .ep5menu, i.e. the span that wraps around the .link text like chair/ottoman/sofa... */
{
	padding-left: 5px;	
	/*padding-right: 36px;*/
	text-transform: capitalize;
}
.ep5menu .rmGroup /* this is the core menu sub-set, where you set the width of the main menu's sub-menu (subtypes) as well as it's border colors */
{
	width: 210px !important;
	border: solid 1px #E4E5C6;
	border-right: 0px;
}
.ep5menu .rmGroup .rmLink /* this is the same as the above .link but contained within the submenu */
{
	width: 210px !important;
	background: #ebedd6;
	text-align: left;
	border-right: 1px solid #E4E5C6;
}
.ep5menu .rmGroup .rmLast .rmLink /* this is what happens to the last link. since i use border on the .ep5menu group and border-bottom on the .link, then i must remove the last item's bottom border so it's not doubled */
{
	border-bottom: 0px;
}
.ep5menu .rmGroup .rmLink:hover, .ep5menu .rmGroup .rmFocused, .ep5menu .rmGroup .rmExpanded /* this is the same as the .link:hover above, just for the submenu items */
{
	background: #E4E5C6;
	font-weight: normal;
	cursor: pointer;
	text-decoration: none;
}
.ep5menu .rmVertical .rmSeparator .rmText /* this is used for vertical seperator text fields, we don't use this yet, you can simply set the background color to the same as your .group */
{
	padding-top: 2px;
	background: #E4E5C6;
	font-size: 1px;
}
.ep5menu .rmVertical /* this is used to set the background of the veritical menu, we don't use this yet, you can simply set the background color to the same as your .group */
{
	background-color: #E4E5C6;
	border-bottom: 1px solid #E4E5C6;
}
/* END RAD MENU */
ul.ultable {		/* settings for the options and information menus */
	border: 1px solid #E4E5C6; 
	background: #F2F3E5; 
	cursor: default; 
	margin-left: 0px; 
	padding-left: 0px; 
	width: 160px;
}
ul.ultable li {		/* settings for the LI elements in the options and information menus */
	list-style-type: none; 
	margin: 0px; 
	position: relative; 
	padding: 2px 0px 2px 2px;
	border-bottom: 1px solid #EEEFDD;
}
ul.ultable li.ultitle {		/* settings for the top headers in the options and information menus - aka the Options and Information titles */
	background: #E4E5C6; 
	font-weight: bold; 
	text-align: center;
}
ul.ultable li a {		/* settings for anchors found in LI elements in the options and information menus */
	width: 100%; 
	text-decoration: none;
}
ul.ultable li a:hover {		/* settings for hovering over anchors found in LI elements in the options and information menus */
	color: #336; 
	text-decoration: underline;
}
ul.ultable li:hover {		/* settings for hovering over LI elementsfound in options and information menus */
	background-color: #EEEFDD; 
	color: #336;
}
ul#infoareafull li.ultitle {		/* settings for the title bar for the infoareafull menu - used in item/coverinformation and fabricselector pages */
	padding: 2px 0px 2px 0px;
}
.fabricSelectorBrowserCell{
	float: left; margin-right: 10px; margin-bottom: 5px; width: 80px; height: 95px;
	line-height : 0.7em;
}
/* Marks and Spencer Specific additions */
#mandsUpcCode {
	font-style: italic;
	margin-top: -13px;
}
/*=========== Added after the inital release date of March 16th ==============*/
/* Late additions to the new Start Page */
.ulstarttitle {		/* settings for the title li element on the start page */
	border-bottom: dotted 1px black; 
	font-size: 1.1em; 
	font-weight: bold; 
	text-align: center;
}
/* Javascript PopUp windows used in the browser page */
.popupBackground {
	background-color: #EEEFDD;
	border: 1px solid #336;
}
.popupForeground {
	background-color: #F2F3E5;
	border: none;
}
.popupCaption {
	font-weight: bold;
	text-align: center;
	font-size: .8em;
}
.popupTextFont {
	font-size: .8em;
}
/* added to color the table bkground of rows that contain dissimilar data during a comparison */
.compDiff {
	background-color: #eeefdd;
}
/* Power User details */
#poweruserlogin {
	font-style: italic;
	color: #FA5;
	}
#certainparts {
	font-style: italic;
	}
/* added for keeping the sort area from dropping down when less than 5 items were in browser */
table.topmatrix div.areaheader div.menubar {
	white-space: nowrap;
	padding: 0px 0px;
}
.sortarea {
		white-space: nowrap;
		}
/* moved advanced search to under manufacturers menu */
select#manufacturer {
	margin-bottom: 10px;
	}
/* Quick Cover Search */
/*.covergobuttonborder {
	margin-left: 5px;
	}*/
.covergobutton {
	margin-left: 10px;
	}
.coversearchspan {
	/*background-color: #E4E5C6;
	border: 1px solid #336;
	height: 20px;
	padding: 4px 2px 4px 10px;
	margin: 0px 0px 0px 10px;*/
	}
/*.coversearch {
	margin: 1px 0px 1px 0px;
	}*/
/* Browser Page changes */
tr#prevCellTitle span.dynamicdata {
	font-size: .9em;
	}
	
div.lowerfilter {
	border: 1px solid #336;
	background-color: #F2F3E5;
	padding-top: 3px;
	padding-bottom: 2px;
	margin-bottom: 0px;
	/*clear: both;*/
	}
div.upperfilter {
	padding-bottom: 3px;
	margin-bottom: 0px;
	}
/*div.lowerfilter span.sortarea span.tableheader {
	font-size: .5em;
	}*/
div.menubararea {
	font-size: 100%;
	}
/*EasyPlan Help changes*/
.step_header {
	list-style-type: none; 
	color: #FA5; 
	font-weight: bold;
	text-align: left;
	}
.step_underline {
	text-decoration: underline;
	}
.step_box {
	border: 6px double #336;
	padding: 5px 20px;
	text-align: center;
	margin: 25px 30px;
	background-color: #F2F3E5;
	}
li.step_directions {
	list-style-type: square;
	}
.step_italic {
	font-style: italic;
	}
ol.step_box li.step_header {
	padding-left: 15px;
	}
#troubleshooting {
	margin-top: 20px;
	}
/*Changes made 8/3/05 */
td.mfgTd {
	border-bottom: 1px dashed #E4E5C6;
	}
	
/*Changes made 10/4/05 */
tr#noItemsFoundRow {
	font-style: italic;
	}
.browserNoItemsFound {
	padding: 0px 40px 0px 40px;
	margin-top: 20px;
	}
div#quickCoverSearch {
	white-space: nowrap;
	vertical-align: top;
	}
tr#critSearchCellTr {
	display: none;
	}
/*Changes per new cover browser selector */	
td#contrastTable2Inst {
	display: none;
	}
.prevSelectedRowTr {
	margin-top: 10px;
	}
.selectAreaName {
	height: 29px;
	width: 80px;
	}
.selectedPrevCell {
	background-color: #000;
	color: #E4E5C6;
	padding: 2px 0px 2px 0px;
	/*border: 3px solid #336;*/
	width: 92px;
	}
.selectedPrevCell span, .selectedPrevCell a:hover {
	color: #E4E5C6;
	}
.prevnext {
	font-size: 1.4em; 
	text-decoration: none !important;
	}
/*Changes for fresh new coverbrowser page */
#sortArea, .largeImagesBtn, .rendertext, #prevCellTitle, td#quickCoverSearchTd, .areaInst, div.coversearch, span#gradeArea {
	display: none;
	}
.fsSelectArea {
	visibility: hidden;
	}
table#searchtable div.areaheader {
	background: white;
	border: none;
	}
#quickCoverSearch {
	border-right: 3px double #336;
	padding-left: 2px;
	}
/*#areaInst {
	font-size: 1.1em;
	background: #E4E5C6;
	border: 2px solid #336;
	padding: 2px 15px 2px 15px;
	font-weight: bold;
	height: 30px;
	}*/
#areaInst {
	font-size: 1.1em;
	background: #000;
	border: 2px solid #000;
	padding: 2px 15px 2px 15px;
	font-weight: bold;
	height: 30px;
	color: #E4E5C6;
	}
#areaInst span {
	color: #E4E5C6;
	}
.itemImageCoverTd {
	padding-bottom: 5px;
	}
#areaInstTd {
	padding-bottom: 10px;
	width: 100%;
	}
#areaInstTable {
	width: 100%;
	}
.resetAll {
	padding-left: 10px;
	margin-right: 20px;
	}
#ppage {
	margin-right: 20px;
	padding-right: 25px;
	border-right: 3px double #636161;
	}	
.availableAreasTd {
	vertical-align: middle;
	}
table#otherAvailableAreas td.title {
	font-weight: bold;
	text-decoration: underline;
	text-align: center;
	background-color: #E4E5C6;
	}
table#otherAvailableAreas {
	background: #F2F3E5;
	border: 1px solid #336;
	width: 162px;
	}
/*Changes made 10/20/05 */
ul.ultable li span {
	vertical-align: middle;
	}
/* Add to Basket button */
.dynamicdataATBbtn {	
	font-size: 1.1em; 
	border: 2px solid #336; 
	background: #F2F3E5;	
	padding: 2px 20px 2px 20px;
	}
div#addToBasket {
	margin-top: 10px;
	}
/*Changes made 1/19/06 */
table#advancedSearch td {
	padding-right: 15px;
	padding-top: 15px;
	}
table#advancedSearch {
	padding-top: 0px;
	margin-top: 0px;
	}
table#simpleAdvSearchSel td {
	padding-right: 30px;
	padding-top: 15px;
	}	
table#advancedSearch td#searchCount, table#advancedSearch td#searchCountSubmit, table#advancedSearch td#simpleSel {
	padding-top: 5px;
	padding-right: 5px;
	}
table .advItemSel, table#searchTable .itemSel {
	font-weight: bold;
	}
table#advancedSearch td#itemSearchTitle, table#advancedSearch td#simpleUnsel, table#advancedSearch td#coverSearchTitle, table#advancedSearch td#favoriteSearchTitle {
	padding-top: 0px;
    }	
    
#dynpage 
{
    top: 65px;
}

.requiredOptionCFGTD
{
	border: solid 1px #FF0000;
}

.disabledOptionCFGTD
{
    background-color: Gray;
	border: solid 1px #AAAAAA;
}

.disabledOptionRoleNameTD
{
	background-color: Gray;
	border: solid 1px #AAAAAA;
}


.dynamicHeader .topMenuArea
{
	z-index: 10;
	position:relative;
	height: 23px;
}

.normalHeader .topMenuArea
{
	z-index: 10;
	position: absolute;
	top: 63px;
	left: 0px;
	height: 23px
}

.topMenu
{
	border-top: none;
}

/* Custom/Client Home Page */
.homePageStaticImage
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.AttributeFilterContainer
{
	font-size: .8em;	 
	cursor: default; 	 	
	width: 160px;	
}

.AttributeFilter
{	
	border: 1px solid #E4E5C6; 
	background: #F2F3E5;
	display: block;
	margin-top: 10px;			
}

.AttributeFilterHeading
{	
	background: #E4E5C6; 
	font-weight: bold; 
	text-align: center;
	padding: 2px 0px 2px 2px;
	display: block;	
}

.attributeFilterList
{
	display: block;
	padding: 2px 0px 2px 0px;
	border-bottom: 1px solid #EEEFDD;		
}

.attributeFilterList:hover
{
	background-color: #EEEFDD; 
	color: #636161;	
	text-decoration: underline;
}

#zoomPanel.yui-panel .hd {
        margin-top: 0px;
        padding-top: 0px;
        padding-left: 10px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        font-size: 18pt;
        font-family: arial;
        background-color: #3C3C3C;
        background-image: none;
        height: 46px;
        color: white;
        border: none;
}
    
#zoomPanel.yui-panel .bd {
        border: none;
        margin-top: 0px;
        background-color: #3C3C3C;
}
    
#zoomPanel.yui-panel .container-close {
	height:30px;
	width:30px;
	background:url(../../js/MicroDZoom/images/button_x.png) no-repeat;
}
.AttributeCriteriaFont {
         color: #0066FF;
         text-decoration:underline;
}
.AttributeCriteriaFont:hover
{
 	color: Black;
}
.LinkStyleForSoloLoginUser
{
	font-size: .7em;
	font-weight:bold;
	color:Red;	
}
/* Newsletter Control related classes*/
.newsletterSubmitPanel{}
.newsletterTitle{}
.newsletterLabel{}
.newsletterInput{}
.validationMessage{}
.newsletterButton{}

/* Redesigned Modify Account Page */

#myaccountcontainer * {
	margin: 0;
	padding: 0;
}

#myaccountcontainer {
	width: 415px;
	margin: 25px 0 0 41px;
	background-color: #efefef;
	border: 1px solid #bebebe;
	padding: 20px 25px 25px 25px;
}

#myaccounttop {
	width: 415px;
	height: 21px;
}

#myaccountheading {
	width: 185px;
	height: 21px;
	line-height: 21px;
	background-color: #2d2d2d;
	text-align: center;
	float: left;
}

#myaccountheading h1 {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
}

#myaccountrequired {
	width: 230px;
	height: 21px;
	line-height: 21px;
	text-align: right;
	float: right;
}

#myaccountrequired p {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #787878;
}

.myaccountrow {
	width: 415px;
	height: 55px;
	clear: both;
}

.myaccountrowleft {
	width: 207px;
	height: 35px;
	padding-top: 20px;
	float: left;
}

.myaccountrowleft input {
	width: 160px;
	height: 14px;
	line-height: 14px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	background-color: #FFF;
	border: 1px solid #abadb3;
	padding: 3px !important;
}

.myaccountrowleft p {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #787878;
}

.myaccountrowright {
	width: 208px;
	height: 35px;
	padding-top: 20px;
	float: left;
}

.myaccountrowright input {
	width: 160px;
	height: 14px;
	line-height: 14px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	background-color: #FFF;
	border: 1px solid #abadb3;
	padding: 3px !important;
}

.myaccountrowrightcheckbox {
	width: 208px;
	height: 35px;
	padding-top: 20px;
	float: left;
}

.myaccountrowrightcheckbox input {
	width: 160px;
	height: 14px;
}

.myaccountrowrightcheckbox p {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #787878;
}

.myaccountrowright p {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #787878;
}

.myaccountrowcheckbox {
	width: 19px;
	height: 30px;
	float: left;
}

.myaccountrowcheckbox input {
	width: auto !important;
	height: auto !important;
	padding: auto !important;
}

.myaccountrowcheckboxtext {
	width: 189px;
	height: 30px;
	float: left;
}

#myaccountsubmit {
	width: 85px;
	height: 24px;
	text-align: left;
}

#modifyAccountSubmitbutton {
	width: 85px;
	height: 24px;
	background-color: #2D2D2D;
	color: white;
	margin: 0 auto;
	text-align: left;
}

#modifyAccountSubmitbutton a {
	display: block !important;
	width: 85px;
	height: 24px;
	font-family: Arial, san-serif;
	color: #FFF;
	font-size: 12px;
	text-decoration: none;
	line-height: 24px;
	text-align: center;
	background-image: url('../images/buttonarrow.png');
	background-repeat: no-repeat;
	background-position: 63px 0px;
}

.myaccountrowyourpage
{
    padding-top: 20px !important;
}

.myaccountrowyourpage a {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: blue;
	text-decoration: underline;
}

/* Reposition window for website visitors */

.workspaceRelative #myaccountcontainer 
{
    margin: 20px auto 0 auto;
}    

/* End Redesigned Modify Account Page */

/* Account Content Management page */
.contentContainer 
{
    margin: 0 auto;
    width: 900px;
}

.manageContentTitle
{
    font-weight: bold;
    font-size: 16px;    
    padding-top: 8px;
}

.errorsDisplayDiv
{
    color: Red;
    font-size: 14px;
}

.contentLabel
{
    font-weight: bold;
    padding: 8px 0px 8px 0px;
}

.editContentDiv
{
    padding-top: 15px;
}

.contentContainer input[type="submit"]
{
    color: Black;
}

.ContentImageUploader
{
    padding: 8px 0px 8px 0px;
}

.ContentImageUploader .ruBrowse, .SlideImageUploader .ruBrowse
{
    background-position: 0 -22px !important;
    height: 24px !important;
    width: 80px !important;
}

.ContentTextAreaEditor
{
    margin-bottom: 8px;
}

#commitContent
{
    margin-top: 20px;
}
/* END - Account Content Management page */


/* Find a Designer Results */

#designerresultscontainer {
	width: 950px;
	margin: 0 auto;
}

.designerresultsrow {
	width: 950px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-top: 1px solid #e7e7e7;
}

.designerresultsrowleft {
	width: 174px;
	height: 218px;
	text-align: left;
	float: left;
}

.designerresultsrowright {
	width: 776px;
	text-align: left;
	float: left;
}

.designerresultsrowright h1 {
	font-family: Times, sans-serif;
	font-size: 22px;
	color: #242424;
	padding-bottom: 10px;
	font-weight: normal;
}

.designerresultsrowright p {
	font-family: Arial, sans-serif;
	font-size: 14px !important;
	line-height: 18px;
}

.designerresultsrowright ul {
	padding: 20px 0 0 0;
	margin: 0;
}

.designerresultsrowright li {
	list-style: none;
	display: inline;
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #242424;
	border-left: 1px solid #242424;
	padding-left: 6px;
	padding-right: 3px;
}

.designerresultsrowright li:first-child {
	border: 0;
}

.designerresultsrowright li a {
	color: #242424;
	text-decoration: underline;
}

.designerresultsrowright h1 a {
	color: #242424;
	text-decoration: none;
}

.designerresultsrowright h1 a:hover {
	text-decoration: underline;
}

/* End Find a Designer Results */


/* XClient - Search Client Settings Starts */
.borderRound7{                       /*Use this div class for rounding borders --> works in IE>v8, Chrome, Firefox*/
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.clearfix:after{                /*Provide clearfixes for the divs*/ 
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
        
/* IE6 */
* html .clearfix{               /*Provide clearfixes for the divs*/
    height: 1%;
}
        
/* IE7 */   
*:first-child + html .clearfix{     /*Provide clearfixes for the divs*/
    min-height: 1%;
}

#divClientSettingSearch{
    width: 720px;
    border: 1px solid black;
    padding: 10px;
}

.form_Row{                          /*Use this div class for container div for each row (one or more columns aligned side by side)*/
    padding: 2px 0;
    clear: left;
    height: auto;
    line-height: 22px;
}

.left_Div{                          /*Use this div class for container div if the div wants to be 33% of relative width of any DIV which is left aligned*/
    width: 33%;
    float: left;
    clear: none;
    text-align: right;
    margin-right: 2px;
}
        
.right_Div{                         /*Use this div class for container div if the div wants to be 66% of relative width of any DIV which is right aligned*/
    width: 66%;
    float: right;
    clear: none;
    text-align: left;
}
/* XClient - Search Client Settings Ends */


/* XClient Addon Styling */
.addon-management-container {
	font-family: Arial, sans-serif;
	margin: 20px 0;
	padding: 15px;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.areachoice h1 {
	margin-top: 0;
	color: #333;
	font-size: 24px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	margin-bottom: 15px;
}

.section-title {
	margin-top: 0;
	color: #333;
	font-size: 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	margin-bottom: 15px;
}

.addon-selection-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 10px;
}

.addon-list-column {
	width: 45%;
	vertical-align: top;
}

.addon-buttons-column {
	width: 10%;
	text-align: center;
	vertical-align: middle;
	padding: 0 5px;
}

.addon-list-header {
	margin-bottom: 8px;
}

	.addon-list-header h4 {
		margin: 0 0 10px 0;
		font-size: 14px;
		color: #444;
	}

.addon-listbox {
	width: 100%;
	height: 300px;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 5px;
	font-size: 13px;
	box-sizing: border-box;
}

	.addon-listbox option {
		padding: 5px;
		border-bottom: 1px solid #f0f0f0;
	}

		.addon-listbox option:hover {
			background-color: #f5f5f5;
		}

		.addon-listbox option:selected {
            background-color: #4da6ff !important;
			color: white !important;
		}

.addon-transfer-button {
	padding: 8px 15px;	
	color: black;
	border-radius: 3px;
	cursor: pointer;
	font-weight: bold;
	min-width: 90px;
	transition: background-color 0.2s;
}

	.addon-transfer-button:hover {
		background-color: #7A7B71;
		text-decoration: none;
	}

	.addon-transfer-button:disabled {
		background-color: #cccccc;
		cursor: default;
	}

.addon-search-box {
	position: relative;
	margin-bottom: 8px;
}

.addon-search-input {
	width: 100%;
	padding: 5px 8px 5px 28px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 12px;
	box-sizing: border-box;
}

.addon-search-icon {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 12px;
}

.addon-listbox-actions {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 12px;
}

.addon-item-count {
	color: #666;
}

.addon-selection-link {
	color: #0078d7;
	text-decoration: none;
}

	.addon-selection-link:hover {
		text-decoration: underline;
	}

/* Base styles for the manage add-ons section */
#manageAddOnsForSelectedPackage {
	font-family: Arial, sans-serif;
	color: #333;
}

	/* Styled note paragraph */
	#manageAddOnsForSelectedPackage p {
		font-style: italic;
		width: 100%;
		max-width: 800px;
		padding: 12px 15px;
		background-color: #f5f5f5;
		border-left: 4px solid #0078d7;
		margin: 15px 0;
		line-height: 1.5;
		color: #555;
		border-radius: 0 4px 4px 0;
	}

	/* Base package description text */
	#manageAddOnsForSelectedPackage > div > span {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 10px;
	}

/* ListView styling */
.addons-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 5px 0;
	max-width: 900px;
}

.addon-item {
	padding: 8px 12px;
	background-color: #f9f9f9;
	border: 1px solid #eaeaea;
	border-radius: 4px;
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
	min-height: 18px;
}

	.addon-item:before {
		content: "\2713";
		color: #0078d7;
		font-weight: bold;
		margin-right: 8px;
		flex-shrink: 0;
	}

.selected-base-package {
	font-weight: bold;
	color: #0078d7;
}

.error{
	color:red;
}
.success{
	color:green;
}