/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.03.19
   PURPOSE: Styles the html elements
 **************************************************************/

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  font: 400 0.8em verdana, arial, sans-serif;
  line-height: 170%;
}



#wrap {
  width : 1007px;
  margin-left : auto;
  margin-right : auto;
  text-align: justified;
  background: url(fade5.jpg);
  border: 1px 1px 1px 1px solid #000;
}







h1 {   
  clear: both;
  font: 700 2.5em "trebuchet ms", serif;
  color: #fff;
}

h2 {
  font: 500 1.8em "trebuchet ms", serif;
  color: #000;
}

h2 a {
  color: #29E3FF;
}

h2 a:hover {
  color: #FFF;
}

h3 {
  font: 400 2.75em "trebuchet ms", serif;
  color: #ff0000; 
}

h4 {
  font: 700 2em "trebuchet ms", serif;
  color: #FF4B33;
}

h5 {
  font: 700 1.1em "trebuchet ms", serif;
  color: #F17400;
}

h6 {
  font: 20px "trebuchet ms", serif;
  color: #ff6600; 

h1, h2 {
  margin: 0;
  padding: 10px 15px;
}
h4 {
  margin: 0;
  padding-top: -40px;
}

h3, h5, h6, p, dl {
  margin: 0;
  padding: 20px 10px 10px 0;
}



/* Done so the leftmost column aligns properly with the header.
   If the leftmost column has class gradient applied to it, 
   this class isn't required. */
.leftColumn h1,
.leftColumn h2, 
.leftColumn h3,
.leftColumn h4,
.leftColumn h5,
.leftColumn h6,
.leftColumn p,

.leftColumn dl {
  padding-left: 0;
}

a {
  color: #8BE6FA;
}

/* Uncomment this if you would like a visited link style 
a:visited {
  text-decoration: line-through;
} */

a:hover {
  color: #FFF;
}

b {
  color: #FFF;
}

ol, ul {
  margin: 10px 30px;
  padding: 0 30px;
}

ol {
  color: #FC0;
}

ol span {
  color: #EEE;
}

ul {
  list-style-image: url(bullet.gif);
}
ulx {
  list-style-image: );
}


del {
  color: #AAA;
}

code {
  margin: 10px 15px;
  padding: 10px;
  display: block;
  overflow: auto;
  
  font: 400 1em courier, monospace;
  line-height: 120%;
  white-space: pre;
  background: #444;
}

.leftColumn code {
  margin-left: 0;
}

acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}

dt {
  font-weight: bold;
  color: #FFB323;
}

dd {
  margin-left: 0;
  padding-left: 45px; 
}




/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site. (bgrnd-color below changes main menu strip
   base color for links changeable in side menu
 **************************************************************/

#content {  
  height: 100%;
  min-height: 100%;
  background-color: #000;    
  text-align: left;
}

#content,
  max-width: 100%;
  margin: 0 auto;
}

/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/

#mainMenu { 
  float: left;
  width: 1007px;
  clear: both;  
}

#mainMenu ul {
  margin: 0;
  padding: 0em 3.5em 0em 0em;
}

#mainMenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
 
}

#mainMenu li a {
  float: left;
  margin: 0 2px;
  padding: 5px 0.5em;

  font: 400 20px "trebuchet ms", serif;
  text-decoration: none;
  text-transform: lowercase;
  color: #99ccff;
}

#mainMenu li a:hover,
#mainMenu li a.here {
  color: #fff;
  border-top: 5px solid #000;
  background-color: #000;
}

#mainMenu li a.last {
  margin-right: 0;
}




/**************************************************************
   .sideMenu: The side bar menu (WIDTH OF VERTICAL LINKS BAR)
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(foo.gif);
  font: 400 1.4em "trebuchet ms", serif;
}

.sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  
  text-decoration: none;
  color: #FFF;
} 

.sideMenu li a:hover {
  color: #5F5F5F;
  background-color: #5F5F5F;
}



/* Submenu of active menu item */
.sideMenu li.here ul {
  margin-left: 20px;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 45px;
  font: 400 .55em verdana, arial, sans-serif; 
  color: #000;  
  background: url(bullet.gif) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:hover {
  color: #fff;
  background: #000080 url(bullet.gif) no-repeat 10px 0px;
}



/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/

#header {
  position: relative;
  height: 215px;
}

/* Holds the site title and subtitle */
#header #title {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 40px;
  padding: 5px;
  text-align: left;
}

#header #titleindex {
  position: absolute;
  z-index: 3;
  top: 160px;
  left: 40px;
  padding: 5px;
  text-align: left;
}

#subtitle {
  position: absolute;
  z-index: 3;
  top: 305px;
  left: 80px;
  padding: 5px;
  text-align: left;
}

#header h1 {
  margin-top: 135px;
  padding: 0;
  font: 700 3em "trebuchet ms", serif;
  letter-spacing: -3px;
  text-transform: lowercase;
  color: #ff9900;
}

#header h2 {
  position: absolute;
  padding: 10px 5px 0 0;
  font: 700 1em "trebuchet ms", serif;
  text-transform: lowercase;
  color: #00F0EC;
}


/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

#page_index {
  float: left;
  width: 1007px;
  clear: both;
  background: url(bluefade_index.jpg) ; 
  padding : -2em 2em 4em 2em;
}


#page_findus {
  float: left;
  width: 100%;
  clear: both;
  background: url(bluefade_findus.jpg) ; 
  padding : -2em 2em 4em 2em;
}

#page {
  float: left;
  width: 100%;
  clear: both;
  background: url(bluefade.jpg) repeat-x bottom left; 
  padding : -2em 2em 4em 2em;
}
  
 
/**************************************************************
   used to control data page color
 **************************************************************/
.data {
  margin: 3em 2em 5em 0;
  background: #fff;  
  padding: 0 20px 0 30px; 
  text-align: left;
}


.datatitlepage {
  margin: 3em 2em 5em 0;
  background: #fff;  
  padding: 0 20px 0 30px; 
  text-align: center;
}

#statement {
  width: 210px;
  margin-left: 10px;
}

#scripture {
  width: 210px;
  margin-left: 10px;
  text-align: justified;
}

#verse {
  width: 210px;
  margin-left: 15px;
}

#footer {
  float: left;
  width: 1007px;
  clear: both;
  background: url(footer9.jpg) repeat-x top left;
  background-color: #F5F5DD;
  padding: 0 0 10px 10px;
}

/* Sets the width of the footer content */
#footer #width {
  float: right;
  z-index: 3;
  font-size: 0.85em;
  padding: 30px 10px 0 0;
}



/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {
  width: 100%;
}

.width75 {
  width: 74%;
}

.width50 {
  width: 49.7%;
}

.width33 {
  width: 32.7%;
}

.width25 {
  width: 24.7%;
}



/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
  margin-top: -16px;
  font: 11px verdana; 
  text-align: left;
}

.floatRight {
  float: right;
  font: 11px verdana;
  margin-top: -15px;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}


  #content5 {
  width : 80%;
  margin-right : auto;
  margin-left : 118px;
  padding: 0;
  text-align : center;
}
  #parish {
float: right;
position: absolute;
height: 300px;
width: 1007px;
}


#parish1X {
float: right;
position: absolute;
height: 300px;
width: 821px;
margin: 0 0 0 184px;
Z-index: 100;
}
 
#layer {
position: absolute;
height: 130px;
width: 74px;
margin: -205px 0 0 585px;
Z-index: 100;
}

#layer2 {
position: absolute;
height: 130px;
width: 150px;
margin: -10px 0 0 390px;
Z-index: 100;
}

#layer3 {
position: absolute;
height: 130px;
width: 150px;
margin: -10px 0 0 395px;
Z-index: 100;
}

#layer4 {
position: absolute;
height: 100px;
width: 150px;
margin: 40px 0 0 210px;
Z-index: 100;
}

#layer5 {
position: absolute;
height: 100px;
width: 150px;
margin: 30px auto 0 -375px;
Z-index: 100;
}

#layer6 {
position: absolute;
height: 130px;
width: 150px;
margin: 50px 0 0 625px;
Z-index: 100;
}

#layer7 {
position: absolute;
height: 100px;
width: 150px;
margin: -100px 0 0 225px;
Z-index: 100;
}

#layer8 {
position: absolute;
height: 55px;
width: 201px;
margin: -45px 0 0 365px;
Z-index: 100;
}
#funnight {
position: absolute;
margin: 10px 0 0 330px;
Z-index: 100;
}
#garagesale {
position: absolute;
margin: 25px 0 0 370px;
Z-index: 100;
}
#families_hornby {
position: absolute;
margin: 20px 0 0 400px;
Z-index: 100;
}
#orchestra {
position: absolute;
margin: 0 0 0 440px;
Z-index: 100;
}
#sideimage {
position: absolute;
margin: -465px 0 0 500px;
Z-index: 100;
}
#bottomimage {
  margin: -50px 150px 0 0;
  float: right;
  
}
#festive {
position: absolute;
margin: 25px 0 0 450px;
Z-index: 100;
}
#carols {
position: absolute;
margin: 25px 0 0 485px;
Z-index: 100;
}
#carols_2 {
position: absolute;
margin: 15px 0 0 485px;
Z-index: 100;
}
#candle {
position: absolute;
margin: 0px 0px 0px 0px;
Z-index: 100;
}
#message {
position: absolute;
margin: 10px 0px 0px 0px;
Z-index: 100;
}
#message 2 {
position: absolute;
margin: 10px 0px 0px 300px;
Z-index: 100;
}
#fete {
position: absolute;
margin: -45px 0 0 440px;
Z-index: 100;
}

/**************************************************************
   Generic display classes
 **************************************************************/

.clear {
  clear: both;
}

.block {
  display: block;
}

.small {
  font-size: 0.8em;
}

.green {
  color: #A1FF45;
}

.red {
  color: #EA1B00;
}

.grey {
  color: #666;
}

.grey a {
  color: #999;
}

.grey a:hover {
  color: #EEE;
}

q:before, q:after { content: ""; }


a { color: blue; background-color: ; }
a:visited { color: #9900cc; }
a:hover { color: red; border: 0px outset; background-color: #f5f5fa;}
a:active { color: purple; border: 0px inset; padding: 0px; background-color: #f5f5fa; 
}

  span.c34 {color: #cc0066; font-family: Lucida Casual, Comic Sans MS; font-size: 17px;  }
  span.c33 {color: #9900cc; font-family: trebuchet MS; font-size: 20px; }
  span.c32 {color: #0000ff; font-family: trebuchet MS; font-size: 20px; }
  span.c31 {color: #000; font-family: trebuchet MS; font-size: 18px; text-align: center; font-weight: bold; background: #33ff00; }
  span.c30 {color: #9900cc; font-family: Lucida Calligraphy; font-size: 17px; text-indent: 1cm; }
  p.c29 {color: ff0000; font-family: arial, verdana; font-size: 24px; text-align: left; line-height: 1.5; }	
  span.c28 {font-family: VERDANA; font-size: 13px; color: #000; text-align: left;}  
  span.c27 {font-family: VERDANA; font-size: 70%; text-align: center; color: #cc00ff; }
  span.c26 {color: #ff66cc; font-family: Comic Sans MS; font-size: 18px; text-align: center; line-height: 2.5; }
  span.c25b {color: #0000ff; font-family: Verdana, Helvetica, Arial; text-align: left; font-size: 15px; line-height: 1.5; }
  span.c25a {color: #000080; font-family: Verdana, Helvetica, Arial; font-size: 16px; text-align: center; line-height: 1.5; text-decoration: none; }
  span.c25 {color: #000080; font-family: Verdana, Helvetica, Arial; text-align: left; font-size: 15px; line-height: 1.5; }
  p.c24 {color: 9999ff; font-family: Comic Sans MS; font-size: 16px; text-align: center; line-height: 1.5; }
  span.c23 {color: #ff0000; font-family: Ignacious; font-size: 32px; text-align: center; }
  span.c22b {color: #000080; font-family: Arial; font-size: 18px; font-weight: bold; text-align: center; }	
  span.c22a {color: #ffffff; font-family: Arial; font-size: 18px; font-weight: bold; text-align: center; }	
  span.c22 {color: #000080; font-family: Arial; font-size: 16px; font-weight: bold; text-align: center; }	
  p.c21 {color: #000080; font-family: Arial; font-size: 170%; font-weight: bold; }	
    span.c20 {font-family: Comic Sans MS; font-size: 100%; color: #9999ff; text-align: left; line-height: 1.5; }
  p.c19 {font-family: Comic Sans MS; font-size: 110%; color: #9900cc; text-align: center; line-height: 2; }
  p.c18 {font-family: VERDANA; font-size: 70%; text-align: center; color: #cc00ff; }
  p.c17 {color: #cc33cc; font-family: Comic Sans MS; font-size: 18px; text-align: center; line-height: 1.4; }
  u.c16 {color: #ff8000; font-family: Arial; font-size: 110%; }
  p.c15 {text-align: center; }
  p.c14 {color: #0000ff; font-family: Verdana; text-align: center; font-size: 80%; font-weight: bold; }
  p.c13 {color: #ee6d0f; font-family: Comic Sans MS; font-size: 16px; text-align: center; line-height: 1.5; }		  
  span.c12a {color: #0000ff; font-family: Comic Sans MS; font-size: 18px; text-align: left; font-weight: bold; background-color: #ffff00;}  	
  p.c12 {color: #b01ee8; font-family: Comic Sans MS; font-size: 120%; text-align: center; line-height: 2; }
  p.c11 {color: #0000ff; font-family: Verdana; font-weight: bold; text-align: center; font-size: 80%; }
  p.c10 {font-family: VERDANA; font-size: 70%; text-align: center; color: #cc00ff; }
  p.c9a {color: #ff0000; font-family: Verdana; text-align: center; font-size: 90%; line-height: 1.5; }
  p.c9 {color: #0000ff; font-family: Verdana; text-align: center; font-size: 90%; line-height: 1.5; }
  p.c8 {text-align: left; }
  p.c7 {color: #000080; font-family: arial; text-align: left; font-size: 16px; line-height: 1.3; }
  a.c6a {font-family: Comic Sans MS; font-size: 100%; color: #0000ff; text-align: left; line-height: 1.5; }
  span.c6 {font-family: Comic Sans MS; font-size: 100%; color: 9999ff; text-align: left; line-height: 1.5; }
  a.c5a {color: #0000ff; font-family: Lucida Casual; font-size: 13px; text-align: center; line-height: 1.5; text-decoration: none; background-color: #eeffcc; font-weight: bold;} 
  u.c2a {color: #000; font-family: arial; font-size: 16px; text-align: center; font-weight: bold; line-height: 2.5; } p.c4 {color: #000080; font-family: trebuchet ms, serif; font-size: 18px; text-align: left; }
  span.c5 {color: #ee6d0f; font-family: Comic Sans MS; font-size: 16px; text-align: left; line-height: 1.5; }
  span.c4 {color: #000; font-family: Verdana; text-align: center; font-size: 12px; line-height: 2; }
   span.c3q {color: #0000ff; font-family: lucida Casual; font-size: 18px; text-align: center; line-height: 2; } 
  span.c3p {color: #0000ff; font-family: trebuchet ms, VERDANA; font-size: 17px; text-align: left; line-height: 2; }
  span.c3o {color: #330099; font-family: lucida bright; font-size: 16px; text-align: center; line-height: 2; } 
  span.c3n {color: #ff00cc; font-family: dolphin; font-size: 24px; text-align: left; line-height: 2; } 
  span.c3m {color: #000; font-family: VERDANA; font-size: 14px; background-color: yellow; text-align: left; line-height: 2; } 
  span.c3l {color: #ff6633; font-family: Trebuchet MS; font-size: 18px; text-align: left; line-height: 2; }
  span.c3k {color: #ff0000; font-family: VERDANA; font-size: 14px; text-align: left; line-height: 2; } 
  span.c3j {color: #0000ff; font-family: VERDANA; font-size: 14px; text-align: left; line-height: 2; }  
  span.c3i {color: #000; font-family: VERDANA; font-size: 14px; text-align: left; line-height: 2; background-colorq #ccccff; } 
  span.c3h {color: #ff0000; font-family: Lucida Casual; font-size: 50px; }
  span.c3g {color: #0000ff; font-family: lucida bright; font-size: 16px; text-align: center; line-height: 2; } 
  span.c3f {color: #0000ff; font-family: trebuchet ms, VERDANA; font-size: 14px; text-align: left; line-height: 2; } 
  span.c3e {color: #000; font-family: dolphin; font-size: 20px; text-align: left; line-height: 2; } 
  span.c3d {color: #0000ff; font-family: VERDANA; font-size: 14px; line-height: 2; } 
  span.c3c {font-family: arial, Verdana; font-size: 14px; text-decoration: none; line-height: 1.2; }
  span.c3b {color: #000; font-family: VERDANA; font-size: 14px; text-align: left; line-height: 2.5; }  
  span.c3a {color: #fff; font-family: trebuchet ms, serif; font-size: 4em; text-align: left; padding-top: 70px; }
  span.c3 {color: #000; font-family: VERDANA; font-size: 14px; text-align: left; line-height: 2; } 
  span.c2f {color: #ff0000; font-family: verdana; font-size: 16px; text-align: left; font-weight: bold; }
  span.c2e {color: #fff; font-family: Arial; font-size: 14px; text-align: center; line-height: 1.3; }
  span.c2d {color: #cc66ff; font-family: arial; font-size: 16px; text-align: center; font-weight: bold; line-height: 2.5; }
  span.c2c {color: #99cbff; font-family: Arial; font-size: 16px; text-align: center; font-weight: bold; line-height: 1.7; }
  span.c2b {color: #00ffff; font-family: arial; font-size: 16px; text-align: center; font-weight: bold; line-height: 2.5; }
    span.c2a {color: #000000; font-family: arial; font-size: 28px; text-align: left; font-weight: bold; line-height: 2.5; }
  span.c1 {color: #000080; font-family: VERDANA; font-size: 90%; text-align: left; line-height: 1.6; }
  p.c2 { color: #000; font-family: VERDANA; font-size: 16px; font-weight: bold; text-align: left; line-height: 1.6; } 
  p.c1 { color: #000; font-family: VERDANA; font-size: 11px; text-align: left; }
  span.c0 {color: #0000ff; font-family: VERDANA; font-size: 14px; text-align: left; line-height: 1.6; text-indent: 4em; }
  
  
  p.c0 { color: #ff0000; font: trebuchet ms; font-size: 24px; font-weight: bold; background-color: #ccccff; }