:root {
  --headerBaseBackgroundColor: #3355AA;
  --headerBaseBackgroundImage: url("/includes/css/site_themes/4th_of_july/t_pink_stars.jpg");
  --headerGradientLeftColor: rgba(0,0,100, .45);       /* #77AAEE; */
  --headerGradientRightColor: #bb0000;       /* #3355AA; */
  --headerLinkColor: #eeeeee;
  --headerLinkShadowColor1: #0000cc;         /* #35a; */
  --headerLinkShadowColor2: #0000cc;         /* #35a; */
  --headerLinkShadowColor3: #ff4444;         /* #35a; */
  --headerLinkShadowColor4: #ff4444;         /* #f00; */
  --headerLinkHoverColor: white;             /* yellow; */
  --headerLinkHoverShadowColor1: navy;       /* #f00; */
  --headerLinkHoverShadowColor2: navy;       /* #f00; */
  --headerLinkHoverShadowColor3: red;        /* #f88; */
  --headerLinkHoverShadowColor4: red;        /* #f88; */
  --headerTrimColor: red;                    /* #35a; */

  --topNavBackgroundColor: #aa0000;          /* #35a; */
  --topNavBorderBottomColor: white;          /* #7ae; */
  --topNavBorderTopColor: white;             /* #7ae; */
  --topNavLinkColor: #eeeeee;                /* #9cf; */
  --topNavLinkHoverColor: white;             /* #7ae; */
  --topNavLinkHoverBackgroundColor: #0000aa; /* #7ae; */

  --loggedInTextColor: #eeeeee;
  --loggedInLinkColor: white;
  --loggedInLinkHoverColor: white;

  --mobileLoginBannerBackgroundColor: #aa0000;
  --mobileLoginBannerLinkColor: white;
  --mobileLoginBannerLinkHoverColor: white;
  --mobileLoginBannerTextColor: white;

  --mobileSideMenuRightColor: #ff8888;
  --mobileSideMenuBaseGradientLeftColor: #aa0000;
  --mobileSideMenuBaseGradientRightColor: #880000;
  --mobileSideMenuLinkGradientLeftColor: red;
  --mobileSideMenuLinkGradientRightColor: #aa0000;
  --mobileSideMenuLinkGradientTopTrimColor: blue;
  --mobileSideMenuLinkGradientBottomTrimColor: white;

  --breadCrumbBackgroundColor: #ffffff;
  --breadCrumbLinkColor: #3355cc;
  --breadCrumbTextColor: #444444;

  --mainContentBackgroundColor: navy; /* #d2b48c = tan */
  --mainContentBackgroundImage: url("/includes/css/site_themes/4th_of_july/t_navy_blue_stars.gif"); /* url("/pictures/backgrounds/beige_bg.jpg"); */
  --mainContentTrimColor: red; /* #35a; */

  --homePageContentContainerBackgroundColor: white;
  --homePageContentContainerBorderTopColor: red;
  --homePageContentContainerBorderLeftColor: red;
  --homePageContentContainerBorderRightColor: red;
  --homePageContentContainerBorderBottomColor: red;
  --homePageContentContainerTextColor: navy;

  --innerContentBackgroundColor: white;
  --innerContentBorderTopColor: #cccccc;
  --innerContentBorderLeftColor: #aaaaaa;
  --innerContentBorderRightColor: #888888;
  --innerContentBorderBottomColor: #666666;
  --innerContentTextColor: #333333;

  --footerBackgroundColor: #990000;  /* #35a; */
  --footerLinkColor: #dddddd;
  --footerLinkHoverColor: white;  /* yellow */
  --footerTextColor: pink;
  --footerTrimColor: white;
  --footerLinkTrimMobileColor: #ff5555;
}


html {
    background-color: var(--footerBackgroundColor);
}
html body {
    background-color: var(--footerBackgroundColor); 
}

html .jdspad-desktop-login-container,
html .logged-in-text {
    color: var(--loggedInTextColor);
}
    html .jdspad-desktop-login-container a,
    html .logged-in-text a {
        color: var(--loggedInLinkColor);
    }
        html .jdspad-desktop-login-container a:hover {
            color: var(--loggedInLinkHoverColor);
        }

html body header {
    background-color: #888888;
}
    html body header .jdspad-mobile-login-container {
        background-color: var(--mobileLoginBannerBackgroundColor);
        color: var(--mobileLoginBannerTextColor);
    }
        html body header .jdspad-mobile-login-container a {
            color: var(--mobileLoginBannerLinkColor);
        }
            html body header .jdspad-mobile-login-container a:hover {
                color: var(--mobileLoginBannerLinkHoverColor);
            }

html header nav > section,
html .jdspad-header {
    background-color: var(--headerBaseBackgroundColor);  /* Fallback color */
    background-image: var(--headerBaseBackgroundImage);  /* Fallback image */
    background-image: linear-gradient(to right, var(--headerGradientLeftColor), var(--headerGradientRightColor)), var(--headerBaseBackgroundImage);
    border-bottom: 1px var(--headerTrimColor) solid;
}
    html header nav > section a,
    html .jdspad-header a {
        color: var(--headerLinkColor);
        font-family: Georgia, Serif;
        font-style: normal;  /* Not italic */
        text-shadow: 1px 1px var(--headerLinkShadowColor1), 2px 2px var(--headerLinkShadowColor2), 3px 3px var(--headerLinkShadowColor3), 4px 4px var(--headerLinkShadowColor4);
    }
        html header nav > section a:before,
        html .jdspad-header a:after {
            content: " ✭ ";
        }
        html header nav > section a:after,
        html .jdspad-header a:after {
            content: " ✭ ";
        }
        html header nav > section a:hover,
        html .jdspad-header a:hover {
            color: var(--headerLinkHoverColor);
            text-shadow: 1px 1px var(--headerLinkHoverShadowColor1), 2px 2px var(--headerLinkHoverShadowColor1), 3px 3px var(--headerLinkHoverShadowColor1), 4px 4px var(--headerLinkHoverShadowColor1);
        }

html .jdspad-top-navigation ul,
html .jdspad-top-nav {
    background-color: var(--topNavBackgroundColor);
    border-bottom: 1px var(--topNavBorderBottomColor) solid;
    border-top: 1px var(--topNavBorderTopColor) solid;
}
    html .jdspad-top-navigation ul li a,
    html .jdspad-top-nav a {
        color: var(--topNavLinkColor);
        font-style: normal;  /* Not italic */
    }
        html .jdspad-top-navigation ul li a:hover,
        html .jdspad-top-nav a:hover {
            background-color: var(--topNavLinkHoverBackgroundColor);
            color: var(--topNavLinkHoverColor);
        }

html .jdspad-side-menu ul {
    background-image: linear-gradient(to bottom right, var(--mobileSideMenuBaseGradientLeftColor), var(--mobileSideMenuBaseGradientRightColor));
    border-right-color: var(--mobileSideMenuRightColor);
}
    html .jdspad-side-menu ul li a {
        background-image: linear-gradient(to bottom right, var(--mobileSideMenuLinkGradientLeftColor), var(--mobileSideMenuLinkGradientRightColor));
        border-top: 2px var(--mobileSideMenuLinkGradientTopTrimColor) solid;
        border-bottom: 5px var(--mobileSideMenuLinkGradientBottomTrimColor) solid;
        font-family: Georgia, serif;
        padding: 15px 0;
        text-shadow: 3px 3px #0000aa;
    }
        html .jdspad-side-menu ul li a:hover:after,
        html .jdspad-side-menu ul li a:hover:before {
            /* content: " ✭ "; */
        }

html body > section,
html .content-outer {
    background-image: var(--mainContentBackgroundImage);
    border-top: 1px var(--mainContentTrimColor) solid;
    border-bottom: 1px var(--mainContentTrimColor) solid;
}

html .bread-crumbs-inner {
    background-color: var(--breadCrumbBackgroundColor);
    border-top: 1px #cccccc solid;
    border-left: 1px #aaaaaa solid;
    border-right: 1px #888888 solid;
    border-bottom: 1px white solid;
    color: var(--breadCrumbTextColor);
}
    html .bread-crumbs-inner a {
        color: var(--breadCrumbLinkColor);
    }

html.home-page body section section.content-container {
    background-color: var(--homePageContentContainerBackgroundColor);
    border-top: 10px var(--homePageContentContainerBorderTopColor) solid;
    border-left: 10px var(--homePageContentContainerBorderLeftColor) solid;
    border-right: 10px var(--homePageContentContainerBorderRightColor) solid;
    border-bottom: 10px var(--homePageContentContainerBorderBottomColor) solid;
    color: var(--homePageContentContainerTextColor);
}
    html body section section.content-container .left-content-block h2 {
        margin-top: 10px;
    }

html.home-page .leader-board {
    border: 1px #ff4444 solid;
    margin-top: 10px;
}
html.home-page .leader-board td.title h3 {
    color: #aa0000;
}
html.home-page .leader-board tr:nth-child(even) td {
    background-color: #ff8888;
    color: white;
}
html.home-page .leader-board tr:nth-child(even) td a {
    color: white;
}
html.home-page .leader-board tr:nth-child(odd) td {
    background: white;
    color: #aa0000;
}
html.home-page .leader-board tr:nth-child(odd) td a {
    color: #aa0000;
}


html .content,
html .content-inner
{
    background-color: var(--innerContentBackgroundColor);
    border-top: 1px var(--innerContentBorderTopColor) solid;
    border-left: 1px var(--innerContentBorderLeftColor) solid;
    border-right: 1px var(--innerContentBorderRightColor) solid;
    border-bottom: 1px var(--innerContentBorderBottomColor) solid;
    color: var(--innerContentTextColor);
}

html footer {
    background-color: var(--footerBackgroundColor);
}
    html footer nav,
    html .jdspad-footer {
        background: var(--footerBackgroundColor);
        border-top: 1px var(--footerTrimColor) solid;
        color: var(--footerTextColor);
        font-size: 0;
    }
        html footer nav a,
        html .jdspad-footer a {
            color: var(--footerLinkColor);
            font-size: 16px;
            padding-bottom: 3px;
            padding-top: 3px;
            border-bottom: 6px transparent solid;
            border-top: 6px transparent solid;
        }
            html footer nav > a:before,
            html .jdspad-footer > a:before {
                content: "  ✭  ";
                white-space: pre;
            }
 
            html footer nav > a:first-child:before,
            html .jdspad-footer > a:first-child:before {
                content: '';
            }
            
            html footer nav a:hover,
            html .jdspad-footer a:hover {
                color: var(--footerLinkHoverColor);
                
                border-bottom: 6px #3366ff solid;
                /* border-top: 6px #3366ff solid; */
                text-decoration: none;
            }
            html footer nav p,
            html .jdspad-footer p {
                margin: 30px 0;
            }

@media all and (max-width: 500px) {
    html header nav > section a:before,
    html .jdspad-header a:after {
        content: '';
    }
    html header nav > section a:after,
    html .jdspad-header a:after {
        content: '';
    }
}

@media all and (max-width: 520px) {
    html footer nav,
    html .jdspad-footer {
        padding-top: 0;
        padding-bottom: 0;
    }

    html footer nav a,
    html .jdspad-footer a {
        font-size: 28pt;
        border-top: 1px var(--footerLinkTrimMobileColor) solid;
        border-bottom: 1px var(--footerLinkTrimMobileColor) solid;
        padding: 10px 0;
    }
        html footer nav a:hover,
        html .jdspad-footer a:hover {
            border-top: 1px var(--footerLinkTrimMobileColor) solid;
            border-bottom: 1px var(--footerLinkTrimMobileColor) solid;
            padding: 10px 0;
        }
        html footer nav a:before,
        html .jdspad-footer a:before {
            content: '';
        }
    html footer nav p,
    html .jdspad-footer p {
        margin: 0;
    }
}