/*
   Hands-on Project 10-5
   Sung Kim | 7-19-26 | IST-239-W01

   Purpose:
   This project presents an interactive crossword puzzle that accepts both pointer and keyboard input.
   Players can enter answers, navigate the puzzle, delete letters, and switch between across and down typing directions.
   The layout separates the crossword grid from the Across and Down clues while highlighting the current puzzle position.
   Styling also formats the puzzle controls, clue lists, and page header for clear use.

   This CSS file controls the layout and appearance of the crossword puzzle, clues, controls, and highlighted puzzle elements.

   Filename: styles.css
   Related: project10-05.html, cross.js, project10-05.js, pc_right.png, pc_down.png
*/

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

/* Resets default spacing, borders, fonts, and alignment for common HTML elements. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
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. */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

/* Sets the page width, background, centering, and default font. */
body {
   line-height: 1;
   width: 1024px;
   background: #F5F5F5;
   margin: 0 auto;
   font-family: Georgia, "Droid Serif", serif; 
}

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

/* Removes browser-generated quotation marks. */
blockquote, q {
   quotes: none;
}

/* Clears generated quotation content around blockquotes and inline quotes. */
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* Collapses table borders and removes spacing between cells. */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

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

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

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

/* Formats the main crossword content area. */
body > section {
   background-color: #FFDB70;
   margin-top: 0;
   user-select:none;
   height: 840px;
}

/* Formats the puzzle instruction paragraph. */
body > section > p {
   padding: 20px 60px;
   line-height: 1.3;
   font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
   font-size: 1.15em;
}

/* Positions and sizes the crossword puzzle column. */
article {
   float: left;
   width: 50%;
}

/* Centers the crossword table within the article. */
article > table#crossword {
   margin: 0 auto;
}

/* Positions and formats the clue column. */
aside {
   color: rgb(96, 96, 28);   
   float: left;
   width: 50%;
   padding: 0 20px;
}

/* Formats the main Clues heading. */
aside h1 {
   font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;   
   font-size: 2.6em;
   font-weight: bold;
   letter-spacing: 0.1em;
   text-align: center;
   margin: 0;
   width: 100%;
   padding-top: 15px;
}

/* Formats the Across and Down subheadings. */
aside h2 {
   text-align: center;
   font-size: 1.2em;
   margin-bottom: 15px;
   width: 100%;
}

/* Formats the overall crossword puzzle table. */
table#crossword {
   font-size: 1.4em;
   border: 1px solid rgb(101, 101, 101);
   box-shadow: rgb(51, 51, 51) 5px 5px 15px, rgb(51, 51, 51) -5px -5px 15px;
   border-collapse: collapse;
   color: rgb(101, 101, 101);
   margin: 20px;
}

/* Formats the crossword title above the grid. */
table#crossword caption {
   font-size: 2em;
   font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
   caption-side: top;
   text-align: center;
   margin: 0px 0px 35px 0px;
   padding-top: 15px;
}

/* Formats each crossword grid cell. */
table#crossword td {
   border: 1px solid rgb(101, 101, 101);
   background-color: rgba(255, 255, 255, 0.5);
   position: relative;
   text-align: center;
   font-size: 1.3em;
   vertical-align: middle;
   text-transform: uppercase;
   width: 40px;
   height: 40px;
}

/* Shows a pointer cursor over playable letter squares. */
table#crossword span {
   cursor: pointer;
}

/* Sizes the clickable letter area inside each puzzle cell. */
table#crossword td span {
   display: block; 
   line-height: 40px;
   width: 40px;
   height: 40px;
}

/* Positions and sizes crossword clue numbers. */
table#crossword td sup {
   font-size: 0.4em;
   position: absolute;
   top: 2px;
   left: 2px;
}

/* Formats blocked puzzle squares. */
table#crossword td.blank {
   background-color: rgb(151, 151, 151);
}

/* Shows a pointer cursor over the typing-direction icon. */
img#directionImg {
   cursor: pointer;
}

/* Places the Across and Down clue sections side by side. */
aside section {
   float: left;
   width: 50%;
}

/* Formats the numbered clue lists. */
ol#across, ol#down {
   list-style-type: decimal;
   margin-left: 40px;
   line-height: 1.5em;
   font-size: 1em;
}

/* Centers and spaces the controls below the crossword. */
div#crossButtons {
   width: 100%;
   text-align: center;
   margin-bottom: 20px;
   line-height: 42px;
}

/* Sizes and spaces the typing-direction icon. */
div#crossButtons img#directionImg {
   width: 42px;
   height: 42px;
   display: inline-block;
   margin: 0px 10px;
}

/* Formats the Show Errors and Show Solution buttons. */
div#crossButtons input {
   display: inline-block;
   width: 160px;
   height: 42px;
   margin: 0px 10px;
   font-size: 1.1em;
   border: 5px double rgb(111, 111, 255);
   border-radius: 25px;
   box-shadow: 0px 0px 10px rgb(51, 51, 51);
}

/* Changes button appearance when the pointer hovers over a control. */
div#crossButtons input:hover {
   color: rgb(255, 255, 211);
   background-color: rgb(181, 181, 255);
}