Style Sheet for TL 110

Open and save the style sheet here.

/* CSS for TL 110 - This is a comment and is designated by the asterisk and slash */
@charset "UTF-8";
/* This set of CSS rules is the first level and can be replaced by other class and id selectors.  
   The left curly brace begins the set of declarations. Each declaration is separated by a semi-colon*/
body {
	
	background-color: #336699;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;color: #000000;
/* used to replace default browser settings so that the page will look the same on all browsers (hopefully!) */	
	margin: 0px;
	padding: 0px;
}
/* The right curly brace ends the set of declarations. */
/* The next set of declarations is for an id selector, which is used when you want to define a unique style 
   for an appropriate element, once per page only.  Note the hash mark (#).  The HTML markup looks like this:
   <p id="wrapper"> ... </P>.  */

/* The wrapper id contains all of the content and borders of the page.  
   The width and color of the page are defined. */
#wrapper {
	background-color: #ffffff;
	text- align: left;
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
/* #header is the first selector.  No dimensions are assigned because the limits are set by the
    parent selector, #wrapper. */
#header {
	margin-top: 0px;
	margin-bottom: 1px;
}
#content {
	
	margin-top: 0px;
	padding-top: 6px;
	padding-left: 6px;
	padding-right: 6px;
	text-align: left;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 1.5;color: #555555;
	
	margin-top: 6px;
	margin-bottom: 10px;
	clear: both;
/* To end the float effect and stop further elements from wrapping around a float element, 
apply the clear property with a value that matches the float or floats you want it to stop wrapping around. 
This will push the element down so it begins at the bottom of the floated element. In the case of this CSS, 
the #footer selector is the last thing on the page and clears the floats of #leftColumn and #rightColumn */
	background-color:#ffffff;
	border-top:1px solid #336699;
}
#logo {
	height: 226x;
	padding-bottom: 0px;
	
}
#nav {
	height: 22px;
}
#banner {
	height: 60px;
}
#leftColumn {
/* The CSS float property allows you to "float" an element to the left or right edge of its parent/containing element, 
thus creating the effect of subsequent elements wrapping around the element. */	
	float: left;
	width: 750px;
	text-align: left;
}
#rightColumn {
	
	float: right;
	width: 150px;
	text-align: left;
}
/* The following selector is a class selector and affects multiple elements you associate with the class.   
   It is not limited to once per page. */
.imageRight {
	padding-left: 5px;	
	float: right;
}
/* This next group of declarations are pseudo-classes and style the four states of links, unvisited, visited,
   hover and active */ 

a.horizontal_menu, a.horizontal_menu:link,
   a.horizontal_menu:visited {display:block; /* you can define background colors behind the text. */width:158px; height:16px; 
   background:#999999; border:1px solid #ffffff; margin-top:2px; 
   text-align:center; text-decoration:none; /* the link is not underlined */
   font-family:verdana, arial, sans-serif; font-size:10px;
    color:#ffffff; line-height:14px; overflow:hidden; float:left;}
a.horizontal_menu:hover {color:#fff; background:#003366;}
a.horizontal_menu:active {color:#fff; background:#99ccff;}

#sidemenu a, #sidemenu a:visited {
  text-decoration:none;
  text-align:center;
  background-color:#999999; 
  color:#fff;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  display:block; 
  width:12em; 
  padding:0.2em;
  margin:0.5em auto;
  border-right:5px solid #fff;
  }
#sidemenu a:hover {
  border-right:5px solid #6A5ACD;
/* This displays the purple vertical band to the right as you hover over the link. */
  }