/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------		MASTER STYLESHEET
-------
-------		Project:			GatherPath.com
-------		Version:			Alpha
-------		Last Change:		2008.11.03 : implemented site design
-------		Assigned to:		Jaie Claudet
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* +++++

CODING CONVENTIONS

Review the Table of Contents for code structure.

The code and markup have been designed to function in blocks. The ultimate goal of these blocks is to avoid "snipers," or pieces of code that have long-range
influence. In some cases global styles are defined (wherein long-range influence is desirable), but for the most part, long-range inheritance should be avoided.

Wherever possible, styles are constrained to a block; i.e. the ancestry of every style terminates at its parent block. Parent blocks are denoted by IDs rather
than classes (although there are a few exceptions). Wherever possible, the specificity of a style defintion should begin with its parent ID.

Another goal for constraining styles to blocks is the simplification of trouble-shooting. If you encounter an error, you should not have to look beyond that
particular block to find the problem. For the most part, determining which block to analyze will be straightforward. There are a few instances, however, where
blocks are contained within larger blocks. For example, the "header bar" element has its own section of defintions, but the header bar is always contained within
higher-level blocks, such as the column_side or the column_main. If a change needs to be made to the header bar, look for the header bar definions, not the block
that contains the header bar. Another example is the frequent use of "zebra tables;" the tables exist within larger blocks, but they have their own batch of
definitions. Review the Table of Contents to see all of the blocks.

For the sake of efficiency and lean code, styles are re-used wherever possible. However, there are some groups of styles that are very similar to one another but
that are different enough to merit separate blocks. For example, the "section_navigation_top" and "section_navigation_bottom" blocks are almost identical, but
still deserve separate blocks. If, while attempting to re-use existing code, you find that more than two or three modifications are required, you should create a new
block element with its own unique batch of defintions.

When creating class and ID names, keep in mind that the code you create might be plugged in elsewhere, so the naming convention needs to be relatively neutral. 
For example, "#zebra_table_v01" is better than "#homepage_table." Be cautious when making changes to existing styles, as they are certain to affect multiple 
pages. Be as specific as possible, and if necessary, create your own mechanism for isolation.

+++++ */




/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								TABLE OF CONTENTS
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*

	COLORS

	SITE-WIDE DEFAULT STYLES

	HEADER

	FOOTER
	
	KILLERS

*/




/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								COLORS
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
	YELLOW
		Goldenrod: 			#DAA520; /* goldenrod */ 			/* rgb(218,165,32)
		Light Yellow:		#FFFFE0; /* light yellow */			/* rgb(255,255,224)
		Light Yellow 90%:	#FBF6CC; /* light yellow 90% */ 	/* rgb(251,246,204)

	BLUE
		Dark Blue: 			#002C6E; /* dark blue */ 				/* rgb(0,44,110)
		Bright Blue:			#0066CC; /* bright blue */			/* rgb(0,102,204)
		Aqua Blue:			#A7DCF7; / aqua blue */				/* rgb(167,220,247)
		Light Blue: 			#E2F4FC; /* light blue */ 				/* rgb(226,244,254)
		Md Lt Blue:			#ADCEEA; /* medium light blue */	/* rgb(173,206,234)
		Pale Blue: 			#E4EBF1; /* pale blue */ 				/* rgb(228,235,241)
		Blue-Gray:			#EDF1F4; /* blue-gray */				/* rgb(237,241,244)
		Slate Blue:			#1F497D; /* slate blue */				/* rgb(31,73,125)

	GRAY
		Medium Gray: 		#E1E2E4; /* medium gray */ 			/* rgb(225,226,228)
		2% Black:			#FAFAFA; /* 2% black */ 			/* rgb(250,250,250)
		3% Black:			#F8F8F8; /* 3% black */				/* rgb(248,248,248)
		10% Black: 			#E5E5E5; /* 10% black */ 			/* rgb(229,229,229)
		20% Black:			#CCCCCC; /* 20% black */ 			/* rgb(204,204,204)
		30% Black:			#B2B2B2; /* 30% black */ 			/* rgb(178,178,178)
		40% Black:			#999999; /* 40% black */ 			/* rgb(153,153,153)
		50% Black:			#808080; /* 50% black */ 			/* rgb(128,128,128)
		60% Black:			#666666; /* 60% black */ 			/* rgb(102,102,102)
		70% Black:			#4C4C4C; /* 70% black */ 			/* rgb(76,76,76)
		80% Black;			#333333; /* 80% black */ 			/* rgb(51,51,51)		
*/



/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								SITE-WIDE DEFAULT STYLES
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

body {
	/* Note that this layout relies on the assumption that the default font-size for all browsers is 16px. This layout uses ems wherever possible. */
	font-family: arial, sans-serif;
	font-size: .9em;
	margin: 0;
	padding: 0;
	overflow-y: scroll; /* this adds the vertical scroll bar even if it is inactive; for IE, use "overflow-y: visible;" */
	background: #0066CC /* bright blue */ url(../images/bg_01.png) no-repeat center top;
	}

div {
	/* redundancy to ensure that all divs have zero default margins, paddings, and borders */
	border: 0;
	margin: 0;
	padding: 0;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#allsite_container {
	width: 529px; /* set the total width for the content */
	margin: 0 auto; /* horizontally centers the content column */
	margin-bottom: 2em; /* gives a bit of clearance between the bottom of the content and the browser window */
	padding: 0;
	border-top: 0;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

.clearfix:after {
	/* when applied to an element, this style forces that element to expand around internal floats */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
.clearfix {display: inline-block}
	/* Hides from IE-mac \*/
	*html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

.hidden {
	/* this class is applied to all content that is hidden in the standard view but will appear if CSS is disabled */
	display: none;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

a {
	outline: none; /* prevents dotted outline from appearing around links when clicked */ 
	}

a:visited {
	text-decoration: none; 
	color: #0066CC; /* bright blue */
	font-weight: bold;
	}

a:link {
	text-decoration: none;
	font-weight: bold;
	color: #0066CC; /* bright blue */
	}

a:hover {
	color: #DAA520; /* goldenrod */ 
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

a.button_01 {
	border: 1px solid #DAA520; /* goldenrod */
	background: #FBF6CC; /* light yellow 90%  */
	padding: 4px;	
	font-weight: bold;	
	}

input[type="submit"] + a.button_01 {
	margin-left: .5em;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

strong {
	/* use the <strong> tag to apply a Bold effect */
	font-weight: bold;
	}

em {
	/* use the <em> tag to apply italics */
	font-style: italic;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

input[type="submit"] {
	border: 1px solid #DAA520; /* goldenrod */
	background: #FBF6CC; /* light yellow 90%  */
	padding: 3px;
	font-weight: bold;
	color: #0066CC; /* bright blue */
	font-family: arial, sans-serif;
	font-size: 1em;
	}

input[type="submit"]:hover {
	cursor: pointer;
	color: #DAA520; /* goldenrod */
	}

input[type="reset"] {
	border: 1px solid #DAA520; /* goldenrod */
	background: #FBF6CC; /* light yellow 90%  */
	padding: 3px;
	font-weight: bold;
	color: #0066CC; /* bright blue */
	font-family: arial, sans-serif;
	font-size: 1em;
	}

input[type="reset"]:hover {
	cursor: pointer;
	color: #DAA520; /* goldenrod */
	}

input[type="submit"] + input[type="reset"] {
	margin-left: .5em;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#browser_warning {
	display: none;
	width: 200px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 100;
	border: 4px solid maroon;
	background: #FFFFE0; /* light yellow */
	padding: 1em;
	font-weight: bold;
	line-height: 1.25em;
	}

#browser_warning h3 {
	color: maroon;
	font-size: 1.25em;
	}

#browser_warning span.underline {
	text-decoration: underline;
	}

#browser_warning span.disclaimer_description {
	display: none;
	}



/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								#bd (primary body content)
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#bd {
	/* style the window that contains the primary page content (sandwiched between the header and footer) */
	width: 529px;
	margin: 0 auto;
	margin-top: 25px;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #side_column {
	float: left;
	width: 175px;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #logo {
	width: 173px;
	height: 173px;
	background: #FFFFE0 /* light yellow */ url(../images/bg_02.png);
	border: 1px solid #DAA520; /* goldenrod */
	}

#bd #logo a {
	border: 0;
	}

#bd #logo a img {
	border: 0;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #nav {
	width: 173px;
	margin-top: 2px;
	background: #FFFFE0 /* light yellow */ url(../images/bg_03.png);
	border: 1px solid #DAA520; /* goldenrod */
	}

#bd #nav ul {
	/* style the list of navigation options */
	list-style-type: none;
	margin: 1em;
	padding: 0;
	}

#bd #nav ul li {
	/* style each list item */
	line-height: 1.5em;
	border-top: 1px solid #DAA520; /* goldenrod */
	padding: .25em 0 .25em 0;
	}

#bd #nav ul li:first-child {
	/* special style for the first item in the list */
	border-top: 0;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #main_column {
	margin-left: 177px;
	border: 1px solid #DAA520; /* goldenrod */
	width: 330px;
	background: #FFFFE0; /* light yellow */
	padding: 10px;
	padding-bottom: 2em;
	}

#bd #main_column h1 {
	margin-top: .5em;
	font-size: 2em;
	font-weight: bold;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #main_column p {
	line-height: 1.25em;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #main_column .intro {
	margin: 0;
	padding: .5em 0 .5em 0;
	border-top: 1px dotted #DAA520; /* goldenrod */
	border-bottom: 1px dotted #DAA520; /* goldenrod */
	}

#bd #main_column .intro p:first-child {
	margin: 0;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd .input_fields_v01 span.label_01 {
	font-weight: bold;
	font-variant: small-caps;
	color: #1F497D; /* slate blue */
	display: inline-block;
	width: 5em;
	margin: 0 0 .5em 0;
	}

#bd .input_fields_v01 span.label_01 + p {
	font-weight: bold;
	display: inline-block;
	margin: 0 0 .5em 0;
	}

#bd .input_fields_v01 span.label_01 + p a {
	color: black;
	}

#bd .input_fields_v01 span.label_01 + p a:hover {
	text-decoration: underline;
	}

#bd .input_fields_v01 div.top {
	padding-top: .75em;
	border-top: 1px dotted #DAA520; /* goldenrod */
	}

#bd .input_fields_v01 div.bottom {
	padding-bottom: .5em;
	border-bottom: 1px dotted #DAA520; /* goldenrod */
	}

#bd .input_fields_v01 form {
	margin-top: 1em;
	margin-bottom: 2em;
	}

#bd .input_fields_v01 form div {
	width: 94%;
	}

#bd .input_fields_v01 form p {
	margin-bottom: .25em;
	}

#bd .input_fields_v01 form textarea {
	width: 94%;
	padding: .25em;
	font-family: arial, sans-serif;
	margin-bottom: .5em;
	border: 1px solid #DAA520; /* goldenrod */
	background: white;
	}

#bd .input_fields_v01 form input[type="text"] {
	padding: .25em;
	font-family: arial, sans-serif;
	font-size: 1.1em;
	margin-bottom: .5em;
	border: 1px solid #DAA520; /* goldenrod */
	background: white;
	width: 94%;
	}

#bd .input_fields_v01 form input[type="text"] + p {
	margin-top: .5em;
	}

#bd .input_fields_v01 .top p.note_01 {
	margin: 0 0 .25em 0;
	}

#bd .input_fields_v01 .recaptcha {
	background: gray;
	height: 100px;
	margin-bottom: .5em;
	}

#bd .input_fields_v01 .recaptcha p {
	margin-top: .75em;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #main_column .flier {
	margin: 0 auto;
	margin-top: 1em;
	}

#bd #main_column .flier_01 {
	width: 255px;
	height: 330px;
	background: url(../images/flier_01_thumbnail.png) no-repeat center top;
	border: 1px solid #DAA520; /* goldenrod */
	}

#bd #main_column .flier_02 {
	width: 328px;	
	height: 253px;
	background: url(../images/flier_02_thumbnail.png) no-repeat center top;
	border: 1px solid #DAA520; /* goldenrod */
	}

#bd #main_column .flier_03 {
	width: 328px;	
	height: 253px;
	background: url(../images/flier_03_thumbnail.png) no-repeat center top;
	border: 1px solid #DAA520; /* goldenrod */
	}

#bd #main_column .flier a {
	display: block;
	width: 100%;
	height: 100%;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd #main_column .feature {
	margin: 0;
	padding: 1em 0 1em 0;
	border-bottom: 1px dotted #DAA520; /* goldenrod */
	}

#bd #main_column .feature h2 {
	font-size: 1.25em;
	font-weight: bold;
	margin: 0 0 0 74px;
	}

#bd #main_column .feature p {
	margin: 0 5px 0 74px;
	}

#bd #main_column .alt_row {
	background: #FBF6CC; /* light yellow 90% */
	padding-top: 1em;
	}

#bd #main_column .feature p a {
	font-weight: normal;
	}

#bd #main_column .feature h2 a {
	font-weight: bold;
	color: black;
	}

#bd #main_column .feature h2 a:hover {
	text-decoration: underline;
	}

#bd #main_column img {
	float: left;
	border: 0;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#bd .about a.subtle {
	font-weight: normal;
	color: black;
	} 

#bd .about a.subtle:hover {
	text-decoration: underline;
	}


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								HOMEPAGE GRID
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#grid_wrapper {
	width: 529px;
	height: 529px;
	margin: 0 auto;
	margin-top: 25px;
	position: relative;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#grid_wrapper #banner {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: transparent url(../images/banner_03.png) no-repeat center top;
	}

#grid_wrapper #banner a {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	}

#grid_wrapper #nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	text-align: center;
	border-right: 1px solid #DAA520; /* goldenrod */
	border-bottom: 1px solid #DAA520; /* goldenrod */
	border-left: 1px solid #FFFFE0; /* light yellow */
	border-top: 1px solid #FFFFE0; /* light yellow */
	background: #FFFFE0 /* light yellow */ url(../images/bg_04.png) repeat-x bottom;
	padding: 2px;
	}

#grid_wrapper #nav li {
	display: inline-block;
	width: 19%;
	}

#grid_wrapper #nav li a {
	color: #1F497D; /* slate blue */
	}

#grid_wrapper #nav li a:hover {
	color: #DAA520; /* goldenrod */
	}


/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#grid_wrapper .gridbox {
	width: 173px;
	height: 173px;
	margin-right: 2px;
	margin-top: 2px;
	float: left;
	background: #FFFFE0; /* light yellow */
	border: 1px solid #DAA520; /* goldenrod */
	font-variant: small-caps;
	}

#grid_wrapper .top_left {
	margin-top: 0;
	background: #FFFFE0 /* light yellow */ url(../images/bg_02.png);
	}

#grid_wrapper .top_center {
	margin-top: 0;
	background: #FFFFE0 /* light yellow */ url(../images/bg_03.png);
	}
	
#grid_wrapper .top_right {
	margin-top: 0;
	margin-right: 0;
	background: #FFFFE0 /* light yellow */ url(../images/bg_02.png);
	}
	
#grid_wrapper .middle_left {
	background: #FFFFE0 /* light yellow */ url(../images/bg_03.png);
	}
	
#grid_wrapper .middle_center {
	background: #FFFFE0 /* light yellow */ url(../images/bg_02.png);
	}
	
#grid_wrapper .middle_right {
	margin-right: 0;
	background: #FFFFE0 /* light yellow */ url(../images/bg_03.png);
	}
	
#grid_wrapper .bottom_left {
	background: #FFFFE0 /* light yellow */ url(../images/bg_02.png);
	}
	
#grid_wrapper .bottom_center {
	background: #FFFFE0 /* light yellow */ url(../images/bg_03.png);
	}

#grid_wrapper .bottom_right {
	margin-right: 0;
	background: #FFFFE0 /* light yellow */ url(../images/bg_02.png);
	}




/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								SCREENSHOTS
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#wrapper_generic {
	width: 800px;
	background: #FFFFE0 /* light yellow */ url(../images/bg_03.png);
	padding: 20px;
	border: 1px solid #DAA520; /* goldenrod */
	margin: 0 auto;
	margin-top: 25px;
	}

#wrapper_generic .screenshot {
	width: 600px;
	}

#wrapper_generic .side_column {
	float: right;
	width: 156px;
	border: 1px solid #DAA520; /* goldenrod */
	padding: 10px;
	background: #FFFFE0; /* light yellow */
	}

#wrapper_generic .side_column h1 {
	margin: 0;
	font-size: 1.25em;
	}

#wrapper_generic .side_column .navhead {
	border-top: 1px dotted #DAA520; /* goldenrod */
	border-bottom: 1px dotted #DAA520; /* goldenrod */
	padding: 5px 0 5px 0;
	}

#wrapper_generic .side_column .numbered {
	padding-left: 23px;
	}

#wrapper_generic .side_column p.one {
	background: transparent url(../images/num_01.png) no-repeat top left;
	}

#wrapper_generic .side_column p.two {
	background: transparent url(../images/num_02.png) no-repeat top left;
	}
	
#wrapper_generic .side_column p.three {
	background: transparent url(../images/num_03.png) no-repeat top left;
	}
	
#wrapper_generic .side_column p.four {
	background: transparent url(../images/num_04.png) no-repeat top left;
	}
	
#wrapper_generic .side_column p.five {
	background: transparent url(../images/num_05.png) no-repeat top left;
	}

#wrapper_generic .side_column p.six {
	background: transparent url(../images/num_06.png) no-repeat top left;
	}

#wrapper_generic .side_column p.seven {
	background: transparent url(../images/num_07.png) no-repeat top left;
	}

#wrapper_generic .side_column p.eight {
	background: transparent url(../images/num_08.png) no-repeat top left;
	}

#wrapper_generic .side_column p.nine {
	background: transparent url(../images/num_09.png) no-repeat top left;
	}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								FOOTER
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#footer {
	/* contains the footer content */
	margin-top: 1em;
	text-align: right;
	color: black;
	}

#footer p {
	margin: 0 0 .25em 0;
	}

#footer a {
	color: black;
	font-weight: normal;
	}

#footer a:hover {
	text-decoration: underline;
	}

/* ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------- */

#footer_home p {
	text-align: center;
	margin-top: 2em;
	}

#footer_home a {
	font-weight: normal;
	color: black;
	}

#footer_home a:hover {
	text-decoration: underline;
	}


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------
-------								KILLERS
-------
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* +++++ 
		These styles can be added to any item to override a single particular effect from a parent element.
		Use a killer to denote the fact that a style is being overriden.
	+++++ */

.kill_background {
	background: transparent;
	}