/*
   Styles for Education section

          Dark: #82591f
         Light: #ba9e66
   20% lighter: #edd199
*/

/* Section banner. */

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


/* Main menu. */

#main-menu li#education { background-color: #ba9e66; }
#main-menu li#education a { color: white; }


/* Navigation breadcrumbs and related links. */

#crumbs { background-color: rgb(248, 245, 240); } /* Needs to be opaque for sticky positioning. */
@media (min-width: 768px) { #crumbs { background-color: rgb(186 158 102 / 0.1); } }
#content .relatedlinks a { background-color: rgb(186 158 102 / 0.1); }
#content .relatedlinks a:hover { background-color: rgb(186 158 102 / 0.2); }


/* 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: #ba9e66; color: white; border-right: 5px solid #82591f; }
.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: #ba9e66; }


/* Content. */

#content a { color: #82591f; }
#content a:hover { background-color: #edd199; }


/* 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%; } }