/* Master layout */

/* colors

Main green -- #333E60
	darker green (link hover) -- #333E60
	
Main blue/Navy -- #343434
	lighter blue -- #70706f
	tertiary blue -- #e5e5e5
	
light gray (bg/img border) -- #eae9e8
light blue (testimonial text/name) -- #333E60
*/

@font-face {
	font-family:NuevaStd;
	src:url('../fonts/nuevastd-reg.eot'); /* IE8- */
	src:url('../fonts/nuevastd-reg.eot?iefix') format('embedded-opentype'), /* IE9 */
		url('../fonts/nuevastd-reg.ttf') format('truetype'); /* The rest of the world */
}

@font-face {
	font-family:NuevaStd-bold;
	src:url('../fonts/nuevastd-bold.eot'); /* IE8- */
	src:url('../fonts/nuevastd-bold.eot?iefix') format('embedded-opentype'), /* IE9 */
		url('../fonts/nuevastd-bold.ttf') format('truetype'); /* The rest of the world */
}

/*
@font-face {
	font-family:Verdana;
	src:url('../fonts/verdana.eot');
	src:url('../fonts/verdana.eot?iefix') format('embedded-opentype'),
		url('../fonts/verdana.ttf') format('truetype'); 
}
*/

/************************************************************
Global styles */

html {

}
body {
	margin:0;
	padding:0;
	font: 12pt Verdana, Geneva, Arial, sans-serif;
	
	/* make room for fixed header */
	padding-top: 118px;
}

/* Links */
a:link,
a:visited,
a:hover,
a:active {
	text-decoration:none;
	outline:none;
	color:#343434;
}
a img {
	border:none;
}
img {
	max-width:100%;
}
#map-canvas img {
	max-width:none;
}
a[href^="tel:"] {
	color:inherit;
	cursor:inherit;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
	font-family: NuevaStd-bold, "Lucida Bright", Times, serif;
	font-weight:normal;
	text-transform:none;
}
h1 {
	font-size:220%;
}
h2 {
	font-size:200%;
}
h3 {
	font-size:175%;
}
h4 {
	font-size:160%;
}

address {
	font-style:inherit;
}


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

body > header {
	border-top:6px solid #333E60;
	background-color:#FFF;
	color:#343434;
	width:100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	position: fixed;
	top:0;
	left:0;
	z-index: 5;
}

body > header > section {
	position: relative;
	max-width:980px;
	margin:0 auto;
	
	box-sizing:border-box;
	padding-left:275px;
}

body > header > section > article {
	display: inline-block;
	
	position: absolute;
	top:50%;
	margin-top:-40px;
	
	left:0;
}

.logo {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.logo > a {
	display: block;
	height:100%;
	width:100%;
	text-align: left;
	text-indent: -9999px;
}

.logo#c21 + .logo.raven {
/* 	border-left:2px solid rgba(255,255,255,0.15); */
}

.logo#c21 {
	height: 60px;
	width: 95px;
	background:url('../images/c21_logo.png') no-repeat center center;
}

.logo.raven {
	position: relative;
	height:65px;
	width:300px;
	background:url('../images/logo-new.png') no-repeat center center;
	background-size: contain;
}

body > header > section > article > .logo.raven {
	margin-left:18px;
}

#top-nav {
	margin:20px auto 0;
	text-align: right;
}

#top-nav ul {
	margin:0 0 12px;
	list-style: none;
	padding:0;
}
#main-nav > ul > li > ul a {
	color: #FFF;
}
#top-nav ul li {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background-image:url('../images/action-icon-sprite-new.jpg');
	background-repeat: no-repeat;
}

#top-nav ul li a {
	display: block;
	height:100%;
	width:100%;
	color: #343434;
	text-align: left;
	text-indent:-9999px;
}
#top-nav ul li:last-child {
	opacity: .9;
}
#top-nav ul li + li {
	margin-left:12px;
}

#top-nav li:first-child {background:none;margin-top:5px;}
#top-nav a.phone-number {
	font: 135% NuevaStd, "Lucida Bright", Times, serif;
	color:#343434;
	font-weight:bold;
	text-align: right;
	text-indent: -9999px;
	height:auto;
	width:auto;
}

#top-nav .maps {
	width:21px;
	height:26px;
	background-position: 0 0;
}
	#top-nav .maps:hover {
		background-position: 0 -27px;
	}

#top-nav .email {
	width:31px;
	height:22px;
	background-position: -20px 0;
}
#top-nav .email:hover {
	background-position: -20px -27px;
}

#top-nav .favorite {
	position: relative;
	width:29px;
	height:24px;
	background-position: -52px 0;
}
	#top-nav .favorite:hover {
		background-position: -52px -27px;
	}
	
/* Favorites Count */

.favorite:after {
	content:attr(data-count);
	color:#000;
	font-size:70%;
	line-height:1;
	text-align: center;
	cursor:pointer;
	
	display: inline-block;
	vertical-align: middle;
	height:15px;
	width:16px;
	padding:2px 0 0 1px;
	
	background-color:#FFF;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	
	position: absolute;
	bottom:-2px;
	right:-3px;
}

/* Contact ('Email') button hover effect */

.rollover {
	
}

#main-nav {
	margin:0 auto;
}

#main-nav a {
	display: inline-block;
	color:#343434;
	font-family:NuevaStd, "Lucida Bright", Times, serif;
}

#main-nav > ul {
	list-style: none;
	padding:0;
	margin:0;
	text-align: right;
}

#main-nav > ul > li {
	position: relative;
	display: inline-block;
}

#main-nav > ul > li > a {
	position: relative;
	padding: 6px 0px 20px 0px;
	font-size:115%;
}

#main-nav > ul > li.sel > a, 
#main-nav > ul > li > a:hover,
#main-nav > ul > li > a:active, 
#main-nav > ul > li:hover > a {
	color:#333E60;
	
	-webkit-transition:all 0.3s ease 0s;
	transition:all 0.3s ease 0s;
}

#main-nav > ul > li.sel > a:after,
#main-nav > ul > li:hover > a:after {
	content:"";
	
	border-bottom:9px solid #333E60;
	border-left:9px solid transparent;
	border-right:9px solid transparent;
	
	position: absolute;
	bottom:0;
	left:50%;
	margin-left:-9px;
	
	-moz-transform:scale(.9999);
	transform:scale(.9999);
}

/* overlay :after to produce appearance of rounded corner */
#main-nav > ul > li.sel > a:before,
#main-nav > ul > li:hover > a:before {
	content:"";
	display: inline-block;
	width:10px;
	height:1px;
	
	background-color:#343434;
	
	position: absolute;
	top:100%;
	left:50%;
	margin-left:-5px;
	margin-top:-9px;
	z-index: 100;
}

#main-nav > ul > li + li {
	margin-left:24px;
}

#main-nav > ul > li + li:after {
	content:"";
	display: inline-block;
	height:52%;
	width:2px;
	background-color:#FFF;
	opacity: 0.15;
	
	position: absolute;
	top:2px;
	left:-15px;
}

#main-nav ul ul {
	margin:0;
	list-style: none;
	
	position: absolute;
	left:-9999px;
	
	box-sizing:border-box;
	padding:10px 20px;
	border-radius:5px;
	background-color:#333E60;
	
	text-align: center;
	
	overflow: hidden;
	z-index: 5;
}

#main-nav ul > li:hover ul {
	left:0;
	margin-left:-70px;
}

#main-nav ul ul > li {
	min-width:220px;
}

#main-nav ul ul > li > a {
	width:100%;
	display: block;
	padding:10px 0;
	
	font:90% Verdana, Geneva, Arial, sans-serif;
}

#main-nav ul ul > li > a:hover, #main-nav ul ul > li > a:active {
	background-color:#2a334e;
}

#main-nav ul ul > li + li {
	border-top:1px solid rgba(0,0,0,0.1);
}

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

body > footer {
	/*margin-top:25px;*/
	background-color:#343434;
	text-align: center;
	color:#FFF;
}

#foot-nav {
	position: relative;
	margin:0 auto;
	padding:25px 0 30px;
	font-family:NuevaStd, "Lucida Bright", Times, serif;
	
	z-index: 0;
}

#foot-nav:after {
	content:"";
	display: block;
	height:100%;
	width:100%;
	
	background:url('../images/residential_bg.png') no-repeat center bottom;
	background-size:100% auto;
	opacity: 0.1;
	
	position: absolute;
	bottom:0;
	left:0;
	
	z-index: -1;
}

#foot-nav ul {
	max-width:980px;
	margin:0 auto;
}

#foot-nav li {
	display: inline-block;
	vertical-align: middle;
}

#foot-nav ul:first-child { /* page links */
	list-style: none;
	margin:0 auto 25px;
	padding:0;
}

#foot-nav ul:first-child li + li {
	margin-left:28px;
}

#foot-nav ul:first-child li a {
	display: inline-block;
	color:#FFF;
	font-size:115%;
	padding:5px;
}

#foot-nav ul.extern-links {
	position: relative;
	list-style: none;
	padding:15px;
	
}

#foot-nav ul.extern-links:after, #foot-nav ul.extern-links:before {
	content:"";
	display: block;
	height:7px;
	width:100%;
	
	background:url('../images/dots-pattern-gray.png') repeat-x left center;
	opacity: 0.35;
	
	position: absolute;
	left:0;
}

#foot-nav ul.extern-links:after {
	top:0;
}

#foot-nav ul.extern-links:before {
	bottom:0;
}

#foot-nav ul.extern-links li a {
	display: inline-block;
	height:100%;
	width:100%;
	box-sizing:border-box;
	line-height:.99;
	text-transform: capitalize;
	color:#FFF;
}

#foot-nav ul.extern-links .c21-app {
	max-width:172px;
	min-height:47px;
	margin-right: 5%;
	background:url('../images/mobile-app.png') no-repeat right center;
}

#foot-nav ul.extern-links .c21-app:hover {
	background-image: url('../images/mobile-app-hover.png');
}

#foot-nav ul.extern-links .c21-app a {
	padding-right:100px;
	padding-top: 9px;
	font-size:94%;
}

#foot-nav ul.extern-links .facebook {
	max-width:150px;
}

#foot-nav ul.extern-links .facebook a {
	background:url('../images/facebook.png') no-repeat right center;
	font-size:115%;
	padding-right:42px;
	padding-top:5px;
}

#foot-nav ul.extern-links .facebook:hover a {
	background-image: url('../images/facebook-hover.png');
}

#foot-nav ul.extern-links .facebook a > span {
	text-transform: uppercase;
	font-size:116%;
}

#foot-nav ul.extern-links .craigslist {
	max-width:212px;
	background:url('../images/craigslist.png') no-repeat right center;
}

#foot-nav ul.extern-links .craigslist:hover {
	background-image: url('../images/craigslist-hover.png');
}

#foot-nav ul.extern-links .craigslist a {
	padding-right:138px;
	padding-top:6px;
	
	font-size:94%;
}

#bottom {
	position: relative;
	border-top:10px solid #e5e5e5;
	background-color:#70706f;
}

#back-to-top {
	display: inline-block;
	vertical-align: middle;
	color:#333E60;
	background-color:inherit;
	
	padding:0 4px 3px 4px;
	text-align: center;
	font-size:130%;
	line-height:1;
	
	
	position: absolute;
	bottom:100%;
	margin-bottom:-2px;
	left:50%;
	margin-left:-5px;
	
	-o-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
}

#bottom > section {
	position: relative;
	margin:0 auto;
	padding:25px 0;
	max-width:980px;
	
	box-sizing:border-box;
	padding-left:170px;
	padding-right:175px;
}

#bottom > section > div {
	font-size:80%;
}

#bottom > section .logo.raven2 {
	height:65px;
	width:172px;
	background:url('../images/logo-new-white.png') no-repeat center center;
	background-size: contain;
	opacity: 0.35;
	
	position: absolute;
	top:50%;
	margin-top:-26px;
	left:0;
}

#bottom > section > div span {
	color:#333E60;
	font-weight:bold;
}

#bottom > section > div a {
	color:inherit;
	display: inline-block;
}

#bottom > section > div p {
	margin:0 auto;
}

#bottom > section > div p:last-child {
	font-style:italic;
	margin:15px auto 0;
}

#bottom > section > div p:last-child a:hover, #bottom > section > div p:last-child a:active {
	color:#333E60;
}

#bottom > section > div p:last-child a + a {
	position: relative;
	margin-left:14px;
}
#bottom > section > div p:last-child a + a:after {
	content:"";
	width:1px;
	height:85%;
	border-right:1px solid #FFF;
		
	position:absolute;
	top:10%;
	right:100%;
	margin-right:8px;

}

#bottom > section .logos {
	position: absolute;
	right:0;
	top:50%;
	margin-top:-40px;
	
	max-width:170px;
	text-align: right;
}

#bottom > section .logos a {
	display: inline-block;
	text-align: left;
	text-indent: -9999px;
	
	opacity: 0.3;
}

#bottom .equal-housing {
	width:36px;
	height:37px;
	background:url('../images/equal_housing.png') no-repeat center center;
	cursor: default; /* No Link */
}

#bottom .mls {
	width:66px;
	height:35px;
	background:url('../images/mls.png') no-repeat center center;
	
	margin-left:8px;
}

#bottom .logos #jb {
	text-indent: 0;
	max-width: 85px;
	padding:13px 80px 13px 0;
	background:url('../images/jb_logo.png') no-repeat right center;
	background-size:75px 28px;
	
	font-size:50%;
	color:#FFF;
	text-align: right;
	
	opacity: 0.2;
}

#bottom #jb span {
	display: inline-block;
	text-align: left;
	text-indent: -9999px;
}

/************************************************************
Modal */

#modal {
	display:none;
	position:relative;
	background:#fff;
	max-width:800px;
	font-size:90%;
	width:95%;
	border-radius:0.5em;
}
#modal .simplemodal-close {
	position:absolute;
	line-height:1;
	right:-10px;
	top:-10px;
	color:#fff;
	font-size:150%;
	line-height:25px;
	text-align:center;
	z-index:5;
	cursor:pointer;
	padding:0;
	height:24px;
	width:24px;
	background-color:#262626;
	border:2px solid #fff;
	border-radius:50%;
}
#modal header {
	position:relative;
	background:#343434;
	margin:0 auto;
	padding:0.7em 1.5em;
	border-radius:0.5em 0.5em 0 0;
}
#modal header h2 {
	margin:0;
	font-size:150%;
	color:#fff;
}
#modal h3 {
	color:#135b76;
    font-family:Aleo,Arial,Helvetica,sans-serif;
    text-transform:none;
}

.simplemodal-wrap {
	overflow:visible !important;
}

#modal article {
	padding:0.5em 1.5em;
	max-height:550px;
	overflow-y:auto;
	height:auto;
}
#modal article p,
#modal article ul {
	margin:0.7em 0;
}
#modal article ul {
	padding:0 0 0 1.5em;
}

/************************************************************
Miscellaneous */

.contain {
	max-width:980px;
	margin:0 auto;
}

.bg-texture {
	position: relative;
	z-index: 0;
}

.bg-texture:after {
	content:"";
	display: inline-block;
	height:100%;
	width:100%;
	
	background:url('../images/dash-pattern.png') repeat left top;
	opacity: 0.4;
	
	position: absolute;
	top:0;
	left:0;
	z-index: -1;
}

.button, a.button, button, input[type="submit"] {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background-color:#333E60;
	
	text-transform: capitalize;
	color:#FFF;
	font:20px/1 NuevaStd, "Lucida Bright", Times, serif;
	
	box-sizing:border-box;
	padding:8px 35px 5px;
	
	border-radius:5px;
	border:none;
	
	cursor:pointer;
	
	z-index: 0;
}

.button:after, a.button:after, button:after {
	content:"";
	display:inline-block;
	height:50%;
	width:100%;
	background-color:#2a334e;
	
	border-radius:0 0 5px 5px;
	
	position: absolute;
	bottom:0;
	left:0;
	
	z-index: -1;
	
	-webkit-transition:all 0.25s ease 0s;
	transition:all 0.25s ease 0s;
}

.button:hover:after, a.button:hover:after, a.button:active:after, button:hover:after {
	height:100%;
	border-radius:5px;
	
	-webkit-transition:all 0.25s ease 0s;
	transition:all 0.25s ease 0s;
}

input[type="submit"]:hover {
	background-color:#333E60;
}

/* Special button...oooh */
.button.super, a.button.super {
	padding-right:75px;
	overflow: hidden;
	font-size:140%;
}

.button.super:after, a.button.super:after {
	content:"\000BB";
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	padding-left:20px;
	height:100px;
	width:120px;
	border-radius:50%;
	
	color:#FFF;
	font-size:60px;
	line-height:180%;
	
	position: absolute;
	top: 50%;
	margin-top:-50px;
	right:0;
	margin-right:-88px;
	bottom:auto;
	left:auto;
	
	-webkit-transition:all 0.8s ease 0s;
	transition:all 0.8s ease 0s;
}

.button.super:hover, a.button.super:hover, a.button.super:active {
/* 	padding-right:65px; */
	
	-webkit-transition:all 0.8s ease 0s;
	transition:all 0.8s ease 0s;
}

.button.super:hover:after, a.button.super:hover:after, a.button.super:active:after {
	padding-left:135%;
}

.button.super.blue, a.button.super.blue {
	color:#FFF;
	background-color:#333E60;
}
.button.super.blue:after, a.button.super.blue:after {
	color:#FFF;
	background-color:#2a334e;
}

/* Text alignment */
.left { text-align:left !important; }
.center { text-align:center !important; }
.right { text-align:right !important; }

/* Columns */
.col {
	display:inline-block;
	vertical-align:top;
}

.half {
	width:47%;
	max-width:465px;
}

.half + .half {
	margin-left:4.25%;
}

.main {
	max-width:660px;
	width:67%;
}

.side {
	max-width:290px;
	width:29.5%;
	margin-left:2.5%;
}

.side > h3 {
	margin-top: 0;
}

/* Fix extra button padding in Firefox */
input[type="submit"]::-moz-focus-inner {
	border:none;
	padding:0;
	line-height:1;
}