@charset "utf-8";
/* CSS Document */

/* ------- TABLE OF CONTENTS ---------------

    Project:  	Four Seasons Realtors CSS/XHTML     
   Packaged: 	02.04.09
    Version: 	Temp 01 v1.0
     Author: 	Matt Johnson
Last Change:    
 
1. Import Reset and Global Styles
2. Structure Style Declarations 
3. Site Content Style Declarations
4. Typography Style Declarations

---------- END TABLE OF CONTENTS ----------*/

/* ---------->>> 1. Import <<<-----------*/

@import url("/css/reset.css"); /* import the forbin reset style sheet - browser default styles */
@import url("/css/global.css"); /* import the forbin global style sheet - contains common styles */

/* ---------->>> END Import <<<----------*/

/* ---------->>> 2. Structure <<<-----------*/

/* BODY */
body {background:url(../images/bg3.gif) repeat-x #000000;}
	.container {width:966px; margin:0 auto; background-color:#fff;}

/* HEADER */
.header {width:966px; height:117px; background:url(../images/bg_header.jpg);}
	.header a.logo {width:178px; height:96px; left:50px; top:21px; background:url(../images/fourseasons_logo.gif); }
	#date {font-weight:bold; color:#fff; width:350px; position:absolute; top:92px; left:262px; font-size:12px;}

	
/* NAVIGATION */ 
.navigation {width:560px; height:30px; position:absolute; left:405px; top:49px;}
	.navigation li {height:30px; float:left;}
	.navigation li a {height:30px; display:block; text-indent:-9999px; cursor:pointer; background:url(../images/navigation.jpg);}
	.navigation a[title="Return to Homepage"] {width:112px; background-position: 0 0;}
	.navigation a[title="Our Listings"] {width:108px; background-position: -112px 0;}
	.navigation a[title="Agent Directory"] {width:109px; background-position: -220px 0;}
	.navigation a[title="Locate Us"] {width:108px; background-position: -328px 0;}	
	.navigation a[title="Contact Us"] {width:114px; background-position: -437px 0 ;}

	/* Hover */
	.navigation a[title="Return to Homepage"]:hover {background-position: 0 -30px;}
	.navigation a[title="Our Listings"]:hover {background-position: -112px -30px;}
	.navigation a[title="Agent Directory"]:hover {background-position: -220px -30px;}
	.navigation a[title="Locate Us"]:hover {background-position: -328px -30px;}	
	.navigation a[title="Contact Us"]:hover {background-position: -437px -30px ;}

	/* Active */
	body.home-page .navigation a[title="Return to Homepage"] {background-position: 0 -60px;}
	body.listings-page .navigation a[title="Our Listings"] {background-position: -112px -60px;}
	body.agents-page .navigation a[title="Agent Directory"] {background-position: -220px -60px;}
	body.locate-page .navigation a[title="Locate Us"] {background-position: -328px -60px;}
	body.contact-page .navigation a[title="Contact Us"] {background-position: -437px -60px;}

/* Resource Center */ 
#resourceCenter {width:966px; height:158px;}
#resourceCenter li {height:158px; float:left;}
#resourceCenter li a {height:158px; display:block; text-indent:-9999px; cursor:pointer; background:url(../images/resourceCenter.jpg);}
#resourceCenter li a.mortgage {width:242px; background-position: 0 0;}
#resourceCenter li a.afford {width:241px; background-position: -242px 0;}
#resourceCenter li a.analysis {width:242px; background-position: -483px 0;}
#resourceCenter li a.community {width:241px; background-position: -725px 0;}

#resourceCenter li a.mortgage:hover {background-position: 0 -158px;}
#resourceCenter li a.afford:hover {background-position: -242px -158px;}
#resourceCenter li a.analysis:hover {background-position: -483px -158px;}
#resourceCenter li a.community:hover {background-position: -725px -158px;}

/*breadcrumbs*/
#crumbs {
	height:2.3em;
	border:1px solid #dedede;
	}
#crumbs li {
	float:left;
	line-height:2.3em;
	
	padding-left:.75em;
	}		
#crumbs li a {
	background:url(../images/crumbs.gif) no-repeat right center;
	display:block;
	padding:0 15px 0 0;
	}							
#crumbs li a:link,
#crumbs li a:visited {
	color:#024d17;
	text-decoration:none;
	}	
a:link, a:visited,	
#crumbs li a:hover,
#crumbs li a:focus {
	color:#5c2f14;
	}		


/* CONTENT */
.mainContent {}
	.homeContentBG {width:483px; height:298px; background:url(../images/mainContent.jpg) no-repeat; margin:0; padding:0; float:left; position:relative;}
	.homeContentBG .whiteBox {width:410px; height:205px; overflow:scroll; position:absolute; top:45px; left:0; background-color:#fff; opacity:0.9;filter:alpha(opacity=90); padding:0 20px 20px 20px;}
	.subContent {width:955px; background:url(../images/subContent.jpg) no-repeat; background-color:#81b8f0; margin:0; padding:0; float:left; border-left:6px solid #fff; border-right:5px solid #fff;}
	.subContent .whiteBox {width:780px; background-color:#fff; opacity:0.9;filter:alpha(opacity=90); padding:10px 20px 20px 20px; margin:40px 0 20px 0;}

/* FOOTER */
.footer {height:191px;  background:url(../images/footer.jpg) no-repeat; padding:0 10px 0 10px;}
	.footer address {color:white; padding-top:12px; margin-bottom:15px; font-style:normal; font-size:12px;}
	.footer address a {color:#51c575;}
	.footer address a:hover {color:#d1bb6d;}
	.footer h4 { color:#fff; margin:0; font-size:22px;}
	
	.footer .container div {width:256px; float:left;}
	.footer div.nav { padding:0 10px 0 10px;}
		.columnOne {width:150px; float:left; margin-bottom:5px;}
		.footer .container div.nav ul {}
			.footer .container div.nav ul li { height:24px;}
				.footer  div.nav ul li a { text-decoration:underline; font-size:12px; color:#d1bb6d;}
				.footer  div.nav ul li a:hover { color:#51c575;}
		

	
	.footer .container div p {color:#f8f3d5; width:220px; padding-top:3px; line-height:18px;}
	.footer ul li a {color:#f8f3d5; text-decoration:none; line-height:24px;}

	.copyright {color:#e9eee1; padding:10px 0 0 0;}
		.copyright a:link, .copyright a:visited {color:#51c575;}
		.copyright a.nolink {color:#e9eee1; text-decoration:none; cursor:text;}
		.copyright a[title="Visit VGM Forbin"] { color:#51c575;}
		.copyright a:hover {color:#d1bb6d;}
	
	.copyright {clear:left;}
				
/* ---------->>> END Structure <<<----------*/

/* ---------->>> 3. Site Content <<<-----------*/

/* Homepage */
.box {width:248px; margin-top:30px; padding:18px; float:left; -moz-border-radius:10px; -webkit-border-radius:10px; background:#ffffe4; border:1px solid #bfb3a5; }
		.box + .box {margin-left:35px;}
		.box img {margin-bottom:15px;}
		.box p {line-height:18px; clear:left;}
		.box a[title="Read More"] {width:77px; height:25px; display:block; text-indent:-9999px; float:right; background:url(/images/btn_readMore.jpg);}
			.box a[title="Read More"]:hover {background-position:0 -25px;}
#flashcontent {width:483px; height:298px; float:right;}
/* Listings */
.listings {text-align:center; margin:0 auto;}
.listings li a {display:block; text-indent:-9999px; margin:0 0 15px 0;}
.listings li.ourListings a {width:406px; height:111px; background:url(../images/btn_our_listings.gif) 0 0;}
.listings li.ourListings a:hover {background-position: -406px 0;}
.listings li.allListings a {width:406px; height:111px; background:url(../images/btn_our_listings.gif) 0 -121px;}
.listings li.allListings a:hover {background-position: -406px -121px;}
/* Agent Directory */
.agentProfile {width:335px; border:1px solid #ccc; /*background:url(../images/agentBG.gif)top left repeat-x;*/ float:left; margin:10px 10px 10px 10px; padding:10px 10px 10px 20px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.agentProfile h2 {border-bottom:1px dotted #ccc; width:165px; margin:0 0 5px 0; padding:0; text-indent:-10px;}
.agentProfile img {margin:5px 10px 5px 5px; padding:3px; border:1px solid #ccc; background:#fff; float:right;}
/*.agentProfile p {background:url(../images/icon_phone.gif) center left no-repeat;  width:125px; height:25px; margin:20px 0 20px 0; padding:0 0 0 30px; font-weight:bold; float:left;}*/
.agentProfile a.profileBtn {background:url(../images/btn_profile.gif); background-position:0 0; width:100px; height:39px; text-indent:-9999px; display:block; float:left; margin:0;}
.agentProfile a.profileBtn:hover {background-position:0 -39px;}

.individualProfile {width:745px; margin:0 0 10px 0;}
.individualProfile h2 {width:575px;}
#profileBio {width:555px; font-weight:normal; background:none; margin:10px 0 10px 0; padding:0; height:100%; float:left;}
#profileBio p {margin:0 0 15px 0;}
.agentProfile h3 {font-size:14px; color:#5c2e14; margin:0;}

ul.contactList {width:140px; margin:5px 0 5px 0;}
ul.contactList li.phone  {background:url(../images/icon_phone.gif) center left no-repeat; line-height:30px; margin:0; padding:0 0 0 30px; }
ul.contactList li.email  {background:url(../images/icon_email.gif) center left no-repeat; line-height:30px; margin:0; padding:0 0 0 30px;}
ul.contactList li.mobile  {background:url(../images/icon_mobile.gif) center left no-repeat; line-height:30px; margin:0; padding:0 0 0 30px; font-weight:bold;}
ul.contactList li.fax  {background:url(../images/icon_fax.gif) center left no-repeat; line-height:30px; margin:0; padding:0 0 0 30px;}


/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 775px;	
	height:114px;	
	
	
	/* custom decorations */
	padding:10px 0;	
	border:1px solid #ccc;
	background-color:#efefef;				
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:30000em;	
	position:absolute;
	clear:both;		
	
	/* decoration */
	margin-left:10px;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:114px;
	padding:0;
	font-size:18px;
	border:1px solid #ccc;
	background-color: #ddd;
	margin-right: 20px;	
	
	overflow:hidden;
}

/* active item */
div.scrollable div.items div.active {
	border:1px inset #ccc;		
	background-color:#fff;
}


/* Locate Us */
.map {padding:15px; border:double 2px #5c2f14; min-height:250px;}
.map iframe {border:1px solid #ccc; padding:3px; margin:0 15px 0 0; float:left;}
/* Contact Us */
.form caption {text-align:right; padding:5px;}
	.form table td { border:0; border-bottom:1px solid white;}
	.form input, .form textarea, .form select {font-size:11px; border-width:1px; border-style:inset; background:#fcfcfc; border-bottom-color:#fff; border-right-color:#fff;}
	.form input.error, form textarea.error, .form select.error {background:url(/images/form_error.gif) right no-repeat #fff1ec;}
	.form input.corrected {background:url(/images/form_check.gif) right no-repeat;}
	.form input:focus, .form textarea:focus, .form select:focus {background-color:#FFFFCC;}
	.form textarea { margin:10px 0;}
/* error message */
.none {display:none;}
p#errorMessage { width:100%; font-weight:bold; text-transform:uppercase; color:#4e4e4e; text-align:center; line-height:34px; background:url(/images/fm_error.gif) 15px 10px no-repeat #fff6f7; border:1px solid #fff1ec; margin-top:10px;}
/* submit btn */
.form .submitContact {width:109px;height:26px; margin:15px 0; background:url(/images/form_submit.gif) no-repeat;border:none;cursor:pointer;border:0;}
	.form .submitContact:hover {background-position: 0 -26px}
/* required fields */
.form tr.fm-req label {font-weight:bold;}
	.form tr.fm-req label.no {font-weight:normal;}
	.form tr.fm-req label:before {content:"* ";}
	.form tr.fm-req label.no:before{content:"";}
	.form tr.fm-req:hover label {color:red;}
	.form tr.fm-req:hover label.no {color: black;}

/* ---------->>> END Site Content <<<----------*/


/* ---------->>> 4. Typography <<<----------*/

body {font-size: 62.5%; font-family: Arial, sans-serif;}
	p {font-size:1.2em; line-height: 2em;  margin:0; padding:0;}

	strong {font-weight:bold;}
	acronym {border-bottom:1px dotted #e4bc22; cursor:help;}
	blockquote {}
	.clearfloat {clear:both; height:0; font-size:1px; line-height:0px;}
	.div {height:1px; width:90%; margin:20px auto; background:url(/images/div.gif) repeat-x;}
	
	.mainContent h1, .mainContent h2, .mainContent p { margin-left:10px;}
	
/* COLORS */
.orange {color:#dcb415;}
.darkblue {color:#045999;}
.lightblue {color:#608ec6;}

/* HEADERS */
h1 {color:#414140; font-family:Arial, Georgia, "Times New Roman", Times, serif; font-size:24px; font-weight:normal; margin-bottom:7px; margin-top:20px;} 
h1 em {color:#0d8534;}
h2 {color:#050706; font-family:Arial, Georgia, "Times New Roman", Times, serif; font-size:18px; font-weight:normal; margin-bottom:7px;}	

h3 {}
h4 {color#444; font-size:12px; font-weight:bold;}
h5 {}
h6 {}

/* TABLES */
table {border-collapse:collapse; width:100%;}
caption {padding:0 0 15px 0; width:100%; font:italic 1.1em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align:center;}
th strong {color: #fff;}
th {background:#dcb415; height:29px; padding-left:12px; padding-right:12px; color:#FFF; text-align:left; border-left:1px solid #ecc32c;border-bottom:solid 2px #FFF;}
tr {height:30px;}
td {padding-left:11px; padding-right:11px; border-left:1px solid #FFF; border-bottom:solid 1px #ffffff;}
td.first,th.first {border-left:0px;}
tr.row-a {background:#F8F8F8;}
tr.row-b {background:#EFEFEF;}

/* FORMS */

/* LISTS */
ul, ol {font-size:1.2em; line-height:2em;}
ul.bullet, ol.bullet {margin:10px 0 10px 0;}
ul.bullet li, ol.bullet li{list-style:disc; margin:0 0 0 20px;}

.content ul, .content ol {font-size:1.2em;	margin:0 0 .5em 0; line-height:2em;}
.content ul li, .content ol li {margin:-0.5em 0.5em 2em 0.5em;}
.content ul li {background:url(/images/bullet.gif) 0 0.4em no-repeat; padding:0 0 0 12px;}

/* LINKS */
a, a:visited {color:#024d17;}
a:hover {color:#5c2f14;}
/* ---------->>> END Typography <<<---------*/