/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*-------------------------------------------------------------------------------
    BASIC OBJECTS / ELEMENTS
-----------------------------------------------------------------------------------*/

/*-----------------------------------
    ATI SKIP NAVIGATION
---------------------------------*/

.dark-mode #skipnav {
    background-color: var(--black);
    color: var(--black-text);
}


/*---------------------------------------------------------------------------------------------
    NAVIGATION
--------------------------------------------------------------------------------------------*/
/*-- main nav bar -- */
.dark-mode:not(.mobile) #main-nav li:hover, .dark-mode:not(.mobile) #main-nav li:focus-within,
.dark-mode:not(.mobile) #main-nav li.main-tab.active,
.dark-mode:not(.mobile) #main-nav li.main-tab.pinned,
.dark-mode:not(.mobile) #main-nav li:hover a.tab-link,
.dark-mode:not(.mobile) #main-nav li:focus-within a.tab-link,
.dark-mode:not(.mobile) #tab-social:hover, .dark-mode:not(.mobile) #tab-social:focus-within {
    background-color: var(--dark-mode-gray);
    color: var(--dark-mode-medium-blue-headers);
    /*border: solid 1px var(--border-dark-mode);*/
    border-bottom: 0px;
}

#top.dark-mode:not(.mobile) #main-nav li.main-tab.active a.tab-link, #top.dark-mode:not(.mobile) #main-nav li.main-tab.pinned a.tab-link,
#top.dark-mode:not(.mobile) #main-nav li:hover a.tab-link, #top.dark-mode:not(.mobile) #main-nav li:focus-within a.tab-link,
#top.dark-mode:not(.mobile) #main-nav li.details-only:hover .summary-text, #top.dark-mode:not(.mobile) #main-nav li.details-only:focus-within .summary-text,
#top.dark-mode:not(.mobile) #main-nav li.main-tab.pinned summary * {
    color: var(--dark-mode-medium-blue-headers);
}

.dark-mode.desktop #main-nav .extended-navigation a {
    color: var(--dark-mode-medium-blue-headers);
}

.dark-mode #main-nav button.show-hide-extended:focus {
    outline: dotted 2px var(--white);
}

.dark-mode #main-nav button:focus {
    outline: dotted 2px var(--titan-blue);
    outline-offset: var(--outline-offset);
}

/*-- extended navigation area */

#top.dark-mode #main-nav .extended-navigation p:hover {
    color: var(--dark-mode-medium-blue-headers);
    background-color: var(--default-dark);
}

#top.dark-mode #main-nav .extended-navigation a:focus {
    outline: dotted 2px var(--orange);
}

#top.dark-mode.desktop #main-nav .main-tab .extended-navigation,
#top.dark-mode.desktop #main-nav .main-tab.pinned .extended-navigation,
#top.dark-mode.desktop #main-nav .main-tab.active .extended-navigation {
    background-color: var(--dark-mode-gray);
    color: var(--dark-mode-gray-text);
    /*border: solid 1px var(--border-dark-mode);*/
    border-top: 0px;
}

    #top.dark-mode.desktop #main-nav .main-tab .extended-navigation a:hover {
        text-decoration-color: var(--titan-blue-dark-text);
    }

#top.dark-mode #main-nav .main-tab .extended-navigation .headline {
    color: var(--dark-gray-text);
}

#top.dark-mode #main-nav .extended-navigation p {
    border-color: var(--slate);
}
/* -- lower scroll navigation  ---*/
.dark-mode.desktop .lower-scroll #navigation,
.dark-mode.desktop .lower-scroll #main-nav,
.dark-mode.desktop .lower-scroll #main-nav a.tab-link,
.dark-mode.desktop .lower-scroll #main-nav button.tab-link,
.dark-mode.desktop .lower-scroll #navigation a,
.dark-mode.desktop .lower-scroll #navigation .lower-scroll-csuflogo,
{
    background-color: var(--titan-blue-dark);
    color: var(--titan-blue-dark-text);
}

.dark-mode:not(.mobile) .social-container {
    background-color: var(--dark-mode-gray);
    color: var(--dark-mode-gray-text);
}

    
    .dark-mode:not(.mobile) .social-container a {
        color: var(--titan-blue-dark-text);
    }

    .dark-mode:not(.mobile) .social-container li.linktree a {
        background-color: unset;
    }

    .dark-mode.desktop .lower-scroll #main-nav .main-tab .extended-navigation a {
        background-color: inherit;
        color: var(--dark-mode-medium-blue-headers);
    }

.dark-mode.desktop .lower-scroll #lower-scroll-lnksearch {
    background-color: var(--cool-gray);
    color: var(--cool-gray-text);
}

.dark-mode.desktop .lower-scroll #main-nav li:hover,
.dark-mode.desktop .lower-scroll #main-nav li:hover a.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li:hover button.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li:hover button.show-hide-extended,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active a.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active button.tab-link,
.dark-mode.desktop .lower-scroll #main-nav li.main-tab.active button.show-hide-extended.active {
    color: var(--dark-mode-medium-blue-headers);
    background-color: var(--default-dark);
    /*text-decoration: underline 2px var(--orange);*/
    transition: all 200ms ease-in-out;
}

/*-- SOCIAL MEDIA -- */
.dark-mode #tab-social, .dark-mode #tab-social details, .dark-mode #tab-social summary {
    background-color: inherit;
    color: inherit;
}

    .dark-mode #tab-social .social-container {
        background-color: var(--dark-mode-gray);
        color: var(--dark-mode-gray-text);
        border: solid 1px var(--border-dark-mode);
        border-top: solid 4px var(--dark-mode-medium-blue-headers);
    }

.dark-mode:not(.mobile) .social-container a {
    background-color: inherit;
    color: var(--titan-blue-dark-text);
}


.dark-mode.mobile header #navigation.open #website-lower-scroll-name a {
    color: var(--light-gray);
}

.dark-mode.tablet #main-nav .main-tab a.tab-link:hover,
.dark-mode.tablet #main-nav .main-tab button.tab-link:hover,
.dark-mode.tablet #main-nav .main-tab.active .extended-link:hover a,
.dark-mode.tablet #main-nav .main-tab.active .sub-link:hover a,
.dark-mode.mobile #main-nav .main-tab a.tab-link:hover,
.dark-mode.mobile #main-nav .main-tab button.tab-link:hover,
.dark-mode.mobile #main-nav .main-tab.active .extended-link:hover a,
.dark-mode.mobile #main-nav .main-tab.active .sub-link:hover a {
    color: var(--cool-gray-text);
    background-color: var(--cool-gray);
    transition: all 200ms ease-in-out;
}

.dark-mode.mobile #main-nav .extended-navigation p:hover {
    background-color: inherit;
}

.dark-mode.tablet #main-nav.navigation-tablet button.show-hide-extended.active,
.dark-mode.mobile #main-nav.navigation-mobile button.show-hide-extended.active {
    background-color: var(--dark-warm-gray);
    color: var(--dark-warm-gray-text);
    transition: all 200ms ease-in-out;
}

.dark-mode.tablet #main-nav .main-tab:hover .extended-navigation a,
.dark-mode.tablet #main-nav .main-tab.active .extended-navigation a {
    color: var(--warm-gray-text);
    background-color: var(--warm-gray);
    transition: all 200ms ease-in-out;
}

/*--------------------------------------------------------------------
    RESOURCES AND SEARCH PAGES
-----------------------------------------------*/

.dark-mode #lnksearch:hover {
    background-color: var(--dark-mode-medium-blue);
    color: var(--dark-mode-medium-blue-text);
}

.dark-mode #lnksearch:focus {
    background-color: var(--dark-mode-medium-blue);
    color: var(--dark-mode-medium-blue-text);
    outline: solid 2px var(--orange);
    outline-offset: .25rem;
}

.dark-mode .campus-portal-link a:hover, .dark-mode .quicklinks:hover {
    text-decoration-color: var(--white);
}

.dark-mode .campus-portal-link a:focus, .dark-mode .campus-portal-link a:active, .dark-mode .quicklinks:focus, .dark-mode .quicklinks:active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--orange);
}

.dark-mode #website-quicklinks,
.dark-mode #website-search,
.dark-mode #website-search fieldset {
    background-color: var(--default-dark);
    color: var(--default-dark-text);
    transition: all 200ms ease-in-out;
}

    .dark-mode #website-search fieldset {
        border-color: var(--titan-blue-dark);
    }

.dark-mode .gsc-control-cse {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
}

.dark-mode #quicklinks-container ul li a {
    background-color: var(--onyx);
    color: var(--onyx-text);
}

    .dark-mode #quicklinks-container ul li a:hover {
        text-decoration: underline solid 2px var(--white);
        background-color: var(--ash);
        color: var(--ash-text);
    }

.dark-mode #website-search fieldset label:focus-within {
    color: var(--light-blue);
}

/*-----------------------------------------------
    MAIN CONTENT / SITE WIDE CONTENT
*/
/*
.dark-mode main a {
    color: var(--white);
    text-decoration-color: var(--white);
    text-decoration-style: dotted;
}

    .dark-mode main a:hover,
    .dark-mode #block-container a:hover {
        color: var(--light-warm-gray);
        text-decoration-color: var(--light-blue);
        text-decoration-style: solid;
        text-decoration-thickness: 3px;
    }

.dark-mode main .headline,
.dark-mode #block-container .headline {
    color: var(--white);
}
    */
.dark-mode .sitewide-links .site-wide-item:hover {
    background-color: var(--ash);
    color: var(--ash-text);
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                               END OF CSS FILE                                       +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE DO IT IN THE CSS OVERRIDE FILES    +
+     CHANGES TO THIS FILE WILL BE DELETED UPON NEXT TEMPLATE UPDATE                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/