/*
   Styles for Education section
*/


/* Section banner. */

@media (min-width: 768px) { #colour-banner { background-color: var(--color-education-bg); } }


/* Main menu. */

#main-menu li#education { background-color: var(--color-education-bg); }
#main-menu li#education > a { color: var(--color-education-fg); font-weight: 400; }


/* Navigation breadcrumbs and related links. */

#crumbs { background-color: rgb(245 245 245); } /* Needs to be opaque for sticky positioning. */
@media (min-width: 768px) { #crumbs { background-color: rgb(153 0 0 / 0.075); } }
#content .relatedlinks a { background-color: rgb(153 0 0 / 0.075); }
#content .relatedlinks a:hover { background-color: rgb(153 0 0 / 0.15); }


/* Side menu. */

.side-menu a.current,
.side-menu .side-submenu.expanded a.current,
.side-menu .side-submenu.expanded .side-submenu.expanded a.current
   { background-color: rgb(153 0 0 / 0.8); color: var(--color-usc-gold); font-weight: bold; border-right: 5px solid var(--color-education-bg); }
.side-menu a.current:hover,
.side-menu .side-submenu.expanded a.current:hover,
.side-menu .side-submenu.expanded .side-submenu.expanded a.current:hover
   { background-color: rgb(153 0 0 / 0.8); }


/* Content. */

#content a { font-weight: 400; background-color: rgb(153 0 0 / 0.1); }
#content a:hover { background-color: rgb(153 0 0 / 0.3); }


/* Styles for quiz questions. */

#quiz .quizquestion table
   { margin-left: 2em; margin-bottom: 2em; }
#quiz .quizquestion td
   { text-align: left; vertical-align: top;
     padding-bottom: 0.5em; padding-left: 5px; }
#quiz .quizquestion label { font-size: 125%; }

#content .quizresults { display: flex; flex-wrap: wrap;
                        justify-content: flex-start; margin: 2em 0; }
#content .quizresults p { margin: 0; padding: 0; }

#content .quizresults p.quizoption
   { flex: 10 1 50%; text-align: right; padding-right: 1em; }
#content .quizresults p.quizscore
   { flex: 1 10 30%; }

#content .quizresults p.quizscore span
   { font-size: 80%; color: #e0e0e0; background-color: #e0e0e0; }
@media (min-width: 768px)
   { #content .quizresults { justify-content: center; }
     #content .quizresults p.quizoption { flex: 10 1 48%; }
     #content .quizresults p.quizscore { flex: 1 10 48%; } }