/* Styles for content pages */

/************************************************************
Banner area */

/*-----------------------------------------------------------
Home page (animated) */

/* Layout */
#banner-tiles {
	position:relative;
	max-width:950px;
	border-left:25px solid transparent; /* Spacers for the overhanging corners of the nav */
	border-right:25px solid transparent;
	margin:0 auto;
}
#banner-tiles figure {
	overflow:hidden;
	max-height:400px;
	min-height:150px;
	margin:0;
}
#banner-tiles img {
	display:block;
}


/* Navigation */
#banner-tiles nav {
	position:absolute;
	z-index:10;
	bottom:0;
	right:0;
}
#banner-tiles nav ol {
	list-style:none;
	margin:0 0.7em 1em 0;
}
#banner-tiles nav a {
	display:block;
	text-indent:-9999px;
	outline:none;
	height:1em;
	width:1em;
	margin:0.4em;
	background:rgba(239,242,245,0.25);
	border-radius:100%;
}
#banner-tiles nav li.sel a {
	background:#fec028;
}


/* ANIMATING */
#banner-tiles figure {
	position:absolute;
	background:#496996;
	background-clip:padding-box;
	border:0.3em solid #496996;
	border-top:none;
	width:100%;
	left:0;
	top:0;
	box-shadow:0 1.2em 1em -1em rgba(23,44,77,0.75);
	visibility:hidden;
	opacity:0;

	-moz-box-sizing:border-box;
	box-sizing:border-box;

	-webkit-transition:all 0.7s ease 0s;
	transition:all 0.7s ease 0s;
}
#banner-tiles figure.sel {
	position:static;
	visibility:visible;
	opacity:1;
}


/*-----------------------------------------------------------
Content pages */

#banner>img {
	display:block;
	width:1000px;
	margin:0 auto;
	background:#476794;
	padding:0 5px 5px;
	background-clip:padding-box;
	border-left:25px solid transparent;
	border-right:25px solid transparent;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#banner>header { /* See below for background / layout */
	font-size:110%;
}
#banner>header h1 {
	margin:0.3em 0;
	text-shadow:1px 1px 3px rgba(0,0,0,0.7);
	position:relative;
	z-index:2;
}
#banner>header p {
	font-weight:bold;
	margin:1em 0 1.2em;
	position:relative;
	z-index:2;
}


/*-----------------------------------------------------------
Banner content box

/* Used for page headers and the property search form */
#banner>header,
#prop-search {
	text-align:center;
	position:relative;
	z-index:20;
	margin:0 auto;
	max-width:1000px;
	padding:0.5em 1em;
	background:#4b6b9b;
	background:transparent linear-gradient(to top, rgba(75,107,154,1) 2.5em, rgba(62,94,139,0.85)) no-repeat center bottom;
	background-clip:padding-box;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
	box-shadow:inset 0 0 2.5em rgba(31,55,90,0.8);

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#banner>header,
#banner-tiles~#prop-search {
	max-width:880px;
	margin-top:-100px;
	border-left-width:65px;
	border-right-width:65px;
}
#banner>header:after,
#prop-search:after { /* Overhanging triangle */
	content:' ';
	position:absolute;
	margin:-1.5em 0 0 -1.5em;
	height:3em;
	width:3em;
	left:50%;
	top:100%;
	background:#4b6b9a;
	background:transparent linear-gradient(to right top, rgba(75,107,154,1) 60%, rgba(75,107,154,0)) no-repeat right bottom;
	box-shadow:inset 2.5em -2.5em 2.5em -2.4em rgba(31,55,90,0.8);

	-webkit-transform:scaleX(1.5) rotate(-45deg);
	-ms-transform:scaleX(1.5) rotate(-45deg);
	transform:scaleX(1.5) rotate(-45deg);
}



/************************************************************
Search form */

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

/* Header */
#prop-search header {
	font-size:135%;
}
#prop-search header h1,
#prop-search header h2 {
	margin:0.2em 0;
	text-shadow:1px 1px 2px rgba(0,0,0,0.75);
}

/* That EULA link we have to include everywhere */
#prop-search header p {
	font-size:70%;
	margin:-0.3em 0 0.3em;
}
#prop-search header p u {
	white-space:nowrap;
}


/* Fields */
#prop-search section {
	display:inline-block;
	vertical-align:top;
	position:relative;
	margin:0 0 0 -2%;
	width:80%;
	z-index:2;
}
#prop-search section p {
	text-align:left;
	display:inline-block;
	vertical-align:top;
	white-space:nowrap;
	margin:0.5%;
	width:31%;
}
#prop-search section input[type="text"],
#prop-search section select {
	display:block;
	width:100%;
}
#prop-search #search-minPrice,
#prop-search #search-maxPrice {
	display:inline-block;
	width:42%;
}
#prop-search #search-minPrice+label {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	width:12%;
}

/* Hide initial labels (placeholders take care of the visual text) */
#prop-search section label:first-child {
	position:absolute;
	visibility:hidden;
}


/* Submit area */
#prop-search footer {
	display:inline-block;
	vertical-align:top;
	position:relative;
	text-align:left;
	width:19%;
	z-index:2;
}
#prop-search footer p {
	position:relative;
	margin:2.25% 0 0.7em;
}
#prop-search footer input.button {
	display:block;
	color:transparent;
	padding-left:0;
	width:100%;
}
#prop-search footer a {
	display:block;
	padding:0.1em 0.5em;
}

/* Submit button - we need an icon added... using a label is not ideal, but works... */
/* Basically faking it: Label with transparent text overlaid exactly on top of the button */
#prop-search footer label {
	position:absolute;
	text-align:center;
	z-index:2;
	height:100%;
	width:100%;
	left:0;
	top:0;
	font:bold 115%/2.2 Arial,Helvetica,sans-serif;
	color:#30517f;
	cursor:pointer;
}
#prop-search footer label span { /* Show extended label only on the home page */
	display:none;
}
#prop-search footer label:after {
	content:' ';
	display:inline-block;
	vertical-align:text-top;
	height:18px;
	width:18px;
	margin:-1px 0 0 0.5em;
	background:transparent url('../images/icons/icons.png') no-repeat -99px -132px;
}


/*-----------------------------------------------------------
Home page (tweaks) */

/* Layout */
#banner-tiles~#prop-search {
	margin-top:-160px;
}
#banner-tiles~#prop-search section {
	display:block;
	width:auto;
	margin:0;
}

/* Footer / buttons area */
#banner-tiles~#prop-search footer {
	text-align:center;
	margin:0.4em 0 0;
	width:auto;
}
#banner-tiles~#prop-search footer label span { /* Show extended label only on the home page */
	display:inline;
}
#banner-tiles~#prop-search footer a {
	display:inline-block;
	padding:0 0.3em;
}
#banner-tiles~#prop-search footer a+a {
	border-left:1px solid #fff;
}


/*-----------------------------------------------------------
Map results */

#results-map {
	position:relative;
	background:#f3f1ed url('../images/icons/loading.gif') no-repeat center center;
	border:3px solid #456591;
	visibility:hidden;
	z-index:100;
	opacity:0;
	height:0;

	-webkit-transition:all 0.5s ease 0s;
	transition:all 0.5s ease 0s;
}
#results-map.open {
	visibility:visible;
	height:450px;
	opacity:1;
}
#results-map.loading:after {
	content:' ';
	position:absolute;
	background:rgba(0,0,0,0.2) url('../images/icons/loading.gif') no-repeat center center;
	height:100%;
	width:100%;
	left:0;
	top:0;
}


/* Info popup */
#info-popup {
	color:#252525;
	max-width:400px;
	font-size:90%;
}
#info-popup h1 {
	font-size:150%;
	margin:0.1em 0 0.5em;
}
#info-popup h2 {
	font-size:130%;
	margin:0 0 0.1em;
}
#info-popup p {
	margin:0 0 0.7em;
}
#info-popup .col.img {
	position: relative;
	width:40%;
}
#info-popup .col.img img {
	width:100%;
	padding:0.4em;
	background:#f2f4f6;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#info-popup .col.main {
	text-align:left;
	width:55%;
}


/************************************************************
Property slider (home page) */

#prop-slider {

}
#prop-slider section {
	overflow:hidden;
}
#prop-slider ul {
	list-style:none;
	white-space:nowrap;
	margin:0;
	padding:0;
}
#prop-slider li {
	position:relative;
	display:inline-block;
	vertical-align:top;
	text-align:center;
	white-space:normal;
	background:#eff2f5;
	margin:0 1em 0 0;
	width:12.7em;

	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}

/*-----------------------------------------------------------
Tiles */

#prop-slider li a {
	display:block;
	padding:1em 1em 3.5em;
	min-height:15em;
	font-size:90%;
	color:inherit;
}
#prop-slider li address,
#prop-slider li p {
	margin:0.3em 0;
	font-size:105%;
}
#prop-slider li img {
	display:block;
	margin:0 auto;
	margin:0 0 0.8em;
	padding:0.2em;
	background:#abbbd2;
	border-radius:0.7em;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#prop-slider li .button {
	position:absolute;
	padding-right:0;
	padding-left:0;
	bottom:0.5em;
	width:90%;
	left:5%;
}

/* Hover */
#prop-slider li:hover {
	background:#30517f;
	box-shadow:inset 0 0 2.5em rgba(31,55,90,0.85);
	color:#fff;
}
#prop-slider li:hover .button.alt { /* Change back to normal styles */
	color:#30517f !important;
	background:#fec028;
	background-image:linear-gradient(to top, #f2b112 50%, #fec028 50%);
}

/* Position saved property marker */
#prop-slider li.saved:after {
	left:0.2em;
	top:0.2em;
}


/*-----------------------------------------------------------
Arrows */

#prop-slider #slider-prev,
#prop-slider #slider-next {
	display:inline-block;
	text-indent:-9999px;
	outline:0;
	height:0;
	margin:0 0 0 0.1em;
	border-top:0.7em solid transparent;
	border-bottom:0.7em solid transparent;
}
#prop-slider #slider-prev {
	border-right:0.7em solid #233e68;
}
#prop-slider #slider-next {
	border-left:0.7em solid #233e68;
}


/************************************************************
Featured property (home page) */

#featured-prop {
	position:relative;
	max-width:956px;
	margin:-5px auto 1em;
	padding:5px 1em 0;
	overflow:hidden;
}
#featured-prop .button {
	vertical-align:top;
	margin-right:0.1em;
}

/*-----------------------------------------------------------
Photos */

/* This is actually shared w/ property details */
figure.photos {
	margin:0;
	position:relative;
}
figure.photos img {
	display:block;
	padding:0.4em;
	background:#f0f2f5;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
figure.photos a {
	display:inline-block;
	position:relative;
}

/* Main photo */
figure.photos a:first-child {
	display:block;
	margin:0 -0.3em 0.7em;
	z-index: 0;
}
figure.photos a:first-child img {
	border-radius:0.5em;
}
figure.photos a:first-child:after { /* Magnifying glass needs to be bigger */
	font-size:150%;
}

/* Smaller photos */
figure.photos a+a {
	display:inline-block;
	margin:1%;
	width:30%;
}

/* Hover magnifying glass */
figure.photos a:before {
	content:' ';
	position:absolute;
	height:100%;
	width:100%;
	left:0;
	top:0;
	background:#30517f;
	background-clip:padding-box;
	border:0.4em solid transparent;
	box-shadow:inset 0 0 2em rgba(31,55,90,0.8);
	opacity:0;

	-moz-box-sizing:border-box;
	box-sizing:border-box;

	-webkit-transition:all 0.5s ease 0s;
	transition:all 0.5s ease 0s;
}
figure.photos a:after {
	content:' ';
	position:absolute;
	padding:1.2em 0;
	margin:-1.2em 0 0 -1.2em;
	width:2.4em;
	left:50%;
	top:50%;
	box-shadow:inset 0 0 0 0.3em #fff, 0.8em 0.8em 0 -0.9em #fff, 1em 1em 0 -0.9em #fff, 1.2em 1.2em 0 -0.9em #fff;
	border-radius:100%;
	opacity:0;

	-webkit-transition:all 0.5s ease 0s;
	transition:all 0.5s ease 0s;
}
figure.photos a:hover:before,
figure.photos a:hover:after {
	opacity:0.75;
}

/* Saved property marker *
figure.photos.saved:after {
	content:' ';
	width:30px;
	height:30px;
	background:transparent url('../images/icons/icons.png') no-repeat 0 -34px;
	position:absolute;
	left:-5px;
	top:-7px;
}*/



/* Layout on home page */
#featured-prop figure.photos {
	/*position:absolute;*/
	float:left;
	padding:0 1%;
	width:38%;
	left:0;
	top:0;
}
#featured-prop figure.photos img {
	background:#abbbd2;
}


/* Tour link (property details page) */
figure.photos a.tour {
	vertical-align:top;
	text-align:center;
	width:100px !important;
	min-height:30px;
	font-size:17pt; /* (160%) we'll keep this one fixed */
	font-weight:bold;
	text-transform:uppercase;
	padding:2em 0 0.6em;
	background:transparent url('../images/icons/icons.png') no-repeat 1px -65px;
}
figure.photos a.tour:before {
	content:'Take the Virtual';
	background:none;
	box-shadow:none;
	line-height:1;
	font-size:60%;
	top:16%;
	opacity:1;
}
figure.photos a.tour:after {
	display:none;
}

.status-box {
	position: absolute;
	top: 6px;
	right: 5px;
	padding: 12px 20px;
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	border-radius: 0 0 0px 0;
	font-weight: bold;
	z-index: 1;
}
#prop-slider .status-box {
	top: 15px;
	right: 15px;
	border-top-right-radius: 7px;
	padding: 4px 6px;
	font-size: 11px;
}
#result-list .status-box {
	top: 4px;
	right: 4px;
	padding: 4px 8px;
}
#info-popup .status-box {
	
}

/*-----------------------------------------------------------
Sections */

#featured-prop header,
#featured-prop nav,
#featured-prop section {
	/*margin:0 0 0 auto;*/
	float:right;
	clear:right;
	width:57%;
}

/* Header */
#featured-prop header {
	padding:0.6em 0;
	border-bottom:4px double #7c90ad;
}
#featured-prop header h2 {
	margin:0;
}

/* Navigation */
#featured-prop nav {
	position:absolute;
	right:0;
	top:0;
}


/*-----------------------------------------------------------
Content */

#featured-prop section {
	font-size:105%;
}
#featured-prop section address {
	font-weight:bold;
	font-size:150%;
	margin:0.5em 0 0;
}
#featured-prop section h3 {
	margin:0.5em 0 0.3em;
}
#featured-prop section ul {
	margin:0.7em 0;
	padding:0 0 0 1em;
}


/************************************************************
Callouts */

.callout {
	margin:1em 0;
}
.callout>a {
	display:block;
	padding:0.6em 1em 0.4em;
	color:inherit;
}
.callout h3 {
	font-weight:bold;
	color:#354a6e;
	margin:0;
}
.callout p {
	margin:0.4em 0;
}


/* Home page */
.callouts {
	display:table;
	margin:-1em;
	border-spacing:1em;
}
.callouts aside {
	display:table-cell;
	vertical-align:middle;
	width:47%;
	margin:0;
}
.callouts aside.box { /* Make this one a bit wider */
	width:60%;
}

/*
.col.main .callout {
	display:inline-block;
	vertical-align:top;
	margin-right:2.5%;
	width:47%;
}
*/


/*-----------------------------------------------------------
Box callouts */

.box {
	background:#eff2f5;
	padding:0.3em 1em;
}


/* As info box */
.box.info {
	margin:1em 0 1.5em;
}
.box.info h3 {
	padding:0 0 0.2em;
	margin:0.4em 0;
	border-bottom:1px solid #bfc9d7;
}
.box.info address,
.box.info p {
	margin:0.7em 0;
	line-height:1.4;
}


/* As callout */
.callout.box {
	border-radius:1em;
	padding:0;
}


/*-----------------------------------------------------------
Agent callout */

.box.agent {
	overflow:hidden;
	margin:0.5em 0 2em;
	padding:1em;
}
.box.agent img {
	width:32%;
	float:left;
}
.box.agent figcaption {
	width:62%;
	float:right;
}
.box.agent h3 {
	margin:0;
}
.box.agent h4 {
	font-style:italic;
	margin:0.2em 0;
}
.box.agent p {
	margin:0.5em 0 0;
}
.box.agent ul {
	list-style:none;
	margin:0.5em 0 0;
	padding:0;
	font-size:105%;
}
.box.agent li {
	margin:0.2em 0;
}


/*-----------------------------------------------------------
Open house callout */

.callout.open-house {
	background:transparent url('../images/photos/open-house.jpg') no-repeat center center;
	border-radius:1em;
	text-align:center;
}
.callout.open-house p.button {
	margin:26% 0 0.3em;
}


/*-----------------------------------------------------------
Free app callout */

.callout.app {
	text-align:center;
	/*background:transparent url('../images/icons/download-app.png') no-repeat center top;*/
	background-size:100% auto;
}
.callout.app>a {
	padding:76% 0.5em 0 0;
}


/*-----------------------------------------------------------
Bottom-of-page callouts */

#bottom .callout {
	text-align:center;
	margin:0 auto;
	max-width:720px;
	line-height:1.3;
}
#bottom .callout>a {
	padding:3% 0;
}
#bottom .callout p:first-child {
	font-size:160%;
	margin:0 0 1em;
}


/*-----------------------------------------------------------
Login form */

#login {
	white-space:nowrap;
	font-size:95%;
}
#login p {
	position:relative;
	padding:0 6em 0 0;
}
#login #login-email {
	vertical-align:middle;
	border-color:#e2e5e8;
	width:100%;
}
#login .button {
	position:absolute;
	font-size:105%;
	height:100%;
	right:0;
	top:0;
}



/************************************************************
Our Agents */

/*-----------------------------------------------------------
Agent List */

/* Main box */
#agent-list figure {
	overflow:hidden;
	background:#f1f2f6;
	display:inline-block;
	vertical-align:top;
	margin:0 2.5% 3% 0;
	padding:2%;
	width:47%;

	-moz-box-sizing:border-box;
	box-sizing:border-box;

	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}
#agent-list figure:hover {
	background:#cbd3de;
}

/* Image */
#agent-list figure>a {
	float:left;
	width:40%;
}
#agent-list figure img {
	display:block;
	margin:0 auto;
	background:#abbbd2;
	padding:0.4em;
	width:100%;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* Info */
#agent-list figure figcaption {
	margin:0 0 -1em;
	float:right;
	width:53%;
}
#agent-list figure h3 {
	font-size:180%;
	font-family:DancingScript,Arial,Helvetica,sans-serif;
	margin:0;
	color:#375682;
}
#agent-list figure h4 {
	font-style:italic;
	font-weight:bold;
	margin:0;
}

/* Contact #s */
#agent-list figure ul {
	list-style:none;
	margin:0.5em 0;
	padding:0;
}
#agent-list figure li {
	margin:0.2em 0;
}
/*#agent-list figure li strong {
	display:inline-block;
	min-width:3.5em;
}*/

/* Buttons */
#agent-list figure .button {
	display:block;
	text-align:center;
	max-width:150px;
}


/*-----------------------------------------------------------
Agent Bios */

#agent-bio {
	overflow:hidden;
	padding:0 0 0 200px;
	color:#375682;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

/* Image / buttons */
#agent-bio figure {
	float:left;
	width:175px;
	margin:0 0 0 -200px;
	text-align:center;
}
#agent-bio figure img {
	display:block;
	margin:0 auto 1em;
	background:#abbbd2;
	padding:0.4em;
	width:100%;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#agent-bio figure .button {
	display:block;
}
#agent-bio figure p {
	margin:0.5em 0;
}

/* Bio */
#agent-bio header {
	padding:0.2em 0 0.4em;
	border-bottom:4px double #7c90ad;
}
#agent-bio header h2,
#agent-bio header h4 {
	display:inline-block;
	margin:0;
}
#agent-bio header h4 {
	font-style:italic;
	font-weight:bold;
}
#agent-bio header h4:before {
	content:'  \2013  ';
	margin:0 0.2em;
}


/* Clip height */
#agent-bio section {
	position:relative;
	overflow:hidden;
	max-height:240px;

	-webkit-transition:all 0.4s ease-in 0s;
	transition:all 0.4s ease-in 0s;
}

/* Old way - on hover
#agent-bio section:after {
	content:'Read More';
	font:140%/1.1 DancingScript,Arial,Helvetica,sans-serif;
	position:absolute;
	text-align:center;
	background:#cbd3de;
	padding:0.2em 0 0;
	width:100%;
	bottom:0;
	left:0;
	box-shadow:0 -0.3em 0.3em -0.3em rgba(23,44,77,0.5);

	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}
#agent-bio section:hover {
	max-height:9999px;
}
#agent-bio section:hover:after {
	visibility:hidden;
	opacity:0;
}
*/

/* Read More link */
#agent-bio .read-more {
	font:140%/1.1 DancingScript,Arial,Helvetica,sans-serif;
	position:absolute;
	text-align:center;
	background:#cbd3de;
	padding:0.2em 0 0;
	width:100%;
	bottom:0;
	left:0;
	box-shadow:0 -0.3em 0.3em -0.3em rgba(23,44,77,0.5);

	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}

/* Show all / don't clip */
#agent-bio.show section {
	max-height:2000px;
}
#agent-bio.show .read-more {
	visibility:hidden;
	opacity:0;
}



/************************************************************
Odds and Ends */

/*-----------------------------------------------------------
Side navigation */

#side-nav {
	font-size:110%;
	margin:0 0 2em;
}
#side-nav h3 {
	font-family:DancingScript,Arial,Helvetica,sans-serif;
	color:#375682;
}
#side-nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
#side-nav li {
	border-top:1px solid #bfc9d7;
	padding:0.3em 0;
}
#side-nav li a {
	display:block;
	color:inherit;
}

/* Arrows */
#side-nav li a:after {
	content:'\A0'; /* Non-breaking space : This + inline will allow us to wrap the arrow with the preceding word */
	display:inline;
	vertical-align:middle;
	font-size:0;
	border-left:6px solid #586e95;
	border-top:6px solid transparent;
	border-bottom:6px solid transparent;
	margin:0 0 0 6px;
	position:relative;
	left:0;

	-webkit-transition:all 0.4s ease 0s;
	transition:all 0.4s ease 0s;
}
#side-nav li a:hover:after {
	left:4px;
}


/*-----------------------------------------------------------
Action icons */

.actions {
	text-align:right;
}
.actions ul {
	list-style:none;
	margin:0;
	padding:0;
	font-size:80%;
}
.actions li {
	display:inline-block;
}
.actions li a {
	position:relative;
	display:block;
	text-align:center;
	padding:32px 0.2em 0;
	min-width:30px;
	color:#252525 !important;
}
.actions li a:before {
	content:' ';
	position:absolute;
	margin:0 0 0 -15px;
	height:31px;
	width:30px;
	left:50%;
	top:0;
	background:transparent url('../images/icons/icons.png') no-repeat center center;
}

.actions .save a:before { background-position:1px 2px; }
.actions .email a:before { background-position:-33px 1px; }
.actions .print a:before { background-position:-68px 0; }
.actions .book a:before { background-position:-102px 0; }
.actions .share a:before { background-position:-174px 0; }

.actions .save a:hover:before { background-position:0 -34px; }
.actions .email a:hover:before { background-position:-34px -34px; }
.actions .print a:hover:before { background-position:-69px -36px; }
.actions .book a:hover:before { background-position:-103px -36px; }
.actions .share a:hover:before { background-position:-175px -35px; }

/* Delete icon */
.actions .delete a:before {
	content:'X';
	background:none;
	font-size:240%;
	line-height:1.35;
	color:#375682;
}


/* Back icon */
.actions .back a:before {
	margin:0.3em 0 0 -0.5em;
	left:50%;
	width:0;
	height:0;
	background:none;
	border-right:1em solid #2f507d;
	border-top:1em solid transparent;
	border-bottom:1em solid transparent;
	box-shadow:0.2em 0 0.1em -0.2em rgba(0,0,0,0.7);
}
.actions .back a:hover:before {
	border-right-color:#fec028;
}



/*-----------------------------------------------------------
Tables */

table {
	width:100%;
	margin:1em 0;
	border-collapse:collapse;
}
table caption {
	font-size:140%;
	text-align:left;
	margin:0.7em 0 0.3em;
}
table thead {
	font-size:140%;
}
table thead th {
	text-align:left;
	font-weight:normal;
	padding:0 0 0.2em;
}
table tbody th,
table tbody td {
	text-align:left;
	padding:0.2em 0.4em;
}
table tbody tr:nth-child(odd) {
	background:#e2e6ec;
}


/*-----------------------------------------------------------
No Image Available */

em.noimg {
	display:block;
	text-align:center;
	padding:28% 1em;
	width:auto;
	color:#30517f;
	font-size:130%;
	font-weight:bold;
	text-transform:uppercase;
	border:0.3em solid #abbbd2;
	background:#cbd3df url('../images/site/homes-watermark-light.png') repeat-x center bottom;
	background-size:625% 100%;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


/*-----------------------------------------------------------
Image frames */

figure.frame {
	margin:2em 0;
}
figure.frame img {
	display:block;
	background:#cbd3df;
	padding:0.3em;
	margin:auto;

	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
figure.frame figcaption {
	text-align:center;
	font-weight:bold;
	font-size:90%;
	margin:0.5em 0;
}


/*-----------------------------------------------------------
Logos (about page) */

ul.logos {
	list-style:none;
	text-align:center;
	margin:1.5em 0 0;
	max-width:580px;
	padding:0;

	/* Columns - use set widths so the column count can automatically adjust w/ responsive */
	-moz-column-width:150px;
	-webkit-column-width:150px;
	-ms-column-width:150px;
	column-width:150px;
}
ul.logos li {
	margin:0 0 1em;
}

/* Force the YouTube logo to wrap to the next column - may or may not be reliable, but it seems to work okay */
ul.logos li:nth-child(6) {
	margin-top:2em;
}

.about-staff {
	padding:0; margin:0 2em 1em 0; float: left;
}

.about-staff img {
	background: none repeat scroll 0 0 #cbd3df;
    box-sizing: border-box;
    display: block;
    padding: 0.3em;
}

.about-staff h3 {font-size: 120%;}




/*-----------------------------------------------------------
Links list */

.links {
	list-style:none;
	margin:1em 0;
	padding:0 0 0 1em;
}
.links li {
	margin:0.3em 0;
}
.links .arrow {
	font-weight:normal;
}


/*-----------------------------------------------------------
Site Map page */

#site-map nav {
	display:inline-block;
	vertical-align:top;
	margin:0 4% 4% 0;
	width:45%;
}
#site-map h3 {
	padding:0 0 0.2em;
	border-bottom:1px solid #bfc9d7;
}
#site-map ul.links {
	margin:0.7em 0;
	padding:0;
}


/*-----------------------------------------------------------
Other */

/* Space out the headings on the Helpful Links page */
#helpful-links .main.col h3 {
	padding-top:3%;
}

/* Google maps */
#map-canvas,
.map-canvas {
	border:0.4em solid #f0f2f5;
	margin:0 0 2em;
	height:225px;
}

/* Map w/in info box (contact page) */
.box.info .map-canvas {
	margin:-0.3em 0 0.5em;
	height:160px;
}


/* Saved marker */
.saved:after {
	/*content:'Favorite';*/
	content:' ';
	position:absolute;
	background:transparent url('../images/icons/icons.png') no-repeat 0 -34px;
	/*font:130%/31px DancingScript,Arial,Helvetica,sans-serif;
	text-shadow:-1px 0 0 rgba(255,255,255,0.5);
	text-indent:33px;
	color:#375682;*/
	height:30px;
	width:30px;
	left:-5px;
	top:-7px;
}

/************************************************************
/************************************************************
RESPONSIVE */


/* Starting to shrink */
@media screen and (max-width: 960px) {

	/*----------------------------------------------------------------------
	Header: Social */

	body>header .social {
		text-align:center;
		max-width:350px;
		margin-right:0;
		line-height:2;
		height:2.7em;
	}

	/*----------------------------------------------------------------------
	Footer */

	/* Address area */
	#foot-nav+section {
		background-position:left center; /* Also shift logo to line up better */
		max-width:816px; /* Don't need to be so wide, either */
	}
	body>footer address {
		padding-left:8%;
	}
	body>footer address span { /* Wrap lines */
		display:block;
	}
	body>footer address span+span:before {
		display:none;
	}
	body>footer address br { /* Surprisingly, this works */
		display:none;
	}

	/* "Grr to IE" part the last (undo our other fixes) */
	#jb {
		position:static;
	}
	#jb a {
		margin-top:-1.6em;
		right:2em;
	}


}
@media screen and (max-width: 880px) {

	/*----------------------------------------------------------------------
	Header */

	/* Slogan */
	#slogan {
		max-width:225px;
	}
	#slogan h2 {
		font-size:140%;
		margin:0.5em 0;
	}

	/* Social */
	body>header .social {
		max-width:340px;
		font-size:90%;
	}

	/*----------------------------------------------------------------------
	Property search header */

	#prop-search section {
		width:75%;
	}
	#prop-search footer {
		width:24%;
	}


	/*----------------------------------------------------------------------
	Home page callouts */

	.callouts aside.open-house {
		width:42%;
	}

}


/* Tablet */
@media screen and (max-width: 820px) {

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

	/* Column widths */
	.col.main {
		width:60%;
	}
	.col.side {
		width:35%;
	}

	/*----------------------------------------------------------------------
	Header */

	/* Shrink nav links */
	#main-nav>ul>li>a { /* First level */
		font-size:100%;
	}
	#main-nav li ul a { /* Second level */
		font-size:100%;
	}

	/* Social and Slogan */
	#slogan {
		max-width:500px;
		width:43.5%;
	}
	body>header .social {
		margin:0 0 0 1em;
		max-width:500px;
		text-align:left;
		width:43.5%;
		float:left;
		padding:0;
	}
	#top {
		margin:0 auto;
	}

	/*----------------------------------------------------------------------
	Property search (home page) */

	/* Two columns instead of three */
	#banner-tiles~#prop-search section {
		max-width:580px;
		margin:0 auto;
	}
	#banner-tiles~#prop-search section p {
		width:48%;
	}


	/*----------------------------------------------------------------------
	Footer */

	/* Shrink nav links */
	#foot-nav ul {
		font-size:100%;
	}


	/* Footer address area */
	body>footer address {
		padding-left:6%;
	}


	/*----------------------------------------------------------------------
	Home page callouts */

	/* Shrink them both */
	.callouts {
		font-size:90%;
	}

}
@media screen and (max-width: 720px) {

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

	/* Shrink global text sizes */
	body {
		font-size:10pt;
	}
	h1,h2 {
		font-size:200%;
	}


	/*----------------------------------------------------------------------
	Header */

	/* Make room for nav menu button */
	body>header {
		border-right:4em solid transparent;
		padding-bottom:3.5em;
	}

	/* Slogan */
	#slogan {
		position:absolute;
		text-align:center;
		max-width:none;
		padding:0 2em 0 7em;
		margin:0 auto;
		bottom:0.2em;
		width:100%;
		left:0;
	}

	/* Move social down and over */
	body>header .social {
		padding:4em 0 0 0;
		margin:0 -2.5em 0 0;
		text-align:right;
		max-width:none;
		height:auto;
		width:auto;
		float:none;
	}

	/* Top area - move buttons around */
	#top {
		position:absolute;
		right:1em;
		margin:0;
		top:1em;
	}
	#top p {
		width:auto;
	}
	#top .button.contact {
		padding:0.4em 0.7em 0.4em 0.3em;
	}
	#top .button.contact:before {
		margin-right:0.2em;
	}
	#top .button.acct {
		float:left;
		margin:0 0.4em 0 0;
		padding:0.4em 0.5em 0.4em 0.7em;
		font-size:130%; /* Match to Contact button */
	}
	#top .button span { /* Shorten button texts */
		display:none;
	}


	/*----------------------------------------------------------------------
	Navigation */

	/* Header navigation - change to a menu */
	#main-nav {
		position:fixed;
		z-index:101;
		height:100%;
		width:100%;
		right:0;
		bottom:100%;
		padding:0;
		background-image:none;
		visibility:hidden;
		overflow-y:auto;
		/*opacity:0;*/

		-webkit-transition:all 0.5s ease 0s;
		transition:all 0.5s ease 0s;
	}
	#main-nav:before,
	#main-nav:after {
		display:none;
	}
	#main-nav:target {
		visibility:visible;
		/*opacity:1;*/
		bottom:0;
	}

	#main-nav>ul {
		display:block;
	}
	#main-nav>ul>li {
		display:block;
	}
	#main-nav>ul>li>a {
		text-align:left;
		margin:0;
	}
	#main-nav>ul>li.sel>a {
		background:none;
		box-shadow:none;
	}
	#main-nav>ul>li>a:after {
		display:none !important;
	}

	#main-nav li {
		border-top:1px solid #627a9d;
	}
	#main-nav>ul>li:first-child {
		border-top:none;
	}
	#main-nav li a:hover {
		background:#516e95 !important;

		-webkit-transition:all 0.4s ease 0s;
		transition:all 0.4s ease 0s;
	}

	#main-nav li ul {
		position:static;
		background:none;
		box-shadow:none;
		border:none;
		padding:0;
		margin:0;
		visibility:visible;
		opacity:1;
	}
	#main-nav li li {
		border:none !important;
	}
	#main-nav li li a {
		padding:0.6em 2.5em;
	}
	#main-nav li li:last-child>a {
		padding-bottom:1em;
	}


	/* Nav open / close links */
	#nav-jump {
		display:block;
		position:absolute;
		text-indent:-9999px;
		outline:none;
		z-index:100;
		right:1.5em;
		top:1.3em;
		width:55px;
		height:60px;
		/*background:rgba(255,255,255,0.15);*/
		opacity:0.8;
	}
	#nav-jump:after {
		content:' ';
		position:absolute;
		margin:-2px 0 0 -18px;
		top:50%;
		left:50%;
		width:36px;
		height:4px;
		background:#fff;
		box-shadow:0 10px 0 #fff, 0 -10px 0 #fff;
	}

	#nav-close {
		display:block;
		position:absolute;
		text-indent:-9999px;
		z-index:10;
		outline:none;
		right:0;
		top:0;
		width:54px;
		height:44px;
		color:#8dc63f;
	}
	#nav-close:after {
		content:'\00d7';
		display:block;
		text-indent:0;
		text-align:center;
		font-size:250%;
		line-height:0.25;
	}


	/*----------------------------------------------------------------------
	Banner */

	/* Fill out top of banner area */
	#banner>:first-child {
		clear:both; /* Make sure it clears the logo */
	}
	#banner-tiles,
	#prop-search {
		border-width:0;
	}
	#banner-tiles~#prop-search {
		border-left-width:40px;
		border-right-width:40px;
		margin-top:-20%;
		top:-1em;
	}
	#banner-tiles figure {
		border-top:0.3em solid #496996;
	}
	#banner>img {
		padding-top:5px;
		border:none;
	}


	/* Page banners */
	#banner>header {
		margin-top:-70px;
	}


	/*----------------------------------------------------------------------
	Footer */

	/* Footer address area - rearrange */
	#foot-nav+section {
		background-position:center top; /* Move logo to top */
		background-size: 100px auto;
		padding:100px 33% 0 0;
	}
	body>footer address { /* No longer side-by-side */
		display:block;
		border:none;
	}
	body>footer address span { /* Back to original wrapping */
		display:inline;
	}
	body>footer address span+span:before {
		display:inline;
	}
	body>footer address br {
		display:inline;
	}
	body>footer .social { /* Move this back down, too */
		width:33%;
		padding:0;
		margin:0;
	}


	/* Footer / copyright - move JB logo to the bottom */
	#copyright {
		text-align:center;
		margin-bottom:3.5em;
	}
	#copyright>p {
		padding:0;
	}
	#copyright>p>em {
		display:block;
		margin-top:0.2em;
	}
	#jb {
		position:absolute;
		margin:1em 0 0 !important;
		width:100%;
		top:100%;
		left:0;
	}
	#jb a {
		position:relative;
		text-align:right;
		display:block;
		margin:0 auto;
		right:auto;
	}


	/*----------------------------------------------------------------------
	Home page callouts */

	/* Swap to vertical layout */
	.callouts {
		display:block;
		margin:0;
	}
	.callouts aside {
		display:block;
		width:auto !important;
		max-width:300px;
		margin:1em auto;
	}


	/*----------------------------------------------------------------------
	Agent list */

	/* Shrink font slightly */
	#agent-list figure {
		font-size:95%;
	}


	/*-----------------------------------------------------------
	Site Map page */

	#site-map nav {
		margin:0 0 1.5em;
		display:block;
		width:auto;
	}

}
@media screen and (max-width: 660px) {

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

	/* Column widths */
	.col.main {
		width:55%;
	}
	.col.side {
		width:40%;
	}


	/*----------------------------------------------------------------------
	Header: Slogan */

	#slogan h2 {
		font-size:125%;
	}

	/*----------------------------------------------------------------------
	Banner area (pages) */

	#banner>header {
		border-right-width:55px;
		border-left-width:55px;
	}
	#banner>header p {
		margin:1em 2em;
		font-size:90%;
	}

	/*----------------------------------------------------------------------
	Featured property (home page) */

	#featured-prop header {
		margin:0 0 1em;
		float:none;
		width:auto;
	}
	#featured-prop section address {
		margin:0;
	}

	/* Photos (shared with property details) - shrink borders + magnifying glass */
	figure.photos {
		font-size:70%;
	}


	/*----------------------------------------------------------------------
	Property search (NOT home page) */

	#banner>#prop-search:first-child section {
		display:block;
		margin:0 -1%;
		width:102%;
	}
	#banner>#prop-search:first-child footer { /* Buttons area */
		text-align:center;
		width:auto;
	}
	#banner>#prop-search:first-child footer p {
		margin:0.7em 0;
	}
	#banner>#prop-search:first-child footer a {
		display:inline-block;
	}
	#prop-search footer label span { /* We have room for the expanded label again */
		display:inline;
	}


	/*-----------------------------------------------------------
	Map results - info popup */

	#info-popup {
		max-width:350px;
	}


	/*----------------------------------------------------------------------
	Agent list */

	/* Shrink font again */
	#agent-list figure {
		font-size:90%;
	}

	/* Increase width of info area */
	#agent-list figure figcaption {
		width:55%;
	}

}


/* Mobile */
@media screen and (max-width: 520px) {

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

	/* Shrink headings */
	h1,h2 {
		font-size:180%;
	}

	/* Shrink buttons slightly */
	.button {
		font-size:110%;
	}

	/* DEATH TO THE COLUMNS! */
	.col {
		display:block !important;
		width:auto !important;
		margin:2em 0 3em !important;
	}

	/* Callouts can't get too big */
	.callout {
		margin:1em auto;
		max-width:300px;
	}


	/*----------------------------------------------------------------------
	Header */

	/* Shrink logo a little */
	#logo a {
		background-size:contain;
		margin-left:0.5em;
/* 		font-size:90%; */
	}


	/* Kill right-hand space */
	body>header {
		border-right:none;
		min-height:6.5em;
	}

	/* Remove social (it's in the footer anyway) */
	body>header .social {
		display:none;
	}

	/* Slogan */
	#slogan {
		padding:0 0 0 11em;
		box-sizing: border-box;
		text-align: right;
	}
	#slogan h2 {
		max-width:330px;
		margin:0.5em auto;
	}

	/* Move top thingy down */
	#top {
		position:static;
		margin:0 4.5em 0 0;
	}
	#top p {
		padding:0 0.3em 0 1em;
		margin:0;
	}

	/* Contact button - shrink and stuff */
	#top .button.contact {
		padding:0.4em 0.8em 0.4em 0.6em;
		font-size:120%;
	}
	#top .button.contact:before {
		margin:-4px 0.4em -10px 0;
	}


	/*----------------------------------------------------------------------
	Footer */

	/* Navigation - allow it to wrap */
	#foot-nav ul {
		display:block;
		padding:0.5em 0;
	}
	#foot-nav li {
		display:inline-block;
	}
	#foot-nav li a {
		padding:0.5em 1.2em;
	}


	/* Footer address area */
	#foot-nav+section {
		padding:120px 0;
		background-size: 115px auto;
	}
	body>footer address {
		max-width:290px;
		margin:1.5em auto;
		padding:0;
	}
	body>footer .social { /* Move social down to the bottom center */
		width:100%;
		bottom:0;
		top:auto;
	}


	/*----------------------------------------------------------------------
	Banner area */

	/* Home page - just get rid of it; it's getting in the way */
	#banner-tiles {
		display:none;
	}
	#banner-tiles~#prop-search {
		margin-top:0;
		border:none;
		clear:both;
		top:0;
	}

	/* Pages - get rid of fluff text */
	#banner>header {
		border-right-width:20px;
		border-left-width:20px;
		max-width:400px;
		margin-top:-8%;
	}
	#banner>header p {
		display:none;
	}
	#banner>img { /* Keep the image from getting TOO tiny */
		min-height:100px;
	}


	/*----------------------------------------------------------------------
	Featured property (home page) */

	/* It's a bit too wide */
	#featured-prop {
		max-width:440px;
	}

	/* Keep header lines from cutting into the icons */
	#featured-prop header {
		margin-top:0.3em;
	}

	/* Kill the columns! */
	#featured-prop figure.photos,
	#featured-prop section {
		float:none;
		width:auto;
	}
	#featured-prop section {
		margin:1em 1.5%;
	}


	/* Map search - shrink height */
	#results-map.open {
		height:350px;
	}


	/*----------------------------------------------------------------------
	Property search (NOT home page) */

	/* Can pretty much match the home page now */
	#banner>#prop-search:first-child section p {
		width:48%;
	}


	/*-----------------------------------------------------------
	Map results - info popup */

	#info-popup {
		max-width:280px;
	}
	#info-popup .col.img {
		margin:0 !important;
		float:left !important;
		width:32% !important;
		font-size:50%;
	}
	#info-popup .col.main {
		margin:0 !important;
		float:right !important;
		width:65% !important;
	}


	/*----------------------------------------------------------------------
	Agents list */

	/* Make single column; back to full font size */
	#agent-list figure {
		display:block;
		margin-right:0;
		font-size:100%;
		width:auto;
	}

	/* Adjust positioning of info area */
	#agent-list figure figcaption {
		margin:0.5em 0.2em -1em;
	}


	/*----------------------------------------------------------------------
	Agent bio */

	/* Shrink photo and text */
	#agent-bio {
		padding-left:170px;
	}
	#agent-bio figure {
		margin-left:-170px;
		width:150px;
	}
	#agent-bio section {
		font-size:90%;
		max-height:200px; /* Don't need as much space, either */
	}

	/* Put headings on their own lines */
	#agent-bio header h4 {
		display:block;
	}
	#agent-bio header h4:before {
		display:none;
	}

}
@media screen and (max-width: 440px) {


	/*----------------------------------------------------------------------
	Header area */

	/* Buttons - no more icon / shrink to same size */
	#top {
		margin:0.2em 4.2em 0 0;
	}
	#top .button.contact,
	#top .button.acct {
		font-size:110%;
		padding:0.4em 0.7em;
	}
	#top .button.acct {
		padding-left:1em; /* Needs space for the star yet */
	}
	#top .button.contact:before {
		display:none;
	}
	#slogan {
		padding: 0 2em 0 11em;
	}


	/*----------------------------------------------------------------------
	Property search (ALL) */

	/* That header is too big */
	#prop-search header {
		font-size:110%;
	}

	/*----------------------------------------------------------------------
	Agent bio */

	/* Shrink photo again */
	#agent-bio {
		padding-left:140px;
		margin:0 -0.5em !important;
	}
	#agent-bio figure {
		margin-left:-140px;
		font-size:90%;
		width:125px;
	}

	/* Also shrink info area */
	#agent-bio section {
		max-height:170px;
	}

}
@media screen and (max-width: 390px) {

	/*----------------------------------------------------------------------
	Header area: Buttons */
	
	#nav-jump {
		top: 0.75em;
	}

	#top {
		margin:2.5em 0.2em 0 0;
	}

}