/*
   Hands-on Project 8-1
   Sung Kim | 7-12-26 | IST-239-W01

   Purpose:
   This project creates an interactive countdown timer that tracks minutes and seconds. The timer can be started and paused with a single button. It updates the displayed time once per second and automatically stops when it reaches zero.

   This CSS file formats the page layout, timer display, labels, and control button.

   Filename: styles.css
   Related: project08-01.html, project08-01.js
*/

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

/* Reset the default spacing and formatting for page elements. */
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;
}

/* Display HTML5 structural elements as block elements. */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

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

/* Remove list markers from ordered and unordered lists. */
ol, ul {
   list-style: none;
}

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

/* Format the timer section. */
section {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 20px;
   user-select: none;
   height: 340px;
}

/* Format the timer section heading. */
section h1 {
   font-size: 2.8em;
   text-align: center;
   margin: 0;
   padding: 20px 0;
}

/* Format the timer display container. */
div#timerClock {
   display: block;
   margin: 0 auto;
   width: 300px;
   background-color: rgba(130, 130, 130, 0.9);
   text-align: center;
   height: 200px;
   border: 10px outset gray;
}

/* Format the minutes and seconds input boxes. */
input#minutesBox, input#secondsBox {
   font-size: 3em;
   display: inline-block;
   width: 90px;
   text-align: right;
   padding: 5px;
   background-color: black;
   color: #F0F4B6;
   margin-top: 20px;
}

/* Format the separator between the time values. */
span#separator {
   display: inline-block;
   font-size: 3em;
   text-align: center;
}

/* Format the minutes and seconds labels. */
span#minLabel, span#secLabel {
   display: inline-block;
   margin: 5px 30px;
   color: blue;
}

/* Format the run and pause button. */
input#runPauseButton {
   font-size: 1.2em;
   display: block;
   width: 160px;
   height: 35px;
   margin: 10px auto;
   cursor: pointer;
}