/* CSS file for BOM Investments and Retirement Planning Site
Live: June 2009

This file contains styles for the layout, design, and content of the IRP site.
These are divided out below to prevent unintended changes. However, this
means an item may have styles under each section. Care should be taken to 
check all instances before adding or modifying a given property.
Comments provided tell what each selector applies to and the purpose of
of each style.  Details for changing calculated values are given, 
however general instructions for changing values are not. For details
on what a line does and how to change it, check out the folloing sites:

1) http://htmldog.com/reference/cssproperties/

This layout has been adapted from that provided at the following site:
http://www.alistapart.com/articles/multicolumnlayouts

BACK UP BEFORE MAKING CHANGES: Changes to this file may affect the appearance
of the site in unexpected or negative ways. It's best to have a clean copy so
changes can easily be undone. */


/*############################
  Global Styles
#############################*/

* {							/* Styles of all page elements */
	margin: 0;				/* Clears any default margins applied by browsers */
	padding: 0;				/* Clears any default padding applied by browsers */
}

body {							/* Styles of viewport area and all page content */
	background-color: #d0d0da;	/* Color of area outside of page */
	font: 75%/75% Verdana, Arial, Helvetica, sans-serif;
	/* base font size (relative to 16pt),  line spacing, and face in order of preference */ 
}
	
#wrap {						/* Styles of wrapper around page */
	margin: auto;			/* Centers layout horizontally */
	width: 70em;			/* Page width */
	border: 1px solid #aaa;	/* Create border around page */
	background-color: #fff;	/* Background color of main content area (x2) */
}

.cleardiv {					/* Styles of clearing div (used to control layout) */
	clear: both;			/* Place on separate line */
	height: 1px;			/* Minimize height */
	line-height: 1px;		/* Minimize height of content */
	overflow: hidden;		/* Hide any content outside of its borders */
	background: none;		/* Make transparent */
}

a img {
	border-width: 0;
}

/*############################
  Page Header
#############################*/

#header {							/* Styles of page header */
	position: relative;
	border-top: .3em solid #aaa;		/* Color of bar above header */
	background: #e4e3df url('../images/irp_header.jpg') no-repeat right top;	/* background color and image of header */
}

#header h1 {
	font: normal 2em/1.2em "Times New Roman", Georgia, serif;
	text-transform: uppercase;	
	width: 30em;
	height: 102px;
	padding: 28px 0 0 40px;
	overflow: hidden;
}

#header h1 a {
	color: #666;
	text-decoration: none;
}

#header h1 a:hover {
	text-decoration: underline;
}
#header a img {
	float: left;
	position: relative;
	top: -14px;
	left: -20px;
}

#header h1 span {
	font-weight: bold;
	display: block;
	font-size: .94em;
	letter-spacing: -1px;
}

#navMenu {							/* Styles of menu bar area */
	border-top: 1px solid #aaa;		/* Add thin border above menu */
	border-bottom: 1px solid #aaa;	/* Add thin border below menu */
	background-color: #ccc;			/* Color of area (thick border) around menu */
	padding: 5px 0;					/* Padding for border around menu */
}

/* Header Links
------------------------------*/

#headerLinks {					/* Styles of links in header */
	position: absolute;
	top: 5px;
	right: 0;
	margin: 5px 10px;			/* Add space around link section */
	font-size: .9em;			/* Link font size relative to body font */
	font-weight: bold;			/* Make links bold */
	line-height: 1.7em;		 	/* Vertical (line) spacing between links */
	text-align: right;			/* Right-align link text */
}
#headerLinks ul {list-style-type: none;} /* Remove bullets from header link list */

#headerLinks a:active {			/* Sytles of link states in header (Base) */
	color: #777;				/* Color of link text */
	text-decoration: none;		/* Remove underline from links */
}

#headerLinks a:hover {			/* Sytles of link states in header (Base) */
	color: #777;				/* Color of link text */
	text-decoration: none;		/* Remove underline from links */
}

#headerLinks a:visited {			/* Sytles of link states in header (Base) */
	color: #777;				/* Color of link text */
	text-decoration: none;		/* Remove underline from links */
}

#headerLinks a:link {			/* Sytles of link states in header (Base) */
	color: #777;				/* Color of link text */
	text-decoration: none;		/* Remove underline from links */
}

#headerLinks a {			/* Sytles of link states in header (Base) */
	color: #777;				/* Color of link text */
	text-decoration: none;		/* Remove underline from links */
}

#headerLinks a:visited {		/* Styles of link states in header (Visited links) */
	color: #333;				/* Color of visited link text */
}

#headerLinks a:hover {			/* Styles of link states in header (Mouse hover) */
	text-decoration: underline;	/* Add underline to link */
}


/*############################
  Main Content Area
#############################*/

#container {			/* Styles of page body */
	border-color: #f3f3f3;		/* Background color of sidebar (x2) */
	line-height: 1.45em;		/* Increase line spacing of main content */
}

#content {			/* Styles of page body */
	border-color: #f3f3f3;		/* Background color of sidebar (x2) */
	line-height: 1.45em;		/* Increase line spacing of main content */
}

#container table {	/* Styles of paragraph text */
	margin-bottom: 0.8em;			/* Add space below */
}

#container ol {	/* Styles of paragraph text */
	margin-bottom: 0.8em;			/* Add space below */
}

#container ul {	/* Styles of paragraph text */
	margin-bottom: 0.8em;			/* Add space below */
}

#container p {	/* Styles of paragraph text */
	margin-bottom: 0.8em;			/* Add space below */
}

#container table {					/* Styles of other content blocks */
	margin-bottom: 1.2em;				/* Add space below */
}

#content {						/* Styles of main content area */
	float: left;				/* Place content at left of page */
	border-width: 0 14em 0 0;	/* Add border for sidebar content */
								/* CALCULATE: #sidebar width + left and right padding */
	border-style: solid;		/* Border is solid */
	margin: 0 -14em 0 0;		/* Create space for sidebar at border */
								/* CALCULATE: negative of right border width */
	padding: 1em;				/* Spacing around main content */
	width: 54em;				/* Main content width */
								/* CALCULATE: #wrap width - ( sidebar width, padding, content padding ) */
}

#content p {	/* Styles of paragraphs in main content area and sidebar */
	padding-bottom: .8em;		/* Add space below each paragraph */
}

#content h2 {					/* Styles of level 2 Headings */
	display: block;				/* Place on separate line */
	margin: .3em auto 1em auto;			/* Add space at top and bottom, Center heading block */
	font: normal 1.7em/1.7em "Trebuchet MS", serif;/* Font style of heading */
	color: #518230;				/* Color of heading text */
	text-align: center;			/* Center heading text */
	border-width: 1px 0;		/* Add border above and below heading */
	border-style: solid;		/* Make border solid */
	border-color: #8c8;		/* Color of border */
	width: 380px;				/* Heading spans width equal to top image */
}

#content h3 {					/* Styles of level 3 headings */
	font: normal 1.5em/1.5em "Trebuchet MS", serif;	/* Font style of heading */
	color: #518230;				/* Color of heading text */
	padding-top: .3em;			/* Add spacing above the heading */
}

#content h3 a {					/* Styles of links inside level 3 headings */
	font-size: .6em;			/* Font size relative to heading */
	text-decoration: underline;	/* Add underline to link */
	text-transform: uppercase;	/* Place link text in all-caps */
}

#content h4 {					/* Styles of level 4 headings */
	font-size: 1.1em;			/* Font size relative to body text */
	font-weight: bold;			/* Make text bold */
}

/* Links
------------------------------*/

#content h4 a {					/* Styles of links inside level 4 headings */
	font-weight: normal;		/* Unbold link text */
	font-size: .8em;			/* font size relative to heading text */
	text-decoration: underline;	/* Add underline to link text */
	text-transform: uppercase;	/* Place link text in all-capse */
}

#content a:active {				/* Styles of link states in main content area (Base) */
	color: #55f;			 	/* Color of link text */
}

#content a:hover {				/* Styles of link states in main content area (Base) */
	color: #55f;			 	/* Color of link text */
}

#content a:visited {				/* Styles of link states in main content area (Base) */
	color: #55f;			 	/* Color of link text */
}

#content a:link {				/* Styles of link states in main content area (Base) */
	color: #55f;			 	/* Color of link text */
}

#content a {				/* Styles of link states in main content area (Base) */
	color: #55f;			 	/* Color of link text */
}

#content a:visited {			/* Styles of link states in main content area (Visited links) */
	color: #339;				/* Color of visited link text */
}

#content a:hover {				/* Styles of link states in main content area (Mouse hover) */
	text-decoration: underline;	/* Add underline to link */
}

/* Lists
------------------------------*/
#container li {padding: .4em 0;}		/* Increase spacing between list items */
#content li {margin-left: 3em;}			/* Add space between bullet and text */
#content ul {list-style-type: circle;}	/* Use circles for bullets */
#content ol {list-style-type: decimal;}	/* Add number before each item of numbered lists */

/* Special Items
------------------------------*/

#content .topImage {			/* Styles of image at top of page content */
	display: block;				/* Place on separate line and allow center */
	margin: 4px auto 15px auto;			/* Add space at top and bottom, Center image */
}

/* Forms
------------------------------*/

#content form {
	margin: 0 auto;
	width: 34em;
}

fieldset {
	border-style: none;
	float: left;    
	clear: left;    
	width: 100%; 
	margin: 1.5em 0 0 0; 
}

legend {display: none;}  

fieldset ol {
	margin: 0;
}

#content fieldset li {
	margin: 0;
	list-style-type: none;
	float: left;    
	clear: left;    
	width: 100%;    
	padding: .5em 0;
}

#content label {
	float: left;    
	width: 9em;    
	margin-right: 1em;   
}

#content input.text {width: 11em; border: 1px solid #518230;}
#content textarea {width: 18em; border: 1px solid #518230;}

#content fieldset.submit {
	margin: 0;
	float: none;    
	width: auto;
}

#content #valsContact {margin-bottom: 1em;}
}
#content input.submit {padding: 0 1em;}


/*############################
  Side Bar
#############################*/


#sidebar {							/* Styles of page sidebar */
	float: right;					/* Place at right of page */
	padding: 1em;					/* Spacing around sidebar content */
	width: 12em;					/* Sidebar width (without padding) */
	background-color: #f3f3f3;		/* Background color of sidebar */
}

#sidebar h2 {						/* Styles of level 2 headings in sidebar */
	font: bold 1.15em "Trebuchet MS", serif;	/* Font style of heading */
	color: #7faf5e;					/* Color of heading text */
	border-bottom: 1px solid #777;	/* Add border below heading */
	margin-bottom: 10px;			/* Add space below heading */
	padding-bottom: 10px;			/* Add space between heading and border */
	text-transform: uppercase;
}

/* Links
------------------------------*/

#sidebar a:active {					/* Styles of link states in sidRail (Base) */
	color: #449;					/* Color of link text */
}

#sidebar a:hover {					/* Styles of link states in sidRail (Base) */
	color: #449;					/* Color of link text */
}

#sidebar a:visited {					/* Styles of link states in sidRail (Base) */
	color: #449;					/* Color of link text */
}

#sidebar a:link {					/* Styles of link states in sidRail (Base) */
	color: #449;					/* Color of link text */
}

#sidebar a {					/* Styles of link states in sidRail (Base) */
	color: #449;					/* Color of link text */
}

#sidebar a:visited {				/* Styles of link states in sidebar (Visited links) */
	color: #003;					/* Color of visited link text */
}

#sidebar a:hover {					/* Styles of link states in sidebar (Mouse hover) */
	text-decoration: underline;		/* Add underline to link */
}

#sidebar ul {
	list-style-type: none;
}

/* Button List
------------------------------*/

#sidebar ul.buttonList {		/* Styles of button lists (eg homepage) */
	list-style-type: none;
	padding-bottom: 0.8em;		/* Add spacing below list */
}

#sidebar .buttonList li {		/* Styles of button list items */
	margin: 0 2%;					/* Add space between buttons */
	padding-left: 15px;			/* Place button text to right of image */
	background: url(../images/button_bg_small.gif) no-repeat 0 50%;
	/* Background color and image placed at left and centered vertically */
}

#sidebar .buttonList li a:active {	/* Styles of link states in button list (Base) */
	font-size: 0.9em;				/* Font size relative to main body text */
	font-weight: bold;
	line-height: 1.3em;				/* Increase line spacing of link text */
	color: #666;					/* Color of link text */
	text-decoration: none;			/* Remove underline from links */
}

#sidebar .buttonList li a:hover {	/* Styles of link states in button list (Base) */
	font-size: 0.9em;				/* Font size relative to main body text */
	font-weight: bold;
	line-height: 1.3em;				/* Increase line spacing of link text */
	color: #666;					/* Color of link text */
	text-decoration: none;			/* Remove underline from links */
}

#sidebar .buttonList li a:visited {	/* Styles of link states in button list (Base) */
	font-size: 0.9em;				/* Font size relative to main body text */
	font-weight: bold;
	line-height: 1.3em;				/* Increase line spacing of link text */
	color: #666;					/* Color of link text */
	text-decoration: none;			/* Remove underline from links */
}

#sidebar .buttonList li a:link {	/* Styles of link states in button list (Base) */
	font-size: 0.9em;				/* Font size relative to main body text */
	font-weight: bold;
	line-height: 1.3em;				/* Increase line spacing of link text */
	color: #666;					/* Color of link text */
	text-decoration: none;			/* Remove underline from links */
}

#sidebar .buttonList li a {	/* Styles of link states in button list (Base) */
	font-size: 0.9em;				/* Font size relative to main body text */
	font-weight: bold;
	line-height: 1.3em;				/* Increase line spacing of link text */
	color: #666;					/* Color of link text */
	text-decoration: none;			/* Remove underline from links */
}

#sidebar .buttonList li a:hover {	/* Styles of link states in button list (Mouse hover) */
	text-decoration: underline;		/* Add underline to link */
}


/*############################
  Footer
#############################*/

#footer {						/* Styles of page footer */
	padding: 5px;				/* Spacing around footer content */
	background-color: #518230;	/* Background color of footer */
	color: #fff;				/* Color of footer text */
	line-height: 1.45em;		/* Line spacing of text */
}

/* Links
------------------------------*/

#footer a:active {				/* Styles of link states in footer (Base) */
	color: #eee;				/* Color of link text */
	text-decoration: none;		/* Remove underline from link */
}

#footer a:hover {				/* Styles of link states in footer (Base) */
	color: #eee;				/* Color of link text */
	text-decoration: none;		/* Remove underline from link */
}

#footer a:visited {				/* Styles of link states in footer (Base) */
	color: #eee;				/* Color of link text */
	text-decoration: none;		/* Remove underline from link */
}

#footer a:link {				/* Styles of link states in footer (Base) */
	color: #eee;				/* Color of link text */
	text-decoration: none;		/* Remove underline from link */
}

#footer a {				/* Styles of link states in footer (Base) */
	color: #eee;				/* Color of link text */
	text-decoration: none;		/* Remove underline from link */
}

#footer a:visited {				/* Styles of link states in footer (Visited links) */
	color: #aea;				/* Color of link text */
}

#footer a:hover {					/* Styles of link states in footer (Mouse Hover) */
	text-decoration: underline;		/* Add underline to link */
}