/* Echo360 customizations of current CSU Division of IT theme */

/* Root Variables */
:root {
    --color-dark-green: #1E4D2B;
    --color-light-green: #C8C36D;
    --color-dark-yellow: #847f32;
    --color-light-yellow: #dddaa5;
    --color-yellow-border: #969139;
    --color-yellow-btn: #bab448;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray: #333;
    --color-light-gray: #ccc;
    --color-lighter-gray: #eee;
    --color-red: #a00;
    --color-light-red: #f33;
    --color-dark-red: #900;
    --color-success-border: #b2dc4d;
    --color-success-bg: #cce297;
    --color-success-text: #40550d;
    --color-success-icon: #15b140;
    --color-fail-border: #c82820;
    --color-fail-bg: #e7928d;
    --color-fail-text: #c82820;
    --color-warning-border: #efdc90;
    --color-warning-bg: #fffecc;
    --color-warning-text: #a9a014;
    --color-callout-border: #798;
    --color-callout-shadow: #999;
    --color-table-border: #eee;
    --color-table-row: #f8f8f8;
    --color-link-hover: #156140;
    --color-footer-bg: #255F35;
    --color-footer-text: #eee;
    --color-footer-link: #bcb;
    --color-footer-bottom-bg: #1E4D2B;
    --color-footer-bottom-link: #f8f8f8;
    --color-footer-bottom-link-hover: #ffffff;
}

/* General Styles */
body {
    color: var(--color-gray);
}

.screenreader {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.clear {
    clear: both;
}

.clearLeft {
    clear: left;
}

.floatRight {
    float: right;
}

.font-normal {
    font-weight: normal;
}

.hidden {
    display: none;
}

.alert {
    color: var(--color-dark-red);
}

.success {
    color: var(--color-success-text);
}

.success .fa.fa-check-circle:before {
    color: var(--color-success-icon);
}

code, pre {
    background-color: transparent;
}

/* Navbar Styles */
.top-navbar, .titlebar, .navbar-default {
    background-color: var(--color-dark-green);
}

.navbar-main .navbar-nav > li > a {
    color: var(--color-white);
}

@media only screen and (min-width: 1080px) {
    .navbar-nav {
        width: 75%;
    }
}

@media only screen and (min-width: 1200px) {
    .navbar-nav {
        width: 80%;
    }
}

@media only screen and (min-width: 1601px) {
    .navbar-nav {
        width: 85%;
    }
}

@media (max-width: 767px) {
    .navbar-main .navbar-nav > li > a:hover, body .navbar-main .dropdown-menu a:hover {
        color: var(--color-black);
    }
}

/* Brandbar Styles */
.brandbar {
    min-height: 70px;
    margin: 5px 0 -5px 0;
}

/* Topbar Styles */
.topbar {
    min-height: 5px;
    background-color: var(--color-light-green);
}

/* AZ List Styles */
div.azList {
    height: 35px;
    background-color: var(--color-light-green);
}

div.azList a {
    color: var(--color-black);
}

div.azList a:hover {
    color: var(--color-white);
}

div.azList .search .form-control {
    background: var(--color-light-yellow);
    color: var(--color-dark-yellow) !important;
    border: 1px solid var(--color-yellow-border) !important;
}

div.azList .search .btn {
    background-color: var(--color-yellow-btn);
    color: var(--color-dark-green);
    font-size: 15px;
}

/* Search Form Styles */
#searchForm {
    margin-top: 0.5em;
    float: right;
}

#searchForm input#q {
    margin: 0;
    border: 0;
    font-family: Arial;
    font-size: 12px;
    padding: 5px 8px;
    padding-top: 5px;
    line-height: 1.5em;
    color: var(--color-black);
    width: 15em;
}

#searchForm button {
    border: 0;
    font-size: 16px;
    padding: 0px 8px 4px 8px;
}

/* Header Styles */
header .social {
    display: none;
}

header #responsiveLogoSubsytem p, header #responsiveLogoSubsytem h2 {
    font-weight: bold;
    background-color: var(--color-dark-green);
}

header #responsiveLogoSubsytem h2 {
    font-size: 20px;
}

#responsiveLogo span.screenreader {
    color: var(--color-black);
    background-color: var(--color-white);
}

/* Menu Styles */
#menu-top-navigation ul li.current a {
    color: var(--color-white);
    background-color: var(--color-black);
}

/* User Info Styles */
@media only screen and (min-width: 700px) {
    #userInfo {
        position: absolute;
        right: 6rem;
        top: 6rem;
    }
}

#logout {
    position: absolute;
    right: 2rem;
    top: 6rem;
}

/* Banner Styles */
#banner {
    margin-top: 1.5em;
    font-size: 1.4em;
    font-weight: bold;
    color: var(--color-red);
}

/* Site Link Styles */
#SiteLink img {
    width: 117px;
    height: 24px;
    filter: invert(100%) hue-rotate(180deg) contrast(10);
}

#SiteLink span {
    color: var(--color-light-red);
    margin-left: 0.5rem;
    margin-top: 0.4rem;
    font-weight: bold;
}

/* Footer Styles */
footer .logo {
    width: 300px;
    max-width: 100%;
}

footer figure {
    margin-top: 3em;
}

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

footer.main-footer img {
    width: 300px;
}

footer.main-footer h1, footer.main-footer h2, footer.main-footer h3, footer.main-footer h4, footer.main-footer h5 {
    color: var(--color-footer-text);
}

footer.main-footer a {
    font-family: 'Lato';
    color: var(--color-footer-link);
}

footer.main-footer div.bottom-footer {
    background-color: var(--color-footer-bottom-bg);
    padding-bottom: 2em;
}

footer.main-footer div.bottom-footer ul li a {
    color: var(--color-footer-bottom-link);
}

footer.main-footer div.bottom-footer ul li a:hover {
    color: var(--color-footer-bottom-link-hover);
}

footer.main-footer div.bottom-footer ul {
    float: none;
}

footer.main-footer .wpb_column:last-child > div > div {
    padding-top: 0px;
}

/* Sidebar Styles */
.sidebar h3 {
    font-size: 1.4em;
    color: var(--color-dark-green);
}

/* Page Content Styles */
#pageContent {
    padding-bottom: 30px;
    background-color: var(--color-white);
}

#pageContent h1, #pageContent h2, #pageContent h3 {
    font-weight: 400;
}

#pageContent a {
    text-decoration: underline;
    font-weight: bold;
}

#pageContent a.expand, #pageContent a.collapse, #pageContent a.expandall, #pageContent a.collapseall {
    text-decoration: none;
    font-weight: normal;
}

#pageContent .expanded {
    display: block;
}

#pageContent .expand, #pageContent .expandall {
    background: url("../images/arrow-right-3.png") center left no-repeat;
    padding-left: 20px;
}

#pageContent .collapse, #pageContent .collapseall {
    background: url("../images/arrow-down-3.png") center left no-repeat;
    padding-left: 20px;
    display: block;
    visibility: visible;
}

/* Callout Styles */
.callout {
    border: 1px solid var(--color-callout-border);
    border-radius: 5px;
    margin: 10px;
    padding: 5px;
    box-shadow: 3px 3px 3px var(--color-callout-shadow);
    display: inline-block;
}

.callout .float-right {
    margin: 0;
    padding: 0;
}

.callout ul, .callout ol {
    margin-bottom: 0.5em;
}

.callout h2, .callout h3 {
    margin-top: 0;
}

/* Table Styles */
tr:nth-child(even) {
    background-color: var(--color-table-row);
}

th, td {
    padding: 3px;
    border: 1px solid var(--color-table-border);
}

table tbody tr:hover {
    color: var(--color-black);
    background-color: transparent;
    box-shadow: none;
}

table tbody tr:hover a, table tbody tr:hover a:hover, table tbody tr a:hover {
    color: var(--color-link-hover);
}

/* Form Styles */
input[type="checkbox"], input[type="radio"] {
    -ms-transform: scale(2);
    -moz-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    padding: 10px;
    margin-right: 10px;
}

label.required:before, .required-field:before {
    content: ' * ';
    color: #aa0000;
    float: left;
    font-size: 2em;
    height: 1em;
    line-height: 3rem;
}

/* Placeholder Styles */
::placeholder {
    color: var(--color-light-gray);
    opacity: 1;
}

::-webkit-input-placeholder {
    color: var(--color-light-gray);
}

::-moz-placeholder {
    color: var(--color-light-gray);
}

:-moz-placeholder {
    color: var(--color-light-gray);
}

:-ms-input-placeholder {
    color: var(--color-light-gray);
}

::-ms-input-placeholder {
    color: var(--color-light-gray);
}

/* Icon Styles */
.ico_success {
    padding-left: 20px;
    background: url(../images/success.jpg) no-repeat left center;
}

.ico_cancel {
    padding-left: 20px;
    background: url(../images/error.jpg) no-repeat left center;
}

.ico_error, .ico_construction {
    padding-left: 20px;
    background: url(../images/ico_error.jpg) no-repeat left center;
}

/* Media Queries */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        width: auto;
    }

    #pageContent p, #pageContent ul, #pageContent li, #pageContent figure, #pageContent table, #pageContent blockquote {
        font-size: 1.05rem;
    }
}

@media (min-width: 1200px) {
    #pageContent p, #pageContent ul, #pageContent li, #pageContent figure, #pageContent table, #pageContent blockquote {
        font-size: 1.1rem;
    }
}

@media (min-width: 1401px) {
    .container {
        width: 1368px;
        max-width: 100%;
    }
}

@media (min-width: 1601px) {
    .container {
        width: 1568px;
        max-width: 100%;
    }
}

@media print {
    footer {
        display: none;
    }
}

/* Debug Styles */
span[id$="lblDebug"] {
    display: block;
    background-color: var(--color-light-gray);
}

span[id$="lblMessage"] {
    display: block;
    background-color: var(--color-lighter-gray);
}

/* Miscellaneous Styles */
.is-open-right #canvas_homepage, .is-open-right #content, .is-open-right #site_footer, .is-open-right .main-container {
    -webkit-filter: none;
    filter: none;
}

a[href^="mailto:"], .mailto {
    padding: 5px 20px 5px 0;
    background: transparent url(../images/icon_mailto.gif) no-repeat center right !important;
}

a[href$=".pdf"] {
    background: url("../images/icon_pdf.gif") center right no-repeat !important;
    padding-right: 20px;
}

.external {
    background: white url("../images/external-green.png") center right no-repeat !important;
    padding-right: 20px;
}

.newWindow {
    background: transparent url("../images/applications-green.png") center right no-repeat !important;
    padding-right: 20px !important;
}