/*
    Christopher Zamiska, July 17, 2026, IST239-W01, Hands-On project09-01

This program is a web page in which customers attach greeting messages to gifts
purchased for friends and family. The contents of the greeting message will be
entered on one web page form and then displayed as part of a shopping cart on a
separate page. Data will be transferred from one page to the next by appending data
to a query string.
*/

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

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

/* 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: 960px;
   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 ------------------*/

section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select:none;
   height: 440px;
}

section h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0;
}


form {
   width: 80%;
   margin: 10px auto;
}

fieldset {
   padding: 12px;
   margin-bottom: 20px;
}

label {
   float: left;
   clear: left;
   width: 100px;
   margin: 0 0 20px 0px;
}

input[type=text], textarea {
   float: left;
}

textarea {
   width: 500px;
   height: 150px;
   margin: 0 0 5px 0;
}

input[type=submit] {
   clear: left;
   display: block;
   margin: 0 auto;
   font-size: 1.2em;
   letter-spacing: 0.3em;
   
}

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

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

table#greeting th {
   text-align: left;
   padding: 4px;
}

table#greeting td {
   padding: 4px;
   width: 250px;
}

table#order {
   float: left;
   font-size: 0.9em;
   margin-left: 20px;
}

table#order thead th {
   font-size: 1em;
   font-weight: bold;
   border-bottom: 1px solid gray;
   padding-bottom: 5px;
}

table#order tbody td {
   padding: 5px 0px;
}

table#order tbody td:nth-of-type(2) {
   text-align: right;
}

table#order tbody td:nth-of-type(3) {
   text-align: right;
}

table#order tfoot td {
   border-top: 1px solid gray;
   padding-top: 12px;
}

table#order tfoot td:nth-of-type(2) {
   width: 70px;
   text-align: right;
}

table#order tfoot td:nth-of-type(3) {
   width: 90px;
   text-align: right;
}