/**
 * Base styling
 */
body {background: #fffDE9;}

#main {
 position: absolute;
 right: 100px;
 left: 100px;
 top: 0;
 margin: 0;
 padding: 0;
}

/**
 * Header styling
 */
#header {
 background: url(img/banner_border.jpg) no-repeat;
 height: 165px;
 margin: 0;
 padding-left: 60px;
}

#header img#left_banner {
 position: absolute;
 float: left;
 margin: 0;
 padding: 0;
 z-index: 1;
}

#header img#right_banner {
 position: absolute;
 right: 0px;
 top: 0;
 margin: 0;
 padding: 0;
 z-index: 2;
}

/**
 * Main menu styling.
 */
#menu {
 position: absolute;
 top: 145px;
 right: 0;
 left: 60px;
 height: 20px;
 background: #1D1761 url(img/corner.jpg) top right no-repeat;
 border-bottom: #fff 1px solid;
}

#menu ul {
 list-style: none;
 margin: 0;
 padding: 0;
 height: 20px;
 width: 10em;
 float: left;
}

#menu ul a {
 display: block;
 margin: 0;
 padding: 0;
 height: 20px;
 border-width: 0 1px 0 0;
 border-style: solid;
 border-color: #fff;
 color: #fff;
 background-color: #1D1761;
 font-size: 1em;
 text-transform: capitalize;
 text-align: center;
 text-decoration: none;
}

#menu ul a:hover {
 color: #000;
 background-color: #fffac4;
}

#menu ul ul a {
 padding: 0;
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #ccc;
 color: #000;
 background-color: #fffac4;
 text-decoration: none;
 text-transform: none;
}

#menu ul ul a:hover {
 color: #a00;
 background-color: #fffde9;
}

/**
 * display: none is set to display: block on mouseover of the ul li element via javascript in the includes/header.php file
 */
#menu ul ul {
 display: none;
 position: absolute;
 z-index: 500;
 border-bottom: solid;
 border-color: #ccc;
}

/**
 * Content styling
 */
#content {
 position: relative;
 background: #fff url(img/background.jpg) repeat-y;
 padding-left: 80px;
 padding-right: 20px;
 padding-top: 20px;
 padding-bottom: 20px;
 margin-top: 0;
}

/**
 * Text styling
 */
#content h1,h2 {text-align: center;}

#content p, h1,h2,h3,h4,h5,h6 {
 margin: 0;
 padding-top: 20px;
 padding-bottom: 20px;
}

p.big 
{
 padding: 20px 50px 10px 75px;
 font-size: 105%
}

.sans
{
 font-family: arial, helvetica, sans-serif;
}

.serif
{
 font-family: "Times New Roman", georgia, serif;
}

strong
{
 font-weight: 600;
}

#content #article
{
 background: url(img/strip.gif) repeat-y;
 margin-top: -20px;
 padding-left: 7px;
}

/**
 * Related links styling
 */
#content #related-links
{
 text-align: center;
 padding-top: 20px;
 padding-bottom: 20px;
}

#content #related-links a
{
 margin: 80px;
 font-size: 150%;
 color: #1D1761;
 text-transform: uppercase;
} 

#content #related-links a:hover
{
 color: #C3B306;
}

/**
 * Index list styling
 */
#content #index-list
{
 padding-top: 20px;
}

#content #index-list ul
{
 list-style: none;
}

#content #index-list ul li
{
 display: block;
}

#content #index-list ul li a
{
 display: block;
 height: 80px;
 width: 200px;
 text-decoration: none;
 margin-bottom: 20px;
 padding-left: 210px;
 font-size: 140%;
}

#content #index-list ul li a:hover
{
 color: #C3B306;
}

#content #index-list ul li p
{
 margin-left: 410px;
 margin-top: -100px;
 height: 80px;
 padding: 0 0 10px 5px;
}

#content #index-list ul li a.gallery
{
 background: url(img/gallery.jpg) no-repeat;
}

#content #index-list ul li a.beliefs
{
 background: url(img/beliefs.jpg) no-repeat;
}

#content #index-list ul li a.church
{
 background: url(img/church.jpg) no-repeat;
}

#content #index-list ul li a.related-sites
{
 background: url(img/related.jpg) no-repeat;
}

#content #index-list ul li a.services
{
 background: url(img/services.jpg) no-repeat;
}

#content #index-list ul li a.life
{
 background: url(img/life.jpg) no-repeat;
}

/**
 * Gallery styling 
 */
#content div.gallery
{
 text-align: center;
 width: 100%;
 margin: -20px;		/** counter the default margins for display */
 padding: 0;
}

#content div.gallery { display: none; }

#content ul.gallery
{
 padding: 0 15px;
 margin: 0;
 list-style: none;
}

#content #gallery h3
{
 display: block;
 font-size: 110;
 text-align: left;
 color: #C3B306;
 margin: 30px 70px;
 text-transform: uppercase;
}

#content ul.gallery li
{
  float: left;
}

a:hover img.thumb
{
 border-color: #555 #555 #999 #999;
}

a img.thumb
{
 height: 100px;
 border: 2px solid;
 border-color: #ccc #ccc #aaa #aaa;
 margin: 10px;
}

img.fullImage
{
 border: 2px solid;
 border-color: #ccc #ccc #aaa #aaa;
 max-width: 700px;
 width: expression(700 + "px");
 text-align: center;
 margin: 0 auto;
}

ul#g-index
{
 text-align: center;
 list-style: none;
 margin: 10px 50px;
 padding: 0;
}

#content ul#g-index li
{
  display: block;
  float: left;
  padding-left: 1em;
}

#content ul#g-index li a
{
 font-size: 1em;
 text-decoration: none;
 color: #1D1761;
 text-transform: capitalize;
 padding: 2px;
}

#content ul#g-index li a:before
{
  content: "\00bb";
}

#content ul#g-index li a:hover
{
 background-color: #fffac4;
 color: #000;
}

#content ul#g-index li a:hover:before
{
  content: "\00ab";
}

#image
{
 position: relative;
 background: none;
 padding-bottom: 130px;
 width: 704px;
 text-align: center;
}

#image a h3
{
 text-align: center;
 text-decoration: none;
}

.img_nav
{
 text-decoration: none;
}

a.img_nav img
{
 display: block;
}

a.img_nav span
{
 display: block;
 text-align: center;
}

.left_nav
{
 position: absolute;
 bottom: 0;
 left: 0;
}

.right_nav
{
 position: absolute;
 bottom: 0;
 right: 0;
}

div#footer {
 background: url(img/footer.jpg) repeat-x;
 height: 50px;
}

#footer img {float: left;}

#footer p {
 background: url(img/footer_border.jpg) no-repeat left;
 margin: 0;
 font-size: 0.7em;
 text-align: center;
 padding-left: 60px;
}

.sans
{
 font-family: arial, helvetica, sans-serif;
}

.serif
{
 font-family: "Times New Roman", georgia, serif;
}

strong
#content #article
{
 background: url(img/strip.gif) repeat-y;
}

.prop
{
 float: left;
 height: 200px;
 width: 1px;
 background: none;
}

#content #gallery
{
 margin: -20px -20px -20px -20px;
 padding: 0;
}

#content #gallery_wrapper
{
 float: left;
 width: 100%;
 padding-bottom: 50px;
}

#content #gallery_left
{
 margin-right: 10em;
}

#content #gallery_left ul.gallery
{
 display: none;
 position: relative;
 list-style: none;
 padding: 0;
 margin: 0;
}

#content #gallery_left ul.gallery h3
{
 text-align: center;
 color: #C3B306;
 margin: 0 40px 0 0;
 text-transform: uppercase;
}

#content #gallery_left ul.gallery li
{
 float: left;
}

#content #gallery_left ul.gallery li a
{
 float: left;
}

a:hover img.thumb
{
 border-color: #555 #555 #999 #999;
}

a img.thumb
{
 height: 100px;
 border: 2px solid;
 border-color: #ccc #ccc #aaa #aaa;
 margin: 10px;
}

img.fullImage
{
 border: 2px solid;
 border-color: #ccc #ccc #aaa #aaa;
 max-width: 700px;
 width: expression(700 + "px");
 text-align: center;
 margin: 0 auto;
}

.inner
{
 margin: 0;
 padding: 15px 50px 50px 50px;
}

#content #gallery_right
{
 float: left;
 width: 10em;
 margin: 0;
 padding: 0;
}

#content #gallery_right ul
{
 list-style: none;
 margin: 0;
 padding: 0;
}

#content #gallery_right ul li a
{
 font-size: 1em;
 display: block;
 width: 9em;
 color: #fff;
 margin: 0;
 padding: 0 0 0 1em;
 text-decoration: none;
 text-transform: capitalize;
 background: #1D1761 url(img/strip.gif) repeat-y;
 border-width: 0 0 1px 0;
 border-style: solid;
 border-color: #fff;
}

#content #gallery_right ul li a:hover
{
 background-color: #fffac4;
 color: #000;
}

#image
{
 position: relative;
 background: none;
 padding-bottom: 130px;
 width: 704px;
 text-align: center;
}

#image a h3
{
 text-align: center;
 text-decoration: none;
}

.img_nav
{
 text-decoration: none;
}

a.img_nav img
{
 display: block;
}

a.img_nav span
{
 display: block;
 text-align: center;
}

.left_nav
{
 position: absolute;
 bottom: 0;
 left: 0;
}

.right_nav
{
 position: absolute;
 bottom: 0;
 right: 0;
}

div#footer {
 background: url(img/footer.jpg) repeat-x;
 height: 50px;
}

#footer img {float: left;}

#footer p {
 background: url(img/footer_border.jpg) no-repeat left;
 margin: 0;
 font-size: 0.7em;
 text-align: center;
 padding-left: 60px;
}

/* test gallery positioning */
ul#images {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul#images li {
  float: left;
}

ul#g-nav {
  float: left;
  width: 100px;
  background: #050;
  list-style: none;
  padding: 0;
  margin: 0;
}