@charset "UTF-8";
/*
 * -----------------------------------------------------------------------
 *   mathquiz.css | css specifications
 * -----------------------------------------------------------------------
 *
 *   Copyright (C) Andrew Mathas and Donald Taylor, University of Sydney
 *
 *   Distributed under the terms of the GNU General Public License (GPL)
 *               http://www.gnu.org/licenses/
 *
 *   This file is part of the Math_quiz system.
 *
 *   <Andrew.Mathas@sydney.edu.au>
 *   <Donald.Taylor@sydney.edu.au>
 * ----------------------------------------------------------------------
 */
.dazzle {
  color: #FF1A1A; }

/* container for the full quiz page */
div.quiz_page {
  position: absolute;
  left: 5%;
  top: 26px;
  width: 90%;
  margin-top: 16px; }

/* side menu with question buttons and copyright message */
div.side_menu {
  float: left;
  font-size: 10px;
  font-weight: normal;
  margin: 0 0ex 0 3ex;
  overflow: hidden;
  width: 100px;
  display: block;
  clear: left;
  /* question buttons */ }
  div.side_menu > div {
    color: #CE1126;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 0.8ex; }
  div.side_menu ul {
    list-style: none;
    padding-left: 0;
    padding-bottom: 10px;
    /*
     * li:before {
     *     color: $Heading;
     *     content: $ListMarker;
     *     padding-left: 0;
     *     padding-right: 1ex;
     *     display:inline-block;
     * }
     */ }
    div.side_menu ul li {
      color: #000000;
      font-size: 14px;
      text-align: left;
      word-wrap: break-word; }
    div.side_menu ul li:hover {
      text-decoration: underline; }
  div.side_menu div.buttons {
    width: 100%;
    height: 100%;
    margin-bottom: 6px;
    display: table;
    /* javascript cannot access the css of pseudo elements, so we put the button
     * content inside a span coloured black. It theory it would be easier to
     * make the button label equal to the content and the marker the innerHTML
     * for the div but I could not figure out how to align everything properly
     * this way.
     */ }
    div.side_menu div.buttons div.button {
      background-color: #FFF8DC;
      border-radius: 5px;
      color: #000000;
      border: solid #F2BB66 2px;
      display: table-cell;
      float: left;
      font-size: 12px;
      font-weight: normal;
      height: 30px;
      /* needed so that float does not break vertical alignment */
      line-height: 30px;
      margin-left: 5px;
      margin-top: 5px;
      position: relative;
      text-align: center;
      width: 30px; }
    div.side_menu div.buttons div.button span {
      color: #000000;
      text-decoration: none; }
    div.side_menu div.buttons div.button:hover {
      border: solid #5B2C6F 2px !important;
      text-decoration: underline; }
    div.side_menu div.buttons div.button:after {
      bottom: -35%;
      content: attr(content);
      height: 100%;
      position: absolute;
      width: 100%;
      right: -35%;
      clear: right; }
    div.side_menu div.buttons div.button-selected {
      border: solid #B33C00 2px;
      color: #FF0000; }
  div.side_menu table.marking_key {
    margin-left: 2px;
    clear: left; }
  div.side_menu table.marking_key > tr td {
    padding-right: 2px !important; }
  div.side_menu div.school {
    font-family: arial, verdana, helvetica;
    font-weight: normal;
    font-size: x-small;
    color: #e63900;
    text-align: center;
    padding: 10px 0px 0px 0px; }
    div.side_menu div.school A, div.side_menu div.school A:link, div.side_menu div.school A:visited {
      font-family: arial, verdana, helvetica;
      font-weight: normal;
      font-size: x-small;
      color: #e63900;
      text-align: center;
      padding: 10px 0px 0px 0px; }
  div.side_menu div.copyright {
    font-family: arial, verdana, helvetica;
    font-size: x-small;
    font-weight: normal;
    text-align: center;
    color: #000000; }
  div.side_menu div.copyright A, div.side_menu div.copyright A:link, div.side_menu div.copyright A:visited {
    text-decoration: none;
    color: #0000FF;
    font-weight: bold; }

li:hover.nolink, div:hover.nolink {
  text-decoration: none !important; }

li.nolink, div:hover.nolink {
  color: #FF0000 !important; }

span.question_label {
  color: #FF0000;
  font-size: 12px;
  font-variant: small-caps;
  font-weight: normal;
  margin-bottom: 10px;
  text-align: left; }

/* container for the quiz questions, answers and responses */
div.quiz_questions {
  display: grid;
  /* specifications for the divs containing questions, answers and responses */ }
  div.quiz_questions div.quiz_header {
    padding-right: 1%; }
    div.quiz_questions div.quiz_header div.quiz_title {
      color: #CE1126;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      margin-bottom: 0.8ex;
      min-width: 400px; }
    div.quiz_questions div.quiz_header span.arrows {
      color: #FF0000;
      float: right;
      right: 5%;
      font-size: 12px;
      margin-right: 20px; }
    div.quiz_questions div.quiz_header span.arrows A {
      text-decoration: none !important; }
    div.quiz_questions div.quiz_header span.arrows A {
      color: #FF0000;
      font-size: 12px; }
    div.quiz_questions div.quiz_header span.arrows A:hover {
      color: #990033;
      text-decoration: underline; }
  div.quiz_questions div.quiz_list {
    color: #CE1126;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: left; }
    div.quiz_questions div.quiz_list ul {
      list-style: none !important; }
      div.quiz_questions div.quiz_list ul li:before {
        content: "➣";
        color: #CE1126;
        padding-left: 0;
        padding-right: 1ex;
        margin-left: -1em; }
      div.quiz_questions div.quiz_list ul li {
        list-style-image: none !important;
        overflow: visible; }
      div.quiz_questions div.quiz_list ul li:hover {
        color: #FF0000; }
  div.quiz_questions div.question {
    position: relative;
    display: none;
    margin: 0; }
    div.quiz_questions div.question form {
      padding: 10px 0 0 0; }
      div.quiz_questions div.question form table tr {
        vertical-align: top; }
        div.quiz_questions div.question form table tr td {
          vertical-align: top; }
    div.quiz_questions div.question div.question_choices {
      padding-left: 10px;
      padding-right: 15px;
      text-align: left; }
    div.quiz_questions div.question table.question_choices td {
      padding-right: 0;
      vertical-align: baseline; }
    div.quiz_questions div.question table.question_choices td:nth-child(3n+1) {
      padding-right: 6px; }
    div.quiz_questions div.question td.brown {
      color: #CC3300; }
    div.quiz_questions div.question div.response {
      background-color: #E9E0D8;
      border: solid #C9A798 2px;
      border-radius: 5px;
      display: none;
      padding: 1ex; }
      div.quiz_questions div.question div.response div {
        text-align: left;
        color: #000000; }
      div.quiz_questions div.question div.response ol {
        counter-reset: list;
        list-style-type: none;
        margin: 0;
        padding: 0 !important; }
        div.quiz_questions div.question div.response ol li:before {
          color: #CC3300;
          content: counter(list,lower-latin) ") ";
          counter-increment: list;
          padding: 0 0 0 0; }
        div.quiz_questions div.question div.response ol li {
          text-align: left;
          color: #000000;
          padding-right: 2em; }
          div.quiz_questions div.question div.response ol li em {
            color: #FF1A1A; }

input.input_button {
  background-color: #FFF8DC;
  border: solid #F2BB66 2px;
  border-radius: 5px;
  margin-right: 40px;
  padding-right: 0 4px 0 4px; }

/* warning messages - for the noscript error */
div.warning {
  background-color: #EC7063;
  border: 2px solid #CE1126;
  color: #FFCC00;
  padding: 2mm;
  top: 20%;
  left: 20%;
  z-index: 999;
  position: absolute; }

/* Drop down menu for quiz list modified from http://www.mrc-productivity.com/techblog/?p=1049 */
nav.breadcrumbs {
  margin: 0 auto;
  padding: 4px 0 4px 0;
  height: 20px;
  z-index: 99;
  position: absolute;
  left: 5%;
  top: 10px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
  min-width: 600px;
  /* Displays the drop-down menu on hover
   * ul > li:hover ul { display: block; }
   */ }
  nav.breadcrumbs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    /* Ensures that the menu doesn’t affect other elements */ }
    nav.breadcrumbs ul li {
      text-align: center;
      /* All text is placed in the center of the box */
      margin: 0;
      -webkit-transition: all 0.2s;
      padding: 2px 4px 2px 18px;
      background-color: #CE1126;
      position: relative;
      float: left; }
      nav.breadcrumbs ul li a {
        text-decoration: none;
        display: contents;
        -webkit-transition: all 0.5s; }
      nav.breadcrumbs ul li span {
        color: #CE1126; }
      nav.breadcrumbs ul li ul {
        display: none;
        /* Hides the drop-down menu */
        padding-left: 4px;
        margin: 0;
        /* Aligns drop-down box underneath the menu item */
        -webkit-transition: all 1s;
        border: solid #F2BB66 2px;
        border-radius: 5px;
        background-color: #FFF8DC; }
        nav.breadcrumbs ul li ul li {
          width: 100%;
          text-align: left;
          -webkit-transition: height 0.5s;
          padding: 1px 0 0 4px; }
        nav.breadcrumbs ul li ul li::after {
          content: none; }
        nav.breadcrumbs ul li ul li:first-child(1) {
          padding-top: 2px; }
        nav.breadcrumbs ul li ul li:nth-child(n) {
          background: #fff8db;
          padding-left: 0px; }
        nav.breadcrumbs ul li ul li:nth-child(n):after {
          border-left-color: #fff8db;
          border: 7px solid; }
        nav.breadcrumbs ul li ul li:hover {
          background: #F2BB66;
          color: red; }
    nav.breadcrumbs ul li:hover {
      background-color: #FFF8DC; }
    nav.breadcrumbs ul li a:hover {
      color: yellow; }
  nav.breadcrumbs ul > li::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 14px solid #CE1126;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: 100%;
    z-index: 99; }
  nav.breadcrumbs ul > li::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 14px solid white;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    margin-left: 2px;
    left: 100%;
    z-index: 98; }
  nav.breadcrumbs ul > li:nth-child(1) {
    background: #CE1126;
    padding-left: 4px; }
  nav.breadcrumbs ul > li:nth-child(5n+1) {
    color: #FFFFFF; }
    nav.breadcrumbs ul > li:nth-child(5n+1) A {
      color: #FFFFFF; }
  nav.breadcrumbs ul > li:nth-child(5n+1):after {
    border-left-color: #CE1126; }
  nav.breadcrumbs ul > li:nth-child(5n+2) {
    background: #B33C00;
    color: #FFFFFF; }
    nav.breadcrumbs ul > li:nth-child(5n+2) A {
      color: #FFFFFF; }
  nav.breadcrumbs ul > li:nth-child(5n+2):after {
    border-left-color: #B33C00; }
  nav.breadcrumbs ul > li:nth-child(5n+3) {
    background: #F2BB66;
    color: #FFFFFF; }
    nav.breadcrumbs ul > li:nth-child(5n+3) A {
      color: #FFFFFF; }
  nav.breadcrumbs ul > li:nth-child(5n+3):after {
    border-left-color: #F2BB66; }
  nav.breadcrumbs ul > li:nth-child(5n+4) {
    background: #FFF8DC;
    color: #000000; }
    nav.breadcrumbs ul > li:nth-child(5n+4) A {
      color: #000000; }
  nav.breadcrumbs ul > li:nth-child(5n+4):after {
    border-left-color: #FFF8DC; }
  nav.breadcrumbs ul > li:nth-child(5n+0) {
    background: #FFFFFF;
    color: #000000; }
    nav.breadcrumbs ul > li:nth-child(5n+0) A {
      color: #000000; }
  nav.breadcrumbs ul > li:nth-child(5n+0):after {
    border-left-color: #FFFFFF; }

div.menu_icon {
  display: inline-block;
  color: #CE1126;
  float: left;
  text-decoration: none;
  margin-right: 1px;
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
  font-weight: bold !important;
  font-size: 14px !important; }

div.menu_icon:hover {
  color: yellow;
  background-color: #CE1126;
  width: 1em;
  border-radius: 3px; }

/*
 * MEDIA QUERIES
 */
@media (max-width: 600px) {
  div.side_menu {
    display: none; }

  div.side_menu > span {
    display: none; }

  nav.breadcrumbs {
    display: none; } }
@media (min-width: 601px) {
  div.side_menu {
    display: block; }

  div.side_menu > span {
    display: block; }

  nav.breadcrumbs {
    display: block; } }

/*# sourceMappingURL=mathquiz.css.map */
