/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

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

/**
 * Re-set default cursor for disabled elements.
 */

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

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

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

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

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

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

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

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}/* 
 * Foundation Icons v 3.0
 * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
 * MIT License
 */

/*
@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.eot");
  src: url("../fonts/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/foundation-icons.woff") format("woff"),
       url("../fonts/foundation-icons.ttf") format("truetype"),
       url("../fonts/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}
*/

.fi-address-book:before,
.fi-alert:before,
.fi-align-center:before,
.fi-align-justify:before,
.fi-align-left:before,
.fi-align-right:before,
.fi-anchor:before,
.fi-annotate:before,
.fi-archive:before,
.fi-arrow-down:before,
.fi-arrow-left:before,
.fi-arrow-right:before,
.fi-arrow-up:before,
.fi-arrows-compress:before,
.fi-arrows-expand:before,
.fi-arrows-in:before,
.fi-arrows-out:before,
.fi-asl:before,
.fi-asterisk:before,
.fi-at-sign:before,
.fi-background-color:before,
.fi-battery-empty:before,
.fi-battery-full:before,
.fi-battery-half:before,
.fi-bitcoin-circle:before,
.fi-bitcoin:before,
.fi-blind:before,
.fi-bluetooth:before,
.fi-bold:before,
.fi-book-bookmark:before,
.fi-book:before,
.fi-bookmark:before,
.fi-braille:before,
.fi-burst-new:before,
.fi-burst-sale:before,
.fi-burst:before,
.fi-calendar:before,
.fi-camera:before,
.fi-check:before,
.fi-checkbox:before,
.fi-clipboard-notes:before,
.fi-clipboard-pencil:before,
.fi-clipboard:before,
.fi-clock:before,
.fi-closed-caption:before,
.fi-cloud:before,
.fi-comment-minus:before,
.fi-comment-quotes:before,
.fi-comment-video:before,
.fi-comment:before,
.fi-comments:before,
.fi-compass:before,
.fi-contrast:before,
.fi-credit-card:before,
.fi-crop:before,
.fi-crown:before,
.fi-css3:before,
.fi-database:before,
.fi-die-five:before,
.fi-die-four:before,
.fi-die-one:before,
.fi-die-six:before,
.fi-die-three:before,
.fi-die-two:before,
.fi-dislike:before,
.fi-dollar-bill:before,
.fi-dollar:before,
.fi-download:before,
.fi-eject:before,
.fi-elevator:before,
.fi-euro:before,
.fi-eye:before,
.fi-fast-forward:before,
.fi-female-symbol:before,
.fi-female:before,
.fi-filter:before,
.fi-first-aid:before,
.fi-flag:before,
.fi-folder-add:before,
.fi-folder-lock:before,
.fi-folder:before,
.fi-foot:before,
.fi-foundation:before,
.fi-graph-bar:before,
.fi-graph-horizontal:before,
.fi-graph-pie:before,
.fi-graph-trend:before,
.fi-guide-dog:before,
.fi-hearing-aid:before,
.fi-heart:before,
.fi-home:before,
.fi-html5:before,
.fi-indent-less:before,
.fi-indent-more:before,
.fi-info:before,
.fi-italic:before,
.fi-key:before,
.fi-laptop:before,
.fi-layout:before,
.fi-lightbulb:before,
.fi-like:before,
.fi-link:before,
.fi-list-bullet:before,
.fi-list-number:before,
.fi-list-thumbnails:before,
.fi-list:before,
.fi-lock:before,
.fi-loop:before,
.fi-magnifying-glass:before,
.fi-mail:before,
.fi-male-female:before,
.fi-male-symbol:before,
.fi-male:before,
.fi-map:before,
.fi-marker:before,
.fi-megaphone:before,
.fi-microphone:before,
.fi-minus-circle:before,
.fi-minus:before,
.fi-mobile-signal:before,
.fi-mobile:before,
.fi-monitor:before,
.fi-mountains:before,
.fi-music:before,
.fi-next:before,
.fi-no-dogs:before,
.fi-no-smoking:before,
.fi-page-add:before,
.fi-page-copy:before,
.fi-page-csv:before,
.fi-page-delete:before,
.fi-page-doc:before,
.fi-page-edit:before,
.fi-page-export-csv:before,
.fi-page-export-doc:before,
.fi-page-export-pdf:before,
.fi-page-export:before,
.fi-page-filled:before,
.fi-page-multiple:before,
.fi-page-pdf:before,
.fi-page-remove:before,
.fi-page-search:before,
.fi-page:before,
.fi-paint-bucket:before,
.fi-paperclip:before,
.fi-pause:before,
.fi-paw:before,
.fi-paypal:before,
.fi-pencil:before,
.fi-photo:before,
.fi-play-circle:before,
.fi-play-video:before,
.fi-play:before,
.fi-plus:before,
.fi-pound:before,
.fi-power:before,
.fi-previous:before,
.fi-price-tag:before,
.fi-pricetag-multiple:before,
.fi-print:before,
.fi-prohibited:before,
.fi-projection-screen:before,
.fi-puzzle:before,
.fi-quote:before,
.fi-record:before,
.fi-refresh:before,
.fi-results-demographics:before,
.fi-results:before,
.fi-rewind-ten:before,
.fi-rewind:before,
.fi-rss:before,
.fi-safety-cone:before,
.fi-save:before,
.fi-share:before,
.fi-sheriff-badge:before,
.fi-shield:before,
.fi-shopping-bag:before,
.fi-shopping-cart:before,
.fi-shuffle:before,
.fi-skull:before,
.fi-social-500px:before,
.fi-social-adobe:before,
.fi-social-amazon:before,
.fi-social-android:before,
.fi-social-apple:before,
.fi-social-behance:before,
.fi-social-bing:before,
.fi-social-blogger:before,
.fi-social-delicious:before,
.fi-social-designer-news:before,
.fi-social-deviant-art:before,
.fi-social-digg:before,
.fi-social-dribbble:before,
.fi-social-drive:before,
.fi-social-dropbox:before,
.fi-social-evernote:before,
.fi-social-facebook:before,
.fi-social-flickr:before,
.fi-social-forrst:before,
.fi-social-foursquare:before,
.fi-social-game-center:before,
.fi-social-github:before,
.fi-social-google-plus:before,
.fi-social-hacker-news:before,
.fi-social-hi5:before,
.fi-social-instagram:before,
.fi-social-joomla:before,
.fi-social-lastfm:before,
.fi-social-linkedin:before,
.fi-social-medium:before,
.fi-social-myspace:before,
.fi-social-orkut:before,
.fi-social-path:before,
.fi-social-picasa:before,
.fi-social-pinterest:before,
.fi-social-rdio:before,
.fi-social-reddit:before,
.fi-social-skillshare:before,
.fi-social-skype:before,
.fi-social-smashing-mag:before,
.fi-social-snapchat:before,
.fi-social-spotify:before,
.fi-social-squidoo:before,
.fi-social-stack-overflow:before,
.fi-social-steam:before,
.fi-social-stumbleupon:before,
.fi-social-treehouse:before,
.fi-social-tumblr:before,
.fi-social-twitter:before,
.fi-social-vimeo:before,
.fi-social-windows:before,
.fi-social-xbox:before,
.fi-social-yahoo:before,
.fi-social-yelp:before,
.fi-social-youtube:before,
.fi-social-zerply:before,
.fi-social-zurb:before,
.fi-sound:before,
.fi-star:before,
.fi-stop:before,
.fi-strikethrough:before,
.fi-subscript:before,
.fi-superscript:before,
.fi-tablet-landscape:before,
.fi-tablet-portrait:before,
.fi-target-two:before,
.fi-target:before,
.fi-telephone-accessible:before,
.fi-telephone:before,
.fi-text-color:before,
.fi-thumbnails:before,
.fi-ticket:before,
.fi-torso-business:before,
.fi-torso-female:before,
.fi-torso:before,
.fi-torsos-all-female:before,
.fi-torsos-all:before,
.fi-torsos-female-male:before,
.fi-torsos-male-female:before,
.fi-torsos:before,
.fi-trash:before,
.fi-trees:before,
.fi-trophy:before,
.fi-underline:before,
.fi-universal-access:before,
.fi-unlink:before,
.fi-unlock:before,
.fi-upload-cloud:before,
.fi-upload:before,
.fi-usb:before,
.fi-video:before,
.fi-volume-none:before,
.fi-volume-strike:before,
.fi-volume:before,
.fi-web:before,
.fi-wheelchair:before,
.fi-widget:before,
.fi-wrench:before,
.fi-x-circle:before,
.fi-x:before,
.fi-yen:before,
.fi-zoom-in:before,
.fi-zoom-out:before {
  font-family: "foundation-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.fi-address-book:before { content: "\f100"; }
.fi-alert:before { content: "\f101"; }
.fi-align-center:before { content: "\f102"; }
.fi-align-justify:before { content: "\f103"; }
.fi-align-left:before { content: "\f104"; }
.fi-align-right:before { content: "\f105"; }
.fi-anchor:before { content: "\f106"; }
.fi-annotate:before { content: "\f107"; }
.fi-archive:before { content: "\f108"; }
.fi-arrow-down:before { content: "\f109"; }
.fi-arrow-left:before { content: "\f10a"; }
.fi-arrow-right:before { content: "\f10b"; }
.fi-arrow-up:before { content: "\f10c"; }
.fi-arrows-compress:before { content: "\f10d"; }
.fi-arrows-expand:before { content: "\f10e"; }
.fi-arrows-in:before { content: "\f10f"; }
.fi-arrows-out:before { content: "\f110"; }
.fi-asl:before { content: "\f111"; }
.fi-asterisk:before { content: "\f112"; }
.fi-at-sign:before { content: "\f113"; }
.fi-background-color:before { content: "\f114"; }
.fi-battery-empty:before { content: "\f115"; }
.fi-battery-full:before { content: "\f116"; }
.fi-battery-half:before { content: "\f117"; }
.fi-bitcoin-circle:before { content: "\f118"; }
.fi-bitcoin:before { content: "\f119"; }
.fi-blind:before { content: "\f11a"; }
.fi-bluetooth:before { content: "\f11b"; }
.fi-bold:before { content: "\f11c"; }
.fi-book-bookmark:before { content: "\f11d"; }
.fi-book:before { content: "\f11e"; }
.fi-bookmark:before { content: "\f11f"; }
.fi-braille:before { content: "\f120"; }
.fi-burst-new:before { content: "\f121"; }
.fi-burst-sale:before { content: "\f122"; }
.fi-burst:before { content: "\f123"; }
.fi-calendar:before { content: "\f124"; }
.fi-camera:before { content: "\f125"; }
.fi-check:before { content: "\f126"; }
.fi-checkbox:before { content: "\f127"; }
.fi-clipboard-notes:before { content: "\f128"; }
.fi-clipboard-pencil:before { content: "\f129"; }
.fi-clipboard:before { content: "\f12a"; }
.fi-clock:before { content: "\f12b"; }
.fi-closed-caption:before { content: "\f12c"; }
.fi-cloud:before { content: "\f12d"; }
.fi-comment-minus:before { content: "\f12e"; }
.fi-comment-quotes:before { content: "\f12f"; }
.fi-comment-video:before { content: "\f130"; }
.fi-comment:before { content: "\f131"; }
.fi-comments:before { content: "\f132"; }
.fi-compass:before { content: "\f133"; }
.fi-contrast:before { content: "\f134"; }
.fi-credit-card:before { content: "\f135"; }
.fi-crop:before { content: "\f136"; }
.fi-crown:before { content: "\f137"; }
.fi-css3:before { content: "\f138"; }
.fi-database:before { content: "\f139"; }
.fi-die-five:before { content: "\f13a"; }
.fi-die-four:before { content: "\f13b"; }
.fi-die-one:before { content: "\f13c"; }
.fi-die-six:before { content: "\f13d"; }
.fi-die-three:before { content: "\f13e"; }
.fi-die-two:before { content: "\f13f"; }
.fi-dislike:before { content: "\f140"; }
.fi-dollar-bill:before { content: "\f141"; }
.fi-dollar:before { content: "\f142"; }
.fi-download:before { content: "\f143"; }
.fi-eject:before { content: "\f144"; }
.fi-elevator:before { content: "\f145"; }
.fi-euro:before { content: "\f146"; }
.fi-eye:before { content: "\f147"; }
.fi-fast-forward:before { content: "\f148"; }
.fi-female-symbol:before { content: "\f149"; }
.fi-female:before { content: "\f14a"; }
.fi-filter:before { content: "\f14b"; }
.fi-first-aid:before { content: "\f14c"; }
.fi-flag:before { content: "\f14d"; }
.fi-folder-add:before { content: "\f14e"; }
.fi-folder-lock:before { content: "\f14f"; }
.fi-folder:before { content: "\f150"; }
.fi-foot:before { content: "\f151"; }
.fi-foundation:before { content: "\f152"; }
.fi-graph-bar:before { content: "\f153"; }
.fi-graph-horizontal:before { content: "\f154"; }
.fi-graph-pie:before { content: "\f155"; }
.fi-graph-trend:before { content: "\f156"; }
.fi-guide-dog:before { content: "\f157"; }
.fi-hearing-aid:before { content: "\f158"; }
.fi-heart:before { content: "\f159"; }
.fi-home:before { content: "\f15a"; }
.fi-html5:before { content: "\f15b"; }
.fi-indent-less:before { content: "\f15c"; }
.fi-indent-more:before { content: "\f15d"; }
.fi-info:before { content: "\f15e"; }
.fi-italic:before { content: "\f15f"; }
.fi-key:before { content: "\f160"; }
.fi-laptop:before { content: "\f161"; }
.fi-layout:before { content: "\f162"; }
.fi-lightbulb:before { content: "\f163"; }
.fi-like:before { content: "\f164"; }
.fi-link:before { content: "\f165"; }
.fi-list-bullet:before { content: "\f166"; }
.fi-list-number:before { content: "\f167"; }
.fi-list-thumbnails:before { content: "\f168"; }
.fi-list:before { content: "\f169"; }
.fi-lock:before { content: "\f16a"; }
.fi-loop:before { content: "\f16b"; }
.fi-magnifying-glass:before { content: "\f16c"; }
.fi-mail:before { content: "\f16d"; }
.fi-male-female:before { content: "\f16e"; }
.fi-male-symbol:before { content: "\f16f"; }
.fi-male:before { content: "\f170"; }
.fi-map:before { content: "\f171"; }
.fi-marker:before { content: "\f172"; }
.fi-megaphone:before { content: "\f173"; }
.fi-microphone:before { content: "\f174"; }
.fi-minus-circle:before { content: "\f175"; }
.fi-minus:before { content: "\f176"; }
.fi-mobile-signal:before { content: "\f177"; }
.fi-mobile:before { content: "\f178"; }
.fi-monitor:before { content: "\f179"; }
.fi-mountains:before { content: "\f17a"; }
.fi-music:before { content: "\f17b"; }
.fi-next:before { content: "\f17c"; }
.fi-no-dogs:before { content: "\f17d"; }
.fi-no-smoking:before { content: "\f17e"; }
.fi-page-add:before { content: "\f17f"; }
.fi-page-copy:before { content: "\f180"; }
.fi-page-csv:before { content: "\f181"; }
.fi-page-delete:before { content: "\f182"; }
.fi-page-doc:before { content: "\f183"; }
.fi-page-edit:before { content: "\f184"; }
.fi-page-export-csv:before { content: "\f185"; }
.fi-page-export-doc:before { content: "\f186"; }
.fi-page-export-pdf:before { content: "\f187"; }
.fi-page-export:before { content: "\f188"; }
.fi-page-filled:before { content: "\f189"; }
.fi-page-multiple:before { content: "\f18a"; }
.fi-page-pdf:before { content: "\f18b"; }
.fi-page-remove:before { content: "\f18c"; }
.fi-page-search:before { content: "\f18d"; }
.fi-page:before { content: "\f18e"; }
.fi-paint-bucket:before { content: "\f18f"; }
.fi-paperclip:before { content: "\f190"; }
.fi-pause:before { content: "\f191"; }
.fi-paw:before { content: "\f192"; }
.fi-paypal:before { content: "\f193"; }
.fi-pencil:before { content: "\f194"; }
.fi-photo:before { content: "\f195"; }
.fi-play-circle:before { content: "\f196"; }
.fi-play-video:before { content: "\f197"; }
.fi-play:before { content: "\f198"; }
.fi-plus:before { content: "\f199"; }
.fi-pound:before { content: "\f19a"; }
.fi-power:before { content: "\f19b"; }
.fi-previous:before { content: "\f19c"; }
.fi-price-tag:before { content: "\f19d"; }
.fi-pricetag-multiple:before { content: "\f19e"; }
.fi-print:before { content: "\f19f"; }
.fi-prohibited:before { content: "\f1a0"; }
.fi-projection-screen:before { content: "\f1a1"; }
.fi-puzzle:before { content: "\f1a2"; }
.fi-quote:before { content: "\f1a3"; }
.fi-record:before { content: "\f1a4"; }
.fi-refresh:before { content: "\f1a5"; }
.fi-results-demographics:before { content: "\f1a6"; }
.fi-results:before { content: "\f1a7"; }
.fi-rewind-ten:before { content: "\f1a8"; }
.fi-rewind:before { content: "\f1a9"; }
.fi-rss:before { content: "\f1aa"; }
.fi-safety-cone:before { content: "\f1ab"; }
.fi-save:before { content: "\f1ac"; }
.fi-share:before { content: "\f1ad"; }
.fi-sheriff-badge:before { content: "\f1ae"; }
.fi-shield:before { content: "\f1af"; }
.fi-shopping-bag:before { content: "\f1b0"; }
.fi-shopping-cart:before { content: "\f1b1"; }
.fi-shuffle:before { content: "\f1b2"; }
.fi-skull:before { content: "\f1b3"; }
.fi-social-500px:before { content: "\f1b4"; }
.fi-social-adobe:before { content: "\f1b5"; }
.fi-social-amazon:before { content: "\f1b6"; }
.fi-social-android:before { content: "\f1b7"; }
.fi-social-apple:before { content: "\f1b8"; }
.fi-social-behance:before { content: "\f1b9"; }
.fi-social-bing:before { content: "\f1ba"; }
.fi-social-blogger:before { content: "\f1bb"; }
.fi-social-delicious:before { content: "\f1bc"; }
.fi-social-designer-news:before { content: "\f1bd"; }
.fi-social-deviant-art:before { content: "\f1be"; }
.fi-social-digg:before { content: "\f1bf"; }
.fi-social-dribbble:before { content: "\f1c0"; }
.fi-social-drive:before { content: "\f1c1"; }
.fi-social-dropbox:before { content: "\f1c2"; }
.fi-social-evernote:before { content: "\f1c3"; }
.fi-social-facebook:before { content: "\f1c4"; }
.fi-social-flickr:before { content: "\f1c5"; }
.fi-social-forrst:before { content: "\f1c6"; }
.fi-social-foursquare:before { content: "\f1c7"; }
.fi-social-game-center:before { content: "\f1c8"; }
.fi-social-github:before { content: "\f1c9"; }
.fi-social-google-plus:before { content: "\f1ca"; }
.fi-social-hacker-news:before { content: "\f1cb"; }
.fi-social-hi5:before { content: "\f1cc"; }
.fi-social-instagram:before { content: "\f1cd"; }
.fi-social-joomla:before { content: "\f1ce"; }
.fi-social-lastfm:before { content: "\f1cf"; }
.fi-social-linkedin:before { content: "\f1d0"; }
.fi-social-medium:before { content: "\f1d1"; }
.fi-social-myspace:before { content: "\f1d2"; }
.fi-social-orkut:before { content: "\f1d3"; }
.fi-social-path:before { content: "\f1d4"; }
.fi-social-picasa:before { content: "\f1d5"; }
.fi-social-pinterest:before { content: "\f1d6"; }
.fi-social-rdio:before { content: "\f1d7"; }
.fi-social-reddit:before { content: "\f1d8"; }
.fi-social-skillshare:before { content: "\f1d9"; }
.fi-social-skype:before { content: "\f1da"; }
.fi-social-smashing-mag:before { content: "\f1db"; }
.fi-social-snapchat:before { content: "\f1dc"; }
.fi-social-spotify:before { content: "\f1dd"; }
.fi-social-squidoo:before { content: "\f1de"; }
.fi-social-stack-overflow:before { content: "\f1df"; }
.fi-social-steam:before { content: "\f1e0"; }
.fi-social-stumbleupon:before { content: "\f1e1"; }
.fi-social-treehouse:before { content: "\f1e2"; }
.fi-social-tumblr:before { content: "\f1e3"; }
.fi-social-twitter:before { content: "\f1e4"; }
.fi-social-vimeo:before { content: "\f1e5"; }
.fi-social-windows:before { content: "\f1e6"; }
.fi-social-xbox:before { content: "\f1e7"; }
.fi-social-yahoo:before { content: "\f1e8"; }
.fi-social-yelp:before { content: "\f1e9"; }
.fi-social-youtube:before { content: "\f1ea"; }
.fi-social-zerply:before { content: "\f1eb"; }
.fi-social-zurb:before { content: "\f1ec"; }
.fi-sound:before { content: "\f1ed"; }
.fi-star:before { content: "\f1ee"; }
.fi-stop:before { content: "\f1ef"; }
.fi-strikethrough:before { content: "\f1f0"; }
.fi-subscript:before { content: "\f1f1"; }
.fi-superscript:before { content: "\f1f2"; }
.fi-tablet-landscape:before { content: "\f1f3"; }
.fi-tablet-portrait:before { content: "\f1f4"; }
.fi-target-two:before { content: "\f1f5"; }
.fi-target:before { content: "\f1f6"; }
.fi-telephone-accessible:before { content: "\f1f7"; }
.fi-telephone:before { content: "\f1f8"; }
.fi-text-color:before { content: "\f1f9"; }
.fi-thumbnails:before { content: "\f1fa"; }
.fi-ticket:before { content: "\f1fb"; }
.fi-torso-business:before { content: "\f1fc"; }
.fi-torso-female:before { content: "\f1fd"; }
.fi-torso:before { content: "\f1fe"; }
.fi-torsos-all-female:before { content: "\f1ff"; }
.fi-torsos-all:before { content: "\f200"; }
.fi-torsos-female-male:before { content: "\f201"; }
.fi-torsos-male-female:before { content: "\f202"; }
.fi-torsos:before { content: "\f203"; }
.fi-trash:before { content: "\f204"; }
.fi-trees:before { content: "\f205"; }
.fi-trophy:before { content: "\f206"; }
.fi-underline:before { content: "\f207"; }
.fi-universal-access:before { content: "\f208"; }
.fi-unlink:before { content: "\f209"; }
.fi-unlock:before { content: "\f20a"; }
.fi-upload-cloud:before { content: "\f20b"; }
.fi-upload:before { content: "\f20c"; }
.fi-usb:before { content: "\f20d"; }
.fi-video:before { content: "\f20e"; }
.fi-volume-none:before { content: "\f20f"; }
.fi-volume-strike:before { content: "\f210"; }
.fi-volume:before { content: "\f211"; }
.fi-web:before { content: "\f212"; }
.fi-wheelchair:before { content: "\f213"; }
.fi-widget:before { content: "\f214"; }
.fi-wrench:before { content: "\f215"; }
.fi-x-circle:before { content: "\f216"; }
.fi-x:before { content: "\f217"; }
.fi-yen:before { content: "\f218"; }
.fi-zoom-in:before { content: "\f219"; }
.fi-zoom-out:before { content: "\f21a"; }
/********************************************************************************************************
    FlexBox
********************************************************************************************************/

.flexBox {
    display: box ! important;
    display: -webkit-box ! important;
    display: -moz-box ! important;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
}
.inlineFlexBox {
    display: inline-box ! important;
    display: -webkit-inline-box ! important;
    display: -moz-inline-box ! important;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
}
.flexBoxH {
    display: box ! important;
    display: -webkit-box ! important;
    display: -moz-box ! important;
    box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
}
.inlineFlexBoxH {
    display: inline-box ! important;
    display: -webkit-inline-box ! important;
    display: -moz-inline-box ! important;
    box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
}
.flex1 {
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}
.flexCenter {
    box-align: center;
    -webkit-box-align: center;
    -moz-box-align: center;
}

.gc_flexBoxH { white-space: nowrap; letter-spacing: -0.25em; }
.gc_flexBoxH > * { display: inline-block; white-space: normal; letter-spacing: normal; vertical-align: top; }

.inline { display:inline-block; }
.absolute {position: absolute;}
.relative {position: relative;}
.center {text-align: center;}
.middle > * {vertical-align: middle;}
.hidden {visibility: hidden;}
.dotdotdot {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.shade {
    background-color: rgba(0,0,0,0.5);
}

/********************************************************************************************************
    Wait Dialog
********************************************************************************************************/
div.gc_wait {
    text-align: center;
}
div.gc_wait .body {
    background-color:rgba(0, 0, 0, 0.75);
    display: inline-block;
    padding: 1em 2em;
    color: white;
    margin: 0 2em;
    border-radius: 1em;
}
div.gc_wait .body img {
    margin: 0.5em;
}
.gc_wait.newload .body {
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0; right: 0;
    margin: 0;
    padding: 0;
}
.gc_wait.newload .body img {
    width: 35%;
    max-width: 10em;
    height: auto;
    margin: 0;
}

/********************************************************************************************************
    Alert Dialog
********************************************************************************************************/
div.gc_alert .title {
    background-color: transparent;
    font-family: maiden, arial;
    font-weight: bold;
    font-size: 1.5em;
    text-align: top;
    color: #4d1916;
}
div.gc_alert .exit {
    position: absolute;
    width: 2.5em;
    height: 2.5em;
    right: -1em;
    top: -1em;
}
div.gc_alert.gc_popup .body {
    padding: 1em;
    font-weight: bold;
}
div.gc_alert.gc_popup .body img.gc_alert {
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    margin-right: 1em;
}
div.gc_alert span {
    word-wrap:break-word;
}

/********************************************************************************************************
    Confirm Dialog
********************************************************************************************************/
#confirm, div.gc_alert {
    position: absolute;
    border-radius: 0.25em;
    font-weight: bold;
    color: #3a3a3a;
    background-color: #b5d448;
    box-shadow: 0 5px 10px #3a3a3a;
    -webkit-box-shadow: 0 5px 10px #3a3a3a;
    text-align: center;
    padding: 0;
    margin: 1em;
    max-width: 90%;
}
#confirm .body {
    padding: 1em 2em 0 2em;
    overflow: hidden;
}
#confirm .gc_ibutton {
    width: 6.5em;
    margin: 0.25em;
}
#confirm .gc_ibutton .text {
    padding: 0.5em 0;
}

/********************************************************************************************************
    TextBox
********************************************************************************************************/
.gc_text {
    border-radius: 0.5em;
    height: 2.5em;
    background-color: white;
    color: #858183;
    margin: 0.25em;
    border: 0.125em solid #77a11c;
    border-radius: 0.4em;
    box-shadow: inset 0 0 0.25em #a4a4a4;
    -webkit-box-shadow: inset 0 0 0.25em #a4a4a4;
    padding-left: 0.5em;
}
.gc_text > div {
    height: 100%;
    margin: 0 0.125em;
}
.gc_text > img {
    vertical-align: middle;
    margin: 0 0.25em;
}
.gc_text input {
    border: 0;
    height: 100%;
    width: 100%;
    font-size: 0.9em;
    font-family: sans-serif;
    background: url(../images/transparent.png);
}
.gc_text input:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-focus-ring-color: rgba(0,0,0,0);
    -webkit-user-modify: read-write-plaintext-only;
}
.gc_text input {
    font-style: italic;
    font-weight: normal;
}
.gc_text input:focus {
    color: #3a3a3a;
    font-style:normal;
    font-weight: bold;
}

/********************************************************************************************************
    Button
********************************************************************************************************/

.gc_ibutton .text {
    font-family: arial;
    font-weight: bold;
    padding: 0.5em 1.5em;
    color: #49290c;
    text-shadow: 0 0 1px #f3e0ad;
    font-weight: bold;
}


/********************************************************************************************************
    WebFonts
********************************************************************************************************/

.maidenTitle {
    font-family: maiden;
    color: #4d1916;
    font-weight: bold;
}
p.error {
    color: #f3274c;
    margin: 0 0 0.25em;
    font-size: 0.9em;
}



/********************************************************************************************************
    LOGIN WIZARD 
********************************************************************************************************/

#wizard .title {
    height: 3rem;
    overflow: hidden;
    background-color: #31d5f8;
    border-bottom: 1px solid #787878;
}
#wizard .title .gc_ibutton {
    margin: 0.5rem 0;
    line-height: 1rem;
}
#wizard .title .gc_ibutton .text {
    color: #115467;
    font-size: 0.8rem;
    padding: 0.75rem 1rem 0.75rem 0.5rem;
}
#wizard .title img {
    position: absolute;
    width: auto;
    height: 2rem;
    right: 0.5rem;
    top: 0.5rem;
}
#wizard .subtitle {
    font-size: 1.2em;
    font-family: maiden;
    font-weight: bold;
    color: #4d1916;
}   
#wizard .body, #wizard .contents {
    position: relative;
}
#wizard .body {
    padding: 1em;
}
#wizard #login .body, #wizard #forgot .body {
    text-align: center;
}
#wizard #newORexist .body {
    padding: 0;
}
#wizard .panel {
    position: absolute;
    left: 0; right: 0;
    top: 0;
    bottom: 0;
}
#wizard .panel > .flex1 {
    min-height: 2em;
}
#wizard .panel .subtitle {
    position: absolute;
    bottom: 0.5em;
    left: 1em;
    font-size: 1.5em;
}

#wizard .login1 {
    position: relative;
    padding: 1em;
}
#wizard .login1 .maidenTitle {
    font-size: 1.5em;
}
#wizard .login1 .msg {
    color: #426c06;
}
#wizard .login1.gc_focus {
    background-color: #c5e458;
}
#wizard .login1:nth-child(1) {
    border-bottom: 1px solid #a0c632;
}
#wizard .login1 .label {
    font-size: 1.5em;
    font-weight: bold;
}
#wizard .loginbutton .msg {
    font-size: 0.8em;
}
#wizard .login1 img {
    position: absolute;
    top: 1.5em;
    right: 0.5em;
    height: 2.5em;
    width: auto;
}
#wizard .login2 {
    position: relative;
    color: white;
    font-weight: bold;
    margin: 0.25em;
}
#wizard .login2 canvas {
    height: 3.5em;
    width: 100%;
    display: block;
}
#wizard .login2 .content {
    position: absolute;
    top: 0.5em; bottom: 0.5em;
    left: 1em;
    right: 1em;
}
#wizard .login2 .content > * {
    vertical-align: middle;
}
#wizard .login2 .icon {
    height: 2.5em;
    margin-right: 0.5em;
}
#wizard .login2 img:last-child {
    position: absolute;
    top: 0.75em;
    right: 0.5em;
    height: 2em;
}
#wizard .linkbutton {
    margin: 0.25em 0.5em;
    color: #42443b;
    font-weight: bold;
    text-decoration: underline;
}

#wizard .terms, #wizard .footer {
    padding-top: 1em;
    color: #6c9320;
    padding-bottom: 0.5em;
    font-size: 0.9em;
    text-align: center;
}
#wizard .terms .link, #wizard .footer .link {
    display: inline-block;
    color: #42443b;
    font-weight: bold;
}
#wizard .gc_text {
    width: 80%;
    max-width: 14em;
}

#wizard #login, #wizard #forgot {
}
#wizard #login .subtitle, #wizard #forgot .subtitle {
    left:0;right:0;
    text-align:center;
}
#wizard #forgot .cow {
    width: 50%;
    position: absolute;
    bottom: 3em;
    left: 25%;
}
#wizard .gc_ibutton {
    margin: 0.5em 0;
}

/********************************************************************************************************
    DISPLAY POPUP
********************************************************************************************************/
#displayCheck {
    background-color: #b5d448;
    border-radius: 0.25em;
    font-family: oxygen, sans-serif;
    color: #3a3a3a;
    display: inline-block;
    width: 18em;
    max-width: 80%;
}

#displayCheck .body {
    margin: 1em;
    text-align: center;
}

#displayCheck .gc_text {
    width: 80%;
}

#displayCheck label, #display p {
    display: block;
}

#displayCheck .warn {
    color: #4d1916;
    margin: 0.5em;
}

#newORexist .container {
    height: 100%;
    max-width: 800px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}

#newORexist .bubble {
    font-family: maiden;
    color: #4d1916;
    left: 40%;
    right: auto;
    top: 8%;
    position: absolute;
    padding: 0.5em;
    width: 45%;
    text-align: justify;
    font-size: 1.2em;
    border-radius: 0.5em;
    border-width: 12px;
    border-style: solid;
}

#newORexist p { margin: 0 }
#newORexist .bubble img.tail {
    position: absolute;
    left: 5%;
    bottom: -1.85em;
    height: 1.5em;
}

#newORexist .container img.mel {
    position: absolute;
    left: 6%;
    top: 20%;
    max-height: 140%;
}

body {
    font-family: arial;
    margin: 0;
}

#main {
    background-color: #b5d448;
}
#loading .loading img {
    width: 35%;
    max-width: 10em;
    height: auto;
}

/* loading */
#loading {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    text-align: center;
    overflow: hidden;
    font-family: arial;
    font-size: 1em;
}
#loading.ready {
    top: 0;
}
#loading img.logo {
    width: 50%;
    height: auto;
}
#loading #prog {
    display: inline-block;
    position: relative;
    height: 20px;
    margin: 16px;
    width: 50%;
    overflow: hidden;
    background-color: #eeeeee;
    border-bottom: 1px solid #2E617F;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
#loading #prog div {
    width: 0;
    height: 100%;
    background-color: #5DC3FF;
}
#loading .loading {
    position: absolute;
    top: 0;
    width: 100%;
}
#nointernet {
    position: absolute;
    left: 0; right: 0;
    top: 40%; bottom: 0;
    text-align: center;
}
#nointernet div {
    margin: 2em;
    background-color: black;
    color: white;
    border-radius: 1em;
    padding: 1em;
}
#wizard .title {
    font-size: 1em;
}
html,body{
	margin:0;
	height:100%;
	font-family: oxygen;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	background-color: rgb(88, 88, 88);
	 -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;

}

#BBW{
	max-width: 680px;
	margin: auto;
	box-shadow: 0 0 10px;
}
::-webkit-scrollbar { 
    display: none; 
}

* {
	-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
	-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
	-webkit-user-select: none;                 /* prevent copy paste, to allow, change 'none' to 'text' */
}
input, textarea {
    -webkit-user-select: auto !important;
}
select{
	border-radius: 0.5em;
}
.smallText{
	font-size: 0.9em;
	line-height: 1.2em;
}
.bold{
	font-weight: bold;
}
.redImportant{
	color: rgb(227, 0, 0);
	font-family: maiden;
}

.centerChild{
	display: -webkit-box !important;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-webkit-box-flex: 1;
}

.tableDisplay{
	display: table;
	width: 100%;
}

.marginTB{
	margin: 1em 0;
}

.paddingTB{
	padding: 1em 0;
}

.overlay{
	position: absolute;
	top:0;
	bottom: 0;
	right: 0;
	left: 0;
}

.sysInfo.overlay{
	z-index: 100001;
	color: white;
	bottom: 0;
	display: block;
	left: auto;
	right: auto;
	margin: auto;
	top: auto;
	font-size: 1rem;
	line-height: 1;
}

.sysInfo.overlay > div{
	background-color: rgba(0, 140, 186, 0.6);
	padding: 0.22222rem 0.44444rem 0.33333rem;
	word-break: break-all;
	font-family: 'Arial';
}
.sysInfo.overlay > div.dark{
    background-color: rgba(0, 140, 186, 0.8);
}
.sysInfo.overlay > div.red {
    background-color: rgba(148, 49, 32, 0.6);
}

.clickThru{
	pointer-events: none;
}
.scrollBox{
	width: 100%;
}
.button.disabled {
    opacity: 0.6;
}
.button{
	background-color: #e4d689;
	/*border-bottom: 1px solid #573D0E;*/
	box-shadow: 0 1px 2px #573D0E;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
	border-radius: 6px;
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 0 auto;
	color: #573D0E;
	line-height: 1em;
	font-size: 1.4em;
	cursor: pointer;
	font-family: yanone;
	text-shadow: 0 0 0 transparent;
	border: 1px solid rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.6);
}
.button.green{
	background-color: #0CA674;
	color: #FFFFFF;
	box-shadow: inset 0 1px 2px #61DAB3, inset 0 -1px 2px #004C26;
	text-shadow: 0 0 0 transparent;
	border: 1px solid #0D5732;
	text-align: center;
}
.button *{
	pointer-events: none;
}
.button.gc_focus{
	box-shadow: 0;
	-webkit-box-shadow: inset 0 1px 1px #573D0E;
	box-shadow: inset 0 1px 1px #573D0E;
	text-shadow: 0 -1px rgba(255, 255, 255, 0.5);
}


.button.large{
	font-size: 2em;
	font-family: yanone;
	padding: 0.25em 0.5em;
	line-height: 1em;
}

.button.dark{
	background-color: #573D0E;
	color: #FFF9D6;
	box-shadow: 0;
	-webkit-box-shadow: 0 1px 1px #000;
	box-shadow: 0 1px 1px #000;
	text-shadow: 0 1px rgba(0, 0, 0, 0.8);
}

.button.dark.gc_focus{
	box-shadow: 0;
	-webkit-box-shadow: inset 0 1px 1px #000;
	box-shadow: inset 0 1px 1px #000;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.8);
}

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.blur{
	-webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-o-filter: blur(8px);
	-ms-filter: blur(8px);
	transition: all 0.5s ease-in-out;
	-webkit-transform: translate3d(0,0,0);
}

.unblur{
	-webkit-filter: initial;
	-moz-filter: initial;
	-o-filter: initial;
	-ms-filter: initial;
	transition: all 0.5s ease-in-out;
	-webkit-transform: translate3d(0,0,0);
}

.fancyDigit{
	color: white;
	font-family: yanone;
	text-shadow: 
		0px 0.02em 0 #000, 
		0px 0.04em 0 #000,
		0px 0.06em 0 #000,
		0px 0.08em 0 #000,  
		0px 0.1em 0 #000,  
		-0.03em -0.03em 0 #000, 
		0.03em -0.03em 0 #000, 
		-0.03em 0.03em 0 #000, 
		0.03em 0.03em 0 #000, 
		0 0 0.055em #000;
}


.fancyDigit.brown{
	color: white;
	font-family: yanone;
	text-shadow: 
		0px 0.02em 0 #3F2C09, 
		0px 0.04em 0 #3F2C09,
		0px 0.06em 0 #3F2C09,
		0px 0.08em 0 #3F2C09, 
		0px 0.1em 0 #3F2C09, 
		0.02em 0 0 #3F2C09, 
		-0.02em 0 0 #3F2C09, 
		-0.03em -0.03em 0 #3F2C09, 
		0.03em -0.03em 0 #3F2C09, 
		-0.03em 0.03em 0 #3F2C09, 
		0.03em 0.03em 0 #3F2C09, 
		0 0 0.055em #3F2C09;
}

.title.fancyDigit{
	text-shadow: 0px 1px 0 #3F2C09, 0px 2px 0 #3F2C09, -1px -1px 0 #3F2C09, 1px -1px 0 #3F2C09, -1px 1px 0 #3F2C09, 1px 1px 0 #3F2C09, 2px 2px 0 #3F2C09, 0 0 3px #3F2C09;
}

.fancyDigit.white{
	text-shadow: 0px 1px 0 #FFFFFF, 0px 2px 0 #FFFFFF, -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF, 2px 2px 0 #FFFFFF, 0 0 3px #FFFFFF;
}

.imageBtn{
	background-size: 85%;
	background-position: 50% 10%;
	background-repeat: no-repeat;
	background-color: #e4d689;
	margin: 0.2em;
	border: 2px solid rgba(87, 61, 14, 0.8);
	box-shadow: 0 2px #573D0E;
	border-radius: 8px;
	padding-bottom: 90%;
	cursor: pointer;
}

.imageBtn.gc_focus{
	margin-top:3px;
	box-shadow: inset 0 1px 1px;
}

.imageBtn .overlay{
	top: auto;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 1px 6px black;
	font-family: yanone;
	width: 80%;
	margin: auto;
	line-height: 0.8em;
	bottom: 14%;
	pointer-events: none;
	font-size: 0.9em;
}

.bgImage{
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	padding-bottom: 100%;
}
.levelTube{
	padding: 0.25em 0.45em;
	line-height: 1em;
	border-radius: 1em;
	box-shadow:  0 1px 2px rgba(87, 61, 14, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.75);
	border: 0.15rem solid rgba(87, 61, 14, 1);
	font-family: yanone;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
.inline .levelTube{
	box-shadow: none;
	border :0;
	vertical-align: inherit;	
}

.levelBadge{
	z-index: -1;
	color: rgba(213, 253, 86, 1);
	text-shadow: 0px 1px 0 #000, 0px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000;
	line-height: 0;
}
.levelLabel{
	font-size: 0.3em;
	padding-top: 0.3em;
	line-height: 0.8em;

}

.lvlc_0{
	color: rgba(95, 113, 38, 1);
}

.lvlc_1{
	color: rgba(106, 126, 43, 1);
}

.lvlc_2{
	color: rgba(127, 151, 51, 1);
}

.lvlc_3{
	color: rgba(170, 202, 69, 1);
}

.lvlc_4{
	color: rgba(181, 215, 73, 1);
}

.lvlc_5{
	color: rgba(192, 228, 77, 1);
}

.lvlc_6{
	color: rgba(202, 240, 82, 1);
}
.lvlc_7{
	color: rgba(213, 253, 86, 1);
}

.last{
	color: rgba(0,0,0,0.5);
	font-family: 'maiden';
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

.displayBox .fwbBadge{
	height : 0.65em;
}
/*
@-webkit-keyframes blur {
    0% {
        -webkit-filter: blur(0px);
	    -moz-filter: blur(0px);
	    -o-filter: blur(0px);
	    -ms-filter: blur(0px);
	    filter: blur(0px);
	    opacity: 1;
    }
    
    100% {
        -webkit-filter: blur(10px);
	    -moz-filter: blur(10px);
	    -o-filter: blur(10px);
	    -ms-filter: blur(10px);
	    filter: blur(10px);
	    opacity: 0.4;
    }
}

@-webkit-keyframes unBlur {
    0% {
        -webkit-filter: blur(10px);
	    -moz-filter: blur(10px);
	    -o-filter: blur(10px);
	    -ms-filter: blur(10px);
	    filter: blur(10px);
	    opacity: 0.4;
    }
    
    100% {
        -webkit-filter: blur(0px);
	    -moz-filter: blur(0px);
	    -o-filter: blur(0px);
	    -ms-filter: blur(0px);
	    filter: blur(0px);
	    opacity: 1;
    }
}*/

.max400{
	max-width: 400px;
	margin: auto;
	overflow-x: hidden;
}

.max500{
	max-width: 500px;
	margin: auto;
	overflow-x: hidden;
}

.max600{
	max-width: 600px;
	margin: auto;
	overflow-x: hidden;
}

.fullHeight {
    height: 100%;
}

.hideOverflowText{
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}


input{
	box-sizing: border-box;
	padding: 2px 10px;
	font-size: 14px;
	color: #555;
	vertical-align: middle;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

textarea{
	color: #555555;
	vertical-align: middle;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 8px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	resize: none;
}

.floatLeft{
	float: left;
}

.floatRight{
	float: right;
}

.clearBoth{
	clear: both;
}

.list-wrapper{
	padding: 0;
	margin: 0;
	right:0;
	text-shadow: none;
}
.list-wrapper.empty{
	text-align: center;
	padding-top: 10%;
}
.list-item-block{
	margin: 10px;
	padding: 10px 5px;
	background-color: #DFD68E;
	border-radius: 6px;
	margin-bottom: 6px;
	list-style: none;
}
.list-image{
	width: 15%;
	padding-bottom: 15%;
	background-size: 100%;
	display: inline-block;
	border-radius: 5px;
}

.list-right{
	width: 80%;
	margin-left: 1.5%;
	display: inline-block;
	vertical-align: top;
	margin-top: -4px;
	color: #333;
}
.list-right .list-display{
	font-weight: 700;
	line-height: 20px;
	vertical-align: top;
}

.list-content{
	font-weight: 400;
	color: #4d1916;
	line-height: 1.1em;
	display: block;
}
.list-right .list-time{
	font-size: 12px;
	margin-top: -2px;
}
.dividerImage{
	height: 2em;
	width: 100%;
	margin: 0.2em auto;
	background-repeat: no-repeat;
	background-size: cover;
	background-size: contain;
	background-position: center;
}

.backdrop{
	position: absolute;
	top: 0;
	right:0;
	left: 0;
	bottom: 0;
}


.bbwModal, .gc_fullscreen {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	line-height: 1.5em;
}

.bbwModal .modalContainer .close{
    position: absolute;
    height: 35px;
	width: 35px;
    background-size: 100%;
    top: 0;
    right: 0;
    cursor: pointer;
    padding: 0 0 5px 5px;
    display: none;
}

#emotes .bbwModal .modalContainer{
    padding: 0em;
	max-width: 500px;
	width: 90%;	
}

.bbwModal .modalContainer, .bbw_popup{
	width: 95%;
	margin: auto;
	background-color: rgba(255, 255, 255, 0.95);
	border: 2px solid #573D0E;
	border-radius: 8px;
	padding: 0.75em;
	box-shadow: 0 1px 8px #573D0E;
	color: #573D0E;
	-webkit-transition: -webkit-transform 0.1s ease-in-out;
	transition: -webkit-transform 0.1s ease-in-out;
	-webkit-transform: translate3d(0px,0px,0px);
	text-align: center;
	max-width: 600px;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.bbw_popup .body{
	margin: 0.5em 0;
}

.bbw_popup .bbwbutton{
	cursor: pointer;
}
.modalContainer{
	opacity: 0;
}


.bbwModal .backdrop{
	background-color: rgba(0,0,0,0.4)
}

.modalContainer .title, .modalContainer .body{
	width: 85%;
	margin: 0.5em auto;
}
.bbwModal .bbwbutton {
	cursor: pointer;
}
.bbwModal .modalContainer img{
	max-width: 18rem;
	height: auto;
}

.bbwModal .modalContainer .confirmImage{
	max-width: 40%;
	display: block;
	margin: auto;
}

#confirmModal .modalContainer{
	width: 80%;
	max-width: 500px;
}
#emotes .emoteBox img{
    max-width: 100%;
}

.vCenter{
	justify-content: center;
	display: flex;
	flex-direction: column;
}

.title{
	font-family: yanone;
	font-size: 1.8em;
	/*line-height: 1em;*/
}
.title img{
	height: 1em;
	width: auto;
}
.bbwModal .modalContainer .flexBoxH .button{
	display: block;
}
.bbwModal .modalContainer .button{
	margin: 0 0.5em;
	padding: 0.5em 0.6em;
}
.bbwModal .modalContainer .button.large{
	font-family: yanone;
	padding: 0.6rem 0.8rem;
}
.bbwModal .modalContainer .rewardImages{
	width: 100%;
	margin: auto;
}
#friendRequest .text{
	padding: 1rem;
	font-size:1.2em;
}
#friendRequest .actions{
	padding-top: 1rem;
}
#notification .msg{
	width: 80%;
	line-height: 1.2em;
	margin: 0.25em auto;
	font-family: yanone;
	font-size: 1.3em;
}
.bbwModal.rare .modalContainer{
	background-image: -webkit-linear-gradient(0deg, hsla(175, 70%, 46%, 1) 16.666667%, hsla(150, 69%, 51%, 1) 16.666667%, hsla(150, 67%, 54%, 1) 33.333333%, hsla(75, 72%, 58%, 1) 33.333333%, hsla(75, 67%, 59%, 1) 50%, hsla(25, 75%, 53%, 1) 50%, hsla(25, 70%, 52%, 1) 66.666667%, hsla(10, 88%, 56%, 1) 66.666667%, hsla(10, 88%, 58%, 1) 83.333333%, hsla(325, 60%, 61%, 1) 83.333333%);
}
.bbwModal.rare .modalContainer div:first-child{
	font-size: 36px;
}

div.profilePic{
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	padding-bottom: 100%;
	box-shadow: inset 0 0 2px rgba(87, 61, 14, 0.8), 0px 0px 1px rgba(87, 61, 14, 0.8);
	border-radius: 8%;
	display: block;
}

img.profilePic, canvas.profilePic, canvas.portrait{
	border: 1px solid rgba(87, 61, 14, 0.8);
	box-shadow: inset 0 0 3px rgba(87, 61, 14, 0.8);
	border-radius: 4px;
}

.centered{
	text-align: center;
}
.progress {
  position: relative;
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #eeeeee;
  box-shadow: 0 1px 2px #2E617F;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.progress .bar {
  border-radius: 4px;
  float: left;
  width: 0;
  height: 100%;
  color: #ffffff;
  text-align: center;
  background-color: #5DC3FF;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: width 0.6s ease;
     -moz-transition: width 0.6s ease;
       -o-transition: width 0.6s ease;
          transition: width 0.6s ease;
}
.progress.red{
	box-shadow: 0 1px #B4401D;
}
.progress.red .bar{
	background-color: #FF8965;
}
.progress .progressOverlay{
    position: absolute;
    text-align: center;
    width: 100%;
    font-family: oxygenBold;
	color: #573D0E;
	text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
.progress.netural{
	background-color: rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}

.progress.netural .bar{
	background-color: rgba(0,0,0,0.2);

}

.label{
	font-size: 1.2em;
}

.row{
	display: table;
	width: 100%;
}

.f20{
	float: left;
	width: 20%;
}

.f30{
	float: left;
	width: 35%;
}

.f70{
	float: left;
	width: 65%;
}
.f80{
	float: left;
	width: 80%;
}

#smokey{
	position: absolute;
	bottom: 12%;
	width: 85%;
	max-width: 400px;
	left: 0;
	right: 0;
	border-radius: 0.4em;
	margin: auto;
	text-align: center;
	background-color: rgba(61, 43, 10, 0.9);
	z-index: 100001;
	font-size: 1.4em;
	padding: 0.5em;
	color: #FFFCE8;
	box-sizing: border-box;
	pointer-events: none;
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

#smokey .msg{
	padding: 0 10px;
	font-family: yanone;
	line-height: 1.2em;
	text-align: left;
	display: block;
}

#smokey .profilePicBox{
	width: 2em;
	cursor: pointer;
}

.ribbon{
	width: 0px;
	height: 20px;
	min-height: 20px;
	left: 12px;
	top: -2px;
	border-width: 20px 20px;
	border-style: solid;
	border-color: #573D0E #573D0E transparent #573D0E;
	bottom: auto;
	box-shadow: 0px -3px 4px;

}

.ribbon span{
	position: absolute;
	font-size: 22px;
	color: #FEFFF4;
	top: -12px;
	left: -8px;
}


.userInput span, .userInput img, .userInput div{
	display: inline;
	vertical-align: middle;
}

.userInput .atTag{
	cursor: pointer;
	color: rgb(6, 114, 32);
	font-family: oxygenBold;
}
.hwAcc{
	-webkit-transform: translate3d(0px,0px,0px)
}


.tabs {
  *zoom: 1;
  margin-bottom: 0 !important;
  display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-align: center;
	-webkit-box-pack: center; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }
  .tabs dd {
    position: relative;
    margin-bottom: 0 !important;
    top: 1px;
    width: 100%;
    -webkit-box-flex: 1;
}
.tabs dd > a {
      display: block;
      background: #efefef;
      color: #222222;
      padding-top: 0.88889rem;
      padding-right: 1.77778rem;
      padding-bottom: 0.94444rem;
      padding-left: 1.77778rem;
      font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
      font-size: 0.88889rem; }
      .tabs dd > a:hover {
        background: #e2e2e2; }
    .tabs dd.active a {
      background: white; }
  .tabs.radius dd:first-child a {
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .tabs.radius dd:last-child a {
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px; }
  .tabs.vertical dd {
    position: inherit;
    float: none;
    display: block;
    top: auto; }

.tabs-content {
  *zoom: 1;
  margin-bottom: 1.33333rem; }
  .tabs-content:before, .tabs-content:after {
    content: " ";
    display: table; }
  .tabs-content:after {
    clear: both; }
  .tabs-content > .content {
    display: none;
    padding: 0.5rem 0; }
    .tabs-content > .content.active {
      display: block; 
  width: 100%;}
    .tabs-content > .content.contained {
      padding: 0.83333rem; }
  .tabs-content.vertical {
    display: block; }
    .tabs-content.vertical > .content {
      padding: 0 0.83333rem; }

.ui-autocomplete {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	background-color: rgba(255, 255, 255, 0.85);
	z-index: 100;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}
.ui-menu .ui-menu-item {
	margin: 0;
	padding: 0;
	width: 100%;
	list-style: none;
	padding: 0.5em 0;
	border-bottom: 1px solid #573D0E;
}
.ui-menu .ui-menu-item a {
	text-decoration: none;
	display: block;
	padding: 2px .8em;
	line-height: 1.5em;
	min-height: 0;
	font-weight: normal;
	color: #573D0E;
}

.ui-helper-hidden-accessible{
	display: none;
}



.btn-group{
    display: inline-block;
}
.btn-group button{
    display: inline-block;
    text-align: center;
    padding: 0.25em 0.75em;
    float: left;
    background-color: rgba(255, 255,255, 0.75);
    border: 2px solid rgb(169, 169, 169);
    border-left-width: 2px;
    border-right-width: 0;
}
.btn-group.brown button{
	border-color: #573D0E;
	color: #573D0E;
	background-color: #E4D689;
}

.btn-group button:first-child{
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    border-left-width: 2px;
    border-right-width: 2px;
}
.btn-group button:last-child{
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border-left-width: 2px;
    border-right-width: 2px;
}
.btn-group button:nth-child(2){
	border-left-width: 0px;
}
.btn-group button.active,.btn-group button.gc_focus{
    box-shadow: inset 0 2px 4px;
    background-color: #D4C570;
}
#nav{
	z-index: 10;
	position: relative;
	width: 100%;
}
#nav nav{
	background: #FFF9D6;
	border-bottom: 1px solid #3D2B0A;
	box-shadow: 0 0px 3px #3D2B0A;
	color: #573D0E;
	z-index: 10;
	position: relative;
}
#nav .navBase{
	display: none;
}
#nav div.navWrapper{
	margin: auto;
	padding: 2px 0.5em;
	height: 3em;
}

#nav div.left{
	width: 50%;
}

#nav div.right{
	width: 50%;
	text-align: right;
	padding-top: 2px;
}

#nav .currentView{
	font-size: 2em;
	font-family: yanone;
	padding: 0 0.2em;
	white-space: nowrap;
	padding-top: 0.5%;
}

#nav .moneyBox{
	white-space: nowrap;
	line-height: 1.4em;
	text-align: right;
	padding-right: 0.5em;
	padding-top: 0.5%;
}

#nav .moneyBox .money{
	display: block;
}

#nav .moneyBox .vc .money{
	display: inline-block;
	margin-left: 0;
}
#nav .navWrapper .profilePicBox{
	width: 2.6em;
	margin-top: 0.2em;
}
#nav .feeder{
	margin-right: 0.25em;
	position: relative;
}

#nav .menuIcon{
	width: 10%;
	overflow: hidden;
}
#nav #menuBtn{
	width: 10%;
	height: inherit;
}
#nav #menuBtn .menuIconImage{
	width: 100%;
	padding-bottom: 100%;
	background-repeat: no-repeat;
	background-size: 70%;
	background-position: center;
}

#nav .menuIcon span{
	font-size: 3em;
	line-height: 1em;
	vertical-align: middle;
	color: rgba(27, 60, 92, 0.8);
	text-shadow: 1px -1px 4px #fff9d6,0 0 0 rgba(0,0,0,0.75),1px -1px 4px #fff9d6;
}

#nav .menuIcon.new span{
    -webkit-animation: flashTrans 0.4s infinite; /* Safari 4+ */
}


#nav .feedsWrapper{
	position: absolute;
	top: -300px;
	z-index: 2;
	background: #FFFDF3;
	margin: 0;
	list-style: none;
	width: 100%;
	color: #573D0E;
	box-shadow: 0 2px 10px #3D2B0A;
	opacity: 0;
}
#nav .feedsWrapper .feedsBlock{
	background: transparent;
	margin: 0;
	padding: 0.3em 0.15em;
	box-sizing: border-box;
	cursor: pointer;
}
#nav .feedsFilters{
	margin-top: 4px;
}
#nav .feedsFilters .filter{
	background-color: #e4d689;
	text-align: center;
	margin: 0.5em;
	border-radius: 3px;
	box-shadow: 0 1px 2px;
	cursor: pointer;
}
#nav .feedsFilters .filter.active, #nav .feedsFilters .filter.gc_focus{
	box-shadow: inset 0 1px 2px;
}
#nav .feedsFilters .filter.me{
	border-left: 4px solid #E64C66;
}
#nav .feedsFilters .filter.friend{
	border-left: 4px solid #2D3E50;
}
#nav .feedsFilters .filter.share{
	border-left: 4px solid #1BBC9B;
}

#nav .feedsWrapper .feedLabel{
	width: 4px;
	background-color: #1BBC9B;
	border-radius: 2px;
	opacity: 0.9;
	margin-right: 0.5em;
}
#nav .feedsWrapper .friends .feedLabel{
	background-color: #2D3E50;
}

#nav .feedsWrapper .broadcast .feedLabel{
	background-color: #2D3E50;
}


#nav .feedsWrapper .broadcast .feedContent .userInput{
	font-family: maiden;
	font-size: 1.2em;
}

#nav .feedsWrapper .feedLabel.after{
	content: "";
}
#nav .loading{
	font-family: maiden;
	font-size: 2em;
	opacity: 0.8;
	text-shadow: 0px 1px 0px black;
	margin-top: 20%;
	text-align: center;
}
#menu .backdrop{
	background-color: rgba(0,0,0,0.4);
}

#menu .menuWrapper{
	background: #FFFDFA;
	list-style: none;
	border-radius: 12px;
	color: #573D0E;
	width: 90%;
	max-width: 500px;
	position: relative;
	box-sizing: border-box;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), 0 1px 6px black;
	border-bottom: 2px solid #573D0E;
}

#menu menu, #nav .feeds{
	max-width: none;
	margin: 0;
    padding: 0;
}
#menu menu{
	padding: 0.6rem;
	padding-bottom: 0;
	box-sizing: border-box;
}

#menu menu .title{
	font-size: 28px;
}
#menu menu li{
	display: inline-block;
	width: 20%;
	text-align: center;
	cursor: pointer;
	position: relative;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
}

#menu menu li a{
	display: block;
}


#menu menu li div{
	top: auto;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 1px 6px black;
	line-height: 0.8em;
	bottom: 7%;
	font-family: yanone;
	font-size: 1.4em;
	width: 90%;
	margin: auto;
	text-align: center;
}
#menu menu li img{
	width: 90%;
	height: auto;
}
#menu menu li img.gc_focus{
	-webkit-transform: scale(0.95, 0.95) translate3d(0px, 0px, 0px) ;
}

#menuBar{
	width: 100%;
	position: relative;
}
#menuBar .menuWrapperTop{
	background-repeat: repeat-x;
	padding-bottom: 1em;
	background-size: contain;
	background-position: 0 0.6em;
	top: -1.8em;
	height: 1em;
}
#menuBar .menuWrapper{
	background-size: 40px;
}
#menuBar .buttonWrap{
	position: relative;
	width: 14.666%;
	padding-bottom: 14.666%;
}

#menuBar .buttonWrap.active:before{
	content: " ";
	width: 100%;
	padding-bottom: 100%;
	position: absolute;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,251,229,1) 0%, rgba(255,251,229,0.99) 1%, rgba(255,255,255,0) 85%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,251,229,1)), color-stop(1%,rgba(255,251,229,0.99)), color-stop(85%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,251,229,1) 0%,rgba(255,251,229,0.99) 1%,rgba(255,255,255,0) 85%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(255,251,229,1) 0%,rgba(255,251,229,0.99) 1%,rgba(255,255,255,0) 85%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,251,229,1) 0%,rgba(255,251,229,0.99) 1%,rgba(255,255,255,0) 85%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(255,251,229,1) 0%,rgba(255,251,229,0.99) 1%,rgba(255,255,255,0) 85%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffbe5', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#menuBar .buttonWrap.more{
	padding-bottom: 0;
	font-size: 3em;
	line-height: 1em;
	color: #573D0E;
}
#menuBar .buttonWrap.more span{
	margin: 0;
}
#menuBar .bgImage{
	width: 95%;
	padding-bottom: 0;
	background-size: 100%;
	pointer-events: none;
	margin: auto;
}

#menuBar .buttonWrap .friendNew{
	font-size: 1.75em;
	color: #FEA81D;
	left: auto;
	top: auto;
	display: block;
	right: 10%;
	bottom: 5%;
}

#menuBar .label{
	top: auto;
	text-align: center;
	line-height: 0.6em;
	bottom: 15%;
	font-size: 1.6em;
	color: #573D0E;
	text-shadow: 0 0 4px white, -1px -1px 0px white, 1px 1px 0px white;
	opacity: 0;
}
#main{
    position: relative;
	background-color: rgb(181, 215, 73);
	height: auto;  /* DELETE */
}
#main>div{
    position: absolute ! important;
    left: 0; right: 0;
    top: 0; bottom: 0;
}
.farmView .farmNav .buttonWrap{
	text-align: center;
	font-size: 2.6em;
	line-height: 1.1em;
	display: flex;
}

.farmView .farmNav .buttonWrap span{
	color: #FFF9D6;
	text-shadow: 0px 1px 0 #3F2C09, 0px 2px 0 #3F2C09, -1px -1px 0 #3F2C09, 1px -1px 0 #3F2C09, -1px 1px 0 #3F2C09, 1px 1px 0 #3F2C09, 0 0 3px #3F2C09, 0 2px 5px rgba(0, 0, 0, 0.8);
}
.farmView .farmNav .buttonWrap span.fi-comment-quotes{
	color: #62D9FF;
}
.farmView .farmNav .button{
	width: 90%;
	padding: 0.2em 0;
	text-shadow: 0px 1px rgba(255, 255, 255, 0.5);
	font-size: 1.3em;
	margin: 10% 0;
}
.farmView .farmContainer{
	margin: auto;
	display: table;
	max-width: 600px;
	width: 95%;
	line-height: 0;
}
.farmView .farmContainer .firstRow {
    line-height: normal;
}

.farmContainer .sector{
	display: inline-block;
	width: 25%;
	padding-bottom: 25%;
	background-size: 95%;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.farmContainer .freeholds{
	display: block;
	width: 20%;
	padding-bottom: 20%;
}

.farmContainer .freeholds.farmOwner{
	display: -webkit-box;
	padding-bottom: 0;
}

.farmContainer .freeholds.farmOwner .profilePic{
	width: 60%;
	height: 0;
	padding-bottom: 60%;
	margin: auto;
	top: 10%;
	border: 2px solid rgba(87, 61, 14, 1);
	box-shadow: 0 0px 1px rgba(87, 61, 14, 0.8), inset 0 1px 5px rgba(87, 61, 14, 0.8), 0px 1px 1px rgba(255, 255, 255, 0.8);
}

.farmContainer .freeholds.farmOwner .status{
	background-position: 78% 87%;
	background-size: 40%;
}

.farmContainer .freeholds .full{
	top: auto;
	bottom: 2%;
	text-align: center;
	font-size: 1.8em;
	left: auto;
	right: 16%;
	pointer-events: none;
	color: white;
}


.farmContainer .freeholds .badge{
	font-size: 0.85em;
	text-align: center;
	margin: 0 auto;
	top: 75%;
	left: auto;
	right: -1%;
	color: rgba(87, 61, 14, 1);
}

.farmContainer .freeholds .badge.online{
	text-align: center;
	margin: 0 auto;
	top: 75%;
	left: -1%;
	right: auto;
	color: rgba(87, 61, 14, 1);
}
.farmNoteSplash{
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	max-width: 85%
}

.farmNoteSplash .farmNote{
	position: relative;
	width: 90%;
	margin: auto;
	font-family: 'maiden';
	font-size: 1.6em;
	border: 4px solid #DCC27C;
	border-radius: 10px;
	background-color: #FFF7F2;
	padding: 0.5em;
	color: #573D0E;
	box-shadow: 0 1px 2px rgba(87, 61, 14, 0.8);
}

.farmNoteSplash .farmNoteTail{
	height: 25px;
	width: 25px;
	background-size: 100%;
	background-repeat: no-repeat;
	top: -21px;
	left: 16px;
	-webkit-transform: rotate(180deg);
	z-index: 2;
}

.farmNoteSplash .profilePicBox{
	width: 3rem;
}

.farmNoteSplash .from{
	font-family: yanone;
	font-size: 1.2rem;
	color: rgba(87, 61, 14, 0.9);
}

.farmNoteSplash .msg{
	margin-left: 0.25em;
	max-width: 300px;
}

.farmNoteSplash .from{
	font-family: yanone;
	font-size: 1.2rem;
	color: rgba(87, 61, 14, 0.9);
}

.farmContainer .fenceWrapper{
	position: relative;
	height: 1.5em;
}

.farmContainer .fence{
	background-size: 9px 12px;
	background-repeat: repeat-x;
	height: 12px;
	padding-top: 0.5em;
	background-position: bottom;
	z-index: 4;
	background-size: auto 100%;
}
.farmContainer .oxPlow{
}

.farmContainer .oxPlow .bgImage{
	width: 4em;
	padding-bottom: 4em;
	 animation: backforward 100s infinite;
    -webkit-animation: backforward 100s infinite;
    -moz-animation: backforward 100s infinite;
    right: auto;
    left :0;
    top: -2em
}

@keyframes backforward {
    0% { transform: translate3d(0px,0px,0px); }
    48% { transform: translate3d(600%,0px,0px); }
    50% { transform: translate3d(600%,0px,0px) rotateY(180deg); }
    98% { transform: translate3d(0px,0px,0px) rotateY(180deg); }
    100% { transform: translate3d(0px,0px,0px); }
}
@-webkit-keyframes backforward {
    0% { -webkit-transform: translate3d(0px,0px,0px); }
    48% { -webkit-transform: translate3d(600%,0px,0px); }
    50% { -webkit-transform: translate3d(600%,0px,0px) rotateY(180deg); }
    98% { -webkit-transform: translate3d(0px,0px,0px) rotateY(180deg); }
    100% { -webkit-transform: translate3d(0px,0px,0px); }
}
@-moz-keyframes backforward {
    0% { -moz-transform: translate3d(0px,0px,0px); }
    48% { -moz-transform: translate3d(600%,0px,0px); }
    50% { -moz-transform: translate3d(600%,0px,0px) rotateY(180deg); }
    98% { -moz-transform: translate3d(0px,0px,0px) rotateY(180deg); }
    100% { -moz-transform: translate3d(0px,0px,0px); }
}

.farmContainer .oxPlow .oxPlowTimer{
	left: 0.5em;
	font-size: 0.8em;
	top: auto;
	bottom: 0.2em;
	line-height: 1em;
	color: white;
	font-family: oxygenBold;
	text-shadow: 0 0 3px black;
	z-index: 0;     /* DELETE */
}
.farmContainer .sector .wand{
	width: 22%;
	height: 22%;
	background-color: white;
	border-radius: 100%;
	border: 3px solid #3D4D4B;
	box-shadow: 0 0 2px #3D4D4B;
	background-size: 80%;
	top: auto;
	left: auto;
	bottom: 8%;
	right: 5%;
	display: none;
}

.locked{
	pointer-events: none;
	opacity: 0.7;
}

#itemInfo .itemInfoImg{
    display: inline-block;
    width: 40%;
    padding-bottom: 40%;
    background-size: 95%;
    background-position: center;
    background-repeat: no-repeat;
}

#itemInfo .flexBoxH{
	width: 90%;
	margin: auto;
}
#itemInfo .infoBlock{
	display: inline-block;
	width: 33%;
	float: left;
	font-size: 10px;
	line-height: 1.4em;
}
#itemInfo .itemBlock .money{
	font-size: 1.2em;
	font-weight: 700;
	display: block;
}

#itemInfo .itemBlock{
	width: 55%;
}
#itemInfo .itemBlock .itemImage{
	width: 80%;
	padding-bottom: 80%;
	margin: auto;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}

#itemInfo .descriptionBox{
	width: 55%;
	background: rgba(87, 61, 14,0.08);
	box-shadow: inset 0 1px 2px rgba(87, 61, 14,0.4);
	border-radius: 0.5em;
	box-sizing: border-box;
	margin: 1.5em 0;
	text-align: left;
	line-height: 1.2em;
	height: 10em;
}

#itemInfo .description{
	padding: 0.5em 0.8em;
	word-break: break-word;
	width: 100%;
	box-sizing: border-box;
}

#itemInfo .itemInfoTab, .lootTab{
	width: 100%;
	background-color: #FFF9DA;
	border-radius: 8px;
	box-shadow: 0 1px 5px;
	margin: 10px 0;
	min-height: 146px;
}

#itemInfo #Description{
	font-family: oxygen;
	font-size: 1em;
	padding-left: 1em;
	padding-right: 1em;
	width: inherit;
	line-height: 1.2em;
}

#emotes .emotesTab,
.tabs{
	margin: 0;
	cursor: pointer;

}
.tabs dd{
	padding: 10px 0;
	margin: 0;
	font-size: 1.1em;
	background-color: #FFF7CB;
	box-shadow: inset 0px -2px 4px #E5DEB4;
	text-align: center;
	font-family: 'yanone', sans-serif;
}
.tabs dd:first-child{
	border-top-left-radius: 8px;
}
.tabs dd:last-child{
	border-top-right-radius: 8px;
}
.tabs  dd.active{
	font-weight: 700;
	background-color: #FFF9DA;
	box-shadow: inset 0 -1px 4px #FFF9DA;
}
#itemInfo .itemInfoTab .content,
#emotes .emotesTab .content {
	width: 100%;
	height: 100%;
}

#store .redeem{
	top: auto;
	bottom: 1.5em;
	left: auto;
	right: 1em;
}

#itemInfo .itemInfoTab .content#Quests div{
	text-align: left;
	padding: 0 1em;
	box-sizing: border-box;
	font-size: 0.9em;
}
.soldOut, .seasonal{
	position: absolute;
	bottom: 46%;
	padding: 0px;
	color: #fff;
	background: rgba(232,44,12,0.5);
	margin: auto;
	width: 70%;
	border-radius: 4px;
	text-shadow: 0 0 4px #632721;
	transform: rotate(-0.016turn);
	-webkit-transform: rotate(-0.02turn);
	box-shadow: 0 1px 4px #630D15;
	-webkit-box-shadow: 0 1px 4px #630D15;
	top: auto;
	min-height: 1em;
	white-space: nowrap;
	font-size: 1.4em;
	font-family: 'yanone', 'oxygenBold', sans-serif;
	line-height: 1em;
	vertical-align: middle;
	padding: 0.2em 0;
	max-width: 6em;
}

.seasonal{
	background: rgba(12, 217, 232, 0.6);
	text-shadow: 0 0 4px #215363;
	-webkit-box-shadow: 0 1px 4px #215363;
	font-size: 1.3em;
	bottom: auto;
	-webkit-transform: rotate(0deg);
	left: 0;
	top: 22%;
	width: 60%;
}

.farmContainer .sector{
	-webkit-transition: -webkit-transform 0.1s ease-in-out;
	transition: -webkit-transform 0.1s ease-in-out;
	-webkit-transform: translate3d(0px,0px,0px);
	cursor: pointer;
}
.farmView .sector .flexCenter{
	background-color: rgba(0,0,0,0.2);
	background-position: center;
	background-size: 90%;
	background-repeat: no-repeat;
	border-radius: 10px;
	margin: 2px;
	z-index: 4;
}
.farmView .sector .lockedFWB{
	background-image: url('../img/iconfwb.png');
	opacity: 0.7;
}
.farmView .sector .lockedBB{
	background-image: url('../img/icon_barnbucks.png');
	background-size: 50%;
}

.farmContainer .sector.gc_focus{
	-webkit-transform: scale(0.90, 0.90) translate3d(0px, 0px, 0px) ;
	-webkit-transition-duration: 0.1s;
}

.farmContainer .sector.noScale{
	-webkit-transform: scale(1, 1) translate3d(0px, 0px, 0px) ;
}

.farmContainer .sector.ScaleDown{
	-webkit-transform: scale(0.96, 0.96) translate3d(0px, 0px, 0px) ;
}

.farmContainer .sector.ScaleUp{
	-webkit-transform: scale(1.2, 1.2) translate3d(0px, 0px, 0px) ;
}



.farmView .sector .status, .sector .status{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 32%;
	background-position: 97% 4%;
	pointer-events: none;
}

.farmView .sector .timer, .counter{
	color: white;
	font-size: 1.3em;
	text-shadow: 0 0 5px black;
	bottom: auto;
	font-family: yanone;
	left: auto;
	right: 6px;
	top: 8px;
	text-shadow:
		0px 1px 0 #000,
		0px 2px 0 #000,
	   -1px -1px 0 #000,  
	    1px -1px 0 #000,
	    -1px 1px 0 #000,
	     1px 1px 0 #000,
	     0 0 3px #000;
}

.farmView .sector .friend,.sector .friend{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 33%;
	background-position: 4% 97%;
	pointer-events: none;
}


.sector .plantedBy{
	width: 29%;
	height: 0;
	top: auto;
	bottom: 31%;
	left: 2%;
}

.sector .plantedBy .profilePic{
	border-width: 1px;
	cursor: pointer;
}

.farmView .sector .viewButton{
	display: none;
	color: #573D0E;
	position: absolute;
	bottom: 10%;
	width: 100%;
	text-align: center;
}

#viewPlot .sectorPrev, #viewPlot .sectorNext{
	position: absolute;
	background-repeat: no-repeat;
	background-size: 90%;
	background-position: center;
	height: 30px;
	width: 20px;
	top: 30%;
	cursor: pointer;
}
#viewPlot .sectorPrev{
	left: 0.5em;
}
#viewPlot .sectorNext{
	right: 0.5em;
}
#viewPlot .sector, #barnItemDetail .item{
	margin: auto;
	display: block;
	float: none;
	width: 40%;
	padding-bottom: 40%;
	background-size: 100%;
	background-repeat: no-repeat;
	position: relative;
}

#viewPlot .sector .status{
	background-size: 33%;
	background-position: 99% 1%;
}

#viewPlot .viewPlotContainer{
	background-color: #B5D749;
	border: 2px solid #573D0E;
	border-radius: 8px;
	padding: 1em;
	box-shadow: 0 1px 8px #573D0E;
	opacity: 0;
	color: #573D0E;
	text-align: center;
}

#viewPlot .plotActions{
	display: table;
	margin: 0.5em auto;
	width: 100%;
	text-align: center;
}
#viewPlot .plotActions .buttonWrap{
	width: 7rem;
	display: inline-block;
	position: relative;
	text-align: center;
	font-size: 1.3em;
}
#viewPlot .plotActions .buttonWrap .imageBtn{
	margin: 2% 4%;
	padding-bottom: 84%;
	background-size: 85%, 60%;
	background-position: 50% 10%, center;
	background-repeat: no-repeat, repeat;
}

#viewPlot .plotActions .buttonWrap .imageBtn .overlay{
	bottom: 12%;
}

#viewPlot .subHeading{
	font-family: yanone;
	font-size: 1.2em;
	line-height: 1.2em;
	width: 90%;
	margin: auto;
}

#viewPlot .itemName{
    cursor: pointer;	
}

#viewPlot .itemName.noProgress{
	font-size: 1.4em;
	padding: 8px 0;
}

#viewPlot .sector{
	width: 48%;
	padding-bottom: 64%
}

#viewPlot .sector .friend{
	background-size: 24%;
	background-position: 0% 70%;
}

#viewPlot .sector .plantedBy{
	width: 20%;
	height: 0;
	top: auto;
	bottom: 25%;
	left: -5%;
}
#viewPlot .extraPlotDetail.notEmpty{
	background-color: rgba(0,0,0,0.05);
	width: 80%;
	margin: 10px auto;
	margin-top: 5px;
	border-radius: 0.5em;
	padding: 10px;
	color: #573D0E;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
	position: relative;
	overflow: auto;
}

#viewPlot .plotDetails {
	color: #573D0E;
	top: auto;
	left: -4%;
	width: 108%;
	right: auto;
	margin: auto;
	z-index: 2;
}

#viewPlot .plotDetails.friendPlot{
	width: 105%;
	right: -18%;
	margin: 0;
	left: auto;
}
#viewPlot .plotDetails.friendPlot .postBoard{
	padding-bottom: 14%;
}

#viewPlot .plotDetails .postBoard{
	padding: 4% 0%;
	padding-bottom: 10%;
	background-position: top;
	pointer-events: inherit;
	background-size: contain;
}

#viewPlot .plotDetails .wanded{
	width: 2em;
	height: 2em;
	top: -2.5em;
	background-color: white;
	border-radius: 30px;
	background-size: 80%;
	border: 2px solid #3D4D4B;
	box-shadow: 0 0 1px #3D4D4B;
	padding-bottom: 0;
}

#viewPlot .plantedByBox{
	width: 26%;
	height: 32%;
	top: auto;
	left: -16%;
	padding-top: 4%;
	padding-bottom: 0;
	-webkit-transform: rotate(-8deg);
	bottom: 0%;
	font-size: 1rem;
	white-space: nowrap;
	line-height: 1em;
	font-family: 'yanone', 'oxygenBold', sans-serif;
}

#viewPlot .plantedByBox .plantedBy{
	width: 70%;
	left: 0;
	margin: auto;
}

#viewPlot .plotDetails .progress, #viewPlot .plotDetails .emptyProgress{
	width: 70%;
	font-size: 0.7rem;
	height: 1rem;
	margin: auto;
	box-shadow: none
}

#viewPlot .plotDetails .progress{
	background-color: #D0C273;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

#viewPlot .plotDetails .progress .bar{
	background-color: rgba(0, 0, 0, 0.1);
}
#viewPlot .cycles{
	top: 2%;
	left: 0;
	width: 3.5rem;
	height: 3.5rem;
	bottom: auto;
	background-size: 100%;
	background-repeat: no-repeat;
	font-size: 3rem;
	right: auto;
	line-height: 1em;
}
#viewPlot .progress .progressOverlay{
	line-height: 1.8em;
}
#viewPlot .progress .progressOverlay img{
	height: 1.2em;
	width: auto;
}

#viewPlot .plotImage{
	width: 40%;
	height: auto;
	max-width: 150px;
	margin: auto;
}

#viewPlot .close{
	position: absolute;
	height: 40px;
	width: 40px;
	background-size: 100%;
	top: 0;
	right: 0;
	cursor: pointer;
}

#viewPlot .contestInfo .progress{
	height: 2em;
	margin-bottom: 0.25em;
}	


#viewPlot .contestInfo .progressOverlay{
	font-family: 'maiden';
	line-height: 1.5em;
	font-size: 1.5em;
}

#viewPlot .contestMsg{
	text-align: right;
}

#viewPlot .contestDetail .progress{
	margin-bottom: 0;
	width: 90%;
	margin: auto;
}

.progress.safe .bar{
    background-color: #20B7FE;
}
.progress.lowRisk .bar{
    background-color: #E1B800;
}
.progress.medRisk .bar{
    background-color: #EF7A00;
}
.progress.highRisk .bar{
    background-color: #EF2760;
}

#viewPlot .helpers .title{
	font-size:1.4em;
	color: rgba(0, 0, 0, 0.5);
}
#viewPlot .helperBox{
	display: inline-block;
	width: 11.5%;
	cursor: pointer;
	position: relative;
	margin: 0.2% 0.4%;
}

#viewPlot .helperBox .overlay.wand, #viewPlot .helperBox .overlay.fertilize{
	width: 32%;
	height: 32%;
	top: auto;
	right: auto;
	background-size: 80%;
	z-index: 2;
	bottom: -10%;
	background-repeat: no-repeat;
	background-color: white;
	border-radius: 20px;
	background-position: center;
	left: -5%;
	border: 2px solid #3D4D4B;
}

#viewPlot .helperBox .overlay.fertilize{
	left: 36%;
}

#viewPlot .helperBox .overlay.helpCount{
	top: auto;
	left: auto;
	color: white;
	right: 5%;
	font-size: 15px;
	z-index: 2;
}

#viewPlot .helperBox .overlay.helperBackground{
	z-index: 1;
	display: none;
	background: -moz-linear-gradient(top,  rgba(87,61,14,0) 0%, rgba(87,61,14,0.4) 16%, rgba(87,61,14,0.8) 40%, rgba(87,61,14,1) 61%, rgba(53, 34, 1, 1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(87,61,14,0)), color-stop(16%,rgba(87,61,14,0.4)), color-stop(40%,rgba(87,61,14,0.8)), color-stop(61%,rgba(87,61,14,1)), color-stop(100%,rgba(53, 34, 1, 1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(87,61,14,0) 0%,rgba(87,61,14,0.4) 16%,rgba(87,61,14,0.8) 40%,rgba(87,61,14,1) 61%,rgba(53, 34, 1, 1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(87,61,14,0) 0%,rgba(87,61,14,0.4) 16%,rgba(87,61,14,0.8) 40%,rgba(87,61,14,1) 61%,rgba(53, 34, 1, 1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(87,61,14,0) 0%,rgba(87,61,14,0.4) 16%,rgba(87,61,14,0.8) 40%,rgba(87,61,14,1) 61%,rgba(53, 34, 1, 1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(87,61,14,0) 0%,rgba(87,61,14,0.4) 16%,rgba(87,61,14,0.8) 40%,rgba(87,61,14,1) 61%,rgba(53, 34, 1, 1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00573d0e', endColorstr='#573d0e',GradientType=0 ); /* IE6-9 */
	top: auto;
	bottom: -12%;
	height: 35%;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}


#viewPlot .breedersWrapper{
	width: 120%;
	left: -10%;
	height: 8em;
	top: auto;
	bottom: 12%;
}

#viewPlot .breedersWrapper .breeder{
	width: 45%;
	padding-bottom: 0;
	background-size:contain;
}
#viewPlot .breedersWrapper .breeder.first{
	right: auto;
	/*-webkit-transform: rotate(-8deg);*/
}
#viewPlot .breedersWrapper .breeder.second{
	left: auto;
	/*-webkit-transform: rotate(8deg);*/
}

#viewPlot .breedersWrapper .breeder .breedItem{
	background-size: 100%;
	top: 0%;
	width: 75%;
	z-index: 1;
	padding-bottom: 0;
}

#viewPlot .breedersWrapper .breeder.first .breedItem{
	/*-webkit-transform: scaleX(-1);*/
	/*left: -5%;*/
}

#viewPlot .breedersWrapper .breeder.second .breedItem{
	left: auto;
	/*right: -5%;*/
}

#viewPlot .breedersWrapper .breedOwner{
	width: 30%;
	top: auto;
	bottom: 30%;
	box-shadow: 0 1px 5px black;
}

#viewPlot .breedersWrapper .breeder.first .breedOwner{
	left: auto;
	/*-webkit-transform: rotate(15deg);*/
	right: 5%;
}

#viewPlot .breedersWrapper .breeder.second .breedOwner{
	/*-webkit-transform: rotate(-15deg);*/
	left: 5%;
}

#viewPlot .brewing{
	background-color: #E4D689;
	top: auto;
	bottom: 30%;
	right: auto;
	padding: 0.2em 0.5em;
	border: 2px solid;
	border-radius: 0.5em;
	left: 5%;
	font-family: 'oxygenBold';
	line-height: 1.1em;
	font-size: 1em;
}
#viewPlot .brewing .label{
	font-family: 'yanone';
	opacity: 0.7;
}
#viewPlot .timeMachine{
	top: auto;
	bottom: 58%;
	right: auto;
	left: 5%;
	width: 50%;
}
#viewPlot .timeMachine .bgImage{
	width: 100%;
	padding-bottom: 100%;
}
#viewPlot .friendlyFarmerBox{
	position: relative;
}

#viewPlot .friendlyFarmerBox .scrollBox{
	display: table;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.1);
	border-radius: 0.5rem;
	padding-top: 1rem;
	box-shadow: inset 0 1px 1px;
	margin-top: 1rem;
	min-height: 52px;
}

#viewPlot .friendlyFarmerBox .title{
	padding: 0;
	height: 2rem;
	background-size: contain;
	top: -1rem;
	margin: 0 auto;
	width: auto;
}

#viewPlot .friendlyFarmerBox .empty{
	padding-bottom: 0.5em
}
#viewPlot .sanctuaryDeployers{
	display: inline-block;
	width: 50%;
}

#viewPlot .sanctuaryDeployers .helperBox{
	width: 16.66%;
}

#viewPlot .treaters{
	top: auto;
	bottom: 28%;
	font-size: 1.25em;
}


#viewPlot .farmhand{
	
}
#viewPlot .farmhand .jobs{
	margin: 0.5em auto;
	margin-bottom: 0;
}
#viewPlot .farmhand .detail{
	font-size: 1em;
	padding: 0.25em;
	display: inline-block;
	width: 50%;
	vertical-align: top;
	float: left;
	box-sizing: border-box;
}
#viewPlot .farmhand .delay{
	font-size: 0.8rem;
	line-height: 0.8rem;
}
#viewPlot .farmhand .stateBox{
	font-family: 'maiden';
	background-color: rgba(0, 0, 0, 0.1);
	padding: 0.25em 1em;
	border-radius: 0.5em;
	font-size: 1.25em;
	display: inline-block;
}

#viewPlot .farmhand .stateBox .expire{
	font-size: 1rem;
	line-height: 1rem;
}
.itemInfoClose{
    position: absolute;
    height: 40px;
    width: 40px;
    background-size: 100%;
    top: 0;
    right: 0;
    cursor: pointer;
}

.farmView .farmLoader{
	position: absolute;
	background-color: rgba(181,215,73,0.9);
	top: -10px;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	border-radius: 8px;
}

.farmView .farmLoader .progress{
	top: 40%;
	width: 80%;
	margin: auto;
	max-width: 380px;
}

#farmSummary .helperBox{
	display: inherit;
	position: relative;
}
	
#farmSummary .backdrop{
	background-color: rgba(0,0,0,0.7);
}
#farmSummary .modalContainer{
	background-size: 25%;
	top: -1%;
	padding-top: 3rem;
}

#farmSummary .farmSignBox{
	width: 90%;
	position: absolute;
	top: -4rem;
	margin: auto;
	left: 0;
	right: 0;
	max-width: 24rem;
}

#farmSummary .farmSign{
	padding: 1rem 1.25rem;
	background-size: 100%;
	background-repeat: no-repeat;
	padding-bottom: 3rem;
	position: relative;
	left: 0;
	right: 0;
}

#farmSummary .farmBadge{
	left: auto;
	font-size: 1.2em;
	right: 4%;
	top: 41%;
	z-index: 1;
	bottom: auto;
}

#farmSummary .viewRank{
	width: 90%;
	margin: auto;
	text-align: left;
}

#farmSummary .viewRank span{
	padding-left: 0.5em;
}
#farmSummary .viewRank span:first-child{
	padding: 0;
}
#farmSummary .title{
	text-align: left;
	font-size: 1.6em;
	position: relative;
	text-shadow: 0px 1px rgba(255, 255, 255, 0.5);
	line-height: 1em;
	width: 100%;
	margin: 0.25em auto;
	margin-left: 0.1em;
	margin-top: 0em;
}
#farmSummary .title .fwbBadge{
	height: 1rem;
}
#farmSummary .farmSignBox .profilePicBox{
	width: 3.5em;
	margin-right: 0.5em;
}
#farmSummary .farmSignBox .profilePic{
	border: 2px solid rgba(87, 61, 14, 1);
}
#farmSummary .farmNoteBox{
	position: relative;
	width: 90%;
	margin: auto;
	margin-top: 0rem;
	font-family: 'maiden';
	font-size: 1.2em;
	border: 4px solid #DCC27C;
	border-radius: 10px;
	background-color: #FFF7F2;
	padding: 0.25em;
	color: #573D0E;
	box-shadow: 0 1px 2px rgba(87, 61, 14, 0.8);
	min-height: 1em;
}
#farmSummary .farmNoteTail{
	height: 30px;
	width: 30px;
	background-size: 100%;
	background-repeat: no-repeat;
	top: -27px;
	left: 0.25em;
	-webkit-transform: rotate(180deg);
}
#farmSummary .farmNoteBox .userInput{
	text-align: center;
}
#farmSummary .farmNoteTail .farmNote{
	min-height: 1em
}

#farmSummary #farmNoteEdit{
	padding: 0 0.5em;
	cursor: pointer;
	left: auto;
	font-size: 1.2em;
	right: -4px;
	top: auto;
}

#farmSummary #quests{
	padding: 1em;
	box-sizing: border-box;
}

#farmSummary #quests .progress{
	height: 3rem;
	margin-bottom: 0.5em;
	background-color: #FFF7F2;
	box-shadow: 0 1px 2px #5E4615;
	margin-left: 2%;
	pointer-events: none;
}

#farmSummary #quests .easy .progress{
	border: 4px solid #699F44;
}

#farmSummary #quests .medium .progress{
	border: 4px solid #C2B814
}

#farmSummary #quests .hard .progress{
	border: 4px solid #B95349;
}

#farmSummary #quests .progress .bar{
	pointer-events: none;
	border-radius: 0px;
	height: 3rem;
}

#farmSummary #quests .easy .progress .bar{
	background-color: #77B34E;
}

#farmSummary #quests .medium .progress .bar {
	background-color: #E1D61D;
}

#farmSummary #quests .hard .progress .bar{
	background-color: #D57167;
}

#farmSummary #quests .progress .progressOverlay{
	height: 3rem;
	text-align: left;
	width: 96%;
	margin: auto 2%;
	pointer-events: none;
	font-family: 'yanone';
	font-size: 1.4em;
	line-height: 3rem;
}

#farmSummary .questWrapper{
	cursor: pointer;
}

#farmSummary .questWrapper .quest, #farmSummary .questWrapper .reward{
	background-size: contain;
	width: 12%;
	pointer-events: none;
	padding-bottom: 0;
}
#farmSummary .questTitle{
	font-size: 24px;
	text-align: center;
}

#farmSummary .tabContainer{
	width: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	box-shadow: 0 1px 4px;
	box-shadow: inset 0 1px 4px, 0 1px 2px white;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

#farmSummary .tabContainer dd{
	background-color: rgba(0, 0, 0, 0.15);
	box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 0.2);
	font-family: yanone;
	font-size: 1.25em;
	padding: 0.5rem;
}
#farmSummary .tabContainer dd.active{
	background-color: rgba(0, 0, 0, 0);
	box-shadow: none;
}
#farmSummary #comments{
	padding: 0 0.5em;
	box-sizing: border-box;
}
#farmSummary #comments .button{
	margin: 0;
	padding: 0.25em 0.5em;
	font-size: 1.5em;
}

#farmSummary #comments input{
	width: 90%;
	font-size: 1em;
	background-color: rgba(255, 247, 242, 0.5);
	padding: 0.25em 0.5em;
	box-sizing: border-box;
	height: 2.25em;
	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px white;
	border: 0;
}
#farmSummary #comments input::-webkit-input-placeholder{
	color: rgba(87, 61, 14, 0.6);
}


#questDetails .modalContainer{
	width: 90%;
	max-width: 500px;
	background: #F1E9BE;
}
#questDetails .reward{
	position: relative;
}

#questDetails .reward .rewardLabel{
	top: auto;
	font-size: 1.6em;
}
#questDetails .reward .bgImage{
	padding-bottom: 80%;
	width: 80%;
	margin: auto;
}
#questDetails .reward .button{
	font-family: 'yanone';
	font-size: 1.4em;
}
#questDetails .detail{
	border-radius: 0.5em;
	box-shadow: inset 0 1px 1px;
	padding: 1em;
	background-color: rgba(87, 61, 14, 0.1);
	margin: 1em;
	text-align: center;
}
#questDetails .details{
	text-align: left;
}
#questDetails .label{
	width: 30%;
	font-family: 'oxygenBold';
	text-align: right;
	font-size: 1em;
	padding-right: 0.5em;
}

#questDetails .progress{
	margin: 0.5em;
	width: 90%;
}

#questDetails .qDetail{
	text-align: left;
}
#questDetails .qDetail div{
	display: inline-block;
}
#questDetails .qDetail span{
	font-size: 1.1em;
}

#editNote .modalContainer{
	width:90%;
	top: -6em;
}
#editNote .flexBoxH, .postContainer.flexBoxH{
	-webkit-box-pack: center;
	margin-bottom:  0.5rem
}

#editNote .flexBoxH .button{
    display: inline-block;
}

#editNote .textareaBox, .postContainer .textareaBox{
	width: 60%;
	margin-right: 2%;
	position: relative;
}
#editNote textarea, .postContainer textarea{
	height: 6em;
	line-height: 1.2em;
	padding: 0.5em 1em;
	vertical-align: middle;
	width: 100%;
	display: block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-size: 1.2em;
}

#editNote .textareaBox .clear, .postContainer .textareaBox .clear{
	top: auto;
	left: auto;
	padding: 0 0.5em;
}

#comments > .flexBoxH{
	margin: 0.5em 0; 
}
#comments .comments{
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 0.5em;
	box-shadow: inset 0 1px 2px;
}
#comments .commentContentBox{
	word-break: break-word;
	width: 98%;
	position: relative;
	font-size: 0.9em;
	line-height: 1em;
}

#comments .commentContentBox .commentTail{
	background-repeat: no-repeat;
	height: 2em;
	width: 2em;
	z-index: 3;
	background-size: 100%;
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	top: 8px;
	left: 5px;
}

#comments .profilePicBox{
	width: 10%;
	margin-right: 0.5em;
}

#comments .commentBox{
	padding: 0.5em 0;
	width: 96%;
	margin: auto;
	position: relative;
	border-bottom: 1px dashed rgba(0,0,0,0.2);
}
#comments .commentBox .commentClose{
    left: auto;
    bottom: auto;
    top: 0.25em;
	right: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0 0.5em;
	font-size: 1.25em;
	padding-bottom: 0.5em;
}
#comments .self .commentBox .commentClose{
	opacity: 1;
	pointer-events: auto;
}

#comments .commentBox .commentContent{
	border-radius: 0.5em;
	color: #573D0E;
	text-align: left;
	font-size: 1.2em;
	line-height: 1em;
}
#comments .displayBox{
	position: relative;
	margin-right: 2em;
	text-align: left;
}

#comments .displayBox *{
	font-size:0.8em;
}
#comments .displayBox .profilePic{
	vertical-align: bottom;
	width: 40px;
	height: 40px;
}
#comments .displayBox .commentClose{
	left: auto;
	top: auto;
	right: 0.5em;
}
#comments .displayBox .commentClose span{
	font-size: 1.3em;
}

#comments .displayBox .fwbBadge{
	width: auto;
}
#comments .displayBox .display{
	font-family: yanone;
	font-size: 1.1em;
}

#comments .displayBox .commentClose{
	display: inline-block;
}


#comments .button{
	font-family: yanone;
	font-size: 24px;
} 
#comments .postComment{
	height: 50px;
	text-align: center;
	display: inline-flex;
	padding-top: 2px;
}

#allFeeds{
	max-width: 500px;
	margin: auto;
	width: 95%;
}


#allFeeds .feedsList{
	background-color: #E4D689;
	border: 2px solid #573D0E;
	border-radius: 8px;
	margin: 10px auto;
}

.profileRow{
    position: relative;
    background-color: #FFFCEC;
    border-radius: 0.5rem;
    margin: 0.4rem 1%;
    box-shadow: 0 1px 5px #573D0E;
    width: 98%;
}

#share .dropDownArrow{
    width: 1em;
    height: 1em;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display:inherit;
}
.row > .flexBoxH{
	padding: 0.5em;
}

.row .friendLabels{
	font-family: 'londrina','yanone';
	left: auto;
	top: auto;
	right: 2%;
	bottom: 2%;
	font-size: 1.3em;
	color: rgba(0, 0, 0, 0.35);
}
.row .friendLabels > div{
	margin-left: 0.5em;
	display: none;
}

.row.mentor .mentorLabel, .row.mentee .menteeLabel, .row.fav .favLabel{
	display: inline-block;
	font-size:0.8em;
}

#allFeeds .row:nth-child(odd){
	/*background-color: rgba(255,255,255,0.2);*/
}
.row .display{
	font-family: yanone;
	color: #573D0E;
	vertical-align: top;
	font-size: 1.4em;
	line-height: 1.2em;
	overflow-x: hidden;
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#leaderboardView .profilePicBox{
    width: 15%;
	padding-right: 0;
	margin: 0 2%;
	position: relative;
}
#leaderboardView .levelTube{
	display: inline-block;
	font-size:0.75em;
}

.grads .levelTube{
	display: inline-block;
	position: absolute;
	right: 0%;
	bottom: 17%;
}

#leaderboardView .leaderRank{
    font-size: 2.2em;
    font-family: 'maiden', 'oxygenBold', sans-serif;
    color: #573D0E;
    width: 16%;
	text-align: center;
	padding-right: 2%;
}

/*#plantItem .item,#store .item{
	display: inline-block;
	width: 20%;
	max-width: 100px;
	vertical-align: top;
	text-align: center;
	position: relative;
}
*/
.itemSelection .description{
	font-size: 0.8em;
	margin-top: 1em;
}
.itemSelection .description .msg{
	margin-left: 0.5em
}

.itemSelection .hint{
	width: 80%;
	margin: 1em auto;
	background-color: rgba(0,0,0,0.1);
	padding: 0.5em;
	box-sizing: border-box;
	border-radius: 0.25em;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.4);
	min-height: 4em;
}
.itemSelection .hint span{
	font-size: 3em;
	margin-right: 0.25em;
}
.itemSelection .item{
	display: inline-block;
	width: 25%;
	vertical-align: top;
	text-align: center;
	position: relative;
	padding: 0.5em 0.25em;
	box-sizing: border-box;
	position: relative;
}

.itemSelection .prize{
    display: inline-block;
    width: 18.5%;
    vertical-align: top;
    /*float: left;*/
    text-align: center;
    position: relative;
    padding: 0.5em;
    box-sizing: border-box;
    position: relative;
}

.itemSelection .prize span{
	font-size: 0.8em;
}

.itemSelection .item .storeButton{
	width: 100%;
	box-sizing: border-box;
	padding: 0.4em 0.25em;
	margin: 0;
	margin-bottom: 0;
	background:white;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px) ;
	box-shadow: 0 3px rgb(179, 179, 179), 0 0px 2px 1px rgba(75, 75, 75, 0.6), 0 4px 1px rgba(136, 136, 136, 0.6);
	border: none;
}

.itemSelection .item .storeButton.gc_focus{
	box-shadow: 0 2px rgb(217, 233, 247), inset 0px 2px 1px rgba(16, 51, 78, 0.6), 0 1px 4px rgba(16, 51, 78, 0.6);
}
.itemSelection .item .storeButton.free{
    padding-bottom: 0px;	
}

.itemSelection .item .storeButton.notAvailable{
	opacity: 0.9;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
	background-color: rgba(0, 0, 0, 0.15);
}

.itemSelection .item .storeButton.premium{
	background-color: #FFF7E6;
	box-shadow: 0 3px #F0D79C, 0 0px 2px 1px #D66800, 0 4px 1px #D66800;
}
.itemSelection .item .storeButton .overlayInfo{
	z-index: 9;
	top: auto;
	bottom: 1.25em;
	color: #FFC000;
	font-size: 1.25em;
}

.itemSelection .item .storeButton .overlayIcon{
	width: 1em;
	left: auto;
	bottom: 1.35em;
	top: auto;
	right: 0.25em;
	height: auto;
	padding-bottom: 1em;
	border: 2px solid #303C3B;
	border-radius: 2em;
	background-color: white;
	background-size: 95%;
}

.itemSelection .item .storeButton .overlayInfo.Barn{
	color: #E90000;
}
.itemSelection .item .storeButton .overlayInfo.Store{
	color: #00B6EE;

}
.itemSelection .item .storeButton .fwb{
	top: 4%;
	left: auto;
	width: 40%;
	height: 19%;
	bottom: auto;
	right: 2%;
	padding-bottom: 0;
}
.itemSelection .item .storeButton .sale{
	top: 4%;
	width: 30%;
	height: 20%;
	bottom: auto;
	right: auto;
	pointer-events: none;
	padding-bottom: 0;
}

.itemSelection .item .storeButton.specialButton .fwb{
	width: 20%;
	background-size: contain;
}



.itemSelection .item  .infoBtn{
	left: auto;
	right: 3%;
	top: 0%;
	font-size: 2.2em;
	z-index: 10;
	bottom: auto;
	color: rgb(217, 233, 247);
	text-shadow: 0 0 2px rgba(16, 51, 78, 0.9),0 1px 1px rgba(16, 51, 78, 0.9);
	display: none;
	pointer-events: none;
	width: 1em;
}

#inputOptions .itemSelection .item .infoBtn, #plantItem .itemSelection .item .infoBtn{
	display: block;
	pointer-events: auto;
	overflow: hidden;
}

.itemSelection .price{
	background: rgba(84, 84, 84, 0.2);
	margin: auto;
	border-top: 1px solid rgba(0,0,0,0.2);
	border-radius: 4px;
	vertical-align: middle;
	line-height: 1.5em;
	font-size: 0.8rem;
	pointer-events: none;
	white-space: nowrap;
	z-index: 10;
	width: 95%;
	max-width: 8rem;
	font-family: oxygen;
}

.itemSelection .price.notAvailable img{
	display: none
}
/*#store .itemSelection .modalContainer{
	border: 2px solid #0A3549;
	color: #0A3549;
	background-color: #F7FCFE;
	padding: 1em 0.5em;
}*/
.itemSelection .buyItemPrompt{
	z-index: 10;
	width: 85%;
	margin: auto;
	overflow: hidden;
}
.itemSelection .buyItemPrompt .title{
	cursor: pointer;
	font-size: 1.3em;
	width: initial;
}

.itemSelection .buyItemPrompt .btnBox{
	width: 100%;
	margin-top: -24%;
}
.itemSelection .buyItemPrompt .button.large{
	padding:4px;
	margin-top: 0.2em;
	font-size: 1.3em;
	display: inherit;
}

.itemSelection .buyItemPrompt .button#buyItem{
	margin-top: 0.3em;
	padding:0.35em;
}


.itemSelection .ending{
	z-index: 10;
	top: 5%;
	right: auto;
	left: 10%;
	font-size: 1.3em;
	pointer-events: none;
}

.itemSelection .superSpecial .ending{
	left: 5%;
	font-size: 1.3em;
}
#inputOptions .itemSelection .modalContainer{
	background: #FFFEF5;
	width: 95%;
	max-width: 500px;
	padding: 0.25em;
	border: 4px solid #573D0E;
	padding-top: 0.5em;
}


/*#inputOptions .itemSelection .modalContainer:after{
	position: absolute;
	width: 22%;
	border-radius: 50%;
	top: -12px;
	padding-bottom: 22%;
	bottom: auto;
	left: auto;
	right: -18px;
	z-index: 10;
	content: "";
	background-image: url('../img/bubblePie.png');
	background-size: 95%;
}*/

#inputOptions .itemSelection .scrollBox{
	margin: 0.6em 0;
	text-align: left;
}

#inputOptions .status{
	width: 16%;
	padding-bottom: 16%;
	bottom: auto;
	left: auto;
	top: -10%;
	right: 2%;
	background-size: 90%;
}

#plantItem .contestInstruction{
	margin: 1em auto;
}

#contestInstruction ol{
	text-align: left;
}

#emotes .emoteBox{
    display: inline-block;
    width: 16.666%;
    max-width: 100px;
    vertical-align: top
}
#premium .emoteBox{
    width: 24%;
}

#emotes .emoteBox .button{
	margin: 0.25em auto;
	width: 80%;
	box-sizing: border-box;
}

#emotes .emoteBox .button > div{
	vertical-align: bottom;
}
.item .button{
	margin: 0;
	padding: 6px 8px;
}
.item .button img{
	width: 100%;
	height: auto;
	max-width: initial;
	max-height: initial;
	margin: auto;
}
.item .button img.money{
	width: auto;
	height: 1em;
	padding: 0 2px;
}
#plantItem .itemName, 
#store .itemName{
	line-height: 1.2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
	width: 85%;
	margin: auto;
	margin-top: 5px;
}

#plantItem .scrollBox{
	min-height: 200px;
	text-align: left;
}
.itemSelection .scrollBox > div{
	width: 100%;
}
.feedsBlock{
	margin: 8px 0;
}

.feedsBlock .msgBox{
	padding: 0 5px;
	line-height: 1.2em;
	font-size: 0.9em;
}

.feedsBlock .msgBox span{
	float: right;
	font-size: 0.8em;
}

.feedsBlock .msgBox a span{
	float: none;
	font-size: 1em;
}
.feedsBlock .msgBox div span{
	float: none;
	font-size: 1em;
}

.feedsBlock .msgBox .auctionDetail{
}
.feedsBlock .msgBox .details > div{
	background-color: rgba(0,0,0,0.1);
	border-radius: 0.5em;
	padding: 0.25em 0.5em;
}

.feedsBlock a{
	text-decoration: none;
	color: #573D0E;
	display: inline-block;
	vertical-align: top;	
}

.feedsBlock .display{
	font-family: 'yanone', 'oxygenBold', sans-serif;
	font-size: 1.4em;
	margin-top: -2px;
	display: block;
}

.feedsBlock .feedContent{
	display: block;
	line-height: 1.2em;
}

#reward .rewardImages{
	width: 100%;
	text-align: center;
}
#reward img{
	display: inline-block;
	width: 25%;
}

#reward p{
	font-size: 14px;
	padding-top: 0;
}

#storeBuyItem .backdrop{
	background-color: rgba(0,0,0,0.4)
}
#storeBuyItem .modalContainer{
	width: 90%;
	padding-top: 0.5em;
	background: #FFFEF5;
	box-shadow: 0 3px 0px #573D0E;
}

#storeBuyItem .title{
	cursor: pointer;
}

#storeBuyItem .prices{
	width: 80%;
	margin: 0 auto;
	background: white;
	padding: 2px 10px;
	border-radius: 6px;
	box-shadow: inset 0px 1px 2px #573D0E,inset 0px 0px 1px #573D0E;
}

#barnItemDetail .button{
	font-family: yanone;
	font-size: 1.4em;
	padding: 10px 20px;
}

#storeBuyItem .prices .price{
	position: relative;
	vertical-align: middle;
	line-height: 18px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	padding: 5px 2px;
	font-size: 12px;
}

#storeBuyItem .prices .price b{
	font-family: yanone;
	font-size: 1.4em;
}

#storeBuyItem .prices .price span{
	color: #BB1E1D;
}
#storeBuyItem .itemInfo{
}

#storeBuyItem .itemInfo .flex1{
	position: relative;
}
#storeBuyItem .timer{
	font-size: 0.8em;
	margin-bottom: 0.25em;
}

#storeBuyItem .red, #store .red{
  	-webkit-animation: flash 2s infinite; /* Safari 4+ */
    -moz-animation:    flash 2s infinite; /* Fx 5+ */
    -o-animation:      flash 2s infinite; /* Opera 12+ */
    animation:         flash 2s infinite; /* IE 10+ */
}
#storeBuyItem .itemImage{
	width: 75%;
	max-width: inherit;
	height: auto;
	display: block;
	margin: auto;
	margin-bottom: 0.5em;
}

#storeBuyItem .itemDetail{
	width: 35%;
	-webkit-box-pack: initial;
	padding-right: 8%;
}

#storeBuyItem .itemDetail >div{
	width: 100%;
	text-align: center;
}

#storeBuyItem .itemDetail .itemDetailBox{
	border-radius: 6px;
	padding: 0.2em 0.5em;
	width: 100%;
	margin: 0.5em 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background-color: #0A3549;
	color: white;
}

#storeBuyItem .itemDetail .itemDetailBox > div{
	display: inline-block;
}

#storeBuyItem .itemDetail .itemDetailBox .lbl{
	font-family: yanone;
	font-size: 1.3em;
	line-height: 1.2em;
	vertical-align: middle;
}

#storeBuyItem .itemDetail .itemDetailBox .lbl span{
	font-size: 14px;
	line-height: 1em;
	display: block;
}

#storeBuyItem .itemDetail .itemDetailBox .stat{
	float: right;
}

#storeBuyItem .prices .price:last-child{
	border:0;
}

#storeBuyItem .prices .price .button{
	margin: 0;
	position: absolute;
	right: 2px;
	top: 4px;
	padding: 4px 16px;
	font-size: 2em;
	font-family: yanone;
}

/*/////////////
DEBUG ONLY DO NOT MODIFY 
////////////*/
#forums .count{text-align:right;font-size:.8em}#forums .group{border-radius:.5em;background-color:#609bff;margin-bottom:.5em}#forums .group:last-child{margin-bottom:0}#forums .group>.title{border-top-left-radius:.5em;border-top-right-radius:.5em;padding:.5em;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#60beff),color-stop(1,#609bff));background:-moz-linear-gradient(top,#60beff 0,#609bff 100%);color:#fff;font-size:.8em;text-align:left;height:auto}#forums .title img{vertical-align:middle;width:2em;height:2em}#forums .group>.title .name .bold{font-weight:700}#forums .group>.title .name .desc{font-size:.8em}#forums .list{padding:.5em}#forums .row{padding:.5em;background-color:#d4e1ec;border-top:1px solid #fff;border-bottom:1px solid #037dba}#forums .row:nth-child(2n){background-color:#dfecf8}#forums .row.blue,#forums .row:nth-child(2n).blue,#forums .thread.blue,#forums .thread:nth-child(2n).blue{background-color:#dbf88b}#forums .row .name{color:#4c5289;font-weight:700}#forums .row .count{font-size:.7em;color:gray;padding:0 .25em}#forums .row .text{font-size:.8em}#forums .row .time{font-size:.7em}#forums .row canvas{width:2.5em;height:2.5em;margin:0 .5em .5em 0}#forums .thread{padding:.25em}#forums .poster{font-size:.8em;color:gray}#forums .subject{font-size:.8em}#forums .paging{margin:.5em;color:#fff;position:relative}#forums .page{color:#fff;border-radius:.5em}#forums .mod{text-align:right;font-size:.8em}#forums .mod div{display:inline-block;cursor:pointer;color:#12a2ea;margin:.5em;text-decoration:underline}#forums .page.selected{background-color:#12a2ea;border:1px solid #037dba;font-weight:700}.post.gc_popup .title{border-top-left-radius:.5em;border-top-right-radius:.5em;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#12a2ea),color-stop(1,#027cb9));background:-moz-linear-gradient(top,#12a2ea 0,#027cb9 100%);color:#fff}.post.gc_popup .title .text{font-size:.8em}.post.gc_popup .quote{font-size:.9em;font-style:italic;text-align:left;padding:.5em;word-wrap:break-word;border-radius:.5em;color:#eb842a}.post.gc_popup .confirm{margin:1em;font-size:.8em;color:#cd5c5c}.post.gc_popup .ban{border-radius:.5em;border:1px dotted #cd5c5c;text-align:left;padding:.5em}.post.gc_popup .ban p{font-size:.8em;margin:.5em}.post.gc_popup .ban input{width:3em}.post.gc_popup .footnote{font-size:.6em}.post.gc_popup #subject{margin-bottom:.5em}.post.gc_popup .textarea{position:relative;height:7em}.post.gc_popup textarea{position:absolute;left:0;right:0;top:0;bottom:0}.post.gc_popup .footer{padding:0}.post.gc_popup .length{text-align:right;font-size:.6em;margin:.5em}.post.gc_popup .exit{background:url(../images/x-blue.png) no-repeat;background-size:100% 100%}.paging .page{display:inline-block;width:1.5em;height:1.5em;overflow:hidden;text-align:center;margin:.25em;padding-top:.15em}.paging .page span{font-size:.7em}



/*/////////////
BBW FORUM OVERWRITES
////////////*/
.forumBody{
	width: 100%;
	height: 100%;
}

#forums{
	width:100%;
	height:100%;
    margin: auto;
	padding: 0 0.5em;
	color: #573d0e;
	box-sizing: border-box;
}

#forums.drilldown {
    padding-top: 0.5em;
    padding-bottom: 1em;
}

#forums .page{
	color: #FFFCEC;
	vertical-align: top;
	line-height: 1em;
	padding: 0 2px;
}


#forums .page.selected{
	background-color: #e4d689;
	border: 0;
	box-shadow: 0px -1px #573D0E;
	color: #573D0E;
}

#forums .groups, #forums .group {
	width: 100%;
    height: 100%;
	box-sizing: border-box;
	background: transparent;
}
#forums .groups .group{
	background: transparent;
}

#forums .group>.title{
	background: transparent;
}

#forums .title{
	box-direction: reverse;
	-webkit-box-direction: reverse;
	background: transparent;
	font-size: 1.4em;
	color: #573D0E;
	width: auto; /* DELETE */
}

#forums .title .arrow{
	font-size: 35px;
	line-height: 0.5em;
	padding: 0;
	font-family: 'yanone';
	margin-left: 0.5em;
}

#forums .title div{
	background: transparent;
	line-height: 1.2em;
	text-align: right;
	padding: 0 0.5em;
	font-size: 1.8rem;
	color: #573D0E;
	font-family: 'maiden';
}

#forums .forumThread .title .arrow{
	color: #FFFCEC;
	padding-left: 0.2em;
	margin-top: -0.2em;
	cursor: pointer;
}

#forums .title .desc{
	font-family: oxygen;
	font-size: 12px;
	line-height: 12px;
}

#forums .title .count{
	display: none;
}

/*#forums .paging{
	color: #573d0e;
}*/

#forums .row {
    word-break: break-word;
}
#forums .row canvas {
	width: 3em;
	height: 3em;
}

#forums .row .count{
	color: rgb(88, 88, 88);
}
#forums .scrollBox{
	width: 100%;
}
#forums .list{
	margin: auto;
	padding: 0;
	padding-bottom: 1em;
}


#forums .category .list .row, #forums .forumThread, #forums .forumThreads{
	background-color: #FFFCEC;
	margin: 0 auto;
	border-radius: 8px;
	border: 2px solid #573D0E;
	padding-bottom: 0;
	padding:0;
	box-sizing: border-box;
}

#forums .category .list .row{
	margin: 5px auto;
}

#forums .list .row .thread:last-child{
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

#forums .category .list .name{
	font-family: maiden;
	font-weight: 100;
	font-size: 1.8em;
	padding: 0.5rem;
	color: inherit;
}

#forums .category .list .name:after{
	content: ">";
	float: right;
	font-size: 24px;
	line-height: 1em;
	vertical-align: top;
	font-family: 'yanone';
}


#forums .category .list .thread{
	padding: 0.5em;
}

#forums .list .row .thread .flexBoxH:first-child .flex1{
	font-size: 1.1em;
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#forums .list .row .thread .flexBoxH:last-child{
	vertical-align: top;
	line-height: 1em;
}

#forums .list .row.thread > div{
	padding: 0.5em;
}

#forums .list .row .thread .poster span{
	font-family: oxygenBold;
	font-weight: bold;
}
#forums .forumThread .title{
	background: #573D0E;
	width: 100%;
	padding: 0;
	text-shadow: 0 1px 2px black;
}

#forums .forumThread .title .name{
	color: #FFFCEC;
	padding: 0.2em 1em;
	padding-right: 0.5em;
	line-height: 1em;
	width: 90%;
	text-align: right;
	font-size: 2em;
}
#forums .forumThread .title > img{
	vertical-align: middle;
	width: 15px;
	height: 20px;
	background-color: #FFFCEC;
	padding: 5px 8px;
	border-radius: 30px;
	display: block;
	margin: 0.5em;
}


#forums .forumThread .list{
	padding: 0;
}


#forums .forumThread .row.thread, #forums .forumThreads .row{
	padding: 0;
	background-color: transparent;
	border: 0;
	border-top: 1px dashed rgba(0,0,0,0.3);
}

#forums .forumThread .row.thread:first-child, #forums .forumThreads .row:first-child{
	border-top: 0;
}

#forums .forumThreads .startThread{
	width: 100%;
	opacity: 0.2;
}

/*#forums .forumThread .row.thread{
	padding: 0;
	background-color: transparent;
}*/

#forums .forumThread .row .text{
	font-size: 1em;
	line-height: 1em;
}

#forums .forumThreads .list{
 	padding: 0;
}

#forums .forumThreads .threadSubject{
 	font-size: 14px;
 	line-height: 1.2em;
}

#forums .forumThreads .count{
	font-size: 0.8em;
}

#forums .footer{
	position: relative;
	background-color: #573d0e;
	margin: 0;
	padding: 0.25em;
}


#forums .footer .button{
	margin: 0.2em;
	padding: 0.4em 0.6em;
	font-size: 1.4em;
	font-family: yanone;
}

/*#forums .footer{*/

#forums .row.thread .name{
	line-height: 1em;
	color: #573D0E;
}

#forums .list .row.blue, #forums .list .thread.blue{
	background-color: rgba(228,214,137,0.3); !important
	font-weight: bold;
	color: #573D0E;
	font-family: oxygenBold;
}

.post.gc_popup{
	width: 90%;
	margin: auto;
	color: #573D0E;
	border-radius: 8px;
	background-color: white;
	max-width: 480px;
	box-shadow: 0 2px 8px #573D0E;
	border: 2px solid #573D0E;
}

.post.gc_popup .body{
	padding: 0.5em;
	padding-bottom: 0
}
.post.gc_popup .title{
	background: transparent;
	color: #573D0E;
	font-style: normal;
	font-size: 2em;
	text-align: center;
	margin-top: 0.2em;

}
.post.gc_popup .exit{
	height: 30px;
	width: 30px;
	position: absolute;
	right: 0;
	top: 0;
}
.post.gc_popup textarea {
	position: relative;
	height: 6em;
	width: 95%;
	padding: 2%;
}
.post.gc_popup .footer{
	padding: 0.5em;
	margin-top: 0.5em;
	text-align: right;
}
.post.gc_popup .footer .button{
	margin: 0.2em;
	padding: 4px 10px;
	font-size: 1.6em;
	font-family: yanone;
}

.post.gc_popup.report {
	text-align: center;
}


.post.gc_popup.report .footer{
	text-align: center;
}

#profileModal .backdrop{
	background-color: rgba(0,0,0,0.4);
}

#profileModal .modalContainer{
	color: #FFFCEC;
	background-size: 100%;
	background-position: center;
	border: 0;
	max-width: 400px;
}
#profileModal .display{
	font-size: 1em;
	font-family: yanone;
	text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	display: inline-block;
}

#profileModal .profilePicWrapper{
	width: 30%;
	margin-bottom: 0.5em;
}

#friendPicker .search {
	padding: 0.2em;
}
#friendPicker .searchBox{
	position: relative;
}
#friendPicker .searchBox input{
	display: block;
	box-sizing: border-box;
	padding: 0.4em 0.6em;
	font-size: 1em;
	width: 60%;
}
#friendPicker .row{
	font-size: 2em;
}

#friendPicker .row > .flexBoxH{
	padding: 0.5rem;
}
#friendPicker .button{
	margin: 0;
}

#friendPicker .profilePicBox{
    width: 1.5em;
    padding-right: 0.5em;
}
#friendPicker .display{
    text-align: left;
    font-size: 1em;
}
#friendPicker .profileRow .check{
    opacity: 0;
    left: auto;
    font-size: 2em;
    right: 5%;
    color: rgb(118, 245, 113);
}

#friendPicker .profileRow.selected .check{
    opacity: 1;
} 

#share #shareTargets{
	font-size: 1.2em;
	font-weight: bold;
	top: auto;
	right: 26%;
	left: auto;
	bottom: 5%;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
	cursor: pointer;
	color: #FFF9D6;
}

#share #shareTargets .targets{
	display: inline-block;
}
#share #shareMessage{
  	height: 4em;
  	width: 100%;
  	box-sizing: border-box;
}

#share .title{
	text-align: left;
	width: auto;
	font-size: 2.4em;
	margin: auto;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

#share .shareContent, #share #shareMessage{
	background-color: rgba(255, 255, 255, 0.9);
	padding: 1em;
	border-radius: 0.5em;
	margin: 0.6em 0;
	box-shadow: inset 0 1px 2px, 0 1px 2px white;
	border: none;
}

#share .imageBox{
    width: 15%;
}

#share .description {
	margin-left:4%;
	width:70%;
	text-align: left;
}
#share .userActions {
	position: relative;
}
#profileModal .profileDetailWrapper{
	text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	margin-left: 2%;
	text-align: left;
}

#profileModal .profileDetailWrapper .displayBox{
	font-size: 2em;
	margin-bottom:0.25em;
	font-family: yanone;
}

#profileModal .profileDetailWrapper .statusBox{
	margin: 0.25em 0;
}

#profileModal .profilePic{
	box-shadow: inset 0 0 5px rgba(87, 61, 14, 1), inset 0 0 4px rgba(87, 61, 14, 1), 0px 0px 1px rgba(87, 61, 14, 1);
}
#profileModal .farmNote{
	background-color: rgba(255, 252, 236, 0.4);
	clear: both;
	border-radius: 8px;
	padding: 0.8em 0.4em;
	font-family: yanone;
	font-size: 1.3em;
	color: #573D0E;
	vertical-align: middle;
	font-weight: normal;
	line-height: 20px;
	-webkit-box-shadow: 0 2px 4px #444;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 0;
	background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 20%) 0 0;
	background: linear-gradient(top, #d9eaf3 0%, #fff 20%) 0 0;
	-webkit-background-size: 100% 30px;
	background-size: 100% 30px;
	background-position-y: 0.5em;
}

#profileModal .farmNote .userInput{
	text-align: center;
}

#profileModal .farmNote span{
	vertical-align: top;
	line-height: 30px;
}

#profileModal .userActions{
	margin-top: 0.5em;
}
#profileModal .button{
	font-size: 1.25em;
	font-family: yanone;
	margin: 1%;
	width: auto;
	box-sizing: border-box;
}

#profileModal .button.moreOptions{
	position: relative;
}
#profileModal .button.moreOptions .options{
	display: none;
	top: 110%;
	margin: 0;
	left: auto;
}

#profileModal .button.moreOptions .options > div{
	background-color: rgba(228, 214, 137, 0.85);
	padding: 0.5em;
	cursor: pointer;
	pointer-events: auto;
	border-bottom: 1px dashed;
}

#profileModal .button.moreOptions .options > div:last-child{
	border-bottom: 0;
}

#profileModal .profileStats{
	font-size: 12px;
	line-height: 18px;
	vertical-align: bottom;
	margin-top: 2px;
}
#profileModal .profileStats span{
	margin-left: 0.5em;
	font-size: 1.4em;
	line-height: 18px;
	margin-right: 0.1em;
	overflow: hidden;
	display: inline-block;
	vertical-align: middle;
}

#profileModal .profileDate{
	font-size: 12px;
}

#profileModal .profileStats span:first-child{
	margin-left:0;
}

#profileModal .statusBox {
	font-size: 1.2em;
	text-align: center;
	color: #573D0E;
	height: 20%;
}
.statusBox .levelTube{
	margin-right: 0.25em;
}
.forumThread .levelTube{
    display: inline-block;
    font-size:0.8em;
}
.statusBox .viewWrapper .levelTube{
	background-color: rgb(128, 217, 229);
}

.statusBox .onlineWrapper .levelTube.ON{
	background: rgb(59, 223, 36);
}

.statusBox .onlineWrapper .levelTube.OFF{
	background: rgb(189, 189, 189);
}

.statusBox .yearWrapper .levelTube{
	background-color: rgb(250, 132, 178);
}
.statusBox .staffWrapper .levelTube{
	background-color: rgb(255, 143, 0);
}

#blingView{
	width: 100%;
	color: white;
	padding: 0.5em;
	box-sizing: border-box;
	height: 100%;
	background: #e4d689;
}

#blingView .backBtn,
#leaderboardView .backBtn{
	top:0.5em;
	left:1.2em;
	right:auto;
	bottom:auto;
	font-size:1.4em
}

#blingView .backBtn:after,
#leaderboardView .backBtn:after{
	content: "<";
}

#blingView .myBlingBox{
	text-align: center;
	position: relative;
	margin: 0.5em auto;
	padding-bottom: 1em;
	width: 30%;
	max-width: 15em;
	max-height: 15em;
}

#blingView .inProgressBlings{
	margin-bottom: 0.5em;
}
#blingView .myBlingBox .label{
	top: auto;
	font-size: 2.5em;
	bottom: 20%;
}

#blingView .myBlingBox .blingLevel{
	font-size: 1.6em;
	line-height: 1em;
	top: auto;
	color: #573D0E;
	margin: auto;
	width: 70%;
	white-space: nowrap;
}

#blingView .myBlingBox .settingBtn{
	font-size: 2.5em;
	left: auto;
	bottom: auto;
	line-height: 1em;
	right: 0.1em;
	top: 0.1em;
}

#blingView .myBlingBox .openBtn{
	margin-bottom: 0.5rem;
	line-height: 1.2em;
	display: block;
	margin: 0.5em 0;
	font-family: yanone;
	font-size: 1.2em;
}

#blingView .myBlingBox .blingLevel span{
	font-family: 'eraser', sans-serif;
}
#blingView .myBlingBox .small{
	font-size: 1rem;
	font-family: 'eraser', sans-serif;
}

#blingView .myBlingBoxImage{
	width: 24%;
	position: relative;
}
#blingView .myBlingBox .bgImage{
	width: 100%;
	margin: auto;
	background-size: 100%;
	border-radius: 1em;
	box-shadow: inset 0 2px 4px white, 0 1px 2px black, 0 3px 0px black;
}

#blingView .myBlingBox .blingLvl{
	font-family: 'yanone';
	top: 3%;
	font-size: 1.4em;
	color: #573D0E;
}
#blingView .title{
	text-align: center;
	line-height: 1.4em;
	font-family: eraser;
	color: white;
	font-size: 1.5em;
}

#blingView .completed .scrollx{
	overflow-x: scroll;
}

#blingView .completed .scrollx > div{
	display: inline-block;
	position: relative;
}


#blingView .usingLabel{
	background-color: rgba(255, 255, 255, 1);
	bottom: auto;
	top: 8px;
	text-align: center;
	font-family: yanone;
	left: 0;
	padding: 0.2em;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
	font-size: 14px;
	right: auto;
}
#blingView .questList{
	display: table;
}
#blingView .questList .buttonWrap{
	display: inline-block;
	min-width: 50%;
	padding: 0.5em 0;
}


#blingView .blingList{
	position: relative;
}
#blingView .blingList .scrollBox{
    width: initial;
}

#blingView .blingList .blingItem{
	position: relative;
	/*margin:0.4em;*/
	padding: 0.4em;
	box-sizing: border-box;
}

#blingView .blingList .blingItem .bgImage{
	width: 100%;
	pointer-events: none;
	background-size: 100%;
	position: relative;
	border-radius: 5em;
	box-shadow: inset 0 2px 4px white, 0 1px 2px black, 0 2px 0px black;
}
#blingView .categoriesList{
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 1em;
	box-shadow: inset 0 1px 2px black, 0 1px 2px white;
	text-align: left;
}
#blingView .categoriesList .scrollBox{
	display: table;
	padding: 0.5em;
	box-sizing: border-box;
}
#blingView .categoriesList .blingItem{
	width: 24%;
	display: inline-block;
	vertical-align: top;
}
#blingView .blingList .blingItem .progressLabel, #blingViewCategory  .blingItem .progressLabel{
	font-size: 0.8em;
	font-family: oxygenBold;
	top: auto;
	left: auto;
	background: rgba(87, 61, 14, 0.9);
	width: 2rem;
	height: 2rem;
	border-radius: 60%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
	color: #FFF9D6;
}
#blingViewCategory  .blingItem .progressLabel span{
	font-size: 1.2em;
	line-height: 1.8em;

}

#blingView .blingList .categoryLabel{
	font-size: 1em;
	line-height: 1em;
	text-align: center;
	color: #494949;
	font-family: maiden;
	margin-top: 8%;
	word-break: break-word;
	width: 106%;
	margin-left: -3%;
}

#blingView .blingList .categoryLabel div{
	font-size: 1em;
}

#blingBox .modalContainer, #viewTrophy .modalContainer, #blingViewCategory .modalContainer{
	background-color: #B5D749;
	width: 90%;
}

#blingBox .myBlings .blingItem{
	width: 25%;
	cursor: pointer;
	display: inline-block;
	position: relative;
}
#blingBox .myBlings .blingItem .bgImage{
	width: 100%;
	padding-bottom: 100%;
	background-size: 96%;
	pointer-events: none;
}
#blingBox .myBlings .blingItem .heart{
	font-size: 4.5em;
	color: rgba(205, 10, 10, 1);
	opacity: 0;
}

#blingBox .myBlings .blingItem .heart.side{
	opacity: 0.8;
	font-size: 2em;
	top: 50%;
	right: 50%;
}

#blingViewCategory .blingItem{
	width: 25%;
	display: inline-block;
	position: relative;
}
#blingViewCategory .blingItem .bgImage{
	background-size: 90%;
}

#blingViewCategory .title.big{
	font-size: 2em;
	line-height: 0.8em;
	font-family: 'maiden';
}
.trophyDetail .detailWrapper{
	width: 90%;
	margin: auto;
	text-align: center;
}
.trophyDetail .detailWrapper .blingImage .bgImage{
	background-size: 90%;
}
.trophyDetail .blingImage{
	width: 40%;
}
.trophyDetail .blingName{
	width: 60%;
	padding: 0.5em;
}
.trophyDetail .blingName > div{
	width: 100%
}
.trophyDetail .blingName .title{
	width: 100%;
	font-family: 'maiden';
	font-size: 1.6em;
}

.trophyDetail .blingName .progress{
	width: 90%;
	margin: auto;
}
.trophyDetail .numQuest{
	font-size: 0.8em;
	margin-right: 0.5em;
}
.trophyDetail .quests{
	background-color: rgba(0, 0, 0, 0.06);
	margin: 0 0.5em;
	border-radius: 0.5em;
	box-shadow: inset 0 1px 2px;
	padding: 0.5em 0;
}
.trophyDetail .blingImage .progress{
	margin: 0.5em 0;
}
.trophyDetail .questRow{
	text-align: center;
	position: relative;
	width: 95%;
	margin: auto;
	padding-top: 0.5em;
	border-bottom: 1px dashed;
}

.trophyDetail .questRow.completed{
	background-color: rgba(0, 0, 0, 0.1);
}
.trophyDetail .questRow .questItem{
	width: 16.66%;
	display: inline-block;
}

.trophyDetail .questRow:last-child{
	border: none;
}
.trophyDetail .questRow .indexLabel{
	width: 10%;
	font-size: 1.5em;
	font-family: 'yanone'
}

.trophyDetail .questRow .flex1{
	width: 90%;
}

.trophyDetail .completeIcon{
	width: 10%;
	font-size: 2em;
	left: auto;
}

.trophyDetail .completeImage .bgImage{
	width: 100%;
	padding-bottom: 0;
	height: 100%;
	opacity: 0.4;
}
.trophyDetail .questRow .questItem .bgImage{
	border-radius: 8%;
}

.trophyDetail .questRow .questProgress{
	margin-top: -0.2em;
	line-height: 1.2em;
	margin-bottom: 0.5em;
	font-size: 0.9em;
}
.trophyDetail .questRow:last-child .questProgress{
	border: 0;
}

#rewards .dialog .body {
    padding: 1.75em 0.5em 0.5em;
}
#rewards .dialog .money {
    width: 4em;
}

.transition{
	z-index: 1000;
	display: none;
	-webkit-transform: translate3d(0,0,0);
	max-width: 680px;
	margin: auto;
}

.transition .wave{
	height: 35px;
	background-repeat: repeat-x;
	background-size: contain;
}

.transition .grass{
	background-size: 100px;
	text-align: center;
	font-size: 2em;
	font-family: tiza;
	color: rgba(87, 61, 14, 0.8);
	text-shadow: 1px 4px 6px rgb(181, 215, 73), 0 0 0 #000, 1px 4px 6px rgb(181, 215, 73);
}

.transition img{
	width: auto;
	height: 30%;
}
#wizard, #loading{
	max-width: 680px;
	margin: auto;
}
#loading p {
    padding: 0 1em;
}

#bbwLoader{
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	text-align: center;
}

#bbwLoader img{
	width: 40%;
	max-width: 260px;
}

.loader{
	background-color: rgba(181, 215, 73, 0.4);
	width: 0%;
	-webkit-animation-name: slide;
	-webkit-animation-duration: 1s;
	animation-easing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#harvestAnimation .harvestCrop{
	pointer-events: none;
}
.leaderCategories .leaderboardList{
	width: 100%;
	height: 100%;
}
.leaderCategories .leaderboardList .scrollBox{
	right: 0;
}
.leaderCategories .button{
	margin: 0.5em;
	font-family: maiden;
	font-size: 1.8em;
}
.leaderCategories .button .bgImage{
	width: 3rem;
	padding-bottom: 3rem;
}

.leaderCategories .button .bgImage.arrow{
	width: 6%;
	padding-bottom: 6%;
	background-size: 80%;
	background-image: url(/bbw5/img/arrowRight.png);
}

.leaderSubCategories .buttonWrap{
	position: relative;
	width: 30%;
	display: inline-block;
	font-size: 1.2em;
}
.leaderSubCategories .imageBtn{
	background-size: 60%;
	height: 3em;
}

#leaderSubCategories .modalContainer{
	width: 80%;
}

#leaderboardView .categoryNav{
	margin: auto;
	width: 98%;
	display: table;
	padding-top: 5px;
}
#leaderboardView .categoryNav .buttonWrap{
	width: 20%;
	display: inline-block;
	position: relative;
}

#leaderboardView .categoryNav .imageBtn{
	height: auto;
	background-size: 50%;
	padding-bottom: 65%;
	background-position: center;
}

#leaderboardView .categoryNav .imageBtn.active, #leaderboardView .categoryNav .imageBtn.gc_focus{
	box-shadow: inset 0 1px 2px #573D0E,0 0px 1px #573D0E;
	background-color: #FFFCEC;
}
#leaderboardView .profileRow{
	width: 96%;
	cursor: pointer;
	margin: 0.5em auto;
	box-shadow: 0 0px 2px rgba(0,0,0,0.6);
	background: rgb(241, 241, 241);
	padding: 0.4em 0;
}

#leaderboardView .header{
	padding: 0.5em;
	margin-bottom: 0.5em;
	color: #573D0E;
	font-family: maiden;
}
#leaderboardView .header .title{
	font-family: maiden;
	font-size: 2.4em;
}

#leaderboardView .header #backBtn .bgImage{
	width: 0.8rem;
	padding-bottom: 1.5em;
	background-image: url(/bbw5/img/arrowLeft.png);
}
#leaderboardView .tabContainer{
	width: 95%;
	margin: 1px auto;
	background-color:white;
	box-shadow: 0 0 2px black;
	border-radius: 0.5em;
}

#leaderboardView .tabContainer.hideIcon .icon{
	display: none;
}

#leaderboardView .tabContainer.lvl .score{
	display: none;
}

#leaderboardView .tabContainer.kg .score:after{
	content: 'kg';
}
#leaderboardView .tabs dd{
	background-color: #F5F5F5;
	box-shadow: inset 0px -2px 4px #D9D9D9;
	font-size: 1.6em;
	line-height: 1em;
	color: #573D0E;
}

#leaderboardView .tabs dd.active{
	background-color: #fff;
	box-shadow: none;
}
#leaderboardView .self .flexBoxH{
	padding-top: 0;
	position: relative;
	padding-right: 1em;
}
#leaderboardView .self{
	padding-top:1%;
}

#leaderboardView .self .selfLabel{
	right: auto;
	left: 3%;
	font-size: 24px;
	line-height: 1em;
	font-family: 'yanone', 'oxygenBold', sans-serif;
	margin-top: -6px;
}

#leaderboardView .self .selfLabel div{
	padding: 0.2em 0.5em;
	border-radius: 6px;
	color: #FFFCEC;
	background-color: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 2px 2px #573D0E;
	text-shadow: 0 0px 4px #573D0E;
}
#leaderboardView .self .score{
	color: #573D0E;
	font-family: 'oxygenBold', sans-serif;
	text-align: right;
}

#leaderboardView .self .fancyDigit{
	color: #FFFCEC;
}

#leaderboardView .self .title{
	width: 18%;
	line-height: 1.1em;
	font-size: 1.4em;
	padding-top: 2px;
	text-align: right;
	padding-right: 5%;
}
#leaderboardView .self .leaderRank{
	font-size: 36px;
	line-height: 1.2em;
	padding-right: 0;
	text-align: left;
	padding-left: 65px;
}
#leaderboardView .self .display{
	font-size: 26px;
	text-align: right;
}

#leaderboardView .self .profilePicBox{

}

#leaderboardView  .scrollBox{
}

.plaza{
	background-image: url('../img/corkboard.jpg');
	margin-top: -5px;
	color: #573D0E;
}

.plaza .scrollBox{
	width: 100%;
	padding-top:2px;
}
.plaza .postBlock{
	width: 95%;
	background-color: white;
	padding: 0.5em;
	margin: 0.5em auto;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: relative;
}
.plaza .postBlock.store{
	background-color: transparent;
	box-shadow: 0 0 0;
}

.plaza .postBlock.store .item{
	padding: 0 0.5em;
}
.plaza .postBlock h5{
	margin: 0;
	font-weight: normal;
	line-height: 1.2em;
}
.plaza .postBlock.news img{
	width: 100%;
	display: block;
}

.plaza .postBlock.news .desp{
	padding-top: 0.5em;
	font-size: 14px;
}

.plaza .postBlock.forum .profilePicBox{
	width: 12%;
}

.plaza .postBlock.forum .forumPostDetail,.plaza .postBlock.forum .forumPost{
	padding-left: 0.5em;
}
.postBlock.forum .forumPost{
	width: 70%
}

.postBlock.forum .forumBox{
	margin-bottom: 0.5em;
}

.postBlock.forum .forumBox:last-child{
	margin-bottom: 0em
}
.plaza .postBlock.forum .forumPost .forumTitle{
	font-family: oxygenBold;
	font-size: 14px;
}

.plaza .postBlock.forum .forumPostDetail{
	font-size: 10px;
	text-align: right;
	line-height: 1.4em;
}

.drop{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}



#farmSwap{
	background-color: #B4D648;
	border: 4px dashed #573D0E;
	margin-bottom: 0.5em;
}
#farmSwap .swapInfo{
    margin-top: 0.5em;
	width: 100%;
	position: relative;
}

#farmSwap .swapInfo .title{
	font-size: 2.5em;
}

#farmSwap .swapInfo .cost{
	font-size: 2em;
}
#farmSwap .money img.icon{
    width: 1em;
    height: 1em;
}
#farmSwap .swapInfo .button{
	margin: 0.2em;
}

#farmSwap .swapInfo .swapTitle{
	font-size: 3em;
}

#farmSwap .farmContainer{
	margin: auto;
}

#farmSwap .farmContainer .sector{
	border-radius: 6px;
}

#farmSwap .swapHelper{
	width: 70%;
	background-color: rgba(255,255,255,0.7);
	border-radius: 50%;
	background-size: 70%;
	padding-bottom: 70%;
	position: relative;
	background-position: 50% 15%;
	box-shadow: 0 0 8px rgba(87, 61, 14, 0.6);
	font-size: 1.8em;
}

#farmSwap .swapHelper div{
	top: auto;
	text-align: center;
	bottom: 10%;
	width: 78%;
	margin: auto;
	line-height: 1em;
}

#swapper .plot.swap img {
    display: inherit;
}

#swapper .plot img {
    width: 100%;
    display: none;
}

#lootTable .modalContainer{
	position: relative;
	width: 92%;
}

#lootTable .title{
	justify-content: center;
	display: flex;
	flex-direction: column;
}

#lootTable .lootList .lootItem{
	width: 25%;
	padding-bottom: 25%;
	background-size: 90%;
	display: inline-block;
	float: left;
	cursor: pointer;
	pointer-events: inherit;
}
#lootTable .lootSourceBox{
	width: 80%;
	margin: auto;
}
#lootTable .lootSource{
	width: 20%;
	padding-bottom: 20%;
	margin: 0;
}
#lootTable .lootTab .tabs dd.active {
	box-shadow: none;
	background-color: transparent;
	border-width: 0;
	margin: 0;
}

#giftShop .giftItems{
	text-align: left;
}

#farmGiftsList .giftContainer{
	box-shadow: inset 0 1px 2px;
	border-radius: 0.5em;
	background-color: rgba(197, 231, 239, 0.6);
	height: 320px;
}

#farmGiftsList .gift{
	width: 25%;
	display: inline-block;
	position: relative;
}

#farmGiftsList .timerWrap{
	/*font-size: 1.2em;*/
}

#farmGiftsList .gift .giftItem{
	width: 100%;
	padding-bottom: 100%;
	background-size:95%;
}

#farmGiftsList .gift .gifterInfo{
	top: auto;
	width: 30%;
	left: 6%;
}

#farmGiftsList .gift .label{
	font-size: 2em;
	cursor: pointer;
}

#viewPlot .giftTagWrapper{
	top: -40%;
	bottom: auto;
	text-align: center;
	width: 120%;
	left: -10%;
	-webkit-transform: rotate(0deg);
}

#viewPlot .giftTagWrapper > div{
	background: rgba(0, 0, 0, 0.7);
	padding: 0 0.25em;
	border-radius: 0.5em;
	display: inline-block;
	font-family: maiden;
	border: 2px solid;
	font-size: 1.2em;
	color: white;
}
.giftTag {
  	background: #cceef0;
	border: #dcdcdc;
	border-radius: 0 2px 2px 0;
	color: #23bbce;
	display: inline-block;
	height: 2em;
	left: 0;
	line-height: 1em;
	padding: 0px 10px 0px 15px;
	position: relative;
	top: 0;
	font-family: yanone;
	font-size: 1em;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4)
}
.giftTag:before {
  	border-bottom: 1em transparent solid;
	border-right: 8px #cceef0 solid;
	border-top: 1em transparent solid;
	content: '';
	height: 0;
	left: -8px;
	position: absolute;
	top: 0;
	width: 0;
}
.giftTag:after {
	background: white;
	border: 1px #ccc solid;
	border-radius: 50%;
	content: '';
	height: 6px;
	left: 0;
	position: absolute;
	width: 6px;
	top: 38%;
}

#farmViewGift .modalContainer{
	width: 80%;
	background-color: #96C8D4;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 90%;
}
#farmViewGift .giftDisplay{
	top: auto;
	font-size: 2em;
	bottom: 5%;
}
#farmViewGift .giftWrapper{
}
#farmViewGift .giftImage{
	width: 33.33%;
	margin: 0 auto;
	position: relative;
	padding: 1em;
	display: inline-block;
}

#farmViewGift .giftTagWrapper{
	top: 16%;
	left: auto;
	-webkit-transform: rotate(-4deg);
	right: -20%;
}
#farmViewGift .giftTag{
	font-size: 1.6em;
	width: 3em;
	margin: auto;
}

#farmViewGift .fromLabel{
	font-size: 1em;
	margin-left: -8%;
}
#farmViewGift .gifterInfo{
	width: 50%;
	margin-top: 8%;
}
#fwbPurchase .fwbItems{
	display: table;
	width: 100%;
}

#fwbPurchase .fwbDays{
	z-index: 11;
	top: 8%;
	left: auto;
	right: 10%;
	font-family: 'yanone', sans-serif;
	font-size: 1.3em;
	color: #D27D02;
	pointer-events: none;
}


#fwbPurchase .fwbInfo{
	width: 95%;
	margin: 0 auto;
	margin-top: 0.75em;
}

#fwbPurchase .fwbPerk > div{
	display: inline-block;
	width: 85%;
	text-align: left;
}

#fwbPurchase .fwbSummary{
	margin: 0.5em;
	margin: 0.25em 0.75em;
	font-family: yanone;
	font-size: 1.25em;
}

#fwbPurchase .fwbPerk div.icon{
	width: 10%;
}

#fwbPurchase .fwbPerk div.icon img{
	width: 2em;
}
#fwbPurchase .fwbPerk .label{
	font-family: yanone;
	margin: 0.25em 0;
}

#fwbPurchase .fwbPerk .desp{
	font-size: 0.9em;
	line-height: 1em;
}

#farmBuyLand .lands{
}

#farmBuyLand .lands .land{
	position: relative;
	width: 33.3%;
	display: inline-block;
	padding-bottom: 33.3%;
	background-size: 80%;
	cursor: pointer;
	pointer-events: inherit;
}
#farmBuyLand .lands .land .label{
	top: auto;
	bottom: 23%;
	font-size: 1.25em;
	pointer-events: none;
	max-width: 68%;
	margin: auto;
	line-height: 1em;
}

#friendRequests .requests .profilePicBox{
	width: 20%;
}

#friendRequests .requests .display{
	width: 55%;
}

#friendRequests .requests .button{
	margin: 0.2em;
}

#farmBuyGift .modalContainer{
	width: 85%;
	background-color: white;
}
#farmBuyGift .item{
	position: relative;
}

#farmBuyGift .item .bgImage{
	width: 40%;
	padding-bottom: 35%;
	margin: auto;
	background-size: 90%;
}

#farmBuyGift .item .itemDisplay{
	top: auto;
	bottom: 0%;
	font-size: 1.8em;
}
#farmBuyGift .total{
	background: rgba(0,0,0,0.06);
	border-radius: 0.5em;
	box-shadow: inset 0 1px rgba(0,0,0,0.3);
	width: 85%;
	margin: 1em auto;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 2em;
	padding: 0.4em 0;
	margin-top:0.25em;
}
#farmBuyGift .feeSelection{
	padding-bottom: 0.2em;	
	width: 85%;
	margin: 0.2em auto;
}

#farmBuyGift .fwbEnroll{
	width: 80%;
	margin: 0.75em auto;
	margin-bottom: 0;
	font-size: 0.8em;
	font-family: 'oxygen';
	background-color: rgba(253, 165, 34, 0.25);
	padding: 0em 0.5em;
	border-radius: 0.5em;
}
#farmBuyGift .total > div{
	display: inline-block;
}
#farmBuyGift .bar{
	margin: 0 auto;
	width: 90%;
	box-shadow: 0 0 2px rgba(87, 61, 14, 0.8);
	border-radius: 0.5em;
	background-color: white;
	padding: 0.25em 0;
}
#farmBuyGift .feeSelection.fees .bar.active{
	box-shadow: 0 0 4px rgba(87, 61, 14, 1);
	background-color: rgba(121, 219, 158, 0.3);
	font-weight: bold;
}
#farmBuyGift .toggleBar.error{
	box-shadow: 0 0 4px rgba(232,44,12,0.8);
}
#farmBuyGift .toggleBar.left{
	box-shadow: 3px 0 2px rgba(87, 61, 14, 0.6), inset 2px 0 2px rgba(87, 61, 14, 0.8);
	background: linear-gradient(to right, rgba(240,203,97,0.4) 0%,rgba(255,255,255,1) 30%);
}
#farmBuyGift .toggleBar.right{
	box-shadow: -3px 0 2px rgba(87, 61, 14, 0.6), inset -2px 0 2px rgba(87, 61, 14, 0.8);
	background: linear-gradient(to right, rgba(255,255,255,1) 70%,rgba(167,209,0,0.4) 100%);
}

#farmBuyGift .feeSelection .feeBtn{
	cursor: pointer;
	margin: 0 1%;
	width: 55%;
	display: inline-block;
}
#farmBuyGift .feeSelection.fees .feeBtn{
	background-color: rgba(121, 219, 158, 0.15);
}
#farmBuyGift .feeSelection .feeBtn.credits{
	width: 30%;
}
#farmBuyGift .feeSelection .feeBtn .old{
	text-decoration: line-through;
	color: rgb(171, 8, 8);
}

#farmBuyGift .feeSelection .label{
	font-family: 'yanone', sans-serif;
	font-size: 1.2em;
	margin-bottom: 0.25rem;
	margin-top: 0.5em;
}
#levelUp .modalContainer{
	background-position: top, center;
	background-size: 90%, 100px;
	background-repeat: no-repeat, repeat;
}
#levelUp .bling{
	width: 40%;
}
#levelUp .blingName{
	line-height: 1em;

}
#levelUp .bgImage{
	width: 100%;
	padding-bottom: 90%;
	background-size: 90%;
}
#levelUp .levelUpText{
	font-size: 5em;
	line-height: 1em;
	color: #FFF8D6;
}
#levelUp .levelUpNum{
	font-size: 8em;
	line-height: 0.5em;
	margin-bottom: 0.3em;
	color: #FFF8D6;
}
@-webkit-keyframes slide {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

@keyframes flashTrans
{
    0% {opacity: 1;}
    50% {opacity: 0.2;}
    100% {opacity: 1;}
}

@-webkit-keyframes flashTrans /* Safari and Chrome */
{
    0% {opacity: 1;}
    50% {opacity: 0.2;}
    100% {opacity: 1;}
}

@keyframes grow
{
    0% {-webkit-transform: scale(0.9);}
    50% {-webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(0.9);}
}

@-webkit-keyframes grow /* Safari and Chrome */
{
    0% {-webkit-transform: scale(0.9);}
    50% {-webkit-transform: scale(1.05);}
    100% {-webkit-transform: scale(0.9);}
}


@keyframes flashTrans1
{
    0% {opacity: 1;}
    50% {opacity: 0.75;}
    100% {opacity: 1;}
}

@-webkit-keyframes flashTrans1 /* Safari and Chrome */
{
    0% {opacity: 1;}
    50% {opacity: 0.75;}
    100% {opacity: 1;}
}

@keyframes flash
{
    0% {
        color:#fff;
    }
    50% {
        color:#FF6464;
    }
    100% {
        color:#fff;
    }
}

@-webkit-keyframes flash /* Safari and Chrome */
{
    0% {
        color:#fff;
    }
    50% {
        color:#FF6464;
    }
    100% {
        color:#fff;
    }
}


@-webkit-keyframes blink {
	0%,50%,100% {
		color:#573D0E
	}
	
	25%,75% {
		color:#362404;
	}
}

@keyframes blink {
	0%,50%,100% {
		color:#573D0E;
	}
	
	25%,75% {
		color:#362404;
	}
}


@-webkit-keyframes clearBink {
	0%,50%,100% {
		opacity: 0
	}
	
	25%,75% {
		opacity:1 
	}
}

@keyframes clearBink {
	0%,50%,100% {
		opacity: 0
	}
	
	25%,75% {
		opacity:1 
	}
}

.animateBlinkTwice{
	-webkit-animation-name: flashTrans;
    -webkit-animation-duration: 0.25s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 2;

    -moz-animation-name: flashTrans;
    -moz-animation-duration: 0.25s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 2;

    animation-name: flashTrans;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    animation-iteration-count: 2;
}
.animateBlink{
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;

	-webkit-animation:blink 1.5s infinite;
	-moz-animation:blink 1.5s infinite;
	-o-animation:blink 1.5s infinite;
	animation:blink 1.5s infinite;
}
.animateGrow{
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;

	-webkit-animation:grow 1.5s infinite;
	-moz-animation:grow 1.5s infinite;
	-o-animation:grow 1.5s infinite;
	animation:grow 1.5s infinite;
}


.animateClearBlink{
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;

	-webkit-animation:clearBink .5s infinite;
	-moz-animation:clearBink .5s infinite;
	-o-animation:clearBink .5s infinite;
	animation:clearBink .5s infinite;
}

.ribbon1 {
  	font-family: 'yanone';
  	font-size:1.3em;
	position: relative;
	background: #E06161;
	color: #fff;
	text-align: center;
	padding: 0.2em 0.5em;
	width: 50%;
	margin: 1em auto;
	text-shadow: 0px 1px 1px #C52323;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ribbon1:before, .ribbon1:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -0.5em;
  border: 1em solid #DB4545;
  z-index: -1;
}
.ribbon1:before {
  left: -2em;
  border-right-width: 2em;
  border-left-color: transparent;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.46);
}
.ribbon1:after {
  right: -2em;
  border-left-width: 2em;
  border-right-color: transparent;
  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.46);
}
.ribbon1 .ribbon1-content:before, .ribbon1 .ribbon1-content:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #C52323 transparent transparent transparent;
  bottom: -0.5em;
}
.ribbon1 .ribbon1-content:before {
  left: 0.5em;
	border-width: 0.5em 0 0 0.5em;
}
.ribbon1 .ribbon1-content:after {
  right: 0.5em;
  border-width: 0.5em 0.5em 0 0;
}


/* 
 * Foundation Icons v 3.0
 * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
 * MIT License
 */

/*
@font-face {
  font-family: "foundation-icons";
  src: url("../fonts/foundation-icons.eot");
  src: url("../fonts/foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("../fonts/foundation-icons.woff") format("woff"),
       url("../fonts/foundation-icons.ttf") format("truetype"),
       url("../fonts/foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}
*/

.fi-address-book:before,
.fi-alert:before,
.fi-align-center:before,
.fi-align-justify:before,
.fi-align-left:before,
.fi-align-right:before,
.fi-anchor:before,
.fi-annotate:before,
.fi-archive:before,
.fi-arrow-down:before,
.fi-arrow-left:before,
.fi-arrow-right:before,
.fi-arrow-up:before,
.fi-arrows-compress:before,
.fi-arrows-expand:before,
.fi-arrows-in:before,
.fi-arrows-out:before,
.fi-asl:before,
.fi-asterisk:before,
.fi-at-sign:before,
.fi-background-color:before,
.fi-battery-empty:before,
.fi-battery-full:before,
.fi-battery-half:before,
.fi-bitcoin-circle:before,
.fi-bitcoin:before,
.fi-blind:before,
.fi-bluetooth:before,
.fi-bold:before,
.fi-book-bookmark:before,
.fi-book:before,
.fi-bookmark:before,
.fi-braille:before,
.fi-burst-new:before,
.fi-burst-sale:before,
.fi-burst:before,
.fi-calendar:before,
.fi-camera:before,
.fi-check:before,
.fi-checkbox:before,
.fi-clipboard-notes:before,
.fi-clipboard-pencil:before,
.fi-clipboard:before,
.fi-clock:before,
.fi-closed-caption:before,
.fi-cloud:before,
.fi-comment-minus:before,
.fi-comment-quotes:before,
.fi-comment-video:before,
.fi-comment:before,
.fi-comments:before,
.fi-compass:before,
.fi-contrast:before,
.fi-credit-card:before,
.fi-crop:before,
.fi-crown:before,
.fi-css3:before,
.fi-database:before,
.fi-die-five:before,
.fi-die-four:before,
.fi-die-one:before,
.fi-die-six:before,
.fi-die-three:before,
.fi-die-two:before,
.fi-dislike:before,
.fi-dollar-bill:before,
.fi-dollar:before,
.fi-download:before,
.fi-eject:before,
.fi-elevator:before,
.fi-euro:before,
.fi-eye:before,
.fi-fast-forward:before,
.fi-female-symbol:before,
.fi-female:before,
.fi-filter:before,
.fi-first-aid:before,
.fi-flag:before,
.fi-folder-add:before,
.fi-folder-lock:before,
.fi-folder:before,
.fi-foot:before,
.fi-foundation:before,
.fi-graph-bar:before,
.fi-graph-horizontal:before,
.fi-graph-pie:before,
.fi-graph-trend:before,
.fi-guide-dog:before,
.fi-hearing-aid:before,
.fi-heart:before,
.fi-home:before,
.fi-html5:before,
.fi-indent-less:before,
.fi-indent-more:before,
.fi-info:before,
.fi-italic:before,
.fi-key:before,
.fi-laptop:before,
.fi-layout:before,
.fi-lightbulb:before,
.fi-like:before,
.fi-link:before,
.fi-list-bullet:before,
.fi-list-number:before,
.fi-list-thumbnails:before,
.fi-list:before,
.fi-lock:before,
.fi-loop:before,
.fi-magnifying-glass:before,
.fi-mail:before,
.fi-male-female:before,
.fi-male-symbol:before,
.fi-male:before,
.fi-map:before,
.fi-marker:before,
.fi-megaphone:before,
.fi-microphone:before,
.fi-minus-circle:before,
.fi-minus:before,
.fi-mobile-signal:before,
.fi-mobile:before,
.fi-monitor:before,
.fi-mountains:before,
.fi-music:before,
.fi-next:before,
.fi-no-dogs:before,
.fi-no-smoking:before,
.fi-page-add:before,
.fi-page-copy:before,
.fi-page-csv:before,
.fi-page-delete:before,
.fi-page-doc:before,
.fi-page-edit:before,
.fi-page-export-csv:before,
.fi-page-export-doc:before,
.fi-page-export-pdf:before,
.fi-page-export:before,
.fi-page-filled:before,
.fi-page-multiple:before,
.fi-page-pdf:before,
.fi-page-remove:before,
.fi-page-search:before,
.fi-page:before,
.fi-paint-bucket:before,
.fi-paperclip:before,
.fi-pause:before,
.fi-paw:before,
.fi-paypal:before,
.fi-pencil:before,
.fi-photo:before,
.fi-play-circle:before,
.fi-play-video:before,
.fi-play:before,
.fi-plus:before,
.fi-pound:before,
.fi-power:before,
.fi-previous:before,
.fi-price-tag:before,
.fi-pricetag-multiple:before,
.fi-print:before,
.fi-prohibited:before,
.fi-projection-screen:before,
.fi-puzzle:before,
.fi-quote:before,
.fi-record:before,
.fi-refresh:before,
.fi-results-demographics:before,
.fi-results:before,
.fi-rewind-ten:before,
.fi-rewind:before,
.fi-rss:before,
.fi-safety-cone:before,
.fi-save:before,
.fi-share:before,
.fi-sheriff-badge:before,
.fi-shield:before,
.fi-shopping-bag:before,
.fi-shopping-cart:before,
.fi-shuffle:before,
.fi-skull:before,
.fi-social-500px:before,
.fi-social-adobe:before,
.fi-social-amazon:before,
.fi-social-android:before,
.fi-social-apple:before,
.fi-social-behance:before,
.fi-social-bing:before,
.fi-social-blogger:before,
.fi-social-delicious:before,
.fi-social-designer-news:before,
.fi-social-deviant-art:before,
.fi-social-digg:before,
.fi-social-dribbble:before,
.fi-social-drive:before,
.fi-social-dropbox:before,
.fi-social-evernote:before,
.fi-social-facebook:before,
.fi-social-flickr:before,
.fi-social-forrst:before,
.fi-social-foursquare:before,
.fi-social-game-center:before,
.fi-social-github:before,
.fi-social-google-plus:before,
.fi-social-hacker-news:before,
.fi-social-hi5:before,
.fi-social-instagram:before,
.fi-social-joomla:before,
.fi-social-lastfm:before,
.fi-social-linkedin:before,
.fi-social-medium:before,
.fi-social-myspace:before,
.fi-social-orkut:before,
.fi-social-path:before,
.fi-social-picasa:before,
.fi-social-pinterest:before,
.fi-social-rdio:before,
.fi-social-reddit:before,
.fi-social-skillshare:before,
.fi-social-skype:before,
.fi-social-smashing-mag:before,
.fi-social-snapchat:before,
.fi-social-spotify:before,
.fi-social-squidoo:before,
.fi-social-stack-overflow:before,
.fi-social-steam:before,
.fi-social-stumbleupon:before,
.fi-social-treehouse:before,
.fi-social-tumblr:before,
.fi-social-twitter:before,
.fi-social-vimeo:before,
.fi-social-windows:before,
.fi-social-xbox:before,
.fi-social-yahoo:before,
.fi-social-yelp:before,
.fi-social-youtube:before,
.fi-social-zerply:before,
.fi-social-zurb:before,
.fi-sound:before,
.fi-star:before,
.fi-stop:before,
.fi-strikethrough:before,
.fi-subscript:before,
.fi-superscript:before,
.fi-tablet-landscape:before,
.fi-tablet-portrait:before,
.fi-target-two:before,
.fi-target:before,
.fi-telephone-accessible:before,
.fi-telephone:before,
.fi-text-color:before,
.fi-thumbnails:before,
.fi-ticket:before,
.fi-torso-business:before,
.fi-torso-female:before,
.fi-torso:before,
.fi-torsos-all-female:before,
.fi-torsos-all:before,
.fi-torsos-female-male:before,
.fi-torsos-male-female:before,
.fi-torsos:before,
.fi-trash:before,
.fi-trees:before,
.fi-trophy:before,
.fi-underline:before,
.fi-universal-access:before,
.fi-unlink:before,
.fi-unlock:before,
.fi-upload-cloud:before,
.fi-upload:before,
.fi-usb:before,
.fi-video:before,
.fi-volume-none:before,
.fi-volume-strike:before,
.fi-volume:before,
.fi-web:before,
.fi-wheelchair:before,
.fi-widget:before,
.fi-wrench:before,
.fi-x-circle:before,
.fi-x:before,
.fi-yen:before,
.fi-zoom-in:before,
.fi-zoom-out:before {
  font-family: "foundation-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.fi-address-book:before { content: "\f100"; }
.fi-alert:before { content: "\f101"; }
.fi-align-center:before { content: "\f102"; }
.fi-align-justify:before { content: "\f103"; }
.fi-align-left:before { content: "\f104"; }
.fi-align-right:before { content: "\f105"; }
.fi-anchor:before { content: "\f106"; }
.fi-annotate:before { content: "\f107"; }
.fi-archive:before { content: "\f108"; }
.fi-arrow-down:before { content: "\f109"; }
.fi-arrow-left:before { content: "\f10a"; }
.fi-arrow-right:before { content: "\f10b"; }
.fi-arrow-up:before { content: "\f10c"; }
.fi-arrows-compress:before { content: "\f10d"; }
.fi-arrows-expand:before { content: "\f10e"; }
.fi-arrows-in:before { content: "\f10f"; }
.fi-arrows-out:before { content: "\f110"; }
.fi-asl:before { content: "\f111"; }
.fi-asterisk:before { content: "\f112"; }
.fi-at-sign:before { content: "\f113"; }
.fi-background-color:before { content: "\f114"; }
.fi-battery-empty:before { content: "\f115"; }
.fi-battery-full:before { content: "\f116"; }
.fi-battery-half:before { content: "\f117"; }
.fi-bitcoin-circle:before { content: "\f118"; }
.fi-bitcoin:before { content: "\f119"; }
.fi-blind:before { content: "\f11a"; }
.fi-bluetooth:before { content: "\f11b"; }
.fi-bold:before { content: "\f11c"; }
.fi-book-bookmark:before { content: "\f11d"; }
.fi-book:before { content: "\f11e"; }
.fi-bookmark:before { content: "\f11f"; }
.fi-braille:before { content: "\f120"; }
.fi-burst-new:before { content: "\f121"; }
.fi-burst-sale:before { content: "\f122"; }
.fi-burst:before { content: "\f123"; }
.fi-calendar:before { content: "\f124"; }
.fi-camera:before { content: "\f125"; }
.fi-check:before { content: "\f126"; }
.fi-checkbox:before { content: "\f127"; }
.fi-clipboard-notes:before { content: "\f128"; }
.fi-clipboard-pencil:before { content: "\f129"; }
.fi-clipboard:before { content: "\f12a"; }
.fi-clock:before { content: "\f12b"; }
.fi-closed-caption:before { content: "\f12c"; }
.fi-cloud:before { content: "\f12d"; }
.fi-comment-minus:before { content: "\f12e"; }
.fi-comment-quotes:before { content: "\f12f"; }
.fi-comment-video:before { content: "\f130"; }
.fi-comment:before { content: "\f131"; }
.fi-comments:before { content: "\f132"; }
.fi-compass:before { content: "\f133"; }
.fi-contrast:before { content: "\f134"; }
.fi-credit-card:before { content: "\f135"; }
.fi-crop:before { content: "\f136"; }
.fi-crown:before { content: "\f137"; }
.fi-css3:before { content: "\f138"; }
.fi-database:before { content: "\f139"; }
.fi-die-five:before { content: "\f13a"; }
.fi-die-four:before { content: "\f13b"; }
.fi-die-one:before { content: "\f13c"; }
.fi-die-six:before { content: "\f13d"; }
.fi-die-three:before { content: "\f13e"; }
.fi-die-two:before { content: "\f13f"; }
.fi-dislike:before { content: "\f140"; }
.fi-dollar-bill:before { content: "\f141"; }
.fi-dollar:before { content: "\f142"; }
.fi-download:before { content: "\f143"; }
.fi-eject:before { content: "\f144"; }
.fi-elevator:before { content: "\f145"; }
.fi-euro:before { content: "\f146"; }
.fi-eye:before { content: "\f147"; }
.fi-fast-forward:before { content: "\f148"; }
.fi-female-symbol:before { content: "\f149"; }
.fi-female:before { content: "\f14a"; }
.fi-filter:before { content: "\f14b"; }
.fi-first-aid:before { content: "\f14c"; }
.fi-flag:before { content: "\f14d"; }
.fi-folder-add:before { content: "\f14e"; }
.fi-folder-lock:before { content: "\f14f"; }
.fi-folder:before { content: "\f150"; }
.fi-foot:before { content: "\f151"; }
.fi-foundation:before { content: "\f152"; }
.fi-graph-bar:before { content: "\f153"; }
.fi-graph-horizontal:before { content: "\f154"; }
.fi-graph-pie:before { content: "\f155"; }
.fi-graph-trend:before { content: "\f156"; }
.fi-guide-dog:before { content: "\f157"; }
.fi-hearing-aid:before { content: "\f158"; }
.fi-heart:before { content: "\f159"; }
.fi-home:before { content: "\f15a"; }
.fi-html5:before { content: "\f15b"; }
.fi-indent-less:before { content: "\f15c"; }
.fi-indent-more:before { content: "\f15d"; }
.fi-info:before { content: "\f15e"; }
.fi-italic:before { content: "\f15f"; }
.fi-key:before { content: "\f160"; }
.fi-laptop:before { content: "\f161"; }
.fi-layout:before { content: "\f162"; }
.fi-lightbulb:before { content: "\f163"; }
.fi-like:before { content: "\f164"; }
.fi-link:before { content: "\f165"; }
.fi-list-bullet:before { content: "\f166"; }
.fi-list-number:before { content: "\f167"; }
.fi-list-thumbnails:before { content: "\f168"; }
.fi-list:before { content: "\f169"; }
.fi-lock:before { content: "\f16a"; }
.fi-loop:before { content: "\f16b"; }
.fi-magnifying-glass:before { content: "\f16c"; }
.fi-mail:before { content: "\f16d"; }
.fi-male-female:before { content: "\f16e"; }
.fi-male-symbol:before { content: "\f16f"; }
.fi-male:before { content: "\f170"; }
.fi-map:before { content: "\f171"; }
.fi-marker:before { content: "\f172"; }
.fi-megaphone:before { content: "\f173"; }
.fi-microphone:before { content: "\f174"; }
.fi-minus-circle:before { content: "\f175"; }
.fi-minus:before { content: "\f176"; }
.fi-mobile-signal:before { content: "\f177"; }
.fi-mobile:before { content: "\f178"; }
.fi-monitor:before { content: "\f179"; }
.fi-mountains:before { content: "\f17a"; }
.fi-music:before { content: "\f17b"; }
.fi-next:before { content: "\f17c"; }
.fi-no-dogs:before { content: "\f17d"; }
.fi-no-smoking:before { content: "\f17e"; }
.fi-page-add:before { content: "\f17f"; }
.fi-page-copy:before { content: "\f180"; }
.fi-page-csv:before { content: "\f181"; }
.fi-page-delete:before { content: "\f182"; }
.fi-page-doc:before { content: "\f183"; }
.fi-page-edit:before { content: "\f184"; }
.fi-page-export-csv:before { content: "\f185"; }
.fi-page-export-doc:before { content: "\f186"; }
.fi-page-export-pdf:before { content: "\f187"; }
.fi-page-export:before { content: "\f188"; }
.fi-page-filled:before { content: "\f189"; }
.fi-page-multiple:before { content: "\f18a"; }
.fi-page-pdf:before { content: "\f18b"; }
.fi-page-remove:before { content: "\f18c"; }
.fi-page-search:before { content: "\f18d"; }
.fi-page:before { content: "\f18e"; }
.fi-paint-bucket:before { content: "\f18f"; }
.fi-paperclip:before { content: "\f190"; }
.fi-pause:before { content: "\f191"; }
.fi-paw:before { content: "\f192"; }
.fi-paypal:before { content: "\f193"; }
.fi-pencil:before { content: "\f194"; }
.fi-photo:before { content: "\f195"; }
.fi-play-circle:before { content: "\f196"; }
.fi-play-video:before { content: "\f197"; }
.fi-play:before { content: "\f198"; }
.fi-plus:before { content: "\f199"; }
.fi-pound:before { content: "\f19a"; }
.fi-power:before { content: "\f19b"; }
.fi-previous:before { content: "\f19c"; }
.fi-price-tag:before { content: "\f19d"; }
.fi-pricetag-multiple:before { content: "\f19e"; }
.fi-print:before { content: "\f19f"; }
.fi-prohibited:before { content: "\f1a0"; }
.fi-projection-screen:before { content: "\f1a1"; }
.fi-puzzle:before { content: "\f1a2"; }
.fi-quote:before { content: "\f1a3"; }
.fi-record:before { content: "\f1a4"; }
.fi-refresh:before { content: "\f1a5"; }
.fi-results-demographics:before { content: "\f1a6"; }
.fi-results:before { content: "\f1a7"; }
.fi-rewind-ten:before { content: "\f1a8"; }
.fi-rewind:before { content: "\f1a9"; }
.fi-rss:before { content: "\f1aa"; }
.fi-safety-cone:before { content: "\f1ab"; }
.fi-save:before { content: "\f1ac"; }
.fi-share:before { content: "\f1ad"; }
.fi-sheriff-badge:before { content: "\f1ae"; }
.fi-shield:before { content: "\f1af"; }
.fi-shopping-bag:before { content: "\f1b0"; }
.fi-shopping-cart:before { content: "\f1b1"; }
.fi-shuffle:before { content: "\f1b2"; }
.fi-skull:before { content: "\f1b3"; }
.fi-social-500px:before { content: "\f1b4"; }
.fi-social-adobe:before { content: "\f1b5"; }
.fi-social-amazon:before { content: "\f1b6"; }
.fi-social-android:before { content: "\f1b7"; }
.fi-social-apple:before { content: "\f1b8"; }
.fi-social-behance:before { content: "\f1b9"; }
.fi-social-bing:before { content: "\f1ba"; }
.fi-social-blogger:before { content: "\f1bb"; }
.fi-social-delicious:before { content: "\f1bc"; }
.fi-social-designer-news:before { content: "\f1bd"; }
.fi-social-deviant-art:before { content: "\f1be"; }
.fi-social-digg:before { content: "\f1bf"; }
.fi-social-dribbble:before { content: "\f1c0"; }
.fi-social-drive:before { content: "\f1c1"; }
.fi-social-dropbox:before { content: "\f1c2"; }
.fi-social-evernote:before { content: "\f1c3"; }
.fi-social-facebook:before { content: "\f1c4"; }
.fi-social-flickr:before { content: "\f1c5"; }
.fi-social-forrst:before { content: "\f1c6"; }
.fi-social-foursquare:before { content: "\f1c7"; }
.fi-social-game-center:before { content: "\f1c8"; }
.fi-social-github:before { content: "\f1c9"; }
.fi-social-google-plus:before { content: "\f1ca"; }
.fi-social-hacker-news:before { content: "\f1cb"; }
.fi-social-hi5:before { content: "\f1cc"; }
.fi-social-instagram:before { content: "\f1cd"; }
.fi-social-joomla:before { content: "\f1ce"; }
.fi-social-lastfm:before { content: "\f1cf"; }
.fi-social-linkedin:before { content: "\f1d0"; }
.fi-social-medium:before { content: "\f1d1"; }
.fi-social-myspace:before { content: "\f1d2"; }
.fi-social-orkut:before { content: "\f1d3"; }
.fi-social-path:before { content: "\f1d4"; }
.fi-social-picasa:before { content: "\f1d5"; }
.fi-social-pinterest:before { content: "\f1d6"; }
.fi-social-rdio:before { content: "\f1d7"; }
.fi-social-reddit:before { content: "\f1d8"; }
.fi-social-skillshare:before { content: "\f1d9"; }
.fi-social-skype:before { content: "\f1da"; }
.fi-social-smashing-mag:before { content: "\f1db"; }
.fi-social-snapchat:before { content: "\f1dc"; }
.fi-social-spotify:before { content: "\f1dd"; }
.fi-social-squidoo:before { content: "\f1de"; }
.fi-social-stack-overflow:before { content: "\f1df"; }
.fi-social-steam:before { content: "\f1e0"; }
.fi-social-stumbleupon:before { content: "\f1e1"; }
.fi-social-treehouse:before { content: "\f1e2"; }
.fi-social-tumblr:before { content: "\f1e3"; }
.fi-social-twitter:before { content: "\f1e4"; }
.fi-social-vimeo:before { content: "\f1e5"; }
.fi-social-windows:before { content: "\f1e6"; }
.fi-social-xbox:before { content: "\f1e7"; }
.fi-social-yahoo:before { content: "\f1e8"; }
.fi-social-yelp:before { content: "\f1e9"; }
.fi-social-youtube:before { content: "\f1ea"; }
.fi-social-zerply:before { content: "\f1eb"; }
.fi-social-zurb:before { content: "\f1ec"; }
.fi-sound:before { content: "\f1ed"; }
.fi-star:before { content: "\f1ee"; }
.fi-stop:before { content: "\f1ef"; }
.fi-strikethrough:before { content: "\f1f0"; }
.fi-subscript:before { content: "\f1f1"; }
.fi-superscript:before { content: "\f1f2"; }
.fi-tablet-landscape:before { content: "\f1f3"; }
.fi-tablet-portrait:before { content: "\f1f4"; }
.fi-target-two:before { content: "\f1f5"; }
.fi-target:before { content: "\f1f6"; }
.fi-telephone-accessible:before { content: "\f1f7"; }
.fi-telephone:before { content: "\f1f8"; }
.fi-text-color:before { content: "\f1f9"; }
.fi-thumbnails:before { content: "\f1fa"; }
.fi-ticket:before { content: "\f1fb"; }
.fi-torso-business:before { content: "\f1fc"; }
.fi-torso-female:before { content: "\f1fd"; }
.fi-torso:before { content: "\f1fe"; }
.fi-torsos-all-female:before { content: "\f1ff"; }
.fi-torsos-all:before { content: "\f200"; }
.fi-torsos-female-male:before { content: "\f201"; }
.fi-torsos-male-female:before { content: "\f202"; }
.fi-torsos:before { content: "\f203"; }
.fi-trash:before { content: "\f204"; }
.fi-trees:before { content: "\f205"; }
.fi-trophy:before { content: "\f206"; }
.fi-underline:before { content: "\f207"; }
.fi-universal-access:before { content: "\f208"; }
.fi-unlink:before { content: "\f209"; }
.fi-unlock:before { content: "\f20a"; }
.fi-upload-cloud:before { content: "\f20b"; }
.fi-upload:before { content: "\f20c"; }
.fi-usb:before { content: "\f20d"; }
.fi-video:before { content: "\f20e"; }
.fi-volume-none:before { content: "\f20f"; }
.fi-volume-strike:before { content: "\f210"; }
.fi-volume:before { content: "\f211"; }
.fi-web:before { content: "\f212"; }
.fi-wheelchair:before { content: "\f213"; }
.fi-widget:before { content: "\f214"; }
.fi-wrench:before { content: "\f215"; }
.fi-x-circle:before { content: "\f216"; }
.fi-x:before { content: "\f217"; }
.fi-yen:before { content: "\f218"; }
.fi-zoom-in:before { content: "\f219"; }
.fi-zoom-out:before { content: "\f21a"; }

.scroller {
    width: 100%;
}

.gc_ibutton * {
    box-sizing: border-box;
}

#mel.newbie {
    bottom: 0;
}
#mel > * {
    position: absolute;
}
#mel .paybutton {
    top: 0; right: 1%;
    color: white;
    font-family: 'maiden', san-serif;
    text-align: center;
}
#mel .knobBG {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid white;
}
#hay {
    left: 0; right: 0;
    bottom: 0;
}
#hay > * {
    position: absolute;
}
#hay .num {
    position: relative;
    left: 10%;
    top: 20%;
    height: 60%;
}
#silo > * {
    position: absolute;
}
#silo .reel {
    background-color: white;
    overflow: hidden;
}
#silo .meter {
    border:3px solid #414148;
    border-radius: 8px;
}
#silo .filler {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#silo .marker {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: white;
    left: 0;
    overflow: hidden;
}
#silo .marker.m33 {
    bottom: 66%;
}
#silo .marker.m66 {
    bottom: 33%;
}
#silo .counter {
    padding-top: 4.5%;
    padding-left: 3%;
    color: white;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    text-align: center;
    font-family: maiden;
    text-shadow: 0 1px 1px #3e3b43;
}
#silo .nextspin {
    font-family: maiden;
    color: white;
    text-shadow: 2px 0 1px #47444d, 2px 2px 1px #47444d, 0 2px 1px #47444d, -2px 2px 1px #47444d, -2px 0 1px #47444d, -2px -2px 1px #47444d, 0 -2px 1px #47444d, 2px -2px 1px #47444d;
    -webkit-transform:skew(0deg, -15deg);
    line-height: 90%;
}
#silo .nextspin div:last-child {
    text-align: right;
}
#silo .day {
    position: absolute;
    left: 0;
    right: 0;
    font-family: maiden;
    color: white;
    text-shadow: 2px 0 1px #47444d, 2px 2px 1px #47444d, 0 2px 1px #47444d, -2px 2px 1px #47444d, -2px 0 1px #47444d, -2px -2px 1px #47444d, 0 -2px 1px #47444d, 2px -2px 1px #47444d;
    -webkit-transform:skew(0deg, -15deg);
    text-align: center;
}

/* winnings */
#winnings {
    position: absolute;
    background-color: black;
    color: white;
    font-size: 1.5em;
    padding: 1em;
    border-radius: 0.5em;
    border: 5px solid yellow;
    display: inline-block;
}

/* invites */
#invites {
    background-color: #b5d448;
    color: #3a3a3a;
    font-weight: bold;
    margin: 2em;
    border-radius: 0.25em;
    box-shadow: 0 5px 10px #3a3a3a;
    -webkit-box-shadow: 0 5px 10px #3a3a3a;
}
#invites .title {
    padding: 0.75em 1em;
    font-size: 1.2em;
}
#invites .row {
    position: relative;
    height: 3em;
    padding: 0.25em;
    width: auto;
    display: block;
}
#invites .row.gc_focus, #invites .row.gc_focus:nth-child(2n+1) {
    background-color: #90b22d;
}
#invites .row > * {
    vertical-align:middle;
}
#invites .row span {
    font-size: 0.8em;
}
#invites .row .icon {
    height: 2.5em;
    margin-right: 0.5em;
}
#invites .row .arrow {
    height: 2em;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}
    
#invites .row span {
    font-size: 0.8em;
}
#invites .row:nth-child(2n+1) {
    background-color: #a0c632;
}
#invites .row:last-child {
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
}

#chooser {
    background-color: #b5d448;
    position: absolute;
    left: 1em; right: 1em;
    top: 1em; bottom: 1em;
    text-align: center;
}
#chooser .title {
    height: 3em;
    overflow: hidden;
    background-color: #31d5f8;
    border-bottom: 1px solid #787878;
    padding: 0;
}
#chooser .title .selectall {
    position: absolute;
    right: 0.5em;
    height: 2em;
}
#chooser .title .selectall .text {
    font-size: 0.8em;
    padding: 0.5em 0.25em;
}
#chooser .title .back {
    left: 0;
}
#chooser .title .gc_ibutton {
    position: absolute;
    top: 0.5em;
}
#chooser .title .back .text {
    color: #115467;
    font-size: 0.8em;
    padding: 0.75em 1em 0.75em 0.5em;
}
#chooser .title span {
    position: relative;
    top: 1em;
}
#chooser .gc_ibutton {
    margin: 0;
}
#chooser .head {
}
#chooser .row {
    height: auto;
    text-align: left;
    border-top: 1px solid #a0c139;
    border-bottom: 1px solid #89ad28;
    padding: 0; 
    margin: 0 0.25em;
    display: block;
    width: auto;
}
#chooser .row:first-child {
    border-top: 0;
}
#chooser .row:last-child {
    border-bottom: 0;
}
#chooser .name {
    font-weight: bold;
    padding: 0.25em;
    text-align: left;
    color: #3a3a3a;
}
#chooser .contact {
    font-size: 0.8em;
}
#chooser .check {
    color: #527c00;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    height: 2em;
}
#chooser.phones .check {
    display: inline-block;
    width: 50%;
}
#chooser .check > * {
    display: inline-block;
    vertical-align: middle;
}
#chooser .check .icon {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    margin: 0.25em;
}
#chooser .footer {
    position: relative;
}
#chooser .wave {
    position: absolute;
    top: -0.5em;
    height: 1em;
    left: 0;
    right: 0;
}
.chooserbutton {
    display: inline-block;
    width: 50%;
    position: relative;
    height: 2.5em;
    font-size: 1.2em;
}
.chooserbutton.gc_focus {
    background-color: #90b22d;
}
.chooserbutton:first-child {
    border-right: 1px solid #527c00;
    width: 49%;
}
.chooserbutton:nth-child(2) {
    background-color: #589c00;
    color: white;
    text-transform: uppercase;
}

.chooserbutton:nth-child(2).gc_focus {
    background-color: #427500;
}
.chooserbutton span {
    position: relative;
    top: 1em;
    font-weight: bold;
    font-size: 0.8em;
}
.chooserbutton img {
    position: absolute;
    height: 1.5em;
    width: auto;
    top: 0.75em;
}    
.chooserbutton:first-child img {
    left: 0.5em;
}
.chooserbutton:nth-child(2) img {
    right: 0.5em;
}

/* invite help dialog */
#invitehelp {
    position: absolute;
    width: 80%;
    max-width: 18em;
    text-align: center;
    border-radius: 0.25em;
    box-shadow: 0 5px 10px #3a3a3a;
    -webkit-box-shadow: 0 5px 10px #3a3a3a;
    background-color: #b5d448;
}
#invitehelp .title {
    border-top: 2px solid #4d1916;
    border-bottom: 2px solid #4d1916;
    padding: 0.25em 0;
    margin: 0 1em 1em;
}
#invitehelp .title2 {
    border-top: 1px solid #4d1916;
    border-bottom: 1px solid #4d1916;
    padding: 0.15em;
    font-family: tiza;
    color: #4d1916;
    line-height: 1em;
}
#invitehelp .pin {
    height: 2em;
    width: auto;
}
#invitehelp .top {
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
}
#invitehelp.Super .top {
    background-color: #f0f1a5;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe064),color-stop(1,#f0f1a5)); 
}
#invitehelp.Daily .top {
    background-color: #9dedec;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#84e6ff),color-stop(1,#9dedec)); 
}
#invitehelp .background {
    width: 100%;
    height: auto;
}
#invitehelp .msg {
    color:#527c00;
    font-size: 0.8em;
    padding:0 1em;
}
#invitehelp .gc_ibutton {
    margin: 0.25em 1em;
    width: 60%;
}
#invitehelp .gc_ibutton:last-child {
    margin-bottom: 1em;
}
#melchat {
    font-family: maiden;
    color: #4d1916;
    position: absolute;
    width: 90%;
    left: 5%;
    top: 10%;
}
#melchat .center {
    background-color: #fff7f2;
}
#melchat .msg {
    position: absolute;
    left:0; top: 0; right: 0;
    padding: 1em;
    font-size: 1.2em;
}
#melchat .msg .click {
    position: relative;
    font-size: 0.7em;
    color: #dcc27c;
    margin-top: 0.5em;
    font-family:arial;
}
#melchat .down {
    position: absolute;
    height: 0.5em;
    width: auto;
    top: 0.5em;
    right: 0.5em;
}

#melchat .tail {
    position: absolute;
    left: 35%;
    bottom: -1.2em;
    height: 1.5em;
}

/* paytable */
#paytable {
    position: absolute;
    font-family: "yanone", "oxygen", sans-serif;
    background-color: #a0c632;
    color: #3a3a3a;
    border-radius: 0.25em;
    width: 90%;
    max-width: 18rem;
}
#paytable .title {
    text-align: center;
    padding: 0.5em;
    background-color: #dfea60;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    border-bottom: 2px solid #96c33d;
    font-size: 1.4rem;
}
#paytable .row {
    position: relative;
    padding: 0.25em 0.5em;
    height: 4em;
}
#paytable .row:nth-child(2n+1) {
    background-color: #b5d448;
}
#paytable .row.gc_focus, #paytable .row:nth-child(2n+1).gc_focus {
    background-color: #90b22d;
}
#paytable .row > * {
    vertical-align: middle;
}
#paytable .row img.icon {
    height: 3.5em;
    margin-right: 0.5em;
}
#paytable .row img.arrow {
    position: absolute;
    right: 1em;
    height: 2em;
    top: 1em;
}
#paytable .row.loading {
    text-align: center;
}
#paytable .row.loading img {
    width: 2em;
    height: 2em;
    margin-top: 0.5em;
}
#paytable span {
    font-size: 1.5em;
}
#paytable .contents {
    position: relative;
    overflow: hidden;
}
#paytable .footer {
    position: relative;
    height: 1em;
}
#paytable .modalwave {
    position: absolute;
    bottom: 0; left: 0; right: 0; 
}
#paytable .prize {
    position: absolute;
    left:100%; width:100%; top: 0; bottom: 0;
}
#paytable .gc_ibutton {
    position: absolute;
    left: -1em;
    top: 0.5em;
    margin: 0;
}
#paytable .gc_ibutton .text {
    padding: 0.5em;
}

/* loots */
#loots {
    text-align: center;
    max-width: 680px;
    margin: auto;
}
#loots .bags .bag {
    display: inline-block;
    font-family: maiden;
    color: white;
    width: 25%;
    margin: 3%;
    text-align: center;
    position: relative;
}
#loots .bag span {
    position: relative;
}
#loots .bag img {
    position: absolute;
    left: 0; top: -2%;
    width: 100%;
    height: auto;
}
#loots .win {
    display: inline-block;
    position: relative;
    width: 80%;
}
#loots .light {
    position: absolute;
    left:0; top:0;
    width: 100%; height: 100%;
}
#loots .waters {
    position: absolute;
    overflow: hidden;
    text-align: center;
}
#loots .waters > * {
    position: absolute;
    height: 200%;
    bottom: 100%;
}
#loots .water:first-child {
    left: 10%;
    width: 80%;
}
#loots .water:nth-child(2) {
    width: 100%;
}
#loots .water:nth-child(3) {
    left: 5%;
    width: 90%;
}
#loots .wash {
    position: absolute;
    top: 25%;
    text-align: center;
}
#loots .wash > * {
    display: inline-block;
    font-weight: bold;
    font-family: 'maiden', san-serif;
    color: white;
    text-shadow: 2px 0 2px #2080d9, 2px 2px 2px #2080d9, 0 2px 2px #2080d9, -2px 2px 2px #2080d9, -2px 0 2px #2080d9, -2px -2px 2px #2080d9, 0 -2px 2px #2080d9, 2px -2px 2px #2080d9;
    text-align: center;
    font-size: 2em;
    line-height: 0.6em;
}


#loots .rotateR {
    -webkit-animation: rotateR 3s linear infinite;
}
#loots .rotateL {
    -webkit-animation: rotateL 6s linear infinite;
}
@keyframes rotateR {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@-webkit-keyframes rotateR {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes rotateL {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}
@-webkit-keyframes rotateL {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(-360deg); }
}

#loots .puff {
    position: absolute;
    height: auto;
}
#windlg {
    display: inline-block;
    font-family: yanone;
    background-color: #a0c632;
    position: absolute;
    text-align: center;
    color: #3a3a3a;
    width: 18em;
    max-width: 90%;
    border-radius: 0.25em;
}
#windlg .title {
    background-color: #b5d448;
    padding: 0.5em;
    font-size: 1.5em;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    border-bottom: 1px solid #90b22d;
}
#windlg.super {
    background-color: #f8ef86;
}
#windlg.super .title {
    background-color: #f5e844;
    border-bottom: 1px solid #e1ca3e;
}
#windlg .body {
    padding: 0 1em;
    margin: 0.5em;
}
#windlg p {
    margin: 1em 1em;
}
#windlg img {
    height: 4em;
    width: auto;
    margin-right: 0 0.25em;
}    
#windlg .gc_ibutton {
    margin-bottom: 0.5em;
}
#windlg .modalwave {
    margin-top: 0;
}


/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

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

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

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

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

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

/**
 * Re-set default cursor for disabled elements.
 */

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

/**
 * Remove inner padding and border in Firefox 4+.
 */

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

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

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

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

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

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

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

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}
/*/////////////
BBW CHAT OVERWRITES
////////////*/
#chats {
    padding-bottom: 0.5em;
}
#chat {
    padding-bottom: 1em;
}

#chats, #chat {
    height: 100%;
    box-sizing: border-box;
}

#chats .active {
	position: relative;
	background-color: #FFF7F2;
	color: #573d0e;
	padding: 0.25em;
	border-bottom: 2px dashed rgba(0,0,0,0.15);
}
#chats .active:last-child{
	border-bottom: 0;
}

#chats .active .name{
    font-family: 'yanone', san-serif;
    font-size: 1.6em;
}

#chats .hasNew .msg{
	font-family: 'oxygenBold', san-serif;
}

#chats .hasNew{
	/*background-color: #F5EBE5;*/
}

#chats canvas {
    margin: 0.25rem;
    width: 4rem;
    height: 4rem;
    display: block;
    margin-right: 0.5rem;
}

#chats .name {
    font-weight: bold;
}

#chats .date {
    padding-right: 0.25em;
    font-size: 0.8em;
}

#chats .hidebutton {
    margin: 0 0.25em;
    background-color: #A2241F;
    color: white;
}
#chats .hidebutton.gc_focus {
    background-color: #A72C26;
}
    
/* row displayed when there are no msgs */
#chats .emptylist {
    background-color: #fffcec;
    color: #573d0e;
    border: 2px solid #573d0e;
    border-radius: 0.5em;
    margin: 0.25em;
    padding: 0.25em;
    display: none;
}

#chat .message {
    margin: 0.25em;
}


#chat .atTage {
    display: inline-block;
}


#chat .message > * {
    vertical-align: top;
}

#chats .fi-megaphone {
    margin-right: 0.25em;
}


#chat .message.me {
    text-align: right;
}

#chat .bubble, #guild .bubble {
 	min-width: 40%;
	max-width: 80%;
	padding: 0.8em;
	margin: 0.25em;
	padding-bottom: 1em;
	position: relative;
	border-radius: 0.5em;
	background-color: #FFF7F2;
	box-shadow: 0 1px 2px rgba(87, 61, 14, 0.8);
}

#chat .bubble .msg, #guild .bubble .msg {
    text-align: left;
    line-height: 1.2em;
    color: #6B5444;
    font-family: 'oxygenBold', san-serif;
    padding-bottom: 0.25em;
}

#chat .bubble .date, #guild .bubble .date {
    position: absolute;
    bottom: 0;
    right: 0.5em;
    font-size: 0.7em;
    color: #AC9B8F;
}

#chats .create{
    margin: 0.5em;
    float: right;
}
#chats .badge {
	position: absolute;
    font-size: 1em;
    bottom: 0.5em;
    right: 0.5em;
    border-radius: 0.4em;
    background-color: rgba(0,0,0,0.1);
    text-align: center;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px white;
    color: rgba(0,0,0,0.5);
    padding: 0.2em 0.5em;
    font-family: oxygenBold;
    text-shadow: 0 1px 1px white;
}

#chat .portrait {
    width: 2.5em;
    height: 2.5em;
    box-shadow: 0 1px 2px rgba(87, 61, 14, 0.8);
    border-radius: 4px;
    margin: 0.25em;
}

#chat .emote, #chats .emote {
    display: inline-block;
    vertical-align: middle;
}


#chat .scroller {
    padding-top: 120%;
}

#chat .footer{
    padding: 0.5em;
}

#chat .footer > div {
    margin-right: 0.25em;
    padding: 0.25em 0.4em;
}

#chat .footer > div:last-child {
    margin-right: 0;
}

#chat .footer .gc_text{
    border: none;
    padding: 0;
    margin-right: 0.5em;
    height: 3.3em;
}


#chat .footer .gc_text.disabled{
    background-color: rgb(223, 223, 223);
}

#chat .footer .gc_text input{
    font-size: 1em;
    width: 95%;
}
#chats .chatHeader{
    background-color: #FFF7F2;
    padding: 0.25rem;
    padding-top: 0.5em;
}

#chats .gc_text{
    border: 0.125em solid #8B8B8B;
    border-radius: 0.5em;
}
#chats .button {
    margin: 0.25em;
    width: 4rem;
    text-align: center;
    height: 3rem;
    box-sizing: border-box;
}

#chats .button > * {
    vertical-align: middle;
}

#chats .searchInput{
    height: 3rem;
    box-sizing: border-box;
}

#chats .searchInput input{
    font-size: 1.2em;
    padding: 0;
}

#chats .searchInput > img{
    margin-right: 0.75em;
}


#chat .shoutout{
    color: rgba(0,0,0,0.7);
    text-align: center;
    position: relative;
    padding-right: 15%;
    font-family: oxygenBold;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}


#chat .shoutout span.fi-megaphone{
    font-size:1.8em;
    line-height: 1em;
}
#chat .shoutout .msg{
    margin-left: 0.5em;
    font-size: 1.2em;

}
#chat .shoutout .date{
    font-size: 0.8rem;
    position: absolute;
    right: 0;
    padding-right: 0.5em
}


#chat .auctionMsg .title{
    text-align: right;
}

#chat .auctionMsg .item{
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 5em;
    height: 5em;
}
#chat .auctionMsg .content{
    padding: 0.5em;
}
#chat .auctionMsg .details > div{
    background-color: rgba(0,0,0,0.1);
    border-radius: .5em;
    padding: .25em .5em;
    font-family: "oxygen";
    margin: 0.25em 0;
}

#chat .auctionMsg .details .money{
    float: right;
}

#chat .auctionMsg .content .button{
    margin: 0.5em auto;
}
#chat .footer > #buttonPost {
    font-size: 2.5em;
    line-height: 0.5em;
    padding: 0.1em 0.6em;
}

#settingsTabs .tab {
    font-family: yanone;
    color: #573D0E;
    font-size: 1.8em;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1);
    text-align: center;
    padding: 0.5em;
    cursor: pointer;
    padding: 0.5em;
    margin: 0;
}
#settingsTabs .tab.active {
    background-color: transparent;
    box-shadow: none;
}
#settingsTabs .tab:first-child {
    border-top-left-radius: 0;
}
#settingsTabs .tab:last-child {
    border-top-right-radius: 0;
}

.androidCtrl {
    position: relative;
    margin: 0.25em;
    padding: 0 0.25em;
}

.androidCtrl .icon,  .androidCtrl span{
    display: block;
    width: 1.5em;
    font-size: 1.5em;
    height: 1.75em;
    text-align: center;
}

.androidCtrl input, .androidCtrl select {
    overflow: hidden;
    display: block;
    background-color: transparent;
    border: none;
    outline: none;
    -box-shadow: none;
    -webkit-box-shadow: none;
    margin: 0;
    padding: 0;
}

.androidCtrl .border {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 0.5em;
    border: 1px solid rgba(87, 61, 14, 0.5);
    border-top-color: transparent;
}

.androidCtrl .border.gc_focus {
    border-color:  #573D0E;
    border-top-color: transparent;
}

#profile {
    position: relative;
    width: 100%;
    height: 100%;
}

#profile .scroller {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#profile canvas {
    display: block;
}

#profile .photo {
    padding: 0.5em;
    text-align: center;
    position: relative
}

#profile .photo > * {
    display: block;
    margin-bottom: 0.5em;
}
#profile .photo .button{
    font-family: 'yanone';
    font-size: 1.5em;
}
#profile .photo canvas {
    width: 8em;
    height: 8em;
}
#profile .photo .uploadIcon{
    top: auto;
    left: auto;
    width: 40%;
    padding-bottom: 40%;
    bottom: 10%;
    right: 10%;
}
#profile .pictureFrame {
    position: relative;
    display: inline-block;
    border-radius: 0.5em;
}
#profile .title{
    color: #573D0E;
    margin-left: 0.5em;
    margin-top: 0.5em;
}

#profile .album{
    position: relative;
    margin: 0.5em auto;
    height: 8em;
    width: 95%;
}
#profile .album .scroller {
    line-height: 0;
    height: 100%;
    width: auto;
    white-space: nowrap;
}
#profile .album canvas {
    box-sizing:border-box;
}
#profile .album canvas {
    width: 8em;
    height: 8em;
}

#profile .table {
    padding: 0 0.2em;
    font-size: 1.2em;
    padding-right: 1em;
    color: #573D0E;
    white-space: nowrap;
}

#profile .androidText {
}



/* Use photo dialog */
#pickPhoto .body {
    padding: 1em 0.5em 0.5em;
}
#pickPhoto .profile_frame {
    width: 18em;
    height: 18em;
}
#pickPhoto .button {
    padding: 0.5em;
    margin: 0.25em;
}

/* Use avatar dialog */
#pickAvatar .dialog {
    max-width: 70%;
    color: #573D0E;
}
#pickAvatar .body {
    padding: 1em;
}
#pickAvatar #back{
    font-family: yanone;
    font-size: 2em;
    line-height: 0.5em;
}
#pickAvatar .msg{
    font-family: yanone;
    font-size: 1.5em;
    margin-bottom: 0.25em;
}

#pickCam .body {
    padding: 0.5em;
}

#pickCam .button {
    margin: 0.5em;
}

#settings .setting {
    background-color: #573D0E;
    border-radius: 0.5em;
    padding: 0 0.5em;
    color: #FFF9D6;
    margin: 0.5em 0;
    box-shadow: 0 1px 1px #FFF9D6, inset 0 1px 2px black;
}

#settings section{
    width: 95%;
    margin: 0.5em auto;
    color:  #573D0E;
    padding: 1px;
}

#settings img {
    vertical-align: middle;
    width: auto;
    height: 3em;
    margin-right: 0.5em;
}

#settings .notification img {
    display: none;
}
#settings .switch {
    width: 4em;
    height: 4em;
}

#settings .account .flexBoxH{
   padding: 0.5em;

}
#settings .account .label{
    width: 6em;
    opacity: 0.8;
}

#settings .account .flex1 span{
   vertical-align: -webkit-baseline-middle;
}

#settings .account .button{
    padding: 6px 0.75em
}

#settings .version {
    text-align: right;
}

#settingsEdit .langs .button{
    width: 34%;
    margin: 0.25em 4%;
}

#settingsEdit .editContainer{
    margin: 0.5rem 0;
}

#settingsEdit .error{
    color:rgb(177, 2, 2);
}

#settings .version {
    position: absolute;
    right: 0;
    top: 0.5em;
}

#settings section {
    position: relative;
}

#album {
    display: -webkit-box;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;

    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    width: 100%;
    max-width: 680px;
    margin: auto;
    background-color: transparent;
}
#album .frame {
    position: relative;
    width: 100%;
    border-radius: 0em;
    overflow: hidden;
    background-color: rgba(0,0,0,0.75);
    box-shadow: 0 0 5px black;
}
#album .shade {
    position: absolute;
    left: 0;
    top: 0.75em;
    bottom: 0.5em;
    width: 15%;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(90%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
}
#album .shade.right {
    right: 0;
    left: auto;
    background: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
}

#album .scroller {
    position: relative;
    width: 300%;
    left: -100%;
}
#album .photoWrapper {
    width: 20%;
    padding: 0.75em 0.25em;
    box-sizing: border-box;
}
#album .photo {
    width: 100%;
    height: 100%;
    border-radius: 0.5em;
}



.introBackdrop{
	background-color: rgba(0,0,0,0.8);
	z-index: 999;
}
#intro{
	z-index: 1000;
}
#intro .dialog{
	border: 0.2em solid #DCC27C;
	border-radius: 0.6em;
	background-color: #FFF7F2;
	font-family: 'yanone';
	font-size: 1.8em;
	padding: 0.5em;
	box-shadow: 0 1px 2px;
}

#intro .introContent{
	position: relative;
	height: 100%;
	text-align: center;
}
#intro .introContent img{
	max-height: 15em;
}
#intro .indexes{
	color: #FFF7F2;
	padding: 0.2em;
	text-align: center;
	top: auto;
	bottom: 3em;
	font-size: 2em;
}

#intro .indexes span{
	padding: 0.2em;
	opacity: 0.25;
}

#intro .indexes span.active {
	opacity: 1;
}

#intro .text{
	font-family: 'archit', 'yanone';
	color: #FFF7F2;
	padding: 0 2em;
	text-align: left;
}

#intro .titleText{
	font-family: 'archit', 'yanone';
	font-size: 2em;
	color: #FFF7F2;
	margin-top: 6rem;
}
#intro .modalContainer{
	opacity: 1;
	z-index: 1000;
}

#intro .overlayContent{
	z-index: 1000;
}

#intro .backdrop{
	background-color: rgba(0,0,0,0.7);
	z-index: 999;
}
#intro .welcome .bbwLogo{
	top: -100%;
	opacity: 0;
	bottom: auto;
	width: 60%;
	margin: auto;
}

#intro .welcome .bbwMel{
	left: auto;
	right: -100%;
	opacity: 0;
	width: 40%;
	margin: auto;
	top: 10em;
}

#intro .welcome .text{
	padding: 0;
	top: 60%;
	bottom: auto;
	left: 1em;
	right: auto;
	width: 55%;
	font-size: 1.4em;
}

#intro .welcome .swipeTip{
	opacity: 0;
	top: auto;
	bottom: 20%;
	left: 1em;
	right: auto;
	width: 50%;
	padding: 0;
	height: 3em;
	background-size: contain;
  	-webkit-animation-name: bounceLR;
	-moz-animation-name: bounceLR;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-webkit-animation-timing-function: eaze-in-out;
	-moz-animation-timing-function: eaze-in-out;
}

.pointyHand{
	width: 4em;
	height: auto;
	-webkit-transform: rotate(20deg);
  	-webkit-animation-name: bounceTD;
	-moz-animation-name: bounceTD;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-webkit-animation-timing-function: eaze-in-out;
	-moz-animation-timing-function: eaze-in-out;
	z-index: 100000;
}

@-webkit-keyframes bounceLR {
	from { left:1em; }
	to { left:2em; }
}
@-moz-keyframes bounceLR {
	from { left:1em; }
	to { left:2em; }
}

@-webkit-keyframes bounceTD {
	from { margin-top:0; }
	to { margin-top:1em; }
}
@-moz-keyframes bounceTD {
	from { margin-top:0; }
	to { margin-top:1em; }
}

#intro .waterPlot{
	position: absolute;
	opacity: 0;
	padding-bottom: 0;
}

#intro .waterPlot .hand{
	width: 50%;
	top: 50%;
	left: -20%;
	opacity: 0 ;
	-webkit-transform: rotate(130deg);
	left: auto;
	right: -40%;
}

#intro .waterIcon{
	width: 50%;
	padding-bottom: 50%;
	left: auto;
	bottom: auto;
	top: -12%;
	right: -12%;
}

#intro .tip{
	font-family: 'archit', 'yanone';
	color: white;
	text-align: center;
	top: 14em;
	font-size: 2em;
	margin: auto;
	line-height: 1.4em;
	width: 90%;
	max-width: 500px;
}

#intro .smallBigIcon{
	 animation: smallBig 2s infinite;
    -webkit-animation: smallBig 2s infinite;
    -moz-animation: smallBig 2s infinite;
}

#intro .genericPic{
	top: 20%;
	bottom: auto;
	text-align: center;
}

#intro .genericPic img{
	max-width: 60%;
}

#intro .academy .tableDisplay{
	text-align: left;
	margin-top: 0.5em;
}
#intro .academy .mentor{
	width: 23%;
	display: inline-block;
	position: relative;
	margin: 0 1%;
	cursor: pointer;
}

#intro .academy .mentor .display{
	text-align: center;
}

#intro .academy .mentor .online{
	font-size: 1.4em;
	text-align: center;
	top: auto;
	bottom: 22%;
	right: auto;
	left: 6%;
	color: rgb(118, 245, 113);
}
#intro .academy .mentor .check{
	opacity: 0;
	left: auto;
	font-size: 2em;
	right: 5%;
	color: rgb(118, 245, 113);
}

#intro .academy .mentor.selected .check{
	opacity: 1;
} 

@-webkit-keyframes smallBig {
	0%,50%,100% {
		-webkit-transform: scale(0.8);
	}
	
	25%,75% {
		-webkit-transform: scale(1);
	}
}

@keyframes smallBig {
	0%,50%,100% {
		-webkit-transform: scale(0.8);
	}
	
	25%,75% {
		-webkit-transform: scale(1);
	}
}

@-webkit-keyframes typing {
    from { width: 0 }
    to { width:30ch }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:10em }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white }
}

@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white }
}

#typed-cursor{
    opacity: 0;
}

.farmTips{
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 20px black;
	position: absolute;
	text-align: center;
	border-radius: 2em;
	padding: 0.75em 1.25em;
	color: #573D0E;
	max-width: 18em;
}

.farmTips .title{
	font-size: 2.25em;
	font-family: 'maiden';
}

.farmTips .description{
	font-size: 1.5em;
	line-height: 1em;
	font-family: 'maiden';
}
#academy .academyMain{
}
#academy .academyCard{
	text-align: center;
	background: #D0D9DE;
	box-shadow: 0 1px 1px #454647, 0 1px 4px #454647, inset 0 1px 2px white, 0 0px 8px #454647;
	padding: 0.5em 1em;
	box-sizing: border-box;
	position: relative;
	color: #454647;
	width: 96%;
	margin: 0.25em auto;
	border-radius: 0.25em;
}

#academy .academyCard:last-child{
	margin-bottom: 1em;
}
.pinLeft{
	width: 5%;
	padding-bottom: 7%;
	bottom: auto;
	top: 0.5em;
	left: 0.5em;
	right: auto;
}

.pinRight{
	width: 5%;
	padding-bottom: 7%;
	bottom: auto;
	top:0.5em;
	right: 0.5em;
	left:auto;
}

#academy .title{
	font-size: 1.8em;
	padding: 0.2rem;
	font-family: yanone;
	text-align: center;
	color: #454647;
}

#academy .title.big{
	font-size: 1.6em;
	padding: 0.5em;
}

#academy .academyCard .flexBoxH{
	width: 90%;
	margin: 0.25em auto;
	margin-bottom: 0.5em;
}

#academy .academyCard .profilePicBox{
	width: 5rem;
}

#academy .academyCard .profileDetials{
	font-family: oxygen;
	text-align: left;
	padding-left: 0.5em;
	font-size: 1.2em;
	line-height: 1.25em;
}


#academy .academyCard .display .lvl{
	padding-left: 0.5em;
	font-size: 1.7rem;
}

#academy .academyCard .peopleListWrap{
	height: 6em;
	min-height: 6em;
	width: 100%;
	margin: 0;
	margin-top: 0.5em;
}

#academy .academyCard .peopleList .people{
	width: 4.5em;
	margin: 0.25em;
}
#academy .academyCard .peopleList .addMentor{
	display: -webkit-box;
}

#academy .academyCard .peopleList .addMentor span{
	font-size: 3rem;
}

#academy .academyCard.pass .button.large{
	display: block;
	line-height: 1em;
	font-size: 1.6em;
	margin: 0.25em;
}
#academy .academyActions{
	margin-top: 0.5em;
}

#academy .academyActions .buttonWrap{
	padding: 0.5em;
	box-sizing: border-box;
	display: inline-block;
	width: 50%;
	text-align: center;
}

#academy .academyActions .buttonWrap .button{
	width: 95%;
	margin: auto;
	box-sizing: border-box;	
	font-size: 1.6rem;
}
#academy .titleLesson{
	font-family: 'tiza';
	font-size: 1.4em;
	color: #573D0E;
	margin-bottom: 0.4em;
	margin-left: 5%;
}

#academy .lessonsWrapper{
	margin-bottom: 2em;
}
#academy .lessons{
	background: rgba(255, 255, 255, 0.9);
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
	border-radius: 0.5em;
	color: #573D0E;
	margin-top: 1em;
}

#academy .lessons .lesson{
	border-bottom: 1px dashed;
	padding: 0.5em 0;
	font-family: londrina;
	font-size: 1.4em;
	width: 95%;
	margin: auto;
	text-align: left;
}
#academy .lesson:last-child{
	border-bottom: none;
}

#academyAddMentor .tableDisplay{
	text-align: left;
	margin-top: 0.5em;
}
#academyAddMentor .mentor{
	width: 23%;
	display: inline-block;
	position: relative;
	margin: 0 1%;
	cursor: pointer;
}

#academyAddMentor .mentor .display{
	text-align: center;
}

#academyAddMentor .mentor .online{
	font-size: 1.4em;
	text-align: center;
	top: auto;
	bottom: 22%;
	right: auto;
	left: 6%;
	color: rgb(118, 245, 113);
}
#academyAddMentor .mentor .check{
	opacity: 0;
	left: auto;
	font-size: 2em;
	right: 5%;
	color: rgb(118, 245, 113);
}

#academyAddMentor .mentor.selected .check{
	opacity: 1;
} 
#academy .grads{
	text-align: left;
	padding: 0.5em 0;
}
#academy .grads .gradPic{
	width: 23%;
	display: inline-block;
	position: relative;
	background: white;
	padding: 0.25em;
	margin: 0 1%;
	padding-bottom: 1.5em;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
	border-radius: 2px;
	box-sizing: border-box;
}
#academy .grads .gradPic .bgImage{
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}
#academy .grads .display{
	top: auto;
	bottom: 0.4em;
	text-align: center;
	line-height: 1em;
	font-size: 0.9em;
}

#academy .grads .level{
	left: auto;
	bottom: auto;
	right: 0.6rem;
	top: 0.25rem;
	font-size: 1.2em;
}
#academyLearnMore img{
	height: 8rem;
}
#academyLearnMore .title{
	font-size: 2.2em;
}
#academyLearnMore .helpContent{
	font-family: oxygenBold;
	font-size: 1rem;
	line-height: 1.2rem;
	width: 90%;
	margin: 1em auto;
	text-align: left;
}
#academyLearnMore .helpContent .flexBoxH{
	margin: 0.5em 0;
}
#academyLearnMore .helpContent .icon{
	font-size: 1.8em;
	width: 16%;
	text-align: center;
}

#academyLearnMore .requirements{
	margin-bottom: 0.5em;
	font-size: 0.85em;
	line-height: 1.4em;
}

#academyLearnMore .button{
	font-size: 1.6em;
}
#translist {
    height: 100%;
}
#trans {
    background-color: transparent; /* DELETE */
	color: #573d0e;
}
#trans .row {
	position: relative;
	padding: 0.25em;
	border-bottom: 2px dashed rgba(0,0,0,0.15);
    font-family: monospace;
    font-size: 0.8em;
    background-color: transparent;  /* DELETE */
}

#trans .row > * {
    padding: 0.25em;
}

#trans .date {
    width: 6em;
    white-space: normal;
}

#trans .price {
    width: 6em;
    text-align: right;
}

#trans .price.red {
    color: #77321E;
}

#trans .price.green {
    color: #677D2A;
}


.shake { 
  -webkit-transform-origin: center center; 
  -ms-transform-origin: center center; 
  transform-origin: center center; 
  -webkit-animation-name: shake-base; 
  -ms-animation-name: shake-base; 
  animation-name: shake-base; 
  -webkit-animation-duration: 100ms; 
  -ms-animation-duration: 100ms; 
  animation-duration: 100ms; 
  -webkit-animation-iteration-count: 5; 
  -ms-animation-iteration-count: 5; 
  animation-iteration-count: 5; 
  -webkit-animation-timing-function: ease-in-out; 
  -ms-animation-timing-function: ease-in-out; 
  animation-timing-function: ease-in-out; 
  -webkit-animation-delay: 0s; 
  -ms-animation-delay: 0s; 
  animation-delay: 0s; 
  -webkit-animation-play-state: running; 
  -ms-animation-play-state: running; 
  animation-play-state: running; 
  -webkit-animation-iteration-count: infinite; 
  -ms-animation-iteration-count: infinite; 
  animation-iteration-count: infinite;
  /*display: inherit;*/
}

@-webkit-keyframes shake-base { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  4% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
  6% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  8% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  10% { -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  12% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  14% { -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  16% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  18% { -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  20% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  22% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  24% { -webkit-transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }
  26% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  28% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  30% { -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  32% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  34% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }
  36% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  38% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  40% { -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  42% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  44% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  46% { -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  48% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  50% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  52% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  54% { -webkit-transform: translate(1.5px, 0.5px) rotate(-1.5deg); }
  56% { -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  58% { -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  60% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  62% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg); }
  64% { -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  66% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  68% { -webkit-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  70% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }
  72% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  74% { -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  76% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  78% { -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg); }
  80% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  82% { -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  84% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  86% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  88% { -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  90% { -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  92% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  94% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  96% { -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  98% { -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); } }

@-ms-keyframes shake-base { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  2% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  4% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  6% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  8% { -ms-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  10% { -ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg); }
  12% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  14% { -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  16% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  18% { -ms-transform: translate(1.5px, -0.5px) rotate(-1.5deg); }
  20% { -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg); }
  22% { -ms-transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
  24% { -ms-transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  26% { -ms-transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
  28% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  30% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  32% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  34% { -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  36% { -ms-transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
  38% { -ms-transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  40% { -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg); }
  42% { -ms-transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
  44% { -ms-transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  46% { -ms-transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  48% { -ms-transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  50% { -ms-transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  52% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  54% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  56% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
  58% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  60% { -ms-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  62% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  64% { -ms-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  66% { -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  68% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  70% { -ms-transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  72% { -ms-transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
  74% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  76% { -ms-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  78% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  80% { -ms-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  82% { -ms-transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  84% { -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  86% { -ms-transform: translate(-0.5px, 0.5px) rotate(-1.5deg); }
  88% { -ms-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
  90% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  92% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  94% { -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  96% { -ms-transform: translate(1.5px, 1.5px) rotate(0.5deg); }
  98% { -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg); } }

@keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  4% { transform: translate(-2.5px, -1.5px) rotate(0.5deg); }
  6% { transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  8% { transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
  10% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  12% { transform: translate(-1.5px, 1.5px) rotate(-1.5deg); }
  14% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  16% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  18% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  20% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
  22% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  24% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  26% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  28% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  30% { transform: translate(-2.5px, 0.5px) rotate(0.5deg); }
  32% { transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  34% { transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
  36% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  38% { transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  40% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  42% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  44% { transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  46% { transform: translate(0.5px, -2.5px) rotate(0.5deg); }
  48% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  50% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  52% { transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  54% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
  56% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  58% { transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  60% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  62% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  64% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  66% { transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  68% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  70% { transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  72% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  74% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  76% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
  78% { transform: translate(-0.5px, -2.5px) rotate(0.5deg); }
  80% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  82% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  84% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
  86% { transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  88% { transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  90% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  92% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  94% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
  96% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  98% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } }

#friendView .search{
	box-pack:center;
	box-align:center;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	white-space: nowrap;
	justify-content: space-between;
	background: -moz-linear-gradient(top,  rgba(225,195,159,0.8) 0%, rgba(225,195,159,0.4) 73%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(225,195,159,0.8)), color-stop(73%,rgba(225,195,159,0.4)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(225,195,159,0.8) 0%,rgba(225,195,159,0.4) 73%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(225,195,159,0.8) 0%,rgba(225,195,159,0.4) 73%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(225,195,159,0.8) 0%,rgba(225,195,159,0.4) 73%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(225,195,159,0.8) 0%,rgba(225,195,159,0.4) 73%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cce1c39f', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
	/*position: fixed;*/
	z-index: 1;
	margin:auto;
	padding: 0 0.5rem;
	padding-top:0.4rem;
	box-sizing: border-box;
	left: 0;
	right: 0;
}


#friendView .search .flexBoxH{
	padding-bottom: 0.4rem;
}

#friendView .button.active{
	color: #e4d689;
	text-shadow: 0 -1px 0px #2A1C03;
	background-color: #573D0E;
}

#friendView .searchBox{
	text-align: right;
	padding: 0 1%;
	position: relative;
}
#friendView .searchBox input{
	width: 100%;
	height: 3rem;
	border: 0;
	box-shadow: inset 0 0px 4px #573D0E;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 6px;
}

#friendView .searchBox .searchAll{
	left: auto;
	top: 0.3rem;
	right: 0.3rem;
	bottom: 0.3rem;
}
#friendView .search .button{	
	padding: 0.5rem 1rem;
	margin: 0 8px;
	text-align: center;
	font-size: 1.5em;
	box-sizing: border-box;
}

#friendView .search .button:last-child{
	margin-right: 0;
}

#friendView .search .sort .button{
	font-size: 1.4rem;
	display: block;
}
#friendView .search .button span{
	vertical-align: middle;
}
#friendView .search .button:first-child{
	margin-left: 0;
}
#friendView .search .sort .button:last-child{
	margin-right: 0;
}

#friendView #requests{
	background: rgba(255, 255, 255, 0.68);
	width: 100%;
	margin: auto;
	color: #573D0E;
	font-family: yanone;
	padding: 0.25em 0.5em;
	border-radius: 0.25em;
	font-size: 1.25em;
	box-sizing: border-box;
	cursor: pointer;
}

#friendView #requests span{
	margin-right: 0.25em;
}
#friendView .scrollBox{
	/*padding-top:6.75rem;*/
}

#friendView .friendList{
	height: 100%;
}


#friendView .row{
	display: inline-block;
	width: 47.5%;
	vertical-align: middle;
}

#friendView .row:nth-child(odd){
	margin-left: 1%;
}

#friendView .row .status{
	width: 20%;
	padding-bottom: 20%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#friendView .row .helped{
	font-size: 10px;
}


#friendView .row .helperIcon{
	width: 20%;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}


#friendView .row .favStar{
	right: 20px;
	top: 16px;
	color: #573D0E;
	font-size: 24px;
	left: auto;
	line-height: 0;
	opacity: 1;
	cursor: pointer;
	font-family: yanone;
}
/*#friends .row .profilePic.gc_focus{
	-webkit-transform: scale(1.05, 1.05) translate3d(0px, 0px, 0px) ;
}*/
#friendView .row a{
	text-decoration: none;
	color: #573D0E;
}

#friendView .row .remove{
	right: 23px;
	bottom: 5px;
	color: #573D0E;
	font-size: 30px;
	left: auto;
	line-height: 0;
	top: auto;
	opacity: 0.1;
	cursor: pointer;
}

#friendView .row .favStar.empty{
	opacity: 0.1;
}


#friendView .row .online{
	font-family: yanone;
	color: #573D0E;
	font-size: 12px;
}
#friendView .profilePicBox{
	width: 40%;
	padding-right: 0.5em;
}


#friendView .meetNew{
	text-align: center;
	padding: 0.5em;

}

#friendView .addNew{
	text-align: center;
	padding: 0.4em;
	box-sizing: border-box;
	font-family: yanone;
	font-size: 1.5em;
	color: #573D0E;
	cursor: pointer;
}

#friendView .addNew img{
	height: 2.5em;
	display: block;
	margin: auto;
}


/* loading progressbar */
#friendView .loading{
    background: rgba(0, 0, 0, 0.1);
}

#friendView #dog {
    text-align: center;
    width: 80%;
    max-width: 15em;
}
#friendView .loading img{
    width: 8em;
}
#friendView .progress {
    position: relative;
    width: 100%;
}

/* friend lsit in dialog */
#friendPicker .modalContainer {
    height: 80%;
}
#friendPicker .helped {
    display: none ! important;
}
#friendPicker .online {
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    text-align: left;
    font-size: 0.8rem;
}

#invite .dialog {
    width: 80%;
    max-width: 500px;
    height: 80%;
    font-family: oxygen;
}
#invite .body {
    height: 100%;
    box-sizing: border-box;
}
#invite .row {
    padding: 0.25em 0.5em;
    text-align: left;
    width: auto;
}
#invite .phone {
    direction: ltr ! important;
}
#invite .radio {
    margin: 0.25em;
    width: 1.5em;
    height: 1.5em;
    background-size: 100% 100%;
}
#invite .button {
    margin: 0.25em;
}





#store{
	padding: 0.5em;
	padding-bottom: 1em;
	background-size: 120px;
	height: 100%;
	box-sizing: border-box;
}
#store .storeTab{
	margin: auto;
	width: 100%;
	height: 100%;
    border-radius: 8px;
    box-shadow: 0 1px 2px;
    min-height: 162px;
	box-sizing: border-box;
	border: 2px solid #0A3549;
	color: #0A3549;
	overflow: hidden;
	background-color: #F7FCFE;
}
#store .storeTab .content{
    height: inherit;
}
#store .storeTab dd img{
	width: 60%;
	height: auto;
}
#store .listWrapper{
    width: 100%;
}
#store .tabs-content{
	background-color: #F7FCFE;
}

#store .content .loading{
	font-family: maiden;
	font-size: 2em;
}
#store .item{
	width: 25%;
	margin: 0%;
}
#store .item.superSpecial{
	width: 100%;
	display: block;
}
#store .item.superSpecial .specialButton{
	padding-top: 0.5em;
	border-radius: 8px;
	cursor: pointer;
	width: 100%;
}
#store .item.superSpecial .specialButton > img{
	display: block;
	margin: auto;
	width: 30%;
}
#store .item.superSpecial .price{
	bottom: 15px;
}

#store .storeTab .tabs dd{
	padding: 4px 0;
	background-color: #E4F1F6;
	box-shadow: inset 0px -2px 4px #CADFE7;
	height: 45px;
}
#store .storeTab .tabs dd div{
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#store .storeTab .tabs dd span{
	font-size: 1.6em
}
#store .storeTab .tabs dd.active{
	background-color: #F7FCFE;
	box-shadow: inset 0 -1px 4px #F7FCFE;
}
#store .itemWrapper > * {
     pointer-events:none;
}
#store .pulldown {
    padding-top: 0.5em;
}




#walletView .modalContainer{
	background-color: rgb(200, 236, 85);
	width: 96%;
	border-color: rgb(58, 73, 11);
	padding:0;
	margin-top: 8%;
}
#walletView .options{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: center;
	margin: 1em;
	margin-top: 2em;
}

#walletView .options .button{
	margin: 0;
	background-color: #F5EBB5;
	border-width: 3px;
}

#walletView .options .button.active{
	box-shadow: 0 0 4px #573D0E;
	background-color: #e4d689;
	border-width: 2px;
}

#walletView #walletTab{
	width: 100%;
	margin: 0;
	overflow: hidden;
	background-color: rgba(0,0,0,0.1);
}

#walletView .tabs-content{
	margin-bottom: 0
}


#walletView #walletTab .tabs{
	margin: 0;
	cursor: pointer;
}

#walletView #walletTab .tabs dd{
	padding: 15px 0;
	margin: 0;
	font-size: 1em;     /* DELETE */
	height: auto;       /* DELETE */
	box-shadow: inset 0px -2px 4px rgba(0,0,0,0.1);
	text-align: center;
	background-color: rgba(0,0,0,0.1);
	font-family: "yanone", "oxygen", sans-serif;
}

#walletView #walletTab .tabs dd.active{
	font-weight: 700;
	box-shadow: inset 0 -1px 4px rgba(0,0,0,0);
	background-color: rgba(0,0,0,0);
}

#walletView #walletTab .tabs dd .icon{
	height: 0.9em;
	width: auto;
}
#walletView #walletTab .tabs dd .money{
	font-size: 1em;
	line-height: 0;
	vertical-align: inherit;
}
#walletView #walletTab .content .prices{
	background: rgba(255,255,255,0.9);
	margin: 0 0.5em;
	/*padding: 0 0.5em;*/
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,0.6);
	/*border-top: 2px solid rgba(0,0,0,0.6);*/
	/*display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;*/
	/*box-shadow: 0px 0px 4px;*/
}

#walletView #walletTab .button.large {
    margin-top: 0.4em;
}



#walletView .title{
	font-size: 30px;
	color: #573D0E;
}

#walletView .msg{
	background-color: rgba(0,0,0,0.2);
	margin: 0 0.5em;
	margin-bottom: 0.5em;
	color: white;
	border-radius: 6px;
	border-top: 1px solid rgba(0,0,0,0.5);
	padding: 0.2em 0.5em;
}

#walletView .rows{
	border-bottom: 1px dashed rgb(58, 73, 11);
	padding-bottom: 2px;
	height: 4.8rem;
	overflow: hidden;
}

#walletView .rows:last-child{
	border-bottom: 0px;
}

#walletView .rows .empty {
    padding: 1em;
    font-size: 1.2em;
    font-family: yanone, oxygen, sans-serif;
}

#walletView .rows .packageDetail{
	padding: 0.5em;
	padding-right: 5px;
	width: 5.75em;
	text-align: left;
}
#walletView .rows .packageDetail img{
	height: 25px;
	width: 25px;
	padding-top: 2px;
}

#walletView .rows .packageOffer{
	font-family: yanone;
	position: relative;
	text-align: left;
	margin: 0 5px;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#walletView .rows .packageOffer .scroller {
    height: 100%;
    width: auto;
    -webkit-box-align: center;
}
#walletView .rows .packageOffer span{
    line-height: 3.4rem;
	font-size: 1.25em;
	display: inline-block;
	vertical-align: top;
}

#walletView .rows .packageOffer .imageWrap {
    display: inline-block;
    position: relative;
    height: 3.4rem;
    max-width: inherit;
}

#walletView .rows .packageOffer .count{
	bottom: -0.5em;
	position: absolute;
	right: 0em;
	font-size: 12px;
}

#walletView .rows .packageOffer .expires{
    position: absolute;
    bottom: 0;
    width: 100%;
	font-family: "oxygen", sans-serif;
	font-size: 0.7rem;
}

#walletView .rows .packageOffer img{
    height: 95%;
    width: auto;
}

#walletView .rows .packageOffer.expired{
	opacity: 0.5;
}

#walletView .rows .creditCount{
	font-size: 1.6rem;
	font-family: "yanone", "oxygen", sans-serif;
	line-height: 1em;
	white-space: nowrap;
	text-align: left;
}

#walletView .creditCount > * {
    vertical-align: middle;
}

#walletView .rows .price{
	background: rgba(200, 236, 85,0.7);
	display: inline-block;
	padding: 0 0.25em;
	border-radius: 5px;
	border: 1px solid rgb(96, 121, 20);
	color: rgb(58, 73, 11);
	font-weight: bold;
	font-size: 1em;
	white-space: nowrap;
	vertical-align: bottom;
}

#walletView .rows .button{
    display: inline-block;
	margin: 0;
	margin: 0.2em;
	z-index: 2;
	font-family: "yanone", "oxygen", sans-serif;
}

#walletView #walletTab #paypal.content .prices{
	border-color: #15467A;
	background: #F5FBFF;
}
#walletView #paypal .rows .price{
	background: rgba(27, 128, 194, 0.20);
	border-color: #15467A;
	color: #15467A;
}

#walletView .backdrop{
	background-color: rgba(0,0,0,0.4);
}

#walletView #earnFree .description{
	width: 75%;
	margin: 0.5em auto;
	box-sizing: border-box;
	font-family: oxygen;
	font-size: 0.9em;
}
#walletView #earnFree .description .moneyBox{
	font-size: 2em;
	font-family: yanone;
	line-height: 1em;
}

.phoneDlg .dialog {
    max-width: 80%;
}
.phoneDlg .body {
    padding: 1.5em 1.5em 2em;
}
.phoneDlg .input {
    width: 15em;
}
.phoneDlg select {
    width: 100%;
}
.phoneDlg p {
    font-family: oxygen;
    margin: 0.25em;
}



#auction {
    width: 100%;                    /* DELETE */
    max-width: 100%;                /* DELETE */
}
#auction .body {
    background-color: transparent;  /* DELETE */
    width: 100%;                    /* DELETE */
    margin: 0;
}
#auctionRows {
    text-align: right;
}
#auctionRows .head {
    font-family: yanone;
    font-size: 1.25rem;
    color: #FFF7CB;
}
#auctionRows .row.head > * { padding: 0; }
#auctionRows .heading {
    border-radius: 0.5em;
    margin: 2px;
    background-color: rgba(0,0,0,0.6);
    padding: 0.25em;
    box-sizing: border-box;
}
#auctionRows .heading.gc_focus {
    -webkit-transform: scale(0.95, 0.95);
}

/* auction row */
#auctionRows .row > * {
    width: 25%;
    height: 100%;
    padding: 0 0.5rem;
    overflow: hidden;
    display: table-cell;
    position: relative;
    vertical-align: middle;
    font-size: 0.9em;
    white-space: nowrap;
}

#auctionRows .row {
    height: 3em;
    overflow: hidden;
}
#auctionRows .row:nth-child(even){
    background-color: rgba(0,0,0,0.1);
}
#auctionRows .row.ending{
    background-color: rgba(241, 86, 86, 0.2);
    -webkit-animation-name: flashTrans1;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: flashTrans1;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: flashTrans1;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
#auctionRows .row.ending .time{
    font-weight: bold;
}


/* auction cell */
#auctionRows .row >div:first-child{
    text-align: left;
}
#auctionRows .row >div:last-child{   /* bid amount */
    width: 30%;
}
#auctionRows .row >div:nth-child(3){ /* # of bids */
    width: 15%;
}
#auctionRows .row .icon {
    height: 1.5rem;
    width: 1.5rem;
    margin: 0.25em;
    vertical-align: middle;
}
#auctionRows .row .item img {
    width: 3.5em;
    height: 3.5em;
}
#auctionRows .row .count {
    font-family: yanone;
}
#auctionRows .portrait {
    width: 2.5em;
    height: 2.5em;
    display: block;
}

/* footer */
#auctionFooter {
    color: #FFF7CB;
    background-color: rgba(0,0,0,0.7);
    text-align: left;
    padding: 0.25em 0;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}

#auctionFooter .search > * {
    margin: 0.25em;
    padding: 0.25em 0;
}

#auctionFooter .search .border {
    border: 1px solid #FFF7CB;
    border-top-color: transparent;
}


#auctionFooter .search .button{
    padding: 0.25em 0.6em;
    display: flex;
}

#auctionFooter div .border{
    margin: 0;
    box-sizing: border-box;
}

#auctionFooter .filters .label{
    display: inline-block;
    margin: 0.25em;
    vertical-align: top;
    margin-right: 0;
}

#auctionFooter .filters{
    padding-top:0.25em;
}

#auctionFooter .filters > div{      /* DELETE */
    display: initial;               /* DELETE */
    width: auto;                    /* DELETE */
    text-align: center;             /* DELETE */
    float: none;                    /* DELETE */
}                                   /* DELETE */

#auctionFooter .filters button{
    display: inline-block;
    text-align: center;
    padding: 0.25em 0.75em;
    float: left;
    background-color: rgba(255, 255,255, 0.75);
    border: 1px solid rgb(169, 169, 169);
    border-left-width: 1;
    border-right-width: 0;
    color: #573d0e;
}

#auctionFooter .filters button:active,#auctionFooter .filters button.gc_focus{
    box-shadow: inset 0 0 4px;
}

#auction .search input {
    text-align: left;
    vertical-align: bottom;
    padding: 0 0.5em;
    margin: 0;
    height: 1.75em;
}
#auction .search select {
    background: rgba(255,255,255, 0.75);
    padding: 0;
}

#auctionFooter span.label {
    font-family: yanone;
    display: inline-block;
}

#auctionFooter input.checked {
    font-weight: bold;
}

#auctionFooter img{
    width: 1.25em;
    vertical-align: middle;
    pointer-events: all;            /* DELETE */
}

#auctionRows .more {
    text-align: center;
}

#auctionRows .more > * {
    margin: 0.25em;
    vertical-align: middle;
}


/* bid dialog */
#bid {
    display: inline-block;
    background-color: white;
    border-radius: 0.5em;
}

#bid .icon {
    height: 1.5em;
}

#bid .row > *, #bid .title > * {
    vertical-align: middle;
}

#bid .title {
    background-color: #e4d689;
    color: #573d0e;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: 1px solid #e4d689;
    padding: 0.5em;
}
#bid .itemDetail {
    padding: 0.5em;
}
#bid .itemImage {
    width: 4em;
    height: 4em;
    margin: 0.5em;
}
#bid #myBid {
    display: inline-block;
    width: 6em;
}
#bid #myBid span {
    display: none;
}
#bid #myBid input {
    overflow: hidden;
    margin: 0 0.25em;
    text-align: right;
}
#bid .bidDetail {
    padding: 0.5em;
}    
 
#bid .bidDetail .row {
    margin-bottom: 0.5em;
}
#bid .button {
    margin-left: 1em;
}
#bid .button > * {
    vertical-align: middle;
}


/* Auction detail */
.auctionDialog .dialog {
    width: 80%;
}
.auctionDialog .body {
    padding: 1.75em 1em;
    font-family: oxygen;
    text-align: left;
}
.auctionDialog .bidActions {
    margin: 0.5em;
}
.auctionDialog .itemImage {
    width: 5em;
    height: 5em;
    background-size: 100%;
    margin-right: 0.25em;
}
.auctionDialog .label {
    width: 40%;
    margin: 0 0.5em;
    text-align: right;
}
.auctionDialog .actions {
    text-align: center;
    padding: 0.5em;
    padding-bottom: 0;          /* body already has padding */
}
.auctionDialog #buttonRefresh {
    height: 1.5em;
    pointer-events: all;
    margin-left: 0.5em;
}
.auctionDialog .actions .button {
    padding: 0.25em 0;
    width: 45%;
    margin-bottom: 0.25em;
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auctionDialog .inputBox {
    margin-right: 0.5em;
}
.auctionDialog .inputBox input {
    width: 100%;
}
.auctionDialog .radio input {
    margin-right: 0.5em;
}

#createAuction .dialog {
    max-width: 300px;
}

#bids .dialog {
    width: 90%;
    max-width: 400px;
    height: 70%;
}

#bids .head {
    font-family: yanone;
    font-size: 1.25rem;
    color: #FFF7CB;
}
#bids .head > * {
    border-radius: 0.5rem;
    background-color: rgba(0,0,0,0.6);
}
#bids .row > * {
    margin: 2px;
    padding: 0.25rem;
}
#bids .row > div.profile {
    width: 3rem;
}
#bids .row > div.date {
    width: 30%;
}
#bids canvas {
    height: 3rem;
}



.tapUp {
    -webkit-animation: tap-up 1s infinite;
}

.tapDown {
    -webkit-animation: tap-down 1s infinite;
}

@-webkit-keyframes tap-up {
	0%,50%,100% {
	    -webkit-transform:rotateZ(180deg) translate3d(0,-20px,0) rotate(-20deg);
	}
	
	25% {
	    -webkit-transform:rotateZ(180deg) translate3d(0,0,0) rotate(-20deg);
	}
}

@-webkit-keyframes tap-down {
	0%,50%,100% {
	    -webkit-transform: translate3d(0,20px,0) rotate(-20deg);
	}
	
	25% {
	    -webkit-transform: translate3d(0,0,0) rotate(-20deg);
	}
}
#tutorial {
    max-width: 680px;
    margin: auto;
}
#tutorial .button{
	background-color:transparent;
}
#tutorial .text {
    border: 0px solid #573d0e;
    max-width: 15em;
    padding: 0.5em 0.8em;
    padding-left:2.5em;
    width: 62%;
    height:auto;
    background-color: rgba(255, 247, 242, 0.9);
    color: #573d0e;
    box-shadow: 0 1px 5px #573d0e;
    font-family: yanone;
    border-radius: 0.75em;
    font-size: 1.25em;
    left:19%;
    bottom:11%;
    max-width: 680px;
    margin: auto;
}
#tutorial .text img {
	max-width: 8em;
    float: left;
    position: absolute;
    bottom: 0%;
    left: -21%;
}

#tutorial span {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
}

#tutorial label {
    margin: 0 0.5em;
}

#tutorial .portrait {
    width: 4em;
    height: 4em;
    margin: 0.5em;
}

#tutorialWelcome .welcomeContainer{
    background-color: transparent;
    border: none;
    box-shadow: none;
    top: 6%;
    max-width: 520px;
}

#tutorialWelcome .melBack{
    top: -15%;
    left: -10%;
    bottom: -4%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

#tutorialWelcome .melBubble{
    margin: auto;
    border: 4px solid #DCC27C;
    border-radius: 10px;
    background-color: #FFF7F2;
    padding: 0.75em 1.5em;
    color: #573D0E;
    box-shadow: 0 1px 2px rgba(87, 61, 14, 0.8);
    text-align: left;
    top: -8%;
    bottom: auto;
    right: auto;
    width: 50%;
    left: 30%;
}

#tutorialWelcome .welcomeBox .highlight{
	box-shadow: 0 0 5px rgba(251, 7, 7, 1);
    border: 1px solid rgba(251, 7, 7, 1);
}

#tutorialWelcome .melBubble .subject{
    font-family: 'yanone';
    font-size: 1.6em;
}
#tutorialWelcome .melBubble img{
    height: 1em;
}

#tutorialWelcome .melBubble .tail{
    height: 2em;
    width: 2em;
    background-size: 100%;
    background-repeat: no-repeat;
    top: 50%;
    left: -2em;
    -webkit-transform: rotate(90deg);
    z-index: 2;
}

#tutorialWelcome .welcomeBox{
    padding: 5em 2.5em;
    padding-bottom: 8em;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    box-sizing: border-box;
    width: 90%;
    max-width: auto;    /* DELETE */
    margin: auto;
    margin-top: 15%;
}


#tutorialWelcome .welcomeBox .photo canvas{
    border-width: 3px;
    border-radius: 0.5em;
    width:100%;
    border-color: #573D0E;

}

#tutorialWelcome .welcomeBox .flexBoxH {
    margin-top:0.25em;
}

#tutorialWelcome .btn-group > button {
	width:50%;
	font-size:1.5em;
}

#tutorialWelcome .welcomeBox input{
    width: 100%;
    border: 2px solid #573D0E;
    font-size: 0.9em;
}

#tutorialWelcome .welcomeBox .label{
    line-height: normal;
    width: 28%;
    text-align: left;
    font-family: yanone;
    font-size: 1.5em;
}

#tutorialWelcome .welcomeBox .hint{
    text-align: left;
    font-size: 0.6em;
    font-style: italic;
}

#tutorialWelcome #photoEdit {
    top:inherit;
    bottom: 0.4em;
    right: 0.1em;
    left:inherit;
    font-size: 1.5em;
    color: #FFF9D6;
    text-shadow: 0 0 6px black;
    pointer-events: none;
}

#tutorialWelcome .pictureFrame {
	position:relative;
}


#tutorialWelcome .welcomeBox #startGame, #tutorial .button{
    background-color: #0CA674;
    color: white;
    min-width: 30%;
    width: auto;
    margin-top: 0.75em;
    box-shadow: inset 0 1px 2px #61DAB3, inset 0 -1px 2px #004C26;
    padding: 0.25em;
    text-shadow: 0 0 0 transparent;
    border: 1px solid #0D5732;
    text-align: center; 
}

#tutorialWelcome .genderBtns {
    white-space: nowrap;
}

#tutorialWelcome .welcomeBox .genderBtns button{
    color: white;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.7);
    border: 2px solid #4F5050;
    font-size: 2em;
    width: 1.25em;
    border-radius: 0.25em;
    margin-right: 0.25em;
}

#tutorialWelcome .welcomeBox .genderBtns button.active.female{
    background-color: #CF2C90;
    border-color: #A6226F;
}
#tutorialWelcome .welcomeBox .genderBtns button.active.male{
    background-color: #3A72C8;
    border-color: #234F9F;
}

#tutorialWelcome.intro {
    position: relative;
    height: 70%;
    width: 100%;
    max-width: 520px;
}


.button.facebook > * {
    vertical-align: middle;
}

span.facebook {
    width: 1em;
    height: 1em;
    display: inline-block;
}
.tutorialFade{opacity:0.6;}

#tutorialSkip {
    position:absolute;
    left:0; top:0; width: 100%;
    text-align: center;
}
#tutorialSkip img {
    height: 1.5em;
    padding: 0.25em;
}
#tutorialSkip img.gc_focus {
    background-color: rgba(0,0,0,0.2);
    border-radius: 0.25em;
}

#tutorialSkip > div {
    position:relative;
    background-color: rgba(255,255,255,0.8);
    padding: 1em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}
#tutorialSkip > div > * {
    display: block;
    margin: 0 0.25em;
}
#tutorialSkip .button {
    display: block;
    margin: 0 0.25em;
    padding: 0.25em 0.5em;
    min-width: 0;
}

#tutorial .divide {
    margin-top: 1em;
}



.arabic input, 
.arabic textarea,
.arabic .modalContainer .body, 
.arabic .modalContainer .title,
.arabic #forums .forumThread .row.thread, 
.arabic #forums .category .list .thread, 
.arabic #forums .footer,
.arabic #comments .commentBox,
.arabic .msg,
.arabic #chats .active,
.arabic #fwbPurchase .fwbInfo,
.arabic #settings section,
.arabic .itemSelection .price,
.arabic #newORexist .bubble,
.arabic #wizard #newORexist .body,
.arabic #wizard .terms, .arabic #wizard .footer,
.arabic #barnItemDetail div.box .note,
.arabic #farmSummary .questWrapper,
.arabic #blingView .blingList .categoryLabel,
.arabic .trophyDetail .questRow .questProgress,
.arabic #smokey,
.arabic .modalContainer .buttons,
.arabic #walletView .rows,
.arabic .leaderCategories .button,
.arabic #blingBox,
.arabic .tabs-content,
.arabic #editNote .modalContainer,
.arabic #farmSummary .farmSign,
.arabic #profileModal .modalContainer > .flexBoxH,
.arabic #chat .footer,
.arabic .itemSelection .item .storeButton .overlayInfo,
.arabic .trophyDetail .questRow,
.arabic .farmView .farmContainer .firstRow,
.arabic #usePhoto,
.arabic #farmBuyGift .modalContainer,
.arabic #workshop .status .time,
.arabic #fwbPurchase .fwbDays,
.arabic #wizard .login2 .content,
.arabic #farmGiftsList,
.arabic #trans,
.arabic #leaderboardView .profileRow,
.arabic #leaderboardView .header,
.arabic #viewPlot .farmhand .delay,
.arabic .yearWrapper .levelDisplay,
.arabic #academyAddMentor,
.arabic .gc_alert .body,
.arabic .welcomeBox,
.arabic #tutorial .text,
.arabic #share .shareContent,
.arabic #login .body .error,
.arabic .friendWarning,
.arabic .menuWrapper,
.arabic .row,
.arabic #chats .searchInput,
.arabic #confirm .footer,
.arabic #friendView .header,
.arabic .itemSelection .description,
.arabic #academy .academyCard.pass .flexBoxH,
.arabic .text,
.arabic .button,
.arabic #profileModal .userActions
{
	direction: rtl;
}

.arabic .userInput,
.arabic #itemInfo .descriptionBox,
.arabic #academy .academyCard .profileDetials,
.arabic #smokey .msg,
.arabic #walletView .rows .packageDetail,
.arabic #walletView .rows .packageOffer,
.arabic #walletView .rows .creditCount,
.arabic #questDetails .flex1,
.arabic #academyLearnMore .helpContent, 
.arabic #farmSummary .title,
.arabic #profileModal .profileDetailWrapper .displayBox,
.arabic .reportOptions .flexBoxH,
.arabic #tutorialWelcome .melBubble .msg,
.arabic #news .item,
.arabic .redImportant
{
	direction: rtl;
	text-align: right;
}

.arabic #barnQSelector .modalContainer .profit,
.arabic #barnItemDetail div.box .title,
.arabic .farmView .sector .timer,
.arabic .counter,
.arabic #viewPlot .subHeading
{
	direction: rtl;
}

.arabic .levelTube,
.arabic .bbwbutton.gc_ibutton{
	direction: ltr;
	font-weight: normal;
	font-family: oxygen;
}
.arabic #storeBuyItem .itemDetail .itemDetailBox .lbl,
.arabic .gc_ibutton .text
{
	direction: rtl;
	font-family: inherit;
}

.arabic .farmView .sector .timer,
.arabic #profileModal .statusBox,
.arabic #friendView .row .helped,
.arabic .trophyDetail .questRow .indexLabel,
.arabic #workshop .options .cost,
.arabic #workshop .status .time,
.arabic #tutorialWelcome .melBubble .subject,
.arabic #tutorialWelcome .welcomeBox .label,
.arabic #farmViewGift .giftDisplay,
.arabic #friendView .addNew{
	font-size: 1em;
}
.arabic #profileModal .display,
.arabic #tutorial .text,
.arabic #friendView .header,
.arabic #forums{
	font-size: 0.9em;
}

.arabic #nav .feedsWrapper .feedsBlock,
.arabic #nav div.navWrapper,
.arabic#itemInfo .description,
.arabic #contestInstruction ol,
.arabic #settingsEdit .description,
.arabic#smokey, .arabic#smokey .msg,
.arabic #storeBuyItem .prices .price{
	direction: rtl;
	text-align: right;
}

.arabic #nav .currentView, 
.arabic #settingsTabs .tab, 
.arabic #profile .photo .button{
	font-size: 1.2em;
}

.arabic #nav .feeder{
	margin-left: 0.25em;
}

.arabic #nav .moneyBox{
	text-align: left;
	margin-left: 0.5em;
}

.arabic #nav .moneyBox .money{
	font-weight: bold;
}

.arabic #forums .row canvas{
	margin: 0 0 0.5em 0.5em;
}

.arabic #comments .displayBox{
	text-align: right;
	margin-left: 2em;
	margin-right: 0;
	direction: rtl;
}


.arabic #comments .profilePicBox{
	margin-left: 0.5em;
	margin-right: 0;
}
.arabic #comments .commentBox .commentClose{
	top: 0.25em;
	right: auto;
	left: 0;
	bottom: auto;
}

.arabic #chats .date{
	padding-left: 0.25em;
}
.arabic #chats canvas,
.arabic #wizard .title .gc_ibutton{
	margin-left: 0.5rem;
	margin-right: 0.25rem;
}


.arabic #fwbPurchase .fwbPerk > div{
	text-align: right;
	font-size: 0.9em;
}

.arabic #settings img{
	margin-left: 0.5em;
	margin-right: 0;
}
.arabic #settings .version{
	right: auto;
	left: 0;
	top: 0.5em;
}
.arabic #profile .table,
.arabic .welcomeBox .photo{
	direction: rtl;
	padding-right: inherit;
	padding-left: 1em;
}


.arabic #storeBuyItem .prices .price .button{
	right: auto;
	left: 0.25em;
	top: 0.25em;
	font-size: 1.5em;
	padding: 0.5em 0.75em;
}


.arabic .money .icon, .arabic .money.icon,.arabic .score .icon{
	padding-left: 2px;
	padding-right: 0;
}

.arabic #menu menu li div{
	font-size: 1em;
	line-height: 1.15em;
}
.arabic #friendPicker .display,
.arabic #startup .subtitle{
	font-size: 0.8em;
}
.arabic #viewPlot .plotActions .buttonWrap .imageBtn .overlay{
	bottom: 10%;
	width: 90%;
}

.arabic #viewPlot .plotActions .buttonWrap .imageBtn{
	background-position: 50% 0%, center;
}

.arabic #wizard .panel .subtitle{
	direction: rtl;
	text-align: right;
	left: auto;
	right: 1em;
}


.arabic #friendView .profilePicBox,
.arabic #leaderboardView .profilePicBox,
.arabic #friendPicker .profilePicBox{
	padding-left: 0.5em;
	padding-right: 0;
}

.arabic #academy .academyCard .profileDetials{
    padding-right: 0.5em;
    padding-left: 0;
}

.arabic #farmSummary #quests .progress .progressOverlay .flex1,
.arabic #tutorialWelcome .welcomeBox .hint,
.arabic #share .title,
.arabic #friendPicker .display,
.arabic #academy .grads{
	text-align: right;
}

.arabic #viewPlot .subHeading{
	font-size:1em;
	padding-bottom: 0.25em;
}
.arabic .inventory .barnStatus,.arabic .inventory .toggle, .arabic .button{
	font-size: 1em;
}

.arabic #friendView .searchBox .searchAll,
.arabic #friendPicker .online{
	left: 0.3rem;
	right: auto;
}


.arabic #friendView .row .online {
	font-family: inherit;
}

.arabic .levelTube,
.arabic #farmSummary #quests .progress .progressOverlay,
.arabic .farmView .sector .timer,
.arabic #smokey .msg,
.arabic #blingView .blingList .categoryLabel,
.arabic #barnQSelector .modalContainer .qSelect input
{
	font-family: inherit;
	font-weight: bold;
}
.arabic #smokey .msg{
	font-weight: normal;
	font-family: oxygen;
	font-size: 0.8em;
}
.arabic .farmContainer .freeholds .full, 
.arabic #viewPlot .giftTagWrapper > div,
.arabic #profileModal .button,
.arabic #academy .academyCard.pass .button.large {
	font-size: 1em;
}

.arabic .button span, .arabic .item .button img.money{
	vertical-align: middle;
	line-height: 1em;
}

.arabic #walletView #walletTab .button.large {
    margin-top: 0.7em;
    font-size: 1.5em;
}
.arabic #chat .button.large {
    font-size: 2em;
}
.arabic #walletView .rows .button{    
    margin: 0.5em;
}
.arabic #walletView .rows .packageOffer span{
    line-height: normal;
    font-size: 1em;
    white-space: normal;
}
.arabic #forums .category .list .name, 
.arabic .title{
    font-size: 1.2em;
    direction: rtl;
}

.arabic #forums .category .list .name:after{
    float: left;
    line-height: 1.5em;
}
.arabic #farmSummary #comments .button{
	padding: 0.6rem 0.8rem;
	font-size: 1.25em;
}

.arabic #fwbPurchase .fwbSummary, .arabic #fwbPurchase .fwbPerk .label{
	line-height: 1.25em;
	font-size: 1em;
}

.arabic #farmSummary .farmSignBox .profilePicBox, .arabic #profileModal .profilePicWrapper{
	margin-left: 0.5em;
	margin-right: 0;
}

.arabic #farmSummary .farmNoteTail{
	-webkit-transform: scale(-1,1);
	left: auto;
	right: 2em;
}
.arabic .leaderCategories .button .bgImage.arrow,
.arabic #news .arrow{
    background-image: url(/bbw5/img/arrowLeft.png);
}
.arabic #leaderboardView .header #backBtn .bgImage{
    background-image: url(/bbw5/img/arrowRight.png);
}


.arabic #academyLearnMore .title,
.arabic #academyLearnMore .button{
    font-size: 1.2em;
}
.arabic #levelUp .levelUpText{
	font-size: 2em;
}

.arabic #levelUp .levelUpNum{
	font-size: 3.5em;
	line-height: 1.25em;
}

.arabic #viewTrophy .bbwModal .modalContainer .flexBoxH .button{
	font-size: 1em;
	margin-bottom: 0.5em;
}

.arabic #blingViewCategory .title.big, 
.arabic #leaderboardView .header .title,
.arabic #forums .title .arrow,
.arabic #startup .title{
	font-size: 1.75em;
}

.arabic #blingView .myBlingBox .blingLevel,
.arabic #farmBuyGift .item .itemDisplay,
.arabic #share .title{
	font-size: 1.4em;
}

.arabic #viewPlot .cycles{
	font-size: 1.5rem;
	line-height: 2.5em;
}
.arabic #workshop .status .statusText{
	font-size: 1em;
	padding-top: 0.2em;
	font-family:oxygen;
	font-weight:normal;
}
.arabic .itemSelection .price{
	padding-bottom: 0.2em;
}

.arabic .itemSelection .item .storeButton .overlayInfo{
	bottom: 2em;
	font-size: 1em;
}

.arabic #leaderboardView,
.arabic #storeBuyItem .itemDetail .itemDetailBox,
.arabic .profileRow,
.arabic #farmBuyLand,
.arabic #confirmModal,
.arabic #viewTrophy,
.arabic #profileModal,
.arabic #farmSummary #quests,
.arabic .userLevel,
.arabic #academy{
	font-size: 0.9em;
}

.arabic .button.large,
.arabic #wizard .subtitle,
.arabic b,
.arabic .bold,
.arabic .maidenTitle{
	font-weight: normal;
	font-family: yanone;
}
.arabic #wizard .login2 img:last-child,
.arabic #wizard .login1 img,
.arabic #paytable .row img.arrow,
.arabic #invites .row .arrow{
	right: auto;
	left: .5em;
	-webkit-transform: scale(-1,1);
}
.arabic .itemSelection .item .storeButton .overlayIcon{
	bottom: 2em;
}
.arabic #walletView .button span{
	font-size: 1.5em;
	margin-left: inherit;
}
.arabic .gift .unknown{
	-webkit-transform: scale(-1,1);
}
.arabic #blingView .backBtn,
.arabic #leaderboardView .backBtn{
	left: auto;
	right: 0.2em;
	font-size: 1.2rem;
	font-family: arial;
	font-weight: bold;
}

.arabic .feedContent b {
	font-weight: bold;
	font-family: oxygen;
	vertical-align: middle;
}
.arabic #forums .title .arrow{
	padding-top: 0.5em;
	padding-right: 0.5em;
}

.arabic #forums .title .flex1{
	font-size:1.8em;
}
.arabic .fi-info{
	-webkit-transform: scale(-1,1);
    display: inline-block;
}
.arabic #wizard .title img{
	left: 0.5rem;
}
.arabic #wizard .title .auto{
    -webkit-transform:scale(-1,1);
}
.arabic .farmNoteSplash .farmNoteTail{
	left: auto;
    right: 1em;
}
.arabic #chats .searchInput input{
	font-style:normal;
	padding:0.5em;
}
.arabic #invitehelp .maidenTitle{
	width:90%;
}
.arabic #friendView .search .button:first-child{
	margin-right:0;
}
.arabic #friendView .search .button:last-child{
    margin-left:0;
}
.arabic #mel .paybutton{
	position: relative;
	left: 0.1em;
}
.arabic #mel .paybutton span{
    position: absolute;
	font-size: 0.6em;
	left: 1em;
}
.arabic div[data-id="wallet"] .bgImage,
.arabic li[data-id="wallet"] .bgImage{
	background-image: url(/bbw5/img_ar/wallet_50.png) !important;
}
.arabic #nav .currentView b,
.arabic #tutorialWelcome .welcomeBox #startGame,
.arabic #workshop .status .time{
	font-weight:normal;
	font-family: oxygen;
}
.arabic #tutorialWelcome .melBubble img {
	height: 1.5em;
	vertical-align: bottom;
}
.arabic #newORexist .bubble {
    text-align: right;
}
.arabic .imageBtn .overlay{
	font-size:0.6em;
	line-height:1em;
}

.arabic #auction {
    font-size: 0.8em;
}
.arabic #auction .head,
.arabic .auctionDialog .label {
    text-align: left;
}
.arabic #farmGiftsList .gift .label {
    font-size: 1.2em;
}
.arabic .dir {
    direction: rtl;
    text-align: right;
}
.arabic .dlgInfo {
    font-family: inherit;
    direction: rtl;
}
.arabic .right.edge {
    text-align: left;
}



#onlineFarmers .modalContainer{
	background: rgb(212, 212, 212);
	height: 75%;
}
#onlineFarmers .btn-group{
	display: block;
	margin-right: 0.25em;
	margin-top: 2px;
}
#onlineFarmers button{
	font-size: 2em;
	padding: 0.15em 0.6em;
}
#onlineFarmers .userList{
	text-align: left;
	margin-top: 0.5em;
}
#onlineFarmers .userList .user{
	display: inline-block;
	width: 25%;
	padding: 0.35em 0.45em;
	box-sizing: border-box;
	position: relative;
}

#onlineFarmers .userList .user  *{
	pointer-events: none;
}

#onlineFarmers .userList .user .profilePicBox{
	position: relative;
}
#onlineFarmers .userList .user .display{
	top: auto;
	text-align: center;
	font-size: 1.15em;
	bottom: 0.3em;
	overflow-x: hidden;
	text-overflow: ellipsis;
	width: 80%;
	white-space: nowrap;
	margin: auto;
	font-family: yanone;
}

#onlineFarmers .userList .user .gender{
	left: auto;
	right: 0.375em;
	bottom: 0.15em;
	font-size: 1.5em;
	top: auto;
}
#onlineFarmers .userList .user.female .gender{
	color: rgb(255, 91, 173);
}
#onlineFarmers .userList .user.male .gender{
	color: rgb(57, 209, 255);
}

/*#onlineFarmers .userList .user.male .profilePic{
	box-shadow: inset 0 0 2px rgba(87, 61, 14, 0.8), 0 0 3px rgb(0, 80, 130);
	border: 2px solid rgb(0, 80, 130);
}
#onlineFarmers .userList .user.female .profilePic{
	box-shadow: inset 0 0 2px rgba(87, 61, 14, 0.8), 0 0 3px rgb(195, 11, 105);
	border: 2px solid rgb(195, 11, 105);
}
#onlineFarmers .userList .user.noSex .profilePic{
	box-shadow: inset 0 0 2px rgba(87, 61, 14, 0.8), 0 0 3px rgb(0, 0, 0);
	border: 2px solid rgb(0, 0, 0);
}*/

#onlineFarmers .user {
    display: none;
}

#onlineFarmers .userList.all .user {
    display: inline-block;
}

#onlineFarmers .userList.male .user.male {
    display: inline-block;
}
#onlineFarmers .userList.male .user.female {
    display: none;
}
#onlineFarmers .userList.male .user.noSex {
    display: none;
}

#onlineFarmers .userList.female .user.female {
    display: inline-block;
}

#onlineFarmers .userList.female .user.male {
    display: none;
}

#onlineFarmers .userList.female .user.noSex {
    display: none;
}


#bbwiki input{
	width: 80%;
	display: block;
	margin: auto;
}

#bbwiki .searchBtn{
	height: 1em;
}

#bbwiki .item{
	border-bottom: 1px dashed #573D0E;
	margin-bottom:0.25em;
	padding-left: 1em;
}

#bbwiki .item img{
	width: 80px;
	height: 80px;
}

#bbwiki .item .name{
	font-family: yanone;
	font-size: 1.25em;
	text-align: left;
}

#bbwiki .item .detail{
	margin-left: 1em;
}

#bbwiki .item .icon{
	width: 10%;
	margin: 0 0.5em;
	cursor: pointer;
}
#workshop{
	background-size: cover;
	background-position: center top;
}

#workshop .wsTitle{
	font-size: 3.25em;
	color: #B1598F;
	text-align: center;
	line-height: 1em;
	vertical-align: top;
	margin-top: 0.25em;
}

#workshop .wsTitle img{
	height: 1.25em;
}
#workshop .status{
	text-align: center;
	top: -2px;
	width: 9em;
	left: auto;
	bottom: auto;
	right: 1em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	font-family: arial;
	font-size: 1em;
}

#workshop .status .statusText{
	font-size: 0.8em;
	color: white;
	padding-top: 0.75em;
	font-weight: bold;
}

#workshop .status .time{
	padding: 0.25em;
	padding-bottom: 0.5em;
	color: #444543;
	font-size: 1.25em;
	font-family: yanone;
}

#workshop .wallet{
	font-size: 1.5em;
	font-family: yanone;
	color: rgb(255, 255, 255);
	margin: 0.5em 0.25em;
	position: relative;
	background-color: rgba(0,0,0,0.6);
	padding: 0 0.75em;
	padding-left: 1.5em;
	border-radius: 0.25em;
	margin-left: 1.25em;
}

#workshop .wallet img{
	height: 1.75em;
	top: -0.25em;
	left: -0.75em;
}

#workshop .moreElves{
	font-size: 1.25em;
	background: rgb(28, 171, 28);
	line-height: 1em;
	margin: 0.6em 0em;
	padding: 0 0.45em;
	border-radius: 0.25em;
	color: white;
	box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.81), inset 0 -1px 4px rgba(0, 0, 0, 0.46);
}

#workshop .options{
	width: 98%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	margin-top: 1.5em;
}

#workshop .options .cardBox{
	padding: 0 10px;
	text-align: center;
	width: 30%;
}
#workshop .options .card{
	border-radius: 0.5em;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	box-sizing: border-box;
	background-color: white;
	background-size: 100%;
	background-position: center;
}
#workshop .options .card img {
    display: inline;
    padding-top: 0;
}

#workshop .card.back .rareBg{
	display: none;
	background-color: rgb(233, 233, 233);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: -1;
	border-radius: 10px;
}

#workshop .rare .card.back .rareBg{
	display: block;
}

#workshop .card.back .qty{
	font-size: 1.75em;
}
#workshop .options .card.back img{
	display: block;
	margin: auto;
	padding-top: 2em;
	max-width: 60%;
}
#workshop .options .cost{
	font-size: 1.25em;
	vertical-align: top;
	margin: 0.25em auto;
	color: rgb(255, 255, 255);
	font-family: yanone;
	top: auto;
	width: 70%;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 0.5em;
	padding-top: 0.15em;
	bottom:	0.75em;
	white-space: nowrap;
	overflow: hidden;
}
#workshop .options .cost img{
    vertical-align: top;
	height: 1.25em;
}
#workshop .options .card .openLabel{
	font-family: yanone;
	font-size: 2em;
}

#workshop .options .card .premiumLabel{
	bottom: auto;
	font-family: maiden;
	font-size: 1.5em;
	color: #BE7704;
	padding: 0.25em 0;
	background-color: rgba(246, 221, 56, 0.5);
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}


#workshop .closeLabel{
	font-size: 6em;
	-webkit-transform: rotate(-4deg);
	background: rgba(0, 0, 0, 0.6);
	font-family: maiden;
	padding: 0.25em 0.5em;
	border-radius: 0.15em;
	color: white;
	text-shadow: 0 0 6px black;
	line-height: 1em;
	border: 4px solid black;
}

#workshop .prizes{
	width: 95%;
	margin: 1em auto;
	margin-bottom: 1em;
	font-family: yanone;
	font-size: 1.5em;
	color: white;
	padding: 0.25em;
	box-sizing: border-box;
	background-position: center;
	border-radius: 0.5em;
	text-align: center;
	border: 4px solid #573D0E;
}

#workshop .prizes > div{
	margin-bottom: 0.25em;
	color: #FFF9D6;
}

#workshop .prizes .scrollBox{
	margin: 0.25em auto;
	width: 98%;
	right: 0;
}
#workshop .prizes .items{
	position: relative;
	background-color: rgba(242, 219, 195, 0.4);
	border-radius: 0.5em;
	background-position: center;
}
#workshop .prizes .item{
	display: inline-block;
	width: 15.6%;
	position: relative;
	padding-bottom: 15.6%;
	border-radius: 0.25em;
	margin: 0.5%;
	background-position: top;
	box-sizing: border-box;
	background-size: 95%;
}

#workshop .prizes .item.premium{
	/*background-color: rgba(246, 221, 56, 0.5);*/
}

#workshop .prizes .item .premiumLabel{
    bottom: 0;
    top: 0;
	font-size: 0.9em;
	text-align: center;
	color: #BE042E;
	z-index: -1;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 0.25em;
}


#workshopMoreElves .button{
	display: block;
	margin: 0.75em auto;
	width: 60%;
}
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	-webkit-perspective: 1000;
}
/* flip the pane when hovered */
.flip-container.hover .flipper {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 100%;
	height: 100%;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	-webkit-transition: 0.6s;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	position: relative;
	width: 100%;
	height: 100%;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

#stampContainer {
    padding: 0.5em;
    
    display: -webkit-box;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    box-sizing: border-box;
}
#stamps {
    font-family: Yanone, Sans-Serif;
    visibility: hidden;
    padding: 0.25em;
    background-color: #90d6ff;
    border: 2px solid white;
    border-radius: 0.5em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#stamps .title {
    text-align: center;
    font-size: 2em;
    color: white;
    text-shadow: 0 0 2px black;
    padding: 0.5em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}
#stamps .title > * {
    vertical-align: middle;
}
#stamps .title img {
    height: 1.5em;
    margin: 0 0.25em;
}

#stamps:after {
    clear: both;
}

#stamps .day {
    display: inline-block;
    background-color: white;
    text-align: center;
    float: left;
    position: relative;
    box-sizing: border-box;
}

#stamps .day:nth-child(2n) {
    background-color: #E8E8E8;
}

#stamps .day.special {
        background-color:#90d6ff;
}
#stamps .day.special:last-child {
    -webkit-animation: blinkStamp 2s infinite;
}

@-webkit-keyframes blinkStamp {
    0% {
        background-color:#90d6ff;
    }
    50% {
        background-color:#C5E9FD;
    }
    100% {
        background-color:#90d6ff;
    }
}

#stamps .bg {
    height: 100%;
}

#stamps .date {
    position: absolute;
    left: 5%;
    top: 3%;
    color: rgba(88, 88, 88, 0.5);
    font-family: maiden;
    font-size: 1.25em;
}

#stamps .count {
    font-family: oxygenBold;
    font-size: 0.6em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: rgb(88, 88, 88);
}

#stamps .stamp {
    position: absolute;
    background-color: rgba(87,61,14,0.5);
    border: 1px solid #573d0e;
    border-bottom-width: 2px;
    box-shadow: 0 1px 2px #573d0e;
    color: white;
    text-shadow: 0 0 5px black;
    padding: 0.25em;
    bottom: 25%;
    cursor: pointer;
    border-radius: 0.25em;
}

#stamps .stamped {
    position: absolute;
    display: none;
    left: 20%; top: 20%;
    width: 60%;
    height: 60%;
}

#stamps .completed .stamped {
    display: inherit;
}
#stamps .completed .bg {
    opacity: 0.5;
}




.inventory{
	background-color: #795E39;
}

.inventory .scrollBox{
	width: 100%;
}

.inventory .barnStatus, .inventory .toggle{
	font-size: 1.4rem;
	font-family: yanone;
	background-color: rgba(0, 0, 0, 0.4);
	padding: 0.2em 0.4em;
	border-radius: 0.5em;
	color: white;
	cursor: pointer;
	margin: 0 0.1em;
}

.inventory .barnStatus{
	left: auto;
	bottom: auto;
	top: 0.5rem;
	right: 1rem;
}
.inventory .filters{
	left: 1rem;
	bottom: auto;
	top: 0.5rem;
	right: auto;
}

.inventory .toggle.active{
	background: rgba(255, 255, 255, 0.8);
	color: #573D0E;
	box-shadow: 0 0 4px;
}
.inventory .barnStatus span{
	padding-left: 0.2em;
}
.inventory .barnNav{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	width: 60%;
	max-width: 400px;
	margin: auto;
	bottom: auto;
}
.inventory .barnType{
	background-color: #DDCEB3;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	padding: 0.4em 0.8em;
	padding-top: 0.2em;
	font-family: 'yanone', 'oxygenBold', sans-serif;
	font-size: 1.4em;
	color: #573D0E;
	text-align: center;
	border: 2px solid #573D0E;
	border-top: 0;
	line-height: 1em;
	height: 1em;
	cursor: pointer;
}


.inventory .barnType.active{
	font-size: 24px;
	background: white;
}

.inventory .barnType span{
	font-family: oxygen;
	font-size: 10px;
}
.inventory section{
	width: 95%;
	margin:auto;
	max-width: 600px;
	background-size: 100%;
	padding-top: 2em;
	padding-bottom: 5em;
}

.inventory section .itemWrap{
	padding: 0;
	display: block;
	background-size: 100%;
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
    line-height: 0;
}

.inventory .shelf {
    padding: 0 5%;
	display: table;
	width: 100%;
	box-sizing: border-box;
}

.inventory .items{
	display: inline-block;
    vertical-align: top;
	width: 25%;
	text-align: center;
	position: relative;
	cursor: pointer;
    margin-top: 4%;
    margin-bottom: 30.30555555556%; /* 247 / 720 - 4%  (720 = 800-10%) */
}

.inventory .items.fade{
	opacity: 0.2;
}


.inventory .items img{
    position: absolute;
    left: 10%;
	width: 80%;
	height: auto;
	margin: auto;
	pointer-events: none;
}

.inventory .items .count{
    position: absolute;
    padding-top: 90%;
	top: 0;
	left: 0;
	right: 0;
}

.inventory .items .count div{
	background-color: rgba(171, 159, 95, 0.8);
	line-height: 1.2em;
	border-radius: 4px;
	font-weight: 700;
	border-top: 1px solid #444;
	text-align: center;
	font-size: 9px;
	color: white;
	padding: 2px 1em;
	text-shadow: 0 0 4px #444;
}
.inventory .barnAction{
	color: #573D0E;
	font-family: yanone;
	font-size: 24px;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 1px 6px black;
	line-height: 0.8em;
}

.inventory .barnAction div{
	padding-bottom: 1em;
	margin-bottom: 1em;
	width: 80%;
	margin: auto;
}

#barnUpgrades .imageBtn{
	width: 30%;
	display: inline-block;
	padding-bottom: 28%;
	position: relative;
	font-size: 1.6em;
}

#itemInfo .backdrop{
	background-color: rgba(0,0,0,0.4);
}
#itemInfo .modalContainer{
	background-color: #FEFFF4;
}
#barnItemDetail .backdrop{
	background-color: rgba(0,0,0,0.4);
}

#barnItemDetail .modalContainer{
	background-size: 80%;
	background-position: top;
}
#barnItemDetail .info{
	display: inline-block;
	margin-left: 5px;
	font-size: 1.3em;
	cursor: pointer;
}



#barnItemDetail div.box{
	background-color: #765B36;
	display: inline-block;
	padding: 0.25em 1em;
	border-radius: 0.75em;
	margin: 1em 0.5em;
	min-width: 12rem;
	box-shadow: inset 0 1px 2px #573D0E, 0 1px 1px rgba(255, 255, 255, 0.41);
}

#barnItemDetail div.box .title{
	width: auto;
	margin: auto;
	color: #FFFBE5;
	text-shadow: 0 -1px 2px #573D0E;
	font-size: 1.4em;
	cursor: pointer;
	direction: ltr;
}

#barnItemDetail div.box .money{
	font-family: oxygenBold;
}

#barnItemDetail div.box .note{
	background: rgba(0,0,0,0.15);
	border-radius: 0.5em;
	color: rgba(255, 251, 229, 0.8);
	display: block;
	font-size: 0.9em;
	margin: 0.4em auto;
	max-width: 10rem;
	padding: 0.1em 0;
}

#barnItemDetail .itemWrap{
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 70%;
}

#barnItemDetail .item{
	position: relative;
	background-size: 60%;
	background-position: center;
}



#barnItemDetail .count{
	pointer-events: none;
}

#barnQSelector .modalContainer{
	width: 80%;
	top: 16%;
}

#barnQSelector .modalContainer .qSelect{
	width: 80%;
	margin: 8px auto;
	font-size: 22px;
}

#barnQSelector .modalContainer .qBtn span{
	height: 1.5em;
	width: 1.5em;
	background-color: #FAEEAD;
	border-radius: 5em;
	display: block;
	line-height: 1.5em;
	box-shadow: 0 1px 1px;
}

#barnQSelector .modalContainer .qBtn.gc_focus span{
	box-shadow: 0 0px 1px;
}

#barnQSelector .modalContainer .profit{
	font-family: yanone;
	font-size: 26px;
	padding-right: 2px;
}

#barnQSelector .modalContainer .qBtn{
	cursor: pointer;
}

#barnQSelector .modalContainer .qBtn.disabled{
	opacity: 0.5;
	pointer-events: none;
	color: black;
}

#barnQSelector .modalContainer .qSelect input {
    width: 100%;
	font-family: yanone;
	padding: 0 0;           /* android 4.0 bug? */
	margin: 0;
	display: inline-block;
	text-align: center;
}
#barnQSelector .qSelect .qBtn {
    display: block;
}
#barnQSelector .modalContainer .qSelect .flex1{
    margin: 0 5%;
}

#barnQSelector .friendWarning{
	margin-top: 0.5em;
	line-height: 1.2em;
	font-size: 12px;
}


#landing {
    background-color: #67be44;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}
#landing .top {
    position: relative;
    height: 30%;
    max-height: 50%;
}
#landing .top > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#landing .top .cloud {
    position: relative;
    width: 200%;
    -webkit-animation: cloud 240s infinite linear;
}
#landing .top .cloud > * {
    float:left;
    width: 50%;
    height: 100%;
}
@-webkit-keyframes cloud {
    0% {
        -webkit-transform: translate(0px, 0px);
    }
    100% {
        -webkit-transform: translate(-50%,0px);
    }
}
#landing .footer {
    text-align: center;
    padding: 0.5em 0 1em;
}
#landing .footer > * {
    margin: 0 0.5em;
    box-sizing: border-box;
}
#landing .button {
    padding: 0.5em 1em;
    font-size: 1.75em;
}
#landing .logo {
    position: absolute;
    left: 0; top: -100%;
    width: 100%;
    text-align: center;
}
#landing .logo img {
    width: 60%;
}
#landing .pics {
    overflow: hidden;
    box-sizing: border-box;
}
#landing .clip {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#landing .pics .scroller {
    position: relative;
    width: 300%;
    height: 100%;
}
#landing .pics .scroller > * {
}
#landing #frame {
    position: absolute;
}

#landing #frame > * {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    pointer-events: none;
}

#landing #frame .char {
    left: auto; top: auto;
    right: -13%;
    bottom: -2%;
}

#landing #frame .rib {
    left: -35%;
    top: -15%;
}

#landing #frame .rib div {
    padding: 10% 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transform: rotateZ(-14deg);
    color: white;
    font-family: yanone;
    font-weight: bold;
    font-size: 1.3em;
    letter-spacing: 0.1em;
}
.arabic #landing #frame .rib div {
    font-size: 0.9em;
    letter-spacing: 0;
}

#landing #frame .border {
    position: relative;
}

#landing #frame .dots {
    position: absolute;
    bottom: 10%;
    left: 40%;
    width: 20%;
    height: 3%;
    box-sizing: border-box;
    text-align: center;
}

#landing #frame .dot {
    display: inline-block;
    width: 10%;
    margin: 0 5%;
    background-color: #a55e12;
}

#landing #frame .dot.active {
    background-color: #582b00;
}





.winter #viewPlot .viewPlotContainer,
.winter .bbwModal .modalContainer,
.winter .bbw_popup {
	background-color: #BBDBEA;
}




#startup {
    background-color: rgba(0,0,0,0.6);
    text-align: center;
}
#startup .dialog {
    width: 85%;
    font-family: yanone;
    background-color: transparent;
    box-shadow: none;
}
#startup .title {
    font-size: 2em;
}
#startup .board {
    padding: 0.5em;
    position: relative;
    border-radius: 0.5em;
    border-top: 0.25em solid #fcf8c7;
    border-bottom: 0.25em solid #ccb34b;
}

#startup p {
    text-align: center;
    padding: 0 1em;
    font-size: 1em;
    margin: 0.5em 1em 0;
}
#startup .subtitleContainer {
    position:absolute;
    top: -1em;
    left: 0;
    right: 0;
    height: 2em;
}
#startup .subtitle {
    height: 100%;
    color: white;
    font-size: 1.2em;
    letter-spacing: 0.025em;
}
#startup .tape3 {
    color: #cf8f07;
}
#startup .top {
    background-color: #e3d689;
    margin-top: -1.5em;
    margin-bottom: 0.5em;
    border-radius: 0.5em;
    border: 0.25em solid #614715;
    color: #543e16;
    text-shadow: -2px -2px 2px white, 2px -2px 2px white, 2px 2px 2px white, -2px 2px white;
    font-size: 1.2em;
}
#startup .bottom {
    position: relative;
    background-color: #e3d689;
    border-radius: 0.5em;
    border: 0.25em solid #614715;
}
#startup .top .board {
    padding-top: 1.5em;
}
#startup .tape {
    text-transform: uppercase;
    text-shadow: 0 1px 1px #d54949;
    color: #F2EBE3;
    height: 2em;
    font-size: 1.2em;
    letter-spacing: 0.05em;
}

#startup .red {
    color: #f6898f;
}

#startup .items {
    background-color: rgba(87,61,14,0.6);
    border-radius: 0.5em;
    box-sizing: border-box;
    margin-top: 1.5em;
    margin-bottom: 1em;
    padding-top: 1em;
    padding-bottom: 0.5em;
}
#startup .items .scroller {
    padding: 1em 0;
    text-align: center;
}

#startup .item {
    display: inline-block;
    border-radius: 0.5em;
    position: relative;
    width: 20%;
    margin: 2%;
    padding: 1% 2%;
    background-color: rgba(87,61,14,0.6);
    box-sizing: border-box;
}
#startup .item > * {
    pointer-events: none;
}    
#startup .items.bonus {
    background-color: rgba(200,134,4,0.6);
    text-shadow: 0 1px 1px #7f5d1a;
}
#startup .items.bonus .item {
    background-color: rgba(240,220,31,0.8);
}

#startup .icon {
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 0.25em;
}

#startup .count {
    font-family: yanone;
    font-size: 1em;
    color: white;
}

#startup .badge {
    position: absolute;
    left: -2em;
    top: -1.5em;
    font-family: yanone;
    color:white;
    font-size: 1.4em;
    text-shadow: 0 1px 1px #d54949;
    width: 5em;
    height: 5em;
    -webkit-transform:rotateZ(-30deg);
    padding-top: 0.1em;
    font-size: 1.5em;
}

#startup .badge.right {
    left: auto;
    right: -2em;
    -webkit-transform:rotateZ(30deg);
}

#startup .brown {
    color: #8d6a01;
}

#startup .arrow {
    position: absolute;
    top: 50%;
}

#startup .arrow img.gc_focus {
    -webkit-transform: scale(0.9,0.9);
}

#startup .arrow.left {
    left: -2em;
    -webkit-transform:scale(-1,1);
}
#startup .arrow.right {
    right: -2em;
}
#startup .arrow img {
    height: 3em;
    top: -1.5em;
}



/*#guild {
    padding-right: 15px;
    z-index: 2;
}*/
#guild dd {
    position: relative;
}
#guild .body {
    height: 100%;
    border-right: 1px solid #573D0E;
}
#guild .footer {
    padding: 0.5em;
    padding-bottom: 1em;
}
#guild .footer .gc_text {
    border: none;
    padding: 0;
    margin: 0 0.25em;
}
#guild .portrait {
    width: 2.5em;
    height: 2.5em;
    margin: 0.25em;
}
#guild #contentGuild {
    position: relative;
}
#guild #contentGuild > div {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    padding-top: 0.5em;
}
#guild .chat {
    margin: 0.25em;
    color: #6B5444;
    font-family: oxygenBold, san-serif;
}
#guild .system {
    padding-left: 1em;
    padding-right: 1em;
    font-family: courier;
}
#guild .usage {
    color: #4D7013;
}
#guild .error {
    color: #a12222;
}
#guild .info {
    color: #0a6691;
}
#guild .bubble .button {
    margin-right: 0.25em;
}
#guild p, #guild pre {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
#guild .userRow.button {
    margin: 0.25em;
}
#guild .userRow.admin, #guildProfile .userRow.admin {
    border: 2px solid #10A7EE;
}
#guild .userRow.pending {
    opacity: 0.8;
}
#guild .userRow.pending.first {
    margin-top: 1em;
}
#guild .online, #guildProfile .online {
    margin: 0.25em;
}
#guild .profile_frame, #guildProfile .profile_frame {
    margin: 0.25em;
}
#guild .handle {
    position: absolute;
    width: 13px;
    height: 2em;
    top: 50%;
    right: 2px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border:1px solid #573D0E;
    border-left: none;
    box-sizing: border-box;
    pointer-events: none;
    box-shadow: 0 0 8px white;
}
#guild .alert {
    position: absolute;
    pointer-events: none;
    background-color: #fff7f2;
    border-radius: 10px;
    padding: 1em;
    top: 49%;
    left: 105%;
    font-family: maiden;
    border: 4px solid #dcc27c;
    color: #573d0e;
    box-shadow: 0 1px 2px rgba(87,61,14,0.8);
    visibility: hidden;
    -webkit-transition: all 1s linear;
    opacity: 0;
    width: 10em;
}
#guild .alert.show {
    opacity: 1;
    visibility: inherit;
}
#guild .alert .tail {
    position: absolute;
    left: -25px;
    top: 10px;
    width: 30px;
    height: 25px;
    -webkit-transform: rotateZ(90deg);
}
#guild.new .handle {
    -webkit-animation: beat 0.5s infinite;
}
@-webkit-keyframes beat /* Safari and Chrome */
{
    0% {-webkit-transform: scale(1,1);}
    50% {-webkit-transform: scale(1,1.5); border-color:#B92626;}
    100% {-webkit-transform: scale(1,1);}
}

#newguild #textTeam {
    margin-bottom: 1em;
}
#newguild .dialog {
    min-width: 18em;
    width: 18em;
}
#newguild .body {
    padding: 3em 2em 2em;
}

#guildProfile .dialog {
    width: 80%;
    height: 50%;
    max-height: 80%;
}
#guildProfile .body {
    padding: 2em 1em;
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
}
#guildProfile .members {
    margin-top: 0.5em;
}





.block {
    display: block;
}
.inlineBlock {
    display: inline-block;
}
.padding5 {
    padding: 0.5rem;
}
.margin0 {
    margin: 0 0 0 0;
}
.margin5 {
    margin: 0.5rem;
}
.margin25 {
    margin: 0.25rem;
}
.invisible {
    visibility: hidden;
    pointer-events: none;
}
.small {
    font-size: 0.8em;
}
.guild.text {
    font-size: 1.1em;
    color: #A0E2EB;
    text-shadow: 0 0 3px rgba(0,0,0,0.6);
}
div.gc_alert > .title {
    height: auto ! important;
}


.tabs2 {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    text-align: center;
    font-family: yanone,sans-serif;
}
.tabs2 dd {
    margin: 0;
    font-size: 1.4em;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1);
    -webkit-box-flex:1;
    padding: 0.25em;
}
.tabs2 dd.active {
    background-color: transparent;
    box-shadow: none;
}
.profile_frame {
    width: 4em;
    height: 4em;
    border-radius: 0.25em;
    box-shadow: inset 0 0 2px rgba(87,61,14,0.8), 0px 0px 1px rgba(87,61,14,0.8);
    overflow: hidden;
}
.profile_pic {
    border-radius: 0.25em;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}
.profile_status {
    width: 1.5em;
    height: 1.5em;
    background-size: 100% 100%;
    margin-right: 2px;
}
.bbvc {
    display: -webkit-inline-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    font-family: oxygen;
}
.bbvc > div:first-child {
    background-size: 100% 100%;
    width: 1.5em;
    height: 1.5em;
    margin: 0.25em;
}
.white {
    color: white;
}
.userRow {
    position:relative;
    background-color: #fffcec;
    border-radius: 0.5rem;
    box-shadow: 0 1px 5px #573d0e;
    width: auto;
    font-family: yanone;
    margin: 0.25em;
    box-sizing: border-box;
    text-align: left;
}

/* dialog info */
.dlgInfo {
	font-size: 1.25rem;
	font-family: maiden;
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5);
	vertical-align: middle;
	background-color: #eee;
	border-radius: 4px;
	padding: 2px 0;
	margin: 0.5rem;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
	color: rgb(88,88,88);
}
	
.dlgInfo.safe{
    color: #20B7FE;
}
.dlgInfo.low{
    color: #E1B800;
}
.dlgInfo.med{
    color: #EF7A00;
}
.dlgInfo.high{
    color: #EF2760;
}
.money {
	font-family: oxygen, sans-serif;
}

.money > * {
    vertical-align: middle; 
}

.money img.icon {
    height: 1.2rem;
    width: 1.2rem;
    margin-right: 2px;
}

.dialog {
    position: relative;
    min-width: 50%;
    max-width: 500px;
    border-radius: 0.5em;
    background-color: #BADD48;
    -webkit-box-shadow: 0 0 10px black;
    line-height: normal;
}
.dialog .body {
    padding-top: 1.75em;
    border-radius: 0.5em;
}
.dialog .close {
    position: absolute;
    right: -0.75em;
    top: -0.75em;
    width: 2em;
    height: 2em;
}
.dialog .title {
    padding: 0;     /* DELETE */
    height: auto;   /* DELETE */
    position: absolute;
    left: 0; right: 0;
    top: -1em;
    overflow: hidden;
    z-index: 1;
    direction: ltr ! important;
    pointer-events: none;
}
.dialog .title .wood {
    height: 2em;
    color: #F2EBE3;
    text-transform: uppercase;
    text-shadow: 0 2px 2px #1e0f01;
    padding: 0 1em;
    font-family: maiden;
    max-width: 80%;
}
.dialog .title .wood .text {
    max-width: 80%;
}
.dialog .footer {
    position: absolute;
    text-align: center;
    left: 0; right: 0;
    bottom: -1em;
}

.dialog .footer .button {
    background-color: #0da775;
    color: white;
    padding: 0.25em 1.5em;
    border: 2px solid #004115;
    margin: 0 0.25em;
}

.dialog .wave {
    height: 1em;
    top: -1em;
    position: absolute;
    left: 0;
    right: 0;
}

.options2 {
    color: #573D0E;
    border: 2px solid #573D0E;
    border-radius: 0.5em;
    background-color: rgba(0,0,0,0.04);
}
.options2 .row {
    width: auto;
    padding: 0.5em 0.25em;
    font-family: oxygen;
    text-align: left;
    border-bottom: 1px dashed #573D0E;
}
.options2 .row:last-child {
    border: none;
}
.options2 .row > * {
    pointer-events: none;
}
.options2 .row.gc_focus {
    background-color: rgba(0,0,0,0.1);
    border-radius: 0.5em;
}

#report {
    font-family: yanone;
}
#report .body {
    padding: 1.5em 0.5em;
}
#report p {
    margin: 0.5em;
}
#report .item {
    margin: 0.25em;
}
#report .icon {
    width: 4em;
    height: 4em;
    background-size: 100% 100%;
}

.resetAlign {
    text-align: initial;
}

.horizontal .scroller {
    height: 100%;
    white-space: nowrap;
}

.borderBox {
    box-sizing: border-box;
}

.floatLeft {
    float: left;
}



@media only screen and (min-width: 40em) { 
	html{
		font-size: 12pt;
	}
}
@media only screen and (min-width: 20em) and (max-width: 40em) { 
	html{
		font-size: 10pt;
	}
}

@media only screen and (max-width: 20em) { 
	html{
		font-size: 9pt;
	}
	#walletView .rows .packageOffer .imageWrap .itemImage{
		display: none;
	}

	#walletView .rows .packageOffer .imageWrap .itemImage:first-child{
		display: inline-block;
	}
	#walletView .rows .packageOffer .imageWrap:after{
		content: "";
	}
}

/* progress bars on start up */
#loading {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    text-align: center;
    overflow: hidden;
    font-family: arial;
    font-size: 1em;
    background-color: rgb(181, 215, 73);
}
#loading.ready {
    top: 0;
}
#loading img.logo {
	width: auto;
	height: 30%;
}

#loading #prog {
    display: inline-block;
    position: relative;
    height: 2em;
    margin: 16px;
    width: 50%;
    overflow: hidden;
    max-width: 400px;
    background-color: #eeeeee;
    border-bottom: 1px solid #2E617F;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
#loading #prog div {
    width: 0;
    height: 100%;
    background-color: #5DC3FF;
}

#loading #prog .overlay{
	width: 100%;
	text-align: center;
	line-height: 1.8em;
	color: #2E617F;
	font-weight: bold;
	font-size: 1.2em;
	background-color: transparent;
}


#wizard .login1 div.maidenTitle{
	font-size: 2em;
	line-height: 1.2em;
	font-family: londrina;
	text-shadow: 0 1px 0px rgba(255, 255, 255, 0.5);
}

#newORexist .bubble {
    border-radius: 0.8em;
    border: solid #e7cb81;
    border-width: 0.25em ! important;
    background-color: #fdf5f0;
    left: 45%;
}
#newORexist .bubble .tail {
    bottom: -1.5em ! important;
}


#newORexist p{
	font-family: londrina;
	font-size: 1.2em;
}

#wizard div.login2{
	font-weight: normal;
	font-size: 1.4em;
	font-family: londrina
}

#wizard .gc_text{
	height: 2em;
	font-size: 1.4em;
	padding-left: 0;
}


#newORexist div.container img.mel{
	left: 1%;
	max-height: 42rem;
}

.more {
    text-align: center;
}

.more img {
    width: auto;
    height: 1.5em;
}

.more > * {
    vertical-align: middle;
    font-weight: bold;
    margin: 0.25em 0.5em;
}
.userLevel{
	font-family: 'yanone';
	color: rgba(170, 41, 35, 1);
	font-size: 1.05em;
}

div.gc_alert .title {
    padding-top: 0.5em;
}


#news .title{
	font-family: londrina;
	font-size: 2.25em;
	margin: 0 auto;
	margin-bottom: 0.5em;
}

#news .item{
	text-align: left;
	background-color: rgba(0,0,0,0.05);
	border-radius: 0.5em;
	padding: 0.25em 0.5em;
	border: 2px solid;
	box-shadow: 0 3px 1px;
	font-family: londrina;
	font-size: 1.2em;
	margin: 0.5em 0;
	cursor: pointer;
	line-height: 1.1em;
	min-height: 3em;
}

#news .content{
	margin: 0 0.5em;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

#news .arrow, #news .image{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
#news .arrow{
    background-image: url(/bbw5/img/arrowRight.png);
}

#news .closeBtn{
	margin-top:0.5em;
}

.textBoxLight{
	background: rgba(255, 255, 255, 0.5);
	padding: 0.5em;
	border-radius: 0.5em;
	box-shadow: inset 0 1px 2px;
	font-family: oxygenBold;
	line-height: 1.25em;
}

.textBoxDark{
	background: rgba(0, 0, 0, 0.1);
	padding: 0.5em;
	border-radius: 0.5em;
	box-shadow: inset 0 1px 2px;
	line-height: 1.25em;
}


#settingsEdit .modalContainer{
	top: -10%;
}

#settingsEdit .modalContainer .button{
	margin: 0.5em;
}

#settingsEdit .description{
	background: rgba(0,0,0,0.05);
	border-radius: 0.5em;
	padding: 0.5em 1em;
	box-shadow: inset 0 1px 1px;
	text-align: left;
}
#userReport .user .profilePicBox{
	width: 3em;
	margin: auto;
}
#userReport .reportOptions{
	margin-bottom: 0.5em;
	border: 2px solid;
	border-radius: 0.5em;
	background: rgba(0, 0, 0, 0.04);
}
#userReport .reportOptions .option{
	padding: 1em 0.5em;
	text-align: left;
	border-bottom: 1px dashed;
	cursor: pointer;
}

#userReport .reportOptions .option.active{
	background: rgba(0,0,0,0.1);
}
#userReport .reportOptions .option:last-child{
	border-bottom: none;
}

#userReport .reportOptions .option .inputStep{
	display: none;
	padding: 0.5em 0;
}

#userReport .reportOptions .option .inputStep .button{
	display: flex;
}
#userReport .reportOptions textarea{
	width: 100%;
	margin: 0;
}

#userReport .options .button{
	display: block;
	width: 65%;
	margin: 0.25em auto;
}
#userReport textarea{
	display: block;
	padding: 0.5em;
	box-sizing: border-box;
	margin: 0.5em auto;
	width: 70%;
}

#shareMyFarm .farmImage{
	border-radius: 0.5em;
	border: 2px solid #573D0E;
	display: block;
	margin: auto;
	width: 400px;
	height: 400px;
	max-height: 16rem;
	max-width: 16rem;
	box-shadow: 0 0 4px;
}

#shareMyFarm .farmImage canvas{
	border-radius: 0.5em;
	max-height: 16rem;
	max-width: 16rem;
}
.footer > .button.large.return:after {
    content: "<";
    font-size: 1.2em;
    font-family: monospace;
    font-weight: bold;
}

.flexBox.vcenter, .flexBoxH.vcenter, .inlineFlexBoxH.vcenter {
    -webkit-box-align: center;
    -webkit-box-pack: center;
}
.flexBoxH.lcenter {
    -webkit-box-align: center;
}
.flexBoxH.rcenter {
    -webkit-box-align: center;
    -webkit-box-pack: end;
}
.dialogContainer {
    display: -webkit-inline-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -webkit-box-orient: horizontal;
    text-align: center;
}

/* Background image with left, mid, and right */
.bgimg {
    -webkit-box-align: stretch;
}
.bgimg > * {
    display: block;
    height: 100% ! important;
}

.clickable.gc_focus {
    -webkit-transform: scale(0.9,0.9);
}

.link {
    text-decoration: underline;
    cursor: pointer;
}

.hscroller {
    height: 100%;
}

.clip {
    overflow: hidden;
}

.pulldown {
    height: 2em;
    position: absolute;
    left: 0; right: 0; top: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    pointer-events: none;
}
.pulldown img {
    height: 1.5em;
}
.invisible {
    visibility: hidden;
}
.flexBoxH.hidden,.hidden {
    display: none ! important;
}
.incrementer .inc {
    width: 2em;
    height: 2em;
    background-color: #faeead;
    border-radius: 1em;
    box-shadow: 0 1px 1px;
    margin: 0 0.25em;
}
.incrementer .inc.disabled {
    opacity: 0.5;
}    
.incrementer .inc.gc_focus {
    box-shadow: 0 0 1px;
}
.incrementer input {
    width: 100%;
}

.marginTop5 {
    margin-top: 0.5em;
}

.marginLeft5 {
    margin-left: 0.5em;
}

.right {
    text-align: right;
}