/* -----ALL MARGIN and PADDING.  That pesky automatic margin and padding have driven me to this----- */

*
{
	margin: 0;
	padding: 0;
}

/* -----BODY and A.  My basic openers, body and a:pseudoclasses.  The background color was chosen from a light patch in the banner picture.  I used century gothic again as a font because it is so simple and un-decorated.  Not only is it easy to read, but I like how it looks.  And I chose basic arial as a backup because everyone seems to have arial, and it is simple.  I used text-align-center here because of the IE6 hack for centering the main content. -----The visited color (which does not render in Firefox) was also chosen from the banner.  The link color was chosen as green to bring attention to it on this very blue page.----- */

body
{
	background-color: #d5e2f8;
	color: #000;
	font: 1em "century gothic", arial, sans-serif;
	text-align: center;
}
a:link
{
	color: #0b8e39;
	text-decoration: none;
}
a:visited
{
	color: #0b2dbe;
	text-decoration: none;
}
a:hover
{
	color: #0b8e39;
	text-decoration: underline;
}

/* -----BANNER, TITLE, and MENUS.  The idea for this design was pretty much centered on the picture in the banner.  It went through a few iterations when I decided to fade both the banner and the content to make it a bit 'dreamier'.  I spent some time worrying about keeping the title and menus on the picture when text enlarges, but eventually I made it optimal for my browser and made sure a few text sizes in both directions were not outrageous.  Because the font I used on the mac does not exist on the pc, I chose an alternate font that was on the lab pcs, and again a backup of arial for 'other' systems.  The title font is fancy, so I left the menus century gothic to keep them readable and useable.  The positions of the menu and submenu are due to an older design that I tried and scrapped, but I kept because they were still positioned where I wanted them.  I also used the caps class to change the active state of my menus.----- */

#banner
{
	margin: 5px 0 0 0;
	padding: 10px 0 23px 0;
	width: 100%;
	background: url(images/sky3.jpg) no-repeat #d5e2f8;
	text-align: center;
	color: #000;
}
.title
{
	font: bold 3em "party let", "freestyle script", sans-serif;
}
#mainmenu
{
	width: 70%;
	padding: 5px 0 0 0;
	margin: 0px auto 0 auto;
	text-align: center;
	font: 1.2em "century gothic", arial, sans-serif;
}
#mainmenu ul
{
	padding: 0;
	margin: 0;
}
#mainmenu ul li
{
	font-size: 1.2em;
	padding: 0;
	margin: 0 5px;
	display: inline;
	list-style-type: none;
}
#submenu
{
	width: 80%;
	padding: 2px 0 5px 0;
	margin: 0 auto;
	font: 1.1em "century gothic", arial, sans-serif;
}
#submenu ul
{
	padding: 0;
	margin: 0;
}
#submenu ul li
{
	font-size: 1.2em;
	padding: 0;
	margin: 0 5px;
	display: inline;
	list-style-type: none;
}
.caps
{
	text-transform: uppercase;
}

/* -----CONTENT.  I used the centering technique from Niederst page 420.  It took me a lot of moving things about to get the fade to work on this box as background images (negative margin and such).  I have tried to clean it up, but the CSS changed so much my first weekend of designing this page it looks a bit as if a mad scientist attacked it.  I used an inline list for some of the content (flatlist), but was asked why I made it a list instead of a paragraph and could not think of a reason other than it is actually a list, so I coded it that way.----- */

#content
{
	width: 70%;
	background: url(images/bluefadet.jpg) repeat-x #fff;
	margin: 0 auto 10px auto;
	padding: 0px 0px 0px 20px;
	text-align: left;
}
#content p
{
	margin: 0;
	padding: 2px 0 10px 20px;
}
#subtitle
{
	width: 100%;
	margin: 10px 0 0 0;
	padding: 30px 0 20px 0;
	font: bold 1.8em "century gothic", arial, sans-serif;
	text-align: center;
}
#subtitle p
{
	margin: 0;
	padding: 0;	
}
#flatlist
{
	margin: 0;
	padding: 0;
}
#flatlist ul li
{
	margin: 0;
	display: inline;
	list-style-type: none;
	white-space: nowrap;
}
#content ul
{
	margin: 0;
	padding: 2px 10px 10px 15px;
}
#content ul li
{
	margin: 0;
	padding: 0 0 0px 5px;
}
.bold
{
	font-weight: bold;
}

/* -----GRAPHIC AREA.  The graphic that was in my XHTML design was larger and did not change as much as it does in these pages.  The background of my CSS design does not change like it did in my XHTML design, so I figure there is a little more leeway in moving the graphic about.  I originally planned to keep the per-page graphic in the graphic box, but realized that certain of the things I had planned for that would need different formatting: the personal page (changing photos - created photobox), the courses page (table - created table), and the form page (textarea - created noborder).  ----- */

#graphic
{
	float: right;
	width: 200px;
	margin: 5px 20px 0 20px;
	padding: 0;
	border: 1px solid #000;
}

/* -----TABLE ('COURSES' PAGE ONLY).  I collpased the table so I could do borders in one direction only.  Before collapsing, there were spaces where the cells meet.----- */

table
{
	float: right;
	width: 300px;
	margin: 5px 20px 0 20px;
	padding: 5px 0 5px 5px;
	border: 1px solid #000;
	text-align: center;
	border-collapse: collapse;
}
th
{
	padding: 2px 0px;
	font-size: 1.1em;
}
td
{
	padding: 2px 0px;
	border-top: 1px solid #000;
}

/* -----PHOTOS ('PERSONAL' PAGE ONLY).  photos and photobox are obviously for the personal page, where I had to box them in to get them to look how I want.----- */

#photos
{
	float: left;
	margin: 0;
	padding: 25px 0 0 20px;
	width: 330px;
	height: 250px;
	text-align: center
}
#photos ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#photos ul li
{
	margin: 0;
	padding: 0;
	display: inline;
}
#photobox
{
	float: right;
	width: 300px;
	height: 300px;
	margin: 0px 20px 10px 20px;
	padding: 0;
	background: url(images/me.jpg) no-repeat bottom #fff;
}

/* -----FORM ('CONTACT ME' PAGE ONLY).  Most of the divs and classes I created for the form were to try to fix the font and spacing problems that fixed up quite well when we figured out it was possible to stlye form, input, and textarea directly.----- */

#noborder
{
	float: right;
	width: 300px;
	margin: 5px 20px 10px 20px;
	padding: 0;
	border: 0px solid #000;
}
form, input, textarea
{
	font: 1.1em "century gothic", arial, sans-serif;
}
.radios
{
	margin: 0;
	padding: 0 0 0 20px;
}
#alignform
{
	margin: 0 20px 0 0;
	padding: 0 20px 0 0;
	width: 300px;
}
#buttons
{
	clear: both;
	margin: 0 0 0 -20px;
	padding: 10px 20px 0 10px;
	text-align: center;
}

/* -----FOOTER.  Originally I had an empty div for the bottom fade graphic, but eventually made it work out in the footer. hooray!----- */

#footer
{
	clear: both;
	margin: 0 0 0 -20px;
	padding: 20px 20px 0 0;
	text-align: center;
	background: url(images/bluefadeb.jpg) repeat-x bottom;
}
#footer ul li
{
	display: inline;
	padding: 0 0 10px 0;
}
#footer ul li img
{
	vertical-align: middle;
}

/* -----er, look...only 250 lines of CSS.  I went back and changed a lot to shorthand to make it better.  gosh, I hope you do not hate me now.----- */