/* CSS Document */ /*widgets ***************************** */ .selectLinks {margin:5px 0; font-size:0.8em !important; } .pList .selectLinks {font-size:0.85em !important; } /* index for help, sizeguides and account areas styles. attach to table */ .index {width:100%; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-solid.gif) repeat-x 50% bottom;} .index td {width:33%; padding-bottom:1em} .index td td {width:auto;} .index h3 {margin:0 0 0.5em 0} .index ul {margin-left:0; margin-bottom:1em} .index li {list-style:none none outside; padding-left:10px; padding-right:5px; } .index.anchr li {/* no difference, but could be... */} .index li a {color:#333333; text-decoration:none; } .index li a:hover {color:#666666; text-decoration:underline; } .index li ul li { padding-left:8px; background-image: url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bullet-index2.gif)} /* Classes added for My Mns favorites wizard since css was not integrated as a whole */ /* favourites picker */ #jfyFavsInit {position:relative;z-index:auto; margin:0px; } .jfyFavsOuter { background-color:#FFFFFF; padding-bottom:0.5em; width:574px;position:relative;} .jfyFavs {border:solid 1px #CCCCCC; background-color:#FFFFFF;} .jfyFavs .item.min .container {display:none} /* payalg: changing the class for favorites on IE */ .jfyFavs .item.jfyShow .container {display:;} .jfyFavs .inner {padding:4px 0 15px 15px} .jfyFavs .instructions {font-size:1.1em;} .jfyFavs .instructions p {margin: 0 0 0.2em 0} .jfyFavs h3 {position:relative;height:40px; vertical-align:middle; border-bottom:1px solid #CCCCCC; margin:0 !important; font-size:1.55em; line-height:2.1em; font-weight:bold; color:#FFFFFF; padding:0 12px;background: #CCCCCC url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bg-title.jpg) repeat-x left top;} .jfyFavs h3 a {position:relative;margin-left:280px; color:#FFFFFF; font-size:71%; font-weight:normal; text-decoration:underline !important;} .jfyFavs .item { width:11.4em; position:relative;z-index:auto; margin:0 13px 0 0} .jfyFavs .item .container ul {margin:0 !important; padding:0 !important;} .jfyFavs .item .container ul li {clear:both; line-height: 1.3em; display:block; list-style:none outside none; margin:0 0 0.5em 15px; padding:0; background-image:none;} .jfyFavs .item .container ul li input {vertical-align:middle; padding:0; margin: 0 0 0.1em -15px;} .jfyFavs .item .container ul li label {padding-left:1px} .jfyFavs .item h4 {font-size:1.2em; margin: 0.5em 0 0.1em 0; } .jfyFavs .inner .item h4 a {display:inline; width:100%; background:transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-expand.gif) no-repeat 0 50%; padding-left:12px;} .jfyFavs .inner .unhide h4 a {background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-contract.gif)} .jfyFavs .base {margin-bottom:-1px; text-align:right; background:#CCCCCC url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bg-title-light.jpg) repeat-x 0 0; padding:5px; border-top:1px solid #CCCCCC} /* minimized version */ /* insert positioning code here */ .jfyFavsOuter.init {height:20em; } .jfyFavs h3 a {color:#FFFFFF; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/h3-lMenu.jpg) no-repeat left 3px; text-decoration:none; padding-left:18px} .jfyFavs h3 a:hover {color:#FFFFFF; text-decoration:none;} /* ie hacks */ * html .jfyFavs .item { width:11.25em;} * html .jfyFavs .item .container ul li {margin:0.2em 0 0.5em 0;} * html .jfyFavs .item .container ul li input {float:left; margin:-0.3em -3px 0.1em -4px !important;} /* customer reviews */ .cReviews {clear:both} .cReviews .item {clear:both; margin:0.5em 0 3em 0;} .cReviews .description {margin-top:0.5em;} .cReviews .opinion {margin:0.5em 0; color:#666666} /* summary info, on order detail page but can be elsewhere */ div.smmry {padding: 6px 11px; margin-left:0; } div.smmry ul {padding-left:0; margin-left:0; } div.smmry ul li {list-style:none none outside; list-style-type:none; padding-left:0; margin-left:0; } /* if contains another div, then the titles will be graphical */ div.callout {border:solid 1px #CCCCCC; margin:0 1px 2px 0 !important; clear:both; } img.callout {border:solid 1px #CCCCCC; margin:0 auto 2px auto; clear:both; } div.callout h3 {color:#FFFFFF; margin:0 -1px 0 -1px !important; padding:3px 0 !important; text-align:center !important; background: #333333 repeat-x 50% 50%;} div.callout h3.signIn { width:100%; font-size:1.21em !important;} #lMenu div.callout h3.signIn { width:153px !important; font-size:1.18em !important;} div.callout form {margin:0 auto !important; display:inline} div.callout h4 {color:#FFFFFF; margin:0 auto !important; padding:4px 6px !important; text-align:left !important; background: #333333 repeat-x 50% 50%;} #lMenu div.callout h4 {font-size:1.27em;} div.callout div ul.onward {margin:5px 0 0 0 !important; _margin:2px 0 0 0} div.callout div ul.onward li{font-size:1em; margin:0 0 2px 0; _margin:0 0 1px 0} div.callout div.item {font-size:1em; padding: 0 9px 5px 9px; background-color: #EAEAEA} #ps-sale div.callout div.item {padding: 0 9px 1px 9px;} div.callout div.greyBG {background-color: #EEEEEE; } div.callout div.login {background-color: #EAEAEA; } div.callout div.login table { height:148px; } div.callout p {padding-top:0.2em; margin:0; margin-bottom:0.2em;} div.callout input.md {width:12.2em;} /* alt wrappers - no bg, or minimum height */ #rMenu div.alt div.callout div.item {min-height:none !important; height:auto !important;} /* apundit@ Added new css for the login box on the homepage */ div.callout .signedInItem {background-color:#FFFFFF; padding:0} #layout5 #rMenu div.callout .signedInItem {min-height:132px; _height:133px; } div.callout .signedInItem table { height:148px; width:100%; } #lMenu div.callout .signedInItem table { height:148px; width:151px;} div.callout .signedInItem table tr.login { background-color:#DDDDDD; text-align:center; } div.callout .signedInItem h5{ padding:2px 6px; background-color:#DDDDDD; line-height:1.2em !important; font-size:1.1em} div.callout .signedInItem ul{margin:0 0 0 5px; _margin:0 0 0 5px;} div.callout .signedInItem li{ font-size:1.09em; margin:2px 0; list-style:none outside none; display:block; padding:2px 0 2px 9px ;} div.callout .signedInItem li a{text-decoration:none} div.callout .signedInItem li a:hover{text-decoration:underline} /* use for help and controls callouts that float to the right of the page - eg. address book */ div.calloutRight {border:solid 2px #999999 !important; padding:0.5em; margin-left:0.5em; margin-bottom:0.5em; width:12em; text-align:center; float:right; clear:both; } /* describe product detail data */ .pDescription {font-size:1.00em !important; font-weight:normal; line-height:14px !important;} .promoDescription {font-size:1.00em; font-weight:normal; line-height:120%;} .price {font-weight:normal; color:#666666;} .range .price {font-size:1.4em; font-weight:normal;} .price .badge {font-weight:bold !important;} .price .new .badge {color:#006699; text-transform:uppercase} .price .sale {color:#DB3C38;} .price .sale .history {margin-top:0.2em; font-weight:normal;} .price .sale .history span {padding-right:0.7em; text-decoration:line-through} .price .offer .badge {color:#990000; text-transform:uppercase} .pCde {font-size:1.00em; margin:0 0 8px 0 !important; color:#333333} .price .pCde {font-size:79%; margin:0 0 8px 0 !important; color:#333333} .dateAdded {clear:both; font-size:0.9em; padding-top:0.5em !important; font-style: italic;} /* price size in global pop-over*/ .popPrice .price {font-size:1.1em; font-weight:normal; color:#666666;} /* list style groups***** */ /* use for numbering with image numbers */ ol.imgLst {margin:0.5em 0 0 0; padding:0; font-size:1.1em; } ol.imgLst li {margin:0 0 0.6em 0; padding:0 0 0 22px; min-height:19px; _height:19px; list-style:none none outside; background:transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/number-gn-1.gif) no-repeat left top;} ol.imgLst a {text-decoration:none} ol.imgLst li.gn1 {background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/number-gn-1.gif)} ol.imgLst li.gn2 {background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/number-gn-2.gif)} ol.imgLst li.gn3 {background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/number-gn-3.gif)} ol.imgLst li.gn4 {background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/number-gn-4.gif)} ol.imgLst li.gn5 {background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/number-gn-5.gif)} /* return actions, go to previous page, expand results fo tier browse, etc */ ul.return { margin:0} ul.return li {display:block; list-style:none none outside; padding-left:8px; margin:0; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bullet-laquo.gif) no-repeat left 2px !important;} /* forward actions, child node expansion, related links. Modified to Increase gap between right chevron and related text*/ ul.onward {margin:0} ul.onward li {display:block; list-style:none outside none ; padding-left:10px; margin:0 0 0.2em 0;} /* use for pack3 widget Links */ ul.ctgry, ul.prdct {margin:-0.3em 0 0 0} ul.ctgry li, ul.prdct li{display:block; list-style:none outside none ; padding-left:8px; margin:0 0 0.2em 0;} ul.ctgry li a, , ul.prdct li a{text-decoration:none} /* downward actions, child node expansion, related links. */ ul.downward {margin:0} ul.downward li {display:block; list-style:none outside none ; padding-left:8px; margin:0 0 0.2em 0; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bullet-daquo.gif) no-repeat left 2px;} /* downward actions, child node expansion, related links. */ ul.star {margin:0} ul.star li {display:block; list-style:none outside none ; padding-left:15px; margin:0 0 0.2em 0; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bullet-starBoxed.gif) no-repeat left 0px;} /* appropriate for data to be structured list, but not to have a bullet marker */ ul.noBlt {margin-left:0.5em; } ul.noBlt li.botMargin2px { margin-bottom:2px !important;} ul.noBlt0 {margin-left:0em} ul.noBlt li, ul.noBlt0 li {list-style:none outside none; list-style-type:none; margin-bottom:0.5em; } ul.noBlt2 {padding-left:0; } ul.noBlt2 li {list-style:none outside none ; list-style-type:none; padding-left:0; margin-left:0; } /* extra info - appears with a dash image before the info. use for account detail pages (gift options, extra options, deposits, notes, etc */ ul.xtra {margin-top:-0.2em !important; padding-left:0; } ul.xtra li {list-style:none outside none ; list-style-type:none; margin:0 0 0.1em 0 !important; background:transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bullet-dash.gif) no-repeat left 4px; padding-left:8px !important; padding-top:0; margin-left:0; } /* puts floated column structure on list, looks like a table (no bullets) */ ul.stacked {display:block; margin:0; padding:0} ul.stacked li {list-style:none outside none; margin:0 0 1em 0; padding:0; display:block; float:left; width:25%;} ul.stacked li img {vertical-align:middle; margin:0 0.5em 0.3em 0;float:left;} ul.stacked li a {text-decoration:none;} /* wrap in divs with the following styling to determine columns */ .s2 ul.stacked li {width:50%;} .s3 ul.stacked li {width:33%;} .s4 ul.stacked li {width:25%;} ul.stacked li ul {margin:0; padding:0; display:block;} ul.stacked li ul li {margin:0 0 0.5em 0; padding:0; display:block; float:none; width:auto;} ul.smSq {margin:0; padding:0} ul.smSq li {margin:0 0 0.2em 0; padding:0 0 0 7px; list-style:none outside none; background:transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bullet-square.gif) no-repeat 0 7px} p.onward {display:block; padding-left:8px; } table.pList { border-top:solid 1px #CCCCCC; width:100%; margin:8px 0 5px 0;} table.pList td {padding: 1em 0.2em 1em 0.2em; border-bottom:solid 1px #CCCCCC} table.pList th {background-color:#efefef; padding: 0.2em; border-bottom:solid 1px #CCCCCC} table.pList td td {padding: 0; border-bottom:none 0} table.pList.cmpct {border-bottom:solid 6px #DDDDDD;} table.pList.cmpct td, table.pList.cmpct th{padding: 0.2em } table.pList.cmpct th {padding: 0.3em; background-color:#DDDDDD;} table.pList td.pImg.tn {width:92px;} table.pList td.pNo {width:1.5em !important;} table.pList td.pChk {width:2em !important;} table.pList div.lnks {font-size:0.9em; margin-top:2em;} table.pList.cmpct p.links {font-size:0.9em; margin-top:0; margin-left:3px;} table.pList td.links {font-size:0.9em; width:10em;} table.pList td.pOptns {width:14em; _width:14.2em; text-align:right; padding-right:0;} table.pList td.pOptns.sm {width:105px;} table.pList td.pRte {width:180px;} table.pList td.pOptns td {text-align:left;} table.pList select {font-size:inherit;} table.pList h3, table.pList h4 {font-size:1.1em; margin-top:0 !important;} table.pList.cmpct h3, table.pList.cmpct h4 {font-size:1em; margin-top:0 !important;} table.pList td.tn {width:85px} table.iyrPlist { width:596px !important; margin-left:-12px !important;border-top:none !important; } .iyrBrdr { border-top:solid 1px #CCCCCC; border-bottom:none !important; } table.cart {border-bottom:solid 3px #FFFFFF; width:100%; margin:8px 0 0 0;} table.cart table {width:100%;} .bigBttm table.cart {border-bottom:solid 3px #CCCCCC;} table.cart td {padding: 0px 3px;} table.cart th {padding: 0px 3px; } table.cart td td {padding: 0; border-bottom:none 0} table.cart td.c1 {padding-left: 0; width:10%} table.cart td.description {} table.cart td.data {width:15% !important;} table.cart td.links {padding-right: 0px; width:110px; text-align:right} table.cart h4 {font-size:1.1em; margin-top:0 !important;} table.cart h4 a {text-decoration:underline} table.cart td.tn {width:85px} table.cart tr.append td {vertical-align:middle; padding: 3px 0; border-top:dashed 1px #CCCCCC !important; border-bottom:dashed 1px #CCCCCC !important} table.cartTotal {align:right; margin:0 0 5px auto;} table.cartTotal tr.subTotal td {font-size:1.09em; border-top:none 0 !important; } table.cartTotal tr.subTotal th {border-top:none 0 !important; } table.cartTotal td, table.cartTotal th {padding: 6px 0 6px 10px; text-align:right; border-top:none 0 !important; border-bottom:solid 1px #CCCCCC !important;} .greyBrdr {border:solid 1px #CCCCCC;} table.sizePop {width:564px;table-layout:fixed;word-wrap:break-word;} table.sizePop .lbl1 {padding:5px 0 6px 12px; font-size:1.09em; font-weight:bold;} table.sizePop .lbl2 {padding:14px 0 14px 12px; font-size:1.00em; font-weight:bold;} td.sizeCell {width:92px !important; padding-left:8px; padding-bottom:15px; font-size:1.00em !important; font-weight:normal; line-height:120% !important;} td.sizecell ul li a {font-size:1.00em !important; font-weight:normal; line-height:120% !important;} p a.sizeLink {font-size:1.09em;} /**************************************************************/ /* if the previous version is too set, you can ignore this. this is a new way of building it, allowing for wrapped xml type data prints /* messages */ .message div {border:2px solid #FF9933; padding: 8px 20px 9px 47px; font-size: 1.09em; font-weight:bold; margin:0 0 0.4em 0 !important; background: #FFFFFF url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-message-attention.gif) no-repeat 26px 9px;} .message div div {border:0 none; padding: 0; font-size: 100%; font-weight:normal; margin:0; background: transparent none;} .message div h3 {color: #FF9933; font-size: 1.35em; font-weight:bold; margin:0 0 5px 0 !important; padding:0 !important;} .message h4 {border-top:solid 1px #CCCCCC; margin: 1.5em 0 1em 0; padding-top: 1em;} .message div ul.actions {margin:1em 0 1em 0; padding:0} .message div ul.actions li {list-style-type:none; margin-bottom:1em;} .message div.mError {color: #CC0000; background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-message-error.gif); border-color:#CC0000;} .message div.mError h3 {color: #CC0000;} .message div.mSuccess {background-image:url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-message-success.gif); border-color:#128300;} .message div.mSuccess h3 {color: #128300;} /**************************************************************/ /* apundit@ - Added for the promotions banner in the sofa pages /* msg */ .msg div {border:2px solid #CC0000; padding: 5px 5px 5px 5px; font-size: 1.1em; font-weight:bold; margin:0 0 0.4em 0 !important; background: #FFFFFF;} .msg div.mPromotion {color: #CC0000; border-color:#CC0000;} .furnituremsg div { width:280px;border:2px solid #CC0000; padding: 5px 0 0 0;font-size: 1.1em; margin:0 0 0 0 !important; background: #FFFFFF;} .furnituremsg div.mfurniturePromotion {color: #CC0000; border-color:#CC0000;} /* 1 line forms -search, signups etc - should be wrapped in this. dark gradient background, white text. */ .formStrip {clear:both; color: black; /* background-color:#F1F1F1; background-color:#EFF8DC;*/ border:solid 1px #000000; padding:0.4em; margin-bottom:1em} div.formStrip input {font-size:1.14em;} div.formStrip select {margin-left:0.2em; font-size:1.14em;} div.formStrip label {font-weight: bold; vertical-align:middle} div.formStrip form {display:inline; } .formStrip2 {background-color:#eeeeee; border:solid 1px #CCCCCC; padding:6px; margin-bottom:1em} div.formStrip2 label {vertical-align:middle !important;} .oneClikBox { padding:3px 3px 5px 3px !important;} .dpBuyBox { padding-left:6px; margin-top:5px !important;} .dpSignInText {margin:10px 0;} .dpCustomizeBox {padding-left:10px} /* Edited by chandar@ - changed border size to 1*/ .formBrdr {clear:both; border: 1px solid #999999; background-color:#FFFFFF; padding:11px; margin-bottom:1em} /* chandar@ */ .formBrdr table {width:100%; _width:95% !important; margin:auto} .formBrdr table td, .formBrdr table th {padding:0.2em} /* --- Added by masih@ --------- */ .wlformBrdr {clear:both; border: 2px solid #999999; background-color:#FFFFFF; padding:11px; margin-bottom:1em} .wlformBrdr table {width:100%; _width:100% !important; margin:auto} .wlformBrdr table td, .wlformBrdr table th {padding:0.2em} /* --- Do not change the above --- */ /* Added by kristas@ - table for Your Account pages */ .yaformBrdr {clear:both; border: 1px solid #CCCCCC; background-color:#FFFFFF; padding:11px;} .yaformBrdr table {width:100%; _width:95% !important; margin:auto} .yaformBrdr table td, .formBrdr table th {padding:0.2em} /* use for ordering area of product detail widgets */ div.options {margin-left:10px; text-align:left} div.options div.selects{margin-left:-10px} div.options div.pb {} div.options div.pb p.or {margin:-0.2em 0 0.1em 0 !important; font-size:1.2em; text-align:center; font-weight:bold} div.options div.pb .oneClick {width:145px; margin-left:-3px;} div.options div.pb .oneClick .item {padding:3px; width:145px; background-color:#f1f1f1; border:solid 1px #cccccc} div.options div.pb .oneClick p {margin:0em 0 0.2em 0} .options .links ul {margin:0 !important; margin-bottom:-0.4em !important} .options .links li {list-style:none outside none !important; list-style-type:none; margin:0 0 0.4em 0; padding:0} /* if links have 2 cols in a table */ .options .links table {width:100%} .options .links table td.c1 {padding-right:9px; width:45%;} .options .links table td.c2 {} .options .links table td.c2 ul {padding-left:9px; border-left:solid 1px #CCCCCC} /* use for when the options do not feature within a detail layout, but need to be in the same position */ div.orphan {margin-left:26em;} div.blockRight {text-align:right;} div.blockRight div.options {width:16.5em; margin:0 0 1.5em auto;} div.blockRight.alt div.options {width:17em;} /* display on detail page */ table.pDetail {left:0px; top:-3px; margin: 0 -2px 0 0; width:100%; position:relative; z-index:auto} .pDetail .c1 {width:240px; } /**** CHANGED BY chandar@. PLS CONFIRM BEFORE DELETING OR EDITING ***/ .pDetail .c2 {padding-right:9px; padding-left:9px; width:280px !important;} /** chandar@ **/ /**** CREATED BY raah@. product title on complete the look page PLS CONFIRM BEFORE DELETING OR EDITING ***/ .pDetail .ptitle {margin: -2px 0 7px 0 !important; font-size:1.09em; font-weight:bold; clear:both;} /** raah@ **/ /**** CHANGED BY chandar@. PLS CONFIRM BEFORE DELETING OR EDITING ***/ div.altViews {font-size:1.09em; font-weight:bold; font-color:#333333; margin-top:6px;} div.altViews a {text-decoration:none} div.altViews img {border:none 0px;margin-right:6px; vertical-align:middle;} .complete-look {font-size:1.00em;font-weight:bold; font-color:#333333; margin-top:6px;} .complete-look a {text-decoration:none} .complete-look img {border:none 0px;margin-right:6px; vertical-align:middle;} /** chandar@ **/ .pDetail div.swatches {margin-top:2em} .pDetail div.swatches .instructions {font-size:1.1em; font-weight:bold; margin:0} .pDetail div.swatches .samples {/* open issue - is this handled by scene7 in flash? */} .pDetail .pBanner {margin-bottom:9px !important} .pDetail .price {margin-top:-0.5em; font-weight:normal; font-size:14px;} /* use for top details, underneath the title */ .pDetail .range .price {font-size:1.4em;} .pDetail .colPrice .price {font-size:1.09em;} /* use for top details, underneath the title */ /* minidetail */ .compact .pDetail {margin:6px 0} .compact .pDetail .price {margin-top:0;} .compact .pDetail .c1 {width:184px} .compact .pDetail .c2 {padding-left:9px;} .compact .pDetail .c3 {padding-left:9px; width:15.1em; min-width:177px} .compact .pDetail div.altViews {font-size:1em; margin-top:0.8em} .prm {border: solid 1px #ACC174; padding:5px 1em 0 12px; margin-left:10px;margin-top:20px;} .prm p, .prm div {font-size:1.00em; font-weight:normal; line-height:120%;} .prm p .small {font-size:0.7em !important; vertical-align:middle; display:inline-table} .prm ul {margin:0} .prm li {list-style:none outside none; list-style-type:none; margin:0 0 0.7em 0; padding:0} .prm .icon {margin-left:-35px; margin-top:-15px;padding-left:12px; position:absolute; z-index:auto} .cmpLook {margin:1.2em 0 14px -5px; font-size:1.1em; font-weight:bold} .cmpLook * {vertical-align:middle} .cmpLook .pImg {margin:0 5px} .cmpLook a {text-decoration:none;} .cmpLook a:hover {text-decoration:underline;} .cmpLookHead {font-size:1.55em;font-weight:bold;color:#444444;} .cmpLookSubHead {font-size:1.09em;font-weight:bold;color:#444444;} .sggst {margin:0.8em 0 14px 0; font-size:1.1em; font-weight:bold} .sggst table {width:100%} .sggst td {padding-right:55px; width:25%} .sggst a {text-decoration:none;} .sggst a:hover {text-decoration:underline;} table.frame, div.frame {border-collapse: collapse; border: solid 1px #999999; border-bottom-width:6px; width:100%; margin:0 0 2em 0 !important; _margin: 0 0 1em !important; } div.frame {padding:6px; width:auto} table.frame th { padding:5px 5px; background-color:#efefef; color:#333333;border-bottom:solid 1px #999999; } table.frame th.alt {background-color:#dedede; } /* alts used for quickorder */ table.frame th.alt2 {background-color:#006599; color:#FFFFFF !important } table.frame th.alt3 {background-color:#000000; color:#FFFFFF !important } table.frame th.alt2 *, table.frame th.alt3 * {color:#FFFFFF !important } .simpleFrame table.frame, .simpleFrame div.frame {border-bottom-width:1px;} /* ---------------- */ table.frame th h2, table.frame th h3, table.frame th h4 {margin:0} table.frame td {padding:5px 5px; color:#000000; border-bottom:solid 1px #999999;} /* stop inheritance */ table.frame table tr th, div.frame table tr th {border:none 0; background-color:transparent} table.frame table tr td, div.frame table tr td {border:none 0; background-color:transparent} table.frame p{margin-bottom:3px;} .faq {margin:2em 0 2em 0} .faq h2 {} .faq h4 {margin-top:1em} /* more page furniture */ div.paginateBar {margin-top:9px;} div.paginateBar table {width:100%;} div.paginateBar table td {text-align:right;} div.paginateBar table td .pNo a, div.paginateBar table td .pNo .sel {margin:0 0.2em} div.paginateBar table td.links {text-align:left;} div.paginateBar table td.c1 {text-align:left; font-size:1.09em} div.paginateBar table td.c2 {text-align:right; font-size:1.09em} div.paginateBar table td.c2 a {text-decoration:none} div.sortBar {background-color:#efefef; border:solid 1px #cccccc; padding:4px; margin-bottom:9px; min-height:1.6em; _height:1.6em} div.sortBar .links {margin-top: 0.3em; float:right;} div.sortBar input, div.sortBar select {font-size:inherit;_font-size:0.95em !important; vertical-align:middle} div.sortBar form {margin:0px 0 -6px 0; _margin:0px 0 -6px 0; padding:0} div.sortBar div.nav {float:right; padding-top:3px; _padding-top:0px;} div.sortBar div.nav a:hover{background-color:#f1f1f1; border:solid 1px #999999;} /* dynamically generated content wrap... OPEN ISSUE */ div#optnMs {width: 10em; position:absolute; z-index:auto; margin-left:14.3em; _margin-left:13.5em; margin-top:1em;} .pImg img, img.pImg {border:solid 1px #CCCCCC} .pImg img.alt, img.pImg.alt {border:solid 1px #FFFFFF} .pImg a:hover img, a:hover img.pImg {border:solid 1px #666666;} #collectionTabs {width:572px;} #collectionTabs .swatchColumn {width:186px} .tabbed .menu ul {margin:0; padding:0; _border-top:solid 1px #FFFFFF;} /** Changed by chandar@ and erictrue@. Please dont edit/remove **/ .tabbed .menu li {position:relative; z-index:auto; top:1px; float:left; display:block; width:139px; border-left: solid 1px #666666; font-weight:bold; vertical-align:middle; padding:0; margin:0 3px 0 0; list-style:none outside none; list-style-type:none; background:#666666 url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/tabbed-bg.gif) no-repeat top right} /** chandar@ **/ .tabbed .menu li a {text-align:center; display:block; _width:100%; line-height:2.2em; font-size:1.2em; color:#FFFFFF !important; text-align:center;} .tabbed .menu li.sel {border-bottom-color: #FFFFFF; background:#FFFFFF url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/tabbed-bg-sel.gif) no-repeat top right} .tabbed .menu li.sel a {color:#333333 !important;} /** Changed by chandar@. Please dont edit/remove **/ .tabbed .page {background-color:#FFFFFF; clear:both; border:solid 1px #999999; padding: 5px 9px;} /** chandar@ **/ /* lMenu menu variations */ .tabbed .page table.samples {width:100%;} .tabbed .page table td {padding:0.3em 0.3em 0.6em 0.3em;} .tabbed .page table td p {margin-bottom:0.5em} .tabbed .page table td .item {margin-left:35px;} .tabbed .page table td .item a {text-decoration:none} .tabbed .page table td .item img {float:left;margin-left:-35px;} .tabbed .page .instructions {font-size:1.2em; font-weight:bold; margin:0 0 0 3px;} .tabbed .page .instructionsfurniture {font-size:1.2em; font-weight:bold; padding:0; margin:8px 0 0 6px;} .tabbed .page .instructionsfurniture1 {font-size:1.2em; font-weight:bold; padding:0; margin:0 0 7px 4px;} .tabbed .page .instructionsfurniture2 {font-size:1.2em; font-weight:bold; margin-bottom:-1px;} .tabbed .page #tableColours td {padding:0 0 0 8px} .tabbed .page .title, .tabbed .page td.title {font-size:1.2em;padding-left:3px;} .tabbed .page .s2a table td {width:50%; min-height:100px; height:120px;} .tabbed .page .s2a table td .item {margin-left:95px;} .tabbed .page .s2a table td .item img {float:left; margin-left:-95px;} #lMenu .menu .mVar1 {font-weight:500;} #lMenu .menu .mVar2 {margin-left:15px !important;} #lMenu .menu .mVar2 ul li {margin-bottom:9px !important;} #lMenu div.callout {margin:0 5px 6px 5px !important; min-height:none !important; height:auto !important;} #lMenu div.callout p {margin:0 !important; padding-top:0.4em !important; padding-bottom:0.2em;} #lMenu div.callout div.item {height: auto !important; min-height:0 !important; padding: 0 6px 6px 6px !important;} #lMenu div.callout h3 {border-bottom:solid 1px #000000;} #lMenu div.callout h3, #lMenu div.callout h4 {margin:-1px -1px 0 -1px !important} #rMenu div.pList {text-align:left;} #rMenu div.pList div.pImg {text-align:center;} #rMenu div.pList p, #rMenu div.pList h4 {padding-left:0;padding-right:0;} #rMenu div.pList .item {padding:0 11px; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/hr-dotted.gif) repeat-x 50% bottom; margin:1em 0; } #rMenu ul.onward li {padding-left:9px !important;} #rMenu ul.onward li a {text-decoration:underline} a.help{cursor:help} .rBlock h5 {font-weight:normal; padding-left: 12px; background: transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-expand.gif) no-repeat left 3px;} .rBlock h5 a {text-decoration:none} .rBlock.min h5 {background-image: url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-expand.gif)} .rBlock.max h5 {background-image: url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-contract.gif)} .rBlock .container {padding-left:12px;} .rBlock.min .container {display:none} .rBlock.max .containser {display:block} div.cartStrip{font-weight:bold; margin:0 -9px; position:relative; z-index:auto; padding:4px 11px; background-color:#eeeeee; border-top:solid 1px #CCCCCC; border-bottom:solid 1px #CCCCCC} div.cartStrip h2{margin:0; padding:0;} .huc {border: solid 1px #666666; background-color:#CCCCCC; border:solid 1px #666666; padding:2px !important; margin-bottom:1em} .huc .hucInner {border: solid 1px #666666; background-color:#FFFFFF; border:solid 1px #666666; padding:0.4em;} .huc h3 {font-size: 1.4em; text-align:center} .huc .item {text-align:center} .huc .item h4 {font-weight:normal} .huc .item h4 a {} .hucHrPos {_position:relative; _left:-12px; _margin-right:-12px !important; margin-left:-12px !important; _margin-left:0px !important;} /* button test - designed to turn off "buttonness" and look like a link. NOTE - hover behavior is not available for IE */ input.linkBtn, input.linkBtn:active{border:none 0; display:inline !important; text-decoration:underline; background:transparent none; cursor:pointer; cursor:hand; font-size:1.00em; padding:0 !important; margin:0 !important; margin-left:-0.2em !important; _margin-left:-1.4em !important; position:relative; z-index:auto; font-family:Arial, Helvetica, sans-serif; letter-spacing:0} input.linkBtn:hover{color:#666666} input.linkBtn:hover{color:#666666} /* use for items that need to compensate for default bottom padding of content area */ .btmFold {margin-bottom:-4em; _margin-bottom:-6em; position:relative; z-index:auto} .tpFold {position:relative; z-index:auto} /* wizard in my ms */ .wizard {border: solid 1px #666666; background-color:#CCCCCC; border:solid 1px #666666; padding:4px !important; margin-bottom:1em} .wizard .wizardInner {font-size:1.27em; border: solid 1px #666666; background-color:#FFFFFF; border:solid 1px #666666; padding:0.4em;} .wizard .wizardInner table.w100 {_width:96% !important;} .wizard .wizardInner td {font-size:1.09em;} .wizard .wizardInner td p {margin-bottom:0.1em; vertical-align:middle} .wizard .wizardInner td .sel {color:#333333 !important; background-color:#f1f1f1 !important; border:solid 1px #CCCCCC; font-weight:normal } .rating h6 {font-weight:normal; display:block; padding-left:18px; font-size:1.0em; background:transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/bullet-starBoxed.gif ) no-repeat 0 50%} .rating h6 a {text-decoration:none; } .rating h6 a span{text-decoration:none !important} .rating .grid{font-size:1.1em; } .rating .grid *{vertical-align:middle} .rating .grid img{vertical-align:middle} .rating .grid strong{ padding:1px; } .rating .grid a.number{ text-decoration:none; position:relative; border:solid 1px #FFFFFF; z-index:auto; vertical-align:middle; padding:0px 4px; margin-left:-3px; display:inline-block; } .rating .grid a.number:hover{ text-decoration:none !important; border:solid 1px #666666 !important; background-color:#f1f1f1; color:#000000; } .rating .grid .sel a.number{ background-color:#f1f1f1; border:solid 1px #CCCCCC; } .rating .grid .sel{ vertical-align:top; padding-top:1px; } .rating.max h6 {font-weight:bold;} .rating.max h6 a, .rating.max h6 a:hover{text-decoration:none !important} .pack3 .rating.max h6 {font-weight:bold; font-size:1.0em;} .pack3 .rating.max h6 a, .rating.max h6 a:hover{text-decoration:none !important} .pack3 .rating {margin-left:-3px; padding:3px; position:relative; border:solid 1px #FFFFFF; z-index:auto; background-color:#FFFFFF; /* cursor:default; */} .pack3 .rating.max{position:absolute; z-index:400; border:solid 1px #666666} .pack3 .rating.min .container{display:none; } .pack3 .rating.max .container{display:block; width:20em; padding-bottom:1em} .pack3 .rating.min h6{width:auto} .pack3 .rating.min h6 img.close {display:none} .pack3 .rating.max h6 img.close {display:inline; position:absolute; z-index:auto; right:0.5em} .pack3 .rating.min .swatchClose{width:auto;} .pack3 .rating.min .swatchClose img.close {display:none} .pack3 .rating.max .swatchClose img.close {display:inline; position:absolute; z-index:auto; right:0.5em} /* cheat to reuse classes on improve recommendations page */ .pList .exp {width: 22em} /* ------------- */ #lMenu .categories { position:relative; z-index:auto; } #lMenu div.categories.max{_position:inherit; _z-index:auto; _border:none 0px} #lMenu div.categories.min h4 a {padding-left:11px; background:transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-expand.gif) no-repeat 0 50%} #lMenu div.categories.max h4 a {padding-left:11px; background:transparent url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/icon-contract.gif) no-repeat 0 50%} #lMenu div.categories.min ul{display:none;} #lMenu div.categories.max ul{display:inline} table.clloutGrid{width:100%} table.clloutGrid td{padding:10px 0} table.clloutGrid td.c2{padding-left:10px} /* Classes added for personal shopper */ div.bgImage {margin:0 0 0 0 !important; clear:both; } div.bgImage h4 {color:#FFFFFF; margin:0 auto !important; padding:0 0 0 0 !important; text-align:left !important; background: #000000 url(http://www.marksandspencer.com/static-www.marksandspencer.com/css/images/ps-bg-title.jpg) repeat-x 50% 50%;} /** Commented by chandar@ .msgFloat{background-color:white !important; padding:4px; border: solid 1px #333333; z-index:400; width:130px; position:absolute;} **/ /* *************************************************************************** */ /* 17 Jun 06 Added by murthy@ These classes are requirred for My M&S popover. */ .n2Pop .pack3{width:auto !important; margin-top:0.6em;} .n2Pop .pack3 td{padding:0} .n2Pop .pack3 td{padding:0; width:9.1em} .n2Pop .pack3 td .item{padding:0 11px 0 0; font-size:0.8em} /* 17 Jun 06 End Change murthy@ */ /* Extra class required for "your account" pages */ .greyBottomBorder {border-bottom: #666666 1px solid;} .catHeader {margin:0 0 9px 0; padding:0; font-size:1.55em; font-color:#333333; font-weight:bold; clear:both;line-height:1.2em;} .catHeader .small, .catHeader .small a {font-weight:normal;} .catHeader a {text-decoration:none;} .catHeader .small {font-size:82%;} .catH2 {color:#333333; margin: 11px 0 5px 0; padding:0 !important; font-size:1.27em; font-weight:bold;} .catH2Alt {color:#333333; margin: -1px 0 5px 0; padding:0 !important; font-size:1.27em; font-weight:bold;} .catH2 img, .catH2Alt img {border:none 0px !important;} .catH2Alt a, .catH2 a {text-decoration:none;} .dpHeader {margin: 2px 0 15px 0 !important; font-size:1.27em; color:#444444; font-weight:bold; clear:both;} .boxSubHeader {font-size:1.09em;} /*Product widgets headers style */ .pwH2 {color:#333333; margin: -3px 0 5px 0 !important; font-size:1.27em; font-weight:bold;} /* Flower page add a little extra block */ table.addXtra td {padding: 6px 0 9px 0; font-size:1.09em; font-weight:bold;} .addXtra .small, .addXtra .small f {font-size:92% !important; font-weight:normal; text-decoration:none;}