/* Container */
* {
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}

body {
  font-family: 'Sarabun', sans-serif;
  overflow-y: scroll;
}

input[type="button"]:focus {
  outline-color: #AAAAAA;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Wide Screen Mode - Two Columns */
@media all and (min-width: 760px) {
  html, body {
    height: 100%;
  }

  #container {
    min-height: 100%;
    overflow: hidden;
    background-image: linear-gradient(to right, #EEEEEE 60%, #FFFFFF 40%);
  }

  #container-left, #container-right {
    float: left;
  }
  
  #container-left {
    width: 60%;
  }

  #container-right {
    width: 40%;
  }
  
  #container-left-sub {
    margin-left: auto;
    margin-right: 32px;
  }
  
  #container-right-sub {
    margin-left: 32px;
    margin-right: auto;
  }
}

/* Narrow Screen Mode - One Column */
@media not all and (min-width: 760px) {
  #container-left, #container-right {
    min-width: 400px;
  }
  
  #container-left {
    background-color: #EEEEEE;
  }

  #container-left-sub, #container-right-sub {
    margin: auto;
  }
  
  #container-left-sub {
    padding-left: 4px;
    padding-right: 4px;
  }
  
  #container-right-sub {
    min-height: 340px;
  }
}

/* Container */
#container-left-sub, #container-right-sub {
  padding-top: 16px;
  padding-bottom: 16px;
}

#container-left-sub {
  width: 392px;
}

#container-right-sub {
  width: 240px;
}

/* Header */
header {
  margin-bottom: 16px;
  font-size: x-large;
  text-align: center;
}

/* Board */
#board {
  border-collapse: collapse;
  border-width: 2px 4px;
  border-style: solid;
  border-color: #C7B299;
}

#board #p1, #board #p2 {
  height: 2px;
}

.board-cell-space {
  background-image: url("../images/space.png");
  width: 48px;
  height: 48px;
}

.board-cell-empty {
  background-image: url("../images/cell.png");
  background-size: cover;
}

.board-cell-empty.movable {
  box-shadow: inset 0 0 0 1024px rgba(130, 114, 107, 0.5);
}

.board-cell-empty .piece {
  display: block;
}

.active-player1 {
  background-color: #E6E6E6;
}

.active-player2 {
  background-color: #A31111;
}

.inactive-player {
  background-color: #C7B299;
}

/* Piece */
.container-piece {
  position: relative;
  text-align: center;
}

.container-toolbar {
  min-height: 35px;
}

.piece {
  vertical-align: middle;
  width: 48px;
  height: 48px;
}

.piece.ui-draggable-handle {
  cursor: pointer;
}

/* Style */
#container-is-lock {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);  
}

#is-lock + .toggle {
  width: 112px; 
  height: 25px;
  box-shadow: none;
}

#is-lock + .toggle:before {
  content: 'เดินตามกฎ';
  right: 28%;
  font-size: 1.0rem;
}

#is-lock + .toggle:after {
  content: 'วางอิสระ';
  left: 33%;
  font-size: 1.0rem;
}

#is-lock:not(:checked) + .toggle {
  background: #E0E0E0;
}

#is-lock:not(:checked) + .toggle > .switch {
  border-color: #E0E0E0;
}

#is-lock:checked + .toggle	{
  background: #A0A0A0;
}

#is-lock:checked + .toggle > .switch {
  border-color: #A0A0A0;
}

/* Side */
#container-is-white {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);  
}

#is-white + .toggle {
  width: 72px; 
  height: 25px;
  box-shadow: none;
}

#is-white:disabled + .toggle { /* Prevent change color when disabled */
  opacity: 1 !important;
}

#is-white + .toggle:before {
  content: 'ตาขาว';
  right: 36%;
  font-size: 1.0rem;
}

#is-white + .toggle:after {
  content: 'ตาดำ';
  left: 40%;
  font-size: 1.0rem;
}

#is-white:not(:checked) + .toggle {
  background: #111111;
}

#is-white:not(:checked) + .toggle > .switch {
  border-color: #111111;
}

#is-white:checked + .toggle	{
  background: #CCCCCC;
}

#is-white:checked + .toggle > .switch {
  border-color: #CCCCCC;
}

/* Board Control */
#control {
  margin-top: 16px;
  text-align: center;
}

.button {
  height: 32px;
  line-height: 32px;
  padding: 0px 6px;
  font-size: 1.07rem;
  font-weight: bold;
  border-radius: 4px;
  background-color: #7B3F00;
  color: white;
  opacity: 0.7;
  transition: 0.3s;
  cursor: pointer;
}

.button:hover {
  opacity: 1.0
}

.button:disabled {
  opacity: 0.3;
  cursor: default;
}

.button.nav {
  margin-left: 1px;
  width: 44px;
  background-color: #808080;
}

#new, #clear, #flip {
  width: 55px;
}

#clear, #flip, #first.button.nav {
  margin-left: 8px;
}

/* Outcome */
#outcome {
  padding: 4px 16px;
  margin: 16px 0px;
  border: black 1px solid;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: bold;
}

#moves {
  width: 100%;
  border: black 1px solid;
  /* Rounded Corner Table */
  border-spacing: 0px;  
  border-radius: 4px;   
  font-size: 0.75rem;
}

#moves td {
  padding: 4px 4px;
  border-bottom: black 1px solid; /* Rounded Corner Table */
}

#moves tr:last-child td {
  border-bottom: none;  /* Rounded Corner Table */
}

.moves-from {
  width: 30px;
  text-align: right;
}

.moves-capture {
  width: 9px;
  text-align: center;
}

.moves-to {
  width: 21px;
  text-align: right;
}

.moves-result {
  width: 30px;
  text-align: left;
  padding-left: 16px !important;
}

.moves-comment {
  text-align: left;
  padding-left: 4px !important;
}

.comment-title {
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.875rem;
  width: 144px;
  margin-left: 8px;
}

.comment {
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.75rem;
  width: 100%;
}

/* Dialog Control */
#dcontrol {
  margin-top: 4px;
  text-align: right;
}

.rbutton {
  height: 25px;
  padding: 0px 8px;
  margin-left: 2px;
  font-size: 0.6rem;
  border-radius: 4px;
  background-color: #E0E0E0;
  color: black;
  opacity: 0.7;
  transition: 0.3s;
  cursor: pointer;
}

.rbutton:hover {
  opacity: 1.0
}

/* Dialog */
#alert, #dformula, #detail {
  display: none;
}

#dformula {
  padding: 0.5em 0.5em 0em 0.5em;
}

#dformula .CodeMirror {
  width: 400px;
  font-size: 12px;
  line-height: 1.2em;
  height: 24em;
}

#dformula .CodeMirror-lines {
  padding-top: 0px;  
  padding-bottom: 0px;  
}

#detail div {
  text-align: center;
}

#detail div p {
  margin-bottom: 12px;
}

/* Link */
#link {
  position: absolute;
  top: 8px;
  left: 8px;
}

#link-image {
  background-color: #F9F9F9;
  padding: 7px;
  border-radius: 6px;
  cursor: pointer;
}

#link-image:hover, #link-image:focus {
  background-color: #E9E9E9;
}

#link-menu {
  display: none;
  position: absolute;
  background-color: #F9F9F9;
  padding: 4px 2px;
  min-width: 140px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 2px;
}

#link-menu .disabled {
  display: block;
  color: #AAAAAA;
  padding: 4px 16px;
  font-weight: bold;
}

#link-menu a {
  display: block;
  color: black;
  padding: 6px 16px;
  text-decoration: none;
}

#link-menu a:hover {
  background-color: #E9E9E9;
}

#link-menu hr {
  height: 1px;
  margin: 6px 2px;
  background-color: #CCCCCC;
}