/*-------------------------------------------------- version: generic.css - 5.0 created: 01-02-2016 author: ?????? ~ GlobalGraphics Associates Ltd. email: webmaster@globalgraphics.co.uk website: http://www.globalgraphics.co.uk/ --------------------------------------------------*/ /* SCREEN SIZES DESKTOP LARGE: >= 1101px DESKTOP SMALL: <= 1100px TABLET: 720px MOBILE: 320px */ /* LAYOUT */ #header, #banner, #banner-outer, #wrap, #footer { float: left; clear: both; width: 100%; display: block; } #content { float: left;} #content.full { width: 100%; float: none; } #aside { margin-left: 20px; margin-bottom: 20px; float: right; } #wrap { padding-bottom: 20px;} #wrap.reverse #aside { margin-left: 0; margin-right: 20px; float: left;} #wrap.reverse #content { float: right; } .container-outer, .container, .container-inner { margin: 0 auto; display: block; max-width: 1080px; width: 1080px; } body { font-size: 12px; font-weight: 400; color: #111;} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { } h1, .h1 { } h2, .h2 { } h3, .h3 { } h4, .h4 { } h5, .h5 { } h6, .h6 { } p, .para { line-height: 1.6em;} p a { display: inline;} p a:hover {} a, a:active, a:hover, a:visited { text-decoration: none; } /*.triple li { float: left; width: 32%; margin-bottom: 20px; margin-right: 2%;} .triple li:nth-of-type(3n) { margin-right: 0; } .triple li:nth-of-type(3n+1) { clear: both; }*/ /* PAGE ELEMS */ #logo { text-indent: -99999px; display: block; background: url('../img/ui/logo.png') 0 0 no-repeat; } /* COOKIE NOTIFICATION */ #cookieNotification { background: #FFF;} #cookieNotification .container { position: relative; padding-top: 10px; padding-bottom: 10px; } #cookieNotification .message { padding-right: 70px;} #cookieNotification .close { position: absolute; left: auto; right: 10px; color: #c00; cursor: pointer;} #cookieNotification .close span {} /* TYPOGRAPHY */ blockquote { font-family: Georgia, "Times New Roman", Times, serif; margin: 0 1em; } code { font-family: "Courier New", Courier, monospace; font-size: 12px; } /* font-size in px because it is monospace */ /* NOTIFY / ALERTS */ .notify, .alert { font-family: Verdana, Geneva, sans-serif; border: 1px solid transparent; border-radius: 5px; margin-bottom: 20px; padding: 5px 15px; font-size: 15px; font-weight: 500; display: block; } .notify strong, .alert strong { font-weight: 700; } .notify-success, .alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d;} .notify-info, .alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #31708f;} .notify-warn, .notify-warning, .alert-warning, .alert-warn { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b;} .notify-fail, .notify-failed, .notify-danger, .alert-fail, .alert-failed, .alert-danger { background-color: #f2dede; border-color: #ebccd1; color: #a94442;} /* FORM BASIC */ form fieldset.group { display: block; } form.basic input:focus, form.basic textarea:focus, form.basic select:focus { border-color: #000 !important;} form.basic {} form.basic ul, form.basic ol {} form.basic ul li, form.basic ol li { float: left; clear: left; position: relative; width: 100%; padding-bottom: 5px; margin-bottom: 5px;} form.basic ul li.validation { width: 250px; } form.basic ul li:nth-last-child(1), form.basic ol li:nth-last-child(1){ padding-bottom: 0; margin-bottom: 0;} form.basic fieldset { display: block; border: none; padding: 0; margin: 0;} form.basic fieldset legend { display: block; margin-bottom: 10px; font-size: 1.2em; font-weight: 700; } form.basic label { line-height: 32px;} form.basic label.over { position: absolute; top: 0; left: 4px; cursor: text;} form.basic label em { font-style: normal; font-size: 0.9em; color: #c00;} form.basic input.text, form.basic input[type="text"], form.basic select, form.basic textarea { background: #fff; border: 1px solid #ccc; } form.basic input.text, form.basic input[type="text"] { width: 200px;} form.basic input.text, form.basic input[type="text"], form.basic textarea { padding: 8px 4px;} form.basic input.text, form.basic input[type="text"] { min-height: 12px;} form.basic input.q { width: 60px; } form.basic select { height: 32px;} /* BUTTONS */ .button, span.button, a.button, input.button, input[type="submit"].button { display: inline-block; zoom: 1; *display: inline; height: 32px; line-height: 32px; padding: 0 10px; border: none;} .button:hover, span.button:hover, a.button:hover, input.button:hover, input[type="submit"].button:hover {} /* BREADCRUMBS */ #breadcrumbs { width: 100%; clear: both; margin-bottom: 15px;} #breadcrumbs ul { display: block; margin: 0; padding: 0; list-style-type: none;} #breadcrumbs ul li { display: inline-block; zoom: 1; *display: inline; margin-right: 5px; margin-bottom: 5px;} #breadcrumbs ul li span { font-weight: 600;} #breadcrumbs ul li a { border-bottom: 1px dotted #111; } #breadcrumbs ul li a:hover { border-bottom: none; } /* PAGINATION */ div.pagination { display: block; width: 100%; clear: both; margin-bottom: 10px;} div.pagination ol { float: right; width: auto; margin: 0; padding: 0; list-style-type: none; display: block} div.pagination ol li { float: left; margin-right: 10px; margin-bottom: 10px; min-width: 32px; text-align: center;} div.pagination ol li, div.pagination ol li a { height: 32px; line-height: 32px; } div.pagination ol li:nth-last-child(1) { margin-right: 0;} div.pagination ol li a { display: block; background: #ccc} div.pagination ol li a:hover { background: #ddd} div.pagination ol li a.previous_next {} div.pagination ol li a.previous_next, div.pagination ol li a.previous_next:hover { background: none; } /* SORT */ div.sortby {width: 100%; clear: both; margin-bottom: 20px; } div.sortby label { padding-right: 5px;} div.sortby select { height: 24px; border: 1px solid #ccc; } div.sortby form fieldset { float: left; width: 50%; padding: 0; margin: 0; border: none; } div.sortby form fieldset:nth-child(2n+1) { clear: both; } div.sortby form fieldset:nth-child(2n) { text-align: right; } /* ASIDE */ #aside .aside-nav li { width: 100%; clear: both; margin-bottom: 5px; } /* BANNER */ #banner-outer { display: block; float: left; clear: left; width: 100%; position: relative; z-index: 1;} #banner-outer #banner, #banner-outer #fader { display: block;} #banner-outer .bx-wrapper { margin: 0 auto 40px;} #banner-outer ul { display: block; margin: 0; padding: 0;} #banner-outer ul.banner li { width: 100%;} #banner-outer ul.banner li a { display: block; } #banner-outer ul.banner li img { position: relative; display: block; width: 100%; height: auto;} #banner-outer ul.banner li span.text-overlay { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 2; background: url(../img/ui/banner-overlay.png) center center repeat;} #banner-outer ul.banner li span.text-outer { position: absolute; display: block; top: 0; bottom: 0; left: 0; width: 100%; z-index: 3;} /* CONTACT */ #c-info { clear: both; width: 100%; margin-top: 20px; } #c-info #c-addr, #c-info #c-enq, #c-info #c-map { float: left; width: 32%; margin-right: 2%; margin-bottom: 20px; } #c-info #c-addr { } #c-info #c-addr strong em { font-style: normal; } #c-info #c-enq { } #c-info #c-map { margin-right: 0; } /* SECTIONS/PRODUCTS */ .sections, .products { width: 100%; margin: 2em 0; padding: 0; list-style-type: none; display: block;} .sections li, .products li { display: inline-block; zoom: 1; *display: inline; margin-right: 20px; margin-bottom: 20px; } .sections.row4 > li, .products.row4 > li { /*width: 255px;*/ width: 22%; margin-right: 4%; } .sections.row3 > li, .products.row3 > li { /*width: 346px;*/ width: 32%; margin-right: 2%; } .sections.row2 > li, .products.row2 > li { /*width: 530px;*/ width: 48%; margin-right: 4%; } .sections li a, .products li a, .sections li span, .products li span, .sections li strong, .products li strong { display: block; text-align: center; } .sections li strong, .products li strong { font-weight: 700; } .sections li span.item-text-outer strong.item-title, .products li span.item-text-outer strong.item-title, .sections li span.item-text-outer span.item-title, .products li span.item-text-outer span.item-title { margin-bottom: 5px; } .sections li span.item-image, .products li span.item-image { margin-bottom: 5px; } .sections li span.item-image img, .products li span.item-image img { display: block; width: 100%; height: auto;} /* REFINE RESULTS */ #refineResultsForm { margin-bottom: 1em; } #refineResultsForm legend { font-size: 1.17em; font-weight: 700; } #refineResultsForm legend a.toggle_refine { float: right; text-indent: -99999px; background: url('../img/ui/toggle-ud.png') 10px center no-repeat; height: 1.17em; width: 50px; } #refineResultsForm li.last { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding-top: 1em; padding-bottom: 1em; } #refineResultsForm li strong.title { font-size: 1em; display: block; margin: .4em 0; margin-bottom: .8em; } #refineResultsForm li strong.title span.toggle { float: right; font-size: 1.17em; color: #c00; } #refineResultsForm ul { display: block; } #refineResultsForm ul.refine_options > li { width: 100%; margin-bottom: 1em; } #refineResultsForm ul.refine_options > li:nth-last-child(1) { margin-bottom: 0; } #refineResultsForm ul.refine_options li label { margin: 0.25em 0; } #refineResultsForm input.button-update { float: right; } /* #refineResultsForm {} #refineResultsForm li { float: left; clear: both; width: 100%; } #refineResultsForm > fieldset > ul > li { border-bottom: 1px dotted #ccc; margin-bottom: 5px; padding-bottom: 5px;} #refineResultsForm li strong.title { display: block; font-size: 1.2em; font-weight: 700;} #refineResultsForm a.toggle_refine, #refineResultsForm span.toggle { float: right; line-height: 1.6em; font-size: 0.8em; font-weight: 400; width: auto;} #refineResultsForm ul li li { margin-bottom: 2px;} #refineResultsForm fieldset ul.refine_options li:nth-last-child(1) { border-bottom: none; margin-bottom: 0; padding-bottom: 0;} #refineResultsForm ul.refine_options li strong.title { font-size: 1em; margin-bottom: 0.4em; } */ /* PRODUCT */ #product-detail, #product-gallery { float: left; margin: 0; margin-bottom: 20px; padding: 0; display: block; } #product-gallery { clear: both; list-style-type: none; width: 400px; margin-right: 20px; } #product-gallery li { width: 100%; display: block; margin-bottom: 10px;} #product-gallery li p { margin: 0;} #product-gallery li.thumbs a { display: block; width: 48%; margin-right: 4%; float: left; } #product-gallery li.thumbs a:nth-child(2n) { float: right; margin-right: 0;} #product-gallery li.thumbs a:nth-child(2n+1) { clear: both;} #product-gallery li a img { display: block; width:100%; height: auto; } #product-detail { width: 660px;} #product-detail #product-meta { width: 100%; margin: 0; padding: 0; list-style-type: none; display: block;} #product-detail #product-meta li { margin-bottom: 5px; } #product-detail #product-meta li.rating span { height: 12px; line-height: 12px; padding-right: 5px; } #product-detail #product-meta li.rating span, #product-detail #product-meta li.rating img { display: inline-block; zoom: 1; *display: inline; } #product-detail #product-meta li.rating img { margin-right: 2px;} #product-detail #product-meta li.stock-msg p { margin: 0;} #product-tabs { clear: both;} #product-tabs ul.tabnav { margin: 0; padding: 0; list-style-type: none; z-index: 2000;} #product-tabs ul.tabnav li { display: inline-block; zoom: 1; *display: inline; padding: 2px 10px; border: 1px solid #e6e6e6;} #product-tabs ul.tabnav li { border-color: #cdcdcd; } #product-tabs ul.tabnav li.ui-tabs-active { background: #fff; border-bottom-color: #fff;} #product-tabs ul.tabnav, #product-tabs ul.tabnav li { } #product-tabs ul.tabnav li a { display: inline-block; zoom: 1; *display: inline; padding: 2px 0;} #product-tabs ul.tabnav, #product-tabs div.tabcontent { position: relative; display: block; } #product-tabs div.tabcontent { /*margin: 10px 0;*/ margin-top: -1px; z-index: 1000; background: #fff; border: 1px solid #cdcdcd; padding: 0 10px; margin-bottom: 20px;} #product-tabs .ui-tabs .ui-state-active { background: #fff; border-color: #cdcdcd #cdcdcd #fff; color: #333; } #product-tabs .ui-tabs-hide { display: none !important; } #buy-form { margin-bottom: 20px;} #buy-form fieldset { } #buy-form fieldset ul { margin: 0; padding: 0; list-style-type: none; } #buy-form fieldset li { width: 100%; clear: both;margin-bottom: 10px;} #buy-form label { min-width: 120px; padding-right: 10px;} #buy-form label, #buy-form input, #buy-form select { display: inline-block; zoom: 1; *display: inline;} #buy-form input#quantity { width: 60px; text-align: center;} #buy-form input.button { } #related-products-container { clear: both; width: 100%;} /* ITEMS SUMMARY / BASKET */ #basketForm { width: 100%; clear: both;} #basketForm input.q, #basketForm span.q { display: block; width: 60px; text-align: center;} table.itemSummary { width: 100%; border: 1px solid #000; border-collapse: collapse; margin-bottom: 20px;} table.itemSummary th, table.itemSummary td { padding: 8px 10px; vertical-align: top;} table.itemSummary th { background: #000; color: #fff;} table.itemSummary td { background: #fff; } table.itemSummary tr:nth-child(even) td { background: #f2f2f2;} table.itemSummary th.product-cell, table.itemSummary td.product-cell { width: 45%; text-align: left; } table.itemSummary th.action-cell, table.itemSummary td.action-cell { text-align: center; } table.itemSummary td.action-cell i { font-size: 1.4em; } table.itemSummary td a.product-image { display: block; width: 38px; height: 38px; max-width: 8%; border: 1px solid #000; margin-bottom: 5px; margin-right: 5px; } table.itemSummary td a.product-image img { display: block; width: 100%; height: auto;} table.itemSummary td a.product-image, table.itemSummary td div.product-info { display: inline-block; zoom: 1; *display: inline; overflow: hidden;max-width: 85%; } table.itemSummary td div.product-info { vertical-align: top; } table.itemSummary td div.product-info strong, table.itemSummary td div.product-info span { display: block;} table.itemSummary td div.product-info strong.title-text { margin-bottom: 5px;} table.itemSummary td div.product-info span.option-text, table.itemSummary td div.product-info span.question-text { padding-top: 5px;} #discountCode { float: left; width: 65%; margin-bottom: 20px;} #discountCode label span { font-size: 1.2em; display: block; margin-bottom: 5px; font-weight: 700; padding-right: 10px;} #discountCode input[type="text"] { width: 192px; height: 12px; padding: 10px 4px; border: 1px solid #ccc; margin-right: 10px;} table.basketPriceBreakdown { width: 30%; float: right; border: 1px solid #000; border-collapse: collapse; margin-bottom: 20px; } table.basketPriceBreakdown td { background:#fff; padding: 5px 10px; } table.basketPriceBreakdown tr:nth-child(even) td { background: #f2f2f2;} table.basketPriceBreakdown td.price-value { width: 15%; text-align: right;} table.basketPriceBreakdown tr.grand-total td { font-size: 1.2em; font-weight: 700;} #page-checkout2 table.basketPriceBreakdown { margin-top: 2.4em;} #delivery_container { float: left; width: 65%; margin-bottom: 20px;} table.basketDelivery {width: 100%; border: 1px solid #000; border-collapse: collapse; margin-bottom: 20px;} table.basketDelivery th, table.basketDelivery td { padding: 8px 10px; vertical-align: top;} table.basketDelivery th { background: #000; color: #fff;} table.basketDelivery td { background: #fff;} table.basketDelivery tr:nth-child(even) td { background: #f2f2f2;} table.basketDelivery .title-cell, table.basketDelivery .date-cell, table.basketDelivery .price-cell { text-align: left;} table.basketDelivery td .delivery-info strong, table.basketDelivery td .delivery-info span { display: block;} #payment-options { width: 100%; display: block; clear: both; margin-bottom: 20px;} #payment-options p { margin: 0; padding-right: 10px; line-height: 38px;} #payment-options p, #payment-options img { float: left; display: inline-block; zoom: 1; *display: inline;} #actions { width: 100%; display: block; clear: both; margin-bottom: 20px;} #actions div { float: right; width: auto;} #actions div a.button, #actions div input.button { margin-left: 10px;} /* LOGIN BOX */ .login-box { float: left; width: 32%; margin-right: 2%; margin-bottom: 20px; } .login-box .login-box-inner { border: 1px solid #e9e9e9; background: #f6f6f6; padding: 10px;} .login-box.guestuser { margin-right: 0;} .login-box ul { padding: 0; margin: 0; list-style-type: none;} .login-box ul li { width: 100%; } .login-box ul li label { width: 40%; float: left; } .login-box ul li input[type="text"], .login-box ul li input.text { width: 55%; float: right; } .login-box ul li input.button, .login-box ul li a.button { float: right; } .login-box ul li p { min-height: 77px } /* CHECKOUT */ #checkout { display: block; width: 100%; margin-bottom: 20px;} #checkout fieldset {/*margin-bottom: 20px;*/} #checkout ol li { border-bottom: 1px dotted #ddd;} #checkout ol li:nth-last-child(1) { border-bottom: none;} #checkout ol li label { min-width: 190px; padding-right: 10px;} #checkout ol li label, #checkout ol li select, #checkout ol li input[type="text"], #checkout ol li input.text { display: inline-block; zoom: 1; *display: inline; } #checkout ol li #delivery_instructions { display: block; width: 1070px; height: 100px;} #checkout ol li input.button { margin-top: 10px; float: right;} #checkout ol li.chkbx label { padding-left: 10px;} /* ACCOUNT DETAILS */ #account_details { display: block; width: 100%; margin-bottom: 20px; } #account_details fieldset { float: left; width: 50%;} #account_details fieldset:nth-child(2n) { float: right;} #account_details li { border-bottom: 1px dotted #ddd;} #account_details li:nth-last-child(1) { border-bottom: none;} #account_details p { margin: 0; line-height: 32px;} #account_details label { min-width: 190px; padding-right: 10px;} #account_details label, #account_details select, #account_details input[type="text"], #account_details input.text { display: inline-block; zoom: 1; *display: inline; } #account_details input.button { margin-top: 10px; float: right;} /* USER ADDRESSES */ #user_addresses { margin: 0; margin-bottom: 20px; padding: 0; width: 100%; clear: both;} #user_addresses li { float: left; list-style-type: none; position: relative;} #user_addresses li div {padding: 10px;} #user_addresses li p { margin: 0;} #user_addresses li a.remove { position: absolute; top: 0; right: 0; padding: 10px; border-bottom: none;} #user_addresses li a.remove i { font-size: 1.2em; color:#c00;} /* USER HISTORY */ #past_orders {} #past_orders th.date-cell, #past_orders td.date-cell { text-align: left;} #past_orders td.action-cell i { position: relative; font-size: 1.2em;} #past_orders td.action-cell i span { background:#fff; position: absolute; top: 0; left: -99999px; width: 100px; margin-left: -50px; text-align: center; font-family: Arial, "Arial Black" ,Helvetica Neue,Helvetica,sans-serif; font-size: 1em; padding: 5px 0;} #past_orders td.action-cell a:hover i span {left: 0;} /* TABLE DEFAULTS */ table.default { border: 1px solid #bbb; margin-bottom: 1em; } table.default th, table.default td { padding: 0.1em 1em; } table.default caption { font-size: 1.2em; font-weight: 700; margin-bottom: 1em; } table.default col { border-right: 1px solid #ccc; } table.default thead { background: #ccc; border-top: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; } table.default tr:nth-child(even) td { background: #edf5ff; } table.default tr:hover td { background: #9fc9ff; color: #fff; } table.default thead tr:hover td { background: transparent; color: inherit; } /* REUSABLE CLASSES */ .left { float: left; } .right { float: right; } .clear { clear: both; } .hidden { display: none !important; visibility: hidden !important; } img.left { margin: 0 .5em .5em 0; } img.right { margin: 0 0 .5em .5em; } img.border { background: #ddd; border: 1px solid #ccc; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .invisible, .hidden { display: none !important; visibility: none !important; } .hidden { display: none !important;} .show { display: block !important; } .row5 > li:nth-child(5n), .row4 > li:nth-child(4n), .row3 > li:nth-child(3n), .row2 > li:nth-child(2n), .row1 > li:nth-child(1n) { margin-right: 0 !important; } .row5 > li:nth-child(5n+1), .row4 > li:nth-child(4n+1), .row3 > li:nth-child(3n+1), .row2 > li:nth-child(2n+1), .row1 > li:nth-child(1n+1) { clear: both !important;} /* ENTRIES - BLOG, NEWS, CASE STUDIES ETC */ .entries { list-style-type: none; margin: 2em 0; padding: 0; display: block; width: 100%;} .entries li { float: left; clear: left; margin-bottom: 10px;} .entries.row1 li { width: 100%; } .entries.row1 li:nth-last-child(1) { margin-bottom: 0; } .entries li > div, .entries li span.image { display: block; } .entries li > div { float: left; width: 75%} .entries li.no-image > div { width: 100%; } .entries li span.image { float: right; width: 20%} .entries li span.image img { display: block; width: 100%; height: auto;} .entries li div p { margin-top: 0;} .entries li .entries-meta, .entries li .entries-text { display: block; } .entries li .entries-meta { margin-bottom: 0.4em; } .entries li .entries-meta span.date, .entries li .entries-meta span.comments { display: block; float: left; } .entries li .entries-meta span.date { width: 80%; } .entries li .entries-meta span.comments { width: 20%; text-align: right;} #blog-article { margin-bottom: 2em; } #blog-article .social { margin-top: 1em;} #blog-article #blog-meta { display: block; margin-bottom: 0.4em;} #blog-article #blog-meta span.date, #blog-article #blog-meta span.comments { display: block; float: left; } #blog-article #blog-meta span.date { width: 80%; } #blog-article #blog-meta span.comments { width: 20%; text-align: right;} #blog-article-comments { clear: both; } #blog-article-comments ul { list-style-type: none; margin: 20px 0; padding: 0; display: block; width: 100%;} #blog-article-comments ul li { float: left; clear: left; margin-bottom: 10px; width: 100%; } #blog-article-comments ul li:nth-last-child(1){ margin-bottom: 0; } #blog-article-comments ul li > img { float: left; width: 7%; height: auto; display: block; } #blog-article-comments ul li > div { float: right; width: 92% } #blog-article-comments ul li > div p { margin-top: 0;} #comment-form { margin: 1em 0; margin-bottom: 2em; max-width: 302px; } #comment-form #write-comment { overflow: hidden; margin-top: 1em; } #comment-form fieldset div { margin-bottom: 0.4em; } #news-article #news-meta { display: block; margin-bottom: 0.4em;} #case-studies-article #case-studies-meta { display: block; margin-bottom: 0.4em;} /* FAQs */ dl.faqs { margin: 2em 0; } dl.faqs dt { font-weight: 700; } dl.faqs dt, dl.faqs dd { width: 100%; margin: 0;} dl.faqs dd { margin-bottom: .4em; } dl.faqs dt div, dl.faqs dd div { padding: 1em 10px; } dl.faqs dd div r{ padding-top: 0; } dl.faqs dt div { background: #ccc url('../img/ui/toggle-ud.png') right 1.2em no-repeat; cursor: pointer; padding-right: 50px;} dl.faqs dt.open div, dl.faqs dt:hover div { background-color: #ddd; } dl.faqs dd div { padding-top: 0; background: #ddd; } dl.faqs dd div > *:nth-child(1) { margin-top: 0; } dl.faqs dd div > *:nth-last-child(1) { margin-bottom: 0; } /* GALLERY */ .gallery { list-style-type: none; margin: 2em 0; padding: 0; display: block; width: 100%; } .gallery li { display: inline-block; zoom: 1; *display: inline; margin-right: 20px; margin-bottom: 20px; } .gallery.row4 > li { width: 22%; margin-right: 4%; } .gallery.row3 > li { width: 32%; margin-right: 2%; } .gallery.row2 > li { width: 48%; margin-right: 4%; } .gallery li strong, .gallery li span, .gallery li a, .gallery li img { display: block; text-align: center; } .gallery li span.item-image { margin-bottom: 5px; } .gallery li span.item-image img { width: 100%; height: auto;} .gallery li strong.item-title { font-weight: 700; } /* CORRECTION FOR GOOGLE RECAPTCHA ELEM */ @media only screen and (max-width: 360px) { form.basic li.validation, form fieldset.validation { width: 248px !important; overflow: hidden;} form #rc-imageselect, form .g-recaptcha { transform:scale(0.82); -webkit-transform:scale(0.82); transform-origin:0 0;-webkit-transform-origin:0 0;} } /* DESKTOP-LARGE ONLY */ @media only screen and (min-width: 1101px) { .hide-desktop, .hide-desktop-large { display: none !important; visibility: none !important;} } /* DESKTOP-REGULAR ONLY */ @media only screen and (min-width: 721px) and (max-width: 1100px) { .hide-desktop, .hide-desktop-regular { display: none !important; visibility: none !important;} .sections.row4 > li, .products.row4 > li { width: 22%; margin-right: 4%; } .sections.row3 > li, .products.row3 > li { width: 32%; margin-right: 2%; } .sections.row2 > li, .products.row2 > li { width: 48%; margin-right: 4%; } } /* TABLET ONLY */ @media only screen and (min-width: 321px) and (max-width: 720px) { .hide-tablet { display: none !important; visibility: none !important;} .sections > li, .products > li, .sections.row4 > li, .products.row4 > li, .sections.row3 > li, .products.row3 > li, .sections.row2 > li, .products.row2 > li, .gallery li, .gallery.row4 > li, .gallery.row3 > li, .gallery.row2 > li { width: 48%; margin-right: 4% !important; } .sections > li:nth-child(2n+2), .products > li:nth-child(2n+2), .sections.row4 > li:nth-child(2n+2), .products.row4 > li:nth-child(2n+2), .sections.row3 > li:nth-child(2n+2), .products.row3 > li:nth-child(2n+2), .sections.row2 > li:nth-child(2n+2), .products.row2 > li:nth-child(2n+2), .gallery > li:nth-child(2n+2), .gallery.row4 > li:nth-child(2n+2), .gallery.row3 > li:nth-child(2n+2), .gallery.row2 > li:nth-child(2n+2) { margin-right: 0 !important; } } /* MOBILE ONLY */ @media only screen and (max-width: 320px) { .hide-mobile { display: none !important; visibility: none !important;} #sortby_form fieldset { width: 100%; float: none; margin-bottom: 10px;} #sortby_form fieldset label { margin-bottom: 5px;} #sortby_form fieldset label { float: left; width: 35%; padding: 0; line-height: 24px;} #sortby_form fieldset select { float: right; width: 55%;} #sortby_form fieldset label, #sortby_form fieldset select { display: block;} #sortby_form fieldset:nth-child(2n) { text-align: left;} .sections > li, .products > li, .sections.row4 > li, .products.row4 > li, .sections.row3 > li, .products.row3 > li, .sections.row2 > li, .products.row2 > li, .gallery > li, .gallery.row4 > li, .gallery.row3 > li, .gallery.row2 > li { width: 100%; margin-right: 0; } } /* DESKTOP-LARGE & DESKTOP-REGULAR */ @media only screen and (min-width: 721px) { #c-info #c-addr, #c-info #c-enq { width: 50%; margin-right: 0; } #c-info #c-map { width: 100%; } } /* DESKTOP-LARGE, DESKTOP-REGULAR & TABLET */ @media only screen and (min-width: 321px){ } /* DESKTOP-REGULAR & TABLET */ @media only screen and (min-width: 321px) and (max-width: 1100px){ } /* TABLET & MOBILE */ @media only screen and (max-width: 720px) { #logo { max-width: 100%; background-size: 100% auto;} #banner-outer ul.banner li span.text-outer { position: relative; bottom: auto;} .button, span.button, a.button, input.button, input[type="submit"].button { display: block; width: 100%; padding: 0; margin: 0; margin-top: 10px; text-align: center;} .triple li { width: 100%; padding-bottom: 20px; border-bottom: 1px dotted #ddd; margin-bottom: 20px;} .triple li:nth-last-child(1) { padding-bottom: 0; border-bottom: none; margin-bottom: 0;} .entries li > div { width: 100%; float: none;} .entries li span.image { display: none; } .entries li .entries-meta span.date, .entries li .entries-meta span.comments { width: 100%; text-align: left; } .entries li .entries-meta span.comments { margin-top: 5px; } #blog-article { } #blog-article #blog-meta span.date, #blog-article #blog-meta span.comments { width: 100%; text-align: left; } #blog-article #blog-meta span.comments { margin-top: 5px; } #blog-article-comments ul li > img { display: none; } #blog-article-comments ul li > div { float: none; width: 100%;} #comment-form { max-width: 100%; } #comment-form label, #comment-form input, #comment-form textarea { width: 100%; } #refineResultsForm input.button-update { float: none; } #product-gallery, #product-detail { width: 100% !important; margin-right: 0;} table.itemSummary th, table.itemSummary td { width: auto !important;} table.itemSummary th.action-cell, table.itemSummary td.action-cell { width: 15%; text-align: right;} table.itemSummary td.action-cell i { padding-right: 10px;} #discountCode input[type="text"] { width: 100%; padding: 0 4px; line-height: 32px; height: 32px; box-sizing: border-box; margin-right: 0;} #discountCode, table.basketPriceBreakdown { width: 100%; float: none; } #payment-options { text-align: center;} #payment-options p, #payment-options img { float: none; } #payment-options p { width:100%; text-align: center; padding-right: 0;} #payment-options img { display: inline-block; zoom: 1; *display: inline; margin: 5px;} #delivery_container { width: 100%;} #page-checkout2 table.basketPriceBreakdown { margin-top: 0;} #actions div { float: none;} #actions div input.button, #actions div a.button { margin-left: 0;} .login-box { width: 100%; box-sizing: border-box; margin-right: 0;} .login-box ul li p {min-height: 0} #checkout ol li { padding-bottom: 10px; margin-bottom: 10px;} #checkout ol li label, #checkout ol li input.text, #checkout ol li input[type="text"], #checkout ol li select, #checkout ol li #delivery_instructions { display: block; width: 100%; box-sizing: border-box;} #checkout ol li input.text, #checkout ol li input[type="text"], #checkout ol li select, #checkout ol li #delivery_instructions { min-height: 32px;} #checkout ol li #delivery_instructions { height: 96px; } #checkout ol li label { padding-right: 0; line-height: 1.4em; margin-bottom: 5px;} #checkout ol li.chkbx label { padding-left: 0; max-width: 92%; float: right; } #c-info #c-addr, #c-info #c-enq, #c-info #c-map { width: 100%; clear:both;} } /* DESKTOP-REGULAR, TABLET & MOBILE */ @media only screen and (max-width: 1100px) { .container-outer { width: 100%; overflow: hidden;} .container, .container-inner { margin-left: 6%; width: 88%; max-width: 88%; padding: 0; } #content, #aside { width: 100% !important; margin: 0 !important; margin-bottom: 20px !important;} }