/* 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, /* Older / Newer Posts Navigation (always hidden) */ .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*/ #wp-calendar { width:80%; font-size:12px; font-weight:300; border-collapse:separate; border-spacing:6px; margin-left:-4px; } #wp-calendar caption { display:none; } #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; } #wp-calendar tbody td:hover { border-color:#e2e2e2; } #wp-calendar tbody td.pad { border:0; } #wp-calendar tbody td#today { color:#942e2e; border-color:#942e2e; } #wp-calendar tfoot td#prev a,#wp-calendar tfoot td#next a { color:#888; font-size:12px; font-weight:400; position:relative; text-transform:uppercase; bottom:-9px; margin-bottom:1px; } #wp-calendar tfoot td#prev { text-align:left; } #wp-calendar tfoot td#next { text-align:right; } #wp-calendar thead th { font-size:13px; font-weight:400; color:#888; text-align:center; padding-bottom:10px; } #wp-calendar tbody td a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover { color: #942e2e; } } #secondary {float: left;} #secondary{ .widget_search.widget {margin-top: 20px;} /*calendar styles*/ #wp-calendar { width:80%; font-size:12px; font-weight:300; border-collapse:separate; border-spacing:6px; margin-left:-4px; } #wp-calendar caption { display:none; } #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; } #wp-calendar tbody td:hover { border-color:#e2e2e2; } #wp-calendar tbody td.pad { border:0; } #wp-calendar tbody td#today { color:#fff; background-color: #ccc; } #wp-calendar tfoot td#prev a,#wp-calendar tfoot td#next a { color:#888; font-size:12px; font-weight:400; position:relative; text-transform:uppercase; bottom:-9px; margin-bottom:1px; } #wp-calendar tfoot td#prev { text-align:left; } #wp-calendar tfoot td#next { text-align:right; } #wp-calendar thead th { font-size:13px; font-weight:400; color:#888; text-align:center; padding-bottom:10px; } #wp-calendar tbody td a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover { color: #942e2e; } } /* bootcut Styles */ body { // background: url(images/paint.png) no-repeat top center, #e6e1eb url(images/texture.jpg); 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-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; } }