/* Theme Name: Civil Defence Theme URI: http://www.civildefence.ie Author: Fusio Author URI: http://www.fusio.net Description: Custom theme for Civil Defence. */ /** * Table of Contents: * * 1.0 - Universal Styles * 1.1 - Wordpress Core Styles * 1.2 - Fonts * 2.0 - Header * 2.1 - Logo * 2.2 - Top Bar * 2.3 - Main Menu * 3.0 - Homepage * 4.0 - Inner pages * 4.1 - Sidebar * 5.0 - Footer * 6.0 - Media Queries * ---------------------------------------------------------------------------- */ /** * 1.0 - Universal Styles * ---------------------------------------------------------------------------- */ html, body { height: 100%; } body { font-family: 'Montserrat', sans-serif; font-weight: normal;} #wrap { min-height: 100%; } .container { max-width: 970px; } #main { overflow:auto; padding-bottom: 350px; } #maincontent { padding: 30px 0; font-family: 'Open Sans', sans-serif; } #home #maincontent { padding: 0; } a, a:visited { color: #006abd } a:hover, a:focus { color: #db8a2d; text-decoration: none; } h1 { font-size: 24px; color: #006abd; margin-top: 0; margin-bottom: 15px; } h2 { font-size: 16px; color: #006abd; margin-top: 30px; } b, strong { font-family: 'Montserrat'; font-weight: 500; } ol li { margin-bottom: 15px; } /** * 1.1 - Wordpress Core Styles * ---------------------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /** * 1.2 - Fonts * ---------------------------------------------------------------------------- */ @font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-regular-webfont.eot'); src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-regular-webfont.svg#Montserrat') format('svg'), url('fonts/montserrat-regular-webfont.woff') format('woff'), url('fonts/montserrat-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Montserrat Bold'; src: url('fonts/montserrat-bold-webfont.eot'); src: url('fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/montserrat-bold-webfont.svg#Montserrat Bold') format('svg'), url('fonts/montserrat-bold-webfont.woff') format('woff'), url('fonts/montserrat-bold-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } /** * 2.0 - Header * ---------------------------------------------------------------------------- */ header { background: url("images/header-bg.jpg") no-repeat scroll center top rgba(0, 0, 0, 0); height: 115px; width: 100%; } /** * 2.1 - Logo * ---------------------------------------------------------------------------- */ #logo { margin-top: 25px; } /** * 2.2 - Top Bar * ---------------------------------------------------------------------------- */ #top-bar { background: rgb(89, 116, 138); background: rgba(89, 116, 138, 0.7); color: #fff; font-size: 0.9em; padding: 0 10px; border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-bottom-right-radius: 5px; } #top-bar ul { float: left; list-style: none; padding: 0; margin-top: 12px; } #top-bar ul li { float: left; height: 17px; margin-right: 20px; } #top-bar ul li a { color: #fff; } #top-bar ul li#flickr:after { width: 26px; height: 13px; content: url('/wp-content/themes/civildefence/images/topmenu-flickr.png'); margin-left: 5px; } #top-bar ul li#twitter:after { width: 16px; height: 13px; content: url('/wp-content/themes/civildefence/images/topmenu-twitter.png'); margin-left: 5px; } #top-bar ul li:after { vertical-align: top; } #top-bar .navbar-form { padding: 0; } #top-bar .navbar-form #s { line-height: 12px; font-size: 12px; } #top-bar .navbar-form .form-control { line-height: normal; padding: 0 12px; } #top-bar input, #top-bar button { height: 25px; } #top-bar .btn { font-size: 12px; padding: 4px 12px; } /** * 2.3 - Main Menu * ----------------------------------------------------------------------------- */ #main-menu ul li.current_page_item a { color: #0077c4; } #main-menu ul li.current-menu-parent a { color: #0077c4; } #main-menu ul li ul li.current_page_item a { color:#F0AD60 !important; } #main-menu { width: 100%; height: 35px; background: #db8a2d; background: -webkit-linear-gradient(top, rgb(225, 153, 60) 0%, rgb(213, 120, 28) 100%); background: -o-linear-gradient(top, rgb(225, 153, 60) 0%, rgb(213, 120, 28) 100%); background: -ms-linear-gradient(top, rgb(225, 153, 60) 0%, rgb(213, 120, 28) 100%); background: -moz-linear-gradient(top, rgb(225, 153, 60) 0%, rgb(213, 120, 28) 100%); background: linear-gradient(to bottom, rgb(225, 153, 60) 0%, rgb(213, 120, 28) 100%); text-align: justify; border-top: 3px solid #fff; } .navbar-brand { display: none; } .navbar { margin: 0; } .navbar-default { background-color: transparent; border: 0; } #main-menu ul { width: 100%; height: 35px; line-height: 32px; list-style: none; margin: 0; padding: 0; } #main-menu ul:after { content: ""; display: inline-block; width: 100%; } #main-menu ul li { display: inline-block; zoom: 1; *display: inline;} #main-menu ul li a { font-family: 'Montserrat'; font-size: 17px;color: #fff; text-transform: uppercase; } #main-menu ul li ul li a:hover, #main-menu ul li ul li a:focus { color: #db8a2d !important; } #main-menu ul li .dropdown-menu { position: absolute; top: 32px; left: 0; width: auto; z-index: 9999; background: #005999; background: -webkit-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -o-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -ms-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -moz-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: linear-gradient(to bottom, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); color: #fff; padding: 0 10px; line-height: 0; border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-top-left-radius: 0; border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-top-right-radius: 0; } #main-menu ul li:hover .sub-menu { display: block; } #main-menu ul li ul { height: auto; } #main-menu ul li ul li { position: relative; width: 100%; display: block; padding: 10px 0 5px; line-height: normal; } #main-menu ul li ul li a { font-size: 14px; text-transform: capitalize; color:white !important } .dropdown:hover .dropdown-menu { display: block; border: 0; } .dropdown-menu > li > a { padding: 0; } #main-menu ul li ul li a:hover, #main-menu ul li ul li a:focus { background-color: transparent; } .caret { display: none; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { background-color: transparent; } /** * 3.0 - Homepage * ---------------------------------------------------------------------------- */ #home header { background: #005296; background: -webkit-linear-gradient(top, rgb(0, 103, 188) 0%, rgb(0, 76, 138) 63%, rgb(0, 62, 113) 100%); background: -o-linear-gradient(top, rgb(0, 103, 188) 0%, rgb(0, 76, 138) 63%, rgb(0, 62, 113) 100%); background: -ms-linear-gradient(top, rgb(0, 103, 188) 0%, rgb(0, 76, 138) 63%, rgb(0, 62, 113) 100%); background: -moz-linear-gradient(top, rgb(0, 103, 188) 0%, rgb(0, 76, 138) 63%, rgb(0, 62, 113) 100%); background: linear-gradient(to bottom, rgb(0, 103, 188) 0%, rgb(0, 76, 138) 63%, rgb(0, 62, 113) 100%); } .metaslider .caption { padding: 20px !important; } .flex-control-nav { text-align: right !important; bottom: 10px !important; right: 5px !important; } .flex-control-nav li a { text-align: center !important; margin: 0 3px !important; } .flex-control-paging li a { background-color: #a9a9a9 !important; border-radius: 0 !important; box-shadow: none !important; } .flex-control-paging li a.flex-active { background-color: #df8832 !important; } #blue-bg { width: 100%; background-color:#b6d0e8; -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#c8e5ff, endColorstr=#a0b7cc)"; background-image:-webkit-gradient(linear, left top, left top, from(#c8e5ff), to(#a0b7cc)); background-image:-webkit-linear-gradient(top, #c8e5ff, #a0b7cc); background-image:-moz-linear-gradient(top, #c8e5ff, #a0b7cc); background-image:linear-gradient(to bottom, #c8e5ff, #a0b7cc); padding: 30px 0 0; }#home .clear-bg { padding: 30px 0 40px; } #home .feature-boxes { margin-bottom: 30px; } #home .feature-box { max-height: 342px; } #home .feature-box.twitter { overflow: hidden; } .feature-box.twitter .contents { padding: 15px; background-color: #e8e8e8; } .feature-box.twitter .title img { float: right; } #home .feature-box #latest-news { margin: 0; } .feature-boxes { margin-bottom: 15px; } /*.metaslider .slides [aria-hidden="true"] a{ display: none; }*/ /** * 4.0 - Inner pages * ---------------------------------------------------------------------------- */ .contact-table .heading { padding: 10px 0; } .contact-table .heading, .contact-table .heading .col-md-4, .contact-table .heading .col-xs-12 { background-color: #0041C2; color: #fff; margin: 0; } .contact-table .col-md-4, .contact-table .col-xs-12 { margin-bottom: 15px; } .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .google-maps #map-canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } /** * 4.1 - Sidebar * ---------------------------------------------------------------------------- */ .feature-box .title { background: #0077c4; background: -webkit-linear-gradient(top, rgb(0, 138, 207) 0%, rgb(0, 103, 188) 100%); background: -o-linear-gradient(top, rgb(0, 138, 207) 0%, rgb(0, 103, 188) 100%); background: -ms-linear-gradient(top, rgb(0, 138, 207) 0%, rgb(0, 103, 188) 100%); background: -moz-linear-gradient(top, rgb(0, 138, 207) 0%, rgb(0, 103, 188) 100%); background: linear-gradient(to bottom, rgb(0, 138, 207) 0%, rgb(0, 103, 188) 100%); color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-top-left-radius: 5px; -moz-border-top-right-radius: 5px; padding: 10px 15px; margin: 0; } .feature-box .title.dark { background: #525252; background: -webkit-linear-gradient(top, rgb(101, 101, 101) 0%, rgb(64, 64, 64) 100%); background: -o-linear-gradient(top, rgb(101, 101, 101) 0%, rgb(64, 64, 64) 100%); background: -ms-linear-gradient(top, rgb(101, 101, 101) 0%, rgb(64, 64, 64) 100%); background: -moz-linear-gradient(top, rgb(101, 101, 101) 0%, rgb(64, 64, 64) 100%); background: linear-gradient(to bottom, rgb(101, 101, 101) 0%, rgb(64, 64, 64) 100%); } .feature-box .title a { color: #fff; } .feature-box #latest-news { background-color: #e8e8e8; color: #000; padding: 0; list-style: none; padding: 15px 15px 0; border-bottom: 5px solid #b1b1b1; margin-bottom: 22px; } .feature-box #latest-news li { border-top: 1px solid #fff; padding-top: 10px; } .feature-box #latest-news li:first-child { border-top: 0; padding: 0; } .feature-box .date { margin: 0; } .feature-box .linkbox { display: block; color: #000; background: #e8e8e8 url(/wp-content/themes/civildefence/images/arrow-orange.png) no-repeat 95% 50%; padding: 10px 20px 10px; border-bottom: 5px solid #b1b1b1; } .feature-box .linkbox p { margin-bottom: 0; } /** * 5.0 - Footer * ---------------------------------------------------------------------------- */ footer { width: 100%; height: 350px; margin-top: -350px; position: relative; clear: both; background: #005999; background: -webkit-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -o-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -ms-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -moz-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: linear-gradient(to bottom, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); color: #fff; padding: 20px 0; font-size: 0.9em; } footer a:link, footer a:visited { color: #fff; } footer a:hover, footer a:focus { color: #db8a2d; text-decoration: none; } footer ul { list-style: none; } #menu-footer { padding: 0; } #menu-footer li { width: 14.28571428571429%; float: left; padding: 0 10px; } #menu-footer li a { font-family: 'Montserrat'; text-transform: uppercase; } #menu-footer li ul { padding: 0; } #menu-footer li ul li { width: 100%; float: none; padding: 0; } #menu-footer li ul li a { text-transform: none; font-family: 'Montserrat'; font-size: 11px; } #secondary-footer-menu { float: right; } #secondary-footer-menu li { float: left; padding: 0 10px; border-left: 1px solid #fff; font-size: 9px; } #secondary-footer-menu li:first-child { border: 0; } #secondary-footer-menu li:last-child { padding-right: 0; } #menu-secondary-footer { float: right; } #menu-secondary-footer-menu li { float: left; padding: 0 10px; border-left: 1px solid #fff; font-size: 9px; } #menu-secondary-footer-menu li:first-child { border: 0; } #menu-secondary-footer-menu li:last-child { padding-right: 0; } #footer-contact { font-size: 11px; text-align: right; } /** * 6.0 - Media Queries * ---------------------------------------------------------------------------- */ @media (max-width: 992px) { header { height: auto; background-color: #567188; } #logo { margin-bottom: 22px; } #top-bar { margin-bottom: 15px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } #sidebar { margin-top: 30px; } #home #sidebar { margin-top: 0; } #sidebar .feature-box img { display: none; } .feature-box .linkbox p { margin-right: 30px; } footer { height: auto; } #menu-footer { font-size: 0; } /* Inline-block whitespace fix */ #menu-footer li { width: 25%; float: none; display: inline-block; zoom: 1; *display: inline; vertical-align: top; margin-bottom: 20px; font-size: 14px; } #menu-footer li ul li { margin-bottom: 0; font-size: 11px; } } @media (max-width: 767px) { #top-bar { background-color: #567188; } #home #top-bar { background-color: transparent; } #main-menu { height: auto; line-height: 50px; color: #fff; } #main-menu ul { height: auto; line-height: normal; } #main-menu ul:after { display: none; } #main-menu ul li { display: block; } #main-menu ul li a { display: block; padding: 10px 0; font-family: 'Montserrat'; font-size: 14px; } .navbar-default .navbar-brand { color: #fff; } .navbar-brand { display: block; } .navbar-toggle { border: 0; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; height: 3px; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; } .navbar-collapse { background: #005999; background: -webkit-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -o-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -ms-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: -moz-linear-gradient(top, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); background: linear-gradient(to bottom, rgb(0, 113, 193) 0%, rgb(0, 83, 142) 63%, rgb(0, 68, 116) 100%); color: #fff; } #main-menu ul li .dropdown-menu { display: none; } #main-menu ul li:hover .dropdown-menu { display: block; display: block; width: 100%; } .navbar-form { border: 0; box-shadow: none; } #maincontent { text-align: justify; padding-top: 15px; } .feature-box { text-align: left; } #home .feature-box img { display: none; } #home .feature-box { margin-bottom: 30px; } #home .feature-boxes .col-xs-4 { width: 100%; } #home .feature-box.twitter iframe { width: 100%; } } @media (max-width: 600px) { #logo { margin-top: 15px; } #top-bar .col-xs-7, #top-bar .col-xs-5 { width: 100%; } #top-bar ul { width: 100%; display: block; margin: 15px auto; text-align: justify; margin-bottom: 0; } #top-bar ul:after { content: ""; display: inline-block; width: 100%; } #top-bar ul li { float: none; display: inline-block; zoom: 1; *display: inline; margin: 0; } #top-bar .navbar-form { display: block; padding: 0; margin: 0; } #top-bar input, #top-bar button { height: 34px; } #top-bar .btn { font-size: 14px; padding: 6px 12px; } } @media (max-width: 500px) { #menu-footer li { width: 50%; } #secondary-footer-menu { float: none; padding: 0; margin-top: 20px; } #secondary-footer-menu li { float: none; display: block; border: 0; margin-bottom: 10px; } } @media (max-width: 350px) { #logo { margin-bottom: 0; } #menu-footer li, #secondary-footer-menu li { width: 100%; padding-left: 0; padding-right: 0; text-align: center; } #top-bar { margin-top: 15px; } #top-bar ul { margin-top: 5px; } #footer-contact { text-align: center; } } .throwbacklist { width:200px; float: left; }