:root {
    --primary-color: #003e51;
    --secondary-color: #9ab7c1;
    --top-banner-bg-color: #ffcd00; /*NEW*/
    --accent-color: #E4f6ff; /*NEW*/
    --topic-menu-bg-color-hover: #F0F0F0; /*NEW*/
    /* LINK COLORS */
    --primary-links-color-hover: #00b0b9;
    --secondary-links-color-hover: #F09336;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #ffcd00;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #003e51; /*NEW*/
    --primary-button-color-hover: #002E47;
    --primary-button-text-color: #FEFEFE; /*NEW*/
    --primary-button-text-color-hover: #FEFEFE; /*NEW*/
    --primary-button-border-color: #003e51; /*NEW*/
    --primary-button-border-color-hover: #002E47; /*NEW*/
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #003e51; /*NEW*/
    --secondary-button-text-color-hover: #FEFEFE; /*NEW*/
    --secondary-button-border-color: #003e51; /*NEW*/
    --secondary-button-border-color-hover: #003e51; /*NEW*/
    /* NAVIGATION COLORS */
    --nav-bg-color: #003e51; /*NEW*/
    --nav-tab-color: #FEFEFE; /*NEW*/
    --nav-tab-color-hover: #ffcd00; /*NEW*/
    --nav-link-color: #003e51;
    --nav-link-color-hover: #00b0b9;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #00b0b9;
    --bg-color-2: #ffcd00;
    --bg-color-3: #9ab7c1;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(0 62 81 / .5);
    --rgba-color-2: rgb(255 205 0 / .5);
    --rgba-color-3: rgb(0 176 185 / .5);
    /* FONT FAMILY */
    --font-family-heading: "Roboto Slab", serif;
    --font-family-body: "Roboto", sans-serif;
    /* OTHER COLOR VARIABLES */
    --footer-font-color: #003e51; /*UNFORTUNATELY NAMED VARIABLE, IT'S ACTUALLY THE BACKGROUND COLOR*/
}

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 300;
}

#top-banner {
    color: #2b2b2b;
}

footer {
    background: var(--footer-font-color);
    font-size: var(--small-font-size);
}

.home-block a > span {
    font-family: var(--font-family-heading);
}

/* ::: CUSTOM FACULTY MENU STYLES ::: */

#textbookpagesmenu {
    height: 2.3em;
    font-family: 'Roboto Slab', sans-serif;
    font-weight: 300;
    background-color: #007B81;
    border-radius: 0;
    width: 100%;
    font-size: 16px;
    text-align: center;
    margin: 0 0 15px 0;
}

#textbookpagesmenu ul {
    height: auto;
    padding: 5px 0px;
    margin: 0px;
}

#textbookpagesmenu li { 
display: inline; 
padding: 0 10px 0 10px; 
}

#textbookpagesmenu a {
    text-decoration: none;
    text-transform:uppercase;
    color: #FFF;
}

#textbookpagesmenu a:hover {
    color: #003e51;
    background-color: #00B0B9;
    text-decoration: none;
    color: #fff;
}

/* ::: END CUSTOM FACULTY MENU STYLES ::: */

/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR X-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 75em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR XX-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 90em) {
}