/*
   Hands-on Project 6-5
   Sung Kim | 6-28-26 | IST-239-W01
   Program: Conference Registration Calculator Styles

   Purpose:
   This program collects attendee information and calculates the total cost of conference registration.
   The registration page includes contact fields, conference choices, and an automatically updated shopping cart.
   Visual validation styles help users identify valid, invalid, and active form fields.
   
   This CSS file controls the layout and appearance of the registration and confirmation pages.

   Filename: styles.css
   Related: project06-05.html, project06-05.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 {
   background: white;
   width: 960px;
   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 {
   text-align: left;
   background: #FFDB70;
   position: relative;
}

/* Registration layout */
article {
   background: #FFDB70;
   font-family: Verdana, Geneva, sans-serif;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
}

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

/* Fieldset base */
section fieldset {
   padding: 0;
}

/* Contact fieldset */
section fieldset:first-of-type {
   margin: 10px 0px;
   padding: 18px;
   border-right: none;
   border-bottom: none;
   border-left: 4px groove rgb(165, 255, 255);
   border-top: 4px groove rgb(165, 255, 255);
   border-radius: 25px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
}

/* Conference choices fieldset */
section fieldset:last-of-type {
   margin: 10px 0px;
   border-top: none;
   border-left: none;
   border-right: 4px groove rgb(165, 255, 255);
   border-bottom: 4px groove rgb(165, 255, 255);
   border-radius: 25px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
}

/* Form labels */
section label {
   display: block;
   float: left;
   clear: left;
   margin: 3px;
   width: 240px;
   font-size: 0.8em;
   color: rgb(101, 101, 101);
}

/* Form controls */
section input, section select {
   display: block;
   float: left;
   margin: 3px 0px;
   width: 200px;
   color: rgb(101, 101, 101);
}

/* Checkbox */
section input[type="checkbox"] {
   width: 25px;
}

/* Banquet field */
section input#banquetBox {
   width: 4em;
}

/* Session list */
section select {
   font-size: 0.75em;
   color: rgb(101, 101, 101);
}

/* Form descriptions */
section span {
   display: block;
   width: 100px;
   float: left;
   margin: 3px 0px 3px 5px;
   font-size: 0.8em;
   color: rgb(101, 101, 101);
}

/* Card labels */
section label.cardLabel {
   display: inline-block;
   width: 50px;
   float: none;
}

/* Radio buttons */
section input[type='radio'] {
   width: 20px;
   display: inline-block;
}

/* Form images */
section img {
   display: inline
}

/* Submit buttons */
section input#subButton, section input#regSubmit {
   background-color: rgb(69, 149, 151);
   color: rgb(216, 245, 245);
   border-radius: 20px;
   float: none;
   display: block;
   font-size: 1.1em;
   height: 30px;
   width: 150px;
   clear: left;
   margin: 10px auto;
}

/* Card fieldset */
section fieldset#cards {
   border: none;
}

/* Registration shopping cart */
aside#reg1Aside table {
   width: 100%;
}

/* Secondary shopping cart */
aside#reg2Aside table {
   width: auto;
   margin: 20px auto;
}

/* Shopping-cart caption */
aside table caption {
   font-size: 1.2em;
   font-weight: normal;
   text-align: center;
   letter-spacing: 0.1em;
   margin: 4px 0px 12px 0px;
   caption-side: top;
   color: rgb(101, 101, 101);
}

/* Shopping-cart headings */
aside table th {
   vertical-align: top;
   font-weight: normal;
   text-align: left;
   font-size: 0.8em;
   color: rgb(101, 101, 101);
   padding-right: 15px;
}

/* Shopping-cart values */
aside table td {
   vertical-align: top;
   font-size: 0.8em;
   letter-spacing: 0.1em;
   width: 140px;
   background-color: transparent;
   color: rgb(101, 101, 101);
}

/* Shopping-cart total */
aside table tr:last-of-type th, aside table tr:last-of-type td {
   border-top: 1px solid rgb(101, 101, 101);
}

/* Focused controls */
input:focus, select:focus {
   background-color: rgb(245, 245, 140);
}

/* Valid focused fields */
input#fnBox:focus:valid,
input#lnBox:focus:valid,
input#groupBox:focus:valid,
input#mailBox:focus:valid,
input#phoneBox:focus:valid {
   background-color: rgb(220, 255, 220);
}

/* Invalid focused fields */
input#fnBox:focus:invalid,
input#lnBox:focus:invalid,
input#groupBox:focus:invalid,
input#mailBox:focus:invalid,
input#phoneBox:focus:invalid {
   background-color: rgb(255, 232, 232);
}