@charset "utf-8";
/* screen stylesheet for Hunt & Nash */
/* (c) Taupo Solutions Ltd 2010. Http://www.taupo.co.uk */

@font-face {
	font-family: 'Candara';
	xsrc: url('Candara.eot');
	src: local('Candara Regular'), local('Candara'), url('Candara.woff') format('woff'), url('Candara.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Candara';
	xsrc: url('Candarab.eot');
	src: local('Candara Bold'), local('Candara-Bold'), url('Candarab.woff') format('woff'), url('Candarab.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}




/* ------------ global background style --------- */
html {background: #105785 url(bgNoiseTile200.png) repeat fixed center top}
body {background: #105785 url(bgNoiseTile200.png) repeat fixed center top}
html > body {background: transparent url(bgGradientOverlay.png) repeat-x fixed center top}
/* ------------ Typography, defaults, links --------- */

body {margin: 0; padding: 0; font:90%/1.5 Candara,Verdana,Arial,Geneva,Helvetica,sans-serif; color: #576473; }

/* ----Fix broken gradient, as the default Domino form wasn't 'containing' floated content.--------- */
/* -- watch for side effects...  */
form {overflow: hidden}

h1, h2, h3, h4, h5 {margin: 0; padding: 0; font-weight: normal; font-style: normal}
h1 {color: #0d1d30;font-size: 1.5em; margin-bottom: 1.2em}
h2 {color: #0d1d30; font-size: 1.3em;margin-bottom: 1em}
h3 {color: #0d1d30; font-size: 1.1em; }

a, a:link, a:visited {color: #600bc0; text-decoration: none}
a:hover, a:focus {text-decoration: underline}

.padded10 {padding: 10px; background: #fff}
.larger {font-size: 1.2em}


#slideshow {
    position:relative;
    height:100px;
    width: 240px
}
#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow img.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

/* ------------ Global Structural --------- */

	/* ------------ Header --------- */
	#header {height: 175px; overflow: hidden; position: relative;}
		#banner {height: 127px; background: transparent url(bannerImageOuter.png) no-repeat 0 0; position: absolute; top: 0; left: 0; width: 960px; z-index: 10}
			#bannerInner {height: 114px; background: url(bannerImageInner.jpg) no-repeat 0 0; position: absolute; top: 0; left: 16px; width: 928px; z-index: 11}
			#logo {display:block;height:88px;left:20px;position:absolute;top:15px;width:340px;}
		#navigation {position: absolute; height: 45px; overflow: hidden; width: 900px; top: 120px; left: 0; margin-left: 30px}
	
	/* ------------ Footer --------- */
	#superFooterTop {overflow: hidden  }
	.dottedRuleBase { padding-bottom: 15px;border-bottom: 1px dotted #fff; overflow: hidden}
	.dottedRuleTop { border-top: 1px dotted #fff}
	.footer {color: #d0dee7;}
	.footer p {font-size: 1em}
	.footer a, .footer a:link, .footer a:visited {color: #fff; font-weight: bold}
	.footer a:hover, .footer a:focus {text-decoration: underline}
	.footer h2 {text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); color: #fff}
	.innerFooter {margin: 15px 15px 0 15px;}
	.footerLinks {font-size: 0.9em; padding: 0px 0 5px 15px}
	.footerLinks a, .footerLinks a:link, .footerLinks a:visited {font-weight: normal}
	#baseFooter {margin-bottom: 15px; padding-bottom: 15px}
	#baseFooter a.taupo:link, #baseFooter a.taupo {font-weight: normal; color: #d0dee7}
	#baseFooter a.taupo strong {font-weight: normal; color: #fff}
	
	#superFooterTop .logo {border: none; display: block; float: left; margin: 0 15px 5px 15px;  opacity: 0.66;}
	#superFooterTop .logo:hover,#superFooterTop .logo:focus  {opacity: 1}
	
	/* ------------ Content --------- */
	.hpContainerTop, .forIE6 {height: 25px; background: #1b3317 url(contentTopBg.gif) no-repeat center top}
	.hpContainerBottom, .forIE6 {height: 25px; background: #1b3317 url(contentBottomBg.gif) no-repeat center bottom}
		
	html > body .hpContainerTop {height: 25px; background: transparent url(contentTopBg.png) no-repeat center top}
	html > body .hpContainerBottom {height: 25px; background: transparent url(contentBottomBg.png) no-repeat center bottom}

	.innerContainer, .forIE6 {background: #fff url(contentMiddleBg.gif) repeat-y center top; zoom:1; overflow: hidden; min-height: 600px}
	html > body .innerContainer {background: transparent url(contentMiddleBg.png) repeat-y center top;}
	
	
/* ------------ Top Navigation --------- */
#navigation ul, #navigation li {padding: 0; margin: 0; list-style-type: none}

#navigation li {position: relative; width: 140px; height: 39px; background: #0f5684; float: left; margin: 0 10px 0 0; text-transform: uppercase;
background: transparent url(menuHomeBg.png) no-repeat center bottom;

}
#navigation li span {position: absolute; bottom: 0px; width: 140px;  font-size: 1.2em; text-align: center; display: block;}
#navigation li em {position: absolute; bottom: 0px; width: 140px; height: 47px; display: block;background: transparent url(menuHomeBgHover.png) no-repeat center bottom; opacity: 0; filter:alpha(opacity=0)}
#navigation li a {color: white; padding-bottom: 0px;  display: block; padding-top: 20px; padding-bottom: 10px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5)} 
#xnavigation li:hover {height: 47px; }


/* ------------ property Carousel --------- */
.carousel {
  width: 600px;
  height: 235px;
  position: relative;
  background: #fff url(featuredPBg2.jpg) no-repeat top left;
}

.carousel em {font-style: normal}

.carousel .wrapper {
  width: 510px; /* .carousel width - (.wrapper margin-left + .wrapper margin-right) */
  overflow: auto;
  height: 220px;
  margin: 10px 45px 0 45px;
  position: absolute;
  top: 0;
 
}

.carousel .wrapper ul {
  width: 2520px; /* single item * n */
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

.carousel ul li {
  display:block;
  float:left;
  padding: 7px 15px 15px 15px;
  height: 185px;
  width: 140px;
  position: relative;
  xbackground: #ccc;
}

.carousel ul li img {
   max-width: 140px; max-height: 105px;/* lock 4x3 */
   border: 1px solid #575757; display:block; 
   background : #aaa; z-index: 5;
   opacity: 0.85; filter:alpha(opacity=85)
}
.forSale, .toLet {position: absolute; top: 8px; left: 16px; width: 100px; height: 100px; z-index: 7; opacity: 0.8;}
.forSale {background: transparent url(forSale.png) no-repeat 0 0}
.toLet {background: transparent url(toLet.png) no-repeat 0 0}

.carousel a, .carousel a:link, .carousel a:visited {color: #576473}

.carousel a:hover {text-decoration: none; color: #000}
.carousel a:hover .forSale, .carousel a:hover .toLet {opacity: 1; }
.carousel a:hover img {opacity: 1; filter:alpha(opacity=100) }
.carousel .fpPrice {font-size: 1.3em; font-weight: bold;}

.carousel ul li span {
  display: block; width: 140px; text-align: center; height: 75px; line-height: 1.4; font-size: 0.8em;
  background: #eee;
 
  margin-top: 10px; overflow: hidden;
	border: 1px solid #bbb;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}


.carousel ul:hover li:hover img {
  border-color: #333;
}

.carousel .arrow {
  display: block;
  height: 28px;
  width: 28px;
  background: url(carouselBumperStack.png) no-repeat 0 0;
  text-indent: -9999px;
  position: absolute;
  top: 57px;
  cursor: pointer;
  outline: 0;
}

.carousel .forward {
  background-position: -28px 0;
  right: 10px;
}

.carousel .back {
  background-position: 0 0px;
  left: 10px;
}

.carousel .forward:hover {
  background-position: -28px -28px;
}

.carousel .back:hover {
  background-position: 0 -28px;
}
.innerContainer .sideBar {width: 310px; margin-right: 0}
/* ------------ quick search control --------- */
#quickSearchControl {background: #fff url(qsMiddleBg.gif) repeat-y 10px top }
#quickSearchControl h3 { display: block; zoom: 1; float: left; clear: both; overflow: visible; height: 30px}
#qsHead {background: #fff url(qsHeader.gif) no-repeat 10px top; height: 50px}
#quickSearch { padding-top: 5px; padding-left: 23px; width: 282px; min-height: 240px }
#quickSearch .row {margin: 0.5em 0; overflow: hidden; clear: both}
#quickSearch label {font-family: candara, tahoma, arial, sans-serif; float: left;  display: block; padding: 0; width:24%;font-size: 0.8em; font-weight: bold; overflow: hidden}
#quickSearch .clear {clear: both}
#quickSearch span {font-size: 0.8em; display: block; float: left; margin: 0 3px }
#quickSearch input {font-size: 0.8em; float: left; display: block; width: 33%}
#quickSearch select {font-size: 0.8em; float: left; display: block; width: 33%}
#quickSearch .fullWidth {width: 72%}
#quickSearch .qsGoButton {display: block; cursor: pointer; background: url(viewProperties.png) no-repeat 0 0; width: 182px; height: 35px}
#quickSearch .qsGoButton:hover, #quickSearch .qsGoButton:focus {background-position: 0 -35px}
.qsBase {height: 18px; background: url(qsBaseBg.gif) no-repeat 10px top }

#qsSales, #qsRental {zoom: 1; overflow: hidden}
#qsSalesSelect {text-indent: -999px; overflow: hidden; padding-right: 3px; width: 96px; display: block; float: left; height: 33px; background: url(fsButtonStack.gif) no-repeat top left; cursor: pointer}
#qsRentalSelect {text-indent: -999px; overflow: hidden; width: 96px; display: block; float: left; height: 33px; background: url(tlButtonStack.gif) no-repeat top left; cursor: pointer}
#qsSalesSelect:hover,#qsSalesSelect:focus, #qsRentalSelect:hover,#qsRentalSelect:focus  {background-position: 0 -33px}
#qsSalesSelect.active, #qsRentalSelect.active {background-position: 0 -66px}

/* ------------ register interest --------- */
#sending {height:270px;left:16px;position:absolute;top:45px;width:284px; display: none; z-index: 900; margin-top: 15px; padding: 15px; font-size: 1.2em;}
#registerInterest {background: #fff url(qsMiddleBg.gif) repeat-y 10px top; margin-top: 15px; position: relative; z-index: 100}
#registerInterest h3 { display: block; zoom: 1; float: left; clear: both; overflow: visible; height: 30px}
#registerHead {background: #fff url(registerHeader.gif) no-repeat 10px top; height: 50px}
#register { padding-top: 5px; padding-left: 23px; width: 278px; min-height: 240px; }
#registerInner {zoom: 1; overflow: hidden; background-color: #F5F5F5 }
#register .row {margin: 0.5em 0; overflow: hidden; clear: both;}
#register label {font-family: candara, tahoma, arial, sans-serif; float: left;  display: block; padding: 0; width:24%;font-size: 0.8em; font-weight: bold; overflow: hidden}
#register .clear {clear: both}
#register span {font-size: 0.8em; display: block; float: left; margin: 0 3px }
#register input {font-size: 0.8em; float: left; display: block; width: 33%}
#register select {font-size: 0.8em; float: left; display: block; width: 33%}
#register .fullWidth {width: 72%}
#register .cbrow {text-align: left;margin: 0.5em 0 0.5em 15px; overflow: hidden; clear: both}
#register .cbrow input {width:auto}
#register .cbrow label {float: none; width: auto}
#register .registerGoButton {display: block; margin-left: 66px;cursor: pointer; background: url(registerStack.png) no-repeat 0 0; width: 131px; height: 38px;}
#register .registerGoButton:hover,#register .registerGoButton:focus {background-position: 0 -38px}

/* ------------ Property Search Results --------- */
.psResult {margin-bottom: 15px; border-bottom: 1px dotted #ccc; padding-bottom: 5px; overflow: hidden; background: #fff}
.psImage a {display: block; overflow: hidden; text-align: center; padding-left: 10px; text-decoration: none;}
.psImage img { margin: 7px 0 15px 0; padding: 3px;
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
	}
.psImage img:hover, .psImage img:focus {border-color: #666}
.psImage a:hover span {text-decoration: underline}
.srDetails {padding-right: 15px}
.srSummary {font-size: 12px}
.srPrice {font-size: 1.4em}
.srPriceStatus {font-size: 16px; color: darkred}
.srTopper {text-align: right; padding-right: 15px}

/* ------------ Property Details Page --------- */
#propertyPhoto {border: 1px solid #ccc; width: 320px; height: 240px; margin: 15px 0 15px 23px; position: relative}
.propertyDetails .row {margin: 0.5em 0; overflow: hidden; clear: both; font-size: 1.2em}
.propertyDetails label {width: 120px; float: left; margin-right: 15px; color: #000}
#propertyDescription {margin-top: 15px; font-size: 0.9em;}
#propertyDescription font {font-family: 'Candara';}
.detailsDisclaimer {margin-top: 15px; padding-top: 15px; border-top: 1px dotted #ccc;}
#smallImages {overflow:hidden;text-align:center;width:320px;margin-left: 23px}
#smallImages img {
border:1px solid #ccc;float:left;margin-left:4px;margin-right:4px;margin-top:5px;width:96px;opacity: 0.8; filter:alpha(opacity=80);}
#mainImageTop {position: absolute; top: 0; left: 0}
#hipImage, #floorPlan {width: 320px;margin: 30px 0 15px 23px; cursor: pointer  }
#hipImage h3, #floorPlan h3 {margin-bottom: 15px}
#hipImage span, #floorPlan span {display: block;}
.coveredBy {font-size: 0.8em}

#downloadPdf {text-align: right; right: 5px; top: 110px; position: absolute; z-index: 999; width: 200px; height: 100px; background: transparent url(download-pdf-r.png) no-repeat right center;
padding: 0px 00px 0 0; cursor: pointer}
#downloadPdf a {display: block; padding: 15px 100px 0 0; height: 90px}



/* ------------ General Pages --------- */
.homepage h1 {font-size: 1.4em}

.collapseHead {color: #600bc0; font-weight: bold; padding: 5px 0px; margin-botom: 15px }
.collapseHead:hover, .collapseHead:focus {cursor: pointer; background: #eee; text-decoration: underline }
ol li {padding-bottom: 0.7em}

#map_canvas {line-height: 1.2; width: 320px; height: 360px; margin: 15px 0 15px 15px; border: 1px solid #ccc;}

/* Start Mobile Styles */

/*
These styles support Apple products display of CSS.

NOTES: (orientation:landscape), (orientation:portrait) can be used

Uses CSS3.

*/



/* iPhone 4 [portrait + landscape] */
@media only screen and (resolution:326dpi)
{
	body {margin: 0; padding: 0; font:100%/1.2 Arial,Geneva,Helvetica,sans-serif; color: #888; -webkit-text-size-adjust:none;}

	.container_12, .container_16, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 
	{width: 100%!important; margin: 0!important;clear: both!important}
	
	#registerInterest ~ h2, .homepage h2 {display: none}
	
	#banner,  .hpContainerTop, .hpContainerBottom, #navigation, .qsBase {display: none!important}
	
	#header {height: 64px; background: url(HNLogo.gif) no-repeat 5px center #093660}
	#bannerInner {height: 64px; background: none; width: auto; left: 0;}
	#logo {width: 220px; height: 57px; margin-left: 5px; top: 3px; left: 0}
	
	.innerContainer {background: #fff!important}
	#quickSearch {width: auto; padding-left: 5px}
	
	.carousel,  #slideshow {display: none !important}
	
	
	#register {padding-left: 5px; width: auto;}
	
	#quickSearchControl, #registerInterest {margin: 5px; overflow: hidden; max-width: 100%; border: 1px solid #bbb; background: none #F5F5F5; border-radius: 8px;-webkit-border-radius: 8px; box-shadow: 1px 2px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.3)}
	#registerInterest {width: auto; margin-top: 10px;}
	#qsHead, #registerHead {background: #093660; height: 42px; line-height: 42px; padding-left: 40px; font-size: 22px; color: #fff; border: 8px 8px 0 0;
	-webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px
	}
	
	#qsHead:after {
		content:"Property Search:";
	}
	
	#registerHead:after {
		content:"Register With Us:";
	}
	#register .fullWidth {
    width: 69%;}
    
    .srDetails {padding-left: 5px; margin-top: 7px;}
    .srSummary {font-size: 16px}
    .srPrice {font-weight: bold; font-size: 20px;}

	#map_canvas {width: 80%; max-width: 80%; margin: 0 10%; height: 220px; }
	#propertyPhoto {margin-left: 0px; border: 0}
	#propertyPhoto, #mainImageTop {width: auto; height: auto; max-width: 100%;}
	#propertyPhoto img, #mainImageTop img {width: auto; height: auto; max-width: 100%;}
	
	#smallImages, #floorPlan, #hipImage {width: auto; max-width: 100%; margin-left: 0; }
	
	.propertyDetails label {width: 35%}
	#downloadPdf {position: static;margin: 10px 0}
	#propertyDescription {font-size: 16px}
	

	
}

/*  lower res devices */
@media only screen and (max-device-width:760px)
{
	body {margin: 0; padding: 0; font:100%/1.2 Arial,Geneva,Helvetica,sans-serif; color: #888; -webkit-text-size-adjust:none;}

	.container_12, .container_16, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 
	{width: 100%!important; margin: 0!important;clear: both!important}
	
	#registerInterest ~ h2, .homepage h2 {display: none}
	
	#banner,  .hpContainerTop, .hpContainerBottom, #navigation, .qsBase {display: none!important}
	
	#header {height: 64px; background: url(HNLogo.gif) no-repeat 5px center #093660}
	#bannerInner {height: 64px; background: none; width: auto; left: 0;}
	#logo {width: 220px; height: 57px; margin-left: 5px; top: 3px; left: 0}
	
	.innerContainer {background: #fff!important}
	#quickSearch {width: auto; padding-left: 5px}
	
	.carousel,  #slideshow {display: none !important}
	
	
	#register {padding-left: 5px; width: auto;}
	
	#quickSearchControl, #registerInterest {margin: 5px; overflow: hidden; max-width: 100%; border: 1px solid #bbb; background: none #F5F5F5; border-radius: 8px;-webkit-border-radius: 8px; box-shadow: 1px 2px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.3)}
	#registerInterest {width: auto; margin-top: 10px;}
	#qsHead, #registerHead {background: #093660; height: 42px; line-height: 42px; padding-left: 40px; font-size: 22px; color: #fff; border: 8px 8px 0 0;
	-webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px
	}
	
	#qsHead:after {
		content:"Property Search:";
	}
	
	#registerHead:after {
		content:"Register With Us:";
	}
	#register .fullWidth {
    width: 69%;}
    
    .srDetails {padding-left: 5px; margin-top: 7px;}
    .srSummary {font-size: 16px}
    .srPrice {font-weight: bold; font-size: 20px;}

	#map_canvas {width: 80%; max-width: 80%; margin: 0 10%; height: 220px; }
	#propertyPhoto {margin-left: 0px; border: 0}
	#propertyPhoto, #mainImageTop {width: auto; height: auto; max-width: 100%;}
	#propertyPhoto img, #mainImageTop img {width: auto; height: auto; max-width: 100%;}
	
	#smallImages, #floorPlan, #hipImage {width: auto; max-width: 100%; margin-left: 0; }
	
	.propertyDetails label {width: 35%}
	#downloadPdf {position: static;margin: 10px 0}
	#propertyDescription {font-size: 16px}
	
}



/* End Mobile Styles */