/* Master Responsive Style Sheet */ /* reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, q, small, strike, strong, sub, sup, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; margin-bottom: 20px; } /* basic */ body { font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #333; font-family: 'Archivo Narrow', helvetica, arial, serif; color: #4865a0; font-weight: 600; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: #33CCFF; } h1 { font-size: 35px; line-height: 45px; margin: 0; font-weight: 600; color: #FFF; text-transform: uppercase; display: inline-block; } h2 { font-size: 18px; line-height: 25px; margin: 10px 0px; font-weight: 600; color: #666; font-family: 'Open Sans', helvetica, arial, serif; } h3 { font-size: 20px; line-height: 24px; margin-bottom: 12px; font-weight: 400; color: #666; font-family: 'Open Sans', helvetica, arial, serif; } h4 { font-size: 16px; line-height: 25px; font-family: 'Open Sans', helvetica, arial, serif; font-weight: normal; color: #666; } h5 { font-size: 15px; line-height: 21px; font-weight: bold; text-transform: uppercase; font-family: 'Open Sans', helvetica, arial, serif; } h6 { font-size: 14px; line-height: 21px; font-family: 'Open Sans', helvetica, arial, serif; } p { font-size: 14px; line-height: 20px; margin: 0 0 20px; color: #666; font-family: 'Open Sans', helvetica, arial, serif; } p.small, ul.small { font-size: 13px; } p.smaller, ul.smaller { font-size: 12px; } p img { margin: 0; } em { font-style: italic } strong { font-weight: bold } small { font-size: 80% } blockquote, blockquote p { line-height: 24px; color: #777; font-style: italic; } blockquote { font-size: 12px; border-left: 1px solid #ddd; margin: 0 0 20px; padding: 10px 20px 10px 19px; } blockquote cite { display: block; text-indent: 42px; color: #555; position: relative; } blockquote cite:before { content: "\201c"; font-weight: bold; font-style: normal; font: 94px/74px Arial; position: absolute; top: -2px; left: -36px; } blockquote cite a, blockquote cite a:visited,blockquote cite a:visited { color: #555; } hr { border: solid #ddd; clear: both; height: 0; border-width: 1px 0 0; margin: 10px 0; } a, a:visited { color: #CC0000; text-decoration: underline; outline: 0; } a:hover,a:focus { color: #CC0000; } p a, p a:visited { line-height: inherit; } ul, ol { margin-bottom: 20px; } ul { list-style: none outside; } ol { list-style: decimal; margin: 40px 0; color: #666; } ol, ul.square, ul.circle, ul.disc { margin-left: 20px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ol.roman { list-style: upper-roman; } ol.alpha { list-style: lower-alpha; } ul ul, ul ol, ol ol, ol ul { font-size: 90%; margin: 10px 0 6px 20px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 18px; margin-bottom: 12px; } .table-wrap { position: relative; display: block; overflow: hidden; clear: both; } .table-wrap table td:first-child { width: auto !important; white-space: normal !important; } /* Generic */ .float-left { float: left; } .float-right { float: right; } .hide-mobile { display: none; } .scale { width: 100%; height: auto; } .clickable:hover { cursor: pointer; } .zhidden { display: none; } .hide-mobile { display: none !important; } .hide-fullsize { display: block !important; } .relative { position: relative; } @keyframes highlight { 0% { background: #ffff99; /* lovely yellow colour */ } 100% { background: none; } } .highlight { animation: highlight 2s; } .swal2-popup .swal2-styled:focus { box-shadow: none !important; } /* Main Structure */ html, body { width: 100%; min-height: 100%; } body { background: #3d4247; } div.sep { clear: both; float: none; display: block; width: auto; margin: 20px 0; height: 1px; } div.sep.short { margin: 20px 0; } div.sep-small { height: 1px; border-bottom: 3px dotted #CCC; } div.sep-big { height: 4px; border-bottom: 3px dotted #CCC; } /* 960 grid system */ .container { position: relative; display: block; margin: 0 auto; padding: 0 15px; } .ie7 .container { position: static; } .container .col { width: 100%; } body .container .col.alpha { margin-left: 0; } body .container .col.omega { margin-right: 0; } .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1 } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* Full width layout */ .full-width { margin: 0; padding: 20px 0 20px 0; } .full-width.center { text-align: center !important; } .full-width.grey { background: #F0F0F0; } .full-width.grey-mid { background: #CCC; } .full-width.white { background: #FFF; } .full-width.cover { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .full-width.slideshow { position: relative; padding: 0 !important; overflow: hidden; z-index:1; } .full-width.banner { height: 150px; display: block; margin: 0; padding: 0; overflow: hidden; background-size: 100% !important; } .full-width.banner img { width: 100%; position: absolute; z-index: 0; } .fix-nav { z-index: 9999; position: fixed; left: 0; top: 0; } #page-wrap { float: right; width: 100%; overflow: hidden; background: #E0E0E0;} #page-wrap.thin { width: 13%; /*pointer-events: none;*/ overflow: hidden; -webkit-transition: width 0.3s ease-in-out; -moz-transition: width 0.3s ease-in-out; -o-transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out; } .full-width.banner-img { background: url(/img/banners/banner1.jpg) no-repeat center !important; background-size: cover !important; } /* ///////////////////////////////////// MOBILE NAVIGATION ///////////////////////////////////// */ #mobile-nav { position: fixed; z-index: 9999; top: 0; width: 87%; height: 100%; background: #333; overflow-y: auto; display: none; } #mobile-nav a.close-mobile-nav { display: none; position: relative; float: right; right: 8px; top: 8px; padding: 18px; background: url(/img/icons/icon-close.svg) no-repeat center; background-size: 100%; margin: 0px; text-decoration: none; font-weight: normal; } #mobile-nav ul { clear: both; margin: 0; padding: 0;} #mobile-nav ul li { margin: 0; padding: 0; } #mobile-nav ul li a { display: block; border-bottom: 1px solid #484848; color: #FFF; padding: 15px; text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: 200; letter-spacing: 0.1em; } #mobile-nav ul ul { display: none; background: #212121; } #mobile-nav a.btn { position: relative; margin: 10px; bottom: 0; display: block; padding: 10px 0; } #mobile-nav a.btn-simple { background: none; border: 1px solid #CCC; margin: 10px; padding: 10px 0; } #mobile-nav .dealer-login { position: absolute; bottom: 0; display: block; width: 100%; padding: 17px 0; font-size: 14px; text-align: center; text-transform: uppercase; text-decoration: none; color: #CCC; background: url(/img/icons/icon-lock.svg) no-repeat right 20px center #000; background-size: 18px; } #mobile-nav .dealer-login:focus { color: #FFF; } /* ///////////////////////////////////// TOP BLACK BAR ///////////////////////////////////// */ #top-bar { position: fixed; z-index: 100; width: 100%; display: block; top: 0; background: #2d2d2d; padding: 0; } a.logo { display: none; margin: 0 auto; padding: 0 20px; display: block; width: 90px; height: 50px; background: url(/img/mikes-logo.png) no-repeat center; background-size: 80%; background-color: #3d4247; } a.logo2 { display: block; padding: 0 20px; width: 120px; height: 40px; background: url(/img/mikes-logo.png) no-repeat center #3d4247; background-size: 100%; } /* Mobile Menu Switch */ #switch { float: left; margin: 0; top: 0; width: 20px; color: #FFF; text-align: center; font-size: 35px; cursor: pointer; padding: 8px 15px; } #switch:hover { background: #333; } /* Login Box */ a.mobile-login { padding: 12px; color: #CCC; float: right; font-size: 12px; top: 7px; text-decoration: none; position: absolute; right: 10px;} #login-box { width: 100%; display: none; position: absolute; z-index: 9999; top: 50px; right: 0px; background: rgba(102,102,102,0.8); overflow: hidden; padding: 10px 0; border-radius: 0 0 5px 5px; text-align: right; } #login-box h4 { display: none; font-size: 14px; line-height: 14px; color: #FFF; padding: 0; margin: 0 0 10px 0; } #login-box a { display: block; font-size: 12px; line-height: 12px; color: #CCC; padding: 0; margin: 15px 0 0 0; text-decoration: none; } #login-box span { float: left; display: block; position: relative; overflow: hidden; width: 25%; margin-left: 15px; } #login-box span.submit { width: 80px; } #login-box input { width: 100%; display: block; padding: 8px; border: none; font-size: 12px; color: #666; margin: 0; letter-spacing: 0.1em; text-align: left; } #login-box input.btn { float: left; display: inline-block; width: 100%; margin: 0; font-size: 10px; padding: 10px 0; text-align: center; } /* ///////////////////////////////////// HEAD ///////////////////////////////////// */ #head { margin-top: 20px; background: #2D2D2D; padding: 0; margin: 0; height: 50px; z-index: 500; width: 100%; } #top-bar section.container { padding: 0; } #header { height: 100%; } #menu { display: none; } .subMenu { display: none; } /* Breadcrumbs */ .breadcrumbs * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } .breadcrumbs ul { display: inline-block; list-style: none; padding: 0; margin: 15px 0 0px 0; padding: 0; overflow: hidden; float: left; } .breadcrumbs ul li { display: block; float: left; padding: 0; margin: 0 5px 0px 0; overflow: hidden; } .breadcrumbs ul li a:after { content: '>'; padding-left: 10px; } .breadcrumbs ul li:last-child a:after { content: ''; padding-left: 0px; } .breadcrumbs ul li a { display: block; padding: 0px 5px 0px 0; color: #FFF; font-size: 12px; text-transform: uppercase; text-decoration: none; } .breadcrumbs ul li a:hover { color: #FFF; } .breadcrumbs ul li.active a { color: #FFF; } .breadcrumbs ul li a.null { color: #FFF !important; pointer-events: none; } /* ///////////////////////////////////// MAIN PAGE CONTENT ///////////////////////////////////// */ /* Call to Action Buttons */ .btn { padding: 10px 30px; text-align: center; color: #FFF !important; text-decoration: none; font-size: 14px; border: 1px solid #03b1d9; background-color: #03b1d9; display: block; margin: 0 auto; text-transform: uppercase; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; } .btn:hover { background-color: #336699; border: 1px solid #336699; cursor: pointer; } .btn.inline { display: inline-block; } .form input.btn { padding: 10px 50px 10px 20px; text-align: left; color: #FFF; font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; } .btn-simple { padding: 10px 30px; text-align: center; color: #CCC; text-decoration: none; font-size: 14px; border: 1px solid #CCC; background: none; display: block; margin: 0 auto; box-sizing:border-box; text-transform: uppercase; -webkit-box-sizing:border-box; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } .btn-simple:hover { background-color: #CCC; cursor: pointer; color: #333; } .btn.grey { border: 1px solid #CCC; color: #666 !important; background: none; display: block; box-sizing:border-box; -webkit-box-sizing:border-box; } .btn.grey:hover { background-color: #CCC; cursor: pointer; color: #666; } .btn.white { border: 1px solid #CCC; color: #666 !important; background-color: #FFF; display: block; box-sizing:border-box; -webkit-box-sizing:border-box; } .btn.white:hover { background-color: #CCC; cursor: pointer; color: #666; } .btn.right { float: right; margin: 0; margin-left: 5px; display: inline-block; } .btn.left { float: left; margin: 0; margin-right: 5px; display: inline-block; } .btn.over { position: absolute; z-index: 1000; right: 0; top: 0; margin: 15px 5px; } .btn.over-small { position: absolute; z-index: 1000; right: 2px; top: 2px; margin: 0; padding: 6px 40px 7px 10px; } .btn.update { background: url(../img/icons/icon-tick-white.png) right 10px center no-repeat; background-size: 20px; background-color: #03b1d9; border: 1px solid #03b1d9; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; cursor: pointer; } .btn.update.green { background: url(../img/icons/icon-tick.png) right 10px center no-repeat; background-size: 20px; background-color: #FFF; border: 1px solid #00b200; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; cursor: pointer; } .btn.update.green span { color: #00b200; } .btn.paid.warning { background: none; background-color: #FFF; border: 1px solid #ff9900; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; cursor: pointer; } .btn.paid.warning span { color: #ff9900; } .btn.paid { background: url(../img/icons/icon-tick.png) right 10px center no-repeat; background-size: 20px; background-color: #FFF; border: 1px solid #659D32; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; cursor: pointer; } .btn.paid span { color: #659D32; } .btn.update.green.solid { background: url(../img/icons/icon-tick-white.png) right 10px center no-repeat; background-size: 20px; background-color: #00b200; border: 1px solid #00b200; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; cursor: pointer; } .btn.update.green.solid span { color: #FFF; } .btn.email { background: url(../img/icons/icon-mail.png) right 10px center no-repeat; background-size: 20px; background-color: #FFF; border: 1px solid #CCC !important; color: #666 !important; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; border: none; cursor: pointer; } .btn.print { background: url(../img/icons/icon-print.png) right 10px center no-repeat; background-size: 20px; background-color: #03b1d9; border: 1px solid #03b1d9; color: #FFF !important; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; border: none; cursor: pointer; } .btn.send { background: url(../img/icons/icon-send-white.png) right 10px center no-repeat; background-size: 20px; background-color: #03b1d9; border: 1px solid #03b1d9; color: #FFF !important; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; border: none; cursor: pointer; } .btn.send.red { background: url(../img/icons/icon-send-white.png) right 10px center no-repeat; background-size: 20px; background-color: #e50005; border: 1px solid #e50005; color: #FFF !important; padding-right: 40px; width: auto; border-radius: 0; padding: 13px 40px 13px 20px; font-size: 12px; line-height: 14px; border: none; cursor: pointer; } .btn.add { background: url(../img/icons/icon-plus-white.png) right 10px center no-repeat; background-size: 20px; background-color: #03b1d9; border: 1px solid #03b1d9; padding-right: 40px; width: auto; border-radius: 0; font-size: 14px; line-height: 14px; cursor: pointer; } .btn.add.down { background: url(../img/icons/icon-download.png) right 10px center no-repeat; background-size: 20px; background-color: #e50005; border: 1px solid #e50005; } .btn.back { background: url(../img/icons/arrow-left-grey.png) left 5px center no-repeat; background-size: 20px; background-color: #FFF; padding-left: 40px; } .btn.next { background: url(../img/icons/arrow-right-white.png) right 5px center no-repeat; background-size: 20px; background-color: #03b1d9; padding-right: 40px; } .btn.message { background: url(../img/icons/icon-mail.png) right 10px center no-repeat; background-size: 20px; background-color: #FFF; padding-right: 40px; } .btn.edit { background: url(../img/icons/icon-edit.png) right 10px center no-repeat; background-size: 20px; background-color: #FFF; padding-right: 40px; } .btn.update2 { background: url(../img/icons/icon-update-blue.png) right 10px center no-repeat; background-size: 20px; background-color: #FFF; padding-right: 40px; } .btn.delete { background: url(../img/icons/icon-delete3.png) right 10px center no-repeat; background-size: 20px; background-color: #FFF; padding-right: 40px; } .btn.back:hover { background-color: #EEE; } .inline-buttons {margin-left: -5px; } .inline-buttons .btn {display: inline-block; margin-left: 5px; } .btn.disabled, .btn.forced-disabled { background-color: #c7c7c7; pointer-events: none; border: none !important; } /* ///////////////////////////////////// TAB STYLE NAVIGATION FOR PAGES ///////////////////////////////////// */ .full-width.filter-tabs { overflow: hidden; padding: 10px 0; background: #CCC; } /*.filter-tabs * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; }*/ .filter-tabs ul { display: inline-block; list-style: none; padding: 0; margin: 0; float: left; } .filter-tabs.right ul { width: auto; float: right; } .filter-tabs ul li { display: block; float: left; padding: 0; margin: 0 0 5px 5px; overflow: hidden; width: 48%; } a.profile { background: url(/img/icons/icon-profile.svg) no-repeat; } a.dist { background: url(/img/icons/icon-dist.png) no-repeat; } a.store { background: url(/img/icons/icon-dealers.svg) no-repeat; } a.manager { background: url(/img/icons/icon-profile.svg) no-repeat; } a.staff { background: url(/img/icons/icon-profile.svg) no-repeat; } a.products { background: url(/img/icons/icon-computer.svg) no-repeat; } a.rewards { background: url(/img/icons/icon-star.png) no-repeat; } a.claims { background: url(/img/icons/icon-list.png) no-repeat; } a.claims-new { background: url(/img/icons/icon-list-new.png) no-repeat; } a.sales { background: url(/img/icons/icon-sales.png) no-repeat; } .filter-tabs ul li a { display: block; padding: 10px 15px; color: #666; font-size: 14px; text-transform: uppercase; text-decoration: none; position: relative; background-color: #EEE; border: 1px solid #CCC; border-bottom: none; } .filter-tabs ul li a.icon { background-size: 20px; background-position: left 10px center; padding-left: 45px; } .filter-tabs ul li a:hover { background-color: #EEE; } .filter-tabs ul li.active a { background-color: #FFF !important; color: #03b1d9; border: none; border-left: 3px solid #03b1d9; border-bottom: 1px solid #FFF; } /*.filter-tabs ul li.active a:before { content: ''; position: absolute; top: 0; right: 0; border-top: 10px solid #03b1d9; border-left: 10px solid #FFF; width: 0; }*/ a.home { display: block; background: url(/img/icons/icon-home.png) no-repeat center; background-size: 20px; width: 20px; height: 18px; padding: 5px; } .filter-tabs ul li:first-child { display: none; } .tab-content { display: none; } #tab-1 { display: block; } /* Manage Products */ .edit-tools { overflow: hidden; margin: 0; } .edit-tools a { float: right; font-weight: normal; font-size: 1em; display: block; margin: 0 0 0 10px; padding: 15px 10px; } .edit-tools a span { font-weight: normal; margin-right: 10px; display: inline; font-size: 14px; float: left; display: none; } .edit-tools span.custom-dropdown { margin: 0 0 10px 10px; } .edit-tools input.search { float: right; margin: 0 0 10px 10px; padding: 8px; font-size: 14px; color: #666; border: none; border: 1px solid #CCC; background: url(../img/icons/icon-search.svg) no-repeat right 10px center #FFF; background-size: 20px; } .edit-tools .btn { padding: 15px 20px; } .edit-tools .btn.add { padding: 9px 30px 9px 15px; } /* Headings Icons */ .heading { float: left; margin-top: 0; border: 0; text-decoration: none; text-transform: none; } .heading.center { margin: 0 auto; text-align: center; } h1.heading { font-size: 40px; } .profile { background: url(/img/icons/icon-profile.svg) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .products { background: url(/img/icons/icon-computer.svg) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .store { background: url(/img/icons/icon-dealers.svg) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .rewards { background: url(/img/icons/icon-star.png) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .dist { background: url(/img/icons/icon-dist.png) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .claims { background: url(/img/icons/icon-list.png) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .claims-new { background: url(/img/icons/icon-list-new.png) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .stats { background: url(/img/icons/icon-stats.png) no-repeat left center; background-size: 30px; padding: 5px 0 5px 40px; } .sales { background: url(/img/icons/icon-sales.png) no-repeat left center; background-size: 40px; padding: 5px 0 5px 50px; } .service { background: url(/img/icons/icon-tools-grey.png) no-repeat left center; background-size: 30px; padding: 5px 0 5px 50px; } .statuses { background: url(/img/icons/icon-status.png) no-repeat left center; background-size: 35px; padding: 5px 0 5px 50px; } .checkout { background: url(/img/icons/icon-checkout.png) no-repeat left center; background-size: 35px; padding: 5px 0 5px 50px; } .delivery { background: url(/img/icons/icon-delivery.png) no-repeat left center; background-size: 35px; padding: 5px 0 5px 50px; } .edit-title { margin: 0 0 20px 0; padding-bottom: 20px; border-bottom: 1px solid #CCC; } /* Claims Total Counter */ .total-required { font-size: 16px; color: #666; margin: 0 10px 0 0; float: right; padding: 3px 10px 3px 0; border-right: 1px solid #CCC; } .total-required span { margin: 0 0 0 10px; } .total-selected { font-size: 16px; color: #666; margin: 0 20px 0 0; float: right; padding: 3px 0; } .total-selected span { margin: 0 0 0 10px; color: #03b1d9; font-weight: bold; } .total-selected span.red { color: #CC0000; } .total-selected span.green { color: #339933; } /* Boxes */ .box { display: block; overflow: hidden; background: #FFF; margin-bottom: 10px; border: 1px solid #EEE; border-bottom: 3px solid #03b1d9; margin-bottom: 20px; padding: 10px; } .box, .box * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } .box.products { background: url(/img/icons/icon-computer.svg) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box.stores { background: url(/img/icons/icon-dealers.svg) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box.profiles { background: url(/img/icons/icon-profile.svg) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box.dists { background: url(/img/icons/icon-dist.png) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box.rewards { background: url(/img/icons/icon-star.png) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box.claims { background: url(/img/icons/icon-list.png) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box.claims-new { background: url(/img/icons/icon-list-new.png) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box.admin { background: url(/img/icons/icon-cogs.png) no-repeat right 15px top 15px #FFF; background-size: 30px; } .box img { width: 100%; } .box h3 { text-transform: uppercase; color: #666; margin: 0; padding: 0 40px 15px 0; font-size: 18px; } .box p { color: #999; font-size: 14px; line-height: 20px; margin: 0; padding: 0 0 15px 0; } .box .btn { display: inline-block; font-size: 12px; padding: 12px; } .box.clickable:hover { border: 1px solid #CCC; border-bottom: 3px solid #CC0000; } .box.clickable:hover a.btn { background-color: #CC0000; border: 1px solid #CC0000; } .box.null { cursor: pointer; } .box.profile { margin: 0; border-bottom: 3px solid #CC0000 !important; } .box.profile p { float: left; font-size: 14px; padding: 3px 0;} .box.profile a.logout { float: left; color: #03b1d9; padding: 6px; margin-left: 10px; text-decoration: none; } /* Boxes - products */ .products-container { display: block; overflow: hidden; clear: both; border-bottom: 1px solid #CCC; padding-bottom: 20px; margin-bottom: 10px; } .box-product * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } .box-product { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; display: block; overflow: hidden; position: relative; border: 1px solid #CCC; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; margin-bottom: 20px; background: #EEE; } .box-product img { width: 70%; height: auto; display: block; margin: 0 auto; padding: 10px 0 50px 0; } .box-product .info { position: absolute; z-index: 100; bottom: 0; width: 100%; background: #666; color: #FFF; } .box-product .info h5 { float: left; padding: 10px; text-decoration: none; text-transform: uppercase; color: #FFF; font-style: normal; font-size: 14px; } .box-product .info span { float: right; padding: 13px 10px 13px 25px; color: #CCC; } .box-product .info span.rp { background: url(../img/icons/icon-star2.png) no-repeat left center; background-size: 15px; } .box-product .info span.variations { background: url(../img/icons/icon-computer2.svg) no-repeat left center; background-size: 20px; } .box-product:hover, .box-product.active { background: #DDD; } .box-product:hover .info, .box-product.active .info { background: #333; } .box-product:hover .info h5, .box-product.active .info h5 { color: #03b1d9; } .select-reward .box-product.active { border: 1px solid #03b1d9; } .select-reward .box-product.active .info { background: #03b1d9; } .select-reward .box-product.active .info h5 { color: #FFF; } /* Invididual Product Page */ .preview-image { min-height: 150px; overflow: hidden; display: block; padding: 10px; margin-bottom: 10px; border: 1px solid #CCC; background: url(../img/icons/icon-image.png) no-repeat center; background-size: 40%; background-color: #EEE; } .preview-image img { width: 100%; height: auto; display: block; } /* Items Boxes */ .add-items { display: table; overflow: hidden; table-layout: fixed; width: 100%; margin-bottom: 20px; } .add-items .item { display: table-cell; width: 2%; border: 1px solid #CCC; border-right: 0; padding: 5px; margin: 0 5px 5px 0; text-decoration: none; cursor: pointer !important; background-color: #EEE; height: 40px; } .add-items .item:last-child { border-right: 1px solid #CCC !important; } .add-items .item span { display: none; text-align: center; text-transform: uppercase; font-size: 12px; line-height: 12px; padding: 10px 10px 10px 50px; color: #666; cursor: pointer; } .add-items .item.regs { background: url(../img/icons/icon-regs.png) no-repeat center; background-size: 25px; } .add-items .item.computer { background: url(../img/icons/icon-computer.png) no-repeat center; background-size: 20px; } .add-items .item.cylinder { background: url(../img/icons/icon-tank.png) no-repeat center; background-size: 10px; } .add-items .item.bcd { background: url(../img/icons/icon-bcd.png) no-repeat center; background-size: 20px; } .add-items .item.drysuit { background: url(../img/icons/icon-drysuit.png) no-repeat center; background-size: 10px; } .add-items .item.active.regs { background: url(../img/icons/icon-regs-white.png) no-repeat center; background-size: 25px; } .add-items .item.active.computer { background: url(../img/icons/icon-computer-white.png) no-repeat center; background-size: 20px; } .add-items .item.active.cylinder { background: url(../img/icons/icon-tank-white.png) no-repeat center; background-size: 10px; } .add-items .item.active.bcd { background: url(../img/icons/icon-bcd-white.png) no-repeat center; background-size: 20px; } .add-items .item.active.drysuit { background: url(../img/icons/icon-drysuit-white.png) no-repeat center; background-size: 10px; } /* .add-items .item:hover.regs { background: url(../img/icons/icon-regs-white.png) no-repeat center; background-size: 25px; } .add-items .item:hover.computer { background: url(../img/icons/icon-computer-white.png) no-repeat center; background-size: 20px; } .add-items .item:hover.cylinder { background: url(../img/icons/icon-tank-white.png) no-repeat center; background-size: 10px; } .add-items .item:hover.bcd { background: url(../img/icons/icon-bcd-white.png) no-repeat center; background-size: 20px; } .add-items .item:hover.drysuit { background: url(../img/icons/icon-drysuit-white.png) no-repeat center; background-size: 10px; } */ .add-items .item:hover { background-color: #EEE !important; cursor: pointer !important; } .add-items .item:hover span { color: #03b1d9; } .add-items .item.active { background-color: #03b1d9 !important; border: 1px solid #03b1d9; } .add-items .item.active span { color: #FFF; } /* Tables */ table { width: 100%; border: 1px solid #CCC; border-collapse:collapse; font-size: 14px; color: #666; } table th { padding: 5px; font-size: 12px; text-align: left; background: #999; border: 1px solid #999; color: #FFF; } table tr:nth-child(even) { background: #F6F6F6; } table td { padding: 10px 5px; border: 1px solid #CCC; font-size: 12px; vertical-align: middle; } table td a { color: #03b1d9; text-decoration: none; } table td a:visited { color: #03b1d9; text-decoration: none; } table td input { width: 100%; border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #CCC; padding: 7px; box-sizing : border-box; font-size: 12px; color: #666; } table td.right { text-align: right; } table tr.total { border-top: 2px solid #03b1d9; } table.white { background: #FFF; } table.blank th { border: none; padding: 10px 0 0 10px; margin: 0; font-weight: normal; } table.blank td { border: none; padding: 10px 0 0 10px; margin: 0; } table.blank input, table.blank select { margin: 0 0 10px 0; width: auto !important; } table th.right, table td.right { text-align: right; } table th.left, table td.left { text-align: left; } table th.center, table td.center { text-align: center; } /* Table - Rank */ table th:first-child, table td:first-child { width: 1%; white-space: nowrap; } table.table-2-col th:first-child, table.table-2-col td:first-child { width: auto; white-space: auto; } /* Table - Actions */ table th.actions { width: 1%; white-space:nowrap; } table td.actions { width: 1%; white-space:nowrap; padding: 5px; } table td.actions a { width: 20px; height: 20px; display: block; float: right; margin: 0; cursor: pointer; border: none; } table td.actions a.delete { background: url(../img/icons/icon-delete3.png) no-repeat center; background-size: 18px; } table td.actions a.edit { background: url(../img/icons/icon-edit.png) no-repeat center; background-size: 18px; } table td.actions a.mail { background: url(../img/icons/icon-mail.png) no-repeat center; background-size: 18px; } /* Hide long email addresses */ table td a.link span { display: none; } table td a.link:after { content: "Link"; } /* Table - Status */ table th.status { width: 1%; white-space:nowrap; width: 100px; } table td.status { width: 1%; white-space:nowrap; padding: 5px; } table td.status span { width: 15px; height: 15px; vertical-align: middle; background: #CCC; color: #FFF; display: block; float: right; margin: 0 2px; border-radius: 100px; -webkit-border-radius: 100px; } table td.status span.active { background: #339933; } table td.status span.approved { background: #339933; } table td.status span.pending { background: #ff9900; } table.service-items tr td:first-child { width: 30%; } /* /////// Stats Table for Profiles ////////// */ table.stats { border: 1px solid #03b1d9; table-layout: fixed; } table.stats tr:nth-child(even) { background: #FFF; } table.stats td { padding: 0px; text-align: center; width: auto; white-space: auto; } table.stats td p.cat { font-size: 12px; color: #999; text-transform: uppercase; text-align: center; top: 0; float: none; clear: both; margin: 0; } table.stats td span { display: inline-block; text-align: center; margin: 10px 0; } table.stats td span.big { font-size: 2em; color: #03b1d9; font-weight: 400; margin-right: 5px; } table.stats td span.small { font-size: 1.4em; color: #03b1d9; font-weight: 200; font-family: 'Helvetica Neue', helvetica, arial, sans-serif; } table td.profile { background: url(/img/icons/icon-profile.svg) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.products { background: url(/img/icons/icon-computer.svg) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.store { background: url(/img/icons/icon-dealers.svg) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.rewards { background: url(/img/icons/icon-star.png) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.dist { background: url(/img/icons/icon-dist.png) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.claims { background: url(/img/icons/icon-list.png) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.stats { background: url(/img/icons/icon-stats.png) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.sales { background: url(/img/icons/icon-sales.png) no-repeat left 5px center; background-size: 30px; padding: 5px 5px 5px 50px; } table td.country { background: url(/img/icons/icon-map-marker.svg) no-repeat left 5px center; background-size: 20px; padding: 5px 10px 5px 40px; } table td.region { background: url(/img/icons/icon-map-marker.svg) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.email { background: url(/img/icons/icon-email.png) no-repeat left 5px center; background-size: 20px; padding: 5px 5px 5px 40px; } table td.balance { background: url(/img/icons/icon-coins.png) no-repeat left 5px center; background-size: 25px; padding: 5px 5px 5px 40px; } table td.icon { font-size: 0.01em; text-indent: -999px; padding: 5px 15px; } /* hide icons up to and including iPad size */ table td.thin { width: 120px; } table td input.thin { width: 80px; color: #666; } /* Pagination */ ul.pagination * { -webkit-transition: all .3s ease-in; transition: all .3s ease-in; } ul.pagination { display: block; margin: 0; overflow: hidden; padding: 0; float: left; } ul.pagination li { margin: 0 5px 0 0; display: inline-block; } ul.pagination li a { display: block; padding: 6px 10px; color: #666; text-align: center; text-decoration: none; text-transform: uppercase; border: 1px solid #CCC; background-color: #FFF; } ul.pagination li:hover a { background: #CCC; color: #FFF; border: 1px solid #CCC; } ul.pagination li.active a { background: none; color: #03b1d9; border: 1px solid #03b1d9; background-color: #FFF; } /* /////////////////// Forms ////////////////////// */ form { display: block; overflow: hidden; } form label { margin-bottom: 10px; display: block; margin: 0;} form input, form textarea, form select { box-sizing : border-box; width: 100%; float: none; padding: 10px; box-shadow: none; border: 1px solid #CCC; border-radius: 4px; margin: 10px 0 10px 0; font-family: helvetica, arial, sans-serif; font-size: 16px; color: #666; font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, sans-serif; } form input.search { width: auto; float: right; } form input:disabled, form textarea:disabled, form select:disabled { background-color: #eee; opacity: 0.65; cursor: not-allowed; } form select { cursor: pointer; padding: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../img/icons/arrow-down2.png) no-repeat right 10px center; background-size: 20px; } form select option { padding: 5px 0; font-size: 1em; } form .thin { width: 250px; } form .thinner { width: 150px; } form .datepicker { cursor: pointer; } form .float { width: 40%; float: left; margin-right: 20px; } .form-hide { } /* Form structure using tables */ .form.table { display: table; width: 100%; border-spacing: 15px; table-layout: fixed; } .form.table div.table-row { display: table-row; } .form.table div.table-column { display: block; } .form.table div.table-cell { display: block; } .form.table div.table-cell div { margin-bottom: 10px; } form.border0 { border-spacing: 0 !important; } form.white-bg { background-color: white; } form table input { margin: 0; } .form { } .form div { overflow: hidden; } .form div.half { width: 47%; margin-right: 10px; height: auto; display: block; float: left; } .form div.third { width: 30%; margin-right: 2%; height: auto; display: block; float: left; } .form input.plus { float: left; width: 75%; } .form a.plus { float: left; border-radius: 200px; -webkit-border-radius: 200px; text-align: center; font-size: 1.5em; text-decoration: none; color: #FFF; margin: 15px 0 0 10px; padding: 5px 10px; background: #999; } .form .right { float: right; display: inline-block; } .form a.forgot { margin: 15px 0; padding: 0; color: #999; display: inline-block; float: left; } form ul { list-style-type: none; } form li { clear: both; margin-bottom: 10px; list-style-type: none; } form .float { width: 45%; float: left; clear: none; margin-right: 10px; } form .float input { width: 100%; } form .checkbox input { width: 20px; margin-right: 5px; float: left; } form .checkbox p { float: left; font-size: 12px; color: #333; margin: 7px 0 0 0;} form label { font-weight: normal; color: #666; font-size: 14px;} form input.submit { padding: 8px 20px; margin: 0; font-size: 14px; font-family: 'Archivo Narrow', helvetica, arial, serif; display: block; float: left; width: auto; border-radius: 0; -webkit-border-radius: 0; display: inline-block; } form input:focus, form select:focus { border: 1px solid #03b1d9; } form div.date-fields { float: left; overflow: hidden; margin-right: 10px; } form label.date, form label.date-year { font-size: 12px; } form input.date { width: 25px; } form input.date-year { width: 50px; } form .datepicker { background: #FFF url(/img/icons/icon-calendar.svg) no-repeat 98% center; background-size: 30px; } form h4 { color: #333; padding: 0 0 5px 0; margin: 10px 0 10px 0; display: block; } p.hint { color: #666; font-size:12px; } form .error { } form .error input, form .error select { border: 1px solid #CC0000 !important; border-radius: 4px; -webkit-border-radius: 4px; } form .error:after { content: " This is a required field"; color: #CC0000; display: block; } form .match input { border: 1px solid #CC0000; } form .match:after { content: " These email fields must match" !important; color: #CC0000; display: block; } form li.correct input { border: 1px solid #009900 !important; } form .invalid input { border: 1px solid #CC0000; } form .invalid:after { content: " Please check this is a valid email" !important; color: #CC0000; } form .checkboxes { width: 100%; } form .checkboxes div { width: 40%; float: left; margin: 0 20px 0 0 !important; } form .checkboxes div span { padding: 2px 0; } form .checkboxes input { width: 20px; height: 20px; margin: 5px 20px 5px 0; } .success { margin: 0 0 20px 0; padding: 20px 10px 25px 10px; display: block; text-align: center; font-weight: bold; font-size: 14px; color: #FFF; background: #5ba85a; border-radius: 4px; -webkit-border-radius: 4px;} .success { color: #FFF; margin: 0; } .errors { margin: 0 0 20px 0; padding: 20px 10px 25px 10px; display: block; text-align: center; font-weight: bold; font-size: 14px; color: #FFF; background: #CC0000; border-radius: 4px; -webkit-border-radius: 4px;} .errors p { color: #FFF; margin: 0; } .alert-info.alert { margin: 0 0 20px 0; padding: 20px 10px 25px 10px; display: block; text-align: center; font-weight: bold; font-size: 14px; color: #FFF; background: #458B00; border-radius: 4px; -webkit-border-radius: 4px;} .alert-info.alert p { color: #FFF; margin: 0; text-align: center; } .smallprint { font-size: 12px; margin: 20px 0; float: left; clear: both; } .note { padding: 15px 15px 15px 50px; display: block; margin-top: 10px; border-radius: 5px; -webkit-border-radius: 5px; background: url('/img/icons/icon-alert.png') no-repeat left 15px top 15px; background-size: 20px; background-color: #f6f6f6; } .note p { font-size: 14px; line-height: 20px; text-align: left; margin: 0; padding: 0; } /* form add new dropdown */ .form-dropdown { display: none; overflow: hidden; clear: both; background-color: #FFF; border: 2px solid #03b1d9; margin: 0 0 20px 0; position: relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .form-dropdown .btn { float: left; padding: 8px 12px; } .form-dropdown .btn.submit { } .btn.email.right { padding: 10px 50px 10px 10px; } .checkboxes { margin: 20px 0; } .checkboxes label { display: inline-block; float: left; width: 100%; } .checkboxes label input { float: left; display: inline-block; margin: 0; width: 20px; height: 20px; } .checkboxes label span { float: left; display: inline-block; color: #666; margin: 0 0 10px 10px; width: 90%; } /* Info Box */ .info-box { overflow: hidden; display: block; border: 1px solid #999; box-sizing:border-box; -webkit-box-sizing:border-box; } .info-box h2 { padding: 15px; margin: 0; display: block; background: #999; color: #FFF; font-size: 18px; font-weight: normal; } .info-box p { padding: 15px; margin: 0; color: #666; } .info-box ul { padding: 15px; margin: 0 0 0 15px; color: #666; } ul.tick { padding: 10px 0 10px 0; margin: 0; } ul.tick li { background: url('../img/icons/icon-tick.svg') no-repeat left center; background-size: 30px; padding: 5px 0 5px 45px; color: #666; } /* ///////////////////////////////////// FOOTER ///////////////////////////////////// */ #footer { background: #777; color: #FFF; } #footer .container { padding: 20px; } #footer h5 { color: #FFF; font-weight: 600; margin: 0 0 20px 0; clear: both; display: block; } #footer p { line-height: 16px; font-size: 12px; color: #CCC; } #footer p a { text-decoration: none; } #footer ul { overflow: hidden; margin: 10px 0 0 0; } #footer ul li { float: left; } #footer ul li a { padding: 10px; color: #FFF; text-transform: uppercase; text-decoration: none; font-weight: bold; font-size: 12px; } #footer ul li a:hover { color: #CCC; } #footer #socialLinks { } #footer #socialLinks a, #footer #socialLinks span { display: block; float: right; margin-left: 10px; } #footer #socialLinks span { font-weight: bold; color: #666; margin: 10px; font-size: 12px; text-transform: uppercase; } /* Bottom BAR */ #bottom { clear: both; margin: 0; background: #3d4247; bottom: 0; padding: 30px 0 20px 0; } #bottom a, #bottom p { color: #CCC; font-size: 12px; text-decoration: none; } #bottom a:hover { color: #CCC; text-decoration: underline; } #bottom .credit { float: left; text-align: left; } /* Back to Top Link */ #top-link { display: block; position: fixed; z-index: 500; width: 40px; height: 40px; border-radius: 50%; -webkit-border-radius: 50%; right: 20px; bottom: 20px; background-color: #666; cursor: pointer; } #top-link:hover { background-color: #999; background-color: rgba(0,0,0,0.8); } #top-link span { display: block; width: 40px; height: 40px; background: url(/img/icons/icon-arrow2.svg) no-repeat center; background-size: 20px; } /* //////////////////////////////// START OF RESPONSIVE STYLES //////////////////////////////// */ @media screen and (orientation: landscape) and (max-width: 768px) { #mobile-nav { width: 50%; } #page-wrap.thin { width: 50%; } } @media screen and (orientation: portrait) { } /* //////////////////////////////// bigger than mobile version //////////////////////////////// */ @media screen and (min-width: 480px) { .full-width { padding: 15px 0; } /* Preview Image */ .preview-image { min-height: 200px; } /* .add-items .item { width: 47%; } */ } /* //////////////////////////////// ipad mini or galaxy note version //////////////////////////////// */ @media screen and (min-width: 480px) and (max-width: 768px) { .full-width { padding: 15px 0; } .full-width.banner { height: 150px; } .slideshow { height: 300px; } h1 { font-size: 32px; line-height: 28px; } h2 { font-size: 22px; line-height: 33px; margin-bottom: 25px; } .tabs li { clear: none; } .tabs li a { font-size: 12px; padding: 5px 15px; margin: 0px 0 8px 0; } /* Preview Image */ .preview-image { min-height: 250px; } } /* //////////////////////////////// big ipad version //////////////////////////////// */ @media screen and (min-width: 768px) { .container { width: 720px; } .container .col { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .container .grid1.col { width: 40px; } .container .grid2.col { width: 100px; } .container .grid3.col { width: 160px; } .container .grid4.col { width: 220px; } .container .grid5.col { width: 280px; } .container .grid6.col { width: 340px; } .container .grid7.col { width: 400px; } .container .grid8.col { width: 460px; } .container .grid9.col { width: 520px; } .container .grid10.col { width: 580px; } .container .grid11.col { width: 640px; } .container .grid12.col { width: 700px; } .hide-mobile { display: block !important; } .hide-fullsize { display: none !important; } h1 { padding: 10px 0;} .heading { display: block; } .box.null { display: block; } .breadcrumbs ul { clear: both; float: none; display: block; } h1 { display: block; } .full-width { padding: 30px 0 30px 0; } .full-width.banner { height: 250px; } .slideshow { height: 300px; } body { font-size: 14px; } h1 { font-size: 35px; line-height: 40px; padding: 20px 0; margin-bottom: 20px; } h2 { font-size: 20px; line-height: 25px; margin-bottom: 15px; } h3 { font-size: 21px; line-height: 30px; } h4 { font-size: 18px; line-height: 30px; } h5 { font-size: 17px; line-height: 21px; } h6 { font-size: 15px; line-height: 21px; } .hide-mobile { display: block; } a.hide-mobile { display: inline-block; } .hide-web { display: none !important;} .back { display: block; } /* Top Bar */ #top-bar { position: relative; height: 40px; background: #e50005; display: block; box-shadow: none; } #top-bar .icon { padding: 14px 40px 14px 12px; float: right; font-size: 12px; text-transform: uppercase; text-decoration: none; color: #FFF; } #top-bar .icon:hover { color: #FFF; } #top-bar .user { background: url(/img/icons/icon-profile2.svg) no-repeat right 10px center; background-size: 20px; } #top-bar .login { background: url(/img/icons/icon-lock.svg) no-repeat right 10px center; background-size: 20px; } a.mobile-login { border-left: 1px solid rgba(0,0,0,0.2); position: relative; top: 0px; right: auto; } a.logo { display: none; position: absolute; z-index: 3000; margin: -50px 0 0 0; padding: 0 20px; width: 120px; height: 60px; } a.logo2 { display: block; position: absolute; z-index: 1000; top: 0; margin: -40px 0 0 0; padding: 0; width: 120px; height: 100px; background-size: 100px; } #switch { display: none; } /* Login Box */ #login-box { width: 200px; top: 80px; right: 15px; padding: 15px; text-align: right; } #login-box h4 { display: block; font-size: 14px; line-height: 14px; color: #FFF; padding: 0; margin: 0 0 15px 0; background: url(/img/icons/icon-key.svg) no-repeat left center; background-size: 25px; } #login-box span { display: block; float: none; clear: both; width: auto; margin: 0; } #login-box span.submit { width: 100%; } #login-box input { display: block; padding: 8px; font-size: 14px; width: auto; margin: 0 0 15px 0; text-align: right; } #login-box input.btn { display: block; width: 100%; margin: 0; font-size: 12px; padding: 8px 0; text-align: center; } /* Head */ #wrapMenu { display: block; } #head { margin-top: 20px; padding: 0; margin: 0; height: 60px; z-index: 6000; width: 100%; } #head.fix-nav a.logo2 { height: 60px; margin-top: 0px; } #menu { display: block; pointer-events: auto; position: static; margin: 0; float: right; } #menu ul { float: right; display: block; text-align: right; margin: 0; height: 40px; padding: 0; } #menu ul li { float: left; margin: 0; height: 100%; line-height: 0px; } #menu ul li a { display: block; position: relative; margin: 0; padding: 30px 15px; text-decoration: none; text-transform: uppercase; font-size: 12px; color: #CCC; font-family: 'Archivo Narrow', helvetica, arial, serif; font-weight: 400; letter-spacing: 0.1em; } #menu ul li a:hover { color: #FFF; background: rgba(0,0,0,0.3); } #menu ul li a.current_page_item { color: #FFF; } #menu ul li a.button { margin: 0 0 0 5px; background: #5ba85a; color: #FFF; font-weight: 600; border-radius: 4px; -webkit-border-radius: 4px; } #menu ul li a.button:hover { background: #47913D !important; color: #FFF !important; } #menu li.active a { color: #238cb8; background: rgba(0,0,0,0.3); } #menu li a.btn { letter-spacing: 0; padding: 15px; margin: 15px 0 0 10px; } #menu li a.btn:hover { background: #238cb8; } #menu li a.login { padding-right: 45px !important; background: url(/img/icons/icon-key.svg) no-repeat right 10px center #03b1d9; background-size: 25px; } #menu li a.login:hover { background: url(/img/icons/icon-key.svg) no-repeat right 10px center #238cb8; background-size: 25px; } #menu li a { letter-spacing: 0; padding: 15px; margin: 15px 0 0 10px; } #menu li a:hover { background: #CCC; color: #333; } /* slideshow */ .cycle-slideshow span.cycle-prev { width: 40px; height: 60px; top: 180px; } .cycle-slideshow span.cycle-next { width: 40px; height: 60px; top: 180px; } /* Box - Products */ .box-product img { padding: 10px; } .box-product .info { position: relative; display: block; overflow: hidden; padding: 10px 0; } .box-product .info span { clear: both; float: left; color: #CCC; margin-left: 10px; padding: 0 0 0 25px; font-size: 12px; } .box-product .info h5 { padding: 0 10px 5px 10px; font-size: 12px; } /* Tabs */ .filter-tabs ul li:first-child { display: block; } .full-width.filter-tabs { padding: 20px 0 0 0; } .filter-tabs ul li { margin: 0 5px 0px 0; width: auto; } .filter-tabs ul li:last-child { margin: 0; } .filter-tabs ul li a { padding: 10px 10px; font-size: 12px; } .filter-tabs ul li:last-child { margin: 0; } .filter-tabs ul li a.icon { background-size: 15px; background-position: left 10px center; padding-left: 35px; } .filter-tabs ul li.book { float: right; margin: 0; } .filter-tabs ul li.active a { border-left: none; border-top: 3px solid #03b1d9; border-bottom: 1px solid #FFF; margin-bottom: -3px; } /* Manage Products */ .edit-tools { } .edit-tools a { font-size: 1em; margin: 0 0 10px 10px; padding: 9px 15px; } .edit-tools a span { display: inline-block; } .edit-tools .btn.left { padding: 10px 10px 10px 40px; } .edit-tools .btn { padding: 10px 40px 10px 10px; } /* Preview Image */ .preview-image { min-height: 250px; } /* forms */ form input.thin { width: 300px; } form input.medium { width: 400px; } form input.wide, form textarea.wide { width: 90%; } /* Form structure using tables */ .form.table { display: table; width: 100%; border-spacing: 15px; } .form.table div.table-row { display: table-row; } .form.table div.table-column { display: table-cell; } .form.table div.table-cell { display: table-cell; } /* Tables */ table td, table th { padding: 10px; vertical-align: middle; } table td.actions { padding: 10px; } table td.actions a { width: 20px; height: 20px; } /* Add Item */ .add-items .item { background-position: left 10px center !important; margin-bottom: 20px; } .add-items .item span { padding-left: 40px; display: block; } } /* //////////////////////////////// full wide version //////////////////////////////// */ @media screen and (min-width: 960px) { .container { width: 960px; } .container .grid1.col { width: 60px; } .container .grid2.col { width: 140px; } .container .grid3.col { width: 220px; } .container .grid4.col { width: 300px; } .container .grid5.col { width: 380px; } .container .grid6.col { width: 460px; } .container .grid7.col { width: 540px; } .container .grid8.col { width: 620px; } .container .grid9.col { width: 700px; } .container .grid10.col { width: 780px; } .container .grid11.col { width: 860px; } .container .grid12.col { width: 940px; } div.sep { margin: 30px 0; } div.sep.short { margin: 20px 0; } .full-width { padding: 60px 0; } .full-width.banner { height: 300px; } .slideshow { height: 500px; } a.logo { margin: -50px 0 0 0; padding: 0; width: 160px; height: 120px; } a.logo2 { margin: -40px 0 0 0; padding: 0; width: 160px; height: 120px; background-size: 110px; } #head { position: relative; height: 80px; } #head.fix-nav { position: fixed; top: 0; } #head.fix-nav a.logo2 { height: 85px; margin-top: -5px; } #menu { margin-top: 0px; } #menu ul li { } #menu ul li a { font-size: 14px; padding: 40px 20px; } #menu ul ul { margin-top: 12px; } #menu li a.btn { padding: 20px; margin: 20px 0 0 10px; } #menu li a.btn-simple { padding: 20px; margin: 20px 0 0 10px; } .cycle-slideshow span.cycle-prev { width: 40px; height: 70px; top: 250px; } .cycle-slideshow span.cycle-next { width: 40px; height: 70px; top: 250px; } .more { width: 30%; } .more-left { left: 15%; top: 20%; } .more-right { right: 15%; top: 20%; } /* Boxes */ .box { padding: 20px; } /* Box - Products */ .box-product img { padding: 0px 10px 40px 10px; } .box-product .info { position: absolute; display: block; overflow: hidden; padding: 10px 0; } .box-product .info span { clear: none; float: right; color: #CCC; padding: 4px 10px 0px 25px; font-size: 14px; } .box-product .info h5 { padding: 0 10px 0px 10px; font-size: 14px; } /* Preview Image */ .preview-image { min-height: 350px; } h1 { font-size: 3.5em; line-height: 50px; padding-bottom: 20px; margin-bottom: 20px; } h2 { margin-bottom: 25px; } p { font-size: 16px; line-height: 25px; } /* Tabs */ .full-width.filter-tabs { padding: 30px 0 0 0; } .filter-tabs ul li { margin: 0 5px 0px 0; } .filter-tabs ul li a { padding: 15px 20px; font-size: 14px; } .filter-tabs ul li a.icon { background-size: 20px; background-position: left 15px center; padding-left: 45px; } .filter-tabs ul li a.home { width: 24px; height: 24px; padding: 12px; } /* Tables */ table td, table th { font-size: 12px; padding: 10px; } table td input { font-size: 12px; } table.stats td { padding: 20px; } table.stats td span { display: inline-block; text-align: center; margin: 21px 0; } table.stats td span.big { font-size: 3.5em; } table td.icon { font-size: 14px; text-indent: 0; padding: 5px 10px 5px 35px; } /* hide icons up to and including iPad size */ /* show long email addresses */ table td a.link span { display: block; } table td a.link:after { content: ""; } /* Breadcrumbs */ .breadcrumbs ul li a { padding: 0px 5px 0px 0; font-size: 16px; } /* Add Item */ .add-items .item { background-position: left 20px center !important; } .add-items .item span { padding: 10px 10px 10px 40px; font-size: 16px; line-height: 16px; } } /* //////////////////////////////// full wide version //////////////////////////////// */ @media screen and (min-width: 1300px) { .container { width: 1200px; } .container .grid1.col { width: 80px; } .container .grid2.col { width: 180px; } .container .grid3.col { width: 280px; } .container .grid4.col { width: 380px; } .container .grid5.col { width: 480px; } .container .grid6.col { width: 580px; } .container .grid7.col { width: 680px; } .container .grid8.col { width: 780px; } .container .grid9.col { width: 880px; } .container .grid10.col { width: 980px; } .container .grid11.col { width: 1080px; } .container .grid12.col { width: 1180px; } h2.heading.big { font-size: 1.8em; padding-left: 50px; } .full-width { padding: 80px 0; } .slideshow { max-height: 500px; } .full-width.banner { height: 300px; } /* Tabs */ .filter-tabs ul li a { font-size: 14px; } .filter-tabs ul li a.icon { background-size: 25px; background-position: left 15px center; padding-left: 50px; } /* Tables */ table td, table th { font-size: 14px; padding: 15px 10px; } table td input { font-size: 14px; } .form.table { border-spacing: 25px; } /* Preview Image */ .preview-image { min-height: 450px; } } /* //////////////////////////////// extra wide version //////////////////////////////// */ @media screen and (min-width: 1750px) { .full-width { padding: 100px 0; } } /* //////////////////////////////// extra extra wide version //////////////////////////////// */ @media screen and (min-width: 2000px) { }