/* -----------------------------------------------------------------------------------------
	template.css - imexko.ca - Feb 17/06
	Doug Brydges, Northline WebServe

FLEXIBILITY
------------

Divisional Definitions
-----------------------
- The html template file uses divisional blocks instead of tables and cells for content.
- Each division "Opening" tag includes the division name, such as: <div id="header">
  and all items within the division are defined by additional #header styles following the
  first #header definition in this file.
- All display parameters for a given division can be defined here in the .css file this way
  removing all formatting parameters from the html file.
- Should be able to move almost all formatting from an html file to css statements in a .css file.
---------------------------------------------------------------------------------------- */

/* 	Added margin-top, bottom, left and right settings to body string below.
	Must use all 4, even those set to 0. Using only one applies the setting to all 4 margins.
	------------------------------------------------------------------------------------------ */
body {color: #444; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; background: #FFF url(images/background.gif) repeat-y; font: 85%/130% arial, helvetica, sans-serif;}

#header { background: #c3dfd5 url(images/header-bg.gif) repeat-y;} /* 0B1757 */
#header h1 {margin: 0; padding: 0; width: 614px; height: 155px; background: url(images/header.gif) no-repeat;}

/* creates the navigation bar itself, with top & bottom border lines */
#topnav {float: left; width: 100%; background: #006227 url(images/navstrip.jpg) repeat-y; border-top: 1px solid #adaeb5; border-bottom: 1px solid #adaeb5;} /*2E3C83 */

/* formats the menu bar & sets first left-end button position */
#topnav ul {width: 614px; float: left; padding: 0; margin: 0 0 0 50px; list-style-type: none; background: url(images/nav-line.gif) repeat-y 0 0;}

/* makes the menu buttons display in horizontal line, left to right */
#topnav li { display: inline; }

/* formats the menu buttons */
#topnav li a {display: block; float: left; padding: 7px; text-align: center; background: url(images/nav-line.gif) repeat-y 100% 0; font: bold 12px tahoma; color: #202020; text-decoration: none;} /* #006227 - dk green */
#topnav li a:hover {font: bold 12px tahoma; color: #ffffcc;}

/* adds a strip under the nav bar using same background imaging as the masthead or header image */
#topstrip {clear: both; height: 13px; background: #006227 url(images/navbase.jpg) no-repeat; font-size: 1px;}  /* c3dfd5 */

/* formats large header */
#content h1 {font: bold 36px arial; color: #5E6200;}

/* formats the content for the content cell */
#content {clear: both; float: left; width: 540px; display: inline; margin: 20px 50px 20px 40px;}

/* formats introduction - first line in the content */
#content .intro {font: bold 14 px arial; color: #5E6200; line-height: 130%; margin-bottom: .5em;}
/* #content .intro {font-size: 120%; color: #5E6200; line-height: 130%; margin-bottom: .5em;} */

/* formats the 4 list items without bullets - under the introduction line */
#content ul {padding: 0; margin: 0; list-style-type: none;}

/* adds an image icon to replace the bullets starting each of the 4 list items */
#content ul li {padding: 0 0 0 15px; background: url(images/arrow.gif) no-repeat 0 .4em; }

/* formats the headings preceding each paragraph */
#content h2 {margin-bottom: 0; color: #006227; font-size: 140%; line-height: normal; }

/* sets the line spacing in the paragraphs - eliminates the extra space between heading and text */
#content p { margin: 0 0 1.5em 0; }

/* formats color of paragraph text and links within the text */
#content a {color: #0E1D6D; text-decoration: none; }
	#content a:link { border-bottom: 1px solid #616A9C; }
	#content a:visited {color: #5E6200; border-bottom: 1px solid #929554; }
	#content a:hover, #content a:active {color: #600; border-bottom: 1px solid #930; }

/* formats the footer line */
#content h3 {font: normal 9px tahoma; color: #808080;}

/* positions the banner images - the square images that were in the sample layout */
#banners {float: left; width: 148px; padding: 20px 0 0 0; }
/* #banners {float: left; width: 148px; padding: 20px 0 0 0; } */

/* makes image border invisible & puts a 20px space between them */
#banners img {margin-bottom: 20px; display: block; border: 0; }