/*
   Hands-on Project 8-5
   Sung Kim | 7-12-26 | IST-239-W01

   Purpose:
   This project loads a classic chess game from a JSON file and displays its starting position and move log.
   Users can move forward and backward through the recorded game using the interface buttons.
   The chessboard updates to reflect each recorded move and displays captured pieces beside the board.

   This CSS file formats the page layout, chessboard squares, chess pieces, controls, and move list.

   Filename: styles.css
   Related: project08-05.html, project08-05.js, objects.js, sample.json
*/

/* Applies border-box sizing to every element on the page. */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* Removes default spacing, borders, and font styling from common HTML elements. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* Displays HTML5 structural elements as block-level elements in older browsers. */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

/* Sets the page width, base font, line height, background, and centered layout. */
body {
   line-height: 1;
   width: 960px;
   background: white;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif;
}

/* Removes the default list markers from ordered and unordered lists. */
ol, ul {
   list-style: none;
}

/* Formats the blue project heading across the top of the page. */
header {
   background: #5472B2;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em;
   margin-bottom: 0;
}

/* Formats the main yellow content area and provides positioning for its children. */
section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select: none;
   height: 720px;
   position: relative;
}

/* Formats the main heading inside the content section. */
section h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0 20px;
}

/* Centers and spaces the file-selection instructions. */
p#intro {
   padding: 10px 0 0 0;
   text-align: center;
}

/* Formats the label shown beside the file-selection control. */
p#intro label {
   display: inline-block;
   margin-right: 10px;
   font-size: 1.2em;
}

/* Sets the font size for the file-selection input. */
p#intro input {
   font-size: 1em;
}

/* Adds left spacing to the game description paragraph. */
p#description {
   margin-left: 60px;
}

/* Collapses table borders and positions the chessboard on the page. */
table#chessboard {
   border-collapse: collapse;
   border: 3px solid gray;
   margin: 0 0 0 60px;
}

/* Sets the size and alignment of every chessboard table cell. */
table#chessboard td {
   width: 50px;
   height: 50px;
   text-align: center;
   vertical-align: middle;
   font-weight: bold;
}

/* Applies the darker background color to alternating chessboard squares. */
table#chessboard td.dark {
   background-color: rgba(163, 110, 42, 0.3);
   border: 1px solid gray;
}

/* Applies the lighter background color to alternating chessboard squares. */
table#chessboard td.light {
   background-color: rgba(233, 231, 206, 1);
   border: 1px solid gray;
}

/* Formats the cells that display chessboard row and column notation. */
table#chessboard td.notation {
   background-color: ivory;
   vertical-align: middle;
}

/* Reduces the height of the bottom row containing column letters. */
table#chessboard td.row {
   height: 25px;
}

/* Reduces the width of the first column containing row numbers. */
table#chessboard td.col {
   width: 25px;
}

/* Sets the display size of each chess piece symbol. */
table#chessboard td span {
   font-size: 2.6em;
}

/* Adds a light shadow behind white chess piece symbols for contrast. */
table#chessboard td span.white {
   text-shadow: 0 3px 2px white;
}

/* Positions and centers the Previous Move and Next Move controls. */
div#moveButtons {
   width: 430px;
   margin: 10px 0 0 60px;
   text-align: center;
}

/* Sets the size and font of the move-control buttons. */
div#moveButtons input {
   width: 150px;
   font-size: 0.9em;
}

/* Positions the move-list panel to the right of the chessboard. */
aside#moveList {
   width: 400px;
   height: 500px;
   position: absolute;
   left: 520px;
   top: 200px;
}

/* Formats a heading placed inside the move-list panel. */
aside#moveList h1 {
   font-size: 1.3em;
   text-align: center;
}

/* Arranges the ordered move log into wrapped vertical columns. */
ol#moveLog {
   list-style: decimal;
   display: flex;
   flex-flow: column wrap;
   height: 500px;
   line-height: 1.5;
}

/* Sets the spacing, size, and width of each move-log row. */
ol#moveLog li {
   margin: 0 10px;
   padding: 0 10px;
   font-size: 0.8em;
   width: 200px;
}

/* Places the white and black moves side by side within each move-log row. */
ol#moveLog li span {
   text-align: left;
   display: inline-block;
   width: 50%;
}

/* Highlights the currently displayed move in red. */
ol#moveLog li span.highlight {
   color: red;
}

/* Formats the areas used to display captured black and white pieces. */
div#blackBox, div#whiteBox {
   margin: 10px 0 10px 60px;
   font-size: 1.8em;
   height: 1em;
}

/* Gives captured piece symbols an ivory background and inline-block layout. */
div#blackBox span, div#whiteBox span {
   display: inline-block;
   background-color: ivory;
}