/* ********************************************************************* */
/* *********************** Clear all defaults ************************** */
/* ********************************************************************* */
html, body, ol, ul, li, dl, dt, dd, img {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

/* ********************************************************************* */
/* ********************* Jello Min-width Magic ************************* */
/* ********************************************************************* */

body {
  padding: 0 340px; /* the critical side padding that sets the natural min-width! */
  background: #FB5200; /* this BG tiles the area outside the columns */
  color: #000000;
  font-family: tahoma, arial, sans-serif;
  font-size: 100.01%; /* this body font-size fixes an IE bug and maintains x-browser uniformity */
  text-align: center; /* centers the #sizer element in IE5.x/win */
}

#sizer {
  margin: 0 auto; /* centers #sizer in standard browsers */
  /*background: #FFFFFF;*/
  padding: 0;
  width: 70%; /* this value controls liquidity; 0% = full rigid, 100% = full liquid */
  text-align: left; /* resets the default text alignment for the page */
  max-width: 290px;
  }

#expander { /* Any % height here causes IE to lose the neg right margin */
	margin: 0 -335px; /* neg side margin values should be < or = to side body padding */
	min-width: 670px; /* This prevents Safari from losing the negative margins in narrow windows */
	position: relative; /* makes #expander visible outside #sizer in IEwin */
    /*background: #FFFFFF;*/
}

/*\*/
* html #expander {height: 0;}
/* #expander must have "height: 0" in IEwin bug fixing */

/* The above is a modified Holly hack for #expander, with zero substituted for the
usual 1% height value. Any % value on this element causes a horrendous IE bug! */


#wrapper1 {
  position: relative;
  background: #FFFFFF; /* this BG tiles the left column */
  font-size: 1em;      /* set global font-size here */
  border: 1px solid #000000;
  margin-top: 20px;
} /* this positioning may be needed for IEwin if page is to contain positioned elements */

#wrapper2 {
  position: relative; /* extra insurance against bugs in IEwin */
  background: #FFFFFF; /* this BG tiles the right column */
}

/* ********************************************************************* */
/* ******************* End Jello Min-width Magic *********************** */
/* ********************************************************************* */


/* ********************************************************************* */
/* *********************** Main Page Structure ************************* */
/* ********************************************************************* */

/* To modify the side column widths and the col divider widths, the values that are
marked "critical" and also refer to the desired mod MUST be changed as a group. */

/* ** outer contains float-wrap and the right column        ** */
/* ** Since float-wrap contains the left and center columns ** */
/* ** outer is truly the outermost structural element      ** */
div.outer {
  background: #FFFFFF; /* this BG tiles the center column */
  border-left:2px dotted #FF641A; /*** Critical left divider dimension value ***/
  border-right:2px solid #0067E6; /*** Critical right divider dimension value ***/
  margin-left: 160px;    /*** Critical left col width value ***/
  margin-right: 200px;    /*** Critical right col width value ***/
/************** Special Fixes *************/
  word-wrap: break-word;
/* Prevents long urls from breaking layout in IE, must
be hidden in a conditional comment for CSS to validate */
}

/* ** float-wrap contains the left and center columns ** */
div.float-wrap {
  float: left;
  width: 100%;
}

div.center {
  float: right;
  width: 100%;
}

div.left {
  float: left;
  position: relative; /* Needed for IE/win */
  width: 160px;    /*** Critical left col width value ***/
  margin-left: -162px;    /*** Critical left col width value ***/ /*** Critical left divider dimension value ***/
}

div.right {
  float: right;
  position: relative; /* Needed for IE/win */
  width: 200px;    /*** Critical right col width value ***/
  margin-right: -202px;    /*** Critical right col width value ***/ /*** Critical right divider dimension value ***/
  margin-left: 2px;   /*** Critical right divider dimension value ***/
}

/* ********************************************************************* */
/* ******************* End Main Page Structure ************************* */
/* ********************************************************************* */

/* ********************************************************************* */
/* ******************** Header and Footer elements ********************* */
/* ********************************************************************* */

.header {
  width: 100%;
  color: #000000;
  background: #FFFFFF;
}

.heading_text {
padding: 50px 0 46px 0;
margin-right: 200px;
text-align: center;
}

.heading_text img {
display: block;
margin: 0 auto;
}

.logopic {
float: right;
margin-right: -3px;
margin-right: 0px;
}

div.menu {position:relative;
			margin:0px 0px 0px 0px;
			padding:6px 0px;
			background-color:#028CDF;
			border:1px solid #01456D;
            border-width: 1px 0;
			text-align:center}

div.menu a, div.footer a, div.footer p{
            margin:0px 15px;
			padding:0px;
			font-size:0.9em;
			text-decoration:none;
			color:#FFFFFF;
            }
div.menu a:hover, div.footer a:hover{margin:0px 15px;
			padding:0px;
			font-size:0.9em;
			text-decoration:underline;
			color:#FFFFFF;}

div.footer {
  width: 99%;
  clear: both;
  position: relative;
			margin:0px 0px 0px -2px;
			padding:5px;
			text-align:center;
			border-top:2px solid #55AAFF;
			background-color:#0061C1;
			color:#FFFFFF;
}

/* ********************************************************************* */
/* **************** End Header and Footer elements ********************* */
/* ********************************************************************* */

/* ********************************************************************* */
/* ************************* Generic Rules ***************************** */
/* ********************************************************************* */

a{margin:0px;
			padding:0px;
			font-size:inherit;
			text-align:left;
			text-decoration:none;
			color:#0067E6}

a:hover{margin:0px;
			padding:0px;
			font-size:inherit;
			text-decoration:underline;
			color:inherit;}

.textpadder {padding: 8px;}

small {font-size:87%;}

.hide {display: none;}

 .floatright
{
float: right;
margin: 30px 40px 10px 10px;
border: 1px solid #666;
}
.floatright-noline
{
float: right;
margin: 30px 40px 10px 10px;
}/* *************** Left Column ************************ */
		div.outer  div.float-wrap div.left ul li{margin:1px 5px;
			padding:3px 10px;
			background-color:#FFFFFF;
			border-bottom:1px dotted #0067E6;
			list-style-type:none;
			font-size:0.7em;
			font-weight:bold;
			color:#0067E6;}

		div.outer  div.float-wrap div.left p{
            margin:5px;
			padding:0px;
			font-size:.8em;
            color:#00356A;}

		div.outer  div.float-wrap div.left h1{
            margin:15px 5px 5px 3px;
			padding:0px;
			font-size:.8em;
			font-weight:bold;
			border-bottom:2px solid #FF641A;}

        /* h2 is identical to h1 - allowing alternate h1 styling on   */
        /* site-map page, where xxx-section-menu.shmtl will also be included */

		div.outer  div.float-wrap div.left h2{
            margin:15px 5px 5px 3px;
			padding:0px;
			font-size:.8em;
			font-weight:bold;
			border-bottom:2px solid #FF641A;}

/* ************* End Left Column ************************ */

/* *************** Center Column ************************ */

		div.outer  div.float-wrap  div.center blockquote p.center{
			text-align:center;
			color:#00356A;}

		div.outer  div.float-wrap  div.center p{
            margin:5px 5px 5px 5px;
			padding:5px;
			font-size:.8em;
			color:#00356A;}

		div.outer  div.float-wrap  div.center em{
            font-style: italic;
			color:#00356A;}

		div.outer  div.float-wrap  div.center h5 {
            margin:5px;
			padding:5px;
			background-color:#0069BF;
			text-align:center;
			font-size:.9em;
			color:#FFFFFF;}

		div.outer  div.float-wrap  div.center h1{
            margin:5px 150px 5px 5px;
			padding:5px 5px 2px 10px;
			font-size:.8em;
			font-weight:bold;
			border-bottom:2px solid #FF641A;}

		div.outer  div.float-wrap  div.center h2{
            margin:0px 150px 5px 5px;
			padding:5px 5px 2px 10px;
			font-size:.8em;
			font-weight:bold;
			color: #003A75;}

		div.outer  div.float-wrap  div.center h3{
            margin:0px 150px 5px 5px;
			padding:5px 5px 2px 10px;
			font-size:.8em;
			font-weight:bold;
			color: #ED6700;}

        div.outer  div.float-wrap  div.center h4{
             margin:0px 150px 5px 5px;
			padding:5px 5px 2px 10px;
			font-size:.8em;
			font-weight:bold;
			color: #ED6700;}

		div.outer  div.float-wrap  div.center ul{margin: 2px 6px 6px 6px;
			padding:0px;}

		div.outer  div.float-wrap  div.center ul li{margin:2px 35px;
			font-size:.8em;
			color:#00356A;
			list-style-type:square;}

		div.outer  div.float-wrap  div.center blockquote {margin:2px 15px 10px 15px;
			padding:10px;
			background-color:#DBE5F0;
			font-size:.9em;
			color:#00254A;}

		div.outer  div.float-wrap  div.center img {max-width: 100%;}

        div.outer  div.float-wrap  div.center hr {
          color: #FF641A;
        }


/* *************** End Center Column ************************ */

/* ****************** Right Column ************************** */
		div.outer div.right h1{
			margin:0px 0px 0px 0px;
			padding:4px 10px;
			background-color:#FF641A;
			font-size:.9em;
			color:#FFFFFF}

		div.outer div.right ul{
            margin:0px 0px 0px 2px;
			padding:0px;}

		div.outer div.right ul li{
            margin:1px 0px;
			padding:3px 10px;
			background-color:#CCE3FF;
			border-left:5px solid #0067E6;
			list-style-type:none;
			font-size:0.7em;
			font-weight:bold;
			color:#0067E6;}
/* ****************** Right Column ************************** */

/* ********************************************************************* */
/* ********************** End Generic Rules **************************** */
/* ********************************************************************* */

/* ********************************************************************* */
/* ******************* Specialty Content Styles ************************ */
/* ********************************************************************* */

/* ********** pure CSS tooltip ***************** */

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}
/* ********** next-previous navigation ***************** */

div.outer  div.float-wrap  div.center ul.navigation
{
list-style-type: none;
margin: 0;
padding: .5em 0;
}

div.outer  div.float-wrap  div.center ul.navigation li
{
list-style-type:none;
}

div.outer  div.float-wrap  div.center ul.navigation li a
{
display: block;
width: 5em;
color: #FFF;
background-color: #028CDF;
padding: .2em 0;
text-align: center;
text-decoration: none;
}

div.outer  div.float-wrap  div.center ul.navigation li a:hover
{
color: #FFF;
display: block;
width: 5em;
color: #FFF;
background-color: #028CDF;
padding: .2em 0;
text-align: center;
}

div.outer  div.float-wrap  div.center ul.navigation li.left { float: left; }
div.outer  div.float-wrap  div.center ul.navigation li.right { float: right; }

/* ********** end next-previous navigation ***************** */

/* ********** gallery-specific styles ***************** */

/* gallery container */
.gallery {
	text-align: center;    /* centers inline paragraphs */
	margin: 1em 5%;
	padding: .5em;
}


.gallery a:hover,
.gallery a:focus,
.gallery a:active {
	display: table-cell;   /* default, for gecko & Opera6- */
	margin: .5em;
	padding: 5px;
	background: #CCE3FF;
	text-decoration: none;
    color: #0067E6;
}

.gallery a {
	text-decoration: none;
    color:#00356A;
}

.gallery a img {
	border-width: 1px;
	vertical-align: middle;
}

/* outer container for each image/caption pair */
.gallery p {
	display: inline;
}

/* For the <a> container, the best default display value is inline-table, but browser support isn't very good. Opera versions 6 and earlier totally mangle anything except display:table-cell, so that is set by default and the preferred display values are at the end of this stylesheet, within hacks that hide them from those Opera versions. No other browsers tested seemed to have any trouble with setting the different display values within a single rule. */

/* inner container for each image/caption pair */
.gallery a {
	display: table-cell;   /* default, for gecko & Opera6- */
	margin: .5em;
	padding: 5px;
	vertical-align: top;   /* aligns the img/caption container */
	width: 12em;            /* adjusts with text size */
	min-width: 175px;      /* not always honored, but that's OK */
	border: 1px solid #ccc;
    color:#0067E6;
}


/* image container, sets height so image can be vertically centered and the caption starts in the same vertical position regardless of image height, except WinIE does not apply line-height to images. oh well, most other browsers do... */
.gallery span {
	display: block;        /* fill container width, force a line break */
	height: 220px;         /* a bit larger than highest img */
	line-height: 220px;    /* same value as height */
	text-align: center;
/*	border: 1px dashed #f00; /* uncomment to show */
}

/* caption container, sets height (for 2 lines) so each outlined image/caption pair is the same height (except in WinIE) */
.gallery i {
	display: block;
	height: 3.75em;         /* makes each box a consistent height */
	padding: 5px 5px 0 5px;
	text-align: center;
	font-style: normal;
	line-height: 120%;     /* standard spacing */
    color:#0067E6;
/*	border: 1px dashed #00f; /* uncomment to show */
}

/* Owen hack, hides from WinIE, Opera versions 6- & some KHTML */
head:first-child+body .gallery a {
	display: table-cell;   /* gecko & Opera6- */
	display: inline-table; /* Safari & some other browsers */
	display: inline-block; /* WinIE & some other browsers */
}

/* star-html hack to show <a> rule(s) just to IE (Win and Mac) */
* html .gallery a {
	display: table-cell;   /* gecko & Opera6- */
	display: inline-table; /* Safari & some other browsers */
	display: inline-block; /* WinIE & some other browsers */
}
/* image is not clickable in WinIE with display:block :( \*/
* html .gallery span {
	display: inline;
}
* html .gallery a:hover i {
	cursor: hand; /* otherwise cursor doesn't change over block <i> */
} /* end WinIE hacks */

/* end hacks */

/* ************ end gallery-specific styles ********** */


/* *************** RSS Block ************************ */
.rss {
	line-height: 2.3em;
	border: 1px solid #FF6600;
	margin-left: auto;
	margin-right: auto;
	width: 60%;
	text-align: center;
	padding: 4px;
}
/* *************** End RSS Block ************************ */

/* ********************* Liturgy ************************ */
div.outer  div.float-wrap  div.center div.liturgy {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  background: #DBE5F0;
  color: #00254A;
  font-size:.8em;
}

div.outer  div.float-wrap  div.center div.liturgy h2 {
  text-align: center;
  font-size: .9em;
  color: #00254A;
}

div.outer  div.float-wrap  div.center div.liturgy div.row {
  clear: both;
  padding-top: .3em;
}

div.outer  div.float-wrap  div.center div.liturgy div.spacer {
  clear: both;
  padding-top: .5em;
}
div.outer  div.float-wrap  div.center div.liturgy div.row span.speaker {
  float: left;
  width: 18%;
  text-align: right;
  }

div.outer  div.float-wrap  div.center div.liturgy div.row span.spoken {
  float: left;
  width: 82%;
  text-align: left;
  }
/* *************** End Liturgy ************************ */

/* ***************** Play Dialog ************************** */
div.outer  div.float-wrap  div.center  dl.dialog-display
{
width: 100%;
margin-top: 2em;
margin-bottom: 2em;
padding: 0;
color:#00356A;
font-size:.8em;
}

div.outer  div.float-wrap  div.center dl.dialog-display dt
{
width: 25%;
float: left;
margin: 0 0 0 0;
padding: .5em;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */

div.outer  div.float-wrap  div.center dl.dialog-display dd
{
float: left;
width: 65%;
margin: 0 0 0 0;
padding: .5em;
}
/* *************** End Play Dialog ************************ */
/* ***************** Book List ************************** */
div.outer  div.float-wrap  div.center  dl.book-list
{
width: 100%;
margin-top: 2em;
margin-bottom: 2em;
padding: 0;
color:#00356A;
font-size:.8em;
}

div.outer  div.float-wrap  div.center dl.book-list dt
{
width: 80px;
height: 121px;
border-top: 1px solid #999;
float: left;
margin: 0 0 0 0;
padding: .5em;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */

div.outer  div.float-wrap  div.center dl.book-list dd
{
width: 63%;
border-top: 1px solid #999;
height: 121px;
float: none;
margin: 0 0 0 81;
padding: .5em;
}
/* *************** End Book List ************************ */
/* *********** Block Quote as Call-out Box  ************* */

  blockquote.float-left {/* floats in content div */
  width: 80%; /* "em size" is element dependent */
  padding: 0em;
  margin-left: auto;
  margin-right: auto;
  background: #b0c4de;
  border-right: 2px dotted #4169e1;
  border-left: 2px dotted #4169e1;
  border-bottom: 2px dotted #4169e1;
  }

  blockquote span.cap-g {/* floats in blockquote */
  float: left;
  font-size: 1.7em;
  background: #a1d694;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #0067E6;
  border-right-color: #0067E6;
  border-bottom-color: #0067E6;
  border-left-color: #0067E6;
  }

  blockquote > p {/* control mozilla paragraph margin */
  margin: 0 0 0em 0;
  }

  blockquote.float-left strong {
  color: inherit;
  background-color: inherit;
  }


  p.after-blockquote {
  padding: 0.4em;
  border-top: 3px dotted #696969;
  background: #e6e6fa;
  }


  span.cap-o,
  span.cap-p, span.cap-y {/* type class grouping */
  float: left; /* grouped shared styles */
  font-size: 1.7em;
  border: 3px outset #2e8b57;
  }

  span.cap-g {/* type class */
  float: left; /* grouped shared styles */
  width: 100%;
  font-size: 1.7em;
  border-width: 3px;
  border-style: outset;
  border-color: #efefef #2e8b57 #2e8b57 #efefef;
  background: #90ee90;
  text-align:center;
  }

  span.cap-o {/* type class */
  background: #ffa500;
  }

  span.cap-p {/* type class */
  background: #dda0dd;
  }

  span.cap-y {/* type class */
  background: #ff0;/* hex color shorthand */
  }

  em[title]:hover {/* attribute selector pseudo-class */
  background: #ffc;/* Opera - Moz supported */
  cursor: help;/* matches all em elements */
  }/* that specify the "title" attribute */

.btn {
   display: block;
   position: relative;
   background: grey;
   padding: 0px;
   margin-right: auto;
   margin-left: auto;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
}

.btn.blue { display: block; position: relative; background: #0067E6; padding: 5px;
   margin-right: auto;
   margin-left: auto;
   width: 70%;
   padding: 0px;
   text-align: center;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
}

/*
.btn * { font-style: normal; background-image: url(../image-files/btn2.png); background-repeat: no-repeat; display: block; position: relative; }
.btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; }
.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

* html .btn span,
* html .div.btn i { float: left; width: auto; background-image: none; cursor: pointer; left: 0; }
* html .btn span { padding: 0 0 0 10px; }
*/

.btn span,
.div.btn i { float: left; width: auto; background-image: none; cursor: pointer; left: 0; }
.btn span { padding: 0 0 0 0px; }

/*
.btn.blue { background: #0067E6; }
.btn.green { background: #9d4; }
.btn.pink { background: #e1a; }
.btn:hover { background-color: #0067E6; }
.btn:active { background-color: #444; }
.btn[class] {  background-image: url(../image-files/shade.png); background-position: bottom; }

* html .btn { border: 3px double #aaa; }
* html .btn.blue { border-color: #0067E6; }
* html .btn.green { border-color: #9d4; }
* html .btn.pink { border-color: #e1a; }
* html .btn:hover { border-color: #0067E6; background-image: none; cursor: pointer; left: 0; padding: 5px; }
* html .btn.blue blockquote.float-left > .btn.blue.strong {
  background-color: #0067E6;
  color:#FFFFFF;
  }
*/

.btn { border: 3px double #aaa; }
.btn.blue { border-color: #0067E6; }
.btn.green { border-color: #9d4; }
.btn.pink { border-color: #e1a; }
.btn:hover { border-color: #0067E6; background-image: none; cursor: pointer; left: 0; padding: 0px; }
.btn.blue blockquote.float-left > .btn.blue.strong {
  background-color: #0067E6;
  color:#FFFFFF;
  }
/* *********** End Block Quote as Call-out Box  ************* */

/* *************** Subscription Form ************************ */
form.info-box {
        	margin-left: auto;
        	margin-right: auto;
        	width: 80%;
        	text-align: left;
        	padding: 4px;
            }

form.info-box div {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 0.6em;
}

form.info-box div label {
  float: left;
  width: 100%;
  font: bold Arial, Helvetica, sans-serif;
}

form.info-box div input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
  font: bold  Arial, Helvetica, sans-serif;
}

form.info-box div input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 100%;
}

/* *************** End Subscription Form ************************ */

/* ********************************************************************* */
/* *************** End Specialty Content Styles ************************ */
/* ********************************************************************* */


/* ********************************************************************* */
/* ************************* Utility Rules ***************************** */
/* ********************************************************************* */

img {max-width: 100%;}
/* prevents oversize images from breaking layout in browsers that support max-width */

.brclear { /* Use a break with this class to clear float containers */
  clear:both;
  height:0;
  margin:0;
  font-size: 1px;
  line-height: 0px;
}

/* *********** Hacks to Support Various Browsers, Mostly IE *********** */

/* \*/
* html #wrapper1,
* html #wrapper2,
* html .outer a,
* html .left a,
* html .right a,
* html .left li,
* html .right li,
* html .left,
* html .right,
* html .outer,
* html h2,
* html .sidenav li a
{height: 1%;}
/* Holly hack */


/*** Variance fixes for IEwin ***/

/*\*/
* html .outer p {margin-right: -6px;}
/* */

/*\*/ /*/
.right a:hover {position: relative;}
/* this fixes an IEmac hover bug in the left column, hidden from other browsers */

/* *********** End Hacks to Support Various Browsers, Mostly IE ************** */

/* ********************************************************************* */
/* ********************* End Utility Rules ***************************** */
/* ********************************************************************* */