/* CSS reset */


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}
		
		/* end of reset*/
		

	
		/* this is the start of the small screen styles*/


/* From Wolf book CSS chapter*/ 
html
 {
	box-sizing: border-box;
		}     
	
	*, *::before, *::after {
			box-sizing: inherit;
		}
		
body 	
		{font-family: "georgia", sans-serif;
		font-weight: 400;
		font-style: normal;	
		font-size: 100%	
			}
	/*
main {width: 90%} 
*/

main {margin-left: auto;
			margin-right:auto;
			padding-top: 10px;
			padding-bottom:10px;
			background-color: #f2f2f2;
			margin-top: 0;
									}

/*
#storycontainer {padding-left: 3%;
								padding-right:2%;	
								}
*/
	
			
	hgroup {border-width: 1px;
					border-color: #666666;
					border-style: solid;
					margin-left: 1.5%;
					margin-right: 1.5%;
					}		
					
	cite {font-style: italic;
				}
				
	h1 {font-family: "verdana-pro-condensed", sans-serif;
			font-weight: 400;
			font-style: italic;
			font-size: 1.3em;
			line-height: 1.5em;
			margin-bottom: 0;
			padding-left: 3%;
			padding-right: 3%;
			padding-top:1.5%;
				} 
				
	h2 {font-family: "verdana-pro-condensed", sans-serif;
			font-weight: 400;
			font-style: italic;
			font-size: 1.125em;
			margin-top: 1em;
				}
	p#atwood {font-family: "verdana-pro-condensed", sans-serif;
						font-weight: 400;
						font-style: normal;
						font-size: 0.9em;
						text-align: right;
						margin-top: 0;
						padding-right: 3%
						}
			
	em {hyphens: none;
				}
			
	p.opening { margin-top: 22.4px;
				}
			
	p {font-size: 1.2em;
				line-height: 1.7em;
				margin-top: .6em;
				margin-bottom: .6em;
				margin-right: 2%;
				margin-left:3%;
				}
	
	ul {font-size:1em;
				margin-top: 1em;
				margin-right: 1%;
				margin-left:3%;				
				}
				
	li {line-height:1.2em;
				margin-bottom:.5em;
				}



/* this is the start medium screen styles*/

	
			
	@media only screen and (min-width:744px) {
				
			main {						
				max-width: 744px;	
				border-style:solid;
				border-color:#e6e6ff;
				border-width: 2px;		
				padding-top:20px;	
				padding-bottom:30px;
				margin-left: auto;
				margin-right:auto;		
				}
			
			
			#storycontainer {
				width:630px;
				margin-right: auto;
				margin-left: auto;
					 }
		
			h1 {margin-top:15px;
				font-size:1.45em;
				line-height:1.7em;
				} 

			
			p#atwood {font-size:1.15em;
				}	
					
			p.opening {
				margin-top: 16px;
				}
			
			p{
				font-size:1.4em;
			}
	
			ul {font-size: 1.2em;
				margin-top: 1em;
				margin-right: 1%;
				margin-left:3%;				
				}
			
			li {
				padding-left: 4%;
				line-height:1.35;
				}
			
			li#final {
				padding-bottom:24px;
			}
			
		}                    /*close of medium media query*/
		
		/* this is the start large screen styles*/
			
			
		@media only screen and (min-width:1024px) {
		
			
			main {						
				max-width: 720px;	
				border-style:solid;
				border-color:#e6e6ff;
				border-width: 2px;		
				padding-top:20px;	
				padding-bottom:30px;
				margin-left: auto;
				margin-right:auto;		
				}
			
			
			#storycontainer {
				width:600px;
				margin-right: auto;
				margin-left: auto;
					 }
			
			h1 {margin-top:15px;
				font-size:1.2em;
				line-height:1.6em;
				} 
				
			p#atwood {font-size: .9em;
								}
							
			p.opening {
				margin-top: 16px;
				}
			
			p {font-size: 1.1em;}
			
						
			ul {font-size:1em;
				margin-top: 1em;
				margin-right: 1%;
				margin-left:3%;				
				}
				
	li {	line-height:1.2em;
				margin-bottom:.5em;
				padding-left: 4%;
				}

			
		}