/* --------------------------------------------------------------------------------- Author: Pixel House Website: www.pixel-house.com.au --------------------------------------------------------------------------------- */ /* for iPad */ @media screen and (max-width: 1024px) { #logo { margin-left: 5px; } #navigation { -moz-border-radius: 0px; border-radius: 0px; } #header-center { padding-right: 20px; } #social-links { right: 20px; } #top-links.loggedin ul { padding-right: 150px; } #header-center.loggedin #header-links { padding-right: 115px; } #footer-social p { padding-left: 20px; } #footer-social ul { margin-right: 30px; } #footer-links ul { padding-left: 30px; } #brand-feat { margin-right: 30px; } #footer-links .right { width: 31%; } #footer-btm p { padding-left: 20px; width: 90%!important; } } /* for 1200px or more */ @media screen and (min-width: 1200px) { #header, #container, #footer, #footer-callout, #footersub, #sub-container, #footer-social, #footer-callout-inner { width: 1120px; } #container-wrap { background: url(../images/shadow.jpg) repeat-x 80% 0; } #right { width: 860px; } #content { width: 835px; padding-left: 10px; padding-right: 15px; } #full-width #content { width: 1040px; padding-left: 40px; padding-right: 40px; padding-top: 40px; } #navigation ul li { font-size: 14px; } #navigation ul li a { padding: 13px 13px 0 13px; } #navigation #n01 a { padding-left: 30px; } #header #navigation #n12 a { padding-left: 25px; padding-right: 25px; } #header #navigation #n13 a { padding-left: 25px; padding-right: 25px; } #header .public-nav { top: 124px;left: 290px; } #header .public-nav li { margin: 0 40px 0 0; font-size: 16px; } #banner { float: left; width: 100%; background: #fff; position: relative; } #banner-text { width: 60%; padding: 60px 20% 0 20%; } #banner-text h1 { } #home-new-arrivals #you-may-also-like, .ls-wrapper, .ls-wrapper .liquid-slider { width: 1120px; } #you-may-also-like ul { margin: 0; padding: 0 0 0 4%; width: 96%; } #you-may-also-like ul li { width: 194px; padding: 0 5px; } #you-may-also-like ul li a { width: 180px; } #you-may-also-like ul li a img { max-height: 160px; max-width: 160px; } .ls-wrapper .ls-nav-right-arrow { left: 1070px!important; } .ls-wrapper .liquid-slider .panel { width: 1120px; } #more-products-wrap #you-may-also-like { width: 100%; } #more-products-wrap #you-may-also-like ul { width: 900px; } #more-products-wrap #you-may-also-like ul li, #more-products-wrap #you-may-also-like ul li a { width: 160px; } #more-products-wrap #you-may-also-like ul li a img { max-height: 170px; max-width: 160px; } #you-may-also-like .row-of-six ul { margin: 0; padding: 0 0 0 20px; } #you-may-also-like .row-of-six ul li { width: 166px; } #you-may-also-like .row-of-six ul li a { width: 166px; } #you-may-also-like .row-of-six .img { width: 176px; height: 176px; } #home-new-arrivals #you-may-also-like .label-new, #home-new-arrivals #you-may-also-like .label-special, #home-new-arrivals #you-may-also-like .label-bulk, #home-new-arrivals #you-may-also-like .label-trend { right: 35px; } #home-new-arrivals #you-may-also-like .row-of-six .label-new, #home-new-arrivals #you-may-also-like .row-of-six .label-special, #home-new-arrivals #you-may-also-like .row-of-six .label-bulk, #home-new-arrivals #you-may-also-like .row-of-six .label-trend { right: 20px; } #our-brands { background: url(../images/brands-bg.png) no-repeat 0 center #fff; } #our-brands .brand-logos { padding-left: 50px; } #our-brands .view-brands { width: 170px; } #homepage-brands ul { width: 94%; margin: 0; padding: 20px 0 0 6%; display: table; } #homepage-brands ul li { margin: 0 15px 0 15px; height: 92px; width: 110px; text-align: center; } #homepage-brands ul li img { max-width: 110px; max-height: 90px; vertical-align: middle; } #homepage-brands .shift3 { padding-left: 280px; } /* #prod-list .prod { width: 370px; } #prod-list .prod-text { width: 220px; padding-right: 10px; } #prod-list .in-cart { width: 200px; } */ #product-text { width: 590px; padding-right: 10px; } #product-photo { width: 400px; } #product-photo img { max-width: 280px; } #product-border { padding: 45px 0; } #productbox-arrow { left: 401px; } #prod-list .units { width: auto; float: right; } #prod-list .price { font-size: 1.0em; } #prod-list .prod-img a { width: 260px; } #prod-list .prod-img img { max-width: 210px; } #container-shadow { background: #fff; } #sidebar { width: 250px; } #sidebar #categories, #sidebar .paddbox { width: 200px; padding: 30px 25px 20px 25px; } #brand-az { width: 980px; } #brand-az li a { padding: 7px 13px 5px 13px; } #brand-list ul { width: 940px; } #brand-list ul li { width: 218px; } #subfooter #we-accept { padding-right: 30px; } #subfooter-left { width: 840px; } #subfooter blockquote { width: 528px; padding-top: 10px; } #subfooter .btns { width: 528px; } #subfooter blockquote.sm { font-size: 15px; line-height: 22px; } #footersub h4 { font-size: 20px; } #footersub #mailing fieldset label, #footer fieldset .input-field { font-size: 17px; } #footersub #mailing fieldset .input-field { width: 250px; font-size: 17px; padding: 7px 6px 7px 10px; } #geotrust { left: 925px; } #content #empty-cart { width: 1120px; padding-bottom: 175px; margin-left: -40px; } #prod-list .label-practitioner { left: 18px; } #footer-btm .left, #footer-btm .right { width: auto; } #footer-btm .right { float: right; } #footer-links ul.divider { padding-left: 50px; margin-left: 50px; } .edu-top .thumb { width: 200px; } .edu-top .thumb .logo { width: 200px; } } /* for 600px or less */ @media screen and (max-width: 600px) { * { font-size: 14px!important; line-height: 20px!important; } body { background: #fff; margin: 0!important; padding: 0!important; } h1 { font-size: 23px!important; line-height: 28px!important; } h1 span { font-size: 23px!important; } h2, h3, h4 { font-size: 18px!important; margin: 0 0 10px 0; color: #000; line-height: 24px!important; } h2 span, h2 a, h3 span, h4 span { font-size: 18px!important; line-height: 24px!important; } a { text-decoration: underline; } blockquote, blockquote a, blockquote strong { font-size: 17px!important; line-height: 24px!important;} blockquote strong { font-weight: normal; } .mob-hide, .hide { display: none; } .bold { font-weight: 800; } .img-left { float: left; margin: 0 15px 15px 0; } .img-right { float: right; margin: 0 0 15px 15px; } .width30, .width35 { width: 45%; } #mob-header { float: left; width: 100%; background: url(../images/bg-footer.jpg) repeat center 0 #956b4a;background-size: 120% auto; /* Change BG color to suit clients color scheme */ } #mob-menu-btn { float: left; width: 40%; text-align: left; font-size: 15px; color: #fff; cursor: pointer; cursor: hand; padding: 10px 0 10px 50px; text-transform: uppercase; font-weight: bold; background: url(../images/mobile/nav-menu.png) no-repeat 20px center; background-size: auto 12px; } #mob-login-btn { float: right; width: 30%; text-align: right; padding: 10px 20px 10px 0; color: #fff; cursor: pointer; cursor: hand; text-decoration: none; } #mob-header .phone { float: right; padding: 10px 15px 8px 0; color: #fff; font-size: 15px; } #mob-header .phone a { color: #fff; text-decoration: none; } #phone { float: right; display: block; padding: 18px 20px 0 0; font-weight: 800; } #phone a { color: #231f20; text-decoration: none; font-size: 20px!important; } #mob-login { float: left; width: 88%; padding: 20px 6%; border-top: solid 1px #62cc6b; } #header { float: left; width: 100%; text-align: center; border-bottom: solid 1px #dfd2bd; padding: 0!important; margin: 0!important; } #header #logo { float: left; width: 100%; padding: 6px 0; margin: 0!important; background: url(../images/mobile/header.jpg) center 0!important; background-size: 170% auto!important; } #header #logo img { height: 100px!important; width: auto; margin: 0!important; } #heading-wrap { padding-bottom: 0; } #heading-wrap h1 { margin: 0; } #left { width: 100%; } #right { width: 100%; } #content, #footer, #heading, #footer-social-wrap, #home-introduction, .home-intro, .home-login, #sub-container, #banner, #sidebar { float: left; width: 88%; padding: 20px 6%; } #container { float: left; width: 100%; } #content { padding-top: 30px; padding-bottom: 25px; } /* For anything that requires hiding */ hr, #nav, #slogan, #subfooter-wrap, #foot-right, #home-right .callout, #breadcrumbs, #purple-bar, #slider, #print-logo, #top-links, #header-links, #social-links, #header-center, #footer-callout .brand-callout, #home-new-arrivals { display: none; } /* Mobile Navigation --------------- */ #mob-nav { float: left; width: 100%; } #mob-nav ul { float: left; width: 100%; margin: 0; padding: 0; border-top: none; } #mob-nav ul li { float: left; width: 100%; margin: 0; padding: 0; background: none; list-style-type: none; letter-spacing: 0.05em; } #mob-nav ul li a { float: left; width: 85%; padding: 8px 10% 8px 5%; color: #fff; text-decoration: none; letter-spacing: -0.01em; font-size: 15px!important; background: url(../images/mobile/subnav-arrow.png) no-repeat 94% center; background-size: 10px auto; border-top: solid 1px #b28564; text-decoration: none!important; } #mob-nav ul li a:hover { background-color: #7c5535; } #heading, #home-introduction { padding-top: 15px; padding-bottom: 15px; } #home-introduction { background: url(../images/divider.png) no-repeat center bottom; padding-bottom: 40px!important; text-align: center; } #heading { background: #f2e9da; border-bottom: solid 1px #dfd2bd; } #heading h1 { margin: 0; } .home-intro, .home-login { background: #fbf9f6; } #home-loginform { background: #e9e3d9; border: none; } #brand-az { float: left; width: 100%; padding: 0; margin: 0; } #brand-az li { float: left; width: 8%; margin: 0 7px 7px 0; padding: 0; list-style-type: none; } #brand-az li a { float: left; width: 100%; text-align: center; background: #f1e8d9; border: solid 1px #ccc; padding: 3px 0; -moz-border-radius: 5px; border-radius: 5px; text-decoration: none; color: #7c705c; } .brand-char { float: left; width: 100%; margin-top: 20px; background: #956947; color: #fff; text-align: center; height: 35px!important; padding-top: 15px; font-size: 24px!important; font-weight: bold; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } #banner { width: 88%; padding: 20px 6%; margin-top: -1px; background: url(../images/home-banners/healthfood-wholesale.jpg) no-repeat center 0; background-size: auto 100%; text-align: center; padding-top: 30px; padding-bottom: 90px; } #banner img { display: none; } #banner h1, #banner h1 a { color: #000; text-decoration: none; font-size: 18px!important; } #banner p, #banner ul { display: none; } #homepage-brands { float: left; width: 90%; padding: 20px 5%; } #homepage-brands ul { padding: 0; margin: 0; } #homepage-brands ul li { float: left; width: 33%; padding: 0; margin: 0; list-style-type: none; } #homepage-brands ul li a { float: left; width: 80%; padding: 0 10%; } #homepage-brands ul li img { height: 60px; width: auto; } /* General --------------- */ #right { padding-top: 30px; padding-bottom: 30px; } #sidebar { border-top: solid 1px #ccc; padding-top: 30px; } .mob-hide { display: none; } /* can be used to hide elements only on small screen */ .nomargin { margin: 0!important; } #main img { max-width: 100%!important; height: auto!important; } /* Adjusts width on photos within content */ .content-photo { margin: 0 0 10px 0; } .mob-btns, .subList, #brand-list ul, #footer ul { /* Any list within content can be made into a nice button format by adding this class to the ul */ float: left; width: 100%!important; margin: 0 0 20px 0!important; padding: 0!important; } .mob-btns li, .subList li, #subnav h2, #brand-list li, #footer ul li { float: left; width: 100%!important; list-style-type: none; margin: 0!important; padding: 0!important; } .mob-btns li a, .subList li a, .mob-btn, #subnav h2 a, input[type=submit], .btn, #brand-list li a, #footer ul li a, #footer ul li h4 { float: left; width: 90%; padding: 8px 5%; background: url(../images/mobile/subnav-arrow-black.png) no-repeat 94% center #e9e3d9; letter-spacing: 0.05em; color: #997158; background-size: 8px auto; text-decoration: none!important; border-bottom: solid 1px #d8cab2; font-size: 15px!important; letter-spacing: -0.01em; margin: 0; } .mob-btns li a:hover, .subList li a:hover, .btn:hover, #footer ul li a:hover { background-color: #e1d9cc; } .mob-btns li:first-child a, .subList li.first a, #footer ul li:first-child a { -moz-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } .mob-btns li:last-child a, .mob-btns li.last a, .subList li.last a, #brand-list li:last-child a, #footer ul li:last-child a { -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; border-bottom: none; } .mob-btn, .btn { background: url(../images/mobile/subnav-arrow.png) no-repeat 94% center #7fb439; background-size: 8px auto; margin: 0 0 15px 0; -moz-border-radius: 25px; border-radius: 25px; border-bottom: none; } .btn span { color: #fff; } #brand-list li span { display: none; } input[type=submit] { border: none; -moz-border-radius: 5px; border-radius: 5px; } #apply-box { float: left; width: 100%; margin-top: 20px; background: #11598f; -moz-border-radius: 6px; border-radius: 6px; } #apply-heading { float: left; width: 90%; padding: 10px 5%; background: #093c64; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; text-align: center; } #apply-heading h2 { color: #fff; padding: 10px 0 0 0; font-size: 19px; line-height: 22px; } #apply-box h3 a { color: #fff; font-weight: normal; } #apply-content { float: left; width: 84%; padding: 15px 8% 22px 8%; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; text-align: center; } #apply-content p { color: #fff; } #apply-box .btn, .about-left .btn { padding: 10px 15px; background: #40ae49; -moz-border-radius: 6px; border-radius: 6px; color: #fff; text-decoration: none; font-family: 'Domine', georgia, times, serif; font-size: 17px; } #apply-box .btn span, .about-left .btn span { background: url(../images/icon-arrow.png) no-repeat right center; padding-right: 25px; } #apply-box .btn:hover, .about-left .btn:hover { background-color: #259b2f; } #apply-box .btm-margin { margin-bottom: 30px; } #home-introduction { padding-top: 30px; padding-bottom: 10px; margin: 0; } #sub-container { text-align: center; border-top: solid 1px #ccc; padding-top: 30px; padding-bottom: 30px; } #sub-container .brand-logos { width: 100%!important; } #sub-container .view-brands a { float: left; width: 100%; margin-top: 10px; } #content .public-brand-info .sm-txt { display: none; } #content .public-brand-heading h2 { margin: 0 0 25px 0; } #brand-products { float: left; width: 100%; } #brand-products ul { float: left; width: 95%; margin: 0 0 20px 0; padding: 0 0 0 5%; } #brand-products ul li { float: left; list-style-type: none; padding: 15px 0 0 0; margin: 0 3% 0 3%; text-align: center; } #brand-products ul li img { height: 120px; } #postcode-search label { width: 40%; position: absolute; top: 8px; left: 10px; } #postcode-search fieldset { position: relative; background: none; border: none; padding: 0; width: 100%; } #postcode-top fieldset input { float: left; z-index: 999; } #postcode-top .postcode { width: 50%; border: solid 1px #68a56d; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; padding: 2px 5px 0 10px; height: 32px; font-size: 21px; } #postcode-btm h2, #postcode-btm h2 a { text-transform: uppercase; font-weight: bold; margin: 0; line-height: 1.4em!important; color: #fff; font-size: 14px!important; } #postcode-btm h2 a { text-transform: none; font-weight: normal; } #postcode-btm { float: left; width: 90%; padding: 12px 5%; background: #40ae49; -moz-border-radius: 6px; border-radius: 6px; margin: 10px 0 10px 0; } #postcode-results { float: left; width: 100%; padding-top: 30px; } #postcode-results h2 { font-size: 21px; margin: 0 0 15px 0; } #postcode-results table { width: 100%; border-top: solid 1px #7c7c7c; } #postcode-results table td { border-bottom: solid 1px #7c7c7c; background: #e6e6e6; padding: 12px; } #postcode-results table td strong { color: #000; } #postcode-results table tr:nth-child(odd) td {background: #efefef; } #postcode-results .results-ph { width: 150px; } #homepage-brands { display: none; } /* Education Centre --------------- */ #results-bar p { float: left; width: 50%; padding: 0; } .edu-top { width: 90%; margin: 0 5%; } .edu-btm { width: 90%; margin: 0 5%; } .edu-products { width: 90%; margin: 0 5%; } .edu-top .overview { width: 100%; padding-right: 0; } .edu-top .overview p { font-size: 13px!important; } .edu-top .thumb { width: 100%; height: 50px; } .edu-top .thumb .logo { float: left; width: 100%!important; text-align: center; height: 50px; } .edu-top .thumb img { height: 50px; width: auto; max-width: 300px; } #content .edu-brand ul li, #content .edu-brand ul li a, #content .edu-brand ul li span { font-size: 13px!important; } .edu-btm .left { width: 100%; } .edu-btm .right { width: 100%; } .edu-brand ul li .type { width: 22%; } .edu-brand ul li .date { width: 22%; } .edu-brand ul li .title { float: left; width: 73%; padding: 4px 0 3px 3%; } #seminar-list ul li { padding: 20px 0; } #seminar-list ul li .logo { float: right; width: 100px; text-align: right; } #seminar-list ul li .logo img { max-width: 100px; } #seminar-list ul li .location { width: 100%; padding: 10px 0 0 0; margin: 0 0 -4px 0; } #seminar-list ul li .title { width: 100%; } #seminar-list ul li .more { float: left; } #seminar-detail .heading h1 { font-size: 20px!important; } #seminar-detail .brand-logo { padding: 10px; margin: 5px 0 0 15px; border: solid 1px #ccc; } #seminar-detail .brand-logo img { max-width: 120px; max-height: 43px; } /* Fieldset --------------- */ fieldset, #field_form { width: 90%; } fieldset p, fieldset label { width: 100%; float: left; } fieldset, #postcode-search { float: left; width: 88%; padding: 20px 6% 10px 6%; margin: 0; background: #efefef; border: solid 1px #d5d5d5; margin: 0 0 10px 0; -moz-border-radius: 5px; border-radius: 5px; } fieldset legend { font-weight: bold; } fieldset div, fieldset p { float: left; width: 100%; margin: 0 0 6px 0; position: relative; } fieldset input[type="text"], fieldset input[type="password"], fieldset textarea { border: solid 1px #bbbbbb; padding: 6px 10px; -moz-border-radius: 4px; border-radius: 4px; font-size: 13px; color: #7b7b7b; background: url(../images/input-bg.gif) repeat-x 0 bottom #fff; width: 90%; } fieldset input[type="text"]:focus, fieldset textarea:focus { border: solid 1px #ec8700; } fieldset label { float: left; width: 100%; margin: 0 0 5px 0; } fieldset label .req { font-size: 0.75em; color: #b60404; } fieldset .sm { font-size: 11px; color: #7b7b7b; } fieldset .smtxt { display: none; } /* Footer --------------- */ #footer-social-wrap { background: #7fb439; color: #fff; text-align: center; width: 80%; padding: 20px 10% 0 10%; } #footer-social-wrap p, #footer-social-wrap p a { color: #fff; font-size: 17px!important; line-height: 1.4em!important; } #footer-social-wrap ul { display: none; } #footer-social-wrap ul li { list-style-type: none; padding: 0; margin: 0 0 10px 0; } #footer { float: left; background: url(../images/bg-footer.jpg) repeat center 0 #956b4a; border-top: solid 3px #886040; background-size: 120% auto; padding: 30px 6% 30px 6%; width: 88%; text-align: center; } #footer p, #footer p a { color: #fff; font-size: 13px!important; } #footer a { text-decoration: underline; } #footer .mob-btns li a {background-color: #6a4da2; border-bottom: solid 1px #8d73bf; font-weight: 700; } #footer .mob-btns li a:hover { background-color: #e16e00; } #footer p, #footer ul { width: 100%!important; margin: 0 0 15px 0; padding: 0; text-align: center; } #footer ul li { width: 100%; padding: 0; margin: 0; } #footer ul li a { background-image: none; } #footer ul li h4 { background: #7fb439; color: #fff; border: none; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #footer .padtop { display: none; } #footer .mob-brands { margin: 0!important; border-bottom: solid 1px #d8cab2; } #footer .mob-brands li:last-child a { -moz-border-radius: 0; border-radius: 0; } #footer-callout .magazine-callout { float: right; width: 86%; padding: 30px 7% 0 7%; text-align: center; border-top: solid 2px #1a8acf; } #footer-callout .magazine-callout h3 { margin: 0 0 5px 0; } #footer-callout .magazine-callout h3 a { color: #1a8acf; font-size: 17px!important; } #footer-callout .magazine-callout p { color: #1a8acf; font-size: 13px; line-height: 18px; margin: 0 0 20px 0; } #footer-callout .magazine-callout .mc-right img { height: 160px; width: auto; } }