/*
   Hands-on Project 7-5
   Sung Kim | 7-5-26 | IST-239-W01
   Program: Stylometry Word Distribution Analysis

   Purpose:
   This project compares the writing styles of two authors by analyzing the frequency of words with different lengths.
   It allows the user to load two HTML documents and displays each document in a scrolling area.
   The results show the percentage of words from one through fifteen or more characters for each author.

   This CSS file controls the appearance and positioning of the document panels and frequency results.

   Filename: styles.css
   Related: project07-05.html, project07-05.js, hemmingway1.html, lovecraft1.html
*/

/* Applies consistent box sizing to every element. */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* Removes the default spacing and font styles from 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;
}

/* Displays HTML5 page elements as blocks in older browsers. */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}

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

/* Removes bullets and numbering from lists. */
ol, ul {
   list-style: none;
}

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

/* Styles the main content area. */
body > div {
   background-color: #FFDB70;
   margin-top: 0;
   padding-bottom: 30px;
}

/* Styles the Word Distribution Analysis heading. */
body > div > h1 {
   text-align: center;
   font-size: 1.8em;
   font-weight: bold;
   padding-top: 10px;
   margin-bottom: 5px;
}

/* Styles the headings for both authors. */
div#author1 > h1, div#author2 > h1 {
   font-size: 1.2em;
   text-align: center;
   margin: 0;
   padding: 10px 0;
   width: 100%;
}

/* Places the two author document panels beside each other. */
section#docs {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}

/* Styles the scrolling document display areas. */
article {
   width: 400px;
   font-size: 0.8em;
   height: 200px;
   overflow: auto;
   padding: 5px;
   margin: 10px 10px 20px;
   background-color: ivory;
   border: 1px solid gray;
}

/* Styles the document title inside each display area. */
article h1 {
   font-size: 1.4em;
   font-weight: bold;
}

/* Styles the document author heading inside each display area. */
article h2 {
   font-size: 1.15em;
   font-weight: bold;
}

/* Adds spacing between document paragraphs. */
article p {
   margin: 10px 0;
}

/* Places the three frequency columns beside each other. */
section#counts {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
}

/* Styles the headings above the frequency columns. */
section#counts h1 {
   font-size: 1.2em;
   margin-bottom: 5px;
   margin-top: 0;
   border-bottom: 1px solid gray;
   padding-bottom: 5px;
}

/* Styles the center word length column. */
section#counts div#count {
   text-align: center;
   width: 80px;
   border-left: 1px solid gray;
   border-right: 1px solid gray;
   padding: 0 6px;
}

/* Styles the first document frequency column. */
section#counts div#count1 {
   text-align: right;
   width: 80px;
   padding-right: 6px;
}

/* Styles the second document frequency column. */
section#counts div#count2 {
   text-align: left;
   width: 80px;
   padding-left: 6px;
}