/*This stylesheet is a combined version of the Skidoo presentation
*produced by Ruthsarian Layouts. *It will include those styles (base) that 
determine layout, the horizontal and vertical navigation styles, the colors,
borders, fonts, gutters, print, a v4.css for older browsers. A special two
column style will be applied to this main sheet so that site sub-pages will
look different */

/*******************************************************************************
*  the main layout
* ------------------------------------------------------------------------------
*  this base set of stylesheet rules forms the layout, and layout only.
*******************************************************************************/

#pageWrapper {
	margin: 0;
	width: auto;
	min-width: 500px;
	}

#outerColumnContainer {
	z-index: 1;
	border-color: #fff;
	/* set default color to white. set the real color inside colors.css */
	border-style: solid;
	border-width: 0 15em;
	/* sets the width of the borders used to create the left and right columns' background color. */
	}

#innerColumnContainer {
	z-index: 2;
	width: 100%;
	}

* html #innerColumnContainer {
	position: relative;
	/* fix a render bug in IE under certain conditions */
	}

#contentColumn {
	margin: 0 -1px;
	/* without this, boxes stop floating next to each other */
	width: 100%;
	}

#leftColumn, #rightColumn, #contentColumn {
	float: left;
	position: relative;
	/* IE has a display/render bug with non-floated block elements inside floated block elements. setting position:relative on the floating element seems to resolve this. */
	z-index: 10;
	overflow: visible;
	/* fix for IE italics bug */
	}

#rightColumn {
	float: right;
	/* floating this right allows for the right column block to appear before the content column in the flow of the document. doing this allows for any easy 3 column layout in NN4. There is certainly a lot, in terms of layout 'theory' about how the flow of the document should be. I won't get into it here. */
	width: 15em;
	margin: 0 -15em 0 1px;
	/* same as in the #leftColumn selector up above. */
	}

#leftColumn {
	width: 15em;
	margin: 0 1px 0 -15em;
	/* like in the #contentColumn selector, without the 1px margin on the opposite side of the box, boxes stop floating next to each other */
	}

#footer {
	position: relative;
	}

#masthead h1 {
	display: inline;
	/* personal preference to keep the header inline. you could just as easily change padding and margins to 0. */
	}

.clear {
	clear: both;
	padding-bottom: 1px;
	/* for Gecko-based browsers */
	margin-bottom: -1px;
	/* for Gecko-based browsers */
	}

.hide, #oldBrowserNotice, .ieSixCharDupBug {
	/* hide elements that CSS-targeted browsers shouldn't show */
	display: none !important;
	}

#contentColumn {
	border-width: 0;
	/* reset value from that in the version 4 stylesheet. this isn't in borders.css
	because were you to create a print.css and not include borders.css, then the v4 border would still remain when you print. */
	}

/*
	The below CSS is a fix for IE/Win to help it better handle text that is wider than 
	the available area. It does not handle this as expected, and forces the
	floated elements to start stacking. This is a very undesirable thing.
	Until a CSS-compliant way is devised, this CSS block will have to do.*/

* html #pageWrapper {
	word-wrap: break-word;
	}

/*start of horizontal nav styles*/

.hnav
{
	border-bottom: 1px #ffffff solid;
	text-align: center;
}
.hnav, .hnav ul li a
{
	/* need to mirror veritcal padding on .hnav and child anchor elements
	 * because the anchors are _not_ block elements. since they are not
	 * block elements web browsers will not expand .hnav to contain them
	 * even with the extra padding. by applying the same padding to both
	 * the parent .hnav _looks_ like its containing the child anchor
	 * elements. 
	 */
	padding-top: 3px;
	padding-bottom: 4px;
}
.hnav ul, .hnav ul li
{
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.hnav ul li a
{
	margin: 0 -1px 0 0;
	padding-left: 10px;
	padding-right: 10px;	/* short-hand padding attribute would overwrite
				   top/bottom padding set in a previous rule */
	border-left: 1px #69655A solid;
	border-right: 1px #69655A solid;
	white-space: nowrap;
}
.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
	text-decoration: none;
}
.hnav ul li span.divider
{
	display: none;
}
* html .hnav ul li, * html .hnav ul li a
{
	width: 1%; /* IE/Mac needs this */
	display: inline-block;	/* IE/Mac needs this */
	/* \*/
		width: auto;
		display: inline; 
		position: relative;
	/* reset above hack */
}
* html .hnav, * html .hnav ul a
{
	/* \*/ height: 0.01%; /* has Layout hack to fix render bugs in IE/Win. 
				 IE/Mac will ignore this rule. */
}
* html .HNAV
{
	padding: 0;	/* IE5/Win will resize #hnav to fit the heights of its
			   inline children that have vertical padding. So this
			   incorrect case selector hack will be applied only by
			   IE 5.x/Win */
}

/*start of vertical nav styles*/

.vnav ul, .vnav ul li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: block;
}
.vnav ul
{
	border: solid 1px #000;
	border-bottom-width: 0;
	 border-color: #69655A;
}
.vnav ul li
{
	border-bottom: solid 1px #000;
}
.vnav ul li a
{
	display: block;
	text-decoration: none;
	padding: 2px 10px;
}
* html .vnav ul li a/* hide from IE5.0/Win & IE5/Mac */
{
	height: 1%;
}
* html .vnav ul
{
	position: relative;	/* IE needs this to fix a rendering problem */
}
.vnav h3
{
	/* perhaps this belongs partly in gutters.css and partly in 
	   fonts.css. However, the heading size for vnav elements is
	   controlled here because it is a specific vnav visual element
	   rather than something that's going to be applied to the whole
	   layout. So that if you were to remove vnav.css from your
	   layout, you wouldn't have any extra, unused CSS in the rest
	   of your stylesheets. */

	margin-bottom: 0;
	padding-bottom: 0;
	font-size: 126%;
}


/*start of  color styles. defines background and foreground colors of elements within the layout.*/

body
{
	background-color: #ffffff;
	color: #505050;
}
#outerColumnContainer
{
	border-left-color: #CBCED4;	/* left hand column background color */
	border-right-color: #8A8D94;	/* right hand column background color */
}
#masthead
{
	background-color: #8A8D94;
	color: #505050;
}
#footer
{
	background-color: #8A8D94;
	color: #F6F7F8;
}
#outerColumnContainer, #contentcolumn	/* selector case hack to reset version 4
					   stylesheet setting */
{
	background-color: #F6F7F8;		/* this sets the background color on the center column */
	color: #000;
}
#leftColumn, #rightColumn, #contentColumn
{
	color: #000;
}
.vnav ul li a
{
	color: #000000;
	background-color: #989DAA;
}
#rightColumn .vnav ul li a:hover, .vnav ul li a:hover
{
	background-color: #898E99;
	color: #E5E7EA;
}
#rightColumn .vnav ul li a
{
	color: #000000;
	background-color: #CBCED4;
}
.hnav, .hnav ul li a
{
	background-color: #CBCED4;
	color: #000000;
}
.hnav ul li a:hover
{
	background-color: #898E99;
	color: #E5E7EA;
}
#pageWrapper, #innerColumnContainer, #masthead, #footer, .hnav
{
	border-color: #05402E;
}

h1.sitetitle {
	font-variant: small-caps;
	float: left;}

/*start of gutters styles . handles the whitespace between and within elements; such as margins and  padding.*/

body
{
	margin: 0;
	padding: 2em;		/* remove this padding if you want the layout to stretch from edge to edge of the viewport. */
}
p, h1, h2, h3, h4, h5, h6
{
	margin: 1em 0;		/* specifically define this for Opera's sake, and also for better consistency across all platforms  */
}
.inside
{
	padding: 0 1.5em;	/* this padding is applied to every major box within the layout for a uniform gutter between borders. NOTE_: a small glitch in IE seems to appear if this class has vertical padding applied to it. so in cases where you want to add  vert padding, use the parent element. margin values here don't work because .inside has a key role in border generation */
}
#leftColumn, #centerColumn, #rightColumn, #masthead
{
	padding-top: 0.5em;
	padding-bottom: 0.5em;	/* this is the vert padding talked about in the previous selector. */
}
#masthead, #footer
{
	padding: 1em;
}
.vnav
{
	margin: 1em 0;
}
html>body #footer
{
	padding-bottom: 1.01em;	/* this is to fix a bug in mozilla that results in a 1px line of white below the footer when the document gets very long. extremely long documents may generate the bug again. if you experience that, increasing this value may help. i think this is related to moz's off-by-one troubles as the bug does not occur in any other browser */
}



/*start of border styles. this defines any and all borders that are rendered on the layout.  this includes the left and right-hand borders of the #outerColumnContainer element which are used as the backgrounds for the left and right columns.*/

#pageWrapper
{
	border-style: solid;	/* explicitly defined within each selector in 
				   case you want change border styles (to mix 
				   it up) between elements */
	border-width: 0 1px;	/* puts a border on the left and right sides of
				   the page. #masthead and #footer will handle 
				   the top and bottom borders */
}
#outerColumnContainer
{
	/* the borders used to create/reserve space for the side columns are now defined in base.css because they are an integral part of
	   the layout. */
}
#innerColumnContainer
{
	border-style: solid;
	border-width: 0 1px;	/* puts borders between center and the side 
				   columns. */
	margin: 0 -1px;		/* compensation for the borders because of
				   100% width declaration on this object */
				   border-color: #69655A;
	}
* html #outercolumncontainer
{
	/* IE5.0/Win fix for 1px whitespace between masthead and body. */
	margin-top: -1px;
	border-top: 1px #69655A solid;
}
#masthead
{
	border-style: solid;
	border-width: 1px 0;	/* handles the top of the layout's border and the
				   bottom of the masthead section */
			 border-color: #69655A;	   
}
.hnav
{
	border-style: solid;
	border-width: 0 0 1px 0;
	 border-color: #69655A;
}
#footer
{
	border-style: solid;
	border-width: 1px 0;	/* handles the top of the footer section and 
				   the bottom of the entire layout */
				    border-color: #69655A;
}

/*start of font styles. handles the font type (family), sizes, line-height, alignment, and any other
*  properties relating to fonts - with the exception of color.*/

body
{
	font-family: arial, helvetica, sans-serif;
	font-size: 100.1%;	/* font sizing approach recommended by Dave Silvester on the css-discuss list. "the .1 is important." */
}
#pageWrapper
{
	font-size: 80%;
}
#footer
{
	text-align: center;
}
/* :root is an invalid pseudo class but mozilla knows it */
:root code
{
	font-size: 120%;	/* monospace fonts are typically smaller that 'normal' fonts under Mozilla. */
}

/*
	Time to try and get all the heading elements to the same size 
	regardless of browser. (IE seems to put them a big bigger
	than Mozilla, typically.)
*/
h1
{
	font-size: 210%;
}
h2
{
	font-size: 180%;
}
h3
{
	font-size: 140%;
}
h4
{
	font-size: 126%;
}
h5
{
	font-size: 110%;
}
h6
{
	font-size: 100%;
}

.login {
	text-align: center;}

acronym.explanation {border-bottom: 1px #000000 dashed;
cursor: help;
	}
	
h3.special {
	border-bottom: 1px #000000 dotted;}