/* base.css */

/********************************************************
*  Credit goes to Ruthsarian Layouts at 
*  http://webhost.bridgew.edu/etribou/layouts/skidoo/
*********************************************************/

#pageWrapper
{
	margin: 0;
	width: 65.2em;
}

#outerColumnContainer
{
	z-index: 1;
	width: 41.1em;
	border-color: #fff;	/* set default color to white. set the real
				   color inside colors.css */
	border-style: solid;
	border-width: 0 12em;	/* 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
{
	z-index: 3;
	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. */
	margin: 0 -1px;		/* without this, boxes stop floating next to 
				   each other */
	width: 100%;
	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. */
	overflow: visible;	/* fix for IE italics bug */
}

/*
#contentColumn p
{
	min-width: 475px;
}
*/

/* For device pages */
#contentColumn img.icon

{
	float: left;
}

/* For site map page */
#contentColumn table#site td

{
	vertical-align: top;
	padding: 10px;
}

#leftColumn, #rightColumn
{
	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: 12em;
	margin: 0 -12em 0 1px;	/* same as in the #leftColumn selector up 
				   above. */
}
#leftColumn
{
	width: 12em;
	margin: 0 1px 0 -12em;	/* 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 img
{
	float: left;

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




/*******************************************************************************
*  hnav.css : 2005-08-31 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  responsible for the horizontal navigation elements, one of which is usually
*  placed below the masthead but on top of the columns.
*
*  this seems awfully complex for something seemingly so simple, no? the big
*  issue here is we need to make the menu items inline elements. we could make
*  them block elements and float them left or right, but that creates a lot of
*  problems with compatibility and how elements are ordered on-screen versus
*  source. just trust me on this, inline is the way to go here.
*
*  the main reason people would float these elements rather than go inline is
*  because padding and margin values have an effect on surrounding elements.
*  meaning if an element is 20 pixels tall, and has 5 pixels of padding on
*  top and bottom, a browser is going to treat that element as 30 pixels tall 
*  when rendering the page. but for an inline element (versus a block element)
*  the browser treats it as 20 pixels tall. That padding will still be applied
*  and if you've got a background color on this element, you'll see that color
*  extend 5 pixels into the elements immediately above and below this inline
*  element with padding. 
*
*  in short: vertical padding on inline elements can make things look really
*            bad. 

*  so we need to work around it. thus all of the hacks you see in this 
*  stylesheet.
*******************************************************************************/

.hnav
{
	border-bottom: solid 1px #fff;
	text-align: center;
}
.hnav
{
	padding-top: 2px;
	padding-bottom: 0px;
}
.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: solid 0px #000;
	border-right: solid 0px #000;
	white-space: nowrap;
}

.hnav ul li span.divider
{
	display: none;
}

/*******************************************************************************
*  vnav.css : 2004-07-21 : Ruthsarian Layouts
* ------------------------------------------------------------------------------
*  responsible for the vertical navigation elements commonly found in the left
*  and / or right columns.
*******************************************************************************/

.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;
}
.vnav ul li
{
	border-bottom: solid 1px #000;
}
.vnav ul li a
{
	display: block;
	text-decoration: none;
	padding: 1px 9px;
}
* 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: 110%;
}

/* 3D buttons */
.button a 
{

	border-top: 2px #cce3ff solid;
	border-left: 2px #cce3ff solid;
	border-bottom: 2px #31557f solid;
	border-right: 2px #31557f solid;

}

.button a:hover 
{
	border-top: 2px #31557f solid;
	border-left: 2px #31557f solid;
	border-bottom: 2px #cce3ff solid;
	border-right: 2px #cce3ff solid;
}

/*******************************************************************************
*  colors.css : 2004-06-28 : Ruthsarian Layouts
*******************************************************************************/

body
{
	background-color: #cdc8b1;
	color: #fff;
}
#outerColumnContainer
{
 	border-left-color:  #CCE6FF;	
 	border-right-color: #CCE6FF;
}	

#masthead
{
	background-color: #2d21c8;
	color: #fff;
}

#footer
{
	background-color: #2d21c8;
	color: #fff;
}

#footer a
{
	color: #ffffff;
}

#outerColumnContainer, #contentcolumn	/* selector case hack to reset version 4
					   stylesheet setting */
{
	background-color: #fff;		/* this sets the background color on the
					   center column */
	color: #000;
}
#leftColumn, #rightColumn, #contentColumn
{
	color: #000;
}
.vnav ul li a
{
	color: #336;
	background-color: #acd5fd;
}
#rightColumn .vnav ul li a:hover, .vnav ul li a:hover
{
	background-color: #b3cbe2;
	color: #fff;
}
#rightColumn .vnav ul li a
{
	color: #336;
	background-color: #acd5fd;
}


.hnav
{
	background-color: #FFFFCC; 
	color: #336; 
}


#pageWrapper, #innerColumnContainer, #masthead, #footer, .hnav 
{
	border-color: #000;
}

/* CSS image rollovers for icons on devices pages */
#contentColumn img.icon:hover { background-color: yellow;}


/*******************************************************************************
*  gutters : 2004-07-06 : Ruthsarian Layouts
*******************************************************************************/

body
{
	margin: 0;
	padding: 1em;		/* 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: 0.6em 0;	/* specifically define this for Opera's sake,
				   and also for better consistency across 
				   all platforms  */
}
.inside
{
	padding: 0.8em;	/* 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. */
}

#footer, #footer p
{
	padding: 0.5em;
	margin: 0
}

#masthead
{
	padding: 0;
	margin: 0;
}

#masthead h1
{
	margin-top: 0.5em;
	padding-bottom: 0;
}

#masthead img
{
	padding-top: 0.7em;
	padding-right: 0.8em;
	padding-left: 0.8em;
}

.vnav
{
	margin: 1em 0;
}

/*******************************************************************************
*  borders.css : 2004-07-29 : Ruthsarian Layouts
*******************************************************************************/

#pageWrapper
{
	border-style: solid;	/* explicitly defined within eact 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 */
}
* html #outercolumncontainer
{
	/* IE5.0/Win fix for 1px whitespace between masthead and body. */
	margin-top: -1px;
	border-top: solid 1px #000;
}
#masthead
{
	border-style: solid;
	border-width: 1px 0;	/* handles the top of the layout's border and the
				   bottom of the masthead section */
}

.hnav
{
	border-style: solid;
	border-width: 0 0 1px 0;
}

/* suppress borders around image links */
.hnav img, #masthead img, #contentColumn img.icon
{
	border: 0;
}

#footer
{
	border-style: solid;
	border-width: 1px 0;	/* handles the top of the footer section and 
				   the bottom of the entire layout */
}


/*******************************************************************************
*  fonts
*******************************************************************************/

body
{
	font-family: arial, helvetica, sans-serif;
	font-size: 95.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;
}


h1
{
	font-size: 195%;
	letter-spacing: 0.3em;
}
h2
{
	font-size: 150%;
}
h3
{
	font-size: 120%;
}
h4
{
	font-size: 100%;
}
h5
{
	font-size: 100%;
}
h6
{
	font-size: 100%;
}

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