/* Carl Hester, July 5, 2026, IST239-W01, Hands-on Project 7-1 */
/*
   Description:
   This stylesheet controls the layout and appearance of the account creation
   form and the results page. It includes reset rules, layout formatting,
   and styles for form fields, labels, feedback messages, and tables.
*/

/* Apply natural box layout model to all elements */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* Reset default browser styles */
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; /* Removes default margins */
   padding: 0; /* Removes default padding */
   border: 0; /* Removes default borders */
   font-size: 100%; /* Normalizes font size */
   font: inherit; /* Inherits font settings */
   vertical-align: baseline; /* Aligns elements consistently */
}

/* Ensure HTML5 elements display correctly in older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
   line-height: 1; /* Sets line spacing */
   width: 960px; /* Page width */
   background: white; /* Background color */
   margin: 0 auto; /* Centers page */
   font-family: Verdana, Geneva, sans-serif; /* Default font */
}

ol, ul {
   list-style: none; /* Removes bullet points */
}

/* Page header styling */
header {
   background: #5472B2; /* Blue background */
   width: 100%; /* Full width */
   color: #FFFFFF; /* White text */
   font-size: 48px; /* Large font */
   text-align: center; /* Centered text */
   line-height: 1.5em; /* Spacing */
}

/* Feedback message styling */
div#feedback {
   clear: left; /* Clears floated elements */
   color: red; /* Red text for errors */
   margin-left: 25px; /* Left margin */
   margin-bottom: 20px; /* Bottom spacing */
}

/* Section heading */
section h1 {
   font-size: 1.4em;
   margin: 20px 0;
}

/* Fieldset styling */
fieldset {
   border: 1px solid rgb(192,192,192); /* Light border */
   background-color: #EBE09C; /* Light yellow background */
   box-shadow: 3px 3px 20px gray; /* Drop shadow */
   padding: 30px; /* Inner spacing */
   display: block;
   width: 600px; /* Fieldset width */
   margin: 0 auto; /* Centered */
}

/* Legend styling */
fieldset legend {
   color: rgb(80,80,80); /* Dark gray text */
   width: 300px;
   text-align: left;
   background: rgba(255, 255, 255, 0.3); /* Transparent white background */
   font-size: 1.05em;
}

/* Label styling */
label {
   display: block;
   width: 100px;
   float: left; /* Floats label left */
   clear: left; /* Ensures labels stack properly */
   margin-bottom: 15px;
   text-align: right; /* Right-aligns text */
   margin-right: 20px;
   font-size: 1em;
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
   color: rgb(80,80,80);
}

/* Input styling */
input {
   display: block;
   float: left; /* Floats input next to label */
   font-size: 1.05em;
   color: rgb(80, 80, 80);
   margin-bottom: 15px;
}

/* Styling for invalid HTML5 inputs */
input:invalid {
   border-color: red;
   box-shadow: 2px 2px 5px red;
}

/* Submit button styling */
input[type='submit'] {
   clear: left;
   display: block;
   margin: 0 auto;
   float: none;
   font-size: 1.1em;
   background-color: #BF7E21; /* Orange background */
   color: white;
   padding: 3px;
   width: 100px;
}

/* Section heading spacing */
section > h1 {
   margin-left: 30px;
}

/* Table styling */
table {
   margin-left: 30px;
   border-collapse: collapse; /* Removes gaps between cells */
}

table td {
   border: 1px solid rgb(150,150,150); /* Cell borders */
   padding: 5px; /* Cell padding */
}

table tr td:first-of-type {
   background-color: #E3E09B; /* Highlight first column */
}