/*****
 *
 * Colors:
 *
 * Darker blue: rgb( 33, 67, 105 )
 * Medium blue: rgb( 114, 154, 181 )
 * Light blue: rgb( 155, 188, 204 )
 * Really light blue: rgb( 203, 223, 235 )
 * Yellow-green: rgb( 233, 237, 102 )
 * Darker purple: rgb( 105, 62, 95 )
 * Lighter purple: rgb( 179, 150, 171 )
 * Medium brown: rgb( 135, 127, 82 )
 * Dark brown: rgb( 92, 80, 55 )
 * 
 ******/

html, body {
    background-color: rgb( 114, 154, 181 );
}

body {
    font-size: 62.5%;   /* baseline 10px for most browsers */
}

a,
a:link,
a:hover,
a:visited,
a:active {
    text-decoration: none;
    color: rgb( 94, 123, 156 );
}

a:hover {
    text-decoration: underline;
}

sup {
  line-height: 0;
  font-size: 0.8em;
}

/* anything we don't want to show for CSS-enabled users */
.hidden {
    position: absolute;
    top: -1000em;
}

.no-wrap {
    white-space: nowrap;
}

#wrapper {
}

#container {
    width: 69em;
    padding-right: 6em;
    margin: 0 auto;
    font-size: 1.1em;
    background: url( /img/side_pattern.jpg ) 68em top repeat-y rgb( 33, 67, 105 );
}

#header,
#main {
    width: 54em;
    padding-left: 15em;     /* keep in sync with #logo width */
}

#logo {
    float: left;
    width: 15em;            /* the width of the logo at 10px/em */
                            /* keep in sync with #main border width and #worship position */
    text-align: center;
    margin-left: -15em;
    background: url( /img/trim_logo.jpg ) right bottom repeat-x rgb( 203, 223, 235 );
}

#header,
#logo {
    height: 16em;           /* the height of the entire header */
    padding-bottom: 5px;    /* height of spiky image */
}

#nav_container,
#nav ul {
    height: 4em;
}

#nav_container {
    height: 100%;
    padding-bottom: 5px;    /* height of spiky image */
    background: url( /img/trim_hdr.jpg ) left bottom repeat-x rgb( 33, 67, 105 );
    
    overflow: hidden;       /* to do with the centered nav list */
}

#header_image {
    height: 12em;           /* height of header minus height of #nav .main-nav */
    background: url( /img/hdr_photo.png ) left center no-repeat;
}

/* for centering of the nav list */
#nav {
    float: left;
    position: relative;
    left: 50%;
}

#nav ul {
    position: relative;
    left: -50%;
}

#nav li {
    display: block;
    float: left;
    padding: 1.5em 1em;
    
    font-family: Verdana, sans-serif;
    text-transform: uppercase;
}

#nav li.current {
    background: url( /img/trim_nav5.jpg ) center top no-repeat;
}

#nav li.current a {
    font-weight: bold;
    color: #FFFFFF;
}

#nav li a {
    font-size: 1.1em;
    padding: 1.25em 0;
    color: rgb( 155, 188, 204 );
}

#nav li a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

/* this whole container is for centering the subnav */
#subnav_container {
    height: 2.2em;
    background-color: rgb( 233, 237, 102 );
    overflow: hidden;
}

#subnav {
    float: left;
    position: relative;
    left: 50%;
}

#subnav ul {
    position: relative;
    left: -50%;
}

#subnav li {
    display: block;
    float: left;
    padding: 0.5em 1.25em;

    font-family: Verdana, sans-serif;
}

#subnav li a {
    color: rgb( 105, 62, 95 );
}

#subnav li.current a {
    font-weight: bold;
}

#main {
    position: relative;
}

#content,
#sidebar,
#address,
#worship {
    font-family: Georgia, serif;
}

#content_container {
    padding-top: 1.5em;
    background: url(/img/dots.jpg) 38em top repeat-y white;
}

#content_container:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    line-height: 0;
    font-size: 0;
}

#content a,
#sidebar a {
    font-style: italic;
}

#content {
    float: left;
    clear: left;
    width: 34em;
    min-height: 25em;
    padding: 1em 2em 0;
    line-height: 1.4em;
}

#content h1 {
    position: absolute;
    top: -1000em;
}

#content h2 {
    font-size: 1.4em;
    font-style: italic;
    margin-bottom: 0.35em;
}

#content p {
    line-height: 1.4em;
    margin: 1.2em 0;
}

#content p.last:after {
    display: block;
    content: url( /img/tiny_cross.png );
    margin: 0.5em 0 2em;
}

#content p.image {
  text-align: center;
}

#content p.image img {
  display: block;
  margin: 0.5em auto;
}

#content p.image .caption {
  font-style: italic;
}

#content p.inline-image {
  float: left;
  width: 100px;
  margin-right: 0.75em;
  margin-top: 1.1em;    /* don't ask */
}

#content p.inline-image img {
  display: block;
}

#content p.inline-image .caption {
  display: block;
  font-style: italic;
  text-align: center;
}

#sidebar {
    float: right;
    width: 12em;
    padding: 1em 2em 0;
}

#sidebar h3,
#sidebar p,
#sidebar cite {
    color: rgb( 135, 127, 82 );
}

#sidebar h3 {
    font-size: 1.4em;
    font-style: italic;
    margin-bottom: 0.35em;
}

#sidebar p {
    margin: 1.2em 0;
    line-height: 1.4em;
}

#sidebar p.event em {
    font-style: normal;
}

#sidebar p.event span {
    font-style: italic;
}

#sidebar blockquote p {
    margin: 0;
    font-size: 1.6em;
    font-style: italic;
    line-height: 1.8em;
}

#sidebar cite {
    display: block;
    margin-top: 1.25em;
    
    text-align: right;
    font-size: 0.625em;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#sidebar p.image-small,
#sidebar p.image-large {
    margin-top: 2em;
}

#sidebar p.image-small img {
    display: block;
    width: 116px;
}

#sidebar p.image-large img {
    display: block;
    margin-left: -3em;
}

#sidebar p.image-small .caption,
#sidebar p.image-large .caption {
    display: block;
    margin-top: 0.5em;
    
    line-height: 1.4em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgb( 125, 117, 99 );
}

#worship,
#address {
    position: absolute;
    width: 15em;
    left: 0;
    
    text-align: center;
    color: rgb( 155, 188, 204 );
}

#address {
    top: 1em;
    padding-bottom: 2em;
    
    background: url( /img/rule_diam_dkbl.jpg ) center bottom no-repeat;
}

#address address {
    display: block;
    font-style: normal;
    line-height: 1.4em;
}

#address a {
    font-family: Verdana, sans-serif;
    font-size: 0.95em;
    color: white;
}

#worship {
    top: 13em;
}

#worship h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
}

#worship p {
    margin-top: 1.25em;
    line-height: 1.4em;
    padding: 0 0.75em;
}

#footer {
    clear: both;
    padding-top: 3em;
    background: url( /img/footer_trim.png ) left bottom repeat-x #FFFFFF;
}

#quicklinks li {
    display: block;
    float: left;
}

#quicklinks .ql-left {
    margin-left: 5.25em;
}

#quicklinks .ql-mid {
    margin: 0 4em;
}

#quicklinks li a {
    display: block;
    padding: 81px 0 0 0.5555555em;
    width: 12.777778em;
    height: 19px;
    overflow: visible;
    
    background-position: left top;
    background-repeat: no-repeat;
    
    font-family: Verdana, sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
}

#quicklinks li a:hover {
    text-decoration: none;
}

#quicklinks .ql-left a {
    background-image: url( /img/ql1.jpg );
    color: rgb( 33, 67, 105 );
}

#quicklinks .ql-mid a {
    background-image: url( /img/ql2.jpg );
    color: rgb( 105, 62, 95 );
}

#quicklinks .ql-right a {
    background-image: url( /img/ql3.jpg );
    color: rgb( 92, 80, 55 );
}

#plug {
    clear: both;
    padding: 1.5em 0 1em;
    margin: 0;
    
    text-align: center;
    color: rgb( 33, 67, 105 );
}

#plug p {
  font-size: 1.1em;
}

div.hr-top,
div.hr-middle,
div.hr-bottom {
    margin: 1em 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
}

div.hr-top,
div.hr-bottom {
    height: 34px;
}

div.hr-top {
    background-image: url( /img/curly_top.jpg );
}

div.hr-middle {
    height: 5px;
    background-image: url( /img/rule_diam.jpg );
}

div.hr-bottom {
    background-image: url( /img/curly_btm.jpg );
}

div.hr-top hr,
div.hr-middle hr,
div.hr-bottom hr {
    display: none;
}

table {
    width: 100%;
}

p.image-small img,
img.bordered {
    border: 8px rgb( 203, 223, 235 ) solid;
}