/* Theme Name: bootcut Theme URI: Author: Createscape Design Studio Author URI: http://www.createscape.ca Description: bootcut is a responsive WordPress theme built on Bootstrap 3 and Underscores/Upplex Frameworks. This theme includes a custom header image, custom logo, widget areas, sidebar, search bar, 3 menu areas, drop down menus, and custom background image. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bootcut Tags: custom-header, custom-menu, responsive-layout, right-sidebar, two-columns, blue, black, gray, custom-background, translation-ready */ /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ /* 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: 1.4rem; 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 */ } /*-------------------------------------------------------------- 7.0 Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; } /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /*-------------------------------------------------------------- 11.0 Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .paging-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- 12.0 Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } .gallery-item { margin: 10px inherit; } /*-------------------------------------------------------------- 12.1 Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } /*-------------------------------------------------------------- 12.2 Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } footer { /*calendar styles*/ } footer #wp-calendar { width: 80%; font-size: 12px; font-weight: 300; border-collapse: separate; border-spacing: 6px; margin-left: -4px; } footer #wp-calendar caption { display: none; } footer #wp-calendar tbody td { margin-bottom: 10px; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; padding: 7px; background: #1C1B1B; } footer #wp-calendar tbody td:hover { border-color: #e2e2e2; } footer #wp-calendar tbody td.pad { border: 0; } footer #wp-calendar tbody td#today { color: #942e2e; border-color: #942e2e; } footer #wp-calendar tfoot td#prev a, footer #wp-calendar tfoot td#next a { color: #888; font-size: 12px; font-weight: 400; position: relative; text-transform: uppercase; bottom: -9px; margin-bottom: 1px; } footer #wp-calendar tfoot td#prev { text-align: left; } footer #wp-calendar tfoot td#next { text-align: right; } footer #wp-calendar thead th { font-size: 13px; font-weight: 400; color: #888; text-align: center; padding-bottom: 10px; } footer #wp-calendar tbody td a, footer #wp-calendar tfoot td#prev a:hover, footer #wp-calendar tfoot td#next a:hover { color: #942e2e; } #secondary { float: left; } #secondary { /*calendar styles*/ } #secondary .widget_search.widget { margin-top: 20px; } #secondary #wp-calendar { width: 80%; font-size: 12px; font-weight: 300; border-collapse: separate; border-spacing: 6px; margin-left: -4px; } #secondary #wp-calendar caption { display: none; } #secondary #wp-calendar tbody td { margin-bottom: 10px; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; padding: 7px; background: #fff; } #secondary #wp-calendar tbody td:hover { border-color: #e2e2e2; } #secondary #wp-calendar tbody td.pad { border: 0; } #secondary #wp-calendar tbody td#today { color: #fff; background-color: #ccc; } #secondary #wp-calendar tfoot td#prev a, #secondary #wp-calendar tfoot td#next a { color: #888; font-size: 12px; font-weight: 400; position: relative; text-transform: uppercase; bottom: -9px; margin-bottom: 1px; } #secondary #wp-calendar tfoot td#prev { text-align: left; } #secondary #wp-calendar tfoot td#next { text-align: right; } #secondary #wp-calendar thead th { font-size: 13px; font-weight: 400; color: #888; text-align: center; padding-bottom: 10px; } #secondary #wp-calendar tbody td a, #secondary #wp-calendar tfoot td#prev a:hover, #secondary #wp-calendar tfoot td#next a:hover { color: #942e2e; } /* bootcut Styles */ body { background: #e6e1eb url(images/texture.jpg); font-family: 'PT Sans', sans-serif; font-size: 16px; color: #0a476b; } body p { font-size: 17px; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; height: auto; } /*Variables*/ .box-shadow { box-shadow: 0px 3px 18px #aaa; } .box-shadow-none { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5 { font-family: 'Dancing Script', cursive; } h1 { font-size: 35px; } h2 { font-size: 31px; } h3 { font-size: 28px; } h4 { font-size: 26px; } h5 { font-size: 22px; } h6 { font-size: 20px; } a { color: #942e2e; } a:hover { text-decoration: none; } /*Layout*/ #top-bar { width: 100%; background: #2c2b2b; text-align: right; } #top-bar ul { margin-bottom: 0; } form#searchbox { margin: 0 10px 0 0; } form#searchbox p { position: relative; margin: 0; max-width: 200px; color: #314049; } label { width: 100%; float: left; } input#search { border: 1px solid #fff; border-radius: 6px; font-size: 14px; font-style: italic; padding: 3px; width: 200px; margin: 5px 0; } input#searchbutton { position: absolute; right: 8px; top: 11px; } #account ul { padding-left: 0; } #account ul li { display: inline-block; color: #fff; } #account ul li a { color: #fff; text-decoration: none; padding: 10px; display: block; } #account ul li a#cart { background-image: url(images/cart.png); background-repeat: no-repeat; background-position: right; padding-right: 30px; } #account ul li a:hover, #account ul li a:active { background-color: #0a476b; } h1#logo a { font-family: 'Dancing Script', cursive; font-size: 60px; font-weight: bold; text-shadow: 2px 2px #fff; color: #0a476b; } h1#logo a:hover { text-decoration: none; } header#page-header { margin: 0 0 15px 0; } #page-header h2 { color: #942e2e; font-size: 30px; } header#page-header .widget { margin: 25px 0; text-align: right; } header#page-header .widget h2 { font-weight: bold; color: #942e2e; margin: 10px 0 0 0; } header#page-header .widget h3, header#page-header .widget h4, header#page-header .widget h5, header#page-header .widget h6 { font-family: 'pt sans', sans-serif; margin: 7px 0; } /*navigation*/ nav a { -o-transition: .15s; -ms-transition: .15s; -moz-transition: .15s; -webkit-transition: .15s; /* ...and now for the proper property */ transition: .15s; } .navbar { float: left; background: none; border: none; min-height: 30px; margin-bottom: 0; margin-top: 10px; } .navbar .nav { text-align: right; background: none; border-radius: 8px; padding: 0 7px; } .navbar .nav li { list-style: none; } .navbar .nav li a { text-decoration: none; font-size: 18px; margin: 0 5px; padding: 8px 15px 8px 15px; float: left; color: #385b70; border-radius: 6px; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: #385b70; color: #fff; border-radius: 6px; box-shadow: 0px 3px 8px #aaa; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background: #385b70; color: #fff; border-radius: 6px; } ul.dropdown-menu { border-radius: 6px; background: #385b70; border: none; left: 5px; top: 33px; width: 250px; } .navbar-nav > li > .dropdown-menu { border-top-right-radius: 6px; } .dropdown-menu > li > a, .navbar .nav li .dropdown-menu a { color: #fff; border-radius: 0; white-space: normal; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { box-shadow: none; background: #942e2e; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: #942e2e; box-shadow: none; } .navbar-collapse { padding: 0; } /*arrows*/ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background: #942e2e; } /*Drop Down*/ .dropdown-menu { background: #2c2b2b; } .navbar .nav li .dropdown-menu li a { float: none; margin: 0; } .ie8 .container { max-width: 1170px; } .ie8 #header-image { width: 1140px; } #header-image img { display: block; height: auto; float: left; width: 100%; border: 4px solid #fff; } #home-bottom { margin: 0; } button.red, a.red { background: #942e2e; color: #fff; font-weight: bold; font-family: 'Dancing Script', cursive; font-size: 22px; float: left; } button.red:hover, a.red:hover { color: #942e2e; border: 1px solid #942e2e; } /*Blog Styles*/ .entry-content, .post { float: left; width: 100%; } .post .wp-post-image { border: 4px solid #fff; box-shadow: 0px 3px 18px #aaa; margin: 0 15px 20px 0; background: #fff; display: block; float: left; max-width: 150px; height: auto; } .entry-meta, .entry-footer { opacity: .8; float: left; width: 100%; } /*Image Gallery*/ .gallery img { border: 4px solid #fff; box-shadow: 0px 3px 18px #aaa; margin: 20px; } /*Comment Styles*/ .comment-list { padding: 0; } li.comment { list-style: none; padding: 0; } .comment-body { padding: 7px; background: #fff; margin: 10px 0; opacity: .8; } .comment-body:hover { opacity: 1; } /*footer styles*/ footer.container-fluid { background: #2c2b2b; color: #fff; } footer.container-fluid h2 { margin-top: 0; } footer.container-fluid .row div { padding: 15px 0; } footer.container-fluid p { font-size: 16px; } #footer-middle { background: #314049; padding: 0; min-height: 230px; } #footer-middle ul { list-style: none; padding: 0; } #footer-middle ul li { float: none; position: relative; display: block; } #footer-middle a { color: #fff; font-size: 18px; border-bottom: 1px solid #2e3a40; position: relative; display: block; padding: 10px 15px; } #footer-middle .nav > li > a:hover, #footer-middle .nav > li > a:focus, #footer-middle a:hover { background: #942e2e; } #footer-right { padding: 20px 35px 10px 35px; } #footer-right .textwidget { padding: 0; } #footer-left { padding: 0 0 0 15px; } @media (max-width: 1200px) { .gallery-item { margin: 10px 10px; } .navbar .nav li a { margin: 10px 5px; } ul.dropdown-menu { top: 42px; } } @media (max-width: 991px) { body .container { width: 100%; } footer .container { width: 100%; } footer .container-fluid, footer .container { padding-left: 0; padding-right: 0; } body footer.container-fluid .row div { padding-left: 15px; padding-right: 15px; } #logo-image img { margin: 0 auto; display: block; } #page-header h2 { text-align: center; } header#page-header .widget { text-align: center; } .navbar nav { text-align: center; } .navbar .nav li a { text-align: center; float: none; } .navbar-nav > li { float: none; display: inline-block; } .navbar .nav { text-align: center; } h1#logo { text-align: center; } } @media (max-width: 900px) { .gallery-item { width: 50%!important; max-width: 50%!important; margin: 10px 0; } } @media (min-width: 768px) { .navbar-brand { display: none; } } @media (max-width: 767px) { #nav-row.row .col-md-12 { padding-left: 0; padding-right: 0; } body .navbar-default .navbar-toggle { background: #385b70; color: #fff; margin-left: 15px; float: left; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background: #fff; color: #385b70; border: 1px solid #385b70; } .navbar { min-height: 0; } .navbar .navbar-nav { margin: 0; background: #fff; border-radius: 0; padding: 5px 0; border-top: 1px solid #385b70; border-bottom: 1px solid #385b70; } .navbar-nav > li { float: left; width: 100%; text-align: left; } .navbar-default .navbar-nav > li > a { background: transparent; width: 100%; padding: 10px 17px; font-size: 18px; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar .nav li a { width: 100%; color: #385b70; text-align: left; text-indent: 0px; margin: 0; border-radius: 0; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; border-top: none; } .navbar .container { padding-left: 0; padding-right: 0; } .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header { margin-left: 0; margin-right: 0; } .navbar-collapse { padding-left: 0; padding-right: 0; } .navbar-nav .open .dropdown-menu { background-color: #fff; padding: 0; } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #033162; padding: 10px 25px; font-size: 18px; text-align: left; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: #efefef; box-shadow: none; color: #385b70; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background: #efefef; color: #385b70; border-radius: 0; } .callbacks .caption { min-width: 100%; bottom: 0; font-size: 1.5em; } } @media (max-width: 550px) { #account ul li { width: 100%; text-align: left; float: left; display: block; } #account ul li input { margin: 10px 0; } form#searchbox p, input#search { width: 100%; max-width: 100%; } input#search { padding: 5px; font-size: 15px; } input#searchbutton { top: 10px; } } @media (max-width: 500px) { button.red { float: none; } } @media (max-width: 480px) { #header-image { display: none; } } @media (max-width: 370px) { h1#logo { text-align: center; } .gallery-item { width: 100%!important; max-width: 100%!important; margin: 10px 0; } }