/* HEY SKIPP!! Here are the css document notes! When you see a "#", its corresponding value in the web page is "div". When you see ".value" it refers to "class" in the page. */

/* body information: tells the html document what the global settings will be for the site. Global as in this tells it that these attributes will be used absolutely throughout. */

body  { 
		background: #003300; /* green bg */
		margin: 0; /* no margins around the document */
		font-family: Helvetica; /* font that will be used throughout the site */
		font-size: 11px; /* font size that will be used throughout the site */
		line-height: 1.5; /* line height for paragraphs */
 }
 
/* global tags - these are css values that determine the properties of specific html tags such as h1, p, a (headers, paragraph formating, and the appearance of links) */
 
 h1 { margin: 0 0 10px 0; } /* tells the header to have a bottom margin of 10 pixels. When entering margin values, list them clockwise (top, right, bottom, left).*/
 
 a { text-decoration: none; } /* specifies that all links in the document in their normal state will have no underline. */
 
 a:hover { text-decoration: underline; } /* specifies that all links in the document in their rollover state will have an underline. */
 
 /* divs - divs are items used to positon html elements. The only one here is the "container". It is created to center the layout*/
 
 #container {
	width: 800px; /* width of the div */
	margin: 0 auto 0 auto; /* css reads "auto" as a centering value when a width is specified, so it centers the page. */
}

/* classes - classes are used for specific instances of items, such as a specific instance of a text element that you want to display as bold, red, and centered. You can name them anything you want, but you have to put a period (.) before the name. I usually try to code them according to the item they define (ex. txtName for text items, tdName for table cell items, and tblName for table items. */
 
.txtCopyright { /* formats the copyright text at the bottom of the page */
	color: #009933; 
	font-size: 10px; 
} 

.tdMenu { /* formats cell that contains the main nav menu */
	width: 147px; /* width of the table cell */
	background: #CC6600;
	vertical-align: top; /* background color */
}

.tdContent { /* formats cell that contains the main page content */
	width: 528px; /* width of the table cell */
	background: #fff; /* background color */
}

.tdSidebar { /* formats cell that contains the right sidebar */
	width: 125px; /* width of the table cell */
	background: #CC6600; /* background color */
}

.tdFooter { /* formats cell that contains the page footer */
	height: 50px; /* width of the table cell */
	background: #CCC; /* background color */
}

.tblContent { /* formats the table that contains the english / french content */
	width: 100%; 
	margin-top: 10px; 
}

.tdConl { /* formats the cell that contains the english content. Note the use of a right border to divide the french eng content */
	border-right: 1px dashed #999; 
	vertical-align: top; 
	padding: 0 10px 10px 10px; 
}

.tdConr { /* formats the cell that contains the french content */
	vertical-align: top; 
	padding: 0 10px 10px 10px; 
}

/* navigational items - these are created with the use of an unordered list. */ 

#menu { /* creates the div that will contain the menu. This needs to be done, because the attributes given to the list will be specific to the list inside this specific div. Otherwise every unordered list would be formatted the same way. */
}

#menu ul { /* formats any unordered list (ul) that is contained in the div "menu" */
	list-style: none; /* no bullets */
	font-size: 10pt;
	margin: 10px 10px 50px 10px;
	padding: 0;
}

#menu ul li { /* formats individual list items inside the ul */
	border-bottom:  1px dashed #fff; /* dashed bottom border is specified "size type color */
	line-height: 2em; /* 2em means twice the font size and is relative to the users browser, this is better than putting an absolute pixel value because it accomodates each user's preference */
	color: #fff;
	font-weight: bold;
	width: 140px;
	font-style: italic;
}

#menu ul li a { /* formats links inside the list items */
	text-decoration: none; 
	color: #fff;
}

#menu ul li a:hover { /* formats link rollovers inside the list items */
	text-decoration: underline;
}