/* style sheet for Kith Presland's Emmett Dalton page */



body	{
          padding: 3% 10% 5% 10%;	 		/* this line gives a 2% buffer on all four sides of the main body */

          background: #333333;	/* this is the brown color of the main page including the buffer */

		  font-family:"times new roman",serif;	/* the default font - if no span or class changes */

          font-size: 13pt;	/* default size */	/* the specific text, this will be the one rendered */

          color: #000000;	/* default text color. as with the typeface (font-family) all text will */
							/* be rendered in this color unless a span or class specifies another */
		}


a		{
    text-decoration: none;
     font-family: trebuchet, sans-serif;
    }

a:link {color:#dd2613;}
a:visited {color:#cd7f0f;}
a:hover {color:#fdc271;}
a:active {color: #8ddb0b;}

h1, h2, h3	{		/* these attributes will be applied to all "Hx" elements */
        font-family: trebuchet, sans-serif;
        text-align: center; 
		font-weight:bold;
        color: #543c29;
			}

h1		{			/* in addition to the above, H1 will also be 3em larger than the default */
		font-size:2.6em;
		} 

h2		{			/* in addition to the above, H2 will also be 1.5em larger than the default */
        font-size:1.5em; 
		}

h3		{			/* in addition to the above, H3 will also be a different color than the */
        font-style:italic;		/* default and in italics */
        background: #666633;
		}
	

hr.ga {							/* I had grabbed several hr styling codes from another website. */
	border: 2px inset #B6C074;	/* this is one of them. this one does the heavy hr under the header */
	width: 80%;
	height: 3px;
	margin: 1em auto 1.5em;
	text-align: center;
         background-color: #aca95f;
	}	

hr.single {			/* I had grabbed several hr styling codes from another website.  */
	border: none 0; 	/* this is one of them and I adapted it for the single line I've been using */
	border-top: 1px solid #000;
	width: 90%;
	height: 3px;
	margin: 0.5em auto 1.5em;
	text-align: center;
	}	

hr.short {			/* I had grabbed several hr styling codes from another website.  */
	border: none 0; 	/* this is one of them and I adapted it for the short version */
	border-top: 1px solid #000;	/* of the single line */
	width: 60%;
	height: 3px;
	margin: 0.5em auto 0.5em;
	text-align: center;
	}	

.wrapper {			/* mostly your original code, but changed it from an 'id' to a class */
        background: #dbd2ab;
        margin: 10px 2em 0px;
        padding: 0 4em;
        border: ridge 8px #aca95f;
		}

.header	{			/* mostly your original code, but changed it from an 'id' to a class */
        background-image: url("images/newspapers2.jpg");
        margin: 35px 2em 5px;
        border: ridge 8px #aca95f;
		}

.footer {			/* mostly your original code, but changed it from an 'id' to a class */
        text-align: center;
        margin: 35px 2em 5px 2em;
        font-style: italic;
        background: #666633;
        border: solid 3px #999966;
		}

.navup {			/* my code to enable the W3C and email div s  */
        text-align: center;
        margin: 0.8em 2em;
        font-style: italic;
        background: #666633;
        border: solid 3px #999966;
		}

li.navup	{
		padding-left:2em;
			}

.navdown {			/* my code to enable the W3C and email div s  */
        text-align: center;
        margin: 1em 2em;
        font-style: italic;
        background: #666633;
        border: solid 3px #999966;
		}

.paratop    {			/* mostly your original code, but changed it from an 'id' to a class */
		text-align: center;  /* for some reason it worked better as an 'id' - don't know why */
        font-size: 2.5em;
		color: #543c29;
			}

.comment	{			/* this is the class I created to make your comments sans-serif and orangish */
          font-family: trebuchet, sans-serif;  /* this particular one is used in a span for interior */
          color: #543c29;						/* text. no margins */
			}

p.comment	{			/* this is the class I created to make your comments sans-serif and orangish */
          font-family: trebuchet, sans-serif;  /* it has margin code to make it indent from the main  */
          color: #543c29;						/* text. it only works with the 'p' element */
		  margin:0 2em 1em;
			}

p.intro	{			/* this is the class I created to make your comments sans-serif and orangish */
          font-family: trebuchet, sans-serif;  /* it has margin code to make it indent from the main  */
          color: #543c29;						/* text. it only works with the 'p' element */
		  font-weight:bold;
		  margin:0 1em 1em 0;
			}

.letter	{			/* this is the class I created to make content look like a hand written letter */
        font-family: 'comic sans ms', courier;	/* if comic sans isn't supported, it'll look much */
		font-style:italic;						/* like 'typed' below */
		font-size:.95em;		/* makes it a little more the size of the default typeface */
		font-weight:normal;		/* knocks off any parent bolding */
		margin:0 2em 1em;	/* the middle attribute in the margin command sets the inset */
		}					/* it's cumulative - if within a 'comment' para it'll be 2em more */


.typed	{			/* this is the class I created to make content look typed */
        font-family: courier;		/* the archetypal typewriter-like typeface */
		font-style:normal;			/* knocks off any parent italics */
		margin:0 2em 1em;	/* the middle attribute in the margin command sets the inset */
		}					/* it's cumulative - if within a 'comment' para it'll be 2em more */


.image	{			/* this is the class I created to quickly center images. */
		margin:1em auto 1em;	/* the 'center' command is deprecated and doesn't work */
		}						/* with the 'align' command in 'img' anyway */


div.letter  {				/* this adds some extra padding left and right if content */
		padding: 0px 50px	/* appears within a div */
			}


.pic-caption	{	/* this code sets the type face to sans-serif, the color to orangish, bolds it, */
          font-family: trebuchet, sans-serif;
            font-size:11.5pt;	/* and centers it under a picture */
		  font-weight:bold;
          color: #543c29;
		  margin:1em auto;		/* centers the element within the image div */
		  text-align:center;	/* centers the text within the 'p' */
			}


#div1	{			/* code for the left column of a two column layout for the home page */
		float:left;
		width:30%;
		background: #bbc181;
		text-align:center;
		padding:1em;
		}


#div2	{			/* code for the right column of a two column layout for the home page */
		margin-left:40%;
		width:60%;
		}


#paratop    {		/* I think I left this in */
		text-align: center;
        font-size: 2.5em;  
			}

#navtop {					/* this is code for the top and bottom nav bars. this demonstrates  */
	width:	20em;		/* the real power of CSS  */
	margin: 0 auto 1.4em;	/* centers the menu while adding margin on the bottom  */
	padding-right:5em;	/* shifts nav content left for 'ul' offset */
	line-height: 1.4em;	/* makes the nav bar a little thicker */
	font-weight: bold;
	list-style: none;	/* eliminates the bullets in a normal list */
	text-align:center;	/* centers the content in each sub element */
	border:0px solid;	/* for testing purposes */
	}

#navtop li { /* all list items */		/* more of the nav bar code */
	float: left;		/*	makes 'li' render side by side */
	width: 5em;			/*  each element is 5em wide - code in file changes to 2em for ¦ */
	border:0px solid;	/* for testing purposes */
		}

#navbottom {					/* this is code for the top and bottom nav bars. this demonstrates  */
	width:	20em;		/* the real power of CSS  */
	margin: 0 auto 1.4em;	/* centers the menu while adding margin on the bottom  */
	padding-right:1em;	/* shifts nav content left for 'ul' offset */
	line-height: 1.4em;	/* makes the nav bar a little thicker */
	font-weight: bold;
	list-style: none;	/* eliminates the bullets in a normal list */
	text-align:center;	/* centers the content in each sub element */
	border:0px solid;	/* for testing purposes */
	}

#navbottom li { /* all list items */		/* more of the nav bar code */
	float: left;		/*	makes 'li' render side by side */
	width: 5em;			/*  each element is 5em wide - code in file changes to 2em for ¦ */
	border:0px solid;	/* for testing purposes */
		}

#menu	{
		font-size:1.1em;	/* makes the text a little bigger */
		list-style:none;	/* eliminates bullets */
		line-height:2em;	/* provides space between menu items */
		text-decoration:underline;	/* adds underlines for menu items */
		}