/* Styling for autocomplete. */
.autocomplete-suggestions {
    text-align: left; cursor: default; border: 1px solid #ccc; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);

    /* core styles should not be changed */
    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }

/* Overides for normalize.css */
button, input, optgroup, select, textarea {
    font-family: Helvetica,Arial,sans-serif;
}

/* Now for our CSS. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    background:  #fff;
    color:       #424242;
    font-size:   16px;
    font-family: Helvetica,Arial,sans-serif;
	height:      100%;
	margin:      0;
	padding:     0;
}

.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

a {
    color: #7b8da4;
}

a:hover {
    color: #ff6a00;
}

.page {
	min-height: 100%;
	position:   relative;
}

header {
    box-shadow: 0 0 0.15em #424242;
    padding:    0.5em 0 0.3em;
    position:   relative;
    text-align: center;
}

.hamburger-button {
    color:           #7b8da4;
    display:         block;
    font-size:       2em;
    left:            0.2em;
    overflow:        hidden;
    position:        absolute;
    text-decoration: none;
    top:             0.4em;
}

.hamburger-button:hover {
    color: #f07030;
}

.header-logo {
    display:   inline-block;
    font-size: 1em;
    margin:    0;
    padding:   0;
    position:  relative;
    overflow:  hidden;
    height:    2.75em;
    width:     13.25em;
}

.header-logo span {
    position:        absolute;
    top:             0;
    left:            0;
    width:           13.25em;
    height:          2.75em;
    background:      #fff url('/images/mcp_logo_accent.svg') left top no-repeat;
    background-size: 13.25em 2.75em;
}

.header-logo span:hover {
    background:       #fff url('/images/mcp_logo_highlight.svg') left top no-repeat;
    background-size:  13.25em 2.75em;
}

header nav {
    display:  none;
    position: absolute;
    right:    0.5em;
    top:      1.95em;
}

header ul {
    margin:  0;
    padding: 0;
}

header li {
    display:    inline-block;
    list-style: none;
    margin:     0;
    padding:    0 0.2em;
    position:   relative;
}

header a {
    display:         inline-block;
    text-decoration: none;
}

.submenu-indicator {
    display:        inline-block;
    font-size:      0.8em;
    position:       relative;
    top:            -0.2em;
    width:          1em;
}

header ul ul {
    background: #fff;
    box-shadow: 0 0 0.15em #424242;
    /*border:     0.1em solid #7b8da4;*/
    display:    none;
    padding:    0.5em;
    position:   absolute;
    text-align: left;
    left: 0;
    right: 0;
    top: 1.7em;
    z-index: 200;
}

header ul ul li {
    display: block;
    padding: 0.2em 0;
}

#browse_condo header {
    display: flex;
    flex-direction: row;
}

#browse_condo .hamburger-button {
    margin: 0 1rem 0 0.2em;
    left: auto !important;
    position: relative;
    top: auto !important;
}

#browse_condo header .logo_search {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#browse_condo header .logo_search form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#browse_condo header input[type=search] {
    border-radius: 0.75rem;
    margin: 0.5rem 2rem 0.5rem 0;
    padding: 0.5rem 1rem;
}

#browse_condo header nav {
    margin-top: 1.45rem;
    right: auto !important;
    top: auto !important;
    position: relative;
}

main {
	padding-bottom: 5em; /* Height of the footer element */
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin:         0 auto;
    max-width:      61.25em;
    overflow:       auto;

}

fieldset {
    border: none;
    margin: 0;
    padding: 0.4em 0.5em 0.4em 0;
}

button,
input,
input[type=button],
input[type=checkbox],
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=radio],
input[type=reset],
input[type=search],
input[type=submit],
input[type=tel],
input[type=text],
input[type=url],
label,
select {
    color: #444;
}

select {
    padding: 0.2em 0.4em;
}

a.button,
button,
input[type=button],
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=reset],
input[type=search],
input[type=submit],
input[type=tel],
input[type=text],
input[type=url] {
    background: #fff;
    border: 0.05em solid #999;
    font-size: 100%;
    padding: 0.4em 0.2em;

    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

a.button {
    text-decoration: none;
}

a.button,
button,
input[type=button] {
    background:    #7b8da4;
    color:         #fff;
    display:       inline-block;
    padding-left:  1em;
    padding-right: 1em;
}

a.button:hover,
button:hover,
input[type=button]:hover {
    background:    #ff6a00;
    border:        0.05em solid #ff6a00;
    color:         #fff;
    display:       inline-block;
}

input[type=submit] {
    background:    #7b8da4;
    color:         #fff;
    display:       inline-block;
    padding-left:  1em;
    padding-right: 1em;
}

input[type=submit]:hover {
    background:    #ff6a00;
    border:        0.05em solid #ff6a00;
    color:         #fff;
    display:       inline-block;
}

input[type=reset] {
    background:    transparent;
    border:        0.05em solid transparent;
    color:         #7b8da4;
    display:       inline-block;
    padding-left:  1em;
    padding-right: 1em;
}

input[type=reset]:hover {
    background:    transparent;
    border:        0.05em solid transparent;
    color:         #ff6a00;
    display:       inline-block;
}

input[type=checkbox],
input[type=radio] {
    padding: 0.4em 0;
}

label {
    padding: 0.4em 0.2em;
}

table {
    border-collapse: collapse;
}

th,
td {
    font-weight:    normal;
    vertical-align: top;
    text-align:     left;
}

table.detail th {
	padding: 0.2em 0.4em 0.2em 0;
}

table.detail td {
	padding: 0.2em 0;
}

table.listing {
    border: 1px solid #ccc;
}

table.listing td,
table.listing th {
    padding: 0.4rem;
}

table.listing th {
    background-color: #ccc;
}

.checkbox-group label,
.radio-group label {
    padding-left: 0;
    position: relative;
    top: -0.15em;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.crumbs {
	font-size: 1em;
	margin: 0.8em 0 0 0;
}

.right {
    text-align: right;
}

.footnote {
    font-size:  0.8em;
    font-style: italic;
}

.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

.clear-both {
    clear: both;
}

.hidden {
    display: none !important;
}

.error {
    border:  1px solid #c00;
    color:   #c00;
    margin:  0.5em 0;
    padding: 0.5em;
}

.warning {
    border:  1px solid #aa0;
    color:   #aa0;
    margin:  0.5em 0;
    padding: 0.5em;
}

.notice {
    border:  1px solid #0c0;
    color:   #0c0;
    margin:  0.5em 0;
    padding: 0.5em;
}

ul.document_list {
    padding: 0;
    margin:  0;
}

ul.document_list li {
  list-style-type: none;
  padding: 0 0 0.2em 1.5em;
  margin: 0.1em 0;
}

ul.document_list li.gif,
td.gif {
    background: url(/images/default/image_icon.png) top left no-repeat;
}

ul.document_list li.png,
td.png {
    background: url(/images/default/image_icon.png) top left no-repeat;
}

ul.document_list li.jpg,
td.jpg {
    background: url(/images/default/image_icon.png) top left no-repeat;
}

ul.document_list li.doc,
ul.document_list li.docx,
td.doc,
td.docx {
    background: url(/images/default/doc_icon.png) top left no-repeat;
}

ul.document_list li.pdf,
td.pdf {
    background: url(/images/default/pdf_icon.png) top left no-repeat;
}

ul.document_list li.txt,
td.txt {
    background: url(/images/default/txt_icon.png) top left no-repeat;
}

ul.document_list li.url,
td.url {
    background: url(/images/default/url_icon.png) top left no-repeat;
}

ul.document_list li.xls,
ul.document_list li.xlsx,
td.xls,
td.xlsx {
    background: url(/images/default/xls_icon.png) top left no-repeat;
}

td.gif a,
td.png a,
td.jpg a,
td.doc a,
td.docx a,
td.pdf a,
td.txt a,
td.url a,
td.xls a,
td.xlsx {
    padding-left: 20px;
}

.feedback_form h1 {
    margin-top: 0;
}

footer {
	bottom:     0;
    box-shadow: 0 0 0.15em #424242;
    clear: all;
    font-size:  0.8em;
	height:     5em;
	left:       0;
    overflow:   hidden;
	position:   absolute;
    text-align: center;
	width:      100%;
}

footer a {
    text-decoration: none;
}

footer p {
    margin:  0;
    padding: 0.75em 0 0.5em;
}

footer ul {
    display:    inline-block;
    margin:     0;
    padding:    0;
    text-align: left;
}

footer li {
    display:   inline-block;
    list-style: none;
    margin:     0;
    padding:    0 0.1em;
}

#overlay-background {
    background-color: rgba(0, 0, 0, 0.8);
    cursor:			  default;
    display:          block;
    height:           100%;
    left:             0;
    position:         fixed;
    top:              0;
    width:            100%;
    z-index:          200;
}

#overlay-background .overlay-content {
	background: #fff;
	color: #444;
	display: block;
	margin: 1em auto;
	padding: 0.5em 1em;
    min-width: 20em;
	width: 50%;
}

#navigation-panel {
    background: #fff;
    bottom:     0;
    left:       0;
    padding:    1em 2em;
    position:   fixed;
    top:        0;
    z-index:    210;
}

#navigation-panel p {
    padding: 0;
    margin:  0 0 0.5em 0;
}

#navigation-panel ul {
    margin:  0;
    padding: 0;
}

#navigation-panel li {
    list-style: none;
    margin:     0;
    padding:    0.5em 0;
}

#navigation-panel a {
    text-decoration: none;
}

/* Prevent zooming when clicking on input, select, & text-area fields on mobile devices.
   http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 0) {
	input, input:focus,
	select, select:focus,
	text-area, text-area:focus {
		font-size: 16px;
	}
}

/* Header position adjustments. */
@media only screen and (min-width:40em) {
    header nav {
        display: block;
        right:   0.5em;
    }

    #browse_condo header .logo_search {
        flex-direction: row;
    }

    #browse_condo header input[type=search] {
        margin-left: 2rem;
    }
}

@media only screen and (min-width:70em) {
    header {
        padding-left: 5%;
        padding-right: 5%;
    }

    header nav {
        right: 5%;
    }
}

@media only screen and (min-width:80em) {
    header {
        padding-left: 10%;
        padding-right: 10%;
    }

    header nav {
        right: 10%;
    }
}

@media only screen and (min-width:90em) {
    header {
        padding-left: 15%;
        padding-right: 15%;
    }

    header nav {
        right: 15%;
    }
}

/* Hamburger menu */
@media only screen and (min-width: 40em) {
    header {
        text-align: left;
    }

    .hamburger-button {
        display: none;
    }

    .header-logo {
        margin-left: 0.5em;
    }

    main {
        padding-bottom: 2.4em;
    }

    footer {
        height: 2.4em;
    }

    footer p {
        display: inline-block;
        margin-right: 2em;
    }

    footer ul {
        margin-right: 2em;
    }

    footer ul:last-child {
        margin-right: 0;
    }
}

#browse_condo .item_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

#browse_condo .item_detail {
    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #cccccc;
    height: 3rem;
    padding: 0.5rem;
    text-decoration: none;
    width: 16rem;
}

#browse_condo .item_detail:hover {
    background-color: #c9ffb0;
    border-color: #02a117;
}

#browse_condo .item_detail span {
    text-align: center;
}

#browse_condo .building_name {
    display: flex;
    flex-direction: column;
    flex-grow: 0;

    margin-bottom: 1.5rem;
}

#browse_condo .building_name h1 {
    line-height: 1em;
    margin: 2rem 0 0;
    padding: 0;
}

#browse_condo .building_name address {
    font-size: var(--medium-font-size);
    line-height: 1em;
    white-space: pre;
    margin: 0;
    padding: 0;
}

#browse_condo .building_breakdown {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
}

#browse_condo .building_image img {
    border: 2px solid #ccc;
    height: 142px;
    width: 214px;
}

#browse_condo .building_image img:hover,
#browse_condo .building_image img:focus {
    border-color: #777;
}

#browse_condo .building_association h3,
#browse_condo .building_documents h3 {
    margin: 0 0 0.75rem 0;
    padding: 0;
}

#browse_condo .building_association_info {
    line-height: 1.1rem;
    white-space: pre;
}

#browse_condo .building_association_url {
    cursor: pointer;
    display: block;
    max-width: 18rem;
    margin: 0.5rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#browse_condo .building_documents li {
    cursor: pointer;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#browse_condo .building_address {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    align-items: center;
}

#browse_condo .building_address a {
    text-decoration: none;
}

#browse_condo .building_address .google_maps {
    background: #fffffc;
    border-top: 0.2rem solid #eb4d40;
    border-left: 0.2rem solid #fbbf11;
    border-right: 0.2rem solid #4386f4;
    border-bottom: 0.2rem solid #37a956;
    border-radius: 0.5rem;
    color: #444;
    display: block;
    line-height: 1em;
    padding: 0.2rem 0.75rem;
    text-align: center;
    text-decoration: none;
}

#browse_condo .building_address .google_maps:hover,
#browse_condo .building_address .google_maps:focus {
    border-right: 0.2rem solid #eb4d40;
    border-top: 0.2rem solid #fbbf11;
    border-bottom: 0.2rem solid #4386f4;
    border-left: 0.2rem solid #37a956;
}

#browse_condo .unit_list h2 {
    font-size: 1.4rem;
    margin: 2rem 0 0.75rem;
    padding: 0;
}

#browse_condo .floor_plan_filter {
    border: 1px solid #ccc;
    border-radius: 0.75rem;
    display: inline-block;
    height: 2rem;
    margin-left: 1rem;
    padding: 0 0.5rem 0.2rem;
}

#browse_condo .floor_plan_filter:hover,
#browse_condo .floor_plan_filter:active {
    border-color: #777;
}

#browse_condo .floor_plan_filter input {
    border: none;
    font-size: 1rem;
    padding: 0;
    height: 1rem;
    width: 10rem;
}

#browse_condo .floor_plan_filter input:focus {
    outline: none;
}

#browse_condo .unit_tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

#browse_condo .unit_tile {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #ccc;
    display: block;
    position: relative;
    text-decoration: none;
    width: 214px;
    height: 142px;
}

#browse_condo a.unit_tile:hover {
    border-color: #777;
}

#browse_condo .unit_tile:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.80);
    content:'';
    z-index: 10;
}

#browse_condo a.unit_tile:hover:after {
    background: rgba(255, 255, 255, 0.4);
}

#browse_condo .unit_tile span {
    display: block;
    position: absolute;
    line-height: 1.75rem;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: none;
    color: #444;
    z-index: 20;
    padding: 0.25rem 0.5rem;
    text-shadow: 1px 1px 4px #ffffff;
    font-weight: bold;
}

#browse_condo .building_information {
	font-size: 0.86em;
    margin: 32px 0 0 !important;
    width: 100%;
}

#browse_condo .building_information tr:nth-of-type(1) {
    font-size: 0.86em;
}

#browse_condo .building_information tr:nth-of-type(2) {
    border-bottom: 1px solid #444;
	font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
}

#browse_condo .building_information tr:nth-of-type(1) td,
#browse_condo .building_information tr:nth-of-type(1) th
#browse_condo .building_information tr:nth-of-type(2) td,
#browse_condo .building_information tr:nth-of-type(2) th {
    padding-bottom: 4px;
}

#browse_condo .building_information tr:nth-of-type(3) td,
#browse_condo .building_information tr:nth-of-type(3) th {
    padding-top: 8px;
}

#browse_condo .market_information {
	font-size: 0.86em;
    margin: 32px 0 0 !important;
    width: 100%;
}

#browse_condo .market_information tr:nth-of-type(1) {
    border-bottom: 1px solid #444;
    font-size: 1.2em;
    font-weight: bold;
}

#browse_condo .market_information tr:nth-of-type(1) td,
#browse_condo .market_information tr:nth-of-type(1) th {
    padding-bottom: 4px;
}
#browse_condo .market_information tr:nth-of-type(2) td,
#browse_condo .market_information tr:nth-of-type(2) th {
    padding-top: 8px;
}

#browse_condo .unit_summary {
	font-size: 0.86em;
    border-bottom: 1px solid #aaa;
    margin: 0 0 8px 0;
    padding: 8px 0;
}

#browse_condo .unit_summary a {
    display: block;
    overflow: auto;
}

#browse_condo .unit_summary div {
    float: left;
    overflow: auto;
    position: relative;
}

#browse_condo .unit_summary img {
    display: block;
    float: left;
}

#browse_condo .unit_summary img + img {
    margin-left: 16px;
}

#browse_condo .unit_summary table {
    float: left;
    margin: 4px 0 0 16px !important;
}

#browse_condo .unit_information {
	font-size: 0.86em;
    margin: 32px 0 0 !important;
    overflow: auto;
}

#browse_condo .unit_information .bowl {
	display: inline-block;
    overflow: auto;
    position: relative;
}

#browse_condo .unit_information h1 {
    border-bottom: 1px solid #444;
    font-size: 1.2em;
    font-weight: normal;
    padding-bottom: 4px;
    margin-bottom: 8px;
    margin-top: 0;
}

#browse_condo .unit_information img {
    border: 1px solid #eee;
    display: inline-block;
    margin-right: 8px;
    vertical-align: top;
}

#browse_condo .unit_information table {
    display: inline-block;
    margin-right: 16px !important;
    vertical-align: top;
}

#browse_condo .unit_information td {
    padding: 0 0 4px 0;
}

#browse_condo .unit_information th {
    padding: 0 8px 4px 0;
    vertical-align: top;
}

#browse_condo .unit_information .contact {
    background: #8bc53f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    clear: right;
    color: #fff;
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold;
    margin: 8px 0 0 0;
    padding: 5px 16px;
    text-decoration: none;
}

#browse_condo .unit_information .contact:hover {
    background: #9ddf47;
}

#browse_condo .mls_images {
    overflow: auto;
    height: auto;
    width: 100%;
}

#browse_condo .mls_images ul {
    margin: 12px 0 0 !important;
}

#browse_condo .mls_images li {
	display: inline-block;
    list-style-type: none !important;
    margin: 0 !important;
}

#browse_condo .mls_images img {
	display: inline;
	margin-left: 4px;
	margin-right: 4px;
}

#home .hero form {
    padding: 1em 0.5em;
    margin:  0 auto;
}

#home section {
    clear: both;
}

#home .quick-search {
    padding: 1em 0;
    position: relative;
}

#home .quick-search input[type=search] {
    background: #fff;
    padding: 0.4em;
    width: 100%;

    /* Used with submit button below */
    /*border-right: none;*/
    /*padding: 0.4em 3.9em 0.4em 0.4em;*/
}

#home .quick-search input[type=submit] {
    background: #f07030;
    border: 0.05em solid #f07030;
    border-left: none;
    color: #fff;
    position: absolute;
    right: 0;
    width: 3.5em;
}

#home section {
    overflow: auto;
}

#home .sidebar_numbers {
    border: 1px solid #ccc;
    width:  100%;
}

#home .sidebar_numbers tr:nth-of-type(odd) {
    background: #ddd;
}

#home .sidebar_numbers tr:nth-of-type(1) {
    background: #ccc;
}

#home .sidebar_numbers tr.total {
    background: #ccc;
}

#home .ppsf_statistics {
    padding-top: 1em;
}

#home .clients ul {
    margin:  0;
    padding: 0;
}

#home .clients li {
    list-style: none;
    margin:     0;
    padding:    0 0 0.5em 0;
}

/* 480px wide */
@media only screen and (min-width: 30em) {
    #home .county_statistics {
        float: left;
        margin-right: 2em;
    }

    #home .ppsf_statistics {
        float: left;
        padding-top: 0;
    }

    #home .sidebar_numbers th,
    #home .sidebar_numbers td {
        padding: 0.2em 0.1em 0.1em;
    }

    #home .clients li {
        display: inline-block;
        vertical-align: top;
        padding-right: 0.5em;
        min-width:     10em;
    }
}

/* 640px wide */
@media only screen and (min-width: 40em) {
    /*#home .hero {
        background:      #ccc url('../images/default/home_splash/01.jpg') center center no-repeat;
        background-size: cover;
        margin:          0;
        height:          16em;
        position:        relative;
    }

    #home .image-fader {
        background:      transparent url('../images/default/home_splash/01.jpg') center center no-repeat;
        background-size: cover;
        position:        absolute;
        top:             0;
        left:            0;
        bottom:          0;
        right:           0;
    }*/

    /*#home .hero form {
        padding-top: 10em;
        margin:      0 auto;
        width:       80%;
    }*/

    #home .quick-search label {
        background:   #7b8da4;
        border:       0.05em solid #7b8da4;
        color:        #fff;
        display:      inline-block;
        left:         0;
        padding:      0.4em 0;
        position:     absolute;
        text-align:   center;
        top:          1em;
        width:        8em;
    }

    #home .quick-search input[type=search] {
        border-color: #7b8da4;
        padding:      0.4em 0.4em 0.4em 8.4em;
    }
}

/* 800px wide */
@media only screen and (min-width: 50em) {
    /*#home .hero {
        height: 20em;
    }

    #home .hero form {
        top: 12em;
    }*/

    #home .hero form {
        padding: 2em 8%;
    }

    #home .statistics,
    #home .clients {
        display:        inline-block;
        vertical-align: top;
    }

    #home .statistics {
        width: 56%;
    }

    #home .clients {
        width: 40%;
    }

    #home .statistics h2,
    #home .clients h2 {
        margin-top:  0;
        padding-top: 0.5em;
    }
}

/* 1,120 px wide */
@media only screen and (min-width: 70em) {
    /*#home .hero {
        height: 24em;
        max-width: 80em;
        margin-left: 5%;
        margin-right: 5%;
    }*/

    #home .hero {
        margin-left: 5%;
        margin-right: 5%;
    }

    #home .hero form {
        padding: 2em 10%;
    }

    /*#home .hero form {
        padding-top: 14em;
    }*/
}

/* 1,280 px wide */
@media only screen and (min-width:80em) {
    #home .hero {
        margin-left: 10%;
        margin-right: 10%;
    }

    #home .hero form {
        padding: 2em 10%;
    }
}

@media only screen and (min-width:90em) {
    #home .hero {
        margin-left: 15%;
        margin-right: 15%;
    }

    #home .hero form {
        padding: 2em 15%;
    }
}

#realtitude a.sample_plan {
    border: 1px solid #ddd;
    float: right;
    margin-left: 2em;
}

#realtitude h3 {
    font-size: 21px;
    margin: 2em 0 1em;
}

#realtitude ul.clients li {
    list-style: none;
    display: inline-block;
    margin: 0.5em 1em 0.5em 0;
    vertical-align: top;
}

#search_listings .quick-search {
    padding: 1em 0;
    position: relative;
}

#search_listings .quick-search input[type=search] {
    background: #fff;
    padding: 0.4em;
    width: 100%;

    /* Used with submit button below */
    /*border-right: none;*/
    /*padding: 0.4em 3.9em 0.4em 0.4em;*/
}

#search_listings .quick-search input[type=submit] {
    background: #f07030;
    border: 0.05em solid #f07030;
    border-left: none;
    color: #fff;
    position: absolute;
    right: 0;
    width: 3.5em;
}

#search_listings .property-type .radio-group {
    float: left;
    margin-right: 1em;
}

#search_listings .property-type .radio-group:last-of-type {
    margin-right: 0;
}

#search_listings .transaction-type .radio-group {
    float: left;
    margin-right: 1em;
}

#search_listings .transaction-type .radio-group:last-of-type {
    margin-right: 0;
}

#search_listings .status-type .checkbox-group {
    float: left;
    width: 7.5em;
}

#search_listings .status-type .checkbox-group:last-of-type {
    margin-right: 0;
}

#search_listings .col2 {
    clear: left;
}

#search_listings .col2 label {
    display: block;
    padding: 0.5em 0 0.2em 0;
}

#search_listings .col2 select {
    margin-bottom: 0.5em;
    width: 100%;
}

#search_listings .price {
    margin-top: 0.5em;
}

#search_listings .price .radio-group {
    float: left;
    margin-right: 0.5em;
}

#search_listings .price-values {
    clear: both;
}

#search_listings .price-input {
    float: left;
    margin-right: 0.5em;
    padding: 0.5em 0;
    position: relative;
    width: 8em;
}

#search_listings .price-input input[type=text] {
    padding: 0.4em 2.4em 0.4em 0.4em;
    width: 100%;
}

#search_listings .price-input span {
    background:  #999;
    border:      0.05em solid #999;
    border-left: none;
    color:       #fff;
    padding:     0.4em 0.2em;
    position:    absolute;
    right:       0;
    text-align:  center;
    top:         0.5em;
    width:       2em;
}

#search_listings form .size {
    clear: both;
}

#search_listings .size input[type=text] {
    float: left;
    margin-right: 0.5em;
    width: 8em;
}

#search_listings .bedrooms {
    clear: both;
    border-top: 1px solid transparent;
    margin: 0.5em 0 0;
}

#search_listings .bedrooms input[type=text] {
    float: left;
    margin-right: 0.5em;
    width: 8em;
}

#search_listings .controls {
    clear: both;
    padding-top: 0.5em;
    text-align: center;
}

#search_listings .results {
    font-size: 0.9em;
}

#search_listings .headers {
    display: none;
}

#search_listings .listing {
    border-top: 0.05em solid #ccc;
    overflow: visible;
    position: relative;
}

#search_listings .listing:last-child {
    border-bottom: 0.1em solid #ccc;
    margin-bottom: 1em;
}

#search_listings .listing a {
    color: #333;
    display: block;
    height: 4.8em;
    overflow: visible;
    text-decoration: none;
}

#search_listings .listing a:hover {
    background: rgba(240, 115, 59, 0.25);
}

#search_listings .listing p {
    margin: 0;
    padding: 0;
}

#search_listings .listing .mls_unit {
    overflow: visible;
    position: relative;
    top: 0.45em;
    width: 6em;
}

#search_listings .listing .unit {
    position: absolute;
    top: 0em;
    left: 2.1em;
    white-space: nowrap;
    font-weight: bold;
}

#search_listings .listing .mls_unit div:nth-of-type(3) {
    position: absolute;
    top: 1.4em;
    left: 0;
}

#search_listings .listing .list {
    position: absolute;
    top: 1.4em;
    left: 2.1em;
    white-space: nowrap;
    font-weight: bold;
}

#search_listings .listing .mls_unit div:nth-of-type(5) {
    position: absolute;
    top: 2.8em;
    left: 0;
}

#search_listings .listing .estimate {
    position: absolute;
    top: 2.8em;
    left: 2.1em;
    white-space: nowrap;
    font-weight: bold;
}

#search_listings .listing .location {
    left: 6.5em;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.5em;
    width: 9em;
    overflow: hidden;
}

#search_listings .listing .location div {
    margin-bottom: 0.25em;
    white-space: nowrap;
}

#search_listings .listing .location .complex {
    display: none;
}

#search_listings .listing .location .region .label {
    display: none;
}

#search_listings .listing .mls_listing {
    display: none;
    left:   20em;
    position: absolute;
    top:    0.5em;
    width:  6.5em;
}

#search_listings .listing .realtor {
    color: #ff6a00;
    display: none;
    overflow: hidden;
    position: absolute;
    left: 27em;
    top: 0.5em;
    width: 16em;
}

#search_listings .listing .stats {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0.5em;
    width: 6em;
    z-index: 10;
}

#search_listings .listing .stats .label {
    margin-bottom: 0.25em;
    padding-left: 3.8em;
}

#search_listings .listing .size {
    top:  0;
    left: 0;
    font-weight: bold;
    padding-left: 0;
    position: absolute;
    text-align: right;
    width: 3.5em;
}

#search_listings .listing .bed {
    top: 0;
    top: 1.4em;
    font-weight: bold;
    padding-left: 0;
    position: absolute;
    text-align: right;
    width: 3.5em;
}

#search_listings .listing .bath {
    top: 0;
    top: 2.8em;
    font-weight: bold;
    padding-left: 0;
    position: absolute;
    text-align: right;
    width: 3.5em;
}

#search_listings .listing .preview {
    display: none;
}

#search_listings .listing .plan {
    position: absolute;
    right: 0;
    top: 0.5em;
    width: 5em;
    height: 4em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: 9em auto;
    overflow: hidden;
}

#search_listings .listing .plan span {
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#search_listings zs.listing a:hover .plan span {
    background: rgba(240, 115, 59, 0.25);
}

/* 360px wide */
@media only screen and (min-width: 22em) {
    #search_listings .listing .location {
        width: 11.5em;
    }
}

/* 375px wide iPhone 6s */
@media only screen and (min-width: 23em) {
    #search_listings .listing .location {
        width: 12.5em;
    }
}

/* 412px wide - Google Nexus 6 */
@media only screen and (min-width: 25em) {
    #search_listings .listing .location {
        width: 13em;
    }
}

/* 480px wide */
@media only screen and (min-width: 30em) {
    #search_listings .listing .mls_listing {
        display: block;
    }
}

/* 640px wide */
@media only screen and (min-width: 40em) {
    #search_listings .quick-search label {
        border:       0.05em solid #fff;
        border-right: 0.05em solid #999;
        left:         0;
        padding:      0.4em 1em 0.4em 0;
        position:     absolute;
        top:          1em;
        width:        8em;
    }

    #search_listings .quick-search input[type=search] {
        padding: 0.4em 0.4em 0.4em 8.4em;
    }

    #search_listings .status-type .checkbox-group {
        margin-right: 1em;
        width:        auto;
    }

    #search_listings .col2 {
        float: left;
        width: 50%;
        margin-right: 1.5em;
    }

    #search_listings .col2 label:first-of-type {
        padding-top: 0;
    }

    #search_listings .col3 {
        float: left;
    }

    #search_listings .col3 fieldset:first-of-type {
        margin-top:  0;
        padding-top: 0;
    }

    #search_listings .results {
        clear: both;
        font-size: 0.8em;
    }

    #search_listings .results .headers {
        background-color: #ccc;
        display: block;
        position: relative;
        height: 1.5em;
    }

    #search_listings .results .headers div {
        position: absolute;
        top: 0.2em;
    }

    #search_listings .results .listing a {
        height: 5em;
    }

    #search_listings .results .listing:nth-of-type(even) {
        background-color: #f6f6f6;
    }

    #search_listings .results .listing div {
        left:     auto;
        margin:   0;
        padding:  0;
        position: absolute;
        right:    auto;
    }

    #search_listings .results .listing .mls_unit,
    #search_listings .results .listing .location,
    #search_listings .results .listing .mls_listing,
    #search_listings .results .listing .realtor,
    #search_listings .results .listing .stats {
        left:  0;
        top:   0;
        height: 100%;
        width: 100%;
    }

    #search_listings .results .listing .label {
        display: none;
    }

    #search_listings .results .headers .list,
    #search_listings .results .listing .list {
        left: 0;
        width: 4em;
    }

    #search_listings .results .listing .list {
        font-weight: normal;
        top: 0.5em;
    }

    #search_listings .results .headers .estimate,
    #search_listings .results .listing .estimate {
        left: 4em;
    }

    #search_listings .results .listing .estimate {
        font-weight: normal;
        top: 0.5em;
    }

    #search_listings .results .headers .complex,
    #search_listings .results .listing .complex {
        display: none;
    }

    #search_listings .results .headers .unit,
    #search_listings .results .listing .unit {
        left: 8em;
        width: 5em;
    }

    #search_listings .results .listing .unit {
        font-weight: normal;
        top: 0.5em;
    }

    #search_listings .results .headers .address,
    #search_listings .results .listing .address,
    #search_listings .results .listing .region {
        left: 13em;
        width: 14em;
    }

    #search_listings .results .listing .address {
        top: 0.5em;
    }

    #search_listings .results .listing .region {
        top: 1.7em;
    }

    #search_listings .results .listing .region .label {
        display: inline-block;
        position: relative;
    }

    #search_listings .results .listing .region .city,
    #search_listings .results .listing .region .county {
        display: inline-block;
        position: relative;
    }

    #search_listings .results .headers .county,
    #search_listings .results .listing .county {
        display: none;
    }

    #search_listings .results .headers .size,
    #search_listings .results .listing .size{
        right: 16em;
        text-align: left;
        width: 4em;
    }

    #search_listings .results .listing .size {
        font-weight: normal;
        top: 0.5em;
    }

    #search_listings .results .headers .bed,
    #search_listings .results .listing .bed {
        right: 14em;
        text-align: left;
        width: 2em;
    }

    #search_listings .results .listing .bed {
        font-weight: normal;
        top: 0.5em;
    }

    #search_listings .results .headers .bath,
    #search_listings .results .listing .bath {
        right: 11em;
        text-align: left;
        width: 2em;
    }

    #search_listings .results .listing .bath {
        font-weight: normal;
        top: 0.5em;
    }

    #search_listings .results .headers .mls_number,
    #search_listings .results .listing .mls_number {
        display: none;
    }

    #search_listings .results .headers .status,
    #search_listings .results .listing .status {
        display: none;
    }

    #search_listings .results .headers .preview,
    #search_listings .results .listing .preview {
        right: 5em;
        text-align: left;
		width: 4em;
    }

    #search_listings .results .listing .preview {
        display: block;
        background-position: center center;
		background-repeat: no-repeat;
		background-size: 7em auto;
		height: 4em;
		overflow: hidden;
		position:  absolute;
		top: 0.5em;
    }

    #search_listings .results .headers .plan,
    #search_listings .results .listing .plan {
        right: 0;
        text-align: left;
		width: 4em;
    }

    #search_listings .results .listing .plan {
        background-position: center center;
		background-repeat: no-repeat;
		background-size: 7em auto;
		height: 4em;
		overflow: hidden;
		position:  absolute;
		top: 0.5em;
		width: 4em;
    }

    #search_listings .results .listing .plan span {
        display: none;
    }

    #search_listings .results.agents .listing .realtor {
        display: block;
        top: 3.3em;
        left: 0;
        height: 1.2em;
    }

    #search_listings .results.agents .listing .agent,
    #search_listings .results.agents .listing .company {
        position: relative;
        float: left;
        margin-right: 1.5em;
    }
}

/* 800px */
@media only screen and (min-width: 50em) {
    #search_listings .results .headers .size,
    #search_listings .results .listing .size{
        right: 24em;
        text-align: left;
        width: 4em;
    }

    #search_listings .results .headers .bed,
    #search_listings .results .listing .bed {
        right: 22em;
        text-align: left;
        width: 2em;
    }

    #search_listings .results .headers .bath,
    #search_listings .results .listing .bath {
        right: 19em;
        text-align: left;
        width: 2em;
    }

    #search_listings .results .headers .mls_number,
    #search_listings .results .listing .mls_number {
        display: block;
        right: 9em;
        text-align: left;
        width: 9em;
    }

    #search_listings .results .listing .mls_number {
        top: 0.5em;
    }

    #search_listings .results .headers .status,
    #search_listings .results .listing .status {
        display: block;
        right: 9em;
        text-align: left;
        width: 2em;
    }

    #search_listings .results .listing .status {
        top: 0.5em;
    }
}

@media only screen and (min-width: 60em) {
    #search_listings .col1 {
        float: left;
        width: 12em;
    }

    #search_listings .property-type .radio-group {
        float: none;
    }

    #search_listings .transaction-type .radio-group {
        float: none;
    }

    #search_listings .status-type .checkbox-group {
        float: none;
    }

    #search_listings .col2 {
        clear: none;
        width: 40%;
    }

    #search_listings .results .headers .complex,
    #search_listings .results .listing .complex {
        display: block;
        left: 8em;
        width: 10em;
    }

    #search_listings .results .listing .complex {
        top: 0.5em;
    }

    #search_listings .results .headers .unit,
    #search_listings .results .listing .unit {
        left: 26em;
        width: 5em;
    }

    #search_listings .results .headers .address,
    #search_listings .results .listing .address{
        left: 32em;
        width: 14em;
    }

    #search_listings s.results .listing .region {
        left: 32em;
    }
}

#listing th,
#listing td {
    padding: 0.2em;
}

#listing .detail {
    width: 100%;
}

#listing .listing {
    border: 1px solid #ccc;
    width:  100%;
}

#listing .listing tr:nth-of-type(odd) {
    background: #ddd;
}

#listing .listing tr:nth-of-type(1) {
    background: #ccc;
}

#listing .listing_link a {
    color:           #444;
    text-decoration: none;
}

#listing .listing_link tr + tr:hover {
    background: #ff6a00;
}

#listing .listing_link tr + tr:hover a {
    color: #fff;
}

#listing .callout {
    background: #fcfcfc;
    border: 1px solid #f6f6f6;
    border-radius: 0.75rem;
    padding: 0.5em;
    margin-top: 0.5em;
}

#listing .callout p:first-of-type {
    margin-top: 0;
    padding-top: 0;
}

#listing .callout p:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}

#listing .callout a.button {
    background: #0c0;
    border: 0.05em solid #0c0;
    border-radius: 0.45rem;
    color: #fff;
    display: block;
    font-size: 1.5rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
}

#listing .callout a.button:hover {
    background: #0a0;
    border: 0.05em solid #0a0;
}

#listing .callout .heading {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#listing .callout .message {
    display: inline-block;
}

#listing .floor_plan_buttons {
    list-style: none;
    margin:     0.5em 0;
    padding:    0;
}

#listing .floor_plan_buttons li {
    padding-bottom: 0.5em;
}

#listing .floor_plan_buttons a.button,
#listing .download-pdf a.button{
    display:    inline-block;
    text-align: center;
    width:      100%;
}

@media only screen and (min-width: 60em) {
    #listing .col1 {
        float: left;
        width: 40em;
    }

    #listing .col2 {
        float: right;
        width: 18em;
    }

    #listing .col2 input[type="text"] {
        width: 100%;
    }

    #listing .col2 textarea {
        width: 100%;
    }
}

#search_units form {
    padding: 1em 0;
}

#search_units .quick-search {
    padding: 1em 0;
    position: relative;
}

#search_units .quick-search input[type=search] {
    background: #fff;
    padding: 0.4em;
    width: 100%;

    /* Used with submit button below */
    /*border-right: none;*/
    /*padding: 0.4em 3.9em 0.4em 0.4em;*/
}

#search_units .quick-search input[type=submit] {
    background: #f07030;
    border: 0.05em solid #f07030;
    border-left: none;
    color: #fff;
    position: absolute;
    right: 0;
    width: 3.5em;
}

#search_units .unit_information {
    clear: both;
}

#search_units .building_information {
    clear: both;
}

#search_units .market_information {
    clear: both;
}

#search_units label {
    display: block;
}

#search_units select {
    width: 100%;
}

#search_units table {
    width: 100%;
}

#search_units .col1 a.button {
    display: inline-block;
    width:   100%;
}

/* 640px wide */
@media only screen and (min-width: 40em) {
    #search_units .quick-search label {
        border:       0.05em solid #fff;
        border-right: 0.05em solid #999;
        left:         0;
        padding:      0.4em 1em 0.4em 0;
        position:     absolute;
        top:          1em;
        width:        8em;
    }

    #search_units .quick-search input[type=search] {
        padding: 0.4em 0.4em 0.4em 8.4em;
    }
}

@media only screen and (min-width: 60em) {
    #search_units form {
        overflow: auto;
    }

    #search_units form .col1 {
        float: left;
        margin-right: 1em;
        width: 13em;
    }

    #search_units form .col2 {
        float: left;
        margin-right: 1em;
        width: 30em;
    }

    #search_units form .col3 {
        float: left;
        width: 13em;
    }

    #search_units .unit_information .col1 {
        float: right;
        width: 19em;
    }

    #search_units .unit_information .col2 {
        float: left;
        width: 40em;
    }

    #search_units .building_information .col1 {
        float: right;
        width: 19em;
    }

    #search_units .building_information .col2 {
        float: left;
        width: 40em;
    }

    #search_units .market_information .col1 {
        float:        left;
        margin-right: 1em;
        width:        19em;
    }

    #search_units .market_information .col2 {
        float: left;
        width: 19em;
    }

    #search_units .market_information .col3 {
        float: right;
        width: 19em
    }

    #search_units label[for="unit"] {
        color: #336699;
        font-size: 1.6rem;
        font-weight: bold;
    }

    #search_units select[name="unit"] {
        border-radius: 0.2rem;
        outline: 0.4rem solid transparent;

        animation: pulse 1.5s;
        animation-iteration-count: 3;
    }

    @keyframes pulse {
        0% {
            outline-color: transparent;
        }
        50% {
            outline-color: #0f0;
        }
        100% {
            outline-color: transparent;
        }
    }
}

#authentication .input-group {
    margin-bottom: 0.5em;
}

#authentication label {
    display: block;
}

#authentication div.radio-group {
    display:      block;
    padding-left: 0.5em;
}

@media only screen and (min-width: 40em) {
    #authentication .input-group label {
        display: inline-block;
        width:   6em;
    }

    #authentication .input-group input[type=text] {
        display: inline-block;
    }

    #authentication .input-group input[type=password] {
        display: inline-block;
    }
}

#account_update_profile .input-group {
    margin-bottom: 0.5em;
}

#account_update_profile label {
    display: block;
}

#account_update_profile input[type=submit],
#account_update_profile a.button {
    display: inline-block;
    text-align: center;
    width: 6em;
}

@media only screen and (min-width: 40em) {
    #account_update_profile .input-group label {
        display: inline-block;
        width:   8em;
    }

    #account_update_profile .input-group input[type=password],
    #account_update_profile .input-group input[type=text] {
        display: inline-block;
    }
}

#account_password .input-group {
    margin-bottom: 0.5em;
}

#account_password label {
    display: block;
}

#account_password input[type=submit],
#account_password a.button {
    display: inline-block;
    text-align: center;
    width: 6em;
}

@media only screen and (min-width: 40em) {
    #account_password .input-group label {
        display: inline-block;
        width:   10em;
    }

    #account_password .input-group input[type=password],
    #account_password .input-group input[type=text] {
        display: inline-block;
    }
}

#pro .input-group {
    margin-bottom: 0.5em;
}

#pro label {
    display: block;
}

#pro input[type=submit] {
    display: inline-block;
    text-align: center;
}

@media only screen and (min-width: 40em) {
    #pro .input-group label {
        display: inline-block;
        width:   8em;
    }

    #pro .input-group input[type=text] {
        display: inline-block;
    }
}

#browse main {
    margin-top: 0.5em;
}

#browse #map-canvas {
    display:     block;
    height:      18em;
    width:       100%;
}

#browse #map-canvas .info-box td {
    padding: 0.3em 0 0;
    white-space: nowrap;
}

#browse #map-canvas .info-box th {
    font-weight: bold;
    white-space: nowrap;
}

#browse #map-sidebar {
    margin: 1em 0 0 0;
}

#browse #map-sidebar ul {
    margin:  0;
    padding: 0;
}

#browse #map-sidebar ul li {
    list-style-type: none;
    margin:          0;
    padding:         0;
}

#browse #map-sidebar a.button {
    width:         100%;
    margin-bottom: 0.5em;
}

@media only screen and (min-width: 60em) {
    #browse #map-canvas {
        float: left;
        height: 37em;
        width:  47em;
    }

    #browse #map-sidebar {
        float:  right;
        margin: 0;
        height: 37em;
        width:  11em;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

#search_houses form {
    padding: 1em 0 0;
}

#search_houses .quick-search {
    padding: 1em 0;
    position: relative;
}

#search_houses .quick-search input[type=search] {
    background: #fff;
    padding: 0.4em;
    width: 100%;
}

#search_houses label {
    display: block;
}

#search_houses select {
    display:       block;
    margin-bottom: 0.5em;
    width:         100%;
}

#search_houses input[type=text] {
    display:       block;
    margin-bottom: 0.5em;
    width:         100%;
}

#search_houses input[type=submit] {
    display:       block;
    margin-bottom: 0.5em;
    width:         100%;
}

#search_houses table {
    margin-bottom:   1em;
	width:           100%;
}

#search_houses th {
    background: #aaa;
    color:      #fff;
    padding:    0.2em;
}

#search_houses td {
    padding: 0.2em;
}

#search_houses tr:nth-of-type(odd) {
    background: #ddd;
}

#search_houses .col1 table a {
    color:           #444;
    display:         inline-block;
    text-decoration: none;
    width:           100%;
}

#search_houses .col1 tr + tr:hover {
    background: #ff6a00;
}

#search_houses .col1 tr + tr:hover a {
    color: #fff;
}

#search_houses .col2 th:nth-of-type(1),
#search_houses .col2 td:nth-of-type(1) {
    width: 80%;
}

#search_houses .col2 th:nth-of-type(2),
#search_houses .col2 td:nth-of-type(2) {
    text-align: right;
}

#search_houses .col2 th:nth-of-type(3),
#search_houses .col2 td:nth-of-type(3) {
    text-align: right;
    width:      17%;
}

#search_houses .col2 tr:last-child {
    background: #ccc;
}

#search_houses .col2 tr:last-child td {
	border-top: 3px double #ccc;
	font-weight: bold;
}

/* 640px wide */
@media only screen and (min-width: 42em) {
    #search_houses .quick-search label {
        border:       0.05em solid #fff;
        border-right: 0.05em solid #999;
        left:         0;
        padding:      0.4em 1em 0.4em 0;
        position:     absolute;
        top:          1em;
        width:        8em;
    }

    #search_houses .quick-search input[type=search] {
        padding: 0.4em 0.4em 0.4em 8.4em;
    }

    #search_houses label {
        display: inline-block;
        width:   7em;
    }

    #search_houses select {
        display:       inline-block;
        margin-bottom: 0.5em;
        width:         auto;
    }

    #search_houses input[type=text] {
        display:       inline-block;
        margin-bottom: 0.5em;
        width:         auto;
    }

    #search_houses input[type=submit] {
        margin-left: 7.2em;
        width:       7em;
    }
}

/* 960px wide */
@media only screen and (min-width: 60em) {
    #search_houses .col1 {
        float: left;
        width: 68%;
    }

    #search_houses .col1 table {
        font-size: 0.8em;
    }

    #search_houses .col2 {
        float:     right;
        font-size: 0.8em;
        width:     30%;
    }
}

#community th,
#community td {
    padding: 0.2em;
}

#community .detail {
    width: 100%;
}

#community .listing {
    border: 1px solid #ccc;
    width:  100%;
}

#community .listing tr:nth-of-type(odd) {
    background: #ddd;
}

#community .listing tr:nth-of-type(1) {
    background: #ccc;
}

#community .listing_link a {
    color:           #444;
    text-decoration: none;
}

#community .listing_link tr + tr:hover {
    background: #ff6a00;
}

#community .listing_link tr + tr:hover a {
    color: #fff;
}

/* 960px wide */
@media only screen and (min-width: 60em) {
    #community .col1 {
        float: right;
    }

    #community .col1 p {
        padding-top: 0;
        margin-top:  0;
    }

    #community .col2 {
        float: left;
    }
}

#image_viewer body {
    background: #000;
    color:      #fff;
    margin:     0;
    padding:    0;
    position:   relative;
}

#image_viewer .toolbar {
    background: #222;
    height:     60px;
    left:       0;
    opacity:    0.8;
    position:   fixed;
    text-align: center;
    top:        0;
    width:      100%;
    z-index:    10;
}

#image_viewer .toolbar button {
    background:    #000;
    border:        1px solid #fff;
    border-radius: 5px;
    color:         #fff;
    margin:        8px 0.5em 0;
    padding:       8px 0 4px;
    width:         46px;
}

#image_viewer .container {
    height:     100%;
    overflow:   hidden;
    text-align: center;
    top:        60px;
    width:      100%;
}

#image_viewer .container img {
    display:  inline-block;
    position: relative;
    z-index:  5;
    top:      60px;
    left:     0;
}

#admin-listing-search h1 {
    font-size: 1.7rem;
}

#admin-listing-search .criteria-form {
    display: flex;
    flex-direction: column;
}

#admin-listing-search .input-group {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}

#admin-listing-search .input-group:last-of-type {
    margin-bottom: 0;
}

#admin-listing-search .input-pair {
    display: flex;
    flex-direction: column;
    margin-right: 0.5rem;
}

#admin-listing-search .input-pair:last-of-type {
    margin-right: 0;
}

#admin-listing-search .input-pair label {
    font-size: 0.8rem;
    font-weight: bold;
}

#admin-listing-search .listing-result {
    margin-bottom: 1rem;
}

#admin-listing-search h2 {
    font-size: 1.4rem;
}

#admin-listing-search .listing-result.matched {
    color: #080;
}

#admin-listing-search .listing-result span {
    display: inline-block;
    margin-bottom: 0.5rem;
    margin-left: 0.75rem;
}

#admin-listing-search .listing-result span:first-child {
    margin-left: 0;
}


/**
 * Modernized CSS.
 */

 :root {
    /* Sadly, these can't be used in media queries yet
       so are here simply as references for what screen
       widths are being designed specifically for. */
    --xsmall-width: 20rem;  /*  320px */
    --small-width: 30rem;   /*  480px */
    --medium-width: 40rem;  /*  640px */
    --normal-width: 60rem;  /*  960px */
    --large-width: 75rem;   /* 1200px */
    --xlarge-width: 100rem; /* 1600px */

    --small-margin: 0.25rem; /*  4px */
    --medium-margin: 0.5rem; /*  8px */
    --normal-margin: 1rem;   /* 16px */
    --large-margin: 2rem;    /* 32px */

    --small-padding: 0.25rem; /*  4px */
    --medium-padding: 0.5rem; /*  8px */
    --normal-padding: 1rem;   /* 16px */
    --large-padding: 2rem;    /* 32px */

    --xsmall-font-size: 0.5rem;   /*  8px */
    --small-font-size: 0.75rem;   /* 12px */
    --medium-font-size: 0.875rem; /* 14px */
    --normal-font-size: 1rem;     /* 16px */
    --large-font-size: 1.125rem;  /* 18px */
    --xlarge-font-size: 1.25rem;  /* 20px */
    --xlarge-font-size: 1.5rem;   /* 24px */

    --background-color: #fff;
    --primary-color: #444;
    --border-color: #aaa;
    --secondary-color: #7b8da4;
    --accent-color: #ff6a00;

    --thin-border-width: 0.0625rem; /* 1px */
 }

#condo-listings {
    display: flex;
    flex-direction: column;
}

#condo-listings h1 {
    font-size: var(--xlarge-font-size);
}

#condo-listings p {
    margin: 0 0 var(--normal-margin);
}

#condo-listings .break-before-normal::after {
    content: ' ';
    display: block;
}

#condo-listings .page-content {
    display: flex;
    flex-direction: column;
}

#condo-listings .listing-filters {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--normal-margin);
}

#condo-listings .filter-pairs {
    display: flex;
    flex-direction: row;
    gap: var(--medium-margin);
    margin-bottom: var(--medium-margin);
}

#condo-listings input[type="number"] {
    width: 100%;
}

#condo-listings .compacted-text {
    display: none;
}

#condo-listings .listing-result {
    border: var(--thin-border-width) solid var(--border-color);
    text-decoration: none;
    margin-bottom: var(--normal-margin);

    display: flex;
    flex-direction: column;
}

#condo-listings .listing-result:hover {
    border-color: var(--accent-color);
}

#condo-listings .listing-result h2 {
    font-size: var(--normal-font-size);
    font-weight: normal;
    margin: 0;
    padding: 0;
    flex-grow: 1;
}

#condo-listings .listing-result p {
    margin: 0;
    padding: 0;
}

#condo-listings .listing-result address {
    font-style: normal;
}

#condo-listings .listing-number {
    display: flex;
    flex-direction: row;
    margin-bottom: var(--small-margin);
    background-color: var(--border-color);
    color: var(--background-color);
    padding: var(--small-padding);
}

#condo-listings .listing-result:hover .listing-number {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

#condo-listings .listing-address {
    padding: var(--small-padding);
}

#condo-listings .listing-rooms {
    padding: var(--small-padding);
    display: flex;
    flex-direction: row;
}

#condo-listings .listing-rooms p {
    margin-right: var(--normal-margin);
}

/**
 * Media queries for xsmall screen size.
 */
@media screen and (min-width: 20rem) {
}

/**
 * Media queries for small screen size.
 */
@media screen and (min-width: 30rem) {
    #condo-listings .compacted-text {
        display: inline;
    }

    #condo-listings .listing-filters {
        display: flex;
        flex-direction: row;
        gap: var(--medium-margin);
    }

    #condo-listings .filter-pairs {
        display: flex;
        flex-direction: column;
    }

    #condo-listings .horizontal-at-small {
        display: flex;
        flex-direction: row;
    }

    #condo-listings .listing-address {
        flex-grow: 1;
    }

    #condo-listings .listing-rooms {
        padding: var(--small-padding);
        display: flex;
        flex-direction: column;
    }

    #condo-listings .listing-rooms p {
        margin-right: 0;
    }
}

/**
 * Media queries for medium screen size.
 */
@media screen and (min-width: 40rem) {
    #condo-listings .break-before-normal::after {
        content: inherit;
        display: inherit;
    }
}

/**
 * Media queries for normal screen size.
 */
@media screen and (min-width: 60rem) {
    #condo-listings .listing-results {
        order: 1;
        flex-grow: 1;
        margin-right: var(--normal-margin);

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--normal-margin);
    }

    #condo-listings .listing-result {
        flex-direction: column;
        margin-bottom: 0;
        width: 48%;
    }

    #condo-listings .price-filters input[type="number"],
    #condo-listings .size-filters input[type="number"],
    #condo-listings .beds-filters input[type="number"],
    #condo-listings .baths-filters input[type="number"] {
        width: 8rem;
    }
}

/**
 * Media queries for large screen size.
 */
@media screen and (min-width: 75rem) {
}

/**
 * Media queries for xlarge screen size.
 */
@media screen and (min-width: 100rem) {
}