/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */

body{
  color: #000;
}


/* Below are for the Contact Information Module on the Home page */

.home-contact h3.uk-panel-title, .latest-news h3.uk-panel-title{
  text-align: center;
}

.home-contact h3{
    padding-left: 20px;
}

.home-contact .magistrates h3{
    border-bottom: 2px solid #006666;
    color: #006666;
}

.home-contact .mayors h3{
    border-bottom: 2px solid #b3c564;
    color: #5c6826;/*WCAG #b3c564;*/
}

.home-contact .mayors h3 a{
    color: inherit;
}

.home-contact .our-links h3{
    border-bottom: 2px solid #14597e;
    color: #14597e;
}

.home-contact a{
    color: #6a6a6a;/*WCAG #999999;*/
}

.home-contact .find-mag{
    background: #4c5054;
    color: white;
}

.home-contact .issue{
    background: #106c97; /*WCAG #1380b2;*/
    color: white;
}

/* Below are for the Homepage Icons Module on the Home page */

#tm-bottom-a{
  margin-top: 0 !important;
}

.homepage-icons{
    position: relative;
    text-align: center;
    padding: 0;
    padding-bottom: 30px;
}

.homepage-icons a img{
    position: relative;
    z-index: 6;
    height: 150px;
    width: 150px;
    margin: 0 15px;
}

/* In order to get that background effect, use a lower z-index with position relative/absolute */
.homepage-icons .bkgd{
    width: 100%;
    height: 50%;
    position: absolute;
    top: 50%;
    z-index: 0;
    background: #17a0ce;
    background-size: 50% auto;
}

/* Below are for the Latest News Module on the Home page */
#tm-bottom-b{
  margin-top: 0 !important;
}

.latest-news{
    background: #106c97; /*WCAG #1380b2;*/
    color: white !important;
}

.latest-news h3.uk-panel-title{
    color: white;
}

.latest-news h4{
    color: white;
}

.latest-news ul.category-module{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.latest-news ul.category-module li{
    list-style: none;
    margin-left: 0;
}

.latest-news ul.category-module li a{
    color: #FFF;
}

.latest-news ul.category-module li a:hover{
    color: #DDD;
}


/* Below are for the Contact Info and Full Side module */

#tm-bottom-d{
    margin-top: 0 !important;
}

#tm-bottom-d .contact-footer{
  padding: 0;
}

#tm-bottom-d .contact-footer .span4.contact-left{
    padding-top: 5px;
    color: #4c5054;
}

#tm-bottom-d .contact-footer .span4.contact-left a{
    color: #4c5054;
}

#tm-bottom-d .contact-footer .span8{
    padding-top: 5px;
    padding-left: 30px;
    background: #4c5054;
    color: white;
}

#tm-bottom-d .contact-footer .span8 li a{
    color: white;
}

#tm-bottom-d .contact-footer .span8 h3{
    color: #DDD;
}

/* Below is for Footer Icon Positioning */
.tm-footer .footer-icons{
  position: relative;
  text-align: center;
  height: 50px;
}

.tm-footer .footer-icons div{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}

/* Below is for Google Translate in the footer */

.tm-footer > .uk-panel #google_translate_element a{
    color: black;
}

/* Below is for new Departments, copied from City */
img.elected-photo-intro{
    border: 1px solid black;
}

/*
.tm-main.uk-width-medium-3-4 > .tm-content > article > div > .meta-div{
    width: 49%;
    float: left;
}

.tm-main.uk-width-medium-1-1 > .tm-content > article > div > .meta-div{
    width: 49%;
    float: left;
}
*/

.elected-right-content{
    float: right;
    width: 50%;
}

/* Below is just misc changes to Government/Official Pages */

@media(min-width: 479px){
  img.wrap-left{
    float: left;
    margin: 5px;
  }

  
}


/* HOVER EFFECT */

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

/* BACKGROUND IMAGE */

body{
    background-image: url("../../../images/bg_5.jpg") !important ;
}


/* LOGO HEADER STYLE */

.tm-navbar .tm-logo {
  margin-right: 0px !important ; 
  background: #077ea2;
}


.uk-navbar {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 52%, rgba(255,255,255,1) 53%, rgba(255,255,255,1) 100%);
    color:  #999999 !important;
  padding: 0px 0px 20px 0px; }

.tm-toolbar{
  padding-bottom: 0;
}


/* WCAG */
.uk-navbar-nav > li > a{
   color: #565656 
}

.uk-navbar-nav > li.uk-active > a {
    color: #474747;
}

.tm-footer > .uk-panel a:hover{
    color: #d2d6d6;
}

.tm-footer > .uk-panel{
    color: white;
}
/* END */

/* Removing a lot of padding from Contact Page */

form#contact-form, form#contact-form.well{
    padding: 0 0 10px 0 !important;
}

form#contact-form legend{
    color: black;
    margin-bottom: 5px;
}

/* Now changing readmore colors, and some content boxes are missing their backgrounds */

a.readmore{
    color: black;
}

.fix-bkgd main#tm-content{
    padding: 30px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.03);
    background: #ffffff;
}

.fix-bkgd article a{
    color: black;
}

/* Blog Categories for more links and for Pagination */

#tm-content .uk-panel{
  background: white;
  padding: 20px;
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.03);
}

.uk-pagination{
  background: white;
  padding: 20px;
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.03);
}

/* Now for the top tooltip (phone number, etc) styling */
.tm-header .tm-toolbar.uk-hidden-small{
  background: #077ea2;
}


/* Now to hide the New article button when you're logged into the front */
.category-list .content-category form#adminForm span.hasTooltip a.btn.btn-primary{
  display: none;
}

/* Now time for more mobile fixes */
a, .uk-link{
  word-break: break-word /* Linked text, like for Facebook too long */
}

@media(max-width: 767px){

  .tm-footer .footer-icons{
    height: 70px;
  }

  .tm-footer .footer-icons div{
    height: 90px;
  }

}

@media(max-width: 479px){
  .tm-footer .footer-icons{
    height: 100px;
  }

  .tm-footer .footer-icons div{
    height: 120px;
  }

  h1, .uk-h1{
    font-size: 20px;
    line-height: 24px;
  }

  h2, .uk-h2 {
    font-size: 18px;
    line-height: 24px;
  }

  h3, .uk-h3 {
    font-size: 16px;
    line-height: 24px;
  }

  h4, .uk-h4 {
    font-size: 14px;
    line-height: 24px;
  }

}

/* Lets make the font/spacing smaller on the menu, I'd hate to break it to the hamburger menu on the iPad as [ ] vs []*/
@media(max-width: 1350px){
  .uk-navbar-nav > li > a{
    padding: 0 10px;
    font-size: 15px;
  }
}


@media(max-width: 1219px){
  .uk-navbar-nav > li > a{
    padding: 0 7px;
    font-size: 14px;
  }
}

@media(max-width: 979px){
  .uk-navbar-nav > li > a{
    padding: 0 7px;
    font-size: 14px;
  }
}

input.uk-search-field, .uk-search:before{
    color: #333;
}

.uk-search-field:focus, .uk-search.uk-active .uk-search-field {
    background: #EEE;
}

/* Joomla4 Changes */

.com-content-category-blog__counter.counter
{
    display: none;
}

.com-content-category-blog__pagination{
    text-align: center;
    background: white;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.pagination{
    list-style: none;
}

.pagination li{
    display: inline-block;
}

.pagination li a{
    display: inline-block;
    min-width: 30px;
    padding: 3px 5px;
    line-height: 34px;
    text-decoration: none;
    box-sizing: content-box;
    text-align: center;
    border-radius: 50%;
    border: 1px solid rgba(120, 121, 122, 0.15);
}

.pagination li.active a{
    background: #f6f6f6;
    color: #999999;
    border-color: transparent;
}

#tm-content > div.com-content-category-blog__navigation > div > nav > ul.pagination > li.disabled{
    display: none;
}

#tm-content > div.com-content-category-blog__navigation > div > nav > ul.pagination > li .icon-angle-right, #tm-content > div.com-content-category-blog__navigation > div > nav > ul.pagination > li .icon-angle-double-right{
    /*width: 45px;*/
}

#tm-content > div.com-content-category-blog__navigation > div > nav > ul.pagination > li .icon-angle-right:after{
    content: '>';
    width: 20px;
    display: inline-block;
}

#tm-content > div.com-content-category-blog__navigation > div > nav > ul.pagination > li .icon-angle-double-right:after{
    content: '>>';
    width: 20px;
    display: inline-block;
}

#tm-content > div.com-content-category-blog__navigation > div > nav > ul.pagination > li .icon-angle-left:after{
    content: '<';
    width: 20px;
    display: inline-block;
}

#tm-content > div.com-content-category-blog__navigation > div > nav > ul.pagination > li .icon-angle-double-left:after{
    content: '<<';
    width: 20px;
    display: inline-block;
}

/* End Changes */