/* ------------------------------

site: Fairhaven Memorial Services 
last date: 03/30/08
author: Chad Cross @ juxtaflo.com
url: fairhavenmemorialservices.com

------------------------------ */

/* ------------------------------

Pixel to em conversions:
16 x 1.5em = 24px
16 x 1.25em = 20px
16 x 1.125em = 18px
16 x 1em = 16px
16 x 0.875em = 14px
16 x 0.75em = 12px

Colors:
#333 - 
#887c6b - brown
#444 - Gray
#006666 - 
#bfbcb4 - 
#6f6f69 - 

------------------------------ */

/* GLOBAL
------------------------------ */
html, body { background: #887c6b url(../images/bkgnd_page.gif) repeat-x top left; font-family: Verdana, Helvetica, sans-serif; color: #000; font-size: 12px; margin: 0; padding: 0; line-height: 16px; }
.subhead { color: #006666; border-bottom: solid 1px #bfbcb4; }
.subhead2 { color: #006666; }
.footer { font-size: 10px; color: #6F6F69; }
.note { color: #6F6F69; }
p { margin: 0 0 20px 0; }


/* HEADINGS
------------------------------ */
h1 { font-family: Times New Roman, Times, serif; font-size: 20px; font-weight: normal; color: #444; text-transform: uppercase; margin: 0 0 15px 0; }
h2 { font-size: 12px; color: #006666; border-bottom: solid 1px #bfbcb4; }
h3 { color: #444; text-transform: uppercase; }
h4 { color: #444; text-transform: uppercase; }

/* TABLE
------------------------------ */

/* IMAGES
------------------------------ */
img { border: 0; }
img.contentImage { border: solid 1px #bfbcb4; }
.buttonImage { margin: 0 10px 0 0; }


/* LISTS
------------------------------ */
ul { margin-bottom: 20px; }
	li { margin-bottom: 5px; }


/* HEADER
------------------------------ */
#header { width: 750px; margin: 0 auto 0 auto; padding: 0; border-left: solid 3px #000; border-right: solid 3px #000; border-bottom: solid 3px #000; }


/* PRIMARY NAV
------------------------------ */
ul#nav { background: url("../images/bkgnd_nav.jpg"); width: 730px; height: 31px; border-left: solid 3px #000; border-right: solid 3px #000; border-bottom: solid 3px #000; margin: 0 auto 0 auto; padding: 0 10px 0 10px; list-style-type: none; }
	#nav li { float: left; height: 23px; margin: 0 20px 0 0; padding: 8px 0 0 0; }
		#nav li:hover { background: #000; }
		#nav li a:link { margin: 0; padding: 0 10px 0 10px; font-weight: bold; text-decoration: none; color: #efefef; }
		#nav li a:visited { margin: 0; padding: 0 10px 0 10px; font-weight: bold; text-decoration: none; color: #efefef; }
		#nav li a:hover { margin: 0; padding: 0 10px 0 10px; font-weight: bold; text-decoration: none; color: #fff; }
		
/* SECONDARY NAV
------------------------------ */
ul#subnav { background: transparent; margin: 0 0 20px 0; padding: 0; list-style-type: none; overflow: hidden; }
	#subnav li { float: left; margin: 0; padding: 0 10px 0 0; }
			#subnav li:hover { background: #000; }
			#subnav li a:link { margin: 0; font-weight: bold; color: #333; }
			#subnav li a:visited { margin: 0; font-weight: bold; color: #333; }
			#subnav li a:hover { margin: 0; font-weight: bold; color: #666; }


/* CONTENT AREA
------------------------------ */
#content { background: #efefef url("../images/bkgnd_right_column.gif") repeat-y right top; width: 750px; padding: 0; margin: 0 auto 0 auto; border-left: solid 3px #000; border-right: solid 3px #000; border-bottom: solid 3px #000; overflow: hidden; /* clearing floats*/ text-align: justify; }
#leftColumn { float: left; width: 556px; padding: 30px 20px 0 20px; margin: 0; }
#rightColumn { background: transparent; float: left; width: 120px; padding: 30px 0 0 14px; margin: 0; }
.footer { border-top: 1px solid #666; padding: 10px 0 10px 0; color: #666; text-align: center; font-size: 11px; }
#adminButton { width:756px; margin:0 auto 0 auto; padding:0; text-align:left; font-size:11px; }
#adminButton a, #adminButton a:visited { text-decoration: none; padding: 2px; color:#000; border: 2px solid #000; }
/* real form elements /////////////////////////////*/
form { width: 556px; /* hack for IE 6 */ margin: 0 0 20px 0; padding: 0; }
fieldset { border: 0; margin-bottom: 10px; padding: 0 0 10px 0; display: block; }
legend { margin: 0; padding: 10px 0 10px 0; color: #006e61; background: transparent; font-weight: bold; }
label { float: left; width: 100px; padding: 4px 0 0 0; text-align: left; font-weight: normal; }
/* use this for normal input boxes*/
div.fi { margin: 0; padding: 5px 0 5px 0; }
div.fi input { width: 225px; border-top: 1px solid #bfbcb4; border-left: 1px solid #bfbcb4; border-bottom: 1px solid #bfbcb4; border-right: 1px solid #bfbcb4; margin: 3px 0 0 0; padding: 0 0 0 4px; color: #333; }
div.fi textarea { width: 450px; border-top: 1px solid #bfbcb4; border-left: 1px solid #bfbcb4; border-bottom: 1px solid #bfbcb4; border-right: 1px solid #bfbcb4; margin-top: 0; margin-bottom: 0; padding: 0 0 0 4px; color: #333; }
div.fiText { display: block; padding: 0px; text-align: left; margin: 0; padding: 5px 0 5px 10px; }
/* use this when there are multiple inputs like radio buttons or checklists*/
div.fiMulti { margin: 0; padding: 5px 0 5px 0; }
div.fiMulti input { width: 20px; border-top: 0px solid #bfbcb4; border-left: 0px solid #bfbcb4; border-bottom: 0px solid #bfbcb4; border-right: 0px solid #bfbcb4; text-align: left; padding: 4px 0 0 10px; margin-left: 10px; }
div.fiMulti label { float: left; display: block; width: 250px; padding: 0px; text-align: left; padding: 4px 0 0 10px; }
/* use this when there are multiple inputs like radio buttons or checklists and when they need to be side by side*/
div.fiMultiDoubler { width: 510px; margin: 0; padding: 0; }
div.fiMultiFloat { float: left; width: 255px; margin: 0; padding: 5px 0 5px 0; }
div.fiMultiFloat input { float: left; width: 20px; text-align: left; padding: 0; margin: 0 5px 0 0; }
div.fiMultiFloat label { float: left; display: block; width: 195px; text-align: left; padding: 0; }
/* use this when there are nornmal inputs when they need to be side by side*/
div.fiFloat { float: left; width: 235px; margin: 0; padding: 5px 0px 5px 0px; }
div.fiFloat input { float: left; width: 100px; border-top: 1px solid #bfbcb4; border-left: 1px solid #bfbcb4; border-bottom: 1px solid #bfbcb4; border-right: 1px solid #bfbcb4; text-align: left; padding: 0 0 0 4px; margin: 0; }
div.fiFloat label { float: left; width: 100px; padding: 4px 0 0 10px; margin: 0; text-align: left; }
div.fiFloat select { float: left; width: 100px; padding: 0; margin: 0 0 0 10px; text-align: left; }
input.button { border: 1px ridge #BFBCB4; background: #006E61; color: #fff; padding: 1px; font-weight: bold; }
input.buttonMemorial { border: 1px ridge #BFBCB4; background: #006E61; color: #fff; padding: 1px; margin-left: 100px; font-weight: bold; }
/* Tables /////////////////////////////*/

table { margin-bottom: 20px; }
td { padding: 4px; }
td.header { background: #DBD8D0; font: bold 10px Arial; color: #6F6F69; padding: 2px; }