body {background: #e6e6e6}

body, p, blockquote, td, li        {font-family: arial, sans serif}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {font-family: times new roman, serif; font-weight: bold}
h1, td.h1 {font-size: 24pt}
h2, td.h2 {font-size: 18pt}
h3, td.h3 {font-size: 16pt}
h4, td.h4 {font-size: 14pt}
li        {font-size: 11pt; line-height: 13pt}

a                {text-decoration: none}
a:link, a:active {color: #00c}
a:hover          {color: #d00}
a:visited        {color: #00c}

p, blockquote    {text-align: justify}
blockquote       {margin-left: 25px}
td               {vertical-align: top}
.cj              {text-align: center}

.vsp   {height: 0.8em}               /* used to insert vertical space between table rows */
.u     {text-decoration: underline}             /* Note: <u> tag not valid in XHTML */
.v, tt {font-family: verdana; font-size: 12pt} 
         /* certain characters, esp. smart quotes, look much better in Verdana font */

hr   {width: 90%; margin: 5px auto; border: #ccc solid 1px}

/**************************** >>>>>>>>>>>>>>>>>>>>>> *************************
***************************** content display frames *************************
***************************** >>>>>>>>>>>>>>>>>>>>>> ************************/

/*** main frame holding all others  ***/
#main {
	width: 930px; margin: 10px auto; padding: 5px; text-align: center;
	background: #fff; border: 1px solid #000
}

#head, #foot, .content {width: 920px; margin: 10px auto}

/*** frame containing group picture, chalice, UUCM headline, line of contact info ***/
#head {
	width: 870px; margin: 10px auto; padding: 10px 0;
	border-top: 2px solid #00c; border-bottom: 2px solid #00c
}
#head div     {text-align: center; padding: 5px 0; font-weight: bold}
#head #top    {font-size: 20pt; color: #00a; padding: 0 15px 10px 0px; height: 322px}
#head #top img#homecoming {width: 470px; height: 322px; float: left; margin-right: 30px}
#head #top img#chalice    {width: 178px; height: 154px; margin: 10px auto 20px auto}
#head #slogan {font-size: 16pt; font-style: italic; color: #c60; margin-top: 15px}
#head #info   {font-size: 12pt}

/*** dropdown main frame -- main styling below  ***/
#dropdown      {width: 917px; margin: 0 auto 10px auto; height: 25px}
#dropdown a.sv {padding-left: 15px}

/*** headlines ***/
.hline, .sub, .sub2 {font-weight: bold; padding: 5px 0}
.hline              {font-size: 18pt; text-align: center; color: #00c; 
	                 background: #eee; margin: 5px 5px; border: 3px ridge #00f}
.sub, .sub2         {font-size: 16pt}
.sub                {color: #00c}
.sub2               {color: #00a}

/*** main content frame  ***/
.content           {font-size: 13pt; text-align: justify}
.content big       {font-size: 15pt; font-weight: bold}
.content div       {margin: 10px 0 10px 30px}
.content div.psh   {margin: 15px 10px 0 5px; font-size: 14pt; font-weight: bold; 
  /* subheadings */ color: #00a; text-decoration: underline}
.content div.block       {margin-left: 75px}
.content div.noin        {margin-left: 0}
.content div div         {padding: 3px}

.content ul, .content ol {margin-left: 15px ; margin-top: 10px}
.content ul              {list-style: url(images/dotl.gif)}
.content li           {font-size: 13pt; margin-left: 5px; padding: 4px 0; line-height: 1.1em}
.content br           {line-height: 0.6em}

/* home page specific elements */
#homepage hr {width: 660px; text-align: left; margin-left: 45px}
.event       {font-weight: bold; font-style: italic}

/*** right navigation bars (when included it floats on upper right inside content frame)  ***/
#rightnav {
	width: 190px; float: right; margin: 10px 0 25px 15px; padding: 0;
	border: 1px solid #008; background: #ddf url(images/ddback2.gif); font-weight: bold
}
#rightnav div {font-size: 13pt; text-align: center; margin: 6px auto; padding: 3px 0}
#rightnav div.rhshead {padding-bottom: 0; text-decoration: underline}
#rightnav div:hover {
	background: url(images/ddback2-over.gif); display: block;
	border-top: 1px solid #008; border-bottom: 1px solid #008; padding: 2px 0
}
#rightnav div.rhshead:hover {background: none; border: none; padding: 3px 0 0 0}
#rightnav div#FB:hover      {background: none; border: 1px solid transparent}
#rightnav img        {width: 16px; height: 16px; margin-right: 7px}
.caption             {line-height: 13pt} 
.captionitalic       {font-size: 10pt; font-style: italic; line-height: 12pt}

/*** footer frame, from "We are a Welcoming Congregation" to UUA logo  ***/
#foot {
	margin: 10px auto; font-size: 12pt; 
	padding-top: 10px; border-top: 2px solid #00c
}
#foot div          {text-align: center; padding: 8px 0}
#foot .sep         {padding: 0 12px}
#foot #welcome     {padding: 0 276px}
#foot #welcome div {font-weight: bold; padding-top: 7px}
#foot #welcome img {width: 41px; height: 34px; float: right}
#foot #UUA img     {width: 372px; height: 72px; border: 1px solid #008}

/*** bottom navigation row (dropdown menu headings without the dropdown) ***/
#navbot     {width: 917px; margin: 15px auto 0 auto; height: 25px}
#navbot div {text-align: center}

/************************* <<<<<<<<<<<<<<<<<<<<<<<<<< ************************/
/************************* end content display frames ************************/
/************************* <<<<<<<<<<<<<<<<<<<<<<<<<< ************************/

/**** left and right side floating and center-aligned frames' default specs ****/

.fl, .fr, .fc    {font-size: 10pt; text-align: center}
div .fl          {float: left;  margin: 3px 15px 6px 0; padding: 3px}
div .fr          {float: right; margin: 3px 0 6px 15px; padding: 3px}
.fl img, .fr img {margin-bottom: 5px; border: 0}
.fc img          {padding: 0 5px 5px 5px}

/**** dropdown menus specs ****/

#nav, #nav ul {/* all lists */
	padding: 0; margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block; background: #eee url(images/ddback2.gif);
	font-size: 12pt; font-weight: bold; font-family: arial
}
#nav a:hover {background: #ddd}

#nav li {float: left; position: relative; margin: 0 auto; text-align: left}

#nav li a, #nav li li a {padding: 3px 2px 3px 4px}

#nav li div       {border-left: 1px #000 solid; padding: 0; background-color: #eee}
                                  /* div nested inside li makes borders line up correctly */
#nav li           {border-top:  1px #000 solid; border-bottom: 1px #000 solid}
#nav li#home      {width: 139px}  /* if change any of these then change widths below too */
#nav li#worship   {width: 140px}
#nav li#RE        {width: 233px}
#nav li#SA        {width: 190px}
#nav li#community {width: 214px}

#nav li ul {/* second-level lists */
	padding: 0; position: absolute; top: auto; list-style: none; display: none
} 
/* using left instead of display to hide menus because "display: none" is not read by screen readers (... but that messed up IE big time, so de-implemented) */

#nav li:hover ul   {display: block; left: auto} /* lists nested under hovered list items */
#nav li.sfhover ul {left: auto} 

#nav li li     {border: solid 1px #000}
#nav li li     {border-bottom: 0}              /* cells have top, right & left borders ... */
#nav li li.bot {border-bottom: solid 1px #000} /* ... bottom cell has bottom border too */

#nav li#home li      {width: 138px}  /* 1-2 pixels < top line cell so that borders line up */
#nav li#worship li   {width: 139px}
#nav li#RE li        {width: 232px}
#nav li#SA li        {width: 189px}
#nav li#community li {width: 212px}

/**** sermons pages specs ****/

#sermons .content   {font-size: 11pt}
#sermons div        {margin-left: 0}
#sermons .title, #sermons .writer, #sermons .rtt, #sermons .show 
                    {text-align: center; font-weight: bold}
#sermons .title     {font-size: 16pt; font-weight: bold; font-style: italic;
                     padding: 6px 0; background-color: #eee; border: 1px solid #00f}
#sermons .writer    {font-size: 13pt}
#sermons .show      {color: #c60; cursor: pointer}
#sermons .pm        {font-size: 13pt; padding: 0 4px; color: #fff; background-color: #000}
#sermons .rest      {display: none; margin-top: 15px}