/* ////////////// Bidie Bedroom Collections CSS - Desktop 2017 ////////////// */ /* ----- CSS Order ----- - Shared - Header - Collections - Sashes - Categories - Reassurance - Still need help */ /* /////----- Shared -----///// */ .new-bed-collect { width: 99%; float: left; } .new-bed-collect .fheading { width: 100%; float: left; margin: 30px 0px; } .new-bed-collect .fheading span.line { float: left; width: 37.5%; border-top: 1px solid black; } .new-bed-collect .fheading span.f123heading { width: 25%; float: left; text-align: center; color: black; font-size: 140%; margin-top: -6px; } .new-bed-collect .fheading span.f123heading strong { font-weight: 900; color: #4a9c93; } /* /////----- Header -----///// */ .new-bed-collect .h1 { display: none; } /* /////----- Collections -----///// */ .new-bed-collect .collections ul { float: left; width: 100%; padding: 0 !important; list-style-type: none; } .new-bed-collect .collections li { height: 298px; float: left; width: 100%; margin: 10px 0; position: relative; } .new-bed-collect .collections li a { display: block; height: 100%; text-decoration:none; } .new-bed-collect .collections li img { float: left; width: 70%; height: 100%; } .new-bed-collect .collections li div { width: 30%; float: left; height: 100%; background-color: #4a9c93; color: white; } /*.new-bed-collect .collections li div:nth-of-type(2) { min-height: 301px; }*/ .new-bed-collect .collections li div h3 { padding: 0 15px; font-size: 140% !important; line-height: 1.3em; margin: 15px 0 5px 0; font-weight: normal; color: #fff !Important; font-weight: bolder; } .new-bed-collect .collections li div p { padding: 0 15px; line-height: 1.4em; height: 100px; margin: 10px 0 5px 0; float: left; } .new-bed-collect .collections li div .cta { padding: 10px 30px; background-color: white; margin: 0 15px; float: left; color: #4a9c93; font-weight: bold; } .new-bed-collect .collections li div .cta:hover { opacity: 0.8; } /* /////----- Sashes -----///// */ .new-bed-collect .collections li div.sash p {height: 25px !important;} .new-bed-collect .collections li div.sash {height: auto !important;} .sash { position: absolute; width: 140px !important; text-align: center; margin-top: 20px; opacity: 0.9; } .sash p { padding: 6px !important; margin: 0 7px !important; font-size: 120%; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; font-style: italic; width: 115px; } .sash.best-seller-sash, .sash.new-in-sash { background-color: #4a9c93 !important; } .sash.price-drop-sash, .sash.sale-sash { background-color: #e3292a !important; } /* /////----- Categories -----///// */ .new-bed-collect .categories { float: left; width: 100%; margin: 0 0 25px 0; } .new-bed-collect .categories li { width: 32%; height: 200px; float: left; background-repeat: no-repeat; background-position: center; margin: 1% 0; } .new-bed-collect .categories li:nth-of-type(3n+2) { margin: 1% 2%; } .new-bed-collect .categories li a { display: block; height: 100%; text-decoration: none; color: #282828; } .new-bed-collect .categories li a p { margin: 155px 0 0 0; text-align: center; background-color: rgba(255,255,255,0.8); float: left; width: 100%; font-style: italic; padding: 10px 0; height: 25px; overflow: hidden; transition: 0.3s; } .new-bed-collect .categories li a:hover p { margin: 115px 0 0 0; height: 65px; } .new-bed-collect .categories li a p img { display: none; } .new-bed-collect .categories li a p span:nth-of-type(1) { width: 100%; font-weight: bold; float: left; font-size: 150%; margin: 5px 0 15px 0; } .new-bed-collect .categories li a p span:nth-of-type(2) { background-color: #3f8972; font-size: 90%; font-weight: normal; color: white; display: block; width: 30%; margin: 25px auto; float: none; clear: both; padding: 5px 0; } /* /////----- Reassurance Bar -----///// */ .new-bed-collect .reassurance { border: 1px solid #ececec; float: left; width: 100%; margin: 20px 0 40px 0; padding: 15px 0; } .new-bed-collect .reassurance div { float: left; width: 25%; } .new-bed-collect .reassurance div a { display: block; height: 100%; width: 100%; color: #282828; } .new-bed-collect .reassurance div img { float: left; } .new-bed-collect .reassurance div p { float: left; font-size: 120%; font-weight: bold; margin: 5px; width: 65%; } .new-bed-collect .reassurance div p span { font-weight: normal; width: 100%; float: left; font-size: 85%; } .new-bed-collect .reassurance div a:hover { opacity: 0.8; } /* /////----- Still need help -----///// */ .new-bed-collect .cant-find { float: left; width: 100%; } .new-bed-collect .cant-find .text { float: left; width: 50%; margin: 5px 0; } .new-bed-collect .cant-find .text h3 { font-size: 160%; font-style: italic; padding: 0 10px; } .new-bed-collect .cant-find .text p { padding: 0 10px; font-size: 115%; line-height: 1.7em; margin: 20px 20px 20px 0 !important; } .new-bed-collect .cant-find .text .mail-cta { background-color: #4a9c93; color: white; padding: 10px 15px; float: left; font-size: 115%; font-weight: bold; text-decoration: none; margin: 0 10px; } .new-bed-collect .cant-find .text .mail-cta:hover { opacity: 0.8; } .cant-find img {float:right;} h4.closed { background-color: #4a9c93; color: white; padding: 10px 15px; float: left; font-size: 115%; font-weight: bold; text-decoration: none; margin: 0 10px; cursor:pointer; } .hidetoggle1 {float:left; width:100%; margin-top: -35px;} .showhide1 {clear:left; width:100%;} #f123-requirements {clear:left; width:100%; } #f123-requirements form {margin-left: 10px; min-height: 270px; background-color:#ebebeb;} #f123-requirements form label { text-align: left; float: left; clear: both; padding: 15px 0 5px 0; font-weight: bold; font-size: 100%; } #f123-requirements form input[type="text"] { text-align: left; width: 90%; float: left; clear: both; padding: 5px 0; border: 1px solid #ededed; } textarea.requirements {width:490px; height:150px; border: 1px solid #ededed; font-family:Arial, Helvetica, Lato, sans-serif;} .formleft { margin: 0 30px; float: left; width: 30%; } .formright { margin: 0 0 0 20px; float: right; width: 60%; } .formright input { color: white; text-transform: uppercase; border-radius: 5px; border-style: none; padding: 10px 0; cursor: pointer; float: right; margin: 15px 65px 10px 0; width: 240px; } .formright input[type="reset"] { background-color: #8e8e8e; clear: both; } .formright input[type="submit"] { background-color: #319f31; } /* ----- CSS Order ----- - Shared - Header - Room Types */ /* /////----- Shared -----///// */ .finish-type { width: 100%; float: left; } .finish-type .h1 { display: none; } /* /////----- Intro -----///// */ .finish-type .intro { background-color: #f5f5f5; padding: 10px 15px; margin: 15px 0; } .finish-type .intro p { line-height: 1.6em; } /* /////----- Room Types -----///// */ .finish-type .room-types ul { float: left; width: 100%; } .finish-type .room-types li { height: 275px; float: left; width: 100%; margin: 10px 0; } .finish-type .room-types li a { display: block; height: 100%; } .finish-type .room-types li img { float: left; width: 70%; height: 100%; } .finish-type .room-types li div { width: 30%; float: left; height: 100%; background-color: #4a9c93; color: white; } .finish-type .room-types li div h3 { padding: 0 15px; font-size: 163%; line-height: 1.3em; margin: 22% 0 15px 0; font-weight: normal; } .finish-type .room-types li div .cta { padding: 10px 30px; background-color: white; margin: 0 15px; float: left; color: #4a9c93; font-weight: bold; } /* ----- CSS Order ----- - Shared - Header - Categories - More Bargains - Swiper */ /* /////----- Shared -----///// */ .feb-clear { float: left; width: 100%; } .feb-clear .fheading { width: 100%; float: left; margin: 30px 0px; } .feb-clear .fheading .line { float: left; width: 32.5%; border-top: 1px solid black; } .feb-clear .fheading .f123heading { width: 35%; float: left; text-align: center; color: black; font-size: 140%; margin-top: -6px; } .feb-clear .fheading .f123heading strong { font-weight: 900; color: #ffe735; } /* /////----- Header -----///// */ .clearance-container .h1-tag { float: left; width: 100%; margin: 15px 0 0 15px; font-style: italic; } .feb-clear h1 { text-align: center; font-size: 100%; margin: 10px 0; display: block; } .feb-clear h3 { float: left; color: white; text-transform: uppercase; width: 953px; background: url(/files/images/ld/bf17-cat-head-bg.jpg); text-align: center; padding: 15px 0; font-size: 130%; margin: 10px 0 0 0; font-family: 'Lato', sans-serif; } .feb-clear .bxslider { width: 100%; } .feb-clear .bxslider li { width: 100%; } .feb-clear img { width: 100%; } .feb-clear .bxslider:hover { opacity: 1; } /* /////----- Categories -----///// */ .clearance-container .shop-categories li { width: 305px; height: 200px; float: left; background-repeat: no-repeat; margin: 10px 0; position: relative; } .clearance-container .shop-categories li:before { background-color: #ffffff; color: #c21c1c; font-weight: bold; padding: 5px 15px; font-size: 120%; position: absolute; right: 0; top: 21px; } .clearance-container .shop-categories li:nth-of-type(3n+2) { margin: 10px 15px; } .clearance-container .shop-categories li a { display: block; height: 100%; text-decoration: none; color: #282828; } .clearance-container .shop-categories li a p { margin: 148px 0 0 0; text-align: center; background-color: rgba(255,255,255,0.8); float: left; width: 100%; font-style: italic; padding: 10px 0; height: 32px; overflow: hidden; transition: 0.3s; } .clearance-container .shop-categories li a:hover p { margin: 115px 0 0 0; height: 65px; } .clearance-container .shop-categories li a p img { display: none; } .clearance-container .shop-categories li a p span:nth-of-type(2) { width: 100%; font-weight: bold; float: left; font-size: 120%; } .clearance-container .shop-categories li a p span:nth-of-type(3) { background-color: #ffe735; font-size: 90%; font-weight: normal; color: #282828; display: block; width: 30%; margin: 26px auto; float: none; clear: both; padding: 5px 0; } .clearance-container .shop-categories li p span:nth-of-type(4) { display: none; } .clearance-container .shop-categories li .saving { position: absolute; right: 0; top: 10px; background-color: #282828; color: white; padding: 5px 15px; } .cat-view-all a { color: white; background-color: #282828; text-decoration: none; font-weight: bold; padding: 5px 40px; } .cat-view-all { float: left; margin-top: 15px; } .cat-view-all:hover { opacity: 0.8; } /* /////----- More Bargains -----///// */ .feb-clear .more-deals-at { list-style-type: none; padding: 0; float: left; width: 100%; } .feb-clear .more-deals-at li { float: left; width: 300px; border: 1px solid #ececec; margin: 10px 0; } .feb-clear .more-deals-at li:nth-of-type(3n+2) { margin: 10px 21px; } .feb-clear .more-deals-at li a:hover { opacity: 0.8; } /* /////----- Swiper -----///// */ .swiper-container .swiper-slide {border: none;} .OfferBox #EarliestDel, .OfferBox .quickview, .showwl, .border-1, .sr_container #EarliestDel, #StockMsg, #OfferBoxDelivery { display: none; } .swiper-pagination_1.swiper-pagination-clickable, .swiper-pagination_3.swiper-pagination-clickable { display: none; } .swiper-pagination-clickable .swiper-pagination-bullet { display: none; } .feb-clear-carousel .FPpercent { background-color: #ffe735; padding: 2px 0; display: block; margin: 0 auto 10px auto; width: 100%; font-weight: bold; text-shadow: none; clear: both; text-align: center; } .feb-clear-carousel .swiper-slide { border: 1px solid #ffffff; padding: 0 !important; } .feb-clear-carousel .OfferBoxTitle { height: 50px; float: left; width: 100%; text-align: center; position: inherit; } .feb-clear-carousel .OfferBoxTitle .productname a { text-decoration: none; } .feb-clear-carousel .showwl { display: none; } .feb-clear-carousel .swiper-slide:hover { border: 1px solid #eeeeee; } .feb-clear-carousel .OfferBoxPrice { float: left; width: 100%; padding-bottom: 5px; text-align: center; font-size: 130%; font-weight: bold; } .feb-clear-carousel .OfferBoxImage img { display: block; margin: 5px auto; } .easter-swiper { margin: 30px 0; } .easter-swiper .swiper-slide div { background-color: #3f8972; color: white; z-index: 9; position: absolute; bottom: 0; width: 93.8%; padding: 10px; } .easter-swiper .swiper-slide div:after { background: inherit; top: 0; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; transform: skewY(4deg); transform-origin: 100%; z-index: -1; } .easter-swiper .swiper-slide h3 { margin: -10px 0 5px 0; font-size: 115%; } .easter-swiper .swiper-slide div p { margin: 0 0; } .easter-swiper .swiper-slide span { position: absolute; top: 5px; right: 15px; border-radius: 50%; background-color: white; padding: 10px 11px; font-weight: bold; } .easter-swiper .swiper-slide img { width: 100%; } .easter-swiper .swiper-slide a { height: 100%; width: 100%; display: block; } .easter-swiper .swiper-slide a:hover { opacity: 0.9; } .easter-swiper .swiper-wrapper { margin-bottom: 20px; } .background-peach { background-color:#FFBBA4; }