/* U3A Theme colours, using variables */

/* General */ 

html {
    background-color: var(--html-bg); 
}

body, 
.U3A-main.content {
    background-color: #fff; 
}

h1, h2, .course-title {
    color: var(--h1-h2-text);
}

h3, h4, h5, h6 {
    color: var(--h3-h6-text);
}

@media screen and (min-width: 768px) {
    body.U3A-side-layout {
        background-color: var(--html-bg); 
    }
    
    .U3A-side-layout #U3A-content {
        background-color: #fff; 
    }
}

/* Nav */ 

.navbar-inverse, #U3A-nav, 
.navbar-inverse .sub-menu {
    background-color: var(--nav-bg-and-title-text); 
}

.navbar-inverse .navbar-toggle {
    border-color: var(--nav-current-bg); 
}

.navbar-inverse .navbar-toggle:focus, 
.navbar-inverse .navbar-toggle:hover {
    background-color: var(--nav-toggle-hover-bg); 
}

.navbar-inverse .navbar-brand, 
.navbar-inverse .navbar-nav > li > a, 
.navbar-inverse .navbar-nav .menu-item-has-children:hover .sub-menu > li > a {
    color: var(--main-nav-text); 
}

.navbar-inverse .navbar-nav > .menu-item-has-children:hover > a, 
.navbar-inverse .navbar-nav > .menu-item-has-children:hover > a:focus {
    color: #fff; 
    background-color: var(--nav-bg-and-title-text); 
}

.navbar-inverse .navbar-brand:hover {
    color: var(--navbar-brand-hover-text); 
}

.navbar-inverse .navbar-nav > li > a:active {
    color: var(--nav-hover-text); 
}

.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > .menu-item-has-children:hover > a:hover, 
.navbar-inverse .navbar-nav .menu-item-has-children:hover .sub-menu > li > a:hover {
    background: var(--nav-toggle-hover-bg); 
    color: var(--nav-hover-text); 
}

.navbar-inverse .navbar-nav > .current-menu-item > a:first-child, 
.navbar-inverse .navbar-nav > .current-menu-item > a:first-child:focus, 
.navbar-inverse .navbar-nav > .current-menu-item > a:first-child:hover, 
#mobile-menu .sub-menu > .current-menu-item > a {
    color: #fff; 
    background: var(--nav-current-bg); 
}

#mobile-menu .search-title, 
#mobile-menu .goog-te-gadget, 
#mobile-menu .goog-logo-link, 
#mobile-menu .goog-logo-link:link {
    color: var(--main-nav-text); 
}

#mobile-menu .input-group input, 
#mobile-menu .input-group button, 
#mobile-menu #google_translate_element select {
    background-color: var(--nav-toggle-hover-bg); 
    color: var(--main-nav-text); 
    border-color: var(--nav-current-bg); 
}

#mobile-menu .input-group button:hover {
    background-color: var(--nav-current-bg); 
    color: var(--nav-hover-text); 
}

#mobile-menu .sub-menu a:hover{
    color: var(--nav-hover-text); 
}

#main-menu .sub-menu {
    background-color: var(--sub-menu-bg); 
}

#main-menu .sub-menu:before {
    border-bottom-color: var(--sub-menu-bg); 
}

#main-menu .sub-menu a {
    color: var(--sub-menu-text); 
}

#main-menu .sub-menu > .current-menu-item > a {
    background-color: var(--main-sub-current-bg); 
}

#main-menu .sub-menu a:hover {
    background-color: var(--sub-menu-hover-bg); 
}

#main-menu > .menu-highlight > a, 
#main-menu > .menu-text-highlight > a,
#mobile-menu > .menu-highlight > a,
#mobile-menu > .menu-text-highlight > a {
    color: var(--menu-text-highlight); 
}

#main-menu > .menu-background-highlight > a, 
#mobile-menu > .menu-background-highlight > a {
    background-color: var(--menu-bg-highlight); 
    color: var(--sub-menu-text); 
}

#main-menu > .menu-background-highlight > a:hover, 
#mobile-menu > .menu-background-highlight > a:hover {
    background-color: var(--menu-bg-highlight-hover); 
}

@media screen and (min-width: 768px){
    .U3A-top-layout .navbar-nav > li > .sub-menu {
        border-bottom: 2px solid var(--sub-menu-hover-bg); 
    }
}

 /* Header and intro */ 
.overlay {
    background-color: transparent; 
}

.underlay {
    background-color: var(--underlay-bg); 
}

.U3A-top-layout .logo, 
.U3A-side-layout .u3a-header-img .headerImg div {
    background: transparent; 
}

.U3A-top-layout .logo h1, 
.U3A-top-layout .logo h2, 
.u3a-header-img .headerImg .showtiny h1, 
.u3a-header-img .headerImg .showtiny h2 {
    color: #fff; 
    background-color: var(--header-text-bg-translucent); 
}

.u3a-intro {
    background-color: var(--intro-bg); 
}

.u3a-intro a {
    color: var(--intro-link-text);
}

.U3A-side-layout.u3a-with-header-img .u3a-page-title, 
.U3A-side-layout.u3a-no-header-img .u3a-header-img {
    background-color: #fff; 
}

.U3A-top-layout .u3a-social {
    border-top: 4px solid var(--intro-bg); 
}

.panel header, 
#comments header {
    background-color: inherit; 
}

/* Content */ 

.U3A-top-layout header .page-title {
    background: var(--title-bg); 
    color: var(--nav-bg-and-title-text); 
}

.main-content a {
    color: var(--link-text); 
}
 
.main-content a:hover, 
.u3a-intro a:hover {
    color: var(--link-text-hover); 
}

.colour-under {
    background-color: var(--title-bg); 
}
 
.social-colour-under, 
.header-colour-under {
    background-color: var(--img-social-sidebar-bg); 
}

.panel .page-title, 
#comments .page-title {
    border-bottom: 0px; 
}

.box, .box-wide {
    background-color: var(--box-bg); 
}

.box .boxpic {
    background: var(--box-pic-bg); 
}

.U3A-top-layout .boxpic a {
    background-color: var(--box-pic-a); 
}

.box .boxpic a:hover {
    background-color: var(--nav-bg-and-title-text); 
    color: #fff; 
}

.box h2, 
.box h2 a, 
.box-wide h2, 
.box-wide h2 a {
    color: var(--box-h2-text); 
}

.comment-form .alert-info {
    background-color: var(--sub-menu-bg); 
}

.gallery .gallery-item, 
.wp-caption {
    background: var(--img-social-sidebar-bg); 
    box-shadow: 1px 1px 1px var(--gallery-item-shadow); 
}

.widget .gallery .gallery-item, 
.widget .wp-caption, 
.u3a-gallery-disabled .gallery .gallery-item, 
.u3a-gallery-disabled .wp-caption {
    background: transparent; 
    box-shadow: unset; 
}

.U3A-top-layout .entry-content .entry-content-thumbnail, 
.U3A-top-layout .entry-summary .entry-content-thumbnail {
    background-color: var(--img-social-sidebar-bg); 
}

 /*** Sidebar ***/ 
.sidebar {
    background-color: var(--img-social-sidebar-bg); 
}

.sidebar a {
    color: var(--intro-link-text);
}

/*** Bootstrap elements ***/ 
.well, 
.u3a-colours.btn-default, 
.panel-default >.panel-heading {
    background-color: var(--panel-bg); 
    border-color: var(--panel-border); 
}

.btn-default:hover {
    background-color: var(--btn-default-hover-bg); 
    border-color: var(--panel-border); 
}

.panel-footer {
    background-color: var(--panel-footer-bg); 
}

.panel-default {
    border-color: var(--panel-border); 
}

 /*** Footer ***/ 
 
footer.site-footer {
    background-color: var(--footer-bg); 
    color: #000; 
}

footer.site-footer a {
    color:var(--link-text); 
}

footer.site-footer a:hover {
    color: var(--link-text-hover); 
}

footer .site-footer-inner {
    background: var(--footer-base-bg); 
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: var(--sub-menu-text); 
}
 
footer .input-group input, 
footer .input-group button, 
footer .input-group button:hover {
    border-color: var(--footer-button-border); 
}

footer .input-group button {
    border-left-color: var(--footer-button-border); 
}

footer .input-group button:hover {
    background: var(--footer-button-border); 
    color: #fff; 
}

footer a.u3a-logo-widget {
    border: 1px solid var(--footer-button-border); 
}

.U3A-top-layout .footer-widgets .sidebar-padder:nth-child(even) {
    background-color: var(--footer-even-bg); 
}

.U3A-top-layout .footer-widgets .sidebar-padder:nth-child(odd) {
    background-color: var(--footer-odd-bg); 
}

.U3A-top-layout .footer-widgets .sidebar-padder:first-child {
    background-color: transparent;
}