/*
   Hands-on Project 9-1
   Sung Kim | 7-19-26 | IST-239-W01

   Purpose:
   This project transfers a personal gift greeting from one web page to another using a query string.
   The first page collects the recipient, sender, and message through a web form.
   The second page displays the submitted greeting beside the customer's shopping cart.
   JavaScript reads, decodes, separates, and displays the values passed through the URL.

   This file controls the layout and visual styling shared by both project pages.

   Filename: styles.css
   Related: project09-01a.html, project09-01b.html
*/

/* Applies the border-box sizing model to all page elements */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* Resets default spacing, borders, fonts, and alignment */
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,
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 elements */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

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

/* Removes default list markers */
ol, ul {
   list-style: none;
}

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

/* Styles the main project content area */
section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select:none;
   height: 440px;
}

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

/* Sets the width and position of the greeting form */
form {
   width: 80%;
   margin: 10px auto;
}

/* Adds spacing around the greeting form fields */
fieldset {
   padding: 12px;
   margin-bottom: 20px;
}

/* Positions the labels beside their form controls */
label {
   float: left;
   clear: left;
   width: 100px;
   margin: 0 0 20px 0px;
}

/* Floats the text fields and message area to the left */
input[type=text], textarea {
   float: left;
}

/* Sets the dimensions and spacing of the message area */
textarea {
   width: 500px;
   height: 150px;
   margin: 0 0 5px 0;
}

/* Centers and styles the form submit button */
input[type=submit] {
   clear: left;
   display: block;
   margin: 0 auto;
   font-size: 1.2em;
   letter-spacing: 0.3em;
}

/* Styles and positions the greeting message table */
table#greeting {
   background-color: ivory;
   border: 1px solid gray;
   margin: 8px;
   float: left;
   font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
   line-height: 1.3;
   box-shadow: 2px 2px 5px black;
}

/* Styles the greeting table caption */
table#greeting caption {
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
   margin-bottom: 3px;
   font-weight: bold;
}

/* Aligns and spaces the greeting table headings */
table#greeting th {
   text-align: left;
   padding: 4px;
}

/* Sets the width and spacing of greeting table data cells */
table#greeting td {
   padding: 4px;
   width: 250px;
}

/* Positions and sizes the order table */
table#order {
   float: left;
   font-size: 0.9em;
   margin-left: 20px;
}

/* Styles the headings in the order table */
table#order thead th {
   font-size: 1em;
   font-weight: bold;
   border-bottom: 1px solid gray;
   padding-bottom: 5px;
}

/* Adds spacing to the order table body cells */
table#order tbody td {
   padding: 5px 0px;
}

/* Right-aligns the quantity column */
table#order tbody td:nth-of-type(2) {
   text-align: right;
}

/* Right-aligns the cost column */
table#order tbody td:nth-of-type(3) {
   text-align: right;
}

/* Adds a top border and spacing to the order totals */
table#order tfoot td {
   border-top: 1px solid gray;
   padding-top: 12px;
}

/* Sizes and aligns the total label column */
table#order tfoot td:nth-of-type(2) {
   width: 70px;
   text-align: right;
}

/* Sizes and aligns the final cost column */
table#order tfoot td:nth-of-type(3) {
   width: 90px;
   text-align: right;
}