/* CSS Document */
/*Well we have done it. We have a created a monster. This css file is really getting detailed. It is quite nice, I can almost see the image.
View this site in a browser while updating, refresh and see what happens. You will find that Dreamweaver is wrong in most cases in how it will look.

BROWSER ISSUES:
I think we have actually fixed all of the browser issues that we can. CSS does not fix browser issues. Surprised?!?! 
I have designed this site to work in Firfox. The main browser issue you will run into is using padding, margins, 
and width and height... nothing important. :-( You will find that IE for mac really doesn't work all that well. If you haven't done so
already download firefox and give it a try. 
*/

body {
	margin: 0;
	padding: 0;
	background-color: #999; /*CHANGED By making this white it will hide some browser issues*/
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFF; /*CHANGED*/
	padding: 10px;
	font-size: 9px;
} 



#header {
	height: 600px; /*CHANGED bigger image needed to adjust a little */
	background-image: url(images/background.gif); /*CHANGED We added a NEW picture, no need to change the CSS we just named the file the same. */ 
	background-repeat: no-repeat;
	background-color: #999; 
}
#rightside {
	float:right;
	height: 600px;
	width: 525px;
	margin-left: 400px;
	margin-top: 200px;
}
#leftside {
	float:left;
	height: 600px;
	width: 375px;
}
#logo {
	float:none;
	margin-right: 20%;
	margin-left: 10px;
	margin-top: 166px;
}
#create {
	float:none;
	margin-right: 20%;
	margin-left: 400px;
	margin-top: 50px;
}
#teach {
	float:none;
	margin-right: 20%;
	margin-left: 400px;
	margin-top: 175px;
	
}
#gdiii {
	float:none;
	margin-right: 20%;
	margin-left: 400px;
	margin-top: 175px;
	
}

#content {
	float:none;
	margin-right: 20%;
	margin-left: 400px;
	margin-top: 2px;
	height: 200px;
	width: 318px;
}

#design {
	float:none;
	margin-left: 400px;
	margin-top: 110px;
}

#content h2 { /* LOOK A NEW TAG! this tag allows you to change settings for special reasons. In this case I needed the h2 tag to be black so I added it to the #content tag */
	color: #FFF; /*CHANGED */
	border-width: thin; /*NEW*/
	border-left-style: dotted; /*NEW*/
	border-top-style: dotted; /*NEW*/
	border-color: #6CF; /*NEW*/
}

#footer h2 { /* LOOK A NEW TAG! this tag allows you to change settings for special reasons. In this case I needed the h2 tag to be black so I added it to the #content tag */
	color: #039; /*CHANGED */
	
}

#footer { 
	/*margin-right: 24%;   **** you can create notes and test using these: /*"info"*/
	/*margin-left: 24%;*/
	padding: 5px; /*CHANGED*/
	/* background-image: url(images/botbar.jpg); CHANGED, we don't need this image */
	/* background-repeat: repeat-x; CHANGED don't have an image don't need this either. */
	background-color:  #FFF;
}

#footer p { /*NEW TAG*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	padding-left: 20px;
	font-size: 9px;
}

a:link { /*when it comes to link settings in css order makes a difference. Always place these in the following order: link, visited, hover, active. */
	color: #6CF; /*CHANGED*/ /*with simple colors you can just type it out */
	text-decoration: none;
}

a:visited { 
	color: #6CF; /*CHANGED*/
	text-decoration: none;
}

a:hover { 
	color: #999; /*CHANGED*/
	text-decoration: underline;
}

a:active { 
	color: #6CF; /*CHANGED*/
	text-decoration: underline;
}