@charset "UTF-8";
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden] {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

a:focus {
  outline: thin dotted;
}
a:active, a:hover {
  outline: 0;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: none;
}
q:before, q:after {
  content: '';
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

dl,
dt,
dd,
menu,
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

form {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button,
input {
  line-height: normal;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  font-weight: normal;
}

/*
 * clearfix     used project wide to clear floats and create a new formatting context
 * usage      @include clearfix-me(<empty|overflow|facebook|micro|stubborn>)
 * $clearfix-method sets default method
 */
.ad300x250, .ad300x100, .ad160x600, .ad728x90, .ad976x32, .ad650x30, .ad300x250flex, .main, .pager {
  overflow: hidden;
}

.line .lastCol, .media > .mediaBody {
  display: table-cell;
  vertical-align: top;
  width: 10000px !important;
}

.line:before, .media:before, .box:before, .box .boxHead:before,
.box .boxFoot:before, .form .field:before, .content > section:before,
.container:before, .line:after, .media:after, .box:after, .box .boxHead:after,
.box .boxFoot:after, .form .field:after, .content > section:after,
.container:after {
  content: '';
  display: table;
}
.line:after, .media:after, .box:after, .box .boxHead:after,
.box .boxFoot:after, .form .field:after, .content > section:after,
.container:after {
  clear: both;
}

/*doc
---
title: Hide Things
name: hide
category: Layout
author: Fiona
---

Various ways to hide things.

Class                    | Description
-------------------------|-----------------------
`hideText`               | Use this when you only need to hide the text.
`hideFully`              | Use this to hide a content entirely. This also hides it from screen readers.
`hideVisually`           | This hides content but leaves screenreaders able to read it.
`hideVisually.focusable` | Hide content but it allow it to be focused on. ???
`hideOnWide`             | This content will be hidden on pages greater than or equal to 1144px (that is 1128 + 16p for a scrollbar)
`hideOnNarrow`           | This content will be hidden on pages less than 1144px (that is 1128 + 16p for a scrollbar)
*/
@media \0screen\,screen\9 {
  .hideOnNarrow {
    display: none !important;
  }
}
@media screen and (max-width: 1143px) {
  .hideOnNarrow {
    display: none !important;
  }
}
@media screen and (min-width: 1144px) {
  .hideOnWide {
    display: none !important;
  }
}
/*doc
---
title: Float
name: float
category: Layout
author: Sarah
---

Various ways to align non text-based things. Used for block-level elements. For text, use textAlign

Class                    | Description
-------------------------|-----------------------
`floatLeft`              | Use this when you want the element to push itself to the left.
`floatRight`             | Use this when you want the element to push itself to the right.
`floatNone`          	 | Use this when you want the element not push itself in either direction.

```html_example
    <div class="box boxBasic backgroundLowlight docDesignNotes floatLeft">
      <p class="pal">I'm floating to the left!</p>
    </div>

    <div class="box boxBasic backgroundLowlight docDesignNotes floatRight">
      <p class="pal">I'm floating to the right!</p>
    </div>
    <div class="clearfix"></div>
```

*/
/*doc
---
title: ClearFix
name: clearfix
category: Layout
author: Sarah
---

Clear directly after the element to a new visual row

Class                    | Description
-------------------------|-----------------------
`clearfix`               | Use this when you want the element self-clear it's children. Likely only needed for responsive or when a float is used.

```html_example
    <div class="box boxBasic backgroundLowlight docDesignNotes floatLeft">
      <p class="pal">I need to be cleared of all charges!</p>
    </div>
    <div class="clearfix"></div>
```

*/
/**
 * Convert px to em
 *
 * @param $px - the value in pixel you want to convert
 * @param $context - the context in pixel e.g. you want to set margin on your text,
 * and font size on your text is equivalent to 14px, then your context is 14px.
 *
 * e.g. margin: pxToEm(20px, 14px);
 *
 */
/*doc
---
title: Text Alignment
category: Layout
name: textAlign
author: JD
---

#### Horizontal Alignment
Class       | Description
----------- | -----------------
`txtL`      | text align left
`txtC`      | text align center
`txtR`      | text align right


#### Vertical Alignment
Class       | Description
----------- | -----------------
`txtT`      | text align top
`txtM`      | text align midlle
`txtB`      | text align bottom


*/
/*doc
---
title: Center Horizontal
category: Layout
name: centerHorizontal
author: Vaughn Koch
---

This is used to center whole blocks, instead of text-alignment centering. The block needs some kind of width specification.
Note: IE8 requires a doctype to allow margin:auto to work properly.

```html_example
<div class="centerHorizontal cols8">The center of the universe.</div> 
```

*/
/*doc
---
title: Center Vertical
category: Layout
name: centerVertical
author: Puru Guna
link: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
---

This is used to vertically center a blocks.
<span class="typeWarning">Note: Doesn't work with IE8</span>

```html_example
<div style="height: 150px;">
  <div class="centerVertical">I am vertically centered, not in IE8 :(</div>
</div>
```

*/
/*doc
---
title: Center Horizontal (Fluid Container)
name: centerHorizontalFluidContainer
category: Layout
---
For block level element, used as the parent element when its child element need to be centered all the time. 

Class                       | Description
----------------------------|-----------------------
`positionRelative` 			| Use in pair with `centerHorizontalFluidWidth` , as the parent element.


*/
/*doc
---
title: Center Horizontal (Fluid Width)
name: centerHorizontalFluidWidth
category: Layout
---
For block level element, used when element need to be centered horizontally and vertically all the time. Note: Even thought mostly of the time, it may seem to be used for visually horizontally centered element, this is <b>different</b> from `centerHorizontal`. For text, use textAlign.

Class                        | Description
-----------------------------|-----------------------
`centerHorizontalFluidWidth` | Use this when you want the element to be centered in a container, pairing with a `position: relative` parent element. Or directly centered on the page.


```html_example
 <div class="positionRelative">
	<div class="centerHorizontalFluidWidth">
	  I'm centered!
	</div>
</div> 
```

*/
/*doc
---
title: Clickable
category: Typography
name: clickable
author: August
---


Class       | Description
----------- | -----------------
`clickable` | Make an element have a clickable (pointer) mouseover


```html_example
<div class="backgroundHighlight clickable">
  Sup, hover over me and see what happens
</div>
```

*/
/*doc
---
title: No Wrap
category: Layout
name: noWrap
author: August
---


Class       | Description
----------- | -----------------
`noWrap` 	| Force an element's text NOT to wrap to a new line.


```html_example
<div class="box boxBasic" style="width:20px;">
  <p class="noWrap">Notice how I'm wider than my parent containers width...it's sort of my thing.</p>
</div>
```

*/
/*doc
---
title: Transition
category: Interaction
name: transition
author: Tuan
---


Class                | Description
-------------------- | -----------------
`transition`            | add effect when changing from one style to another
`transitionSlow`        | longer transition duration
`transitionFast`        | shorter transition duration


```html_example
<p>Sup, hover these guys and see what happens</p>
<div class="frameSmall">
  <span class="overlayContainer hover">
    <img src="doc_assets/img/360x270_blue.png">
    <span class="overlayLowlight overlayFull hoverDisplay transition">
    You could <b>OWN</b> this cat!
    </span>
  </span>
</div>

<br><ul class="listInline lhl">
<li><div class="markerPrimary markerRound markerHover transition transitionSlow">H</div></li>
<li><div class="markerSecondary markerRound markerHover transition">M</div></li>
<li><div class="markerInverse markerRound markerHover transition transitionFast">E</div></li>
</ul><br>
```

*/
/*doc
---
title: Z-Index
category: Layout
name: z-index
author: AlexI, Tuan
---

<a href="https://zwiki.zillowgroup.net/display/Engineering/Z-index+IAB+Guidelines">From the confluence</a>

Please note that these classes are for the "global page" elements, that have semantic meaning in the page context, such as popups, navigation blocks, ads, etc. It shouldn't be used for internals of particular widget implementation, like markers on the map or z-positioning of the elements in a photoplayer. Each widget should have z-index:0 (since it's a content) and will prevent polluting page's z-axis space.

Class                           | Description
------------------------------- | -----------
`zIndexBackground`              |   -5000; For elements in the background
`zIndexMainContent`             |       0; For main content, and standard ads in place with regular content
`zIndexExpandingAd`             |    6000; For expandable ad units
`zIndexFloatingAd`              | 2001000; For over the page ads (OTP's)
`zIndexPopup`                   | 3001000; For popup Elements -- chat window, message notifications
`zIndexFloater`                 | 4001000; For non-anchored floating elements
`zIndexNavigation`              | 5001000; For expanding site navigation elements
`zIndexPageOverlay`             | 6001000; For full-page overlays

*/
/*doc
---
title: Animate
category: Interaction
name: animate
author: Sean Stopnik and Sarah Drasner
---

## Fluid Motion Components

Class                    | Description
------------------------ | -----------------
`entrance`               | Consistent animation class for an element that appears on the page.
`exit`                   | Consistent animation class for an element that disappears off of the page.
`spotlight`              | Draws attention to an element for a short amount of time. Absolutely positioned, so used with defined top and left values.


```html_example
<div class="line">
  <div class="col cols7">
    <div class="fluidMotionDemo backgroundLowlight">
      <div class="spotlight paused" style="top:60px;left:60px;"></div>
      <button class="btn btnDefault btnFullWidth trigger triggerTop">Spotlight</button>
    </div>
  </div>

  <div class="col cols7">
    <div class="fluidMotionDemo backgroundLowlight">
      <div class="fluidMotionDemoDiv backgroundInverse entrance paused"></div>
      <button class="btn btnDefault btnFullWidth trigger">Entrance</button>
    </div>
  </div>

  <div class="col lastCol">
    <div class="fluidMotionDemo backgroundLowlight">
      <div class="fluidMotionDemoDiv backgroundInverse exit paused"></div>
      <button class="btn btnDefault btnFullWidth trigger">Exit</button>
    </div>
  </div>
</div>
```

<h4 class="mvxl typeEmphasize">The following animation classes should only be used for strong points of emphasis.</h4>


```html_example
<div class="line">
  <div class="col cols7">
    <div class="fluidMotionDemo backgroundLowlight">
      <div class="fluidMotionDemoDiv backgroundInverse entranceEmphasis paused"></div>
      <button class="btn btnDefault btnFullWidth trigger">Entrance</button>
    </div>
  </div>

  <div class="col lastCol">
    <div class="fluidMotionDemo backgroundLowlight">
      <div class="fluidMotionDemoDiv backgroundInverse exitEmphasis paused"></div>
      <button class="btn btnDefault btnFullWidth trigger">Exit</button>
    </div>
  </div>
</div>
```

<style>
  .fluidMotionDemo {
    float: left;
    width: 175px;
    height: 175px;
    position: relative;
  }

  .fluidMotionDemoDiv {
    width: 100px;
    height: 100px;
    margin: 20px 0 20px 38px;
  }

  .triggerTop {
    margin-top: 140px;
  }
</style>

<script>
(function($){
  var trigger = $('.trigger');

  trigger.on('click', function(e){
    e.preventDefault();
    var demoDiv = $(this).prev('.fluidMotionDemoDiv'),
        spotlight = $(this).prev('.spotlight');

    $(demoDiv).removeClass('paused');
    $(demoDiv).addClass('running');

    $(spotlight).removeClass('paused');
    $(spotlight).addClass('running');

    $(demoDiv).on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
      $(demoDiv).removeClass('running');
      $(demoDiv).addClass('paused');
    });

    $(spotlight).on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
      $(spotlight).removeClass('running');
      $(spotlight).addClass('paused');
    });
  });
})(jQuery);
</script>


## Animation Utilities
soon to be deprecated, with the exception of accelerate

Class                    | Description
------------------------ | -----------------
`accelerate`             | Hardware-accelerates an animation element to help with GPU compositing and reduce repaints. Does not work on SVG attributes (things inside the SVG DOM cannot be hardware accelerated). This is already added to all of the animation utilities below.
`paused`                 | Used to set an animation to paused so that it may be triggered later
`running`                | Default state for animations, but used to retrigger an animation event that has already played
`animate`                | Needed for all of the animations below
`animateFadeIn`          | Fades in item
`animateFadeOut`         | Fades out item
`animateSlideUp`         | Slides item up
`animateSlideRight`      | Slides item right
`animateSlideDown`       | Slides item down
`animateSlideLeft`       | Slides item left
`animateFadeInSlideUp`   | Fades in and Slides up item
`animateRotate180`       | Rotates item 180 degrees
`animateRotate360`       | Rotates item 360 degrees
`animateRotateInfinite`  | Rotates item FOREVER!
`animateDelayed`         | Delay the animation



```html_example
<div class="col">
  <div class="demoContainer">
    <img class="animate animateFadeIn" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateFadeIn">Fade In</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateSlideUp" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateSlideUp">Slide Up</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateSlideRight" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateSlideRight">Slide Right</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateSlideDown" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateSlideDown">Slide Down</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateSlideLeft" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateSlideLeft">Slide Left</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateFadeInSlideUp" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateFadeInSlideUp">Fade &amp; Slide</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateRotate180" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateRotate180">Rotate 180</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateRotate360" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateRotate360">Rotate 360</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateRotateInfinite" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateRotateInfinite">Spin</button>
  </div>

  <div class="demoContainer">
    <img class="animate animateFadeOut" src="doc_assets/img/100x100.png" alt="">
    <button class="btn btnDefault btnFullWidth animateUtilTrigger" name="animateFadeOut">Fade Out</button>
  </div>
</div>
```

<style>
  .demoContainer {
    float: left;
    width: 100px;
    margin: 20px;
  }

  .demoContainer .btnFullWidth {
    padding: .5em 0;
    margin-top: 5px;
  }
</style>

<script>
(function($){
	var button = $('.animateUtilTrigger');

  button.on('click', function(){
    var box = $(this).prev('img'),
        name = $(this).attr('name');

    box.removeClass(name);
    setTimeout(function(){
      box.addClass(name)
    }, 1);
  });
})(jQuery);
</script>
*/
.animate {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  transform: translateZ(0);
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  perspective: 1000px;
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  backface-visibility: hidden;
}

.hideVisually, .ratingGroup li span, .ratingGroup input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
}

.hideVisually.focusable:active, .ratingGroup li span.focusable:active, .ratingGroup input.focusable:active,
.hideVisually.focusable:focus,
.ratingGroup li span.focusable:focus,
.ratingGroup input.focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.hideText {
  background-color: transparent;
  border: 0;
  overflow: hidden;
}

.hideText:before {
  display: block;
  width: 0;
  height: 100%;
  content: '';
}

.hideFully {
  display: none !important;
  visibility: hidden;
}

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.floatNone {
  float: none !important;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.txtC, table .txtC,
table tr .txtC {
  text-align: center;
}

.txtL, table .txtL,
table tr .txtL {
  text-align: left;
}

.txtR, table .txtR,
table tr .txtR {
  text-align: right;
}

.txtT, table .txtT,
table tr .txtT {
  vertical-align: top;
}

.txtB, table .txtB,
table tr .txtB {
  vertical-align: bottom;
}

.txtM, table .txtM,
table tr .txtM {
  vertical-align: middle;
}

.centerHorizontal {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

.centerVertical {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.centerVertical:parent {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.centerHorizontalFluidWidth {
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.positionRelative {
  position: relative;
}

.clickable {
  cursor: pointer;
}

.noWrap {
  white-space: nowrap;
}

.transition {
  transition: all all 400ms ease ease-in-out;
}

.transitionSlow {
  -webkit-transition-duration: 800ms;
  -moz-transition-duration: 800ms;
  -o-transition-duration: 800ms;
  transition-duration: 800ms;
}

.transitionFast {
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
}

.zIndexBackground {
  z-index: -5000 !important;
}

.zIndexMainContent {
  z-index: 0 !important;
}

.zIndexExpandingAd {
  z-index: 6000 !important;
}

.zIndexFloatingAd {
  z-index: 2001000 !important;
}

.zIndexPopup {
  z-index: 3001000 !important;
}

.zIndexFloater {
  z-index: 4001000 !important;
}

.zIndexNavigation {
  z-index: 5001000 !important;
}

.zIndexPageOverlay {
  z-index: 6001000 !important;
}

.accelerate, .exit, .exitEmphasis {
  transform: translateZ(0);
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  perspective: 1000px;
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  backface-visibility: hidden;
}

.spotlight {
  border-radius: 50%;
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(157, 252, 178, 0) 0%, #9dfcb2 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-radial-gradient(center, ellipse, rgba(157, 252, 178, 0) 0%, #9dfcb2 100%);
  background: radial-gradient(ellipse at center, rgba(157, 252, 178, 0) 0%, #9dfcb2 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009dfcb2', endColorstr='#9dfcb2',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 1000000;
  /* if you set initial value on the component you don't have to waste keyframes */
  opacity: 0.6;
  transform-origin: 50% 50%;
  transform: scale(0);
  -ms-transform: scale(0);
  /* animation */
  animation: spotlight 1.25s 0s 3 cubic-bezier(0.19, 1, 0.22, 1) both;
  -ms-animation: spotlight 1.25s 0s 3 cubic-bezier(0.19, 1, 0.22, 1) both;
  -moz-animation: spotlight 1.25s 0s 3 cubic-bezier(0.19, 1, 0.22, 1) both;
  -webkit-animation: spotlight 1.25s 0s 3 cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes spotlight {
  100% {
    opacity: 0;
    transform: scale(4);
    -ms-transform: scale(4);
  }
}

.entrance {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(0.8);
  -ms-transform: scale(0.8);
  /* animation */
  animation: entrance 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  -ms-animation: entrance 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  -moz-animation: entrance 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  -webkit-animation: entrance 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes entrance {
  100% {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
  }
}

.entranceEmphasis {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: scale(0.7);
  -ms-transform: scale(0.7);
  /* animation */
  animation: entrance 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -ms-animation: entrance 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -moz-animation: entrance 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -webkit-animation: entrance 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes entrance {
  100% {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
  }
}

.exit {
  /* animation */
  animation: exit 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  -ms-animation: exit 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  -moz-animation: exit 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) both;
  -webkit-animation: exit 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}

@keyframes exit {
  100% {
    opacity: 0;
    transform: scale(0.95);
    -ms-transform: scale(0.95);
  }
}

.exitEmphasis {
  /* animation */
  animation: exit 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  -ms-animation: exit 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  -moz-animation: exit 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  -webkit-animation: exit 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}

@keyframes exit {
  100% {
    opacity: 0;
    transform: scale(0.7);
    -ms-transform: scale(0.7);
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes slideUp {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes slideRight {
  0% {
    transform: translateX(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideRight {
  0% {
    transform: translateX(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes slideDown {
  0% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    transform: translateX(30px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  0% {
    transform: translateX(30px);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes rotate180 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes rotate180 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@-webkit-keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateInfinite {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateInfinite {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.accelerate, .exit, .exitEmphasis {
  transform: translateZ(0);
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  perspective: 1000px;
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  backface-visibility: hidden;
}

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}

.running {
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
}

.animateDelayed {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.animateFadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.animateFadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.animateSlideUp {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}

.animateSlideRight {
  -webkit-animation-name: slideRight;
  animation-name: slideRight;
}

.animateSlideDown {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}

.animateSlideLeft {
  -webkit-animation-name: slideLeft;
  animation-name: slideLeft;
}

.animateFadeInSlideUp {
  -webkit-animation-name: fadeIn, slideUp;
  animation-name: fadeIn, slideUp;
}

.animateRotate180 {
  -webkit-animation-name: rotate180;
  animation-name: rotate180;
}

.animateRotate360 {
  -webkit-animation-name: rotate360;
  animation-name: rotate360;
}

.animateRotateInfinite {
  -webkit-animation: rotateInfinite 2s linear infinite;
  animation: rotateInfinite 2s linear infinite;
}

/*doc
---
title: Whitespace
name: whitespace
category: Layout
author: Fiona
---

If you need to tweak elements by using margin or padding, use the following classes rather than adding to the CSS file.
The classes are constructed by specifying `<type><location><size>` (see table and example below).

```html_example
<p class="paxl">I have a lot of padding</p>
<p class="man">I have no margin :(</p>
```

  Type       |            | Description
--------     | ----------  | -----------
p            | padding     | Space on the inside of the element
m            | margin      | Space on the outside of the element
**Location** |             |
a            | all         | Adds spacing on all sides of the element
h            | horizontal  | Adds spacing to the left and right sides of the element
v            | vertical    | Adds spacing to the top and bottom sides of the element
t            | top         | Adds spacing to the top side of the element
l            | left        | Adds spacing to the left side of the element
b            | bottom      | Adds spacing to the bottom side of the element
r            | right       | Adds spacing to the right side of the element
**Size**     |             |
n            | none        | Sets the spacing to 0
xs           | x-small     | Adds an x-small amount of spacing (2px)
s            | small       | Adds a small amount of spacing (5px)
m            | medium      | Adds a medium amount of spacing (10px)
l            | large       | Adds a large amount of spacing (20px)
xl           | x-large     | Adds an x-large amount of spacing (25px)
xxl          | xx-large    | Adds an xx-large amount of spacing (30px)

*/
p, .headingDoubleSub, .media, .ad300x250, .ad300x100, .ad160x600, .ad728x90, .ad976x32, .ad650x30, .ad300x250flex, ol,
ul, .form, .form .field, .inlineTextDivider, .table, .alert, .photoPlayer {
  margin-top: 5px;
  margin-bottom: 5px;
}

.box {
  margin-top: 20px;
  margin-bottom: 20px;
}

table h1, table h2, table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl, table blockquote, table .media, table pre {
  margin-left: 0;
  margin-right: 0;
}

.pan {
  padding: 0 !important;
}

.man {
  margin: 0 !important;
}

.paxs {
  padding: 2px !important;
}

.maxs {
  margin: 2px !important;
}

.pas {
  padding: 5px !important;
}

.mas {
  margin: 5px !important;
}

.pam {
  padding: 10px !important;
}

.mam {
  margin: 10px !important;
}

.pal {
  padding: 20px !important;
}

.mal {
  margin: 20px !important;
}

.paxl {
  padding: 25px !important;
}

.maxl {
  margin: 25px !important;
}

.paxxl {
  padding: 30px !important;
}

.maxxl {
  margin: 30px !important;
}

.pvn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mvn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pvxs {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.mvxs {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

.pvs {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.mvs {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.pvm {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.mvm {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.pvl {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.mvl {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.pvxl {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.mvxl {
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.pvxxl {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.mvxxl {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.phn {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.mhn {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.phxs {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.mhxs {
  margin-left: 2px !important;
  margin-right: 2px !important;
}

.phs {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.mhs {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.phm {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.mhm {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

.phl {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.mhl {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.phxl {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

.mhxl {
  margin-left: 25px !important;
  margin-right: 25px !important;
}

.phxxl {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

.mhxxl {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

.ptn {
  padding-top: 0 !important;
}

.mtn {
  margin-top: 0 !important;
}

.ptxs {
  padding-top: 2px !important;
}

.mtxs {
  margin-top: 2px !important;
}

.pts {
  padding-top: 5px !important;
}

.mts {
  margin-top: 5px !important;
}

.ptm {
  padding-top: 10px !important;
}

.mtm {
  margin-top: 10px !important;
}

.ptl {
  padding-top: 20px !important;
}

.mtl {
  margin-top: 20px !important;
}

.ptxl {
  padding-top: 25px !important;
}

.mtxl {
  margin-top: 25px !important;
}

.ptxxl {
  padding-top: 30px !important;
}

.mtxxl {
  margin-top: 30px !important;
}

.prn {
  padding-right: 0 !important;
}

.mrn {
  margin-right: 0 !important;
}

.prxs {
  padding-right: 2px !important;
}

.mrxs {
  margin-right: 2px !important;
}

.prs {
  padding-right: 5px !important;
}

.mrs {
  margin-right: 5px !important;
}

.prm {
  padding-right: 10px !important;
}

.mrm {
  margin-right: 10px !important;
}

.prl {
  padding-right: 20px !important;
}

.mrl {
  margin-right: 20px !important;
}

.prxl {
  padding-right: 25px !important;
}

.mrxl {
  margin-right: 25px !important;
}

.prxxl {
  padding-right: 30px !important;
}

.mrxxl {
  margin-right: 30px !important;
}

.pbn {
  padding-bottom: 0 !important;
}

.mbn {
  margin-bottom: 0 !important;
}

.pbxs {
  padding-bottom: 2px !important;
}

.mbxs {
  margin-bottom: 2px !important;
}

.pbs {
  padding-bottom: 5px !important;
}

.mbs {
  margin-bottom: 5px !important;
}

.pbm {
  padding-bottom: 10px !important;
}

.mbm {
  margin-bottom: 10px !important;
}

.pbl {
  padding-bottom: 20px !important;
}

.mbl {
  margin-bottom: 20px !important;
}

.pbxl {
  padding-bottom: 25px !important;
}

.mbxl {
  margin-bottom: 25px !important;
}

.pbxxl {
  padding-bottom: 30px !important;
}

.mbxxl {
  margin-bottom: 30px !important;
}

.pln {
  padding-left: 0 !important;
}

.mln {
  margin-left: 0 !important;
}

.plxs {
  padding-left: 2px !important;
}

.mlxs {
  margin-left: 2px !important;
}

.pls {
  padding-left: 5px !important;
}

.mls {
  margin-left: 5px !important;
}

.plm {
  padding-left: 10px !important;
}

.mlm {
  margin-left: 10px !important;
}

.pll {
  padding-left: 20px !important;
}

.mll {
  margin-left: 20px !important;
}

.plxl {
  padding-left: 25px !important;
}

.mlxl {
  margin-left: 25px !important;
}

.plxxl {
  padding-left: 30px !important;
}

.mlxxl {
  margin-left: 30px !important;
}

/*doc

---
title: Typography
name: typography
category: Typography
author: Fiona
test: true
---

## Headings
All html headings `<h1>` through `<h6>` are available. You can also apply classes `.h1` through `.h8` to any typography element to override the default size.
(`h7` is a class that sets the `font-size` to our smallest available reading size. `h8` is a super special class that should only be used for auxiliary text such as disclaimers or credits for data sources.)

```html_example
<h1 class="h0">h0 Homepage Heading</h1>
<h1>h1.Heading</h1>
<h2>h2.Heading</h2>
<h3>h3.Heading</h3>
<h4>h4.Heading</h4>
<h5>h5.Heading</h5>
<h6>h6.Heading</h6>
<h6 class="h3">h6 with .h3</h6>
<h1 class="h7">Small text (h1 with h7)</h1>
<p class="h8">This is data is provided by the Kitten Foundation &copy; with permission, mew.</h8>
```

## Double Headings
Trulia does a lot of...interesting...stuff with header elements for SEO reasons. These classes can help you acheive some desired layouts while preserving SEO.
### Double heading two lines
```html_example
<div class="headingDouble">
  <h1>
    <span class="headingDoubleSuper">116 New Montgomery St</span>
    <span class="headingDoubleSub">San Francisco, CA 94110</span>
  </h1>
  <p>, Nob Hill</p>
</div>
```
>Hey, our default size is bigger! Yep, it is. We're trying to make our site more readable and user friendly for our primary personas. Use 14px as default when you can. h7 should be used sparingly.

### Double heading inline
```html_example
<div class="headingDouble">
  <h1 class="headingDoubleInline">
    <span>Los Angles Real Estate &amp; Homes For Sale</span>
  </h1>
  <span class="headingDoubleInline typeLowlight h1 mll">10,378 Results</span>
</div>
```

## Body copy
Trulia OOCSS uses a default `font-size` of **14px** and a default `line-height` of **21px** (yes, we're copying Bootstrap)

```html_example
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. </p>
```
*/
/*doc
---
title: Typography Contrast
parent: typography
name: typeContrast
category: Typography
author: Joe
---

These classes convey meaning through color.

```html_example
<p class="typeContrast">This type contrasts with your being.</p>
```
*/
/*doc
---
title: Typography Color
parent: typography
name: typeColor
category: Typography
author: Joe
---

These classes convey meaning through color.

```html_example
<p class="typeWarning">typeWarning</p>
<p class="typeMidlight">typeMidlight</p>
<p class="typeLowlight">typeLowlight</p>
<p class="typeHighlight">typeHighlight</p>
<p class="typeReversed backgroundHighlight">Type Reversed (note: for links, use <a class="linkTypeReversed" href="#Link">linkTypeReversed</a>)</p>
<p class="typeReversedLowlight backgroundHighlight">Type Reversed Lowlight</p>
<p class="typeContrast typeReversed backgroundHighlight">Type Contrast (use only for white text on dark background)</p>

```
*/
/*doc
---
title: Typography Emphasize
parent: typography
name: typeWeight
category: Typography
author: Nicole
---

These classes are used to emphasize or deemphasize typography elements.

```html_example
<p class="typeEmphasize">typeEmphasize</p>
<p class="typeWeightNormal">typeWeightNormal</p>
```
*/
/*doc
---
title: Typography with Qualitative Color 
parent: typography
name: typeQualitative 
category: Typography
---

We have colors that have an implied standardized meaning (good, average, and poor), 
these colors are married to maps and map indicators. To use the color with an icon disk for informative design, 
please see the [icon disks example](/icons.html#iconDisk)

```html_example
<p class="typeStrikethrough">typeStrikethrough</p>
<p class="typeGoodIndicator">typeGoodIndicator</p>
<p class="typeAverageIndicator">typeAverageIndicator</p>
<p class="typePoorIndicator">typePoorIndicator</p>
```
*/
/*doc
---
title: Typography Transform
parent: typography
name: typeTransform
category: Typography
author: JD
---

Transforms typography elements...

```html_example
<p class="typeCaps">typeCaps</p>
<p class="typeCapitalize">type capitalize</p>
<p class="typeTruncate" style="width:150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor quam nec nibh adipiscing dictum. Sed auctor tristique ligula</p>
```
 */
@font-face {
  font-family: "PostGrotesk";
  src: url("//static.trulia-cdn.com/images/fonts/PostGroteskBook_20150623/PostGrotesk-Book.eot");
  src: url("//static.trulia-cdn.com/images/fonts/PostGroteskBook_20150623/PostGrotesk-Book.eot?#iefix") format("embedded-opentype"), url("//static.trulia-cdn.com/images/fonts/PostGroteskBook_20150623/PostGrotesk-Book.woff") format("woff"), url("//static.trulia-cdn.com/images/fonts/PostGroteskBook_20150623/PostGrotesk-Book.ttf") format("truetype"), url("//static.trulia-cdn.com/images/fonts/PostGroteskBook_20150623/PostGrotesk-Book.svg#PostGroteskRegular") format("svg");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "PostGrotesk";
  src: url("//static.trulia-cdn.com/images/fonts/PostGroteskMedium//PostGrotesk-Medium.eot");
  src: url("//static.trulia-cdn.com/images/fonts/PostGroteskMedium//PostGrotesk-Medium.eot?#iefix") format("embedded-opentype"), url("//static.trulia-cdn.com/images/fonts/PostGroteskMedium//PostGrotesk-Medium.woff") format("woff"), url("//static.trulia-cdn.com/images/fonts/PostGroteskMedium//PostGrotesk-Medium.ttf") format("truetype"), url("//static.trulia-cdn.com/images/fonts/PostGroteskMedium//PostGrotesk-Medium.svg#PostGroteskBold") format("svg");
  font-weight: 600;
  font-style: normal;
}

body {
  font-size: 15px;
  line-height: 1.5;
  color: #3b4144;
}

body:not(.typeReversed) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
input,
select,
textarea,
button {
  font-family: PostGrotesk, sans-serif;
}

h1, .h1, .badgeCircle.lrg, .lrg.badgeCircleGood, .lrg.badgeCircleAverage, .lrg.badgeCirclePoor,
h2, .h2,
h3, .h3, .badgeCircle.md, .md.badgeCircleGood, .md.badgeCircleAverage, .md.badgeCirclePoor,
h4, .h4,
h5, .h5,
h6, .h6,
.h0 {
  font-weight: 300;
  font-style: normal;
}

.h0 {
  font-size: 44px;
  line-height: 1.2;
  margin: 5px 0;
}

h1,
.h1,
.badgeCircle.lrg,
.lrg.badgeCircleGood,
.lrg.badgeCircleAverage,
.lrg.badgeCirclePoor {
  font-size: 34px;
  line-height: 1.3;
  margin: 5px 0;
}

h2,
.h2 {
  font-size: 28px;
  line-height: 1.4;
  margin: 5px 0;
}

h3,
.h3,
.badgeCircle.md,
.md.badgeCircleGood,
.md.badgeCircleAverage,
.md.badgeCirclePoor {
  font-size: 24px;
  line-height: 1.4;
  margin: 5px 0;
}

h4,
.h4 {
  font-size: 20px;
  line-height: 1.4;
  margin: 5px 0;
}

h5,
.h5 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: bold;
  margin: 5px 0;
}

h6,
.h6 {
  font-size: 15px;
  line-height: 1.5;
  font-weight: bold;
  margin: 5px 0;
}

.h7, .badgeCircle.sml, .sml.badgeCircleGood, .sml.badgeCircleAverage, .sml.badgeCirclePoor {
  font-size: 13px;
  line-height: 1.4;
  margin: 5px 0;
}

.h8 {
  font-size: 10px;
  line-height: 1.2;
  margin: 0;
}

.headingDoubleSuper {
  display: block;
  clear: both;
  min-width: 10px;
}

.headingDoubleSub {
  font-size: 18px;
  display: block;
  float: left;
  font-weight: normal;
  line-height: 1.5;
  margin: 0;
}

.headingDoubleInline {
  display: inline-block;
}

pre,
code {
  font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
  font-size: 14px;
}

.typeContrast {
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.typeWarning {
  color: #e13009;
}

.typeMidlight {
  color: #fbb100;
}

.typeHighlight {
  color: #228959;
}

.typeLowlight,
.typeDeemphasize {
  color: #869099;
}

.typeReversedLowlight {
  color: rgba(255, 255, 255, 0.65);
  font-weight: bold;
}

.typeReversed {
  color: white;
  font-weight: bold;
  -webkit-font-smoothing: subpixel-rendering !important;
}

.typeWeightNormal {
  font-weight: normal !important;
}

.typeEmphasize {
  font-weight: bold !important;
}

.typeCaps {
  text-transform: uppercase;
}

.typeCapitalize {
  text-transform: capitalize;
}

.typeTruncate {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typeStrikethrough {
  text-decoration: line-through;
}

.typeGoodIndicator, a.typeGoodIndicator {
  color: #228959;
}

.typeAverageIndicator, a.typeAverageIndicator {
  color: #fbb100;
}

.typePoorIndicator, a.typePoorIndicator {
  color: #e13009;
}

/*doc
---
title: Grids
name: grid
category: Layout
author: Nicole Sullivan
---

Grids may be used to break a page into smaller content areas. They allow you to layout full pages or even content within a box. They are infinitely nestable and stackable and will always retain the correct proportions with regard to the parent container.

Class          | Description
-------------- | -----------
`line`        | Wrapper around one horizontal grouping of columns. This class takes all available width.
`cols<n>`    | All columns are a fractional width of the total horizontal space taken up by their parent .line element. The Trulia system is base 24, so you can use any value for n from 1 to 24.
`lastCol`     | For IE<=8 you must include a class lastCol on the final column in each line. This is because IE 7 & 8 do not support the last-child selector.

You should use the cols class to define the relative proportions of the different content areas. For example, if you would like something to take one third of the space available on a line use the class cols8. In the examples below we have shown the most commonly used fractional widths, but you may use any value from 1 to 24.

```html_example
<div class="line">
  <div class="col cols2">cols2</div>
  <div class="col cols3">cols3</div>
  <div class="col cols4">cols4</div>
  <div class="col cols5">cols5</div>
  <div class="col cols6">cols6</div>
  <div class="col lastCol">lastCol</div>
</div>

<div class="line">
  <div class="col cols7">cols7</div>
  <div class="col cols8">cols8</div>
  <div class="col cols9 lastCol">cols9</div>
</div>

<div class="line">
  <div class="col cols10">cols10</div>
  <div class="col cols11">cols11</div>
  <div class="col lastCol">lastCol</div>
</div>

<div class="line">
  <div class="col cols12">cols12</div>
  <div class="col cols12 lastCol">cols12</div>
</div>

<div class="line">
  <div class="col cols16">cols16</div>
  <div class="col cols8 lastCol">cols8</div>
</div>
```

##Grid inside a box

```html_example
<div class="box boxBasic boxHighlight backgroundBasic">
  <div class="boxBody">
    <p>This box is highlighted with the little shadows.</p>
    <div class="line">
      <div class="col cols8">
        <p>This is the content of the first column</p>
      </div>
      <div class="col cols16 lastCol">
        <p>This is the content of the second column</p>
      </div>
    </div>
  </div>
</div>
```

##Right column on the grid : ColExt
`colExt` permits to the `lastCol` to be positionned to the right, then there can be a space between the first columns and the last columns in that case
###ColExt without size

```html_example
<div class="line">
  <div class="col cols6">col on the left</div>
  <div class="colExt">colExt on the right widthout width</div>
</div>
```

###ColExt with size
```html_example
<div class="line">
  <div class="col cols6">col on the left</div>
  <div class="colExt cols6">colExt on the right width size 6</div>
</div>
```

##Others examples
```html_example
<div class="line">
  <div class="col cols4">
    col on the left
  </div>
  <div class="colExt cols4">
    colExt on the right width size 4
  </div>
</div>
<div class="line">
  <div class="col cols4">
    col on the left
  </div>
  <div class="colExt cols6">
    colExt on the right width size 6
  </div>
</div>
```
*/
/*doc
---
title: Responsive Grids
name: responsivegrid
category: Layout
author: Twitter Bootstrap modified by Sarah Drasner
---

This was taken directly from the bootstrap customize compile download: http://getbootstrap.com/customize/
We took the grid, and changed it to be base 24 instead of 12 to match our existing grid.
We also changed the gutter to 12px instead of 30px.
We also changed the 1200px lrg breakpoint to 1400px to account for cinema display vs desktop builds.
In the downloaded code, we used the bootstrap.css and modified all of the class names to match our camelcased namespacing, ie, .col-xs-# became .xsCol#, sm became sml, and lg became lrg.

Responsive grid markup differs from our static grid in markup and behavior, but both can live in the same space. In markup, you define a responsive grid by placing it in container-fluid, row, and can designate multiple breakpoints for different layouts depending on the viewport.
If you have an existing grid that would like to add responsive grid breakpoints to, simply add the .row class to the same containing div with .line, and add the breakpoints for other sizes to what you already have.
All grids are based on 12 grid system, specify the number of columns you want it occupy in the markup. Replace the # symbol below with the number of columns.
Divs will wrap when they are larger than 12 in a row. Last col from the non responsive grid won't apply here.
Our gutters are 12px, 6px on either side of a column.


Class                  | Description
---------------------- | -----------
`.containerFluid`      | Container that will adjust in sizing for our grid
`.row`                 | Similiar to .line, but row has negative margin on each side to compensate for gutters. You can add both .line and .row without conflicts.
`.xsCol*`              | Small devices like phones <768px in viewport.
`.smlCol*`             | Small tablets and larger phones, ≥768
`.mdCol*`              | Tablets and desktops (core desktop experience), ≥992
`.lrgCol*`             | Large desktops, cinema screens etc, ≥1400px
`.mdColOffset*`        | For each of the above sizes, you can add Offset to offset spacing before the column.
`.mdHidden`            | For each of the above sizes, you can hide the element at certain breakpoints
`.mdVisible`           | For each of the above sizes, you can show the element at certain breakpoints
`.mdVisibleInline`     | For each of the above sizes, you can show the element as display:inline; at certain breakpoints
`.mdVisibleBlock`      | For each of the above sizes, you can show the element as display:block; at certain breakpoints
`.mdVisibleInlineBlock`| For each of the above sizes, you can show the element as display:inline-block; at certain breakpoints
`.mdColPull*`          | For each of the above sizes, you can add Pull to change the column ordering to the beginning.
`.mdColPush*`          | For each of the above sizes, you can add Push to change the column ordering to the end.

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .xsCol* .mdCol* to your columns. See the example below for a better idea of how it all works.
First row shows how to stack the columns on mobile by making one full-width and the other half-width.
Second example shows columns start at 50% wide on mobile and bump up to 33.3% wide on desktop.
Third example shows columns are always 50% wide, on mobile and desktop.

```html_example
<div class="containerFluid">
  <div class="row">
    <div class="xsCol24 mdCol16">.xsCol24 .mdCol16</div>
    <div class="xsCol12 mdCol8">.xsCol12 .mdCol8</div>
  </div>

  <div class="row">
    <div class="xsCol12 mdCol8">.xsCol12 .mdCol8</div>
    <div class="xsCol12 mdCol8">.xsCol12 .mdCol8</div>
    <div class="xsCol12 mdCol8">.xsCol12 .mdCol8</div>
  </div>

  <div class="row">
    <div class="xsCol12">.xsCol12</div>
    <div class="xsCol12">.xsCol12</div>
  </div>
</div>
```

##Responsive Column Resets
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix utility class and our responsive utility classes.
Note the middle div with the extra added clearfix for only the required viewport.

```html_example
<div class="containerFluid">
  <div class="row">
    <div class="xsCol12 smlCol6">.xsCol12 .smlCol6</div>
    <div class="xsCol12 smlCol6">.xsCol12 .smlCol6</div>

    <div class="clearfix xsVisibleBlock"></div>

    <div class="xsCol12 smlCol6">.xsCol12 .smlCol6</div>
    <div class="xsCol12 smlCol6">.xsCol12 .smlCol6</div>
  </div>
</div>
```


In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

```html_example
<div class="containerFluid">
  <div class="row">
    <div class="smlCol10 mdCol12">.smlCol10 .mdCol12</div>
    <div class="smlCol10 smColOffset4 mdCol12 mdColOffset0">.smlCol10 .smColOffset4 .mdCol12 .mdColOffset0</div>
  </div>

  <div class="row">
    <div class="smlCol12 mdCol10 lrgCol12">.smlCol12 .mdCol10 .lrgCol12</div>
    <div class="smlCol12 mdCol10 mdColOffset4 lrgCol12 lrgColOffset0">.smlCol12 .mdCol10 .mdColOffset4 .lrgCol12 .lrgColOffset0</div>
  </div>
</div>

```

##Offsetting columns
Move columns to the right using .mdColOffset* classes. These classes increase the left margin of a column by * columns. For example, .mdColOffset4 moves .mdCol4 over four columns.

```html_example
<div class="containerFluid">
  <div class="row">
    <div class="mdCol8">.mdCol8</div>
    <div class="mdCol8 mdColOffset8">.mdCol8 .mdColOffset8</div>
  </div>
  <div class="row">
    <div class="mdCol6 mdColOffset6">.mdCol6 .mdColOffset6</div>
    <div class="mdCol6 mdColOffset6">.mdCol6 .mdColOffset6</div>
  </div>
  <div class="row">
    <div class="mdCol12 mdColOffset6">.mdCol12 .mdColOffset6</div>
  </div>
</div>
```

##Nesting Columns
To nest your content with the default grid, add a new .row and set of .smCol* columns within an existing .smCol* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

```html_example
<div class="containerFluid">
  <div class="row">
    <div class="smlCol18">
      Level 1: .smlCol18
      <div class="row">
        <div class="xsCol16 smlCol12">
          Level 2: .xsCol16 .smlCol12
        </div>
        <div class="xsCol8 smlCol12">
          Level 2: .xsCol8 .smlCol12
        </div>
      </div>
    </div>
  </div>
</div>
```

##Column ordering
Easily change the order of our built-in grid columns with .mdColPush* and .mdColpu* modifier classes.

```html_example
<div class="containerFluid">
  <div class="row">
    <div class="mdCol18 mdColPush6">.mdCol18 .mdColPush6</div>
    <div class="mdCol6 mdColPull18">.mdCol6 .mdColPull18</div>
  </div>
</div>
```
*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.imgResponsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.containerFluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 6px;
  padding-right: 6px;
}

.row {
  margin-left: -6px;
  margin-right: -6px;
}

.xsCol1, .smlCol1, .mdCol1, .lrgCol1, .xsCol2, .smlCol2, .mdCol2, .lrgCol2, .xsCol3, .smlCol3, .mdCol3, .lrgCol3, .xsCol4, .smlCol4, .mdCol4, .lrgCol4, .xsCol5, .smlCol5, .mdCol5, .lrgCol5, .xsCol6, .smlCol6, .mdCol6, .lrgCol6, .xsCol7, .smlCol7, .mdCol7, .lrgCol7, .xsCol8, .smlCol8, .mdCol8, .lrgCol8, .xsCol9, .smlCol9, .mdCol9, .lrgCol9, .xsCol10, .smlCol10, .mdCol10, .lrgCol10, .xsCol11, .smlCol11, .mdCol11, .lrgCol11, .xsCol12, .smlCol12, .mdCol12, .lrgCol12, .xsCol13, .smlCol13, .mdCol13, .lrgCol13, .xsCol14, .smlCol14, .mdCol14, .lrgCol14, .xsCol15, .smlCol15, .mdCol15, .lrgCol15, .xsCol16, .smlCol16, .mdCol16, .lrgCol16, .xsCol17, .smlCol17, .mdCol17, .lrgCol17, .xsCol18, .smlCol18, .mdCol18, .lrgCol18, .xsCol19, .smlCol19, .mdCol19, .lrgCol19, .xsCol20, .smlCol20, .mdCol20, .lrgCol20, .xsCol21, .smlCol21, .mdCol21, .lrgCol21, .xsCol22, .smlCol22, .mdCol22, .lrgCol22, .xsCol23, .smlCol23, .mdCol23, .lrgCol23, .xsCol24, .smlCol24, .mdCol24, .lrgCol24 {
  position: relative;
  min-height: 1px;
  padding-left: 6px;
  padding-right: 6px;
}

.xsCol1, .xsCol2, .xsCol3, .xsCol4, .xsCol5, .xsCol6, .xsCol7, .xsCol8, .xsCol9, .xsCol10, .xsCol11, .xsCol12, .xsCol13, .xsCol14, .xsCol15, .xsCol16, .xsCol17, .xsCol18, .xsCol19, .xsCol20, .xsCol21, .xsCol22, .xsCol23, .xsCol24 {
  float: left;
}

.xsCol24 {
  width: 100%;
}

.xsCol23 {
  width: 95.83333333%;
}

.xsCol22 {
  width: 91.66666667%;
}

.xsCol21 {
  width: 87.5%;
}

.xsCol20 {
  width: 83.33333333%;
}

.xsCol19 {
  width: 79.16666667%;
}

.xsCol18 {
  width: 75%;
}

.xsCol17 {
  width: 70.83333333%;
}

.xsCol16 {
  width: 66.66666667%;
}

.xsCol15 {
  width: 62.5%;
}

.xsCol14 {
  width: 58.33333333%;
}

.xsCol13 {
  width: 54.16666667%;
}

.xsCol12 {
  width: 50%;
}

.xsCol11 {
  width: 45.83333333%;
}

.xsCol10 {
  width: 41.66666667%;
}

.xsCol9 {
  width: 37.5%;
}

.xsCol8 {
  width: 33.33333333%;
}

.xsCol7 {
  width: 29.16666667%;
}

.xsCol6 {
  width: 25%;
}

.xsCol5 {
  width: 20.83333333%;
}

.xsCol4 {
  width: 16.66666667%;
}

.xsCol3 {
  width: 12.5%;
}

.xsCol2 {
  width: 8.33333333%;
}

.xsCol1 {
  width: 4.16666667%;
}

.xsColPull24 {
  right: 100%;
}

.xsColPull23 {
  right: 95.83333333%;
}

.xsColPull22 {
  right: 91.66666667%;
}

.xsColPull21 {
  right: 87.5%;
}

.xsColPull20 {
  right: 83.33333333%;
}

.xsColPull19 {
  right: 79.16666667%;
}

.xsColPull18 {
  right: 75%;
}

.xsColPull17 {
  right: 70.83333333%;
}

.xsColPull16 {
  right: 66.66666667%;
}

.xsColPull15 {
  right: 62.5%;
}

.xsColPull14 {
  right: 58.33333333%;
}

.xsColPull13 {
  right: 54.16666667%;
}

.xsColPull12 {
  right: 50%;
}

.xsColPull11 {
  right: 45.83333333%;
}

.xsColPull10 {
  right: 41.66666667%;
}

.xsColPull9 {
  right: 37.5%;
}

.xsColPull8 {
  right: 33.33333333%;
}

.xsColPull7 {
  right: 29.16666667%;
}

.xsColPull6 {
  right: 25%;
}

.xsColPull5 {
  right: 20.83333333%;
}

.xsColPull4 {
  right: 16.66666667%;
}

.xsColPull3 {
  right: 12.5%;
}

.xsColPull2 {
  right: 8.33333333%;
}

.xsColPull1 {
  right: 4.16666667%;
}

.xsColPull0 {
  right: auto;
}

.xsColPush24 {
  left: 100%;
}

.xsColPush23 {
  left: 95.83333333%;
}

.xsColPush22 {
  left: 91.66666667%;
}

.xsColPush21 {
  left: 87.5%;
}

.xsColPush20 {
  left: 83.33333333%;
}

.xsColPush19 {
  left: 79.16666667%;
}

.xsColPush18 {
  left: 75%;
}

.xsColPush17 {
  left: 70.83333333%;
}

.xsColPush16 {
  left: 66.66666667%;
}

.xsColPush15 {
  left: 62.5%;
}

.xsColPush14 {
  left: 58.33333333%;
}

.xsColPush13 {
  left: 54.16666667%;
}

.xsColPush12 {
  left: 50%;
}

.xsColPush11 {
  left: 45.83333333%;
}

.xsColPush10 {
  left: 41.66666667%;
}

.xsColPush9 {
  left: 37.5%;
}

.xsColPush8 {
  left: 33.33333333%;
}

.xsColPush7 {
  left: 29.16666667%;
}

.xsColPush6 {
  left: 25%;
}

.xsColPush5 {
  left: 20.83333333%;
}

.xsColPush4 {
  left: 16.66666667%;
}

.xsColPush3 {
  left: 12.5%;
}

.xsColPush2 {
  left: 8.33333333%;
}

.xsColPush1 {
  left: 4.16666667%;
}

.xsColPush0 {
  left: auto;
}

.xsColOffset24 {
  margin-left: 100%;
}

.xsColOffset23 {
  margin-left: 95.83333333%;
}

.xsColOffset22 {
  margin-left: 91.66666667%;
}

.xsColOffset21 {
  margin-left: 87.5%;
}

.xsColOffset20 {
  margin-left: 83.33333333%;
}

.xsColOffset19 {
  margin-left: 79.16666667%;
}

.xsColOffset18 {
  margin-left: 75%;
}

.xsColOffset17 {
  margin-left: 70.83333333%;
}

.xsColOffset16 {
  margin-left: 66.66666667%;
}

.xsColOffset15 {
  margin-left: 62.5%;
}

.xsColOffset14 {
  margin-left: 58.33333333%;
}

.xsColOffset13 {
  margin-left: 54.16666667%;
}

.xsColOffset12 {
  margin-left: 50%;
}

.xsColOffset11 {
  margin-left: 45.83333333%;
}

.xsColOffset10 {
  margin-left: 41.66666667%;
}

.xsColOffset9 {
  margin-left: 37.5%;
}

.xsColOffset8 {
  margin-left: 33.33333333%;
}

.xsColOffset7 {
  margin-left: 29.16666667%;
}

.xsColOffset6 {
  margin-left: 25%;
}

.xsColOffset5 {
  margin-left: 20.83333333%;
}

.xsColOffset4 {
  margin-left: 16.66666667%;
}

.xsColOffset3 {
  margin-left: 12.5%;
}

.xsColOffset2 {
  margin-left: 8.33333333%;
}

.xsColOffset1 {
  margin-left: 4.16666667%;
}

.xsColOffset0 {
  margin-left: 0%;
}

@media (min-width: 768px) {
  .smlCol1, .smlCol2, .smlCol3, .smlCol4, .smlCol5, .smlCol6, .smlCol7, .smlCol8, .smlCol9, .smlCol10, .smlCol11, .smlCol12, .smlCol13, .smlCol14, .smlCol15, .smlCol16, .smlCol17, .smlCol18, .smlCol19, .smlCol20, .smlCol21, .smlCol22, .smlCol23, .smlCol24 {
    float: left;
  }

  .smlCol24 {
    width: 100%;
  }

  .smlCol23 {
    width: 95.83333333%;
  }

  .smlCol22 {
    width: 91.66666667%;
  }

  .smlCol21 {
    width: 87.5%;
  }

  .smlCol20 {
    width: 83.33333333%;
  }

  .smlCol19 {
    width: 79.16666667%;
  }

  .smlCol18 {
    width: 75%;
  }

  .smlCol17 {
    width: 70.83333333%;
  }

  .smlCol16 {
    width: 66.66666667%;
  }

  .smlCol15 {
    width: 62.5%;
  }

  .smlCol14 {
    width: 58.33333333%;
  }

  .smlCol13 {
    width: 54.16666667%;
  }

  .smlCol12 {
    width: 50%;
  }

  .smlCol11 {
    width: 45.83333333%;
  }

  .smlCol10 {
    width: 41.66666667%;
  }

  .smlCol9 {
    width: 37.5%;
  }

  .smlCol8 {
    width: 33.33333333%;
  }

  .smlCol7 {
    width: 29.16666667%;
  }

  .smlCol6 {
    width: 25%;
  }

  .smlCol5 {
    width: 20.83333333%;
  }

  .smlCol4 {
    width: 16.66666667%;
  }

  .smlCol3 {
    width: 12.5%;
  }

  .smlCol2 {
    width: 8.33333333%;
  }

  .smlCol1 {
    width: 4.16666667%;
  }

  .smlColPull24 {
    right: 100%;
  }

  .smlColPull23 {
    right: 95.83333333%;
  }

  .smlColPull22 {
    right: 91.66666667%;
  }

  .smlColPull21 {
    right: 87.5%;
  }

  .smlColPull20 {
    right: 83.33333333%;
  }

  .smlColPull19 {
    right: 79.16666667%;
  }

  .smlColPull18 {
    right: 75%;
  }

  .smlColPull17 {
    right: 70.83333333%;
  }

  .smlColPull16 {
    right: 66.66666667%;
  }

  .smlColPull15 {
    right: 62.5%;
  }

  .smlColPull14 {
    right: 58.33333333%;
  }

  .smlColPull13 {
    right: 54.16666667%;
  }

  .smlColPull12 {
    right: 50%;
  }

  .smlColPull11 {
    right: 45.83333333%;
  }

  .smlColPull10 {
    right: 41.66666667%;
  }

  .smlColPull9 {
    right: 37.5%;
  }

  .smlColPull8 {
    right: 33.33333333%;
  }

  .smlColPull7 {
    right: 29.16666667%;
  }

  .smlColPull6 {
    right: 25%;
  }

  .smlColPull5 {
    right: 20.83333333%;
  }

  .smlColPull4 {
    right: 16.66666667%;
  }

  .smlColPull3 {
    right: 12.5%;
  }

  .smlColPull2 {
    right: 8.33333333%;
  }

  .smlColPull1 {
    right: 4.16666667%;
  }

  .smlColPull0 {
    right: auto;
  }

  .smlColPush24 {
    left: 100%;
  }

  .smlColPush23 {
    left: 95.83333333%;
  }

  .smlColPush22 {
    left: 91.66666667%;
  }

  .smlColPush21 {
    left: 87.5%;
  }

  .smlColPush20 {
    left: 83.33333333%;
  }

  .smlColPush19 {
    left: 79.16666667%;
  }

  .smlColPush18 {
    left: 75%;
  }

  .smlColPush17 {
    left: 70.83333333%;
  }

  .smlColPush16 {
    left: 66.66666667%;
  }

  .smlColPush15 {
    left: 62.5%;
  }

  .smlColPush14 {
    left: 58.33333333%;
  }

  .smlColPush13 {
    left: 54.16666667%;
  }

  .smlColPush12 {
    left: 50%;
  }

  .smlColPush11 {
    left: 45.83333333%;
  }

  .smlColPush10 {
    left: 41.66666667%;
  }

  .smlColPush9 {
    left: 37.5%;
  }

  .smlColPush8 {
    left: 33.33333333%;
  }

  .smlColPush7 {
    left: 29.16666667%;
  }

  .smlColPush6 {
    left: 25%;
  }

  .smlColPush5 {
    left: 20.83333333%;
  }

  .smlColPush4 {
    left: 16.66666667%;
  }

  .smlColPush3 {
    left: 12.5%;
  }

  .smlColPush2 {
    left: 8.33333333%;
  }

  .smlColPush1 {
    left: 4.16666667%;
  }

  .smlColPush0 {
    left: auto;
  }

  .smlColOffset24 {
    margin-left: 100%;
  }

  .smlColOffset23 {
    margin-left: 95.83333333%;
  }

  .smlColOffset22 {
    margin-left: 91.66666667%;
  }

  .smlColOffset21 {
    margin-left: 87.5%;
  }

  .smlColOffset20 {
    margin-left: 83.33333333%;
  }

  .smlColOffset19 {
    margin-left: 79.16666667%;
  }

  .smlColOffset18 {
    margin-left: 75%;
  }

  .smlColOffset17 {
    margin-left: 70.83333333%;
  }

  .smlColOffset16 {
    margin-left: 66.66666667%;
  }

  .smlColOffset15 {
    margin-left: 62.5%;
  }

  .smlColOffset14 {
    margin-left: 58.33333333%;
  }

  .smlColOffset13 {
    margin-left: 54.16666667%;
  }

  .smlColOffset12 {
    margin-left: 50%;
  }

  .smlColOffset11 {
    margin-left: 45.83333333%;
  }

  .smlColOffset10 {
    margin-left: 41.66666667%;
  }

  .smlColOffset9 {
    margin-left: 37.5%;
  }

  .smlColOffset8 {
    margin-left: 33.33333333%;
  }

  .smlColOffset7 {
    margin-left: 29.16666667%;
  }

  .smlColOffset6 {
    margin-left: 25%;
  }

  .smlColOffset5 {
    margin-left: 20.83333333%;
  }

  .smlColOffset4 {
    margin-left: 16.66666667%;
  }

  .smlColOffset3 {
    margin-left: 12.5%;
  }

  .smlColOffset2 {
    margin-left: 8.33333333%;
  }

  .smlColOffset1 {
    margin-left: 4.16666667%;
  }

  .smlColOffset0 {
    margin-left: 0%;
  }
}
@media (min-width: 992px) {
  .mdCol1, .mdCol2, .mdCol3, .mdCol4, .mdCol5, .mdCol6, .mdCol7, .mdCol8, .mdCol9, .mdCol10, .mdCol11, .mdCol12, .mdCol13, .mdCol14, .mdCol15, .mdCol16, .mdCol17, .mdCol18, .mdCol19, .mdCol20, .mdCol21, .mdCol22, .mdCol23, .mdCol24 {
    float: left;
  }

  .mdCol24 {
    width: 100%;
  }

  .mdCol23 {
    width: 95.83333333%;
  }

  .mdCol22 {
    width: 91.66666667%;
  }

  .mdCol21 {
    width: 87.5%;
  }

  .mdCol20 {
    width: 83.33333333%;
  }

  .mdCol19 {
    width: 79.16666667%;
  }

  .mdCol18 {
    width: 75%;
  }

  .mdCol17 {
    width: 70.83333333%;
  }

  .mdCol16 {
    width: 66.66666667%;
  }

  .mdCol15 {
    width: 62.5%;
  }

  .mdCol14 {
    width: 58.33333333%;
  }

  .mdCol13 {
    width: 54.16666667%;
  }

  .mdCol12 {
    width: 50%;
  }

  .mdCol11 {
    width: 45.83333333%;
  }

  .mdCol10 {
    width: 41.66666667%;
  }

  .mdCol9 {
    width: 37.5%;
  }

  .mdCol8 {
    width: 33.33333333%;
  }

  .mdCol7 {
    width: 29.16666667%;
  }

  .mdCol6 {
    width: 25%;
  }

  .mdCol5 {
    width: 20.83333333%;
  }

  .mdCol4 {
    width: 16.66666667%;
  }

  .mdCol3 {
    width: 12.5%;
  }

  .mdCol2 {
    width: 8.33333333%;
  }

  .mdCol1 {
    width: 4.16666667%;
  }

  .mdColPull24 {
    right: 100%;
  }

  .mdColPull23 {
    right: 95.83333333%;
  }

  .mdColPull22 {
    right: 91.66666667%;
  }

  .mdColPull21 {
    right: 87.5%;
  }

  .mdColPull20 {
    right: 83.33333333%;
  }

  .mdColPull19 {
    right: 79.16666667%;
  }

  .mdColPull18 {
    right: 75%;
  }

  .mdColPull17 {
    right: 70.83333333%;
  }

  .mdColPull16 {
    right: 66.66666667%;
  }

  .mdColPull15 {
    right: 62.5%;
  }

  .mdColPull14 {
    right: 58.33333333%;
  }

  .mdColPull13 {
    right: 54.16666667%;
  }

  .mdColPull12 {
    right: 50%;
  }

  .mdColPull11 {
    right: 45.83333333%;
  }

  .mdColPull10 {
    right: 41.66666667%;
  }

  .mdColPull9 {
    right: 37.5%;
  }

  .mdColPull8 {
    right: 33.33333333%;
  }

  .mdColPull7 {
    right: 29.16666667%;
  }

  .mdColPull6 {
    right: 25%;
  }

  .mdColPull5 {
    right: 20.83333333%;
  }

  .mdColPull4 {
    right: 16.66666667%;
  }

  .mdColPull3 {
    right: 12.5%;
  }

  .mdColPull2 {
    right: 8.33333333%;
  }

  .mdColPull1 {
    right: 4.16666667%;
  }

  .mdColPull0 {
    right: auto;
  }

  .mdColPush24 {
    left: 100%;
  }

  .mdColPush23 {
    left: 95.83333333%;
  }

  .mdColPush22 {
    left: 91.66666667%;
  }

  .mdColPush21 {
    left: 87.5%;
  }

  .mdColPush20 {
    left: 83.33333333%;
  }

  .mdColPush19 {
    left: 79.16666667%;
  }

  .mdColPush18 {
    left: 75%;
  }

  .mdColPush17 {
    left: 70.83333333%;
  }

  .mdColPush16 {
    left: 66.66666667%;
  }

  .mdColPush15 {
    left: 62.5%;
  }

  .mdColPush14 {
    left: 58.33333333%;
  }

  .mdColPush13 {
    left: 54.16666667%;
  }

  .mdColPush12 {
    left: 50%;
  }

  .mdColPush11 {
    left: 45.83333333%;
  }

  .mdColPush10 {
    left: 41.66666667%;
  }

  .mdColPush9 {
    left: 37.5%;
  }

  .mdColPush8 {
    left: 33.33333333%;
  }

  .mdColPush7 {
    left: 29.16666667%;
  }

  .mdColPush6 {
    left: 25%;
  }

  .mdColPush5 {
    left: 20.83333333%;
  }

  .mdColPush4 {
    left: 16.66666667%;
  }

  .mdColPush3 {
    left: 12.5%;
  }

  .mdColPush2 {
    left: 8.33333333%;
  }

  .mdColPush1 {
    left: 4.16666667%;
  }

  .mdColPush0 {
    left: auto;
  }

  .mdColOffset24 {
    margin-left: 100%;
  }

  .mdColOffset23 {
    margin-left: 95.83333333%;
  }

  .mdColOffset22 {
    margin-left: 91.66666667%;
  }

  .mdColOffset21 {
    margin-left: 87.5%;
  }

  .mdColOffset20 {
    margin-left: 83.33333333%;
  }

  .mdColOffset19 {
    margin-left: 79.16666667%;
  }

  .mdColOffset18 {
    margin-left: 75%;
  }

  .mdColOffset17 {
    margin-left: 70.83333333%;
  }

  .mdColOffset16 {
    margin-left: 66.66666667%;
  }

  .mdColOffset15 {
    margin-left: 62.5%;
  }

  .mdColOffset14 {
    margin-left: 58.33333333%;
  }

  .mdColOffset13 {
    margin-left: 54.16666667%;
  }

  .mdColOffset12 {
    margin-left: 50%;
  }

  .mdColOffset11 {
    margin-left: 45.83333333%;
  }

  .mdColOffset10 {
    margin-left: 41.66666667%;
  }

  .mdColOffset9 {
    margin-left: 37.5%;
  }

  .mdColOffset8 {
    margin-left: 33.33333333%;
  }

  .mdColOffset7 {
    margin-left: 29.16666667%;
  }

  .mdColOffset6 {
    margin-left: 25%;
  }

  .mdColOffset5 {
    margin-left: 20.83333333%;
  }

  .mdColOffset4 {
    margin-left: 16.66666667%;
  }

  .mdColOffset3 {
    margin-left: 12.5%;
  }

  .mdColOffset2 {
    margin-left: 8.33333333%;
  }

  .mdColOffset1 {
    margin-left: 4.16666667%;
  }

  .mdColOffset0 {
    margin-left: 0%;
  }
}
@media (min-width: 1400px) {
  .lrgCol1, .lrgCol2, .lrgCol3, .lrgCol4, .lrgCol5, .lrgCol6, .lrgCol7, .lrgCol8, .lrgCol9, .lrgCol10, .lrgCol11, .lrgCol12, .lrgCol13, .lrgCol14, .lrgCol15, .lrgCol16, .lrgCol17, .lrgCol18, .lrgCol19, .lrgCol20, .lrgCol21, .lrgCol22, .lrgCol23, .lrgCol24 {
    float: left;
  }

  .lrgCol24 {
    width: 100%;
  }

  .lrgCol23 {
    width: 95.83333333%;
  }

  .lrgCol22 {
    width: 91.66666667%;
  }

  .lrgCol21 {
    width: 87.5%;
  }

  .lrgCol20 {
    width: 83.33333333%;
  }

  .lrgCol19 {
    width: 79.16666667%;
  }

  .lrgCol18 {
    width: 75%;
  }

  .lrgCol17 {
    width: 70.83333333%;
  }

  .lrgCol16 {
    width: 66.66666667%;
  }

  .lrgCol15 {
    width: 62.5%;
  }

  .lrgCol14 {
    width: 58.33333333%;
  }

  .lrgCol13 {
    width: 54.16666667%;
  }

  .lrgCol12 {
    width: 50%;
  }

  .lrgCol11 {
    width: 45.83333333%;
  }

  .lrgCol10 {
    width: 41.66666667%;
  }

  .lrgCol9 {
    width: 37.5%;
  }

  .lrgCol8 {
    width: 33.33333333%;
  }

  .lrgCol7 {
    width: 29.16666667%;
  }

  .lrgCol6 {
    width: 25%;
  }

  .lrgCol5 {
    width: 20.83333333%;
  }

  .lrgCol4 {
    width: 16.66666667%;
  }

  .lrgCol3 {
    width: 12.5%;
  }

  .lrgCol2 {
    width: 8.33333333%;
  }

  .lrgCol1 {
    width: 4.16666667%;
  }

  .lrgColPull24 {
    right: 100%;
  }

  .lrgColPull23 {
    right: 95.83333333%;
  }

  .lrgColPull22 {
    right: 91.66666667%;
  }

  .lrgColPull21 {
    right: 87.5%;
  }

  .lrgColPull20 {
    right: 83.33333333%;
  }

  .lrgColPull19 {
    right: 79.16666667%;
  }

  .lrgColPull18 {
    right: 75%;
  }

  .lrgColPull17 {
    right: 70.83333333%;
  }

  .lrgColPull16 {
    right: 66.66666667%;
  }

  .lrgColPull15 {
    right: 62.5%;
  }

  .lrgColPull14 {
    right: 58.33333333%;
  }

  .lrgColPull13 {
    right: 54.16666667%;
  }

  .lrgColPull12 {
    right: 50%;
  }

  .lrgColPull11 {
    right: 45.83333333%;
  }

  .lrgColPull10 {
    right: 41.66666667%;
  }

  .lrgColPull9 {
    right: 37.5%;
  }

  .lrgColPull8 {
    right: 33.33333333%;
  }

  .lrgColPull7 {
    right: 29.16666667%;
  }

  .lrgColPull6 {
    right: 25%;
  }

  .lrgColPull5 {
    right: 20.83333333%;
  }

  .lrgColPull4 {
    right: 16.66666667%;
  }

  .lrgColPull3 {
    right: 12.5%;
  }

  .lrgColPull2 {
    right: 8.33333333%;
  }

  .lrgColPull1 {
    right: 4.16666667%;
  }

  .lrgColPull0 {
    right: auto;
  }

  .lrgColPush24 {
    left: 100%;
  }

  .lrgColPush23 {
    left: 95.83333333%;
  }

  .lrgColPush22 {
    left: 91.66666667%;
  }

  .lrgColPush21 {
    left: 87.5%;
  }

  .lrgColPush20 {
    left: 83.33333333%;
  }

  .lrgColPush19 {
    left: 79.16666667%;
  }

  .lrgColPush18 {
    left: 75%;
  }

  .lrgColPush17 {
    left: 70.83333333%;
  }

  .lrgColPush16 {
    left: 66.66666667%;
  }

  .lrgColPush15 {
    left: 62.5%;
  }

  .lrgColPush14 {
    left: 58.33333333%;
  }

  .lrgColPush13 {
    left: 54.16666667%;
  }

  .lrgColPush12 {
    left: 50%;
  }

  .lrgColPush11 {
    left: 45.83333333%;
  }

  .lrgColPush10 {
    left: 41.66666667%;
  }

  .lrgColPush9 {
    left: 37.5%;
  }

  .lrgColPush8 {
    left: 33.33333333%;
  }

  .lrgColPush7 {
    left: 29.16666667%;
  }

  .lrgColPush6 {
    left: 25%;
  }

  .lrgColPush5 {
    left: 20.83333333%;
  }

  .lrgColPush4 {
    left: 16.66666667%;
  }

  .lrgColPush3 {
    left: 12.5%;
  }

  .lrgColPush2 {
    left: 8.33333333%;
  }

  .lrgColPush1 {
    left: 4.16666667%;
  }

  .lrgColPush0 {
    left: auto;
  }

  .lrgColOffset24 {
    margin-left: 100%;
  }

  .lrgColOffset23 {
    margin-left: 95.83333333%;
  }

  .lrgColOffset22 {
    margin-left: 91.66666667%;
  }

  .lrgColOffset21 {
    margin-left: 87.5%;
  }

  .lrgColOffset20 {
    margin-left: 83.33333333%;
  }

  .lrgColOffset19 {
    margin-left: 79.16666667%;
  }

  .lrgColOffset18 {
    margin-left: 75%;
  }

  .lrgColOffset17 {
    margin-left: 70.83333333%;
  }

  .lrgColOffset16 {
    margin-left: 66.66666667%;
  }

  .lrgColOffset15 {
    margin-left: 62.5%;
  }

  .lrgColOffset14 {
    margin-left: 58.33333333%;
  }

  .lrgColOffset13 {
    margin-left: 54.16666667%;
  }

  .lrgColOffset12 {
    margin-left: 50%;
  }

  .lrgColOffset11 {
    margin-left: 45.83333333%;
  }

  .lrgColOffset10 {
    margin-left: 41.66666667%;
  }

  .lrgColOffset9 {
    margin-left: 37.5%;
  }

  .lrgColOffset8 {
    margin-left: 33.33333333%;
  }

  .lrgColOffset7 {
    margin-left: 29.16666667%;
  }

  .lrgColOffset6 {
    margin-left: 25%;
  }

  .lrgColOffset5 {
    margin-left: 20.83333333%;
  }

  .lrgColOffset4 {
    margin-left: 16.66666667%;
  }

  .lrgColOffset3 {
    margin-left: 12.5%;
  }

  .lrgColOffset2 {
    margin-left: 8.33333333%;
  }

  .lrgColOffset1 {
    margin-left: 4.16666667%;
  }

  .lrgColOffset0 {
    margin-left: 0%;
  }
}
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}

.container:after,
.container-fluid:after,
.row:after {
  clear: both;
}

.centerBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.pullRight {
  float: right !important;
}

.pullLeft {
  float: left !important;
}

@-ms-viewport {
  width: device-width;
}

.xsVisible,
.smlVisible,
.mdVisible,
.lrgVisible {
  display: none !important;
}

.xsVisibleBlock,
.xsVisibleInline,
.xsVisibleInlineBlock,
.smlVisibleBlock,
.smlVisibleInline,
.smlVisibleInlineBlock,
.mdVisibleBlock,
.mdVisibleInline,
.mdVisibleInlineBlock,
.lrgVisibleBlock,
.lrgVisibleInline,
.lrgVisibleInlineBlock {
  display: none !important;
}

@media (max-width: 767px) {
  .xsVisible {
    display: block !important;
  }

  table.xsVisible {
    display: table !important;
  }

  tr.xsVisible {
    display: table-row !important;
  }

  th.xsVisible,
  td.xsVisible {
    display: table-cell !important;
  }
}
@media (max-width: 767px) {
  .xsVisibleBlock {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .xsVisibleInline {
    display: inline !important;
  }
}
@media (max-width: 767px) {
  .xsVisibleInlineBlock {
    display: inlineBlock !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smlVisible {
    display: block !important;
  }

  table.smlVisible {
    display: table !important;
  }

  tr.smlVisible {
    display: table-row !important;
  }

  th.smlVisible,
  td.smlVisible {
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smlVisibleBlock {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smlVisibleInline {
    display: inline !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smlVisibleInlineBlock {
    display: inlineBlock !important;
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .mdVisible {
    display: block !important;
  }

  table.mdVisible {
    display: table !important;
  }

  tr.mdVisible {
    display: table-row !important;
  }

  th.mdVisible,
  td.mdVisible {
    display: table-cell !important;
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .mdVisibleBlock {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .mdVisibleInline {
    display: inline !important;
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .mdVisibleInlineBlock {
    display: inlineBlock !important;
  }
}
@media (min-width: 1400px) {
  .lrgVisible {
    display: block !important;
  }

  table.lrgVisible {
    display: table !important;
  }

  tr.lrgVisible {
    display: table-row !important;
  }

  th.lrgVisible,
  td.lrgVisible {
    display: table-cell !important;
  }
}
@media (min-width: 1400px) {
  .lrgVisibleBlock {
    display: block !important;
  }
}
@media (min-width: 1400px) {
  .lrgVisibleInline {
    display: inline !important;
  }
}
@media (min-width: 1400px) {
  .lrgVisibleInlineBlock {
    display: inlineBlock !important;
  }
}
@media (max-width: 767px) {
  .xsHidden {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .smlHidden {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1399px) {
  .mdHidden {
    display: none !important;
  }
}
@media (min-width: 1400px) {
  .lrgHidden {
    display: none !important;
  }
}
.cols1 {
  width: 4.16667% !important;
}

.cols2 {
  width: 8.33333% !important;
}

.cols3 {
  width: 12.5% !important;
}

.cols4 {
  width: 16.66667% !important;
}

.cols5 {
  width: 20.83333% !important;
}

.cols6 {
  width: 25% !important;
}

.cols7 {
  width: 29.16667% !important;
}

.cols8 {
  width: 33.33333% !important;
}

.cols9 {
  width: 37.5% !important;
}

.cols10 {
  width: 41.66667% !important;
}

.cols11 {
  width: 45.83333% !important;
}

.cols12 {
  width: 50% !important;
}

.cols13 {
  width: 54.16667% !important;
}

.cols14 {
  width: 58.33333% !important;
}

.cols15 {
  width: 62.5% !important;
}

.cols16 {
  width: 66.66667% !important;
}

.cols17 {
  width: 70.83333% !important;
}

.cols18 {
  width: 75% !important;
}

.cols19 {
  width: 79.16667% !important;
}

.cols20 {
  width: 83.33333% !important;
}

.cols21 {
  width: 87.5% !important;
}

.cols22 {
  width: 91.66667% !important;
}

.cols23 {
  width: 95.83333% !important;
}

.cols24 {
  width: 100% !important;
}

.line {
  margin-left: -20px;
}
.line .col {
  min-height: 1px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
}
.line .colExt {
  float: right;
  padding: 0 0 0 20px;
}
.line .lastCol {
  float: none;
}
.line .col:last-child {
  display: table-cell;
  float: none;
  vertical-align: top;
  width: 10000px !important;
}

/*doc
---
title: Media
name: media
category: Layout
author: Nicole Sullivan
---

Media blocks are used to layout images with related content.

The media block is a UI pattern of an image to the left and some text (or really anything) that describes it to the right. The image can be any size. The media block has an optional right region which should also be fixed width.

Use any sized image or flash for the right or left area. Any content in the body including nesting other media blocks. Always set image height and width to avoid unnecessary reflows/repaints.

Class          | Description
-------------- | -----------
`media`        | The wrapper class for the media block. Required.
`mediaBody`    | Wrapper of the content region of the media block. Any content or other UI objects, including other media blocks may be nested within the media body.
`mediaImg`     | Applied to an image or wrapper of the image (often a link), that you wish to align left. Optional.
`mediaImgExt`  | Applied to an image or wrapper of the image (often a link), that you wish to align right. Optional.

```html_example
<div class="media">
  <a href="http://www.trulia.com" class="mediaImg">
    <img src="doc_assets/img/20x20.png" width="20" height="20" alt="Left aligned image">
  </a>
  <div class="mediaBody">
    Simple text next to a small icon.
  </div>
</div>
```

```html_example
<div class="media">
  <a href="http://www.trulia.com" class="mediaImg mediaImgExt">
    <img src="doc_assets/img/20x20.png" width="20" height="20" alt="Right aligned image">
  </a>
  <div class="mediaBody">
    Right aligned media block.
  </div>
</div>
```

```html_example
<div class="media">
  <a href="http://www.trulia.com" class="mediaImg">
    <img src="doc_assets/img/100x100.png" width="100" height="100" alt="Left aligned image">
  </a>
  <a href="http://www.trulia.com" class="mediaImg mediaImgExt">
    <img src="doc_assets/img/100x100.png" width="100" height="100" alt="Right aligned image">
  </a>
  <div class="mediaBody">
    <p><b>Right and left aligned media block</b></p>
    <p>This media block has an image aligned to the right via the imgExt class applied to the image wrapper. Images can be right, left, or both. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
```

*/
/*doc
---
title: Inline Media Block
name: inlineMedia
category: Layout
author: Nicole Sullivan
---

Occasionally, you may need a media block that aligns vertically. In this case you should use the `mediaInline`. It only works with a single line of text, so use it judiciously. All `mediaInline` classes may be extended with vertical alignment utils `txtT`, `txtM`, and `txtB` to set the vertical alignment of that element to top, middle, or bottom respectively.

Class                | Description
-------------------- | -----------
`mediaInline`        | The wrapper class for the inline media block. Required.

```html_example
<a class="mediaInline" href="http://www.trulia.com/">
    <img src="doc_assets/img/20x20.png"
      width="20"
      height="20"
      alt="">
  <span>Icon on the left</span>
</a>
```

```html_example
<a class="mediaInline" href="http://www.trulia.com/">
  <span>Icon on the right</span>
  <img src="doc_assets/img/20x20.png"
    width="20"
    height="20"
    alt="">
</a>
```

*/
.media > .mediaImg {
  float: left;
  margin-right: 10px;
}
.media > .mediaImg > img {
  display: block;
}
.media > .mediaImgExt {
  float: right;
  margin-left: 10px;
  margin-right: 0;
}

.mediaInline {
  vertical-align: middle;
}
.mediaInline > img,
.mediaInline > span {
  display: inline-block;
  vertical-align: middle;
}

/*doc
---
title: Link
name: link
category: Typography
test: true
---

Styles applied to anchor elements to provide alternative colors and indicators.

Style                                                                                                            | Class              | Description
---------------------------------------------------------------------------------------------------------------- | ------------------ | -----------
<a href="#">Default Link</a>                                                                                     |                    | Default style for links
<a class="linkLowlight" href="#">Lowlight Link</a>                                                               | `linkLowlight`     | Deemphasized link color
<div class="backgroundInverse"><a class="linkTypeReversed" href="#">Type Reversed Link</a></div>                 | `linkTypeReversed` | Type reversed link color
<div class="backgroundInverse"><a class="reversedLinkLowlight" href="#">Reversed Link Lowlight</a></div>         | `linkLowlight`     | Deemphasized link color on a dark background
<a class="linkForward" href="#">Link Forward</a>                                                                 | `linkForward`      | Handy for links that indicate a forward direction (such as progressing through steps).
<a class="linkBack" href="#">Link Back</a>                                                                       | `linkBack`         | Handy for links that indicate a backward direction (such as going through completed<br/>steps or a results page from a detail page).
<a class="activeLink" href="#">Active Link</a>                                                                   | `activeLink`       | A link that uses the default font color
<a class="linkUnderline linkLowlight" href="#">Underlined Link</a>                                               | `linkUnderline`    | Used sparingly, and only for times when there is another link near it that you'd rather draw attention to. Used with a linkLowlight here to deemphasize usage.

```html_example
<a class="linkLowlight" href="#">Lowlight Link</a>
<a href="#" class="linkForward">Link Forward</a>
<a href="#">Default Link</a>
<a href="#" class="linkBack">Link Back</a>
<a href="#" class="activeLink">Active Link</a>
```


###Tile Links
Tile links can be used to provide an anchor tag, but without the
styling. This is useful when you want things like the property card to
have a proper link, but not be sytled as such

```html_example
<div class="cols10">
  <a href="http://google.com" class="tileLink">
    <div class="box boxBasic backgroundLowlight docDesignNotes">
      <div class="boxHead boxHeadBasic">
        <h5>I'm so excited.</h5>
      </div>
      <div class="boxBody">
        <p class="mbl">I look like a regular box, but I'm also a link. I'm very trendy.</p>
      </div>
    </div>
  </a>
</div>
```

*/
a, a:hover, a:focus, .linkLowlight, .linkTypeReversed, .reversedLinkLowlight, .linkUnderline, .linkUnderline:hover, .linkUnderline:focus, .activeLink {
  text-decoration: none;
}

a {
  color: #10a75f;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
a:hover, a:focus {
  color: #20c063;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.linkLowlight {
  color: #869099;
}
.linkLowlight:hover, .linkLowlight:focus {
  color: #b1b6bb;
}

.linkTypeReversed {
  color: white;
}
.linkTypeReversed:hover, .linkTypeReversed:focus {
  color: rgba(255, 255, 255, 0.75);
}

.reversedLinkLowlight {
  color: rgba(255, 255, 255, 0.65);
}
.reversedLinkLowlight:hover, .reversedLinkLowlight:focus {
  color: rgba(255, 255, 255, 0.75);
}

.linkUnderline {
  text-decoration: underline;
}

.linkForward:after {
  margin-left: 0.35714em;
  content: "\00BB";
}

.linkBack:before {
  margin-right: 0.35714em;
  content: "\00AB";
}

.activeLink {
  color: #3b4144;
}
.activeLink:hover, .activeLink:focus {
  color: #3b4144;
}

.blockLink {
  display: block;
  height: 100%;
}

.tileLink,
.tileLink:link,
.tileLink:visited,
.tileLink:hover,
.tileLink:active {
  color: inherit;
  outline: none;
  display: block;
}

/*doc
---
name: ad
title: Ads
category: Ads
author: August Flanagan
---

Ad containers are standard sized containers that you can drop an ad unit
in. Ads come in several sizes that will reserve the space on the page
for the ad until it is loaded.

*/
/*doc
---
parent: ad
name: z_adBtn
title: Ad Button
category: Ads
test: true
---

A button for some rather lame ads. Don't use this for anything else.

```html_example
 <button class="adBtn">Some Ad Text</button>
```
*/
/*doc
---
title: Ad Sizes
parent: ad
name: adSkins
author: August Flanagan
---

Class         |  Description
------------- | ------------
ad300x250     | This is a standard ad container with dimensions of 300px by 250px
ad300x250flex | This ad container has a minimum size of 300px by 250px but can expand vertically for taller ads (such as on the SRP top right).
ad300x100     | Small-ish ad size
ad160x600     | Skyscraper ad sie
ad728x90      | Banner ad size
ad976x32      | Pencil ad size
ad650x30      | Shorter Pencil ad size of 650px by 30px

```html_example
<div class="ad300x250">
  <img alt="" src="doc_assets/img/buy_this_cat.png">
</div>
```

*/
.ad300x250, .ad300x100, .ad160x600, .ad728x90, .ad976x32, .ad650x30, .ad300x250flex {
  margin-left: auto;
  margin-right: auto;
}

.adBtn {
  padding: .5em 1em;
  margin: 0;
  display: inline-block;
  font-weight: normal;
  line-height: normal;
  font-size: 10px;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: none;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: 1px #e0e0e0 solid;
  background: #fff;
  color: #222;
  text-shadow: 0 1px 0 #fff;
  -webkit-box-shadow: 0 1px 0 #cccccc;
  -moz-box-shadow: 0 1px 0 #cccccc;
  box-shadow: 0 1px 0 #cccccc;
}
.adBtn:active {
  position: relative;
  top: 1px;
  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.adBtn:hover {
  color: #222;
}

.ad300x250 {
  width: 300px;
  height: 250px;
}

.ad300x100 {
  width: 300px;
  height: 100px;
}

.ad160x600 {
  width: 160px;
  height: 600px;
}

.ad728x90 {
  width: 728px;
  height: 90px;
}

.ad976x32 {
  width: 976px;
  height: 32px;
}

.ad650x30 {
  width: 650px;
  height: 30px;
}

.ad300x250flex {
  width: 300px;
  min-height: 250px;
}

/*doc
---
title: Background Colors
name: background
category: Colors
author: Nicole Sullivan
---

We have a few background colors that can be used in various contexts.
These are not for use as the entire page background but instead for
specific components and modules on the page. We have colors that have an implied standardized
meaning (good, average, and poor), these colors are married to maps and map indicators. 
These have different implications than background warn or callout, which should be used to alert a user. 

*/
/*doc
---
title: Colors
parent: background
name: backgroundSkins
author: Nicole Sullivan and Sarah Drasner
---

<div class="line txtC ptm">
  <div class="col cols6">
    <div class="docSwatch backgroundBasic"></div>
    <code>backgroundBasic</code>
  </div>
  <div class="col cols6">
    <div class="docSwatch backgroundLowerlight"></div>
    <code>backgroundLowerlight</code>
  </div>
  <div class="col cols6">
    <div class="docSwatch backgroundLowlight"></div>
    <code>backgroundLowlight</code>
  </div>
  <div class="col cols6">
    <div class="docSwatch backgroundControls"></div>
    <code>backgroundControls</code>
  </div>
</div>
<div class="line txtC ptm">
  <div class="col cols8">
    <div class="docSwatch backgroundInverse"></div>
    <code>backgroundInverse</code>
  </div>
  <div class="col cols8">
    <div class="docSwatch backgroundMidnight"></div>
    <code>backgroundMidnight</code>
  </div>
  <div class="col cols8">
    <div class="docSwatch backgroundNolight"></div>
      <code>backgroundNolight</code>
  </div>
</div>
<div class="line txtC ptm">
  <div class="col cols8">
    <div class="docSwatch backgroundWarn"></div>
    <code>backgroundWarn</code>
  </div>
  <div class="col cols8">
    <div class="docSwatch backgroundCallout"></div>
    <code>backgroundCallout</code>
  </div>
  <div class="col cols8">
    <div class="docSwatch backgroundHighlight"></div>
    <code>backgroundHighlight</code>
  </div>
</div>

<h4 class="ptxl">Also see how colors are used in <a href="typography.html">Typography</a>.</p>

## Qualitative Value Colors

We have colors that have an implied standardized meaning (good, average, and poor), 
these colors are married to maps and map indicators. 
These have different implications than background warn or callout, which should be used to alert a user.

<div class="line txtC ptm">
  <div class="col cols8">
    <div class="docSwatch backgroundGood"></div>
    <code>backgroundGood</code>
  </div>
  <div class="col cols8">
    <div class="docSwatch backgroundAverage"></div>
    <code>backgroundAverage</code>
  </div>
  <div class="col cols8">
    <div class="docSwatch backgroundPoor"></div>
    <code>backgroundPoor</code>
  </div>
</div>

*/
.backgroundBasic {
  background-color: white;
}

.backgroundLowlight {
  background-color: #f5f6f7;
}

.backgroundLowerlight {
  background-color: #fbfbfb;
}

.backgroundControls {
  background-color: #cdd1d4;
}

.backgroundHighlight {
  background-color: #20c063;
}

.backgroundInverse {
  background-color: #474e52;
}

.backgroundInverseAlternate {
  background-color: #474e52;
}

.backgroundMidnight {
  background-color: #3b4144;
}

.backgroundWarn {
  background-color: #e13009;
}

.backgroundCallout {
  background-color: #f74a27;
}

.backgroundNolight {
  background-color: black;
}

.backgroundGood {
  background-color: #228959;
}

.backgroundAverage {
  background-color: #fbb100;
}

.backgroundPoor {
  background-color: #e13009;
}

/*doc
---
title: Boxes
name: box
category: Box
author: August Flanagan
---

Boxes are a common way of grouping related content. They consist of a
wrapper with the class `box` applied.

Inside a box, there are three sections:

- head

- body

- foot

**All boxes must have a body**, and optionally, may have a head and/or foot.

```html_example
<div class="cols6">
    <div class="box boxBasic backgroundLowlight docDesignNotes">
      <div class="boxBody">
        <h2>See more!</h2>
        <p class="mbl">Boxes and examples below.</p>
      </div>
    </div>
  </div>
```

>Boxes occasionally help break up an otherwise white and
typographically reliant grid. Use them for important content or when
things are getting monotonous.

Boxes come with a couple different border skins: `boxBasic` and
`boxHighlight`. These may be used with any combination of background
class.


*/
/*doc
---
title: Box Skins
parent: box
name: boxBasicSkin
author: August Flanagan
test: true
---


####Box Basic
```html_example
<div class="box boxBasic backgroundBasic">
  <div class="boxBody">
    <p>This box has a white background.</p>
  </div>
</div>
```


####Box Card
```html_example
<div class="box boxCard backgroundBasic">
  <div class="boxHead boxHeadCard">
    <h5>Hello</h5>
  </div>
  <div class="boxBody">
    <p>This box is highlighted with the little shadows.</p>
  </div>
</div>
```

####Box Panel
```html_example
<div class="box boxPanel">
  <div class="boxHead">
    <h5>Hello</h5>
  </div>
  <div class="boxBody">
    <p>This box is for sidebar content.</p>
  </div>
</div>
```


*/
.box {
  position: relative;
}
.box .boxFoot {
  padding: 0;
  margin: 0 20px;
}
.box .boxBody {
  padding: 0 20px;
}

.boxCard {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

.boxPanel {
  background: #f5f6f7;
}

.boxHighlight, .boxBasic, .subdropdownBox, .dropdownBoxHighlight {
  border: 1px solid #e8e9ea;
  border-radius: 4px;
}

.boxTabPrimary .boxBody {
  border: 1px solid #e8e9ea;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
}

.boxTabColumns .boxBody {
  background: white;
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid white;
  border-top: none;
}
.boxTabColumns ul.tabBody {
  margin: 0;
}
.boxTabColumns .tabBody > li {
  margin: 0;
  padding: 0;
  padding-top: 1px;
}
.boxTabColumns .line {
  margin-left: 0;
}

/*doc
---
title: Box Head
parent: box
name: y_boxHeadBasic
category: Box
author: August
test: true
---

```html_example
<div class="box boxBasic backgroundBasic">
  <div class="boxHead boxHeadBasic">
    <h5>This is a box header</h5>
  </div>
  <div class="boxBody">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry. Lorem Ipsum has been the industry's standard dummy text
      ever since the 1500s, when an unknown printer took a galley of
      type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into
      electronic typesetting, remaining essentially unchanged. It was
      popularised in the 1960s with the release of Letraset sheets
      containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of
      Lorem Ipsum.
    </p>
  </div>
</div>
```

*/
/*doc
---
title: Box Head Highlight
parent: box
name: y_boxHeadHighlight
category: Box
author: Vince Lum
test: true
---

```html_example
<div class="box boxBasic backgroundBasic">
  <div class="boxHead boxHeadHighlight">
    <h5>This is a box header</h5>
  </div>
  <div class="boxBody">
    <p>I. Am. The. Body.</p>
  </div>
</div>
```

*/
.boxHeadBasic {
  padding: 0;
  margin: 0 20px;
}

.boxHeadHighlight {
  color: #20c063;
  margin-bottom: 14px;
}

.boxHeadCard {
  margin-bottom: 0px;
}

/*doc
---
title: Box Foot
parent: box
name: z_boxFootBasic
category: Box
author: August
test: true
---

```html_example
<div class="box boxBasic backgroundBasic">
  <div class="boxBody">
    <p>Hello user, please click a button.</p>
  </div>
  <div class="boxFoot boxFootBasic">
    <button class="btn btnLink">Don't Click</button>
    <button class="btn btnLinkPrimary">Click</button>
  </div>
</div>
```

*/
.boxFootBasic {
  margin: 4px 0;
}
.boxFootBasic .btnLink {
  padding-left: 0;
  border-left: none;
}

/*doc
---
title: Box Actions
name: boxAction
category: Box
author: August Flanagan
---

Box actions are user actions that sit in the top right corner of a box.
Currently there is only one, and it is `boxClose`.

*/
/*doc
---
title: Box Close
parent: boxAction
name: boxCloseSkin
author: August Flanagan
test: true
---

```html_example
<div class="box boxBasic backgroundBasic">
  <button class="boxClose">
    <span role="presentation">&times;</span>
    <span class="hideVisually">Close</span>
  </button>
  <div class="boxHead boxHeadBasic">
    <h5>I'd tell you a UDP joke</h5>
  </div>
  <div class="boxBody">
    <p>But I don't think you'd get it.</p>
  </div>
</div>
```

*/
.boxClose {
  border: none;
  position: absolute;
  cursor: pointer;
  background-color: transparent;
}

.boxClose {
  top: 5px;
  right: 12px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #3b4144;
  font-size: 21px;
  font-weight: bold;
}
.boxClose:hover, .boxClose:focus {
  color: #3b4144;
}

/*doc
---
title: Lists
name: list
category: Lists
---

By default, all lists are plain with no bullets or numbers and have
generous spacing. We have several classes for lists that can be mixed
and matched as desired.

Lists can be safely nested as well:

```html_example
<ul class="listInline">
  <li>
    <ul>
      <li>Price: $1,350,000</li>
      <li>4 Bedrooms</li>
      <li>Zip:
        <a href="">94109</a>
      </li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Status: For Sale</li>
      <li>2 full, 1 partial bathrooms</li>
      <li>Neighborhood:
        <a href="">Nob Hill</a>
      </li>
    </ul>
  </li>
  <li>
    <ul>
      <li>MLS/Source ID: 404350</li>
      <li>Condo</li>
    </ul>
  </li>
</ul>
````

*/
/*doc
---
parent: list
name: listOrdered
title: Ordered Lists
test: true
---

```html_example
<ol class="listOrdered">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>
```

## These featured list styles can only be used for numbered content 1-9.

```html_example
<ol class="listOrdered listFeaturedHighlight">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>
```

## Featured Lists with black circled numbers.
```html_example
<ol class="listOrdered listFeaturedBlack">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>
```

### Order list with roman type
```html_example
<ol class="listOrdered listStyleRoman">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>
```

[[[plugin:css-test
<ol class="listOrdered">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>
]]]

*/
.listFeaturedHighlight.h8 li:before, .listFeaturedBlack.h8 li:before {
  width: 0.78rem;
  height: 0.78rem;
  padding-top: 0;
  margin-top: 0.2rem;
  margin-top: -0.08rem;
}
.listFeaturedHighlight.h7 li:before, .listFeaturedHighlight.badgeCircle.sml li:before, .listFeaturedHighlight.sml.badgeCircleGood li:before, .listFeaturedHighlight.sml.badgeCircleAverage li:before, .listFeaturedHighlight.sml.badgeCirclePoor li:before, .listFeaturedBlack.h7 li:before, .listFeaturedBlack.badgeCircle.sml li:before, .listFeaturedBlack.sml.badgeCircleGood li:before, .listFeaturedBlack.sml.badgeCircleAverage li:before, .listFeaturedBlack.sml.badgeCirclePoor li:before {
  width: 1.12rem;
  height: 1.12rem;
  padding-top: 0.035rem;
  margin-top: 0;
}
.listFeaturedHighlight.h5 li:before, .listFeaturedBlack.h5 li:before {
  width: 1.4rem;
  height: 1.4rem;
  padding-top: 0.035rem;
  margin-top: 0.09rem;
}
.listFeaturedHighlight.h4 li:before, .listFeaturedBlack.h4 li:before {
  width: 1.6rem;
  height: 1.6rem;
  padding-top: 0.15rem;
  margin-top: 0.1rem;
}
.listFeaturedHighlight.h3 li:before, .listFeaturedHighlight.badgeCircle.md li:before, .listFeaturedHighlight.md.badgeCircleGood li:before, .listFeaturedHighlight.md.badgeCircleAverage li:before, .listFeaturedHighlight.md.badgeCirclePoor li:before, .listFeaturedBlack.h3 li:before, .listFeaturedBlack.badgeCircle.md li:before, .listFeaturedBlack.md.badgeCircleGood li:before, .listFeaturedBlack.md.badgeCircleAverage li:before, .listFeaturedBlack.md.badgeCirclePoor li:before {
  width: 1.7rem;
  height: 1.7rem;
  padding-top: 0.04rem;
  margin-top: 0.2rem;
}
.listFeaturedHighlight.h2 li:before, .listFeaturedBlack.h2 li:before {
  width: 2.25rem;
  height: 2.25rem;
  padding-top: 0.2rem;
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}
.listFeaturedHighlight.h1 li:before, .listFeaturedHighlight.badgeCircle.lrg li:before, .listFeaturedHighlight.lrg.badgeCircleGood li:before, .listFeaturedHighlight.lrg.badgeCircleAverage li:before, .listFeaturedHighlight.lrg.badgeCirclePoor li:before, .listFeaturedBlack.h1 li:before, .listFeaturedBlack.badgeCircle.lrg li:before, .listFeaturedBlack.lrg.badgeCircleGood li:before, .listFeaturedBlack.lrg.badgeCircleAverage li:before, .listFeaturedBlack.lrg.badgeCirclePoor li:before {
  width: 2.4rem;
  height: 2.4rem;
  padding-top: 0;
  margin-top: 0.25rem;
  margin-right: 0.55rem;
}
.listFeaturedHighlight.h0 li:before, .listFeaturedBlack.h0 li:before {
  width: 3rem;
  height: 3rem;
  padding-top: 0;
  margin-top: 0.35rem;
  margin-right: 0.6rem;
}

/*doc
---
title: Bulleted Lists
test: true
---

```html_example
<ul class="listBulleted">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ul>
```

*/
/*doc
---
parent: list
name: listBorderedSkins
title: Borders on Lists
test: true
---

```html_example
<ul class="listBordered">
  <li>First list item</li>
  <li>Second list item</li>
  <li class="listHoverItem">Third list item</li>
</ul>
```

###Bordered List with Hover
```html_example
<ul class="listBorderedHover">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ul>
```

[[[plugin:css-test
<ul class="listBordered">
  <li>First list item</li>
  <li>Second list item</li>
  <li class="listHoverItem">Third list item</li>
</ul>
]]]

*/
/*doc
---
parent: list
name: listInline
title: Inline Lists
test: true
---

```html_example
<ul class="listInline">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ul>
```

*/
/*doc
---
parent: list
name: listInlineCommas
title: Comma Separated Lists
test: true
---

There may be lists of items you want to separate with commas.
Comma separated lists will add commmas between list items for you
without you having to check for a following item. Use this for cases
where you are manually creating a list as in the example below,
otherwise do this with a smarty loop.

```html_example
<ul class="listInlineCommas">
  <!-- {% if $beds %} -->
  <li>4 beds</li>
  <!-- {% /if %} -->

  <!-- {% if $baths %} -->
  <li>2 baths</li>
  <!-- {% /if %} -->

  <!-- {% if $sqft %} -->
  <li>1,094 sqft</li>
  <!-- {% /if %} -->
</ul>
```

*/
/*doc
---
parent: list
name: listNav
title: Navigation lists (vertical)
test: true
---

```html_example
<ul class="listNav">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item
    <ul class="subnav">
      <li>Subnav item one</li>
      <li>Subnav item two</li>
    </ul>
  </li>
</ul>
```
*/
/*doc
---
parent: list
name: listInlineDivider
title: Inline Lists with dividers
test: true
---

```html_example
<ul class="listInlineDivider">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ul>
```

*/
/*doc
---
parent: list
name: listInlineBulleted
title: Inline Lists with bullets 
test: true
---

```html_example
<ul class="listInlineBulleted">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ul>
```

*/
/*doc
---
parent: list
name: listWhitespace
title: List Whitespacing
---

Lists have a number of helper classes to control the spacing around the
list items. These classes are all three character classes that look
like: `lvn` or `lhs`. Each character in the spacing class corresponds to
`<type><location><size>`

Type         |            | Description
--------     | ---------- | -----------
l            | list       | Specifies spacing for li items (as opposed to padding or margin, `pan` or `mvn`)
**Location** |            |
h            | horizontal | Adds spacing to the left and right of the li
v            | vertical   | Adds spacing to the top and bottom of the li
**Size**     |            |
l            | large      | Adds a large amount of spacing (21px)
m            | medium     | Adds a medium amount of spacing (10px)
s            | small      | Adds a small amount of spacing (5px)
n            | none       | Sets the spacing to 0


```html_example
<ul class="lvs">
  <li>Status: For Sale</li>
  <li>2 full, 1 partial bathrooms</li>
  <li>Neighborhood:
    <a href="">Nob Hill</a>
  </li>
</ul>
```

```html_example
<ul class="lvm">
  <li>Status: For Sale</li>
  <li>2 full, 1 partial bathrooms</li>
  <li>Neighborhood:
    <a href="">Nob Hill</a>
  </li>
</ul>
```
*/
/*doc
---
parent: list
name: listColumns
title: Multi-column Lists
test: true
---

`list2cols` and `list3cols` can be used to make multi-column lists, they
may be mixed in with any other list skin class. Currently this component
only works in **Firefox 18+, Chrome 24+, Safari 5.1+, and IE10+**. For a
full list of browsers that support multi column check [Can I
Use](http://caniuse.com/#feat=multicolumn)

```html_example
<ul class="list2cols">
  <li>Status: For Sale</li>
  <li>2 full, 1 partial bathrooms</li>
  <li>Neighborhood:
    <a href="">Nob Hill</a>
  </li>
  <li>Status: For Sale</li>
  <li>2 full, 1 partial bathrooms</li>
  <li>Neighborhood:
    <a href="">Nob Hill</a>
  </li>
</ul>
```

*/
.listOrdered {
  counter-reset: numList;
  list-style-position: inside;
}

.listOrdered.listStyleRoman {
  list-style-position: outside;
}

.listOrdered.listFeaturedHighlight, .listOrdered.listFeaturedBlack {
  margin-right: 0;
  list-style-type: none;
}

.listFeaturedHighlight li:before {
  border: 1px solid #20c063;
  color: #10a75f;
}

.listFeaturedBlack li:before {
  border: 1px solid #474e52;
}

.listFeaturedHighlight li, .listFeaturedBlack li {
  position: relative;
  margin-bottom: 0.2rem;
}
.listFeaturedHighlight li:before, .listFeaturedBlack li:before {
  padding-top: 0.2rem;
  font-size: 75%;
  counter-increment: numList;
  content: counter(numList);
  line-height: 1.4;
  width: 1.35rem;
  height: 1.35rem;
  text-align: center;
  float: left;
  position: relative;
  border-radius: 50%;
  margin-right: 0.35rem;
}

.listStyleRoman li {
  list-style-type: lower-roman;
  margin-left: 1.5em;
}

.listBulleted > li {
  list-style-type: none;
}

.listBordered > li,
.listBorderedHover > li {
  padding: 8px;
  border-top: 1px solid #e8e9ea;
}
.listBordered > li:first-child,
.listBorderedHover > li:first-child {
  border-top: 1px solid transparent;
}

.listBorderedHover > li {
  margin: 0;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
.listBorderedHover > li:hover {
  background-color: #f5f6f7;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.listHoverItem {
  background-color: #f5f6f7;
}

.listInline > li {
  vertical-align: middle;
  padding-right: 10px;
  display: inline-block;
}

.listInline.typeTruncate > li {
  display: inline !important;
  vertical-align: baseline;
}

.listInlineCommas > li {
  vertical-align: middle;
  display: inline-block;
}
.listInlineCommas > li:after {
  content: ', ';
}
.listInlineCommas > li:last-child:after {
  content: '';
}

.listNav > li {
  padding: .3em 0;
}

.subnav {
  margin: 0 0 0 1em;
}

.listInlineDivider > li {
  border-left: solid 2px #e8e9ea;
  padding: 0 10px;
  display: inline-block;
}
.listInlineDivider > li:first-child {
  border: none;
  padding-left: 0;
}

.listInlineBulleted > li {
  display: inline-block;
}
.listInlineBulleted > li:before {
  content: '\2022';
  margin-right: 5px;
}
.listInlineBulleted > li:first-child:before {
  content: none;
  margin-right: 0;
}

.lvn > li {
  padding-top: 0;
  padding-bottom: 0;
}

.lvxs > li {
  padding-top: 2px;
  padding-bottom: 2px;
}

.lvs > li {
  padding-top: 5px;
  padding-bottom: 5px;
}

.lvm > li {
  padding-top: 10px;
  padding-bottom: 10px;
}

.lvl > li {
  padding-top: 20px;
  padding-bottom: 20px;
}

.lvxl > li {
  padding-top: 25px;
  padding-bottom: 25px;
}

.lvxxl > li {
  padding-top: 30px;
  padding-bottom: 30px;
}

.lhn > li {
  padding-left: 0;
  padding-right: 0;
}

.lhxs > li {
  padding-left: 2px;
  padding-right: 2px;
}

.lhs > li {
  padding-left: 5px;
  padding-right: 5px;
}

.lhm > li {
  padding-left: 10px;
  padding-right: 10px;
}

.lhl > li {
  padding-left: 20px;
  padding-right: 20px;
}

.lhxl > li {
  padding-left: 25px;
  padding-right: 25px;
}

.lhxxl > li {
  padding-left: 30px;
  padding-right: 30px;
}

.list2cols {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 2%;
  -moz-column-gap: 2%;
  -ms-column-gap: 2%;
  -o-column-gap: 2%;
  column-gap: 2%;
  -webkit-column-width: "49%";
  -moz-column-width: "49%";
  -ms-column-width: "49%";
  -o-column-width: "49%";
  column-width: "49%";
}

.list3cols {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 2%;
  -moz-column-gap: 2%;
  -ms-column-gap: 2%;
  -o-column-gap: 2%;
  column-gap: 2%;
  -webkit-column-width: "32%";
  -moz-column-width: "32%";
  -ms-column-width: "32%";
  -o-column-width: "32%";
  column-width: "32%";
}

/*doc
---
title: Borders
name: border
category: Layout
---

If you need to add a basic border to an element, use the following classes instead of adding to the CSS file.

```html_example
<div class="cols6 bas">
  <h2 class="txtC pam">Plain borders all around!</h2>
</div>

<div class="cols6 bbm">
  <h3 class="pas">Sometimes you just need one.</h3>
</div>
```


Type         |             | **Description**
--------     | ----------  | -----------
b            | border      | 
**Location** |             | 
a            | all         | Adds border to all sides of the element
h            | horizontal  | Adds border to the left and right sides of the element
v            | vertical    | Adds border to the top and bottom sides of the element
t            | top         | Adds border to the top side of the element
l            | left        | Adds border to the left side of the element
b            | bottom      | Adds border to the bottom side of the element
r            | right       | Adds border to the right side of the element
**Size**     |             |
z            | zero        | No border width
s            | small       | Small border width
m            | medium      | Medium border width

*/
.bvz {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

.bvs {
  border-top-style: solid;
  border-top-color: #cdd0d2;
  border-top-width: 1px !important;
  border-bottom-style: solid;
  border-bottom-color: #cdd0d2;
  border-bottom-width: 1px !important;
}

.bvm {
  border-top-style: solid;
  border-top-color: #cdd0d2;
  border-top-width: 2px !important;
  border-bottom-style: solid;
  border-bottom-color: #cdd0d2;
  border-bottom-width: 2px !important;
}

.bhz {
  border-left-width: 0 !important;
  border-right-width: 0 !important;
}

.bhs {
  border-left-style: solid;
  border-left-color: #cdd0d2;
  border-left-width: 1px !important;
  border-right-style: solid;
  border-right-color: #cdd0d2;
  border-right-width: 1px !important;
}

.bhm {
  border-left-style: solid;
  border-left-color: #cdd0d2;
  border-left-width: 2px !important;
  border-right-style: solid;
  border-right-color: #cdd0d2;
  border-right-width: 2px !important;
}

.blz {
  border-left-width: 0 !important;
}

.bls {
  border-left-style: solid;
  border-left-color: #cdd0d2;
  border-left-width: 1px !important;
}

.blm {
  border-left-style: solid;
  border-left-color: #cdd0d2;
  border-left-width: 2px !important;
}

.brz {
  border-right-width: 0 !important;
}

.brs {
  border-right-style: solid;
  border-right-color: #cdd0d2;
  border-right-width: 1px !important;
}

.brm {
  border-right-style: solid;
  border-right-color: #cdd0d2;
  border-right-width: 2px !important;
}

.btz {
  border-top-width: 0 !important;
}

.bts {
  border-top-style: solid;
  border-top-color: #cdd0d2;
  border-top-width: 1px !important;
}

.btm {
  border-top-style: solid;
  border-top-color: #cdd0d2;
  border-top-width: 2px !important;
}

.bbz {
  border-bottom-width: 0 !important;
}

.bbs {
  border-bottom-style: solid;
  border-bottom-color: #cdd0d2;
  border-bottom-width: 1px !important;
}

.bbm {
  border-bottom-style: solid;
  border-bottom-color: #cdd0d2;
  border-bottom-width: 2px !important;
}

.baz {
  border-width: 0 !important;
}

.bas {
  border-style: solid;
  border-color: #cdd0d2;
  border-width: 1px !important;
}

.bam {
  border-style: solid;
  border-color: #cdd0d2;
  border-width: 2px !important;
}

.modalCover_dark {
  background-color: rgba(0, 0, 0, 0.85);
}

.modalCover_light {
  background-color: rgba(255, 255, 255, 0.85);
}

.modal {
  position: fixed;
  top: 0;
  left: 50%;
  display: none;
  width: 600px;
  margin: 6em auto 0 -300px;
}

.beingModal {
  z-index: 6001001 !important;
}

.modalCover {
  position: fixed;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 6001000;
}

body.underModal {
  overflow: hidden !important;
}

/*doc
---
title: Forms
name: form
category: Forms
author: Susan Lin
---

Each group form field is wrapped by field, usually consisting of a label and a type of form field.
The form field is wrapped by class `fieldItem` plus the type of form field: `text`, `select`, `radio`, and `checkbox`

##Form containers
Forms need to have class form.

```html_example
<form class="form">
  ...your form fields
</form>
```

#Labels
Labels accompany most form fields.

```html_example
<form class="form">
  <div class="field">
    <label for="somethingNotHere" class="fieldLabel">Put labels on things</label>
  </div>
</form>
````
##Left Labels
Add class `labelLeft` to `label`.

```html_example
<form class="form">
  <div class="field">
    <label for="textLeft1" class="labelLeft fieldLabel">Label on the left</label>
    <span class="fieldItem text">
      <input type="text" id="textLeft1">
    </span>
  </div>
</form>
```

###Multiple fields with label on left
Add class `labelLeft` to parent container.

```html_example
<form class="form">
  <div class="labelLeft">
    <div class="field">
      <label for="text111" class="fieldLabel">Label on the left</label>
      <span class="fieldItem text">
        <input type="text" id="text111">
      </span>
    </div>
    <div class="field">
      <label for="text222" class="fieldLabel">Label on the left</label>
      <span class="fieldItem text">
        <input type="text" id="text222">
      </span>
    </div>
  </div>
</form>
```
>My left label doesn't fit! If you anticipate long labels, we highly recommend just
using one on top instead.

*/
/*doc
---
title: Field Sizes
name: forms_w_Examples
category: Forms
author: Susan Lin
---

Sometimes you want a line of mixed fields which match the height of our
buttons. Inputs and Selects can be modified with `fieldSml` or
`fieldLrg`

### Default Size

```html_example
<form class="form">
  <div class="field">
    <label class="fieldLabel">Your email address</label>
    <ul class="fieldGroup fieldGroupInline">
      <li>
        <label for="textboxinline4">Email address 0</label>
        <span class="fieldItem text">
          <input type="text" id="textboxinline4">
        </span>
      </li>
      <li>
        <span class="fieldItem select">
          <select id="select">
            <option value="">Any</option>
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </span>
      </li>
      <li>
        <button class="btn btnDefault">Submit</button>
      </li>
    </ul>
  </div>
</form>
```
### Small Size
An example using `fieldSml` modifiers.

```html_example
<form class="form">
  <div class="field">
    <label class="fieldLabel">Your email address</label>
    <ul class="fieldGroup fieldGroupInline">
      <li>
        <label for="textboxinline4">Email address 0</label>
        <span class="fieldItem text">
          <input type="text" id="textboxinline4" class="fieldSml">
        </span>
      </li>
      <li>
        <span class="fieldItem select">
          <select id="select" class="fieldSml">
            <option value="">Any</option>
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </span>
      </li>
      <li>
        <button class="btn btnDefault btnSml">Submit</button>
      </li>
    </ul>
  </div>
</form>
```
### Large Size
An example using `fieldLrg` modifiers.

```html_example
<form class="form">
  <div class="field">
    <label class="fieldLabel">Your email address</label>
    <ul class="fieldGroup fieldGroupInline">
      <li>
        <label for="textboxinline4">Email address 0</label>
        <span class="fieldItem text">
          <input type="text" id="textboxinline4" class="fieldLrg">
        </span>
      </li>
      <li>
        <span class="fieldItem select">
          <select id="select" class="fieldLrg">
            <option value="">Any</option>
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </span>
      </li>
      <li>
        <button class="btn btnDefault btnLrg">Submit</button>
      </li>
    </ul>
  </div>
</form>
```

*/
/*doc
---
title: Layout with Forms
name: forms_x_Examples
category: Forms
author: Susan Lin
---

##Sizing with Cols
You can use `cols<n>` to give labels or form fields (`<inputs>`, `<selects>`, etc) different sizing

```html_example
<form class="form">
  <div class="field">
    <label for="text234" class="fieldLabel labelLeft cols3">Label with input</label>
    <span class="fieldItem text">
      <input type="text" id="text234" class="cols6">
    </span>
  </div>
</form>
```

##Sizing within Grids
You can use the grid to create column layouts within your form.

```html_example
<form class="form">
  <div class="line">
    <div class="col cols12">
      <div class="field">
        <label class="fieldLabel">Select your option set 1</label>
        <ul class="fieldGroup">
          <li>
            <span class="fieldItem checkbox">
              <input type="checkbox" id="checkboxgroupcol1" name="checkboxgroupcol">
              <label for="checkboxgroupcol1">Label for checkbox</label>
            </span>
          </li>
          <li>
            <span class="fieldItem checkbox">
              <input type="checkbox" id="checkboxgroupcol2" name="checkboxgroupcol">
              <label for="checkboxgroupcol2">Label for checkbox</label>
            </span>
          </li>
          <li>
            <span class="fieldItem checkbox">
              <input type="checkbox" id="checkboxgroupcol3" name="checkboxgroupcol">
              <label for="checkboxgroupcol3">Label for checkbox</label>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="col lastCol">
      <div class="field">
        <label class="fieldLabel">Select your option set 2</label>
        <ul class="fieldGroup">
          <li>
            <span class="fieldItem checkbox">
              <input type="checkbox" id="checkboxgroupcol4" name="checkboxgroupcol2">
              <label for="checkboxgroupcol4">Label for checkbox</label>
            </span>
          </li>
          <li>
            <span class="fieldItem checkbox">
              <input type="checkbox" id="checkboxgroupcol5" name="checkboxgroupcol2">
              <label for="checkboxgroupcol5">Label for checkbox</label>
            </span>
          </li>
          <li>
            <span class="fieldItem checkbox">
              <input type="checkbox" id="checkboxgroupcol6" name="checkboxgroupcol2">
              <label for="checkboxgroupcol6">Label for checkbox</label>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</form>
```

*/
/*doc
---
title: Warning Forms
name: forms_y_Examples
category: Forms
author: Susan Lin
---

Sometimes you need to give feedback to the user. Add `fieldWarning` to the `field` element.
Use <a href="javascript.html#Tooltips">Tooltips</a> to expound on exact issues, e.g. "Email must contain @"

```html_example

<form class="form">

  <div class="field fieldWarning">
    <label for="foo" class="fieldLabel">Label with input</label>
    <span class="fieldItem text">
      <input type="text" id="foo" class="cols6" placeholder="I want words inside of me">
    </span>
  </div>

  <div class="field fieldWarning">
    <label for="bar" class="fieldLabel">Label with textarea</label>
    <span class="fieldItem text">
      <textarea id="bar" rows="4"></textarea>
    </span>
  </div>

  <div class="field fieldWarning">
    <label for="foobar" class="fieldLabel">Label with select</label>
    <span class="fieldItem select">
      <select id="foobar">
        <option value="">Any</option>
        <option value="0">Option 0</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </span>
  </div>

  <div class="field fieldWarning">
    <label for="dropdown" class="fieldLabel">Dropdown</label>
    <span class="fieldItem fieldAppend text">
      <input id="dropdown" aria-labelledby="dropdownBtn" class="cols12" type="text"><button id="dropdownBtn" class="addOn btn btnDefault">
        <i class="iconDownOpen"></i>
      </button>
    </span>
  </div>

</form>
```
*/
/*doc
---
title: Field Inline Text
name: forms_z_Examples
category: Forms
author: JD
---

If you need to align text next to a input, or have text sit nicely next
to a label in place of an input you can use the `fieldInlineText` class.

```html_example

<form class="form">

  <div class="field">
    <label for="foo" class="fieldLabel labelLeft">Label with input</label>
    <span class="fieldItem text">
      <input type="text" id="foo" class="cols10" placeholder="I want words inside of me">
      <span class="fieldInlineText">These words are outside!</span>
    </span>
  </div>

  <div class="field">
    <label for="foo" class="fieldLabel labelLeft">Input some text</label>
    <span class="fieldItem">
      <span class="fieldInlineText">HAHAHA! You cannot!</span
    </span>
  </div>

</form>
```
*/
/*doc
---
title: Field Hints
name: forms_zz_Examples
category: Forms
author: JD
---

Fields can have hint text:

```html_example
<form class="form">

  <div class="field">
    <label for="foo" class="fieldLabel labelLeft">Label with input</label>
    <span class="fieldItem text">
      <input type="text" id="foo" class="cols10" placeholder="I want words inside of me">
      <div class="fieldHint">Use letters and words to fill the form</div>
    </span>
  </div>

  <div class="field fieldWarning">
    <label for="foo" class="fieldLabel labelLeft">Label with input</label>
    <span class="fieldItem text">
      <input type="text" id="foo" class="cols10" placeholder="I want words inside of me">
      <div class="fieldHint">Use letters and words to fill the form</div>
    </span>
  </div>

</form>
```
*/
.form .fieldGroup, .form .fieldGroupInline, .form .fieldItem {
  display: table-cell;
  width: 10000px;
}

/*doc
---
title: Checkboxes and Radios
category: Forms
name: forms_e_radioButtonsCheckBoxes
---

##Checkbox

```html_example
<form class="form">
  <div class="field">
    <span class="fieldItem checkbox">
      <input type="checkbox" id="checkbox1-1" name="checkbox1">
      <label for="checkbox1-1">Label for checkbox</label>
    </span>
  </div>
</form>
```

##Large Checkbox

The large checkboxes are more of a mobile component compared to the previous checkbox. Size of the checkbox can also scale with the label font size.

```html_example
<form class="form bas" style="width:400px;">
  <div class="field">
    <span class="fieldItem checkbox checkboxLrg">
      <input type="checkbox" id="checkbox1-2" name="checkbox2">
      <label for="checkbox1-2">Label for checkbox <span class="iconCheck"></span></label>
    </span>
  </div>
  <div class="field">
    <span class="fieldItem checkbox checkboxLrg">
      <input type="checkbox" id="checkbox1-3" name="checkbox2">
      <label for="checkbox1-3">Label for checkbox <span class="iconCheck"></span></label>
    </span>
  </div>
</form>
```

##Radio Button

```html_example
<form class="form">
  <div class="field">
    <span class="fieldItem radio">
      <input type="radio" id="radio1-1" name="radio1">
      <label for="radio1-1">Label for radio button 1</label>
    </span>
  </div>
  <div class="field">
    <span class="fieldItem radio">
      <input type="radio" id="radio1-2" name="radio1">
      <label for="radio1-2">Label for radio button 2</label>
    </span>
  </div>
</form>
```

*/
.form .radio,
.form .checkbox {
  position: relative;
}
.form .radio label,
.form .checkbox label {
  cursor: pointer;
  display: block;
  width: auto;
  padding-left: 20px;
}
.form .radio input,
.form .checkbox input {
  margin-right: 5px;
  padding: 0;
  float: left;
  position: relative;
  top: 7px;
  border: 0;
  line-height: 1.5;
  vertical-align: middle;
}
.form .radio.checkboxLrg,
.form .checkbox.checkboxLrg {
  position: relative;
}
.form .radio.checkboxLrg input[type=checkbox],
.form .checkbox.checkboxLrg input[type=checkbox] {
  opacity: 0;
  position: absolute;
}
.form .radio.checkboxLrg label,
.form .checkbox.checkboxLrg label {
  padding-left: 0;
  width: 100%;
  margin: .5em 0 .5em 1em;
  display: inline-block;
}
.form .radio.checkboxLrg .iconCheck,
.form .checkbox.checkboxLrg .iconCheck {
  position: absolute;
  right: 10px;
  top: 0.25em;
  border: 1px solid #869099;
  width: 2em;
  height: 2em;
  border-radius: 100%;
  display: inline-block;
}
.form .radio.checkboxLrg .iconCheck:before,
.form .checkbox.checkboxLrg .iconCheck:before {
  display: none;
  color: white;
}
.form .radio.checkboxLrg input:checked + label .iconCheck,
.form .checkbox.checkboxLrg input:checked + label .iconCheck {
  border-color: #20c063;
  background-color: #20c063;
}
.form .radio.checkboxLrg input:checked + label .iconCheck:before,
.form .checkbox.checkboxLrg input:checked + label .iconCheck:before {
  display: inline-block;
  padding: .15em 0 0 .5em;
}
.form .radio.checkboxLrg input:checked + label,
.form .checkbox.checkboxLrg input:checked + label {
  color: #10a75f;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .form .radio input {
    top: 0.25em;
  }
  .form .radio input[type="radio"] {
    left: 1px;
  }
  .form .checkbox input {
    top: 0.35em;
  }
}

@-moz-document url-prefix() {
  .form .radio input, .form .checkbox input {
    top: 0.3em;
  }
}

@media screen and (min-width: 0 \0) {
  .form .radio input, .form .checkbox input {
    top: 5px;
  }
}
/*doc
---
title: Form Group
category: Forms
name: forms_f_fieldGroup
---

Use `fieldGroup` on `ul` if the list of form fields are related.

##List of radio buttons

```html_example
<form class="form">
  <div class="field">
    <label class="fieldLabel">Select your options</label>
    <ul class="fieldGroup">
      <li>
        <span class="fieldItem radio">
          <input type="radio" id="radiogroup1" name="radiogroup">
          <label for="radiogroup1">Label for radio button</label>
        </span>
      </li>
      <li>
        <span class="fieldItem radio">
          <input type="radio" id="radiogroup2" name="radiogroup">
          <label for="radiogroup2">Label for radio button</label>
        </span>
      </li>
      <li>
        <span class="fieldItem radio">
          <input type="radio" id="radiogroup3" name="radiogroup">
          <label for="radiogroup3">Label for radio button</label>
        </span>
      </li>
    </ul>
  </div>
</form>
```

##List of checkboxes

```html_example
<form class="form">
  <div class="field">
    <label class="fieldLabel">Select your option</label>
    <ul class="fieldGroup">
      <li>
        <span class="fieldItem checkbox">
          <input type="checkbox" id="checkboxgroup1" name="checkboxgroup">
          <label for="checkboxgroup1">Label for checkbox</label>
        </span>
      </li>
      <li>
        <span class="fieldItem checkbox">
          <input type="checkbox" id="checkboxgroup2" name="checkboxgroup">
          <label for="checkboxgroup2">Label for checkbox</label>
        </span>
      </li>
      <li>
        <span class="fieldItem checkbox">
          <input type="checkbox" id="checkboxgroup3" name="checkboxgroup">
          <label for="checkboxgroup3">Label for checkbox</label>
        </span>
      </li>
    </ul>
  </div>
</form>
```

##List of inputs

```html_example
<h5> List of inputs </h5>
<form class="form">
  <div class="field">
    <label class="fieldLabel">Your email addresses</label>
    <ul class="fieldGroup">
      <li>
        <label for="inputblock">Email address 0</label>
        <span class="fieldItem text">
          <input type="text" id="inputblock">
        </span>
      </li>
      <li>
        <label for="inputblock">Email address 1</label>
        <span class="fieldItem text">
          <input type="text" id="inputblock">
        </span>
      </li>
      <li>
        <label for="inputblock">Email address 2</label>
        <span class="fieldItem text">
          <input type="text" id="inputblock">
        </span>
      </li>
    </ul>
  </div>
</form>
```

##List of selects

```html_example
<h5>List of selects</h5>
<form class="form">
  <div class="field">
    <label class="fieldLabel">Select your options</label>
    <ul class="fieldGroup">
      <li>
        <label for="inputblock">Option 0</label>
        <span class="fieldItem select">
          <select id="inputblock">
            <option value="">Any</option>
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </span>
      </li>
      <li>
        <label for="inputblock">Option 1</label>
        <span class="fieldItem select">
          <select id="inputblock">
            <option value="">Any</option>
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </span>
      </li>
      <li>
        <label for="inputblock">Option 2</label>
        <span class="fieldItem select">
          <select id="inputblock">
            <option value="">Any</option>
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
        </span>
      </li>
    </ul>
  </div>
</form>
```

*/
.form .fieldGroup {
  margin: 0;
}
.form .fieldGroup > li {
  margin: 5px 0;
}
.form .fieldGroup > li > label {
  display: block;
  margin-bottom: 2px;
}
.form .fieldGroup:before, .form .fieldGroup:after {
  display: table;
  content: '';
  clear: both;
}

/*doc
---
title: Inline Form Group
category: Forms
name: forms_g_fieldGroupInline
---

Use `fieldGroupInline` on `ul` if the list of form fields are related and inline.

##List of inline radio buttons

```html_example
<h5>List of inline radio buttons</h5>
<form class="form">
  <div class="field">
    <label class="fieldLabel">Select your options</label>
    <ul class="fieldGroup fieldGroupInline">
      <li>
        <span class="fieldItem radio">
          <input type="radio" id="radiogroupinline1" name="radioinlinegroup">
          <label for="radiogroupinline1">Label for radio button</label>
        </span>
      </li>
      <li>
        <span class="fieldItem radio">
          <input type="radio" id="radiogroupinline2" name="radioinlinegroup">
          <label for="radiogroupinline2">Label for radio button</label>
        </span>
      </li>
      <li>
        <span class="fieldItem radio">
          <input type="radio" id="radiogroupinline3" name="radioinlinegroup">
          <label for="radiogroupinline3">Label for radio button</label>
        </span>
      </li>
    </ul>
  </div>
</form>
```

##List of inline checkboxes

```html_example
<form class="form">
  <div class="field">
    <label class="fieldLabel">Select your options</label>
    <ul class="fieldGroup fieldGroupInline">
      <li>
        <span class="fieldItem checkbox">
          <input type="checkbox" id="radioblock1" name="checkboxinlinegroup">
          <label for="radioblock1">Label for checkbox</label>
        </span>
      </li>
      <li>
        <span class="fieldItem checkbox">
          <input type="checkbox" id="radioblock2" name="checkboxinlinegroup">
          <label for="radioblock2">Label for checkbox</label>
        </span>
      </li>
      <li>
        <span class="fieldItem checkbox">
          <input type="checkbox" id="radioblock3" name="checkboxinlinegroup">
          <label for="radioblock3">Label for checkbox</label>
        </span>
      </li>
    </ul>
  </div>
</form>
```

##List of inline textboxes

```html_example
<form class="form">
  <div class="field">
    <label class="fieldLabel">Your email address</label>
    <ul class="fieldGroup fieldGroupInline">
      <li>
        <label for="textboxinline1">Email address 0</label>
        <span class="fieldItem text">
          <input type="text" id="textboxinline1">
        </span>
      </li>
      <li>
        <label for="textboxinline2">Email address 1</label>
        <span class="fieldItem text">
          <input type="text" id="textboxinline2">
        </span>
      </li>
      <li>
        <label for="textboxinline3">Email address 2</label>
        <span class="fieldItem text">
          <input type="text" id="textboxinline3">
        </span>
      </li>
    </ul>
  </div>
</form>
```

*/
.form .fieldGroupInline > li {
  margin-left: 10px;
  float: none;
  display: inline-block;
}
.form .fieldGroupInline > li:first-child {
  margin-left: 0;
}
.form .fieldGroupInline > li > label {
  display: inline-block;
  margin: 0;
}
.form .fieldGroupInline label,
.form .fieldGroupInline .fieldItem {
  vertical-align: middle;
  float: none;
  display: inline-block;
  width: auto;
}
.form .fieldGroupInline label {
  padding-right: 5px;
}
.form .fieldGroupInline .radio input,
.form .fieldGroupInline .checkbox input {
  top: 1px;
  float: none;
  vertical-align: middle;
}
.form .fieldGroupInline .radio label,
.form .fieldGroupInline .checkbox label {
  padding-left: 0;
}

/*doc
---
title: Range Input
name: forms_b_fieldRange
category: Forms
---


```html_example
<form class="form">
  <div class="field">
    <label for="range1" class="fieldLabel">Range inputs</label>
    <ul class="fieldGroup fieldRange">
      <li class="cols12">
        <span class="fieldItem text">
          <input type="text" id="range1">
        </span>
      </li>
      <li class="rangeLabel">
        <label for="range2">to</label>
      </li>
      <li class="cols12">
        <span class="fieldItem text">
          <input type="text" id="range2">
        </span>
      </li>
    </ul>
  </div>
</form>
```

*/
.form .fieldRange > li {
  display: table-cell;
  vertical-align: middle;
}
.form .fieldRange .rangeLabel {
  padding: 0 10px;
}

/*doc
---
title: Input
category: Forms
name: forms_a_input
---

```html_example
<form class="form">
  <div class="field">
    <label for="text1" class="fieldLabel">Label with input</label>
    <span class="fieldItem text">
      <input type="text" id="text1" placeholder="I want words inside of me">
    </span>
  </div>
</form>
```

*/
.form .text input {
  width: 100%;
  color: #3b4144;
  padding: 0.7em 0.5em 0.4em 0.6em;
  height: 37px;
}
.form .text input.fieldSml {
  height: 33px;
}
.form .text input.fieldLrg {
  height: 48px;
}
.form .text::-ms-clear {
  display: none;
}

/*doc
---
category: Forms
title: Select
name: forms_d0_select
---

```html_example
<form class="form">
  <div class="field">
    <label for="select" class="fieldLabel">Label with select</label>
    <span class="fieldItem select">
      <select id="select">
        <option value="">Any</option>
        <option value="0">Option 0</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </span>
  </div>
</form>
```

*/
.form .select select {
  height: 37px;
  width: 100%;
}

/*doc
---
title: Pretty Select
category: Forms
name: forms_d1_select
author: JD
---

Occasionally you have a select dropdown in a high-visibility spot on the
page. For the most part we try to use the default browser selects but
this does not always work well with the site's look and feel. In that
case use a pretty select. This will create a select that looks good on
most modern browsers while falling back to the default browser select in
older browsers (IE8 and below). Furthermore it should still allow
regular select accessibility features to work.

```html_example
<form class="form">
  <div class="field">
    <label for="select" class="fieldLabel">Label with select</label>

      <div class="">
       <span class="fieldItem select">
          <div class="selectPretty">
            <select>
              <option value="">Any</option>
              <option value="0">Option 0</option>
              <option selected value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
            <div class="selectDisplay btn btnDefault">
              <span class="selectLabel">Option 1</span>
              <span class="selectTrigger"><i class="iconDownOpen"></i></span>
            </div>
          </div>
        </span>
      </div>

  </div>
</form>
```

```js_example
$(document).ready(function () {
  $('.selectPretty').truliaSelect();
});
```

## jQuery Plugin: truliaSelect

Options         | Description
----------------|----------
`labelTextFn`   | Define a custom function for determining what to display when the user selects an option. Defaults to: `function ($el, $select, $label, $input) { return $select.find(':selected').text(); };`
**Methods**     |
 `refresh`      | Syncs the label text with the currently selected value in the input (useful for programmatically changing `select` values and then updating the UI to reflect the new value)


## ComboBox Example

Occasionally you might want rig up a combobox style select.
Combobox means that a user can either enter text in an input,
or use a select to choose from default options. In that case
just add a `fieldItem comboBox text` node with an input field inside the
`selectPretty` node.

**Nota Bene** There are two things that you will need to do to make this work:
<br>
**1.** Add a class of .comboBox to the .fieldItem
<br>
**2.** It's up to you to grab the correct value when the form is submitted.
If you're using a combobox you should *always* use the input as the real value.**

```html_example
<form class="form">
  <div class="field">
    <label for="select" class="fieldLabel">Label with select</label>

      <div class="">
       <span class="fieldItem select">
          <div class="selectPretty">
            <select>
              <option value="">Any</option>
              <option value="0">Option 0</option>
              <option selected value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
            <span class="fieldItem comboBox text">
              <input type="text" placeholder="text goes here" >
            </span>
            <div class="selectDisplay btn btnDefault">
              <span class="selectLabel">Option 1</span>
              <span class="selectTrigger"><i class="iconDownOpen"></i></span>
            </div>
          </div>
        </span>
      </div>

  </div>
</form>
```

```js_example
$(document).ready(function () {
  $('.selectPretty').truliaSelect();
});
```

*/
.form .selectPretty {
  width: 100%;
  position: relative;
  font-size: 15px;
  white-space: normal;
}
.form .selectPretty .selectDisplay {
  width: 100%;
  padding-right: 0;
  box-shadow: none;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.form .selectPretty .selectDisplay.btn, .form .selectPretty .selectDisplay.btnDefault {
  padding: 0.6em 0.5em 0.5em 0.6em;
  font-family: PostGrotesk, sans-serif;
  font-weight: 400;
  line-height: 1.2;
}
.form .selectPretty select:focus + .selectDisplay.btn,
.form .selectPretty .selectActive {
  border: 1px solid #20c063;
}
.form .selectPretty .selectTrigger {
  display: inline-block;
  padding: 0 0 0 5px;
  float: right;
  margin: 0;
}
.form .selectPretty .selectTrigger > i:before {
  margin-right: 0 !important;
}
.form .selectPretty select {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.form .selectPretty input {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.form .selectPretty .fieldItem.comboBox {
  width: calc(100% - 33px);
}
.form .selectPretty .text {
  position: absolute;
}

/*doc
---
title: Textarea
category: Forms
name: forms_c_textarea
---

```html_example
<form class="form">
  <div class="field">
    <label for="textarea" class="fieldLabel">Label with textarea</label>
    <span class="fieldItem text">
      <textarea id="textarea" rows="4"></textarea>
    </span>
  </div>
</form>
```

*/
.form .text textarea {
  width: 100%;
  padding: 8px;
  color: #3b4144;
}

/*doc
---
title: Add Ons
name: addOn
category: Forms
author: JD
test: true
---

There are many cases where text needs to be around an input. You can use
these decorators so that your text will align nicely next to the input
and be clear that it is related to the input. To use a field decorator
you add `fieldAppend` or `fieldPrepend` to your `fieldItem` and then
inside the `fieldItem` you add an `addOn` class.

There are two caveats when using these components:

1. There must not be any white space or line break betweent the .addOn
element and the input element.
2. The input must be sized so that there is room for the .addOn element
(so use a colsN class).

```html_example
<div class="form">
  <div class="field">
    <label for="how_much" class="fieldLabel">How much?</label>
    <span class="fieldItem fieldAppend text">
      <input id="how_much" aria-labelledby="zero_cents" class="cols12" type="text"><span id="zero_cents" class="addOn addOnBasic">.00</span>
    </span>
  </div>
  <div class="field">
    <label for="how_much" class="fieldLabel">How much?</label>
    <span class="fieldItem fieldPrepend text">
      <span id="dollars" class="addOn addOnBasic">$</span><input aria-labelledby="dollars" id="how_much" class="cols12" type="text">
    </span>
  </div>
</div>
```

*/
@-moz-document url-prefix() {
  .form .addOn {
    padding: 0.58rem 0.8rem 0.48rem !important;
    height: 37px;
    font-size: 15px;
  }

  .form .fieldAppend input + .addOn.btn {
    padding: 0.58rem 0.6rem 0.48rem 0.5rem !important;
  }
}

@media screen and (min-width: 0 \0) {
  .form .addOn {
    padding: 0.6em 0.8em 0.55em !important;
  }

  .form .fieldAppend input + .addOn.addOnBasic {
    line-height: 1.1em;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari only override */
  ::i-block-chrome, .form .addOn {
    padding: 0.6em 0.8em 0.55em !important;
  }

  ::i-block-chrome, .form .fieldAppend input + .addOn.addOnBasic {
    line-height: 1.1em;
  }
}
/*doc
---
name: addOnBasic
parent: addOn
title: Basic AddOn
test: true
---

```html_example
<div class="form">
  <div class="field">
    <label for="percent" class="fieldLabel">Percent Down</label>
    <span class="fieldItem fieldAppend text">
      <input id="percent" aria-labelledby="percentage" class="cols12" type="text"><span id="percentage" class="addOn addOnBasic">%</span>
    </span>
  </div>
</div>
```

*/
/*doc
---
name: addOnBtn
parent: addOn
title: Button AddOn
test: true
---

This can use any kind of icon, not just for dropdowns.

```html_example
<div class="form">
  <div class="field">
    <label for="dropdown" class="fieldLabel">Dropdown</label>
    <span class="fieldItem fieldAppend text">
      <input id="dropdown" aria-labelledby="dropdownBtn" class="cols12" type="text"><button id="dropdownBtn" class="addOn btn btnDefault">
        <i class="iconDownOpen"></i>
      </button>
    </span>
  </div>
</div>
```

*/
.form .text input, .form .select select, .form .text textarea, .form .addOn {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-family: PostGrotesk, sans-serif;
  font-weight: 400;
  padding: 0.6em 0.8em 0.5em;
  border-radius: 4px;
  border: 1px solid #cdd1d4;
  line-height: 1.2;
  transition: border 0.2s;
}
.form .text input:focus, .form .select select:focus, .form .text textarea:focus, .form .addOn:focus {
  outline: none;
  border: 1px solid #20c063;
}

.form .fieldGroup, .form .fieldGroupInline, .form .fieldItem {
  display: table-cell;
  width: 10000px;
}

::-webkit-input-placeholder {
  color: #b1b6bb;
}

::-moz-placeholder {
  color: #b1b6bb;
}

:-ms-input-placeholder {
  color: #b1b6bb;
}

.placeholder {
  color: #b1b6bb;
}

.form .fieldWarning .text textarea,
.form .fieldWarning .text input {
  border: 1px solid #e13009;
}
.form .fieldWarning .select select {
  border: 1px solid #e13009;
}
.form .fieldWarning .fieldHint, .form .fieldWarning .fieldLabel {
  color: #e13009;
}
.form .col:first-child {
  margin-top: 0;
}
.form .col:last-child {
  margin-bottom: 0;
}
.form .fieldInlineText {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 6px;
  display: inline-block;
}
.form .fieldHint {
  font-size: 14px;
  color: #b1b6bb;
  margin-top: 2px;
}
.form .fieldSml,
.form .select .fieldSml {
  font-size: 13px;
  height: 33px;
}
.form .fieldLrg,
.form .select .fieldLrg {
  font-size: 18px;
  height: 48px;
}
.form textarea.fieldSml,
.form textarea.fieldLrg {
  height: auto;
}
.form .fieldLabel {
  margin-bottom: 2px;
  min-height: 1px;
  display: block;
  color: #869099;
  font-size: 14px;
  text-transform: uppercase;
}
.form .fieldLabel[for] {
  cursor: pointer;
}
.form label.labelLeft,
.form .labelLeft .fieldLabel {
  width: 30%;
  float: left;
  padding: 0.5em 10px;
  margin-right: 10px;
  text-align: right;
}

.form .fieldPrepend .addOn {
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.form .fieldPrepend .addOn.addOnFieldFocus {
  border-top: 1px solid #20c063;
  border-bottom: 1px solid #20c063;
  border-left: 1px solid #20c063;
}
.form .fieldPrepend .addOn + input {
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.form .fieldAppend input,
.form .fieldAppend input:focus {
  -moz-border-radius-topright: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.form .fieldAppend input + .addOn {
  -moz-border-radius-topleft: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}
.form .fieldWarning .addOn {
  border: 1px solid #e13009;
}
.form .fieldWarning .fieldAppend input + .addOn, .form .fieldWarning .fieldAppend input + .addOn.btn, .form .fieldWarning .fieldPrepend .addOn + input {
  border-color: #e13009;
  border-left: none;
}

.addOnBasic {
  background: none;
  color: #474e52;
  text-shadow: none;
}

input:focus ~ .addOnBasic {
  border: 1px solid #20c063;
  border-left: none;
}

.form .fieldAppend input + .addOn.btn {
  border-left: 1px solid #cdd1d4;
  width: auto;
  vertical-align: baseline;
  box-shadow: none;
  font-size: 15px;
  height: 37px;
  padding: 0.5em 0.6em 0.4em 0.5em;
}
.form .fieldAppend input + .addOn.btn i {
  line-height: 1;
}
.form .fieldAppend .addOn.btn > i:before {
  margin-right: 0 !important;
}
.form input:focus + .addOn.btn {
  border: 1px solid #20c063;
}

.toggle {
  position: relative;
  cursor: pointer;
}

.toggleArrow:before {
  content: '\e835';
}
.toggleArrow .active {
  display: none;
}

.toggleArrowActive:before {
  content: '\e871';
}

.toggleActive .active {
  display: inline-block;
}
.toggleActive .inactive {
  display: none;
}

.slider {
  position: relative;
  display: block;
  width: 100%;
  height: 25px;
}

.sliderLine {
  position: absolute;
  display: block;
  top: 9px;
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
  border-radius: 4px;
  background-color: #cdd1d4;
  box-shadow: inset 0 1px 5px #e8e9ea;
}

.sliderHandle {
  position: absolute;
  display: block;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #cdd1d4;
  border-radius: 50%;
  background-color: white;
  z-index: 1;
  cursor: pointer;
}

.switch {
  margin: 10px;
  cursor: pointer;
}
.switch:after {
  content: "";
  display: table;
  clear: both;
}
.switch label {
  float: left;
  display: block;
  font-size: 14px;
  line-height: 30px;
  color: #b1b6bb;
  cursor: pointer;
  transition: 0.5s all ease-in-out;
}
.switch label:first-of-type {
  color: #474e52;
}
.switch label:hover {
  color: #20c063;
}
.switch .knob {
  float: left;
  width: 55px;
  height: 28px;
  margin: 0 10px;
  border-radius: 14px;
  background: #f5f6f7;
  border: 1px solid #cdd1d4;
  position: relative;
  backface-visibility: hidden;
  transition: 0.5s all ease-in-out;
}
.switch .knob:after {
  content: "";
  transform: translate3d(4px, 3px, 0);
  perspective: 1000px;
  transition: 0.5s all ease-in-out;
  backface-visibility: hidden;
  background: white;
  border: 1px solid #cdd1d4;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  position: absolute;
  display: block;
}
.switch .knob span {
  position: absolute;
  top: 4px;
  left: 7px;
  z-index: 1;
  color: #b1b6bb;
  transition: 0.1s all ease-in-out;
  backface-visibility: hidden;
  font-size: 12px;
  font-weight: 700;
}
.switch .knob.knobIcon {
  transition: 0.1s all ease-in-out;
}
.switch .knob.knobIcon:after {
  transition: 0.1s all ease-in-out;
}
.switch.on label:first-of-type {
  color: #b1b6bb;
}
.switch.on label:last-of-type {
  color: #474e52;
}
.switch.on .knob {
  background: #20c063;
  border: none;
  transition: 0.5s all ease-in-out;
}
.switch.on .knob:after {
  background: white;
  border: none;
  transform: translate3d(30px, 4px, 0);
  transition: 0.5s all ease-in-out;
}
.switch.on .knob span {
  color: #20c063;
  transition: 0.1s all ease-in-out;
  top: 4px;
  left: 34px;
}
.switch.on .knob.knobIcon {
  transition: 0.1s all ease-in-out;
}
.switch.on .knob.knobIcon:after {
  transition: 0.1s all ease-in-out;
}

/*doc
---
title: Frames
name: frame
category: Frames
author: August
---

A frame is a simple border around some content, usually an image but
other content can be used as well. The different skin classes generally
change the intensity and padding size of the frame.

*/
/*doc
---
parent: frame
title: Thumbnail Frame
name: frameThumb
test: true
---

```html_example
<div class="frameThumb">
  <img alt="" src="doc_assets/img/40x40.png">
</div>
```
*/
/*doc
---
parent: frame
title: Small Frame
name: frameSmall
test: true
---

```html_example
<div class="frameSmall">
  <img alt="" src="doc_assets/img/180x135.png">
  <div class="polaroid" style='width:181px;'>
    <p class="mvn">Here's a little text below the image</p>
  </div>
</div>
```
*/
/*doc
---
parent: frame
title: Standard Frame
name: frameStandard
test: true
---

```html_example
<div class="frameStandard">
  <img alt="" src="doc_assets/img/640x480.png">
</div>
```
*/
/*doc
---
parent: frame
title: Stacked frame with rotations
name: frameStacked
test: true
---

```html_example
<div class="frameStacked">
  <img alt="" src="doc_assets/img/640x480.png">
</div>
```
*/
.frameThumb, .frameSmall, .frameStandard, .frameStacked {
  display: inline-block;
}
.frameThumb img, .frameSmall img, .frameStandard img, .frameStacked img {
  display: block;
}
.frameThumb .polaroid, .frameSmall .polaroid, .frameStandard .polaroid, .frameStacked .polaroid {
  margin-top: 5px;
}

.frameThumb {
  padding: 2px;
}

.frameSmall {
  padding: 6px;
}

.frameStandard {
  padding: 8px;
}

.frameStacked {
  padding: 8px;
  position: relative;
  background-color: #fff;
}
.frameStacked:before, .frameStacked:after {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
  background-color: #f5f6f7;
  content: '';
  z-index: -5000;
}
.frameStacked:before {
  top: 0;
  left: 5px;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  transform: rotate(1deg);
}
.frameStacked:after {
  top: 0;
  right: 5px;
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);
  transform: rotate(-1deg);
}

/*doc
---
title: Overlay
name: overlay
category: Images
---

Occasionally you need some text that shows on top of an image, so in that case use an overlay class.  

**Note:** If using with an [`imageContainer`](#Image_Container) **make sure to put the <code>overlayContainer</code> inside the [`imageContainer`](#Image_Container)**.  

This fixes a known IE8 issue and forces the <code>overlayContainer</code> to inherit the width of the [`imageContainer`](#Image_Container).

*/
/*doc
---
title: Overlay Skins
parent: overlay
name: overlaySkins
test: true
---

Class                  | Description
---------------------- | -----------------
overlay                | No skin color
overlayHighlight       | Apply the green color skin
overlayLowlight        | Apply the black color skin
overlayAction          | Apply the blue color skin -- designed for actionable/clickable element
overlayDefault         | Apply the white color skin
overlayTransparent     | Apply the transparent skin
overlayTop             | Position the overlay at the top
overlayBottom          | Position the overlay at the bottom
overlayLeft            | Position the overlay on left
overlayRight           | Position the overlay on right
overlayMiddle          | Position the overlay in the middle
overlayFullWidth       | Make the overlay be full width
overlayPhoto           | Make a gradient overlay cover the bottom half of the image
overlayFull            | Make the overlay cover the entire image
overlayDescription     | Similar to overlayLowlight, but has a linear gradient skin

**Animation**          |
overlayFadeOut         | Make the overlay fade out to 0 opacity when applied
overlaySlideLeft       | Make the overlay slide to left when applied
overlaySlideRight      | Make the overlay slide to right when applied
overlaySlideUp         | Make the overlay slide to top when applied
overlaySlideDown       | Make the overlay slide to bottom when applied

```html_example
<div class="frameStandard">
  <span class="overlayContainer">
    <img src="doc_assets/img/640x480.png" width="640" height="480">
    <span class="overlayTransparent overlayBottom">You could
      <b>OWN</b> this cat!</span>
  </span>
</div>
```

```html_example
<div class="frameStandard">
  <span class="overlayContainer">
    <img src="doc_assets/img/640x480.png" width="640" height="480">
    <span class="overlayDefault overlayBottom">You could
      <b>OWN</b> this cat!</span>
  </span>
</div>
```
```html_example
<div class="frameStandard">
  <span class="overlayContainer">
    <img src="doc_assets/img/640x480.png" width="640" height="480">
    <span class="txtC overlayHighlight overlayTop overlayFullWidth ">You could
      <b>OWN</b> this cat!</span>
  </span>
</div>
```
```html_example
<div class="frameStandard">
  <span class="overlayContainer">
    <img src="doc_assets/img/640x480.png" width="640" height="480">
    <span class="overlayLowlight overlayRight overlayMiddle">You could
      <b>OWN</b> this cat!</span>
  </span>
</div>
```

```html_example
<div class="frameStandard">
  <span class="overlayContainer">
    <img src="doc_assets/img/640x480.png" width="640" height="480">
    <a class="overlayAction overlayBottom overlayRight linkTypeReversed" href="#BuyCat">
      Click to <b>BUY</b> this cat!</a>
  </span>
</div>
```

```html_example
<div class="frameStandard">
  <span class="overlayContainer">
    <img src="doc_assets/img/640x480.png" width="640" height="480">
    <span class="overlayDefault overlayFull">You could
      <b>OWN</b> this cat!</span>
  </span>
</div>
```

```html_example
<div class="frameStandard">
  <span class="overlayContainer">
    <img src="doc_assets/img/640x480.png" width="640" height="480">
    <span class="overlayPhoto overlayFull">
      <a class="blockLink linkTypeReversed typeContrast" href="www.trulia.com">
        <span class="overlayPhotoContent">
          You could <b>OWN</b> this cat!
        </span>
      </a>
    </span>
  </span>
</div>
```

```html_example
<div class="frameStandard imageContainer320x240">
  <span class="overlayContainer">
    <img src="doc_assets/img/170x240.png" />
    <span class="overlayLowlight overlayBottom overlayRight">You could
        <b>OWN</b> this cat!</span>
    </span>
</div>
```

```js_example
$(document).ready(function() {
  $('#overlayFadeOutExample').click(function() {
    $(this).find('.animate').toggleClass('overlayFadeOut');
  });

  $('#overlaySlideLeftExample').click(function() {
    $(this).find('.animate').toggleClass('overlaySlideLeft');
  });

  $('#overlaySlideRightExample').click(function() {
    $(this).find('.animate').toggleClass('overlaySlideRight');
  });

  $('#overlaySlideUpExample').click(function() {
    $(this).find('.animate').toggleClass('overlaySlideUp');
  });

  $('#overlaySlideDownExample').click(function() {
    $(this).find('.animate').toggleClass('overlaySlideDown');
  });
});
```

*/
.overlayContainer {
  position: relative;
  display: block;
  overflow: visible;
  width: inherit \9;
}
.overlayContainer img {
  display: block;
}

.overlayHighlight, .overlayLowlight, .overlayDescription, .overlayPhoto, .overlayAction, .overlayDefault, .overlayTransparent {
  position: absolute;
}

.overlayHighlight {
  color: white;
  background-color: #20c063;
  background-color: rgba(32, 192, 99, 0.7);
}

.overlayLowlight {
  color: white;
  background-color: #474e52;
  background-color: rgba(71, 78, 82, 0.7);
}

.overlayDescription {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(71, 78, 82, 0)), color-stop(100%, rgba(71, 78, 82, 0.6)));
  background-image: -webkit-linear-gradient(top, rgba(71, 78, 82, 0), rgba(71, 78, 82, 0.6));
  background-image: -moz-linear-gradient(top, rgba(71, 78, 82, 0), rgba(71, 78, 82, 0.6));
  background-image: -o-linear-gradient(top, rgba(71, 78, 82, 0), rgba(71, 78, 82, 0.6));
  background-image: linear-gradient(top, rgba(71, 78, 82, 0), rgba(71, 78, 82, 0.6));
  color: white;
}

.overlayPhoto {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(245, 246, 247, 0.1) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.8) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(30%, rgba(245, 246, 247, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.1)), color-stop(70%, rgba(0, 0, 0, 0.35)), color-stop(100%, rgba(0, 0, 0, 0.8)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(245, 246, 247, 0.1) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.8) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(245, 246, 247, 0.1) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.8) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(245, 246, 247, 0.1) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.8) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(245, 246, 247, 0.1) 30%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.8) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
  /* IE6-9 */
}

.overlayPhotoContent {
  position: relative;
  bottom: 0;
  top: 45%;
  display: block;
}

.overlayAction {
  color: white;
  background-color: #20c063;
  background-color: rgba(32, 192, 99, 0.7);
}

.overlayDefault {
  color: #474e52;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.7);
}

.overlayTop {
  top: 0;
}

.overlayBottom {
  bottom: 0;
}

.overlayLeft {
  left: 0;
}

.overlayRight {
  right: 0;
}

.overlayMiddle {
  top: 50%;
}

.overlayFullWidth {
  left: 0;
  right: 0;
}

.overlayFull {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.overlayFadeOut {
  opacity: 0;
  pointer-events: none;
}

/* animations */
.overlayFadeOut {
  opacity: 0;
  pointer-events: none;
}

.overlaySlideLeft {
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.overlaySlideRight {
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.overlaySlideUp {
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.overlaySlideDown {
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

/*doc
---
title: Badges
name: badge
category: Indicators
---

Badges are a way to display a small amount of text or an image within a
nicely formatted box.

*/
/*doc
---
title: Badge Colors
parent: badge
name: badgeSkins
test: true
---

Class                   | Description
----------------------- | -----------------
badgeNew                | This is a green badge for both new for sale and for rent properties
badgeSold               | This is a red badge for sold properties
badgeActiveContingent   | This is an orange badge for active contingent properties
badgeAssessor           | This is a grey badge for assessor properties


```html_example
<strong class="badgeNew">New</strong>
<strong class="badgeNew">For Sale</strong>
<strong class="badgeNew">For Rent</strong>
<strong class="badgeSold">Sold</strong>
<strong class="badgeActiveContingent">Active</strong>
<strong class="badgeAssessor">Assessor</strong>
```

*/
/*doc
---
title: Badge Circles
category: Indicators
name: badgeCircles
author: Sarah
---

The badge circles are used for information, for good, average and poor designations. 
They can be used in one or two integer places, but not more. i.e., 1 or 10 but not 100.
We also support three different size. For design consistency, please try to use the default where possible.
Using badgeCircleGood to illustrate color here.

```html_example
<div class="badgeCircleGood">1</div>
<div class="badgeCircleGood">10</div>
<div class="badgeCircleGood sml">1</div>
<div class="badgeCircleGood sml">10</div>
<div class="badgeCircleGood md">1</div>
<div class="badgeCircleGood md">10</div>
<div class="badgeCircleGood lrg">1</div>
<div class="badgeCircleGood lrg">10</div>
<div class="clearfix"></div>
```
*/
/*doc
---
title: Badge Circle Qualitative Colors
parent: badge
name: badgeCircleSkins
author: Sarah
---

Class                   | Description
----------------------- | -----------------
badgeCircleGood         | This badgeCircle indicates good, usually as it pertains to map or something like crime
badgeCircleAverage      | This badgeCircle indicates average, usually as it pertains to map or something like crime
badgeCirclePoor         | This badgeCircle indicates poor, usually as it pertains to map or something like crime


```html_example
<div class="badgeCircleGood">1</div>
<div class="badgeCircleAverage">1</div>
<div class="badgeCirclePoor">1</div>
<div class="clearfix"></div>
```

*/
/*doc
---
title: Markers
name: marker
category: Indicators
---

These are markers, put them on a map. Do not use on walls; they may not wash off.

Class                             | Description
--------------------------------- | -----------------
`markerPrimary`                   | Green
`markerTertiary`                  | Red
`markerHighlight`                 | Orange
`markerDefault`                   | White
`markerInverse`                   | Midnight
`markerLowlight`                  | Gray
`markerSaved`                     | Pink
`markerRound`                     | Makes your marker round and small
`markerIcon`                      | Small marker to use with single icon

```html_example

<ul class="listInline">
  <li><div class="markerPrimary">$147k</div></li>
  <li><div class="markerTertiary">$1,234</div></li>
  <li><div class="markerHighlight">Highlight</div></li>
  <li><div class="markerDefault">$900M</div></li>
  <li><div class="markerInverse">Selected</div></li>
  <li><div class="markerLowlight">Viewed</div></li>
  <li><div class="markerSaved">Saved</div></li>
  <li><div class="markerPrimary markerIcon"><i class="iconHome"></i></div></li>
  <li><div class="markerTertiary markerRound">$</div></li>
</ul>
```

*/
@-moz-document url-prefix() {
  .markerPrimary, .markerSecondary, .markerHighlight, .markerTertiary, .markerDefault, .markerInverse, .markerLowlight, .markerSaved, .markerIcon {
    padding-top: 1px !important;
  }
}

.badgeNew,
.badgeSecondary, .badgeSold,
.badgeTertiary, .badgeActiveContingent,
.badgePrimary, .badgeAssessor,
.badgeStandard {
  font-size: 12px;
  border-radius: 1000px;
  padding: 3px 9px 3px;
  display: inline-block;
  color: white;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
}

.badgeNew,
.badgeSecondary {
  background-color: #20c063;
}

.badgeSold,
.badgeTertiary {
  background-color: #dc0023;
}

.badgeActiveContingent,
.badgePrimary {
  background-color: #f74a27;
}

.badgeAssessor,
.badgeStandard {
  background-color: #b1b6bb;
}

.badgeCircle, .badgeCircleGood, .badgeCircleAverage, .badgeCirclePoor {
  width: 30px;
  height: 30px;
  padding: 0.5rem 0.2rem;
  color: white;
  line-height: 1;
  text-align: center;
  position: relative;
  margin-right: 5px;
  float: left;
  border-radius: 50%;
}
.badgeCircle.sml, .sml.badgeCircleGood, .sml.badgeCircleAverage, .sml.badgeCirclePoor {
  width: 26px;
  height: 26px;
  padding: 0.25rem 0.2rem;
}
.badgeCircle.md, .md.badgeCircleGood, .md.badgeCircleAverage, .md.badgeCirclePoor {
  width: 40px;
  height: 40px;
  padding: 0.25rem 0.2rem;
}
.badgeCircle.lrg, .lrg.badgeCircleGood, .lrg.badgeCircleAverage, .lrg.badgeCirclePoor {
  width: 68px;
  height: 68px;
  padding: 0.65rem 0.2rem;
}

.badgeCircleGood {
  background-color: #228959;
}

.badgeCircleAverage {
  background-color: #fbb100;
}

.badgeCirclePoor {
  background-color: #e13009;
}

.markerPrimary,
.markerSecondary, .markerHighlight, .markerTertiary, .markerDefault, .markerInverse, .markerLowlight, .markerSaved, .markerIcon {
  width: auto;
  min-width: 38px;
  border-radius: 1000px;
  padding: 2px 6px;
  position: absolute;
  border-width: 1px;
  border-style: solid;
  height: 21px;
  transition: 0.3s all cubic-bezier(0.39, 0.575, 0.565, 1);
  font-size: 13px;
  line-height: 1rem;
  color: white;
  text-align: center;
  /* Typography classes may have a very high priority, so we need to enforce the shorterline
     height here to prevent issues with the drop-arrow on the markers from being
     swallowed up. */
}
.sml.badgeCircleGood.markerPrimary,
.sml.badgeCircleGood.markerSecondary, .sml.badgeCircleGood.markerHighlight, .sml.badgeCircleGood.markerTertiary, .sml.badgeCircleGood.markerDefault, .sml.badgeCircleGood.markerInverse, .sml.badgeCircleGood.markerLowlight, .sml.badgeCircleGood.markerSaved, .sml.badgeCircleGood.markerIcon, .sml.badgeCircleAverage.markerPrimary,
.sml.badgeCircleAverage.markerSecondary, .sml.badgeCircleAverage.markerHighlight, .sml.badgeCircleAverage.markerTertiary, .sml.badgeCircleAverage.markerDefault, .sml.badgeCircleAverage.markerInverse, .sml.badgeCircleAverage.markerLowlight, .sml.badgeCircleAverage.markerSaved, .sml.badgeCircleAverage.markerIcon, .sml.badgeCirclePoor.markerPrimary,
.sml.badgeCirclePoor.markerSecondary, .sml.badgeCirclePoor.markerHighlight, .sml.badgeCirclePoor.markerTertiary, .sml.badgeCirclePoor.markerDefault, .sml.badgeCirclePoor.markerInverse, .sml.badgeCirclePoor.markerLowlight, .sml.badgeCirclePoor.markerSaved, .sml.badgeCirclePoor.markerIcon, .badgeCircle.sml.markerPrimary,
.badgeCircle.sml.markerSecondary, .badgeCircle.sml.markerHighlight, .badgeCircle.sml.markerTertiary, .badgeCircle.sml.markerDefault, .badgeCircle.sml.markerInverse, .badgeCircle.sml.markerLowlight, .badgeCircle.sml.markerSaved, .badgeCircle.sml.markerIcon, .h7.markerPrimary,
.h7.markerSecondary, .h7.markerHighlight, .h7.markerTertiary, .h7.markerDefault, .h7.markerInverse, .h7.markerLowlight, .h7.markerSaved, .h7.markerIcon, .h8.markerPrimary,
.h8.markerSecondary, .h8.markerHighlight, .h8.markerTertiary, .h8.markerDefault, .h8.markerInverse, .h8.markerLowlight, .h8.markerSaved, .h8.markerIcon {
  line-height: 1rem;
}
.markerPrimary:hover,
.markerSecondary:hover, .markerHighlight:hover, .markerTertiary:hover, .markerDefault:hover, .markerInverse:hover, .markerLowlight:hover, .markerSaved:hover, .markerIcon:hover {
  cursor: pointer;
}
.markerPrimary:before,
.markerSecondary:before, .markerHighlight:before, .markerTertiary:before, .markerDefault:before, .markerInverse:before, .markerLowlight:before, .markerSaved:before, .markerIcon:before {
  background-color: inherit;
  border-color: inherit;
  display: inline-block;
  margin: 1px 0 auto -2px;
  content: '';
  width: 4px;
  height: 4px;
  position: absolute;
  top: 17px;
  left: 50%;
  border-width: 0 1px 1px 0;
  border-style: solid;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.markerPrimary,
.markerSecondary {
  color: white;
  background-color: #20c063;
  border-color: #228959;
}
.markerPrimary:hover,
.markerSecondary:hover {
  background-color: #228959;
}

.markerHighlight {
  color: white;
  background-color: #f74a27;
  border-color: #e13009;
}
.markerHighlight:hover {
  background-color: #ff7857;
}

.markerTertiary {
  color: white;
  background-color: #dc0023;
  border-color: #b51d02;
}
.markerTertiary:hover {
  background-color: #b51d02;
}

.markerDefault {
  color: #474e52;
  background-color: white;
  border-color: #b1b6bb;
}
.markerDefault:hover {
  background-color: #f5f6f7;
}

.markerInverse {
  color: white;
  background-color: #5c6872;
  border-color: #474e52;
}
.markerInverse:hover {
  background-color: #5c6872;
}

.markerLowlight {
  color: white;
  background-color: #b1b6bb;
  border-color: #869099;
}
.markerLowlight:hover {
  background-color: #b1b6bb;
}

.markerSaved {
  color: white;
  background-color: #ed1b77;
  border-color: #b2025e;
}
.markerSaved:hover {
  background-color: #ed1b77;
}

.markerRound {
  width: 20px;
  font-size: 13px;
  line-height: 1.3;
  padding: 1px;
  min-width: 0;
}
.markerRound:before {
  display: none;
}

.markerIcon {
  min-width: 25px;
}

.markerIcon i {
  line-height: 1rem;
}
.markerIcon i:before {
  margin: auto;
}

/*doc
---
title: Buttons
name: button
category: Buttons
author: Derek Reynolds
test: true
---

Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:

```html_example
<button class="btn btnDefault">Click</button>
<a class="btn btnDefault" href="http://www.trulia.com/">Trulia</a>
```
If your button is actually a link to another page, please use the
`<a>` element, while if your button performs an action, such as submitting
a form or triggering some javascript event, then use a `<button>` element.

##Button Sizes
There are three 3 sizes for buttons: Large, medium (default)
and small. Simply apply the size modifier class for the desired size.


There are two other additional modifiers - `btnFullWidth` and `btnActive`. If the
names are not self-explanatory see the examples below.

Button                                                                |  Modifier Class
--------------------------------------------------------------------- | -----------------
<button class="btn btnDefault btnLrg">Large</button>                  | `btn btnDefault btnLrg`
<button class="btn btnDefault">Default</button>                       | `btn btnDefault`
<button class="btn btnDefault btnSml">Small</button>                  | `btn btnDefault btnSml`
<button class="btn btnDefault btnFullWidth">Full width</button>       | `btn btnDefault btnFullWidth`
<button class="btn btnDefault btnActive">Active Button State</button> | `btn btnDefault btnActive`

[[[plugin:css-test
<button class="btn btnDefault btnLrg">Large</button>
<button class="btn btnDefault">Default</button>
<button class="btn btnDefault btnSml">Small</button>
<button class="btn btnDefault btnFullWidth">Full width</button>
<button class="btn btnDefault btnActive">Active Button State</button>
]]]

*/
@-moz-document url-prefix() {
  .btn {
    padding: 0.55em 1em 0.55em;
  }
}

/*doc
---
parent: button
name: buttonSkins
title: Button Styles
test: true
---

Button                                                                | Class                      | Description
--------------------------------------------------------------------- | -------------------------- | -------------------
<button class="btn btnDefault">Default</button>                       | `btn btnDefault`           | This is what buttons look like, and is our go-to button style. These are used extensively around the site.
<button class="btn btnPrimary">Primary</button>                       | `btn btnPrimary`           | The primary button is the strongest call to action on a page (i.e. lead form). It can only ever appear once per screen (it can also appear in a modal dialog, ignoring what's on the main page). Note: not every screen/page needs a primary button.
<button class="btn btnSecondary">Secondary</button>                   | `btn btnSecondary`         | Secondary buttons should be used for higher visibility needs and for non-cta primary actions. Use this button for an actions that will change the state of the website or capture data from the user, but isn’t as important as the primary action (i.e. login flows, applying filters, etc.).
<button class="btn btnTertiary">Tertiary</button>                     | `btn btnTertiary`          | Use this button for non-cta primary actions where secondary button creates too much noise, such as situations where there are multiple instances in one browser load. This button should only be used on white/light grey backgrounds.
<div class="backgroundInverseAlternate txtC pam"><button class="btn btnInverse">Inverse</button></div>       | `btn btnInverse`    | Use this as the default button on backgroundInverse
<button class="btn btnDanger">Delete</button>                         | `btn btnDanger`            | Danger buttons reiterate that the intended action is important or potentially dangerous (e.g., deleting a board).
<button class="btn btnActive">Active</button>                         | `btn btnActive`            | This is the default state for an active button
<button class="btn btnLink">Link</button>                             | `btn btnLink`              | This is for links alongside a button or next to a button group.
<button class="btn btnDisabled">Disabled</button>                     | `btn btnDisabled`          | I'm afraid I can't let you do that.
<button class="btn btnFacebook">Facebook</button>                     | `btn btnFacebook`          | Use this button for Facebook connect. Adding "iconFacebook" is recommended, see example below, and <a href="#icon">Icons</a>

[[[plugin:css-test
<ul>
  <li><button class="btn btnDefault">Default</button>
  <li><button class="btn btnPrimary">Primary</button>
  <li><button class="btn btnDanger">Delete</button>
  <li><button class="btn btnDisabled">Disabled</button>
  <li><button class="btn btnLink">Link</button>
  <li><button class="btn btnFacebook">Facebook</button>
</ul>
]]]

Be selective and thoughtful about putting icons within buttons. Does adding the icon really enhance usability/design or is there for just flair? If it’s there for just flair, play around with other visual styles to give the button more prominence.


```html_example
<button class="btn btnFacebook"><i class="iconFacebook"></i>Facebook</button>
```

*/
button {
  background: none;
  border: 0;
}

.btn {
  background: none;
  border: 1px solid #cdd1d4;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.2;
  margin: 0;
  outline: none;
  padding: 0.6em 1em 0.5em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  vertical-align: middle;
}

.btnSml {
  font-size: 14px;
  border-radius: 4px;
}

.btnLrg {
  font-size: 18px;
  line-height: 1.556;
  border-radius: 4px;
}

.btnFullWidth {
  width: 100%;
}

.btnDefault,
a.btnDefault,
.btnDefault:visited,
a.btnDefault:visited {
  border: 1px #cdd1d4 solid;
  background: white;
  color: #5c6872;
  font-weight: 600;
}

.btnDefaultHover,
.btnDefault:hover,
.btnDefault:focus {
  background: #f5f6f7;
  border: 1px #cdd1d4 solid;
}

.btnDefault:active {
  background: #d9dde0;
  border: 1px #b2b8bc solid;
}

.btnPrimary, .btnOutline,
a.btnPrimary,
a.btnOutline,
.btnPrimary:visited,
.btnOutline:visited,
a.btnPrimary:visited,
a.btnOutline:visited {
  border: 1px #f74a27 solid;
  background: #f74a27;
  color: white;
  font-weight: 600;
}

.btnPrimaryHover,
.btnPrimary:hover,
.btnOutline:hover,
.btnPrimary:focus,
.btnOutline:focus {
  background: #ff7857;
  border: 1px #ff7857 solid;
}

.btnPrimary:active, .btnOutline:active {
  background: #e32d08;
  border: 1px #e32d08 solid;
}

.btnSecondary,
a.btnSecondary,
.btnSecondary:visited,
a.btnSecondary:visited {
  border: 1px #20c063 solid;
  background: #20c063;
  color: white;
}

.btnSecondaryHover,
.btnSecondary:hover,
.btnSecondary:focus {
  background: #2ed975;
  border: 1px #2ed975 solid;
}

.btnSecondary:active {
  background: #21b35e;
  border: 1px #21b35e solid;
}

.btnTertiary,
a.btnTertiary,
.btnTertiary:visited,
a.btnTertiary:visited {
  border: 1px #20c063 solid;
  background: white;
  color: #20c063;
  font-weight: 600;
}

.btnTertiaryHover,
.btnTertiary:hover,
.btnTertiary:focus {
  background: #20c063;
  border: 1px #20c063 solid;
  color: white;
}

.btnTertiary:active {
  background: #f0f0f0;
  border: 1px #1ca655 solid;
}

.btnInverse,
a.btnInverse,
.btnInverse:visited,
a.btnInverse:visited {
  border: 1px rgba(177, 182, 187, 0) solid;
  background: rgba(177, 182, 187, 0.5);
  color: white;
}

.btnInverseHover,
.btnInverse:hover,
.btnInverse:focus {
  background: rgba(177, 182, 187, 0.8);
  border: 1px rgba(177, 182, 187, 0) solid;
}

.btnInverse:active {
  background: rgba(177, 182, 187, 0.5);
  border: 1px rgba(177, 182, 187, 0) solid;
}

.btnDanger,
a.btnDanger,
.btnDanger:visited,
a.btnDanger:visited {
  border: 1px #dc0023 solid;
  background: #dc0023;
  color: white;
}

.btnDangerHover,
.btnDanger:hover,
.btnDanger:focus {
  background: #b51d02;
  border: 1px #b51d02 solid;
}

.btnDanger:active {
  background: #a9001b;
  border: 1px #a9001b solid;
}

.btnFacebook,
a.btnFacebook,
.btnFacebook:visited,
a.btnFacebook:visited {
  border: 1px #4063b3 solid;
  background: #4063b3;
  color: white;
}

.btnFacebookHover,
.btnFacebook:hover,
.btnFacebook:focus {
  background: #738ecd;
  border: 1px #738ecd solid;
}

.btnFacebook:active {
  background: #334e8d;
  border: 1px #334e8d solid;
}

a.btnActive,
.btnActive:focus,
.btnActive:hover,
.btnActive {
  outline: 0;
  border: 1px #2ed975 solid;
  color: #20c063;
  position: relative;
  background: white;
}

.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:focus
.btn[disabled]:active,
.btnDisabled,
a.btnDisabled,
.btnDisabled:hover,
.btnDisabled:focus,
.btnDisabled:active {
  border: 1px #cdd1d4 solid;
  background: rgba(205, 209, 212, 0.65);
  color: #b1b6bb;
  cursor: default;
}

.btn[disabled]:active,
.btnDisabled:active {
  position: static;
  color: #20c063;
  box-shadow: none;
}

.btnLink {
  color: #869099;
  border: 1px solid transparent;
}
.btnLink:hover, .btnLink:focus {
  color: #b1b6bb;
}

.btnLinkPrimary {
  color: #10a75f;
  border: 1px solid transparent;
}
.btnLinkPrimary:hover, .btnLinkPrimary:focus {
  color: #20c063;
}

/*doc
---
title: Buttons Group
name: buttonGroup
category: Buttons
test: true
---

Occasionally a set of buttons will need a more visually strong
relationship to each other. Enter the `btnGroup` class. This class may
be used with any combination of button skins and sizes, though you
probably want to use the same size for all buttons within a given button
group.

```html_example
<div class="btnGroup">
  <button class="btn btnDefault">Save</button>
  <button class="btn btnDefault">Share</button>
  <button class="btn btnDefault">Flag</button>
  <button class="btn btnDefault">More</button>
</div>
```

Buttons and Button Groups have an active state as well:

```html_example
<div class="btnGroup">
  <button class="btn btnDefault">Save</button>
  <button class="btn btnDefault btnActive">Share</button>
  <button class="btn btnDefault">Flag</button>
  <button class="btn btnDefault">More</button>
</div>
```


Buttons and Highligh Button Groups have an active state (btnGroupHighlight):

```html_example
<div class="btnGroup">
  <button class="btn btnDefault">Save</button>
  <button class="btn btnDefault btnSecondary">Share</button>
  <button class="btn btnDefault">Flag</button>
  <button class="btn btnDefault btnSecondary">More</button>
</div>
```

Button Groups should do the right thing even with a single button:

```html_example
<div class="btnGroup">
  <a title="Watch out, I bite." class="btn btnDefault">Lone Wolf</a>
</div>
```

*/
.btnGroup {
  font-size: 0;
  display: inline-block;
}
.btnGroup .btn {
  margin-left: -1px;
  border-radius: 0;
}
.btnGroup .btn:first-child {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btnGroup .btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btnGroup .btnSecondary + .btnDefault {
  border-left: none;
}

/*doc
---
title: Dividers
name: divider
category: Layout
test: true
---

[[[plugin:css-test
<br>
<hr>
<br>
<hr class="divider">
<br>
]]]

## Basic divider

Most of the time a simple `<hr>` tag should be enough of a divider. If
you're separating large content sections you may need to use the divider
class: `<hr class='divider'>`

```html_example
<hr>
<p>
  Minim fixie ethical Intelligentsia, cred next level fugiat synth
  try-hard farm-to-table literally. Flexitarian small batch pork belly,
  kitsch mumblecore quis iPhone Etsy nostrud. Adipisicing fugiat
  letterpress actually dolor. Ethical Neutra locavore Banksy meh. Sint
  stumptown anim assumenda, irure Carles sriracha McSweeney's Pinterest.
  Art party High Life deep v organic, quis pork belly elit nostrud
  authentic. Street art organic squid Carles, culpa small batch
  Intelligentsia.
</p>
<hr class="divider">
<p>
  Irure fap excepteur, eu locavore drinking vinegar next level meh
  asymmetrical. Blue Bottle est plaid, vegan sunt nostrud pickled
  stumptown fugiat bicycle rights actually 90s. Cliche incididunt
  selfies, fashion axe dolore synth sunt disrupt butcher in. Direct trade
  cred blog cliche four loko. Seitan sed High Life, PBR aliquip hella
  wayfarers irony nesciunt Blue Bottle roof party Intelligentsia
  adipisicing put a bird on it ullamco. Keffiyeh Brooklyn Vice, dolore
  leggings qui tofu mumblecore swag DIY PBR&B sunt. Kitsch small batch
  salvia selfies, ennui readymade Helvetica Pinterest bespoke whatever
  incididunt VHS master cleanse.
</p>
```

## Inline text divider

If you have something that you need to appear in the middle of a line,
such as in the registration form or where you want a strong visual
break that includes a description of some sort, you can use the
`inlineTextDivider` class.

```html_example
<p>
  Minim fixie ethical Intelligentsia, cred next level fugiat synth
  try-hard farm-to-table literally. Flexitarian small batch pork belly,
  kitsch mumblecore quis iPhone Etsy nostrud. Adipisicing fugiat
  letterpress actually dolor. Ethical Neutra locavore Banksy meh. Sint
  stumptown anim assumenda, irure Carles sriracha McSweeney's Pinterest.
  Art party High Life deep v organic, quis pork belly elit nostrud
  authentic. Street art organic squid Carles, culpa small batch
  Intelligentsia.
</p>
<div class="inlineTextDivider">But there is one thing you really should be aware of</div>
<p>
  Irure fap excepteur, eu locavore drinking vinegar next level meh
  asymmetrical. Blue Bottle est plaid, vegan sunt nostrud pickled
  stumptown fugiat bicycle rights actually 90s. Cliche incididunt
  selfies, fashion axe dolore synth sunt disrupt butcher in. Direct trade
  cred blog cliche four loko. Seitan sed High Life, PBR aliquip hella
  wayfarers irony nesciunt Blue Bottle roof party Intelligentsia
  adipisicing put a bird on it ullamco. Keffiyeh Brooklyn Vice, dolore
  leggings qui tofu mumblecore swag DIY PBR&B sunt. Kitsch small batch
  salvia selfies, ennui readymade Helvetica Pinterest bespoke whatever
  incididunt VHS master cleanse.
</p>
```
*/
hr {
  border: none;
  border-bottom: 1px solid #e8e9ea;
}
hr.divider {
  margin: 30px 0;
}

.inlineTextDivider {
  overflow: hidden;
  text-align: center;
  color: #869099;
  padding: 10px 0;
}
.inlineTextDivider:before, .inlineTextDivider:after {
  background-color: #e8e9ea;
  content: '';
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}
.inlineTextDivider:before {
  right: 0.5em;
  margin-left: -50%;
}
.inlineTextDivider:after {
  left: 0.5em;
  margin-right: -50%;
}

/*doc
---
title: Dropdowns
name: dropdown
category: Dropdowns
author: Matt Barnicle
test: true
---

You can add a dropdown to anything. No javascript required. If you *do* want to trigger a dropdown programatically
you can simply add the class `dropdownHover` to your trigger element and that will show the dropdown.

```html_example
<span class="dropdown">
  <a href="#pancakes" >Pancakes</a>
  <div class="dropdownBox box backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
      <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
      <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
      <li class="dropdownDivider"></li>
      <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
      <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
    </ul>
  </div>
</span>
```

Dropdown with dropdown box align right

```html_example
<div class="dropdown cols10 txtR">
  <a href="#pancakes" >Pancakes</a>
  <div class="dropdownBox dropdownBoxRight box backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
      <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
      <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
      <li class="dropdownDivider"></li>
      <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
      <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
    </ul>
  </div>
</div>
```

You may combine dropdowns with inline lists to create menus:

```html_example
<ul class="listInline">
  <li>
    <span class="dropdown">
      <a href="#pancakes" >Pancakes</a>
      <div class="dropdownBox box backgroundLowlight">
        <ul class="dropdownList">
          <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
          <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
          <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
          <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
          <li class="dropdownDivider"></li>
          <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
          <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
        </ul>
      </div>
    </span>
  <li>
    <span class="dropdown">
      <a href="#pancakes" >Waffles</a>
      <div class="dropdownBox box backgroundLowlight">
        <ul class="dropdownList">
          <li><a href="#belgian" class="dropdownLink">Belgian</a></li>
          <li><a href="#liege" class="dropdownLink">Liège</a></li>
          <li><a href="#hong_kong" class="dropdownLink">Hong Kong style</a></li>
          <li><a href="#pandan" class="dropdownLink">Pandan</a></li>
        </ul>
      </div>
    </span>
  <li>
    <span class="dropdown">
      <a href="#pancakes" >French Toast</a>
      <div class="dropdownBox box backgroundLowlight">
        <ul class="dropdownList">
          <li><a href="#there_is_only_one_french_toast" class="dropdownLink">There is only one french toast</a></li>
        </ul>
      </div>
    </span>
</ul>
```

Dropdown with sub-dropdowns

```html_example
<span class="dropdown">
  <a href="#pancakes" >Pancakes</a>
  <div class="dropdownBox box backgroundLowlight">
    <ul class="dropdownList">
      <li class="subdropdown">
        <span>Toppings</span>
        <ul class="dropdownList subdropdownBox backgroundLowlight">
          <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
          <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
          <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
          <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
        </ul>
      </li>
      <li class="subdropdown">
        <span>Types</span>
        <ul class="dropdownList subdropdownBox backgroundLowlight">
          <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
          <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
        </ul>
      </li>
    </ul>
  </div>
</span>
```

[[[plugin:css-test
<span class="dropdown dropdownHover">
  <a href="#pancakes" >Pancakes</a>
  <div class="dropdownBox box backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
      <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
      <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
      <li class="dropdownDivider"></li>
      <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
      <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
    </ul>
  </div>
</span>
]]]

*/
/*doc
---
title: Dropdown Arrow
name: dropdownArrow
parent: dropdown
category: Dropdowns
author: August Flanagan
test: true
---

There are three positions from dropdown arrows: `dropdownArrowLeft`, `dropdownArrowCenter`, `dropdownArrowRight`.
These positions are relative the box the arrow is attached to, not the trigger element.


The position of any arrow can be overriden by targeting the `::before` pseudo-element and changing this position.
To do this you will need to add a semantic class to your element and then target the element like so
`.myClass.dropdownBox::before { left: 50%; }`.
<br><br>
**NOTA BENE:** Overriding positioning is one of the only times you should need to create custom CSS outside of the library.

<br>
####Dropdown Arrow Left
```html_example
<span class="dropdown">
  <a href="#pancakes" >Pancakes</a>
  <div class="box dropdownBox dropdownArrowLeft backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
      <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
      <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
      <li class="dropdownDivider"></li>
      <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
      <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
    </ul>
  </div>
</span>
```

<br>
####Dropdown Arrow Center
```html_example
<span class="dropdown">
  <a href="#pancakes" >Pancakes</a>
  <div class="box dropdownBox dropdownArrowCenter backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
      <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
      <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
      <li class="dropdownDivider"></li>
      <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
      <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
    </ul>
  </div>
</span>
```

<br />
####Dropdown Arrow Right
```html_example
<span class="dropdown">
  <a href="#pancakes" >Pancakes</a>
  <div class="box dropdownBox dropdownArrowRight backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
      <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
      <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
      <li class="dropdownDivider"></li>
      <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
      <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
    </ul>
  </div>
</span>
```


[[[plugin:css-test
<div class="line">
  <div class="col cols8">
    <span class="dropdown dropdownHover">
      <a href="#pancakes" >Pancakes</a>
      <div class="box dropdownBox dropdownArrowLeft backgroundLowlight">
        <ul class="dropdownList">
          <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
        </ul>
      </div>
    </span>
  </div>
  <div class="col cols8">
    <span class="dropdown dropdownHover">
      <a href="#pancakes" >Waffles</a>
      <div class="box dropdownBox dropdownArrowCenter backgroundLowlight">
        <ul class="dropdownList">
          <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
        </ul>
      </div>
    </span>
  </div>
  <div class="col cols8">
    <span class="dropdown dropdownHover">
      <a href="#pancakes" >Crepes</a>
      <div class="box dropdownBox dropdownArrowRight backgroundLowlight">
        <ul class="dropdownList">
          <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
        </ul>
      </div>
    </span>
  </div>
</div>
]]]

*/
/*doc
---
title: Dropdown Box Highlight
name: dropdownBoxHighlight
parent: dropdown
category: Dropdowns
author: August Flanagan
test: true
---

If you need your dropdown to have a bit of shadow and pop off the page you can add this.

```html_example
<span class="dropdown">
  <a href="#pancakes" >Pancakes</a>
  <div class="box dropdownBox dropdownBoxHighlight backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
      <li><a href="#kiwi" class="dropdownLink">Kiwi</a></li>
      <li><a href="#apricot" class="dropdownLink">Apricot</a></li>
      <li class="dropdownDivider"></li>
      <li><a href="#corn_bread" class="dropdownLink">Corn Bread</a></li>
      <li><a href="#sweet_cream" class="dropdownLink">Sweet Cream</a></li>
    </ul>
  </div>
</span>
```

[[[plugin:css-test
<span class="dropdown dropdownHover">
  <a href="#pancakes" >Pancakes</a>
  <div class="box dropdownBox dropdownBoxHighlight backgroundLowlight">
    <ul class="dropdownList">
      <li><a href="#strawberry" class="dropdownLink">Strawberry</a></li>
      <li><a href="#blueberry" class="dropdownLink">Blueberry</a></li>
    </ul>
  </div>
</span>
]]]

*/
/*doc
---
title: Dropdown Box Menu Item
name: dropdownBoxMenuItem
parent: dropdown
category: Dropdowns
author: Susan
test: true
---

When you want to "dock" the dropdown to your menu for a sleek look, you can use `dropdownBoxMenuItem`

```html_example
  <span class="dropdown">
    <a href="#pancakes"> Mic Drop </a>
    <div class="box dropdownBox dropdownBoxHighlight dropdownBoxMenuItem backgroundLowlight">
      <ul class="dropdownList">
        <li><a href="#strawberry" class="dropdownLink">Emoji</a></li>
        <li><a href="#blueberry" class="dropdownLink">Emoticons</a></li>
        <li><a href="#kiwi" class="dropdownLink">Emotes</a></li>
        <li class="dropdownDivider"></li>
        <li><a href="#corn_bread" class="dropdownLink">TV Remotes</a></li>
      </ul>
    </div>
  </span>
```

[[[plugin:css-test
  <span class="dropdown dropdownHover">
    <a href="#pancakes"> Mic Drop </a>
    <div class="box dropdownBox dropdownBoxHighlight dropdownBoxMenuItem backgroundLowlight">
      <ul class="dropdownList">
        <li><a href="#strawberry" class="dropdownLink">Emoji</a></li>
        <li><a href="#blueberry" class="dropdownLink">Emoticons</a></li>
      </ul>
    </div>
  </span>
]]]

*/
.dropdown {
  position: relative;
}
.dropdown a {
  outline: 0;
}
.dropdown:hover .dropdownBox, .dropdown.dropdownHover .dropdownBox {
  display: block;
}

.dropdownBox {
  background: #f5f6f7;
  box-shadow: 1px 1px 2px 0 rgba(205, 209, 212, 0.6);
  margin: 0;
  top: 100%;
  left: 0;
  position: absolute;
  z-index: 3001000;
  display: none;
}

.subdropdown {
  position: relative;
}
.subdropdown:hover .subdropdownBox, .subdropdown.subdropdownHover .subdropdownBox {
  display: block;
}

.subdropdownBox {
  margin: 0;
  top: 0;
  left: 100%;
  position: absolute;
  z-index: 3001000;
  box-shadow: 1px 1px 2px 0 rgba(205, 209, 212, 0.6);
  display: none;
  border-top: 0;
  border-radius: 0 !important;
}

.dropdownBoxRight {
  left: auto;
  right: 0;
}

.dropdownList {
  margin: 0;
  padding: 0;
}
.dropdownList > li {
  margin: 0;
  padding: 0 18px;
  display: block;
  font-size: 15px;
  line-height: 30px;
  color: #474e52;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.dropdownList > li:first-child {
  margin-top: 0;
}
.dropdownList > li:last-child {
  margin-bottom: 0;
}
.dropdownList > li:hover {
  background-color: #e8e9ea;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  -o-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.dropdownList > li.dropdownDivider {
  margin: 0 0;
  border-bottom: 1px solid;
  border-bottom-color: #cdd1d4;
  border-left-width: 0;
  border-right-width: 0;
}

.dropdownLink {
  display: block;
  color: #474e52;
  text-decoration: none;
}
.dropdownLink:hover, .dropdownLink:focus {
  color: #474e52;
  text-decoration: none;
}

.dropdownArrowLeft::before, .dropdownArrowCenter::before, .dropdownArrowRight::before {
  width: 12px;
  height: 12px;
  position: absolute;
  top: -6px;
  background-color: inherit;
  content: '';
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dropdownArrowLeft {
  top: 150%;
}

.dropdownArrowLeft::before {
  left: 10%;
}

.dropdownArrowLeft:after {
  position: absolute;
  top: -27px;
  height: 27px;
  width: 100%;
  content: '';
}

.dropdownArrowLeft::before, .dropdownArrowCenter::before, .dropdownArrowRight::before {
  width: 12px;
  height: 12px;
  position: absolute;
  top: -6px;
  background-color: inherit;
  content: '';
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dropdownArrowCenter {
  top: 150%;
}

.dropdownArrowCenter::before {
  left: 50%;
}

.dropdownArrowCenter:after {
  position: absolute;
  top: -27px;
  height: 27px;
  width: 100%;
  content: '';
}

.dropdownArrowLeft::before, .dropdownArrowCenter::before, .dropdownArrowRight::before {
  width: 12px;
  height: 12px;
  position: absolute;
  top: -6px;
  background-color: inherit;
  content: '';
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dropdownArrowRight {
  top: 150%;
}

.dropdownArrowRight::before {
  left: 80%;
}

.dropdownArrowRight:after {
  position: absolute;
  top: -27px;
  height: 27px;
  width: 100%;
  content: '';
}

.dropdownBoxHighlight {
  -webkit-box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.07), 2px 2px 3px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.07), 2px 2px 3px rgba(0, 0, 0, 0.07);
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.07), 2px 2px 3px rgba(0, 0, 0, 0.07);
}

.dropdownBoxMenuItem {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/*doc
---
title: Tables
name: table
category: Tables
author: aflanagan
---

Tables are a way to structure content in a clean, readable format.
By default columns will stretch to fill their content. You can define widths inline as is shown in the example

There are a number of alignment helper classes available for use with a table:

Helper   | Alignment
---------|----------
`txtL`   | horizontally align the text to the left of the cell (default)
`txtC`   | horizontally center the text in the cell
`txtR`   | horizontally align the text to the right of the cell
`txtT`   | vertically align text to the top of the cell
`txtM`   | vertically align text to the middle of the cell (default)
`txtB`   | vertically align text to the bottom of the cell

This is the default table with no skin applied.

```html_example
<table class="table">
    <thead>
      <tr>
        <th class="txtL">Here&#x27;s a header</th>
        <th class="txtC">Here&#x27;s a header</th>
        <th class="txtR">Here&#x27;s a header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="txtL">This text left aligns</td>
        <td class="txtC">This text center aligns</td>
        <td class="txtR">
          <strong>This text right aligns</strong>
        </td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">
          <a href="">visit example.com</a>
        </td>
        <td class="txtR">And some text:</td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">$1500/mo</td>
        <td class="txtR">And some text:</td>
      </tr>
    </tbody>
  </table>
```

*/
/*doc
---
title: Table Whitespace
parent: table
name: tableWhitespace
author: August
---

Table cells can have their cell padding adjusted by adding a class to `table`, `td` or `th` element. It works similar to the whitespace
The classes are constructed by specifying `<type><location><size>` (see table and example below).

```html_example
<table class="table tableBasic tan">
  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
    <td>Four</td>
  </tr>
  <tr>
    <td>Five</td>
    <td>Six</td>
  </tr>
</table>
```

  Type       |             | Description
--------     | ----------  | -----------
t            | table       | Affects only the spacing on th and td elements, you can set this directly on those elements or on the table element itself.
**Location** |             |
a            | all         | Adds spacing on all sides of the element
h            | horizontal  | Adds spacing to the left and right sides of the element
v            | vertical    | Adds spacing to the top and bottom sides of the element
**Size**     |             |
l            | large       | Adds a large amount of spacing (21px)
m            | medium      | Adds a medium amount of spacing (10px)
s            | small       | Adds a small amount of spacing (5px)
n            | none        | Sets the spacing to 0


*/
/*doc
---
title: Table Styles
parent: table
name: tableSkins
category: Tables
test: true
---

Class                           | Description
------------------------------- | -----------
`table tableBasic`              | Basic table with borders on the cells
`table tableHover`              | Add lowlight background to each row on mouse-over (except header)
`table tableZebra`              | Add zebra-striping to alternating table rows (except header)
`table tableRowBorderedTop`     | Add top border to each row (except header)
`table tableRowBorderedBottom`  | Add bottom border to each row (except header)

A basic table with borders on the cells.

```html_example
  <table class="table tableBasic">
    <thead>
      <tr>
        <th class="txtL">Here&#x27;s a header</th>
        <th class="txtC">Here&#x27;s a header</th>
        <th class="txtR">Here&#x27;s a header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="txtL">This text left aligns</td>
        <td class="txtC">This text center aligns</td>
        <td class="txtR">
          <strong>This text right aligns</strong>
        </td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">
          <a href="">visit example.com</a>
        </td>
        <td class="txtR">And some text:</td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">$1500/mo</td>
        <td class="txtR">And some text:</td>
      </tr>
    </tbody>
  </table>
```

A table with top and bottom row borders and lowlight background on mouse over.

```html_example
  <table class="table tableHover tableRowBorderedTop tableRowBorderedBottom">
    <thead>
      <tr>
        <th class="txtL">Here&#x27;s a header</th>
        <th class="txtC">Here&#x27;s a header</th>
        <th class="txtR">Here&#x27;s a header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="txtL">This text left aligns</td>
        <td class="txtC">This text center aligns</td>
        <td class="txtR">
          <strong>This text right aligns</strong>
        </td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">
          <a href="">visit example.com</a>
        </td>
        <td class="txtR">And some text:</td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">$1500/mo</td>
        <td class="txtR">And some text:</td>
      </tr>
    </tbody>
  </table>
```

A table with alternate light and dark rows.

```html_example
  <table class="table tableZebra">
    <thead>
      <tr>
        <th class="txtL">Here&#x27;s a header</th>
        <th class="txtC">Here&#x27;s a header</th>
        <th class="txtR">Here&#x27;s a header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="txtL">This text left aligns</td>
        <td class="txtC">This text center aligns</td>
        <td class="txtR">
          <strong>This text right aligns</strong>
        </td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">
          <a href="">visit example.com</a>
        </td>
        <td class="txtR">And some text:</td>
      </tr>
      <tr>
        <td class="txtL">And some text:</td>
        <td class="txtC">$1500/mo</td>
        <td class="txtR">And some text:</td>
      </tr>
    </tbody>
  </table>
```

*/
.table {
  width: 100%;
}
.table thead th {
  font-weight: bold;
  color: #474e52;
}
.table th,
.table td {
  padding: 9px 10px;
}

.tableBasic {
  border-collapse: separate;
}
.tableBasic thead {
  background: #f5f6f7;
}
.tableBasic th {
  border-top: 1px solid #e8e9ea;
}
.tableBasic th:first-child {
  border-left: 1px solid #e8e9ea;
}
.tableBasic th:last-child {
  border-right: 1px solid #e8e9ea;
}
.tableBasic td {
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: #e8e9ea;
}
.tableBasic th:first-child, .tableBasic td:first-child {
  border-left-width: 1px;
}
.tableBasic tr:last-child td {
  border-bottom-width: 1px;
}
.tableBasic tbody:first-child tr:first-child,
.tableBasic thead:first-child th:first-child {
  border-top-left-radius: 4px;
}
.tableBasic tbody:first-child tr:last-child,
.tableBasic thead:first-child th:last-child {
  border-top-right-radius: 4px;
}
.tableBasic tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}
.tableBasic tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

.tableHover tbody tr {
  -webkit-transition: all 0.75s ease-in;
  -moz-transition: all 0.75s ease-in;
  -o-transition: all 0.75s ease-in;
  transition: all 0.75s ease-in;
}

.tableHover tbody tr:hover {
  background-color: #f5f6f7;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.tableZebra tbody tr:nth-child(2n+1) {
  background-color: #f5f6f7;
}

.tableRowBorderedTop tbody tr {
  border-top: 1px solid #e8e9ea;
}

.tableRowBorderedBottom tbody tr {
  border-bottom: 1px solid #e8e9ea;
}

.tan td,
.tan th {
  padding: 0;
}

.taxs td,
.taxs th {
  padding: 2px;
}

.tas td,
.tas th {
  padding: 5px;
}

.tam td,
.tam th {
  padding: 10px;
}

.tal td,
.tal th {
  padding: 20px;
}

.taxl td,
.taxl th {
  padding: 25px;
}

.taxxl td,
.taxxl th {
  padding: 30px;
}

.tvn td,
.tvn th {
  padding-top: 0;
  padding-bottom: 0;
}

.tvxs td,
.tvxs th {
  padding-top: 2px;
  padding-bottom: 2px;
}

.tvs td,
.tvs th {
  padding-top: 5px;
  padding-bottom: 5px;
}

.tvm td,
.tvm th {
  padding-top: 10px;
  padding-bottom: 10px;
}

.tvl td,
.tvl th {
  padding-top: 20px;
  padding-bottom: 20px;
}

.tvxl td,
.tvxl th {
  padding-top: 25px;
  padding-bottom: 25px;
}

.tvxxl td,
.tvxxl th {
  padding-top: 30px;
  padding-bottom: 30px;
}

.thn td,
.thn th {
  padding-left: 0;
  padding-right: 0;
}

.thxs td,
.thxs th {
  padding-left: 2px;
  padding-right: 2px;
}

.ths td,
.ths th {
  padding-left: 5px;
  padding-right: 5px;
}

.thm td,
.thm th {
  padding-left: 10px;
  padding-right: 10px;
}

.thl td,
.thl th {
  padding-left: 20px;
  padding-right: 20px;
}

.thxl td,
.thxl th {
  padding-left: 25px;
  padding-right: 25px;
}

.thxxl td,
.thxxl th {
  padding-left: 30px;
  padding-right: 30px;
}

/*doc
---
title: Alerts
name: alert
category: Interaction
author: August Flanagan
---

Alerts are a common way of giving users information about an action they
took. They consist of a wrapper with the classes `box` and `alert` applied.
Since they rely on box component, they also need to have a subnode with
the class `boxBody`

*/
/*doc
---
title: Alert Types
name: alertSkins
parent: alert
author: August Flanagan
test: true
---

Class                | Description
-------------------- | -----------
`alert alertConfirm` | Used for successes and confirmation messages
`alert alertInfo`    | Used for informational messages
`alert alertWarn`    | Used for warning or error messages

<div class="box alert alertConfirm">
  <div class="boxBody">
    <button class="boxClose">
      <span role="presentation">&times;</span>
      <span class="hideVisually">Close</span>
    </button>
    <p class="typeReversed mvm">A confirmation/success message goes here.</p>
  </div>
</div>
<div class="box alert alertInfo">
  <div class="boxBody">
    <button class="boxClose">
      <span role="presentation">&times;</span>
      <span class="hideVisually">Close</span>
    </button>
    <p class="typeReversed mvm">An informative and reassuring message goes here. You're really swell.</p>
  </div>
</div>

```html_example
<div class="box alert alertWarn">
  <div class="boxBody">
    <button class="boxClose">
      <span role="presentation">&times;</span>
      <span class="hideVisually">Close</span>
    </button>
    <p class="typeReversed mvm">Dalek Bulletin: EXTERMINATE! EXTERMINATE!</p>
  </div>
</div>
```

[[[plugin:css-test
<div class="box alert alertConfirm">
  <div class="boxBody">
    <button class="boxClose">
      <span role="presentation">&times;</span>
      <span class="hideVisually">Close</span>
    </button>
    <p class="typeReversed mvm">Please confirm that you are confirming this confirmation</p>
  </div>
</div>

<div class="box alert alertInfo">
  <div class="boxBody">
    <button class="boxClose">
      <span role="presentation">&times;</span>
      <span class="hideVisually">Close</span>
    </button>
    <p class="typeReversed mvm">The information you are about to read is in this informational alert.</p>
  </div>
</div>

<div class="box alert alertWarn">
  <div class="boxBody">
    <button class="boxClose">
      <span role="presentation">&times;</span>
      <span class="hideVisually">Close</span>
    </button>
    <p class="typeReversed mvm">Warning.</p>
  </div>
</div>
]]]

*/
.alert {
  border-radius: 4px;
}
.alert .boxClose {
  color: white;
}

.alertConfirm {
  color: white;
  background-color: #20c063;
}

.alertWarn {
  color: white;
  background-color: #e13009;
}

.alertInfo {
  color: white;
  background-color: #5c6872;
}

.tooltip {
  width: auto;
  max-width: 300px;
  margin: 4px;
  padding: .5em 1em;
  position: absolute;
  display: none;
  z-index: 6001000;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}
.tooltip.ie8:before {
  display: none;
}
.tooltip .before {
  border: 1px solid transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
}

.tooltip .before, .tooltipStemTop:before,
.tooltipStemTop .before, .tooltipStemRight:before,
.tooltipStemRight .before, .tooltipStemLeft:before,
.tooltipStemLeft .before, .tooltipStemBottom:before,
.tooltipStemBottom .before, .tooltipStemLeftBottom:before,
.tooltipStemLeftBottom .before, .tooltipStemBottomRight:before,
.tooltipStemBottomRight .before, .tooltipStemTopRight:before,
.tooltipStemTopRight .before, .tooltipCard .before, .tooltipCardTop:before,
.tooltipCardTop .before, .tooltipCardRight:before,
.tooltipCardRight .before, .tooltipCardLeft:before,
.tooltipCardLeft .before, .tooltipCardBottom:before,
.tooltipCardBottom .before, .tooltipCardLeftBottom:before,
.tooltipCardLeftBottom .before, .tooltipCardBottomRight:before,
.tooltipCardBottomRight .before, .tooltipCardBottomLeft:before,
.tooltipCardBottomLeft .before, .tooltipCardTopRight:before,
.tooltipCardTopRight .before, .tooltipCardTopLeft:before,
.tooltipCardTopLeft .before {
  width: 12px;
  height: 12px;
  position: absolute;
  display: block;
  content: '';
  overflow: hidden;
  background-color: #fff;
  -webkit-box-shadow: 1px 1px 0 0 #cdd1d4;
  -moz-box-shadow: 1px 1px 0 0 #cdd1d4;
  box-shadow: 1px 1px 0 0 #cdd1d4;
  z-index: -5000;
}

.tooltipStemTop:before,
.tooltipStemTop .before, .tooltipStemRight:before,
.tooltipStemRight .before, .tooltipStemLeft:before,
.tooltipStemLeft .before, .tooltipStemBottom:before,
.tooltipStemBottom .before, .tooltipStemLeftBottom:before,
.tooltipStemLeftBottom .before, .tooltipStemBottomRight:before,
.tooltipStemBottomRight .before, .tooltipStemTopRight:before,
.tooltipStemTopRight .before, .tooltipCardTop:before,
.tooltipCardTop .before, .tooltipCardRight:before,
.tooltipCardRight .before, .tooltipCardLeft:before,
.tooltipCardLeft .before, .tooltipCardBottom:before,
.tooltipCardBottom .before, .tooltipCardLeftBottom:before,
.tooltipCardLeftBottom .before, .tooltipCardBottomRight:before,
.tooltipCardBottomRight .before, .tooltipCardBottomLeft:before,
.tooltipCardBottomLeft .before, .tooltipCardTopRight:before,
.tooltipCardTopRight .before, .tooltipCardTopLeft:before,
.tooltipCardTopLeft .before {
  display: block;
}

.tooltipStemTop .ie {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipStemTop:before,
.tooltipStemTop .before {
  left: 50%;
  top: -6px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
.tooltipStemTop .ie {
  top: -10px;
}

.tooltipStemRight .ie {
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
}
.tooltipStemRight:before,
.tooltipStemRight .before {
  right: -6px;
  top: 11px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.tooltipStemRight .ie {
  top: 8px;
  right: -5px;
}

.tooltipStemLeft .ie {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipStemLeft:before,
.tooltipStemLeft .before {
  left: -6px;
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.tooltipStemLeft .ie {
  left: -10px;
  top: 8px;
}

.tooltipStemBottom .ie {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
}
.tooltipStemBottom:before,
.tooltipStemBottom .before {
  left: 50%;
  bottom: -6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tooltipStemBottom .ie {
  bottom: -5px;
}

.tooltipStemLeftBottom .ie {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipStemLeftBottom:before,
.tooltipStemLeftBottom .before {
  left: -6px;
  bottom: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.tooltipStemLeftBottom .ie {
  left: -10px;
  bottom: 8px;
}

.tooltipStemBottomRight .ie {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
}
.tooltipStemBottomRight:before,
.tooltipStemBottomRight .before {
  right: 13px;
  bottom: -6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tooltipStemBottomRight .ie {
  bottom: -5px;
}

.tooltipStemTopRight .ie {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipStemTopRight:before,
.tooltipStemTopRight .before {
  right: 13px;
  top: -6px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
.tooltipStemTopRight .ie {
  top: -10px;
}

.tooltipLight {
  -webkit-box-shadow: 0 0 1px 1px #cdd1d4;
  -moz-box-shadow: 0 0 1px 1px #cdd1d4;
  box-shadow: 0 0 1px 1px #cdd1d4;
  background-color: white;
  border: 1px solid #cccccc \9;
}
.tooltipLight .ie {
  border-color: #ccc;
}

.tooltipDark,
.tooltipDark:before,
.tooltipDark .before {
  background-color: #222;
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.tooltipDark .ie {
  border-color: #222;
}

.tooltipCard {
  width: auto;
  max-width: 300px;
  max-height: 250px;
  margin: 4px;
  padding: 30px;
  position: absolute;
  display: none;
  background-color: white;
  z-index: 6001000;
  border: 1px solid #cdd1d4;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.tooltipCard.ie8:before {
  display: none;
}
.tooltipCard .before {
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";
}
.tooltipCard.backgroundLowlight {
  background-color: #f5f6f7;
}
.tooltipCard.backgroundLowlight:before,
.tooltipCard.backgroundLowlight .before {
  background-color: #f5f6f7;
}
.tooltipCard.backgroundControls {
  background-color: #cdd1d4;
}
.tooltipCard.backgroundControls:before,
.tooltipCard.backgroundControls .before {
  background-color: #cdd1d4;
}

.tooltipClose {
  position: absolute;
  top: 5px;
  right: 8px;
  outline: 0;
}

.tooltipCardTop .ie {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipCardTop:before,
.tooltipCardTop .before {
  left: 49%;
  top: -5px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
.tooltipCardTop .ie {
  top: -10px;
}

.tooltipCardRight .ie {
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
}
.tooltipCardRight:before,
.tooltipCardRight .before {
  right: -6px;
  top: 11px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.tooltipCardRight .ie {
  top: 8px;
  right: -5px;
}

.tooltipCardLeft .ie {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipCardLeft:before,
.tooltipCardLeft .before {
  left: -6px;
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.tooltipCardLeft .ie {
  left: -10px;
  top: 8px;
}

.tooltipCardBottom .ie {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
}
.tooltipCardBottom:before,
.tooltipCardBottom .before {
  left: 49%;
  bottom: -5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tooltipCardBottom .ie {
  bottom: -5px;
}

.tooltipCardLeftBottom .ie {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipCardLeftBottom:before,
.tooltipCardLeftBottom .before {
  left: -6px;
  bottom: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.tooltipCardLeftBottom .ie {
  left: -10px;
  bottom: 8px;
}

.tooltipCardBottomRight .ie {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
}
.tooltipCardBottomRight:before,
.tooltipCardBottomRight .before {
  right: 13px;
  bottom: -6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tooltipCardBottomRight .ie {
  bottom: -5px;
}

.tooltipCardBottomLeft .ie {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipCardBottomLeft:before,
.tooltipCardBottomLeft .before {
  left: 13px;
  bottom: -6px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tooltipCardBottomLeft .ie {
  bottom: -5px;
}

.tooltipCardTopRight .ie {
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}
.tooltipCardTopRight:before,
.tooltipCardTopRight .before {
  right: 13px;
  top: -6px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
.tooltipCardTopRight .ie {
  top: -10px;
}

.tooltipCardTopLeft .ie {
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}
.tooltipCardTopLeft:before,
.tooltipCardTopLeft .before {
  left: 13px;
  top: -6px;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
.tooltipCardTopLeft .ie {
  top: -10px;
}

fieldset {
  border: 0;
}

.rating label,
.ratingGroup,
.ratingValue {
  display: inline-block;
  vertical-align: middle;
}

.ratingGroup {
  margin: 0;
}
.ratingGroup li {
  float: left;
}
.ratingGroup label {
  display: block;
  cursor: pointer;
}

.ratingValue {
  margin-left: 5px;
}

.ratingStar li {
  font-size: 18px;
  margin: 0;
}
.ratingStar .ratingGroup label {
  display: block;
  color: #3b4144;
}
.ratingStar .ratingGroup .ratingOn label {
  color: #fbb100;
}

.ratingBar li {
  margin: 3px 2px;
}
.ratingBar .ratingGroup {
  border: 1px solid #ccc;
}
.ratingBar .ratingGroup li:first-child label {
  margin-left: 0;
}
.ratingBar .ratingGroup label {
  width: 15px;
  height: 10px;
  background: #e8e9ea;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e8e9ea), color-stop(100%, #b1b6bb));
  background: -webkit-linear-gradient(#e8e9ea, #b1b6bb);
  background: -moz-linear-gradient(#e8e9ea, #b1b6bb);
  background: -o-linear-gradient(#e8e9ea, #b1b6bb);
  background: linear-gradient(#e8e9ea, #b1b6bb);
}
.ratingBar .ratingGroup .ratingOn label {
  background: #0e6d4a;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0e6d4a), color-stop(100%, #20c063));
  background: -webkit-linear-gradient(#0e6d4a, #20c063);
  background: -moz-linear-gradient(#0e6d4a, #20c063);
  background: -o-linear-gradient(#0e6d4a, #20c063);
  background: linear-gradient(#0e6d4a, #20c063);
}

/*doc
---
title: Icons
name: icon
category: Icons
author: August
test: true
---

Trulia OOCSS uses the <a href="http://entypo.com">entypo icon font</a> for most icons.
These icons are just a font and can be styled and treated like any other typography element.

To use an icon simply find the icon in the list below and simply include the class listed next to the
icon in an `<i>` tag like this:

```html_example
<p><i class="iconUser"></i>John Doe</p>
<p class="typeHighlight"><i class="iconThumbsUp"></i>Nice Job!</p>
<p><a href="#"><i class="iconMail"></i>Contact Us</a></p>
<button class="btn btnDefault"><i class="iconThumbsUp"></i>Like</button>
```

> If you're adding a new icon use [fontello.com](http://fontello.com). You can find the
> fontello.json to import in the config folder of the TXL source code.
> Follow their guidelines for svgs when importing custom svgs (use a
> square viewport, no styles, and no hidden elements in the svg).

## Available Icons
<ul class="list3cols">

  <li><h5>Core</h5>
  <li><i class="iconHome"></i>iconHome</li>
  <li><i class="iconMortgage"></i>iconMortgage</li>
  <li><i class="iconRent"></i>iconRent</li>
  <li><i class="iconAgent"></i>iconAgent</li>
  <li><i class="iconSearch"></i>iconSearch</li>
  <li><i class="iconStarEmpty"></i>iconStarEmpty</li>
  <li><i class="iconStar"></i>iconStar</li>
  <li><i class="iconHeart"></i>iconHeart</li>
  <li><i class="iconHeartEmpty"></i>iconHeartEmpty</li>
  <li><i class="iconMail"></i>iconMail</li>
  <li><i class="iconList"></i>iconList</li>
  <li><i class="iconPicture"></i>iconPicture</li>
  <li><i class="iconMap"></i>iconMap</li>
  <li><i class="iconThumbsUp"></i>iconThumbsUp</li>
  <li><i class="iconThumbsDown"></i>iconThumbsDown</li>
  <li><i class="iconBell"></i>iconBell</li>
  <li><i class="iconBasket"></i>iconBasket</li>
  <li><i class="iconDocs"></i>iconDocs</li>
  <li><i class="iconVideo"></i>iconVideo</li>
  <li><i class="iconCalendar"></i>iconCalendar</li>
  <li><i class="iconCamera"></i>iconCamera</li>
  <li><i class="iconClock"></i>iconClock</li>
  <li><i class="iconHourGlass"></i>iconHourGlass</li>
  <li><i class="iconFood"></i>iconFood</li>
  <li><i class="iconFuel"></i>iconFuel</li>
  <li><i class="iconFHEO"></i>iconFHEO</li>

  <li><h5>Users / User Help</h5>
  <li><i class="iconUser"></i>iconUser</li>
  <li><i class="iconUsers"></i>iconUsers</li>
  <li><i class="iconUserAdd"></i>iconUserAdd</li>
  <li><i class="iconVcard"></i>iconVcard</li>
  <li><i class="iconCog"></i>iconCog</li>
  <li><i class="iconInfo"></i>iconInfo</li>
  <li><i class="iconHelp"></i>iconHelp</li>
  <li><i class="iconCircledHelp"></i>iconCircledHelp</li>
  <li><i class="iconTrophy"></i>iconTrophy</li>
  <li><i class="iconBookmark"></i>iconBookmark</li>
  <li><i class="iconAttention"></i>iconAttention</li>
  <li><i class="iconBlock"></i>iconBlock</li>
  <li><i class="iconFlag"></i>iconFlag</li>
  <li><i class="iconPrint"></i>iconPrint</li>

  <li><h5>UGC</h5>
  <li><i class="iconTag"></i>iconTag</li>
  <li><i class="iconQuote"></i>iconQuote</li>
  <li><i class="iconComment"></i>iconComment</li>
  <li><i class="iconChat"></i>iconChat</li>

  <li><h5>Social Media</h5>
  <li><i class="iconTwitter"></i>iconTwitter</li>
  <li><i class="iconFacebook"></i>iconFacebook</li>
  <li><i class="iconPinterest"></i>iconPinterest</li>
  <li><i class="iconLinkedin"></i>iconLinkedin</li>
  <li><i class="iconGooglePlus"></i>iconGooglePlus</li>
  <li><i class="iconApple"></i>iconApple</li>
  <li><i class="iconAndroid"></i>iconAndroid</li>

  <li><h5>Inbox / Web</h5>
  <li><i class="iconCloud"></i>iconCloud</li>
  <li><i class="iconInbox"></i>iconInbox</li>
  <li><i class="iconFolder"></i>iconFolder</li>
  <li><i class="iconPencil"></i>iconPencil</li>
  <li><i class="iconReply"></i>iconReply</li>
  <li><i class="iconReplyAll"></i>iconReplyAll</li>
  <li><i class="iconForward"></i>iconForward</li>
  <li><i class="iconAttach"></i>iconAttach</li>
  <li><i class="iconStarNotification"></i>iconStarNotification</li>
  <li><i class="iconMessageCompose"></i>iconMessageCompose</li>
  <li><i class="iconMessageView"></i>iconMessageView</li>
  <li><i class="iconBlog"></i>iconBlog</li>

  <li><h5>Controls</h5>
  <li><i class="iconPopup"></i>iconPopup</li>
  <li><i class="iconPlus"></i>iconPlus</li>
  <li><i class="iconMinus"></i>iconMinus</li>
  <li><i class="iconTrash"></i>iconTrash</li>
  <li><i class="iconResizeFull"></i>iconResizeFull</li>
  <li><i class="iconResizeSmall"></i>iconResizeSmall</li>
  <li><i class="iconCheck"></i>iconCheck</li>
  <li><i class="iconCancel"></i>iconCancel</li>

  <li><h5>Arrows</h5>
  <li><i class="iconDownOpen"></i>iconDownOpen</li>
  <li><i class="iconLeftOpen"></i>iconLeftOpen</li>
  <li><i class="iconRightOpen"></i>iconRightOpen</li>
  <li><i class="iconUpOpen"></i>iconUpOpen</li>
  <li><i class="iconUp"></i>iconUp</li>
  <li><i class="iconDown"></i>iconDown</li>
  <li><i class="iconLeft "></i>iconLeft</li>
  <li><i class="iconRight"></i>iconRight</li>

  <li><h5>Mobile</h5>
  <li><i class="iconMenu"></i>iconMenu</li>
  <li><i class="iconExport"></i>iconExport</li>
  <li><i class="iconPhone"></i>iconPhone</li>
  <li><i class="iconMobile"></i>iconMobile</li>

  <li><h5>Maps / Local Info</h5>
  <li><i class="iconAddress"></i>iconAddress</li>
  <li><i class="iconLocation"></i>iconLocation</li>
  <li><i class="iconDirection"></i>iconDirection</li>
  <li><i class="iconCup"></i>iconCup</li>
  <li><i class="iconFlight"></i>iconFlight</li>
  <li><i class="iconGlobe"></i>iconGlobe</li>
  <li><i class="iconLeaf"></i>iconLeaf</li>
  <li><i class="iconGraduationCap"></i>iconGraduationCap</li>
  <li><i class="iconTicket"></i>iconTicket</li>
  <li><i class="iconRocket"></i>iconRocket</li>
  <li><i class="iconAffordability"></i>iconAffordability</li>
  <li><i class="iconHomeWorth"></i>iconHomeWorth</li>

  <li><h5>Data</h5>
  <li><i class="iconChartPie"></i>iconChartPie</li>
  <li><i class="iconChartLine"></i>iconChartLine</li>
  <li><i class="iconChartBar"></i>iconChartBar</li>
  <li><i class="iconChartArea"></i>iconChartArea</li>

  <li><h5>Amenities</h5>
  <li><i class="iconCrime"></i>iconCrime</li>
  <li><i class="iconCity"></i>iconCity</li>
  <li><i class="iconEye"></i>iconEye</li>
  <li><i class="iconAir"></i>iconAir</li>
  <li><i class="iconMoon"></i>iconMoon</li>
  <li><i class="iconNoteBeamed"></i>iconNoteBeamed</li>
  <li><i class="iconPaperPlane"></i>iconPaperPlane</li>
  <li><i class="iconCreditCard"></i>iconCreditCard</li>
  <li><i class="iconMegaphone"></i>iconMegaphone</li>
  <li><i class="iconStarShield"></i>iconStarShield</li>
  <li><i class="iconFloorplan"></i>iconFloorplan</li>
  <li><i class="iconBed"></i>iconBed</li>
  <li><i class="iconBath"></i>iconBath</li>
  <li><i class="iconCoffee"></i>iconCoffee</li>
  <li><i class="iconShopping"></i>iconShopping</li>
  <li><i class="iconRestaurants"></i>iconRestaurants</li>
  <li><i class="iconActivelife"></i>iconActiveLife</li>
  <li><i class="iconDog"></i>iconDog</li>
  <li><i class="iconCat"></i>iconCat</li>
  <li><i class="iconPig"></i>iconPig</li>

  <li><h5>Commute</h5>
  <li><i class="iconBike"></i>iconBike</li>
  <li><i class="iconCar"></i>iconCar</li>
  <li><i class="iconTransit"></i>iconTransit</li>
  <li><i class="iconWalking"></i>iconWalking</li>
  <li><i class="iconZombieHand"></i>iconZombieHand</li>
</ul>


[[[plugin:css-test
<ul>
  <li><i class="iconHome"></i>iconHome</li>
  <li><i class="iconSearch"></i>iconSearch</li>
  <li><i class="iconStarEmpty"></i>iconStarEmpty</li>
  <li><i class="iconStar"></i>iconStar</li>
  <li><i class="iconHeart"></i>iconHeart</li>
  <li><i class="iconHeartEmpty"></i>iconHeart</li>
  <li><i class="iconMail"></i>iconMail</li>
  <li><i class="iconList"></i>iconList</li>
  <li><i class="iconPicture"></i>iconPicture</li>
  <li><i class="iconMap"></i>iconMap</li>
  <li><i class="iconThumbsUp"></i>iconThumbsUp</li>
  <li><i class="iconThumbsDown"></i>iconThumbsDown</li>
  <li><i class="iconBell"></i>iconBell</li>
  <li><i class="iconBasket"></i>iconBasket</li>
  <li><i class="iconDocs"></i>iconDocs</li>
  <li><i class="iconVideo"></i>iconVideo</li>
  <li><i class="iconCalendar"></i>iconCalendar</li>
  <li><i class="iconCamera"></i>iconCamera</li>
  <li><i class="iconClock"></i>iconClock</li>
  <li><i class="iconHourGlass"></i>iconHourGlass</li>
  <li><i class="iconFood"></i>iconFood</li>
</ul>
]]]

*/
.icon-sprite, .icon-transitscoreDefault, .icon-walkscoreDefault {
  background: url('//static.trulia-cdn.com/images/oocss/icon-s301a33b0f0.png') no-repeat;
}

.icon-transitscoreDefault {
  background-position: 0 -16px;
  height: 15px;
  width: 13px;
}

.icon-walkscoreDefault {
  background-position: 0 0;
  height: 16px;
  width: 78px;
}

/*doc
---
title: Image Icons
name: iconInline
parent: icon
category: Icons
author: JD + Sarah
test: true
---

These icons work similarly to our icon fonts, but are static images instead.

## Available Icons

```html_example
<ul>
  <li><i class="iconSpinner"></i>
  <div class="clearfix"></div>
  <div class="mtm">iconSpinner</div></li>
  <li><i class="iconLargeSpinner"></i>
  <div class="clearfix"></div>
  iconLargeSpinner</li>
</ul>
```

*/
/*doc
---
title: Colored Icons
name: iconColors
parent: icon
category: Icons
author: JD
test: true
---

A few icons have useful color alternatives. Most of the time you should
not need to use these by themselves.

<ul class="h1 backgroundHighlight typeReversed pas">
  <li><i class="iconHeartActive"></i>iconHeartActive</li>
  <li><i class="iconHeartInactive"></i>iconHeartInactive</li>
</ul>

*/
/*doc
---
title: Icon Disks
name: iconDisk
parent: icon
category: Icons
author: Sarah Drasner
---

Icons can be isolated as a design element and page component. The icon inside is changeable, and there are a few color variations for backgrounds. Suggested default is grey.

Class            | Description
---------------- | -----------
`iconDisk`       | The Default Grey for the Icon Disk. This should be used when only one Icon Disk is in the design. Not opinionated about positioning.
`iconDiskInline` | This class should be used with Icon Disk to place it inline with titles. 
`iconDiskTeal`   | Icon Disk with a teal background.
`iconDiskChar`   | Icon Disk with a chartreuse background.
`iconDiskPink`   | Icon Disk with a pink background.
`iconDiskOrange` | Icon Disk with an orange background.
`iconDiskGood`   | Icon Disk to indicate good.
`iconDiskAverage`| Icon Disk to indicate average.
`iconDiskPoor`   | Icon Disk to indicate poor.

### Default 

```html_example
<i class="iconHome iconDisk iconDiskInline"></i><h3 class="pts">Title Here</h3>
```

<blockquote class="designer">Be careful when using color in these icons, as we use color as information on the site. Color decisions should be purposeful and consider this and surrounding elements</blockquote>


### Design Colors
These colors help designers have iconic and brand moments in their page while displaying information about sections

```html_example
<table class="table">
  <tbody>
    <tr>
      <td class="txtC">
        <i class="iconHome iconDiskTeal centerHorizontal"></i>
        <div class="ptm">Icon Disk Teal</div>
      </td>
      <td class="txtC">
        <i class="iconHome iconDiskChar centerHorizontal"></i>
        <div class="ptm">Icon Disk Char</div>
      </td>
      <td class="txtC">
        <i class="iconHome iconDiskPink centerHorizontal"></i>
        <div class="ptm">Icon Disk Pink</div>
      </td>
      <td class="txtC">
        <i class="iconHome iconDiskOrange centerHorizontal"></i>
        <div class="ptm">Icon Disk Orange</div>
      </td>
    </tr>
  </tbody>
</table>
```


### Informative Colors
These colors help guide people to information in the text. Examples would be text that explains a crime rating on a map. For text that coincides with these colors,
please see the [typographic example](/typography.html#typeDecoration).

```html_example
<table class="table">
  <tbody>
    <tr>
      <td class="txtC">
        <i class="iconHome iconDiskGood centerHorizontal"></i>
        <div class="ptm">Icon Disk Good</div>
      </td>
      <td class="txtC">
        <i class="iconHome iconDiskAverage centerHorizontal"></i>
        <div class="ptm">Icon Disk Average</div>
      </td>
      <td class="txtC">
        <i class="iconHome iconDiskPoor centerHorizontal"></i>
        <div class="ptm">Icon Disk Poor</div>
      </td>
    </tr>
  </tbody>
</table>
```


### Using Span Elements
You can use span elements like numbers rather than icons. Pro-tip: don't use the i tag for numbers, as it will turn them italic.

```html_example
<table class="table">
  <tbody>
    <tr>
      <td class="txtC">
        <span class="iconDiskGood centerHorizontal">1</span>
        <div class="ptm">Icon Disk Good</div>
      </td>
      <td class="txtC">
        <span class="iconDiskAverage centerHorizontal">2</span>
        <div class="ptm">Icon Disk Average</div>
      </td>
      <td class="txtC">
        <span class="iconDiskPoor centerHorizontal">10</span>
        <div class="ptm">Icon Disk Poor</div>
      </td>
    </tr>
  </tbody>
</table>
```


*/
/*doc
---
title: Stacked Icons
name: iconStacks
parent: icon
category: Icons
author: JD
test: true
---

Occasionally, stacking icons is needed. See the design components page for usage.

```html_example
<div class="h1 backgroundHighlight typeReversed pas">
  <span class="stackIcons">
    <i class="iconHeartActive iconOnly"></i>
    <i class="iconHeartEmpty typeReversed iconOnly"></i>
  </span>
  Home saved
  <br>
  <span class="stackIcons">
    <i class="iconHeartInactive iconOnly"></i>
    <i class="iconHeartEmpty typeReversed iconOnly"></i>
  </span>
  Home not saved.
  <br>

  Inside a button:
  <button>
    <span class="stackIcons">
      <i class="iconHeartActive iconOnly"></i>
      <i class="iconHeartEmpty typeReversed iconOnly"></i>
    </span>
  </button>
</div>
```

*/
/*doc
---
title: Icon Utils
name: iconUtils
parent: icon
category: Icons
author: JD
---

### Flipping icons!
Icons can be flipped when needed:

```html_example
  <i class="iconQuote iconRotate180"></i>The scariest quotes are iconic.<br>
  <i class="iconFood iconFlipHorizontal"></i>Flipping fork.<br>
  <i class="iconNoteBeamed iconFlipVertical"></i>Jazzy
```

### Using icons alone

All icons have a built in right margin. If you find yourself working a
design where an icon stands alone in a box with no text you may want to
use `iconOnly`:

```html_example
Bad - not centered within container:
<span class="bas phs pvn"><i class="iconStarShield"></i></span>
<br><br>

Good - centered within container:
<span class="bas phs pvn"><i class="iconOnly iconStarShield"></i></span>
```


*/
.toggleArrow:before, .toggleArrowActive:before, .iconActivelife:before, .iconAddress:before, .iconAgent:before, .iconChartArea:before, .iconChartBar:before, .iconChartLine:before, .iconExport:before, .iconEye:before, .iconFacebook:before, .iconInfo:before, .iconLeaf:before, .iconLeft:before, .iconPhone:before, .iconPicture:before, .iconPig:before, .iconStarEmpty:before, .ratingStar .ratingGroup label:before, .iconStarDefault:before, .iconStarShield:before, .iconCrime:before, .iconTag:before, .iconAffordability:before, .iconUserAdd:before, .iconAir:before, .iconAndroid:before, .iconApple:before, .iconAttach:before, .iconAttention:before, .iconBasket:before, .iconBath:before, .iconBed:before, .iconBell:before, .iconBike:before, .iconBlock:before, .iconBookmark:before, .iconCalendar:before, .iconCamera:before, .iconCancel:before, .iconCar:before, .iconCat:before, .iconChartPie:before, .iconChat:before, .iconCheck:before, .iconCircledHelp:before, .iconCity:before, .iconClock:before, .iconCloud:before, .iconCoffee:before, .iconCog:before, .iconComment:before, .iconCreditCard:before, .iconCup:before, .iconDirection:before, .iconDocs:before, .iconDog:before, .iconDown:before, .iconDownOpen:before, .iconFHEO:before, .iconFlag:before, .iconFlight:before, .iconFloorplan:before, .iconFolder:before, .iconFood:before, .iconForward:before, .iconFuel:before, .iconGlobe:before, .iconGooglePlus:before, .iconGraduationCap:before, .iconHeart:before, .iconHeartInactive:before, .iconHeartEmpty:before, .iconHelp:before, .iconHome:before, .iconHourGlass:before, .iconInbox:before, .iconLeftOpen:before, .iconLinkedin:before, .iconList:before, .iconLocation:before, .iconMail:before, .iconMap:before, .iconMegaphone:before, .iconMenu:before, .iconMessageCompose:before, .iconMessageView:before, .iconMinus:before, .iconMobile:before, .iconMoon:before, .iconNoteBeamed:before, .iconMortgage:before, .iconPaperPlane:before, .iconPencil:before, .iconPinterest:before, .iconPlus:before, .iconPopup:before, .iconPrint:before, .iconQuote:before, .iconRent:before, .iconReply:before, .iconReplyAll:before, .iconResizeFull:before, .iconResizeSmall:before, .iconRestaurants:before, .iconRight:before, .iconRightOpen:before, .iconRocket:before, .iconSearch:before, .iconShopping:before, .iconStar:before, .ratingStar .ratingGroup .ratingOn label:before, .iconStarActive:before, .iconStarNotification:before, .iconThumbsDown:before, .iconThumbsUp:before, .iconTicket:before, .iconTransit:before, .iconTrash:before, .iconTrophy:before, .iconTwitter:before, .iconUp:before, .iconUpOpen:before, .iconUser:before, .iconUsers:before, .iconVcard:before, .iconVideo:before, .iconWalking:before, .iconZombieHand:before, .iconHomeWorth:before, .iconBlog:before, .iconHeartActive:before {
  font-family: 'Truliacons';
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1.1em;
  margin-right: 0.2em;
  vertical-align: baseline;
  text-align: center;
  font-variant: normal;
  text-transform: none;
}

.iconActivelife:before {
  content: '\e800';
}

.iconAddress:before {
  content: '\e801';
}

.iconAgent:before {
  content: '\e802';
}

.iconChartArea:before {
  content: '\e803';
}

.iconChartBar:before {
  content: '\e804';
}

.iconChartLine:before {
  content: '\e805';
}

.iconExport:before {
  content: '\e806';
}

.iconEye:before {
  content: '\e807';
}

.iconFacebook:before {
  content: '\e808';
}

.iconInfo:before {
  content: '\e809';
}

.iconLeaf:before {
  content: '\e80a';
}

.iconLeft:before {
  content: '\e80b';
}

.iconPhone:before {
  content: '\e80c';
}

.iconPicture:before {
  content: '\e80d';
}

.iconPig:before {
  content: '\e80e';
}

.iconStarEmpty:before, .ratingStar .ratingGroup label:before {
  content: '\e80f';
}

.iconStarDefault:before {
  content: '\e80f';
}

.iconStarShield:before {
  content: '\e810';
}

.iconCrime:before {
  content: '\e810';
}

.iconTag:before {
  content: '\e811';
}

.iconAffordability:before {
  content: '\e812';
}

.iconUserAdd:before {
  content: '\e813';
}

.iconAir:before {
  content: '\e814';
}

.iconAndroid:before {
  content: '\e815';
}

.iconApple:before {
  content: '\e816';
}

.iconAttach:before {
  content: '\e817';
}

.iconAttention:before {
  content: '\e818';
}

.iconBasket:before {
  content: '\e819';
}

.iconBath:before {
  content: '\e81a';
}

.iconBed:before {
  content: '\e81b';
}

.iconBell:before {
  content: '\e81c';
}

.iconBike:before {
  content: '\e81d';
}

.iconBlock:before {
  content: '\e81e';
}

.iconBookmark:before {
  content: '\e81f';
}

.iconCalendar:before {
  content: '\e820';
}

.iconCamera:before {
  content: '\e821';
}

.iconCancel:before {
  content: '\e859';
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.iconCar:before {
  content: '\e823';
}

.iconCat:before {
  content: '\e824';
}

.iconChartPie:before {
  content: '\e825';
}

.iconChat:before {
  content: '\e826';
}

.iconCheck:before {
  content: '\e827';
}

.iconCircledHelp:before {
  content: '\e828';
}

.iconCity:before {
  content: '\e829';
}

.iconClock:before {
  content: '\e82a';
}

.iconCloud:before {
  content: '\e82b';
}

.iconCoffee:before {
  content: '\e82c';
}

.iconCog:before {
  content: '\e82d';
}

.iconComment:before {
  content: '\e82e';
}

.iconCreditCard:before {
  content: '\e82f';
}

.iconCup:before {
  content: '\e830';
}

.iconDirection:before {
  content: '\e831';
}

.iconDocs:before {
  content: '\e832';
}

.iconDog:before {
  content: '\e833';
}

.iconDown:before {
  content: '\e834';
}

.iconDownOpen:before {
  content: '\e835';
}

.iconFHEO:before {
  content: '\e836';
}

.iconFlag:before {
  content: '\e837';
}

.iconFlight:before {
  content: '\e838';
}

.iconFloorplan:before {
  content: '\e839';
}

.iconFolder:before {
  content: '\e83a';
}

.iconFood:before {
  content: '\e83b';
}

.iconForward:before {
  content: '\e83c';
}

.iconFuel:before {
  content: '\e83d';
}

.iconGlobe:before {
  content: '\e83e';
}

.iconGooglePlus:before {
  content: '\e83f';
}

.iconGraduationCap:before {
  content: '\e840';
}

.iconHeart:before {
  content: '\e841';
}

.iconHeartInactive:before {
  content: '\e841';
}

.iconHeartEmpty:before {
  content: '\e842';
}

.iconHelp:before {
  content: '\e843';
}

.iconHome:before {
  content: '\e844';
}

.iconHourGlass:before {
  content: '\e845';
}

.iconInbox:before {
  content: '\e846';
}

.iconLeftOpen:before {
  content: '\e847';
}

.iconLinkedin:before {
  content: '\e848';
}

.iconList:before {
  content: '\e849';
}

.iconLocation:before {
  content: '\e84a';
}

.iconMail:before {
  content: '\e84b';
}

.iconMap:before {
  content: '\e84c';
}

.iconMegaphone:before {
  content: '\e84d';
}

.iconMenu:before {
  content: '\e84e';
}

.iconMessageCompose:before {
  content: '\e84f';
}

.iconMessageView:before {
  content: '\e850';
}

.iconMinus:before {
  content: '\e851';
}

.iconMobile:before {
  content: '\e852';
}

.iconMoon:before {
  content: '\e853';
}

.iconNoteBeamed:before {
  content: '\e854';
}

.iconMortgage:before {
  content: '\e855';
}

.iconPaperPlane:before {
  content: '\e856';
}

.iconPencil:before {
  content: '\e857';
}

.iconPinterest:before {
  content: '\e858';
}

.iconPlus:before {
  content: '\e859';
}

.iconPopup:before {
  content: '\e85a';
}

.iconPrint:before {
  content: '\e85b';
}

.iconQuote:before {
  content: '\e85c';
}

.iconRent:before {
  content: '\e85d';
}

.iconReply:before {
  content: '\e85e';
}

.iconReplyAll:before {
  content: '\e85f';
}

.iconResizeFull:before {
  content: '\e860';
}

.iconResizeSmall:before {
  content: '\e861';
}

.iconRestaurants:before {
  content: '\e862';
}

.iconRight:before {
  content: '\e863';
}

.iconRightOpen:before {
  content: '\e864';
}

.iconRocket:before {
  content: '\e865';
}

.iconSearch:before {
  content: '\e866';
}

.iconShopping:before {
  content: '\e867';
}

.iconStar:before, .ratingStar .ratingGroup .ratingOn label:before {
  content: '\e868';
}

.iconStarActive:before {
  content: '\e868';
}

.iconStarNotification:before {
  content: '\e868';
}

.iconThumbsDown:before {
  content: '\e869';
}

.iconThumbsUp:before {
  content: '\e86a';
}

.iconTicket:before {
  content: '\e86b';
}

.iconTransit:before {
  content: '\e86c';
}

.iconTrash:before {
  content: '\e86d';
}

.iconTrophy:before {
  content: '\e86e';
}

.iconTwitter:before {
  content: '\e86f';
}

.iconUp:before {
  content: '\e870';
}

.iconUpOpen:before {
  content: '\e871';
}

.iconUser:before {
  content: '\e872';
}

.iconUsers:before {
  content: '\e873';
}

.iconVcard:before {
  content: '\e874';
}

.iconVideo:before {
  content: '\e875';
}

.iconWalking:before {
  content: '\e876';
}

.iconZombieHand:before {
  content: '\e877';
}

.iconHomeWorth:before {
  content: '\e878';
}

.iconBlog:before {
  content: '\e879';
}

@font-face {
  font-family: "Truliacons";
  src: url("//static.trulia-cdn.com/images/fonts/Truliacons_20151012/fontello.eot");
  src: url("//static.trulia-cdn.com/images/fonts/Truliacons_20151012/fontello.eot?#iefix") format("embedded-opentype"), url("//static.trulia-cdn.com/images/fonts/Truliacons_20151012/fontello.woff") format("woff"), url("//static.trulia-cdn.com/images/fonts/Truliacons_20151012/fontello.ttf") format("truetype"), url("//static.trulia-cdn.com/images/fonts/Truliacons_20151012/fontello.svg#Truliacons") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

.iconLargeSpinner:before {
  display: inline-block;
  content: '';
}

.iconLargeSpinner:before {
  width: 54px;
  height: 55px;
  background-image: url('data:image/gif;base64,R0lGODlhNgA3APMAAP///wAAAHh4eBwcHA4ODtjY2FRUVNzc3MTExEhISIqKigAAAAAAAAAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAANgA3AAAEzBDISau9OOvNu/9gKI5kaZ4lkhBEgqCnws6EApMITb93uOqsRC8EpA1Bxdnx8wMKl51ckXcsGFiGAkamsy0LA9pAe1EFqRbBYCAYXXUGk4DWJhZN4dlAlMSLRW80cSVzM3UgB3ksAwcnamwkB28GjVCWl5iZmpucnZ4cj4eWoRqFLKJHpgSoFIoEe5ausBeyl7UYqqw9uaVrukOkn8LDxMXGx8ibwY6+JLxydCO3JdMg1dJ/Is+E0SPLcs3Jnt/F28XXw+jC5uXh4u89EQAh+QQACgABACwAAAAANgA3AAAEzhDISau9OOvNu/9gKI5kaZ5oqhYGQRiFWhaD6w6xLLa2a+iiXg8YEtqIIF7vh/QcarbB4YJIuBKIpuTAM0wtCqNiJBgMBCaE0ZUFCXpoknWdCEFvpfURdCcM8noEIW82cSNzRnWDZoYjamttWhphQmOSHFVXkZecnZ6foKFujJdlZxqELo1AqQSrFH1/TbEZtLM9shetrzK7qKSSpryixMXGx8jJyifCKc1kcMzRIrYl1Xy4J9cfvibdIs/MwMue4cffxtvE6qLoxubk8ScRACH5BAAKAAIALAAAAAA2ADcAAATOEMhJq7046827/2AojmRpnmiqrqwwDAJbCkRNxLI42MSQ6zzfD0Sz4YYfFwyZKxhqhgJJeSQVdraBNFSsVUVPHsEAzJrEtnJNSELXRN2bKcwjw19f0QG7PjA7B2EGfn+FhoeIiYoSCAk1CQiLFQpoChlUQwhuBJEWcXkpjm4JF3w9P5tvFqZsLKkEF58/omiksXiZm52SlGKWkhONj7vAxcbHyMkTmCjMcDygRNAjrCfVaqcm11zTJrIjzt64yojhxd/G28XqwOjG5uTxJhEAIfkEAAoAAwAsAAAAADYANwAABM0QyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY/OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq/b7/i8qmCoGQoacT8FZ4AXbFopfTwEBhhnQ4w2j0GRkgQYiEOLPI6ZUkgHZwd6EweLBqSlq6ytricICTUJCKwKkgojgiMIlwS1VEYlspcJIZAkvjXHlcnKIZokxJLG0KAlvZfAebeMuUi7FbGz2z/Rq8jozavn7Nev8CsRACH5BAAKAAQALAAAAAA2ADcAAATLEMhJq7046827/2AojmRpnmiqrqwwDAJbCkRNxLI42MSQ6zzfD0Sz4YYfFwzJNCmPzheUyJuKijVrZ2cTlrg1LwjcO5HFyeoJeyM9U++mfE6v2+/4PD6O5F/YWiqAGWdIhRiHP4kWg0ONGH4/kXqUlZaXmJlMBQY1BgVuUicFZ6AhjyOdPAQGQF0mqzauYbCxBFdqJao8rVeiGQgJNQkIFwdnB0MKsQrGqgbJPwi2BMV5wrYJetQ129x62LHaedO21nnLq82VwcPnIhEAIfkEAAoABQAsAAAAADYANwAABMwQyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY/OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq/b7/g8Po7kX9haKoAZZ0iFGIc/iRaDQ40Yfj+RepSVlpeYAAgJNQkIlgo8NQqUCKI2nzNSIpynBAkzaiCuNl9BIbQ1tl0hraewbrIfpq6pbqsioaKkFwUGNQYFSJudxhUFZ9KUz6IGlbTfrpXcPN6UB2cHlgfcBuqZKBEAIfkEAAoABgAsAAAAADYANwAABMwQyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhhh8XDMk0KY/OF5TIm4qKNWtnZxOWuDUvCNw7kcXJ6gl7Iz1T76Z8Tq/b7yJEopZA4CsKPDUKfxIIgjZ+P3EWe4gECYtqFo82P2cXlTWXQReOiJE5bFqHj4qiUhmBgoSFho59rrKztLVMBQY1BgWzBWe8UUsiuYIGTpMglSaYIcpfnSHEPMYzyB8HZwdrqSMHxAbath2MsqO0zLLorua05OLvJxEAIfkEAAoABwAsAAAAADYANwAABMwQyEmrvTjrzbv/YCiOZGmeaKqurDAMAlsKRE3EsjjYxJDrPN8PRLPhfohELYHQuGBDgIJXU0Q5CKqtOXsdP0otITHjfTtiW2lnE37StXUwFNaSScXaGZvm4r0jU1RWV1hhTIWJiouMjVcFBjUGBY4WBWw1A5RDT3sTkVQGnGYYaUOYPaVip3MXoDyiP3k3GAeoAwdRnRoHoAa5lcHCw8TFxscduyjKIrOeRKRAbSe3I9Um1yHOJ9sjzCbfyInhwt3E2cPo5dHF5OLvJREAOwAAAAAAAAAAAA==');
  vertical-align: middle;
  margin: 0 0 2px 0;
}

@keyframes loading {
  0% {
    border-color: #0daa5f #2ed975 #20c063 #10a75f;
  }

  35% {
    border-color: #10a75f #0daa5f #2ed975 #20c063;
    border-radius: 50%;
  }

  50% {
    border-color: #20c063 #10a75f #0daa5f #2ed975;
    border-radius: 50%;
  }

  55% {
    border-color: #2ed975 #20c063 #10a75f #10a75f;
    border-radius: 50%;
  }

  100% {
    border-color: #0daa5f #2ed975 #20c063 #10a75f;
    transform: rotate(360deg);
  }
}

.iconSpinner {
  width: 0px;
  height: 0px;
  display: inline-block;
  margin: -1.6px 0 -8px;
  border: 0px solid #0daa5f;
  border-width: 8px 8px;
  animation: loading 0.85s linear infinite;
  opacity: 0.7;
}

.iconExt {
  margin-right: 0;
  margin-left: 5px;
}

.iconCompact {
  margin-right: 0;
}

.iconHeartActive:before {
  content: '\e841';
  color: #ed1b77;
}

.iconHeartInactive:before {
  content: '\e841';
  color: rgba(71, 78, 82, 0.4);
}

.stackIcons {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}

.stackIcons .iconOnly {
  position: absolute;
  left: 0px;
  font-weight: normal !important;
}

.iconFlipHorizontal:before {
  transform: scale(-1, 1);
}

.iconFlipVertical:before {
  transform: scale(1, -1);
}

.iconRotate180:before {
  transform: rotate(180deg);
}

.iconOnly:before {
  margin: 0 !important;
}

i.iconDisk, span.iconDisk {
  font-size: 24px;
  color: #474e52;
  background: #e8e9ea;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDisk:before, span.iconDisk:before {
  margin-right: 0;
}

i.iconDiskInline, span.iconDiskInline {
  float: left;
  margin-right: 8px;
}

i.iconDiskTeal, span.iconDiskTeal {
  font-size: 24px;
  color: white;
  background: #06e7bb;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDiskTeal:before, span.iconDiskTeal:before {
  margin-right: 0;
}

i.iconDiskChar, span.iconDiskChar {
  font-size: 24px;
  color: #474e52;
  background: #c9f524;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDiskChar:before, span.iconDiskChar:before {
  margin-right: 0;
}

i.iconDiskPink, span.iconDiskPink {
  font-size: 24px;
  color: white;
  background: #ed1b77;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDiskPink:before, span.iconDiskPink:before {
  margin-right: 0;
}

i.iconDiskOrange, span.iconDiskOrange {
  font-size: 24px;
  color: white;
  background: #f74a27;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDiskOrange:before, span.iconDiskOrange:before {
  margin-right: 0;
}

i.iconDiskGood, span.iconDiskGood {
  font-size: 24px;
  color: white;
  background: #228959;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDiskGood:before, span.iconDiskGood:before {
  margin-right: 0;
}

i.iconDiskAverage, span.iconDiskAverage {
  font-size: 24px;
  color: white;
  background: #fbb100;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDiskAverage:before, span.iconDiskAverage:before {
  margin-right: 0;
}

i.iconDiskPoor, span.iconDiskPoor {
  font-size: 24px;
  color: white;
  background: #e13009;
  width: 48px;
  height: 48px;
  padding: 12px 10px;
  line-height: 1;
  border-radius: 50%;
  display: block;
}
i.iconDiskPoor:before, span.iconDiskPoor:before {
  margin-right: 0;
}

/*doc
---
title: Hover
name: hover
category: Interaction
author: JD and Sarah
---

You can use the hover and hoverDisplay classes to display elements on hover

Class             | Description
----------------- | -----------------
`hover`           | This class goes on a container element, usually used for typography. The element's size and shape will be used for determining when the hover effect is on and off.
`hoverDisplay`    | The element to display on hover, this does not need to be a direct child of hover and can used as many times as needed.
`hoverBlock`      | This class is to be used on block-level elements that need a hover state
`hoverPulse`      | This class is to be used to make something pulse a little on hover, like the stackIcons heart element


###Hover - Best for Typography

```html_example
<ul class="hover">
  <li class="hoverDisplay">One</li>
  <li>Two</li>
  <li class="hoverDisplay">Three</li>
  <li>Four
    <span class="hoverDisplay">Five</span>
</ul>
```

###Hover Block

```html_example
<div class="hoverBlock backgroundLowlight">
  <h2 class="pll">Hover me!</h2>
</div>
```

###Hover Pulse

```html_example
<div class="h3 backgroundHighlight typeReversed pas">
  <span class="hoverPulse stackIcons">
    <i class="iconHeartInactive iconOnly"></i>
    <i class="iconHeartEmpty typeReversed iconOnly"></i>
  </span>
  Hover on the Heart.
</div>
```

*/
.hover .hoverDisplay {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.hover:hover .hoverDisplay {
  opacity: 1;
  visibility: visible;
}

.hoverBlock {
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
.hoverBlock:hover {
  -webkit-box-shadow: 0px 0px 0px 1px #cdd1d4;
  -moz-box-shadow: 0px 0px 0px 1px #cdd1d4;
  box-shadow: 0px 0px 0px 1px #cdd1d4;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.hoverPulse {
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  cursor: pointer;
}
.hoverPulse:hover {
  -webkit-transform: scale(1.08);
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  transform: scale(1.08);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

/*doc
---
title: Template
name: 0template
category: Layout
author: Fiona
---

We currently have one template that can produce several different
layouts. Here is the base html:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Hi Mom</title>
    <link href="screen.css"></link>
  </head>
  <body>
    <div class="content">
      <section>
        <div class="sideBar">
          Left rail
        </div>

        <aside class="aside" role="complementary">
          Right rail
        </aside>

        <div class="main" role="main">
          Main content goes here

        </div>
      </section>
    </div>
  </body>
</html>
```

To see a full example checkout this basic [template page](template.html)

You may also repeat the section tag and have several layouts on the
page. For example your top section may have 3 full columns while the
second section might only need two. If you don't need a left or right
rail simply remove the .sideBar and  .aside elements from your markup.

When to use the template and when to use a grid. Similar layouts can be
achieved using a grid, however keep in mind the grid will not have the
exact same widths as the template. You can follow this general rule:
*Always use grids inside the template classes, not to implement the
page layout itself*

*/
body {
  background: white;
}

.content > section,
.container {
  width: 980px;
  margin: 0 auto;
}

@media screen and (min-width: 1144px) {
  .contentResponsive > section,
  .containerResponsive {
    width: 1128px;
  }
}
.main[role="main"] {
  position: relative;
  top: -10px;
}

.skipLink:focus {
  width: 100%;
  padding: 5px 0;
  display: block;
  position: absolute;
  z-index: 100;
  text-indent: 5px;
  color: #fff;
  background: #20c063;
}

.header {
  padding-bottom: 15px;
  background: white;
  border-bottom: 1px solid #ccc;
}

.headerSubSection {
  font-size: 11px;
  text-align: right;
  line-height: 1;
  margin: 1px 0;
}
.headerSubSection a {
  color: #222;
}
.headerSubSection .highlight {
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -ms-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  background: #888;
}
.headerSubSection .listInline {
  margin: 0;
}

.headerMainSection {
  position: relative;
}
.headerMainSection .logo {
  position: absolute;
  left: 0;
  top: -1px;
}

.menuWrap {
  margin-left: 97px;
}

.content {
  padding-top: 5px;
}
.content .container {
  margin-top: 0;
}
.content > section {
  margin-top: 5px;
}

.main {
  float: none;
}

.sideBar {
  float: left;
  width: 185px;
  margin-right: 20px;
}

.aside {
  float: right;
  width: 300px;
  margin-left: 20px;
}

.footer {
  clear: both;
  margin-top: 40px;
  font-size: 12px;
}

.footerBox {
  border-top: 5px solid #20c063;
}
.footerBox .boxBody {
  margin: 10px 0;
}

.footerGroup a {
  color: #474e52;
}
.footerGroup a:hover, .footerGroup a:focus {
  color: #20c063;
  text-decoration: underline;
}

.footerCol {
  width: 125px;
}

.footerGroupHeading,
.footerDisclaimer,
.footerNoteAside {
  float: left;
}

.footerGroupHeading {
  width: 120px;
  margin: 0;
  clear: right;
  font-weight: bold;
}

.footerGroupList {
  margin: 0;
}
.footerGroupList > li {
  margin: 0;
}

.sticky {
  position: fixed !important;
}

/*doc
---
title: Image Container
name: imageContainer
category: Images
author: August Flanagan, Sarah Drasner
---

Image Containers wrap around your image and center it horizontally and vertically on a grey background.
You can use this when you have images that should fill a certain area, but are of mixed sizes (i.e. some
aren't quite all enough or wide enough)

*/
/*doc
---
parent: imageContainer
name: imageContainerSkins
title: Image Container Sizes
---

If you want the image container to be flexible, use `imageContainerCovered`- you can then define either the width or the height as the static dimension.
The image will then scale the other dimension to accommodate the container. It will scale from the center of the image.
You will need to define the image as a background-image- if you're using dynamic data in php, you can do so in an inline style. (Yes, a TXL member is saying it's ok to use an inline style just this once.)
You will have to define the static dimension as well. In this case it was the height. We added a class elsewhere that we created, `.height180` that would set this.
This element is good to use with responsive development.

```html_example
<div class="containerFluid">
  <div class="row">
    <div class="xsCol24 smlCol8 mdCol6 lrgCol6">
      <div class="imageContainerCovered height180 ex1"></div>
    </div>
    <div class="xsCol24 smlCol8 mdCol10 lrgCol10">
      <div class="imageContainerCovered height180 ex2"></div>
    </div>
    <div class="xsCol24 smlCol8 mdCol8 lrgCol8">
      <div class="imageContainerCovered height180 ex3"></div>
    </div>
  </div>
</div>
```

If you know the size of your image, you can set it to the following containing units. Available sizes (skins) are:

`imageContainer120x80`

`imageContainer160x120`

`imageContainer180x135`

`imageContainer286x214`

`imageContainer320x240`

`imageContainerWide320x240` - Only applied when the window is larger than 1144px, specify this after your default imageContainer class

`imageContainerClipped180x135` - Clips oversized images to prevent aspect ratio deformation

You can use Image Containers like this:

```html_example
<div class="imageContainer180x135">
  <img src="doc_assets/img/120x120.png" />
</div>
```

```html_example
<div class="imageContainer286x214 imageContainerWide320x240">
  <img src="doc_assets/img/320x240.png" />
 </div>
```

*/
.imageContainer120x80, .imageContainer160x120, .imageContainer180x135, .imageContainer286x214, .imageContainer320x240 {
  display: table-cell;
  vertical-align: middle;
  background-color: #f5f6f7;
}
.imageContainer120x80 img, .imageContainer160x120 img, .imageContainer180x135 img, .imageContainer286x214 img, .imageContainer320x240 img {
  display: block;
  margin: 0 auto;
  overflow: hidden;
}

.imageContainer120x80 {
  width: 120px;
  height: 80px;
}
.imageContainer120x80 img {
  max-width: 120px;
  max-height: 80px;
}

.imageContainer160x120 {
  width: 160px;
  height: 120px;
}
.imageContainer160x120 img {
  max-width: 160px;
  max-height: 120px;
}

.imageContainer180x135 {
  width: 180px;
  height: 135px;
}
.imageContainer180x135 img {
  max-width: 180px;
  max-height: 135px;
}

.imageContainer286x214 {
  width: 286px;
  height: 214px;
}
.imageContainer286x214 img {
  max-width: 286px;
  max-height: 214px;
}

.imageContainer320x240 {
  width: 320px;
  height: 240px;
}
.imageContainer320x240 img {
  max-width: 320px;
  max-height: 240px;
}

.imageContainerClipped180x135 {
  width: 180px;
  height: 135px;
  position: relative;
  overflow: hidden;
}
.imageContainerClipped180x135 img {
  margin: 0px auto;
  display: block;
}

@media screen and (min-width: 1144px) {
  .imageContainerWide320x240 {
    width: 320px;
    height: 240px;
  }
  .imageContainerWide320x240 img {
    max-width: 320px;
    max-height: 240px;
  }
}
.imageContainerCovered {
  width: 100%;
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
}

* html .imageContainerCovered {
  /* ie hack */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

.navMarker {
  height: 3px;
  background: #20c063;
  position: absolute;
  bottom: -2px;
  width: 165px;
  z-index: 8;
  border-bottom: 0 !important;
}

.nav {
  margin: 0;
}
.nav > li {
  display: inline-block;
}

.navDefault {
  font-size: 0;
  padding: 0;
  position: relative;
  /* Clearfix */
}
.navDefault > li {
  border-bottom: solid 1px #cdd1d4;
  font-size: 16px;
  text-align: center;
}
.navDefault > li.current_page_item a {
  color: #20c063;
}
.navDefault > li a {
  color: #3b4144;
  outline: 0;
  padding: 12px 20px;
  float: left;
}
.navDefault > li a:hover, .navDefault > li a:focus, .navDefault > li a.active {
  color: #20c063;
}
.navDefault:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}

/*doc
---
parent: tabs
name: tabColumns
title: Tab With Columns
---

Tabs Clas       | Description
--------------  | -----------
`tabColumns`    | This style of tabs is opaque and takes the full width of the container.  Define the tab spacing with column styles.

*/
.tabs {
  margin-bottom: 0;
}
.tabs > li {
  display: inline-block;
}
.tabs > li a:focus {
  outline: 0;
}

.tabDefault.tabs > li {
  font-weight: bold;
}
.tabDefault.tabs > li a {
  padding: 10px 20px;
  color: #3b4144;
  transition: all 0.2s cubic-bezier(0.38, 0.06, 0.38, 1.04);
  border-color: #e8e9ea;
}
.tabDefault.tabs > li a.active {
  color: #10a75f;
  border-top: 1px solid #e8e9ea;
  border-right: 1px solid #e8e9ea;
  border-left: 1px solid #e8e9ea;
  border-radius: 4px 4px 0 0;
  background: white;
  position: relative;
  z-index: 500;
}
.tabDefault.tabBody {
  padding: 10px 20px;
  border-top: 1px solid #e8e9ea;
  margin-top: 7px;
}

.tabPrimary > li {
  margin: 0 10px 9px 0;
  font-weight: normal;
}
.tabPrimary a,
.tabPrimary .active {
  position: relative;
  color: #474e52;
  padding: 10px 20px;
  border: 1px solid #cdd1d4;
  border-bottom: none;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background-color: #f5f6f7;
}
.tabPrimary a:hover {
  color: #20c063;
  background-color: white;
}
.tabPrimary .active {
  background-color: white;
  border-bottom: 1px solid white;
}
.tabPrimary .active:before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background-color: #20c063;
}
.tabPrimary span {
  line-height: 0;
}

.tabColumns ul {
  margin: 0;
}
.tabColumns > li {
  margin: 0;
  padding: 0 !important;
  position: relative;
  text-align: left;
}
.tabColumns li:first-child a,
.tabColumns li:first-child span.active {
  border-top-left-radius: 4px;
}
.tabColumns li:last-child a,
.tabColumns li:last-child span.active {
  border-top-right-radius: 4px;
}
.tabColumns a,
.tabColumns span.active {
  padding: 10px 20px;
  border-bottom: 1px solid #adadad;
  background: #adadad;
  background-color: rgba(173, 173, 173, 0.9);
  display: block;
  line-height: normal;
  color: #474e52;
}
.tabColumns a:hover {
  color: #474e52;
  background-color: #adadad;
}
.tabColumns span.active {
  background: white;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid white;
  border-bottom: none;
}
.tabColumns span {
  line-height: 0;
}

.photoPlayer {
  display: block;
}

.photoPlayerThumbnails {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  margin-top: 10px;
}
.photoPlayerThumbnails img {
  text-indent: 0;
  cursor: pointer;
  margin: 0 8px;
  padding: 3px;
  border: 1px solid #b1b6bb;
  background-color: white;
}
.photoPlayerThumbnails .photoPlayerThumbnailCurrent {
  border: 2px solid #20c063;
}

.photoPlayerCurrentItem {
  display: table-cell;
  background-color: white;
}
.photoPlayerCurrentItem img {
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.photoPlayerCurrentItem img.landscape {
  width: 100%;
  opacity: 1;
}
.photoPlayerCurrentItem img.portrait {
  height: 100%;
  opacity: 1;
}

.photoPlayerNextButton,
.photoPlayerPreviousButton {
  margin: -0.75 0 0 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*doc

---
title: Tags
category: Indicators
name: tag
author: August Flanagan
---

Tags are an interactive component that can communicate either state or content, and can optionally trigger an action.
*/
/*doc

---
category: Indicators
parent: tag
name: tagSkins
title: Tag Skins
author: August Flanagan
test: true
---

Class                  | Description
---------------------- | -----------------
`tagBasic`             | basic gray style
`tagHighlight`         | basic highlight style
`tagAction`            | basic interactivity
`tagClose`             | basic close interactivity (applies `hideFully` class to the element when clicked)

Events                 | Description
---------------------- | -----------------
`tag:action`           | triggered when an element with the class `tagAction` is clicked
`tag:close`            | triggered when an element with the class `tagClose` is clicked

<br>
The simplest way to use a tag is like this. **This version is purely presentational and has no interactivity.**

```html_example
<span class="tag tagBasic">
  All prices
</span>
```

```html_example
<span class="tag tagHighlight">
  Pet Friendly
</span>
```

<br>
**You can also add actions to a tag by adding `<button>` sub-nodes.**

`tagClose` will toggle the visibility of the tag and also trigger a `tag:close` event.

`tagAction` will trigger a `tag:action` event.


```html_example
<span class="tag tagBasic">
  <button class="tagAction" role="put your important role here">All prices</button>
  <button class="tagClose" role="close">&times</button>
</span>

<span class="tag tagBasic">
  <button class="tagAction" role="put your important role here">More Filters <i class="iconCog"></i></button>
</span>

<span class="tag tagHighlight">
  <button class="tagAction" role="put your important role here">All prices</button>
  <button class="tagClose" role="close">&times</button>
</span>

<span class="tag tagHighlight">
  <button class="tagAction" role="put your important role here">More Filters <i class="iconCog"></i></button>
</span>
```

*/
.tag {
  padding: 8px 15px;
  display: inline-block;
  border-radius: 4px;
}

.tag, .tag button {
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
}

.tagAction, .tagClose {
  border: none;
  cursor: pointer;
  background-color: transparent;
}

.tagBasic, .tagBasic .tagAction, .tagBasic .tagClose {
  color: #869099;
  background-color: #e8e9ea;
}

.tagHighlight, .tagHighlight .tagAction, .tagHighlight .tagClose {
  color: #228959;
  background-color: #9ff9b3;
}

.tagAction {
  padding: 0 0;
}
.tagAction:hover {
  text-decoration: underline;
}

.tagClose {
  padding: 0 0 0 8px;
}

/*doc
---
title: Heat Map Bar
name: heatMapBar
category: Indicators
test: true
---

```html_example
	<ul class="listInline mvn">
	  <li><span>Less safe</span></li>
	  <li><div class="heatMapBar pvs" style="width: 200px;"></div></li>
	  <li><span>Safer</span></li>
	</ul>
```

*/
.heatMapBar {
  height: 6px;
  background: #20c063;
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dc0023), color-stop(33.33333%, #f74a27), color-stop(66.66667%, #fbb100), color-stop(100%, #20c063));
  background: -webkit-linear-gradient(left, #dc0023, #f74a27, #fbb100, #20c063);
  background: -moz-linear-gradient(left, #dc0023, #f74a27, #fbb100, #20c063);
  background: -o-linear-gradient(left, #dc0023, #f74a27, #fbb100, #20c063);
  background: linear-gradient(left, #dc0023, #f74a27, #fbb100, #20c063);
  background: -ms-linear-gradient(left, #cc2114, #ff5c00, #ff9900, #5eab1f);
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFDC0023', endColorStr='#FF20C063', GradientType=1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFDC0023', endColorStr='#FF20C063', GradientType=1)";
  border-radius: 1000px;
}

/*doc
---
title: Dots
name: dot
category: Indicators
---

Dots are a small dot for lists.

*/
/*doc
---
title: Dots
parent: dot
name: dotSkins
test: true
---

Class                       | Description
--------------------------- | -----------------
dotNewListings              | This is a green dot for new listings
dotSoldListings             | This is a red dot for sold listings
dotActiveContingentListings | This is a orange dot for active contingent listings
dotAssessorListings         | This is a grey dot for assessor listings


```html_example
<div class="pam">
  <span class="dotNewListings"></span><strong class="mls mrm">Green dot for new listings</strong>
  <span class="dotSoldListings"></span><strong class="mls mrm">Red dot for sold listings</strong>
  <span class="dotActiveContingentListings"></span><strong class="mls mrm">Orange dot for active contingent listings</strong>
  <span class="dotAssessorListings"></span><strong class="mls">Grey dot for assessor listings</strong>
</div>

<div class="pam backgroundInverseAlternate typeReversed">
  <span class="dotNewListings"></span><strong class="mls mrm">Green dot for new listings</strong>
  <span class="dotSoldListings"></span><strong class="mls mrm">Red dot for sold listings</strong>
  <span class="dotActiveContingentListings"></span><strong class="mls mrm">Orange dot for active contingent listings</strong>
  <span class="dotAssessorListings"></span><strong class="mls">Grey dot for assessor listings</strong>
</div>
```

<br>

####Map Dots####

Class                       | Description
--------------------------- | -----------------
dotMapLegend                | These smaller dots are only used for maps, their colors should be set independently as inline styles based on the maps needs.

The following example is the dots made for map's age overlay legend.

```html_example
<div class="pam">
  <ul class="listInline">
    <li>
      <span class="dotMapLegend" style="background-color: #F3F315;"></span><span class="typeLowlight pls">18 </span>
    </li>
    <li>
      <span class="dotMapLegend" style="background-color: #F6C10E;"></span><span class="typeLowlight pls">18-25</span>
    </li>
    <li>
      <span class="dotMapLegend" style="background-color: #F99007;"></span><span class="typeLowlight pls">25-35</span>
    </li>
    <li>
      <span class="dotMapLegend" style="background-color: #FD5F00;"></span><span class="typeLowlight pls">35-45</span>
    </li>
    <li>
      <span class="dotMapLegend" style="background-color: #CA3F3D;"></span><span class="typeLowlight pls">45-55</span>
    </li>
    <li>
      <span class="dotMapLegend" style="background-color: #971F7A;"></span><span class="typeLowlight pls">55-65</span>
    </li>
    <li>
      <span class="dotMapLegend" style="background-color: #6500B7;"></span><span class="typeLowlight pls">65+</span>
    </li>
  </ul> 
</div>
```
*/
.dotNewListings,
.dotHighlight, .dotSoldListings,
.dotWarn, .dotActiveContingentListings,
.dotCallout, .dotAssessorListings,
.dotStandard, .dotMapLegend {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 1000px;
  vertical-align: middle;
  margin-bottom: 3px;
}

.dotNewListings,
.dotHighlight {
  background-color: #20c063;
}

.dotSoldListings,
.dotWarn {
  background-color: #dc0023;
}

.dotActiveContingentListings,
.dotCallout {
  background-color: #f74a27;
}

.dotAssessorListings,
.dotStandard {
  background-color: #b1b6bb;
}

.dotMapLegend {
  height: 8px;
  width: 8px;
  border: none;
}

/*doc
---
title: Pagination
name: pagination
category: Layout
---

Class                   | Description
----------------------- | -----------------
pagination              | This is a basic pagination component

```html_example
<ul class="pagination">
  <li>
    <a href="#" aria-label="Previous">
      <span aria-hidden="true">«</span>
    </a>
  </li>
  <li class="active"><a href="#/">1</a></li>
  <li><a href="#/">2</a></li>
  <li><a href="#/">3</a></li>
  <li><a href="#/">4</a></li>
  <li><a href="#/">5</a></li>
  <li>
    <a href="#" aria-label="Next">
      <span aria-hidden="true">»</span>
    </a>
  </li>
</ul>
```

*/
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 22px 0;
  border-radius: 6px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.5;
  text-decoration: none;
  color: #474e52;
  background-color: white;
  margin-left: -1px;
  -webkit-transition: all 0.75s ease-in;
  -moz-transition: all 0.75s ease-in;
  -o-transition: all 0.75s ease-in;
  transition: all 0.75s ease-in;
}
.pagination > li.active {
  color: white;
  background-color: #20c063;
}
.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
  color: #474e52;
  background-color: #f5f6f7;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  color: white;
  background-color: #20c063;
  cursor: default;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}

/*doc
---
title: Pager
parent: pagination
name: pager
---

Class                   | Description
----------------------- | -----------------
pager                   | This is a basic pagination with pager component

```html_example
<ul class="pagination pager">
  <li><a href="#/">Previous</a></li>
  <li class="active"><a href="#/">1</a></li>
  <li><a href="#/">2</a></li>
  <li><a href="#/">3</a></li>
  <li><a href="#/">4</a></li>
  <li><a href="#/">5</a></li>
  <li><a href="#/">Next</a></li>
</ul>
```

*/
.pager {
  padding-left: 0;
  margin: 22px 0;
  list-style: none;
  text-align: center;
}
.pager li {
  display: inline;
}
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: white;
  -webkit-transition: all 0.75s ease-in;
  -moz-transition: all 0.75s ease-in;
  -o-transition: all 0.75s ease-in;
  transition: all 0.75s ease-in;
}
.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #f5f6f7;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.pager .next > a,
.pager .next > span {
  float: right;
}
.pager .previous > a,
.pager .previous > span {
  float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #e8e9ea;
  cursor: not-allowed;
}
