/******************************************************************************/ /* GLOBAL CSS STYLESHEET - Macropet Websites /* /* AUTHOR: Jared Williams (BlakeMedia) /* VERSION: mark 1.05 /* CREATED: 22 May 2014 /* MODIFIED: 22 May 2014 /* /* (c) Copyright 2002-2014 BlakeMedia & MediaIQ Group /******************************************************************************/ /******************************************************************************/ /* COMPONENTS */ /******************************************************************************/ /*** NOTIFICATIONS ***/ .stacks {width:100%;height:35px;position:fixed;top:0;left:0;z-index:99;overflow:hidden} .stacks .inner {width:100%;height:100%} .stacks.static {display:block !important} /* TODO: Not rely on !important */ .stacks.modals {top:0 !important;position:fixed !important;z-index:1000} .stacks.modals .inner {left:0} .stacker {width:100%;height:35px;position:absolute;top:0;left:0;opacity:1} .stacker > * {height:100%} .stacker .content {width:100%;max-width:980px;position:relative;margin:0 auto;text-shadow:none;font-size:13px;font-weight:300;color:#FFF} .stacker .content .message {padding:9px} .stacker .content .title {min-width:50px;padding:9px 13px 9px 15px;float:left;font-weight:bold} .stacker .content BUTTON, .stacker .content .button {height:25px;position:absolute;top:0;right:0;border:none;border-radius:0;text-transform:uppercase;font-size:13px;line-height:2;background:rgba(239, 58, 70, 0.8)} .stacker .content I {font-size:16px;margin-right:3px} .stacker.before {top:-35px} .stacker.active {top:0} .stacker.after {top:-35px} .stacker.failed, .stacker.cancel, .stacker.error {background:#EF3A46;background:rgba(239, 58, 70, 0.8)} .stacker.danger, .stacker.warning, .stacker.alert, .stacker.urgent {background:#F9B233;background:rgba(249, 178, 51, 0.8)} .stacker, .stacker.notice, .stacker.okay, .stacker.success, .stacker.complete {background:#2DAAE1;background:rgba(45, 170, 225, 0.8)} /******************************************************************************/ /* TEMPLATE */ /******************************************************************************/ /****************************** TEMPLATE MASTER *******************************/ #tplMaster {height:auto !important;height:100%;min-height:100%;margin-bottom:-65px} /****************************** TEMPLATE HEADER *******************************/ #tplHeader {position:relative;background:url(/_images/secure/header-bg.jpg) center top no-repeat} #tplHeader > .content {width:980px;height:165px;position:relative;z-index:5;margin:0 auto} #tplHeader .logo {width:170px;height:81px;margin-top:15px;float:left} #tplHeader .logo A {display:block;width:100%;height:100%} #tplHeader UL, #tplHeader UL LI {list-style:none} /*** NAV ***/ #tplHeader .nav {width:100%;height:65px;position:absolute;bottom:0;right:0;z-index:10;background:#96C11F} #tplHeader .nav UL {width:980px;height:100%;margin:0 auto} #tplHeader .nav UL LI {width:160px;height:100%;float:left} #tplHeader .nav UL A, #tplHeader .nav UL A:link, #tplHeader .nav UL A:active, #tplHeader .nav UL A:visited {width:100%;height:100%;display:inline-block;text-decoration:none;color:#FFF} #tplHeader .nav UL A:hover {cursor:pointer} /** ICONS **/ #tplHeader .nav UL LI .icon {width:45px;height:45px;position:relative;margin:11px 10px 0 10px;float:left} /** LABELS **/ #tplHeader .nav UL LI .label {width:80px;padding-top:14px;float:left} /* Sprite: Coloured */ #tplHeader .nav UL LI.stockists .icon {background-position:-20px -20px} /** STATES **/ #tplHeader .nav UL LI:hover {} #tplHeader .nav UL LI.on {background-color:#b6d267} #tplHeader .shadow {width:100%;height:10px;position:absolute;left:0;bottom:65px;background:url(http://cdn.blakeserve.com/shared/clients/macropet/_images/master/header-shadow.png) repeat} /****************************** TEMPLATE CONTENT ******************************/ #tplContent {padding-bottom:65px} #tplContent .gContent {width:980px;margin:0 auto;padding-top:40px} .col {float:left} /****************************** TEMPLATE FOOTER *******************************/ #tplFooter {width:980px;height:30px;margin:0 auto;padding-top:35px;overflow:auto} #tplFooter .copyright {margin-top:3px;float:left;font-size:11px;color:#666666} /***Badge***/ .bm-badge {width:102px;height:20px;margin-bottom:10px;float:right;background-image:url(http://cdn.blakeserve.com/images/bm/badge-200.png)} .bm-badge A {width:100%;height:100%;display:inline-block} .bm-badge.white {background-position:-150px -0px} .bm-badge.white:hover {background-position:-0 -50px} .bm-badge.black {background-position:-0 -150px} .bm-badge.black:hover {background-position:-0 -200px} #tplFooter .bm-badge {opacity:0.5} #tplFooter .bm-badge:hover {opacity:1.0} /******************************************************************************/ /* CONTENT - SPECIFIC */ /******************************************************************************/ /*************************** COMPONENT: SLIDESHOW *****************************/ .slideshow .slide {display:none} .slideshow .slide.visible {display:block} /* .slideshow UL, .slideshow UL LI {margin:0;padding:0;list-style:none} .slideshow .slide-nav {padding:10px 0;border-left:2px solid #2DAAE1} .slideshow .slide-nav .slide-btn {position:relative;border-top:1px solid #DDD;padding:10px;color:#999} .slideshow .slide-nav .slide-btn:hover {color:#2DAAE1;cursor:pointer;background:#F3F3F3} .slideshow .slide-nav .slide-btn.on {border-radius:0 5px 5px 0;font-weight:bold;color:#FFF;background:#2DAAE1} .slideshow .slide-nav .slide-btn:first-child, .slideshow .slide-nav .slide-btn.on, .slideshow .slide-nav .slide-btn.on + .slide-btn {border-top-color:transparent} .slideshow .slide-nav .slide-btn:hover:before, .slideshow .slide-nav .slide-btn.on:before {width:0;height:0;position:absolute;top:12px;content: ' ';border-bottom:7px solid transparent;border-top:7px solid transparent;border-left:7px solid #2DAAE1} .slideshow .slide-nav .slide-btn:hover:before {left:0} .slideshow .slide-nav .slide-btn.on:before, .slideshow .slide-nav .slide-btn.on:hover:before {left:auto;right:-7px} .slideshow .slide {display:none} .slideshow .slide.visible {display:block} .slideshow .slide .title {margin-bottom:30px} */ /*************************** COMPONENT: SIDEBAR TABS ***************************/ .tabs, .tabs .tab {margin:0;padding:0;list-style:none} .tabs {padding:10px 0;border-left:2px solid #2DAAE1} .tabs .tab {position:relative;border-top:1px solid #DDD;padding:10px;color:#999} .tabs .tab:hover {color:#2DAAE1;cursor:pointer;background:#F3F3F3} .tabs .tab.on {border-radius:0 5px 5px 0;font-weight:bold;color:#FFF;background:#2DAAE1} .tabs .tab:first-child, .tabs .tab.on, .tabs .tab.on + .tab {border-top-color:transparent} .tabs .tab:hover:before, .tabs .tab.on:before {width:0;height:0;position:absolute;top:12px;content: ' ';border-bottom:7px solid transparent;border-top:7px solid transparent;border-left:7px solid #2DAAE1} .tabs .tab:hover:before {left:0} .tabs .tab.on:before, .tabs .tab.on:hover:before {left:auto;right:-7px} .slideshow .slide .title {margin-bottom:30px} /************************** COMPONENT: PRODUCT LIST ****************************/ .gCells {} .gCells .col {width:233px} .gCells .col.span-2 {width:466px} .gCells .col.span-3 {width:699px} .gCells .col .title {width:100%;float:left} .gCells .col .title H1 {color:#f4b03d} .gCells .col .title H1 .small {color:#fcd47f} .gCells .col .title .icon {width:40px;height:40px;float:left;margin-right:15px;background:url(/_images/secure/master-sprite-100.png)} .gCells .col.new .title .icon {background-position:-0px -300px} .gCells .col.special .title .icon {background-position:-50px -300px} .gCells .col.popular .title .icon {background-position:-100px -300px} .gCells .cell {width:233px;height:233px;float:left} .gCells .cell .inner {padding:0 8px 8px;text-align:center} .gCells .cell .image {width:150px;height:150px;margin:0 auto} .gCells .cell .image IMG {max-width:100%;max-height:100%} .gCells .cell .image .wrapper {position:relative} .gCells .cell .image .wrapper:after {width:120px;height:35px;content:'Go';position:absolute;bottom:0;right:0;padding-right:30px;display:none;text-align:right;line-height:2.3;color:#ADADAD;background:url(/_images/secure/master-sprite-100.png) 127px -602px;background-color:#FFF;background-color:rgba(255,255,255,0.7)} .gCells .cell .image .wrapper:hover:after {display:block} .gCells .cell .name {height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gCells .cell .name, .gCells .cell .name A, .gCells .cell .name A:hover {font-weight:bold;font-size:14px;color:#034764} .gCells .cell .name.family, .gCells .cell .name.family A {font-size:12px} .gCells .cell .controls {width:160px;margin:4px auto 0} .gCells .cell .controls, .gCells .cell .controls A {color:#2DAAE1} .gCells .cell .controls A {width:100%;height:100%;display:inline-block} .gCells .cell .controls .control {width:70px;float:left} .gCells .cell .controls .control:hover {cursor:pointer} .gCells .cell .controls .control:first-child {margin-right:20px} .gCells .cell .controls .control .icon {width:25px;height:25px;float:left;margin-right:8px;background:url(http://cdn.blakeserve.com/shared/clients/macropet/_images/master/master-sprite-100.png)} .gCells .cell .controls .control .label {padding-top:3px;float:left} .gCells .cell .controls .control.view .icon {background-position:-100px -200px} .gCells .cell .controls .control.view:hover .icon {background-position:-100px -250px} .gCells .cell .controls .control.add .icon {background-position:-50px -200px} .gCells .cell .controls .control.add:hover .icon {background-position:-50px -250px} /******************************* PAGE: BROWSE *********************************/ .pgBrowse {position:relative;clear:both} /** Both **/ .pgBrowse .product-details .row .label {min-height:19px;float:left;margin-right:8px;font-weight:bold;color:#034764} .pgBrowse .product-details .row .value {} .pgBrowse .product-desc {clear:both;width:100%;float:left;margin-top:10px;} .pgBrowse .cell .wholesaleprice {padding:5px} .pgBrowse .stock {text-transform:uppercase;letter-spacing:0;font-weight:bold} .pgBrowse .stock.in, .pgBrowse .stock .in {color:#96C11F} .pgBrowse .stock.out, .pgBrowse .stock .out {color:#EF3A46} .pgBrowse .stock.backorder, .pgBrowse .stock .backorder {color:#2DAAE1} .pgBrowse .grad {width:100%;height:20px;position:absolute;left:0;display:none;background:url(http://cdn.blakeserve.com/shared/clients/macropet/_images/master/content-grad.png) repeat-x} .pgBrowse .grad.top {top:0;background-position:0 0} .pgBrowse .grad.bottom {bottom:0;background-position:0 -20px} /** Global **/ .pgBrowse .product IMG {} .pgBrowse .product .name, .pgBrowse .product .name A, .pgBrowse .product .name A:hover {font-weight:bold;color:#034764} .pgBrowse .product .name {font-size:24px} .pgBrowse .product .name.family {text-transform:uppercase;font-size:14px} .pgBrowse .product .details {margin-top:10px} .pgBrowse .product .details .row {margin-top:10px} .pgBrowse .product .product-image {width:360px;float:left;margin-bottom:20px} .pgBrowse .product .product-details {width:360px;float:right} .pgBrowse .product .product-details > .inner {padding:10px} .pgBrowse .product .product-details .row {width:100%;float:left} .pgBrowse .product .add-to-order {clear:both;overflow:auto;padding:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} .pgBrowse .product .add-to-order .row {clear:both;margin-top:5px} .pgBrowse .product .add-to-order .row .cell {width:50%;float:left} .pgBrowse .product .add-to-order .row.last {margin-top:15px;text-align:right} .pgBrowse .product .add-to-order .row.last .price {padding:6px;float:right;margin-right:10px} .pgBrowse .product .add-to-order .row .stock {padding:6px;float:right} .pgBrowse .product .add-to-order .row.last BUTTON {float:right} .pgBrowse .product .totalprice-normal { } .pgBrowse .product .totalprice-discount { color: #FCB040; } .pgBrowse .product .totalprice-stroke { position: relative; color: hsl(0, 0%, 66.6%); } .pgBrowse .product .totalprice-stroke:after { /* line-truu effect */ content: ''; position: absolute; top: 46.5%; left: -3px; right: -3px; border-bottom: 1px solid hsl(0, 0%, 66.6%); } /** View Only **/ .pgBrowse .view-product {margin-top:40px} /** Dashboard Only **/ .pgBrowse.grid .product-desc {display:none} .pgBrowse.grid .modal .product-desc {display:block} /** Modals Only **/ .pgBrowse .modal {width:700px} .pgBrowse .modal .product-details {width:300px} .pgBrowse .modal .product-desc {position:relative;border:0px solid #F3F3F3;border-left-width:1px;border-right-width:1px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} .pgBrowse .modal .product-desc > .scroll-inner {height:200px;padding:10px;overflow:auto} .pgBrowse .modal .product-desc .grad {display:block} .pgBrowse .modal .product-desc.top {border-top-width:1px} .pgBrowse .modal .product-desc.top .grad.top {display:none} .pgBrowse .modal .product-desc.bottom {border-bottom-width:1px} .pgBrowse .modal .product-desc.bottom .grad.bottom {display:none} /** Supplier Only **/ .pgBrowse .suppliers .cell .image .wrapper:after {display:none} .pgBrowse .suppliers .cell A {width:100%;height:100%;display:block} /** Suppliers **/ .pgBrowse .gCells.suppliers {} .pgBrowse .gCells.suppliers .cell A:hover {text-decoration:none} .pgBrowse .gCells.suppliers .cell:hover {background-color:#FAFAFA} .pgBrowse .gCells.suppliers .cell .inner {padding-top:25px} /** Filters **/ .pgBrowse .gFilters {} .pgBrowse .gFilters .title {float:left;margin-right:20px;font-weight:bold;color:#2DAAE1} .pgBrowse .gFilters .title .icon {width:40px;height:40px;float:left;margin-right:11px;background:url(http://cdn.blakeserve.com/shared/clients/macropet/_images/master/master-sprite-100.png) -150px -300px} .pgBrowse .gFilters .title .label {margin-top:10px;float:left} .pgBrowse .gFilters .filters {width:617px;float:left;margin:-8px 0 10px} .pgBrowse .gFilters .filters .left {float:left} .pgBrowse .gFilters .filters .right {float:right} .pgBrowse .gFilters .filters .filter {float:left;margin:10px 10px 0 0;padding:11px 9px 9px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;behavior:url(/_assets/scripts/PIE.htc);font-size:10px;background:#FFF} .pgBrowse .gFilters .filters .filter I {font-size:160%;line-height:1;vertical-align:middle} /* States */ .pgBrowse .gFilters .filters .filter {background:#FAFAFA} .pgBrowse .gFilters .filters .filter:hover {cursor:pointer;background:#F3F3F3} .pgBrowse .gFilters .filters .filter.on {color:#FFF;background:#2DAAE1} /** Products **/ .pgBrowse .gRows {clear:both} .pgBrowse .gRows .cell {width:100%;height:auto;position:relative;clear:both} /* Inner */ .pgBrowse .gRows .cell .inner {width:732px;position:relative;padding:12px 10px 10px 10px;float:right;overflow:hidden;border-bottom:2px solid #C2C2C2;font-size:90%;z-index:10} .pgBrowse .gRows .cell:last-child .inner {border-bottom:0} .pgBrowse .gRows .cell .inner:hover, .pgBrowse .gRows .cell.on .inner {background:#F8F8F8} .pgBrowse .gRows .cell .inner:hover .grad.bottom, .pgBrowse .gRows .cell.on .inner .grad.bottom {background-position:0 -60px} /* Photo */ .pgBrowse .gRows .cell .image {float:left;margin-right:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;overflow:hidden} .pgBrowse .gRows .cell .image .wrapper {} .pgBrowse .gRows .cell .image IMG {max-width:100%;max-height:100%;display:block} .pgBrowse .gRows .cell .image:hover {cursor:pointer} .pgBrowse .gRows .cell .image .icon-zoom-in {margin-left:6px} /* Main Elements */ .pgBrowse .gRows .cell .info {width:550px;float:left;text-align:left} .pgBrowse .gRows .cell .family {display:none} .pgBrowse .gRows .cell .name {font-weight:bold;color:#034764} .pgBrowse .gRows .cell .name:hover {cursor:pointer} .pgBrowse .gRows .cell .desc {width:100%;max-height:100px;position:relative;overflow:hidden;margin:10px 0;float:left;line-height:1.5em} /* text-overflow:ellipsis;white-space:nowrap;word-break:break-word; */ .pgBrowse .gRows .cell .desc .grad.bottom {display:block} /* Details */ .pgBrowse .gRows .cell .details {width:100%;float:left} .pgBrowse .gRows .cell .row {width:50%;float:left;padding-top:5px} /* .pgBrowse .gRows .cell .controls {position:absolute;bottom:10px;right:10px;display:block} */ .pgBrowse .gRows .cell .controls {margin-top:10px;float:right} .pgBrowse .gRows .cell .controls, .pgBrowse .gRows .cell .controls .control {width:auto} /* Stock */ .pgBrowse .gRows .cell .stock {position:absolute;top:10px;right:10px} /******************************************************************************/ /* REVISION HISTORY */ /******************************************************************************* 2013 Oct 16 (Jared Williams) - global.css 1.0 - Started revision history 2013 Oct 30 (Jared Williams) - global.css 1.0 - Added content padding for sticky footer 2013 Nov 08 (Jared Williams) - global.css 1.0 - Fixed modal notices not positioning correctly - Moved main content container from secure stylesheet 2013 Nov 11 (Jared Williams) - global.css 1.0 - Removed unncessary background colour from header 2014 Jan 07 (Jared Williams) - global.css 1.01 - Added browse filter icons - Fixed browse filter title icon - Added backorder stock indicator style 2014 Jan 08 (Jared Williams) - global.css 1.02 - Added extra margins to browse filters 2014 Jan 10 (Jared Williams) - global.css 1.03 - Reduced filter button size 2014 Mar 12 (Jared Williams) - global.css 1.04 - Added "static" stacked notices - Added max-width to stacked notices - Added button styling for stacked notices - Nudged content padding by 10px 2014 May 22 (Jared Williams) - global.css 1.05 - Fixed browse -> filter width/positioning /******************************* END STYLESHEET *******************************/