/* Theme Name: IrishTrucker (2026) Theme URI: https://irishtrucker.com/ Description:Responsive Grid Wordpress Theme based on Boostrap 3, Font Awesome and Isotope. Version: 1.0.1 Author: Lynn Author URI: Site: Tags: responsive-layout,custom-menu, featured-images, fluid-layout, full-width-template, left-sidebar, right-sidebar, theme-options */ body, html {margin:0;padding: 0px;height:100%;font-family: lato;} /* No admin-bar offset needed here: the navbar sits in normal document flow (see .navbar below) and WordPress already pushes the page down with html{margin-top:32px}. The rule that used to live here forced position:fixed and height:40px on a header more than twice that tall, which dropped it out of flow and laid it over the content underneath. */ /* link color */ a{color:#E2232A;} a:focus, a:hover{color:#1D2428;} /* Menus */ .navbar {margin:0;border:none;border-radius:0;background-color: #FFF;background-image: none;text-transform: uppercase; position: relative;} .navbar h1{margin:0;} .navbar-inverse .navbar-brand {padding-bottom: 11px;color:#1D2428; letter-spacing: -2px;font-weight: 300; font-size: 22px;} .navbar-inverse .navbar-brand .arrow{margin-right:5px;} .navbar-nav ul{list-style-type: none} /* Menu links are near-black, not Bootstrap's #9d9d9d grey. The weight is part of that: at 300 the uppercase strokes are thin enough that antialiasing renders even #1D2428 as mid-grey, so 700 is what makes the colour read as the colour it is. Weight has to match across the states too, or the label reflows on hover. */ .navbar-inverse .navbar-nav > li > a {color:#1D2428;font-weight: 700;} .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:active {background:#E2232A;color:#FFF;font-weight: 700;} .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {background-color: #1D2428;color: #FFFFFF;} .navbar-sub{background: #f0ede3;} .navbar-sub .navbar-nav > li > a{color:#666; } .navbar-sub .navbar-nav > li > a:hover{background: #dcd9d0;color:#000;} /* Brand padding (12) + logo (74) + brand padding (12) + the 4px red border. Kept in step with .navbar-brand at the foot of this file. */ .navbar {min-height: 102px;} /* Featured Content */ .featured{display: block;background: #1D2428;min-height: 50px; position: relative;} .featured .item-featured{position: relative;overflow:hidden;padding:0;} .featured img{z-index: 50;width: 100%; height:auto;opacity:0.6; -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;} .featured .item-featured:hover > a img{opacity:1; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } .yt-featured{width:132.9%!important;margin-left:-15%;} .featured .caption{position: absolute; bottom:0;z-index:100;width:100%; background: url(img/bg.png) repeat-x;color:#fff;} .featured .cat{padding:0 20px;color: #fff;text-transform: uppercase;text-shadow: 0 0 3px #000;font-weight: 700; font-size:12px;} .featured .date{padding:0 20px;color: #E2232A;text-transform: uppercase;text-shadow: 0 0 3px #000;font-weight: 700; font-size:12px;} .featured .title{margin:0;padding:5px 25px 25px 25px; text-transform: uppercase; font-weight: 400;font-size: 27px;} /* ESB Networks safety banner. Two slots, one shown at a time (see header.php): the visible-xs one sits inside the row under the first story, the hidden-xs one after the row under all three. A white box centred on the dark strip, capped at the artwork's own 1050px so it is never upscaled, and 2px of white showing all round it. The max-width includes that padding, so 1050 + 2 + 2. Bootstrap's own column padding on the xs slot has to come off first, or it would sit inside a 15px gutter instead. */ .esb-banner-slot{max-width: 1054px;margin: 0 auto;padding:2px;background: #fff;line-height: 0;} .esb-banner{display: block;} /* Specific enough to beat the two .featured img rules — the banner is an ad, so it is never dimmed to 0.6 and never zooms, even in the xs slot that sits inside .featured. width:100% with max-width lets it shrink with the box on narrow screens. */ .esb-banner-slot .esb-banner img{width:100%;max-width: 1050px;height:auto;opacity:1; -webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none; -webkit-transform: none;-moz-transform: none;-ms-transform: none;-o-transform: none;transform: none;} /*** Grid ***/ .cont-grid{float:right;padding: 10px 0 0 5px;border-left: 1px solid #eee;} .cont-grid .post{padding:20px 25px 20px 15px;} .grid-cat{margin:0px 0 0 0; color: #333;text-transform: uppercase; font-weight: 700; font-size: 13px;} .grid-tit{margin:10px 0 10px 0; text-transform: uppercase; font-weight: 300;font-size: 28px; } .grid-tit a{color:#333;} .grid-cop{padding: 10px 0 0px 0;} .grid-text{padding:15px 0 0 0;} .grid .item {float: left;margin: 0 5px 10px 5px;width: 20%;height: auto;border-right: 1px solid #eee; border-bottom: 1px solid #eee;background: #fff;} .grid .item img{margin:0;width:100%;height:auto;line-height: 0;} .grid .item-w2 {width: 40%;} .grid .item-h2 {height: 322px;} .grid .item-h3 {height: 485px;} /* Card images fade in on first paint. This is CSS rather than JS so that the default state is *visible*: if scripts never run, the images are still there. */ .item img{animation: trucker-fade-in 0.5s ease-in both;} @keyframes trucker-fade-in {from {opacity: 0;} to {opacity: 1;}} @media (prefers-reduced-motion: reduce) { .item img{animation: none;} } /* Isotope sizes and positions the cards; without it the 20% columns above only make sense as a starting point, so give no-JS readers a plain 1-2 column flow. */ .no-js .grid .item {float: none;width: auto;} @media (min-width: 768px) { .no-js .grid .item {float: left;width: 46%;} } /* Phones get two across, matching the column count theme.js computes. The 20% above is a desktop starting point; left alone it paints five tiny cards across a phone in the moment before Isotope measures the container and takes over. */ @media (max-width: 767px) { .grid .item, .grid .item-w2 {width: 46%;} } /* isotope */ .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /* Pagination */ .pagination{padding: 0 0 0 15px;} .pagination span, .pagination a{padding: 9px 14px;border: 1px solid #eee;} /* Single */ .single{float:right;margin:0;padding:0;border-left: 1px solid #eee;} .sing-cop{width:100%; height:auto;} .sing-tit-cont{position: relative;margin:-69px 0 0 0;margin-left:10%; padding:3% 5% 1% 5%;width:80%;background:#fff;} .sing-tit{margin:10px 0 20px 0; text-transform: uppercase; font-weight: 300;font-size: 33px;} .sing-spacer{padding:3% 6%;} .sing-cont{position: relative;margin-left:10%;width:80%;font-size: 16px; line-height: 26px;} .single-in{padding:0;} .meta{margin:0;padding:0;color:#999;text-transform: uppercase;} .cat{margin:10px 0 0 0; color: #333;text-transform: uppercase; font-weight: 700; font-size: 13px;} .tag-post{color:#E2232A; text-transform: capitalize;} /* Stands in for the hero image on a post or page that has none. It used to be 100px — the height the title card's -69px pull needs to clear a real image — which left a visibly empty band under the header. With no image there is nothing to overlap, so the card's pull is cancelled and this is just the gap above it. */ .spacer-sing{height:24px;} /* The card's white ground and top inset are there to sit over the image; with no image it is white on white, so the inset is pure empty space. */ .spacer-sing + .sing-tit-cont{margin-top:0;padding-top:0;} /* Forms (search, widgets) — the comment styles that used to live here went with comments.php when comments were switched off for good. */ input{ margin-right:10px;padding: 10px;border:none;background: #eee;} textarea{ float:left;padding:10px;width:90%;border:none;background: #eee;} #submit{margin-top:10px;background: #E2232A; color:#fff;text-transform: uppercase;padding: 15px 20px;} /* Video Resposnive */ .videoWrapper {position: relative;margin-bottom: 70px;padding-top: 25px;padding-bottom: 56.25%; /* 16:9 */height: 0;} .videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .link-video{position:relative;} .link-video i{position: absolute; top:50%; left:50%;margin:-20px 0 0 -25px ;background: url(img/circle-white.png) no-repeat center center;} /* Gallery */ .gallery {margin: 0 0 10px 0!important;} .gallery-item {float: left;margin: 0!important;width: 33.333333%;text-align: center;} .gallery img { margin: 5%!important;width: 90%!important;border: none!important;} .gallery-caption {margin-left: 0;} /* Primary Sidebar */ .sidebar{float:left;} .sidebar .widget{padding: 10px 10px 20px 10px;} .sidebar .widget h3{text-transform: uppercase;font-weight:700;font-size: 14px;} .sidebar .widget a{ display:block; padding: 10px 15px;border-bottom: 1px solid #eee;} .sidebar .widget ul{padding:0;list-style-type: none;} .sidebar .widget ul li a{padding-left: 0;} .sidebar .social{ float:left;margin: 20px 0 30px 0;width: 100%;} .sidebar .social a{display: block;float:left;padding:10px;} /* Tab */ .sidebar #myTab{margin-top:20px;} .tab-spacer{padding:0 10px 0 10px;} .tab-content{float:left;margin: 10px 0 60px 0; width:100%;} .tab-content a{float:left;padding: 10px 0 0 0;min-height: 75px;width: 100%;border-bottom:1px solid #f0efef;text-decoration: none;} .tab-content a:last-child{border:none;} .tab-content img{float:left;margin:0 20px 10px 10px;padding:0; width:60px; height:60px;border:0; border-radius:50%;} .tab-content .title{ margin: 5px 0 0 0;color:#000; text-transform: uppercase;font-weight: 400;font-size: 16px;} /* Secondary Sidebar */ .sec-sidebar{float:right;margin: 0;padding:0;width:100%;} .sec-sidebar .widget{padding: 10px 10px 20px 10px;} .sec-sidebar .widget a{ display:block; padding: 10px 15px;border-bottom: 1px solid #eee;} .sec-sidebar .widget h3{text-transform: uppercase;font-weight:700;font-size: 14px;} .sec-sidebar .widget ul{padding:0;list-style-type: none;} .sec-sidebar .widget ul li a{padding-left: 0;} /* Footer */ .footer{float:left; padding:20px; width:100%;background: #1D2428;color:#fff;} .footer span{text-transform: uppercase;} /* General */ .row{margin:0;padding:0;} .panel{background: #eee;} .sticky {border-right:3px solid #eee;border-bottom: 3px solid #eee } .wp-caption {border: 1px solid #eee; text-align: center; padding: 10px;} .wp-caption img {margin: 0;padding: 0;border: 0 none; width:100%!important;height:auto;} .wp-caption p.wp-caption-text {font-size: 1em; line-height: 17px; padding: 8px; margin: 0; } /* only in home caption full width */ .cont-grid .wp-caption {max-width:100%;width: 100% !important;height:auto; } .alignleft{float:left; margin-right: 20px;} .alignright{float: right; margin-left: 20px;} .aligncenter{margin: 0 auto;display: block} #s{width: 100%} #searchsubmit{background-color: #1D2428;color:#fff} /* Search */ .result{margin-left:5px; text-transform: uppercase;} #srch-term{border:none;background:none; box-shadow: none;} .search-cont{padding:0;} .btn-default{border: none; background: none;} .search-form{margin: 20px 0 30px 0;max-width: 480px;} .search-form .form-control{padding: 10px;height: auto;border:none;background: #eee;box-shadow: none;} .search-form .btn-search{padding: 11px 18px;border:none;background: #1D2428;color:#fff;text-transform: uppercase;font-size: 13px;} .search-form .btn-search:hover, .search-form .btn-search:focus{background: #E2232A;color:#fff;} /* Empty states and 404 */ .no-results, .error-404{padding: 20px 25px 40px 15px;} .no-results h2, .error-title{margin: 10px 0;text-transform: uppercase;font-weight: 300;font-size: 28px;} .no-results p, .error-text{color:#666;font-size: 16px;line-height: 26px;} .error-code{margin:0;color:#eee;font-weight: 900;font-size: 90px;line-height: 1;} .error-suggestions{overflow: hidden;margin-top: 20px;} /* contains the floated columns below */ .error-col{float:left;padding-right: 30px;width: 50%;} .error-col h3{text-transform: uppercase;font-weight: 700;font-size: 14px;} .error-col ul{padding:0;list-style-type: none;} .error-col li{padding: 8px 0;border-bottom: 1px solid #eee;} .no-results-home{clear:both;display: inline-block;padding-top: 20px;text-transform: uppercase;font-size: 13px;font-weight: 700;} @media (max-width: 600px) { .error-col{float:none;padding-right: 0;width: 100%;} } @media (max-width: 1000px) { .cont-grid, .sidebar{width:100%;} .single{float:left; width:100%;border-left: none;} } @media (max-width: 760px) { #mainmenu{float:left;width:100%;} .navbar-form {border:none} .sing-tit-cont{margin-left:5%; width:90%;} .sing-cont{margin-left:5%;width:90%;} .navbar-toggle {border:none} .navbar-toggle:hover {background:#fff!important} .navbar-toggle .icon-bar{background:#1D2428!important} } .navbar-inverse { background-color: #FFF} .navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #E2232A} .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #1D2428} .dropdown-menu { background-color: #FFFFFF} .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #E2232A} .navbar-inverse { background-image: none; } .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; } .navbar-inverse { border-bottom-color: #E2232A; border-bottom-style: solid; border-bottom-width:4px;} .navbar-inverse .navbar-brand { color: #1D2428} .navbar-inverse .navbar-brand:hover { color: #1D2428} .navbar-inverse .navbar-nav>li>a { color: #1D2428} .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:active { color: #FFFFFF} .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF} .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF} .dropdown-menu>li>a { color: #1D2428} .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF} .navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #1D2428} .navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF} .navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #1D2428} .navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF} .white, .white a { color: #fff; } #srch-term{ color: #000; margin: 2px; padding:0px; font-size:14px; padding: 4px; background-color: #fff; } .featured .date{color: #E2232A;} a{color:#E2232A;} a:focus{color:#1D2428;} a:hover{color:#1D2428;} .grid-tit a:hover{color:#E2232A;} .navbar-toggle{ background-color: #FFF; } .featured img{z-index: 50;width: 100%; height:auto;opacity:1.0; -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;} .featured .title{margin:0;padding:5px 25px 25px 25px; text-transform: uppercase; font-weight: 400;font-size: x-large;} .socialshare { line-height: 12px; } @media (max-width: 425px){ .featured .title { padding: 5px 25px 15px 25px; font-size: medium; } .grid-tit { font-size: 20px; } } /* Share links (plain URLs — no third-party SDKs). Placed at the end of the file so they override the older .socialshare rule above. */ .socialshare{margin: 10px 0 20px 0;line-height: 1.8;} .socialshare .share-label{margin-right: 8px;color:#999;text-transform: uppercase;font-size: 12px;font-weight: 700;} .share-btn{display: inline-block;margin: 0 6px 6px 0;padding: 6px 12px;border: 1px solid #eee;color:#333;text-transform: uppercase;font-size: 12px;font-weight: 700;text-decoration: none;} .share-btn i{margin-right: 5px;} .share-btn:hover, .share-btn:focus{border-color: #1D2428;background: #1D2428;color:#fff;text-decoration: none;} /* Header brand and menu. The logo is an SVG cropped tight to the artwork, so the box it occupies is all ink and its height is the header's only variable — the width follows from the viewBox. Below 768px (Bootstrap's navbar collapse point) header.php's serves the wordmark-only file instead, dropping the rules and the "Bus & Light Commercials" tagline so the name stays readable at the size there is room for next to the menu toggle. */ .navbar-inverse .navbar-brand, .navbar-brand{float:left;height:auto;padding:12px 15px;} .navbar-brand .site-logo{display:block;width:auto;height:74px;max-width:100%;} @media (min-width: 768px) { /* Centre the menu against the brand rather than leaving it on the top edge, and give it a gutter — Bootstrap pulls .navbar-right out by 15px for a .container the markup here does not use, which clipped the last item against the viewport edge. */ .navbar-nav{padding-top:24px;} .navbar-nav.navbar-right:last-child{margin-right:15px;} } @media (max-width: 767px) { .navbar{min-height:70px;} .navbar-inverse .navbar-brand, .navbar-brand{max-width:72%;padding:14px 15px;} .navbar-brand .site-logo{height:38px;} .navbar-toggle{margin-top:16px;margin-bottom:16px;} } /* X mark (irishtrucker_x_icon). Sized in em so fa-2x and the Font Awesome sizing classes work on it exactly as they do on an , and aligned to the text baseline the same way Font Awesome aligns its own glyphs. */ .x-icon{display: inline-block;width:1em;height:1em;vertical-align: -0.125em;fill: currentColor;} .share-btn .x-icon{margin-right: 5px;}