/*  
Website: http://joyal-homes.com
Name: Joyal Construction
Description: CSS based website, designed and hosted by Artemis Inc.
Version: 1.0
Author: Jefte Puente
Author URI: http://www.artemisit.com
Comments: This stylesheet is best viewed without word wrapping
*/


/* Body Styles */

body { background-color: #b0a8a6; background-attachment: fixed; color: #000;  font-size: 62.5%; font-family: Arial, Verdana, Sans-serif; } /**** This percentage sets 1.0 em to 10px. Lucida is a nicer mac font than Arial, it ships with all new macs and XP ****/
#page { display: block; overflow: hidden; margin: auto; padding: 7px; width: 925px; background: white; border-right: 2px solid #888; border-bottom: 2px solid #888; }
#header { width: 100%; height: 77px; background: url('/images/header.jpg'); }
#logo {float: left; width: 209px; margin: 0 7px 7px 0; }
#headertext {height: 77px; background: #edddba url('/images/bd_headertext.jpg') no-repeat 10% 50%; margin: 0 0px 7px 0; width: 708px; float: left; }
#header_photo { background-image: url('/images/bd_photo.jpg'); float: left; width: 707px; height: 285px;}
#side_blank { background: #d5cab5; padding: 10px; width: 190px; float: left;}
#side_addy { float: left; font-size: 1.2em; border-bottom: 7px solid white; background: #f0e9dc; padding: 10px; width: 190px;  margin: 0 0px 7px 0;}


/*** Page Title Styles ***/
#pagetitle h2 { font-size: 22px; font-weight: bold; margin-bottom: 10px;}

/* Heading Styles */
h1 { display:none } 
h2 { margin: 0px; font-size: 24px; margin: 0px; letter-spacing: -1px; font-weight: bold; color: #744817; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; } 
h3 { margin: 0; font-size: 20px; margin: 0px; letter-spacing: -1px; color: #A36B2A; font-weight: bold; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; } 
h4 { margin: 0; font-size: 18px; font-weight: bolder; letter-spacing: -1px; margin: 0px; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; } 
h5 { margin: 0; font-size: 16px; font-weight: bolder; letter-spacing: -1px; margin: 0px; color: #777; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;}
hr { display:none } /* Horizontal Rules are hidden from standard browsers and screen readers, yet are visible in text-only browsers to help seperate content from nav.  */

/* Form Styles */
#Telephone, #FAX, { width: 100px; }
#State { width: 20px; float: left; }
#ZipCode { width: 35px; }
#Address { width: 180px }
#Comments { height: 55px; width: 250px; margin-bottom: 10px; }
form, br { clear: left; }
.submit { width: 50px; margin: auto; background-color: white; border: 1px solid brown; margin-right: 10px; }

/* Table Styles - Tables are for tabular data */
table { clear: both; width: 100%; margin: 0; background-color: #ffffff; border-collapse: collapse;}
td { padding: 6px;}
.altrow { background-color: #e5e5e5; }


/* Content Styles */
p {font-size: 14px; line-height: 160%; margin: 0 0 12px 0;}
.altbox { background-color: #E5DDCF; padding: 10px; margin-bottom: 15px;}
#column_container { float: left; display: block; overflow: hidden; width: 100%; background-image: url('images/bd_side.gif');}
#content { float: left; padding: 20px; margin: 0px; margin-bottom: 0px; width: 664px; font-size: 14px;  line-height: 160%;} 
#content ul, #content ol { font-family: Arial, Verdana, Sans-serif; margin-bottom: 20px; margin-top: 15px;}
#sidebar { float: left; width: 210px; margin: 0 7px 0 0;} 
.footer { margin: auto; width: 935px; padding: 4px 2px; color: #666; text-align: center; }
.footer p {text-align: left; float: left; width: 225px; font-size: 10px; color: #666;}
#footershim {clear: left; }
#footer_logos { width: 650px; float: left; height: 60px; background: white; margin: 0 0 0 250px; }

blockquote { font-weight: bold; font-size: 1.2em; line-height: 125%; }
a:link { color: #714A13; }
a:visited { color: #714A13; }
a:hover { color: #A36B2A; }

.smallbold { font-size: 11px; font-weight: bolder; }

.hr { border-top: 1px solid #294622; width: 270px; height: 1px; margin: 0 0 0 7px; padding: 0; } /* Inconsistant HR styling across browsers forces the use of a div with this class in lieu of the hr xhtml markup */

/* Misc Styles */
.contactinfo { width: 300px; background: #dbd5c2; padding: 10px; height: 155px; font-size: 1.1em;}

/* Navigation - Uses an unordered list and styles them as buttons */

#navcontainer { float: left; border-bottom: 7px solid white; width: 210px; background-color: #eadec5; }
#navcontainer ul { padding: 0; }
#navcontainer ul li { display: inline; }
#navcontainer ul { margin: 0; padding: 0 0 0 0; color: #000; font-family: arial, helvetica, sans-serif; font-size: 1.2em; letter-spacing: 0px; font-weight: normal; }
#navcontainer ul li a
{
padding: 3px 12px;
width: 186px;
background-color: #eadec5;
color: #494949;
text-decoration: none;
float: left;
font: bold 1.2em/24px arial, helvetica, sans-serif;
}

#navcontainer ul li a:hover
{
background-color: #9a8d71;
color: #fff; 
}

#mainNavlist li a:hover, #navlist li a:active
{
color: #60785a;
text-decoration: none;
background: #9a8d71;
text-align: left;
font: bold 1.2em/24px arial, helvetica, sans-serif;
}

#mainNavlist li a:hover { }

/* Footer Navigation */
#nav { color: white;  } 
ul#footerNavlist { width: auto; height: 20px; float: right; white-space: nowrap; padding-top: 0px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px; }
#footerNavlist li { display: inline; list-style-type: none; }
#footerNavlist a:link, #footerNavlist a:visited { padding: 3px; color: #666; line-height: 16px; text-decoration: none; }
#footerNavlist a:hover { padding: 3px; color: #333; background-color: #c8c8c8; text-decoration: none; }

/* Images & Alignments

	Using 'class="alignright"' on an image will align the image to the right. 
	And using 'class="centered', will of course center the image. This is much
	better than using align="center", being much more futureproof (and valid)              */
	
img.centered { display: block; margin-left: auto; margin-right: auto; border: none;}
img.alignright { padding-left: 8px; margin: 0 0px 10px 10px; display: inline; border: none; }
img.alignleft { padding-right: 8px; margin: 0 10px 10px 0px; display: inline; border: none; }
.alignright { float: right; }
.alignleft { float: left; }


/* Hacks - May become outdated when/if IE ships with proper CSS support */

div.spacer {
	clear: both;
} /* The infamous "clear div" or "spacer div" hack. An empty div placed below floated divs that clears the floats, so that content can continue to flow below the clear. http://www.complexspiral.com/publications/containing-floats/ */



.paraleft { display:block; float:left; width: 350px; height:212px; padding: 5px;  }
.paracenter { display:block; float:left; width: 450px; text-align:center;  }
.pararesults { display:block; float:left; text-align:left;  }
.paragraphimage { width: 220px; display:block; float:left; }
.team_row {float: left; margin-bottom: 30px;}
.teamtitle { display: block; margin: 0 0 0 0px; }
.testimonialtext { font-size: 1.0em; margin: 0px 15px 15px 15px; background: #F0E9DC url('images/quotes.gif') no-repeat; padding: 20px;}
.texthalfblock { width: 330px; display:block; float:left; }
.texthalfblock a { display: block; margin: 0 0 10px 10px; padding: 8px; width: 270px; border: 1px solid #D5CAB5;}
.texthalfblock a:hover {background: #F0E9DC;}
.texthalfblock img { float:left; display: block; text-decoration: none; margin: 0 5px 0 0; }
.galhalfblock a img:hover { background: #D5CAB5; }
.galhalfblock img { padding: 5px; border: 1px solid #D5CAB5; margin: 15px 20px 25px 20px; }
.galhalfblock { width: 332px; display: block; float:left; }
.galhalfblock a { display: block; text-decoration: none; }
.halfblock { width: 332px; display: block; float:left; }
.halfblock a { display: block; float: left; text-decoration: none; }
.fullblock { width: 600px; display: block; float:left; } 
.communityblock {float: left; display: block; width: 209px; height: 303px; border: 1px solid #D5CAB5; margin: 0 10px 10px 0; }
.communityblock h5 { display: block; background: #F0E9DC; color: #744817; padding: 5px; height: 34px; line-height: 16px; letter-spacing: -1px; font-size: 1.3em; font-weight: bold;} 
.communityblock .description {display: block; line-height: 120%; margin: 0; padding:4px; width: auto; height: 80px; }
.communityblock img { }
.communityblock a {text-decoration: none; }
.communityblock h3 { letter-spacing: -1px; }
.communityblock .price { margin: 0px 0 0px 0; padding: 4px; height: 22px; background: #F0E9DC; width: 201px;}
.price p {font-weight: bold; color: #9A8D71;}
#communityimgcontainer {overflow:hidden; height: 140px; width: auto;}