/*  JavaScript 7th Edition
   <!--
      Author: Bryan Bibb
      Date: May 31, 2024
      Program: Hands-On Project 3-1
      Purpose: calculates the total cost of items selected from a lunch menu using a for loop
               and an if statement as part of the program code. The cost of each menu item is
               stored in the value attribute of an input control on the web form.

      Filename: styles.css
   -->

*/

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

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

article h2 {
   font-weight: bold;
   font-size: 24px;
   padding: 10px;
}

/* form */
form {
   float: left;
}

input {
   float: left;
   clear: left;
   margin: 10px;
}

label {
   float: left;
   font-size: 1.4em;
}

/* total div */
article div {
   width: 50%;
   float: right;
   font-size: 18px;
   font-weight: bold;
}

aside {
   font-size: 1.5em;
   position: absolute;
   left: 400px;
   top: 20px;
}