/*
   Hands-on Project 6-3
   Sung Kim | 6-28-26 | IST-239-W01
   Program: Billing and Shipping Form Styles

   Purpose:
   This program provides a checkout form for entering, copying, validating, and displaying shipping and billing information. 
   The layout presents the shipping and billing fields in separate sections and visually identifies required or invalid fields. 
   It also formats the custom error message and the tables shown after the form is submitted. 
   
   This specific CSS file controls the appearance and layout of both HTML pages in the project.
   
   Related: project06-03.html, project06-03.js, formsubmit.html
*/

/* Box sizing */
* {
   -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,
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 elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

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

/* Lists */
ol, ul {
   list-style: none;
}

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

/* Main content */
article {
   width: 960px;
   text-align: left;
   background: #FFDB70;
   position: relative;
}

/* Project content */
article {
   padding: 20px 50px 60px;
}

/* Checkout heading */
article h1 {
   font-size: 1.7em;
   margin-bottom: 20px;
}

/* Billing and shipping form */
form#billShip {
   display: flex;
   flex-flow: row wrap;
}

/* Address sections */
form#billShip section {
   flex: 1;
   margin: 10px;
}

/* Copy-address checkbox */
input#useShip {
   position: absolute;
   top: 10px;
   left: 10px;
}

/* Copy-address label */
label#cbLabel {
   position: absolute;
   top: 10px;
   left: 35px;
   width: 250px;
   float: none;
   clear: none;
   display: block;
   text-align: left;
}

/* Field groups */
fieldset {
   border: 2px ridge rgb(128, 128, 128);
   padding: 50px 5px 0px;
   position: relative;
   margin-top: 5px;
}

/* Required-field marks */
fieldset span {
   color: red;
   font-weight: bold;
}

/* Field labels */
fieldset label {
   display: block;
   float: left;
   clear: left;
   width: 150px;
   text-align: right;
   margin: 0 15px 25px 0;
}

/* Required-field note */
fieldset p {
   position: absolute;
   top: 10px;
   right: 10px;
}

/* Text fields */
fieldset input[type="text"] {
   float: left;
   width: 200px;
   margin: 0 0 25px 0;
}

/* Submit button */
input[type="submit"] {
   display: block;
   width: 120px;
   height: 30px;
   font-size: 1em;
   margin: 20px auto;
   float: none;
   clear: none;
}

/* Validation message */
p#errorBox {
   width: 100%;
   color: red;
   font-size: 1.1em;
   margin-left: 10px;
   margin-top: 10px;
   border: 1px solid red;
   background-color: white;
   padding: 15px;
}

/* Invalid text fields */
input[type="text"]:invalid {
   background-color: rgba(255, 0, 0, 0.3);
}

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

/* Results tables */
table {
   margin-left: 30px;
   border-collapse: collapse;
   width: 48%;
   float: left;
   margin-right: 1%;
}

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

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