/*These declartion blocks are redefined HTML tags
  You can take any predefined HTML tag and alter its attributes with CSS */


body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size: 12px;
}

td {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
}

th {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	background-position: left;
	font-size: 12px;
	font-weight: bold;
}

/* These next declaration blocks are classes
   Notice how they start with a period and they are given a descriptive name
   You can create as many classes as it takes to make your web site look great */
.more a {color: #900; text-decoration: none; text-transform:uppercase; font: bold 80% arial, sans-serif; white-space: nowrap;}
.more a:hover {text-decoration: underline;}
.citation {display: block; text-align: right; background-color: #fff; color: #666; padding-top: 1em; font-size: smaller;} 
   
.mainTableBackground{
	background-image:     url(../images/InsideBackground.jpg);
	}
	
.flipTableBackground {
background-image:url(../images/InsideFlip.jpg);
}

.header {
	background:    url(../images/InsideHeader.jpg) no-repeat;
}

.SubPageHead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	background-color: #F4F4F2;
}


.NavColumnLineHeight {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;

}

.blackbkgrdWhitetext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
	letter-spacing: .2em;
	text-align: center;
	border: thin solid #333333;
}

/*------------------------------------------
Navigational elements
The following selectors are psuedo styles that change the appearance or the
links on the page.  The should appear in the order that they can be executed
Remember the   LoVe  HAte  analogy that we discussed in class that I have with coupons :)
a:link
a:visited
a:hover
a:active
------------------------------------------*/

/* In this web site I needed to have some links of one color and behavior and
other links of another color and behavior. When you have a situation where you need
to create multiple link styles, you must use descendant selectors.   It is this cascading effect that gives cascading style sheets its name. 

For the side navigation I created a class called .sidenav    I applied this style to
the column of the table where the side navigation appears.  Then I created the following
pseudo classes for the links in the proper order:  They are called 
.sidenav a:link
.sidenav a:visited
.sidenav a:hover
.sidenav a:active
Notice that first the secector applies the sidenave attribute to the table cell, then each
link that appears under the sidenav class will be affected by the class
*/

.sidenav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #000000;
	font-size: 11px;

}
.sidenav a:link{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #000000;
	text-decoration: underline;
	padding-left: 15px;
	padding-right: 5px;
	background:  url(../images/arrow_back_green.gif) no-repeat 0px 4px;
	display: block;
}

/*  After you have visited the link, the arrow turns to a rectangle giving the viewer
a visual indication that they have already clicked on that link and visited the web page*/

.sidenav a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #313D17;
	text-decoration: none;
	padding-left: 15px;
	padding-right: 5px;
	background:  url(../images/arrow_visited_green.gif) no-repeat 0px 4px; 
	display: block;
	
}

/*  When you move your mouse or hover your mouse over the link a special style is added.
In this example, it indents the text a bit more and displays a angled smaller arrow*/
.sidenav a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #313D17;
	text-decoration: underline;
	padding-left: 20px;
	padding-right: 5px;
	background:  url(../images/arrow_indent.gif) no-repeat 0px 4px; 
	display: block;
}

/*  The acitive link declaration adds special style to an activated element that indicates, 
in this case, which page you are currently on by displaying the link larger or bold without an underline*/
.sidenav a:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000033;
	text-decoration: none;	
	padding-left: 15px;
	padding-right: 5px;
	background:  url(../images/arrow_back_green.gif) no-repeat 0px 4px;
	display: block;
}


/* The breadcrumb style is another descendant selector created especially for links
or psuedo styles   */ 

.breadcrumb {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: lighter;
	padding-left: 15px;
	color: #000000;
	text-decoration: none;
}

.breadcrumb a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: lighter;
	color: #000033;
	text-decoration: underline;
}

.breadcrumb a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: lighter;
	color: #663366;
	text-decoration: underline;
}

.breadcrumb a:hover {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #000033;
	text-decoration: none;
}

.breadcrumb a:active {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #000033;
    text-decoration: none;
}
.footernav{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: normal;
	color: #000033;
	text-decoration: none;

}


.blackBrochureisonline {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
	text-align: center;
}

.blackBrochureisonline a:link{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
	text-align: center;
}

.blackBrochureisonline a:visited{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
	text-align: center;
}
.blackBrochureisonline a:hover{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #333333;
	font-weight: bold;
	text-align: center;
}
.blackbkgrdWhitetext a:active{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
	text-align: center;

}
.courseinfo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	font-weight: bold;
}

.courseTitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-transform: capitalize;
	color: #000000;
}

.courseOutline {
	margin: 3px;
	padding: 12px;
	border: thin solid #003333;
}

.leftOutline {
	margin: 12px;
	padding: 10px;
	border: 1px groove #000066;
	font-weight: normal;
	background-color: #E0F3F3;
}

.courseOutlineBlack {
	margin: 2px;
	padding: 1px;
	border: thin solid #003333;
	color: #FFFFFF;
	background-color: #000000;
	font-weight: bold;
}

.BigNav{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}

.BigNav  a:link{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003366;
	text-decoration: underline;
}


.BigNav a:hover{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003366;
	background:#C2E8E9;
	font-weight: bold;
	}

.BigNav a:visited{	  
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003366;

	}

.BigNav a:active{	  
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #003366;	


	}