@import url("https://fonts.googleapis.com/css?family=Lato"); @-o-viewport { width: device-width; } @viewport { width: device-width; } @-ms-viewport { width: auto; } @-moz-document url-prefix() { #Logo_Link img { min-height: 100px; } } .ff-focus { background: -webkit-linear-gradient(36deg, #2300ff, #c30552); background: -moz-linear-gradient(36deg, #2300ff, #c30552); background: -o-linear-gradient(36deg, #2300ff, #c30552); background: linear-gradient(54deg, #2300ff, #c30552); -webkit-background-size: 400% 400%; -moz-background-size: 400% 400%; -o-background-size: 400% 400%; background-size: 400% 400%; -webkit-animation: AnimationName 9s ease infinite; -moz-animation: AnimationName 9s ease infinite; -o-animation: AnimationName 9s ease infinite; animation: AnimationName 9s ease infinite; } @-webkit-keyframes AnimationName { 0% { background-position: 0% 51%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 51%; } } @-moz-keyframes AnimationName { 0% { background-position: 0% 51%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 51%; } } @-o-keyframes AnimationName { 0% { background-position: 0% 51%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 51%; } } @keyframes AnimationName { 0% { background-position: 0% 51%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 51%; } } .firefox-focus { background: -webkit-linear-gradient(36deg, #2300ff, #C30509); background: -moz-linear-gradient(36deg, #2300ff, #C30509); background: -o-linear-gradient(36deg, #2300ff, #C30509); background: linear-gradient(54deg, #2300ff, #C30509); -webkit-background-size: 400% 400%; -moz-background-size: 400% 400%; -o-background-size: 400% 400%; background-size: 400% 400%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; -o-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } html.lt-ie9 #ie8-msg { display: block; } body { background: #fff; font-family: "Museo-sans", Helvetica, Arial, Sans-serif; font-weight: 300; } h1 { font-weight: 100; letter-spacing: -1px; } h2, h3, h4, h5, h6 { font-weight: 300; letter-spacing: -1px; } h3 { font-weight: 700; } a { color: #e46375; text-decoration: none; -webkit-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; } a:hover { color: #b03546; } p { margin: 0 0 15px 0; } p + ol { font-size: 0.938em; } em, i { font-style: normal; } .float-left { float: left; } footer#owt-bottom-subject { position: relative; top: 35px; } #wrapper { min-height: 100%; /*margin-bottom:-280px;*/ } #wrapper:after { /*content: ""; display: block; height:280px;*/ } form#ctl00 { padding-top: 10px; } .mc-cb-btn { color: #299FE6 !important; } a#MainContent_Cph_ContinueBrowsing_Button { color: #299FE6 !important; } .mc-cb-btn { width: auto; padding: 0 20px 0 16px; margin-right: 20px; } #owt-mainnav h1#MainContent_Cph_MC_H1.mc-h1 { margin: 5px auto; } #owt-mainnav h1#MainContent_Cph_MC_H1.mc-h1:before { background: none; } h1#MainContent_Cph_MC_H1 { color: #299FE6 !important; } h1#MainContent_Cph_MC_H1:hover { color: #299FE6 !important; } .button { display: block; float: left; text-align: center; color: #fff !important; border: none; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; font-size: 13px !important; font-weight: 700; text-transform: uppercase; padding: 8px 20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #6379b1; cursor: pointer; } .button:hover { color: #fff; background: #788EC3; } .full-width-bg { width: 100%; background: #222; } .full-width-bg.header-bg { height: 53px; } .full-width-bg.footer-bg { height: 280px; } .full-width-bg .multi-colour-row { width: 100%; height: 5px; float: left; } .full-width-bg .multi-colour-row span { float: left; width: 12.5%; display: block; height: 100%; } .full-width-bg .multi-colour-row .bg-red { background: #e46375; } .full-width-bg .multi-colour-row .bg-orange { background: #f1a542; } .full-width-bg .multi-colour-row .bg-purple { background: #6f5694; } .full-width-bg .multi-colour-row .bg-blue { background: #6379b1; } .full-width-bg header { color: #fff; background: #222; text-align: center; } .full-width-bg header #mobile-menu-btn, .full-width-bg header #mobile-search-btn { position: absolute; left: 15px; top: 20px; cursor: pointer; z-index: 1000; } .full-width-bg header #mobile-search-btn { right: 15px; left: auto; top: 18px; } .full-width-bg header #owt-banner, .full-width-bg header #phonenumber, .full-width-bg header #search { display: none; } .full-width-bg header .header-img { display: none; } .full-width-bg header #phonenumber { text-align: left; font-weight: 400; font-size: 1.688em; background: url(/imgs/customusbdrives-phone-icon.png) right center no-repeat; padding-right: 40px; float: right; height: 35px; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; } .full-width-bg header #search { position: absolute; right: 7%; top: 5px; width: 100%; padding-left: 15%; margin-top: 10px; z-index: 1000; } .full-width-bg header #search input { background: none; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; font-size: 0.813em; font-weight: 400; text-transform: uppercase; border: 0; border-bottom: 2px solid #222; height: 38px; width: 84%; color: #222; outline: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .full-width-bg header #search a { display: block; background: url(/imgs/customusbdrives-search-btn.svg) right 1px no-repeat; width: 33px; height: 39px; float: right; } .main-nav-row { overflow: hidden; position: relative; height: 1000px; margin-bottom: -1000px; top: -62px; } #menu-wrap { position: relative; display: none; } #menu-wrap span { display: none; font-family: "Museo-sans", Helvetica, Arial, Sans-serif; font-size: 26px; font-weight: 100; color: #fff; float: left; text-align: left; background: #CC5353 url(/imgs/customusbdrives-nav-down-a-bg.png) 123px center no-repeat; padding-right: 12px; position: absolute; top: 30px; left: 0; right: 0; cursor: pointer; padding: 10px 28px 10px 12px; border: 1px solid #E68E8E; margin: auto; width: 144px; } #menu-wrap span:hover { border-color: #FFBABA; } #menu-wrap span.darker { background-color: #BB4141; } #menu-wrap nav#main-nav { color: #fff; margin: 0 auto; margin-top: 12px; } #menu-wrap nav#main-nav a { display: block; float: left; height: 80px; padding-top: 30px; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; font-size: 16px; text-transform: uppercase; color: #fff; border-left: 1px solid #626262; margin-right: 3.5%; padding-left: 3.5%; text-align: center; font-weight: 400; background: url(/imgs/customusbdrives-nav-a-bg.png) right 37px no-repeat; padding-right: 12px; } #menu-wrap nav#main-nav a:hover { color: #e46375; } #menu-wrap nav#main-nav a:first-of-type { border-left: 0; } body.nomenu #menu-wrap { display: none !important; } body.nomenu #search { display: none !important; } body.nomenu #phonenumber { display: none !important; } .nomenu #owt-mainnav.main-content { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } #owt-mainnav h1.mc-h1, #owt-mainnav h1 { background-color: #3e3e3e !important; color: white !important; } #owt-middle-subject { background: #fff; padding: 20px; padding-top: 10px; position: relative; -webkit-transition: padding 0.2s ease-in-out; -o-transition: padding 0.2s ease-in-out; transition: padding 0.2s ease-in-out; -moz-transition: padding 0.2s ease-in-out; } #owt-middle-subject.search-open { /*padding-top:80px;*/ } #owt-middle-subject #main-menu-btn, #owt-middle-subject .flexslider { display: none; } #owt-middle-subject .flexslider { height: 412px; } #owt-middle-subject #main-menu-btn { position: absolute; top: 17px; left: 20px; cursor: pointer; z-index: 1000; } #owt-middle-subject #main-menu-btn:hover { opacity: 0.7; } #owt-middle-subject h1 { font-size: 1.25em; text-align: left; margin-top: 5px; margin-bottom: 5px; padding-bottom: 4px; display: inline-block; color: #fff; padding: 12px; margin-left: -38px; background: #444; position: relative; } #owt-middle-subject h1:before { content: ""; background: url(/imgs/customusbdrives-h1-bg.png) no-repeat; width: 16px; height: 16px; position: absolute; top: -17px; left: 2px; } #owt-middle-subject h1.home-h1 { margin-top: 12px; } #owt-middle-subject h2 { margin-bottom: 0; font-size: 1.188em; padding-bottom: 4px; font-weight: 700; } footer { padding-top: 30px; background: #222; } footer h5 { color: #fff; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; font-size: 1.5em; font-weight: 700; text-transform: uppercase; background: none; padding: 30px 0 0 0; margin: 0; text-align: center; } footer h5.connect-with-us { background: url(/imgs/customusbdrives-connect-with-us.png) 50% 0 no-repeat; } footer h5.our-policies { background: url(/imgs/customusbdrives-our-policies.png) 50% 0 no-repeat; } footer h5.extra-stuff { background: url(/imgs/customusbdrives-extra-stuff.png) 50% 0 no-repeat; } footer ul { text-align: center; margin-bottom: 40px; padding-left: 0; } footer ul li { list-style-type: none; margin: 8px 0; } footer ul li a { color: #fff; font-family: "Museo-sans", Helvetica, Arial, Sans-serif; font-size: 1.063em; font-weight: 300; } footer ul li a:hover { color: #e46375; } footer .copyright { text-align: center; font-size: 0.750em; margin-top: -5px; color: #fff; } #discount-div { display: none; width: 100%; height: 100%; background: url(/imgs/lb-bg.png); position: fixed; left: 0; top: 0; z-index: 5000; } #discount-div div img { position: absolute; top: 15px; right: 15px; cursor: pointer; z-index: 5000; } #discount-div div img:active { cursor: pointer; } #discount-div div { background: #fff; color: #000; padding: 20px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding-top: 10px; max-width: 90%; } #discount-div div.discount { height: 240px; width: 500px; font-size: 1.1em; text-align: center; } #discount-div div.memory-pricing { height: 600px; width: 800px; max-height: 95%; overflow: auto; display: none; } #discount-div div.memory-pricing table th { border-bottom: 1px solid #f3bac2; } #discount-div div h2 { font-weight: 700; } /*browse page*/ #breadCrumb { display: none; color: #aaa; } #breadCrumb a { font-size: 0.750em; display: inline-block; margin: 0 12px; } #breadCrumb a.bch { margin-left: 0; } #breadCrumb a.bci:nth-last-child(1) { color: #aaa; } #owt-mainnav p { font-size: 0.875em; line-height: 140%; } #owb-filter-toolbar { margin: 5px 0 5px 0; font-size: 0.863em; } #owb-filter-toolbar .po-select:last-child { display: none; } #owb-filter-toolbar select { width: 180px; height: 34px; border: 1px solid #d3d3d3; margin: 10px 0 0 5%; padding-left: 5px; float: left; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 -2px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 -2px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 -2px rgba(0, 0, 0, 0.5) inset; -moz-appearance: none; -webkit-appearance: none; text-indent: 0.01px; -o-text-overflow: ""; text-overflow: ""; background: url(/imgs/drop-arrow.svg) no-repeat scroll 161px 12px #fff; } #owb-filter-toolbar span.tag-filter { width: 60px; float: left; margin-top: 15px; clear: both; } #owb-thumbnails, #fp-thumbs { margin-top: 15px; text-align: center; } #owb-thumbnails .tnwrap, #fp-thumbs .tnwrap { height: 240px !important; } #owb-thumbnails .tnpic, #fp-thumbs .tnpic { height: 190px; position: relative; } #owb-thumbnails .tnpic img, #fp-thumbs .tnpic img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-height: 170px; } #owb-thumbnails .tntitle, #fp-thumbs .tntitle { font-size: 0.875em; line-height: 120%; } #owb-thumbnails .tntitle a, #fp-thumbs .tntitle a { color: #222; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; text-transform: uppercase; font-weight: 700; } #owb-thumbnails .tntitle a:hover, #fp-thumbs .tntitle a:hover { color: #e46375; } #owb-thumbnails .tndesc, #fp-thumbs .tndesc { font-size: 0.750em; color: #aaa; height: 58px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; line-height: 120%; margin-top: 6px; display: none; } #owb-thumbnails .tnprice, #fp-thumbs .tnprice { color: #e46375; } #owb-thumbnails .tnprice span, #fp-thumbs .tnprice span { color: #aaa; font-weight: normal; } #owb-thumbnails .srchcode, #fp-thumbs .srchcode { display: none; } #owb-thumbnails [class*="column"] + [class*="column"]:last-child, #fp-thumbs [class*="column"] + [class*="column"]:last-child { float: left; } /*product page*/ #product-page { margin-top: -8px; } #product-page .pcode { font-size: 0.813em; text-align: center; margin-bottom: 5px; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; text-transform: uppercase; font-weight: 400; text-align: left; } #product-page h1#product-h1 { margin-bottom: 5px; margin-top: -5px; } #product-page #main-img-box { position: relative; height: 400px; margin: 0 auto; } #product-page #main-img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; cursor: pointer; max-height: 400px; max-width: 95%; } #product-page #main-img-box > div { display: none; } #product-page .addthiswrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; top: auto; width: 310px; height: 27px; margin-bottom: 15px; } #product-page .addthiswrap a { font-size: 0.863em; margin-right: 10px; } #product-page .addthiswrap a.addthis_button_facebook { margin-right: 0; } #product-page .addthiswrap a span { margin: 4px 6px 0 0; } #product-page #main-pricing-box { padding: 0 2% 0 2%; padding-top: 60px; float: left; background: #fff; border: 1px solid #d3d3d3; position: relative; font-size: 0.863em; padding-bottom: 15px; margin-top: 15px; float: left; width: 100%; /* #finalise-buttons { float:left; width:100%; margin-top:15px; padding:0 8%; a { width:44%; padding:8px 2%; line-height:130%; font-weight:700; font-size:0.813em; &#order-button { margin-right:6%; background-color:$green; &:hover { background-color:$greenhover; } } &#enquiry-button { margin-left:6%; } } }*/ } #product-page #main-pricing-box h2 { background: #DD5050; color: #fff; text-align: center; padding: 12px 0; font-weight: 300; font-size: 1.35em; margin-top: 0; position: absolute; top: -1px; left: -1px; width: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-left: 2px solid #DD5050; } #product-page #main-pricing-box #product-pricing-box, #product-page #main-pricing-box #branding-select-box { position: relative; } #product-page #main-pricing-box #branding-select-box { z-index: 5; } #product-page #main-pricing-box #branding-select-box #branding-select-radio-box { padding-left: 12px; } #product-page #main-pricing-box #product-pricing-box { z-index: 4; } #product-page #main-pricing-box .branding-radio-inner-box { float: left; padding: 4px 12px; background: #d3d3d3; border: 1px solid #aaa; border-bottom: 0; cursor: pointer; font-size: 0.863em; margin-bottom: -1px; margin-right: 5px; } #product-page #main-pricing-box .branding-radio-inner-box.tab-active { background: #eaeaea; border: 1px solid #c3c3c3; border-bottom: 0; } #product-page #main-pricing-box .clickToView { font-size: 0.813em; margin-left: 5px; display: none; } #product-page #main-pricing-box #pricing-table-box { background: #eaeaea; float: left; border: 1px solid #d3d3d3; width: 100%; margin: 0 auto; padding: 2% 4% 2% 4%; } #product-page #main-pricing-box #pricing-table-box #price-tabs > ul { display: none; } #product-page #main-pricing-box #pricing-table-box #secondary-printing-box { display: none; } #product-page #main-pricing-box table { border: 1px solid #ccc; background: #fff; margin-top: 10px; padding: 0 8px; width: 100%; } #product-page #main-pricing-box table.additional-print-table { font-size: 1.063em !important; } #product-page #main-pricing-box table.additional-print-table table { font-size: 1.063em; } #product-page #main-pricing-box table tr { padding: 4%; color: #000; font-size: 0.750em; } #product-page #main-pricing-box table tr th { color: #222; padding-left: 4px; font-weight: 700; font-size: 1em; } #product-page #main-pricing-box table tr td { padding: 3px 5px; text-align: center; } #product-page #main-pricing-box table tr td.qty { border-bottom: 1px solid #ccc; } #product-page #main-pricing-box .pricing-info { cursor: pointer; margin-top: 15px; } #product-page #main-pricing-box .pricing-info:before { content: "Click for more info"; float: right; width: 45%; background: url(/layouts/discount.png) 50% 0 no-repeat; height: 80px; display: block; cursor: pointer; text-align: center; padding-top: 70px; font-size: 0.813em; text-decoration: underline; color: #e46375; } #product-page #main-pricing-box ul { font-size: 0.863em; padding-left: 0; margin-bottom: 0; width: 55%; cursor: default; } #product-page #main-pricing-box ul li { line-height: 130%; list-style-type: none; background: url(/imgs/lightgrey-libg.png) no-repeat 0 6px; padding-left: 12px; padding-bottom: 4px; } #product-page #main-pricing-box ul li .pcode-box { display: none; } #product-page #main-pricing-box ul li.memory-link { color: #e46375; cursor: pointer; } #product-page #main-pricing-box ul li.memory-link:hover { color: #b03546; } #product-page #main-pricing-box #price-tabs-3 img { display: none; } #product-page #main-pricing-box #order-button, #product-page #main-pricing-box #quote-button { background-color: #3DAC45; width: 48%; float: left; display: block; height: 51px; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-sizing: border-box; } #product-page #main-pricing-box #order-button:hover, #product-page #main-pricing-box #quote-button:hover { background-color: #51c159; } #product-page #main-pricing-box #quote-button { background-color: #4a83c9; } #product-page #main-pricing-box #quote-button:hover { background-color: #6999d2; } #product-page #main-pricing-box a#order-button { width: 100% !important; } #product-page #main-pricing-box .additional-print-box { display: none; } #product-page #main-pricing-box .additional-print-box h3 { margin: 5px 0; } #product-page #main-pricing-box .additional-print-box .additional-print-label { font-size: 0.875em; } #product-page #main-pricing-box #product-enquiry-form { float: left; width: 100%; height: auto; background: #eaeaea; margin-top: 20px; padding: 15px; position: relative; padding-bottom: 70px; display: none; font-family: "Museo-sans", Helvetica, Arial, Sans-serif !important; } #product-page #main-pricing-box #product-enquiry-form h3, #product-page #main-pricing-box #product-enquiry-form h4 { display: block; float: none; text-align: center; font-weight: 700; margin: 0 0 4px 0; color: #222; font-size: 1.3em; } #product-page #main-pricing-box #product-enquiry-form h3 { background: #6379b1; color: #fff; width: 100%; position: absolute; top: 0; left: 0; padding: 8px; font-weight: 100; } #product-page #main-pricing-box #product-enquiry-form h4 { font-weight: 500; margin-top: 50px; margin-bottom: 15px; font-size: 1em; color: #222; letter-spacing: 0; text-align: left; } #product-page #main-pricing-box #product-enquiry-form #enquiry-form { margin-top: 20px; } #product-page #main-pricing-box #product-enquiry-form #po-box1, #product-page #main-pricing-box #product-enquiry-form #po-box2 { width: 100%; height: auto; float: left; padding: 0 2%; position: static; margin-top: 0; background: none; border: none; } #product-page #main-pricing-box #product-enquiry-form #po-box2 .mmlbl { font-weight: 400; } #product-page #main-pricing-box #product-enquiry-form .pnlbl, #product-page #main-pricing-box #product-enquiry-form .pfimgdiv, #product-page #main-pricing-box #product-enquiry-form .box1-name, #product-page #main-pricing-box #product-enquiry-form .box2-name { display: none; } #product-page #main-pricing-box #product-enquiry-form input[type="text"], #product-page #main-pricing-box #product-enquiry-form input[type="tel"], #product-page #main-pricing-box #product-enquiry-form input[type="email"], #product-page #main-pricing-box #product-enquiry-form select, #product-page #main-pricing-box #product-enquiry-form textarea { border: 1px solid #d3d3d3; height: 30px; margin-bottom: 8px; padding-left: 6px; color: #444; } #product-page #main-pricing-box #product-enquiry-form input[type="text"], #product-page #main-pricing-box #product-enquiry-form input[type="tel"], #product-page #main-pricing-box #product-enquiry-form input[type="email"] { font: 300 1em "Museo-sans", Helvetica, Arial, Sans-serif; float: left; clear: both; padding: 0; padding-left: 7px; } #product-page #main-pricing-box #product-enquiry-form label { font: 300 1em "Museo-sans", Helvetica, Arial, Sans-serif; float: left; display: block; width: 100%; margin-bottom: 3px; position: static !important; } #product-page #main-pricing-box #product-enquiry-form label.signlbl { width: auto; } #product-page #main-pricing-box #product-enquiry-form input, #product-page #main-pricing-box #product-enquiry-form textarea, #product-page #main-pricing-box #product-enquiry-form select, #product-page #main-pricing-box #product-enquiry-form .rfabs { position: static; } #product-page #main-pricing-box #product-enquiry-form select { padding: 5px; height: 32px; width: 68% !important; font: 300 1em "Museo-sans", Helvetica, Arial, Sans-serif; color: #444; float: left; background-position: 94% 12px; } #product-page #main-pricing-box #product-enquiry-form textarea { height: 80px !important; width: 80%; padding: 8px; font: 300 0.938em "Museo-sans", Helvetica, Arial, Sans-serif; } #product-page #main-pricing-box #product-enquiry-form textarea.cmmtxt { width: 95%; color: #aaa; } #product-page #main-pricing-box #product-enquiry-form .rfabs { float: left; margin: -4px 0 4px 0; width: 100%; font-style: normal; font-size: 0.750em; } #product-page #main-pricing-box #product-enquiry-form .radio-box { display: block; width: 100%; } #product-page #main-pricing-box #product-enquiry-form .radio-label { margin-top: 14px; } #product-page #main-pricing-box #product-enquiry-form .radio-text, #product-page #main-pricing-box #product-enquiry-form #rblNl input ~ label { float: left; margin: 0 34px 0 6px; display: block; margin-bottom: 8px; padding-top: 2px; width: auto; } #product-page #main-pricing-box #product-enquiry-form .radio-text.emlbl, #product-page #main-pricing-box #product-enquiry-form #rblNl input ~ label.emlbl { margin-right: 0; } #product-page #main-pricing-box #product-enquiry-form input[type="radio"] { float: left; margin-top: 3px; background: none; height: 13px; background: transparent !important; } #product-page #main-pricing-box #product-enquiry-form input[type="checkbox"] { background: transparent !important; border: none; } #product-page #main-pricing-box #product-enquiry-form #rblNl { background: none; font-size: 1em !important; float: left; padding-left: 0; margin: 0; height: 25px; width: 100%; } #product-page #main-pricing-box #product-enquiry-form #rblNl li { background: none; display: block; float: left; padding-left: 0; list-style-type: none; } #product-page #main-pricing-box #product-enquiry-form #newsletterBox { position: static; height: auto; width: auto; } #product-page #main-pricing-box #product-enquiry-form .button { width: 160px; height: 40px; margin-top: 10px; position: absolute; margin: auto; left: 0; right: 0; top: auto; bottom: 1%; border: none !important; background: #6379b1 !important; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; font-weight: 700; font-size: 13px !important; } #product-page #main-pricing-box #product-enquiry-form .button:hover { background: #788EC3 !important; } #product-page #main-pricing-box #product-enquiry-form .button:active { height: 38px; margin-top: 2px; } #product-page #main-pricing-box #product-enquiry-form .sml-input { width: 30%; clear: right; } #product-page #main-pricing-box #product-enquiry-form .med-input { width: 65%; } #product-page #main-pricing-box #product-enquiry-form .large-input { width: 85%; } #product-page #main-pricing-box #product-enquiry-form .method-box { float: left; width: 100%; position: static; margin-bottom: -16px; } #product-page #main-pricing-box #product-enquiry-form .method-box.enqnewsletter { margin-bottom: 0; } #product-page #main-pricing-box #product-enquiry-form .rfvrbl { margin-top: 3px; } #product-page #main-pricing-box #product-enquiry-form .enquiry-confirm { background-color: #3dac45; width: 104.3%; height: 35px; margin-left: -2.2%; margin-bottom: 10px; padding: 5px 0 5px 1px; color: white; font-weight: bold; font-size: 17pt; text-align: center; line-height: 1.5em; } #product-page #product-details > div { border: 1px solid #d3d3d3; position: relative; font-size: 0.863em; padding-bottom: 15px; margin-top: 15px; float: left; padding: 50px 10px 5px 10px; font-size: 14px; background: #f3f3f3; } #product-page #product-details > div b ~ li { list-style-type: none; } #product-page #product-details > div h3:before { background: #f1a542 !important; } #product-page #product-details > div.product-details-first h3:before { background: #e46375 !important; } #product-page #product-details > div.product-details-last h3:before { background: #8596c2 !important; } #product-page #product-details > div p { font-size: 14px; } #product-page #product-details > div p span.memory-link { color: #e46375; cursor: pointer; } #product-page #product-details > div p span.memory-link:hover { color: #b03546; } #product-page #product-details > div h3 { background: #DD5050; color: #fff; text-align: center; padding: 12px 0; font-weight: 300; font-size: 1.35em; margin-top: 0; position: absolute; top: -1px; left: -1px; width: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-left: 2px solid #DD5050; background: #444; text-align: left; font-size: 1.35em; color: #fff; border: 0; padding: 6px 14px; display: inline-block; width: auto; margin-top: 10px; font-weight: 300; } #product-page #product-details > div h3:before { content: ""; width: 6px; height: 6px; display: inline-block; margin: 0 4px 3px -4px; } #product-page #product-details > div h4, #product-page #product-details > div .pa-type { margin: 10px 0 5px 0; font-size: 1.135em; font-weight: 700; } #product-page #product-details > div .pa-type { display: block; letter-spacing: -1px; } #product-page #product-details > div .product-div-caption { display: block; margin-top: 40px; font-size: 0.875em; color: #888; } #product-page #product-details > div ul, #product-page #product-details > div ol { padding-left: 25px; } .enquiry-confirm { background-color: #3dac45; width: 100%; height: 42px; margin-left: 0; margin-bottom: 10px; padding: 5px 0px 5px 0px; color: white; font-weight: bold; font-size: 17pt; text-align: center; line-height: 1.5em; } /*order page*/ #ProductOrder_Form #pof-wrapper { width: 100%; float: left; padding-top: 20px; } #ProductOrder_Form #pof-wrapper > div { background: #eaeaea; border: 0; font-size: 0.875em; padding-bottom: 30px; } #ProductOrder_Form #pof-wrapper > div#pof-img { background: #fff; border: none; position: relative; display: none; height: 510px; } #ProductOrder_Form #pof-wrapper > div#pof-img img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #ProductOrder_Form #pof-wrapper > div#pof-orderdetails { min-height: 320px; } #ProductOrder_Form #pof-wrapper > div#pof-orderdetails .pofhead { margin-bottom: 20px; } #ProductOrder_Form #pof-wrapper > div#pof-orderdetails .pofhead:first-child { background: #ed8e13; } #ProductOrder_Form #pof-wrapper > div#pof-orderdetails label, #ProductOrder_Form #pof-wrapper > div#pof-orderdetails select, #ProductOrder_Form #pof-wrapper > div#pof-orderdetails input, #ProductOrder_Form #pof-wrapper > div#pof-orderdetails span { position: static; float: left; clear: both; margin-left: 30px; margin-bottom: 5px; } #ProductOrder_Form #pof-wrapper > div#pof-orderdetails .pofpqtytxt ~ span { clear: none; } #ProductOrder_Form #pof-wrapper > div#pof-contact { padding-top: 2%; } #ProductOrder_Form #pof-wrapper > div#pof-contact .pofhead { position: absolute !important; top: 0; left: 0; margin-top: 0; } #ProductOrder_Form #pof-wrapper > div#pof-contact .pofhead:first-child { background: #df495e; } #ProductOrder_Form #pof-wrapper > div .pofhead { position: static !important; float: left; display: block; width: 100%; padding: 6px 0 0 20px; font-size: 1.063em; } #ProductOrder_Form #pof-wrapper > div .pofhead:first-child { color: #fff; padding-bottom: 6px; } #ProductOrder_Form #pof-wrapper .allrfv { font-size: 0.813em; } #ProductOrder_Form #pof-wrapper .sml-length { width: 6% !important; } #ProductOrder_Form #pof-wrapper .med-length { width: 15% !important; } #ProductOrder_Form #pof-wrapper .lge-length { width: 25% !important; } #ProductOrder_Form #pof-wrapper .x-lge-length { width: 40% !important; } #ProductOrder_Form #pof-wrapper #pof-contact .sml-length { width: 24% !important; } #ProductOrder_Form #pof-wrapper #pof-contact .med-length { width: 50% !important; } #ProductOrder_Form #pof-wrapper #pof-contact .lge-length { width: 50% !important; } #ProductOrder_Form #pof-wrapper #pof-contact .x-lge-length { width: 65% !important; } #ProductOrder_Form #pof-wrapper #pof-finishservices label, #ProductOrder_Form #pof-wrapper #pof-finishservices select, #ProductOrder_Form #pof-wrapper #pof-finishservices span, #ProductOrder_Form #pof-wrapper #pof-finishservices input[type="text"] { position: static; float: left; clear: both; margin: 0 0 5px 30px; } #ProductOrder_Form #pof-wrapper #pof-finishservices label.pofposddl, #ProductOrder_Form #pof-wrapper #pof-finishservices select.pofposddl, #ProductOrder_Form #pof-wrapper #pof-finishservices span.pofposddl, #ProductOrder_Form #pof-wrapper #pof-finishservices input[type="text"].pofposddl { margin-top: 10px; } #ProductOrder_Form #pof-wrapper #pof-finishservices .pofhead { margin-bottom: 20px; } #ProductOrder_Form #pof-wrapper #pof-finishservices .pofhead:first-child { background: #6f5694; } #ProductOrder_Form #pof-wrapper #pof-finishservices .poffinfolbl { left: 0; display: block; } #ProductOrder_Form #pof-wrapper #pof-finishservices .poffinfotxt { left: 20px; } #ProductOrder_Form #pof-wrapper #pof-finishservices table tr td { padding: 0 8px; } #ProductOrder_Form #pof-wrapper #pof-finishservices table input.med-length { position: relative !important; float: none; clear: none; } #ProductOrder_Form #pof-wrapper #pof-finishservices #pof-div { width: auto; margin-left: 0; } #ProductOrder_Form #pof-wrapper #pof-finishservices .med-length { width: 40% !important; } #ProductOrder_Form #pof-wrapper #pof-finishservices .x-lge-length { width: 84% !important; } #ProductOrder_Form #pof-wrapper textarea, #ProductOrder_Form #pof-wrapper input, #ProductOrder_Form #pof-wrapper select { background-color: #fff !important; border: 1px solid #bababa !important; color: #444 !important; } #ProductOrder_Form #pof-wrapper input[type="radio"], #ProductOrder_Form #pof-wrapper input[type="checkbox"] { background: transparent !important; border: none !important; } #ProductOrder_Form #pof-wrapper textarea { padding: 4px !important; } #ProductOrder_Form #pof-wrapper input[type="text"], #ProductOrder_Form #pof-wrapper input[type="email"], #ProductOrder_Form #pof-wrapper input[type="tel"] { height: 27px !important; padding-left: 5px !important; } #ProductOrder_Form #pof-wrapper select { min-width: 163px !important; max-width: 180px; background-position: 156px 9px; height: 28px !important; font-family: "Museo-sans", Helvetica, Arial, Sans-serif; font-size: 13px; } #ProductOrder_Form #pof-wrapper .promocodetxt { right: 434px; } #ProductOrder_Form #pof-wrapper #pof-finaliseorder { height: auto !important; float: left; padding: 0 0 30px 0; } #ProductOrder_Form #pof-wrapper #pof-finaliseorder .pofhead:first-child { background: #6379b1; } #ProductOrder_Form #pof-wrapper #pof-finaliseorder .pofinfo { padding-right: 15px; } #ProductOrder_Form #pof-wrapper #pof-finaliseorder .x-lge-length { width: 84% !important; } #ProductOrder_Form #pof-wrapper #pof-finaliseorder .howufuslbl { margin-bottom: 10px; } #ProductOrder_Form #pof-wrapper #pof-finaliseorder .orderFoundUs { margin-top: 0; clear: left; } #ProductOrder_Form #pof-wrapper .pofpnaspx, #ProductOrder_Form #pof-wrapper .pofpcaspx { left: 115px; } #ProductOrder_Form #pof-wrapper .pofcpctxtrfv { left: 207px; width: 300px; } #ProductOrder_Form #pof-wrapper .pofcfnlblrfv, #ProductOrder_Form #pof-wrapper .pofclnlblrfv, #ProductOrder_Form #pof-wrapper .pofcptxtrfv, #ProductOrder_Form #pof-wrapper .pofcttxtrfv { left: 305px; } #ProductOrder_Form #pof-wrapper .pofpftrfv { top: 9px; left: -96px; } #ProductOrder_Form #pof-wrapper .howufuslbl, #ProductOrder_Form #pof-wrapper .orllbl, #ProductOrder_Form #pof-wrapper .promocodelbl, #ProductOrder_Form #pof-wrapper .orlPRb, #ProductOrder_Form #pof-wrapper .orlplbl, #ProductOrder_Form #pof-wrapper .orlNRb, #ProductOrder_Form #pof-wrapper .orlnlbl, #ProductOrder_Form #pof-wrapper .orderFoundUs, #ProductOrder_Form #pof-wrapper .promocodetxt, #ProductOrder_Form #pof-wrapper input.pofsubmitbtn, #ProductOrder_Form #pof-wrapper .cfvrbl, #ProductOrder_Form #pof-wrapper .onllbl, #ProductOrder_Form #pof-wrapper .pofcommentstxt { position: static !important; float: left; margin-left: 22px; } #ProductOrder_Form #pof-wrapper .orllbl, #ProductOrder_Form #pof-wrapper .orlPRb, #ProductOrder_Form #pof-wrapper .promocodelbl, #ProductOrder_Form #pof-wrapper input.pofsubmitbtn, #ProductOrder_Form #pof-wrapper .howufuslbl { clear: both; } #ProductOrder_Form #pof-wrapper .howufuslbl, #ProductOrder_Form #pof-wrapper .orderFoundUs { margin-top: 30px; } #ProductOrder_Form #pof-wrapper .onllbl { clear: left; } #ProductOrder_Form #pof-wrapper .orllbl { margin-top: 15px; } #ProductOrder_Form #pof-wrapper .orlplbl, #ProductOrder_Form #pof-wrapper .orlnlbl { margin-left: 7px; margin-top: -3px; } #ProductOrder_Form #pof-wrapper .orlNRb { margin-left: 30px; } #ProductOrder_Form #pof-wrapper .orlPRb { margin-bottom: 14px; } #ProductOrder_Form #pof-wrapper input.pofsubmitbtn { margin-top: 30px; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif; background: #3dac45 !important; border: none !important; color: #fff !important; font-weight: 700; font-size: 13px !important; width: 150px; height: 40px; } #ProductOrder_Form #pof-wrapper input.pofsubmitbtn:hover { background: #5dcc65 !important; } /*home page*/ .flexslider { margin-bottom: 40px; position: relative; display: none; } .flexslider.loaded { background: url(/imgs/customusbdrives-banner-bg.jpg) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .flexslider.loaded li img { display: block !important; } .flexslider:hover ul.flex-direction-nav { opacity: 0.5; } .flexslider li { list-style-type: none !important; } .flexslider li img { display: none; } .flexslider ul.slides { float: left; padding-left: 0; margin: 0; } .flexslider ol.flex-control-nav { width: 84px; display: block; float: right; padding-top: 5px; -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px; z-index: 999; position: absolute; bottom: -25px; right: 0; height: 25px; padding-left: 0; margin: 0; } .flexslider ol.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; list-style-type: none; margin-top: 5px; } .flexslider ol.flex-control-nav li a { text-indent: -9999px; width: 9px; height: 9px; display: block; background: #666; background: rgba(194, 194, 194, 0.4); cursor: pointer; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); } .flexslider ol.flex-control-nav li a.flex-active { background: rgba(78, 78, 78, 0.9); cursor: default; } .flexslider ul.flex-direction-nav { opacity: 0; position: absolute; width: 100%; top: 47%; z-index: 1001; -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; } .flexslider ul.flex-direction-nav li { list-style-type: none; } .flexslider ul.flex-direction-nav li a { text-indent: -9999px; display: block; width: 40px; height: 40px; cursor: pointer; background: url(/imgs/slider-arrows.png) no-repeat; position: absolute; top: 50%; margin-top: -20px; } .flexslider ul.flex-direction-nav li a.flex-prev { left: 15px; } .flexslider ul.flex-direction-nav li a.flex-prev:hover { background-position: 0 -50px; } .flexslider ul.flex-direction-nav li a.flex-next { right: 15px; background-position: -51px 0; } .flexslider ul.flex-direction-nav li a.flex-next:hover { background-position: -51px -50px; } .lt-ie10 .flexslider { float: none; } .lt-ie10 .flexslider ul.slides { z-index: 10000; } #mobile-categories ~ p, #mobile-categories ~ p ~ p, #mobile-categories ~ p ~ p ~ h2 { font-size: 1.6em !important; text-align: center; } #mobile-categories ~ p ~ p ~ h2 { margin-top: 35px; } #blogbox { background: #f5f5f5; border: 1px solid #d3d3d3; padding: 20px; margin: 10px 0; } #blogbox h3 { margin: 0; } #blogbox ul { padding-left: 25px; } #blogbox ul li { margin-bottom: 15px; } #blogbox ul li span.fp-blog-date { font-weight: 300; margin-right: 15px; color: #999; font-size: 0.863em; } #blogbox ul li span.fp-blog-desc { display: block; font-size: 0.863em; color: #777; } #blogbox ul li a { display: block; font-weight: 700; } #blogbox ul li a i { font-style: normal; font-size: 0.863em; font-weight: 300; color: #6379b1; } /*contact form*/ h1.contactingHeader { float: left; } #contact-us-form { clear: left; font-size: 0.863em; } #contact-us-form select, #contact-us-form textarea { width: 80% !important; } #contact-us-form .button { background: #6379b1 !important; border: none; font-family: "brandon-grotesque", Helvetica, Arial, Sans-serif !important; font-weight: 700; } #contact-us-form .button:hover { background: #788EC3 !important; } #contact-us-info table { font-size: 0.863em; } #contact-us-info table tr td:first-child { font-weight: 600; } #contact-us-info table td { padding-right: 15px; } #lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: url(/imgs/lb-bg.png); z-index: 10000; display: none; } #lightbox #lightbox-img-box { background: #fff url(/imgs/loader.gif) 50% 50% no-repeat; border-top: 50px solid #df495e; position: relative; margin: 0 auto; margin-top: 30px; min-height: 400px; min-width: 400px; max-height: 90%; max-width: 800px; height: 90%; padding: 3%; -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } #lightbox #lightbox-img-box a { position: absolute; top: -38px; left: 15px; background: url(/imgs/download.png) no-repeat center right; padding-right: 30px; font-size: 0.938em; color: #fff; text-decoration: underline; } #lightbox #lightbox-img-box #hires-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-height: 100%; z-index: 3000; display: none; } #lightbox #lightbox-img-box #lightbox-close { position: absolute; top: -40px; right: 14px; cursor: pointer; } #ie8-msg { margin: 0 auto; text-align: center; background: #e46375; border-bottom: 1px solid #c02137; padding: 30px 10px; display: none; position: relative; z-index: 10000; color: #fff; font-weight: 700; } #ie8-msg a { color: #fff; text-decoration: underline; } .columns .cart-toolbar { margin: 42px 3px 0 !important; } /* Media Queries */ @media only screen and (min-width: 839px) and (max-width: 1025px) { .columns .cart-toolbar { margin: 75px 3px 0 !important; left: 50%; } } div#finalise-buttons .button { margin-top: 15px; } .cart-amount { font-family: 'Lato', sans-serif; font-size: 86% !important; line-height: 125% !important; font-weight: bold !important; } body.nomenu #Logo_Link { width: 900px !important; } _::-webkit-full-page-media body.nomenu #Logo_Link, _:future body.nomenu #Logo_Link, :root #Logo_Link body.nomenu #Logo_Link { width: 900px !important; } _::-webkit-full-page-media body.nomenu #Logo_Link img, _:future body.nomenu #Logo_Link img, :root #Logo_Link body.nomenu #Logo_Link img { width: 100px !important; } _::-webkit-full-page-media, _:future, :root body.nomenu #Logo_Link:after { position: fixed !important; } _::-webkit-full-page-media, _:future, :root body.nomenu #Logo_Link:after { float: right !important; } .nomenu #Logo_Link:after { color: #999 !important; white-space: nowrap !important; } .h1-cart-submit { color: white !important; } body.nomenu .mob-quote-amt { display: none !important; } body.nomenu span.mob-quote-amt, body.nomenu #mobile-cart-btn { display: none; } @media only screen and (max-width: 40.063em) { /* mobile only code*/ #menu-wrap.active span:after { content: ''; position: absolute; left: 73%; top: 100%; width: 0; height: 0; border-bottom: 10px solid transparent; border-top: 0px solid transparent; border-left: 40px solid #8a3434; clear: both; z-index: -1; } body.mob-menu-open { overflow-y: hidden; } body:not(.mob-menu-open) { overflow-y: auto; } .nomenu .full-width-bg.footer-bg { display: none; } body:not(.mob-menu-open) header #menu-wrap { left: -100%; } body.mob-menu-open header #menu-wrap { left: 0px; } body.nomenu.confirmpage img#mobile-logo { margin-top: 0px; } body.nomenu #owt-middle-subject, body.submitpage #owt-middle-subject { padding: 12px; padding-top: 55px; } body.nomenu header #menu-wrap, body.submitpage header #menu-wrap { left: -100% !important; } body.nomenu header #menu-wrap.active, body.submitpage header #menu-wrap.active { width: 101%; left: 0% !important; -webkit-transition: left 1.2s cubic-bezier(0, 0.92, 0, 1.39) !important; -o-transition: left 1.2s cubic-bezier(0, 0.92, 0, 1.39) !important; -moz-transition: left 1.2s cubic-bezier(0, 0.92, 0, 1.39) !important; transition: left 1.2s cubic-bezier(0, 0.92, 0, 1.39) !important; } .nomenu img#mobile-cart-btn, .nomenu img#mobile-search-btn { display: none !important; } body.nomenu.submitpage #mobile-logo { margin-top: 0px !important; } html body.nomenu { background-color: #222222 !important; } a#MainContent_Cph_ContinueBrowsing_Button, .cart-toolbar.dropdown-toolbar .dropdown-amount.cart-amount { display: none; } body.nomenu #menu-wrap { display: block !important; top: -63px !important; } body.nomenu #search { display: none !important; } body.nomenu #phonenumber { display: none !important; } .dropdown-main.cart-dropdown .dropdown-proceed.quote, .dropdown-main.cart-dropdown .dropdown-clear-all.quote { margin-top: 15px; height: 36px; } .dropdown-main.cart-dropdown .dropdown-proceed, .dropdown-main.cart-dropdown .dropdown-clear-all { line-height: 21px !important; } .dropdown-main.cart-dropdown .dropdown-proceed { margin-top: 15px; font-size: 75% !important; } body.nomenu .cart-amount.quo-amount { display: none; } body.nomenu { height: 80%; } .mob-quote-amt:not(:empty) { font-family: 'Lato', sans-serif; display: inline; position: absolute; background: none 0% 0%/auto repeat scroll padding-box border-box #3dac45; color: white; width: 20px; line-height: 20px; font-weight: bold; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; right: 46px; top: 5px; height: 20px; padding-left: 0px; z-index: 500 !important; } /**/ .cpf-mobile-menu { top: 53px !important; height: 43px !important; } .nomenu header #menu-wrap { top: -86px; } #mobile-logo { margin-top: 0px; } .nomenu #mobile-logo { margin-top: -25px; } .nomenu #owt-mainnav.main-content { -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important; -moz-box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important; box-shadow: 0 0 0px rgba(0, 0, 0, 0) !important; } .cpf-mobile-menu { z-index: 250 !important; } .full-width-bg header { background-color: rgba(0, 0, 0, 0) !important; } #wrapper .cart-toolbar-row.user-menu-active, .cart-toolbar-row.user-menu-active { -webkit-transform: translate3d(0, 60px, 0) !important; -moz-transform: translate3d(0, 60px, 0) !important; -ms-transform: translate3d(0, 60px, 0) !important; -o-transform: translate3d(0, 60px, 0) !important; transform: translate3d(0, 60px, 0) !important; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: cubic-bezier(0.01, 0.02, 0.18, 1.35); -moz-transition-timing-function: cubic-bezier(0.01, 0.02, 0.18, 1.35); -o-transition-timing-function: cubic-bezier(0.01, 0.02, 0.18, 1.35); transition-timing-function: cubic-bezier(0.01, 0.02, 0.18, 1.35); } .full-width-bg.header-bg { position: fixed; z-index: 1000; } #mobile-cart-btn:not(:empty) { display: inline; position: absolute; background: none 0% 0%/auto repeat scroll padding-box border-box #3dac45; color: white; width: 20px; line-height: 20px; font-weight: bold; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; right: 46px; height: 20px; padding-left: 0px; } img#mobile-cart-btn { display: block !important; cursor: pointer; position: absolute; right: 55px; top: 15px; fill: white; stroke: white; stroke-width: 1px; z-index: 200; } header { all: unset; all: initial; } header #search { all: unset; all: initial; } header #search * { all: unset; all: initial; } header #search *:hover, header #search *:active { /*all: unset;*/ /*all: initial;*/ } header #search { margin: 5px auto; margin-top: 10px !important; float: none !important; border: 2px solid #E46375 !important; width: 71% !important; background-color: white; } header #search input { height: 30px !important; font-size: 1.1em; width: 73% !important; padding: 7px; padding-left: 0; margin-left: -20px; border: 0 !important; } header #search a { background: url(/imgs/rwd-mob-search-btn.svg) no-repeat !important; width: 8%; height: 24px !important; padding: 10px; -webkit-appearance: none; margin-left: 0 !important; background-position: center !important; background-color: #E46375 !important; } header #search a:hover { background-position: center !important; } .nomenu header #search { margin-top: 0px !important; top: 0px !important; } header #menu-wrap { display: block; position: absolute; background: #222; width: 100%; float: left; min-height: 700px; height: 100vh; left: -100%; opacity: 0; top: -63px; z-index: 5000; -webkit-transition: left 0.2s ease-in-out; -o-transition: left 0.2s ease-in-out; transition: left 0.2s ease-in-out; -moz-transition: left 0.2s ease-in-out; } header #menu-wrap.active { opacity: 1; width: 100%; left: 0%; -webkit-transition: left 0.525s cubic-bezier(0, 0.14, 0.01, 1.2) !important; -o-transition: left 0.525s cubic-bezier(0, 0.14, 0.01, 1.2) !important; -moz-transition: left 0.525s cubic-bezier(0, 0.14, 0.01, 1.2) !important; transition: left 0.525s cubic-bezier(0, 0.14, 0.01, 1.2) !important; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.92); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.92); box-shadow: 0 0 4px rgba(0, 0, 0, 0.92); } header #menu-wrap span { display: block; color: #e46375; font-weight: 300; background: none; right: auto; top: 5px; border: none; } header #menu-wrap nav#main-nav { display: block !important; padding-top: 46px; } header #menu-wrap nav#main-nav a { height: 50px; padding-top: 0; border-left: 0; text-align: left; background-position: right 7px; clear: both; padding-left: 15px; } header #menu-wrap nav#main-nav a:hover { color: #fff; } header #menu-wrap img { position: absolute; top: 15px; right: 15px; cursor: pointer; } #owt-middle-subject { padding: 12px; padding-top: 85px; } #mobile-logo { position: relative; z-index: 1001; } #owb-thumbnails .tnwrap, #fp-thumbs .tnwrap { height: 290px !important; margin-bottom: 20px; padding-left: 0.5em; padding-right: 0.5em; } #owb-thumbnails .tnprice, #fp-thumbs .tnprice { font-size: 13px; } #owb-thumbnails .tnmin, #fp-thumbs .tnmin { font-size: 60%; } #lightbox { display: none !important; } #product-page h1#product-h1, #product-page .pcode, #product-page #main-img-box, #product-page .addthis_toolbox { float: left; clear: both; width: 100%; } #product-page .addthis_toolbox { margin-bottom: 0; width: 290px; margin: 0 auto; float: none; } #product-page .addthis_toolbox a { margin-right: 7px; font-size: 0.813em; } #product-page h1#product-h1 { margin-top: 5px; font-size: 1.188em; } #product-page #product-details > div { height: auto !important; min-height: 0 !important; } #product-page #main-pricing-box .pricing-info { margin-top: 10px; } #product-page #main-pricing-box table.additional-print-table { padding: 0 4px; } #product-page #main-pricing-box table.additional-print-table tr td { padding: 3px 1px; } #product-page #main-pricing-box table.additional-print-table table { font-size: 0.875em; } #product-page #main-pricing-box ul { font-size: 0.750em; } #discount-div div.discount { height: 360px; } #discount-div div { overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; } #discount-div div.memory-pricing { padding: 5px !important; } #ProductOrder_Form #pof-wrapper #pof-contact .allrfv { width: 5px; overflow: hidden; height: 22px; left: 14px; } #ProductOrder_Form #pof-wrapper #pof-contact .allrfv.pofcatxtrfv { top: 198px; } #ProductOrder_Form #pof-wrapper #pof-contact .allrfv.pofcerfv, #ProductOrder_Form #pof-wrapper #pof-contact .allrfv.pofcerev { top: 355px; } #ProductOrder_Form #pof-wrapper #pof-orderdetails .sml-length { width: 20% !important; } #ProductOrder_Form #pof-wrapper #pof-orderdetails .med-length { width: 28% !important; } #mobile-categories { margin-bottom: 20px; } #mobile-categories .small-6 { width: 49% !important; } #mobile-categories h2 { font-size: 1.25em; margin-bottom: -5px; text-align: center; color: #c23333; } #mobile-categories h4 { font-size: 0.938em; color: #888; text-align: center; margin: 0 0 10px 0; } #mobile-categories .columns { margin-right: 1%; margin-bottom: 1%; } #mobile-categories a.block-link { display: block; width: 100%; height: 170px; text-align: center; position: relative; background: #fff; margin: 0 1% 2% 0; font-weight: 700; border: 3px solid #222; color: #fff; } #mobile-categories a.block-link img { max-width: 96%; max-height: 137px; bottom: 25px; } #mobile-categories a.block-link.cat-plastic { border-color: #e46375; } #mobile-categories a.block-link.cat-plastic ~ a span { background-color: #e46375; } #mobile-categories a.block-link.cat-metal { border-color: #f1a542; } #mobile-categories a.block-link.cat-metal ~ a span { background-color: #f1a542; } #mobile-categories a.block-link.cat-leather { border-color: #6f5694; } #mobile-categories a.block-link.cat-leather ~ a span { background-color: #6f5694; } #mobile-categories a.block-link.cat-eco { border-color: #6379b1; } #mobile-categories a.block-link.cat-eco ~ a span { background-color: #6379b1; } #mobile-categories a.block-link.cat-pen { border-color: #3dac45; } #mobile-categories a.block-link.cat-pen ~ a span { background-color: #3dac45; } #mobile-categories a.block-link.cat-custom { border-color: #777; } #mobile-categories a.block-link.cat-custom ~ a span { background-color: #777; } #mobile-categories span, #mobile-categories img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #mobile-categories span.span-anchor, #mobile-categories img.span-anchor { bottom: 0; top: auto; text-align: center; color: #fff; font-size: 0.813em; } #mobile-categories span.span-anchor:after, #mobile-categories img.span-anchor:after { content: ""; border: 4px solid transparent; border-left-color: #fff; width: 0; display: inline-block; margin-left: 6px; margin-top: 8px; } } /*blog page*/ .blog-archive-h3, .blog-header { margin-top: 55px; } li.ab-li { list-style-type: none; display: block; float: left; font-size: 0.938em; } li.ab-li .ab-date { font-weight: 600; display: block; } li.ab-li a.ab-link { display: block; } li.ab-li .ab-desc { display: block; margin-bottom: 20px; } /*pms colour chart*/ #owt-mainnav .pms-wrap { width: 100%; float: none; margin: 0 auto; background: none; border: none; font: "Museo-sans", Helvetica, Arial, Sans-serif; } #owt-mainnav .pms-wrap ul.pms-colour-text, #owt-mainnav .pms-wrap ul.colours { width: 100%; } #owt-mainnav ul.pms-colour-text { margin-top: 15px; } #owt-mainnav ul.colours li, #owt-mainnav .pms-colour-text li { width: 13.9%; border: none; font-size: 8px; line-height: 130%; font-family: "Museo-sans", Helvetica, Arial, Sans-serif !important; } /*reseller page*/ .resell-checklist tr, .resell-checklist td { width: 100%; display: block; float: left; } .resell-checklist input[type="checkbox"] { margin-left: 15px; } .reseller-column .lbl { float: left; text-align: left; width: 100%; } .reseller-column ~ input[type="submit"], .reseller-column ~ input[type="reset"] { float: left; height: 40px !important; } .reseller-column ~ input[type="reset"] { margin-top: -40px !important; } /*@media only screen and (max-width: 40em) { } */ /* max-width 640px, mobile-only styles, use when QAing mobile issues */ /**/ /* Medium screens*/ @media only screen and (min-width: 40.063em) { #mobile-cart-btn:not(:empty) { display: none !important; } img#mobile-cart-btn { display: none !important; } .show-for-small-only, #mobile-menu-btn, #mobile-search-btn { display: none; } body { background: #fff url(/imgs/customusbdrives-bg.jpg); } .full-width-bg.header-bg { height: 129px; } .full-width-bg.header-bg header { padding-top: 15px; background: none; text-align: left; color: #fff; } .full-width-bg.header-bg header #menu-wrap { display: block; } .full-width-bg.header-bg header #menu-wrap img { display: none; } .full-width-bg.header-bg header #owt-banner, .full-width-bg.header-bg header #search, .full-width-bg.header-bg header #phonenumber { display: block; } .full-width-bg.header-bg header #owt-banner { margin-left: 25px; } .full-width-bg.header-bg header .header-img { display: none; } .full-width-bg.header-bg header #phonenumber { font-size: 1.55em; padding-left: 22px; margin: 0px 5px 0 0; padding-top: 5px; } .full-width-bg.header-bg header #search { float: right; right: 7px; top: 20px; } .full-width-bg.header-bg header #search input { font-size: 1.2em; border-bottom-color: #fff; color: #fff; } .full-width-bg.header-bg header #search input:focus { border-bottom-color: #e46375; } .full-width-bg.header-bg header #search a { cursor: pointer; margin-top: 7px; } footer { background: none; height: 280px; } footer h5 { color: #fff; background-repeat: no-repeat !important; background-position: 50% 0 !important; } footer ul li { font-weight: 600; } footer ul li a { color: #fff; } footer .copyright { color: #fff; } .main-nav-row { top: auto; } .main-nav-row nav#main-nav { width: 32% !important; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0); box-shadow: 0 0 4px rgba(0, 0, 0, 0); } .main-nav-row nav#main-nav ul li { -webkit-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; } .main-nav-row nav#main-nav ul li:hover { color: #a1c8f8; } .main-nav-row nav#main-nav ul li a { -webkit-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; /*font-size:1.125em;*/ } .main-nav-row nav#main-nav ul li a:hover { color: #a1c8f8; } /*browse page*/ #owb-thumbnails, #fp-thumbs { margin-bottom: 20px; } #owb-thumbnails .tnwrap, #fp-thumbs .tnwrap { height: 310px !important; margin-bottom: 20px; } #owb-thumbnails .tndesc, #fp-thumbs .tndesc { display: block; } #owb-filter-toolbar { margin: -95px 0 20px 0; } #owb-filter-toolbar > div { float: right; } #owb-filter-toolbar span.tag-filter { clear: none; } #owb-filter-toolbar .columns { margin-bottom: 0; } #owb-filter-toolbar select { margin: 10px 0 0 10px; } #owt-middle-subject { -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); } #owt-middle-subject.search-open { padding-top: 10px; } #owt-middle-subject #main-menu-btn, #owt-middle-subject .flexslider { display: block; } #owt-middle-subject h1 { font-size: 1.5em; margin-bottom: 20px; } #owt-middle-subject h1.browseheader, #owt-middle-subject h1.subcatHOne { margin-top: 13px; } #owt-middle-subject h1:after { content: ""; background: url(/imgs/customusbdrives-h1-after.png) repeat-y; position: absolute; top: 0; right: -36px; width: 35px; height: 100%; } #owt-middle-subject #breadCrumb { display: block; } #product-page { margin-top: 18px; } #product-page h1#product-h1 { font-size: 1.3em; } #product-page #main-img-box > div { display: block; width: 70px; height: 98px; z-index: 1001; position: absolute; bottom: 0; left: 0; top: 0; right: 0; margin: auto; font-size: 0.813em; line-height: 110%; text-align: center; color: #aaa; cursor: pointer; } #product-page #main-img-box > div img { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; } #product-page #main-img-box:hover > div img { opacity: 1; } #product-page #main-pricing-box { padding: 0 3% 15px 3%; margin-top: -5px; font-size: 1em; padding-top: 64px; } #product-page #main-pricing-box ul li { padding-bottom: 8px; } #product-page #main-pricing-box table.additional-print-table tr td { padding: 3px 1px; } #product-page #main-pricing-box table.additional-print-table table { padding: 0 3px; font-size: 0.938em; } #product-page #main-pricing-box .clickToView { display: inline; } #product-page #product-details { float: left; width: 100%; } #product-page #product-details.collapse .columns { width: 32.6666667% !important; } #product-page #product-details > div { margin-right: 1%; font-size: 0.813em; } #product-page #product-details > div.product-details-last { margin-right: 0; } #owt-mainnav p { font-size: 0.938em; line-height: 150%; } #ProductOrder_Form #pof-wrapper .pofcfnlblrfv, #ProductOrder_Form #pof-wrapper .pofclnlblrfv, #ProductOrder_Form #pof-wrapper .pofcptxtrfv, #ProductOrder_Form #pof-wrapper .pofcttxtrfv { left: 415px; } #ProductOrder_Form #pof-wrapper .pofcpctxtrfv { left: 244px; } #ProductOrder_Form #pof-wrapper #pof-finaliseorder .pofinfo { padding-right: 160px; } #ProductOrder_Form #pof-wrapper #pof-contact .sml-length { width: 12% !important; } #ProductOrder_Form #pof-wrapper #pof-contact .med-length { width: 30% !important; } #owt-mainnav ul.colours li, #owt-mainnav .pms-colour-text li { width: 14.1%; font-size: 11px; line-height: 140%; } } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64.063em) { .full-width-bg header #menu-wrap span { display: block; } .full-width-bg header #menu-wrap nav#main-nav { display: none; position: absolute; top: 74px; margin-top: 0; background: #333; border: 1px solid #444; left: 0; right: 0; margin: auto; width: 144px; z-index: 1001; } .full-width-bg header #menu-wrap nav#main-nav a { height: 50px; padding-top: 15px; border-left: 0; border-bottom: 1px solid #444; padding-left: 10px; text-align: left; background-position: 125px 22px; clear: both; width: 142px; } .full-width-bg header #menu-wrap nav#main-nav a:last-child { border-bottom: 0; } #product-page .addthiswrap { right: auto; } #product-page .addthiswrap a { font-size: 0.688em; margin-right: 3px; } #owb-thumbnails .tnwrap, #fp-thumbs .tnwrap { height: 330px !important; } } /*@media only screen and (min-width: 40.063em) and (max-width: 64em) { } */ /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ /**/ /* Large screens*/ @media only screen and (min-width: 64.063em) { #owt-middle-subject h1 { font-size: 1.65em; margin-top: 10px; } #owt-middle-subject h2 { margin-bottom: 10px; } .full-width-bg header { height: 100%; } .full-width-bg header .header-img { display: block; text-align: center; } .full-width-bg header #menu-wrap span { display: none; } .full-width-bg header #menu-wrap nav#main-nav { display: block !important; } #product-page h1#product-h1 { font-size: 1.65em; } #product-page .addthiswrap { right: 0; } #product-page .addthiswrap a { font-size: 0.863em; } #product-page #main-pricing-box table tr { font-size: 0.875em; } #product-page #main-pricing-box table tr td { padding: 6px 5px; } #product-page #main-pricing-box #product-enquiry-form #po-box1, #product-page #main-pricing-box #product-enquiry-form #po-box2 { width: 50%; } #product-page #main-pricing-box #product-enquiry-form .button { bottom: 3%; } #product-page #product-details > div { font-size: 0.875em; } #ProductOrder_Form #pof-wrapper div#pof-img { display: block; } #owt-mainnav ul.colours li, #owt-mainnav .pms-colour-text li { font-size: 13px; line-height: 150%; } .reseller-column ~ input[type="submit"], .reseller-column ~ input[type="reset"] { float: right; } } /* min-width 1025px, large screens */ @media only screen and (max-width: 1250px) { #owt-middle-subject h1 { margin-left: -20px; padding-left: 20px; } #owt-middle-subject h1:before { background: none; } } /*@media only screen and (min-width: 64.063em) and (max-width: 90em) { } */ /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ /**/ /* XLarge screens*/ /* min-width 1441px, xlarge screens */ /*@media only screen and (min-width: 90.063em) and (max-width: 120em) { } */ /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ /**/ /* XXLarge screens*/ /* min-width 1921px, xlarge screens */ .floatnone { float: none !important; } div#fp-thumbs ~ div { float: none !important; width: 100% !important; text-align: center; } html > body .blogheader { width: 100%; text-align: center; } html > body div#blogbox, html > body div#blogBox { width: 100% !important; float: none !important; display: block !important; } html > body ul#blogList, html > body ul#fpBlog, html > body ul.blogUl, html > body ul#blogUl, html > body div#blogbox ul, html > body div#blogBox ul, html > body ul.blog-list, html > body ul#fp-blog { width: 100% !important; margin: 0px !important; padding: 10px !important; padding-top: 0px !important; border: 0px solid #fff; background: rgba(0, 0, 0, 0); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; } html > body ul#blogList li a[rel="nofollow"], html > body ul#fpBlog li a[rel="nofollow"], html > body ul.blogUl li a[rel="nofollow"], html > body ul#blogUl li a[rel="nofollow"], html > body div#blogbox ul li a[rel="nofollow"], html > body div#blogBox ul li a[rel="nofollow"], html > body ul.blog-list li a[rel="nofollow"], html > body ul#fp-blog li a[rel="nofollow"] { position: absolute; left: 0px; bottom: 0px; text-align: center; width: 100%; background: rgba(228, 99, 117, 0.5); color: #f7f7f7; padding: 5px; } html > body ul#blogList li a[rel="nofollow"] i, html > body ul#fpBlog li a[rel="nofollow"] i, html > body ul.blogUl li a[rel="nofollow"] i, html > body ul#blogUl li a[rel="nofollow"] i, html > body div#blogbox ul li a[rel="nofollow"] i, html > body div#blogBox ul li a[rel="nofollow"] i, html > body ul.blog-list li a[rel="nofollow"] i, html > body ul#fp-blog li a[rel="nofollow"] i { font-style: normal !important; color: white !important; float: none !important; display: inline !important; font-size: 14px !important; } html > body ul#blogList li a[rel="nofollow"] i:hover, html > body ul#fpBlog li a[rel="nofollow"] i:hover, html > body ul.blogUl li a[rel="nofollow"] i:hover, html > body ul#blogUl li a[rel="nofollow"] i:hover, html > body div#blogbox ul li a[rel="nofollow"] i:hover, html > body div#blogBox ul li a[rel="nofollow"] i:hover, html > body ul.blog-list li a[rel="nofollow"] i:hover, html > body ul#fp-blog li a[rel="nofollow"] i:hover { font-style: normal !important; color: white !important; float: none !important; display: inline !important; font-size: 14px !important; } html > body ul#blogList li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover, html > body ul#fpBlog li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover, html > body ul.blogUl li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover, html > body ul#blogUl li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover, html > body div#blogbox ul li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover, html > body div#blogBox ul li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover, html > body ul.blog-list li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover, html > body ul#fp-blog li:not(.liTop):not(.archLi) a[rel="nofollow"]:hover { background: #e46375; color: white; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; } html > body ul#blogList li:not([class]) > a:first-of-type, html > body ul#fpBlog li:not([class]) > a:first-of-type, html > body ul.blogUl li:not([class]) > a:first-of-type, html > body ul#blogUl li:not([class]) > a:first-of-type, html > body div#blogbox ul li:not([class]) > a:first-of-type, html > body div#blogBox ul li:not([class]) > a:first-of-type, html > body ul.blog-list li:not([class]) > a:first-of-type, html > body ul#fp-blog li:not([class]) > a:first-of-type { background: #e46375; color: white; padding: 3px 10px; position: absolute; left: 0px; top: 0px; text-align: center; font-size: 16px; font-weight: 500; width: 100%; line-height: 100%; min-height: 45px; /* vertically aligns the text */ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } html > body ul#blogList li:not(.liTop):not(.archLi), html > body ul#fpBlog li:not(.liTop):not(.archLi), html > body ul.blogUl li:not(.liTop):not(.archLi), html > body ul#blogUl li:not(.liTop):not(.archLi), html > body div#blogbox ul li:not(.liTop):not(.archLi), html > body div#blogBox ul li:not(.liTop):not(.archLi), html > body ul.blog-list li:not(.liTop):not(.archLi), html > body ul#fp-blog li:not(.liTop):not(.archLi) { display: inline-block; max-width: 300px; min-height: 150px; border: 1px solid #e46375; margin: 10px; padding: 10px; width: 100%; position: relative; } html > body ul#blogList li:not(.liTop):not(.archLi), html > body ul#fpBlog li:not(.liTop):not(.archLi), html > body ul.blogUl li:not(.liTop):not(.archLi), html > body ul#blogUl li:not(.liTop):not(.archLi), html > body div#blogbox ul li:not(.liTop):not(.archLi), html > body div#blogBox ul li:not(.liTop):not(.archLi), html > body ul.blog-list li:not(.liTop):not(.archLi), html > body ul#fp-blog li:not(.liTop):not(.archLi) { width: 33%; width: -webkit-calc(33.3% - 20px); width: -moz-calc(33.3% - 20px); width: calc(33.3% - 20px); } html > body ul#blogList li.liTop, html > body ul#fpBlog li.liTop, html > body ul.blogUl li.liTop, html > body ul#blogUl li.liTop, html > body div#blogbox ul li.liTop, html > body div#blogBox ul li.liTop, html > body ul.blog-list li.liTop, html > body ul#fp-blog li.liTop { text-align: center; width: 100%; display: block; margin-bottom: 20px; padding: 0px; } html > body ul#blogList li.archLi, html > body ul#fpBlog li.archLi, html > body ul.blogUl li.archLi, html > body ul#blogUl li.archLi, html > body div#blogbox ul li.archLi, html > body div#blogBox ul li.archLi, html > body ul.blog-list li.archLi, html > body ul#fp-blog li.archLi { display: block; width: 100%; text-align: center; position: relative; list-style: none !important; } html > body ul#blogList li .archLi, html > body ul#fpBlog li .archLi, html > body ul.blogUl li .archLi, html > body ul#blogUl li .archLi, html > body div#blogbox ul li .archLi, html > body div#blogBox ul li .archLi, html > body ul.blog-list li .archLi, html > body ul#fp-blog li .archLi { position: relative !important; top: 0px; left: 0px; right: 0px; } html > body ul#blogList li a.blogArchiveLink, html > body ul#fpBlog li a.blogArchiveLink, html > body ul.blogUl li a.blogArchiveLink, html > body ul#blogUl li a.blogArchiveLink, html > body div#blogbox ul li a.blogArchiveLink, html > body div#blogBox ul li a.blogArchiveLink, html > body ul.blog-list li a.blogArchiveLink, html > body ul#fp-blog li a.blogArchiveLink { background: rgba(0, 0, 0, 0); border-bottom: 2px solid #e46375; padding: 0px; position: relative; bottom: 0px; right: 15px; float: right; line-height: 125%; margin: 0 auto; max-width: 200px; color: #e46375; font-weight: 600; height: 20px; } html > body ul#blogList li a.blogArchiveLink.blogArchiveLink, html > body ul#fpBlog li a.blogArchiveLink.blogArchiveLink, html > body ul.blogUl li a.blogArchiveLink.blogArchiveLink, html > body ul#blogUl li a.blogArchiveLink.blogArchiveLink, html > body div#blogbox ul li a.blogArchiveLink.blogArchiveLink, html > body div#blogBox ul li a.blogArchiveLink.blogArchiveLink, html > body ul.blog-list li a.blogArchiveLink.blogArchiveLink, html > body ul#fp-blog li a.blogArchiveLink.blogArchiveLink { position: relative; top: 50px; right: 0px; } html > body ul#blogList li a.blogArchiveLink:after, html > body ul#fpBlog li a.blogArchiveLink:after, html > body ul.blogUl li a.blogArchiveLink:after, html > body ul#blogUl li a.blogArchiveLink:after, html > body div#blogbox ul li a.blogArchiveLink:after, html > body div#blogBox ul li a.blogArchiveLink:after, html > body ul.blog-list li a.blogArchiveLink:after, html > body ul#fp-blog li a.blogArchiveLink:after { content: '\00bb'; padding-left: 5px; position: relative; top: -1px; } html > body ul#blogList li a.blogArchiveLink:hover, html > body ul#fpBlog li a.blogArchiveLink:hover, html > body ul.blogUl li a.blogArchiveLink:hover, html > body ul#blogUl li a.blogArchiveLink:hover, html > body div#blogbox ul li a.blogArchiveLink:hover, html > body div#blogBox ul li a.blogArchiveLink:hover, html > body ul.blog-list li a.blogArchiveLink:hover, html > body ul#fp-blog li a.blogArchiveLink:hover { text-decoration: none !important; } html > body ul#blogList li.archLi, html > body ul#fpBlog li.archLi, html > body ul.blogUl li.archLi, html > body ul#blogUl li.archLi, html > body div#blogbox ul li.archLi, html > body div#blogBox ul li.archLi, html > body ul.blog-list li.archLi, html > body ul#fp-blog li.archLi { height: 100px; } html > body ul#blogList li a[rel="nofollow"]:after, html > body ul#fpBlog li a[rel="nofollow"]:after, html > body ul.blogUl li a[rel="nofollow"]:after, html > body ul#blogUl li a[rel="nofollow"]:after, html > body div#blogbox ul li a[rel="nofollow"]:after, html > body div#blogBox ul li a[rel="nofollow"]:after, html > body ul.blog-list li a[rel="nofollow"]:after, html > body ul#fp-blog li a[rel="nofollow"]:after { content: ' \00bb'; } html > body ul#blogList li span.fp-blog-desc.blog-span, html > body ul#fpBlog li span.fp-blog-desc.blog-span, html > body ul.blogUl li span.fp-blog-desc.blog-span, html > body ul#blogUl li span.fp-blog-desc.blog-span, html > body div#blogbox ul li span.fp-blog-desc.blog-span, html > body div#blogBox ul li span.fp-blog-desc.blog-span, html > body ul.blog-list li span.fp-blog-desc.blog-span, html > body ul#fp-blog li span.fp-blog-desc.blog-span { display: block; color: #333; width: 100%; margin-top: 45px; padding: 0px !important; font-size: 13px !important; max-height: 60px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } html > body ul#blogList li span.fp-blog-date.blog-span, html > body ul#fpBlog li span.fp-blog-date.blog-span, html > body ul.blogUl li span.fp-blog-date.blog-span, html > body ul#blogUl li span.fp-blog-date.blog-span, html > body div#blogbox ul li span.fp-blog-date.blog-span, html > body div#blogBox ul li span.fp-blog-date.blog-span, html > body ul.blog-list li span.fp-blog-date.blog-span, html > body ul#fp-blog li span.fp-blog-date.blog-span { color: #e46375; text-align: right; right: 5px; position: absolute; bottom: 30px; font-size: 8pt; padding: 1em 0 0; margin: 0 0 0 0; } html > body ul#blogList li img.blogImage, html > body ul#fpBlog li img.blogImage, html > body ul.blogUl li img.blogImage, html > body ul#blogUl li img.blogImage, html > body div#blogbox ul li img.blogImage, html > body div#blogBox ul li img.blogImage, html > body ul.blog-list li img.blogImage, html > body ul#fp-blog li img.blogImage { display: none; width: 100%; max-height: 100px; margin-bottom: 50px; } @media only screen and (max-width: 1000px) { html > body ul#blogList li:not(.liTop):not(.archLi), html > body ul#fpBlog li:not(.liTop):not(.archLi), html > body ul.blogUl li:not(.liTop):not(.archLi), html > body ul#blogUl li:not(.liTop):not(.archLi), html > body div#blogbox ul li:not(.liTop):not(.archLi), html > body div#blogBox ul li:not(.liTop):not(.archLi), html > body ul.blog-list li:not(.liTop):not(.archLi), html > body ul#fp-blog li:not(.liTop):not(.archLi) { width: 32%; width: -webkit-calc(33.3% - 20px); width: -moz-calc(33.3% - 20px); width: calc(33.3% - 20px); } } @media only screen and (max-width: 968px) { html > body ul#blogList li:not(.liTop):not(.archLi), html > body ul#fpBlog li:not(.liTop):not(.archLi), html > body ul.blogUl li:not(.liTop):not(.archLi), html > body ul#blogUl li:not(.liTop):not(.archLi), html > body div#blogbox ul li:not(.liTop):not(.archLi), html > body div#blogBox ul li:not(.liTop):not(.archLi), html > body ul.blog-list li:not(.liTop):not(.archLi), html > body ul#fp-blog li:not(.liTop):not(.archLi) { width: 32%; width: -webkit-calc(33.3% - 20px); width: -moz-calc(33.3% - 20px); width: calc(33.3% - 20px); } } @media only screen and (max-width: 842px) { html > body ul#blogList li:not(.liTop):not(.archLi), html > body ul#fpBlog li:not(.liTop):not(.archLi), html > body ul.blogUl li:not(.liTop):not(.archLi), html > body ul#blogUl li:not(.liTop):not(.archLi), html > body div#blogbox ul li:not(.liTop):not(.archLi), html > body div#blogBox ul li:not(.liTop):not(.archLi), html > body ul.blog-list li:not(.liTop):not(.archLi), html > body ul#fp-blog li:not(.liTop):not(.archLi) { width: 45%; width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: calc(50% - 20px); } } @media only screen and (max-width: 768px) { html > body ul#blogList li.archLi, html > body ul#fpBlog li.archLi, html > body ul.blogUl li.archLi, html > body ul#blogUl li.archLi, html > body div#blogbox ul li.archLi, html > body div#blogBox ul li.archLi, html > body ul.blog-list li.archLi, html > body ul#fp-blog li.archLi { position: relative !important; top: 0px; left: 0px; right: 0px; } html > body ul#blogList li.archLi > a.blogArchiveLink, html > body ul#fpBlog li.archLi > a.blogArchiveLink, html > body ul.blogUl li.archLi > a.blogArchiveLink, html > body ul#blogUl li.archLi > a.blogArchiveLink, html > body div#blogbox ul li.archLi > a.blogArchiveLink, html > body div#blogBox ul li.archLi > a.blogArchiveLink, html > body ul.blog-list li.archLi > a.blogArchiveLink, html > body ul#fp-blog li.archLi > a.blogArchiveLink { position: relative !important; top: 50px !important; right: 0px !important; float: none !important; } } @media only screen and (max-width: 600px) { html > body ul#blogList li:not(.liTop):not(.archLi), html > body ul#fpBlog li:not(.liTop):not(.archLi), html > body ul.blogUl li:not(.liTop):not(.archLi), html > body ul#blogUl li:not(.liTop):not(.archLi), html > body div#blogbox ul li:not(.liTop):not(.archLi), html > body div#blogBox ul li:not(.liTop):not(.archLi), html > body ul.blog-list li:not(.liTop):not(.archLi), html > body ul#fp-blog li:not(.liTop):not(.archLi) { width: 99% !important; width: -webkit-calc(50% - 20px) !important; width: -moz-calc(50% - 20px) !important; width: calc(50% - 20px) !important; min-height: 185px; } } @media only screen and (max-width: 460px) { html > body ul#blogList li:not(.liTop):not(.archLi), html > body ul#fpBlog li:not(.liTop):not(.archLi), html > body ul.blogUl li:not(.liTop):not(.archLi), html > body ul#blogUl li:not(.liTop):not(.archLi), html > body div#blogbox ul li:not(.liTop):not(.archLi), html > body div#blogBox ul li:not(.liTop):not(.archLi), html > body ul.blog-list li:not(.liTop):not(.archLi), html > body ul#fp-blog li:not(.liTop):not(.archLi) { width: 99% !important; width: -webkit-calc(100% - 20px) !important; width: -moz-calc(100% - 20px) !important; width: calc(100% - 20px) !important; min-height: 150px; } } html > body ul.blog-archive-ul { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } html > body ul.blog-archive-ul *, html > body ul.blog-archive-ul * * { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } html > body ul.blog-archive-ul { list-style: none; margin: 0px; padding: 0px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } html > body ul.blog-archive-ul > li { width: 32%; width: -webkit-calc(33.33% - 40px); width: -moz-calc(33.33% - 40px); width: calc(33.33% - 40px); height: 125px; border: 2px solid #e46375; margin: 20px; font-weight: 600; text-align: center; position: relative; } html > body ul.blog-archive-ul > li > a { color: #e46375; background: white; width: 100%; height: 100%; display: block; font-size: 20px !important; line-height: 60px; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; } html > body ul.blog-archive-ul > li:before { content: attr(data-month) " " attr(data-year); text-transform: capitalize; font-size: 20px; color: white; background: #e46375; position: absolute; left: 0px; right: 0px; top: 0px; width: 100%; height: 30px; line-height: 30px; } html > body ul.blog-archive-ul > li:after { content: attr(data-article-count) " article(s)"; font-size: 16px; position: absolute; left: 0px; right: 0px; top: 50px; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; } html > body ul.blog-archive-ul > li > a { position: absolute; background: none; color: rgba(0, 0, 0, 0); z-index: 50; } html > body ul.blog-archive-ul > li > a:after { bottom: 0px; position: absolute; content: 'View Articles \00bb'; font-size: 16px; line-height: 22px; font-weight: 500; left: 0px; right: 0px; width: 100%; height: 20px; color: white; background: #e46375; } html > body ul.blog-archive-ul > li:hover { background: #e46375; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; } html > body ul.blog-archive-ul > li:hover:after { color: white; -webkit-transition: 0.2s all ease-in; -o-transition: 0.2s all ease-in; -moz-transition: 0.2s all ease-in; transition: 0.2s all ease-in; } @media only screen and (max-width: 768px) { html > body ul.blog-archive-ul > li { width: 32%; width: -webkit-calc(50% - 40px); width: -moz-calc(50% - 40px); width: calc(50% - 40px); } } @media only screen and (max-width: 450px) { html > body ul.blog-archive-ul > li { width: 100%; } } html > body#bodyTag div#blogbox ul li:nth-of-type(2) { border: 1px solid #f1a542 !important; } html > body#bodyTag div#blogbox ul li:nth-of-type(2) > span.blog-span.fp-blog-date { color: #f1a542; } html > body#bodyTag div#blogbox ul li:nth-of-type(2) > a:first-of-type { background: #f1a542; } html > body#bodyTag div#blogbox ul li:nth-of-type(2) > a:last-of-type { background: rgba(241, 165, 66, 0.5); } html > body#bodyTag div#blogbox ul li:nth-of-type(3) { border: 1px solid #6f5694 !important; } html > body#bodyTag div#blogbox ul li:nth-of-type(3) > span.blog-span.fp-blog-date { color: #6f5694; } html > body#bodyTag div#blogbox ul li:nth-of-type(3) > a:first-of-type { background: #6f5694; } html > body#bodyTag div#blogbox ul li:nth-of-type(3) > a:last-of-type { background: rgba(111, 86, 148, 0.5); } html > body#bodyTag div#blogbox ul li:nth-of-type(4), html > body#bodyTag div#blogbox ul li:nth-of-type(6) { border: 1px solid #f1a542 !important; } html > body#bodyTag div#blogbox ul li:nth-of-type(4) > span.blog-span.fp-blog-date, html > body#bodyTag div#blogbox ul li:nth-of-type(6) > span.blog-span.fp-blog-date { color: #f1a542; } html > body#bodyTag div#blogbox ul li:nth-of-type(4) > a:first-of-type, html > body#bodyTag div#blogbox ul li:nth-of-type(6) > a:first-of-type { background: #f1a542; } html > body#bodyTag div#blogbox ul li:nth-of-type(4) > a:last-of-type, html > body#bodyTag div#blogbox ul li:nth-of-type(6) > a:last-of-type { background: rgba(241, 165, 66, 0.5); } html > body#bodyTag div#blogbox ul li:nth-of-type(4) { border: 1px solid #6f5694 !important; } html > body#bodyTag div#blogbox ul li:nth-of-type(4) > span.blog-span.fp-blog-date { color: #6f5694; } html > body#bodyTag div#blogbox ul li:nth-of-type(4) > a:first-of-type { background: #6f5694; } html > body#bodyTag div#blogbox ul li:nth-of-type(4) > a:last-of-type { background: rgba(111, 86, 148, 0.5); } html > body div#blogbox ul li span.fp-blog-desc.blog-span { line-height: 110% !important; }