/*
   Author: Carl Hester
   Date: 06/07/2026
   Course: IST239 – JavaScript
   Project: Hands-On Project 2-5
   File: styles.css

   Description:
   This stylesheet provides all visual formatting for the calculator
   interface used in Hands-On Project 2-5. It includes global reset
   rules, page layout styling, and detailed formatting for the
   calculator table, buttons, and display window. Rounded corners,
   shadows, and background colors are applied to create a polished
   calculator appearance consistent with the project requirements.
*/

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

/* 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 { /* reset default styles for common HTML elements */
   margin: 0; /* remove default margin */
   padding: 0; /* remove default padding */
   border: 0; /* remove default border */
   font-size: 100%; /* normalize font size */
   font: inherit; /* inherit font from parent */
   vertical-align: baseline; /* align inline elements consistently */
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { /* set HTML5 semantic elements to block display */
   display: block; /* make these elements behave as blocks */
}

body { /* styling for the page body */
   line-height: 1; /* set default line height */
   width: 960px; /* fixed page width */
   background: white; /* white page background */
   margin: 30px auto; /* center page and add vertical margin */
   font-family: Verdana, Geneva, sans-serif; /* set page font family */
   position: relative;   /* establish positioning context */
}

ol, ul { /* list styling */
   list-style: none; /* remove bullets and numbers */
}

/* page header */
header { /* header styling */
   background: #330570; /* purple header background */
   width: 100%; /* full width header */
   color: #FFFFFF; /* white header text */
   font-size: 48px; /* large font size for header */
   text-align: center; /* center header text */
   line-height: 1.5em; /* spacing for header text */
}

/* main content */
article { /* main article container styling */
   width: 960px; /* fixed width for content */
   height: 450px; /* fixed height for content area */
   text-align: left; /* left align content */
   background: #FFCF40; /* yellow background color */
   padding-top: 25px; /* top padding inside article */
}

/* Calculator Table Styles */
table#calculator { /* main calculator table styling */
   background-color: rgb(211, 211, 211); /* light gray background */
   border: 10px outset rgb(92, 92, 92); /* 3D outset border */
   -moz-border-radius: 25px; /* rounded corners for Firefox */
   -webkit-border-radius: 25px; /* rounded corners for WebKit */
   border-radius: 25px; /* standard rounded corners */
   padding: 15px; /* inner spacing inside table */
   margin: 0px auto; /* center table horizontally */
   -moz-box-shadow: rgb(101, 101, 101) 20px 10px 20px; /* shadow for Firefox */
   -webkit-box-shadow: rgb(101, 101, 101) 20px 10px 20px; /* shadow for WebKit */
   box-shadow: rgb(101, 101, 101) 20px 10px 20px; /* standard box shadow */
}

table#calculator td { /* table cell styling */
   width: 40px; /* fixed cell width */
   height: 40px; /* fixed cell height */
   margin: 10px; /* spacing around cells */
}

table#calculator input { /* calculator button styling */
   -moz-border-radius: 7px; /* rounded corners for Firefox */
   -webkit-border-radius: 7px; /* rounded corners for WebKit */
   border-radius: 7px; /* standard rounded corners */
   width: 100%; /* fill container width */
   height: 100%; /* fill container height */
}

table#calculator textarea { /* calculator display styling */
   width: 100%; /* fill available width */
   height: 100px; /* fixed display height */
   background-color: rgb(55, 105, 62); /* dark green display background */
   font-size: 1.4em; /* larger text inside display */
   color: rgba(255, 255, 255, 0.7); /* semi-transparent white text */
}

table#calculator td#decimalTD { /* special cell styling for decimal controls */
   font-size: 0.9em; /* smaller text size */
   text-align: right; /* right align content */
}

table#calculator input#decimals { /* styling for decimals input field */
   width: 35px; /* narrow input width */
   height: 20px; /* shorter input height */
   background: transparent; /* transparent background */
   text-align: center; /* center the text inside */
}