@charset "UTF-8";
/*@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap")*/



body {
    /*font-family: avenir;*/
    margin: 0 25px 0 25px;
    background-color: #faf0e6;
    background-color: linen;
    background-color: cornsilk;
    background-color: wheat;
    line-height: 1.7;
}

kbd {
    font-size: 1.2em;
}

h4 nav a {
    margin-left: 200px;
}

/*tags*/
h1, h2, h3, h4, p, dl, ol {
    font-family: arial;
    color: #162c16;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

h1 {
    font-size: 30pt;
    font-weight: bold;
	text-decoration: underline;
}

h2 {
    font-size: 25pt;
    font-weight: normal;
	/*margin-top: 50px;
	margin-bottom: 60px;*/
}

h3 {
    font-size: 18pt;
    font-weight: bold;
	/*margin-top: 50px;
	margin-bottom: 60px;*/
}

h4 {
    font-size: 12pt;
    font-weight: normal;
	/*margin-top: 50px;
	margin-bottom: 60px;*/
}

aside {
    text-align: center;
    font-size: .9em;
}

dl, ol {
    margin: 25px 47px 25px 47px;
}

dd, li {
    margin-bottom: 8px;
}

i, u {
    font-family: verdana;
}

img {
    margin: auto;
}

img #self {
    float: right;
}

/*kbd {
    font-family: andale mono;
    font-family: times new roman;
    font-size: 1.1em;
}*/

.la li {
    list-style-type: lower-alpha;
}

li {
    text-indent: 10px;
}

mark {
    background-color: #efdecd;
    background-color: rgba( 210, 180, 150, 0.35);
}

/*p {
	margin-left: 53px;
	text-indent: 13px;
	line-height: 20px;
}*/

p .tableTitle {
    font-family: Verdana;
    font-weight: bold;
}

p .note {
    font-family: verdana;
    font-family: avenir;
    color: darkred;
    /*color: peachpuff;*/
    margin: 25px 73px 25px 53px;
}

h2 .descriptiveTitle {
    margin-top: 25px;
}

section {
    margin: 25px;
    padding: 25px;
}

sup, sub {
	font-size: .6em;
}

table {
	border: 1px solid white;
	margin-bottom: 10px;
	    text-align: left;
}

td {
	height: 28px;
	background-color: #ececec;
}

th {
	height: 25px;
	background-color: #cacaca;
	font-family: Arial;
	font-size: .8em;
	font-weight: normal;
	    text-align: left;
}

th, td {
	width: 300px;
	padding: 4px 10px 3px 10px;
		text-align: left;
}

ul {
    color: #162c16;
	list-style: none;
	text-indent: 6px;
	margin: 10px 140px 10px 45px;
}


/*ids*/
#box {
    margin: 30px;
}

#congrats {
    font-size: 1.4em;
}

#contentsTable th, td {
	background-color: white;
	height: 15px;
}

#contentsTable th {
	width: 700px;
}

#contentsTable td {
	width: 50px;
}

#contentsTable .subtopic {
	margin-left: 100px;
}

#contentsTable .colone {
	text-align: left;
}

#expenseTablesSteps {
    line-height: 24px;
}

#incTable {
    width: 600px;
    margin: auto;
}

#list {
	font-size: 1.2em;
	margin-top: -14px;
	margin-bottom: -15px;
}

#list li {
	margin-bottom: -18px;
}

#listOfContents {
	margin-left: 40px;
}

#mpTable {
    width: 800px;
    margin: auto;
}

#myCopy {
    font-family: helvetica neue;
    font-family: graphik;
    padding: 20px 30px 20px 30px;
}

#oeTable {
    width: 900px;
    margin: auto;
}

#sectionTitle {
	font-style: italic;
	margin-left: 0;
}

                    #self {
                        float: right;
                    }
                    
                    #who {
                        float: left;
                    }

#guidetitle {
    /*background-image: url("images/life_preserver1.jpg.webp");*/
    background-image: url("images/life_preserver2.jpg.webp");
}

#wrapper {
    background-color: whitesmoke;
    background-color: linen;
	margin: 20 40px 0 40px;
}


/*classes*/

.advice {
    font-style: italic;
    font-weight: lighter;
}

.alignLeft {
        text-align: left;
}

                    .aphorism {
                        font-family: Academy Engraved LET;
                        color: darkolivegreen;
                        font-style: italic;
                    }

.wkbk, .wksh {
    font-family: arial;
}

.appName {
    font-family: geneva;
    font-size: 1.3em;
    font-weight: bold;
}

.apxno {
    font-family: helvetica neue;
    font-weight: lighter;
}

.area {
    font-weight: bold;
}

.aside {
                /*font-family: verdana;*/
                /*color: lightslategrey;*/
    /*outline: 2px solid khaki;*/
    /*outline: 2px solid lightsalmon;*/
    outline: 2px solid lightslategrey;
    padding: 5px 20px;
    margin: 0 59px 30px 59px;
    background-color: lemonchiffon;
    background-color: peachpuff;
    /*background-color: lightcyan;*/
    /*background-color: lightgoldenrodyellow;*/
    /*background-color: lightyellow;*/
    /*background-color: linen;*/
}

.aside p {
    font-family: verdana;
    color: darkslategrey;
    font-style: italic;
    font-size: .9em;
}

.attribute {
	font-family: Andale Mono;
	font-size: .9em;
	font-weight: 100;
}
                .banner {
                    /*background-color: blue;
                    border: 1px solid hsla(0, 100%, 0, 0.5);*/
                    border: 1px solid darkolivegreen;
                    /*border-radius: 168px;*/
                    border-radius: 84px;
                    margin: 25px 50px 0 50px;
                    
                }

.black {
    color: black;
    font-weight: bold;
}

.blue {
    color: darkblue;
    font-weight: bold;
    
}

.bluish {
    color: blue;
}

.bookName {
    font-family: geneva;
    font-size: 1.2em;
    font-weight: normal;
}

.bookTitle {
	font-family: helvetica neue;
	font-size: 1.1em;
	font-weight: bold;
}

.brn {
    color: brown;
}

.button {
    /*font-family: futura;*/
    font-family: verdana;
    font-size: 1.1em;
    font-weight: normal;
}

.center {
    text-align: center;
    margin-right: 40px;
}

.chapterTitle {
	margin-bottom: -6px;
	text-decoration: underline;
}

.cNum {
    font-family: Academy Engraved LET;
    font-size: .8em;
}

                            /*.conj {
                                text-indent: 80px;
                            }*/

.colHead {
    font-family: avenir next;
    color: black;
    font-style: italic;
    text-decoration: underline;
}

.colone {
    text-align: left;
}

.colpal {
    font-family: helvetica neue;
    font-family: avenir;
    color: #567;
    font-size: 1.1em;
}

.colrow {
    /*font-family: helvetica neue;
    font-family: big caslon;
    font-family: hoefler text;
    font-family: georgia;*/
    font-family: menlo;
    font-family: monaco;
    font-family: andale mono;
    font-family: charter;
    
    font-family: bakersville;
    font-family: garamond;
    
    font-family: charter;
    color: black;
    /*font-family: Academy Engraved LET;*/
    font-size: 1.1em;
}

.commentBox {
    text-align: center;
}

.concept {
    font-family: Avenir Next Condensed;
	font-size: 1.15em;
	font-style: italic;
	font-weight: normal;
	color: olive;
}

.contentsTable th, td {
    background-color: white;
	height: 15px;
}

.contentsTable th {
    width: 700px;
}

.contentsTable td {
    width: 50px;
}

.contentsTable .subtopic {
	margin-left: 100px;
}

.contentsTable .colone {
	text-align: left;
}

.control {
    font-family: avenir;
    font-size: 1.1em;
}

    .concl {
        margin-top: 140px;
    }

.coninc {
	font-weight: bold;
	margin-left: -22px;
}

.drkgrn {
    color: darkgreen;
}

.darkred {
    color: darkred;
}
.descriptiveTitle {
    font-family: Academy Engraved LET;
    font-size: 1.2em;
    font-weight: normal;
	text-decoration: none;
}

.dialog {
   /* font-family: helvetica neue;*/
    color: #567;
    font-size: 1.1em;
}

.divider {
	font-size: .9em;
	text-align: center; /* I don't know why this has no effect */
}

.firstLetter {
    font-family: Academy Engraved LET;
    font-size: 1.4em;
}

.formula {
    /*color: slateblue;*/
    color: teal;
    font-size: 2em;
    font-weight: lighter;
    margin: 15px 0 15px 0;
    text-align: center;
}

.fortab {
    /*font-family: rockwell;*/
    font-size: 1.3em;
    font-weight: lighter;
    /*font-weight: normal;*/
    text-decoration: underline;
    margin: 5px 0 -2px 0
}

.green {
    color: darkgreen;
    font-weight: normal;
}

.grey {
    color: #765;
}

.grnish {
    color: #1daa14;
}

                                .hdr {
                                    margin-top: 50px;
                                }

.headerBox {
	border: 2px solid #ff00ff;
	background-color: #998877;
		opacity: 100;
	color: #ffff00;
	padding: 10px;
	margin: 0 70px 0 70px;
}

.highlight {
    background-color: brown;
}

.Index {
    text-align: left;
}

.indent {
    margin: 0 42px 0 42px;
}

.label {
    font-family: helvetica neue;
    font-family: optima;
    /*font-size: 1.1em;*/
    font-weight: lighter;
    font-weight: normal;
    color: #535454;
}

.large {
    font-family: geneva;
    font-size: 1.3em;
    font-weight: bold;
}

.larger {
    font-size: 1.2em;
}

.largest {
    font-size: 1.3em;
}

li .darkred {
    /*font-family: geneva;*/
    color: darkred;
    /*font-weight: bold;*/
}

.lighter {
    /*font-family: proxima nova;
    font-family: skia;*/
    font-family: avenir next;
    font-family: optima;
    color: black;
    font-weight: normal;
}

.ltgrn {
    color: rgb(178, 218, 191);
    font-size: 1.1em;
}

.menu {
    font-size: 1.2em;
    font-weight: bold;
}

.menSel {
    font-size: .9em;
    font-weight: bold;
}

.MMTerm {
	font-family: times new roman;
	color: darkolivegreen;
	font-size: 1.2em;
	font-style: italic;
}

.nav {
    text-align: center;
}

.ndxItm {
    font-style: italic;
    color: blue;
}

.need {
    font-family: helvetica neue;
	font-style: italic;
	font-weight: bold;
}

.newTerm {
	font-size: 1.1em;
	font-style: italic;
	color: darkolivegreen;
	margin: 5px 0 3px 0;
}

                            /*.normal {
                                font-weight: normal;
                            }*/

.note {
    color: red;
    margin: 0 30px 0 30px;
}

.note:first-child {
    font-style: italic;
}

.object {
    font-family: avenir;
    font-size: 1.1em;
}

.omitable {
    background-color: peachpuff;
}

.oper {
    font-family: garamond;
    text-align: left;
    font-size: 1.1em;
    font-weight: bolder;
    margin: 15px 0 -15px 0;
}

.orange {
    color: darkorange;
}

.outline {
    color: darkolivegreen;
}

.pane {
    /*font-family: helvetica;*/
    font-family: futura;
    font-size: 1.3em;
    font-weight: bold;
}

.paren {
    font-size: .9em;
}

.part {
    font-family: courier;
    text-align: center;
}

.prompt {
    font-family: helvetica;
    color: #777;
    font-size: 1.1em;
    /*font-weight: 500;*/
}

.prompt, .storage {
    font-family: helvetica;
    /*color: #777;*/
    font-size: 1.1em;
    font-weight: 500;
}

.prop {
    font-size: 1.1em;
    /*font-style: italic;*/
    font-weight: lighter;
}

.propsec {
    font-family: helvetica neue;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: smallcaps underline;
}


.red {
    color: #920000;
}

.redish {
    color: #dc2220;
}

/*.result {
    margin-left: 80px;
}*/

.sectionHead {
    font-family: avenir;
    font-size: 1.6em;
    font-style: italic;
    margin-left: -35px;
    margin-top: 40px;
}

.selbox {
    font-family: avenir;
    font-size: 1.1em;
}

.slateblue {
    color: darkslateblue;
    font-style: italic;
}

.smaller {
    font-size: .9em;
}


.smallest {
    font-size: .8em;
}

                                /*.storageDevice {
                                    font-family: Courier;
                                    font-size: 1.1em;
                                    font-weight: bold;
                                }*/

.subtopic {
	font-weight: normal;
	margin-left: -22px;
}

.sub-subtopic {
	margin-left: -22px;
}

.symbol {
    font-size: 2em;
}

.tab {
    font-family: helvetica neue;
    font-family: helvetica;
    font-size: 1.1em;
    font-weight: bold;
}

.table {
    font-size: 1.1em;
    font-weight: lighter;
}

.tableSteps {
    font-family: Arial;
}

.tableSteps p {
    line-height: 24px;
}

.tableTitle {
	font-family: Arial;
	font-weight: 200;
	text-align: left;
}

.task {
    font-variant: small-caps;
    font-size: 1.4em;
    margin-top: 45px;
    margin-left: -34px;
    margin-bottom: -12px;
}

.thkblk {
    font-family: avenir;
    color: black;
    font-size: 1.1em;
}

.thkgrn {
    color: darkgreen;
    font-weight: bold;
}

.thngrn {
    font-family: avenir;
    color: darkgreen;
    font-weight: lighter;
}

                            /*.thick {
                                font-family: courier;
                                color: darkgreen;
                                outline: 1px solid green;
                            }*/

.topic {
	text-align: right;
	background-color: orange;
}

.usrntry {
    font-family: avenir next;
    font-family: optima;
    color: black;
    font-weight: normal;
}

.violet {
    color: darkviolet;
    color: #970e53;
}
.white {
    color: white;
}
.wkbk {
    font-size: 1.2em;
    font-weight: normal;
}

.wksh {
    font-size: 1.1em;
    font-weight: lighter;
}

.Yay {
    font-family: party let;
    font-size: 8em;
    /*margin-top: 80px;*/
    margin-bottom: 30px;
    /*padding-top: 30px;*/
}

.yelora {
    color: rgb(255, 217, 50);
}

.yello {
    color: #ed8811;
    color: rgb(254, 174, 0);
}

/*
    Identity by HTML5 UP
    html5up.net | @n33co
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/


/*<html>
    <head>
        
        <title>Rick's Website</title>
        
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!--[if lte IE 8]><script src="assets/js/html5shiv.js"></script><![endif]-->
        	<!-- ><link rel="stylesheet" href="assets/css/main.css" /> -->
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
        	<!-- ><noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> -->
				<link rel="stylesheet" href="cssExercise.css" />
    </head>
		
    <body class="is-loading">

    	<!-- Wrapper -->
      	<div id="wrapper">
					<h1>HTML EXERCISE</h1>
					<hr />
							
					<!-- Contents -->
	          	<section id="tableOfContents">

	            	<header>
                          
	                  <h2 class="bookSection">CONTENTS</h2>
										<p id="sectionTitle">INTRODUCTION</p>
										<h4 class="chapterTitle">CHAPTER 1: STRUCTURING DOCUMENTS FOR THE WEB</H4>
										<hr />
                          
	              </header>
							
								<section>
									<table id="contentsTable">
										<tr>
											<th class="topic">A Web of Structured Documents</th>
											<td>1</td>
										</tr>
										<tr>
											<th class="topic">Introducing HTML5</th>
											<td>2</td>
										</tr>
										<tr>
											<th class="subtopic">Tags and Elements</th>
											<td>4</td>
										</tr>
									</table>
										
										
										<th>Introducing HTML5</pre></th>
											<ul class="subtopic">
												<li><pre>Tags and Elements</pre></li>
												<li><pre>Separating Heads from Bodies</pre></li>
												<li><pre>TAttributes Tell You about Elements</pre></li>
												<li><pre>Learning from Others by Viewing Their Source Code</pre></li>
												<li><pre>Elements for Marking Up Text</pre></li>
											</ul>
									</ul>
									<ul class="topic">
										<li><pre>Attribute Groups</pre></li>
											<ul class="subtopic">
												<li><pre>Core Attributes</pre></li>
													<ul class="sub-subtopic">
														<li><pre>The id Attribute</pre></li>
														<li><pre>The class Attribute</pre></li>
														<li><pre>The title Attribute</pre></li>
														<li><pre>The style Attribute</pre></li>
													</ul> <!-- close Sub-subtopic> -->
												<li><pre>Internationalization</pre></li>
													<ul class="sub-subtopic">
														<li><pre>The dir Attribute</pre></li>
														<li><pre>The lang Attribute</pre></li>
													</ul> <!-- close Sub-subtopic> -->
												</ul><!--  close Subtopic> -->
											<li><pre>Core Elements</pre></li>
												<ul class="subtopic">
													<li><pre>About DOCTYPEs</pre></li>
													<li><pre>The &#60;html&#62; Element</pre></li>
													<li><pre>The &#60;head&#62; Element</pre></li>
													<li><pre>The &#60;title&#62; Element</pre></li>
													<li><pre>Links and Style Sheets</pre></li>
													<li><pre>Ensuring Backward Compatibility for HTML5 Tags</pre></li>
													<li><pre>The &#60;body&#62; Element</pre></li>
													<li><pre>Common Content Elements</pre></li>
												</ul>
											<li><pre>Basic Text Formatting</pre></li>
												<ul class="subtopic">
													<li><pre>White Space and Flow</pre></li>
													<li><pre>Creating Headings Using &#60;hn&#62; Elements</pre></li>
													<li><pre>Creating Paragraphs Using the &#60;p&#62; Element</pre></li>
													<li><pre>Creating Line Breaks Using the &#60;br&#62; Element</pre></li>
													<li><pre>Creating Preformatted text Using the &#60;pre&#62; Element</pre></li>
												</ul>
											<li><pre>Understanding Block and Inline Elements</pre></li>
											<li><pre>Grouping Content</pre></li>
												<ul class="subtopic">
													<li><pre>The New Outline Algorithm in HTML5</pre></li>
													<li><pre>The &#60;div&#62; Element</pre></li>
													<li><pre>The &#60;header&#62; Element</pre></li>
													<li><pre>The &#60;hgroup&#62; Element</pre></li>
													<li><pre>The &#60;nav&#62; Element</pre></li>
													<li><pre>The &#60;section&#62; Element</pre></li>
													<li><pre>The &#60;article&#62; Element</pre></li>
													<li><pre>The &#60;hr&#62; Element</pre></li>
													<li><pre>The &#60;blockquote&#62; Element</pre></li>
													<li><pre>Using the cite Attribute with the &#60;blockquote&#62; Element </pre></li>
													<li><pre>The &#60;aside&#62; Element</pre></li>
													<li><pre>The &#60;footer&#62; Element</pre></li>
													<li><pre>The &#60;address&#62; Element</pre></li>
													<li><pre>Common Content Elements</pre></li>
												</ul>
											<li><pre>Working with Lists</pre></li>
												<ul class="subtopic">
													<li><pre>Using the &#60;ul&#62; Element to Create Unordered Lists</pre></li>
													<li><pre>Ordered Lists</pre></li>
														<ul class="sub-subtopic">
															<li><pre>Using the start Attribute to Change the Starting Number in Ordered Lists</pre></li>
															<li><pre>Count Down in Your Ordered Lists witht the reversed Attribute</pre></li>
															<li><pre>Specify a Marker with the type Attribute</pre></li>
															<li><pre>Definition Lists</pre></li>
															<li><pre>Nesting Lists</pre></li>
														</ul> <!-- close sub-subtopic> -->
												</ul> <!-- close subtopic> -->
											<li><pre>Summary</pre></li>
									</ul>
							
								<h4 class="chapterTitle">CHAPTER 2: FINE-TUNING YOUR TEXT</H4>
								<hr />
							
							</section> <!-- END Table of Contents -->
							
								
							<!-- module -->
							<section id="whatever">
								<ul class="topic">
									<li><pre>Topic																																##</pre></li>
										<ul class="subtopic">
											<li><pre>Subtopic																													##</pre></li>
												<ul class="sub-subtopic">
													<li><pre>Sub-subtopic																									##</pre></li>
												</ul>
											<li>(no summary?)</li>
										</ul>
								
								</ul>
								
							</section> <!-- END whatever -->
						
								<h4 class="chapterTitle">APPENDIX A: SPECIAL TERMS</H4>
								<hr />
								<h4 class="chapterTitle">APPENDIX B: COMPREHENSIVE INDEX OF EXPENSES</H4>
								<hr />
								<h4 class="chapterTitle">APPENDIX C: STEP-BY-STEP TABLE CONSTRUCTION</H4>
								<hr />
								<h4 class="chapterTitle">APPENDIX D: WWMD?</H4>
								<hr />
	          </section> <!-- END tableOfContents -->

/*
						
						<!-- listOfContents -->
          	<section id="listOfContents">

            	<header>
                          
                  <h2 class="bookSection">CONTENTS</h2>
									<p id="sectionTitle">INTRODUCTION</p>
									<h4 class="chapterTitle">CHAPTER 1: STRUCTURING DOCUMENTS FOR THE WEB</H4>
									<hr />
                          
              </header>
							
							<section id="list">
								<ul class="topic">
									<li><pre>A Web of Structured Documents</pre></li>
									<li><pre>Introducing HTML5</pre></li>
										<ul class="subtopic">
											<li><pre>Tags and Elements</pre></li>
											<li><pre>Separating Heads from Bodies</pre></li>
											<li><pre>TAttributes Tell You about Elements</pre></li>
											<li><pre>Learning from Others by Viewing Their Source Code</pre></li>
											<li><pre>Elements for Marking Up Text</pre></li>
										</ul>
								</ul>
								<ul class="topic">
									<li><pre>Attribute Groups</pre></li>
										<ul class="subtopic">
											<li><pre>Core Attributes</pre></li>
												<ul class="sub-subtopic">
													<li><pre>The id Attribute</pre></li>
													<li><pre>The class Attribute</pre></li>
													<li><pre>The title Attribute</pre></li>
													<li><pre>The style Attribute</pre></li>
												</ul> <!-- close Sub-subtopic> -->
											<li><pre>Internationalization</pre></li>
												<ul class="sub-subtopic">
													<li><pre>The dir Attribute</pre></li>
													<li><pre>The lang Attribute</pre></li>
												</ul> <!-- close Sub-subtopic> -->
											</ul><!--  close Subtopic> -->
										<li><pre>Core Elements</pre></li>
											<ul class="subtopic">
												<li><pre>About DOCTYPEs</pre></li>
												<li><pre>The &#60;html&#62; Element</pre></li>
												<li><pre>The &#60;head&#62; Element</pre></li>
												<li><pre>The &#60;title&#62; Element</pre></li>
												<li><pre>Links and Style Sheets</pre></li>
												<li><pre>Ensuring Backward Compatibility for HTML5 Tags</pre></li>
												<li><pre>The &#60;body&#62; Element</pre></li>
												<li><pre>Common Content Elements</pre></li>
											</ul>
										<li><pre>Basic Text Formatting</pre></li>
											<ul class="subtopic">
												<li><pre>White Space and Flow</pre></li>
												<li><pre>Creating Headings Using &#60;hn&#62; Elements</pre></li>
												<li><pre>Creating Paragraphs Using the &#60;p&#62; Element</pre></li>
												<li><pre>Creating Line Breaks Using the &#60;br&#62; Element</pre></li>
												<li><pre>Creating Preformatted text Using the &#60;pre&#62; Element</pre></li>
											</ul>
										<li><pre>Understanding Block and Inline Elements</pre></li>
										<li><pre>Grouping Content</pre></li>
											<ul class="subtopic">
												<li><pre>The New Outline Algorithm in HTML5</pre></li>
												<li><pre>The &#60;div&#62; Element</pre></li>
												<li><pre>The &#60;header&#62; Element</pre></li>
												<li><pre>The &#60;hgroup&#62; Element</pre></li>
												<li><pre>The &#60;nav&#62; Element</pre></li>
												<li><pre>The &#60;section&#62; Element</pre></li>
												<li><pre>The &#60;article&#62; Element</pre></li>
												<li><pre>The &#60;hr&#62; Element</pre></li>
												<li><pre>The &#60;blockquote&#62; Element</pre></li>
												<li><pre>Using the cite Attribute with the &#60;blockquote&#62; Element </pre></li>
												<li><pre>The &#60;aside&#62; Element</pre></li>
												<li><pre>The &#60;footer&#62; Element</pre></li>
												<li><pre>The &#60;address&#62; Element</pre></li>
												<li><pre>Common Content Elements</pre></li>
											</ul>
										<li><pre>Working with Lists</pre></li>
											<ul class="subtopic">
												<li><pre>Using the &#60;ul&#62; Element to Create Unordered Lists</pre></li>
												<li><pre>Ordered Lists</pre></li>
													<ul class="sub-subtopic">
														<li><pre>Using the start Attribute to Change the Starting Number in Ordered Lists</pre></li>
														<li><pre>Count Down in Your Ordered Lists witht the reversed Attribute</pre></li>
														<li><pre>Specify a Marker with the type Attribute</pre></li>
														<li><pre>Definition Lists</pre></li>
														<li><pre>Nesting Lists</pre></li>
													</ul> <!-- close sub-subtopic> -->
											</ul> <!-- close subtopic> -->
										<li><pre>Summary</pre></li>
								</ul>
							
							<h4 class="chapterTitle">CHAPTER 2: FINE-TUNING YOUR TEXT</H4>
							<hr />
							
						</section> <!-- END Table of Contents -->
							
								
						<!-- module -->
						<section id="whatever">
							<ul class="topic">
								<li><pre>Topic																																##</pre></li>
									<ul class="subtopic">
										<li><pre>Subtopic																													##</pre></li>
											<ul class="sub-subtopic">
												<li><pre>Sub-subtopic																									##</pre></li>
											</ul>
										<li>(no summary?)</li>
									</ul>
								
							</ul>
								
						</section> <!-- END whatever -->
						
							<h4 class="chapterTitle">APPENDIX A: SPECIAL TERMS</H4>
							<hr />
							<h4 class="chapterTitle">APPENDIX B: COMPREHENSIVE INDEX OF EXPENSES</H4>
							<hr />
							<h4 class="chapterTitle">APPENDIX C: STEP-BY-STEP TABLE CONSTRUCTION</H4>
							<hr />
							<h4 class="chapterTitle">APPENDIX D: WWMD?</H4>
							<hr />
          </section>
          
          <!-- Introduction -->
            <section id="introduction">
                        
              <header>
                <hr/>           
                <h3 class="bookSection">INTRODUCTION</h3>
							</header>
							
							<p>INTRODUCTORY paragraph</p>
							<p>Paragraph 2</p>
							<p>Paragraph 3</p>
							<p>Paragraph 4</p>
								<ul>
									<li></li>
									<li></li>
									<li></li>
								</ul>
								
							<h4>ABOUT THE BOOK</h4>
							<p>Paragraph 1</p>
							<p>Paragraph 2</p>
							<p>Paragraph 3</p>
								
							<h4>WHO THE BOOK IS FOR</h4>
							<p>Paragraph 1</p>
							<p>Paragraph 2</p>
							<p>Paragraph 3</p>
								
							<h4>WHAT THIS BOOK COVERS</h4>
							<p>Paragraph 1</p>
							<p>Paragraph 2</p>
							<p>Paragraph 3</p>
								
							<h4>WHAT YOU NEED TO USE THIS BOOK</h4>
							<p>Paragraph 1</p>
							<p>Paragraph 2</p>
							<p>Paragraph 3</p>
								
							<h4>HOW THIS BOOK IS ORGANIZED</h4>
							<p>Paragraph 1</p>
							<p>Paragraph 2</p>
							<p>Paragraph 3</p>
								
							<h4>CONVENTIONS</h4>
							<p>Paragraph 1</p>
								
							<p>BANNER</P>
							<ol>
								<li>Paragraph 2</li>
								<li>Paragraph 3</li>
								<li>Paragraph 3</li>
							</ol>
							
							<hr>
							
							<p>BOX conatining not-to-be-forgotten informationion directly relevant to the text</p>
							
							<hr>
							
							<p>BOX conatining notes, hints, tips, trick, and asides to the current discussion</p>
							
							<hr>
							
							<h4>CSS rules for different elements I plan to use</h4>
							<p>The &#60;html&#62; element surrounds the whole enchilada</p>
							<p>The &#60;head&#62; element </p>
							<p>The &#60;title&#62; element </p>
							
							<hr>
							
							<h4>links</h4>
								<ul>
									<li>&#60;link rel="stylesheet" href="css/main.css"&#62;</li>
									<li>&#60;script src="js/maim.js"&#62;&#60;/script&#62;</li>
							
							<hr>
							
							<dl>
								<dt>WORM</dt>
									<dd>Wiggly thing that tickles when it crawls up your nose</dd>
							</dl>
							
							<p>Topics, which are not all caps in the Table of Contents, are all caps in the text</p>
							
							<h2>TOPIC (why so much space beneath an h2? - see the css)</H2>
								
								<p>Paragraph. It can't be that difficult to write a book. I've seen planty of books written by complete idiots. It's as if they grow on trees - idiots. They are ubiquitous. Menacing, in their ubiquity. It's as if, no matter haow many there are, they share just one brain.</p>
								<p>Paragraph 2</p>
								
								<h3>Suptopic</h3>
								
								<p>I would surmise that the brain they all share is of a somewhat laggardly bent. Perhaps it is unkind to say, but the more individuals that tap into that single brain, the less there is available to each. Some of them can barely pump blood.</p>
								<p>Paragraph 2</p>
								
								<h4>Sub-suptopics are smaller and less bold than Subtopics. However, Sub-suptopics are larger and more bold than paragraphs!</h4>
								<p>But, uh, that's not what I was going to talk about. I just wanted to type something in here so I could compare the size of the paragraph text to the size of the &#60;h4&#62; text. You see, I just need to know how much to tweak it in the CSS.</p>
								<p>Paragraph 2</p>
								
								<h4>CSS rules for different elements I plan to use (continued)</h4>
								<p>The &#60;body&#62; element appears after the The &#60;head&#62; element and contains the part of the web page you actually see in the browser window.</p>
								
								<h5>The Content Elements</h5>
								<p>The &#60;p&#62; element</p>
								<p>The &#60;pre&#62; element</p>
								<p>The &#60;address&#62; element</p>
								<hr>
								<dl>
									<dt>The &#60;div&#62; element</dt>
									<dd>A generic block of content designed to be used with classes and ids</dd>
									<p>Example:</p>
										<div class="headerBox">
											<h1>MAKE ENDS MEET</h1>
											<p>Welcome to MONEY: A USER GUIDE. We will be developing the site throughout this exercise</p>
										</div>
								</dl>
								
								<p>The &#60;header&#62; element</p>
								<p>The &#60;hgroup&#62; element</p>
								<p>The &#60;nav&#62; element</p>
								<p>The &#60;section&#62; element</p>
								<p>The &#60;article&#62; element</p>
								
								<hr>
								<dl>
									<dt>The content of a &#60;sup&#62; element ia written in superscript</dt>
									<dd>2<sup>2</sup>=4</dd>
									<p>The content of a &#60;sub&#62; element is written in subscript</p>
									<dd>Be sure to drink plenty of H2<sub>0</sub></dd>
								</dl>
								
								<p>phrase elements:</p>
								
								<hr>
								<dl>
									<dt>Use the &#60;abbr&#62; element</dt>
									<dd>to indicate you are using an abbreviation or acronym</dd>
									<p>Example:</p>
										<p>Refer to the Comprehensive Index of Expenses <abbr>CIE</dfn> when building your Occasional Expenditures table.</p>
								</dl>
								
								<hr>
								<dl>
									<dt>Use the &#60;dfn&#62; element</dt>
									<dd>when you are introducing a special term</dd>
									<p>Example:</p>
										<p>Remember to add a bit of <dfn>flurg</dfn> to your daily routine.</p>
								</dl>
								
								<p>The &#60;blockquote&#62; element</p>
							
								<hr>
								<dl>
									<dt>Use the &#60;q&#62; element</dt>
									<dd>to add a quote within a sentence.</dd>
									<p>Example:</p>
										<p>I remember when John F. Kennedy said, <q>Act snot, what your do-do cunt tree four-u</q>. He had been drinking quite heavilly that morning.</p>
										<p>(Flankry, I think it would be eaier to just add a couple "quote" marks to the text. But what do I know?)</p>
								</dl>
										
								<hr>
								<dl>
									<dt>Use the &#60;cite&#62; element</dt>
									<dd>to indicate the source of a quote (note: the &#60;cite&#62; <em>element</em> differs fom the cite <i>attibute</i>)</dd>
									<p>Example:</p>
										<p>I heard it through the <cite>Grapevine</cite></p>
										<p>(Flankry, I think it would be eaier to just use an &#60;i&#62; tag. But what do <i>I</i> know?)</p>
								</dl>
								
								<hr>
								<dl>
									<dt>The &#60;code&#62; element</dt>
										<dd>Place any code that you want to appear on a web page insode a &#60;code&#62; element.</dd>
										<p>Example:</p>
											<p><code>console.log( "<var>user-name</var>" )</code></p>
											<p>note: <code>console.log</code> is the code; "<var>user-name</var>" is the var.</p>
											<small>p.s. what the fuck is a "var"?</small>
								</dl>		
											
								<hr>
								<dl>
									<dt>Use the &#60;kbd&#62; element</dt>
									<dd>when you want to tell the reader to enter some text</dd>
									<p>Example:</p>
											<p>To copy the contents of a cell, hold down the <kbd>command</kbd> key and press <kbd>V</kbd></p>
											<p>Wow! That uses fewer letters than the &#60;samp&#62; element, and accomplishes the same thing! (I know. It's all about the semantics for a screen reader. I get it. Half a six-dozen, one the other; input-output; you say tomato, I say tomorrow.)
									</dl>
								
								<hr>
								<dl>
									<dt>The &#60;small&#62; element</dt>
									<dd>Used for "fine print" - disclaimers, caveats, and copyrights</dd>
									<p>Example:</p>
										<small id="copyright">&#169; Ricado Stringibini 2022</small>
								</dl>
								
								<hr>
								<dl>
									<dt>The &#60;var&#62; element</dt>
									<dd>is usually used with the &#60;pre&#62; and &#60;code&#62; elements to indicate that the content of an element is a <var>variable</var> that can be supplied by a user.</dd>
								</dl>
									
								<hr>
								<dl>
									<dt>The &#60;samp&#62; element</dt>
									<dd>indicates <samp>sample output</samp> from a program, script, or the like. Cool!</dd>
								</dl>
										
								<p>editing elements:</p>
								<p>The &#60;ins&#62; <ins>element</ins></p>
								<p>The &#60;del&#62; <del>element</del></p>
								
								<hr>
								<dl>
									<dt>Nobody said anything about the &#60;mark&#62; <mark>element</mark>. I wonder what it duhs.</dt>
									<dd>(chirp, chirp, chirp)</dd>
								</dl>
								
								<hr>
								<dl>
									<dt>And about &#60;figure&#62; and &#60;figcaption&#62;? According to the book ...</dt>
									
									<figure id="14">
										<figcaption> using the code element to represent an h1 element and its content in HTML</figcaption>
										<code>&lt;h1&gt;This is a primary heading&lt;/h1&gt;</code>
									</figure>
									<dt>... these elements are used to mark up and annotate figures or illustrations that might be referenced in the text but aren't part of the ain flow of the document. (Looks like we need an image)</dt>
								</dl>
								
								<h4>It's About Time</h4>
								
								<h5>TABLE 2-1: <span class="tableTitle">Options for the <code class="attribute">datetime</code> attribute</span></h5>
								
								<!-- EXAMPLE: Table -->
									<table id="sample">
									<caption class="tableTitle">TABLE 2-1: <span class="tableTitle">Options for the <code class="attribute">datetime</code> attribute</caption>
										<tr>
											<th>FORMAT</th>
											<th>EXAMPLE</th>
										</tr>
										<tr>
											<td>Valid month string</td>
											<td>&lt;time&gt;2013-1&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid date string</td>
											<td>&lt;time&gt;2013-1-1&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid year-less date string</td>
											<td>&lt;time&gt;1-1&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid time string</td>
											<td>&lt;time&gt;11:11&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid local date and time string</td>
											<td>&lt;time&gt;2013-1-1T11:11&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid time zone offset string</td>
											<td>&lt;time&gt;+0000&lt;/time&gt;<br>&lt;time&gt;-0800&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid global date and time string</td>
											<td>&lt;time&gt;2013-1-1T14:54+0000&lt;/time&gt;<br>&lt;time&gt;2013-1-1T06:54-0800&lt;/time&gt;<br>&lt;time&gt;2013-1-1T06:54:39-0800&lt;/time&gt</td>
										</tr>
										<tr>
											<td>Valid week string</td>
											<td>&lt;time&gt;2013-W1&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid non-negative integer representing a year</td>
											<td>&lt;time&gt;2013&lt;/time&gt;</td>
										</tr>
										<tr>
											<td>Valid duration string</td>
											<td>&lt;time&gt;2h 3m 38s&lt;/time&gt;</td>
										</tr>
									</table>
								
          <!-- Main -->
            <section id="main">
                        
              <header>
                <hr/>           
                <h3 class="text">CHAPTER 1</h3>
								<h4 class="topic">Topic 1</h4>
									<p>copy</p>
								<h4 class="topic">Topic 2</h4>
									<p>copy</p>
									<h5 class="subtopic">subtopic 2a</h5>	
										<p>copy</p>
								<h4 class="topic">Topic 3</h4>
									<p>copy</p>
									<h5 class="subtopic">subtopic 3a</h5>
										<p>copy</p>
									<h5 class="subtopic">subtopic 3b</h5>
										<p>copy</p>
										<h6 class="sub-subtopic">sub-subtopic 3bi</h6>
											<p>copy</p>
										<h6 class="sub-subtopic">sub-subtopic 3bii</h6>
                            
              </header>
							
                <hr />
												
                        
                        
                        <h6>Trouble making ends meet?&nbsp;</h6>
                        <h6>Read "<a href="homeCFO.html"><strong>MONEY: A USER GUIDE</strong>"</a></h6>
                        <nav>
                            <a href="homeCFO.html">$$$$$</a>
                        </nav>
                        <hr />
                        <h6>Bored?</h6>
                        <h6>"<a href="blogIndex.html"><strong>Strain The Brain</strong></a>"</h6>
                        <nav>
                            <a href="blogIndex.html">TREBUCHET</a>
                        </nav>
                        <hr />
                        
                        <!-- <nav>
                            <a href="homeCFO.html">$$$$</a>
                            <a href="blogIndex.html">blog</a>
                        </nav>
                        <hr /> -->
                        
                        <h6>
                            Nashville, IN USA
                            <!-- | -->
                        </h6>
                        

                        <footer>
                            <h6>email me</h6>
                            <ul class="icons">
                                
                                <li><a href="mailto:sibleypeck%40me.com" class="fa-envelope" title="Email">Email</a></li>
                                

                                

                                

                                
                            </ul>
                            
                        </footer>
                    </section>

                <!-- Footer -->
                    <footer id="footer">
                        <ul class="copyright">
                            
                            <li>&copy; MONEY: A USER GUIDE</li>
                            
                            <li>Design: <a href="//html5up.net">HTML5 UP</a></li>
                        </ul>
                    </footer>

            </div>

        <!-- Scripts -->
            <!--[if lte IE 8]><script src="assets/js/respond.min.js"></script><![endif]-->
            <script>
                if ('addEventListener' in window) {
                    window.addEventListener('load', function() { document.body.className = document.body.className.replace(/\bis-loading\b/, ''); });
                    document.body.className += (navigator.userAgent.match(/(MSIE|rv:11\.0)/) ? ' is-ie' : '');
                }
            </script>
*/

            
    /*</body>
</html>