/* Reset */
* {
  font-size: 100%; margin: 0; padding: 0;
}

body {
  background-color: #bababa; font-family: sans-serif;
}

button {
  color: #23363d; font-weight: bold; height: 3em; margin: 0.1em; width: 4em;
}

fieldset {
  background-color: #c5d2c8; border: 1px solid #23363d; border-radius: 7px; margin: 0.5em auto; min-width: 23em; padding: 0.5em; width: 90%; -moz-border-radius: 7px; -webkit-border-radius: 7px;
}
fieldset p {
  margin: 0.5em 0;
}

h1 {
  border-bottom: 2px solid #517f8f; color: #23363d; font-size: 2em; padding-bottom: 0.2em; text-align: center;
}

h2 {
  color: #23363d; font-size: 1.5em; padding-bottom: 0.2em;
}

input[type="file"] {
  background-color: white; border: 1px solid #4f7c8c; border-radius: 5px; overflow: hidden; padding: 0.3em; width: 20em; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}

select {
  padding: 0.3em 0.1em; width: 16em;
}

td {
  background-color: inherit; border: 1px solid silver; cursor: default; font-weight: bold; height: 2.5em; text-align: center; vertical-align: middle; width: 2.5em;
}

th {
  background-color: #9db8d2; border: 1px solid #23363d; font-size: 1.2em; padding: 0.5em 0.2em;
}

.c1, .c4, .c7, .cl-border {
  border-left: 1px solid #23363d;
}

.c3, .c6, .c9, .cr-border {
  border-right: 1px solid #23363d;
}

.r1, .r4, .r7, .rt-border {
  border-top: 1px solid #23363d;
}

.r3, .r6, .r9, .rb-border {
  border-bottom: 1px solid #23363d;
}

.bold {
  font-weight: bold;
}

.center {
  text-align: center;
}

.float-right {
  float: right; margin: 0 0 0.5em 0.5em;
}

.intro {
  margin: 2em 1em;
}

.med-button {
  width: 6em;
}

.no-edit {
  background-color: #eee; color: #517f8f;
}

.note {
  color: #1f3238; font-size: 0.75em;
}

.notes-text {
  color: #23363d; font-size: 0.6em; padding: 0.1em 0.2em;
}

.select-puzzle {
  display: none; margin: 0.5em 0;
}

.wide-button {
  width: 8em;
}

#custom-file {
  height: 2em; width: 16em;
}

#menu-container {
  background-color: white; border: 1px solid black;  border-radius: 10px; margin: 1em auto; max-width: 800px; min-width: 23.6em; padding: 1em; width: 90%; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}

#btn-load {
  margin-top: 0.5em;
}

#controls {
  padding: 0.75em; text-align: center;
}

#controls-container {
  background-color: white; border: 2px solid #23363d; border-radius: 5px; display: none; margin: 1em auto; width: 23.6em; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}

#game-area {
  display: none; margin: 1em auto; position: relative;
}

#howtoplay-container {
  background-color: white; border: 1px solid black; border-radius: 10px; display: none; margin: 1em auto; max-width: 800px; min-width: 23.6em; padding: 1em; width: 90%; -moz-border-radius: 10px; -webkit-border-radius: 10px;
}
#howtoplay-container p {
  margin: 1em;
}
#howtoplay-container ul {
  margin: 1em; padding: 0 1em;
}

#notes-container {
  background-color: transparent; display: none; left: 50%; margin-left: -11.875em; position: absolute; top: -1em; width: 23.75em; z-index: 1;
}
#notes-container td {
  background-color: rgba(192, 192, 192, 0.3);
}

#notes-table {
  background-color: transparent; border: 1px solid #23363d; margin: 1em auto; width: 23.75em;
}

#sudoku-puzzle {
  background-color: white; border: 1px solid #23363d; margin: 1em auto;
}