/* 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#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;

}

#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;

	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: 15px; 

	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: 190px; 

	top: 15px; 

	position: absolute; 

	text-align: center;

}

.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: 1%; 

	top: 385px; 

	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;
	}



/* 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 */



/*   Search page menu CSS   */

/*   This menu was inspired by (and the basic technique taken from) Eric Meyer's Pure CSS Menus.        */

/*   http://www.meyerweb.com/eric/css/edge/menus/demo.html          */

/*   The idea of using DHTML behaviours and conditional comments was inspired by Brother Cake's CSS / DHTML Hybrid Navigation Bar.      */

/*   http://www.brothercake.com/scripts/navmeister/page.php       */



ul.makeMenu, ul.makeMenu ul {

	width: 190px;                 /* sets the size of the menu blocks */

	border: 1px solid #E4E5C6;      /* puts a colored border around the menu blocks */

	background-color: #F2F3E5;      /* makes the menu blocks a certain color */

	padding-left: 0px;           /* stops the usual indent from ul */

	cursor: default;             /* gives an arrow cursor */

	margin-left: 0px;            /* Opera 7 final's margin and margin-box model cause problems */

}

ul.makeMenu li {

	list-style-type: none;       /* removes the bullet points */

	margin: 0px;                 /* Opera 7 puts large spacings between li elements */

	position: relative;          /* makes the menu blocks be positioned relative to their parent menu item

	                                the lack of offset makes these appear normal, but it will make a difference

	                                to the absolutely positioned child blocks */

	color: #636161;                 /* sets the default font colour */

    padding-top: 2px;

    padding-bottom: 2px;

    border: 1px solid #EEEFDD;
    z-index: 0;

}

ul.makeMenu li > ul {          /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */

	display: none;               /* hides child menu blocks - one of the most important declarations */

	position: absolute;          /* make child blocks hover without leaving space for them */

	top: 0px;                    /* position slightly lower than the parent menu item */

	left: 188px;                  /* this must not be more than the width of the parent block, or the mouse will

	                                have to move off the element to move between blocks, and the menu will close */

	z-index: 5;					/* this is set to make sure that the hovering child menu sits on top of any arrows or submenu pointers */

}

ul.makeMenu ul li.lititle {

	display: none;

}

ul.makeMenu li:hover {

	background-color: #EEEFDD;      /* gives the active menu items a yellow background */

	color: white;                 /* makes the active menu item text black */

}

ul.makeMenu li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements

	                                the > targets only the child ul, not any child uls of that child ul */

	display: block;              /* makes the child block visible - one of the most important declarations */

	right: 100%;
	z-index: 5;

}

/* and some link styles */

ul.makeMenu li a {		/* settings for the anchors found in LI - used for the simple search menu */

	color: #636161; 

	display: block; 

	width: 100%; 

	text-decoration: none;

}

ul.makeMenu li a:hover {		/* settings for the anchors on :hover found in LI - used for the simple search menu */

	color: #336; 

	text-decoration: none;

}

ul.makeMenu li.sub:hover {

	margin-right: -191px;

	background: #E4E5C6;

	padding-left: 189px;

	border: 1px solid silver;

	color: #fff !important;

}

ul.makeMenu li.sub:hover > ul {

	top: 20px; 

	right: 0px; 

}

ul.makeMenu li > img {

	visibility: hidden;

}

/*ul.makeMenu li.lititle {		/* settings for the top item in an LI - used for the simple search menu

	color: #336; 

	background: #E4E5C6;

}*/

/*ul.ultable li.bkgrndclr {		/* background color used for an LI item with class "bkgrndcolor" found in options and information menus

	background: #F2F3E5;

}*/

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 10px;
}
.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: 60px 40px 60px 40px;
	}
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: #E4E5C6;
	color: #FFF;
	padding: 2px 0px 2px 0px;
	border: 3px solid #336;
	width: 92px;
	}
.prevnext {
	font-size: 1.4em; 
	text-decoration: none !important;
	}
/*Changes for fresh new coverbrowser page */
.pageCounts, .jump, #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;
	}
.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;
	}
/* 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 .link /* 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 .link:hover, .ep5menu .focused, .ep5menu .expanded /* 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 .text /* 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 .group /* 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 .group .link /* 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 .group .last .link /* 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 .group .link:hover, .ep5menu .group .focused, .ep5menu .group .expanded /* 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 .vertical .separator .text /* 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 .vertical /* 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 */