/* CSS of the new template methodology	*/
/*
	In general, I think it's better to use class names as selectors instead of
	element IDs, because the ID selector takes priority over the classes.
	Therefore, a style set by an ID can't be overridden without !important.

	Consider margin collapsing (vertically).
	To prevent margin collapsing, add a border or padding.
*/
/******************************************************************************/

/*
Start from a known point for all browsers
See:	http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

For line-heights use unitless numbers.
See:	http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
*/

/*
	First set common properties for common elements.
	We set things to "zero".
	This block of styles is from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*******************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin					: 0;
	padding					: 0;
	border					: 0;
	outline					: 0;
	font-weight				: inherit;
	font-style				: inherit;
	font-size				: 100%;
	font-family				: inherit;
	vertical-align			: baseline;
}
/* remember to define focus styles! */
a:focus							{
	outline					: 0;
}
body							{
	line-height				: 1;
	color					: black;
	background				: white;
	xfont-family				: "Andale Mono", "Monotype.com", "Courier New", Courier, monospace;
	font-family				: "xComic Sans MS", Arial, Helvetica, sans-serif;
}
ol, ul							{
	list-style				: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table							{
	border-collapse			: separate;
	border-spacing			: 0;
}
caption, th, td					{
	text-align				: left;
	font-weight				: normal;
}
blockquote:before, blockquote:after,
q:before, q:after				{
	content					: "";
}
blockquote, q					{
	quotes					: "" "";
}


/*
	Now we set things the way we want them for our site.
*******************************************************************************/
body {
	line-height		: 1.3;
}

/*	Set margins for some block elements	*/
h1, h2, h3, h4, h5, h6,
p, pre, address					{
	margin			: 0.2em 0;
}
pre								{
	font-family		: "Andale Mono", "Monotype.com", "Courier New", Courier, monospace;
}
strong							{
	font-weight		: bold;
}

/*	We crowd header lines a little	*/
h1, h2, h3, h4, h5, h6			{
	line-height		: 1.1;
}

dl, blockquote		{
	margin			: 0.2em 1.0em;
}

ol, ul {
	margin			: 0.2em 1.0em;
	padding			: 0 0 0 1.0em;
}

/*	Set styles for nested lists	*/
ol			{ list-style-type: decimal; }
ol ol		{ list-style-type: lower-alpha; }
ol ol ol	{ list-style-type: lower-roman; }
ul			{ list-style-type: disc; }
ul ul		{ list-style-type: circle; }
ul ul ul	{ list-style-type: square; }

/*	Set basic styles for headings	*/
h1, h2, h3, h4					{
	font-weight		: bold;
}
h5								{
	font-weight		: normal;
}
h6								{
	font-style		: italic;
}
h1	{	font-size	: 1.8em;	}
h2	{	font-size	: 1.6em;	}
h3	{	font-size	: 1.2em;	}
h4, h5, h6			{
	font-size	: 1.0em;
}

/* Miscellaneous form elements: */
form label						{
	cursor			: pointer;
}
fieldset						{
	border			: none;
}
input, select, textarea			{
	font-size		: 100%;
}

em								{
	font-style		: italic;
}



/*
We want to control how the pages print
*******************************************************************************/
@media	print	{
	body							{
		font-size				: 10pt;
	}
}

body							{
	background-color		: #ffffdd;
}

/* For the home page	*/
.siteBannerContainer			{
	xbackground			: #000 url("banner6blurandtext_1444_120.jpg");
	background			: #000 url("banner7blur_1444_120.jpg");
	height				: 120px;
	border				: 1px solid blue;
}
#siteBanner		{
	padding-left		: 180px;
	xfont-size			: 120px;
	xline-height			: 0.2em;
xtext-align			: top;
text-align			: right;
}
#siteBanner img		{
	margin-top			: 10px;
	vertical-align		: top;
	xfont-size			: 120px;
	xline-height		: 0.8em;
xtext-align		: top;
}
.siteInfoContainer		{
	xmargin				: 0em 1em 0em 1em;
	xmargin					: 0px auto 0px auto;
	xbackground-color	: #FFD800;
	background-color	: #FFC751;
	border				: 2px solid #FFC751;
	margin					: 0px auto 0px auto;
	padding					: 0px 10px 0px 10px;
	width					: 95%;
}
#siteName			{
	font-size		: 2.6em;
	font-weight		: bold;
	text-align		: center;
	line-height		: 1.1em;
	margin			: 0;
xposition	: relative;
xbottom	: -10px;
}
#siteSlogan			{
	font-size		: 1.6em;
	font-weight		: bold;
	text-align		: center;
xposition	: relative;
xtop	: -10px;
	xline-height		: 0.2em;
}



/* Use this for element to be read by screen readers, but not visible on screen	*/
*.cls-offScreen					{
	position				: absolute;
	left					: 0px;
	top						: -500px;
	width					: 1px;
	height					: 1px;
	overflow				: hidden;
}
/* This is for a "skip navigation" link that is normally off-screen,
	but will be visible to a keyboard user who TABs to it.	*/
/**** However, it does not work so far ****/
*.cls-onScreenOnFocus	a:active	,
*.cls-onScreenOnFocus	a:focus		{
	/* Becomes visible when user tabs to it.
	:active	pseudo-class necessary for IE
	:focus	pseudo-class necessary for Mozilla */
	position				: static;
	width					: auto;
	height					: auto;
color:yellow;
}



*.cls-sidebar					{
	padding					: 5px 0 0px 5px;
	font-size				: 0.8em;
	width					: 165px;
	float					: left;
	/* Move this link up into the page header area	*/
	margin-top				: -1.6em;
	z-index					: 10;	/* So not hidden under DIV pageHeader above */
	position				: relative;	/* Require for z-index to work */
xtop			: -3em;
	xbackground			: transparent;
	xmargin-left		: 0px;
xposition	: absolute;
xtop:0;
xleft:0;
}

/* This is the container of the sidebar menu we want to hide and show	*/
#id_sidebar					{
	margin-top				: 1.0em;	/* move down into page area a little	*/
}


/* IE doesn't understand ">", so this will handle the changes needed
	to correct it box model
*/
* > *.cls-sidebar				{
	width					: 177px;
	clear					: left;
xmargin-left			: -10px;
}


*.cls-sidebar *				{
	margin					: 0;
	padding					: 0;
}

*.cls-sidebar ul				{
	list-style-type			: none;
	font-family				: verdana, arial, Helvetica, sans-serif;
}

*.cls-sidebar ul ul				{
	margin-left				: 0px;
}

*.cls-sidebar ul a				{
	width					: 165px;
	padding					: 5px 5px;
	padding-left			: 10px;		/* for background arrow	*/
	color					: #000;
	background-color		: #FFE3AD;
	display					: block;
	text-decoration			: none;
	border-top				: 1px solid #ffffff;
	border-left				: 1px solid #ffffff;
	border-bottom			: 1px solid #333333;
	border-right			: 1px solid #333333;
	font-weight				: bold;
	xbackground-image		: url( "../images/gradient_3.png" );
	xbackground-repeat		: y;
	xbackground-position		: bottom left;
	xbackground-position	: 0 0;
	xbackground-position		: top right;
	margin-left				: -1px;		/* Match the left border	*/
}

*.cls-sidebar *.cls-navSelected			,
*.cls-sidebar ul a:hover			{
	background-color		: #FFFACC;
	border-top				: 1px solid #333333;
	xborder-left				: 1px solid #333333;
	border-bottom			: 1px solid #ffffff;
	border-right			: 1px solid #ffffff;
	xbackground-image		: url( "../images/gradient_2.png" );
	xbackground-repeat		: no-repeat;
	xbackground-position		: 0 0;
	color					: blue;
	border-left				: 5px solid blue;
	margin-left				: -5px;		/* Match the left border	*/
}

*.cls-sidebar *.cls-navSelected		{
	color					: red;
	background-color		: #ffffdd;
	background-image		: url( "../_images/menuarrow3.png" );
	background-repeat		: no-repeat;
	background-position		: -0px bottom;
	xbackground-attachment	: fixed;	/* For Mozilla positioning	 KILLS image in IE.*/
	font-style				: italic;
	border-right			: 1px solid #ffffdd;
	border-left				: 5px solid #FF4500;	/*OrangeRed*/
	border-bottom			: 1px solid #FF4500;	/*OrangeRed*/
}

*.cls-sidebar *.cls-navSelectedChild	{
	border-left				: 3px solid #FFA500;	/*orange*/
	margin-left				: -3px;		/* Match the left border	*/
}

*.cls-sidebar ul ul a			{
	xmargin					: 0 0 0 20px;
	width					: 150px;
	padding					: 3px 5px;
	padding-left			: 25px;
	background-color		: #FFF2BC;
	font-weight				: normal;
}
*.cls-sidebar ul a.cls-navSelected			{
	xwidth					: 145px;
	xpadding					: 3px 5px;
	xpadding-left			: 25px;
}

*.cls-sidebar ul ul ul a			{
	xmargin					: 0 0 0 40px;
	width					: 130px;
	padding					: 2px 5px;
	padding-left			: 45px;
	background-color		: #FFFFCC;
}

*.cls-sidebar ul ul ul ul a			{
	font-size				: 0.8em;
	xmargin					: 0 0 0 50px;
	width					: 120px;
	padding					: 2px 5px;
	padding-left			: 55px;
	background-color		: #FFFFee;
}

ul.cls-menuShowHide	a				{
	xcolor					: white;
	background-color		: transparent;
	text-align				: center;
	font-size				: 80%;
	padding-top				: 0;
	padding-bottom			: 0;
	width					: 10em;
xmargin-bottom	: 0.0em;
	/* Move this link up into the page header area	*/
	xposition				: relative;
	xtop						: -2.0em;
	xclear	: left;
}
/*
*.cls-menuShowHide				{
	background-color		: transparent;
	text-align				: center;
	position				: relative;
	top						: -2.0em;
	clear	: left;
}
ul.cls-menuShowHide	a				{
	xcolor					: white;
	text-align				: center;
	font-size				: 80%;
	padding-top				: 0;
	padding-bottom			: 0;
	width					: 10em;
}
*/

/*
Styles for stylized links --
<a class="cls-inlineButton cls-audio" href="the_url"><em>Play</em><span> mp3</span></a>
NOTE: The attributes starting with "_" are seen only by IE.
*******************************************************************************/
*.cls-inlineButton				{
	x_width					: 12em;
	font					: bold 65%/1 Verdana, sans-serif;
	margin					: 0 0.2em;
	padding					: 0.1em 0;
	_padding				: 0;
	border					: 1px solid black;
	white-space				: nowrap;
	text-decoration			: none;
	vertical-align			: middle;
	background				: #ccc;
	color					: black;
}
*.cls-inlineButton em			{
	_width					: 1em;
	_cursor					: hand;
	font-style				: normal;
	margin					: 0;
	padding					: 0.1em 0.5em;
	background				: white;
	color					: black;
}
*.cls-inlineButton span			{
	_width					: 1em;
	_cursor					: hand;
	margin					: 0;
	padding					: 0.1em 0.5em 0.1em 0.3em;
}
*.cls-inlineButton:hover		{
	background				: #666;
	color					: white;
}
*.cls-inlineButton:hover em 	{
	background				: black;
	color					: white;
}

*.cls-audio 	{ background: #FFA500;	/*orange*/	color: black	}
*.cls-audio em 	{ background: white;	color: #A0522D	/*sienna*/	}




/*
Styles for major page components
*******************************************************************************/
#id_content	{
	/* This container will be below the sidebar container so the the
		show/hide button is above the content	*/
	margin-top			: 1.4em;
}

*.cls-contentWithoutSidebar		{
	margin-left				: 1.0em;
}
*.cls-contentWithSidebar		{
	margin-left				: 210px;
xborder					: 1px solid #ffffdd;	/* border required for IE to use correct box model */
xborder-left			: 1px solid gray;

xfloat	: right;

/*
margin-right: 200px;
border-right: 1px solid gray;
*/
}

/* This div displays the page H1 element in the header while the real H1
	element is in the body container.  Then when we skip navigation, we have
	the H1 with the H2s in the body.
*/
#h1display						{
	font-size				: 1.8em;
	font-weight				: bold;
	font-family				: Papyrus;
}

*.cls-banner					{
	background				: blue url( "banner2.jpeg" ) repeat-x center;
	border					: 1px solid blue;
	height					: 64px;
}
*.cls-iconInline				{
	border					: 0px;
	vertical-align			: top;
}
*.cls-pageFooter				{
	margin					: 2px 10px 0px 10px;
	font-size				: 0.7em;
	color					: #666;
}


*.xcls-pageHeader				{
	color					: white;
	text-align				: center;
	background-color		: #22a;
	border					: 2px solid #22a;
	margin					: 0px auto 0px auto;
	padding					: 0px 10px 0.2em 10px;
	width					: 95%;
}

/* These two elements line up, so they have the same margin, padding, & width.
	IE uses all these attributes in its box model.
*/
*.cls-pageHeader				,
*.cls-bodyContainer				{
	border					: 2px solid #22a;
	margin					: 0px auto 0px auto;
	padding					: 0px 10px 0px 10px;
	width					: 95%;
	/* This width is required
	to make IE work when you use the skip navigation
	link into the main body.
	Using keyboard navigation (the TAB key) without
	setting the width, then the next TAB key goes back
	to navigation instead of staying in the body container.
	*/
}

*.cls-pageHeader				{
	color					: white;
	text-align				: center;
	background-color		: #22a;
	xpadding-bottom			: 0.2em;
}

/* Instead see cls-pageBodyCustom in /web/_smarty/templates/standard_page.tpl	*/
*.cls-bodyContainerBorder		{
	background				: url( "bodyborder.jpg" ) repeat-y 0 0;
}

*.cls-bodyContainer		p		{
	margin					: 0.6em 0.4em;
}


*.cls-bodyContainer		h2		,
*.cls-bodyContainer		h3		,
*.cls-bodyContainer		h4		,
*.cls-bodyContainer		h5		,
*.cls-bodyContainer		h6		{
	clear					: left;
xfont-size				: 1.6em;
	padding					: 0em 0.4em 0em 0.4em;
	background-color		: #F0F8FF;	/*AliceBlue*/
	border-left				: 1px solid #22a;
	border-top				: 2px solid #22a;
	margin-top				: 1.0em;
}


*.cls-bodyContainer		h3		{
	xfont-size				: 1.2em;
	xfont-weight			: bold;
}

*.cls-bodyContainer		h4		{
	xfont-size				: 1.0em;
	xfont-weight			: bold;
}

*.cls-bodyContainer		h5		{
	xfont-size				: 1.0em;
	xfont-weight			: normal;
	xfont-style				: italic;
}
*.cls-bodyContainer		h6		{
	xfont-size				: 1.0em;
	xfont-weight			: normal;
}

#noscriptWarning				{
	font-size				: 0.8em;
	background-color		: #ff8c00;	/*DarkOrange*/
	border					: 2px solid #22a;
	margin					: 0em -0.2em 0em -0.2em;
	padding					: 0em 2.0em 0em 2.0em;
	text-align				: center;
}

*.cls-noscriptEmailWarning		{
	color					: #ff8c00;	/*DarkOrange*/
	font-style				: italic;
	font-size				: 0.8em;
}





/*
Styles for the general navigation bar
*******************************************************************************/
/* I think we can get rid of these nav containers	*/
*.cls-navGeneralContainer		{
	xmargin				: 0px 10px 0px 10px;
	xwidth				: 90%;
	xborder				: 1px solid #a00;
}

*.cls-navOnpageContainer		{
	xpadding					: 0em 0em 0em 0em;
}

*.cls-navOnpage2Container		{
	xfloat					: right;	/* Makes the element move to the right and "drop down" into the following block	*/
	xpadding					: 5px 0px 0px 0px;	/* This value moves the content down a few pixels past the border of the following block element.	*/
	xborder				: 2px solid black;
}


/*
Simple navigation bars:
	Unordered lists <UL>
	General:	At the top and bottom of pages.
	On-Page:	A variant for on-page links at each H2
*/
*.cls-navGeneral				{
	font-size				: 0.8em;
	text-align				: center;
	margin					: 0px;
	padding					: 0px;
	display					: inline;
	xbackground-color	: #ccc;
	xborder				: 1px solid #ccc;
	xmargin-bottom		: 1em
}
*.cls-navGeneral	li			{
	display					: inline;
	list-style-type			: none;
	margin					: 0;
	padding					: 0;
	line-height				: 2.2em
}
*.cls-navGeneral	li a			{
	color					: black;
	font-weight				: normal;
	text-decoration			: none;
	padding					: 0.2em 0.6em;
	border-color			: black;
	border					: 1px solid ;
	border-left				: none;
	xbackground-color	: #ccc;
}
*.cls-navGeneral
li.cls-firstChild a				{
	border-left				: 1px solid ;
}
*.cls-navGeneral
*.cls-labelItem				{
	padding					: 0.2em 0.2em;
	border					: 1px solid ;
	border-right			: none;
}
*.cls-navGeneral
li a:hover						,
*.cls-navGeneral
li a:focus						{		/* :focus is for Mozilla when TABbing thru the page.	*/
	background-color		: #ff6;
	color					: #039;
	text-decoration			: underline
}


/* Second generation drop-down navigation on page
	from suckerfisk menu
*/
ul.cls-navOnpage				,
ul.cls-navOnpage
ul								{ /* all lists */
	text-align				: right;
	clear					: right;
	float					: right;	/* Makes the element move to the right and "drop down" into the following block	*/
}

ul.cls-navOnpage				{
	padding					: 15px 0px 0px 0px;	/* This value moves the content down a few pixels past the border of the following block element.	*/
	width					: 10em;
}

*.cls-navOnpage
li a							{
	display					: block;
	xwidth					: 10em;
	color					: #A52A2A;	/*Brown*/
	border-color			: #A52A2A;	/*Brown*/
	padding					: 0.1em 0.4em;
	border					: 1px solid ;
	border-top				: none ;
}

*.cls-navOnpage
li ul li.cls-firstChild a				{
	border-top				: 1px solid ;
}
*.cls-navOnpage
li								{ /* all list items */
	float					: right;
	width					: 10em; /* width needed or else Opera goes nuts */
}

*.cls-navOnpage
li ul							{ /* second-level lists */
	position				: absolute;
	background				: #f8f8c0;
	width					: 10em;
	margin-left				: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top				: -3.0em;	/* overlap the parent so that we don't lose hover	*/
}

/* For IE we apply a new class instead of using the :hover psuedo class	*/
*.cls-navOnpage
li.cls-navOnpage	ul			{
	margin-top				: -1.0em;	/* Not needed: overlap the parent so that we don't lose hover	*/
	background				: #FFA500;	/*orange*/
}
*.cls-navOnpage
li.cls-navOnpage	ul			,
*.cls-navOnpage
li:hover			ul			{ /* lists nested under hovered list items */
	xright					: auto;
	margin-left				: 0;
	right					: 4.0em;
}




/*
Turn off the navigation while printing
Maybe we don't want to?
*/
@media	print		{
	*.cls-navGeneral				{
		xdisplay					: none;
	}
}




/*
Sermon styles were moved to a separate file, sermon.css
*/


/*
Styles for General Section Levels
*******************************************************************************/
*.cls-sectionContainer			{
	margin-right			: 0.5em;
	margin-bottom			: 0.5em;
	xmargin-left				: 2.0em;
	margin-left				: 1.0em;
	background-color		: transparent;
	padding-top				: 1px;	/* This is needed to make the alignment the same in all sections.  Maybe it's margin merging.	*/

xbackground-color		: yellow;
xbackground-color		: #ffffdd;
xborder					: 1px solid red;
}

*.cls-sectionContainer
*.cls-sectionBody			{
	padding					: 0.2em;
	padding-left			: 1.2em;	/* Used for headers that have negative left margin. They would clip with overflow: hidden.	*/
	margin-top				: -1.0em;	/* Shift up to overlap the heading above */
	xmargin-left				: 1.0em;
	background-color		: transparent;
}

*.cls-sectionBody			{
	overflow				: hidden;	/* Needed so floated blocks (images) stay completely inside this container	*/
	width					: 95%;		/* Needed for overflow to take effect in IE	(95% works for 800x600 and up.)	*/
}

*.cls-sectionContainer
h2								,
*.cls-sectionContainer
h3								,
*.cls-sectionContainer
h4								,
*.cls-sectionContainer
h5								,
*.cls-sectionContainer
h6								{
	font-family				: Papyrus,Georgia,Times,cursive;
	margin					: 0.5em 1.0em 0em -1.0em;
	xmargin					: 0.5em 1.0em 0em 0.0em;
	padding-top				: 0.2em;	/* Papyrus font has too little room at the top */
	padding-right			: 4.0em;	/* leave room for "listen" icon	*/
	padding-bottom			: 1.0em;	/* Drop the bottom to go behind the Div below */
	color					: #00008B;	/*darkblue*/
	background-color		: #CCCCFF;
	background				: url( "h0b.jpg" ) no-repeat bottom left;
	border-left				: 1px solid #FF6414;
	border-top				: 1px solid #FF6414;
	clear					: both;		/* Each section heading must clear any float in the previous section	*/
}
*.cls-sectionContainer
h2								{
	clear					: none;
	/* An H2 section heading must NOT clear the on-page shortcut nav float above it	*/
	/* the on-page shortcut nav id in a	*/
}

*.cls-sectionBody
li								{
	margin-top				: 0.4em;
	margin-bottom			: 0.4em;
}










/*
Styles for Section Level 2
*******************************************************************************/
x*.cls-section2Container			{
xmargin-left				: 10px;
	margin-right			: 0.5em;
	margin-bottom			: 0.5em;
	margin-left				: 2.0em;
	background-color		: transparent;

xbackground-color		: yellow;
xbackground-color		: #ffffdd;
xborder					: 1px solid red;
xpadding-top			: 1px;
}

x*.cls-section2Container
h2								{
clear:none;
	background-color		: #FFE3AD;
	xbackground				: url( "../images/gradient_3.png" ) no-repeat left top;
	xbackground				: url( "../images/h0a.jpg" ) no-repeat 0 0;
	background				: url( "h0b.jpg" ) no-repeat bottom left;
xmargin-left				: -20px;
	margin-left				: -1.0em;
	margin-right			: -10px;
	border-left				: 1px solid #FF6414; /*#FFCA68;*/
	border-top				: 1px solid #FF6414; /*#FFCA68;*/
	margin-top				: 4px;
	margin-bottom			: 0px;
	padding-top				: 0.2em;
	padding-bottom			: 0.8em;
}

/*
A top-of-page link for every H2
*/
	/* Shift up to overlap the H3 Title above */
/*
*.cls-topOfPage					{
	font-size				: 0.6em;
	text-align				: right;
	xmargin-top				: 0px;
	xmargin-bottom			: 0px;
	position				: relative;
	top						: -2.0em;
}
*/


x*.cls-section2Container
x*.cls-sectionBody				{
	padding					: 0.2em;
	margin-top				: -1.0em;	/* Shift up to overlap the H2 or H3 Title above */
xmargin-left			: 1.0em;
xbackground-color		: #ffffdd;
	border 				: 1px solid #FFFFDD;	/* Without this border, the padding disappears */
xposition				: relative;
xtop					: -1.0em;	/* Shift up to overlap the H2 or H3 Title above */
}



/*
Styles for Section Level 3
*******************************************************************************/
*.cls-section3Container			{
	margin-right			: 0.5em;
	margin-bottom			: 0.5em;
	margin-left				: 2.0em;
xline-height				: 1.2em;
	background-color		: #FFFFCC;
	border 					: 1px solid #FFFFDD;	/* Without this border, the padding disappears */
xborder-left			: 1px solid #FF8C3C; /*#FFAD84;*/
xborder-top				: 1px solid #FF8C3C; /*#FFAD84;*/
xmargin-top				: 0.8em;
xmargin-top				: 0.0em;
}

*.cls-section3Container
*.cls-sectionBody			{
	padding					: 0em;
	margin-top				: -1.0em;	/* Shift up to overlap the H3 Title above */
margin-left				: 1.0em;
	background-color		: transparent;
	xposition			: relative;
	xtop				: -1.0em;	/* Shift up to overlap the H3 Title above */
}

*.cls-section3Container
h3								{
	margin					: 1.0em 1.0em 0em -1.0em;
xpadding-left			: 1.0em;
	padding-right			: 4.0em;	/* leave room for "listen" icon	*/
	padding-bottom			: 1.0em;	/* Drop the bottom to go behind the Div below */
	color					: #00008B;	/*darkblue*/
	background-color		: #ccccff;
	xclear					: left;
clear:none;
	xfont-size				: 1.2em;
	xfont-weight				: bold;
xline-height				: 1.2em;
	xbackground				: url( "../images/gradient_2.png" ) no-repeat left top;
	xbackground				: url( "../images/h0a.jpg" ) no-repeat center left;
	background				: url( "h0b.jpg" ) no-repeat bottom left;
	border-left				: 1px solid #FF6414;
	border-top				: 1px solid #FF6414;
	xbackground-color	: #fafae0;
	xfont-weight		: bold;
	xcolor				: white;
}

*.cls-sectionContainer
dl								{
	margin-top				: 0em;
	margin-bottom			: 0em;
	xpadding			: 0.5em;
	xbackground-color	: #eee;
	xborder				: 1px solid blue;
}

/* Let the DL use the left margin space of the parent	*/
*.cls-sectionBody
dl								{
	margin-left				: -1.2em;
}

*.cls-sectionContainer
dt								{
	font-size				: 0.6em;
	text-align 				: right;
	padding-right			: 0.4em;
	color					: #aaa;
	xclear					: left;
clear:none;
	float					: left;
	width					: 6em;
	line-height				: 2.4em;
	position				:	relative;
	top						: 0.4em;
	xborder-right		: 3px solid #faa;
	xborder				: 1px solid #faa;
}

*.cls-sectionContainer
dd								{
	margin-left				: 4.0em;
	margin-right			: 1.0em;
	padding-left			: 1.0em;
	background-color		: #ffffdd;
	xborder				: 1px solid #faa;
}

*.cls-sectionContainer
dd.cls-service3FirstProperty		{
	border-left				: 1px solid #FF8C3C;
	border-top				: 1px solid #FF8C3C;
}


*.cls-service3Title				,
*.cls-service3DateTime			,
*.cls-service3Description		,
*.cls-service3Presenter			,
*.cls-service3Note				{
	background-color		: #ffffee;
	padding-top				: 0.2em;
	padding-bottom			: 0.2em;
	margin-left				: 6em;
	margin-bottom			: 0em;
	xborder				:1px solid red;
}

.cls-service3Title	a:active	{
	color					: #00008B;	/*darkblue*/
}
.cls-service3Title	a:hover		{
	color					: red;
}
.cls-service3Title	a:visited	{
	color					: green;
}
.cls-service3Title	a:link		{
	color					: #00008B;	/*darkblue*/
}


*.cls-service3Presenter			{
	xcolor					: red;
	font-weight				: normal;
}

*.cls-service3Description		{
	padding-bottom			: 0.8em;
}

*.cls-service3Note				{
	color					: #00008B;	/*darkblue*/
	font-style				: italic;
}

*.cls-service3FirstProperty		{
	padding-top				: 1.0em;	/* Add enough to overlap the H3 Title above */
	xmargin-top			: -0.6em;
}

/* NOTE: The attributes starting with "_" are seen only by IE.	*/
*.cls-service3ListenLink		{
	float					: right;	/* Makes the element move to the right and "drop down" into the following block	*/
	margin-top				: -3.0em;	/* This value moves the content up into the preceding block element.	*/
	_margin-top				: -2.6em;
	padding					: 0.3em 0 0.3em 0;	/* This element need some padding so we do'nt lose borders in IE	*/
	padding-right			: 1.0em;
	xposition			: relative;
	xtop				: -3.0em;	/* This value moves the content up into the preceding block element.	*/
	xtext-align			: right;
}




.cls-groupContainer				{
	margin-top				: 0.8em;
	margin-bottom			: 1.6em;
xline-height				: 1.2em;
}

.cls-groupName			,
.cls-groupDateTime		,
.cls-groupLocation		,
.cls-groupContactPerson	,
.cls-groupContactInfo	,
.cls-groupDescription	,
.cls-groupNote		{
	padding-top			: 0.2em;
	padding-bottom		: 0.2em;
	margin-left			: 6em;
	margin-bottom		: 0em;
	background-color	: #ffffee;
	xborder:1px solid green;
}

.cls-groupName			{
	margin-left			: 1.0em;
	padding-left		: 1.0em;
	color				: #00008B;	/*darkblue*/
	xbackground-color	: #fafae0;
	xfont-weight			: bold;
	background			: #ccc;
	xcolor		: white;
	font-weight	: normal;
}

.cls-groupName	h3		{
	clear				: left;
	font-weight			: normal;
}

.cls-groupContactPerson		{
	xcolor		: red;
}

.cls-groupLocation		{
	padding-bottom		: 0.8em;
}

.cls-groupNote		{
	color				: #00008B;	/*darkblue*/
	font-style			: italic;
}


*.cls-groupLabel						{
	font-size			: 0.6em;
	color				: #aaa;
	float				: left;
	width				: 8em;
	line-height			: 2em;
	border:1px solid blue;
}

*.cls-groupContainer	dl		{
	margin-top			: 0em;
	xpadding			: 0.5em;
	xbackground-color	: #eee;
}

*.cls-groupContainer 	dt		{
	font-size			: 0.6em;
	text-align 			: right;
	padding-right		: 0.4em;
	color				: #aaa;
	float				: left;
	width				: 6em;
	line-height			: 2.4em;
	xborder-right		: 3px solid #aaa;
}

*.cls-groupContainer	dd		{
	margin-left			: 4.0em;
	padding-left		: 1.0em;
	background-color	: #ffffee;
}


.cls-generalContainer		,
.cls-staffContainer			{
	margin-top			: 0.0em;
	margin-bottom		: 0.2em;
xline-height		: 1.2em;
xborder				: 1px solid red;
}

*.cls-generalContainer	dl		,
*.cls-staffContainer	dl		{
	xclear				: left;
	xclear				: none;
	margin-top			: 0.0em;
	margin-bottom		: 0.2em;
	margin-right			: 0;
	margin-left			: 0;
	xborder				: 1px solid #aaa;
/* We need a way for floats to clear in the body, without clearing the left menu	*/
/* overflow seems to work for Firefox	*/
	overflow			: hidden;
/* zoom seems to work for IE
The proprietary 'zoom: 1;' acts as a 'hasLayout' trigger in IE5.5+.
If there's already a 'hasLayout' trigger in place - like 'width' or
'height', then 'zoom: 1;' won't have any additional effect. In such
cases 'zoom: 1;' should not be used.
Note that 'zoom: (any values other than 1 or 100%);' will make IE/win
zoom that container, somewhat like Opera does but Microsoft has taken
an entirely different approach. Thus, be careful with the value :-)
See http://archivist.incutio.com/viewlist/css-discuss/78045
See http://www.communitymx.com/content/article.cfm?cid=6BC9D
	*/
	zoom				: 100%;
}

*.cls-generalContainer	dt		,
*.cls-staffContainer	dt		{
font-size	: 70%;
line-height	: 1.3;
margin-left	: 2em;
margin	: 0.4em;
position : static;
	xclear				: left;
	xfloat				: left;
	padding				: 0.2em 0.4em;
	xwidth				: 20em;
	width				: 25%;
	background			: #fff2bc;
	color				: #00008B;	/*darkblue*/
	xcolor		: white;
	xfont-weight	: bold;
}

*.cls-generalContainer	dd		,
*.cls-staffContainer	dd		{
	padding				: 0.2em .0em;
	xmargin-left			: 20em;
	margin-right			: 0;
	xbackground-color	: #ffffee;
	background-color	: transparent;
}



.cls-directionsContainer			{
	font-family			: Verdana, Arial, Helvetica;
	margin-top			: 0.0em;
	margin-bottom		: 0.2em;
	margin-left			: 2.0em;
	margin-right		: 4.0em;
}

*.cls-directionsContainer	dl		{
	xmargin-top			: 0.0em;
	xmargin-bottom		: 0.2em;
	xborder				: 1px solid #aaa;
}

*.cls-directionsContainer	dt		{
	xmargin-top			: 0.4em;
	margin-top			: 0.0em;		/* shift down from top of dd	*/
	padding				: 0.2em 0.4em;
	float				: left;
	width				: 12em;
	font-size			: 0.8em;
	font-weight			: bold;
	line-height			: 1.2;
	color				: black;
	background-color	: #ffffbb;
	border				: 1px solid #aaa;
	margin-right		: -2em;			/* Needed for IE7 so the following dd will underlap thid dt	*/
}

*.cls-directionsContainer	dd		{
	padding				: 0.4em 2.0em;
	margin-bottom		: 0.4em;
	margin-left			: 11em;
	background-color	: #ffffdd;
	border				: 1px solid #aaa;
	font-size			: 0.8em;
	min-height			: 2.0em;
}



/* Default table */
table.cls-data					{
  background-color		: #FFF;
  width					: 100%;
  border-collapse		: collapse;
}

table.cls-data	th 				{
  background-color		: #ddd;
  border-bottom			: 3px solid black;
  padding				: 0.2em;
}

table.cls-data	td 				{
  background-color		: #FFF;
  border				: 1px solid #aaa;
  padding				: 0.2em;
}




/* Add an image to every link to an external URL	*/
a.cls-external			{
	padding-right		: 13px;
	background			: url( "external.png" ) no-repeat right center;
}



/******************************************************************************/
.cls-serviceTitle		,
.cls-serviceDate		,
.cls-servicePresenter	,
.cls-serviceNote		{
	margin-top			: 0.2em;
	margin-bottom		: 0.2em;
	font-weight			: bold;
	text-align			: center;
}

.cls-serviceTitle		{
	color				: #00008B;	/*darkblue*/
}

.cls-serviceNote		{
	color				: #00008B;	/*darkblue*/
	font-style			: italic;
}

.cls-serviceBody		{
	margin-top			: 0.8em;
	margin-bottom		: 1.6em;
	text-align			: center;
}


/******************************************************************************/
legend					,
*.cls-quip				,
*.cls-quipMinor			{
	font-family			: Papyrus,Georgia,Times,cursive;
	font-style			: italic;
	font-size			: 1.6em;
	line-height			: 1.2em;
}

*.cls-quipMinor			,
p.cls-quipMinor			{
	font-size			: 1.2em;
	font-weight			: bold;
	line-height			: 1.2em;
}

fieldset				{
	border				: 2px solid blue;
	width				: 80%;
	margin				: 1.0em auto 1.0em auto;	/*auto is for centering*/
}
legend					{
	font-size			: 1.2em;
	font-weight			: bold;
	margin				: 0 1.0em;
	padding				: 0 0.5em;
}
li	{
	text-align : left;
}

/* IE6 does not honor the margins for consecutive <fieldset> tags, so enclose them in a <div>	*/
*.cls-fieldset			{
	margin				: 1.0em 0;
}

*.cls-notice
fieldset				{
	border-width		: 4pt;
	text-align			: left;
	padding				: 1.0em 2.0em;
}

*.cls-notice
legend				{
	font-size			: 2.2em;
	margin				: 0 -0.5em;
}

*.cls-notice
*.cls-noticeH2			{
	font-size			: 1.2em;
	font-weight			: bold;
	margin				: 1.0em -0.5em;
}

*.cls-notice
*.cls-noticeH3			{
	font-size			: 1.0em;
	font-weight			: bold;
	margin				: 1.0em -0.0em;
}



*.cls-bodyContainer	*.cls-caption		{
	font-weight			: bold;
	font-variant		: small-caps;
	margin				: 0.6em auto;
	line-height			: 1.1em;
}
*.cls-bodyContainer	*.cls-attribution	{
	color				: gray;
	font-size			: 0.8em;
	line-height			: 0.8em;
	margin				: 0 inherit;	/*??? validate	*/
}

/* The class "cls-testing" is applied to the test page	*/
*.cls-testing		*.cls-quip			{
	color				: blue;
}


*.cls-scriptDialogContainer		{
	color				: black;
}

*.cls-scriptDialogContainer
	.cls-scriptDialogTitle		{
	font-size			: 1.4em;
	font-weight			: bold;
	line-height			: 1.6em;
	text-align			: center;
	margin				: 0 auto;
	color				: blue;
}

.cls-scriptDialogContainer			{
	xfont-family			: Verdana, Arial, Helvetica;
	margin-top			: 0.0em;
	margin-bottom		: 0.2em;
	margin-left			: 2.0em;
	margin-right		: 4.0em;
}

*.cls-scriptDialogContainer	dl		{
	xmargin-top			: 0.0em;
	xmargin-bottom		: 0.2em;
	xborder				: 1px solid #aaa;
}

*.cls-scriptDialogContainer	dt		{
	xmargin-top			: 0.4em;
	margin-top			: 0.4em;		/* shift down from top of dd	*/
	padding				: 0.2em 0.4em;
	float				: left;
	width				: 10.0em;
	font-size			: 0.8em;
	font-weight			: bold;
	line-height			: 1.2;
	color				: black;
	background-color	: #ffffbb;
	border				: 1px solid #aaa;
	margin-right		: -2em;			/* Needed for IE7 so the following dd will underlap this dt	*/
	margin-left			: -1.0em;
}

*.cls-scriptDialogContainer	dd		{
	padding				: 0.0em 2.0em;
	margin-bottom		: 0.4em;
	margin-left			: 7.0em;
	background-color	: #ffffdd;
	border				: 1px solid #aaa;
	xfont-size			: 0.8em;
	font-size			: 1.0em;
	min-height			: 2.0em;
}

*.cls-scriptDialogContainer
hr.cls-separateScript			{
	clear				: both;
	page-break-before	: always;
	background-color	: #7449C0;
	border				: 1px solid black;
	height				: 0.4em;
	margin				: 1.0em auto;
}