Created
April 18, 2013 21:27
-
-
Save jalbertbowden/5416374 to your computer and use it in GitHub Desktop.
foundation.css by the one and only https://github.com/morewry
most likely don't need it all as it's specific to the site its for, but the normalizations are clean and the foundation is solid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** http://www.virtualrevolution.net/zbin/rmx-collection-all.css **/ | |
| @charset "UTF-8"; | |
| /* | |
| ## Reset | |
| Minimalized resets that provide a foundation for normalizations & defaults | |
| */ | |
| html, body, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, dl, li, dd, pre, | |
| fieldset, form, legend, input, select, textarea, button, | |
| article, aside, figcaption, figure, section { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body, iframe, fieldset, legend, input, select, textarea, button { | |
| border: 0; | |
| } | |
| a { | |
| border: 0; | |
| outline: 0; | |
| } | |
| html, h1, h2, h3, h4, h5, h6, input, select, textarea, button, small { | |
| font-size: 100%; | |
| } | |
| input, select, textarea, button { | |
| background: transparent; | |
| } | |
| /* | |
| ### HTML | |
| - Remove iOS text size adjust without disabling user zoom | |
| - Always force a scrollbar in non-IE | |
| - Show scrollbars on iPad so interaction is indicated on overflowing containers | |
| <html>...</html> | |
| */ | |
| html { | |
| background-color: black; | |
| overflow-x: hidden; | |
| overflow-y: scroll; | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| } | |
| /* | |
| ### Body | |
| Normalize browser defaults for `body` | |
| <html> | |
| <body>...</body> | |
| </html> | |
| */ | |
| body { | |
| color: #999999; | |
| font-family: "Georgia", serif; | |
| font-size: 16px; | |
| line-height: 1.5625; | |
| vertical-align: baseline; | |
| z-index: 0; | |
| } | |
| /* | |
| ## Hidden | |
| `display:none` resets for hidden elements | |
| */ | |
| /* | |
| ## Block Elements | |
| Normalizes browser defaults for block-level elements. | |
| - Sets `display:block` for all block level elements. | |
| - Makes `address` a block level element, removes italic style. | |
| - Removes default formatting on `hr` | |
| */ | |
| address, article, aside, details, div, figcaption, figure, footer, header, hgroup, hr, menu, nav, p, section, footer small, dl, dt, dd, legend span, | |
| legend a, label, | |
| .label, input, | |
| select, | |
| textarea, .listing-pane-body, .agent-pane-head, .agent-pane-body, .agent-detail-head, .agent-detail-body, .agent-brand, .js-tabs-nav a, .site-global-text, .mainnav-menu-link, .listing-pane-address-1, .agent-detail-contact > span, .agent-brand-body span { | |
| display: block; | |
| } | |
| address { | |
| font-style: normal; | |
| } | |
| hr { | |
| border: 0; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| /* | |
| ## Inline | |
| Resets, normalizations, & default styles for inline elements | |
| */ | |
| abbr, b, big, br, cite, del, dfn, em, i, ins, mark, small, span, strong, sub, sup, time, tt, wbr { | |
| font-style: inherit; | |
| font-weight: inherit; | |
| font-variant: inherit; | |
| font-stretch: inherit; | |
| text-transform: inherit; | |
| } | |
| /* | |
| Add help cursor to `abbr` and `dfn`. | |
| <abbr title="test">Abbr</abbr> | |
| */ | |
| abbr[title], dfn[title] { | |
| border: 0; | |
| cursor: help; | |
| } | |
| strong, b { | |
| font-weight: 700; | |
| } | |
| em, i { | |
| font-style: italic; | |
| } | |
| del { | |
| text-decoration: line-through; | |
| } | |
| ins { | |
| font-style: italic; | |
| } | |
| fieldset small, .rtf small, | |
| small.rtf { | |
| opacity: 0.7; | |
| font-size: 75%; | |
| } | |
| /* | |
| [Position subscript and superscript content without affecting line-height](http://gist.github.com/413930) | |
| Text<sup>sup</sup> and text<sub>sub</sub> | |
| */ | |
| sub, sup { | |
| position: relative; | |
| font-size: 80%; | |
| line-height: 0; | |
| vertical-align: baseline; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| /* | |
| [Selection styles, must be separate](http://quirksmode.org/css/selection.php) for `::selection` pseudo-element. | |
| */ | |
| /* | |
| ## Header | |
| Reset, normalize, & default styles for headings | |
| - Sets `font-weight` to normal | |
| */ | |
| h1, h2, h3, h4, h5, h6, header, hgroup { | |
| font-weight: inherit; | |
| } | |
| /* | |
| ## Footer | |
| File that sets defaults for footer elements. | |
| - Sets `small` within `footer` to `display:block` | |
| */ | |
| /* | |
| ## Quotes | |
| Default styles for quotes and blockquotes. Remove quotes. | |
| <q>Inline quote</q> | |
| */ | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| /* | |
| ## Code | |
| Normalizes & sets defaults for code & preformatted text | |
| - Wrap preformatted text (CSS3) or closest equivalent (prior versions) | |
| - [Redeclare monospace](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59) | |
| */ | |
| pre, code, kbd, samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| pre { | |
| white-space: pre; | |
| white-space: -moz-pre-wrap; | |
| white-space: -pre-wrap; | |
| white-space: -o-pre-wrap; | |
| white-space: -khtml-pre-wrap; | |
| white-space: -webkit-pre-wrap; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| overflow: auto; | |
| overflow-x: auto; | |
| overflow-y: visible; | |
| } | |
| /* | |
| ## Links | |
| Resets & normalizations for links, including: | |
| - [Make outline thin dotted](http://necolas.github.com/normalize.css) | |
| - [Accessible focus treatment](http://people.opera.com/patrickl/experiments/keyboard/test) | |
| <a href="#test">Test Link</a> | |
| */ | |
| a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| a:visited { | |
| color: #b3b3b3; | |
| } | |
| a:focus, | |
| a:active, | |
| a:hover { | |
| color: #d9d9d9; | |
| } | |
| a:focus { | |
| outline: thin dotted; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: none; | |
| } | |
| /* | |
| ## Lists | |
| Resets, normalizations, & default styles for lists | |
| */ | |
| ol, ul { | |
| display: block; | |
| list-style: none; | |
| } | |
| li { | |
| display: list-item; | |
| } | |
| /* | |
| ### Unstyled List | |
| Helper class to remove default list styling. | |
| - Placeholder `list-unstyled` | |
| <ul class="rtf list-unstyled"> | |
| <li>Test list item one</li> | |
| <li>Test list item number two</li> | |
| <li>And finally test list item number three</li> | |
| </ul> | |
| */ | |
| /* | |
| ### Key-Value List | |
| Formatting classes for a list with keys and associated values. Use the placeholders `list-keyval`, `list-keyval-item`, `list-keyval-key`, and `list-keyval-val` to format a list as a vertical list of key-value pairs. | |
| - Placeholder `list-keyval` | |
| - Placeholder `list-keyval-item` | |
| - Placeholder `list-keyval-key` | |
| - Placeholder `list-keyval-val` | |
| <dl class="list-keyval"> | |
| <dt class="list-keyval-key">Test list item one</dt> | |
| <dd class="list-keyval-val">Test list item number two</dd> | |
| </dl> | |
| */ | |
| /* | |
| ### Delimited List | |
| Formatting classes for a single-line list with delimiters. Use the classes `list-delim` and `list-delim-item` to format a list as a horizontal line with seperators. | |
| - Placeholder `list-delim` | |
| - Placeholder `list-delim-item` | |
| <ul class="list-delim"> | |
| <li class="list-delim-item">Delimited item</li> | |
| <li class="list-delim-item">Delimited item</li> | |
| </ul> | |
| */ | |
| .site-footerlinks li { | |
| white-space: nowrap; | |
| } | |
| .site-footerlinks li:before { | |
| color: #bfbfbf; | |
| content: " \007C "; | |
| padding: 0 5px 0 3px; | |
| } | |
| .site-footerlinks li:first-child:before { | |
| content: ""; | |
| padding: 0; | |
| } | |
| /* | |
| ## Forms | |
| Normalizes and sets defaults for forms and form fields | |
| */ | |
| /* | |
| ### Form & Fieldset | |
| Sets defaults for block level form elements such as `form` & `fieldset` | |
| */ | |
| /* | |
| ### Legend & Label | |
| Sets defaults for labels and headings such as `legend` & `label` | |
| - Normalizes wrapping on `legend` | |
| - Fixes IE 7 pixel bug on `legend` | |
| - Sets `label` to `display:block` | |
| */ | |
| legend { | |
| white-space: normal; | |
| word-wrap: break-word; | |
| } | |
| /* | |
| ### Fields | |
| Resets & normalizes all form field types. | |
| - Normalize box model with `box-sizing` | |
| - Normalizes background visuals with `background-clip` | |
| - Sets inputs to inherit text styles (ie, from a span wrapper) | |
| - Addresses FF3/4 setting line-height using important in the UA stylesheet | |
| - Corrects inability to style clickable `input` types in iOS | |
| - [Make buttons play nice in IE](http://viget.com/inspire/styling-the-button-element-in-internet-explorer) | |
| <span class="msg warning">By default, all inputs, selects, textareas, and buttons are invisible. They must be styled with classes.</span> | |
| */ | |
| input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), | |
| select, | |
| textarea { | |
| min-height: 1.5625em; | |
| -webkit-background-clip: padding; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-border-radius: 0; | |
| -moz-border-radius: 0; | |
| -ms-border-radius: 0; | |
| -o-border-radius: 0; | |
| border-radius: 0; | |
| color: inherit; | |
| font-family: inherit; | |
| font-style: inherit; | |
| font-weight: inherit; | |
| line-height: 1.5625em; | |
| } | |
| input[type="text"], | |
| input[type="search"] { | |
| text-transform: capitalize; | |
| } | |
| select[multiple] { | |
| min-height: 6.25em; | |
| } | |
| option { | |
| background: transparent; | |
| } | |
| textarea { | |
| max-width: 100%; | |
| min-height: 9.375em; | |
| overflow: auto; | |
| overflow-x: visible; | |
| overflow-y: auto; | |
| resize: vertical; | |
| } | |
| button, | |
| input[type="submit"] { | |
| -webkit-background-clip: border; | |
| -moz-background-clip: border; | |
| background-clip: border-box; | |
| -webkit-box-sizing: content-box; | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| cursor: pointer; | |
| -webkit-appearance: button; | |
| } | |
| button:focus, | |
| input[type="submit"]:focus { | |
| outline: thin dotted #d9d9d9; | |
| } | |
| button:active, button:hover, | |
| input[type="submit"]:active, | |
| input[type="submit"]:hover { | |
| outline: none; | |
| } | |
| /* | |
| ### Field Wrappers | |
| Styles the wrappers that normalize fancy fields | |
| */ | |
| /* | |
| #### Generic Field | |
| Class `field`. Sets vertical alignment and default formatting for form field wrappers. Required on every field wrapper. | |
| <span class="field"> | |
| <input type="text"> | |
| </span> | |
| <span class="msg info">Each field wrapper should have 3 classes. First the `field` class, then a class that matches the tag name (ie `input`), and finally a class that matches the input type (ie `text`).</span> | |
| */ | |
| .field { | |
| display: block; | |
| position: relative; | |
| vertical-align: top; | |
| } | |
| .field-before, | |
| .field-after { | |
| position: absolute; | |
| } | |
| /* | |
| #### Text Input Wrappers | |
| Classes `input`, `select`, `textarea`, `btn`. Sets default height, width, and padding. Required on every wrapper for tags `input` (that are not radio or checkbox), `select`, and `textarea`. | |
| <span class="field input text"> | |
| <input type="text"> | |
| </span> | |
| <span class="field select"> | |
| <select> | |
| <option>Option</option> | |
| </select> | |
| </span> | |
| <span class="field textarea"> | |
| <textarea></textarea> | |
| </span> | |
| */ | |
| .input, | |
| .select, | |
| .textarea, | |
| button { | |
| min-width: auto; | |
| max-width: 100%; | |
| min-height: 1.5625em; | |
| line-height: 1.5625em; | |
| } | |
| /* | |
| #### Checkbox & Radio Wrappers | |
| Classes `choice`, `checkbox`, and `radio`. Formats size and position. Required on every wrapper for tags `input type="checkbox"` and `input type="radio"`. | |
| <span class="field choice checkbox"> | |
| <input type="checkbox"> | |
| </span> | |
| <span class="field choice radio"> | |
| <input type="radio"> | |
| </span> | |
| <span class="msg alert">Checkboxes and radios are special cases. Even though they are inputs, their second class should be `choice`, not `input`.</span> | |
| */ | |
| .choice { | |
| top: -2px; | |
| display: inline-block; | |
| width: 1em; | |
| height: 1em; | |
| line-height: 0; | |
| vertical-align: middle; | |
| text-align: center; | |
| z-index: 1; | |
| } | |
| .choice input, | |
| .choice .icon { | |
| opacity: 0; | |
| } | |
| .choice input { | |
| z-index: 2; | |
| } | |
| .choice input:checked + .icon, .lt-ie9 .choice input { | |
| opacity: 1; | |
| } | |
| .choice .icon { | |
| z-index: -1; | |
| } | |
| .lt-ie9 .choice .icon { | |
| display: none; | |
| } | |
| .checkbox .icon { | |
| position: absolute; | |
| bottom: 2px; | |
| right: 2px; | |
| } | |
| .radio .icon { | |
| position: relative; | |
| top: -1em; | |
| } | |
| .checkbox, .checkbox:before, .checkbox:after { | |
| -webkit-border-radius: 2px !important; | |
| -moz-border-radius: 2px !important; | |
| -ms-border-radius: 2px !important; | |
| -o-border-radius: 2px !important; | |
| border-radius: 2px !important; | |
| } | |
| .radio, .radio:before, .radio:after { | |
| -webkit-border-radius: 1em !important; | |
| -moz-border-radius: 1em !important; | |
| -ms-border-radius: 1em !important; | |
| -o-border-radius: 1em !important; | |
| border-radius: 1em !important; | |
| } | |
| /* | |
| #### Submit Wrapper | |
| Class `submit`. Sets top margin to submit buttons. Optional. | |
| */ | |
| .submit { | |
| margin-top: 1.5625em; | |
| } | |
| /* | |
| ### Form Miscellany | |
| Misc browser normalization styles including placeholders, valid, and invalid fields | |
| - @placeholder selectors can't be combined or they won't work | |
| */ | |
| .placeholder { | |
| color: #b3b3b3 !important; | |
| font-family: "Georgia", serif !important; | |
| font-size: 100% !important; | |
| font-style: normal !important; | |
| } | |
| ::-moz-focus-inner { | |
| padding: 0; | |
| border: 0; | |
| outline: 0; | |
| } | |
| input[type="search"] { | |
| -moz-appearance: none; | |
| -webkit-appearance: textfield; | |
| } | |
| input[type="search"]::-webkit-search-decoration { | |
| display: none; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: #b3b3b3 !important; | |
| font-family: "Georgia", serif !important; | |
| font-size: 100% !important; | |
| font-style: normal !important; | |
| } | |
| :-moz-placeholder { | |
| color: #b3b3b3 !important; | |
| font-family: "Georgia", serif !important; | |
| font-size: 100% !important; | |
| font-style: normal !important; | |
| } | |
| :valid, | |
| :invalid { | |
| border: 0; | |
| outline: 0; | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /* | |
| ## Multimedia | |
| Default styles for multimedia (images, video, etc) | |
| - Set `max-width` on images and objects to prevent overflow | |
| - Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. | |
| - Prevent modern browsers from displaying 'audio' without controls | |
| - Correct SVG overflow displayed oddly in IE9 | |
| <img src="test-house.jpg" /> | |
| */ | |
| img { | |
| max-width: 100%; | |
| width: auto; | |
| height: auto; | |
| vertical-align: middle; | |
| font-size: 0; | |
| -ms-interpolation-mode: bicubic; | |
| } | |
| a img { | |
| border: 0; | |
| } | |
| object { | |
| max-width: 100%; | |
| } | |
| audio, video, canvas { | |
| display: inline-block; | |
| } | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| /* | |
| ## Multimedia Structure Options | |
| Structure for laying out media items with fixes for placement in fluid grids. The following rules apply: | |
| - Do not add margins, padding, or borders to `media`. | |
| - Set margins, padding, and borders on `media-frame`. | |
| - Set widths on `media`, not its descendants. | |
| - Set heights on `media-frame` for cropping. | |
| Media will scale and crop the width and height so that images don't break layout. | |
| - Placeholder `media` | |
| - Placeholder `media-frame` | |
| - Placeholder `media-item` | |
| <div class="media"> | |
| <a href="#" class="media-frame"> | |
| <img class="media-item" src="#" width="200" height="100" /> | |
| </a> | |
| </div> | |
| */ | |
| .listing-pane-media, .agent-pane-media, .agent-detail-media, .agent-brand-media { | |
| text-align: center; | |
| } | |
| .listing-pane-frame, .agent-pane-frame, .agent-detail-frame, .agent-brand-frame { | |
| position: relative; | |
| display: block; | |
| overflow: hidden; | |
| background: transparent url('/resources/img/loader.png?v=1366047142') 50% 50% no-repeat; | |
| min-width: 40px; | |
| min-height: 40px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .listing-pane-image, .agent-pane-image, .agent-detail-image, .agent-brand-image { | |
| max-width: 100%; | |
| width: auto; | |
| min-height: inherit; | |
| max-height: auto; | |
| height: auto; | |
| } | |
| /* | |
| ### Media Card Layout | |
| Structure for media + content in a card/horizontal layout. Media card will automatically lay out an image, video, or icon next to a block of text. If the multimedia does not have any risk of overflow, media card does not require widths. If the multimedia needs to scale, it is only necessary to set a width on the media block (class `media`). Setting a width on the body is completely optional. | |
| - Placeholder `media-card` | |
| - Placeholder `media-card-frame` | |
| - Placeholder `media-card-item` | |
| - Placeholder `media-card-body` | |
| <div class="media-card"> | |
| <div class="media media-card-media"> | |
| <div class="media-frame media-card-frame"> | |
| <img class="media-item media-card-item" src="test-house.jpg" width="100" height="50" /> | |
| </div> | |
| </div> | |
| <div class="media-card-body"> | |
| This is media card body. | |
| </div> | |
| </div> | |
| */ | |
| .agent-brand-media { | |
| border-right: 0.5625em solid transparent; | |
| } | |
| /* | |
| ### Media Pane Layout | |
| Structure for media + content in a pane/veritical layout. Media card will automatically lay out an image, video, or icon centered above a block of text. | |
| - Placeholder `media-pane` | |
| - Placeholder `media-pane-frame` | |
| - Placeholder `media-pane-item` | |
| - Placeholder `media-pane-body` | |
| <div class="media-pane"> | |
| <div class="media media-pane-media"> | |
| <div class="media-frame media-pane-frame"> | |
| <img class="media-item media-card-item" src="test-house.jpg" width="100" height="50" /> | |
| </div> | |
| </div> | |
| <div class="media-pane-body"> | |
| This is media pane body. | |
| </div> | |
| </div> | |
| */ | |
| .listing-pane, .agent-pane, .agent-detail { | |
| display: block; | |
| text-align: center; | |
| } | |
| /* | |
| ## Tables | |
| Resets, normalizations & default styles related to tables. | |
| */ | |
| table { | |
| display: table; | |
| table-layout: fixed; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| max-width: 100%; | |
| } | |
| th { | |
| text-transform: capitalize; | |
| } | |
| td { | |
| vertical-align: top; | |
| } | |
| thead th { | |
| font-weight: normal; | |
| text-align: left; | |
| } | |
| tbody th { | |
| text-align: left; | |
| } | |
| /* | |
| ### Striped Tables | |
| Use `table-striped` to add zebra striping to table rows, columns, and sections. | |
| - Placeholder `table-striped` | |
| <table width="100%" cellspacing="0" cellpadding="0" class="table-striped"> | |
| <thead> | |
| <tr> | |
| <th>Test Table Heading</th> | |
| <th>And</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Cell contents</td> | |
| <td>And</th> | |
| </tr> | |
| <tr> | |
| <td>Cell contents</td> | |
| <td>And</th> | |
| </tr> | |
| </tbody> | |
| </table> | |
| */ | |
| /* | |
| ### Graded Tables | |
| Use `table-graded` to add lines between table rows. | |
| - Placeholder `table-graded` | |
| <table width="100%" cellspacing="0" cellpadding="0" class="table-graded"> | |
| <thead> | |
| <tr> | |
| <th>Test Table Heading</th> | |
| <th>And</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Cell contents</td> | |
| <td>And</th> | |
| </tr> | |
| <tr> | |
| <td>Cell contents</td> | |
| <td>And</th> | |
| </tr> | |
| </tbody> | |
| </table> | |
| */ | |
| /* | |
| ### Scored Tables | |
| Use `table-scored` to add lines between table columns. | |
| - Placeholder `table-scored` | |
| <table width="100%" cellspacing="0" cellpadding="0" class="table-scored"> | |
| <thead> | |
| <tr> | |
| <th>Test Table Heading</th> | |
| <th>And</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Cell contents</td> | |
| <td>And</th> | |
| </tr> | |
| <tr> | |
| <td>Cell contents</td> | |
| <td>And</th> | |
| </tr> | |
| </tbody> | |
| </table> | |
| */ | |
| /* | |
| ## Misc | |
| Resets, normalizations & default styles related to misc elements | |
| */ | |
| /* | |
| ## Layout Helpers | |
| Non-semantic (or visually semantic) helper classes | |
| */ | |
| /* | |
| ### Pseudo-Element Layers | |
| Multiple borders and backgrounds with pseudo elements. | |
| - Placeholder `pseudolayer` | |
| - Mixin `pseudolayer` | |
| */ | |
| .pages-prev:before, .pages-next:before, .getintouch-submit-btn:before, .reqmoreinfo-submit-btn:before, .sendtofriend-submit-btn:before, .site-global-btn:before, .listingnav-btn:before, .listingnav-btn-refine-search-submit:before, .listing-detail-btn-share:before, .listing-detail-btn-rmx:before, .agent-detail-email:before, .agent-brand-btn:before, .about-btn:before, .home-btn-moreprops:before, .error-btn:before, .error-btn-alt:before, .mainnav:before, .site-head:before, .site-foot:before, .listingnav-refine-search-title:before, .listingnav-sort-menu-title:before, .listingnav-refine-search-title:after, .listingnav-sort-menu-title:after, .results-tile-preview:before, .agentnav-refine-location:before, .agentnav-refine-location:after, .mainnav-menu-item:first-child .mainnav-menu-link:before, .mainnav-menu-item:first-child .mainnav-menu-link:after { | |
| display: block; | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| /* | |
| ### Clearing | |
| There are two re-usable clearing methods. | |
| */ | |
| /* | |
| #### Clearfix | |
| Standard clearfix, updated by [Nicolas Gallabher](http://nicolasgallagher.com/micro-clearfix-hack/), Sass implementation from [http://forrst.com/posts/CSS_vs_SASS_vs_LessCSS-DPV]. | |
| - Placeholder `clearfix` | |
| <div class="clearfix">Clearfix</div> | |
| */ | |
| .agent-brand:before, .js-tabs:before, .mainnav:before, .mainnav-menu-body:before, .results-tile:before, .listingnav:before, .listing-detail-head:before, .listing-detail-stats:before, .agentnav:before, .agent-detail-body:before, .reqmoreinfo-opts:before, .reqmoreinfo-list:before, .sendtofriend-body li:before, .agent-brand:after, .js-tabs:after, .mainnav:after, .mainnav-menu-body:after, .results-tile:after, .listingnav:after, .listing-detail-head:after, .listing-detail-stats:after, .agentnav:after, .agent-detail-body:after, .reqmoreinfo-opts:after, .reqmoreinfo-list:after, .sendtofriend-body li:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| /* | |
| #### Clearinner Overflow | |
| Easy clearing with `overflow: hidden` property. | |
| - Placeholder `clearinner` | |
| <div class="clearinner">clearinner</div> | |
| */ | |
| .agent-brand-body, .listing-detail-desc, .listing-detail-btn-rmx { | |
| overflow: hidden; | |
| } | |
| /* | |
| ### Hidden | |
| Makes an element invisible with `display` property. | |
| - Placeholder `hidden` | |
| <div class="hidden">Hidden</div> | |
| */ | |
| base, head, link, meta, script, style, title, input[type="hidden"], [hidden], audio:not([controls]), .hidden, .js-tabs-content, .modal-backdrop, .modal, .dropdown-menu, .jGrowl-closer { | |
| display: none; | |
| } | |
| /* | |
| ### Accessible | |
| Makes an element invisible, but accessible, with `position: absolute` and `clip` properties. | |
| - Placeholder `accessible` | |
| <div class="accessible">Accessible</div> | |
| */ | |
| .accessible, .site-title, .site-subtitle, .mainnav-menu-title, .listing-pane-price-head, .agentnav-refine-location label { | |
| position: absolute; | |
| clip: rect(1px, 1px, 1px, 1px); | |
| } | |
| .accessible:focus, .site-title:focus, .site-subtitle:focus, .mainnav-menu-title:focus, .listing-pane-price-head:focus, .agentnav-refine-location label:focus { | |
| position: static; | |
| clip: auto; | |
| } | |
| /* | |
| ### Invisible | |
| Makes an element invisible with `visibility` property. | |
| - Placeholder `invisible` | |
| <div class="invisible">Invisible</div> | |
| */ | |
| .invisible { | |
| visibility: hidden; | |
| } | |
| /* | |
| ### Visible | |
| Makes an element visible with `visibility` property. | |
| - Placeholder `visible` | |
| <div class="visible">Visible</div> | |
| */ | |
| .visible { | |
| display: block; | |
| visibility: visible; | |
| } | |
| /* | |
| ### Image Replacement | |
| Pulls text off screen with `text-indent` property. | |
| - Placeholder `ir` | |
| <div class="ir">Image Replacement</div> | |
| */ | |
| .icon-mappin, .icon-mappin-cluster, .modal-close, .mainnav-search-icon, .agentnav-refine-link-icon, .agentnav-refine-icon, .agent-detail-prev, .agent-detail-next { | |
| text-indent: -9999999px; | |
| } | |
| /* | |
| ### Floating Layouts | |
| Shortcuts for no-frills floating. Use the classes `float-row` and `float-unit`. | |
| - Placeholder `float-row` | |
| - Placeholder `float-unit` | |
| <div class="float-row"> | |
| <div class="float-unit">Floating unit</div> | |
| <div class="float-unit">Floating unit</div> | |
| <div class="float-unit">Floating unit</div> | |
| <div> | |
| */ | |
| .agent-brand-media, .js-tabs-nav, .site-disclaimer, .site-global, .mainnav-search, .mainnav-menu, .mainnav-menu-item, .results-tile-item, .listingnav-refine, .listingnav-title, .listingnav-misc, .listingnav-back, .listingnav-page, .listingnav-prev, .listingnav-next, .listing-detail-title, .listing-detail-price, .listing-detail-stats, .listing-detail-stats li, .listing-detail-share, .listing-detail-desc, .agentnav-title, .agentnav-location, .agent-detail-office, .agent-detail-contact, .agent-brand, .reqmoreinfo-askaquestion, .reqmoreinfo-requestashowing, .reqmoreinfo-name, .reqmoreinfo-email, .reqmoreinfo-phone, .reqmoreinfo-message, .sendtofriend-body label, .sendtofriend-body .label, .sendtofriend-body .field { | |
| float: left; | |
| } | |
| /* | |
| ### Inline-Block Layouts | |
| Shortcuts for inline block layouts. Use the placeholders `inline-row` and `inline-unit`. By default, an `inline-row` won't allow the `inline-unit`s to wrap, but the content inside each `inline-unit` can. | |
| - Placeholder `inline-row` | |
| - Placeholder `inline-unit` | |
| - To suppress whitespace between units, use placeholder `inline-row-nospace`. | |
| - To keep content inside of units by wrapping use placeholder `inline-unit-nowrap`. | |
| <!-- Regular Inline Row --> | |
| <div class="inline-row"> | |
| <div class="inline-unit">Inline block unit</div> | |
| <div class="inline-unit">Inline block unit</div> | |
| <div class="inline-unit">Inline block unit</div> | |
| <div> | |
| <!-- Inline Row with no whitepsace --> | |
| <div class="inline-row-nospace"> | |
| <div class="inline-unit">Inline block unit</div> | |
| <div class="inline-unit">Inline block unit</div> | |
| <div class="inline-unit">Inline block unit</div> | |
| <div> | |
| */ | |
| .site-footerlinks li, .pages, .mainnav-search-field, .agentnav-refine-field, .pages-list, .site-popdests, .listingnav-refine-search-price, .listingnav-misc, .agentnav-location { | |
| white-space: nowrap; | |
| } | |
| .pages, .mainnav-search-field, .agentnav-refine-field { | |
| -o-white-space-collapse: discard; | |
| -ms-white-space-collapse: discard; | |
| -moz-white-space-collapse: discard; | |
| -webkit-white-space-collapse: discard; | |
| white-space-collapse: discard; | |
| word-spacing: -5px; | |
| } | |
| .pages > *, .mainnav-search-field > *, .agentnav-refine-field > * { | |
| word-spacing: normal; | |
| } | |
| .site-footerlinks li, .pages-list, .pages-item, .pages-prev, .pages-next, .mainnav-search-input, .agentnav-refine-input, .mainnav-search-btn, .agentnav-refine-btn, .site-popdests-title, | |
| .site-popdests-list, | |
| .site-popdests-item, .listingnav-refine-search-price li, .listingnav-sort, .listingnav-rmx, .listing-pane-address-2, .listing-pane-price, .agentnav-location-title, .agentnav-refine, .getintouch-body .input { | |
| display: -moz-inline-stack; | |
| display: inline-block; | |
| vertical-align: middle; | |
| white-space: normal; | |
| } | |
| /* | |
| ### Full Width Layouts | |
| Set a container to appear full width with content centered: [http://css-tricks.com/full-browser-width-bars/] use `fullwidth`. | |
| - Placeholder `fullwidth` | |
| */ | |
| .site-head, .site-foot, .listingnav { | |
| margin-left: -2000px; | |
| margin-right: -2000px; | |
| padding-left: 2000px; | |
| padding-right: 2000px; | |
| } | |
| /* | |
| ### Alignment | |
| Align all (float/margin/text-align) to center, left, or right. | |
| - Placeholder `align-center` | |
| - Placeholder `align-left` | |
| - Placeholder `align-right` | |
| */ | |
| .listing-pane-frame, .agent-pane-frame, .agent-detail-frame, fieldset small, .center .jGrowl-notification, | |
| .center .jGrowl-closer, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-popdests, .site-foot-logo, .site-footerlinks, .listingnav-refine-search-submit, .agent-detail-email, .about-btn, .home-btn-moreprops, .error-msg { | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| fieldset small, .center .jGrowl-notification, | |
| .center .jGrowl-closer, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-popdests, .site-foot-logo, .site-footerlinks, .listingnav-refine-search-submit, .agent-detail-email, .about-btn, .home-btn-moreprops, .error-msg { | |
| display: block !important; | |
| text-align: center; | |
| } | |
| .site-global, .listingnav-misc, .listingnav-next, .listing-detail-price { | |
| float: right; | |
| text-align: right; | |
| } | |
| /* | |
| ## Spacing | |
| Visually semantic helper classes to add spacing. Measurements correspond to baseline grid and gutter size. | |
| */ | |
| /* | |
| ### Spacing: Padding | |
| Add space to a box with padding. Measurements correspond to baseline grid, so the sizes available are: | |
| - (none): default, padding line-height minus font-size. ex `space-in-top` | |
| - half: half of the above. ex `space-in-half-vertical` | |
| - 3q: default padding plus half of default padding. ex `space-3q-top` | |
| - x2: double default padding. ex `space-in-x2-top` | |
| - font: font-size. ex `space-in-font-horizontal` | |
| - lead: line-height. ex `space-in-lead-bottom` | |
| - leadhalf: half of line height. ex `space-in-leadhalf-top` | |
| - leadx2: twice the above. ex `space-in-leadx2-bottom` | |
| - gutter: 20px or line-height. ex `space-in-gutter-left` | |
| - gutterhalf: 10px or half of line-height. ex `space-in-gutterhalf-horizontal` | |
| - gutterx2: twice the above. ex `space-in-gutterx2-right` | |
| Placeholder names are `space-in-{unit}-{position}`. | |
| <div class="space-in-all">Space in all</div> | |
| */ | |
| .input, | |
| .select, | |
| .textarea, | |
| button, .pages-link, .js-autocomplete td { | |
| padding: 0.28125em; | |
| } | |
| .pages-prev, .pages-next, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .listingnav-btn, .listingnav-btn-refine-search-submit, .listing-detail-btn-share, .listing-detail-btn-rmx, .agent-detail-email, .agent-brand-btn, .about-btn, .home-btn-moreprops, .error-btn, .error-btn-alt, .listingnav-refine-search-title, .listingnav-sort-menu-title { | |
| padding-top: 0.28125em; | |
| } | |
| .pages-prev, .pages-next, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .listingnav-btn, .listingnav-btn-refine-search-submit, .listing-detail-btn-share, .listing-detail-btn-rmx, .agent-detail-email, .agent-brand-btn, .about-btn, .home-btn-moreprops, .error-btn, .error-btn-alt, .listingnav-refine-search-title, .listingnav-sort-menu-title { | |
| padding-bottom: 0.28125em; | |
| } | |
| .site-popdests-title, | |
| .site-popdests-list, | |
| .site-popdests-item { | |
| padding-left: 0.28125em; | |
| } | |
| .site-popdests-title, | |
| .site-popdests-list, | |
| .site-popdests-item { | |
| padding-right: 0.28125em; | |
| } | |
| .mainnav-menu-link { | |
| padding-top: 0.84375em; | |
| } | |
| .mainnav-menu-link { | |
| padding-bottom: 0.84375em; | |
| } | |
| .jGrowl, .jGrowl-notification, | |
| .jGrowl-closer, .mainnav-menu-link, .listingnav-refine-search-list, .listingnav-sort-menu-body { | |
| padding: 1em; | |
| } | |
| .carousel-wrap { | |
| padding-top: 1em; | |
| } | |
| .carousel-wrap { | |
| padding-bottom: 1em; | |
| } | |
| .rtf pre, | |
| pre.rtf, .mainnav-search, .listingnav-refine-search-title, .listingnav-sort-menu-title, .listingnav-refine-search-price input { | |
| padding-left: 1em; | |
| } | |
| .rtf pre, | |
| pre.rtf, .mainnav-search, .listingnav-refine-search-title, .listingnav-sort-menu-title { | |
| padding-right: 1em; | |
| } | |
| th, td, .jGrowl-closer, .agentnav-refine-location { | |
| padding: 0.5625em; | |
| } | |
| .rtf pre, | |
| pre.rtf, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .mainnav-search, .listingnav, .listing-detail-media-nav a, .agent-detail-email, .home-btn-moreprops, .listingnav-refine-search-submit, .listing-detail-share-menu { | |
| padding-top: 0.5625em; | |
| } | |
| .rtf pre, | |
| pre.rtf, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .mainnav-search, .listingnav, .listing-detail-media-nav a, .agent-detail-email, .home-btn-moreprops { | |
| padding-bottom: 0.5625em; | |
| } | |
| .rtf code, | |
| code.rtf, .listing-detail-share-menu, .mainnav-search-input, .agentnav-refine-input, .listing-pane-price { | |
| padding-left: 0.5625em; | |
| } | |
| .rtf code, | |
| code.rtf, .listing-detail-share-menu, .listing-pane-address-2, .agent-brand { | |
| padding-right: 0.5625em; | |
| } | |
| .site-head, .site-foot, .site-popdests, .agent-brand { | |
| padding-top: 1.5625em; | |
| } | |
| .site-head, .site-foot, .site-popdests, .agent-brand { | |
| padding-bottom: 1.5625em; | |
| } | |
| .agent-brand { | |
| padding-left: 1.5625em; | |
| } | |
| .pages-prev, .pages-next, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .listingnav-btn, .listingnav-btn-refine-search-submit, .listing-detail-btn-share, .listing-detail-btn-rmx, .agent-detail-email, .agent-brand-btn, .about-btn, .home-btn-moreprops, .error-btn, .error-btn-alt { | |
| padding-left: 0.78125em; | |
| } | |
| .pages-prev, .pages-next, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .listingnav-btn, .listingnav-btn-refine-search-submit, .listing-detail-btn-share, .listing-detail-btn-rmx, .agent-detail-email, .agent-brand-btn, .about-btn, .home-btn-moreprops, .error-btn, .error-btn-alt { | |
| padding-right: 0.78125em; | |
| } | |
| .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .listing-detail-btn-share { | |
| padding-left: 3.125em; | |
| } | |
| .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .listing-detail-btn-share { | |
| padding-right: 3.125em; | |
| } | |
| .modal, .listing-detail-media { | |
| padding: 1.5625em; | |
| } | |
| .listingnav-btn, .agent-detail-email, .rtf ul, | |
| .rtf ol, | |
| ul.rtf, | |
| ol.rtf, .agentnav-refine, .agent-detail-contact { | |
| padding-left: 1.5625em; | |
| } | |
| .listingnav-btn, .agent-detail-email, .agent-detail-office { | |
| padding-right: 1.5625em; | |
| } | |
| .mainnav-search-btn, .agentnav-refine-btn, .getintouch-body .input { | |
| padding: 0; | |
| } | |
| /* | |
| ### Spacing: Margins | |
| Add space to a box with margins. Measurements correspond to baseline grid, so the sizes available are: | |
| - (none): default, margin line-height minus font-size. ex `space-out-top` | |
| - half: half of the above. ex `space-out-half-vertical` | |
| - 3q: default margin plus half of default margin. ex `space-3q-top` | |
| - x2: double default margin. ex `space-out-x2-top` | |
| - font: font-size. ex `space-out-font-horizontal` | |
| - lead: line-height. ex `space-out-lead-bottom` | |
| - leadhalf: half of line height. ex `space-out-leadhalf-top` | |
| - leadx2: twice the above. ex `space-out-leadx2-bottom` | |
| - gutter: 20px or line-height. ex `space-out-gutter-left` | |
| - gutterhalf: 10px or half of line-height. ex `space-out-gutterhalf-horizontal` | |
| - gutterx2: twice the above. ex `space-out-gutterx2-right` | |
| Placeholder names are `space-out-{unit}-{position}`. | |
| <div class="space-out-all">Space out all</div> | |
| */ | |
| .listingnav-refine-search-list label, .listingnav-refine-search-list .label, .getintouch-message label, .reqmoreinfo-list label, .reqmoreinfo-list .label { | |
| margin-bottom: 0.28125em; | |
| } | |
| .choice { | |
| margin-right: 0.28125em; | |
| } | |
| .js-autocomplete { | |
| margin-top: 1.125em; | |
| } | |
| .listing-pane-media, .listing-detail-head, .listing-detail-desc-title, .agent-pane-media { | |
| margin-bottom: 1em; | |
| } | |
| .jGrowl-notification, | |
| .jGrowl-closer, .agent-detail-head, .listingnav-refine-search, .listingnav-sort-menu, .listing-detail-share-menu, .agentnav-refine-location, .agent-brand-btn { | |
| margin-top: 0.5625em; | |
| } | |
| .jGrowl-notification, | |
| .jGrowl-closer, .agent-detail-head, .site-global-text, .listingnav-refine-search-list li, .error-title, .error-text, .error-text-alt, .error-btn, .error-btn-alt, .getintouch-title, .reqmoreinfo-title, .reqmoreinfo-list li, .sendtofriend-title, .sendtofriend-body li { | |
| margin-bottom: 0.5625em; | |
| } | |
| span.error-text-alt, .agentnav-refine-link-icon { | |
| margin-left: 0.5625em; | |
| } | |
| span.error-text-alt { | |
| margin-right: 0.5625em; | |
| } | |
| .mainnav { | |
| margin-top: 3.125em; | |
| } | |
| .pages, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .listing-detail-stats, .listing-detail-share, .about-text, .home-btn-moreprops { | |
| margin-top: 1.5625em; | |
| } | |
| .pages, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .listing-detail-stats, .listing-detail-share, .about-text, .rtf h1, | |
| h1.rtf, | |
| .rtf h2, | |
| h2.rtf, | |
| .rtf h3, | |
| h3.rtf, | |
| .rtf h4, | |
| h4.rtf, | |
| .rtf h5, | |
| h5.rtf, | |
| .rtf h6, | |
| h6.rtf, | |
| .rtf table, | |
| .rtf address, | |
| .rtf pre, | |
| table.rtf, | |
| address.rtf, | |
| pre.rtf, | |
| .rtf p, | |
| .rtf ol, | |
| .rtf ul, | |
| .rtf dl, | |
| .rtf blockquote, | |
| p.rtf, | |
| ol.rtf, | |
| ul.rtf, | |
| dl.rtf, | |
| blockquote.rtf, .site-disclaimer, .site-foot-logo, .site-global, .site-footerlinks, .listing-detail-desc, .listing-detail-btn-rmx, .agentnav, .agent-detail-office, .agent-detail-contact, .reqmoreinfo-opts { | |
| margin-bottom: 1.5625em; | |
| } | |
| .results-tile-preview { | |
| margin: 0.78125em; | |
| } | |
| .rtf dd, | |
| dd.rtf { | |
| margin-left: 1.5625em; | |
| } | |
| .listing-detail-stats li, .listing-detail-desc-text { | |
| margin-right: 1.5625em; | |
| } | |
| .rtf blockquote ol, | |
| .rtf blockquote ul, | |
| blockquote.rtf ol, | |
| blockquote.rtf ul { | |
| margin: 0; | |
| } | |
| /* | |
| ### Spacing: Expand | |
| These classes use negative margins to pull a box left and right. | |
| - Placeholder `expand-gutter` | |
| - Placeholder `expand-gutterhalf` | |
| - Placeholder `expand-font` | |
| - Placeholder `expand-padding` | |
| - Placeholder `expand-paddinghalf` | |
| <div class="expand-gutter">Expand gutter</div> | |
| */ | |
| .results-tile { | |
| margin-left: -0.78125em; | |
| margin-right: -0.78125em; | |
| } | |
| /* | |
| ### Spacing: Faux Gutters | |
| The placeholders `faux-{unit}` use a matching negative margin and padding value to create gutters while maintaining the current position of the content. | |
| - Placeholder `faux-gutter` | |
| - Placeholder `faux-font` | |
| - Placeholder `faux-padding` | |
| <div class="faux-gutter">Faux gutter</div> | |
| */ | |
| /* | |
| ## Widths | |
| These width classes can be added to grid units, inline units, and other items to dictate the amount of horizontal space each should occupy. | |
| */ | |
| /* | |
| ### Widths: Fluid | |
| These width clases can be added to grid units, inline units, and other items to dictate the amount of horizontal space each should occupy. | |
| - Placeholder `width-{x}of{y}` | |
| */ | |
| input, | |
| select, | |
| textarea, .listing-pane-media, .agent-pane-media, .agent-detail-media, .modal-backdrop, .listingnav-btn-refine-search-submit, .reqmoreinfo-name, .reqmoreinfo-message { | |
| width: 100%; | |
| } | |
| .mainnav-menu-item, .listingnav-prev, .listingnav-next, .agent-detail-office, .agent-detail-contact, .reqmoreinfo-askaquestion, .reqmoreinfo-requestashowing, .reqmoreinfo-email, .reqmoreinfo-phone { | |
| width: 50%; | |
| } | |
| .site-disclaimer, .site-global, .mainnav-menu, .listings-tile-item, .agent-detail-email, .agent-brand, .agent-brand-media { | |
| width: 33.33333%; | |
| } | |
| .mainnav-search, .listing-detail-desc, .listing-detail-btn-rmx { | |
| width: 66.66667%; | |
| } | |
| .listing-detail-media-nav li, .agents-tile-item { | |
| width: 25%; | |
| } | |
| .about-btn { | |
| width: 40%; | |
| } | |
| .mainnav { | |
| width: 60%; | |
| } | |
| .pages-list { | |
| width: 80%; | |
| } | |
| .listingnav-refine, .listingnav-page { | |
| width: 16.66667%; | |
| } | |
| .listingnav-back { | |
| width: 83.33333%; | |
| } | |
| .pages-prev, .pages-next, .mainnav-search-btn, .agentnav-refine-btn { | |
| width: 10%; | |
| } | |
| .home-btn-moreprops { | |
| width: 30%; | |
| } | |
| .mainnav-search-input, .agentnav-refine-input { | |
| width: 90%; | |
| } | |
| .sendtofriend-body label, .sendtofriend-body .label { | |
| width: 41.66667%; | |
| } | |
| .sendtofriend-body .field { | |
| width: 58.33333%; | |
| } | |
| .listingnav-refine-search-minprice, .listingnav-refine-search-maxprice { | |
| width: 46.15385%; | |
| } | |
| /* | |
| ## Grid | |
| Fluid grid for module & content layout | |
| - Placeholder `grid-row` | |
| - Placeholder `grid-unit` | |
| <div class="grid-row"> | |
| <div class="grid-unit">Grid unit</div> | |
| <div class="grid-unit">Grid unit</div> | |
| <div class="grid-unit">Grid unit</div> | |
| <div> | |
| */ | |
| .agent-brand-media, .js-tabs-nav, .site-disclaimer, .site-global, .mainnav-search, .mainnav-menu, .mainnav-menu-item, .results-tile-item, .listingnav-refine, .listingnav-title, .listingnav-misc, .listingnav-back, .listingnav-page, .listingnav-prev, .listingnav-next, .listing-detail-title, .listing-detail-price, .listing-detail-stats, .listing-detail-stats li, .listing-detail-share, .listing-detail-desc, .agentnav-title, .agentnav-location, .agent-detail-office, .agent-detail-contact, .agent-brand, .reqmoreinfo-askaquestion, .reqmoreinfo-requestashowing, .reqmoreinfo-name, .reqmoreinfo-email, .reqmoreinfo-phone, .reqmoreinfo-message, .sendtofriend-body label, .sendtofriend-body .label, .sendtofriend-body .field { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /* | |
| ### Grid: Spacing | |
| Formatting classes for adding spacing to fluid grids. These use negative margins on the row to ensure proper alignment of the gutters. | |
| */ | |
| /* | |
| ### Grid: First and Last | |
| Helper classes to specify the first and last grid unit in a row. Not required, but may be necessary in some use cases. | |
| - Placeholder `grid-first` | |
| - Placeholder `grid-last` | |
| - Placeholder `grid-right` | |
| */ | |
| .agent-brand-body { | |
| float: none; | |
| width: auto; | |
| } | |
| .mainnav, .listingnav-page, .listing-detail-share, .agentnav-location, .agent-brand { | |
| float: right !important; | |
| } | |
| /* | |
| ## Module Structure | |
| Establishes naming conventions for module classes. Provides structural defaults for modules. | |
| - Placeholder `mod` | |
| - Placeholder `mod-head` | |
| - Placeholder `mod-title` | |
| - Placeholder `mod-subtitle` | |
| - Placeholder `mod-body` | |
| - Placeholder `mod-foot` | |
| */ | |
| /* | |
| ## Icons | |
| Use the placeholder `icon` to to make icons inline-block items with centered vertical alignment. The icon sprite and stylesheet are otherwise generated by Compass. To find and use the icon you need, view the [icons folder on Google Drive](https://docs.google.com/a/dominionenterprises.com/folder/d/0B2AZzpwkJUswZ1U0a0FSMkZhUXc/edit) and note the file name of the specific icon. Then remove the file extension from the file name and prepend `icon-`. So the file `star-red.png` corresponds to the class `icon-star-red`. | |
| - Placeholder `icon` | |
| - Placeholder `icon-text` | |
| - Generated placeholders for each icon | |
| <span class="icon icon-logo">Icon</span> | |
| <span class="msg info">The sprite is generated by Compass as a magic stylesheet.</span> | |
| */ | |
| .icon-mappin, .icon-mappin-cluster, .modal-close, .mainnav-search-icon, .agentnav-refine-link-icon, .agentnav-refine-icon, .agent-detail-prev, .agent-detail-next { | |
| display: inline-block; | |
| vertical-align: middle; | |
| background-repeat: no-repeat; | |
| overflow: hidden; | |
| } | |
| /* | |
| ### Icons Generated Sprite | |
| */ | |
| .agent-detail-prev, .slider-nav:hover .gallery-prev, .agent-detail-next, .slider-nav:hover .gallery-next, .agentnav-refine-link-icon, .modal-close, .reqmoreinfo-opts .icon, .site-logo, .site-foot-logo, .icon-mappin-cluster, .icon-mappin, .agentnav-refine-icon, .mainnav-search-icon { | |
| background: url('/resources/img/icons.png?v=1366316740') no-repeat; | |
| } | |
| .agent-detail-prev, .slider-nav:hover .gallery-prev { | |
| background-position: -168px -81px; | |
| width: 23px; | |
| height: 35px; | |
| } | |
| .agent-detail-next, .slider-nav:hover .gallery-next { | |
| background-position: -145px -81px; | |
| width: 23px; | |
| height: 35px; | |
| } | |
| .agentnav-refine-link-icon { | |
| background-position: 0 -81px; | |
| width: 11px; | |
| height: 8px; | |
| } | |
| .modal-close { | |
| background-position: -101px -81px; | |
| width: 25px; | |
| height: 25px; | |
| } | |
| .reqmoreinfo-opts .icon { | |
| background-position: -65px -81px; | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .site-logo { | |
| background-position: 0 -116px; | |
| width: 218px; | |
| height: 97px; | |
| } | |
| .site-foot-logo { | |
| background-position: -86px 0; | |
| width: 61px; | |
| height: 81px; | |
| } | |
| .icon-mappin-cluster { | |
| background-position: 0 0; | |
| width: 43px; | |
| height: 38px; | |
| } | |
| .icon-mappin { | |
| background-position: -43px 0; | |
| width: 43px; | |
| height: 38px; | |
| } | |
| .agentnav-refine-icon { | |
| background-position: -27px -81px; | |
| width: 12px; | |
| height: 12px; | |
| } | |
| .mainnav-search-icon { | |
| background-position: -51px -81px; | |
| width: 14px; | |
| height: 15px; | |
| } | |
| /* | |
| ### Misc Icons | |
| */ | |
| /* | |
| ## Buttons | |
| Establishes naming conventions for button classes. Provides structural defaults for buttons. | |
| - Placeholder `button` | |
| <button class="button">Example Button</button> | |
| */ | |
| .pages-prev, .pages-next, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .site-global-btn, .listingnav-btn, .listingnav-btn-refine-search-submit, .listing-detail-btn-share, .listing-detail-btn-rmx, .agent-detail-email, .agent-brand-btn, .about-btn, .home-btn-moreprops, .error-btn, .error-btn-alt { | |
| position: relative; | |
| -webkit-background-clip: border; | |
| -moz-background-clip: border; | |
| background-clip: border-box; | |
| display: inline-block; | |
| min-width: auto; | |
| max-width: 100%; | |
| min-height: 1.5625em; | |
| border: 0 solid transparent; | |
| text-align: center; | |
| white-space: nowrap; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| } | |
| .pages-prev:before, .pages-next:before, .getintouch-submit-btn:before, .reqmoreinfo-submit-btn:before, .sendtofriend-submit-btn:before, .site-global-btn:before, .listingnav-btn:before, .listingnav-btn-refine-search-submit:before, .listing-detail-btn-share:before, .listing-detail-btn-rmx:before, .agent-detail-email:before, .agent-brand-btn:before, .about-btn:before, .home-btn-moreprops:before, .error-btn:before, .error-btn-alt:before { | |
| z-index: 1; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .pages-prev:focus:before, .pages-next:focus:before, .getintouch-submit-btn:focus:before, .reqmoreinfo-submit-btn:focus:before, .sendtofriend-submit-btn:focus:before, .site-global-btn:focus:before, .listingnav-btn:focus:before, .listingnav-btn-refine-search-submit:focus:before, .listing-detail-btn-share:focus:before, .listing-detail-btn-rmx:focus:before, .agent-detail-email:focus:before, .agent-brand-btn:focus:before, .about-btn:focus:before, .home-btn-moreprops:focus:before, .error-btn:focus:before, .error-btn-alt:focus:before, .pages-prev:active:before, .pages-next:active:before, .getintouch-submit-btn:active:before, .reqmoreinfo-submit-btn:active:before, .sendtofriend-submit-btn:active:before, .site-global-btn:active:before, .listingnav-btn:active:before, .listingnav-btn-refine-search-submit:active:before, .listing-detail-btn-share:active:before, .listing-detail-btn-rmx:active:before, .agent-detail-email:active:before, .agent-brand-btn:active:before, .about-btn:active:before, .home-btn-moreprops:active:before, .error-btn:active:before, .error-btn-alt:active:before, .pages-prev:hover:before, .pages-next:hover:before, .getintouch-submit-btn:hover:before, .reqmoreinfo-submit-btn:hover:before, .sendtofriend-submit-btn:hover:before, .site-global-btn:hover:before, .listingnav-btn:hover:before, .listingnav-btn-refine-search-submit:hover:before, .listing-detail-btn-share:hover:before, .listing-detail-btn-rmx:hover:before, .agent-detail-email:hover:before, .agent-brand-btn:hover:before, .about-btn:hover:before, .home-btn-moreprops:hover:before, .error-btn:hover:before, .error-btn-alt:hover:before { | |
| background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP67wAAAkcBQlPnxL0AAAAASUVORK5CYII='); | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| .pages-prev:disabled:before, .pages-next:disabled:before, .getintouch-submit-btn:disabled:before, .reqmoreinfo-submit-btn:disabled:before, .sendtofriend-submit-btn:disabled:before, .site-global-btn:disabled:before, .listingnav-btn:disabled:before, .listingnav-btn-refine-search-submit:disabled:before, .listing-detail-btn-share:disabled:before, .listing-detail-btn-rmx:disabled:before, .agent-detail-email:disabled:before, .agent-brand-btn:disabled:before, .about-btn:disabled:before, .home-btn-moreprops:disabled:before, .error-btn:disabled:before, .error-btn-alt:disabled:before, .disabled.pages-prev:before, .disabled.pages-next:before, .disabled.getintouch-submit-btn:before, .disabled.reqmoreinfo-submit-btn:before, .disabled.sendtofriend-submit-btn:before, .disabled.site-global-btn:before, .disabled.listingnav-btn:before, .disabled.listingnav-btn-refine-search-submit:before, .disabled.listing-detail-btn-share:before, .disabled.listing-detail-btn-rmx:before, .disabled.agent-detail-email:before, .disabled.agent-brand-btn:before, .disabled.about-btn:before, .disabled.home-btn-moreprops:before, .disabled.error-btn:before, .disabled.error-btn-alt:before { | |
| background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNicAAAAEkAQ3iJiXoAAAAASUVORK5CYII='); | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .listingnav-btn-refine-search-submit, .listing-detail-btn-rmx { | |
| display: block; | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| /* | |
| ## UI | |
| User interface modules. | |
| */ | |
| /* | |
| ### Tabs | |
| Establishes naming conventions for tab classes. Provides structural defaults for tabs. | |
| */ | |
| .js-tabs-nav { | |
| position: relative; | |
| } | |
| /* | |
| ## Pagination | |
| Establishes naming conventions for pagination classes. Provides formatting defaults for pagination. | |
| <ol class="pages-list"> | |
| <li class="pages-item"> | |
| <a href="#" class="pages-link">1</a> | |
| </li> | |
| <li class="pages-item"> | |
| <a href="#" class="pages-link">2</a> | |
| </li> | |
| <li class="pages-item"> | |
| <a href="#" class="pages-link">3</a> | |
| </li> | |
| </ol> | |
| */ | |
| .pages { | |
| clear: both; | |
| } | |
| .pages-list { | |
| text-rendering: optimizeLegibility; | |
| text-align: center; | |
| } | |
| .pages-link.active { | |
| border-bottom: 1px solid; | |
| } | |
| .pages-alpha .pages-link { | |
| padding-left: 0; | |
| } | |
| .pages-prev, .pages-next { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| /* | |
| ## Dialogs & Modals | |
| Establishes naming conventions for modal/dialog classes. Provides formatting defaults for modals. | |
| <article class="modal" style="display:block;"> | |
| <header class="modal-head"> | |
| <h1 class="modal-title">Title</h1> | |
| <a href="#" class="modal-close">close</a> | |
| </header> | |
| <div class="modal-body"> | |
| Test body content for dialogs and modals. | |
| </div> | |
| <footer class="modal-foot"> | |
| <a href="#" class="btn btn-skin btn-1">Test Button</a> in modal foot | |
| </footer> | |
| </article> | |
| <div class="modal-backdrop"></div> | |
| */ | |
| .modal-backdrop { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| z-index: 998; | |
| background-color: #000; | |
| } | |
| .modal { | |
| position: absolute; | |
| max-width: 75%; | |
| z-index: 999; | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| } | |
| .modal-body { | |
| position: relative; | |
| overflow: visible; | |
| overflow-x: hidden; | |
| overflow-y: visible; | |
| } | |
| .modal-foot { | |
| text-align: center; | |
| } | |
| /* | |
| ## Dropdown | |
| This is forked from [Twitter Bootstrap Dropdown](http://twitter.github.com/bootstrap/javascript.html#dropdowns). | |
| <div class="dropdown"> | |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown toggle</a> | |
| <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> | |
| <li>...</li> | |
| </ul> | |
| </div> | |
| <div class="dropdown open"> | |
| <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown toggle</a> | |
| <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> | |
| <li>...</li> | |
| </ul> | |
| </div> | |
| */ | |
| .dropdown { | |
| position: relative; | |
| } | |
| .dropdown-menu { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-background-clip: padding; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| position: absolute !important; | |
| top: 100%; | |
| left: 0; | |
| min-width: 100%; | |
| } | |
| .dropdown-menu.dropdown-right { | |
| left: auto; | |
| right: 0; | |
| } | |
| .dropdown-menu.drop-up { | |
| top: auto; | |
| bottom: 100%; | |
| } | |
| .open > .dropdown-menu { | |
| display: block; | |
| } | |
| .open, .open > .dropdown-toggle, .open > .dropdown-menu { | |
| z-index: 98; | |
| } | |
| /* | |
| ### jGrowl Plugin | |
| <div id="jGrowl" class="center jGrowl" style="display:block;position:static;margin:0!important;"> | |
| <div class="jGrowl-notification"></div> | |
| <div class="jGrowl-notification highlight ui-corner-all notification" style="display:block;"> | |
| <div class="jGrowl-close">×</div> | |
| <div class="jGrowl-header">Test jGrowl Header</div> | |
| <div class="jGrowl-message"> | |
| <div class="message"> | |
| Test jGrowl message | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| */ | |
| .jGrowl { | |
| z-index: 9999; | |
| } | |
| .jGrowl-notification, | |
| .jGrowl-closer { | |
| display: none; | |
| width: 420px; | |
| } | |
| .jGrowl-notification { | |
| min-height: 50px; | |
| } | |
| .jGrowl-header { | |
| font-weight: bold; | |
| } | |
| .jGrowl-close { | |
| float: right; | |
| cursor: pointer; | |
| z-index: 99; | |
| } | |
| .jGrowl-closer { | |
| position: absolute; | |
| left: -10000px; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| .jGrowl { | |
| position: absolute; | |
| } | |
| body > .jGrowl { | |
| position: fixed; | |
| } | |
| .jGrowl.top-left { | |
| left: 0; | |
| top: 0; | |
| } | |
| .jGrowl.top-right { | |
| right: 0; | |
| top: 0; | |
| } | |
| .jGrowl.bottom-left { | |
| left: 0; | |
| bottom: 0; | |
| } | |
| .jGrowl.bottom-right { | |
| right: 0; | |
| bottom: 0; | |
| } | |
| .jGrowl.center { | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -210px; | |
| margin-top: -50px; | |
| width: 420px; | |
| } | |
| .center .jGrowl-notification, | |
| .center .jGrowl-closer { | |
| text-align: left; | |
| } | |
| @media print { | |
| .jGrowl { | |
| display: none; | |
| } | |
| } | |
| /* | |
| ## Messages | |
| Establishes naming conventions for message classes. Provides structural defaults for messages. | |
| - Placeholder `message` | |
| <div class="message">Message</div> | |
| */ | |
| /* | |
| ### Dialogs & Modals | |
| Establishes naming conventions for modal/dialog classes. Provides formatting defaults for modals. | |
| */ | |
| /* | |
| ### Tooltips | |
| Establishes naming conventions for tooltip classes. Provides structural defaults for tooltip. | |
| */ | |
| /* | |
| ## States | |
| States are a type of interaction cue. They visually indicate the state of a UI element or message. This section establishes naming conventions for state classes. Provides formatting defaults for states. | |
| */ | |
| /* | |
| ### Success or Valid | |
| Use the classes `success` for success messages or `valid` form fields. Can be used to indicate that an action attached to a UI element has successfully been completed or that data entered has been saved, etc. | |
| - Placeholder `success` | |
| - Placeholder `success-text` | |
| <span class="success">Success text</span> | |
| */ | |
| /* | |
| ### Normal or Info | |
| Use the class `info` for normal/informative messages that have no particular priority, form fields, etc. | |
| - Placeholder `info` | |
| - Placeholder `info-text` | |
| <span class="info">Normal / info text</span> | |
| */ | |
| /* | |
| ### Alert or Highlight | |
| Use the class `alert` for messages with warning level priority. Can also be used to indicate a UI element is highlighted, for example, the current date in a datepicker. | |
| - Placeholder `alert` | |
| - Placeholder `alert-text` | |
| <span class="alert">Alert / highlight text</span> | |
| */ | |
| /* | |
| ### Warning | |
| Use the class `warning` for messages with warning level priority. | |
| - Placeholder `warning` | |
| - Placeholder `warning-text` | |
| <span class="warning">Warning text</span> | |
| */ | |
| /* | |
| ### Error, Invalid, or Important | |
| Use the class `error` for messages with error level priority or `invalid` for form fields with errors. Can also use the class `important` for important text. | |
| - Placeholder `error` | |
| - Placeholder `error-text` | |
| <span class="error">Error text</span> | |
| */ | |
| .js-field-invalid label, .js-field-invalid .label { | |
| color: #a43538; | |
| } | |
| /* | |
| ### Inverse or Disabled | |
| Use the class `inverse` for normal/informative messages that have no particular priority, but should use an inverted color scheme. Use `disabled` to indicate the action attached to a UI element is not currently available. | |
| - Placeholder `inverse` | |
| - Placeholder `inverse-text` | |
| - Class `disabled` | |
| <span class="inverse">Inverse / disabled text</span> | |
| */ | |
| .jGrowl-notification, | |
| .jGrowl-closer { | |
| color: white; | |
| background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGMyfgoAAVQBGwzinUYAAAAASUVORK5CYII='); | |
| background: rgba(51, 51, 51, 0.9); | |
| border: 1px solid #333333; | |
| -webkit-box-shadow: inset 0 0 5px rgba(51, 51, 51, 0.25); | |
| -moz-box-shadow: inset 0 0 5px rgba(51, 51, 51, 0.25); | |
| box-shadow: inset 0 0 5px rgba(51, 51, 51, 0.25); | |
| } | |
| .disabled, | |
| *:disabled, | |
| .lt-ie9 .disabled { | |
| opacity: 0.65; | |
| } | |
| .disabled, | |
| *:disabled, | |
| .lt-ie9 .disabled, | |
| .active, | |
| *:active, | |
| .lt-ie9 .active { | |
| cursor: default; | |
| } | |
| /* | |
| ## Rich Text | |
| Content module for rich text blocks. Provides readable text formatting. To use, add the class `richtext` to the element you wish to format or to its parent. | |
| */ | |
| /* | |
| ### Rich Text: Resets | |
| Set overflow to help prevent WYSIWYG HTML from breaking layout. | |
| */ | |
| .rtf { | |
| overflow: hidden; | |
| } | |
| /* | |
| ### Rich Text: Headings | |
| Format headings `h1` through `h6` according to heading styles. | |
| <div class="rtf"> | |
| <h1>Heading 1</h1> | |
| <h2>Heading 2</h2> | |
| <h3>Heading 3</h3> | |
| <h4>Heading 4</h4> | |
| <h5>Heading 5</h5> | |
| <h6>Heading 6</h6> | |
| </div> | |
| */ | |
| /* | |
| ### Rich Text: Vertical Spacing | |
| Add bottom margins to block-level elements such as tables and paragraphs. | |
| */ | |
| /* | |
| ### Rich Text: Horizontal Spacing | |
| Set maximum width of ideal line length for blocks of text such as headings, lists, and blockquotes. Try to enforce color. | |
| */ | |
| .rtf p, | |
| .rtf ol, | |
| .rtf ul, | |
| .rtf dl, | |
| .rtf blockquote, | |
| p.rtf, | |
| ol.rtf, | |
| ul.rtf, | |
| dl.rtf, | |
| blockquote.rtf { | |
| max-width: 50em; | |
| word-spacing: 1px; | |
| } | |
| /* | |
| ### Rich Text: Paragraph | |
| Paragraphs will have a bottom margin, maximum line width, and can optionally indent successive paragraphs. Add the class `cols` for CSS3 columns. | |
| <div class="rtf"> | |
| <p class="cols">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p> | |
| <p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p> | |
| </div> | |
| */ | |
| .rtf .cols, | |
| .rtf.cols { | |
| max-width: 100%; | |
| -webkit-column-count: 2; | |
| -moz-column-count: 2; | |
| -ms-column-count: 2; | |
| -o-column-count: 2; | |
| column-count: 2; | |
| -webkit-column-gap: 3.125em; | |
| -moz-column-gap: 3.125em; | |
| -ms-column-gap: 3.125em; | |
| -o-column-gap: 3.125em; | |
| column-gap: 3.125em; | |
| } | |
| /* | |
| ### Rich Text: Lists | |
| Add bullets back to lists and set left padding. | |
| <ol class="rtf"> | |
| <li>List item</li> | |
| <li> | |
| <ul> | |
| <li>List item</li> | |
| <li>List item</li> | |
| </ul> | |
| </li> | |
| <li>List item</li> | |
| </ol> | |
| */ | |
| .rtf ul, | |
| ul.rtf { | |
| list-style-type: disc; | |
| } | |
| .rtf ol, | |
| ol.rtf { | |
| list-style-type: decimal; | |
| } | |
| .rtf li ol, | |
| .rtf li ul { | |
| margin-bottom: 0; | |
| } | |
| /* | |
| ### Rich Text: Data lists | |
| Add styles to data/definition lists. | |
| <div class="rtf"> | |
| <dl> | |
| <dt>Key</dt> | |
| <dd>Value</dd> | |
| </dl> | |
| </div> | |
| */ | |
| .rtf dt, | |
| dt.rtf { | |
| font-weight: bold; | |
| } | |
| /* | |
| ### Rich Text: Blockquotes | |
| Format block quotes with margins and quotation marks. | |
| <div class="rtf"> | |
| <blockquote>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </blockquote> | |
| </div> | |
| */ | |
| .rtf blockquote, | |
| blockquote.rtf { | |
| position: relative; | |
| } | |
| .rtf blockquote:before, | |
| .rtf blockquote:after, | |
| blockquote.rtf:before, | |
| blockquote.rtf:after { | |
| position: absolute; | |
| height: 3.125em; | |
| line-height: 3.125em; | |
| color: white; | |
| font-family: "Helvetica", "Verdana", sans-serif; | |
| font-size: 3.125em; | |
| } | |
| .rtf blockquote:before, | |
| blockquote.rtf:before { | |
| top: 0; | |
| left: -1.5625em; | |
| content: '\201C'; | |
| } | |
| .rtf blockquote:after, | |
| blockquote.rtf:after { | |
| bottom: -1.5625em; | |
| right: -1.5625em; | |
| content: '\201D'; | |
| } | |
| .rtf blockquote small, | |
| blockquote.rtf small { | |
| display: block; | |
| text-align: right; | |
| } | |
| .rtf blockquote small:before, | |
| blockquote.rtf small:before { | |
| content: "\2014 \0020"; | |
| } | |
| /* | |
| ### Rich Text: Multimedia | |
| Format multimedia next to text by aligning it to the top of text. | |
| */ | |
| .rtf .media, | |
| .media.rtf { | |
| position: relative; | |
| top: 0.5625em; | |
| } | |
| /* | |
| ### Rich Text: Links | |
| Optionally add icons next to links to indicate their destination. These are presumed to be plain text links. | |
| */ | |
| /* | |
| ### Rich Text: Inline Miscellany | |
| Format abbreviations, definitions, and highlighted items with inline styles. | |
| <div class="rtf"> | |
| The quick <dfn title="Tooltip">brown</dfn> fox jumped over the lazy dog. | |
| </div> | |
| */ | |
| .rtf abbr[title], | |
| .rtf dfn[title], | |
| abbr[title].rtf, | |
| dfn[title].rtf { | |
| border-bottom: 1px dotted; | |
| } | |
| /* | |
| ### Rich Text: Code and Pre | |
| Optionally add box around code and preformatted text. | |
| <div class="rtf"> | |
| <pre>The quick brown fox jumped over the lazy dog.</pre> | |
| </div> | |
| */ | |
| .rtf code, | |
| code.rtf, | |
| .rtf pre, | |
| pre.rtf { | |
| border-width: 1px; | |
| border-style: solid; | |
| } | |
| /* | |
| ### Rich Text: Ellipsis | |
| */ | |
| /* | |
| ## Skins | |
| */ | |
| .mainnav, .agentnav-refine-field, .getintouch-message .field, .reqmoreinfo-body .field, .sendtofriend-body .field, .mainnav-search-field { | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| -ms-border-radius: 5px; | |
| -o-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| .jGrowl-notification, | |
| .jGrowl-closer, .listing-detail-btn-share, .about-btn, .home-btn-moreprops, .listing-detail-btn-share:before, .about-btn:before, .home-btn-moreprops:before, .listing-detail-btn-share:after, .about-btn:after, .home-btn-moreprops:after, .site-global-btn, .site-global-btn:before, .site-global-btn:after, .pages-prev, .pages-next, .listingnav-btn, .agent-detail-email, .error-btn, .pages-prev:before, .pages-next:before, .listingnav-btn:before, .agent-detail-email:before, .error-btn:before, .pages-prev:after, .pages-next:after, .listingnav-btn:after, .agent-detail-email:after, .error-btn:after, .listingnav-refine-search, .listingnav-sort-menu, .listing-detail-share-menu, .js-autocomplete, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .listingnav-btn-refine-search-submit, .agent-brand-btn, .getintouch-submit-btn:before, .reqmoreinfo-submit-btn:before, .sendtofriend-submit-btn:before, .listingnav-btn-refine-search-submit:before, .agent-brand-btn:before, .getintouch-submit-btn:after, .reqmoreinfo-submit-btn:after, .sendtofriend-submit-btn:after, .listingnav-btn-refine-search-submit:after, .agent-brand-btn:after, .listing-detail-btn-rmx, .listing-detail-btn-rmx:before, .listing-detail-btn-rmx:after, .agentnav-refine-location, .agentnav-refine-location:before, .agentnav-refine-location:after, .listing-detail-media, .agent-brand { | |
| -webkit-border-radius: 9px; | |
| -moz-border-radius: 9px; | |
| -ms-border-radius: 9px; | |
| -o-border-radius: 9px; | |
| border-radius: 9px; | |
| } | |
| .mainnav:before, .site-head:before, .listingnav-refine-search-title:after, .listingnav-sort-menu-title:after, .agentnav-refine-location:after, .site-foot:before { | |
| -webkit-transform: translatez(0); | |
| -moz-transform: translatez(0); | |
| -ms-transform: translatez(0); | |
| -o-transform: translatez(0); | |
| transform: translatez(0); | |
| } | |
| .mainnav:before, .site-head:before, .listingnav-refine-search-title:after, .listingnav-sort-menu-title:after, .agentnav-refine-location:after { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#ffffff, #000000); | |
| background-image: -moz-linear-gradient(#ffffff, #000000); | |
| background-image: -o-linear-gradient(#ffffff, #000000); | |
| background-image: linear-gradient(#ffffff, #000000); | |
| } | |
| .site-foot:before { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#000000, #ffffff); | |
| background-image: -moz-linear-gradient(#000000, #ffffff); | |
| background-image: -o-linear-gradient(#000000, #ffffff); | |
| background-image: linear-gradient(#000000, #ffffff); | |
| } | |
| .mainnav, .site-head { | |
| position: relative; | |
| } | |
| .mainnav:before, .site-head:before { | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .mainnav:before, .site-head:before { | |
| opacity: 0.35; | |
| } | |
| .site-foot { | |
| position: relative; | |
| } | |
| .site-foot:before { | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .site-foot:before { | |
| opacity: 0.34; | |
| } | |
| .mainnav { | |
| border: 1px solid rgba(0, 0, 0, 0.95); | |
| -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.4); | |
| -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.4); | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(0, 0, 0, 0.4); | |
| } | |
| .mainnav-menu-link:focus, .mainnav-menu-link:active, .mainnav-menu-link:hover { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjcyNzI3Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjIyMjIyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#222222, #272727, #222222); | |
| background-image: -moz-linear-gradient(#222222, #272727, #222222); | |
| background-image: -o-linear-gradient(#222222, #272727, #222222); | |
| background-image: linear-gradient(#222222, #272727, #222222); | |
| } | |
| .agentnav-refine-field, .getintouch-message .field, .reqmoreinfo-body .field, .sendtofriend-body .field, .mainnav-search-field { | |
| background-color: #2B2E31; | |
| -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.36), inset 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.09); | |
| -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.36), inset 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.09); | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.36), inset 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.09); | |
| } | |
| .listingnav { | |
| background-color: #141416; | |
| -webkit-box-shadow: inset 0 1px 0 #373738; | |
| -moz-box-shadow: inset 0 1px 0 #373738; | |
| box-shadow: inset 0 1px 0 #373738; | |
| } | |
| .listing-detail-btn-share, .about-btn, .home-btn-moreprops { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU1NjM2ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#ffffff, #55636d); | |
| background-image: -moz-linear-gradient(#ffffff, #55636d); | |
| background-image: -o-linear-gradient(#ffffff, #55636d); | |
| background-image: linear-gradient(#ffffff, #55636d); | |
| border: 4px solid rgba(153, 153, 153, 0.5); | |
| -webkit-box-shadow: inset 0 2px 0 white, 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -moz-box-shadow: inset 0 2px 0 white, 0 1px 3px rgba(0, 0, 0, 0.5); | |
| box-shadow: inset 0 2px 0 white, 0 1px 3px rgba(0, 0, 0, 0.5); | |
| -webkit-background-clip: padding; | |
| -moz-background-clip: padding; | |
| background-clip: padding-box; | |
| } | |
| .site-global-btn { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAyMDIwMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#525252, #020202); | |
| background-image: -moz-linear-gradient(#525252, #020202); | |
| background-image: -o-linear-gradient(#525252, #020202); | |
| background-image: linear-gradient(#525252, #020202); | |
| } | |
| .pages-prev, .pages-next, .listingnav-btn, .agent-detail-email, .error-btn { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyNzI3MyIvPjxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjMzkzOTM5Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMyYzJjMmMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| background-image: -moz-linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| background-image: -o-linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| background-image: linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 1px 0 rgba(102, 102, 102, 0.83); | |
| -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 1px 0 rgba(102, 102, 102, 0.83); | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 1px 0 rgba(102, 102, 102, 0.83); | |
| } | |
| .listingnav-refine-search-title, .listingnav-sort-menu-title { | |
| position: relative; | |
| } | |
| .listingnav-sort-menu-title .listingnav-refine-search-title:before, .listingnav-refine-search-title .listingnav-sort-menu-title:before, .listingnav-sort-menu-title .listingnav-refine-search-title:after, .listingnav-refine-search-title .listingnav-sort-menu-title:after, .listingnav-refine-search-title .listingnav-refine-search-title, .listingnav-sort-menu-title .listingnav-refine-search-title, .listingnav-refine-search-title .listingnav-sort-menu-title, .listingnav-sort-menu-title .listingnav-sort-menu-title { | |
| -webkit-border-radius: 8px 8px 0 0; | |
| -moz-border-radius: 8px 8px 0 0; | |
| -ms-border-radius: 8px 8px 0 0; | |
| -o-border-radius: 8px 8px 0 0; | |
| border-radius: 8px 8px 0 0; | |
| } | |
| .listingnav-refine-search-title:before, .listingnav-sort-menu-title:before, .listingnav-refine-search-title:after, .listingnav-sort-menu-title:after { | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .listingnav-refine-search-title:before, .listingnav-sort-menu-title:before { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| } | |
| .listingnav-refine-search-title:after, .listingnav-sort-menu-title:after { | |
| opacity: 0.38; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .listingnav-refine-search, .listingnav-sort-menu, .listing-detail-share-menu, .js-autocomplete { | |
| background-color: rgba(0, 0, 0, 0.88); | |
| -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6); | |
| -moz-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6); | |
| box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .results-tile-preview { | |
| position: relative; | |
| } | |
| .results-tile-preview:before { | |
| top: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| left: -2px; | |
| } | |
| .results-tile-preview:before { | |
| border: 2px solid transparent; | |
| background-color: #141416; | |
| } | |
| .results-tile-preview:focus:before, .results-tile-preview:active:before, .results-tile-preview:hover:before { | |
| border-color: #B0B0B0; | |
| } | |
| .listing-detail-media, .listing-detail-media-nav, .agent-brand { | |
| background-color: #1B1B1B; | |
| border: 1px solid #404040; | |
| } | |
| .listing-detail-media-nav a { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAyMDIwMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#444444, #020202); | |
| background-image: -moz-linear-gradient(#444444, #020202); | |
| background-image: -o-linear-gradient(#444444, #020202); | |
| background-image: linear-gradient(#444444, #020202); | |
| } | |
| .listing-detail-media-nav a:focus, .listing-detail-media-nav a:active, .listing-detail-media-nav a:hover, | |
| .listing-detail-media-nav a .active { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#000000, #262626); | |
| background-image: -moz-linear-gradient(#000000, #262626); | |
| background-image: -o-linear-gradient(#000000, #262626); | |
| background-image: linear-gradient(#000000, #262626); | |
| } | |
| .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .listingnav-btn-refine-search-submit, .agent-brand-btn { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UxODI4NSIvPjxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjZDc2MzY5Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNjZDJhMjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZjIzMjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#e18285 0%, #d76369 49%, #cd2a27 50%, #bf2321 100%); | |
| background-image: -moz-linear-gradient(#e18285 0%, #d76369 49%, #cd2a27 50%, #bf2321 100%); | |
| background-image: -o-linear-gradient(#e18285 0%, #d76369 49%, #cd2a27 50%, #bf2321 100%); | |
| background-image: linear-gradient(#e18285 0%, #d76369 49%, #cd2a27 50%, #bf2321 100%); | |
| -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); | |
| -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); | |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); | |
| } | |
| .listing-detail-btn-rmx { | |
| background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyNzI3MyIvPjxzdG9wIG9mZnNldD0iNDklIiBzdG9wLWNvbG9yPSIjMzkzOTM5Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMyYzJjMmMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); | |
| background-size: 100%; | |
| background-image: -webkit-linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| background-image: -moz-linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| background-image: -o-linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| background-image: linear-gradient(#727273 0%, #393939 49%, #2c2c2c 50%, #333333 100%); | |
| -webkit-box-shadow: 0 -1px 0 rgba(102, 102, 102, 0.83), inset 0 -1px 0 rgba(255, 255, 255, 0.34); | |
| -moz-box-shadow: 0 -1px 0 rgba(102, 102, 102, 0.83), inset 0 -1px 0 rgba(255, 255, 255, 0.34); | |
| box-shadow: 0 -1px 0 rgba(102, 102, 102, 0.83), inset 0 -1px 0 rgba(255, 255, 255, 0.34); | |
| } | |
| .listingnav-refine-search-list .field { | |
| background-color: #FFF; | |
| border: 1px solid #BDBDBD; | |
| } | |
| .site-popdests { | |
| border-top: 1px solid #2B2B2B; | |
| } | |
| .modal { | |
| background-color: #FFF; | |
| -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); | |
| -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); | |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); | |
| } | |
| .agentnav-refine-location { | |
| position: relative; | |
| } | |
| .agentnav-refine-location:before, .agentnav-refine-location:after { | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .agentnav-refine-location:before { | |
| background-color: #CCC; | |
| } | |
| .agentnav-refine-location:after { | |
| opacity: 0.25; | |
| } | |
| .agentnav-refine-field, .getintouch-message .field, .reqmoreinfo-body .field, .sendtofriend-body .field { | |
| background-color: #FFF; | |
| } | |
| /* | |
| ## Text | |
| */ | |
| .listingnav, .site-foot a, .mainnav-search-input, .pages-prev, .pages-next, .listingnav-btn, .agent-detail-email, .pages-prev:focus, .pages-next:focus, .listingnav-btn:focus, .agent-detail-email:focus, .pages-prev:active, .pages-next:active, .listingnav-btn:active, .agent-detail-email:active, .pages-prev:hover, .pages-next:hover, .listingnav-btn:hover, .agent-detail-email:hover { | |
| text-shadow: 0 -1px 0 black; | |
| } | |
| .listingnav, .site-disclaimer, .site-global-text, .site-footerlinks, .agentnav-refine-link-text { | |
| font-family: "Helvetica", "Verdana", sans-serif; | |
| } | |
| .listingnav, .site-foot a, .rtf h2, | |
| h2.rtf, .listing-detail-desc-title, .rtf h1, | |
| h1.rtf, .listing-detail-head, .agentnav-title, .agentnav-location-title, .rtf h3, | |
| h3.rtf, .listing-detail-stats, .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .listingnav-btn-refine-search-submit, .agent-brand-btn, .getintouch-submit-btn:focus, .reqmoreinfo-submit-btn:focus, .sendtofriend-submit-btn:focus, .listingnav-btn-refine-search-submit:focus, .agent-brand-btn:focus, .getintouch-submit-btn:active, .reqmoreinfo-submit-btn:active, .sendtofriend-submit-btn:active, .listingnav-btn-refine-search-submit:active, .agent-brand-btn:active, .getintouch-submit-btn:hover, .reqmoreinfo-submit-btn:hover, .sendtofriend-submit-btn:hover, .listingnav-btn-refine-search-submit:hover, .agent-brand-btn:hover, .pages-prev, .pages-next, .listingnav-btn, .agent-detail-email, .pages-prev:focus, .pages-next:focus, .listingnav-btn:focus, .agent-detail-email:focus, .pages-prev:active, .pages-next:active, .listingnav-btn:active, .agent-detail-email:active, .pages-prev:hover, .pages-next:hover, .listingnav-btn:hover, .agent-detail-email:hover, .agent-brand-name, .js-autocomplete { | |
| color: #FFF; | |
| } | |
| .mainnav-search-input, .pages-prev, .pages-next, .listingnav-btn, .agent-detail-email, .pages-prev:focus, .pages-next:focus, .listingnav-btn:focus, .agent-detail-email:focus, .pages-prev:active, .pages-next:active, .listingnav-btn:active, .agent-detail-email:active, .pages-prev:hover, .pages-next:hover, .listingnav-btn:hover, .agent-detail-email:hover, .site-disclaimer, .site-global-text, .site-footerlinks { | |
| font-size: 12px; | |
| } | |
| .listingnav, .site-global-btn, .agent-pane-body, .agent-detail-body { | |
| font-size: 13px; | |
| } | |
| .results-tile-preview, .agent-brand-office, .agent-brand-phone, .reqmoreinfo-opts { | |
| font-size: 15px; | |
| } | |
| .listingnav-refine-search-title, .listingnav-title, .listingnav-sort-menu-title, .agent-brand-name { | |
| font-size: 17px; | |
| } | |
| .rtf h2, | |
| h2.rtf, .listing-detail-desc-title, .error-text { | |
| font-size: 24px; | |
| } | |
| .rtf h1, | |
| h1.rtf, .listing-detail-head, .agentnav-title, .agentnav-location-title, .error-title, .getintouch-title, .reqmoreinfo-title, .sendtofriend-title { | |
| font-size: 32px; | |
| } | |
| .pages-link.active, .agentnav-refine-link-text, .site-footerlinks li a { | |
| color: #999999; | |
| } | |
| .mainnav-search-input { | |
| color: #B3B4B5; | |
| } | |
| .listing-detail-btn-share, .about-btn, .home-btn-moreprops, .listing-detail-btn-share:focus, .about-btn:focus, .home-btn-moreprops:focus, .listing-detail-btn-share:active, .about-btn:active, .home-btn-moreprops:active, .listing-detail-btn-share:hover, .about-btn:hover, .home-btn-moreprops:hover { | |
| color: #1C1C1D; | |
| font-size: 19px; | |
| text-transform: uppercase; | |
| text-shadow: 1px 1px 0 #fcffff; | |
| } | |
| .listingnav-refine-search-title, .listingnav-title, .listingnav-sort-menu-title { | |
| font-family: "Georgia", serif; | |
| } | |
| .rtf h3, | |
| h3.rtf, .listing-detail-stats { | |
| font-size: 20px; | |
| } | |
| .results-tile-preview { | |
| color: #D0D0D0; | |
| } | |
| .rtf h4, | |
| h4.rtf, .listing-detail-btn-rmx, .rtf h4:focus, | |
| h4.rtf:focus, .listing-detail-btn-rmx:focus, .rtf h4:active, | |
| h4.rtf:active, .listing-detail-btn-rmx:active, .rtf h4:hover, | |
| h4.rtf:hover, .listing-detail-btn-rmx:hover { | |
| text-transform: uppercase; | |
| font-size: 18px; | |
| } | |
| .modal, .listingnav-refine-search-list .field { | |
| color: #000; | |
| } | |
| .getintouch-submit-btn, .reqmoreinfo-submit-btn, .sendtofriend-submit-btn, .listingnav-btn-refine-search-submit, .agent-brand-btn, .getintouch-submit-btn:focus, .reqmoreinfo-submit-btn:focus, .sendtofriend-submit-btn:focus, .listingnav-btn-refine-search-submit:focus, .agent-brand-btn:focus, .getintouch-submit-btn:active, .reqmoreinfo-submit-btn:active, .sendtofriend-submit-btn:active, .listingnav-btn-refine-search-submit:active, .agent-brand-btn:active, .getintouch-submit-btn:hover, .reqmoreinfo-submit-btn:hover, .sendtofriend-submit-btn:hover, .listingnav-btn-refine-search-submit:hover, .agent-brand-btn:hover { | |
| font-weight: bold; | |
| text-shadow: 0 1px 0 black; | |
| } | |
| .pages-prev, .pages-next, .listingnav-btn, .agent-detail-email, .pages-prev:focus, .pages-next:focus, .listingnav-btn:focus, .agent-detail-email:focus, .pages-prev:active, .pages-next:active, .listingnav-btn:active, .agent-detail-email:active, .pages-prev:hover, .pages-next:hover, .listingnav-btn:hover, .agent-detail-email:hover { | |
| font-weight: bold; | |
| } | |
| .agent-pane-head, .agent-detail-head { | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| .agentnav-refine-link-text { | |
| border-bottom: 1px solid; | |
| } | |
| /* | |
| Layouts | |
| */ | |
| /* | |
| Other | |
| */ | |
| .body-wrap { | |
| overflow-x: hidden; | |
| } | |
| /* | |
| ## Site Layout | |
| */ | |
| .site { | |
| position: relative; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 1000px; | |
| } | |
| .site-head { | |
| min-height: 75px; | |
| } | |
| .site-logo { | |
| display: block; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .site-menu { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| z-index: 1; | |
| } | |
| .site-foot { | |
| min-height: 150px; | |
| clear: both; | |
| } | |
| /* | |
| ## Footer content | |
| */ | |
| .site-popdests { | |
| font-size: 14px; | |
| } | |
| .site-footerlinks { | |
| clear: both; | |
| } | |
| /* | |
| ## Main Navigation | |
| */ | |
| .mainnav-menu-item { | |
| text-align: center; | |
| } | |
| .mainnav-menu-item:first-child .mainnav-menu-link { | |
| position: relative; | |
| } | |
| .mainnav-menu-item:first-child .mainnav-menu-link:before, .mainnav-menu-item:first-child .mainnav-menu-link:after { | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .mainnav-menu-item:first-child .mainnav-menu-link:before { | |
| right: -1px; | |
| border-right: 1px solid rgba(255, 255, 255, 0.25); | |
| border-left: 1px solid rgba(255, 255, 255, 0.25); | |
| } | |
| .mainnav-menu-item:first-child .mainnav-menu-link:after { | |
| left: -1px; | |
| border-right: 1px solid rgba(0, 0, 0, 0.75); | |
| border-left: 1px solid rgba(0, 0, 0, 0.75); | |
| } | |
| /* | |
| ## Results | |
| */ | |
| /* | |
| ### Results Tiles | |
| */ | |
| /* | |
| ## Listings | |
| */ | |
| /* | |
| ### Listing Results Tiles | |
| */ | |
| /* | |
| ### Listing Results Nav | |
| */ | |
| .listingnav-refine-search { | |
| width: 270px; | |
| } | |
| .listingnav-sort-menu { | |
| width: 170px; | |
| text-align: left; | |
| } | |
| /* | |
| ### Listing Pane Layout | |
| */ | |
| .listing-pane { | |
| height: 310px; | |
| } | |
| .listing-pane-media { | |
| height: 236px; | |
| } | |
| .listing-pane-image { | |
| max-height: 236px; | |
| } | |
| /* | |
| ### Listing Detail Page | |
| */ | |
| .listing-detail-media-nav a { | |
| text-align: center; | |
| } | |
| .listing-detail-media-item { | |
| position: relative; | |
| height: 585px; | |
| } | |
| /* | |
| ## Agents | |
| */ | |
| /* | |
| ### Agent Results Tiles | |
| */ | |
| /* | |
| ### Agent Results Navigation | |
| */ | |
| .agentnav-refine-location { | |
| width: 325px; | |
| } | |
| /* | |
| ### Agent Pane Layout | |
| */ | |
| .agent-pane { | |
| height: 248px; | |
| } | |
| .agent-pane-media { | |
| height: 144px; | |
| } | |
| .agent-pane-image { | |
| max-height: 144px; | |
| } | |
| .agent-pane-title { | |
| font-weight: inherit; | |
| } | |
| /* | |
| ## Agent Detail Modal | |
| */ | |
| .agent-detail { | |
| width: 410px; | |
| } | |
| .agent-detail-nav > a { | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -35px; | |
| z-index: 2; | |
| } | |
| .agent-detail-prev { | |
| left: 1em; | |
| } | |
| .agent-detail-next { | |
| right: 1em; | |
| } | |
| .agent-detail-frame { | |
| z-index: 1; | |
| } | |
| .agent-detail-title { | |
| font-weight: inherit; | |
| } | |
| .agent-detail-body { | |
| text-align: left; | |
| } | |
| .agent-detail-email { | |
| clear: both; | |
| } | |
| /* | |
| ### Agent Branding (from LDP) | |
| */ | |
| /* | |
| ## About Page | |
| */ | |
| /* | |
| ## Home Page | |
| */ | |
| /* | |
| ## Error Messages | |
| */ | |
| .error-msg { | |
| width: 520px; | |
| } | |
| .error-title { | |
| text-shadow: 0 0 2px rgba(166, 166, 166, 0.85); | |
| } | |
| .error-text-alt { | |
| font-style: italic; | |
| opacity: 0.75; | |
| } | |
| .error-btn-alt { | |
| border-bottom: 1px solid; | |
| } | |
| .js-field-required label:after, .js-field-required .label:after { | |
| content: "*"; | |
| } | |
| .nophoto { | |
| background: transparent url('/resources/img/nophoto.jpg?v=1366047829') 50% 50% no-repeat; | |
| } | |
| /* | |
| ### Get In Touch Form | |
| "Get in touch" form on ADP | |
| */ | |
| .getintouch { | |
| width: 480px; | |
| } | |
| .getintouch-body p { | |
| line-height: 2; | |
| } | |
| .getintouch-body p:first-of-type { | |
| line-height: 3.5; | |
| } | |
| .getintouch-body .input { | |
| position: relative; | |
| border-bottom: 1px solid; | |
| width: 65%; | |
| } | |
| .getintouch-requiredtext { | |
| position: absolute; | |
| top: 25px; | |
| left: 0; | |
| right: 0; | |
| } | |
| /* | |
| ### Request More Information Form | |
| "Request More Information" form on LDP | |
| */ | |
| .reqmoreinfo { | |
| width: 480px; | |
| } | |
| .reqmoreinfo-opts .icon { | |
| display: block; | |
| } | |
| .reqmoreinfo-email { | |
| border-right: 4px solid transparent; | |
| } | |
| .reqmoreinfo-phone { | |
| border-left: 4px solid transparent; | |
| } | |
| /* | |
| ### Send to friend Form | |
| "Send to friend" form on LDP | |
| */ | |
| .sendtofriend { | |
| width: 480px; | |
| } | |
| .sendtofriend-optionaltext { | |
| text-align: left !important; | |
| } | |
| /* | |
| ## Temp | |
| */ | |
| .js-autocomplete { | |
| z-index: 99999; | |
| } | |
| .js-autocomplete .js-temp td { | |
| background-color: #444 !important; | |
| } | |
| .js-autocomplete .scroll .scrollbar { | |
| right: 6px !important; | |
| } | |
| #js-detail-photosview { | |
| position: relative; | |
| height: 741px; | |
| } | |
| .js-homepage-slider { | |
| position: relative; | |
| height: 660px; | |
| } | |
| /* | |
| ## Temp Carousel | |
| */ | |
| .slider-nav { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| left: 0; | |
| z-index: 4; | |
| } | |
| .slider-next { | |
| position: absolute; | |
| right: 0; | |
| } | |
| .slider-prev { | |
| position: absolute; | |
| left: 0; | |
| } | |
| .slider-nav:hover .gallery-next { | |
| right: 13px; | |
| } | |
| .slider-nav:hover .gallery-prev { | |
| left: 13px; | |
| } | |
| .carousel-prev, | |
| .carousel-next { | |
| display: none; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -13px; | |
| z-index: 2; | |
| } | |
| .carousel-prev { | |
| left: 0; | |
| } | |
| .carousel-next { | |
| right: 0; | |
| } | |
| .carousel-prev-image, | |
| .carousel-next-image { | |
| top: 13px; | |
| bottom: 13px; | |
| min-width: 17px; | |
| min-height: 26px; | |
| } | |
| .carousel-prev-image { | |
| right: 55%; | |
| } | |
| .carousel-next-image { | |
| left: 55%; | |
| } | |
| .carousel-caption { | |
| position: relative; | |
| } | |
| .carousel-wrap { | |
| overflow-x: auto; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment