/* public/base.css */ /* (c)2012 - visuallizard.com Inspired by: Skeleton www.getskeleton.com Bootstrap twitter.github.com/bootstrap/ HTML5 ✰ Boilerplate h5bp.com */ /* Table of Content #Reset & Basics #Basic Styles #Site Styles #Typography #Links #Lists #Images #Buttons & Messages #Tabs #Forms #Misc */ /* !Reset & Basics ============================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } 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, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 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, output, ruby, 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, main, nav, section, summary { 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; } ::-moz-selection { background: #10788f; color: #fff; text-shadow: none; } ::selection { background: #10788f; color: #fff; text-shadow: none; } /* !Basic Styles ============================== */ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { background: #fff; font: 18px/24px "freight-sans-pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444; /*-webkit-font-smoothing: antialiased; Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } /* !Typography ============================== */ h1, h2, h3, h4, h5, h6 { color: #181818; font-family: "freight-sans-pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 46px; font-weight: 600; line-height: 50px; margin-bottom: 0.75em; } h2 { font-size: 36px; font-weight: 600; line-height: 40px; margin-bottom: 0.5em; } h3 { font-size: 28px; font-weight: 600; line-height: 34px; margin-bottom: 0.25em; } h4 { font-size: 22px; line-height: 28px; margin-bottom: 0.25em; } h5 { font-size: 18px; line-height: 22px; } h6 { font-size: 14px; line-height: 20px; } p { margin: 0 0 1.25em 0; } p img { margin: 0; } p.lead { font-size: 21px; line-height: 27px; color: #777; } i, em { font-style: italic; } b, strong { font-weight: bold; } small { font-size: 80%; } /* Blockquotes */ blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; } blockquote { margin: 0 0 20px; padding: 10px 20px 0 15px; border-left: 5px solid #ddd; } blockquote cite { display: block; font-size: 12px; color: #666; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #666; } /* !Links */ a { text-decoration: none; color: #10788f; outline: none; } a:hover { text-decoration: underline; color: #000; outline: none; } a:focus { text-decoration: underline; color: #000; outline: none; } a:active { outline: none; } p a { line-height: inherit; } /* !Lists */ ul, ol { margin: 0 0 20px 25px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } ul { list-style: disc; } ol { list-style: decimal; } li { line-height: 20px; } ul.unstyled { list-style: none; margin-left: 0; } dl { margin-bottom: 20px; } dl dt, dl dd { line-height: 20px; } dl dt { font-weight: bold; } dl dd { margin-left: 20px; } dd:after { /* http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/ */ content: '\D\A'; white-space: pre; } /* !Images */ img { border: 0; -ms-interpolation-mode: bicubic; } img.scale-with-grid { max-width: 100%; height: auto; } .img_left { float: left; margin: 0 1em 0.5em 0; } .img_right { float: right; margin: 0 0 0.5em 1em; } /* !Other */ code, pre { padding: 0 3px 2px; font-family: Monaco, Andale Mono, Courier New, monospace; font-size: 12px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } code { background-color: #eee; color: rgba(0, 0, 0, 0.75); padding: 1px 3px; } pre { background-color: #f5f5f5; display: block; padding: 8.5px; margin: 0 0 18px; line-height: 18px; font-size: 12px; border: 1px solid #ddd; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } hr { clear: both; height: 0; margin: 20px 0 19px; border: 0; border-bottom: 1px solid #ddd; } address { display: block; line-height: 18px; margin-bottom: 18px; } .lower { text-transform: lowercase; } .upper { text-transform: uppercase; } /* !Buttons & Messages ============================== */ .button.danger, .message.danger, .button.danger:hover, .message.danger:hover, .button.error, .message.error, .button.error:hover, .message.error:hover, .button.success, .message.success, .button.success:hover, .message.success:hover, .button.info, .message.info, .button.info:hover, .message.info:hover { color: #ffffff; } .button .close, .message .close, .remove { font-family: Arial, sans-serif; line-height: 18px; } .button.danger, .message.danger, .button.error, .message.error { background-color: #c43c35; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #c43c35); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #c43c35 #c43c35 #882a25; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .button.success, .message.success { background-color: #57a957; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -ms-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #57a957); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .button.info, .message.info { background-color: #339bb9; /* background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #339bb9 #339bb9 #22697d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); */ } .button { cursor: pointer; display: inline-block; padding: 0.5em 1em; margin: 0; border: none; background-color: #e6e6e6; color: #333; font-family: "freight-sans-pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; text-transform: uppercase; text-decoration: none; transition: all 0.25s ease; } .button.button:hover { background-color: #475862; color: #fff; text-decoration: none; } .button:focus { outline: 1px dotted #666; } .button.primary { color: #ffffff; background-color: #10788f; } .button.active, .btn:active { -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); } .button.disabled { cursor: default; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); -khtml-opacity: 0.65; -moz-opacity: 0.65; opacity: 0.65; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .button[disabled] { cursor: default; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=65); -khtml-opacity: 0.65; -moz-opacity: 0.65; opacity: 0.65; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .close { float: right; color: #000000; font-size: 20px; font-weight: bold; line-height: 13.5px; text-shadow: 0 1px 0 #ffffff; filter: alpha(opacity=25); -khtml-opacity: 0.25; -moz-opacity: 0.25; opacity: 0.25; } .close:hover{ color: #000000; text-decoration: none; filter: alpha(opacity=40); -khtml-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; } a.remove, a.progress_action { margin: 0; width: auto; height: auto; padding: 0; line-height: 1; font-size: 18px; font-weight: bold; color: #c43c35; text-decoration: none; text-shadow: 0 1px 0 #ffffff; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: .8; } a.remove:hover, a.progress_action:hover { opacity: 1; } .message { position: relative; padding: 7px 15px; margin-bottom: 18px; color: #404040; background-color: #eedc94; /* background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); background-image: -moz-linear-gradient(top, #fceec1, #eedc94); background-image: -ms-linear-gradient(top, #fceec1, #eedc94); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); background-image: -o-linear-gradient(top, #fceec1, #eedc94); background-image: linear-gradient(top, #fceec1, #eedc94); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-width: 1px; border-style: solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); */ } .message .close { text-decoration: none; margin-top: 1px; *margin-top: 0; } .message a { font-weight: bold; color: #404040; } .message.danger p a, .message.error p a, .message.success p a, .message.info p a { color: #ffffff; } .message p { margin-bottom: 0; } /* !Forms ============================== */ form { margin-bottom: 20px; } fieldset { margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea, select { border: 1px solid #ccc; padding: 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family: "freight-sans-pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #777; margin: 0; width: 210px; max-width: 100%; display: block; margin-bottom: 20px; background: #fff; } select { padding: initial; width: 220px; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 1px solid #aaa; color: #444; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } textarea { min-height: 60px; min-width: 210px; } label, legend { display: block; font-weight: bold; font-size: 13px; } .input.checkbox label, .input.radio label { margin-left: 5px; display: inline-block; } /* cat4 required field indicator */ /* .required > label:after, */ .required-field > label:after, .required-field legend:after { content: " *"; color: red; } /* for jquery.overlabel */ label.overlabel-apply { position: absolute; top: 3px; left: 5px; z-index: 1; font-weight: normal; color: #777; } div.overlabel-wrapper { position: relative; } input[type=checkbox], input[type=radio] { width: auto; height: auto; padding: 0; margin: 3px 0; *margin-top: 0; /* IE6-7 */ line-height: normal; border: none; display: inline-block; } input[type=file] { background-color: #ffffff; padding: initial; border: initial; line-height: initial; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } input[type=button], input[type=reset], input[type=submit] { width: auto; height: auto; } select, input[type=file] { height: 27px; *height: auto; line-height: 27px; *margin-top: 4px; /* For IE7, add top margin to align select with labels */ } select[multiple] { height: inherit; background-color: #ffffff; } textarea { height: auto; } .poll label .description { font-weight: normal; } .input.file p { margin: 0; } input.form-error { margin-bottom: 0; } .error-message { color: #ee5f5b; margin-bottom: 10px; } /* Recaptcha */ #recaptcha_image { margin: 1em 0; } #recaptcha_widget_div { margin-bottom: 20px; } /* !Media grid ============================== */ .media-grid { margin-left: -20px; margin-bottom: 0; zoom: 1; } .media-grid:before, .media-grid:after { display: table; content: ""; zoom: 1; } .media-grid:after { clear: both; } .media-grid li { display: inline; } .media-grid a, .media-grid div.group { float: left; padding: 4px; margin: 0 0 20px 20px; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .media-grid a img { display: block; } .media-grid a:hover { border-color: #7a2; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); } .media-grid .caption { display: block; } /* !Tabs (activate in tabs.js) ============================== */ /* New Tabs */ .tabs-nav { display: block; margin: 0 0 0 0; padding: 0; /* border-bottom: solid 1px #ddd; */ } .tabs-nav li { display: block; width: auto; height: 30px; padding: 0; float: left; margin-bottom: 0; } .tabs-nav li a { display: block; text-decoration: none; width: auto; height: 29px; padding: 0px 20px; line-height: 30px; border: solid 1px #ddd; border-width: 1px 1px 0 0; margin: 0; background: #f6f6f6; font-size: 13px; } .tabs-nav li a:hover { background: #f0f0f0; } .tabs-nav li a.active { background: #fff; height: 30px; position: relative; top: -4px; padding-top: 4px; border-left-width: 1px; margin: 0 0 0 -1px; color: #111; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 32px; border-top-right-radius: 3px; } .tabs-nav li:first-child a.active { margin-left: 0; } .tabs-nav li:first-child a { border-width: 1px 1px 0 1px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px; } .tabs-nav li:last-child a { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; } .tabs-content { margin: 0; padding: 2em; border: 1px solid #ddd; display: block; list-style: none; clear: both;} .tabs-content > .tab { display:none; } .tabs-content > .tab.active { display: block; } /* !Tables ============================== */ table { width: 100%; margin-bottom: 18px; padding: 0; font-size: 13px; border-collapse: collapse; } table th, table td { padding: 10px 10px 9px; line-height: 18px; text-align: left; } table th { padding-top: 9px; font-weight: bold; vertical-align: middle; } table td { vertical-align: top; border-top: 1px solid #ddd; } table tbody th { border-top: 1px solid #ddd; vertical-align: top; } /* table types: .condensed-table and .bordered-table */ .condensed th, .condensed td { padding: 5px 5px 4px; } .bordered { border: 1px solid #ddd; border-collapse: separate; *border-collapse: collapse; /* IE7, collapse table to remove spacing */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .bordered th + th, .bordered-table td + td, .bordered th + td { border-left: 1px solid #ddd; } .bordered thead tr:first-child th:first-child, .bordered tbody tr:first-child td:first-child { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; } .bordered thead tr:first-child th:last-child, .bordered tbody tr:first-child td:last-child { -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; } .bordered tbody tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; } .bordered tbody tr:last-child td:last-child { -webkit-border-radius: 0 0 4px 0; -moz-border-radius: 0 0 4px 0; border-radius: 0 0 4px 0; } /* sortable and zebra-striped tables */ .striped tbody tr:nth-child(odd) td, .striped tbody tr:nth-child(odd) th { background-color: #f9f9f9; } .striped tbody tr:hover td, .striped tbody tr:hover th { background-color: #f5f5f5; } table .header { cursor: pointer; } table .header:after { content: ""; float: right; margin-top: 7px; border-width: 0 4px 4px; border-style: solid; border-color: #000 transparent; visibility: hidden; } table .headerSortUp, table .headerSortDown { background-color: #85c446; background-color: rgba(133,196,70,.3); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); } table .header:hover:after { visibility: visible; } table .headerSortDown:after, table .headerSortDown:hover:after { visibility: visible; filter: alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; } table .headerSortUp:after { border-bottom: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; visibility: visible; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; filter: alpha(opacity=60); -khtml-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; } /* !Pagination ============================== */ .pagination { height: 38px; margin: 20px 0; -moz-user-select: none; user-select: none; } .pagination ul { float: left; margin: 0; padding: 0; border: 1px solid #ddd; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border-right: 0; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .pagination li { display: inline; } .pagination a, .pagination .current { float: left; padding: 0 15px; line-height: 38px; border-right: 1px solid; border-right-color: #ddd; border-right-color: rgba(0, 0, 0, 0.15); text-decoration: none; } .pagination a:hover, .pagination .active a, .pagination .current { background-color: #85c446; background-color: rgba(133,196,70,.3); } .pagination .disabled a, .pagination .disabled a:hover { background-color: transparent; color: #bfbfbf; } .pagination .last a { border: 0; } /* !Non-semantic helper classes ============================== */ /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } /* !Catalyst specific ============================== */ .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; } .h1 { height: 1em; } .h2 { height: 2em; } .h3 { height: 3em; } .h4 { height: 4em; } .h5 { height: 5em; } .h6 { height: 6em; } .h7 { height: 7em; } .h8 { height: 8em; } .h9 { height: 9em; } .h10 { height: 10em; } .h11 { height: 11em; } .h12 { height: 12em; } .h13 { height: 13em; } .h14 { height: 14em; } .h15 { height: 15em; } .h16 { height: 16em; } .h17 { height: 17em; } .h18 { height: 18em; } .h19 { height: 19em; } .h20 { height: 20em; } .block { display: block; } .inline { display: inline; } .hidden { display: none; } .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .cke div.c1, .cke div.c2, .cke div.c3, .cke div.c4, .cke div.c5, .cke div.c6 { margin-left: 2%; float: left; } .cke div.c1 { width: 100%; } .cke div.c2 { width: 49%; } .cke div.c3 { width: 32%; } .cke div.c4 { width: 23.5%; } .cke div.c5 { width: 18.4%; } .cke div.c6 { width: 15%; } .cke div.c1, .cke div.first { clear: both; margin-left: 0; } .cke:before, .cke:after { content: "\0020"; display: block; height: 0; visibility: hidden; } .cke:after { clear: both; } .cke:after { zoom: 1; } /* !Debug & CakePHP Debug SQL table ============================== */ body.debug:before { content: attr(class); position: fixed; top: 0px; right: 10px; color: #ddd; z-index: 1000; font-size: 10px; } table.cake-sql-log { display: none; clear: both; width: 100%; max-width: 1200px; margin: 0 auto; text-align: left; border-top: 1px solid #000; border-left: 1px solid #000; color: #333; background-color: #eee; } table.cake-sql-log td, table.cake-sql-log th { border-bottom: 1px solid #999; border-right: 1px solid #999; padding: 0.5em; } table.cake-sql-log caption { text-align: center; background-color: #900; color: #fff; font-weight: bold; font-size: 1.5em; padding: 0.5em; } /* public/skeleton.css */ /* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 640px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .container .one.column { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 348px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 300px; } .columns, .column { margin: 0; } .container .one.column, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .columns, .column { margin: 0; } .container .one.column, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .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; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* public/layout.css */ /* (c)2012 - visuallizard.com General Layout Styles. Sets major blocking (and minor styles) to genaral elements in the template. All can be removed and started from scratch or elemnts can be adjusted individually. */ .container { /* Set site width only here and use this class to centre the content in browser window. Default width is 960px and can be changed in skeleton.css to maintain resposivnes. */ width: 1200px; margin: 0 auto; padding: 0; position: relative; } #content .container.marketing { padding: 0 10%; } /* Header */ #header { clear: both; position: relative; min-height: 100px; margin: 0; padding: 0.5em 0; } #header.stick { position: fixed; min-height: 30px; top: 0; left: 0; z-index: 11; box-shadow: 0px 0px 3px #000; } #header h1 { display: block; float: left; width: 15%; margin: 0; } #header h1 .logo { display: block; text-indent: -99999em; text-decoration: none; height: 120px; background: url("https://www.wallaceperimetersecurity.com/img/logo.t1508875647.png") center center no-repeat transparent; background-size: 120px; cursor: pointer; } #header.stick h1 .logo { height: 50px; background: url("https://www.wallaceperimetersecurity.com/img/logo_wallaceintl.t1501515101.png") center center no-repeat transparent; background-size: 70px; } #header p.contact-number { display: block; position: absolute; top: 20px; right: 80px; width: 500px; text-align: right; letter-spacing: 1px; color: #fff; } #header p.contact-number a { color: #fff; } #header.stick p.contact-number { display: none; } #header a#search-toggle { display: block; position: absolute; top: 10px; right: 20px; width: 40px; height: 40px; text-indent: -9999em; background: url("https://www.wallaceperimetersecurity.com/img/icon_search.t1502811060.png") no-repeat center center; } #header.stick a#search-toggle /* Language toggle */ header .lang { } /* Main navigation */ #header { display: block; position: relative; clear: both; width: 100%; margin: 0 0 0.75em 0; border-right: 10px solid #fff; background: #475862; } #header ul.mnav_1 { display: none; } #header ul.nav_1 { display: flex; position: relative; float: left; width: 80%; margin: 75px 0 0 0; padding: 0; list-style: none; font-size: 15px; } #header.stick ul.nav_1 { margin: 10px 0 0 0; } #header ul.nav_1 li { display: block; position: relative; float: left; flex-grow: 1; padding: 0; margin: 0 0.25em; color: #fff; } #header ul.nav_1 li#nav_li_item_75 { display: block; } #header ul.nav_1 li#nav_li_item_31, #header ul.nav_1 li#nav_li_item_159, #header ul.nav_1 li#nav_li_item_493 { display: none; } #header ul.nav_1 li#nav_li_item_117:before { content: ""; display: block; position: absolute; top: 7px; left: 0; width: 20px; height: 20px; background: url("https://www.wallaceperimetersecurity.com/img/lock-white.t1719328612.svg") no-repeat center center; background-size: 15px 15px; } #header ul.nav_1 li a { display: block; position: relative; padding: 0.5em 0; border-bottom: 1px dotted transparent; text-align: center; text-decoration: none; color: #fff; } #header ul.nav_1 li a:hover, #header ul.nav_1 li.at a { border-bottom: 1px dotted #fff; } /* Drop-downs */ #header ul.nav_1 li ul { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; float: left; width: 200px; padding: 0; margin: 0; list-style: none; background-color: #fff; opacity: 0; -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } #header ul.nav_1 li:hover ul { display: block; box-sizing: border-box; opacity: 1; } #header ul.nav_1 li ul li { display: block; clear: both; width: 100%; margin: 0; } #header ul.nav_1 li ul a { display: block; clear: both; width: 100%; padding: 0.75em 1em; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shadow: none; font-weight: 300; text-align: left; text-transform: none; line-height: 18px; background: #fff !important; color: #555; } #header ul.nav_1 li ul a:hover, #header ul.nav_1 li.at ul a:hover, #header ul.nav_1 li.at ul .at a { color: #000; } /* Secondary nav */ nav { display: block; position: relative; clear: both; width: 100%; padding: 1.5rem 0; margin: 0; } nav ul { display: flex; position: relative; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 2%; row-gap: 1rem; width: 100%; padding: 0; margin: 0; list-style: none; font-size: 15px; } nav ul li { display: block; position: relative; flex-basis: 18.4%; flex-grow: 1; max-width: 32%; padding: 0; margin: 0; } nav ul#snav_75 li { flex: 0 0 15%; max-width: 15%; } nav ul li#snav_li_item_71 { background: url("https://www.wallaceperimetersecurity.com/img/nav_slidinggates.t1537552685.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_73 { background: url("https://www.wallaceperimetersecurity.com/img/nav_foldinggates.t1537552727.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_119 { background: url("https://www.wallaceperimetersecurity.com/img/nav_pedestriangates.t1537552785.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_89 { background: url("https://www.wallaceperimetersecurity.com/img/nav_alphagate.t1537552865.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_91 { background: url("https://www.wallaceperimetersecurity.com/img/nav_deltagate.t1537552866.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_93 { background: url("https://www.wallaceperimetersecurity.com/img/nav_pdttseries.t1501515110.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_95 { background: url("https://www.wallaceperimetersecurity.com/img/nav_foldsmartseries.t1501515104.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_97 { background: url("https://www.wallaceperimetersecurity.com/img/nav_pdxtseries.t1501515111.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_99 { background: url("https://www.wallaceperimetersecurity.com/img/nav_cgttseries.t1501515103.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_107 { background: url("https://www.wallaceperimetersecurity.com/img/nav_wovenwire.t1501515112.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_111 { background: url("https://www.wallaceperimetersecurity.com/img/nav_tritonfence.t1501515111.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_113 { background: url("https://www.wallaceperimetersecurity.com/img/nav_pallasfence.t1501515108.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_115 { background: url("https://www.wallaceperimetersecurity.com/img/nav_pallaslightfence.t1505852968.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_121 { background: url("https://www.wallaceperimetersecurity.com/img/nav_cgttseries.t1501515103.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_123 { background: url("https://www.wallaceperimetersecurity.com/img/nav_pedestriangate.t1528831186.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_125 { background: url("https://www.wallaceperimetersecurity.com/img/nav_unifence.t1505851733.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_127 { background: url("https://www.wallaceperimetersecurity.com/img/nav_gallery_airport.t1501515105.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_129 { background: url("https://www.wallaceperimetersecurity.com/img/nav_gallery_correction.t1501515106.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_131 { background: url("https://www.wallaceperimetersecurity.com/img/nav_gallery_government.t1501515107.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_133 { background: url("https://www.wallaceperimetersecurity.com/img/nav_gallery_commercial.t1501515105.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_135 { background: url("https://www.wallaceperimetersecurity.com/img/nav_gallery_transportation.t1501515107.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_139 { background: url("https://www.wallaceperimetersecurity.com/img/nav_unifence.t1505851733.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_141 { background: url("https://www.wallaceperimetersecurity.com/img/nav_unichild.t1505851732.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_143 { background: url("https://www.wallaceperimetersecurity.com/img/nav_unisecurity.t1505851734.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_145 { background: url("https://www.wallaceperimetersecurity.com/img/nav_customgates.t1537386952.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_149, nav ul li#snav_li_item_495 { background: url("https://www.wallaceperimetersecurity.com/img/nav_rampart_280.t1536341532.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_151, nav ul li#snav_li_item_497 { background: url("https://www.wallaceperimetersecurity.com/img/nav_rampart_284.t1536341532.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_153, nav ul li#snav_li_item_499 { background: url("https://www.wallaceperimetersecurity.com/img/nav_rampart_286.t1536341533.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_155, nav ul li#snav_li_item_501 { background: url("https://www.wallaceperimetersecurity.com/img/nav_rampart_354.t1536341534.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_157, nav ul li#snav_li_item_503 { background: url("https://www.wallaceperimetersecurity.com/img/nav_rampart_358.t1536341534.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_355 { background: url("https://www.wallaceperimetersecurity.com/img/nav_accessories_pedestals.t1580507741.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_357 { background: url("https://www.wallaceperimetersecurity.com/img/nav_accessories_gcs.t1580507740.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_419 { background: url("https://www.wallaceperimetersecurity.com/img/nav_privacyweave.t1719328613.jpg") no-repeat center center; background-size: cover; } nav ul li#snav_li_item_555 { display: none; } nav ul li#snav_li_item_875 { background: url("https://www.wallaceperimetersecurity.com/img/nav_rampart_armor.t1756483377.jpg") no-repeat center center; background-size: cover; } nav ul.snav_2 li a, nav ul.snav_3 li a { display: block; position: relative; min-height: 185px; padding: 3rem 0.5rem; font-size: 22px; font-weight: 600; line-height: 26px; text-transform: uppercase; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #000; background: rgba(70, 88, 98, 0.7); color: #fff; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } nav ul li a:hover, nav ul li.at a { padding: 2.5rem 0.5rem 3.5rem 0.5rem; text-decoration: none; background: rgba(70, 88, 98, 0.1); color: #fff; } /* Columns and Sections */ #content { display: block; position: relative; clear: both; float: left; width: 100%; padding: 0; margin: 0; } #content .container { display: flex; position: relative; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; column-gap: 2%; row-gap: 1.25rem; clear: both; padding: 1.5rem 0; } #content .container > h2 { flex: 0 0 100%; } #content .container > div.content-block { display: block; position: relative; flex: 0 0 100%; max-width: 100%; } #content .container#hww { justify-content: center; column-gap: 0; } #content.landing .container { min-height: 500px; padding: 1.5em 10em; } #content .container .block-left { display: block; position: relative; flex-basis: 49%; max-width: 49%; padding: 0; margin: 0; } #content .container .block-right { display: block; position: relative; flex-basis: 49%; max-width: 49%; padding: 0; margin: 0; } #content .container#hww div#introduction { display: flex; position: relative; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 2%; row-gap: 1rem; flex-basis: 100%; max-width: 100%; padding: 0; margin: 0 0 3rem 0; } #content .container#hww div#introduction > img { display: block; position: relative; flex-basis: 25%; max-width: 25%; } #content .container#hww div#introduction > h2 { display: block; position: relative; flex-basis: 70%; flex-grow: 1; margin: 0; font-size: 7.25rem; font-weight: 900; letter-spacing: -2px; line-height: 1; text-align: center; } #content .container#hww div#introduction > h2 span:nth-child(1) { color: rgba(16,120,143,0.45); } #content .container#hww div#introduction > h2 span:nth-child(2) { color: rgba(16,120,143,0.7); } #content .container#hww div#introduction > h2 span:nth-child(3) { color: rgba(16,120,143,1.0); } #content .container#hww div.hww-column { display: block; position: relative; align-self: stretch; flex-grow: 1; flex-basis: 28%; max-width: 30%; padding: 1.5rem; } #content .container#hww div.hww-column#first { padding-top: 0; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; border: 3px dotted #999; border-top: 0; } #content .container#hww div.hww-column#second { margin-top: -30px; border-top-left-radius: 30px; border-top-right-radius: 30px; border: 3px dotted #999; border-left: 0; border-right: 0; border-bottom: 0; } #content .container#hww div.hww-column#third { padding-top: 0; border-radius: 0; } #content .container#hww div.hww-column h2 { font-size: 1.5rem; line-height: 1; text-transform: uppercase; } #content .container#hww div.hww-column > h2:before { content: ""; display: block; position: absolute; left: -1rem; width: 30px; height: 30px; margin-top: -0.125rem; border-radius: 100%; background: #e5b622; } #content .container#hww div.hww-column#third div#promise { display: block; position: relative; padding: 1.5rem; background: #5c6f7c; color: #fff; } #content .container#hww div.hww-column#third div#promise > h2 { font-size: 1.25rem; color: #fff; } #content .container#hww div.hww-column#third div#promise ol { padding: 0 0 0 1rem; margin: 0 0 1rem 0; font-size: 1rem; } #content #banner-block { display: block; position: relative; clear: both; float: left; width: 100%; max-height: 650px; padding: 0; margin: 0 0 0.75em 0; border-right: 10px solid #fff; overflow: hidden; background: #d4d4d4; } #content #quicklinks { display: block; position: relative; clear: both; float: left; width: 100%; padding: 0; margin: 0 0 0.75em 0; border-left: 10px solid #fff; } #content #associations { display: block; position: relative; clear: both; float: left; width: 100%; padding: 0; margin: 0 0 0.75em 0; } /* Footer */ #footer { clear: both; position: relative; padding: 1.5em 0; margin: 0; min-height: 250px; background: #10788f; color: #fff; } #footer .copyright { display: block; position: relative; clear: both; float: left; width: 80%; padding: 0; margin: 0; } /* !Pardot/Salesforce tracking styles */ div#pi_tracking_opt_in_div { display: block; position: fixed !important; max-width: 60%; padding: 2rem 4rem !important; margin: 20vh 20% 0 20%; line-height: 1.5; box-shadow: 0px 0px 1000px #000; } div#pi_tracking_opt_in_div a#pi_tracking_opt_in_yes { display: block; max-width: 25%; padding: 0.25rem 1rem; margin: 1rem auto; font-weight: 600; border: 2px solid #10788f; } div#pi_tracking_opt_in_div a#pi_tracking_opt_in_no { display: block; max-width: 25%; padding: 0.25rem 1rem; margin: 1rem auto; border: 2px solid #ccc; } div#pi_tracking_opt_in_div a:hover { background: #10788f; color: #fff; } /* Content layout (appearence) */ .content-display { } .content-display:after { clear: both; } .content-display .content-block { width: 45%; float: left; margin: 0 2.5% 0 0; } /* single */ .content-display.type-0 { } /* double */ .content-display.type-1 .content-block { } /* double, wide-top */ .content-display.type-2 .content-block:nth-child(3n+1) { width: 100%; clear: both; float: none; margin: 0; } /* double, wide-bottom */ .content-display.type-3 .content-block:nth-child(3n+3) { width: 100%; clear: both; float: none; margin: 0; } /* triple */ .content-display.type-4 .content-block { width: 30%; margin-right: 3%; float: left; } /* Hide content that requires JavaScript unless JavaScript is running. */ body .requires-js { display: none; } /* public/style.css */ /* (c)2012 - visuallizard.com General styles. Template, view, plugin specific, etc. */ .case { /* For demonstrations only. Remove on production */ margin: 0 0 20px 0; } .small { font-size: 0.8em; } img { height: auto; } img, iframe { max-width: 100%; } h2, h3 { color: #10788f; } /* ! [[ IACP Tradeshow styles ]] */ h2.iacp-title { font-size: 80px; font-weight: 900; line-height: 0.8; text-transform: uppercase; } h3.iacp-subheading { margin-bottom: 1.5rem; font-size: 1.25rem; line-height: 1.1; } .button.yellow { border-radius: 40px; font-weight: 600; background-color: #e5b622; color: #000; } /* ! [[ apta Tradeshow styles ]] */ h2.apta-title { font-size: 50px; font-weight: 900; line-height: 0.8; text-transform: uppercase; } .button.yellow { border-radius: 40px; font-weight: 600; background-color: #e5b622; color: #000; } .container.marketing a.button { min-width: 250px; padding: 0.5rem 1.25rem 0.75rem 1.25rem; font-size: 1.5rem; text-shadow: none; background: #475862; color: #fff; } .container.marketing a.button:hover { background: #10788f; } /* !search block form */ div#search-block { display: block; position: relative; width: 100%; padding: 15px 0; margin: -80px 0 0 0; border-right: 10px solid #fff; background: #475862; transition: all 0.2s ease; } div#search-block.active { margin: 0; } #search-block form.search-form { display: block; position: relative; float: left; width: 100%; padding: 0 20%; margin: 0; } #search-block form.search-form div.input.text { display: block; position: relative; float: left; width: 90%; padding: 0; margin: 0; } #search-block form.search-form div.input.text input[type="text"] { width: 100%; height: 40px; padding: 5px; margin: 0; border: none; background: #fff; color: #000; } #search-block form.search-form div.input.text label { color: #fff; } #search-block form.search-form div.input.text label span { display: none; position: relative; width: 20px; height: 20px; background: url("https://www.wallaceperimetersecurity.com/img/icon_search.t1502811060.png") no-repeat center center; } #search-block form.search-form div.input.submit input[type="submit"] { display: block; position: relative; float: right; width: 40px; height: 40px; text-indent: -999em; background: url("https://www.wallaceperimetersecurity.com/img/icon_search.t1502811060.png") no-repeat center center; } /* !banner styles */ ul.banners { display: block; position: relative; float: left; width: 100%; height: auto; padding: 0; margin: 0; list-style: none; } ul.banners li { display: block; position: relative; z-index: 1; float: left; width: 100%; height: auto; padding: 0; margin: 0; } ul.banners li img { display: block; position: relative; z-index: 0; width: 100%; height: auto; } ul.banners li div.short-description { display: block; position: absolute; z-index: 1; top: 0; left: 40px; right: 40px; bottom: 0; padding: 40px; } ul.banners li div.short-description h2 { display: none; } ul.banners li div.short-description p { margin: 0; font-size: 12em; font-weight: 700; line-height: 140px; text-transform: uppercase; color: rgba(255,255,255,0.8); } ul.banners li div.short-description a { display: block; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; } /* additional Slick Slider defaults (project specific) */ .slick-arrow { position: absolute; top: 0; left: 0; bottom: 0; z-index: 10; background: rgba(255,255,255,0); width: 3%; max-height: 650px; text-indent: -10em; overflow: hidden; border: none; background-position: center center; background-repeat: no-repeat; background-size: 50% auto; color: rgba(255,255,255,0.7); transition: all .2s; opacity: .8; cursor: pointer; } .slick-next { top: 0; left: 97%; bottom: 0; right: 0; border-green; } .slick-prev:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; margin-left: -8px; border: none; border-right: 16px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; } .slick-next:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; margin-left: -8px; border: none; border-left: 16px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; } /* !home page quicklinks styles */ #quicklinks ul { display: block; position: relative; float: left; width: 100%; padding: 0; margin: 0; list-style: none; } #quicklinks ul li { display: block; position: relative; float: left; width: 24.25%; padding: 0; margin: 0 0 0 1%; background: #eee; } #quicklinks ul li:first-of-type { margin: 0; } #quicklinks ul li#sliding-gate { background: #10788f url("https://www.wallaceperimetersecurity.com/img/ql_slidinggate.t1501515114.jpg") no-repeat center center; background-size: cover; } #quicklinks ul li#folding-gate { background: #c37c1d url("https://www.wallaceperimetersecurity.com/img/ql_foldinggate.t1501515114.jpg") no-repeat center center; background-size: cover; } #quicklinks ul li#fencing { background: #c3a02d url("https://www.wallaceperimetersecurity.com/img/ql_fencing.t1501515113.jpg") no-repeat center center; background-size: cover; } #quicklinks ul li#custom { background: #645577 url("https://www.wallaceperimetersecurity.com/img/ql_custom.t1501515113.jpg") no-repeat center center; background-size: cover; } #quicklinks ul li a { display: block; position: relative; width: 100%; padding: 3em 0; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; text-decoration: none; color: #fff; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } #quicklinks ul li a:hover { letter-spacing: 2px; } #quicklinks ul li#sliding-gate a { background: rgba(16, 120, 143, 0.5); } #quicklinks ul li#folding-gate a { background: rgba(194, 123, 29, 0.5); } #quicklinks ul li#fencing a { background: rgba(194, 160, 44, 0.5); } #quicklinks ul li#custom a { background: rgba(100, 85, 120, 0.5); } #quicklinks ul li#sliding-gate a:hover { background: rgba(16, 120, 143, 0); } #quicklinks ul li#folding-gate a:hover { background: rgba(194, 123, 29, 0); } #quicklinks ul li#fencing a:hover { background: rgba(194, 160, 44, 0); } #quicklinks ul li#custom a:hover { background: rgba(100, 85, 120, 0); } /* !home page video */ #video iframe { display: block; position: relative; width: 100%; max-width: 1000px; margin: 2rem auto; border: none; } /* !home page associations styles */ #associations ul { display: block; position: relative; clear: both; float: left; width: 100%; padding: 0; margin: 0; list-style: none; } #associations ul li { display: block; position: relative; float: left; width: 32%; padding: 0; margin: 0 0 0 2%; border: 1px solid #10788f; text-align: center; } #associations ul li:nth-of-type(3n+1) { margin-left: 0; } #associations ul li a { display: block; position: relative; width: 100%; padding: 1em; margin: 0; } #associations ul li a img { max-width: 100%; height: 120px; } /* !product page styles */ div#product { display: block; position: relative; clear: both; float: left; width: 100%; margin: 1.5em 0 0 0; background: none; } div.product-image { display: block; position: relative; float: left; z-index: 0; width: 45%; min-height: 500px; } div.product-image:before { content: ""; display: block; position: absolute; z-index: 2; top: 30px; right: 0; width: 65%; min-height: 300px; padding: 0; margin: 0; background: rgba(255,255,255,0.8); } ul.tabs { display: block; position: absolute; float: left; top: 0; left: 0; z-index: 1; width: 45%; padding: 3em 4em 3em 0; margin: 0; list-style: none; } ul.tabs li { display: block; position: relative; float: left; width: 100%; padding: 0.5em 0; margin: 0; font-size: 20px; line-height: 22px; text-align: right; } ul.tabs li a { display: block; position: relative; width: 100%; color: #000; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } ul.tabs li a:after { content: ">"; display: block; position: absolute; top: 0; right: -15px; font-size: 20px; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } ul.tabs li:hover a { letter-spacing: 1px; text-decoration: none; } ul.tabs li:hover a:after, ul.tabs li a.at:after { right: -20px; font-weight: 600; letter-spacing: 0; } div.product-block { display: block; position: relative; float: right; width: 55%; padding: 0; margin: 0; } div.product-block div.layer { display: none; position: relative; float: right; width: 100%; min-height: 635px; padding: 1.5em; margin: 0; background: #f4f4f4; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } div.product-block div.layer.at { display: block; } div.product-block div#product-features { } div.product-block div#product-specifications { } div.product-block div#product-downloads { } div.product-block div#product-gallery { } div.product-block div#product-video { } div.product-block div.layer table { display: table; position: relative; width: 100%; table-layout: fixed; } #content div.product-block div.layer ul.gallery { display: block; position: relative; float: left; width: 100%; padding: 0; margin: 0; list-style: none; } #content div.product-block div.layer ul.gallery li { display: block; position: relative; float: left; width: 19%; padding: 0; margin: 0 0 7px 1.25%; border: 1px solid #999; line-height: 0; } #content div.product-block div.layer ul.gallery li:nth-of-type(5n+1) { clear: both; float: left; margin: 0 0 7px 0; } #content div.product-block div.layer ul.gallery li a { display: block; position: relative; width: 100%; height: 100%; padding: 0; margin: 0; } #content div.product-block div.layer ul.gallery li a img.thumb { display: block; position: relative; width: 100%; height: 100%; padding: 0; margin: 0; line-height: 0; } /* !Specifications & Drawings Document styles */ ul.document-list { display: block; position: relative; clear: both; float: left; width: 100%; padding: 0; margin: 0 0 1.5em 0; border-bottom: 1px solid #475862; list-style: none; } ul.document-list li { display: block; position: relative; float: left; width: 100%; padding: 0; margin: 0; } ul.document-list li a { display: block; position: relative; width: 100%; padding: 0.5em; margin: 0; border-top: 1px solid #475862; text-decoration: none; } ul.document-list li a:before { content: "download"; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; padding: 0.5em; font-weight: 600; text-align: right; text-transform: uppercase; background: rgba(70, 88, 98, 0.5); color: #fff; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } ul.document-list li a:hover:before { opacity: 1; } /* !Industry Gallery styles */ #content ul.gallery, #content.industry ul.gallery { display: block; position: relative; float: left; width: 100%; padding: 1.5em; margin: 0; list-style: none; background: #f4f4f4; } #content ul.gallery li, #content.industry ul.gallery li { display: block; position: relative; float: left; width: 19%; height: auto; padding: 0; margin: 0 0 1em 1.25%; border: 1px solid #10788f; line-height: 0; } #content ul.gallery li:nth-of-type(5n+1), #content.industry ul.gallery li:nth-of-type(5n+1) { margin-left: 0; } #content ul.gallery li a, #content.industry ul.gallery li a { display: block; position: relative; width: 100%; padding: 0; margin: 0; line-height: 0; } #content ul.gallery li img, #content.industry ul.gallery li img { display: block; width: 100%; height: auto; } #content ul.gallery li span.caption, #content.industry ul.gallery li span.caption { display: none; position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; padding: 0.5em; font-size: 14px; text-align: center; line-height: 1em; background: rgba(0,0,0,0.5); color: #fff; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } #content ul.gallery li:hover span.caption, #content.industry ul.gallery li:hover span.caption { font-size: 18px; } /* !contact form styles */ .contact-form form.standard { display: block; position: relative; float: left; width: 100%; padding: 1em; margin: 0; background: #f4f4f4; } .form-block { display: block; position: relative; width: 80%; margin: 0 auto; } form.standard .input.text, form.standard .input.select, form.standard .input.textarea, form.standard .input.multiple, form.standard .input.radio { display: block; position: relative; clear: both; float: left; width: 100%; padding: 0.5em; margin: 0 0 0.5em 0; background: rgba(0,0,0,0.1); } form.standard .input.text label, form.standard .input.select label, form.standard .input.textarea label, form.standard .input.multiple legend, form.standard .input.radio legend { font-size: 1.2em; font-weight: 100; line-height: 1.4em; } form.standard .input.multiple label, form.standard .input.radio label { font-size: 1em; font-weight: 500; } form.standard .input.text input[type="text"], form.standard .input.select select, form.standard .input.textarea textarea { display: block; position: relative; float: left; width: 100%; padding: 0.25em; margin: 0; font-size: 1em; } form.standard .input.select select { height: 32px; } form.standard input[type="submit"] { display: block; position: relative; clear: both; float: left; padding: 0.5em 1.5em; margin: 0; border: none; font-family: "freight-sans-pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.2em; text-transform: uppercase; text-shadow: none; background: #10788f; color: #fff; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; } form.standard input[type="submit"]:hover, form.standard input[type="submit"]:focus { background: #475862; } /* !footer styles */ #footer h3, #footer h4, #footer a { color: #fff; } #footer h4 a { text-decoration: underline; } #footer p, #footer ul { font-size: 0.9em; } #footer .cke { margin-bottom: 15px; } #footer .c4 ul.associations { display: block; position: relative; float: left; width: 100%; padding: 0; margin: 0; list-style: none; } #footer .c4 ul.associations li { display: block; position: relative; float: left; width: 75%; padding: 0; margin: 0 0 0.5em 0; } #footer .c4 ul.associations li a img { width: 100%; } #footer ul.social { display: flex; position: relative; top: 0; float: right; width: 15%; padding: 0; margin: 0; list-style: none; } #footer ul.social li { display: block; position: relative; float: left; flex-grow: 1; padding: 0; margin: 0; text-align: center; } #footer ul.social li a { display: block; padding: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 30px; line-height: 30px; text-decoration: none; /* background: #fff; color: #10788f; */ } #footer ul.social li.youtube a { line-height: 40px; font-size: 36px; } /* public/slick.css */ /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; width: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* webfonts/ss-social.css */ @charset "UTF-8"; /* * Symbolset * www.symbolset.com * Copyright © 2012 Oak Studios LLC * * Upload this file to your web server * and place this within your tags. * */ @font-face { font-family: "SSSocial"; src: url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-circle.t1501515084.eot'); src: url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-circle.t1501515084.eot?#iefix') format('embedded-opentype'), url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-circle.t1501515085.woff') format('woff'), url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-circle.t1501515085.ttf') format('truetype'), url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-circle.t1501515084.svg#SSSocialCircle') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: "SSSocial"; src: url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-regular.t1501515086.eot'); src: url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-regular.t1501515086.eot?#iefix') format('embedded-opentype'), url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-regular.t1501515087.woff') format('woff'), url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-regular.t1501515087.ttf') format('truetype'), url('https://www.wallaceperimetersecurity.com/css/webfonts/ss-social-regular.t1501515086.svg#SSSocialRegular') format('svg'); font-weight: normal; font-style: normal; } .ss-icon, [class^="ss-"]:before, [class*=" ss-"]:before, .ss-icon.ss-social-circle, [class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before, .ss-icon.ss-social, [class^="ss-"].ss-social:before, [class*=" ss-"].ss-social:before { font-family: "SSSocial"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; -webkit-font-feature-settings: "liga", "dlig"; -moz-font-feature-settings: "liga=1, dlig=1"; -moz-font-feature-settings: "liga", "dlig"; -ms-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; } .ss-icon.ss-social-circle, [class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before { font-weight: bold; } .ss-facebook:before{content:''}.ss-twitter:before{content:''}.ss-linkedin:before{content:''}.ss-googleplus:before{content:''}.ss-tumblr:before{content:''}.ss-wordpress:before{content:''}.ss-blogger:before{content:''}.ss-posterous:before{content:''}.ss-youtube:before{content:''}.ss-vimeo:before{content:''}.ss-flickr:before{content:''}.ss-instagram:before{content:''}.ss-pinterest:before{content:''}.ss-dribbble:before{content:''}.ss-behance:before{content:''}.ss-github:before{content:''}.ss-paypal:before{content:''}.ss-foursquare:before{content:''}.ss-skype:before{content:''}.ss-mail:before{content:'✉'} /* public/upload.css */ form div.files.single { position: relative; overflow: hidden; width: 100%; max-width:100%; height: auto; margin: 0; padding: 0; border: none; } form div.files.single div.fade { display: block; position: relative; flex-grow: 1; background-color: #fff; border: none; width: 210px; width: 100%; height: auto; } form div.files a.x { position:absolute; top: auto; right: 10px; } .files .progress { opacity: 0.50 } .fileupload-processing .fileupload-loading { display: block; } .progress { min-height: 30px; padding: 0; margin: 0; background-color: transparent; background-repeat: repeat-x; } .progress .bar { width: 0; min-height: 3.5rem; padding: 1em; font-size: 12px; line-height: 1.5; color: #ffffff; text-align: center; background-color: #0e90d2; } .progress-danger .bar { background-color: #dd514c; } .progress-success .bar { background-color: #5eb95e; } .progress-info .bar { background-color: #4bb1cf; } .progress-warning .bar { background-color: #faa732; } /* public/magnific-popup.css */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #cccccc; } .mfp-preloader a:hover { color: white; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: white; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #cccccc; font-size: 12px; line-height: 18px; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid white; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3f3f3f; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid white; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3f3f3f; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444444; } .mfp-figure figure { margin: 0; } .mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; font-size: 1.2rem; color: #f3f3f3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure { /* The shadow behind the image */ } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } /* public/responsive.css */ /* (c)2012 - visuallizard.com Mobile styles using Media Queries */ /* !Media Queries ============================== */ /* Greater than standard 1024 (devices and browsers) */ @media only screen and (min-width: 821px) { .mobile-menu-toggle { display: none; } } /* Smaller than standard 1200 (devices and browsers) */ @media only screen and (max-width: 1200px) { .container, #content .container { width: 100%; padding: 0 1rem; } ul.banners li div.short-description p { font-size: 10em; line-height: 120px; } } /* Smaller than standard 1024 (devices and browsers) */ @media only screen and (max-width: 1024px) { #header { border: none; } #header h1 { margin: 0 0 0 3%; } #header ul.nav_1 { width: 50%; } header form.search-form { width: 19%; } #header ul.nav_1#right-nav { width: 18%; margin-left: 0; } ul.banners li div.short-description p { font-size: 8em; line-height: 100px; } #content .container, #content.landing .container { padding: 0 1em; } #video iframe { max-width: 100%; max-height: 560px; padding: 0 1rem; margin: 1rem 0; } #footer .container { width: 100%; padding: 0 1em; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (max-width: 960px) { #header ul.nav_1 { width: 50%; } #header form.search-form { width: 19%; } #header ul.nav_1#right-nav { width: 18%; } ul.banners li div.short-description p { font-size: 6em; line-height: 80px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 768px) { #header .container ul.nav_1, #header .container ul.nav_1#right-nav { display: none; } #header form.search-form { width: 80%; } #header form.search-form .input.text input[type="text"] { width: 100%; } #content #banner-block { border: none; } #content #quicklinks { border: none; } #content #quicklinks ul li { float: left; width: 49%; margin: 0 0 0.5em 0; } #content #quicklinks ul li:nth-of-type(2n) { float: right; } #video iframe { max-width: 100%; max-height: 360px; padding: 0 1rem; margin: 1rem 0; } .cke div.c1, .cke div.c2, .cke div.c3, .cke div.c4 { width: 100%; padding: 0; margin: 0 0 0.5em 0; } #content .container#hww div#introduction > img { flex-basis: 80%; max-width: 80%; } #content .container#hww div#introduction > h2 { line-height: 0.8; } #content .container#hww div.hww-column { flex-basis: 100%; max-width: 100%; border: none; padding-top: 0; } #content .container#hww div.hww-column#first, #content .container#hww div.hww-column#second { border: none; } #content .container#hww div.hww-column > h2:before { left: -0.75rem; } #footer .c4 ul.social { top: 0; float: left; width: 100%; } /* Mobile menu toggle */ .js #header .mobile-menu-toggle { display: block; position: absolute; top: 5px; right: 0; width: 60px; padding-left: 1.25em; margin: 0; opacity: 0.50; font-size: 16px; line-height: 16px; background: transparent; color: #fff; } .js #header .mobile-menu-toggle:before { content: ""; position: absolute; top: 4px; left: 0; width: 1em; height: 0.125em; border-top: 0.375em double #fff; border-bottom: 0.125em solid #fff; } .js #header.show .mobile-menu-toggle:before { border-top: 0.375em double #000; border-bottom: 0.125em solid #000; } .js #header.show .mobile-menu-toggle { color: #000; } .js #header .mobile-menu-toggle:hover { opacity: 1; } .js #header.show { padding: 0 0 0.5em 0; } .js #header.show > ul.mnav_1 { display: block; position: relative; width: 100%; padding: 0.5em; margin: 0 0 0.5em 0; list-style: none; background: #fff; } .js #header > ul li { display: none; } .js #header.show > ul.mnav_1 li, .js #header > ul.mnav_1 li.at { display:block; position: relative; width: 100%; padding: 0; margin: 0; } .js #header.show > ul.mnav_1 li#mnav_li_item_117:after { content: ""; display: block; position: absolute; top: 7px; right: 0; width: 20px; height: 20px; background: url("https://www.wallaceperimetersecurity.com/img/lock.t1719328612.svg") no-repeat center center; background-size: 15px 15px; color: #fff; } .js #header.show > ul.mnav_1 li a, .js #header > ul.mnav_1 li.at a { display: block; position: relative; padding: 0.5em; border-bottom: 1px dotted #999; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { #content #banner-block { display: none; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 670px) { header .container { padding: 0; } div#search-block { border: none; } #search-block form.search-form { padding: 0; } #search-block form.search-form div.input.text { width: 85%; } #header form.search-form { width: 60%; } #header h1 { width: 50%; margin: 0 25%; } #header h1 .logo { background-size: 100px; } .js #header .mobile-menu-toggle { top: 15px; } #header a#search-toggle { top: 20px; } #header p.contact-number { top: 100px; right: auto; width: 100%; text-align: center; letter-spacing: normal; } #content #quicklinks { border: none; } #content #quicklinks ul li { width: 96%; margin: 0 2% 0.5em 2%; } nav { display: block; } nav ul { } nav ul li { width: 100%; margin: 0 0 0.5em 0; background: none !important; } nav ul li a { min-height: 30px; padding: 0.5em; } nav ul li a:hover, nav ul li.at a { padding: 0.5em; background-color: #10788f; } nav ul.snav_2 li, nav ul.snav_2#snav_75 li, nav ul.snav_3 li { flex-basis: 100%; max-width: 100%; } nav ul.snav_2 li a, nav ul.snav_3 li a { min-height: 0; padding: 1rem; } /* Hiding ".snav_2 and .snav_3" on mobile on individual product pages as they take too much space and are redundant since links are already in mobile nav. But leave navigation on product "landing" pages. */ nav ul.snav_2:has(.at), nav ul.snav_3:has(.at) { display: none; } #video iframe { max-width: 100%; max-height: 315px; padding: 0 1rem; margin: 1rem 0; } #product .product-image { display: none; } ul.tabs { display: none; } div.product-block { float: left; width: 100%; } div.product-block div.layer { display: block; position: relative; min-height: 200px; clear: both; float: left; border-top: 1px dotted #999; } div.product-block div.layer.at { border: none; } div.product-block div.layer iframe { max-height: 170px; } #content .container .block-left, #content .container .block-right { flex-basis: 100%; max-width: 100%; } h2.iacp-title { font-size: 3rem; } #footer .copyright { float: none; width: 100%; margin: 0 0 1rem 0; } #footer ul.social { clear: both; float: none; width: 50%; margin: 1rem auto; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 520px) { #video iframe { max-width: 100%; max-height: 200px; padding: 0 1rem; margin: 1rem 0; } }