/* CSS Document */


/*-  CSS Reset
----------------------------------------------------------------------*/
body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, p, address, th ,td {
margin: 0; padding:0;}
ol, ul {list-style-type:none;}
table {border-collapse:collapse;border-spacing:0;}

/*-  Basic
----------------------------------------------------------------------*/
body {
	text-align:center;
	font:62.5%/1.5 Calibri, Verdana, Helvetica, Arial, sans-serif;
	background: #f7f7f7 url(images/header_tile.jpg) repeat-x;
	color:#333;
	}
	
#wrapper {
	width: 800px;
	margin:0 auto;
	text-align:left;
	position:relative;}
	
#main p {
	font-size:1.2em;
	text-align:justify;
	}

a:link, a:visited{
	color:#5d1117; font-weight:bold; text-decoration:none;
}

a:hover, a:active {
 color:#450c07; text-decoration:underline;
 }




.list {
padding-left:10px;
padding-top:10px;
width:480px;}

.list li {
font-size: 1.2em;
background:url(images/bullet_sqarrow.gif) no-repeat 12px 3px;
padding-left: 30px;
}

.clear {
	clear:both;
	height:60px;
}
	
img {
float: left;
background-color: #fff;
border:1px solid #a9a9a9;
padding:4px;
margin: 5px 10px 5px 5px;}

/*-  Masthead
----------------------------------------------------------------------*/

h1#brand {
	background:url(images/masthead.jpg) no-repeat;
	width:800px;
	height:75px;
	text-indent:-5000em;}
	
	/*-  Navigation
----------------------------------------------------------------------*/
#navigation {
	clear: both;
	height: 87px;
	position: relative;
 }

#navigation ul, #navigation li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation li {
	display: block;
	float: left;
	}

/*
	Primary navigation
*/
#navigation a.topnav {
	background-repeat: no-repeat;
	display: block;
	height: 85px;
	text-decoration: none;
	text-indent:-1000em;
padding:0; margin:0;
}

#navigation a.topnav:hover {
	background-position: 0 -85px;
}

li#top-home a.topnav {
	background-image: url(images/nav_home.jpg);
	width: 176px;
}

li#top-about a.topnav {
	background-image: url("images/nav_about.jpg");
	width: 112px;
}

li#top-management a.topnav {
	background-image: url("images/nav_management.jpg");
	width: 112px;
}

li#top-valuation a.topnav {
	background-image: url("images/nav_valuation.jpg");
	width: 112px;
}

li#top-agency a.topnav {
	background-image: url("images/nav_agency.jpg");
	width: 112px;
}

li#top-contact a.topnav {
	background-image: url("images/nav_contact.jpg");
	width: 176px;
}


/* Primary navigation current defaults */
body.home li#top-home a.topnav, body.home li#top-home a.topnav:hover,
body.about li#top-about a.topnav, body.about li#top-about a.topnav:hover,
body.news li#top-about a.topnav, body.news li#top-about a.topnav:hover,
body.career li#top-about a.topnav, body.career li#top-about a.topnav:hover,
body.management li#top-management a.topnav, body.management li#top-management a.topnav:hover,
body.projects li#top-management a.topnav, body.projects li#top-management a.topnav:hover,
body.valuation li#top-valuation a.topnav, body.valuation li#top-valuation a.topnav:hover,
body.agency li#top-agency a.topnav, body.agency li#top-agency a.topnav:hover,
body.contact li#top-contact a.topnav, body.contact li#top-contact a.topnav:hover {
	background-position: 0 -170px;
}


/*-  Sec Navigation - Dropdown list
----------------------------------------------------------------------*/
#nav li ul {
	/*background:url(images/nav_sec.gif) no-repeat left top;*/
	height: 27px;
	position: absolute;
	top: 65px;
	left:0px;
	width: 100%;
	left:-999em; /*Hide the dropdown list -- display:none avoided for more accessibility*/
}


#navigation li:hover ul, #navigation li.sfhover ul {
	left: auto; /*brings the list back into view; javascript creates new class li.sfhover because IE doesnt recognise hover on other elements */
	/*z-index: 1000;*/
	}


#navigation li ul li {
	clear:left; /*because the primary nav is made up of floated list elements, you need to clear them*/
	float: none;
	display:inline;
	padding: 0;
	margin: 0;
}

/*Formatting the dropdownlist */
#navigation li ul li a {
	font: bold 11px/25px Calibri, "Century Gothic", helvetica, sans-serif;
	padding: 6px 13px;
	text-decoration:none;
	color:#fff;
}

#navigation li ul li a:hover, #navigation li ul li a.active {
	color: #ff9;
	text-decoration: none;
}

#navigation li:hover a.topnav, #navigation li.sfhover a.topnav {
	background-position: 0 -85px;
}
/*-  Left Column - local nav
----------------------------------------------------------------------*/	




/*PAGE TITLE*/
#nav-local h2#title {
text-indent:-1000em;
width:242px; 
height:83px;
margin:0px;
padding:0px;}


.about h2#title {
background:url(images/title_background.gif) no-repeat left top;
}

.news h2#title {
background:url(images/title_news.gif) no-repeat left top;
}

.career h2#title {
background:url(images/title_career.gif) no-repeat left top;
}

.management h2#title {
background:url(images/title_management.gif) no-repeat left top;
}

.projects h2#title {
background:url(images/title_projects.gif) no-repeat left top;
}

.valuation h2#title {
background:url(images/title_valuation.gif) no-repeat left top;
}

.agency h2#title {
background:url(images/title_agency.gif) no-repeat left top;
}

.contact h2#title {
background:url(images/title_contact.gif) no-repeat left top;
}

/*CONTACT STAMP*/
#nav-local p#contact_stamp {
text-indent:-1000em;
background:url(images/contact_stamp.gif) no-repeat left top;
width:211px;
height:99px;
}

.home #nav-local p#contact_stamp {
background:url(images/contact_stamp.gif) no-repeat left top;
}

.valuation #nav-local p#contact_stamp {
background:url(images/contact_val.gif) no-repeat left top;
}

/*-  Main Image
----------------------------------------------------------------------*/

#section_image {
height:140px;
width:340px;
margin:30px 0px;
}
.about #section_image, .news #section_image, .career #section_image {
background:url(images/img_about.gif) no-repeat left top;
}
.management #section_image, .projects #section_image {
background:url(images/img_management.gif) no-repeat left top;
}

.valuation #container #section_image {
background:url(images/img_valuation.gif) no-repeat left top;
width:355px;
height:155px;}

.agency #section_image {
background:url(images/img_agency.gif) no-repeat left top;
}

.contact #section_image {
background:url(images/img_contact.gif) no-repeat left top;
width:338px;
height:211px;
}


	/*-  Container and MAIN
----------------------------------------------------------------------*/	
/*2-column layout*/
#container {
background: #F7f7f7 url(images/tile_white.gif) repeat-y;
/*background-color:#CC6666;*/}

#nav-local {
float:left;
width:242px;
/*background-color:#66FFFF;*/}

#main {
float:left;
width: 500px;
/*background-color:#FF9966;*/}

#nav-local p, #nav-local h2, #nav-local h3, #nav-local h4 {
padding:10px 10px 0px 10px;
}

 #main p, #main h2, #main h3, #main h4 {
 padding:10px 30px 0px 0px;
 }
 
.drop {
	color: #0f1214;
	display: block;
	float: left;
	font-size: 3.5em;
	font-weight: bold;
	line-height: 0.85;
	margin: 0 .1em 0 0;
	
}

 
#main h3 {
	font-family:"Bookman Old Style",Georgia, serif;
	color:#5d1117;
	font-size:1.3em;
	padding-top: 30px;
}

#main .footnote {
font: 1em/1.1em "Bookman Old Style",Georgia, serif;
color:#87a1a4;
margin-bottom:20px;}

.unevendots {
background: url(images/unevendots.gif) repeat-x;
margin:40px 30px 4px 0px;
width:475px;
height:12px;
}

#main .lessmargin {  /*For headings that come right after the decorative uneven dotted line div -- I reduced the margin here*/
margin-top: -20px;
} 

/*Careers*/
 .hiring {
background:url(images/hiring_stamp.gif) no-repeat 400px bottom;
}

span.department {
	font-size:0.9em;
}
.career #main h4 {
font: 1.1em "Century Gothic",helvetica, sans-serif;
text-transform:uppercase;
color:#666;}

#main .before_box {
margin-bottom:30px;}


/*DOTTED LINE BOX*/

#main .box h3 {  
background: url(images/dottedtop.gif) no-repeat left top;
width:521px;
height: 17px;
}

#main .box {
background: url(images/dottedtile.gif) repeat-y left top;
width:521px;
}

div#contact_info address {
font: normal normal 1.2em/1.4 "Century Gothic", helvetica, sans-serif;
color:#0f1214;
margin-bottom:10px;}

div#contact_info p {
font: 1.1em/1.2 Calibri, "Century Gothic", Helvetica, sans-serif;
margin:0; padding:0;
color:#816f71;
letter-spacing: 0.2em;}

/*CONTACT---------------------------------------*/
.contact .box td.department_first {
font: bold 1.1em/1.5 "Bookman Old Style", Georgia, serif;
color:#450c07;
padding-top:0px;
}

.contact .box #staff_table td.department {
font: bold 1.1em/1.5 "Bookman Old Style", Georgia, serif;
color:#450c07;
padding-top:20px;
}

.contact #main .box p {
margin:0; padding:0;
line-height:1.2;
}

.contact #main .box .staff_name {
padding-top:30px;
font-variant:small-caps;
}

.contact #staff_table {
width:350px;
}
.contact #staff_table td {
vertical-align:top;
padding:0;
}

.contact .box #staff_table td img {
margin: 5px 0px;
}
/*NEWS AND EVENTS - LOCAL NAV--------------------------------------------------*/

/*Reset margin and padding*/
#nav-local-news h3, #nav-local-news p {
padding:0; margin:0;
}

#nav-local-news {
width:160px;
margin: 0px 0px 0px 35px;
}

#nav-local-news h3, #nav-local-news h3 a{
font: bold 12px/1.2 "Century Gothic", Helvetica, sans-serif;
color:#0f1214;
margin: 20px 0 10px 0;}

#nav-local-news a, #nav-local-news p   {
font: 10px/1.3 "Bookman Old Style", Georgia, sans-serif;
}

#nav-local-news a {

display:block;
text-decoration:underline;}

#nav-local-news p {
color: #666;
padding: 0 0 5px 55px;
margin-top:-12px;
margin-bottom:5px;}

#nav-local-news a:link, #nav-local-news a:visited {
color:#7aa1a6;
}
 
#nav-local-news a:hover, #nav-local-news a:active {
color:#450c07;
}

/* NEWS ARTICLES*/

#main .news_source {
color:#450c07;
font-size: 1.1em;
margin-top:20px;
}

.news #main h4 {
font-size:1.1em;
text-transform:uppercase;
color:#0f1214;
}

.news .box .bold {
font-weight:bolder;
margin-top:20px;
}

/*ESTATE AGENCY----------------------------------------------------------*/
/*Agency local nav links*/
#nav-local #nav-local-listings {
margin-left: 35px;
width:160px;
}

#nav-local #nav-local-listings h3, #nav-local #nav-local-listings p {
font-size:1em;
line-height:1.2;
text-align:left;
margin:0; padding:0;}

#nav-local #nav-local-listings h3 {
margin-top:14px;
}
#nav-local #nav-local-listings h3 a{
font-family: "Bookman Old Style", Georgia, serif;
color:#668481;
text-decoration: underline;
}

#nav-local #nav-local-listings h3 a:hover{
color:#450c07;
}

#nav-local #nav-local-listings img {
float: right;
}

/*Agency content*/
.agency #box img.first {
margin-left:30px;
}

.box table {
margin: 20px 20px 20px 0px;
clear:both;
width:500px;}

th, td {
padding: 0.2em 1em;
vertical-align:top;}

th {
font:1.2em "Bookman Old Style", Georgia, serif;
font-weight:bold;
padding-bottom:0.5em;}

td {
font-size:1.1em;
}
.odd {
background-color: #f7eaeb;/*#edf5ff;*/
}

a.backtotop {
margin: 30px 0px 30px 430px;
text-transform:uppercase;
font-size:0.9em;
}

a.backtotop:link, a.backtotop:visited {
color:#450c07;
text-decoration:underline;
}
a.backtotop:hover, a.backtotop:active {
color:#668481;
text-decoration:none;
}

#main .emphasis {
color:#666;
text-transform:uppercase;
font-size:1.2em;
margin-top:30px;
}
/*-  HOMEPAGE
----------------------------------------------------------------------*/	
.home h2#title {
background:url(images/img_home.gif) no-repeat top center;
width:800px;
height:219px;
text-indent:-5000em;}

.home a#login {
position: absolute; top:385px; left:0;
background: url(images/button_login.gif) no-repeat top center;
display:block;
text-indent:-5000em;
width:198px;
height:49px;
}

.home a#login:hover {
background-position: 0px -49px;
}

.home a#webmail {
position: absolute; top:434px; left:0;
background: url(images/button_webmail.gif) no-repeat top center;
display:block;
text-indent:-5000em;
width:198px;
height:49px;
}

.home a#webmail:hover {
background-position: 0px -49px;
}

.home #box_2 h2, .home #box_2 h3. .home #box_2 h4, .home #box_2 h5, .home #box_2 p {
margin: 0; padding: 0;
} 

.home p#intro {
padding: 20px 20px 20px 300px;

font-size:1.2em;}

.home #box_2 {
background: url(images/dots_tile.gif) repeat-y;
width: 530px;
margin-left:230px;
}

.home #featured {
float: left;
width: 265px;
}

.home #events {
float: left;
width:265px;
}

#box_2_top {
background: url(images/dotted_2_top.gif) no-repeat left top;
width:530px;
height:11px;
}

#box_2 h2, #box_2 h3, #box_2 p {
padding: 0px 20px;
}

#box_2 h2 {
font: bold 1.3em "Bookman Old Style", Georgia, serif;
}

#box_2 h2 a {
color:#450c07;
text-decoration:none;
}

#box_2 h2 a:hover, #box_2 h2 a:active {
color:#0f1214;
text-decoration:underline;
}

#box_2 h3 {
font: 1em/1.2 "Century Gothic", helvetica, sans-serif;
margin-top: 15px;
}

#box_2 h3 a {
color: #87a1a4;
/*color:#7f7f7f;*/
text-transform:uppercase;}

.home #box_2 p {
font:1.1em/1.4 Calibri, helvetica, sans-serif;
margin-top:6px;}

.home #top_listings {
width: 732px;
margin:20px 35px 10px 35px;
border: 1px solid #a1b2b0;
background-color:#fff;

}
.home .clear {
height:0px;
}

.home #top_listings .clear {
height:20px;
}
.home .listing_box {
float: left;
width:175px;
border-right:1px solid #e1ecf4;
}

.home .listing_box h3 {
font: 1em/1.1 "Bookman Old Style", Georgia, serif;
padding:10px 0px 5px 10px;
}

.home .listing_box h3 a {
color:#450c07;
text-decoration:none;
} 

.home .listing_box h3 a:hover, .listing_box h3 a:active {
color:#668481;
text-decoration:underline;}

.home .listing_box p{
padding:1px 8px; margin:0;
font-size:1em;
line-height:1.3em;
}

.home .see_more {
text-indent:-5000em;
background: url(images/button_more.gif) no-repeat left top;
width: 23px;
height: 110px;
display:block;
float: right;
margin:10px 3px 0px 0px;}

.home a.see_more:hover {
background-position: -23px 0px;
} 


/*-  Footer
----------------------------------------------------------------------*/	
#footer {
	clear: both;
	height:88px;
	position:relative;}
	
#footer p {
	background:url(images/footer.gif) repeat-x top center;
	height:88px;
	text-indent: -5000em;
}

#footer a {
	background:url(images/footer_joyce.gif) no-repeat top center;
	height:23px; width:173px;
	text-indent:-5000em;
	position:absolute;
	top:25px; left:center;
	}
	
/*-  colors
----------------------------------------------------------------------*/	

#7aa1ab blue
#668481 darker blue
#a1b2b0 lighter blue
e1ecf4 off white light blue
#0f1214 black
#8e888b grey
450c07 darker red (for links)
67130a main red (masthead)
8c242b bright red
d7c4c5 very light purple
ae888b light purple
816f71 dark purple
f7f7f7 off white (body backgrd)