body { 
  font-family: arial;
  background: white;
}

/* So it doesn't flicker while we load */
body {
  display: none;
}


/* ************* Common to PacksViewer and CardViewer ****************** */

/* Make them 90% width and height of screen */
html,body {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fill-screen {
  height: 90vh;
  width: 90vw;
}

/* Bottom "thumb zone" is a fixed height; the "non-thumb-zone" fills the rest of the space */
.fill-screen {
  display: flex; flex-flow: column;
}
.non-thumb-zone {
  flex-grow: 1;
}
.thumb-zone {
  height: 20vh;
}

/* Rows of buttons are rounded, as wide as possible, with wrapping text */
.row-of-buttons {
  display: flex; flex-flow: row;
  align-items: center;
  justify-content: space-around;

  height: 100%;
}
.row-of-buttons input[type="button"] {
  border-radius: 3vh;
  height: 100%;
  width: 100%;
  margin-left: 1%; margin-right: 1%;
  font-size: 7vh;
  word-wrap: break-word;
  white-space: normal;
}



/*************** PacksViewer ************ */

/* Colors */
.settings .row-of-buttons input:not([checked]) {
  background: white;
}
.settings input[checked] {
  border: 3px solid black;
}


/* 2 columns of notecards, full width, can't widen */
.packs {
  display: flex; flex-flow: row nowrap;
  margin-bottom: 3vh;
}
.packlist {
  flex-grow: 1;
  max-width: 50%;
}

/* each column's notecards are full width */
.packlist {
  display: flex; flex-flow: column;
}
.pack {
  flex-grow: 1;
}

/* Packs look like notecards, good size, easy to read */
.pack {
  background: url(img/notecard.png) no-repeat center center;
  background-size: 100% 100%;
  min-height: 14vh;
  max-height: 14vh;
  margin: 1vw;
  font-size: 3.5vh;
  white-space: normal;
}

/* Actual packs are scrollable */
#actual {
  overflow: auto;
}


/*************** CardViewer ************ */

/* Colors */
.card-top-half {
  background: #328b95;
}
.card-bottom-half {
  background: #c5c2bd;
}
.row-of-buttons input[type="button"] {
  background: #3e8d39;
}
.row-of-buttons input[type="button"].controls-clear-errors {
  background: #619da4;
}
.row-of-buttons input[type="button"].controls-wrong,
#error-types-section input[type="button"]
{
  background: #cc3434;
}
.obscured, .revealed {
  background: white;
}
#face-hint {
  background: #d44;
  color: #333;
}
.face.obscured {
  color: gray;
}


/* Card top and bottom halfs split the available height */
.card {
  display: flex; flex-flow: column;
}
/* TODO: actually, this doesn't seem to work.  The two halfs
 * grow or shrink depending on content. */
.card-top-half {
  flex-grow: 6;
}
.card-bottom-half {
  flex-grow: 4;
}

/* Faces are centered in the card */
.card-top-half, .card-bottom-half {
  display: flex; flex-flow: column;
  justify-content: center;
  align-items: center;
}

/* Errors have text that can fit on buttons */
.controls #error-types-section input[type="button"] {
  font-size: 4vh;
}

/* Card is rounded on top and bottom and separated from the controls*/
.card-top-half {
  border-top-right-radius: 1vh;
  border-top-left-radius: 1vh;
}
.card-bottom-half {
  border-bottom-right-radius: 1vh;
  border-bottom-left-radius: 1vh;
}
.card {
  margin-bottom: 1vh;
}

/* *********** CardViewer Face stylin ************ */

/* Face text is centered and easy to read */
.card {
  font-size: 4vh;
}
.face {
  display: flex; flex-flow: column;
  align-items: center;
  justify-content: center;
}

/* Han faces on top half are bigger */
.card-top-half #face-han {
  font-size: 8vh;
}
/* English faces on top half are somewhat bigger */
.card-top-half #face-english {
  font-size: 5vh;
}

/* Obscured faces are rounded, and dashed until revealed */
.obscured, .revealed {
  min-height: 8vh;
  border-radius: 1vh;
}
.face.obscured {
  border: .8vw dashed black;
}
.face.revealed {
  border: .8vw dashed transparent;
}

/* Obscured faces get one text, revealed get another */
.obscured .obscured-clue, .revealed .face-content {
  display: inline;
}
.revealed .obscured-clue, .obscured .face-content {
  display: none;
}

/* clues are styled thus */
.obscured-clue {
  font-style: italic;
}

/* Faces have spaces around them */
.face {
  margin: 2vh;
  width: 80%;
}

/* Warning is styled thus */
#face-hint {
  border-radius: 1vh;
  height: 6vh;
}

/* Pack name at top right */
.card {
  position: relative;
}
#face-pack_name {
  position: absolute;
  font-size: 2vh;
  height: 4vh;
  width: 40%;
  right: 0vh;
  top: 0vw;
}

/* Han colorization */
.tone-1 { color: #ec0000; }
.tone-2 { color: #ecec00; }
.tone-3 { color: #00ec00; }
.tone-4 { color: blue; }
.tone-5 { color: black; }
.tone-broken { color: gray; }