/* neutral colours */
/* primary colours */
/* secondary colours */
/* tertiary colours */
/* top level icon colours */
/* infographic colours */
#crossword {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 512px; }
  #crossword * {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #312b39; }
  #crossword .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0; }
  #crossword #preloader {
    width: 0;
    height: 0;
    background-color: #ffffff;
    display: none;
    position: absolute;
    z-index: 1000; }
    #crossword #preloader.show {
      width: 100%;
      height: 100%;
      display: block; }
    #crossword #preloader #loader {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      #crossword #preloader #loader #loaderSpinner {
        display: inline-block;
        border-width: 6px;
        border-style: solid;
        border-color: #3498db #f3f3f3 #f3f3f3;
        border-image: initial;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        transform: rotate(0deg); }
  #crossword input[type="button"], #crossword button {
    display: inline-block;
    border: 1px solid #002158;
    border-radius: 3px;
    padding: 3px 8px;
    background-color: #ffffff;
    vertical-align: top;
    line-height: 1.5;
    transition: background-color 0.25s, color 0.25s;
    cursor: pointer;
    margin-right: 10px; }
    #crossword input[type="button"][aria-pressed="true"], #crossword input[type="button"].active, #crossword button[aria-pressed="true"], #crossword button.active {
      background-color: #002158;
      color: #ffffff;
      outline: none; }
    #crossword input[type="button"]:focus:not([aria-pressed="true"]):not(.active), #crossword input[type="button"]:hover:not([aria-pressed="true"]):not(.active), #crossword button:focus:not([aria-pressed="true"]):not(.active), #crossword button:hover:not([aria-pressed="true"]):not(.active) {
      background-color: #002158;
      color: #ffffff; }
    #crossword input[type="button"][aria-pressed="true"], #crossword input[type="button"].active, #crossword button[aria-pressed="true"], #crossword button.active {
      cursor: default; }
  #crossword #topMenuContainer {
    background-color: #bfe2ef;
    padding: 10px; }
    #crossword #topMenuContainer #languagesContainer input[type="button"] {
      margin-right: 0;
      margin-left: 10px; }
    #crossword #topMenuContainer #languagesContainer.hidden {
      display: none; }
  #crossword #gridContainer {
    display: inline-block;
    float: left;
    width: 50%;

    padding: 10px 0;
    text-align: center;
    overflow: auto; }
    @media screen and (max-width: 1023px) {
      #crossword #gridContainer {
        display: block;
        float: none;
        width: 100%; } }
    #crossword #gridContainer #gridGfx {
      display: inline-block;
      border: 1px solid #312b39; }
      #crossword #gridContainer #gridGfx .row {
        display: table-row;
        clear: both;
        margin: 0;
        height: 20px;
        border: 1px solid #312b39; }
        #crossword #gridContainer #gridGfx .row .cell {
          border: 1px solid #312b39;
          width: 24px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          float: left;
          position: relative; }
          #crossword #gridContainer #gridGfx .row .cell.dev .devInfo {
            position: absolute;
            font-size: 7.5px;
            width: 100%;
            text-align: center;
            color: #b0a7bc; }
          #crossword #gridContainer #gridGfx .row .cell.dev .num {
            display: none; }
          #crossword #gridContainer #gridGfx .row .cell.cellInput {
            background-color: transparent; }
            #crossword #gridContainer #gridGfx .row .cell.cellInput.highlight {
              background-color: #bfe2ef; }
            #crossword #gridContainer #gridGfx .row .cell.cellInput.currentHighlight {
              background-color: #7cc7e0; }
            #crossword #gridContainer #gridGfx .row .cell.cellInput input[type="textbox"] {
              border: none;
              width: 22px;
              height: 22px !important;
              position: absolute;
              left: 0;
              background-color: transparent;
              text-align: center; }
          #crossword #gridContainer #gridGfx .row .cell .cellBkg {
            width: 24px;
            height: 24px;
            display: blue; }
          #crossword #gridContainer #gridGfx .row .cell span {
            font-size: 8px;
            line-height: 8px;
            display: block;
            position: absolute;
            top: 2px;
            left: 2px;
            color: #312b39; }
  #crossword #cluesContainer {
    display: inline-block;
    background-color: #f0f0f1;
    float: left;
    width: 50%;
    height: 532px;
    overflow: auto; }
    @media screen and (max-width: 1023px) {
      #crossword #cluesContainer {
        height: auto;
        width: 100%;
        padding-bottom: 5px; } }
    #crossword #cluesContainer h1 {
      text-align: center;
      font-size: 16px; }
    #crossword #cluesContainer #cluesAcrossContainer, #crossword #cluesContainer #cluesDownContainer {
      float: left;
      width: 47%;
      margin-left: 2%; }
      #crossword #cluesContainer #cluesAcrossContainer > div, #crossword #cluesContainer #cluesDownContainer > div {
        display: table;
        width: 100%; }
        #crossword #cluesContainer #cluesAcrossContainer > div .item, #crossword #cluesContainer #cluesDownContainer > div .item {
          display: table-row;
          padding: 5px; }
          #crossword #cluesContainer #cluesAcrossContainer > div .item.highlight, #crossword #cluesContainer #cluesDownContainer > div .item.highlight {
            background-color: #bfe2ef; }
          #crossword #cluesContainer #cluesAcrossContainer > div .item:hover, #crossword #cluesContainer #cluesDownContainer > div .item:hover {
            cursor: pointer; }
          #crossword #cluesContainer #cluesAcrossContainer > div .item div.num, #crossword #cluesContainer #cluesDownContainer > div .item div.num {
            display: table-cell;
            vertical-align: top;
            width: 24px;
            padding-top: 5px;
            padding-left: 5px;
            font-weight: bold; }
          #crossword #cluesContainer #cluesAcrossContainer > div .item div.txt, #crossword #cluesContainer #cluesDownContainer > div .item div.txt {
            display: table-cell;
            padding-top: 5px;
            padding-right: 5px; }
            #crossword #cluesContainer #cluesAcrossContainer > div .item div.txt p, #crossword #cluesContainer #cluesDownContainer > div .item div.txt p {
              margin: 0; }
            #crossword #cluesContainer #cluesAcrossContainer > div .item div.txt input[type="text"], #crossword #cluesContainer #cluesDownContainer > div .item div.txt input[type="text"] {
              width: 98%;
              border: 1px solid #312b39;
              margin: 5px 0 10px 0;
              padding: 5px 0;
              text-indent: 5px;
              background-repeat: no-repeat;
              background-position: right center; }
              #crossword #cluesContainer #cluesAcrossContainer > div .item div.txt input[type="text"].correct, #crossword #cluesContainer #cluesDownContainer > div .item div.txt input[type="text"].correct {
                background-image: url(../images/tick.gif); }
              #crossword #cluesContainer #cluesAcrossContainer > div .item div.txt input[type="text"].incorrect, #crossword #cluesContainer #cluesDownContainer > div .item div.txt input[type="text"].incorrect {
                background-image: url(../images/cross.gif); }
              #crossword #cluesContainer #cluesAcrossContainer > div .item div.txt input[type="text"][disabled], #crossword #cluesContainer #cluesDownContainer > div .item div.txt input[type="text"][disabled] {
                color: #312b39; }
  #crossword #menuContainer {
    background-color: #d4d2d2;
    float: left;
    width: 100%; }
    #crossword #menuContainer input[type="button"] {
      margin: 10px; }
  #crossword #resultsContainer {
    padding: 10px;
    display: block;
    clear: both; }
  @media print {
    #crossword #topMenuContainer, #crossword #menuContainer {
      display: none; } }

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