/* 
        Christopher Zamiska, July 18, 2026, IST239-W01, Hands-On project10-05

    This project is a crossword puzzle which accepts pointer and keyboard input.
    From the keyboard, players can type their answers, move to a different space
    using the Arrow, Tab, and Enter keys or delete letters using the Delete and
    Backspace keys. Finally, they can toggle the typing direction between across
    and down by pressing the Spacebar key.

    Corrections are marked with FIXED.
*/

/* apply a natural box layout model to all elements */
* {
   box-sizing: border-box;
}

/* reset rules */
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;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
   line-height: 1;
   width: 1024px;
   background: #F5F5F5;
   margin: 0 auto;
   font-family: Georgia, "Droid Serif", serif; 
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}


body {
   line-height: 1;
   width: 1024px;
   background: white;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif; 
}

ol, ul {
   list-style: none;
}

/* page header */
header {
   background: #5472B2;
   width: 100%;
   color: #FFFFFF;
   font-size: 48px;
   text-align: center;
   line-height: 1.5em;
   margin-bottom: 0;
}

/*-------------------- Project Styles ------------------*/

body > section {
   background-color: #FFDB70;
   margin-top: 0;
   user-select:none;
   height: 840px;
}

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;
}

/* Article Styles */

article {
   float: left;
   width: 50%;
}

article > table#crossword {
   margin: 0 auto;
}
   
/* Aside  Styles */

aside {
   color: rgb(96, 96, 28);   
   float: left;
   width: 50%;
   padding: 0 20px;
}

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;
}

aside h2 {
   text-align: center;
   font-size: 1.2em;
   margin-bottom: 15px;
   width: 100%;
}

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;
}

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;
}

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;
}

table#crossword span {
   cursor: pointer;
}

table#crossword td span {
   display: block; 
   line-height: 40px;
   width: 40px;
   height: 40px;
}

table#crossword td sup {
   font-size: 0.4em;
   position: absolute;
   top: 2px;
   left: 2px;
}

table#crossword td.blank {
   background-color: rgb(151, 151, 151);
}

img#directionImg {
   cursor: pointer;
}

/* Clues */

aside section {
   float: left;
   width: 50%;
}

ol#across, ol#down {
   list-style-type: decimal;
   margin-left: 40px;
   line-height: 1.5em;
   font-size: 1em;
}

/* Buttons and Images */

div#crossButtons {
   width: 100%;
   text-align: center;
   margin-bottom: 20px;
   line-height: 42px;
}

div#crossButtons img#directionImg {
   width: 42px;
   height: 42px;
   display: inline-block;
   margin: 0px 10px;
}

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);
}

div#crossButtons input:hover {
   color: rgb(255, 255, 211);
   background-color: rgb(181, 181, 255);
}