/************************************************
 * TITLE: Based on Prosimii Screen Stylesheet   * 
 ************************************************/


/* ##### Common Styles ##### */

body {
  font-family: verdana, helvetica, arial, sans-serif;
  font-size: 73%;  /* Enables font size scaling in MSIE */
  margin: 0;
  padding: 0;
}

html > body {
  font-size: 9pt;
}

acronym, .titleTip {
  border-bottom: 1px dotted rgb(61,92,122);
  cursor: help;
  margin: 0;
  padding: 0 0 0.4px 0;
}

a {
  color: rgb(61,92,122);
  background-color: transparent;
  text-decoration: underline;
  margin: 0;
  padding: 0 1px 2px 1px;
}

a:hover {
  color: rgb(117,144,174);
  text-decoration: none;
}

ol {
  margin: 1em 0 1.5em .25em;
  padding: 0;
}

ul {
  list-style-type: square;
  margin: 1em 0 1.5em 0;
  padding: 0;
}

ul ul, ul ol, ol ul {
  margin: 0;
  padding: 0;
}

dl {
  margin: 1em 0 0.5em 0;
  padding: 0;
}

ul li, ol li {
  line-height: 1.5em;
  margin: 1.25ex 0 0 1.5em;
  padding: 0;
}

dt {
  font-weight: bold;
  margin: 0;
  padding: 0 0 1ex 0;
}

dd {
  line-height: 1.75em;
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}

.doNotDisplay {
  display: none !important;
}


.smallCaps {
  font-size: 117%;
  font-variant: small-caps;
}


/* ##### Header ##### */

.superHeader {
  color: rgb(130,128,154);
  background-color: rgb(33,50,66);
  text-align: right;
  margin: 0;
  padding: 1px 10px;	/* padding: 0.5ex 10px; */
}

.superHeader span {
  color: rgb(195,196,210);
  background-color: transparent;
  font-weight: bold;
  text-transform: uppercase;
}

.superHeader a {
  color: rgb(195,196,210);
  background-color: transparent;
  text-decoration: none;
  margin: 0;
  padding: 0 0.25ex 0 0;
}

.superHeader a:hover {
  color: rgb(193,102,90);
  background-color: transparent;
  text-decoration: none;
}

.superHeader form {
	background-color: transparent;
	margin: 0;
	padding: 0;
	display: inline;
}

.superHeader form input {
	margin: 0; 
	padding: 0; 
	background-color: rgb(33,50,66); /*#7272aa;*/
	border:1px solid rgb(155,156,170); /* #aaf;*/ 
	color: #aaf; 
	font-size: .9em;
}
.superHeader form input.text {
	width: 7em;
}

.midHeader {
  color: white;
  background-color: rgb(61,92,122);
  background-image: url("/images/church-stone-shadow-fade-256-text-2.png");  /* Customization */
  background-repeat: no-repeat;
  margin: 0;
  padding: 0 10px;	/* Customization  padding: 0.26ex 10px; */
}

.headerTitle {
  font-size: 300%;
  margin: 0;
  padding: 0;
  display: none;
}

.headerSubTitle {
  font-size: 151%;
  font-weight: normal;
  font-style: italic;
  margin: 0 0 1ex 0;
  padding: 0;
  display: none;
}
.headerLogo {
	display: inline;
	margin: 5px 5px 5px 0;
}
.headerLinks {
  text-align: right;
  margin: 0;
  padding: 0 0 2ex 0;
  position: absolute;
  right: 1.5em;
  top: 3.5em;
}

.headerLinks a {
  color: white;
  background-color: transparent;
  text-decoration: none;
  margin: 0;
  padding: 0;	/* 0 0 0.5ex 0; */
  display: block;
}

.headerLinks a:hover {
  color: rgb(255,204,0);	/* Customization rgb(195,196,210); */
  background-color: transparent;
  text-decoration: underline;
}

.subHeader {
	color: white;
	background-color: rgb(117,144,174);
	background-image: url("/images/blue-gradient-h.png");	/* customization */
	background-repeat: repeat-x;							/* customization */
	background-position: center left;						/* customization */
	margin: 0;
	padding: 0.5ex 10px;
}

.subHeader a, .subHeader .highlight {
  color: white;
  background-color: transparent;
  font-size: 110%;
  font-weight: bold;
  text-decoration: none;
  margin: 0;
  padding: 0 0.25ex 0 0;
}

.subHeader a:hover, .subHeader .highlight {
  color: rgb(255,204,0);
  background-color: transparent;
  text-decoration: none;
}


/* ##### Main Copy ##### */

#main-copy {
  margin: 0;
  padding: 0; /* 0.5em 0; */
  clear: left;
}

#main-copy h1 {
  color: rgb(117,144,174);
  background-color: transparent;
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-size: 200%;
  margin: 0;
  padding: 0;
}

#main-copy h2 {
  color: rgb(61,92,122);
  background-color: transparent;
  font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
  font-weight: normal;
  font-size: 151%;
  margin: 0;
  padding: 1ex 0 0 0;
}

#main-copy p {
  line-height: 1.75em;
  margin: 1em 0 1.5em 0;
  padding: 0;
}

.more {
  text-align: right;
  margin: 0;
  padding: 0.5em 0;
}

.more a {
  color: rgb(61,92,122);
  background-color: transparent;
  font-size: 92%;
  text-decoration: underline;
  margin: 0;
  padding: 0.25ex 0.75ex;
}

.more a:hover {
  color: rgb(117,144,174);
  text-decoration: none;
}

.rowOfBoxes {
  clear: both;
}

.quarter, .oneThird, .half, .twoThirds, .fullWidth, .threeQuarters .autoWidth { /* Customization */
  margin: 1em 0;
  float: left;
  border-left: 1px solid rgb(204,204,204);
}

.autoWidth {  /* Customization */
  text-align: justify;
  width: auto;
  padding: 0 1.9%;
}

.quarter {
  width: 21%;
  padding: 0 1.9%;
}

.threeQuarters { /* Customization */
  text-align: justify;
  width: 71%;
  padding: 0 1.9%;
}

.oneThird {
  width: 28%;
  padding: 0 1.9%;
}

.half {
  text-align: justify;
  width: 46%;
  padding: 0 1.9%;
}

.twoThirds {
  text-align: justify;
  width: 63%;
  padding: 0 1.9%;
}

.fullWidth {
  text-align: justify;
  width: 96%;
  padding: 0 1.2em;
  border-left: none;
}

.filler {  /* use with an empty <p> element to add padding to the end of a text box */
  border: 1px solid white;
}
 
.noBorderOnLeft {
  border-left: none !important;
}

.dividingBorderAbove {
  border-top: 1px solid rgb(204,204,204);
}

/* =================== Custom CSS =================== */

.imageGroup {
	border: 1px solid #ddd;
	background-color: #f5f5f5;
	padding: .5em;
}

.imageGroup > .caption {
	font-size: 80%;
	display: block;
	text-align: center;
}

.twoThirdsNoRightMargin {
	padding-right: 0;
	margin-right: 0;
	width: 65%;
}

.dividingBorderBelow {
  border-bottom: 1px solid rgb(204,204,204);
}

.dividingBorderRight {
  border-right: 1px solid rgb(204,204,204);
}

.smallCaption {
  background-color: rgb(239,239,239);
  font-size: 87%;
  line-height: 1.00em;
  margin: 0;
  padding: 0;
}

.tightList {
  line-height: 1.20em;
  font-size: 87%;
  margin-top: 10px;
}

.contrast {
	color: #f00;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 90%;
	margin: 0 .5em;
}

.notifyText {
  background-color: rgb(255,255,150);
  color: rgb(0,0,0);
  /*font-size: 87%;*/
  line-height: 1.00em;
  margin: 0;
  border: 1px dashed black; 
  padding: 1em;  
}

.thinBorder {
  border-color: black;
  border-style: solid;
  border-width: 1px;
}

.noBorder {
  border-width: 0px;
}

.floatImageLeft {
  float: left; 
  margin-right: 10px; 
  margin-left: 0px;
  margin-top: 1px;
  margin-bottom: 1px;
}

.floatImageRight {
  float: right; 
  margin-left: 10px; 
  margin-right: 0px;
  margin-top: 1px;
  margin-bottom: 1px;
}

.textBorder, .sermonQuote {
  border: 1px solid rgb(204,204,204);
  padding: 1.0em;
  margin: 1em 0;
  text-align: center;
  font-weight: bold;
  background-color: #fff;
}

.sermonQuote {
	background-image: url('/images/headingBackground.png');
	background-repeat: repeat-x;
	background-position: bottom left;
}

.sermonQuote cite {
	font-weight: normal;
}

#navList li {
  display: inline;
  list-style-type: none;
  padding-right: 10px;
  padding-left: 0px;
  margin-left: 0px;
  text-align: left;
}

.noBullets {
  list-style-type: none;
}

.noteText {
	background-color: #ffd;
  /*background-color: rgb(239,239,239); */
  width: 100%; 
  margin-top: 0; 
  margin-bottom: 0;
  padding: 3px;
  line-height: 1.20em;
  text-align: left;
	font-size: 90%;
	font-weight: bold;
	border: 1px dotted #C0C0C0; 
}

.imageCaption {
  background-color: rgb(239,239,239); 
  margin: 0px; 
  padding: 0px; 
  line-height: 1.20em;
  text-align: center;
  font-size: 87%;
}

.brightHighlightText {
  background-color: rgb(255,255,190); 
  border: 1px dotted #C0C0C0; 
  width: 100%; 
  margin: 0px; 
  padding: 3px; 
  line-height: 1.20em;
}

.liteHighlightText {
  background-color: rgb(255,255,220); 
  width: 100%; 
  margin: 0px; 
  padding: 3px; 
  line-height: 1.20em;
}

.darkHighlightText {
  background-color: rgb(239,239,220); 
  width: 100%; 
  margin: 0px; 
  padding: 3px; 
  line-height: 1.20em;
}
.attentionTextBox {
  padding: .5em; 
  background-color: rgb(255,255,174); 
  border: 1px dotted #C0C0C0; 
  background-image: url('/images/fade-yellow.png'); 
  background-repeat: repeat-x; 
  background-position: left top;
}
.textBox {
  border: 1px solid #C0C0C0; 
  background-color: WHITE;
}

.textBoxText {
  line-height: 1.30em;
  margin: 1em;
  padding: 0;
}

.bookTitle, .periodical, .composition {
  font-style: italic;
}

table {
	margin:1em 0;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	font-size:85%;
}
td, th {
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding:4px 10px;
	vertical-align:top;
}
tr.newSection td, tr.newSection th {
	border-top:1px solid #999;
}
tr.newSection th, th.emphasis, table.autoEmphasis th {
	background: #ffc;
}
th.deemphasis, td.deemphasis {
	background: #eee;
}
td > p:first-child {
	margin-top: 0 !important;
}
td > p {
	line-height: 1.2em !important;
}
/* More elegant alternatives to .noBorderOnLeft & .dividingBorderAbove
 * that don't require the creation of new classes - but which are not
 * supported by MSIE - are the following:
 *
 * .rowOfBoxes > div:first-child {
 *   border-left: none;
 * }
 *
 * .rowOfBoxes + .rowOfBoxes {
 *   border-top: 1px solid rgb(204,204,204);
 * }
 */

blockquote {
	margin-left: 1em;
	margin-right: 0;
	/*padding-top: 0;*/
	padding-left: 1em;
	padding-right: 1em;
	border: 1px solid rgb(240,240,240);
	border-left: 3px solid rgb(204,204,204);
	background-color: rgb(250,250,250);
	background-image: url('/images/quote-bg.png');
	background-repeat: no-repeat;
	background-position: left top;
}
#main-copy blockquote p {
  line-height: 1.75em;
  margin: .5em 0 1em 0;
}

/* ##### Footer ##### */

#footer {
  color: rgb(51,51,102);
  /*background-color: rgb(239,239,239);*/
  border-top: 1px solid #999;
  font-size: 87%;
  text-align: center;
  line-height: 1.25em;
  margin: 2em 0 0 0;
  padding: 1ex 10px;
  clear: both;
  background: #efefef url("/images/footer-bg.png") top repeat-x;
}

#footer a {
  color: rgb(0,68,204);
  background-color: transparent;
  text-decoration: underline;
}

#footer a:hover {
  text-decoration: none;
}
.largeObject {
	overflow: auto;
}
/**************************** TABNAV STYLES **************************/
ul.tabList {
	font: bold 12px verdana, arial, sans-serif;
	letter-spacing:-1px;
	list-style-type: none;
	padding: 0 0 25px 0;
	border-bottom: 1px solid #778;
	margin: 0;
	margin-bottom: 1em;
	background: url("/images/tabnav-bg.png") bottom repeat-x;
}
ul.tabList li {
	float: left;
	height: 22px;
	/*background-color: #dde;*/
	margin: 2px 2px 0 2px;
	border: 1px solid #778;
	
	line-height: 1em;
	padding: 0;
	background: #dde url("/images/tabnav-inactive-bg.png") bottom repeat-x;
}
ul.tabList li.active {
	border-bottom: 1px solid #fff;
	background: #fff;
}
ul.tabList li.active a {
	color: #000;
}
.tabList a {
	float: left;
	display: block;
	color: #000;
	text-decoration: none;
	padding: 4px;
}
.tabList a:hover {
	color: #fff;
}
.tabList li.active a:hover {
	color: #000 !important;
}
/************************** HEADING STYLES **********************/
h3 {
	display: block;
	font-size: 1.17em;
	font-weight: bold;
	margin: 1em 0;
	letter-spacing:-1px;
}
.complexHeading, .simpleHeading, .complexAttentionHeading, .simpleAttentionHeading {
	text-align: center;
	border-top: 1px solid rgb(204,204,204);
	border-bottom: 1px solid rgb(204,204,204);
}
.simpleHeading, .complexHeading {
	background: url("/images/headingBackground.png") bottom left repeat-x;
}
.simpleAttentionHeading, .complexAttentionHeading {
	background-color: rgb(255,255,174);
	background: url("/images/fade-yellow.png") left top repeat-x;
}
.simpleHeading, .simpleAttentionHeading {
 	padding-top: .75em;
	padding-bottom: .75em;
}
.complexHeading h3, .complexAttentionHeading h3 {
	margin-top: 0em;
	padding-top: 0em;
	margin-bottom: 0em;
	padding-bottom: 0em;
}
/************************** NEW NEWS STYLES **********************/
.newsArea {
	background-color: rgb(117,144,174);
	background-image: url("/images/blue-highlight-h.png");
	background-repeat: repeat-x;
	background-position: top left;
	font-size: .9em;
	padding: .2em;
}
.newsArea h1 {
	color: rgb(255,255,255) !important;
	text-align: center;
	margin: .4em !important;
}
.newsArea .story {
	background-color: #fff;
	background-image: url("/images/shadow-box.png");
	background-repeat: no-repeat;
	background-position: top left;
	margin: .75em;
	padding: .2em .2em .2em 1.2em;
}
.newsArea .story .icon {
	padding-right: 75px; 	
	min-height: 90px; 
	background-repeat: no-repeat; 
	background-position: 100% 80%;
}
.newsArea .attention {
	background-color: rgb(255,255,182) !important;
	background-image: url("/images/shadow-box-attention.png") !important;
}
.newsArea h2 {
	color: rgb(61,92,122);
	background-color: transparent;
	font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
	font-size: 160% !important;
	text-decoration: none;
	margin: 0;
	padding: 0 0 0 0;
	display: block;
}
.newsArea h2:hover {
	color: rgb(117,144,174);
	background-color: transparent;
	/*text-decoration: underline;*/
}
.newsArea .date {
  margin: 0 !important;
  padding: 0;
}
.newsArea p {
  margin: .25ex 1ex 1.5ex 2ex !important;
  line-height: 1.25em !important;
  padding: 0;
}
.newsArea .story ul, .newsarea .story ol {
  margin: .25ex 1ex 1.5ex 2ex !important;
  line-height: 1.25em !important;
  padding: 0;
}
.newsArea .story li {
  line-height: 1.25em !important;
}
/************************** CALENDAR STYLES **********************/
.calendarNav {
	display: block;
}
.calendarNav .back, .calendarNav .forward {
	margin-top: 1em;
	margin-bottom: 1em;
	display: inline;
}
.calendarNav .back {
	float: left; 
}
.calendarNav .forward {
	float: right; 
}
/************************** AREA STYLES **********************/
.textAreas {
	background-color: #f9f9f9;
	padding: .5em .5em .5em .5em;
}
.textArea {
	padding: .5em .5em .5em .5em;
	margin-bottom: .5em !important;
	background-color: #fff;
	border: 1px solid #ddd;
}
.textArea h2 {
	background-image: url('/images/blue-heading-bg.png');
	background-repeat: repeat-x;
	background-position: left top;
	color: #fff !important;
	padding: .25em 0 .25em .5em !important;
	border: 1px solid #ddd;
}
.cleared {
	clear: both;
}