/*
 * CSS Crush(ed) on 2014-04-15 08:36:59 -0700
 * http://github.com/peteboere/css-crush (v1.9.0)
 */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
/* Webfonts.
---------------------------------------- */

/*  Font Awesome
    the iconic font designed for use with Twitter Bootstrap
    -------------------------------------------------------
    The full suite of pictographic icons, examples, and documentation
    can be found at: http://fortawesome.github.com/Font-Awesome/

    License
    -------------------------------------------------------
    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
    http://creativecommons.org/licenses/by/3.0/ A mention of
    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
    source code is considered acceptable attribution (most common on the web).
    If human readable source code is not available to the end user, a mention in
    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
    or mobile software).

    Contact
    -------------------------------------------------------
    Email: dave@davegandy.com
    Twitter: http://twitter.com/fortaweso_me
    Work: http://lemonwi.se co-founder

    */

@font-face {
    font-family: "FontAwesome";
    src: url(../fonts/fontawesome/fontawesome-webfont.eot);
    src: url(../fonts/fontawesome/fontawesome-webfont.eot?#iefix) format('eot'),url(../fonts/fontawesome/fontawesome-webfont.woff) format('woff'),url(../fonts/fontawesome/fontawesome-webfont.ttf) format('truetype'),url(../fonts/fontawesome/fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight: normal;
    font-style: normal;
    }

/*  Font Awesome styles
    ------------------------------------------------------- */

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-decoration: inherit;
    }

a [class^="icon-"],
a [class*=" icon-"] {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    text-decoration: inherit;
    }

/* makes the font 33% larger relative to the icon container */

.icon-large:before {
    vertical-align: top;
    font-size: 1.3333333333333333em;
    }

.btn [class^="icon-"],
.btn [class*=" icon-"] {
    line-height: .9em;
    }

li [class^="icon-"],
li [class*=" icon-"] {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 1.25em;
    text-align: center;
    }

li .icon-large[class^="icon-"],
li .icon-large[class*=" icon-"] {
    width: 1.875em;
    }

li[class^="icon-"],
li[class*=" icon-"] {
    margin-left: 0;
    list-style-type: none;
    }

li[class^="icon-"]:before,
li[class*=" icon-"]:before {
    text-indent: -2em;
    text-align: center;
    }

li[class^="icon-"].icon-large:before,
li[class*=" icon-"].icon-large:before {
    text-indent: -1.3333333333333333em;
    }

/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */

.icon-glass:before {
    content: "\f000";
    }

.icon-music:before {
    content: "\f001";
    }

.icon-search:before {
    content: "\f002";
    }

.icon-envelope:before {
    content: "\f003";
    }

.icon-heart:before {
    content: "\f004";
    }

.icon-star:before {
    content: "\f005";
    }

.icon-star-empty:before {
    content: "\f006";
    }

.icon-user:before {
    content: "\f007";
    }

.icon-film:before {
    content: "\f008";
    }

.icon-th-large:before {
    content: "\f009";
    }

.icon-th:before {
    content: "\f00a";
    }

.icon-th-list:before {
    content: "\f00b";
    }

.icon-ok:before {
    content: "\f00c";
    }

.icon-remove:before {
    content: "\f00d";
    }

.icon-zoom-in:before {
    content: "\f00e";
    }

.icon-zoom-out:before {
    content: "\f010";
    }

.icon-off:before {
    content: "\f011";
    }

.icon-signal:before {
    content: "\f012";
    }

.icon-cog:before {
    content: "\f013";
    }

.icon-trash:before {
    content: "\f014";
    }

.icon-home:before {
    content: "\f015";
    }

.icon-file:before {
    content: "\f016";
    }

.icon-time:before {
    content: "\f017";
    }

.icon-road:before {
    content: "\f018";
    }

.icon-download-alt:before {
    content: "\f019";
    }

.icon-download:before {
    content: "\f01a";
    }

.icon-upload:before {
    content: "\f01b";
    }

.icon-inbox:before {
    content: "\f01c";
    }

.icon-play-circle:before {
    content: "\f01d";
    }

.icon-repeat:before {
    content: "\f01e";
    }

/* \f020 doesn't work in Safari. all shifted one down */

.icon-refresh:before {
    content: "\f021";
    }

.icon-list-alt:before {
    content: "\f022";
    }

.icon-lock:before {
    content: "\f023";
    }

.icon-flag:before {
    content: "\f024";
    }

.icon-headphones:before {
    content: "\f025";
    }

.icon-volume-off:before {
    content: "\f026";
    }

.icon-volume-down:before {
    content: "\f027";
    }

.icon-volume-up:before {
    content: "\f028";
    }

.icon-qrcode:before {
    content: "\f029";
    }

.icon-barcode:before {
    content: "\f02a";
    }

.icon-tag:before {
    content: "\f02b";
    }

.icon-tags:before {
    content: "\f02c";
    }

.icon-book:before {
    content: "\f02d";
    }

.icon-bookmark:before {
    content: "\f02e";
    }

.icon-print:before {
    content: "\f02f";
    }

.icon-camera:before {
    content: "\f030";
    }

.icon-font:before {
    content: "\f031";
    }

.icon-bold:before {
    content: "\f032";
    }

.icon-italic:before {
    content: "\f033";
    }

.icon-text-height:before {
    content: "\f034";
    }

.icon-text-width:before {
    content: "\f035";
    }

.icon-align-left:before {
    content: "\f036";
    }

.icon-align-center:before {
    content: "\f037";
    }

.icon-align-right:before {
    content: "\f038";
    }

.icon-align-justify:before {
    content: "\f039";
    }

.icon-list:before {
    content: "\f03a";
    }

.icon-indent-left:before {
    content: "\f03b";
    }

.icon-indent-right:before {
    content: "\f03c";
    }

.icon-facetime-video:before {
    content: "\f03d";
    }

.icon-picture:before {
    content: "\f03e";
    }

.icon-pencil:before {
    content: "\f040";
    }

.icon-map-marker:before {
    content: "\f041";
    }

.icon-adjust:before {
    content: "\f042";
    }

.icon-tint:before {
    content: "\f043";
    }

.icon-edit:before {
    content: "\f044";
    }

.icon-share:before {
    content: "\f045";
    }

.icon-check:before {
    content: "\f046";
    }

.icon-move:before {
    content: "\f047";
    }

.icon-step-backward:before {
    content: "\f048";
    }

.icon-fast-backward:before {
    content: "\f049";
    }

.icon-backward:before {
    content: "\f04a";
    }

.icon-play:before {
    content: "\f04b";
    }

.icon-pause:before {
    content: "\f04c";
    }

.icon-stop:before {
    content: "\f04d";
    }

.icon-forward:before {
    content: "\f04e";
    }

.icon-fast-forward:before {
    content: "\f050";
    }

.icon-step-forward:before {
    content: "\f051";
    }

.icon-eject:before {
    content: "\f052";
    }

.icon-chevron-left:before {
    content: "\f053";
    }

.icon-chevron-right:before {
    content: "\f054";
    }

.icon-plus-sign:before {
    content: "\f055";
    }

.icon-minus-sign:before {
    content: "\f056";
    }

.icon-remove-sign:before {
    content: "\f057";
    }

.icon-ok-sign:before {
    content: "\f058";
    }

.icon-question-sign:before {
    content: "\f059";
    }

.icon-info-sign:before {
    content: "\f05a";
    }

.icon-screenshot:before {
    content: "\f05b";
    }

.icon-remove-circle:before {
    content: "\f05c";
    }

.icon-ok-circle:before {
    content: "\f05d";
    }

.icon-ban-circle:before {
    content: "\f05e";
    }

.icon-arrow-left:before {
    content: "\f060";
    }

.icon-arrow-right:before {
    content: "\f061";
    }

.icon-arrow-up:before {
    content: "\f062";
    }

.icon-arrow-down:before {
    content: "\f063";
    }

.icon-share-alt:before {
    content: "\f064";
    }

.icon-resize-full:before {
    content: "\f065";
    }

.icon-resize-small:before {
    content: "\f066";
    }

.icon-plus:before {
    content: "\f067";
    }

.icon-minus:before {
    content: "\f068";
    }

.icon-asterisk:before {
    content: "\f069";
    }

.icon-exclamation-sign:before {
    content: "\f06a";
    }

.icon-gift:before {
    content: "\f06b";
    }

.icon-leaf:before {
    content: "\f06c";
    }

.icon-fire:before {
    content: "\f06d";
    }

.icon-eye-open:before {
    content: "\f06e";
    }

.icon-eye-close:before {
    content: "\f070";
    }

.icon-warning-sign:before {
    content: "\f071";
    }

.icon-plane:before {
    content: "\f072";
    }

.icon-calendar:before {
    content: "\f073";
    }

.icon-random:before {
    content: "\f074";
    }

.icon-comment:before {
    content: "\f075";
    }

.icon-magnet:before {
    content: "\f076";
    }

.icon-chevron-up:before {
    content: "\f077";
    }

.icon-chevron-down:before {
    content: "\f078";
    }

.icon-retweet:before {
    content: "\f079";
    }

.icon-shopping-cart:before {
    content: "\f07a";
    }

.icon-folder-close:before {
    content: "\f07b";
    }

.icon-folder-open:before {
    content: "\f07c";
    }

.icon-resize-vertical:before {
    content: "\f07d";
    }

.icon-resize-horizontal:before {
    content: "\f07e";
    }

.icon-bar-chart:before {
    content: "\f080";
    }

.icon-twitter-sign:before {
    content: "\f081";
    }

.icon-facebook-sign:before {
    content: "\f082";
    }

.icon-camera-retro:before {
    content: "\f083";
    }

.icon-key:before {
    content: "\f084";
    }

.icon-cogs:before {
    content: "\f085";
    }

.icon-comments:before {
    content: "\f086";
    }

.icon-thumbs-up:before {
    content: "\f087";
    }

.icon-thumbs-down:before {
    content: "\f088";
    }

.icon-star-half:before {
    content: "\f089";
    }

.icon-heart-empty:before {
    content: "\f08a";
    }

.icon-signout:before {
    content: "\f08b";
    }

.icon-linkedin-sign:before {
    content: "\f08c";
    }

.icon-pushpin:before {
    content: "\f08d";
    }

.icon-external-link:before {
    content: "\f08e";
    }

.icon-signin:before {
    content: "\f090";
    }

.icon-trophy:before {
    content: "\f091";
    }

.icon-github-sign:before {
    content: "\f092";
    }

.icon-upload-alt:before {
    content: "\f093";
    }

.icon-lemon:before {
    content: "\f094";
    }

.icon-phone:before {
    content: "\f095";
    }

.icon-check-empty:before {
    content: "\f096";
    }

.icon-bookmark-empty:before {
    content: "\f097";
    }

.icon-phone-sign:before {
    content: "\f098";
    }

.icon-twitter:before {
    content: "\f099";
    }

.icon-facebook:before {
    content: "\f09a";
    }

.icon-github:before {
    content: "\f09b";
    }

.icon-unlock:before {
    content: "\f09c";
    }

.icon-credit-card:before {
    content: "\f09d";
    }

.icon-rss:before {
    content: "\f09e";
    }

.icon-hdd:before {
    content: "\f0a0";
    }

.icon-bullhorn:before {
    content: "\f0a1";
    }

.icon-bell:before {
    content: "\f0a2";
    }

.icon-certificate:before {
    content: "\f0a3";
    }

.icon-hand-right:before {
    content: "\f0a4";
    }

.icon-hand-left:before {
    content: "\f0a5";
    }

.icon-hand-up:before {
    content: "\f0a6";
    }

.icon-hand-down:before {
    content: "\f0a7";
    }

.icon-circle-arrow-left:before {
    content: "\f0a8";
    }

.icon-circle-arrow-right:before {
    content: "\f0a9";
    }

.icon-circle-arrow-up:before {
    content: "\f0aa";
    }

.icon-circle-arrow-down:before {
    content: "\f0ab";
    }

.icon-globe:before {
    content: "\f0ac";
    }

.icon-wrench:before {
    content: "\f0ad";
    }

.icon-tasks:before {
    content: "\f0ae";
    }

.icon-filter:before {
    content: "\f0b0";
    }

.icon-briefcase:before {
    content: "\f0b1";
    }

.icon-fullscreen:before {
    content: "\f0b2";
    }

.icon-group:before {
    content: "\f0c0";
    }

.icon-link:before {
    content: "\f0c1";
    }

.icon-cloud:before {
    content: "\f0c2";
    }

.icon-beaker:before {
    content: "\f0c3";
    }

.icon-cut:before {
    content: "\f0c4";
    }

.icon-copy:before {
    content: "\f0c5";
    }

.icon-paper-clip:before {
    content: "\f0c6";
    }

.icon-save:before {
    content: "\f0c7";
    }

.icon-sign-blank:before {
    content: "\f0c8";
    }

.icon-reorder:before {
    content: "\f0c9";
    }

.icon-list-ul:before {
    content: "\f0ca";
    }

.icon-list-ol:before {
    content: "\f0cb";
    }

.icon-strikethrough:before {
    content: "\f0cc";
    }

.icon-underline:before {
    content: "\f0cd";
    }

.icon-table:before {
    content: "\f0ce";
    }

.icon-magic:before {
    content: "\f0d0";
    }

.icon-truck:before {
    content: "\f0d1";
    }

.icon-pinterest:before {
    content: "\f0d2";
    }

.icon-pinterest-sign:before {
    content: "\f0d3";
    }

.icon-google-plus-sign:before {
    content: "\f0d4";
    }

.icon-google-plus:before {
    content: "\f0d5";
    }

.icon-money:before {
    content: "\f0d6";
    }

.icon-caret-down:before {
    content: "\f0d7";
    }

.icon-caret-up:before {
    content: "\f0d8";
    }

.icon-caret-left:before {
    content: "\f0d9";
    }

.icon-caret-right:before {
    content: "\f0da";
    }

.icon-columns:before {
    content: "\f0db";
    }

.icon-sort:before {
    content: "\f0dc";
    }

.icon-sort-down:before {
    content: "\f0dd";
    }

.icon-sort-up:before {
    content: "\f0de";
    }

.icon-envelope-alt:before {
    content: "\f0e0";
    }

.icon-linkedin:before {
    content: "\f0e1";
    }

.icon-undo:before {
    content: "\f0e2";
    }

.icon-legal:before {
    content: "\f0e3";
    }

.icon-dashboard:before {
    content: "\f0e4";
    }

.icon-comment-alt:before {
    content: "\f0e5";
    }

.icon-comments-alt:before {
    content: "\f0e6";
    }

.icon-bolt:before {
    content: "\f0e7";
    }

.icon-sitemap:before {
    content: "\f0e8";
    }

.icon-umbrella:before {
    content: "\f0e9";
    }

.icon-paste:before {
    content: "\f0ea";
    }

.icon-user-md:before {
    content: "\f200";
    }

/* Reset.
---------------------------------------- */

* {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    border: 0;
    -webkit-text-size-adjust: none;
    }

body {
    font: 15px/1.2 Lato,sans-serif;
    background: #261F26;
    color: #D5D4D2;
    }

ol {
    list-style: none;
    }

a {
    color: #938F67;
    }

.clear {
    clear: both;
    }

.hide {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(1px,1px,1px,1px);
    *clip: rect(1px 1px 1px 1px);
    }

::selection {
    background: #428399;
    color: #fff;
    }

::-moz-selection {
    background: #428399;
    color: #fff;
    }

/* Furniture.
---------------------------------------- */

.outer-wrap {
    max-width: 960px;
    padding: 0 15px;
    margin: auto;
    }

header {
    padding: 1em 0 1.8em;
    font-size: 20px;
    text-align: center;
    }

header h1 {
    margin: 1em 0 .4em;
    }

header h1 img {
    vertical-align: bottom;
    }

.main {
    float: left;
    position: relative;
    width: 65%;
    }

.controls {
    direction: ltr;
    float: right;
    width: 32%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.controls .title {
    text-align: center;
    color: #FBF7E9;
    font-size: 16px;
    margin: 0 0 .4em;
    }

footer {
    background: #89855F;
    -webkit-box-shadow: 0 10px rgba(0,0,0,.1) inset,0 24px rgba(0,0,0,.1) inset,0 60px rgba(0,0,0,.05) inset,0 -10px rgba(0,0,0,.1) inset,0 -24px rgba(0,0,0,.05) inset,0 -10px rgba(0,0,0,.1),0 -24px rgba(0,0,0,.1);
    box-shadow: 0 10px rgba(0,0,0,.1) inset,0 24px rgba(0,0,0,.1) inset,0 60px rgba(0,0,0,.05) inset,0 -10px rgba(0,0,0,.1) inset,0 -24px rgba(0,0,0,.05) inset,0 -10px rgba(0,0,0,.1),0 -24px rgba(0,0,0,.1);
    margin-top: 3em;
    color: #fff;
    padding: 1.5em 0 3em;
    }

.colophon {
    font-size: 90%;
    }

/* Forms.
---------------------------------------- */

input,
select {
    vertical-align: middle;
    }

input[type="checkbox"] {
    vertical-align: baseline;
    }

select {
    width: 85%;
    background: #9F513D;
    -webkit-box-shadow: 1px 2px rgba(0,0,0,.1);
    box-shadow: 1px 2px rgba(0,0,0,.1);
    color: inherit;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

.txt:focus,
select:focus {
    outline: none;
    background-color: #3D626F !important;
    }

select:focus,
select:active {
    -moz-outline-offset: -2px;
    }

.txt {
    background: #874339;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 3px;
    color: inherit;
    }

.output-css,
.vanilla-css {
    padding: 14px 15px;
    margin: 2em 0 0;
    line-height: 1.4;
    direction: ltr;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid #88D8F2;
    resize: vertical;
    background: #1A5E74;
    -webkit-box-shadow: 0 4px rgba(0,0,0,.2);
    box-shadow: 0 4px rgba(0,0,0,.2);
    height: 20em;
    font: 12px "Courier New",Courier,monospace;
    color: #ddd;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.vanilla-css {
    margin-top: .6em;
    background: #F8EFD8;
    color: #331900;
    border-color: #938F67;
    }

.flex-container-fields {
    margin-bottom: 1em;
    }

.add-remove-boxes {
    text-align: center;
    padding: .4em 0 0;
    }

.add-remove-boxes a {
    text-decoration: none;
    color: #FBF7E9;
    font-size: 20px;
    margin: 0 .25em;
    }

.add-remove-boxes a:hover {
    color: #6F1F1F;
    }

/*
---------------------------------------- */

 .copy {
    line-height: 1.3;
    }

.copy h2,
.copy h3,
.copy h4 {
    color: #151515;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 1.2em;
    }

.copy h2 {
    font-size: 24px;
    }

.copy h2:after {
    content: ":";
    }

.copy h3 {
    font-size: 20px;
    }

.copy h4 {
    font-size: 110%;
    }

.copy p {
    margin: .7em 0;
    }

.copy p,
.copy li {
    max-width: 46em;
    }

.copy h2 + *,
.copy h3 + *,
.copy h4 + * {
    margin-top: 0;
    }

.copy a {
    color: #ECEDC8;
    text-decoration: none;
    }

.copy a:hover {
    text-decoration: underline;
    }

.copy code {
    font: 90% "Courier New",Courier,monospace;
    background: #747B4F;
    padding: 0 .1em;
    margin: 0 .1em;
    }

.copy ol,
.copy ul {
    font-size: 100%;
    }

.copy ol {
    list-style: outside upper-alpha;
    font-weight: bold;
    margin: 1em 0 1em 25px;
    }

.copy ol > li {
    font-weight: normal;
    }

.copy ol h3 {
    font-size: 110%;
    }

.copy ol h3 a {
    font-weight: normal;
    font-size: 90%;
    }

.copy ul {
    margin-left: 25px;
    list-style-position: outside;
    }

.copy li {
    font-size: 100%;
    }

.copy ul > li {
    margin-bottom: .5em;
    padding-left: 10px;
    }

/* Tooltips.
---------------------------------------- */

[data-markdown-tooltip] {
    position: relative;
    }

.tooltip {
    position: absolute;
    font-weight: normal;
    font-size: 13px;
    text-align: left;
    background: rgb(61,98,111);
    background: rgba(61,98,111,.95);
    bottom: 100%;
    right: 100%;
    min-width: 240px;
    max-width: 320px;
    padding: 9px 11px;
    -webkit-border-radius: 10px 10px 0 10px;
    border-radius: 10px 10px 0 10px;
    -webkit-box-shadow: 1px 3px rgba(0,0,0,.2),inset 1px 1px rgba(255,255,255,.1);
    box-shadow: 1px 3px rgba(0,0,0,.2),inset 1px 1px rgba(255,255,255,.1);
    }

[data-tooltip-nowrap] .tooltip {
    min-width: 0;
    white-space: nowrap;
    }

.tooltip > :first-child ~ p {
    margin-top: .4em;
    }

.tooltip ol {
    margin-left: 20px;
    list-style-type: lower-roman;
    }

.tooltip li {
    margin-top: .7em;
    }

.help {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font: bold 13px/14px Lato;
    cursor: pointer;
    width: 14px;
    text-align: center;
    vertical-align: middle;
    color: #EFF1DF;
    background: rgb(255,255,255);
    background: rgba(255,255,255,.2);
    -webkit-box-shadow: 1px 2px rgba(0,0,0,.1);
    box-shadow: 1px 2px rgba(0,0,0,.1);
    padding: 1px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    }

/* .pointer
---------------------------------------- */

.pointer-wrapper {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    border: 2px solid #A6CCD9;
    position: absolute;
    background: #346E81;
    -webkit-box-shadow: 1px 3px rgba(0,0,0,.3),2px 3px rgba(0,0,0,.1) inset;
    box-shadow: 1px 3px rgba(0,0,0,.3),2px 3px rgba(0,0,0,.1) inset;
    right: -16px;
    top: -10px;
    z-index: 10;
    }

.pointer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../images/pointer.svg) 50% 58% no-repeat;
    -webkit-background-size: 12px 23px;
    -moz-background-size: 12px 23px;
    background-size: 12px 23px;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -o-transition: .1s;
    transition: .1s;
    }

[data-flex-direction="row"] .pointer,
[dir="rtl"][data-flex-direction="row-reverse"] .pointer {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }

[data-flex-direction="row-reverse"] .pointer,
[dir="rtl"][data-flex-direction="row"] .pointer {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    }

[data-flex-direction="column"] .pointer,
[dir="rtl"][data-flex-direction="column-reverse"] .pointer {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    }

[data-flex-direction="column-reverse"] .pointer,
[dir="rtl"][data-flex-direction="column"] .pointer {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    }

.adsense {
    margin: 1.5em 0;
    text-align: center;
    }

/* .flex-support
---------------------------------------- */

.flex-support {
    max-width: 45em;
    padding: 11px 12px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    border: 2px solid #AEAE88;
    background: #953E28;
    }

.flex-support code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin-bottom: .3em;
    padding: 0 .4em;
    background: #711111;
    }

/* .modifier
---------------------------------------- */

.modifier {
    position: relative;
    z-index: 1;
    font-size: 13px;
    text-align: right;
    margin: .5em 0 0;
    direction: ltr;
    }

.modifier + .modifier {
    margin-top: .2em;
    }

.modifier a {
    text-decoration: none;
    }

.modifier label {
    color: #938F67;
    }

.modifier label:hover,
.modifier a:hover {
    color: inherit;
    }

.modifier input {
    margin-left: .2em;
    margin-right: 0;
    }

/* .flex-container skinning
---------------------------------------- */

.flex-container-style {
    border: 3px solid #C5C588;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    background: #953E28;
    -webkit-box-shadow: -23px 66px rgba(0,0,0,.06) inset,-63px 49px rgba(0,0,0,.06) inset,17px -51px rgba(0,0,0,.06) inset,2px 5px rgba(0,0,0,.2);
    box-shadow: -23px 66px rgba(0,0,0,.06) inset,-63px 49px rgba(0,0,0,.06) inset,17px -51px rgba(0,0,0,.06) inset,2px 5px rgba(0,0,0,.2);
    }

.flex-container {
    min-height: 350px;
    _height: 350px;
    padding: 5px;
    }

.flex-container.fixed-height {
    height: 350px;
    min-height: 0;
    _height: 0;
    }

.flex-item {
    padding: 5px 10px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background: #6F1F1F;
    -webkit-box-shadow: -2px -4px rgba(0,0,0,.2) inset;
    box-shadow: -2px -4px rgba(0,0,0,.2) inset;
    }

.flex-container .flex-item {
    margin: 5px;
    }

.properties {
    display: table;
    line-height: 2.2;
    width: 100%;
    font: 12px/2.2 "Courier New",Courier,monospace;
    color: #FBF7E9;
    }

.properties > li {
    display: table-row;
    }

.properties > li > div {
    display: table-cell;
    }

.properties .property {
    text-align: right;
    white-space: nowrap;
    width: 120px;
    }

.properties .property:after {
    content: ": ";
    }

.properties .values {
    padding-left: 6px;
    }

.flex-item .properties .property {
    width: 107px;
    }

.flex-item .properties select {
    width: auto;
    min-width: 110px;
    background-color: #874339;
    }

.flex-items {
    counter-reset: li;
    margin: 0;
    }

.flex-items > li {
    position: relative;
    margin-top: 10px;
    }

.flex-items > li:before {
    content: counter(li);
    counter-increment: li;
    }

.flex-container > .flex-item > .counter,
.flex-items > li:before {
    color: #FBF7E9;
    font: bold 14px Lato,sans-serif;
    position: absolute;
    top: 8px;
    left: 8px;
    background: #938F67;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 1px 1px 0 0 rgba(255,255,255,.5) inset,-1px -1px 0 1px rgba(0,0,0,.2) inset;
    box-shadow: 1px 1px 0 0 rgba(255,255,255,.5) inset,-1px -1px 0 1px rgba(0,0,0,.2) inset;
    text-shadow: 0 0 2px rgba(0,0,0,.8);
    width: 24px;
    line-height: 24px;
    text-align: center;
    }

.flex-container > .flex-item {
    position: relative;
    padding: 10px;
    }

.flex-container > .flex-item > span[contenteditable] {
    padding: 15px 25px;
    display: block;
    }

.flex-container > .flex-item > span:hover,
.flex-container > .flex-item > span:focus {
    background: #651C1C;
    -webkit-box-shadow: 1px 1px rgba(0,0,0,.2) inset,0 -1px rgba(255,255,255,.1) inset;
    box-shadow: 1px 1px rgba(0,0,0,.2) inset,0 -1px rgba(255,255,255,.1) inset;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    outline: none;
    }