/** Theme Name: Canuck Description: Canuck is a full featured WordPress theme offering the user many options to control the look of the theme, and many options for special pages and content. For buisness, Canuck offers a great home page bulder, and unlimited Portfolio pages. Choose up to 13 sections in any order, and set up a landing page designed for your business. Each portfolio page can use any of the 9 layouts offered. For bloggers, Canuck offers audio, gallery, image, quote, and video post formats and users can choose one of 6 layouts for main blog index. Set each page up with one sidebar, two sidebars, or full width. Author: Kevin Archibald Author URI: https://kevinsspace.ca/ Theme URI: https://kevinsspace.ca/canuckdemo/ Version: 1.0.2 Text Domain: canuck License: GNU General Public License v2 or later License URI:http://www.gnu.org/licenses/quick-guide-gplv3.html Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,grid-layout,flexible-header,custom-background,custom-colors,custom-header,custom-menu,custom-logo,editor-style,featured-image-header,featured-images,footer-widgets,full-width-template,post-formats,sticky-post,theme-options,threaded-comments,translation-ready,blog,e-commerce,portfolio Canuck is a full featured WordPress Theme Copyright (C) 2017 Kevin Archibald Canuck is distributed under the terms of the GNU GPL This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. NOTE: DO NOT EDIT THIS FILE, IF YOU DO IT WILL BE OVERWRITTEN BY THE NEXT UPDATE. CREATE CHILD THEME INSTEAD. See:http://codex.wordpress.org/Child_Themes */ /** * * Table of Content * * A. General ------------------------------ ~ 0060 * B. Header ------------------------------- ~ 0350 * C. Navigation --------------------------- ~ 0806 * D. Page Titles -------------------------- ~ 1022 * E. Layouts ------------------------------ ~ 1058 * F. Sidebars ----------------------------- ~ 1184 * G. Footer ------------------------------- ~ 1235 * H. Misc Page Styles --------------------- ~ 1430 * I. Feature Styles ----------------------- ~ 1472 * J. Post Styles -------------------------- ~ 1485 * K. Comment Styles ----------------------- ~ 2588 * L. Misc Styles -------------------------- ~ 2876 * M. Colorbox Styles ---------------------- ~ 3175 * N. Flex Slider Styles ------------------- ~ 3231 * O. Masonry Syles * P. Other plugin styles ------------------ ~ 3588 * P. Media Queries ------------------900--- ~ 3600 * Media Queries -----------------700--- ~ 4210 * Media Queries -----------------480--- ~ 4361 * */ /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> A. General */ body { width: 100%; font-size: 100%; /* all theme fonts are scaled from this size - 100% is 16px */ font-weight: normal; line-height: 1.5em; word-wrap: break-word; margin: 0; padding: 0; } .clearfix {clear: both;} .clearleft {clear: left;} .clearright {clear: right;} /* ---------------- Headers --------------------------- */ h1,h2,h3,h4,h5,h6 { line-height: 1.5em; padding: 0; margin: 10px 0 0 0; font-weight: 300; } h1 {font-size: 2.75em;} h2 {font-size: 2.25em;} h3 {font-size: 1.75em;} h4 {font-size: 1.5em;} h5 {font-size: 1.25em;} h6 {font-size: 1.125em;} /* ---------------- basic paragraph ------------- */ p { font-size: 1em; line-height: 1.5em; margin: 0; padding: 0.75em 0 0 0; } p:first-child { padding: 0; margin: 0; } /* ---------------- Misc HTML tags ---------------- */ address { font-size: 1em; font-style: italic; } blockquote, blockquote p { font-style: italic; margin-left: 1em; font-weight: 600; line-height: 1.5em; vertical-align: bottom; } blockquote p:before { font-family: FontAwesome; content:'\f10d'; font-size: 0.75em; line-height: 1.5em; padding: 0 0.5em 0 0; vertical-align: top; } pre { border-radius: 10px; font-size: 1em; margin: 1em 0 0 0; padding: 1em; overflow-x: auto; } label {font-size: 1em;} code { font-size: 1em; } q{font-style: italic;} q:before, q:after { content:'"'; } /* ---------------------------------- list defaults --------------- */ /* ------------- unordered ------------------- */ ul { padding: 0; /* This will vary because of nesting */ margin: 0 0 0 1.5em; line-height: 1.5em; } ul li { list-style: disc; font-size: 1em; list-style-position: outside; } ul li li { list-style: circle; font-size: 1.0em; list-style-position: outside; } ul li li li { list-style: square; font-size: 1.0em; list-style-position: outside; } /* --- special lists --- */ ul.recent-posts li { list-style: none; } /* ------------ ordered --------------------------- */ ol{ padding: 0; margin: 0 0 0 1.5em; line-height: 1.5em; } ol li { list-style: decimal; font-size: 1em; list-style-position: outside; } ol li li { list-style: lower-roman; font-size: 1em; list-style-position: outside; } ol li li li { list-style: decimal; font-size: 1em; list-style-position: outside; } /* -------------- ordered/unordered combo lists ------ */ ol ul li { list-style: disc; list-style-position: inside; } ol ul ul li { list-style: circle; list-style-position: inside; } ul ol li { list-style: decimal; list-style-position: inside; } ul ol ul li { list-style: circle; list-style-position: inside; } ul ul ol li { list-style: decimal; list-style-position: inside; } /* --------------definition list ------------------- */ dt { margin: 0; padding: 0; font-size: 1em; font-weight: bold; } dl { margin: 0; padding: 0; font-size: 1.0em; } dd { font-size: 1em; margin-left: 1em; } /* ----- links default ------------------------------- */ a { transition: .5s ease; } a:link, a:active, a:visited, a:hover { text-decoration: none; } /* ------------------table styles --------------------- */ table { border-collapse: collapse; border-spacing: 0; font-size: 1em; } thead { font-weight: bold; text-align: center; } th { padding: 0.625em; } tfoot { font-weight: bold; } tbody { text-align: left; } tr { padding: 0.625em; } td { padding: 0.625em; text-align: left; } /* ----------------------------------scroll to top ---- */ body .scrolltotop { display: none; position: fixed; bottom: 20px; right: 20px; font-size: 20px; padding: 8px 10px 10px 10px; border-radius: 3px; z-index: 999999; } body.sticky .scrolltotop { display: inline-block; } body.sticky .scrolltotop:hover { transition: .5s ease; } /* --------------------------------- animations -*/ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes searchHeightOn { from { height: 0; } to { height: 25px; } } @keyframes searchHeightOff { from { height: 25px; } to { height: 0; } } @keyframes menuDropDown { from { opacity: 0; } to { opacity: 1; } } @keyframes menuDropOut { from { opacity: 1; } to { opacity: 0; } } @keyframes sidebarShowLeft { from { width: 0; } to { width: 80%; } } @keyframes sidebarShowRight { from { width: 0; } to { width: calc(80% - 20px); } } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> B. Header */ /* ============================================= Header Setup Styles */ .header-wide-no-feature, .header-wide-slider { position: fixed; width: 100%; float: left; padding: 0; margin: 0; z-index: 99000; } .header-wide-image { width: 100%; position: fixed; float: left; padding: 0; margin: 0; z-index: 99000; } .sticky-spacer { width: 100%; float: left; margin-top: 160px; line-height: 0; } /* ------------------------------------------------- Header top strip --------------- */ .header-topstrip-wide { width: 100%; float: left; margin: 0; padding: 0; } .header-topstrip-wrap { max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; height: 40px; overflow: hidden; } .header-topstrip-wrap .header-topstrip-left { width: 50%; float: left; padding: 0; margin: 0; text-align: left; font-size: 14px; line-height: 40px; vertical-align: middle; overflow: hidden; } .header-wide-no-feature .header-topstrip-left a, .header-wide-slider .header-topstrip-left a { font-size: 14px; vertical-align: middle; transition: .75s ease; margin: 0; padding: 10px; } .header-wide-image .header-topstrip-left a { font-size: 14px; line-height: 40px; vertical-align: middle; transition: .75s ease; margin: 0; padding: 10px 10px 10px 10px; } .header-topstrip-left .contact-hours { margin: 0 15px 0 0; } .header-topstrip-left .contact-hours i { margin: 0 5px 0 0; } .header-topstrip-left .contact-phone { margin: 0 15px 0 0; } .header-topstrip-left .contact-phone i { margin: 0 5px 0 0; } .header-topstrip-wrap .header-topstrip-right { width: 50%; float: right; padding: 0; margin: 0; text-align: left; height: 40px; overflow: hidden; } /* ------------------------------------------------------ Header navigation bar ------------------ */ .header-logo-menu-wide { width: 100%; float: left; margin: 0; padding: 0; } .header-logo-menu-strip { max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; height: 120px; z-index: 9999; } /* ----------------------------------------- Logo ---------------- */ .header-logo-menu-strip .header-image-left { width: 230px; height: 100px; float: left; text-align: left; margin: 10px 20px 10px 0; padding: 0; } .header-wide-no-feature .header-logo-menu-wide .header-logo-menu-strip .header-image-left a, .header-wide-slider .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { display: flex; width: 100%; height: 100%; align-items: center; } .header-wide-image .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { display: block; float: left; width: 230px; height: 100px; margin: 0; padding: 0; background-repeat: no-repeat; background-position: left; background-size: auto; } .header-logo-menu-strip .header-image-left img { max-width: 230px; max-height: 100px; } .header-logo-menu-strip .header-image-left img:hover { opacity: 0.5; } /* ----------------------------------------------------- header search */ /* Header Search Form */ .canuck-show-search-trigger{ display: inline-block; float: right; clear: none; width: 25px; border: none; margin: 35px 20px 0 0; padding: 0; } .header-wide-image .canuck-show-search-trigger i{ font-size: 16px; margin: 0; padding: 30px 0 20px 0; } .header-wide-no-feature .canuck-show-search-trigger i, .header-wide-slider .canuck-show-search-trigger i { font-size: 16px; margin: 0; padding: 30px 0 20px 0; } .header-wide-no-feature .canuck-show-search-trigger i:hover, .header-wide-slider .canuck-show-search-trigger i:hover, .header-wide-image .canuck-show-search-trigger i:hover { transition: .5s; } .canuck-search { clear: both; float: right; margin: 0; overflow: hidden; height:0; } .canuck-search.search-on { display: block; height: 25px; animation: searchHeightOn .5s ease-in; margin: 0 0 10px 0; } .canuck-search #searchform { max-width: none; } .canuck-search button { float: right; display: inline-block; background-color: transparent; border: none; font-size: 18px; margin: 0 5px 10px 0; padding: 0; line-height: 25px; } .canuck-search #searchform .keyword { clear: both; float: right; display: inline-block; width: 200px; height: 25px; font-size: 16px; vertical-align: middle; } .canuck-search input:focus {outline: none;} /* -------------------------------------------------------- header nav */ .header-logo-menu-strip .nav-container { width: calc(100% - 300px); clear: none; float: right; margin: 35px 0 0 0; line-height: 1em; } .header-wide-no-feature .header-logo-menu-strip nav a:hover, .header-wide-slider .header-logo-menu-strip nav a:hover, .header-wide-image .header-logo-menu-strip nav a:hover { transition: .5s ease; } /* * ------------------ sticky header --------------------------------- */ body.sticky .header-wide-no-feature, body.sticky .header-wide-slider { box-shadow: 0 5px 10px rgba(0,0,0,0.3); transition: .25s ease; } body.sticky .header-wide-image { box-shadow: 0 5px 10px rgba(0,0,0,0.3); transition: all .25s ease; } body.sticky .header-wide-no-feature .header-topstrip-wide, body.sticky .header-wide-slider .header-topstrip-wide, body.sticky .header-wide-image .header-topstrip-wide { display: none; } body.sticky .header-wide-no-feature .header-topstrip-wide nav, body.sticky .header-wide-slider .header-topstrip-wide nav, body.sticky .header-wide-image .header-topstrip-wide nav { height: 60px; } body.sticky .header-logo-menu-strip { height: 60px; } body.sticky .header-logo-menu-strip nav { margin: 15px 0 0 0; } body.sticky .header-image-left { height: 60px; } body.sticky .header-wide-image .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { display: block; float: left; width: 230px; height: 40px; padding: 10px 0 10px 0; background-repeat: no-repeat; background-position: left; background-size: contain; } body.sticky .header-logo-menu-strip div.header-image-left a img { width: 125px; height: auto; vertical-align: middle; } body.sticky .canuck-show-search-trigger{ display: inline-block; float: right; clear: none; width: 25px; border: none; margin: 15px 20px 0 0; padding: 0; } body.sticky .canuck-show-search-trigger i{ font-size: 16px; margin: 0; padding: 30px 0 20px 0; } /* ------------------ end sticky header ------------------------- */ /* --------------------- header Image background ----------------------- */ .header-image-wrap { width: 100%; float: left; margin: 0; padding: 0; } .header-image-wrap img { width: 100%; float: left; margin: 0; padding: 0; } .header-image-overlay { position: absolute; overflow: hidden; top: 170px; left: 12.5%; width: 75%; height: 40%; display: flex; flex-direction: column; justify-content: center; text-align: center; } .header-image-overlay h1 { margin: 0; } .header-image-overlay a { height: 70px; } /* ------------------------------------------- Social link styles */ .social-screen-reader-text { position: absolute; top: -9999em; left: -9999em; } .social-nav-class ul { list-style: none; margin: 0; text-align: right; } .social-nav-class ul li { display: inline-block; position: relative; margin: 0; padding: 0; } .social-nav-class li a { font-size: 14px; vertical-align: middle; } .header-wide-image .social-nav-class li a:before { display: inline-block; padding: 0; width:30px; text-align: center; margin: 0; font-family: 'FontAwesome'; font-size: 14px; vertical-align: middle; line-height: 40px; -webkit-font-smoothing: antialiased; transition: .75s ease; letter-spacing: 0; } .header-wide-no-feature .social-nav-class li a:before, .header-wide-slider .social-nav-class li a:before { display: inline-block; padding: 0; width: 30px; text-align: center; margin: 0; font-family: 'FontAwesome'; font-size: 14px; vertical-align: middle; line-height: 40px; -webkit-font-smoothing: antialiased; transition: .75s ease; } .footer-topstrip-right .social-nav-class li a:before { display: inline-block; padding: 0; width: 30px; text-align: center; margin: 0; font-family: 'FontAwesome'; font-size: 14px; vertical-align: middle; line-height: 40px; -webkit-font-smoothing: antialiased; transition: .75s ease; letter-spacing: 0; } .social-nav-class li a[href*="wordpress.org"]::before, .social-nav-class li a[href*="wordpress.com"]::before { content: '\f19a'; } .social-nav-class li a[href*="wordpress.org"]:hover:before, .social-nav-class li a[href*="wordpress.com"]:hover:before { content: '\f19a'; color: #ffffff; background-color: #21759b; } .social-nav-class li a[href*="facebook.com"]::before { content: '\f09a'; } .social-nav-class li a[href*="facebook.com"]:hover:before { content: '\f09a'; color: #ffffff; background-color: #3b5998; } .social-nav-class li a[href*="twitter.com"]::before { content: '\f099'; } .social-nav-class li a[href*="twitter.com"]:hover:before { content: '\f099'; color: #ffffff; background-color: #33ccff; } .social-nav-class li a[href*="google.com"]::before { content: '\f0d5'; } .social-nav-class li a[href*="google.com"]:hover:before { content: '\f0d5'; color: #ffffff; background-color: #dd4b39; } .social-nav-class li a[href*="linkedin.com"]::before { content: '\f0e1'; } .social-nav-class li a[href*="linkedin.com"]:hover:before { content: '\f0e1'; color: #ffffff; background-color: #0e76a8; } .social-nav-class li a[href*="/feed/"]::before { content: '\f09e'; } .social-nav-class li a[href*="/feed/"]:hover:before { content: '\f09e'; color: #ffffff; background-color: #FD9F13; } .social-nav-class li a[href*="pinterest.com"]::before { content: '\f231'; } .social-nav-class li a[href*="pinterest.com"]:hover:before { content: '\f231'; color: #ffffff; background-color: #c8232c; } .social-nav-class li a[href*="dribbble.com"]::before { content: '\f17d'; } .social-nav-class li a[href*="dribbble.com"]::before { content: '\f17d'; color: #ffffff; background-color: #ea4c89; } .social-nav-class li a[href*="github.com"]::before { content: '\f09b'; } .social-nav-class li a[href*="github.com"]::before { content: '\f09b'; color: #ffffff; background-color: #171515; } .social-nav-class li a[href*="tumblr.com"]::before { content: '\f173'; } .social-nav-class li a[href*="tumblr.com"]::before { content: '\f173'; color: #ffffff; background-color: #34526f; } .social-nav-class li a[href*="youtube.com"]::before { content: '\f167'; } .social-nav-class li a[href*="youtube.com"]::before { content: '\f167'; color: #ffffff; background-color: #c4302b; } .social-nav-class li a[href*="flickr.com"]::before { content: '\f16e'; } .social-nav-class li a[href*="flickr.com"]::before { content: '\f16e'; color: #ffffff; background-color: #ff0084; } .social-nav-class li a[href*="vimeo.com"]::before { content: '\f27d'; } .social-nav-class li a[href*="vimeo.com"]::before { content: '\f27d'; color: #ffffff; background-color: #1AB7EA; } .social-nav-class li a[href*="instagram.com"]::before { content: '\f16d'; } .social-nav-class li a[href*="instagram.com"]::before { content: '\f16d'; color: #ffffff; background-color: #3f729b; } .social-nav-class li a[href*="codepen.io"]::before { content: '\f1cb'; } .social-nav-class li a[href*="codepen.io"]::before { content: '\f1cb'; color: #ffffff; background-color: #000; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> C. Navigation */ /* * ------------------- Primary Menus ---------------- */ /* ------- basic set up ------- */ .nav-container { clear: both; display: block; max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; text-decoration: none; font-size: 1em; overflow: hidden; } .header-logo-menu-strip .nav-container { padding: 0; } /* hide mobile menu button ------ */ .main-menu,.main-menu.toggle-on { display: block; } .dropdown-toggle { display: none; } button.menu-1-toggle { display: none; margin: 0 auto; } button.menu-1-toggle:before { font-family: FontAwesome; content: "\f0c9"; margin: 0; padding: 5px 10px 5px 10px; font-size: 1.5em; vertical-align: middle; } /* ------- sidebar toggle buttons -------- */ button.sidebar-a-toggle, button.sidebar-b-toggle { font-family: FontAwesome; margin: 0; font-size: 12px; padding: 20px 2px 20px 2px; } button.sidebar-a-toggle { display: none; position:fixed; left: 0; top: 50%; border-radius: 0 5px 5px 0; z-index: 10000; } button.sidebar-b-toggle { display: none; position: fixed; right: 0; top: 50%; border-radius: 5px 0 0 5px; z-index: 10000; } button.sidebar-a-toggle:hover, button.sidebar-b-toggle:hover { cursor: pointer; transition: .5s; } /* ----- buttons ------------------------------- */ .header-wide-no-feature button, .header-wide-slider button { border: none; background: none; padding: 0; } .header-wide-image button { background: none; border: none; padding: 0; } body.sticky .header-wide-image button { background: none; border: none; padding: 0; } /* * -------------------- Menus --------------- */ /* ----- 0 level ----- */ .main-nav {} .main-nav li { list-style: none; } /* -------- Right No Border --------- */ #main-menu-right { width: calc(100% - 80px); float: right; margin: 0; padding: 0; } #main-menu-right ul { display: inline-block; float: right; margin: 0; padding: 0; } #main-menu-right ul li { float: left; display: inline-block; margin: 0; padding: 25px 40px 0 0; } #main-menu-right ul li.menu-item-has-children > a:after { font-family: FontAwesome; content: "\f0dd"; margin: 0 0 0 5px; font-size: 8px; vertical-align: middle; } #main-menu-right ul ul li.menu-item-has-children > a:after { display: none; } #main-menu-right ul li > ul { display: none; } #main-menu-right ul li:hover > ul { display: block; position: absolute; width: 160px; height: auto; margin: 0; padding: 0; box-shadow: 0 0 3px rgba(0,0,0,.3); z-index: 999; animation: menuDropDown 700ms ease-in-out; } #main-menu-right ul ul li { width: 160px; float: left; clear: both; margin: 0; padding: 0; } #main-menu-right ul ul li > a { float: left; width: 140px; margin: 0; padding: 10px; } #main-menu-right ul ul li > a:hover { margin: 0; } #main-menu-right ul ul li.menu-item-has-children > a:before { font-family: FontAwesome; content: "\f0d9"; margin: 0 5px 0 -5px; font-size: 8px; float: left; } #main-menu-right ul ul li > ul { display: none; } #main-menu-right ul ul li:hover > ul { display: block; position: absolute; width: 160px; height: auto; margin: 0 0 0 -160px;; padding: 0; box-shadow: 0 0 3px rgba(0,0,0,.3); z-index: 999; transition: 2s ease; } #main-menu-right ul ul ul li > a:hover { margin: 0; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> D. Page Titles */ #page-title-wide { width: 100%; float: left; } .page-title-wrap { max-width: 960px; margin: 0 auto 0 auto; padding: 0 100px 0 100px; overflow: hidden; z-index: 1; } .page-title-wrap h1.center-title { width: 100%; float: left; line-height: 1em; padding: 0.75em 0 0.75em 0;; margin: 0; text-align: center; vertical-align: baseline; } .breadcrumbs-center { display: block; max-width: 1000px; margin: 0 auto 1em auto; font-size: 0.75em; line-height: 1em; text-align: center; padding: 0 0 1em 0; } .breadcrumbs-center a { transition: .5s ease; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> E. Layouts */ #main-section { width: 100%; clear: both; float: left; background-color: #FFFFFF; padding: 0 0 20px 0; } #main-section-home { width: 100%; clear: both; float: left; background-color: rgba(255,255,255,0); margin: 0; padding: 0; } #content-wrap { max-width: 1100px; margin: 0 auto 0 auto; padding: 30px 30px 0 30px; overflow: hidden; z-index: 1; } #main-section-home #content-wrap { max-width: 100%; margin: 0 auto 0 auto; padding: 0; overflow: hidden; z-index: 1; } #fullwidth { clear: both; width: 100%; float: left; margin: 0; padding: 0; background-color: #FFFFFF; } #fullwidth-home { clear: both; width: 100%; float: left; margin: 0; padding: 0; } #fullwidth .page { max-width: 1100px; margin: 0 auto 0 auto; padding: 30px; } #fullwidth.search .page { max-width: 1100px; margin: 0 auto 0 auto; padding: 0; } #fullwidth .page .page-entry { width: 100%; float: left; margin: 0; padding: 0; } #fullwidth.search article { width: 100%; float: left; margin: 0 0 40px 0; } #feature-slider-wide { width: 100%; clear: both; float: left; margin: 0; padding: 0; } #feature-slider-wrap { width: 100%; clear: both; float: left; margin: 0; padding: 0; } /* ------------------------------------------- two column layouts */ #two-column-content { float: left; width: 65%; margin: 0; padding: 0 0 25px 0; } #two-column-content.search article { width: 100%; float: left; margin: 0 0 40px 0; } #two-column-sidebar-left { position: inherit; float: left; margin: 0 2.5% 0 0; padding: 0 2.5% 25px 0; width: 30%; } #two-column-sidebar-right { float: left; width: 30%; margin: 0 0 0 2.5%; padding: 0 0 25px 2.5%; } /* ------------------------------------------- three column layouts */ #three-column-content { float: left; width: 50%; padding: 0 0 20px 0; margin: 0; } #three-column-content.search article { width: 100%; float: left; margin: 0 0 40px 0; } #three-column-sidebar-left { position: inherit; float: left; width: 21%; margin: 0 2% 0 0; padding: 0 2% 20px 0; } #three-column-sidebar-right { float: left; width: 21%; margin: 0 0 0 2%; padding: 0 0 20px 2%; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> F. Sidebars */ .widget ul { padding: 0; margin: 0; } .widget li { list-style: none; padding: 0.5em 0 0 0; } .widget select { display:block; width: 95%; float: left; } .widget option { display: block; max-width: 100%; overflow: hidden; } #two-column-sidebar-right .widget, #three-column-sidebar-right .widget { float: left; width: 95%; margin: 0 0 1em 0; padding: 0 0 0.5em 5%; } #two-column-sidebar-left .widget, #three-column-sidebar-left .widget { float: left; width: 95%; margin: 0 0 1em 0; padding: 0 5% 0.5em 0; } #two-column-sidebar-right h2, #two-column-sidebar-left h2, #three-column-sidebar-right h2, #three-column-sidebar-left h2 { font-size: 1em; padding: 0px; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> G. Footer */ /* --------------------------------------------------------- footer -------------- */ #canuck-footer { width: 100%; float: left; margin: 0; padding: 0; } .footer-overlay { width: 100%; float: left; margin: 0; padding: 25px 0 25px 0; } #footer-wrap { clear: both; display: block; max-width: 1100px; margin: 0 auto 0 auto; padding: 30px 30px 0 30px; text-decoration: none; font-size: 1em; line-height: 1em; overflow: hidden; } #footer-wrap h3 { font-size: 1.25em; line-height: 2em; padding: 0em; margin: 0em; } /* ------------------------------------------------- Footer top strip --------------- */ .footer-topstrip-wrap { width: 100%; float: left; margin: 0 0 40px 0; padding: 0; overflow: hidden; } .footer-topstrip-wrap .footer-topstrip-left { width: 50%; float: left; padding: 0; margin: 0; text-align: left; font-size: 14px; line-height: 40px; vertical-align: middle; overflow: hidden; } .footer-topstrip-left a { font-size: 14px; transition: .75s ease; margin: 0; padding: 10px; } .footer-topstrip-left .contact-hours { margin: 0 15px 0 0; } .footer-topstrip-left .contact-hours i { margin: 0 5px 0 0; } .footer-topstrip-left .contact-phone { margin: 0 15px 0 0; } .footer-topstrip-left .contact-phone i { margin: 0 5px 0 0; } .footer-topstrip-wrap .footer-topstrip-right { width: 50%; float: right; padding: 0; margin: 0; text-align: left; height: 40px; overflow: hidden; } #footer-wrap ul { font-size: 1em; padding: 0em; margin: 0em; } #footer-wrap ul li{ list-style: none; } #footer-wrap .widget { margin: 1em 0 0 0; } .footer-col-wrap { width: 100%; padding: 15px 0 15px 0; margin: 0; overflow: hidden; z-index: 1; } .footer-col-wrap .widget { clear: both; margin: 10px 0 0 0; } .footercol-3-1 { float: left; width: 30%; margin: 0 1% 0 0; padding: 0 2% 0 0; } .footercol-3-2 { float: left; width: 30%; margin: 0 1% 0 1%; padding: 0 1% 0 1%; } .footercol-3-3 { float: left; width: 30%; margin: 0 0 0 1%; padding: 0 0 0 2%; } .footercol-4-1 { float: left; width: 22.5%; margin: 0 1% 0 0; padding: 0 1% 0 0; } .footercol-4-2,.footercol-4-3 { float: left; width: 22.5%; margin: 0 0.5% 0 0.5%; padding: 0 1% 0 1%; } .footercol-4-4 { float: left; width: 22.5%; margin: 0 0 0 1%; padding: 0 0 0 1%; } #copyright { width: 100%; margin: 50px 0 0 0; padding: 0; font-size: 0.875em; overflow: hidden; z-index: 1; } #copyright-wrap { width: 100%; margin: 0; padding: 0; overflow: hidden; z-index: 1; } #copyright ul { list-style: none; font-size: 0.75em; } .copyright_c1 { width: 30.33%; float: left; margin: 0 1% 0 0; padding: 0 1% 0 1%; text-align: left; font-size: 0.75em; } .copyright_c2 { width: 29.33%; float: left; margin: 0 1% 0 1%; padding: 0 1% 0 1%; text-align: center; font-size: 0.75em; } .copyright_c3 { width: 29.33%; float: right; margin: 0 0 0 1%; padding: 0 1% 0 1%; text-align: right; font-size: 0.75em; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> H. Misc Page Styles */ /* 404 Page Styling ------------------------------------------------*/ #error-404 { margin: 0; } /* WordPress template page styling ------------------------------------------------*/ .author-bio-header { float: left; width: 100%; margin: 0 0 20px 0; padding: 0 0 40px 0; } .author-bio-header .avatar { width: 20%; height: auto; float: left; margin: 0; padding: 0; } .author-bio-content-wrap { width: calc(80% - 20px); float: left; margin: 0 0 0 20px; padding: 0; } .author-bio-content-wrap p { font-size: 1.25em; margin: 0; padding: 0; } .author-bio-header a { margin: 10px 0 20px 0; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> I. Feature Styles */ .feature-wrap-full { float: left; width: 100%; margin: 0; padding: 0; } .feature-wrap-full img { padding: 0; margin: 0; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> J. Post Styles */ /* ---------------------------------------------------------------------------------------- * GENERAL POST STYLES * ---------------------------------------------------------------------------------------- */ /* ---------------- WordPress read-more ------- */ .post-content-tf .read-more-wrap { width: 100%; float: left; margin: 10px 0 10px 0; text-align: left; } .read-more-wrap a.read-more { display: inline-block; margin: 10px 0 0 0; padding: 5px 35px 5px 35px; font-size: 1em; position: relative; opacity: 0.999; border-radius: 3px; overflow: hidden; transition: all 0.3s; } .read-more-wrap a.read-more:before { content: ''; width: 100%; top: 0%; height: 0; opacity: 0; position: absolute; left: 0; z-index: -1; transition: all 0.3s; } .read-more-wrap a.read-more:hover { cursor: pointer; } .read-more-wrap a.read-more:hover:before { height: 100%; opacity: 1; } .post-content-sf .read-more-wrap { width: 100%; float: left; margin: 5px 0 5px 0; text-align: right; } .post-content-sf .read-more-wrap a.read-more { margin: 5px 0 0 0; padding: 3px 15px 3px 15px; } .post-content-grid .read-more-wrap { width: 100%; float: left; margin: 5px 0 5px 0; text-align: right; font-size: .875em; } .post-content-grid .read-more-wrap a.read-more { margin: 5px 0 0 0; padding: 3px 15px 3px 15px; } /* --------- post image styling ------------------------- */ img { max-width: 100%; height: auto; margin: 0; padding: 0; } /* image border override */ img.border { max-width: 98%!important; height: auto!important; border-radius: 5px!important; padding: 0!important; margin-top: 0.625em!important; margin-bottom: 0.625em!important; } /* ------- post feature images ------ */ .image-post-feature { width: 100%; float: left; margin: 0; } .wp-post-image { } /* --------- captioned images --------- */ .wp-caption { display: block; max-width: 100%; margin: 0.5em 0 0.5em 0; } /* captioned image border override */ .wp-caption.border { max-width: 98%!important; height: auto!important; border-radius: 5px!important; padding: 0!important; margin-top: 0.625em!important; margin-bottom: 0.625em!important; } .wp-caption img { max-width: 100%; height: auto; padding: 0; margin: 0; } .post-content .wp-caption p { margin: 0; padding: 0; } .wp-caption-text { text-align: center; margin: 0; padding: 0.25em; font-size: 1em; font-style: italic; } /* ---- WordPress alignment classes ---- */ .alignleft,.wp-caption.alignleft { float: left; margin: 0.5em 1em 0 0; padding: 0; } .alignright,.wp-caption.alignright { float: right; margin: 0.5em 0 0 1em; padding: 0; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignnone { margin-right: 1em; } img.wp-smiley { padding: 0px; margin: 0px; border: none; float: none; } /* ---------------------------------------------------------------------------------------- * LAYOUTS * ---------------------------------------------------------------------------------------- */ .canuck-one-col { width: 100%; float: left; margin: 0; padding: 0; } /* --------------------------------- Grid System 2 column ---------------------- */ .canuck-two-col-left { width: 46%; float: left; margin: 0 4% 35px 0; padding: 0; } .canuck-two-col-right { width: 46%; float: left; margin: 0 1% 35px 3%; padding: 0; } .grid-feature-wrap { width: 100%; float: left; margin: 0; padding: 0; } /* --------------------------------- Grid System 3 column ---------------------- */ .canuck-three-col-left { width: 31%; float: left; margin: 0 3.5% 25px 0; padding: 0; } .canuck-three-col-center { width: 31%; float: left; margin: 0 0 25px 0; padding: 0; } .canuck-three-col-right { width: 31%; float: left; margin: 0 0 25px 3.5%; padding: 0; } /* ---------------------------------------------------------------------------------------------- * Post Grid Options * ---------------------------------------------------------------------------------------------- */ .post-wrap-grid { width: 100%; float: left; margin: 15px 0 0 0; padding: 0; } .post-overlay-grid { width: 100%; float: left; margin: 0; padding: 0; } .post-header-grid { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-grid .post-title { width: 100%; float: left; margin: 0 0 15px 0; padding: 0; font-size: 1.25em; line-height: 1.25em; } /* --- post titles --- */ .post-header-grid .post-title a { margin: 5px 0 30px 0; transition: .5s ease; } .post-meta-grid { font-size: .875em; } /* ---------------------------------------------------------------------------------------------- * Two Stamp Options * ---------------------------------------------------------------------------------------------- */ .canuck-two-stamp-left { width: calc(50% - 2px); float: left; margin: 0 2px 4px 0; padding: 0; line-height: 0; } .canuck-two-stamp-right { width: calc(50% - 2px); float: left; margin: 0 0 4px 2px; padding: 0; line-height: 0; } .two-stamp-post .post-wrap-stamp { width: 100%; float: left; position: relative; margin: 0; padding: 0; } .two-stamp-post .stamp-feature { width: 100%; float: left; margin: 0; padding: 0; } .two-stamp-post .post-overlay-stamp { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; height: 100%; z-index: 1000; overflow: hidden; } .two-stamp-post .post-overlay-stamp-wrap { position: relative; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .two-stamp-post .stamp-title { width: calc(100% - 15px); float: left; margin: 0 0 10px 15px; font-weight: bold; font-size: 1em; } .two-stamp-post .stamp-title a { margin: 0; padding: 0; } .two-stamp-post .stamp-title a:hover { transition: .5s ease; } .two-stamp-post .stamp-meta { width: calc(100% - 10px); float: left; } .two-stamp-post .post-overlay-stamp .pmeta-post-comments, .two-stamp-post .post-overlay-stamp .pmeta-timestamp { float: left; display: inline-block; padding: 0; margin: 0 10px 15px 15px; font-size: 0.875em; } .two-stamp-post .post-overlay-stamp .pmeta-post-comments a { transition: .5s ease; } .two-stamp-post .post-overlay-stamp .pmeta-post-comments a:hover { transition: .5s ease; } /* ---------------------------------------------------------------------------------------------- * Three Stamp Options * ---------------------------------------------------------------------------------------------- */ .canuck-three-stamp-left { width: calc(33.33% - 4px); float: left; margin: 0 4px 4px 0; padding: 0; line-height: 0; } .canuck-three-stamp-center { width: calc(33.33% - 4px); float: left; margin: 0 2px 4px 2px; padding: 0; line-height: 0; } .canuck-three-stamp-right { width: calc(33.33% - 4px); float: left; margin: 0 0 4px 4px; padding: 0; line-height: 0; } .three-stamp-post .post-wrap-stamp { width: 100%; float: left; position: relative; margin: 0; padding: 0; } .three-stamp-post .stamp-feature { width: 100%; float: left; margin: 0; padding: 0; } .three-stamp-post .post-overlay-stamp { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0; height: 100%; z-index: 1000; overflow: hidden; } .three-stamp-post .post-overlay-stamp-wrap { position: relative; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .three-stamp-post .stamp-title { width: calc(100% - 15px); float: left; margin: 0 0 10px 15px; font-weight: bold; font-size: 1em; } .three-stamp-post .stamp-title a { margin: 0; padding: 0; } .three-stamp-post .stamp-title a:hover { transition: .5s ease; } .three-stamp-post .stamp-meta { width: calc(100% - 10px); float: left; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments, .three-stamp-post .post-overlay-stamp .pmeta-timestamp { float: left; display: inline-block; padding: 0; margin: 0 10px 15px 15px; font-size: 0.875em; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments a { transition: .5s ease; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments a:hover { transition: .5s ease; } /* ---------------------------------------------------------------------------------------------- * Post Feature Top Options * ---------------------------------------------------------------------------------------------- */ #two-column-content article.top-feature-post, #two-column-content.search article { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #two-column-content article.top-feature-post:first-child, #two-column-content.search article:first-child { margin: 0 0 25px 0; } #three-column-content article.top-feature-post { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #three-column-content article.top-feature-post:first-child { margin: 0 0 25px 0; } .post-wrap-tf { width: 100%; float: left; margin: 0; padding: 0; } .post-overlay-tf { width: 100%; float: left; margin: 0; padding: 0; } .post-header-tf { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-tf .post-title { width: 100%; float: left; margin: 0 0 15px 0; padding: 0; } /* --- post titles --- */ .post-header-tf .post-title a { line-height: 1em; margin: 5px 0 30px 0; transition: .5s ease; } /* ---------------------------------------------------------------------------------------------- * Post Side Feature Options * ---------------------------------------------------------------------------------------------- */ #two-column-content article.side-feature-post { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #two-column-content article.side-feature-post:first-child { margin: 0 0 25px 0; } #three-column-content article.side-feature-post { width: 100%; float: left; margin: 25px 0 25px 0; padding: 0; } #three-column-content article.side-feature-post:first-child { margin: 0 0 25px 0; } #fullwidth article.side-feature-post { width: 100%; float: left; margin: 30px 0 30px 0; padding: 0; } #fullwidth article.side-feature-post:first-child { margin: 0 0 30px 0; } .side-feature-wrap { width: 35%; float: left; margin: 0 5% 0 0; padding: 0; } .post-wrap-sf { width: 60%; float: left; margin: 0; padding: 0; } .post-overlay-sf { width: 100%; float: left; margin: 0; padding: 0; } .post-header-sf { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-sf .post-title { width: 100%; float: left; margin: 0; padding: 0; font-size: 1.5em; line-height: 1.5em; } /* ---------------------------------------------------------------------------------------------- * Post Archive Options * ---------------------------------------------------------------------------------------------- */ .archive article { margin: 40px 0 0 0; } .archive article:first-child { margin: 0; } .post-wrap-archive { width: 100%; float: left; margin: 0; padding: 0; } .post-overlay-archive { width: 100%; float: left; margin: 0; padding: 0; } .post-header-archive { width: 100%; float: left; margin: 0 0 20px 0; padding: 0; } .post-header-archive .post-title { width: 100%; float: left; margin: 0 0 10px 0; padding: 0; } /* --- post titles --- */ .post-header-archive .post-title a { line-height: 1em; margin: 5px 0 30px 0; transition: .5s ease; } .post-header-archive .post-title a:hover { /*color: rgba( 237,22,82,.5);*/ } /* ---------------------------------------------------------------------------------------------- * Post Meta Options for Top Feature and Side Feature layouts * ---------------------------------------------------------------------------------------------- */ .post-meta-tf { width: 100%; float: left; margin: 0; padding: 0; } .post-meta-sf { width: 100%; float: left; clear: both; margin: 10px 0 0 0; padding: 5px 0 5px 0; } .pmeta-timestamp,.pmeta-author,.pmeta-post-comments, .pmeta-categories,.pmeta-taglist,.pmeta-sticky,.pmeta-edit,.pmeta-no-title { display: inline-block; float: left; margin: 0 15px 0 0; padding: 0; line-height: 1.3125em; } .post-meta-sf .pmeta-post-comments{ float: right; margin: 0 5px 0 25px; } .pmeta-author a,.pmeta-post-comments a,.pmeta-categories a, .pmeta-taglist a,.pmeta-edit a,.pmeta-no-title a { transition: .5s ease; } .pmeta-author a:hover,.pmeta-post-comments a:hover,.pmeta-categories a:hover, .pmeta-taglist a:hover,.pmeta-edit a:hover,.pmeta-no-title a:hover { transition: .5s ease; } .pmeta-no-title i { color: red; } .pmeta-timestamp i,.pmeta-author i,.pmeta-post-comments i, .pmeta-categories i,.pmeta-taglist i, .pmeta-sticky i,.pmeta-edit i { margin: 0 5px 0 0; } .pmeta-timestamp i:hover, .pmeta-author i:hover, .pmeta-categories i:hover, .pmeta-taglist i:hover, .pmeta-post-format i:hover { cursor: help; } .pmeta-pagelist,.pmeta-edit,.pmeta-no-title { float: left; padding-right : 10px; } /* post meta icons */ .fa-comment,.fa-time, .fa-user,.fa-bookmark, .fa-copy,.fa-tags, .fa-edit,.fa-align-justify, .fa-sticky-note { font-size: 1em; } /* ------------------- post content ---------------- */ .post-content-tf { width: 100%; float: left; padding: 0; margin: 5px 0 0 0; } .post-content-tf p { padding: 0.75em 0 0 0; margin: 0; } .post-content-tf p:first-child { padding: 0; margin: 0; } /* ------------------- post format content : audio ---------------------------- */ /* ======================================= post format content : audio */ .audio-post-feature { position: relative; width: 100%; margin: 0; padding: 0; } .top-feature-post .audio-post-feature { font-size: 2em; line-height: 1.33em; } .side-feature-post .audio-post-feature { font-size: 1em; } .audio-post-feature img { opacity: 1; display: block; width: 100%; height: auto; } .audio-post-feature-overlay { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 10px; height: 100%; } .audio-feature-meta { width: 90%; float: left; margin: 0 5% 30px 5%; padding: 0; line-height: 1em; } .audio-feature-audio { width: 90%; float: left; margin: 0 5% 0 5%; padding: 0; } /* ----------------- post format content : gallery ---------------------------- */ /* ----------- WP Gallery styles ----------- */ .gallery { width: 100%; float: left; margin: 0; padding: 0; } .gallery figure { float: left; margin: 0; } .gallery-columns-1 figure { padding: 0 0 3px 0; width: 100%; } .gallery-columns-2 figure { padding: 2px 5px 2px 5px; width: calc(50% - 11px); } .gallery-columns-3 figure { padding: 2px 5px 2px 5px; width: calc(33.3333% - 11px); } .gallery-columns-4 figure { padding: 1px 4px 1px 4px; width: calc(25% - 9px); } .gallery-columns-5 figure { padding: 1px 4px 1px 4px; width: calc(20% - 9px); } .gallery-columns-6 figure { padding: 1px 4px 1px 4px; width: calc(16.6666% - 9px); } .gallery-columns-7 figure { padding: 1px 4px 1px 4px; width: calc(14.2857% - 9px); } .gallery-columns-8 figure { padding: 1px 4px 1px 4px; width: calc(12.5% - 9px); } .gallery-columns-9 figure { padding: 1px 4px 1px 4px; width: calc(11.1111% - 9px); } .gallery-columns-10 figure { padding: 1px 4px 1px 4px; width: calc(10% - 9px); } .gallery-icon { width: 100%; float: left; margin: 0; padding: 0; text-align: center; } .gallery-icon a { line-height: 0; text-align: center; } .gallery img { padding: 2px!important; height: auto; max-width: 100%; } .gallery .gallery-caption { display: none; } /* ------------------- post format content : image ---------------------------- */ .post-format-image-feature { width: 100%; position: relative; } .post-format-image-feature img { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; } .post-format-image-overlay { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 1s ease; } .post-format-image-feature:hover img { opacity: 0.3; } .post-format-image-feature:hover .post-format-image-overlay { opacity: 1; } .post-format-image-overlay-content { font-size: 1em; padding: 5%; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; } .post-wrap-grid .image-entry{ width: 100%; float: left; clear: both; padding:0; margin: 0; } .grid-post .post-format-image-overlay-content h6 { font-size: 14px; line-height: 1em; } .grid-post .post-format-image-overlay-content span { font-size: 10px; line-height: 1em; } .side-feature-post .post-format-image-overlay-content h6 { font-size: 14px; line-height: 1em; } .side-feature-post .post-format-image-overlay-content span { font-size: 10px; line-height: 1em; } /* ======================================= post format content : quote feature area */ .quote-post-feature { position: relative; width: 100%; margin: 0; padding: 0; } .top-feature-post .quote-post-feature { font-size: 2em; line-height: 1.33em; } .side-feature-post .quote-post-feature { font-size: 1em; } .quote-post-feature img { opacity: 1; display: block; width: 100%; height: auto; } .quote-post-feature-overlay { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 10px 30px 30px 30px; height: calc(100% - 40px); width: calc(100% - 60px) } .quote-post-feature-quote { display: inline-block; font-family: 'Book Antiqua', serif; float: left; font-size: 1em; line-height: 1em; } .quote-post-feature-quote i { color: rgba(255,255,255,.5); vertical-align: top; margin: -5px 10px 0 0; font-size: 1.5em; } .quote-post-feature-author, .quote-post-feature-author a { display: inline-block; clear: both; float: right; margin: 10px; padding: 0; z-index: 999; } .single .quote-post-feature-quote { font-size: 1.5em; } .single .quote-post-feature-quote i { font-size: 1.5em; margin: -15px 10px 0 0; } .side-feature-wrap .quote-post-feature-overlay { padding: 20px; } .side-feature-wrap .quote-post-feature-quote { font-size: .875em; } .side-feature-wrap .quote-post-feature-quote i { font-size: 1em; margin: -10px 10px 0 0; } /* ------------------- post format content : quote ---------------------------- */ .format-quote .entry-content p { clear: both; float: left; margin: 0; padding: 0; } .format-quote .entry-content blockquote { clear: both; float: left; width: calc(100% - 35px); margin: 10px 0 10px 0; padding: 15px; font-weight: normal; font-size: 1.2em; font-style: italic; } .format-quote .entry-content blockquote p { clear: both; float: left; width: 100%; margin: 0; padding: 0; font-weight: normal; font-size: 1em; font-style: italic; } .format-quote .entry-content blockquote cite,.format-quote .entry-content blockquote p cite { clear: both; float: right; margin-top: 0em; margin-right: 1em; font-style: normal; font-weight: normal; font-size: 1em; } .format-quote .entry-content blockquote a { font-weight: bold; } .format-quote .entry-content blockquote p:before { display: none; } /* ----------------- quote grid post format --------------- */ .post-wrap-grid .quote-entry { font-size: .825em; } .post-wrap-grid .quote-entry blockquote cite, .post-wrap-grid .quote-entry blockquote p cite { clear: both; float: right; margin-top: 0em; margin-right: 1em; font-style: normal; font-weight: normal; font-size: 1em; } /* ----------------- post format content : video ---------------------------- */ .video-post-feature { position: relative; width: 100%; float: left; margin: 0; padding: 0; } .video-post-feature img { opacity: 1; display: block; width: 100%; height: auto; } .video-post-feature-overlay { opacity: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> K. Comment Styles */ /* ------------------- post title comments link ---------------- */ .post-title-comments { float: right; font-size: 0.5em; padding: 0; } .post-title-comments i { cursor:help; } /* -------------------------------------- Page Comments ------ */ .page .comments-title { margin: 2em 0em 0em 0em; } .page .commentlist { font-size: 1em; margin: 15px 0 0 0; } /* -------------------------------------- Post Comments ------ */ .comments-wrap { width: 100%; float: left; margin: 15px 0 15px 0; } .comments-area { width: 100%; float: left; margin: 0; padding: 0; } .comment-list { width: 100%; float: left; font-size: 1em; margin: 15px 0 0 0; padding: 0; } .comment.depth-1 { width: calc(100% - 72px); float: left; margin: 15px 0 0 0; padding: 20px 0 8px 72px; } .comment.depth-2,.comment.depth-3, .comment.depth-4,.comment.depth-5,.comment.depth-6, .comment.depth-7,.comment.depth-8,.comment.depth-9, .comment.depth-10 { width: calc(100% - 20px); float: left; margin: 1.5em 0 0 -52px; padding: 1.5em 0 0 72px; } .comments-title { width: 100%; float: left; margin: 0; } .comment-author .avatar { float: left; margin: 0 14px 0 -72px; padding: 2px; background-color: white; } .comment-author cite { margin: 0; padding: 0; font-style: normal; } .comment-author span { display: none; } .comment-meta { font-size: 0.75em; padding: 0; margin: 0; } .comment-body .reply { width: 100%; float: left; margin: 5px 0 0 0; text-align: left; } .comment-reply-link { display: inline-block; margin: 10px 0 0 0; padding: 0 5px 3px 5px; font-size: 1em; position: relative; opacity: 0.999; border-radius: 3px; overflow: hidden; transition: all 0.3s; } .comment-reply-link:before { content: ''; width: 100%; top: 0%; height: 0; opacity: 0; position: absolute; left: 0; z-index: -1; transition: all 0.3s; } .comment-reply-link:hover { cursor: pointer; } .comment-reply-link:hover:before { height: 100%; opacity: 1; } .comment-list .bypostauthor .comment-author cite:before { content: 'Author: '; font-size: 0.75em; padding: 0.25em 0.5em 0.25em 0.5em; margin: 0 0.5em 0 0; } .commentnav { padding: 15px 2% 15px 2%; font-size: 0.8em; } p.no-comments { width: 100%; float: left; padding: 1em 0 1em 0; margin: 1em 0 0 0; } .comment-awaiting-moderation { margin: 0; font-size: 0.875em; color: red; } .comment-edit-link { font-size: 1em; } .comment-edit-link:before { font-family: FontAwesome; content: '\f044'; padding: 0 5px 0 0; font-size: 1em; } .pingback,.trackback { width: 100%; float: left; padding: 1.5em 0 0.5em 0; margin: 1em 0 0 0; } /* Response Form Styling ------------------------------------------------*/ .comment-respond { width: 100%; float: left; margin: 1em 0 0 0; padding: 0; font-size: 1em; } .page #respond { margin: 0em; padding: 0em; font-size: 1em; } #respond h3 #reply-title { width: 100%; float: left; font-size: 1.25em; padding: 0.5em 2% 0.5em 2%; } #respond .comment-notes { width: 100%; float: left; padding: 0; margin: 0; } #respond p { width:100%; font-size: 1em; } #respond label { clear: both; float: left; margin: 0.5em 0 0 0; } #respond .required{ margin: 0.5em 0 0 0; } .comment-form-author input,.comment-form-email input, .comment-form-url input{ clear: both; width: calc(100% - 10px); float: left; margin: 0.5em 0 0.5em 0; border: none; padding: 5px; } #respond textarea { clear: both; width: calc(100% - 10px); float: left; margin: 0.5em 0 0.5em 0; border: none; padding: 5px; font: inherit; font-size: 1em; } input#author, input#email, input#url { font-size: 1em; } .comment-form .form-submit input#submit.submit { display: inline-block; float: left; clear: both; margin: 10px 0 0 0; padding: 0 5px 3px 5px; font-size: 1em; position: relative; opacity: 0.999; border: none; border-radius: 3px; overflow: hidden; transition: all 0.3s; } .comment-form .form-submit input#submit.submit:hover { cursor: pointer; transition: .5s; } .comment-form .form-submit input#submit.submit:hover:before { height: 100%; opacity: 1; } p.form-allowed-tags { clear: both; width: 100%; float: left; margin: 1em 0 0 0; padding: 0; font: inherit; } p.form-allowed-tags code { font: inherit; } input#submit { margin-bottom: 20px; } #respond .error { color: red; float: left; line-height: 1em; font-size: 1em; margin: 10px 0 0 0; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> L. Misc Styles */ /* ------------------ Error Styles --------------------- */ .error { width: calc(100% - 40px); margin: 0; padding: 20px; float: left; color: red; font-size: 1.3em; } /* ------------- Author Widget -------------------- */ .canuck-author-widget { float: left; width: 100%; margin: 10px 0 10px 0; } .canuck-author-widget .author-widget-avatar img{ float: left; width: 50px; border: none; box-shadow: none; margin: 0 10px 0 0; padding: 0; } .canuck-author-widget .author-widget-content-wrap { width: calc(100% - 60px); display: block; float: left; margin: 0; padding: 0; } .canuck-author-widget .author-widget-name { font-size: 1em; line-height: 1em; font-weight: bold; margin: 0 0 10px 0 } .canuck-author-widget .author-widget-bio { font-size: 1em; line-height: 1.0em; } .canuck-author-widget .author-widget-website { } /* WordPress Generated Class */ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* ---------- WordPress Recent Posts styles -------------- */ .widget_recent_entries ul, .canuck_recent_posts ul { margin:0; padding: 0; font-size: 0.875em; } .widget_recent_entries li, .canuck_recent_posts li { width: 100%; float: left; margin: 5px 0 5px 0; list-style: none; padding: 5px 0 10px 0; } .canuck_recent_posts li img { width: 25%; float: left; margin: 0; padding: 0; } .recent-post-wrap { width: calc(75% - 12px); float: left; margin: 0 0 10px 10px; padding: 0; } .canuck_recent_posts li a { width: 100%; float: left; margin: 0 0 10px 0; padding: 0; transition: .5s; } .widget_recent_entries li a { transition: .5s; } .widget_recent_entries li a:hover, .canuck_recent_posts li a:hover { transition: .5s; } .canuck_recent_posts li span { width: 100%; float: left; margin: 0 0 10px 0; padding: 0; font-size: .875em; } .widget_recent_entries li:last-child, .canuck_recent_posts li:last-child { border-bottom: none; margin: 5px 0 0 0; } /* ----------- WordPress Calender Widget Style ----------- */ #wp-calendar { border-collapse: separate; border-spacing: 3px; } #wp-calendar{ float: left; font-size: 0.875em;} #wp-calendar caption { font-size: 1em; font-weight: bold; padding-bottom: 0.5em; } #wp-calendar thead th { border: none; margin: 0; width: 5%; padding: 0; text-align: center; } #wp-calendar tbody { border: none; font-size: 0.875em; } #wp-calendar tbody td { border: none; text-align: center; width: 5%; padding: 0; } #wp-calendar tbody td a {font-weight: bold;} #wp-calendar tfoot {background: none;} #wp-calendar tfoot tr {border: none;} #wp-calendar tfoot td {border: none;} #wp-calendar tr #prev a,table#wp-calendar tr #next a { font-size: 0.917em; /* 11px / 12px */ font-weight: bold; padding-top: 0px; padding-bottom: 0px; } /* calendar widget in the Footer */ #footer-wrap #wp-calendar tbody td a {/*color: #ffffff;*/} #footer-wrap #wp-calendar tbody td a:hover {/*color: #c1c1c1;*/} /* ------------- tag widget styles -------------------- */ .tagcloud a { display: inline-block; font-size: 0.75em!important; padding: 2px 5px 2px 5px; margin: 2px 2px 2px 0; border-radius: 3px; } /* -------------------comment styles --------------- */ .commentnav { width: 100%; float: left; clear: both; margin: 0; } .commentnav .left { display: inline-block; float: left; } .commentnav .right { display: inline-block; float: right; } /* --------------- the_posts_pagination() styles ------------ */ .postpagenav { width: 100%; float: left; clear: both; margin: 20px 0 20px 0; padding: 0; line-height: 1em; } #fullwidth .postpagenav { margin: 40px 0 30px 0; } .nav-links .page-numbers { padding: 0 5px 0 5px; } .nav-links .page-numbers.dots,.nav-links .page-numbers.dots:hover { font-weight: bold; border: none; } /* -------------- search form ------------------*/ #searchform { max-width: 200px; margin: 0; } #searchform .keyword{ width: 70%; border: none; padding: 0.25em; } .fa-search { background: none; border: none; font-size: 1em; margin: 0; padding: 0; } .fa-search:before { content: "\f002"; } .fa-search:hover { cursor: pointer; } /* ------- Single post pagenavi ------- */ .postpagenav .left { width: 40%; float: left; padding: 0; margin: 0; } .postpagenav .right { width: 40%; float: right; padding: 0; margin: 0; text-align: right; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> M. Color box styles */ /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);} #cboxWrapper {max-width:none;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:url(js/colorbox/images/overlay.png) repeat 0 0; opacity: 0.9; /*filter: alpha(opacity = 90);ka removed*/} #colorbox{outline:0;} #cboxTopLeft{width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -101px 0;} #cboxTopRight{width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -130px 0;} #cboxBottomLeft{width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -101px -29px;} #cboxBottomRight{width:21px; height:21px; background:url(js/colorbox/images/controls.png) no-repeat -130px -29px;} #cboxMiddleLeft{width:21px; background:url(js/colorbox/images/controls.png) left top repeat-y;} #cboxMiddleRight{width:21px; background:url(js/colorbox/images/controls.png) right top repeat-y;} #cboxTopCenter{height:21px; background:url(js/colorbox/images/border.png) 0 0 repeat-x;} #cboxBottomCenter{height:21px; background:url(js/colorbox/images/border.png) 0 -29px repeat-x;} #cboxContent{background:#fff; overflow:hidden;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{margin-bottom:28px;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxLoadingOverlay{background:url(js/colorbox/images/loading_background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(js/colorbox/images/loading.gif) no-repeat center center;} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0; background:url(js/colorbox/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious:hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(js/colorbox/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #cboxNext:hover{background-position:-50px -25px;} #cboxClose{position:absolute; bottom:0; right:0; background:url(js/colorbox/images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} #cboxClose:hover{background-position:-25px -25px;} /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> N. Flex Slider Styles Styles */ /* * jQuery FlexSlider v2.6.3 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* ==================================================================================================================== * RESETS * ====================================================================================================================*/ .flex-container a:hover,.flex-slider a:hover { outline: none; } .slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-pauseplay span { text-transform: capitalize; } /* ==================================================================================================================== * BASE STYLES * ====================================================================================================================*/ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { width: 100%; display: block; margin: 0 auto 0 auto; } .flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .flexslider .slides { display: block; } * html .flexslider .slides { height: 1%; } .no-js .flexslider .slides > li:first-child { display: block; } /* ==================================================================================================================== * DEFAULT THEME * ====================================================================================================================*/ .flexslider { margin: 0;/* ka was 0 0 60 */ background-color: rgba(255,255,255,1); position: relative; } .flexslider .slides img { height: auto; -moz-user-select: none; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider.widget .slides li { position: relative; } .flexslider.widget.feature.bottom .flex-caption, .flexslider.widget.carousel.bottom .flex-caption, #flexslider-feature.flexslider.bottom .flex-caption { position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 1.5em; background-color: rgba(0,0,0,0.5); color: #efefef; z-index: 1; font-size: 1em; padding: 0.5em; text-align: center; } .flexslider.widget.button .flex-caption, .flexslider.widget.feature.top .flex-caption, #flexslider-feature.flexslider.top .flex-caption, #flexslider-feature-button .flex-caption { position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 1.5em; background-color: rgba(0,0,0,.5); color: #efefef; z-index: 1; font-size: 1em; padding: 0.5em; text-align: center; } .carousel li { margin-right: 5px; } .flex-direction-nav li { list-style: none;}/* ka added */ .flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0, 0, 0, 0.8); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flex-direction-nav a:before { font-family: "Fontawesome"; font-size: 40px; display: inline-block; content: '\f104'; color: rgba(255, 255, 255, 0.8); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); font-weight: 700;/* ka add */ } #flexslider-carousel .flex-direction-nav a, .flexslider.carousel .flex-direction-nav a { top: 50%; width: 20px; height: 20px; margin: -15px 0 0 0; } #flexslider-carousel .flex-direction-nav a:before, .flexslider.carousel .flex-direction-nav a:before { font-size: 20px; } .flex-direction-nav a.flex-next:before { content: '\f105'; } .flex-direction-nav .flex-prev { left: 10px; } .flex-direction-nav .flex-next { right: 10px; text-align: right; } .flexslider:hover .flex-direction-nav .flex-prev { opacity: 0.7; } .flexslider:hover .flex-direction-nav .flex-prev:hover { opacity: 1; } .flexslider:hover .flex-direction-nav .flex-next { opacity: 0.7; } .flexslider:hover .flex-direction-nav .flex-next:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; cursor: default; z-index: -1; } .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "fontawesome"; font-size: 20px; display: inline-block; content: '\f04c'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { font-family: "fontawesome"; content: '\f04b'; } .flex-control-nav { position: absolute; bottom: 0px;/* ka was -40px */ right: 10px; text-align: center;/* ka was center */ z-index: 999; } .flex-control-nav li { margin: 0 6px 0 6px; display: inline-block; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.1); cursor: pointer; text-indent: -9999px; box-shadow: inset 0 0 3px rgba(255, 255, 255, .5); border-radius: 20px; } .flex-control-paging li a:hover { background: #333; background: rgba(255, 255, 255, 5); } .flex-control-paging li a.flex-active { background: #000; background: rgba(255, 255, 255, .3); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -moz-user-select: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } /* custom styles */ .flexslider.carousel.top .slides>li, #flexslider-carousel.flexslider.top .slides>li { margin-bottom: 5px; } .flexslider.carousel.bottom .slides>li, #flexslider-carousel.flexslider.bottom .slides>li { margin-top: 5px; } .flexslider.carousel img:hover, #flexslider-carousel img:hover { opacity: 0.5; cursor: pointer; } .flexslider.widget.carousel .flex-direction-nav li, .flexslider.widget .flex-direction-nav li { padding: 0; } .flexslider.carousel .flex-active-slide, #flexslider-carousel .flex-active-slide { opacity: 0.5; } .canuck-two-col-1 .flex-direction-nav a:before, .canuck-two-col-2 .flex-direction-nav a:before, .canuck-three-col-1 .flex-direction-nav a:before, .canuck-three-col-2 .flex-direction-nav a:before, .canuck-three-col-3 .flex-direction-nav a:before { font-size: 20px; } .canuck-two-col-1 .flex-direction-nav a, .canuck-two-col-2 .flex-direction-nav a, .canuck-three-col-1 .flex-direction-nav a, .canuck-three-col-2 .flex-direction-nav a, .canuck-three-col-3 .flex-direction-nav a { width: 20px; height: 20px; margin: -10px 0 0; position: absolute; top: 50%; } .flexslider.widget a i.pinit { color: rgba(255,255,255,0); position: absolute; top: 20px; left: 10px; line-height: 0; } .flexslider.widget:hover a i.pinit { color: rgba(255,255,255,1); position: absolute; top: 50px; left: 20px; line-height: 0; } .flexslider.widget a:hover i.pinit { cursor: pointer; color: rgba(255,255,255,.7); } /* mobile */ @media screen and (max-width: 860px) { .flex-direction-nav a:before { font-size: 20px; } .flex-direction-nav a { width: 20px; height: 20px; margin: -10px 0 0; position: absolute; top: 50%; } } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> P Masonry */ .masonry-gallery * { box-sizing: border-box; } .masonry-gallery { background: #fffff; width: 100%; float: left; margin: 30px 0 20px 0; padding: 0; } /* clear fix */ .masonry-gallery:after { content: ''; display: block; clear: both; } .masonry-grid-sizer, .masonry-grid-item { width: calc(33.333% - 5px); margin: 0 2.5px 0 2.5px; padding: 0; } .masonry-grid-item float: left; position: relative; } .masonry-grid-item img { display: block; max-width: 100%; } .masonry-grid-item .masonry-image-overlay { position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; width: 100%; /*height: 100%;*/ height: calc(100% - 5px); margin: 0 0 5px 0; opacity: 0; transition: .5s ease; } .masonry-grid-item:hover .masonry-image-overlay { opacity: 1.0; } .masonry-grid-item .masonry-image-overlay .masonry-overlay-wrap { position: relative; overflow: hidden; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; } .masonry-grid-item:hover .masonry-image-overlay .masonry-overlay-wrap { transition-property: color; transition: .5s; transition-timing-function: linear; transition-delay: .5s; } .masonry-grid-item .masonry-image-overlay .masonry-text { width: calc(100% - 5px); float: left; clear: both; margin: 0; padding: 0; text-align: center; } .masonry-grid-item .masonry-image-overlay .masonry-text a { margin: 0 10px 0 0; } .masonry-grid-item .masonry-image-overlay .masonry-text a: hover { cursor: pointer; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> P Other Plugin Styles */ /* ========================================================== Woo Commerce */ .woocommerce-MyAccount-navigation li { list-style: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border: none; background: #E3E3E3; padding: 5px 5px 5px 5px; } /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Z. Media Styles */ /* ========================================================================== 900 px */ @media only screen and (max-width:900px){ .sticky-spacer { margin-top: 140px; } body.sticky .sticky-spacer { margin-top: 40px; } /* --------------------------------------------------------- layouts */ button.sidebar-a-toggle.toggle-on, button.sidebar-b-toggle.toggle-on { display: block; } .toggle-sb-a { display: none; } .toggle-sb-b { display: none; } .toggle-sb-a.toggle-on { display: block; z-index: 2000; animation: sidebarShowLeft 1s; } .toggle-sb-b.toggle-on { display: block; z-index: 2000; animation: sidebarShowRight .5s ease-in-out; } /* two column layouts */ #two-column-content { float: left; width: 100%; margin: 0; padding: 0; } #two-column-sidebar-left { position: absolute; left: 0; width: 80%; margin: 0; padding: 10px; } #two-column-sidebar-right { position: absolute; right:0; width: calc(80% - 20px); margin: 0 0 0 20%; padding: 10px; } /* three column layouts */ #three-column-content { float: left; width: 100%; padding: 0; margin: 0; } #three-column-sidebar-left { position: absolute; float: left; width: 80%; margin: 0; padding: 10px; } #three-column-sidebar-right { position: absolute; float: right; width: calc(80% - 20px); margin: 0 0 0 20%; padding: 10px; } /* --------------------------------------------------------- header */ .header-wide-no-feature .header-logo-menu-strip, .header-wide-slider .header-logo-menu-strip, .header-wide-image .header-logo-menu-strip { width: 100%; float: left; margin: 0; padding: 0; height: auto; } .header-wide-no-feature .header-logo-menu-strip .header-image-left, .header-wide-slider .header-logo-menu-strip .header-image-left, .header-wide-image .header-logo-menu-strip .header-image-left { height: inherit; width: 50%; float: left; text-align: left; line-height: inherit; margin: 0; padding: 0; } .header-wide-no-feature .header-logo-menu-strip .header-image-left a, .header-wide-slider .header-logo-menu-strip .header-image-left a { line-height: inherit; width: 100%; float: left; margin:0; padding: 0; } .header-wide-image .header-logo-menu-wide .header-logo-menu-strip .header-image-left a { line-height: inherit; width: 100%; float: left; margin: 0; padding: 0; background-size: 50%; background-position: center center; background-repeat: no-repeat; } .header-logo-menu-strip .header-image-left img { max-width: 100%; height: auto; margin: 20px 0 0 20px; } .header-logo-menu-strip .nav-container { width: 100%; clear: both; float: left; margin: 0; padding: 0; text-align: center; } /* ------------------------------------------------------ sticky header */ body.sticky .header-logo-menu-strip .nav-container { margin: 0; } body.sticky header.header-wide-no-feature div.header-logo-menu-strip, body.sticky header.header-wide-slider div.header-logo-menu-strip, body.sticky header.header-wide-image div.header-logo-menu-strip { width: 100%; float: left; margin: 0; padding: 0; height: inherit; text-align: center; } body.sticky header.header-wide-no-feature div.header-image-left, body.sticky header.header-wide-slider div.header-image-left, body.sticky header.header-wide-image div.header-image-left { display: none; } /* end sticky header */ button.menu-1-toggle { display: inline-block; border: none; margin: 35px 20px 0 0; padding: 30px 0 20px 0; float: right; } /* --------------------------------------------------- sticky nav */ body.sticky .canuck-show-search-trigger{ display: inline-block; float: right; clear: none; width: 25px; border: none; margin: 0; padding: 10px 0 10px 0; } body.sticky .canuck-show-search-trigger i{ font-size: 16px; margin: 0; padding: 0; } body.sticky button.menu-1-toggle::before { padding: 0; } body.sticky button.menu-1-toggle { float: none; margin: 0; padding: 10px 0 10px 0; } body.sticky .canuck-search.search-on { width: 100%; text-align: center; } .header-image-overlay { top: 170px; left: 12.5%; width: 75%; height: 20%; } /* -------------------------------------------------------- Navigation */ .canuck-search { margin: 0; } .main-nav { display: none; } .main-nav.toggle-on { display: block; } .dropdown-toggle { display: block; } #main-menu-right .sub-menu { display: none; } #main-menu-right .toggle-ul-on { display: block!important; } /* -------- Mobile Primary Menu --------- */ #main-menu-right { width: 100%; float: left; margin: 0; padding: 0; } #main-menu-right ul { display: block; width: 100%; float: left; margin: 0; text-align: left; border-top: none; } #main-menu-right ul li { display: block; width: 100%; float: left; margin: 0; padding: 5px 0 5px 0; text-align: center; font-size: 1em; line-height: 1em; } #main-menu-right ul li a { width: calc(95% - 20px); float: left; margin: 0; padding: 5px 10px 5px 10px; text-align: left; } #main-menu-right ul li.menu-item-has-children a:after, #main-menu-right ul ul li.menu-item-has-children a:before { font-family: inherit; content: ""; margin: 0; font-size: 8px; vertical-align: middle; } #main-menu-right ul li.menu-item-has-children button { width: 5%; float: left; margin: 0; padding: 5px 0 5px 0; background-color: rgba(255,255,255,0); border: none; text-align: center; } #main-menu-right ul li.menu-item-has-children button:hover { cursor: pointer; } #main-menu-right ul li.menu-item-has-children button:after { display: block; font-family: FontAwesome; content: "\f078"; margin: 0; padding: 0; font-size: 1.25em; text-align: center; } #main-menu-right ul li.menu-item-has-children button.toggle-button-on:after { content: "\f077"; } #main-menu-right ul li > ul { display: none; width: 100%; float: left; padding: 0; margin: 0; } #main-menu-right ul li:hover > ul { width: 100%; position: inherit; float: left; margin: 0; padding: 0; text-align: left; animation: none; display: none; } #main-menu-right ul ul li { width: 100%; float: left; clear: both; text-align: center; margin: 0; padding: 0; } #main-menu-right ul ul li > a { width: calc(95% - 30px); float: left; margin: 0; padding: 5px 10px 5px 20px; } #main-menu-right ul ul li.menu-item-has-children > a:after { display: none; } #main-menu-right ul ul li.menu-item-has-children button { width: 5%; float: left; margin: 0; padding: 5px 0 5px 0; border: none; text-align: center; } #main-menu-right ul ul li.menu-item-has-children button:after { font-family: FontAwesome; content: "\f078"; margin: 0; padding: 0; font-size: 1.25em; vertical-align: middle; text-align: center; } #main-menu-right ul ul li.menu-item-has-children button.toggle-button-on:after { content: "\f077"; } #main-menu-right ul ul li > ul { display: none; width: 100%; float: left; padding: 0; margin: 0; } #main-menu-right ul ul li:hover > ul { width: 100%; position: inherit; float: left; margin: 0; padding: 0; text-align: left; animation: none; display: none; box-shadow: none; } #main-menu-right ul ul ul li { width: 100%; float: left; clear: both; text-align: center; margin: 0; padding: 0; } #main-menu-right ul ul ul li > a { width: calc(95% - 40px); float: left; margin: 0; padding: 5px 10px 5px 30px; } #main-menu-right ul ul ul li.menu-item-has-children button { width: 5%; float: left; margin: 0; padding: 5px 0 5px 0; border: none; text-align: center; } #main-menu-right ul ul ul li.menu-item-has-children button:after { font-family: FontAwesome; content: "\f078"; margin: 0; padding: 0; font-size: 1.25em; vertical-align: middle; text-align: center; } #main-menu-right ul ul ul li.menu-item-has-children button.toggle-button-on:after { content: "\f077"; } #main-menu-right ul ul ul ul li { width: 100%; float: left; clear: both; text-align: center; margin: 0; padding: 0; } #main-menu-right ul ul ul ul li > a { width: calc(95% - 50px); float: left; margin: 0; padding: 5px 10px 5px 40px; } #page-title-wide .page-title-wrap h1.center-title { width: 98%; float: left; font-size: 1.5em; line-height: 1em; padding: 0.75em 0 0.75em 0; margin: 0; } /* ------------------------------------------------------ blog */ /* ----- Post Stamp 3 column -*/ .three-stamp-post .stamp-title { font-size: .875em; } .three-stamp-post .post-overlay-stamp .pmeta-post-comments, .three-stamp-post .post-overlay-stamp .pmeta-timestamp { font-size: 0.75em; } /* -------------------------------------------------------- footer */ #footer-wrap { font-size: .875em; } #footer-wrap h3 { font-size: 1em; line-height: 1.25em; padding: 0em; margin: 0em; } #footer-wrap ul { font-size: .875em; padding: 0em; margin: 0em; } #footer-wrap ul li{list-style: none;} #footer-wrap .widget { margin: 1em 0 0 0; } #footer-wrap { max-width: 1100px; margin: 0 auto 0 auto; padding: 0 30px 0 30px; overflow: hidden; z-index: 1; } .footer-col-wrap { width: 100%; padding: 15px 0 15px 0; margin: 0; overflow: hidden; z-index: 1; } .footer-col-wrap .widget { clear: both; margin: 10px 0 0 0; } .footercol-3-1 { float: left; width: 30%; margin: 0 1% 0 0; padding: 0 2% 0 0; } .footercol-3-2 { float: left; width: 30%; margin: 0 1% 0 1%; padding: 0 1% 0 1%; } .footercol-3-3 { float: left; width: 30%; margin: 0 0 0 1%; padding: 0 0 0 2%; } .footercol-4-1 { float: left; width: 22.5%; margin: 0 1% 0 0; padding: 0 1% 0 0; } .footercol-4-2,.footercol-4-3 { float: left; width: 22.5%; margin: 0 0.5% 0 0.5%; padding: 0 1% 0 1%; } .footercol-4-4 { float: left; width: 22.5%; margin: 0 0 0 1%; padding: 0 0 0 1%; } #copyright { width: 100%; margin-bottom: 1em; font-size: 0.875em; overflow: hidden; z-index: 1; } #copyright-wrap { max-width: 1000px; margin: 0 auto 0 auto; padding: 8px 30px 8px 30px; /* float fix */ overflow: hidden; z-index: 1; } #copyright ul { list-style: none; font-size: 0.75em; } .copyright_c1 { width: 30.33%; float: left; margin: 0 1% 0 0; padding: 0 1% 0 1%; text-align: left; font-size: 0.75em; } .copyright_c2 { width: 29.33%; float: left; margin: 0 1% 0 1%; padding: 0 1% 0 1%; text-align: center; font-size: 0.75em; } .copyright_c3 { width: 29.33%; float: right; margin: 0 0 0 1%; padding: 0 1% 0 1%; text-align: right; font-size: 0.75em; } } /* ======================================================================================================== 700 */ @media only screen and (max-width:700px){ /* ------------------------------------------------- Header top strip --------------- */ .header-topstrip-wrap { padding: 0 10px 0 10px; } .header-topstrip-wrap .header-topstrip-left { font-size: 12px; } .header-image-overlay { top: 170px; left: 12.5%; width: 75%; height: 15%; } .header-image-overlay h1 { font-size: 1.5em; } .header-image-overlay span { font-size: 1em; } #page-title-wide .page-title-wrap h1.center-title { font-size: 1.25em; } /* --------- footers ---------------- */ #footer-wrap { width: calc(100% - 60px); padding: 0 30px 0 30px; margin: 0; } .footercol-3-1,.footercol-3-2,.footercol-3-3 { float: left; width: 100%; padding: 0; margin: 1em 0 0 0; } .footercol-4-1,.footercol-4-2,.footercol-4-3,.footercol-4-4 { float: left; width: 100%; padding: 0; margin: 1em 0 0 0; } /* ------------------------------------------------ Post Styles -*/ .side-feature-wrap { width: 100%; float: left; margin: 0; padding: 0; } .post-wrap-sf { width: 100%; float: left; margin: 20px 0 0 0; padding: 0; } /* --------------------------------- Grid System 2 column ---------------------- */ #two-column-content article.grid-post { width: 100%; float: left; margin: 50px 0 0 0; padding: 0; } #two-column-content article.grid-post:first-child { margin: 0; } .canuck-two-col-left { width: 100%; float: left; margin: 0; padding: 0; } .canuck-two-col-right { width: 100%; float: left; margin: 0; padding: 0; } /* --------------------------------- Grid System 3 column ---------------------- */ #fullwidth article { width: 100%; float: left; margin: 50px 0 0 0; padding: 0; } #fullwidth article:first-child { margin: 0; } .canuck-three-col-left { width: 100%; float: left; margin: 0; padding: 0; } .canuck-three-col-center { width: 100%; float: left; margin: 0; padding: 0; } .canuck-three-col-right { width: 100%; float: left; margin: 0; padding: 0; } /* ------------------------------------------------------------ Comments -*/ .comment.depth-2,.comment.depth-3, .comment.depth-4,.comment.depth-5,.comment.depth-6, .comment.depth-7,.comment.depth-8,.comment.depth-9, .comment.depth-10 { width: calc(100% - 5px); float: left; margin: 1.5em 0 0 5px; padding: 1.5em 0 0 0; } /* ------------------- slider with button nav ----------------- */ .flex-control-nav li { margin: 0 4px 0 4px; } .flex-control-paging li a { width: 7px; height: 7px; box-shadow: inset 0 0 2px rgba(255, 255, 255, .5); border-radius: 13px; } } /* ===================================================================== 480 */ @media only screen and (max-width:480px){ /* ------------------------------------------------- Header top strip --------------- */ .header-topstrip-wrap .header-topstrip-left { font-size: 10px; } .header-topstrip-left .contact-hours { margin: 0 5px 0 0; } .header-topstrip-left .contact-hours i { display: none; } .header-topstrip-left .contact-phone { margin: 0 5px 0 0; } .header-topstrip-left .contact-phone i { display: none; } /* ------------ General ------------------ */ body { font-size: 75%; /* all theme fonts are scaled from this size - 100% is 16px */ line-height: 1.3125em; } .header-image-overlay { top: 150px; left: 5%; width: 90%; height: 10%; } h1,h2,h3,h4,h5,h6 {line-height: 1.3125em;} h1 {font-size: 1.6em;} h2 {font-size: 1.5em;} h3 {font-size: 1.4em;} h4 {font-size: 1.2em;} h5 {font-size: 1.00em;} h6 {font-size: 0.8571em;} /* ---------- portfolio layouts ----------------- */ #fullwidth .thin-border{display:none;} .portfolio-two-column{width: 100%;} .portfolio-three-column {width: 100%;} .portfolio-four-column {width: 100%;} /* --------------- masonary template ----------------- */ .masonry-grid-sizer, .masonry-grid-item { width: calc(50% - 5px); } /* ------- feature elements ------ */ .slider-wrapper .nivo-thumbs-enabled a.nivo-control img {max-width: 20px;} .slider-wrapper .nivo-controlNav img {margin-right: 0px;} .half-slider-wrapper .nivo-thumbs-enabled a.nivo-control img {max-width: 24px;} .center-slider-wrapper .nivo-thumbs-enabled a.nivo-control img {max-width: 24px;} /* ------- copywright elements ------ */ .copyright_c1,.copyright_c2,.copyright_c3 { clear:both; float:left; width:90%; margin: 0.25em 5% 0.25em 5%; padding: 0em; text-align: left; } /* --------- Color Box -------------- */ #cboxTitle { visibility: hidden; } .post-wrap-standard-content, .post-wrap-audio-content, .post-wrap-gallery-content, .post-wrap-image-content, .post-wrap-quote-content, .post-wrap-video-content { width: 100%; float: left; overflow: visible; } .post-header { width: 100%; float: left; overflow: visible; } }