/* CSS Document */
/* Helper styles */

/* AVOID color and measurement-specific names.  
ie. "text10px" should be "small"
ie. "topPad7px" should be "topPadMedium" */

/* alignment ********* */
.right					{text-align:right !important;}
.left					{text-align:left !important;}
.center					{text-align:center; !important;}
.top					{vertical-align:top !important;}
.middle, .middle td		{vertical-align:middle !important;}
.bottom					{vertical-align:bottom !important;}
/* formatting ******** */
.noWrp					{white-space:nowrap;}
.indent					{margin-left:2em; margin-right:2em;}
.indentSmall			{margin-left:1em; }
.clearBoth				{clear:both;}
.inline					{display:inline}
.relRight				{position:relative; z-index:auto; right:0 !important;}
/* font styles ********* */
.bold					{font-weight:bold}
.unBold, .unbold		{font-weight:normal !important}
.italic					{font-style:italic;}
/* bg colors and borders */
.emphasis				{background-color:#FFFFFF; padding:0.4em; margin-bottom:1em}
.wBg					{background-color:#FFFFFF !important; border:solid 1px #EEEEEE; padding:0.4em; margin:0.5em 0; text-align: left; }
.hlt					{background-color:#DEDEDE !important;}
.llt					{background-color:#F1F1F1 !important;}
.brdr					{padding:0.4em; border:solid 1px #CCCCCC; margin-bottom:1em }
.brdrTopBottom			{padding:1px 0 7px 0 !important; margin:0 0 !important; border-top:solid 1px #CCCCCC !important; border-bottom:solid 1px #CCCCCC !important;}
.noBrdr					{border:none 0px !important;}
/* font sizes ********** */
.small					{font-size:0.8em !important;}
h2 .small, h1 .small, h3 .small	{font-weight:normal}
h3.toggle a{font-weight:normal; text-decoration:underline}
.medSmall				{font-size:0.85em !important;}
.big					{font-size:1.2em !important;font-weight:bold;}
.bigger					{font-size:1.3em !important;font-weight:bold;}
/* font colors ********* */
.required				{color:#CC9900 !important;}
.sel					{color:#666666 !important; font-weight:bold}
.msStyle				{color: #D3E773}
.correction				{color:#FF0000 !important; font-weight:bold}
.error					{color:#CC0000 !important; font-weight:bold}
.sale					{color:#DB3C38; font-weight:bold;}
.off					{color:#999999; }
.save					{color:#DB3C38;}

/* visibility ********** */
.hide					{display:none;}
.show					{display:block;}
/* data description */
.title					{font-weight:bold}
.details .title, .pCde .title{font-weight:normal; } /* exclude title style from certain areas */
/* margins ************* */
.nM					{margin:0 !important;  padding:0 !important;}
.xM					{margin:6px;}
.xM2				{margin:6px;margin-left:0;}
.aM					{margin:auto;}
/* floats ************** */
.fL				{float:left;}
.fR				{float:right;}
img.fL			{margin-right:1em;} /* img-specific */
img.fR			{margin-left:1em;}
/* other */
.more			{margin-top:1em; margin-left:5em;} 
.feedback		{font-size:0.9em; color:#87A02F;}
.btn			{font-size:0.9em; vertical-align:middle}
.uln			{text-decoration:underline !important;}
.noUln			{text-decoration:none}
/* widths ************** */
/* the following are useful for setting table cell and div widths */
.w00					{width:auto !important; }
.w2					{width:2% !important}
.w10					{width:10% !important}
.w20					{width:20% !important}
.w25                                    {width:25% !important}
.w30					{width:30% !important}
.w33					{width:33% !important} /* 3 cols */
.w40					{width:40% !important}
.w45                                    {width:45% !important}
.w49					{width:49% !important}
.w50					{width:50% !important}
.w60					{width:60% !important}
.w70					{width:70% !important}
.w80					{width:80% !important}
.w90					{width:90% !important}
.w95					{width:95% !important}
.w98					{width:98% !important}
.w100					{width:100% !important;/* _width:98.5% !important */}
.wMid					{width:14em;}

/* separators */
.spc					{margin-top: 1em !important; margin-bottom: 1em !important;}

/* Added by masih@ for Wish List, DO NOT REMOVE  */
.line                                   {clear:both; height:5px; margin:0; padding:0; border:none 0px; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) repeat-x 50% top;}
/* ----- masih@ ---- */

/* difference between hr's and sep's is that hr's extend to the edges of the content area, and seps don't */
hr, div.hr				{clear:both; height:5px;	margin:0; padding:0; border:none 0px; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) repeat-x 50% top;}
div.hr hr				{display:none;}

hr1, div.hr1				{clear:both; height:0px;	margin:0; padding:0; border:none 0px; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) repeat-x 50% top;}

div.sep					{clear:both; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) repeat-x 50% top; margin:1em 0; padding-top:1px;}
div.message div div.sep{background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) repeat-x 50% top !important; margin:1em 0 !important; }

#content .hr				{position:relative; z-index:auto; background-image: url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) !important; _left: -1px; margin:0.8em -9px !important; }
#catTd .hr1                     	{position:relative; z-index:auto; background-image: url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) !important; _left: -1px; margin:0 -9px -14px -9px !important; }
div.hr2                     	        {background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) repeat-x 50% top; margin:0; padding-top:1px;}
 /* hr in content area */
div.sep2				{background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-dotted.gif) repeat-x 50% top; margin:1em 0; padding-top:1px;}

/* ********************************************************************************** */
/* Entity-specific helper styles */
/* forms ********** */
/* textboxes */
input.chr2					{width:2em; text-align:center}
input.smallest, input.exsm	{width:5em;}
input.sm					{width:8em;}
input.creditcardBox             { width:11em;}
input.md					{width:13em;}
input.lg					{width:20em;}
input.w144h19                           {width:144px !important; height:21px !important;}        
input.disabled				{border:solid 1px #CCCCCC; color:#CCCCCC;}
input.chr2.disabled			{width:2.2em;}
input.bannerInput			{width:180px;  font-size:1.00em !important; vertical-align:middle; font-family:Arial !important;}
input.bannerInput2			{color:#666666; width:10.7em; margin:3px 0 4px 0; font-size:1.09em; vertical-align:middle;}
input.giftBannerInput			{color:#666666; font-size:1.09em; vertical-align:middle;}
/* buttons and imagefields */
input.bannerBtn				{color:#000000; font-weight:bold; margin:0; background-color:#CCCCCC; vertical-align:middle;}
input.imgBtn				{margin-left:4px; position:absolute; z-index:auto; }
/* select */
select.disabled				{color:#CCCCCC;}
select.exsm					{width:6.33em;}
select.sm					{width:9em;}
select.mdSm					{width:11em;}
select.md					{width:12.5em;} /* changed width from 13 to 12.5 for finders - masih@ */
select.mdDP					{width:12.5em; margin-bottom:7px !important;} 
select.mdCL					{width:160px; margin-bottom:7px !important;} 
select.lg					{width:20em;}
/* textareas */
textarea					{font-family:Arial,helvetica,sans-serif; font-size:inherit; color:#333333; padding:3px;}
textarea.sm					{width:11em; height:5em}
textarea.md					{width:15em; height:8em}
textarea.lg					{width:22em; height:11em;}
textarea.gift				{width:20em; height:9em;}
/* radios */
.radioGroup					{margin-left:1.5em; }
.radioGroup input			{margin-left:-1.5em; }
/* menu lists should be wrapped in this div class. incl lMenu, rMenu, and content menus */
/* used to wrap contents of many components, incl lMenu, rMenu, product lists */
div.menu a					{text-decoration:none}
div.menu a:hover			{text-decoration:underline}

/*absolute position */
.posAbsolute                            {position:absolute;}