@charset "UTF-8";

/*******************************************************************************
* style.css
*
* Most of this style was borrowed from: Ruthsarian Layouts, 08.09.2007. Skidoo
* documentation found in this style sheet is either from me or from the borrowed template.  Enjoy!
* -----------------------------------------------------------------------------
*  Skidoo is a three-column, float-based layout utilizing negative margins to 
*  provide column placement and cross-browser compatibility. There have been
*  several incarnations of this layout: original skidoo, skidoo too, and now
*  skidoo redux. This is the latest, most compatble and up-to-date version of
*  the skidoo layout available. It is recommended you use this layout and not
*  an older version of skidoo.
*
*  This layout is not for the faint of heart. Beginners will have problems
*  understanding the nuances, but through a little experimentation of different
*  variables, should be able to gain an understanding of what does what. For
*  experienced developers this is best served as a reference tool, explaining
*  what bugs are experienced on what browsing platforms for this and similar
*  layouts. It could be used as a map in working your way through bugs that
*  exist in your own layout. 
*
* ------------------------------------------------------------------------------
*  This stylesheet is released into the public domain.
*******************************************************************************/

/*******************************************************************************
 * BASIC LAYOUT MECHANICS
 *
 * GENERAL NOTES
 *   - yes, that's a lot of DIVs for a three-column layout. there is a reason
 *     it all. first, all the columns must be floated to prevent a 3-pixel text
 *     jog (a bug) that IE/Win 6 and earlier have. I can't use CSS hacks around
 *     this one and need the extra markup. But using all floats can have
 *     positive consequences, especially when using floated elements that need
 *     to be cleared, but without clearing the other columns of the layout.
 *   - NEGATIVE MARGINS is an approach to the three-column CSS layout that seems
 *     to have the most compatibility and potential. the real strength of this
 *     idea is to have the ability to provide different colors (or images) as
 *     the background for each column. traditional three-column layouts can't
 *     do this because the columns are only as tall as needed to fit their
 *     content. in other words they don't run the full height of the layout.
 *     negative margins gives us a means to fake this functionality. borders
 *     (or padding, or margins) applied on #outer-column-container reserve the
 *     space where the left and right columns will live. all three columns are
 *     floated. since the columns are cleared inside #inner-column-container,
 *     #inner-column-container (and #outer-column-container) will be as tall as
 *     the tallest of the three columns. this means the borders will also be 
 *     this tall, giving the visual appearance that all three columns are the
 *     same height. 
 *   - Some browsers, most notably older versions of Gecko (Netscape 7, FF 1.5
 *     & earlier) have a problem with this approach where the two side columns
 *     won't be cleared if they exist entirely outside the space of the parent 
 *     element (#inner-column-container) where we clear the three columns. So
 *     they need to be made to overlap the area of the middle column by at
 *     least 1 pixels. This is why the outer columns have a 1 pixel margin on
 *     their inner edge and the middle column (and source-order-container)
 *     have negative margins (to make room for the 1px margin from the outer
 *     columns). These negative margins should be moved into the HACKS section
 *     in a future update.
 *
 * .page-container
 *   - wraps the entire page. use this to set min/max widths and set any margins
 *     or border that wraps the whole layout.
 * .masthead
 *   - top of webpage. a place to put logos and company specific stuff.
 * .mainnav
 *   - directly below masthead and is used for the main navigation.
 * .breadcrumbs
 *   - directly below the mainnav and is a place to put breadcrumbs.
 * .content-container
 *    - directly below the breadcrumbs and is the container for our 3 column layout.
 *    - It was borrowed from the MSDN (Simple HTML Tables) Template.
 * .content-left
 *    - this is the left column of our 3 column layout.
 *    - use this section to set width and define padding.
 *    - do not add background colors here, place those type of changes in the visual consistencies file.
 * .content-right
 *    - this is the right column of our 3 column layout.
 *    - use this section to set width and define padding.
 *    - do not add background colors here, place those type of changes in the visual consistencies file.
 * .content
 *    - this is the main column of our 3 column layout.
 *    - use this section to set width and define padding.
 *    - do not add background colors here, place those type of changes in the visual consistencies file.
 * .footer
 *   - bottom of your webpage. a place to put copyright and contact information
 *
/*******************************************************************************
 * BASE THEME
 *
 * Setup basic styling for the layout. This will set gutterspace and generate a
 * basic border structure for the layout. Real layout styling belongs in a 
 * separate "theme" stylesheet; leave this stylesheet untouched.
 */
body
{
    /*background-color: #eee; moved to visual const. file
    color: #000; moved to visual file*/ 
    padding: 0; /* padding on the body element when javascript min-width is in use will create problems in IE/Win 6. */
    margin: 14px 0; /* horizontal margins belong on .page-container. vertical margins are not there as well due to small rendering issues in IE/Win 5 when viewport is shorter than webpage */
}
.page-container
{
    background-color: #fff; /* background for the middle column */
    border: solid 1px #000; /* border around the entire layout */
    min-width: 800px; /* limit how narrow the layout will shrink before it stops. */
    margin: 0 14px; /* horizontal margins here instead of on the body because we're setting min-width on this element. if margins set on body users will see an odd skip in the layout's rendering as it's resized below min-width. (JS-based min-width only.) */
    font-size: 80%;		/* 	font attributes set here so that
					   the font sizer javascript bit can
					   operate on the body element and not
					   fubar things */
	font-family: Verdana, Arial, Sans-Serif;
    border-color: #99a;		/* all the borders within the layout */
}
.masthead
{
    padding-top: 1px; /* hack to force the entire masthead to receive the background color */
    border-bottom: solid 1px #000; /* three of the four sides of this block will already have borders courtesy of the .page-container element so we only need to render the bottom. */
    border-color: #99a;		/* all the borders within the layout */
    background: #f6f6f6 	/*url(../images/banner_bg.jpg) repeat-x; masthead background color */
}
.mainnav
{
    padding-top: 1px; /* hack to force the entire mainnav toreceive the background color */
    border-bottom: solid 1px #000; /* three of the four sides of this block will already have borders courtesy of the .page-container element so we only need to render the bottom. */
    border-color: #99a;		/* all the borders within the layout */
    background: #CFE2BB; /*url(../images/top_nav.png) repeat-x; */	/* mainnav background color */
}

.breadcrumb
{
    padding-top: 1px; /* hack to force the entire breadcrumb to receive the background color */
    border-bottom: solid 1px #000; /* three of the four sides of this block will already have borders courtesy of the .page-container element so we only need to render the bottom. */
    border-color: #99a;		/* all the borders within the layout */
    background: #e6e6e6 url(./images/bg-breadcrumb.gif) repeat-x;	/* breadcrumb background color */
}

/* COLUMNS */
.clear-columns
{
	clear: both;
}

/*
.content-container {
	background-color:#F6F6F6;
	padding:0px;
    position:relative;
	}

.content-left {
	position:absolute;
	top:5px;
	left:5px;
	width:190px;

}

.content-right {
	position:absolute;
	top:5px;
	right:0px;
	width:190px;
	}

.content {
	padding:10px 10px 10px 10px;
	margin:0px 190px 0px 190px; --left and right margin should be the same width as the left/right columns
	height:100%;
	border-left:1px dashed #D0D0BF;
	border-right:1px dashed #D0D0BF;
	background-color:#FFFFFF;
	}

*/
.content-container {
	width:100%;
	padding:0px;
	margin:0px 0px 1px 0px;
	/*table-layout:fixed;*/
	}

.content-left {
	background-color:#F6F6F6;
	width:180px;
	padding:10px;
	vertical-align:top;
	border-right:1px dashed #D0D0BF;

	}

.content-right {
	background-color:#F6F6F6;
	width:190px;
	padding:5px;
	vertical-align:top;	
	border-left:1px dashed #D0D0BF;

	}

.content {
	background-color:#FFFFFF;
	padding:10px;
	vertical-align:top;
	}
	
.footer
{
    border-top: solid 1px #000; /* same situation as the masthead but this time we're rendering the top  border. */
    padding-bottom: 1px; /* hack to force the entire footer to receive the background color */
    border-color: #99a;		/* all the borders within the layout */
    background: #ffffff url(./images/bg-breadcrumb.gif) repeat-x;/*footer background color */
	text-align: center;
	font-size: .89em;
}

.inside
{
    margin: 3px; /* margin, instead of padding, used to induce margin collapse if needed by child elements */
}

/*******************************************************************************
 * HACKS
 *
 * Not all browsers are created equal. Many CSS engines behave differently
 * and can create discrepencies in the rendering of your layout across different
 * browsing platforms. These hacks are aimed to resolve those discrepencies
 * and provide a more consistent look to the layout.
 *
 * CSS hacks work by playing to a bug in the CSS engine or parser for a given 
 * browser. This forces the browser to either apply or ignore a rule that other
 * browsers wouldn't. This lets you apply rules to work around bugs in a specific
 * browser that would otherwise break the layout. 
 *
 * It's important that when you use a CSS hack you do so in a way that is as
 * specific in targeting the problem browser as possible. Some hacks might
 * work for two or three different platforms, but you only need to apply it on
 * one platform. You might find that this hack has no adverse effects on those
 * other two platforms right now, but in a later version the hack might create
 * problems. Save yourself the headache and do as much as you can to narrow
 * the target of a CSS hack as much as possible.
 *
 * COMMON HACKS USED HERE
 *
 * The star-html hack (* html) targets Internet Explorer, both Windows and Mac,
 * for versions 6 and earlier. There is no element higher up in the page
 * than the HTML element. IE seems to think otherwise. Rules applied to any
 * selector that begins with "* html" will be ignored by just about every
 * browser except Internet Explorer. So any selector given below that begins
 * with "* html" is targetted at Internet Explorer.
 *
 * The backslash-star comment hack targets IE/Mac. CSS comments end with an 
 * asterisk and forward slash. Anything after that closing comment mark will
 * be interpreted as as CSS rule. However if you prefix that closing comment
 * mark with a backslash, IE/Mac won't recognize that the comment has been
 * closed, but other browsers will. So any rules that come after the hacked
 * closing comment will be applied by any browser except IE/Mac until a 
 * non-hacked closing comment is found. 
 *
 * With the above two hacks outlined, it's possible to target IE on a specific
 * OS platform. This is important as the CSS and rendering engines for Mac and
 * Windows are completely different and have very different requirements in
 * terms of hacks.
 *
 * You may see other empty comments in wierd places, those are variations on
 * another comment hack to help target specific version of IE/Win (separating
 * IE 5 from IE6 typically). 
 *
 * One other you'll see is a height setting of 0.1%. This is to trigger
 * hasLayout (see reference section below). IE (at least pre-version 7) 
 * will automatically expand a box beyond it's set height if its content
 * is too tall. Setting height to 100% also works, but this can lead to
 * problems where an element that should only be a few pixels tall turns
 * out to be as tall as the rest of the page. By setting it to 0.1% you
 * minimize the chance of elements being set taller than they need to be.
 *
 * WHY USE HACKS?
 *
 * For compatibility sake. Specifics on what each hack does, and why its
 * used, is provided with the rule or ruleset in question. However, the 
 * majority of hacks used have to do with an internal property in IE
 * called hasLayout. The first item in the reference section below has
 * all you could ever want to know, and more, about hasLayout.
 *
 * REFERENCE
 *	http://www.satzansatz.de/cssd/onhavinglayout.html
 *	http://www.communis.co.uk/dithered/css_filters/css_only/index.html
 */

* html .page-container
{
    /* \*/
    height: 0.1%; /* IE/Win 5 needs this to prevent rendering issues if a minimum width is applied to this element and the viewport is sized narrower than it's minimum width. however this breaks IE/Mac so a comment hack is used to hide it. */
    position: relative; /* IE/Mac 5.0 seems to need this. without it any child element with position: relative isn't rendered. */
}

* html .masthead, * html .footer, * html .mainnav, * html .breadcrumb, * html #accesstimeanduserinfo
{
    /* hide from IE/Mac \*/
    height: 0.1%; /* this is to fix an IE 5.0 bug. setting this value forces these elements to contain their child elements, meaning margins will no longer collapse. */
    height: /**/ auto; /* reset for IE/Win 5.5 and later by hiding this rule from 5.0 with the empty comment hack. also hidden from IE/Mac for the same reason. */
}
* html .masthead .inside, * html .footer .inside, * html .mainnav .inside, * html .breadcrumb .inside, * html #accesstimeanduserinfo .inside
{
    margin-top: 0;
    margin-bottom: 0; /* since margins no longer collapse due to previous rules we remove vertical margins from the .inside class */
    margin: /* */ 3px; /* reset for IE 5.5 and later */
}
* html .inside
{
    margin: 3px 0.75em; /* i don't yet understand this bug in IE 5.0 which forces the right column down if the side margins are at a very specific value.if your side column widths are set in EMs, 0.75em seems to work fine. */
    margin: /* */ 3px; /* reset for IE 5.5 and later */
}

/****************************************************************************************
FORM AND FIELDSETS
***************************************************************************************/
.page-container form
{
    margin: 0px 0px; /*adding margins here, will push the banner down*/
    padding: 0px 0px 0px 0px;
}

.content-container fieldset
{
    margin: 0px 10px 0px 5px;
    padding: 0px 5px 5px 5px;
        
}

.content-container fieldset fieldset
{
    margin: 0px 0px 5px 0px;
    padding: 0px 5px 5px 5px;
}

.content-container legend
{
    margin-bottom: 0px;
    padding: 0px 5px 5px 5px;
    color: #018c53;
    font-size:14px;
    font-weight: bold;
}

.content-container fieldset fieldset legend
{
    margin-bottom: 0px;
    padding: 0px;
    font-weight: normal;
}

.content-container label
{
    display: inline;
    padding-top: 8px;
}

/********************************************
**  CSS for "Stories under the Broom Tree"
********************************************/

table.story { background-color : #ADCB84; margin: 15px 0px 15px 0px; width:80%;}
table.story th { background-color : #ADCB84; color: #425121; font-size:1em; text-align:center; padding:3px 0px 3px 0px; vertical-align: middle;}
table.story th.smallHead { background-color : #999999; color: #FFFFFF; font-size:.9em;}
table.story tr { background-color : #D2940D;}
table.story tr td { background-color : #FFFFFF; color: #666; font-size:.9em; text-align:center; vertical-align:middle; padding: 5px 5px 5px 5px;}
table.story tr.shade td { background-color: #E7F3DE;} 
table.story a {color: #425510;}
table.story a:hover{color: #7B8E4A;}



/**********************************************************************
MAIN NAVIGATION LINKS

LINK VISTED HOVER ACTIVE selectors must remain in this order to work 
Do not combine them, they must remain seperated to work correctly.

***********************************************************************/

.mainnav a:link
{
    
    text-decoration:none;
    color: #83422a;
    /*background: transparent;    */
}

.mainnav a:visited
{
    text-decoration:none;
    /*background: transparent;*/
    color: #83422a;
}
.mainnav a:hover
{
    text-decoration:none;
    color: #2d7230;
    /*background: #7f7f7f;
    text-decoration: none;*/
}

.mainnav a:active
{
    text-decoration:none;
    /*background: transparent;*/
    color: #83422a;
}



/*******************************************************************************
* LIST STYLES FOR ENTIRE PAGE
*
* Page Contents (middle, right, left) and footer
* -----------------------------------------------------------------------------
* 
* Style was copied from the MSDN (Simple HTML Tables) example. 
*
* MAIN CONTENT (MIDDLE COLUMN)
********************************************************************************/

.content ul.list, .content ul.link-list-vertical
{
    margin: 0px 0px 15px 15px;
    padding: 0px;
}

.content ul.list li
{
    list-style: none;
    padding: 2px 0px 2px 12px;
    margin: 0px;
    background: url(./images/bullet.gif) no-repeat;
    background-position: 0 .6em;
}

.content ul.link-list-vertical li
{
    list-style: none;
    margin: 0px;
    padding: 2px 0px;
}

.content ul.link-list-vertical li a:link
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link.gif) no-repeat;
    background-position: 0 .6em;
}

.content ul.link-list-vertical li a:visited
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link-visited.gif) no-repeat;
    background-position: 0 .6em;
}

.content ul.link-list-vertical li a:hover
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link-hover.gif) no-repeat;
    background-position: 0 .6em;
}

.content ul.link-list-vertical li a:active
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link-active.gif) no-repeat;
    background-position: 0 .6em;
}

/*********************************************************************************
LISTS - IN THE RIGHT OR LEFT COLUMNS
**********************************************************************************/

.content-right ul.list, .content-right ul.link-list-vertical, .content-left ul.list, .content-left ul.link-list-vertical
{
    margin: 0px 0px 15px 0px;
    padding: 0px;
}

.content-right ul.list li, .content-left ul.list li
{
    list-style: none;
    padding: 2px 0px 2px 12px;
    margin: 0px;
    background: url(./images/bullet.gif) no-repeat;
    background-position: 0 .6em;
}

.content-right ul.link-list-vertical li, .content-left ul.link-list-vertical li
{
    list-style: none;
    margin: 0px;
    padding: 2px 0px;
}

.content-right ul.link-list-vertical li a:link, .content-left ul.link-list-vertical li a:link
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link.gif) no-repeat;
    background-position: 0 .6em;
}

.content-right ul.link-list-vertical li a:visited, .content-left ul.link-list-vertical li a:visited
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link-visited.gif) no-repeat;
    background-position: 0 .6em;
}

.content-right ul.link-list-vertical li a:hover, .content-left ul.link-list-vertical li a:hover
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link-hover.gif) no-repeat;
    background-position: 0 .6em;
}

.content-right ul.link-list-vertical li a:active, .content-left ul.link-list-vertical li a:active
{
    padding: 2px 0px 2px 12px;
    background: url(./images/bullet-link-active.gif) no-repeat;
    background-position: 0 .6em;
}


/*********************************************************************************************
LISTS IN THE FOOTER 
**********************************************************************************************/
.footer ul
{
    
    margin-left: 0;
    padding-left: 0;
    display: inline;
}
.footer ul li
{
    margin-left: -5;
    margin-right: 5;
    padding: 5px 15px 5px 20px;
    background: url(./images/bullet.gif) no-repeat;
    background-position: 0px 10px;
    display: inline;
}
.footer ul li.first
{
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    list-style: none;
    display: inline;
    background: none;
}