@charset "iso-8859-1";
/* author: tre@hotmail.com */
/* Creation date: 5/29/2007 */
/*GENERAL CSS LAYOUT*/
/*1)I will start with basic page information like body,p,h1,h2*/
/*2)next are the custom DIV areas*/
/*3)miscellaneous style code*/

.fix {
	background:#eoeoeo;
}

/*=========*/
body {
	font-family:"Arial", sans-serif;
	background-image:url(http://www.FCLWD.com/images/Background/FCLWD-Background-Short-Top-.jpg);
	background-repeat:no-repeat;
	/*background-color:#ffffff;
	scrollbar-3d-light-color: white;
	scrollbar-arrow-color: blue;
	scrollbar-base-color: blue;
	scrollbar-dark-shadow-color: blue;
	scrollbar-face-color:white;
	scrollbar-highlight-color: black;
	scrollbar-shadow-color: blue;*/
}

/*=========*/
/*DELETE SOON*/

/*
.p {This is for places that need a p style but don't look correct with the carriage return
	font-family:"Arial", sans-serif;
	font-size: .8em;
}

.para {	This is the main font style for the page
font-family:"Arial", sans-serif;
text-indent: 2em;
}

.paraNoIndent {Sometimes there 
is a need for a "para" class without the indenting of the 1st line.
font-family:"Arial", sans-serif;
}

.addressInfo {Use this class to highlight address info
	font-variant:small-caps;
	font-weight:bold;
}
.subtitleUnderline {Replace H3
	font-size: 1.0em;
	font-family: "Arial", sans-serif;
	font-weight:bold;
	font-variant: small-caps;
	text-decoration:underline;
}

h1 {DELETE-H1 is used for the main titles inside the content.
I started out by making this REALLY big font. I expect it will need to be shrunk down a bit.
	font-size: 1.4em;
	font-family: "Arial", sans-serif;
	font-weight:bold;
	font-variant:small-caps;
	text-decoration:underline;
	I added this line to deal with the spacing between the headline tags
}

h2 {DELETE-H2 will be used for sub headings in #mainContent. If the H1 font-size changes from 21px then this will need to change size also
	font-size: 1.0em;
	font-family: "Arial", sans-serif;
	font-weight:bold;
	font-variant: small-caps;
I added this line to deal with the spacing between the headline tags
}

h3 {DELETE-This doesn't have a conventional use yet. I am sure I will use it for something in the future. It is supposed to be smaller than the H2
	font-size: 1.0em;
	font-family: "Arial", sans-serif;
	font-weight:bold;
	font-variant: small-caps;
	text-decoration:underline;
	I added this line to deal with the spacing between the headline tags
}
*/

/*=========*/
/*Text Transformation*/
p{	/*This is the main text for the page*/
	font-family:"Arial", sans-serif;
	color:black;
	text-align:justify;
}

/*This should be used with the <font> tag it is designed to mimic the normal <p> tag. Use for areas where I can't place a <p> tag. Usually this happens because the carriage returns don't work in the intended space.*/
.text {	/*This is use in a <font> tag*/
	font-family:"Arial", sans-serif;
	text-align:left;
}

.wtext {	/*This is use in a <font> tag*/
	font-family:"Arial", sans-serif;
	text-align:left;
	font-size:.8em;
}

.stext {	/*This is use in a <font> tag*/
	font-family:"Arial", sans-serif;
	text-align:left;
	font-size:.8em;
}

.jtext { /*this is for the justified text in a <font> tag*/
	font-family:"Arial", sans-serif;
	text-align:justify;
	}

	
.title {/*Replace H1*/
	font-size:1.6em;
	font-family:"Arial", sans-serif;
	font-weight:bold;
	font-variant:small-caps;
}

.subtitle {/*Replace H2*/
	font-size:1.4em;
	font-family: "Arial", sans-serif;
	font-weight:bold;
	font-variant: small-caps;
}

.footerFont {/*used at the bottom of all mainContent DIV's*/
	font-family:"Arial", sans-serif;
	font-size:.8em;
}

.crumb {/*this is for the breadcrumb nav at the top*/
		font-size:.8em;
}

/*=========*/
/*The following code is to change the color and style of the FCLWD when it is presented in the website.
.fclwdColor p{
	font-color:blue;
}

.sfcsdColor p{
	font-color:#00C000;
	}
*/

/*=========*/
/*Add style for tables so they look presentable.
Leave the tables tag alone. It controls the menu also.
table {}
td {}
th {}
tr {}
*/

/*=========*/
/* Need to change these colors to go with FCLWD site.
A:link {text-decoration: none}
A:visited {
	text-decoration: underline;
	color:black;
}

A:active {text-decoration: none}
A:hover {
	text-decoration: underline;
	color: #0000ff;}
*/

/*=========*/
/*This is for the future. I want the links to act differently depending on how the page is laid out.
.mainContentLink A:link {text-decoration: none}
.mainContentLink A:visited {text-decoration: none}
.mainContentLink A:active {text-decoration: none}
.mainContentLink A:hover {text-decoration: underline; color: red;}
.leftGutterLink A:link {text-decoration: none}
.leftGutterLink A:visited {text-decoration: none}
.leftGutterLink A:active {text-decoration: none}
.leftGutterLink A:hover {text-decoration: underline; color: red;}
*/

/*=========*/
/*tables*/

.tableBlue {
	background:#99ccff;
	border:1px;
border-style:solid;
border-color:black;
}

.tableYellow {
	background:#ffcc00;
	border:1px;
border-style:solid;
border-color:black;
}

.tableGray {
	background:#E0E0E0;
	border:1px;
border-style:solid;
border-color:black;
}

.tableDarkGray {
	background:#666666;
	border:1px;
border-style:solid;
border-color:black;
}

.tableCenter {
	text-align: center;
		border:1px;
border-style:solid;
border-color:black;
}

/*=========*/
/*Div elements*/
div#footer A:link {text-decoration:none}

div#footer A:visited {text-decoration:none}

div#topBanner{/*This will hold the banner at the top of the page*/
	background-image:url(http://www.fclwd.com/images/Banner.jpg);
	background-repeat:no-repeat;
	overflow: hidden;
	height:136px;
	/*width:100%;*/
	width:952px;
	position: absolute;
	top:0px;
	left:0px;
	border:1px;
	border-color:black;
}

/*
div#leftGutter{Currently Unused. The new menu does not show in the DIV tag. This will hold the menu and address. All the information that I plan to have on the left side of every page.
	position: absolute;
	top: 115px;
	left: 15px;
	float: left;
	width: 165px;
	overflow: hidden;
}
*/

div#mainContent{/*This will the main content for the page*/
	background-color:white;
	position:absolute;
	/*top: 115px;*/
	top:137px;
	left:176px;
	float:left;
	width:570px;
	overflow:hidden;
	padding-left:.8em;
	padding-right:1.6em;
	padding-top:1.2em;
	/*background:blue;
 border:1px solid dashed;*/
}

/*This code is for positioning the calendar properly on the first page
div#calendar{
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
	background-position:center;
	top:128px;
	left:500px;
	position:absolute;
}
*/

div#footer {/*This is based on website space. I would love to have a simple summary of the information that is on the left of the page like our address, phone number, name, etc...*/
	bottom:.8em;
	text-align:center;
	position:relative;
	text-decoration:none;
	border-top:black;
	border-top-style:double;
}

div#section {/*This is the label at the top of each page section*/
	background:#E0E0E0;
	text-align:left;
	vertical-align:middle;
}

div#buttons {/*This is the column of buttons on the right side of the screen*/
	position: absolute;
	/*top:115px;*/
	top:137px;
	left:752px;
}