/*
default styles for ghrentals.com
Created:        Jun 12 2006
Last Modified:	Jun 12 2006
----------------------------- 
ryan masuga, masugadesign.com
ryan@masugadesign.com | Copyright 2006
===========================================*/

/* begin styles to "normalize" elements accross browsers */
body, div, ul, li, td, h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

div, span, img, form, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: 0;
}
table {border: 0;}
td {vertical-align: top;}
/* end of "normalizing" styles */

/* MAIN styles
===========================================*/
body{
	background: #49778a url('images/body_bg.gif') 0 0 repeat-x;
	font:11px/1.5em Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #363636;
}

h1{
	font: 22px Georgia, "Times New Roman", Times, serif;
	color: #532e04;
	margin:.75em 0 3px 0;
}

h2{
	font:14px Verdana, Arial, Helvetica, sans-serif;
	color: #363636;
	margin:10px 0 0;
}

p {
	font:13px/18px Georgia, "Times New Roman", Times, serif;
	color: #142932;
	padding:5px;
	margin:0 0 5px 0;
}

a:link{font: bold 12px arial, helvetica, verdana, sans-serif; color: #810228;text-decoration: none;}
a:visited{font: bold 12px arial, helvetica, verdana, sans-serif;color: #810228;text-decoration: none;}
a:hover{font: bold 12px arial, helvetica, verdana, sans-serif;color: #c50529;text-decoration: none;}
a:active{font: bold 12px arial, helvetica, verdana, sans-serif;color: #c50529;text-decoration: none;}

hr {
	border: 0;
	width: 100%;
	color: #ccc;
	background-color: #ccc;
	height: 1px;
	margin: 0;
	padding: 0;
}

.clr {
	clear: both;
	height: 0px;
}
.clearfix:after { /*http://positioniseverything.net/easyclearing.html*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

/* =container */
#container {
	background: #49778a url('images/container_bg.gif') 0 0 repeat-y;
	width: 753px;
	position:relative;
	margin: 26px auto;
}

#container-inner {
	background: transparent url('images/container_inner_bg.gif') 0 0 no-repeat;
	width: 753px;
	position:relative;
	margin: 0;
	padding-top:4px;
}

/* =header */
#header {
	margin: 0 21px;
	padding: 0;
	height:99px;
	position:relative;
	text-align: left;
	background: transparent;
}

/* header image replacements */
#header h1{
	background: transparent url("images/ghrental_logo.gif") 0 0 no-repeat;
	/* the above line is duplicated here to stop a 'flash' when user hovers over h1 link in IE PC */
	position: absolute;
	top: 60px;
	left: 30px;
	margin: 0;
}

#header h1 a {
background: transparent url("images/ghrental_logo.gif") 0 0 no-repeat;
display: block;
height: 28px;
width: 170px;
color: #dadfce;
padding: 28px 0 0 0; 
height: 0 !important;
height /**/:28px;
overflow:hidden;
font-size: 1px;
}

#header h2 { /* very nice image replacement from http://www.kryogenix.org/code/browser/lir/ */
background:transparent url("images/contact_phone.gif") 0 0 no-repeat;
height: 11px;
width: 267px;
padding: 11px 0 0 0; /* padding is height of image */
height: 0px !important;
height /**/:11px;
overflow: hidden;
font-size: 1px;
position:absolute;
top:65px;
left:425px;
}

#leadpic {
	margin: 0 21px;
	padding: 0;
	height:171px;
	position:relative;
	text-align: left;
	background-color: transparent;
}
/* - might delete these
#leadpic.lead-home {background: transparent url('/images/leadpic_home.jpg') 0 0 no-repeat;}
#leadpic.lead-906harbor {background: transparent url('/images/leadpic_906harbor.jpg') 0 0 no-repeat;}
#leadpic.lead-908harborhills {background: transparent url('images/leadpic_908harborhills.jpg') 0 0 no-repeat;}
#leadpic.lead-57poplarridge {background: transparent url('images/leadpic_57poplarridge.jpg') 0 0 no-repeat;}
*/


#content {
	margin: 5px 0 0 44px;
	_margin: 5px 0 0 30px; /* greatest hack ever. show ONLY to IE 5, 5.5, and 6 for PC. just add underscore */
	padding: 0;
	background: transparent;
	width: 665px;
}

#subnav {
	margin: 0 21px 10px 21px;
	padding: 3px 0;
	background: #d7d5be;
	width: 711px;
	font: bold 12px Arial, Helvetica, Verdana, sans-serif;
}

#subnav ul.ul-subnav li a {color: #810228;text-decoration:none; 
	font: bold 12px Arial, Helvetica, Verdana, sans-serif;
	padding-left: 8px; background: transparent url('images/subnav_arrow.gif') 0 3px no-repeat;
	}

#subnav ul.ul-subnav li a:link{color: #810228;text-decoration:none; 
	font: bold 12px Arial, Helvetica, Verdana, sans-serif;
	padding-left: 8px; background: transparent url('images/subnav_arrow.gif') 0 3px no-repeat;
	}
#subnav ul.ul-subnav li a:visited{padding-left: 8px;color: #810228;text-decoration:none;}
#subnav ul.ul-subnav li a:hover{
	color: #c50529;padding-left: 8px;
	background: transparent url('images/subnav_arrow_down.gif') 0px 5px no-repeat;
	}
#subnav ul.ul-subnav li a:active {
	color: #c50529;padding-left: 8px;
	background: transparent url('images/subnav_arrow.gif') 0 3px no-repeat;
}
#subnav ul.ul-subnav li a.here {
	color: #c50529;padding-left: 8px;
	background: transparent url('images/subnav_arrow_down.gif') 0 5px no-repeat;
}

ul.ul-subnav {
	font: bold 12px Arial, Helvetica, Verdana, sans-serif;
   margin-left:23px;
   padding-left: 0;
   display: inline;
} 

ul.ul-subnav li {
	font: bold 12px Arial, Helvetica, Verdana, sans-serif;
   margin-left: 0;
   padding: 3px 8px;
   list-style: none;
   display: inline;
}

ul.ul-subnav li.ul-available {
   margin-left: 0;
   border-left: none;
   list-style: none;
   display: inline;
}

/* this make the availability link 'active' when user is on main page for a property */
body.availability #subnav ul.ul-subnav li.ul-available a:link{color: #c50529;text-decoration:none; 
	font: bold 12px Arial, Helvetica, Verdana, sans-serif;
	padding-left: 8px; background: transparent url('images/subnav_arrow_down.gif') 0 5px no-repeat;
	}
	body.availability #subnav ul.ul-subnav li.ul-available a {color: #c50529;text-decoration:none; 
		font: bold 12px Arial, Helvetica, Verdana, sans-serif;
		padding-left: 8px; background: transparent url('images/subnav_arrow_down.gif') 0 5px no-repeat;
		}


#footer {
	background: #49778a url('images/footer_bg.gif') 0 0 no-repeat;
	clear: both;
	margin: 0;
	padding: 30px 0 0 0;
	width: 753px;
	height: 60px;
}

#footer a:link{color: #fff;text-decoration:none;font-weight:normal;font-size:11px;}
#footer a:visited{color: #fff;text-decoration:none;font-weight:normal;font-size:11px;}
#footer a:hover{color: #bac6cd;}
#footer a:active{color: #bac6cd;}

ul.ul-footer {
   margin-left:20px;
   padding-left: 0;
   display: inline;
} 

ul.ul-footer li {
   margin-left: 0;
   padding: 3px 8px;
   list-style: none;
   display: inline;
}

ul.ul-footer li.first {
   margin-left: 0;
   border-left: none;
   list-style: none;
   display: inline;
}

.build-note{
	border: 1px solid #ccc;
	margin: 5px;
	padding: 10px;
	background: #FFE7BD;
	font-style: italic;
	clear:both;
}

#copyright {
	margin-left:28px;
	margin-top: 3px;
	font:11px arial, verdana, helvetica, sans-serif;
	color:#6993a4;
}

#property-pic {
	float:left;
	margin: 0 1em 1em 0;
	width:230px;
}

.pg-wrap { /* not sure how to fix the CSS rollover flash in IE, so I'm using this */
background: transparent url("images/button_gallery.gif") 0 0 no-repeat;
display: block;
height: 59px;
width: 123px;
margin:.5em auto 0 auto;
}

#property-pic a {
background: transparent url("images/button_gallery.gif") 0 0 no-repeat;
display: block;
height: 59px;
width: 123px;
padding: 59px 0 0 0; 
height: 0 !important;
height /**/:59px;
overflow:hidden;
font-size: 1px;
margin:.5em auto 0 auto;
}

#property-pic a:hover {
background: transparent url("images/button_gallery.gif") 0 -59px no-repeat;
display: block;
height: 59px;
width: 123px;
padding: 59px 0 0 0; 
height: 0 !important;
height /**/:59px;
overflow:hidden;
font-size: 1px;
}


#property-info {margin-left: 240px;}

#property-availability {padding:0;border-top:1px solid #d7d5be;}


/* Property Listings on the homepage */
.rental-listing {
	display:block;
	position:relative;
	margin: .25em 0 1em 0;
	padding: 0;
	background: transparent url("images/rental_bg_all.gif") 0 0 no-repeat;
	width: 658px;
	}

.rental-desc {
	float:right;
	width: 386px;
	margin:18px 1em 0 0;
	}

.rental-listing img {
	float:left;
	width: 234px;
	margin: 10px 0 0 15px;
/*	display:inline;
	padding: 0; */
}

.rental-listing .rental-desc h1 {
	margin-top: 0;
	}

.rental-listing span.ctop { /* to hold the rounded graphic at the top of content */
	background: transparent url("images/rental_bg_top.gif") no-repeat top left;
	display:block; width:658px; height:18px;
}

.rental-listing span.cbottom { /* to hold the rounded graphic at the bottom of content */
	background: transparent url("images/rental_bg_bot.gif") 0 0 no-repeat;
	display:block; width:658px; height:18px;
}




.rental-link {
	background: transparent url("images/rental_link.gif") 0 0 no-repeat;
	/* the above line is duplicated here to stop a 'flash' when user hovers over h1 link in IE PC */
	display:block;
	height: 59px;
	width: 123px;
	margin: 0;
}

.rental-link a {
background: transparent url("images/rental_link.gif") 0 0 no-repeat;
display: block;
height: 59px;
width: 123px;
padding: 59px 0 0 0; 
height: 0 !important;
height /**/:59px;
overflow:hidden;
font-size: 1px;
}

.rental-link a:hover {
background: transparent url("images/rental_link.gif") 0 -59px no-repeat;
display: block;
height: 59px;
width: 123px;
padding: 59px 0 0 0; 
height: 0 !important;
height /**/:59px;
overflow:hidden;
font-size: 1px;
}