/* CSS Starting from 

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

with modifications of my own devising. */

body {
    color : black;
    background: url('ouricons/graychurch.png') fixed;
    font-family: verdana, arial, sans;
    text-align: center;
}

blockquote.em {
    font-style: italic;
}

a:link {
    color : #000088;
}
a:hover {
    color : #000088;
}

a:visited {
    color : #000088;
}

/* For tooltips and other popup information.  See http://psacake.com/web/jl.asp */

a.info{
    position:relative; /*this is the key*/
/*    z-index:24; */
}

a.info:hover{
    text-decoration:none;
/*    z-index:25;
    background-color:white */
}

a.info span{
    display: none
}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    color:black;
    text-decoration:none;
/*    display:block;
    position:absolute;
    padding: 2em;
    top:-8em; left:1em; width:30em;
    border:1px solid #0cf;
    background-color:#eeeeee; color:black;
    text-align: left; */
}

/* Same as info, except we are moving the text off to one side */

a.popit{
    position:relative; /*this is the key*/
/*    z-index:24; */
}

a.popit:hover{
    text-decoration:none;
/*    z-index:25;
    background-color:white */
}

a.popit span{
    display: none
}

a.popit:hover span{ /*the span will display just on :hover state*/
    display:block;
    color:black;
    text-decoration:none;
    display:block;
    position:absolute;
    padding: 1em;
    top:1em; right:1em; width:20em;
    border:1px solid #0cf;
    background-color:#eeeeee; color:black;
    text-align: left;
}

span.white {
/* What it says */
    color:white;
}

#wrapper {
/*    width:1000px; */
      width:875px;
    background: #dddddd;
    margin:0 auto;
}

#breadcrumb {
text-align: left;
font-style: italic;
font-size: x-small;
}

#header {
/*    text-align: center; */
}

#header p {
    font-size: 85%;
    margin-left: 5em;
    margin-right: 5em;
    margin-top: 0.5em;
}

#main {
    position: relative;
/*    margin-top: -2em; */
    z-index: 0;
    float:right;
/*    width:800px; */
      width:725px;
}

#standard {
    clear: both;
    width: 560px;
/*    padding-top: 0.25em; */
    color: black;
/*    background-color: white; */
    font-size: small;
    text-align: justify;
/*    font-size: small; */
    font-size: 90%;
    font-style: italic;
}

#standard p {
    margin-top: -0.5em;
}

#standard p.right {
    text-align: right;
    line-height: 0.75em;
    margin-top: -0.5em;
}

#bigtext {
    position: absolute;
    right: 5px;
    width: 150px;
    margin-top: -0.5em;
    font-size: 115%;
}

#bigtext p {
	 line-height: 100%;
    	 margin-top: -0.25em;
}

#bigtext p.small {
	 font-size: 85%;
}

#bigtext p.smaller {
	 font-size: 75%;
	 line-height: 110%;
	 text-align: left;
}

#footer {
    background: url('ouricons/graychurch.png') fixed;
    clear:both;
}

#rightbox {
    position: relative;
    float:right;
/*    width:75px;
    font-size: small; */
}

#nav {
    position: relative;
    z-index: 20;
    float:left;
/*    width:200px; */
      width:75px;
      font-size: small;
}

#nav p a:link {
    color: #000088;
}

#nav img {
    border: none;
}

#nav ul {
    list-style: none;
    padding: 0px;
    margin: auto;
}

#nav a {
    display: block;
    width: 10em;
    text-decoration: none;
    color: white;
}

#nav a:visited {
    color : white;
}

#nav a:hover {
    color : white;
}

#nav li {
    float: left;
    width: 10em;
    margin: 5px;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
/*    background: blue; */
    background: #000088;
}

#nav li ul {
    position: absolute;
/* This width was scientifically chosen so that boxes just touch in IE 7 */
/* Of course that means they overlap by about 50% in any other browser, */
/* Including IE8 */
    margin-left: 4.5em;
    margin-top: -0.5em;
    width: 10em;
    left: -999em;
}

#nav li:hover ul {
    left: auto;
    background: white;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}

#nav li:hover ul li {
    position: relative;
    z-index: 100;
    left: auto;
/*    background: darkgreen; */
    background: #004400;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
}

li.topic {
    margin-bottom: 0.5em;
    text-align: center;
    list-style-type: none;
}

li.topic p {
    margin-top: 0em;
    font-size: 90%;
}

li.space {
    margin-bottom: 0.5em;
}

/* Use an RSS icon for the bullet */

ul.rss {
    list-style-image:url(ouricons/feed-icon-14x14.png);
}

span.green {
    color: green;
}

span.biggreen {
    font-size: x-large;
    color: green;
}

h1 {
    text-align: center;
    font-size: x-large;
    margin: 0;
}

h2 {
    text-align: center;
    font-size: large;
    margin: 0;
}

h3 {
    text-align: center;
    font-size: large;
    margin: 0;
}


h4  {
    text-align: center;
    font-size: large;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0.5em;
    font-style: italic;
    font-weight: normal;
}

a.noline {
    text-decoration: none;
}

p.left {
/* For ordinary paragraphs */
    text-align: left;
}

p.lent {
    color : #AA2CFF;
    border-style: double;
}

p.christmas {
    background : #00782B;
    color : white;
    border-style: double;
}

p.snote {
    text-align: right;
    font-size: small;
    font-style: italic;
}

span.red {
	color: red;
}

span.green {
    color: green;
}

table {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* This makes big bold text, e.g., for Biblical Chapter numbers: */

strong.chapter {
   font-size:190%;
   float:left;
}

/* We'll use "text" as the division for pages of exposition, e.g.,
sermons, history, non-PDF newsletters, etc. */

.text {
    clear: both;
    position:relative;
    color: black;
/*    background-color: white; */
    text-align: left;
    margin-top : 10px ;
    margin-bottom: 10px;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 2em;
    margin-right: 2em;
}

.text h1 {
    text-align: center;
}

.text h2 {
    text-align: center;
}

.text p.indent  {
    margin-left : 5% ;
    margin-right : 5% ;
    margin-top : 0.25em;
    margin-bottom : 0.25em;
    text-align: left;
}

.text p.quote  {
    margin-left : 5% ;
    margin-right : 5% ;
    text-align: left;
}

.text p.center {
    text-align: center;
}

.text p.right {
    text-align: right;
    font-size: small;
    font-style: italic;
}

.text p.red {
	color: red;
}

.text q.red {
	color: red;
}

/* Make superscripts and subscripts a little smaller: */

.text sup {
    font-size: 65%;
    font-style: italic;
}

.text sub {
    font-size: 65%;
    font-style: italic;
}

.rtext {
    color: black;
    background-color: white;
    text-align: left;
    margin: 2em ;
}

img.limg {
    float: left;
    margin-left: 10px;
    padding-right: 2em;
}

object.lobj {
    float: left;
    margin-left: 10px;
    padding-right: 2em;
}

img.rimg {
	 float: right;
	 margin-right: 10px;
	 padding-left: 2em;
}

/* bigtab is for a page with a big table, nothing else */

.bigtab {
    clear: both;
    position:relative;
}

.bigtab table {
    width: 50em;
    color: black;
    background-color: white;
}