/* Yes, this is a tableless layout, fluid as I can get it. Since we are 
 * not using tables to layout the pages, we will need to do some houdini
 * work in the css.
 */


/* Let's start off with no preconceived spacing shall we? 
---------------------------------------------*/
*,html{margin:0;padding:0;border-width:0;}

  
/* Nothing out of the norm here. I'm centering the body to keep the main body
 * in the middle of the screen. I'm keeping everything under the 800x600 SS since 
 * the main audience for the site still use that resolution (gasp!)
 ---------------------------------------------*/ 
body {
  font: normal small Verdana, Arial, Helvetica, sans-serif;
  background: #fff url(img/bga.gif) repeat; 
  color: #522008;
  /* This is what does the centering. The next set of IDs' finish it. 
  ---------------------------------------------*/
  width:775px;
  text-align: center; 
  margin:.5em auto;
}


 /* Since I'm centering the contents above, I'll need to pop the text back
  * to the left. 
  *
  * I like the thin border to define the contents a bit more.
  *
  * I give each page their own ID and assign it to the BODY tag. We'll put 
  * this to good use later on as well.
  -----------------------------------------------*/
#home,#bldproj,#contact,#olbible,#picts,#servtime,#misc {
  text-align: left;
  border:1px solid #74a2ec;
}



/* The usual content look & feel is taken care of right up front
-------------------------------------------------*/
a,a:link {
  color: #00008b;
  background: transparent;
}
h1,h2,h3,h4,h5,h6 {
	color:#447AE4;
	padding:.7em 1.5em;
}
hr {
	color: #522008;
	height:1px;
}



/* I use unordered list a great deal. I just like
 * the control they give me over the content in each UL & LI.
 *
 * In This case I'm giving them the padding I will need later.
 * Th help the overall appearance, paragraphs get the same padding.
 -------------------------------------------------*/
p,ul,ol,li {
  padding:.4em 1.5em;
  line-height:1.4em;
}
ul {
	list-style: none;
}

iframe {
  border: none;
  width: 500px;
  position:relative;
  left:125px;
  vertical-align: middle;
}


/* Remember the ID's for each page above? You will notice that on each page
 * the BODY tag has the body ID above. You will also notice that the menu links
 * on the top and bottom of the page have a class that is the same name as the 
 * page BODY ID. Below I'm telling the link that is in the BODY ID with the same 
 * class name to be a different color. No need for javascript nasties or extra code
 * here and there to inform the visitors' what page they are on.
 ---------------------------------------------------*/
a:visited,
#home .home,
#bldproj .bldproj,
#contact .contact,
#olbible .olbible,
#picts .picts,
#servtime .servtime {
	color:#708090;
}
a:hover,a:active {
  color: #ff0000;
  text-decoration: none;
  background: transparent;
}


/* Fieldsets are great. Use them for all forms 
 * Since IE 6+ rounds the corners on fieldsets
 * I've added the Mozilla moz-border-radius
 * for rounding the same on Moz browsers
 --------------------------------------------------*/
fieldset {
	text-align:left;
	background:#fff;
	padding:.4em;
	width:50%;
	position: relative;
	left:2.5em;
	border:1px solid #000;
	-moz-border-radius:7px; /* CSS Validator craps on this but I don't care, I like it... */
}



/* Gives a bit more scoosh to the filedset header and 
 * turns the font to bold.
 --------------------------------------------------*/
legend {
	padding:0 10px;
	font-weight: 700;
}


/* Just some classes for the form fields. Should 
 * be self explanitory. Used on feedback page.
 ---------------------------------------------------*/
.inputText,
.inputButton {
	border:1px solid #000;
	background: #fff;
	color: #522008;
	margin:.2em .3em;	
	overflow: hidden;
}
.inputButton {
  cursor: help;
}
.inputRadio {
	vertical-align: middle;
	background: #fff;
	color: #522008;
	margin:.1em .3em;	
}
.req {
	color:#ff0000;
}
address {
  float:right;
  background: transparent;
  text-align: left;
  position: relative;
  margin:15px;
  font-size:.8em;
  width:33%;
}


/* Buolding progect page. stuff.
----------------------------------------------------*/
#bldproj blockquote {
  margin:0 35px;
  padding:0 5px;
  border: 4px double #000;
}




/* Header Items.
   Top menu positioning and look
   --------------------------------------------------*/
#topmenu {
  text-align: right;
  background: #74a2ec;
  display: block;
  font-weight:100;
}
#topmenu a {
	color:#fff;
	text-decoration: none;
	border-right: 1px solid #fff;
	padding:.2em .3em .2em .2em;
}
#topmenu a:hover {
	color:#ff0000;
}
.nobord {
	border:none !important; /* Gets rid of that last right side border on the last link of the menu*/
}

/* Header graphic holder for building.
  -----------------------------------*/
#bldblueprints {
 background: url(img/bld_fade_2.jpg) no-repeat 74px 0;
 float:right;
 height:97px;
 width:363px;
 }
/* Du, kids holder 
-------------------------------------*/
#headerkids {
  background: url(img/kids.gif) no-repeat;
  height:133px;
  width:265px;
  left: 25px;
  top:-10px;
  position: relative;
 }
/* Gradient holder where church name is.
--------------------------------------*/
#headergraid {
 background: #fff url(img/graidient_blue.gif) repeat-x;
 height:112px;
 color: #f3f3f3;
 padding:0 .4em; 
 margin-top:-36px;
 letter-spacing:.2em;
 clear:right;
 font: italic small-caps 100 260%/140% "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
 line-height:1.5em;
 }


/*----------------------------------------------*
  Main content holder for all the other goodies 
 *----------------------------------------------*/
#content {
  background: #fff;
  text-align: justify;
}


/* Holds the picture on the top right of the pages 
-------------------------------------------------*/
.cont-toppict {
  float:right;
  background: transparent;
  text-align: center;
  margin-top:-140px;
  position: relative;
}


/* Each picture gets placed on the left or the right of a page.
   This one places it on the right.
   -------------------------------------------------*/
.cont-rightpict {
  float:right;
  background: transparent;
  text-align: center;
  position: relative;
  margin:15px;
  font-size:.8em;
}
/* ... and this one puts them on the left.
-------------------------------------------------*/
.cont-leftpict {
  float:left;
  background: transparent;
  text-align: center;
  position: relative;
  margin:15px;
  font-size:.8em;
}


/* Bible search filelset
--------------------------------------------------*/
#biblesearch {
  margin:3px 0;
}
#biblesearch img {
  float:right;
}

/* Some pictures are thumbs linked to larger picts. 
   The following style them. See Bld project page for a sample.
-------------------------------------------------*/
.cont-rightpict a {
	text-decoration:none;
}
.cont-rightpict a b,
.cont-rightpict a:hover i {
	display:none;
}
.cont-rightpict a:hover b {
	display: inline;
}


/* The Index page uses a picture menu for the main
    sections. This is the styling for those img links.
-------------------------------------------------*/
#pictlinks {
 height:197px;
 margin:0 2%;
 background:#fff;
 }
#pictlinks a {
  display:block;
  width:190px;
  height:195px;
  float:left;
  overflow: hidden;
  margin:0 -4px;
 }
#pictlinks a:hover {
  background: #fff;
 }
#pictlinks a span {
 	display: none;
 }
#pictlinks a:hover span {
	display: block;
	position: relative;
	bottom:85px;
	left:25px;
	text-decoration: none;
	font-size: 18px;
	color: #ff0000;
 }

 
 /* Footer holder
-------------------------------------------------*/
#footer {
  clear: both;
  text-align:center;
  font-size: 73%;
  padding:15px;
  background: #fff;
}
#footer p {
  margin:20px;
}
#footerlinks a {
  padding:10px;
}


/* Shrink whatever it is to xtra small text.
-------------------------------------------------*/
.xsmall{
	font-size: .7em;
}

/* Verse quotes. Wherever needed.
-------------------------------------------------*/
.quote-vers {
	padding-left:55px;
}



/* Calendar .
-------------------------------------------------*/
#calendar { 
  background:#fff;
  font:.80em "MS Serif","New York",serif;
  border:1px solid #000;
  width:100%;
}
.today {
  background:#b0c4de;
}
.head {
  background:#F0F8FF;
  border-bottom:1px solid #000;
  font-size:1.1em;
}
.day {
  border-bottom:1px solid #000;
}
#evtcal {
  width:190px;
  float:right;
  margin:7px;
}
#evtcal textarea {
  overflow:hidden;
  border:none;
  background:#fff;
  font:1em "MS Serif","New York",serif;
  width:100%;
}
#evtcal td {
  padding:2px;
  text-align:center;
}
#evtcal a {
  color:#004400;
  font-weight:700;
  text-decoration:none;
}
#evtcal a:hover {
  text-decoration:underline;
}
 
 /*
-------------------------------------------------*/