/*
  This page and its code are property of Negahneewin College. 
  Please feel free to use this code as reference in creating 
  your own style sheet. The page you are looking at is controlled by CSS, 
  depending by which browser you are using the page will automatically
  determine what style sheet to use.

  This page and its content have been created and designed by 
  Tyler Howe, for Negahneewin College.

  If you are editing the content of this site for Negahneewin, realize
  that two style sheets are being used here, and that you have to adjust 
  each one. The one named "ffCss" is for firefox, and "ieCss" is for Internet
  explorer. Please understand that a lot of time has went into this site 
  and Any hack and Slashing to the content would be a personal insult to 
  me the designer. 
  
  Please keep it clean, and maintain the look I have created, unless 
  re-making the entire site. 
  
  If you have any questions about the site and the programing running 
  it, feel free to email me at howe_tyler@hotmail.com. I would take 
  pleasure in helping to maintian its look and feel.

  Good luck.

  Please refer to the document named "SiteInfo.doc" for a explanation 
  of the site programing, and procedures to make changes. Having 
  accepted the job of webmaster for Negahneewin, I would assume you have
  knowledge in ASP, Javascript, Css, Adobe PhotoShop, and Illistrator.

 */


body 
{
	background: #F0E9CE url('images/bg.jpg') repeat-x top ;
	margin: 0px auto;
	height:100%;
	width:100%; padding-left:auto; padding-right:auto; padding-top:0px; padding-bottom:0px
}

/*Most of the content is placed inside this container, so as to 
  keep the page centered. Everything in here must be placed as
  Position:Relative to this container. Otherswise a centered page
  isn't possible.*/	

/*if you know a better way to center the page with CSS, email me
  at Howe_tyler@hotmail.com*/


#totalPage
{
	display:block;
	position:static;
	background: url('images/bgCont.jpg') repeat-y top;
	width:680px;
	height:auto;
	min-height:900px;
	z-index:80; margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:-20px; padding-left:auto; padding-right:auto; padding-top:0px; padding-bottom:0px
}	


/*This is the code for the menu bar!*/
	
	
/*Set the property of the actual #menuBar element*/	
#menuBar
{
 position:relative;
 float:left;
 width:100px;
}

/*Set the properties if the List(li) perimmiter*/
#menuBar li 
{
	display:block;
	list-style:none;
	text-decoration:none;
	padding: 5px 0px 5px 0px;
}

/*Sets the properties of the <a href> should look the same
  as a:link so that the effect of buttons is given*/
#menuBar a
{
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:14;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	color:Gray;
	background-color:#2B0101;
	border-style:dotted;
	border-width: 0px 2px 0px 2px;
	border-color:#2B0101;
	width:100px;
}

#menuBar a:link
{
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:14;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	color:Gray;
	border-style:dotted;
	border-width: 0px 2px 0px 2px;
	border-color:#2B0101;
	width:100px;
}

/*Define properties of the mouse over. This is where 
  you set the diffence for your hover vs regular look 
  of your button*/
#menuBar a:hover
{
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:14;
	text-align:center;
	background-color:#2B0101;
	border-style:dotted;
	border-width: 0px 2px 0px 2px;
	border-color:Gray;
	text-decoration:none;
	font-weight:bold;
	color:#C1C1C1;
	width:100px;
}

/*menuBar code ends here*/



/*This sets the header property, which is the main piece 
  of artwork. Any adjustments here will just mess 
  everything up. So make a backup if your gunna play here.*/

#header 
{
	background:url('images/header.jpg') no-repeat top center;
	position:relative;
	height:360px;
	top: 0px;
	left: 2px;
	z-index:100
}


#content
{
	position:relative;
	margin:0px auto 0px auto;
	padding:0px 0px 0px auto;
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; 
	color:Gray;
	width:500px;
	left:60px;
}


/*Set the titles of each paragraph. Also makes the border rounded.*/
.contTitle
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:16px;
	border-color:#760606;
	border-width:0px 1px 1px 0px;
	border-style:solid;
	width:250px;
	-moz-border-radius-bottomright: 12px;
}

/*The footer is placed outside of the #totalPage container, 
  this is done so that the bottom of the page floats with 
  the size of the container. Which means you should be able 
  to add content to the page without changing the code 
  everytime. Since I am trying to make this site somewhat 
  dynamic it is important.*/

#link
{
	position:relative;
	margin:0px auto 0px auto;
	padding:0px 0px 0px auto;
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; 
	color:Gray;
	width:400px;
	left:60px;
}

#link li
{
	display:block;
	list-style:none;
	text-decoration:none;
	padding: 5px 0px 5px 0px;
}

#link a, link
{
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:14;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	color:Gray;
	background-color:#2B0101;
	border-style: dashed;
	border-width: 0px 2px 0px 2px;
	border-color:#2B0101;
	width:300px;
}
#link a:hover
{
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size:14;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	color:#ffcc33;
	background-color:#2B0101;
	border-style:dotted;
	border-width: 0px 2px 0px 2px;
	border-color:grey;
	width:300px;	
}

#contact
{
	position:relative;
	margin:0px auto 0px auto;
	padding:0px 0px 0px auto;
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:12px; 
	color:Gray;
	width:400px;
	left:60px;
}

#contact li
{
	list-style:none;
}

#contact li.centered
{
	text-align:center;
	font-weight:bold;
}

b
{
	font-weight:bolder;
}

#footer
{	
	background:url('images/footer.jpg') no-repeat bottom center;
	height:60px;
	margin-left:4px; margin-right:0px; margin-top:0px; margin-bottom:50px
}	
	
	
a
{
	text-decoration:none;
	color:#ffcc33;	
}