/* Design by Alex Gould */

* 	{
	margin: 0;
	padding: 0;
	}

			/*	The body section defines the entire background
				of the webpage and the blue header bar across the 
				top.  To change the repeated picture at the top of the page 
				simply copy the image location into the url(paste here).  
				Make sure the image fits to the pixel specifications of 220px in height.	*/
	body {
		margin: 0;
		background:#c0c0c0 url(images/headerpic.JPG) repeat-x ;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		color: white;
		}

			/*	h1, h2, and h3 define the characteristic of headings
				when each h1, h2, and h3 tag are used in the html file.	*/
	h1, h2, h3 {
		font-weight: normal;
		color: #000000;
		text:wrap;
		}

	h1 { font-size: 197%; }
	h2 { font-size: 167%; }
	h3 { font-size: 100%; font-weight: bold; }

	
			/*	p, ul, and ol describe the characteristics of the paragraph,
				un-ordered list, and ordered lists written in the html file.	*/ 
	p, ul, ol {
		margin-bottom: 1.8em;
		line-height: 167%;
		font-size: 100%;
		}


			/*	a:link describes the attributes of links on the entire website.
				a:hover is when the mouse moves over the link and the color it changes to.
				a:visited is the color the link changes to when that link has been
				visited.  To change the color of any one of these, simply copy the desired
				color over the #f7b7fc or #ababac space.  #ababac is the grey color and 
				#f7b7fc is the light blue color.  for a list of color codes visit
				http://html-color-codes.com/  	*/
	a:link {
	text-decoration: underline;
	font-style: normal;
	color: #00CCFF;
		}

	a:hover {
		text-decoration: none;
		color: #ababac;
		}

	a:visited {
		color: #ababac;
		}


/* Header */

			/* 	#header is acting solely as filler space at the top of the page above
				the navigation bar. 	*/
	#header {
		width: 940px;
		height: 80px;
		margin: 0 auto;
		}


/* Logo */		/* 	The #logo section is the space for the main MCEE logo. 
				To change this picture simply copy the image location 
				into the url(paste here).  Make sure the image fits to the 
				pixel specifications of 220px by 220px and change the background
				color to match the body color.	*/
	#logo {
		float: left;
		width: 220px;
		height: 238px;
		background: #c0c0c0 url(images/MCEEblue.JPG) no-repeat ;
		text-size: large;	
		}


/* Menu */		/*	This menu section describes the main navigation at the top of the 
				page.  */

	
			/*	The navigation aligns itself to the right of the page	*/
	#menu {
		float: right;		
		padding: 0 0 0 0 ;
		}

			/*	The #menu ul describes the font size and how far down the page the 
				links are located	*/
	#menu ul {
		margin: 0;
		padding: 70px 0 0 0 ;
		list-style: none;
		font-size:16px;
		}

			/*	The #menu li describes how the links align next to each other	*/
	#menu li {
		display: inline;
		}

			/*	The #menu a describes the attributes of the space around each link
				including the grey border, black background and how it is displayed.	*/
	#menu a {
		display: block;
		float: left;
		padding: 5px 15px 5px 15px;
		text-decoration: none;
		font-weight: bold;
		background: #000000;
		border: 1px solid #c0c0c0;
		}


/* Splash */		/*	The #splash section provides filler space between
				the main navigation and the main content section.	*/

	#splash {
		margin: 0 auto ;
		float: none;
		padding-left: 450px;
		padding-top: 20px;
		padding-right: 0px;
		padding-bottom: 0px;
		width: 490px;
		height: 150px;	
		}
	

	

/* Main */		/*	The "Main" section defines space for the sidebar links as well as  
				the main content section.  It does not include the footer section.	*/

	#page {
		width: 940px;
		margin: 0 auto ;
		background: #FFFFFF  ;
		color: #000000 ;
		border: 1px solid #000000;
		}

	#page h1, #page h2 {
		margin-bottom: 20px;
		}

/* Content */		/*	The Content section is the space in which all of the page-specific content is 
				placed.  */

	
	#content {
		float: right;
		width: 665px;
		height: auto;
		padding-right: 10px;
		}

	#content ol, #content ul {
		margin-left: 3em;
		}

/* Sidebar */		/*	Sidebar is the blue bar to the left of the page that has links in it.	*/

			/*	#sidebar defines the width, picture, spacing and border of the whole sidebar.	*/
	#sidebar {
		float: left;
		width: 180px;
		height: 550px;
		text-align: center;
		padding: 25px 20px 20px 20px;
		background:  url(images/sidebar.gif) repeat;
		border: 1px solid #000000;
		border-right-width: 1px;
		border-top-width: 0px;
		border-left-width: 0px;
		border-bottom-width: 0px;
		}

			/*	#sidebar h2 defines the characteristic of the heading h2 in the html file
				under the #sidebar section.	*/
	#sidebar h2 {
		padding-top: 6px;
		font-size: 100%;
		font-weight: bold;
		color: #FFFFFF;
		}

			/*	#sidebar h3 defines the characteristic of the heading h3 in the html file
				under the #sidebar section.	*/
	#sidebar h3 {
		font-size: 77%;
		color: #FFFFFF;
		}

	#sidebar h3 span {
		padding: 3px 5px;
		color: #FFFFFF;
		}

	#sidebar ul {
		margin: 0;
		padding: 0;
		list-style: none;
		color: #FFFFFF;
		}

			/*	#sidebar li defines the space around the links in the left sidebar.	*/
	#sidebar li {
		margin: 0 0 20px 0;
		padding: 20px 0 0 0;
		border-top: 1px dotted #000000;
		}

			/*	#sidebar1 provides filler space when there are few links in the sidebar.	*/
	#sidebar1 {
		float: left;
		width: 220px;
		height: 10px;
		background: #FFFFFF url(images/sidebar.gif) repeat-y;
		border: 1px solid #000000;
		border-right-width: 1px;
		border-top-width: 0px;
		border-left-width: 0px;
		border-bottom-width: 0px;
		}	

			/*	#sidebar2 is the bottom section of the sidebar which provides filler space
				when there are few links in the sidebar.  it also includes the get involved 
				link/picture located in the html file.	*/
	#sidebar2 {
		float: left;
		width: 220px;
		height: 50px;
		padding-top: 80px;
		background: FFFFFF url(images/sidebar.gif) repeat-y;
		border: 1px solid #000000;
		border-right-width: 1px;
		border-top-width: 0px;
		border-left-width: 0px;
		border-bottom-width: 0px;
		}

/* Footer */		/*	The Footer section is the black bar at the bottom of the page which contains
				the copyright information and the "get involved" link located in the html file.	*/

			/*	#footer describes the characteristics of the bottom bar including the color,
				size, and spacing.	*/
	#footer {
		clear:both;
		width: 936px;
		height: 40px;
		margin: 0 auto;
		padding: 0px;
		border: 1px solid #000000;
		border-left-width: 5px;
		background: #000000;
		color:#FFFFFF;
		}

			/*	#footer p is the copyright text characteristics and where it is located.	*/
	#footer p {
		text-align: right;
		float: left;
		width: 591px;
		height: 40px;
		margin: 0;
		padding: 15px 125px 0px 10px;
		line-height: normal;
		font-size: 77%;
		}

			/*	#div.img is the space divided in the footer solely for the "get involved" link
				this section describes that links location in the footer.	*/
	#div.img {
		width: 200px;
		height: 400px;
  		margin: 0, auto;
		float: right;
  		border: 0px solid #000000;
  		height: auto;
  		width: auto;
 		}