/* ----------------------------------------------- Next core.css (theme and common components) Author:Steven Tew Copyright 2007 Next Retail Ltd. ----------------------------------------------- ===== CONTENTS ===== 1:header modules :quicklinks navigation :search form :checkout box :logged in message :main site navigation - top level :main site navigation - sub level :secure checkout bar 2:footer modules 3:grid styles 4:general rules :data tables :miscellaneous rules :about Next page 6:IE hacks :min-height workaround ==================== ! Give all modules a margin bottom so they can be easily moved amongst the page columns */ /* ______________________________________________1:header modules */ a#logo { float:left; } /* =quicklinks navigation ------------------------------------ */ div.quicklinks{ float:right; margin:9px 20px 0 0; width: 500px; } ul#quicklinks { font-size:100%; float:right; line-height:1.1; margin: 0; text-transform: capitalize;} ul#quicklinks li a:link, ul#quicklinks li a:visited, ul#quicklinks li a:hover, ul#quicklinks li a:active { border-right:1px solid #333333; padding:0 5px; color: #fff; } ul#quicklinks li.last a:link, ul#quicklinks li.last a:visited, ul#quicklinks li.last a:hover, ul#quicklinks li.last a:active { border-right: none;} /* =search form ------------------------------------ */ #hd { width:964px; margin-bottom:0px; height: 90px; background-color: #000;} #hd #search, .search { float:right; margin:16px 9px 0 5px; height:26px;} #hd input.searchBox { border:1px solid #000; height:1em; margin:3px 0 0 0; padding:2px 2px 2px 0; width:102px; vertical-align:top } #hd .ccModeAbandonOrder { position: absolute; float:left; background-color:#22a514; width:120px; left: auto; right: auto; margin-left: 250px; top:10px; padding:5px; height:33px;} #hd .ccModeAbandonOrder a:link, div#hd .ccModeAbandonOrder a:visited { color: #fff; text-decoration: underline;} #hd .ccModeContainer { /*float:left; position:absolute;*/ } #hd .ccModeContainer div { font-weight:bold; text-align:center; text-transform:uppercase; } #hd .ccModeContainer div a { text-decoration:underline; font-weight:normal; text-transform: lowercase; } input.submit { background:url(http://cdn.next.co.uk/vstore/ni/common/site/btn-hd-search.gif) no-repeat top left; border:none; font-size:90.91% /* 10px */; height:26px; line-height:27px; color:#FFF; padding:0 0 1px 20px; text-align:left; text-transform:uppercase; width:75px; cursor:pointer;} input.submit { height:27px; padding-bottom:0 } #hd div.search { float: right; margin:9px 15px 0 5px; *margin:9px 8px 0 5px; text-align: right;} #hd div.search input.submit { background:url("http://cdn.next.co.uk/vstore/ni/common/search/btn-hd-search.gif") no-repeat scroll left bottom transparent; border:medium none; color:#FFFFFF; cursor:pointer; font-size:100%; height:22px; line-height:14px; padding:0 0 3px 6px; text-align:center; text-transform:capitalize; width:50px; margin-left: 5px;} #hd div.search input { border:1px solid #CECECE; height:1.4em; margin:0; padding:2px 2px 2px 0; vertical-align:middle; width:220px; } /* =checkout box ------------------------------------ */ div#chkout { float:right; height:53px; font-size:109% /* 12px */; line-height:16px; margin: 0 0 3px; padding-top:7px; text-align:left; width:249px } div#chkout div { height: 35px; margin-left: 88px; text-align: left; } div#chkout strong { display:block; font-weight:bold; text-transform:uppercase; } div#chkout span { font-size: 10px; padding-left: 4px; } div#chkout a.bag:link, div#chkout a.bag:visited{ color: #7fb8b1; text-decoration: none; text-transform: uppercase; font-size: 10px; font-weight:bold; display: block;} div#chkout a.bag:hover, div#chkout a.bag:active{ color: #7fb8b1; text-decoration: underline;} /* =logged in message ------------------------------------ */ div#loggedin { display: inline; float: left; font-weight: bold; margin: 24px 0 0 69px; text-align: right; width: 400px; } /* =main site navigation - top level ------------------------------------ */ #mn { font-size: 120%; /* 10px */; font-weight: bold; height:34px; z-index:100; top: 56px; position: absolute; width: 964px; left: auto; right: auto; margin-left: auto !important; *margin-left: -5px;} body#next-co-uk #mn { background:url(/Themes/img/header/menu/default/bg-mn-bar.jpg) repeat-x left 4px; } body#next-co-uk-home #mn { background:url(/Themes/img/header/menu/home/bg-mn-bar.jpg) repeat-x left 6px; } body#next-co-uk-preview #mn { background:url(/Themes/img/header/menu/preview/bg-mn-bar.jpg) repeat-x left 6px; } body#next-co-uk-sale #mn { background:url(/Themes/img/header/menu/sale/2010/ms-ss/bg-mn-bar.gif) repeat-x left 6px; } body#next-co-uk-vip #mn { background:url(/Themes/img/header/menu/vip/2010/ms-ss/bg-mn-bar.gif) repeat-x left 4px; } #mn ul { position:relative; height: 0; he\ight: auto; zoom: 1;} #mn ul li { line-height:1.1; z-index:auto } #mn #tab1 { z-index:20 } #mn #tab2 { z-index:19 } #mn #tab3 { z-index:18 } #mn #tab4 { z-index:17 } #mn #tab5 { z-index:16 } #mn #tab6 { z-index:15 } #mn #tab7 { z-index:14 } #mn #tab8 { z-index:13 } #mn #tab9 { z-index:12; white-space:nowrap} #mn #tab10 { z-index:11 } #mn #tab11 { z-index:10 } #mn #tab12 { z-index:9 } #mn #tab13 { z-index:8 } #mn #tab14 { z-index:7 } #mn #tab15 { z-index:6 } /* link styles */ #mn ul li a { background:url(/Themes/img/header/menu/default/bg-mn-bardivider.gif) no-repeat right 0px; color: #fff; display:block; height:22px; margin-left:0px; padding:12px 16px 0 16px; width:.1em; /* to fix IE issue */ } #mn > ul li a { width:auto } #mn ul li:hover a, #mn ul li a:hover, #mn ul li a:active { background:transparent url(/Themes/img/header/menu/default/bg-mn-barhover.gif) no-repeat right top; text-decoration:none; color: #000;} #mn ul li a:link span { top: -500em;} #mn ul li:hover a span, #mn ul li a:hover span{ background: transparent url(/Themes/img/header/menu/default/bg-mn-lfbarhover.gif) left top no-repeat; position: absolute; width: 7px; height: 33px; left: auto; top: 0px; margin-left: -16px; } body#next-co-uk-preview #mn ul li a:hover, body#next-co-uk-preview #mn ul li a:active { background:transparent url(/Themes/img/header/menu/preview/bg-mn-barhover.gif) no-repeat right top; text-decoration:none; color: #000;} body#next-co-uk-preview #mn ul li a:link span { top: -500em;} body#next-co-uk-preview #mn ul li:hover a span, body#next-co-uk-preview #mn ul li a:hover span { background: transparent url(/Themes/img/header/menu/preview/bg-mn-lfbarhover.gif) left top no-repeat; position: absolute; width: 7px; height: 33px; left: auto; top: 0px; margin-left: -20px;} body#next-co-uk-home #mn ul li a:hover, body#next-co-uk-home #mn ul li a:active { background:transparent url(/Themes/img/header/menu/home/bg-mn-barhover.gif) no-repeat right top; text-decoration:none; color: #000;} body#next-co-uk-home #mn ul li a:link span { top: -500em;} body#next-co-uk-home #mn ul li:hover a span, body#next-co-uk-home #mn ul li a:hover span { background: transparent url(/Themes/img/header/menu/home/bg-mn-lfbarhover.gif) left top no-repeat; position: absolute; width: 7px; height: 33px; left: auto; top: 0px; margin-left: -20px;} #mn ul li.promote a { color: #2c96cc; text-transform:uppercase } #mn ul li.summer a { color: #6ba6ef; text-transform:uppercase } #mn ul li.autumn a { color: #e11432; text-transform:uppercase } #mn ul li.spring a { color: yellow; text-transform:uppercase } /* =main site navigation - sub level ------------------------------------ */ /* =dropdown styling ------------------------------------ */ /* table takes no part in the layout - required for IE to work */ #mn table { position:absolute; top:0; left:0; border-collapse:collapse } #mn div.wrapper { background:transparent url(/Themes/img/header/menu/dropshadows/bg-964-mn-bottomshadow.png) no-repeat 3px bottom !important; background:transparent url(/Themes/img/header/menu/dropshadows/trans.gif); /* IE will not show the png */ padding-bottom:12px; margin-top: 9px; margin-left: -9px;} #mn div.shadow { background:transparent url(/Themes/img/header/menu/dropshadows/bg-mn-rt-sideshadow.png) repeat-y right !important; background:transparent; padding-right: 9px; } #mn div.leftshadow { background:transparent url(/Themes/img/header/menu/dropshadows/bg-mn-lf-sideshadow.png) repeat-y left !important; background:transparent; padding-left: 9px;} #mn div.container { color:#000; font-weight:bold; border: 0px !important; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;} #mn DIV.wrapper.colWidthOne DIV.container { background: #fff url(/Themes/img/header/menu/default/bg-mn-190-dropbg.gif) no-repeat top left;} #mn DIV.wrapper.colWidthTwo DIV.container { background: #fff url(/Themes/img/header/menu/default/bg-mn-365-dropbg.gif) no-repeat top left;} #mn DIV.wrapper.colWidthThree DIV.container { background: #fff url(/Themes/img/header/menu/default/bg-mn-510-dropbg.gif) no-repeat top left;} #mn DIV.wrapper.colWidthFour DIV.container { background: #fff url(/Themes/img/header/menu/default/bg-mn-670-dropbg.gif) no-repeat top left;} #mn DIV.wrapper.colWidthFive DIV.container { background: #fff url(/Themes/img/header/menu/default/bg-mn-807-dropbg.gif) no-repeat top left;} #mn DIV.wrapper.colWidthSix DIV.container { background: #fff url(/Themes/img/header/menu/default/bg-mn-964-dropbg.gif) no-repeat top left;} #mn div.inner { } #mn div.drop { margin: 15px 15px auto auto;} #mn div.drop.first { margin: 15px 15px; width: 160px; display:inline;} #mn div.drop.last { margin: 15px 15px 0px 0px; } #mn div.drop.colspan1.last { margin: 15px 0px 0px 0px;} #mn div.drop ul li { display: block;} #mn div.drop ul li a { width: inherit !important; width: 130px; display:inline;} #mn div.drop { float:left; padding-bottom:11px; width:300px; font-size: 80%;} #mn div.drop ul { height:auto; width: 150px; float: left; } #mn div.drop li { float:none; height:auto; text-transform:capitalize; font-weight: normal; } #mn div.drop li ul { } /* links */ #mn div.drop a, #mn div.drop a:link, #mn div.drop a:visited, #mn div.drop a:hover, #mn div.drop a:active { background:none; color:#000; float:none; height:auto; line-height:19px; margin:0; padding:0 11px 0 0; margin-left: 11px; display: block; } #mn div.drop a:hover {text-decoration:underline; color:#000;} /* hide the sub level and give positon absolute so it takes up no room */ #mn ul iframe { border:none; display:block; height:1px; left:-1px; position:absolute; top:-500em; width:1px; z-index:0; /* iframe covers windowed componenets in IE - must be positioned before wrapper */ } #mn ul div.wrapper { height:1px; left:-1px; overflow:hidden; position:absolute; top:-500em; width:1px } /* show sub level when hover on top level list OR link */ #mn ul li a:hover iframe { top:34px; left: 0; } #mn ul li a:hover div.wrapper, #mn ul li:hover div.wrapper { top:24px; left:0; height:auto; width: auto; padding-right: 19px; } /* =dropdown styling for New Arrivals promo links ------------------------------------ */ #mn div.drop a.promote, #mn div.drop a.promote:link, #mn div.drop a.promote:visited, #mn div.drop a.promote:active, #mn div.drop a.promote:hover { color:#3f8279; } #mn div.drop a.green, #mn div.drop a.green:link, #mn div.drop a.green:visited, #mn div.drop a.green:active, #mn div.drop a.green:hover { color:#3f8279; } #mn div.drop a.bold, #mn div.drop a.bold:link, #mn div.drop a.bold:visited, #mn div.drop a.bold:active, #mn div.drop a.bold:hover { font-weight:bold; } /* =dropdown styling for nested columns ------------------------------------ */ #mn div.drop.colspan1 { width: 160px;} #mn div.drop.colspan2 { width: 325px;} #mn div.drop.colspan3 { width: 459px;} #mn div.drop.colspan4 { width: 580px;} #mn div.drop.colspan5 { width: 800px;} #mn div.drop.colspan6 { width: 964px;} #mn DIV.wrapper.colWidthTwo div.drop.colspan1 { width: 155px;} #mn div.drop.colspan4 ul { width: 140px; *margin-left: 0px;} #mn div.drop.colspan4 ul li a:link, #mn div.drop.colspan4 ul li a:hover { padding: 0px 4px 0px 0px; } /* =override styling for dropdowns with one section ------------------------------------ */ #mn div.OneSection div.drop.colspan4 { width: 630px;} #mn div.OneSection div.drop.colspan4 ul { width: 150px;} #mn DIV.wrapper.colWidthThree div.drop.colspan2.last { width: 305px; margin: 15px 10px 0px 0px;} /* =dropdown title styling ------------------------------------ */ #mn div.drop strong { color:#FFF; display:block; line-height:18px; height: 19px; margin:0; padding-left:11px; padding-right:0px; position: relative; } #mn div.drop.styleideas strong { background:#3f8279 url(/Themes/img/header/menu/dropdowns/bg-drop-styleideas-left.gif) no-repeat left top; } #mn div.drop.searchby strong { background:#666 url(/Themes/img/header/menu/dropdowns/bg-drop-searchby-left.gif) no-repeat left top; } #mn div.drop.exclusives strong { color: #666; background:#e4e4e4 url(/Themes/img/header/menu/dropdowns/bg-drop-exclusives-left.gif) no-repeat left top; } #mn div.drop.styleideas strong span { background:#fff url(/Themes/img/header/menu/dropdowns/bg-drop-styleideas-right.gif) no-repeat right top; height: 19px; float: right; right: 0px; position: absolute; *margin-top: -3px !important; *margin-top: -18px;} #mn div.drop.searchby strong span { background:#fff url(/Themes/img/header/menu/dropdowns/bg-drop-searchby-right.gif) no-repeat right top; height: 19px; float: right; right: 0px; position: absolute; *margin-top: -3px !important; *margin-top: -18px;} #mn div.drop.exclusives strong span { background:#e4e4e4 url(/Themes/img/header/menu/dropdowns/bg-drop-exclusives-right.gif) no-repeat right top; height: 19px; float: right; right: 0px; position: absolute; *margin-top: -3px !important; *margin-top: -18px;} li.columnTitle { margin: 6px auto 1px 11px; float: left; background:transparent url(/Themes/img/header/menu/dropdowns/bg-drop-coltitle.gif) repeat-x left 9px; font-weight: bold !important;} li.columnTitle h3 { display: inline; background-color: #fff;} div.columnTitle { margin-left: 11px; float: left; height: 13px; margin-top: 6px; background:transparent url(/Themes/img/header/menu/dropdowns/bg-drop-coltitle.gif) repeat-x left 9px; } div.columnTitle h3 {display: inline; background-color: #fff; line-height: auto; } div.columnTitle.titleSpan1 { width: 120px; } div.columnTitle.titleSpan2 { width:280px; } div.columnTitle.titleSpan3 { width: 440px;} div.columnTitle.titleSpan4 { width: 600px;} div.columnTitle.titleSpan5 { width: 760px;} div.columnTitle.titleSpan6 { width: 920px;} li.columnDivider { margin: 0px 0px 0px 11px; color: #e2e2e2; } /* =ie6 overrides for dropdowns ------------------------------------ */ div. * #mn ul li div.styleideas strong span, * #mn ul a div.styleideas strong span { background:#fff url(/Themes/img/header/menu/dropdowns/bg-drop-styleideas-right.gif) no-repeat right top; height: 19px; width: 3px; *position: relative; right: 0px;} * #mn ul li div.inner div.styleideas strong span { background:#fff url(/Themes/img/header/menu/dropdowns/bg-drop-styleideas-right.gif) no-repeat right top; height: 19px; width: 3px; *position:absolute !important; *position: relative; right: 0px;} * #mn ul li:active div.drop.searchby strong span, * #mn ul a:hover div.drop.searchby strong span { background:#666 url(/Themes/img/header/menu/dropdowns/bg-drop-searchby-right.gif) no-repeat right top; height: 19px; width: 3px; *position: relative; right: 0px;} * #mn ul li:active div.drop.exclusives strong span, * #mn ul a:hover div.drop.exclusives strong span { background:#e4e4e4 url(/Themes/img/header/menu/dropdowns/bg-drop-exclusives-right.gif) no-repeat right top; height: 19px; width: 3px; *position: relative; right: 0px;} * #mn ul li:active div.drop div.columnTitle span, * #mn ul a:hover div.drop div.columnTitle span { padding-left: 15px; padding-right: 2px; height: auto; background: none; margin-bottom: -1px; position:relative; height: 0; he\ight: auto; zoom: 1; } * #mn ul a:link div.drop.searchby strong span, * #mn ul a:link div.drop.exclusives strong span{ right: -20px;} /* =development overides ------------------------------------ */ div#swfContainer { width:964px; overflow: hidden;} #newsletterSignup, #ft .ftr, #ft { width:964px;} a#logo { position: absolute; top: 0px; } /* =dropdown placement ------------------------------------ */ #mn DIV.wrapper.one, #mn DIV.wrapper.One { margin-left: -9px;} #mn DIV.wrapper.onehalf, #mn DIV.wrapper.OneHalf { margin-left: 63px;} #mn DIV.wrapper.two, #mn DIV.wrapper.Two { margin-left: 135px;} #mn DIV.wrapper.twohalf, #mn DIV.wrapper.TwoHalf { margin-left: 218px;} #mn DIV.wrapper.three, #mn DIV.wrapper.Three { margin-left: 300px;} #mn DIV.wrapper.threehalf, #mn DIV.wrapper.ThreeHalf { margin-left: 390px;} #mn DIV.wrapper.four, #mn DIV.wrapper.Four { margin-left: 480px;} #mn DIV.wrapper.fourhalf, #mn DIV.wrapper.FourHalf { margin-left: 560px;} #mn DIV.wrapper.five, #mn DIV.wrapper.Five { margin-left: 640px;} #mn DIV.wrapper.fivehalf, #mn DIV.wrapper.Fivehalf { margin-left: 715px;} /* =iframe placement ------------------------------------ */ #mn iframe.One, #mn iframe.one { margin-left: 0px;} #mn iframe.OneHalf, #mn iframe.onehalf { margin-left: 72px;} #mn iframe.two, #mn iframe.Two { margin-left: 144px; } #mn iframe.twohalf, #mn iframe.TwoHalf { margin-left: 227px;} #mn iframe.three, #mn iframe.Three { margin-left: 310px; } #mn iframe.threehalf, #mn iframe.ThreeHalf { margin-left: 395px; } #mn iframe.four, #mn iframe.Four { margin-left: 490px; } #mn iframe.fourhalf, #mn iframe.FourHalf { margin-left:560px; } #mn iframe.five, #mn iframe.Five { margin-left: 650px;} #mn iframe.fivehalf, #mn iframe.FiveHalf { margin-left: 724px;} /* =dropdown widths and shadows ------------------------------------ */ #mn DIV.wrapper.colWidthOne { width: 190px; background:transparent url(/Themes/img/header/menu/dropshadows/bg-190-mn-bottomshadow.png) no-repeat 0px bottom !important; background:transparent url(/Themes/img/header/menu/dropshadows/trans.gif); /* IE will not show the png */} #mn DIV.wrapper.colWidthOne, #mn DIV.wrapper.colWidthOne DIV.container { width: 190px; overflow: hidden; } #mn DIV.wrapper.colWidthTwo { background:transparent url(/Themes/img/header/menu/dropshadows/bg-365-mn-bottomshadow.png) no-repeat left bottom !important; background:transparent url(/Themes/img/header/menu/dropshadows/trans.gif); /* IE will not show the png */} #mn DIV.wrapper.colWidthTwo, #mn DIV.wrapper.colWidthTwo DIV.container { width: 360px; overflow: hidden;} #mn DIV.wrapper.colWidthThree { background:transparent url(/Themes/img/header/menu/dropshadows/bg-510-mn-bottomshadow.png) no-repeat left bottom !important; background:transparent url(/Themes/img/header/menu/dropshadows/trans.gif); /* IE will not show the png */} #mn DIV.wrapper.colWidthThree, #mn DIV.wrapper.colWidthThree DIV.container { width: 510px; overflow: hidden;} #mn DIV.wrapper.colWidthFour { background:transparent url(/Themes/img/header/menu/dropshadows/bg-670-mn-bottomshadow.png) no-repeat 0px bottom !important; background:transparent url(/Themes/img/header/menu/dropshadows/trans.gif); /* IE will not show the png */} #mn DIV.wrapper.colWidthFour, #mn DIV.wrapper.colWidthFour DIV.container{ width: 665px; overflow: hidden;} #mn DIV.wrapper.colWidthFive { background:transparent url(/Themes/img/header/menu/dropshadows/bg-807-mn-bottomshadow.png) no-repeat 0px bottom !important; background:transparent url(/Themes/img/header/menu/dropshadows/trans.gif); /* IE will not show the png */} #mn DIV.wrapper.colWidthFive, #mn DIV.wrapper.colWidthFive DIV.container { width: 790px; overflow: hidden;} #mn DIV.wrapper.colWidthSix, #mn DIV.wrapper.colWidthSix DIV.container { width: 963px; overflow: hidden; } #mn DIV.wrapper.colWidthOne div.shadow, #mn DIV.wrapper.colWidthOne div.leftshadow, #mn ul li:hover DIV.wrapper.colWidthOne { width: 190px;} #mn DIV.wrapper.colWidthTwo div.shadow, #mn DIV.wrapper.colWidthTwo div.leftshadow, #mn ul li:hover DIV.wrapper.colWidthTwo { width: 360px;} #mn DIV.wrapper.colWidthThree div.shadow, #mn DIV.wrapper.colWidthThree div.leftshadow, #mn ul li:hover DIV.wrapper.colWidthThree { width: 510px;} #mn DIV.wrapper.colWidthFour div.shadow, #mn DIV.wrapper.colWidthFour div.leftshadow, #mn ul li:hover DIV.wrapper.colWidthFour { width: 665px;} #mn DIV.wrapper.colWidthFive div.shadow, #mn DIV.wrapper.colWidthFive div.leftshadow, #mn ul li:hover DIV.wrapper.colWidthFive { width: 790px;} #mn DIV.wrapper.colWidthSix div.shadow, #mn DIV.wrapper.colWidthSix div.leftshadow, #mn ul li:hover DIV.wrapper.colWidthSix { width: 964px;} /* =secure checkout bar ------------------------------------ */ #mn h2#secure { background: url(http://www.next.co.uk/SECURE/images/general/padlock.gif) no-repeat 6px 0%; float: left; font-size: 110%; /*11px*/ font-weight: normal; line-height: 23px; padding-left: 25px; text-transform: lowercase; width: 120px; } #mn ul#steps { background:url(http://www.next.co.uk/SECURE/images/general/bg-step-divider.gif) no-repeat left bottom; float: right; font-size: 110%; /*11px*/ padding: 0 0 0 14px; } #mn ul#steps li { background:url(http://www.next.co.uk/SECURE/images/general/bg-step-divider.gif) no-repeat right bottom; line-height: 23px; padding: 0 19px 0 9px; } #mn ul#steps li.last { background: none; padding-right: 14px; } #mn ul#steps li.first { width: auto; /* overrides default #mn styles */ } #mn ul#steps li.active, #mn ul#steps li.last-active { background: url(http://www.next.co.uk/SECURE/images/general/bg-step-divider.gif) no-repeat right top; margin-left: -14px; padding: 0 14px 0 0; } #mn ul#steps li.last-active { background: url(http://www.next.co.uk/SECURE/images/general/bg-step-active.gif) no-repeat right top; } #mn ul#steps li.active strong, #mn ul#steps li.last-active strong { background: url(http://www.next.co.uk/SECURE/images/general/bg-step-active.gif) repeat-x left top; display: block; line-height: 23px; padding: 0 5px 0 23px; } #mn ul#steps li.last-active strong { padding-right: 0px; } /* ______________________________________________2:footer modules */ #ft { font-size:91.91%; /* 10px */ height: auto !important; } #ft p.closed { color: #FFF; padding:0 15px; font-size: 110%; } #ft .ftr { background-color:#313131; border:1px solid #000; float:left; padding: 0; /*width: 768px;*/ width:962px; height:92px;} #ft .ftr ul { float:right; height:70px; padding-top: 8px; width:140px; padding-right:20px;} #ft .ftr li { float: none; line-height: 1.4; text-align:right; font-size:10px;} #ft .ftr li, #ft .ftr li a { color: #fff;} #ft .ftr ul.first { background: none; width:210px; height:30px; float:left; padding-top:55px; margin-left:25px; *margin-left:13px; } *+html #ft .ftr ul.first { margin-left:27px; } #ft .ftr ul.first li { text-align: left; } #ft .ftr ul.last { padding-right:12px; } #ft .ftr ul.last li.selected-language a { color:red; } #ft .ftr div {float:left; height:92px; padding-top: 12px;} #ft .blankftr { width:100%; height:92px; background: url(http://cdn.next.co.uk/vstore/ni/common/site/ftr-bg.gif); background-repeat:no-repeat; background-position: left top; float:left; } #ft .blankftr ul.first { padding:55px 0 0 6px; } #ft li#copyrightFTR { color: #fff;} #ft .CountrySelector { float: left; clear: both; overflow:hidden; padding-left: 16px; } #ft .CountrySelector ul { margin:0; list-style-image: none; } #ft .CountrySelector li { list-style: none; margin-left:15px; float:none;} #ft .CountrySelector a { color: #FFFFFF !important; font-size: 11px; } #ft .CountrySelector { width:948px;background: url(/secure/themes/Img/CountrySelector-BG.png) top repeat-x;} #ft .CountrySelector .Title { text-transform:uppercase; padding-top: 18px; font-weight: bold; font-size: 14px; color:#FFFFFF !important;text-align:left;} #ft .CountrySelector .Title .AdviseText { text-transform:none; font-size: 11px; font-weight:normal;} #ft .CountrySelector .FlagSection .Title { padding-top:0px; font-weight:normal; font-size: 11px; margin-bottom: 11px;} #ft .CountrySelector .ColumnWidth1 { width: 157px; } #ft .CountrySelector .ColumnWidth2 { width: 284px; } #ft .CountrySelector .ColumnWidth3 { width: 486px; } #ft .CountrySelector .ColumnWidth4 { width: 628px; } #ft .CountrySelector .ColumnWidth5 { width: 810px; } #ft .CountrySelector .ColumnWidth6 { width: 972px; } #ft .CountrySelector .AllCountries { padding-top: 10px; } #ft .CountrySelector .PromotedCountries { float:left;padding-top: 10px; padding-bottom: 10px; } #ft .CountrySelector a img { display:inline; } #ft .CountrySelector .FlagSection img { vertical-align:middle; } #ft .CountrySelector .FlagSection { float:left; } #ft .CountrySelector .SmallFlag { margin: 0; height: 15px; margin: 0 0 10px 0;} #ft .CountrySelector .SmallFlag .FlagImage { background: url(/secure/themes/Img/Small.png); float:left;} #ft .CountrySelector .SmallFlag .FlagImage, #ft .CountrySelector .SmallFlag .FlagImage img { width:21px; height:15px;overflow:hidden;} #ft .CountrySelector .SmallFlag .FlagText { float:left; margin-left: 11px; } #ft .CountrySelector .SmallFlag.Separator { background: url(/secure/themes/Img/Separator.png) repeat-x center; margin-right: 16px; } #ft .CountrySelector .LargeFlag { margin: 0; } #ft .CountrySelector .LargeFlag .FlagImage { background: url(/secure/themes/Img/Large.png); float:left;} #ft .CountrySelector .LargeFlag .FlagImage, #ft .CountrySelector .SmallFlag .FlagImage img { width:46px; height:31px; } #ft .CountrySelector .LargeFlag .FlagText { float:left; margin-left: 11px; margin-top: 8px; } #ft .CountrySelector .Keyline {clear:both;height: 1px; background: url(/secure/themes/Img/LinkSectionHorizontalKeyline.jpg) no-repeat; } /* ______________________________________________3:grid */ #ct { background-color: transparent; border:none; color:#000; min-height:340px; height:auto; padding:0; } body.l3 #ct { min-height:260px; padding-top:77px; text-align:center } body.l1 #ct, body.l2 #ct { background-color:transparent; border:none; padding:0 } body.l1 #sec { background-color:transparent } /* ______________________________________________4:general */ /* =tables (for data) ------------------------------------ */ table.data { background-color:#FFF; border-collapse:collapse; border-spacing:0; border-color:#999; clear: both; empty-cells:hide; line-height:1.3; margin-bottom: 6px; width:100% } table.data, table.data th, table.data td { border:1px solid #999; padding: 3px 14px; text-align:left; vertical-align:top } table.data thead { background:#FFF; text-align:left } table.data tbody th { font-weight:normal; } table.data tbody tr.message { background-color: #E4E4E4; } table.data tfoot { background-color: #f2F2F2; } table.data tfoot th { text-align: right; } table.data a, table.data a:link, table.data a:visited { color:#5154D0 } table.data a:hover, table.data a:active { color:#00008B } table.data caption { margin-bottom:.27em;/* 3px */ text-align:right; text-transform:uppercase } table.data td.size select { width:7em } table.data td.qty select { width:3.5em } table.data select option { text-indent:4px } /* =tables (for data) ------------------------------------ */ table.tdata { background-color:#FFF; border-collapse:collapse; border-spacing:0; border-color:#999; clear: both; empty-cells:hide; line-height:1.3; margin-bottom: 6px; width:100% } table.tdata, table.tdata th, table.tdata td { border:1px solid #999; padding: 3px 5px; text-align:left; vertical-align:middle; } table.tdata thead { background:#000000; background-image:url(../images/site/tables/bg_table_header.gif); background-repeat:repeat-x; text-align:left } table.tdata thead th {color:#FFFFFF; border:1px solid #000000;} table.tdata tbody th { font-weight:normal; color:#FFFFFF; } table.tdata tbody tr.message { background-color: #E4E4E4; } table.tdata tfoot { background-color: #f2F2F2; } table.tdata tfoot th { text-align: right; } table.tdata a, table.tdata a:link, table.tdata a:visited { color:#5154D0 } table.tdata a:hover, table.tdata a:active { color:#00008B } table.tdata caption { margin-bottom:.27em;/* 3px */ text-align:right; text-transform:uppercase } table.tdata td.size select { width:7em } table.tdata td.qty select { width:3.5em } table.tdata select option { text-indent:4px } /* =miscellaneous rules ------------------------------------ */ body { background:#212121; color:#FFF;} /*body { background:#212121 url(/secure/themes/Img/Christmas2011BG.gif) no-repeat center top; color:#FFF; }*/ .clear { clear:both; } hr { background-color:#B7B7B7; color:#B7B7B7; margin-bottom:6px } a, a:link, a:visited { color:#3f8279; cursor:pointer; text-decoration:none } a:hover, a:focus, a:active { color:#3f8279; cursor:pointer; text-decoration:underline } #ct a, #ct a:link, #ct a:visited { color:#3f8279 } #ct a:hover, #ct a:focus, #ct a:active { color:#3f8279 } #ct a.promote, #ct a.promote:link, #ct a.promote:visited { color:#0734c6; text-decoration: underline } #ct a.promote:hover, #ct a.promote:focus, #ct a.promote:active { color:#3557c8; text-decoration: underline } #ct p.SpecialOfferContainer a, #ct p.SpecialOfferContainer a:link, #ct p.SpecialOfferContainer a:visited { color:#0734c6; text-decoration: underline } #ct p.SpecialOfferContainer a:hover, #ct p.SpecialOfferContainer a:focus, #ct p.SpecialOfferContainer a:active { color:#3557c8; text-decoration: underline } hr { background-color:#B7B7B7; color:#B7B7B7; margin-bottom:6px } h1 { color:#AAA; margin:0; } .center { text-align:center } .req, .err, .alert {/* required fields and errors */ color:#F00 } .SpreadWhite {text-align:right;color:rgb(255, 255, 255);font-family:Arial,Helvetica,Verdana,sans-serif;font-weight:normal;} .Spreadblack {text-align:right;color:rgb(0, 0, 0);font-family:Arial,Helvetica,Verdana,sans-serif;font-weight:normal;} #ct .orderCells td { border-right:1px #BCBCBC solid; border-bottom:1px #BCBCBC solid; padding:12px 10px 0 10px; } #ct .orderCells th { background:#FAFAFA; border-right:1px #BCBCBC solid; padding:3px 3px 3px 3px; } #ct .orderCells tr.bgDark { background-color:#F7F7F7; } #ct .orderCells tr.bgLight { background-color: #FFFFFF; border-bottom: 5px solid #BCBCBC; } #ct .buttonContainer { /*background-color: #F7F7F7; border-left: 1px solid #CCCCCC;*/ min-height: 300px; padding:28px 0 0 20px;} #ct .buttonContainer input { margin-bottom:5px; border:0; } #ct .buttonContainer .btnCheckoutLower { position:absolute; bottom:10px; right:17px; } /* =about Next page ------------------------------------ */ #ct .about { /*background: #333 url(http://cdn.next.co.uk/vstore/ni/common/en/about/bg-about-next.jpg) no-repeat 0 0; border: 1px solid #000; color: #FFF; min-height: 452px; padding: 56px 612px 21px 21px;*/ position: relative; overflow: hidden;} #ct .about ul.depts { left: 30px; margin: 0; padding: 0; position: absolute; top:270px; width: 318px; } #ct .about ul.depts li { float: left; height: 125px; list-style: none; width: 106px; } #ct .about ul.depts li a { display: block; height: 125px; text-indent: -9999px; width: 106px; } #ct .about p.intro { font-weight: bold; } #ct .about p.promote { font-weight: bold; text-transform: uppercase; } #ct .about .aboutText { position:absolute; top:58px; left:23px; width:340px; color:#fff; } /* ______________________________________________6:IE hacks */ /* =min-height workaround ------------------------------------ */ /* min-height hack for Internet Explorer - do not remove the unusual comment tags */ /*\*/ * html #ct { height:340px } * html body.l3 #ct { height:350px; } * html #ct #about { height: 529px; } * html #ct .buttonContainer { height: 328px; } /**/ /*--- Teaser CSS ---*/ #smallItemsContainer div a:link, #smallItemsContainer div a:visited { color: #7db5ae;} #smallItemsContainer div div.TeaserTitle { color: #7db5ae; font-family:Georgia, "Times New Roman", Times, serif; font-size:20px; margin-top: 13px; margin-left: 20px; margin-right: 20px; margin-bottom: 6px; } #smallItemsContainer div h3.TeaserTitle { color: #7db5ae; font-family:Georgia, "Times New Roman", Times, serif; font-size:20px; margin-top: 13px; margin-left: 20px; margin-right: 20px; margin-bottom: 6px; font-weight: normal; } #smallItemsContainer div div.TeaserImage, #smallItemsContainer div div.TeaserImageSmall { overflow:hidden; margin-left: 20px; margin-right: 20px; margin-bottom: 11px; } #smallItemsContainer div div.TeaserImage { height: 161px; } #smallItemsContainer div div.TeaserImageSmall { height: 80px; } #smallItemsContainer div div.TeaserBodyText { width: 200px; color:#FFF; margin-left: 20px; margin-right: 20px; line-height: 16px; } #smallItemsContainer div div.TeaserBodyText a, #smallItemsContainer div div.TeaserBodyText a:link, #smallItemsContainer div div.TeaserBodyText a:visited, #smallItemsContainer div div.TeaserBodyText a:active, #smallItemsContainer div div.TeaserBodyText a:hover { color: #7db5ae; } #smallItemsContainer div div.TeaserBody { height: 248px; } #smallItemsContainer div div.WithBorder { border-right: 1px #666666 dashed; } #content .promotion, #content #promotion {background: none !important; height: auto; background-color: #fff; width: 964px; border: none !important; overflow: hidden;} /*--- Incentive styling---*/ div.rules { background-color: #fff; width: auto; overflow: hidden;} div.rules ol { margin-left: 2em;}