/* 
Filename: css/dissertation.css
Site: www.hypercommunications.net
Owner: Dean G. "Gordy" Fairchild
Author: Patt Leonard
Last update: June 13, 2016, by Patt Leonard
Description: This CSS3 file is intended for the dissertation-related HTML5 webpages of Dean G. Fairchild on Hypercommunications.net, and possibly other pages on the website.
 */

/*  CONTENTS OF THIS FILE */
/*
 --Eric Meyer's CSS Reset
 --HTML selectors (Defaults)
 ----Headers
 ----Body
 --Navigation
 ----Header menus
 ----Footer menu
 ----Pseudo class for <a> links 
 --Content
 ----Paragraphs and blockquotes
 ----Images/Figures
 ----Tables
 ----Lists
 --Footer
 --Font and color preferences
 --HTML5/CSS3 conventions
*/


/* ERIC MEYER'S CSS RESET ------------------------------------- */
/* Following code overwrites user agent styles, making the default styles as consistent as possible across various browsers.
http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126
License: none (public domain) */

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 {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	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: normal;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

ie{
	font-style: italic;
	}
	
i {
	font-style: italic;
	}

table {
	border-collapse: collapse; /* Make adjacent cells share common border. */
	border-spacing: 0; /* Can't set border-spacing if borders are collapsed. */
	table-layout: auto;
}
/* END ERIC MEYER'S CSS RESET ---------------------------------- */


/* HTML SELECTORS (DEFAULTS) -------------------------------------------------- */
html {
	background: rgb(255,255,255); /* white */
	margin: 0;
	padding: 0;
}

body {
	color: rgb(0,0,0); /* Renders text in black, including <h1>, etc., elements. */
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1em ;/* medium is default */
    font-weight: normal;
	letter-spacing: normal; /* normal is default */
	line-height: 1.25em; /* with letter height 1em */
	margin: 0 5% 5% 5%;
	max-width: 960px; /* For standard desktop screen sizes. */
	padding: 0;
	word-spacing: normal;
	text-align: left;
	vertical-align: baseline; /* Baseline is default; supposed to be good for dislaying superscript/subscript numbers. */
}
	
body.resume {
	color: rgb(0,0,0);
    font-family: Verdana, sans-serif;
	font-size: 100%;  
    font-weight: normal;
	letter-spacing: normal;
	line-height: 1.25;
	margin: 0 5% 5% 5%;
	max-width: 960px;
	padding: 0;
	word-spacing: normal;
	text-align: left;
}

/* HEADERS: PAGE TITLES AND CHAPTER AND SECTION HEADINGS ---------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, sans-serif;
	font-weight: normal;
	line-height: normal;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	}
	
/* h1 for page titles ------------------------------------------- */
h1 {
    /* border-bottom: 1px solid #d1242b; */
	font-size: 2.25em;
	line-height: 1.5em; /* with letter height 1em */
    margin-top: 2em;
    text-align: center;
}

/* h1.welcome for landing page (index.html) title -------------------------- */
h1.welcome {
    /* border-bottom: 1px solid #d1242b; */
	font-size: 2.25em;
    margin-top: 2em;
    text-align: center;
}

/* h1.chaptitle for chapter title on that chapter's page ------- */
h1.chaptitle {
    /* border-bottom: 1px solid #d1242b; */
	font-size: 2.25em;
	margin-bottom: 1em;
    margin-top: 1em; 	
    text-align: center;
}

/* h2.chapnumber for chapter number on that chapter's page ------ */
h2.chapnumber {
    /* border-bottom: 1px solid #d1242b; */
	font-size: 2em;
	margin-bottom: 0; 
    margin-top: 1.25em;
	text-align: center;
}

/* h3 for subsection 0.0 ----------------------------------------- */
h3.subsection {
    /* border-bottom: 1px solid #d1242b; */
	font-size: 1.75em;
    margin-top: 2em;
	text-align: left;
}

/* h4 for subsection 0.0.0-------------------------------------- */
h4.subsection {
	border-bottom: none;
	font-size: 1.5em;
    margin-top: 1.75em;
	text-align: left;
}

/* h5 for subsection 0.0.0.0 ------------------------------------ */
h5.subsection {
	border-bottom: none;
	font-size: 1.5em;
    margin-top: 1.75em;
	text-align: left;
}


/* h3.resumehead {
	font-size: 1.75em;
	font-weight: bold;
	margin: 1em auto 1em 0; 	
    text-align: left;
} */

h4.resumehead {
	font-size: 1.5em;
	font-weight: bold;
	margin: 1em auto 0 0; 	
    text-align: left;
}

h5.resumehead {
	font-size: 1em;
	font-weight: bold;
	margin: 1em auto 0 0; 	
    text-align: left;
}


/* NAVIGATION MENUS ------------------------------------------ */

ul.navigationmain {
	background-color: rgb(70,130,180); /* steel blue */
	list-style-type: none; /* remove the bullets */
	margin: 0;
	overflow: hidden;
	padding: 0;
}

ul.navigationmain li{
	display: inline; /* horizontal row not vertical list */
	float: left;
}

ul.navigationmain li a {
	display: block;
	color: white;
	padding: 5px 20px;
	text-align: center;
	text-decoration: none; 
}

ul.navigationmain li a:hover {
	background-color: rgb(192,192,192); /* silver */
}

ul.navigationchaper {
	background-color: rgb(70,130,180); /* steel blue */
	list-style-type: none; /* remove the bullets */
	margin: 0;
	overflow: hidden;
	padding: 0;
}

ul.navigationchaper li{
	display: inline; /* horizontal row not vertical list */
	float: left;
}

ul.navigationchaper li a {
	display: block;
	color: white;
	padding: 5px 20px;
	text-align: center;
	text-decoration: none; 
}

ul.navigationchaper li a:hover {
	background-color: rgb(192,192,192); /* silver */
}
	
/* PSEUDO-CLASS FOR <a> LINKS (ANCHORS) ------------------------------ */

/*a:link {
	text-decoration: underline;
}
 a:hover {
	 text-decoration: none; Make the links change from default underlined to not underlined when user hovers over them.  Desireable? 
}*/ 

a:focus {
	outline-color: black; /* Outline is important for accessibility. it lets user without mouse use Tab key to move through elements of the page. */
	outline-style: dotted; 
	outline-width: 1px;
}


/* PARAGRAPHS AND BLOCKQUOTES ---------------------------------- */

p {
	margin: 1em auto 0 auto;
}

p em {
	font-style: italic;
}

/* p.epigraph used for quotation at start of sections before subheading ---- */
p.epigraph {
	display: block;
	font-style: italic;
	margin: 0 auto 2em auto;
	width: 50%;
}

/* p.epigraph used for quotation at start of sections before subheading ---- */
p.epigraphwide {
	display: block;
	font-style: italic;
	margin: 0 auto 2em auto;
	width: 70%;
}

/* p.attribution used for source attibutions for tables ------------------- */
p.attribution {
    margin: 1em 2em 1em 2em;
}

/* p.seealso used for "See Also" references at start of sections ---------- */
p.seealso {
	font-style: italic;
}

/* p.toc used for spacing in Table of Contents ---------- */
p.toc {
	margin: 0 auto 0 2em ;
}

blockquote {
	font-style: normal;
	line-height: 1.15em; /* with letter height 1em */
	margin: 1em 5% 0 5%;
}

blockquote em {
	font-style: italic;
}

cite.italic {
	font-style: italic;
}


/* IMAGES / FIGURES (ILLUSTRATIONS) ---------------------------- */ 
/* Need more space above and below whole figure and between figure and caption. A few figures need borders added, most look better without any. Most figures should be centered. */

img {
	/* border-color: #808080; /* #808080 is medium gray;*/ 
	/* border-style: solid;*/
	/* border-width: 1px;*/
	display: block;
    margin: 2em auto 0 auto;
	/* max-width: 95%; */
	vertical-align; top;
}

/* img.banner for "Hypercommunications.net" graphic at top of page */
img.banner {
    display: block;
    margin: 0 auto 0 auto;
    width: 100%;
}

/* img.math for math equation images placed inline with prose */
img.math {
   	border: none;
	display: inline;
	margin: 0;
	padding: 0;
}

/* img.mathcentered for math equation images placed on separate line, as in Section 2.3.2.4 */
img.mathcentered {
    display: block;
   	border: none;
	margin: 1em auto 0 auto;
	padding: 0;
}

img.centered {
   	border: none;
    display: block;
    margin: 2em auto 0 auto;	
}

img.centeredbordered {
    border-style: solid;
    border-width: 3 px;
    display: block;
    margin: 5% auto 0 auto;
}

figure {
	display: block;
    margin: 1em auto 0 auto;
	max-width: 80%;
}

figcaption {
	display: block;
    /* margin: 1em auto 2em auto; */
	max-width: 80%;
	padding: 1em 10% 1em 10%;
	text-align: center;
}

figure.left {
    float: left;
    margin: 0 10em 0 20px;
	padding: 15px;
    border: 1px solid black;
	text-align: center;
}

/* TABLES ----------------------------------------------------------- */

table {
    border-collapse: collapse;
    margin: 2em auto 2em auto;
	max-width: 90%;
	overflow: auto;
	table-layout: auto;
}

table, th, td {
    border: 1px solid black;
	border-spacing: 0px;
	padding: 1% 1% 1% 1%;
}

th {
    font-weight: bold;
    text-align: middle;
	vertical-align: bottom;
} 

th.alignright {
    text-align: right;
}

th.gold{
	background-color: rgb(255,215,0) /* gold */
}

th.gold70percent{
	background-color: rgba(255,215,0, .7) /* gold */
}

td {
	vertical-align:  middle;
}

td.alignright {
    text-align: right;
}

td.aligncenter{
    text-align: center;
}

td.bold {
    font-weight: bold;
}

td.gold70percent{
	background-color: rgba(255,215,0, .7) /* gold */
}

td.gold50percent{
	background-color: rgba(255,215,0, .5) /* gold */
}

td.gray25percent{
	background-color: rgba(128,128,128, .25) /* gray */
}

td.yellow{
	background-color: rgb(255,255,0) /* yellow */
}

td.lightsteelblue {
	background-color: rgb(176,196,222);
}

caption {
	font-weight: bold;
	margin-bottom: 1em;
}


/* Example code to span columns
 <table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table> */

/* Example code to span rows
 <table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table> */

/* Example code for formatting one table different from default
HTML <table id="t01">
CSS table#t01 {
    width: 100%;
    background-color: #f1f1c1;
} 
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
} 
 */

/* LISTS --------------------------------------------------------------- */

 ul {
	list-style-type: disc;
	margin: 1em auto 0 3em;
}

 ul.toc {
	list-style-type: disc;
	margin: 1em auto 1em 2em ;
}

 ol {
	list-style-type: decimal;
	margin: 1em auto 0 3em;
}

/* dl, dt, dd for DESCRIPTIVE LISTS (used in resume.html) */

dd {
	font-size: 1em;
	font-weight: normal;
}

dt.jobtitle {
	font-size: 1.25em;
	font-weight: bold;
	margin: 2em auto 0 0;
    text-align: left;
}

dd.jobcompany {
	font-size: 1em;
	font-weight: bold;
	margin: 0 auto 0 0;
    text-align: left;
}

dd.jobdate {
	font-size: 1em;
	font-weight: normal;
	margin: 0 auto 0 0;
}

dd.jobdescription {
	font-size: 1em;
	font-weight: normal;
	margin: 0 auto 0 0;
}

/* FOOTER --------------------------------------------------------------- */
footer {
	clear: both;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
    font-weight: normal;
	margin-top: 5%;
}

footer.copyright {
	background: #000;
	color: #fff;
	letter-spacing: 1px;
	margin: .5em 0;
	padding: 1% 0;
	text-align: center;
	width: 100%; /* for IE7 */
}


/* MATH ------------------------------------------------------------------- */ 
 /* Replace .gifs of formulas with code? Research "math" and other MathML elements valid in HTML5. Old info? that MathML not properly parsed by most web browsers.
See http://dev.w3.org/html5/spec-author-view/mathml.html */


/* MISCELLANOUS FORMATING ------------------------------------------------- */
address {
	font-style: normal;
}

/* THIS WEBSITE Hypercommunications.net FONT AND COLOR PREFERENCES --------------------------- */

/* font for text: Georgia, "Times New Roman", serif; */
/* font for headings, navigation menus: sans serif */
/* For text size of headings and other special elements, use ems (not px) to scale text for display on variety of devices. */
/* All leading determined by margin-top, all margin-bottom = 0 (except epigraph, table caption, and figcaption) */

/* For easier human readability, prefer RGA decimal colors. */
/* RGB(rrr,ggg,bbb) red, green, blue, in decimals ranging from 0-255. */
/* rgb(0,0,0) black */
/* rgb(0,0,255) blue */
/* rgb(0,191,255) deep sky blue */
/* rgb(255,215,0) gold */
/* rgb(192,192,192) silver */
/* rgb(70,130,180) steel blue */
/* rgb(255,255,0) yellow */
/* rgb(255,255,255) white */
 
 
/* REJECTED COLORS */
/* rgb(5,100,160); /* unknown blue, but pretty */
/* rgb(0,128,128) ; /* teal -- too green */
/* rgb(30,144,255) ; /* dodger blue -- close but a liitle too bright/primary  */ 
/* rgb(95,158,160) ; /* cadet blue -- too gray-green  */ 
/* rgb(0,255,255) ; /* aqua/cyan -- too garish */
/* rgb(0,206,209) ; /* dark turquoise -- too green */
 

	
/* THIS WEBSITE Hypercommunications.net HTML AND CSS FILES CONVENTIONS ------------------------------------------------- */
/* CSS: selector properties listed in alphabetical order by property. */
/* HTML: section ids in the form <a id="section-3.2">
/* HTML: table ids in the form <a id="table-3-1">


/* GENERAL HTML5/CSS3 CONVENTIONS ------------------------------------------------- */
	/* CSS: HTML, CLASS OR ID SELECTOR {DECLARATION;} */
	/* CSS: selector {property: value;} */

	/* HTML */		
	/* HTML: <htmltag> */
	/* CSS: htmltag {property: value;} */

	/* CLASS */	
	/* HTML: <htmltag class="x"> */
	/* CSS: .class {property: value;} */
	
	/* DEPENDENT CLASS */	
	/* HTML: <htmltag class="x"> */
	/* CSS: htmltag.class {property: value;} */

	/* ID  Note: id= used only once on each page, to uniquely identify an element. */	
	/* HTML: <htmltag id="x">  Note: don't use pound sign in tag. */
	/* HTML: <a href="#x"> To navigate within page to identified element. */ 
	/* HTML: <a href="#section-0.0"> */
	/* HTML: <a href="page.hmtl#x"> To navigate between pages to identified element. */
	/* HTML: <a href="page.hmtl#section-0.0"> */
	/* CSS: htmltag#x {property: value;} */

	/* margin: 1 2 3 4; top, right, bottom, left */