/* $Id: forum.css,v 1.5 2007/07/22 07:01:07 dries Exp $ */
/*doc

---
categories: Variables
title: Locale Variables
name: 00_localevarsintro
---

Styling things for international markets can sometimes be a pain. The variables located here give Developers the ability to style parts of the website based on the locale that the page is rendered in. The locale class needs to be added to a part of the website that is as high up as possible - e.g. the `body` or `html` tag. For tesla.com, the locale class is added by to the `body` tag via some PHP/Drupal logic.


## Example

Here are a couple examples of how you can use the locale variables in your code.

### Basic Usage

```sass_example
.i18n-ja_JP {
  background-color: #f00;
}
```

```css_example
.i18n-jp {
  background-color: #f00;
}
```

### Parent selector usage
```sass_example
.someclass {
  color: red;
  .i18n-ja_JP & {
    color: purple;
  }
}
```

```css_example
.someclass {
  color: red;
}
.i18n-jp .someclass {
  color: purple;
}
```

## Let's talk about CSS specificity
As a developer, organization can carry significant weight when building a new gadget. You will be tempted to nest your selectors because then it looks like a neat package.

**YOU MUST FIGHT THIS URGE**. Just because you *can* nest things, doesn't necessarily mean that you *should* nest things.

When writing Sass, keep asking yourself this question:

> What will this selector look like when it is rendered in plain CSS?

If you start seeing a lot of nesting ask yourself:

> Can this become less specfiic without messing up styles downstream?
If you are unsure what your CSS would look like, just take a look at how your nesting is set up. How flat is the Sass? Are you using

Obviously, you can get much more complex selectors, but these are the two most common usages for the locale variables.

*/
/*doc
---
categories: Variables
title: All available locale variables
name: 02_localevarexample
parent: 00_localevarsintro
---

Here are all the variables that are currently available

```sass_example
// Super regions
$region-na:                  superregion-north-america;
$region-eu:                  superregion-europe;
$region-apac:                superregion-apac;
$region-me:                  superregion-middle-east;

// North America
$locale-canada_english:      i18n-en_CA; // en_CA
$locale-canada_french:       i18n-fr_CA; // fr_CA
$locale-mexico_spanish:      i18n-es_MX; // es_MX
$locale_us:                  i18n-en;    // US

// Europe
$locale-belgium_french:      i18n-fr_BE; // fr_BE
$locale-belgium_dutch:       i18n-nl_BE; // nl_BE
$locale-denmark:             i18n-da;    // da_DK
$locale-germany:             i18n-de;    // de_DE
$locale-france:              i18n-fr;    // fr_FR
$locale-great_britain:       i18n-en_GB; // en_GB
$locale-italy:               i18n-it;    // it_IT
$locale-ireland:             i18n-en_IE; // en_IE
$locale-netherlands:         i18n-nl;    // nl_NL
$locale-norway:              i18n-no;    // no_NO
$locale-austria:             i18n-de_AT; // de_AT
$locale-switzerland_german:  i18n-de_CH; // de_CH
$locale-switzerland_french:  i18n-fr_CH; // fr_CH
$locale-switzerland_italian: i18n-it_CH; // it_CH
$locale-sweden:              i18n-sv_SE; // sv_SE
$locale-other_europe:        i18n-en_EU; // en_EU
$locale-finland:             i18n-fi_FI; // fi_FI
$locale-luxembourg_french:   i18n-fr_LU; // fr_LU
$locale-luxembourg_german:   i18n-de_LU; // de_LU
$locale-portugal:            i18n-pt_PT; // pt_PT
$locale-spain:               i18n-es_ES; // es_ES
$locale-ireland:             i18n-en_IE; // en_IE

// Asia-Pacific
$locale-australia:           i18n-en_AU; // en_AU
$locale-china:               i18n-zh_CN; // zh_CN
$locale-hongkong:            i18n-en_HK; // en_HK
$locale-hongkong_chinese:    i18n-zh_HK; // zh_HK
$locale-macau:               i18n-en_MO; // en_MO
$locale-macau_chinese:       i18n-zh_MO; // zh_MO
$locale-japan:               i18n-ja_JP; // Japan
$locale-new_zealand:         i18n-en_NZ; // en_NZ
$locale-taiwan:              i18n-zh_TW; // zh_TW
$locale-south_korea:         i18n-ko_KR; // ko_KR

// Middle-East
$locale-jordan_english:      i18n-en_JO; // en_JO
$locale-jordan_arabic:       i18n-ar_JO; // ar_JO
$locale-uae_english:         i18n-en_AE; // en_AE
$locale-uae_arabic:          i18n-ar_AE; // ar_AE

// Africa
$locale-south_africa:        i18n-en_ZA; // not in Drupal language list default
```
*/
/*doc

---
title: Transitions
name: Transitions
category: Animations
---

When dealing with elements being added to the HTML DOM or taken off the DOM post-load, we may want to add animation to these transitions to make it smooth and seamless for our users.
Most popular javascript frameworks and third party packages add the following classes to indicate stages of transiotion:

1. .{custom}-enter
2. .{custom}-enter-active
3. .{custom}-leave
4. .{custom}-leave-active

[ReactJS Animation](https://facebook.github.io/react/docs/animation.html) [AngularJS Animation](https://docs.angularjs.org/guide/animations)

## Default Animations
The default animations for Particles is created using `.enter-leave-animation-default` mixin. There are several characteristics to a default set of animations:

 1. Animated element starts off with opacity: 0.01,
 2. and transitions to opacity: 1 in its enter-active state with 500ms transition on all properties with no transition timing function,
 3. when leaving the DOM the element starts with opacity: 1,
 4. and transitions to opacity: 0.01 in its leave-active state with 300ms transition on all properties with no transition timing function.

```sass_example
@include enter-leave-animation-default(ng)
```

The above sass @include example produces the following css:

```sass_example
.ng-enter {
    opacity: 0.01;
}
.ng-enter.ng-enter-active {
    opacity: 1;
    -webkit-transition: opacity 500ms ease-in;
       -moz-transition: opacity 500ms ease-in;
         -o-transition: opacity 500ms ease-in;
            transition: opacity 500ms ease-in;
}
.ng-leave {
    opacity: 1;
}
.ng-leave.ng-leave-active {
    opacity: 0.01;
    -webkit-transition: opacity 300ms ease-in;
       -moz-transition: opacity 300ms ease-in;
         -o-transition: opacity 300ms ease-in;
            transition: opacity 300ms ease-in;
}
```

The included mixin in use:

```sass_example
@mixin enter-leave-animation-default($classname: general) {
    @include enter-animation($classname)
    @include enter-active-animation($classname, opacity, 500ms, ease-in)
    @include leave-animation($classname)
    @include leave-active-animation($classname, opacity, 300ms, ease-in)
}
```

## Custom Variations

We can customize animations for every step in 4 stages of transition by using all four mixins instead of a single general one:

```sass_example
@include enter-animation(ng)
@include enter-active-animation(ng, opacity, 500ms, ease-in)
@include leave-animation(ng)
@include leave-active-animation(ng, opacity, 300ms, ease-in)
```
The parameters passed are:

1. `$classname`  - Optional. Defaults to "general"
2. `$property`   - Optional. Defaults to "all"
3. `$duration`   - Optional. Defaults to "500ms"
4. `$function`  - Optional. Defaults to "false"

Additionally, we can customize the animation further by passing the content to the `enter-animation`, `leave-animation`, `enter-active-animation` and `leave-active-animation` mixins as follows:

```sass_example
@include enter-animation(general) {
    width: 100%;
}
@include enter-active-animation(general, width, 2s, ease-in) {
    width: 50%;
}
```

The above mixin will produce the following css:

```sass_example
.general-enter {
    width: 100%;
}
.general-enter.general-enter-active {
    width: 50%;
    -webkit-transition: width 2s ease-in;
       -moz-transition: width 2s ease-in;
         -o-transition: width 2s ease-in;
            transition: width 2s ease-in;
}
```
*/
#forum .description {
  font-size: 0.9em;
  margin: 0.5em; }

#forum td.created, #forum td.posts, #forum td.topics, #forum td.last-reply, #forum td.replies, #forum td.pager {
  white-space: nowrap; }

#forum td.posts, #forum td.topics, #forum td.replies, #forum td.pager {
  text-align: center; }

#forum tr.new-topics td.forum {
  background-image: url(../../misc/forum-new.png); }

#forum div.indent {
  margin-left: 20px; }

.forum-topic-navigation {
  padding: 1em 0 0 3em;
  /* LTR */
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  text-align: center;
  padding: 0.5em; }

.forum-topic-navigation .topic-previous {
  text-align: right;
  /* LTR */
  float: left;
  /* LTR */
  width: 46%; }

.forum-topic-navigation .topic-next {
  text-align: left;
  /* LTR */
  float: right;
  /* LTR */
  width: 46%; }

.page-node.node-type-forum #main-content,
.page-forum #main-content {
  background-color: transparent; }

.page-node.node-type-forum #main-content .content-header,
#page-forum #main-content .content-header {
  margin-bottom: 2em; }

.page-node.node-type-forum #main-content h1.replace-text,
body.page-forum .content-header h1.replace-text {
  height: 27px; }

.page-node.node-type-forum #main-content h2.replace-text,
.page-forum #main-content h2.replace-text {
  margin-bottom: 0.5em; }

.page-node.node-type-forum .pane-title {
  margin-bottom: 0; }

.page-node.node-type-forum .pane-content .node-inner {
  margin-top: 0;
  padding-top: 0; }

.page-forum #join,
#forum-topic #join {
  background: url("../images/logo-concierge2.png") no-repeat scroll 20px 0 transparent; }

#forum .links-wrapper {
  width: 48.93617%;
  float: left;
  margin-right: 2.12766%;
  float: right;
  margin-right: 0; }

#forum .links {
  font-size: .83em; }

#forum ul.links, #forum ul.links li {
  display: inline-block; }

#forum .links li.forum.first {
  position: absolute;
  right: 0;
  margin-left: 10px;
  margin-left: 0.625rem; }

#forum li.forum.first .post-new-forum-topic {
  margin-left: 0;
  margin-right: 10px;
  background: #333;
  padding: 5px 10px;
  color: #fff; }

.heading-wrapper {
  margin-bottom: 20px;
  margin-bottom: 1.25rem; }

.page-title-header {
  display: inline-block; }

#breadcrumbs {
  margin: 0 0 5px 20px;
  font-size: 12px;
  position: relative; }

#forum ul.links a {
  font-size: 12px; }

#forum table {
  margin-bottom: 20px;
  margin-bottom: 1.25rem;
  width: 100%; }

#forum a.secondary {
  color: #999; }

#forum th,
#forum th a {
  color: #666;
  font-weight: bold;
  text-transform: uppercase; }

#forum table tr,
#forum table td {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: middle; }

#forum .container {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 3em;
  text-transform: uppercase; }

/* ==--------=-------------=---------=--------== */
/* || .forum | .last-reply | .topics | .posts || */
#forum th,
#forum td.container,
#forum td.forum,
#forum td.title,
#forum td.created,
#forum td.last-reply {
  vertical-align: middle;
  padding: 10px 10px 10px 2em; }

#forum th {
  padding-top: 1em;
  padding-bottom: 1em; }

#forum td.icon {
  padding-left: 10px;
  margin: 0 auto;
  text-align: center; }

#forum th:first-child {
  padding-left: 20px; }

#forum th .description {
  font: 12px normal Arial, sans-serif;
  color: #999; }

#forum table > tbody > tr > td {
  background: url(../../assets/img/forums/dot.gif) repeat-y left top; }

#forum table > tbody > tr > td:first-child {
  background: none; }

#forum td.created, #forum td.posts, #forum td.topics, #forum td.last-reply, #forum td.replies, #forum td.pager {
  /* min-width: 10em; */
  text-align: left; }

#forum tr.odd {
  background-color: #f7f7f7; }

#forum .name > a,
#forum .title > a {
  color: #666; }

#forum .description {
  color: #999; }

#forum td.topics,
#forum td.posts {
  width: 110px; }

#forum .forum-status {
  background: url(../../assets/img/forums/icn-forum-status.gif) no-repeat left top;
  float: left;
  height: 13px;
  margin: 1em 1.2em;
  width: 13px; }
  #forum .forum-status.hot-new, #forum .forum-status.hot, #forum .forum-status.new {
    background-position: -13px 0; }
  #forum .forum-status.closed {
    background-position: -26px 0; }
  #forum .forum-status.sticky {
    background: url(../../../assets/img/forums/icn-forum-status-sticky.png) no-repeat -28px top;
    height: 16px;
    width: 14px;
    margin: 0 auto; }
  #forum .forum-status.sticky-new {
    background: url(../../../assets/img/forums/icn-forum-status-sticky-new.png) no-repeat -28px top;
    height: 16px;
    width: 14px; }
  #forum .forum-status a {
    display: inline-block;
    height: 100%;
    width: 100%;
    text-indent: -9999px; }

/* private icon */
.forum-topic-private {
  background: url(../images/icn_key_darkgray_16.png) no-repeat 0 40%;
  padding-left: 18px;
  padding-top: 3px;
  text-transform: uppercase;
  font-style: italic;
  font-size: 0.85em; }

/* private icon */
.forum-topic-tesla {
  background: url(../images/icn_tesla_t_gray_13.png) no-repeat 0 40%;
  padding-left: 18px;
  padding-top: 3px;
  text-transform: uppercase;
  font-style: italic;
  font-size: 0.85em; }

/* Hide text on forum list */
#forum .forum-topic-private,
#forum .forum-topic-tesla {
  display: inline-block;
  text-indent: -9999px; }

#forum-legend {
  clear: both;
  float: right;
  margin-right: 20px; }

#forum-legend p {
  font-size: 0.83em; }

/** Original Forum Module CSS selectors, modified **/
#forum .description {
  font-size: 1em;
  margin: 0; }

#forum td.created, #forum td.posts, #forum td.topics, #forum td.last-reply, #forum td.replies, #forum td.pager {
  white-space: nowrap; }

#forum td.posts, #forum td.topics, #forum td.replies, #forum td.pager {
  text-align: center; }

/***** Forum Pager *****/
ul.pager {
  margin-bottom: 20px;
  margin-bottom: 1.25rem; }

ul.pager li {
  display: inline;
  font-size: 92%;
  text-transform: uppercase;
  border: 1px solid #999;
  background: #eee;
  margin: 0; }

ul.pager li.pager-current {
  background: #fff;
  border-color: #444;
  color: #000; }

.item-list ul.pager li {
  min-width: 15px;
  padding: 5px;
  margin: 0 2px; }

ul.pager li a {
  display: inline-block;
  line-height: 20px;
  padding: 5px; }

ul.pager li a:link, ul.pager li a:visited {
  color: #333; }

ul.pager li a:hover, ul.pager li a:active {
  color: #c00; }

#forum ul.pager li a:link, #forum ul.pager li a:visited {
  color: #666; }

#forum ul.pager li a:hover, #forum ul.pager li a:active {
  color: #c00; }

.node-type-forum .item-list ul.pager {
  background: url(../../assets/img/forums/hr_dottedline.gif) repeat-x top left;
  padding-top: 15px;
  margin: 1em 0 .5em 0;
  width: 560px; }

.hr-dotted-8 {
  background: url(../../assets/img/forums/hr_dottedline.gif) repeat-x top left;
  margin: 1em 0 .5em 0;
  height: 3px; }

#forum div.indent {
  margin-left: 20px; }

.forum-topic-navigation {
  padding: 1em 0 0 3em;
  /* LTR */
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
  text-align: center;
  padding: 0.5em; }

.forum-topic-navigation .topic-previous {
  text-align: right;
  /* LTR */
  float: left;
  /* LTR */
  width: 46%; }

.forum-topic-navigation .topic-next {
  text-align: left;
  /* LTR */
  float: right;
  /* LTR */
  width: 46%; }

/*** Individual Topic Thread ***/
.page-node.node-type-forum h3 {
  font-size: 1em; }

#forum-topic .panel-pane {
  background-color: #fff;
  clear: both;
  padding: 0 20px 20px 20px; }

#forum-topic .panel-pane:first-child {
  /* graphic banner */
  background-color: transparent;
  margin: 0;
  padding: 0; }

/* Back to link on topic pages*/
#forum-topic .sidebar .secondary.button {
  background-color: #666;
  background-image: url(../images/bg_dotted_gray_h81.png);
  display: block;
  margin-bottom: 2em;
  padding: 5px 10px 5px 20px;
  text-indent: -10px; }

#forum-topic .pane-forum-topics-today {
  padding: 0;
  /* sidebar */ }

#forum-topic .admin-links {
  color: #999;
  font-size: 92%;
  position: absolute;
  top: 20px;
  right: 40px;
  /* border: 1px solid #ccc; */
  background: #fff;
  padding: 5px 10px; }

#forum-topic .admin-links a {
  color: #999; }

#forum-topic .comment {
  position: relative;
  margin-top: 2em; }

#forum-topic .comment .admin-links {
  top: 10px;
  right: 0;
  padding: 3px 10px; }

#forum-topic .content {
  color: #333;
  width: 540px; }

/* Comment Form */
#forum-topic .pane-node-comment-form {
  background: url(../images/hr_dottedline.gif) repeat-x 0 0;
  padding-top: 20px;
  margin-top: 20px;
  width: 560px; }

#forum-topic .pane-node-comment-form .form-required {
  display: none; }

#forum-topic .pane-node-comment-form .form-textarea {
  width: 99%; }

.node-inner .submitted {
  margin-bottom: 1em; }

.comment .submitted {
  margin-top: 1em;
  margin-bottom: 1em; }

.submitted .username {
  font-weight: bold; }

.username.tesla {
  padding-right: 20px;
  padding-right: 1.25rem;
  color: #cc0000;
  background: url("../../../assets/img/icons/apple-touch-icon.png") no-repeat top right;
  background-size: contain; }

.submitted .post-date {
  text-transform: uppercase;
  font-size: 93%; }

.comment .new {
  text-transform: uppercase;
  font-size: 93%;
  color: #900;
  font-style: italic;
  padding-left: 5px; }

.flag a,
.flag-count {
  color: #999;
  font-size: 93%; }

.flag a {
  background: url(../images/icn_flag_gray_16.gif) no-repeat 0 -2px;
  padding-left: 16px;
  padding-bottom: 4px; }

.flag a:link, .flag a:visited {
  color: #bbb; }

.flag a:hover, .flag a:active {
  color: #c00; }

/** TODO for panels integration **/
#page-enthusiasts-forum #main-content {
  background-color: transparent; }

#page-enthusiasts .forum-teaser .comment-author {
  text-transform: uppercase; }

.forum-teaser .last-updated {
  font-size: 0.83em;
  text-transform: uppercase; }

/* Bulletin Board - Ask a Question */
#bb_ask_container,
#webform-client-form-22281 {
  margin-bottom: 20px; }

#bb_ask label,
#webform-client-form-22281 label {
  width: 77px;
  display: inline-block;
  font-size: 12px; }

#bb_ask input,
#bb_ask select,
#webform-client-form-22281 input,
#webform-client-form-22281 select {
  margin-bottom: 4px; }

#bb_ask input,
#webform-client-form-22281 input {
  width: 142px; }

#bb_ask select,
#webform-client-form-22281 #edit-submitted-topic {
  width: 158px; }

#webform-client-form-22281 #edit-submitted-topic {
  font-size: 12px;
  padding: 4px; }

#bb_ask #phone,
#webform-client-form-22281 #edit-submitted-phone {
  margin-bottom: 20px; }

#bb_ask textarea,
#webform-client-form-22281 #edit-submitted-description {
  display: block;
  width: 230px; }

#bb_ask input,
#bb_ask select,
#bb_ask textarea,
#webform-client-form-22281 input,
#webform-client-form-22281 select,
#webform-client-form-22281 textarea {
  font-family: Arial, Helvetica, sans;
  font-size: 13px;
  padding: 4px;
  background-color: #fff;
  border: 1px solid #888; }

#bb_ask #submit-container,
#webform-client-form-22281 .form-actions {
  text-align: center; }

#webform-client-form-22281 .form-actions {
  width: 240px; }

#bb_ask #submit,
#webform-client-form-22281 #edit-submit {
  margin: 0 auto;
  border: none;
  border-radius: 2px 2px 2px 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  font-family: "proxima-nova-1","proxima-nova-2","Lato",sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
  padding: 11px 4px;
  text-align: center;
  text-transform: uppercase;
  width: 160px;
  background: url("/tesla_theme/images/mytesla/v2/red-button-bg.png") repeat-x scroll 0 -1px #E41700;
  border-top: 1px solid #E58F83;
  color: #FFFFFF !important;
  text-shadow: 0 -1px 0 #82120E;
  cursor: pointer; }

#content-header {
  margin-bottom: 0; }

#webform-client-form-22281 #edit-submit {
  margin: 20px auto; }

#webform-client-form-22281 span {
  display: none; }

#webform-client-form-22281 .resizable-textarea span {
  display: block; }

#webform-client-form-22281 .form-item {
  margin: 0; }

#node-22281 .messages {
  margin-bottom: 20px; }

#node-22281.node-webform .content {
  width: auto; }

body[id^=page-forums-] .grid-4 {
  padding-left: 25px; }

body[id^=page-forums-] .grid-8 table th {
  text-align: center; }

body[id^=page-forums-] .pane-title {
  color: #666;
  font-weight: bold;
  font-size: 1em;
  line-height: 150%;
  margin-bottom: 1em;
  margin-top: 13px;
  text-transform: uppercase; }

body[id^=page-forums-] .pane-title, body[id^=page-forums-] label {
  text-align: left; }

body[id^=page-forums-] .webform-component-textarea label {
  display: block; }

#page-forums-inside-tesla-tesla-bulletin-board #content-body, body[id^=page-forums-] #content-body {
  padding-top: 0; }

#page-forums-inside-tesla-tesla-bulletin-board #content-body table {
  margin-top: 0; }

#page-forums-inside-tesla-tesla-bulletin-board .grid-4 .links.inline, body[id^=page-forums-] ul.links.inline, body[id^=page-forums-] ul.links li.login.first {
  display: none !important; }

#page-forums-inside-tesla-tesla-bulletin-board #forum ul.links {
  position: relative;
  z-index: 9999;
  font-size: 12px !important;
  margin: 8px -3px 0 0;
  width: 288px; }

#page-forums-inside-tesla-tesla-bulletin-board #forum ul.links li {
  margin-left: 0;
  padding-left: 0;
  width: 99%; }

#page-forums-inside-tesla-tesla-bulletin-board #forum ul.links a:before {
  content: "< "; }

#page-forums-inside-tesla-tesla-bulletin-board #forum ul.links a {
  background-color: #666666;
  background-image: url("../images/bg_dotted_gray_h81.png");
  display: block;
  font-size: 12px;
  margin-bottom: 0;
  margin-left: 0;
  padding: 5px 10px 5px 20px;
  text-indent: -10px;
  vertical-align: baseline; }

body[id^=page-forums-] #right-col {
  border-left: 1px solid #dedede;
  padding-top: 60px; }

.style-header {
  font-size: 14px;
  line-height: 20px;
  font-size: 0.875rem;
  line-height: 1.25rem; }

#page-forums-inside-tesla-tesla-bulletin-board .style-header.title {
  margin-top: 16px !important; }

h3.style-header {
  width: 48.93617%;
  float: left;
  margin-right: 2.12766%; }

body[id^=page-forums-] .grid-4 {
  margin-left: -1px !important;
  margin-top: -68px !important;
  min-height: 400px;
  padding-left: 35px;
  width: 263px !important; }

body[id^=page-forums-] #forum {
  box-shadow: 1px 1px 3px #ddd; }

body[id^=page-forum-forums-] #content-body {
  margin-right: 0; }

body[id^=page-forum-forums-] #content-body .grid-4 .links a:hover {
  text-decoration: none; }

body[id^=page-forum-forums-] #content-body .grid-4 .links span {
  font-size: 12px; }

body[id^=page-forums-] #join-community, body[id^=page-forum-forums-] #join-community {
  min-width: 200px !important; }

body[id^=page-forum-forums-] #left-col {
  padding-bottom: 3.5em; }

body[id^=page-forum-forums-] #join-community > a {
  margin-right: 3px !important; }

body[id^=page-forum-forums-] #join-community > a:last-child {
  margin-right: 0 !important; }

body[id^=page-forum-forums-] .grid-4.sidebar {
  width: 290px !important; }

body[id^=page-forum-forums-] #join-community {
  margin-right: 0 !important; }

.clear-block {
  clear: both; }

#join-community {
  margin-bottom: 20px;
  margin-bottom: 1.25rem;
  padding: 4px 5px;
  border: 1px solid #aaa;
  background-color: #adadad;
  float: right; }

#join-community .replace-text {
  line-height: 40px;
  padding-left: 10px; }

#join-community .button.tertiary {
  display: inline-block;
  position: relative;
  top: 1px;
  background-image: none;
  background-color: #4f4d4e;
  padding: 3px 9px;
  font-size: 0.83em; }

#join-community a.button {
  color: #fff; }

.pane-full-footer {
  margin-top: 100px; }

.mobile {
  display: none; }

/****************************************************************************/
/**** Mobile styles *****/
/****************************************************************************/
@media screen and (max-width: 640px) {
  .mobile {
    display: initial; }
  /***** Second Header *****/
  main header {
    overflow: auto;
    padding: 33px 0 10px 0;
    margin-bottom: 10px; }
  #second-header .pane-left {
    float: left; }
  #second-header .pane-right {
    float: right;
    margin: 0;
    padding: 0; }
  /***** Login Box *****/
  #join-community {
    width: 100%;
    float: none;
    background: none;
    border: none;
    padding: 20px 0 0 0;
    margin: 0; }
  #join-community .replace-text {
    display: none; }
  #join-community .buttons-registration {
    display: block; }
  #forum {
    padding: 0; }
  #forum ul.links a {
    font-size: 12px; }
  #forum thead {
    display: none; }
  #forum tr.odd, #forum tr.even {
    border-bottom: 1px solid #e5e5e5; }
  #forum .style-header {
    display: none; }
  #forum .links-wrapper {
    padding: 0 5px; }
  #forum table, #forum table tr, #forum table tr td {
    display: block; }
  #forum table > tbody > tr > td {
    background: none !important; }
  #forum table td.icon, #forum table td.last-reply, #forum table td .forum-status {
    display: none; }
  #forum table tr {
    position: relative; }
  #forum table td.topics {
    position: absolute;
    bottom: 20px;
    left: 20px; }
  #forum table td.topics br, #forum table td.replies br {
    display: none; }
  #forum .name > a, #forum .title > a, #forum td.title > a {
    font-weight: bold; }
  #forum .topics, #forum .posts, #forum .created, #forum .replies {
    color: #999; }
  #forum table td.posts {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: right; }
  #forum table td .description, #forum table td.topics, #forum table td.posts {
    font-size: 12px;
    line-height: 20px; }
  #forum td.icon,
  #forum td.title,
  #forum td.replies,
  #forum td.created,
  #forum td.topics,
  #forum td.last-reply {
    text-align: left;
    line-height: 18px; }
  #forum td.forum {
    padding: 20px 20px 40px 20px; }
  #forum td.created,
  #forum td.last-reply,
  #forum td.replies {
    font-size: 12px; }
  #forum td.created br,
  #forum td.last-reply br {
    display: none; }
  #forum .forum-name-description a {
    display: block; }
  /***** Topic *****/
  #forum td.title {
    padding: 20px 20px 50px 20px; }
  #forum table td.replies {
    position: absolute;
    bottom: 30px;
    left: 20px; }
  #forum table td.created {
    position: absolute;
    bottom: 10px;
    padding: 0;
    left: 20px; }
  /***** Footer Pager *****/
  .item-list ul.pager li {
    margin: 0 5px 23px 5px;
    display: inline-block;
    min-height: 30px;
    line-height: 30px; } }

.username.tesla {
  padding-right: 20px;
  padding-right: 1.25rem;
  color: #cc0000;
  background: url("../../assets/img/icons/apple-touch-icon.png") no-repeat top right;
  background-size: contain; }