/* >>>>> SPC Cascading Style Sheet <<<<< */

html, body {margin: 0; padding: 0; font-size: 100%; }

body {
  background: #A32B30 url("images/front-top.gif") no-repeat;
  font-family: 'Lucida Grande',Verdana, Geneva, Arial, Helvetica, sans-serif;
  line-height: 1.2em;
}

p,td,th,div,span,ol,ul,dl,dt,dd,li,form {
  font-family:'Lucida Grande',Verdana,Arial,Geneva,Helvetica,SunSans-Regular,sans-serif;
  font-size: 12px;
  color: #000000;
}

p {margin-bottom: 5x; padding: 0; }


h1,h2,h3,h4,h5 {
  font-family: 'Lucida Grande',Verdana,Arial,Geneva,Helvetica,SunSans-Regular,sans-serif;
  color: #A32B30;
  font-weight: bold;
  margin: 10px 0;
  text-align: left;
  border-bottom: solid 1px #A32B30;
}


h1 { font-size: 200%; }
h2 { font-size: 175%; }
h3 { font-size: 150%; }
h4 { font-size: 125%; text-align:left; color:#003300; border-bottom:0px; }
h5 { font-size: 100%; background-color:#D7B561; color: #003300; padding:3px;}


a:link { font-weight:bold; color: #003300; text-decoration: underline; }

a:visited { font-weight:bold; color: #003300; text-decoration: underline; }

a:hover { font-weight:bold; background: #71843E; color: #FFFFFF; text-decoration: underline; }

a:active {font-weight:bold; color: #003300; text-decoration: underline;}

table {
  border-collapse: collapse; 
  table-layout:fixed; /*for faster rendering*/
  border:none;
  margin-left:auto;
  margin-right:auto;
}

pre {
  background: #B5BFA0;
  border: 1px solid black;   
  margin: 0 0 0 10px;
  padding-top: 8px;
  font-family: "Courier New",courier,georgia sans-serif;
  font-size: 95%;
  font-weight: normal; }

.inavbar {
   font-size:1.5em;
   font-weight:bold;
   background:transparent;
   color: #FFFFFF;
   text-align:right;
}

table { 
    table-layout: auto;
    border-collapse: collapse;  
}

.myRed { background: #A32B30; }
.myBlue { background: #6D80A9; }
.myGreen { background: #71843E; }
.myGold { background: #D7B561; }
.myMint { background: #B5BFA0; }

.caption {
    font-size: 0.75em;
    color:#003399;
    text-align:center;
}

#fixleft {
  position: absolute;
  top: 200px;
  left: 0px;
  width:143px;
}

#about #nav-about div.menu#nav-about a {
    background: url("images/button.gif") 0 0 no-repeat;

    background-position:-300px 0;
    color: #FFFFFF;
}


div.menu {
  background-color:#B5BFA0;
  width: 150px;
  margin-left: 0px;
  text-align: left;
  font-weight: bold;
  font-size:1.0em;
  line-height:20px;
}

div.menu a {
    font-family: 'Lucida Grande',Verdana,Arial,Geneva,Helvetica,SunSans-Regular,sans-serif; 
    margin: 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    color:#003300;
    background: url("images/button.gif") 0 0 no-repeat;
    text-decoration: none;
    display:block;
    }

div.menu a:link { color: #003300; }
div.menu a:visited { color: #003300; }
div.menu a:hover {background-position: -150px 0; color: #FFFFFF;}
div.menu a:active {background-position: -300px 0; color: #FFFFFF;}
div.menu a.clicked:link {background-position: -300px 0; color: #FFFFFF;}

a.clicked:link {
background-color: #000;
color: #ccf;
}


/*
div.outer {
    width: 150px;
    margin-top:0px;
    padding-left:0px;
}

div.outer a {
    padding:0px;
    overflow:hidden;
    display: block;
    border-top: 1px solid #003300;
}

div.outer span {
    display: block;
    margin:0px;
    padding: 0px;
}

div.outer a:hover {
    background-position: -150px 0;
    color:#FFFFFF;
}

div.outer a:active {
    background-position: -300px 0;
    color:#FFFFFF;
}
*/

/* Matching rules: body id to nav-graphic */




/* Matching rules: body id to nav-graphic 
#go #nav-go div.menu a, div.outer a,
#about #nav-about div.menu a, div.outer a,
#beliefs #nav-beliefs div.menu a, div.outer a,
#pastor #nav-pastor div.menu a, div.outer a,
#staff #nav-staff div.menu a, div.outer a, 
#membership #nav-membership div.menu a, div.outer a,
#directions #nav-directions div.menu a, div.outer a, 
#sitemap #nav-sitemap div.menu a, div.outer a {
    background: url("images/button.gif") 0 0 no-repeat; 
    background-position:-300px 0;
    color: #FFFFFF;
}
*/

/*
div.menu p {
  margin: 0;
  /*padding: 0.3em 0.4em;
  border: thin outset #B61E3D;
  color: #FFFFFF;
}

div.menu a, div.menu em { display: block;}
div.menu a, div.menu em { border-top: 1px solid #003300; }
div.menu a:first-child { border-top: none }
div.menu em { color: #B5BFA0; }*/





/* 
#go #nav-go div.outer a,
#about #nav-about div.outer a,
#beliefs #nav-beliefs div.outer a,
#pastor #nav-pastor div.outer a,
#staff #nav-staff div.outer a, 
#membership #nav-membership div.outer a, 
#directions #nav-directions div.outer a, 
#sitemap #nav-sitemap div.outer a {
    background: url("images/button.gif") 0 0 no-repeat; 
    background-position:-300px 0;
    color: #FFFFFF;
}
*/

strong {font-weight: bold; }

pre strong {color: #00000; }

#bslot pre.altcolor2 strong {color: #cde7a8; }

.alignright  {margin: 0; padding: 1em 10px 2em 0; text-align: right; }


.small {
  font-size: 0.75em;
  color: #FFFFFF;
}

.small alignright {
  font-style: italic;
  margin: 0;
  padding: 1em 10px 2em 0;
  text-align: right;
}

.small alignleft {
    font-style: italic;
  margin: 0;
  padding: 1em 10px 2em 0;
  text-align: left;
}



.alignright strong {color: #771464; font-weight: bold; }

.decoration {float: right; margin: 0.25em 0.5em; position: relative; } /*** for IE6 ***/

html[xmlns] .decoration {margin: 0 0.5em 0 0; } /*** Moz put the image too low ***/

.kudos {
  margin-top: 3em;
  border-top: 3px double #233622;
  border-bottom: 3px double #233622;
  padding-bottom: 5px; }

.dash {border-top: 2px solid #CCCCFF; margin-top: 1em;  }




/* >>>>> Sidepage extras <<<<< */

#bottom {font-size: 12px; line-height:0; margin:0; padding:0;}


ul {
color: #000;
list-style: square;
list-style-position: outside;
margin: 0;
padding: 0 10px 1.5em 25px; } /*** bottom padding instead of margin to avoid Op6
      "Bottomgap Bug." Please see Big John's explanation of this bug -
      http://www.positioniseverything.net/op-omnibus/bottomgap.html ***/

#bslot ul {color: #000000; font-weight: bold; }

.right ul {padding-right: 5px; }

li {padding: 1px;}

.description li {margin: 10px 0 0 0; padding: 0; }



/* *****>>>>> Demo Styles <<<<<***** */

/*** The #header div has a static position and a background image ***/

#strip { width: 900px }


#header {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 800px;
  height:200px;
  margin: 0;
  padding: 0;
  }

} /*** must be set so the following absolutely positioned divs are
          placed correctly on initial load of the page***/

#pagetitle {
  font-family: 'Lucida Grande',Verdana,Arial,Geneva,Helvetica,SunSans-Regular,sans-serif;
  font: #000066 bold 175%;
  margin: 0;
  padding: 10px 0 0 0;
  text-align: center;
}


#leftbox {
  background-color:#B5BFA0;
  position: absolute;
  left: 0px;
  top: 200px;
  width: 265px;
  height:2400px;
  padding:10px;
  margin:0;
}


#container {
  background: #E1BE72;
  position: absolute;
  border: none;
  left: 285px;
  top: 200px;
  width: 531px;
  height:1001px;
  margin: 0;
  padding:0; }


/*** IE5/Mac has trouble with right positioned boxes due to a secret margin. See
     - http://www.l-c-n.com/IE5tests/right_pos/index.shtml - Philippe Wittenbergh's page
     for an explanation of this problem and Sam Foster's page for an explanation of the
     hack used  - http://www.sam-i-am.com/testsuite/css/mac_ie5_hack.html - ***/

#rightbox {
  background-color:#A32B30;
  border: none;
  position: absolute;
  left: 600px;
  top: 200px;
  width: 186px;
  height:2400px;
  padding-left: 7px;
  padding-right: 7px;
  }


/* hide the following from IE5-Mac \*/
#rightbox {
  right: 0;
  margin-right: 0; }
/* IE5-Mac can see the rest */

#rightbox p, #rightbox ol, #rightbox ul, #rightbox li {
  color: #FFFFFF;
}

#rightbox h3, #rightbox h4 {
 color:#D7B561;
}


#rightbox a:link { font-weight:bold; color: #FFFFFF; text-decoration: none; }

#rightbox a:visited { font-weight:bold; color: #FFFFFF; text-decoration: none; }

#rightbox a:hover { font-weight:bold; background:#A32B30; color: #FFFFFF; text-decoration: underline; }

#rightbox a:active {font-weight:bold; color: #000000; text-decoration: none;}

#aslot {
  width: 531px;
  margin: -12px 0 0 -1px;
  padding: 0px;
  position: relative; } /*** for IE6 ***/

#wrapper {
  margin: 0;
  padding: 0; }

/*** Tan hack for IE. Only IE browsers see this selector.
     This replaces the old Tantek hack. Please see Edwardson Tan's page.
     http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html ***/

* html #wrapper {
  width: 100%; /*** IE5.5 needs this value to eliminate a horizontal scrollbar ***/
  w\idth: auto; } /*** resets the value for IE6 and IE5-Mac ***/

#wrapper2 {
  margin: 0;
  padding: 0; }

/*** Tan hack for IE. Only IE browsers see this selector.
     This replaces the old Tantek hack. Please see Edwardson Tan's page.
     http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html ***/

* html #wrapper2 {
  width: 100%; /*** IE5.5 needs this value to eliminate a horizontal scrollbar ***/
  w\idth: auto; } /*** resets the value for IE6 and IE5-Mac ***/


.left {
  margin: 3px;
  padding: 0;
  width: 210px;
  float: left;
}

html>body .left {margin-left: 12px; } /*** IE doubles the margin on the float. This sets
          the margin to the correct width for others ***/

.right {
  margin: 3px;
  padding: 0;
  width: 210px;
  float: right;
}

html>body .right {margin-right: 12px; } /*** IE doubles the margin on the float. This sets
          the margin to the correct width for others ***/

.clear {
  clear: both;
  margin: 0;
  padding: 0; }

#bslot {
  margin-top: 6px;
  margin-left: 12px;
  margin-right:6px;
  width: 435px;
  padding: 0px;
  position: relative; } /*** IE6 needs this to display the div ***/

#footer {
  color: #FFFFFF;
  margin: 6px;
  padding:0;
  width: 500px;
  border-top: 1px solid #E1BE72;
}


.img-frame {
   display: block;
   border: 5px solid #FFFFFF;
 }



/* >>>>> Drop Shadows <<<<< */

.img-shadow {
  clear: both;
  float:left;
  background: url(images/ds/shadowAlpha.png) no-repeat bottom right !important;
  background: url(images/ds/shadow.gif) no-repeat bottom right;
  margin: 6px 0 0 2px !important;
  margin: 6px 0 0 1px;
}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px 0px;
  padding: 8px;
 /*width: 154px;
  height: 203px;*/
}

.p-shadow {
  clear: both;
  width: 90%;
  float:left;
  background: url(images/ds/shadowAlpha.png) no-repeat bottom right !important;
  background: url(images/ds/shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.p-shadow div {
  background: none !important;
  background: url(images/ds/shadow2.gif) no-repeat left top;
  padding: 0 !important;
  padding: 0 6px 6px 0;
}

.p-shadow p {
  color: #000;
  background-color: #fff;
  font: 1em georgia, serif;
  border: 1px solid #a9a9a9;
  padding: 4px;
  margin: -6px 6px 6px -6px !important;
  margin: 0;
}