Nibis/web/js/togetherjs/togetherjs.css

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
/*Fonts*/
@font-face {
  font-family: openSansRegular;
  src: url('fonts/OpenSans-Regular.ttf');
}
@font-face {
  font-family: openSansLight;
  src: url('fonts/OpenSans-Light.ttf');
}
@font-face {
  font-family: openSansBold;
  src: url('fonts/OpenSans-Bold.ttf');
}
/* .togetherjs reset */
/* http://yuilibrary.com/yui/docs/cssreset/ */
.togetherjs {
  /*
YUI 3.10.3 (build 2fb5187)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

  /*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/

  /* to preserve line-height and selector appearance */

  /*to enable resizing for IE*/

  /*because legend doesn't inherit in IE */

}
.togetherjs * {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}
.togetherjs header {
  width: auto;
}
.togetherjs div,
.togetherjs dl,
.togetherjs dt,
.togetherjs dd,
.togetherjs ul,
.togetherjs ol,
.togetherjs li,
.togetherjs h1,
.togetherjs h2,
.togetherjs h3,
.togetherjs h4,
.togetherjs h5,
.togetherjs h6,
.togetherjs pre,
.togetherjs code,
.togetherjs form,
.togetherjs fieldset,
.togetherjs legend,
.togetherjs input,
.togetherjs textarea,
.togetherjs p,
.togetherjs blockquote,
.togetherjs th,
.togetherjs td {
  margin: 0;
  padding: 0;
}
.togetherjs table {
  border-collapse: collapse;
  border-spacing: 0;
}
.togetherjs fieldset,
.togetherjs img {
  border: 0;
}
.togetherjs address,
.togetherjs caption,
.togetherjs cite,
.togetherjs code,
.togetherjs dfn,
.togetherjs em,
.togetherjs strong,
.togetherjs th,
.togetherjs var {
  font-style: normal;
  font-weight: normal;
}
.togetherjs ol,
.togetherjs ul {
  list-style: none;
}
.togetherjs caption,
.togetherjs th {
  text-align: left;
}
.togetherjs h1,
.togetherjs h2,
.togetherjs h3,
.togetherjs h4,
.togetherjs h5,
.togetherjs h6 {
  font-size: 100%;
  font-weight: normal;
}
.togetherjs q:before,
.togetherjs q:after {
  content: '';
}
.togetherjs abbr,
.togetherjs acronym {
  border: 0;
  font-variant: normal;
}
.togetherjs sup {
  vertical-align: text-top;
}
.togetherjs sub {
  vertical-align: text-bottom;
}
.togetherjs input,
.togetherjs textarea,
.togetherjs select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.togetherjs input,
.togetherjs textarea,
.togetherjs select {
  *font-size: 100%;
}
.togetherjs legend {
  color: #000;
}
.togetherjs {
  /* General styles */

  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  font-weight: normal;
}
.togetherjs a {
  color: #0095DD;
  text-decoration: none;
}
.togetherjs a:hover {
  color: #0095DD;
  text-decoration: underline;
}
.togetherjs p {
  margin: 7px 0 7px 0;
}
.togetherjs button,
.togetherjs img {
  vertical-align: middle;
}
.togetherjs input:focus {
  outline: none;
}
.togetherjs button::-moz-focus-inner,
.togetherjs input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.togetherjs .togetherjs-right {
  float: right;
}
button:disabled {
  opacity: 0.2;
}
button[disabled]:hover {
  background: #0194DB;
}
.togetherjs-default {
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  height: 40px;
  /*line-height not consistent across browsers*/

  line-height: 37px;
  text-decoration: none;
  min-width: 100px;
  border: none;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  /*transition: all 0.25s linear 0s;*/

  text-shadow: none;
  margin: 3px;
  font-size: 14px;
  background: #9A9A9A;
  color: #fff;
}
.togetherjs-default.togetherjs-follow {
  cursor: pointer;
}
.togetherjs-default:hover {
  background: #ADADAD;
}
.togetherjs-primary {
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  height: 40px;
  /*line-height not consistent across browsers*/

  line-height: 37px;
  text-decoration: none;
  min-width: 100px;
  border: none;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  /*transition: all 0.25s linear 0s;*/

  text-shadow: none;
  margin: 3px;
  font-size: 14px;
  background: #0194DB;
  color: #fff;
}
.togetherjs-primary.togetherjs-follow {
  cursor: pointer;
}
.togetherjs-primary:hover {
  background: #00ACFF;
}
a.togetherjs-primary,
a.togetherjs-default,
a.togetherjs-secondary,
a.togetherjs-primary:link,
a.togetherjs-default:link,
a.togetherjs-secondary:link,
a.togetherjs-primary:active,
a.togetherjs-default:active,
a.togetherjs-secondary:active,
a.togetherjs-primary:visited,
a.togetherjs-default:visited,
a.togetherjs-secondary:visited,
a.togetherjs-primary:hover,
a.togetherjs-default:hover,
a.togetherjs-secondary:hover {
  color: #fff;
  text-decoration: none;
  vertical-align: middle;
}
#togetherjs-avatar-edit .togetherjs-person-avatar-swatch {
  margin-left: 22px;
}
#togetherjs-avatar-edit .togetherjs-person {
  float: left;
  height: 36px;
  width: 36px;
  margin: 35px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: -2px -1px;
  border: 2px solid;
  border-radius: 2px;
  background-clip: border-box;
}
#togetherjs-avatar-edit #togetherjs-avatar-buttons {
  float: right;
  width: 172px;
  padding: 45px 0px;
}
input.togetherjs-upload-avatar {
  line-height: 0px;
  width: 174px;
  margin-left: -20px;
}
#togetherjs-upload-avatar {
  float: left;
}
#togetherjs-camera-avatar {
  clear: both;
}
#togetherjs-avatar-edit .togetherjs-buttons {
  clear: both;
}
.togetherjs-destructive {
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  height: 40px;
  /*line-height not consistent across browsers*/

  line-height: 37px;
  text-decoration: none;
  min-width: 100px;
  border: none;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  /*transition: all 0.25s linear 0s;*/

  text-shadow: none;
  margin: 3px;
  font-size: 14px;
  background: #AC2924;
  color: #ffffff;
}
.togetherjs-destructive:hover {
  background: #d40606;
}
.togetherjs-secondary {
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  height: 40px;
  /*line-height not consistent across browsers*/

  line-height: 37px;
  text-decoration: none;
  min-width: 100px;
  border: none;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  /*transition: all 0.25s linear 0s;*/

  text-shadow: none;
  margin: 3px;
  font-size: 14px;
  background: #999999;
  /* Old browsers */

  background: -moz-linear-gradient(top, #999999 0%, #888888 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #999999), color-stop(100%, #888888));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #999999 0%, #888888 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #999999 0%, #888888 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #999999 0%, #888888 100%);
  /* IE10+ */

  background: linear-gradient(to bottom, #999999 0%, #888888 100%);
  /* W3C */

  color: #fff;
}
.togetherjs-cancel {
  display: inline-block;
  background-color: #0095dd;
  border: none;
  padding: 3px 0px;
  margin: 0px 0px 0px;
  min-width: 0;
  font-size: 14px;
  color: #333333;
  font-family: openSansLight, Helvetica;
  vertical-align: -2px !important;
}
.togetherjs-cancel:hover {
  cursor: pointer;
  border-bottom: 1px solid #BCBCBC;
  margin: 0px 0px -1px;
}
.togetherjs-alt-text {
  vertical-align: -2px;
}
/*FIX ME something weird is going on here. the avatar has no paddingTop only on Safari*/
/*button#togetherjs-profile-button.togetherjs-button {
  padding:10px 0px !important;
}*/
/* General dock rules: */
.togetherjs #togetherjs-buttons .togetherjs-button {
  background-color: inherit;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  width: 60px;
  height: 60px;
  background-color: #0095dd;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  background-position: center;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.togetherjs #togetherjs-buttons .togetherjs-button:hover {
  background-color: #0F81BF;
}
.togetherjs #togetherjs-buttons hr {
  padding: 0;
  margin: 0;
}
.togetherjs #togetherjs-dock-participants button.togetherjs-active {
  background-color: #0F81BF !important;
}
.togetherjs #togetherjs-buttons #togetherjs-share-button {
  background-image: url('./images/button-share.png');
}
.togetherjs #togetherjs-buttons #togetherjs-share-button:hover {
  background-image: url('./images/button-share-active.png');
}
.togetherjs #togetherjs-buttons #togetherjs-share-button.togetherjs-active {
  background-image: url('./images/button-share-active.png') !important;
  background-color: #0F81BF;
}
.togetherjs #togetherjs-buttons #togetherjs-audio-button {
  background-image: url('./images/button-mic.png');
}
.togetherjs #togetherjs-buttons #togetherjs-audio-button:hover {
  background-image: url('./images/button-mic-active.png');
  /*background-color:#0095dd;*/

  /*cursor: default;*/

}
.togetherjs #togetherjs-buttons #togetherjs-audio-button.togetherjs-active {
  background-image: url('./images/button-mic-active.png') !important;
  background-color: #0F81BF;
}
.togetherjs #togetherjs-buttons #togetherjs-chat-button {
  background-image: url('./images/button-chat.png');
}
.togetherjs #togetherjs-buttons #togetherjs-chat-button:hover {
  background-image: url('./images/button-chat-active.png');
}
.togetherjs #togetherjs-buttons #togetherjs-chat-button.togetherjs-active {
  background-image: url('./images/button-chat-active.png') !important;
  background-color: #0F81BF;
}
.togetherjs #togetherjs-dock-anchor {
  height: 20px;
  text-align: center;
  /* FIXME: disabling dock movement for now, cursor would be misleading: */

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  position: relative;
  left: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.togetherjs .togetherjs-subtitle {
  background: #0195DD;
  width: 280px;
  height: 17px;
  border-bottom: 1px solid #0071A7;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 7px 10px;
  left: -14px;
  top: -15px;
  position: relative;
}
.togetherjs .togetherjs-subtitle #togetherjs-chat-participants {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.togetherjs .togetherjs-subtitle #togetherjs-chat-no-participants {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.togetherjs .togetherjs-subtitle #togetherjs-chat-participant-list {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.togetherjs #togetherjs-chat-input {
  width: 264px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  resize: none;
  font-size: 14px;
  padding: 4px 6px 5px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  /*box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);*/

  font-family: openSansLight, Helvetica, sans-serif;
}
.togetherjs #togetherjs-chat-input:focus {
  border: 1px solid #0095DD;
}
.togetherjs #togetherjs-chat-input-box {
  margin: 0;
  padding: 10px 10px 11px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background: #F2F2F2;
  position: relative;
  /*box-shadow: 0 -1px 2px rgba(0,0,0,0.1);*/

  height: 31px;
  width: 280px;
  margin-left: -7px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.togetherjs .togetherjs-window #togetherjs-chat-messages {
  width: 300px;
  position: relative;
  left: -14px;
  background: #fff;
  top: -30px;
  margin-bottom: -30px !important;
}
.togetherjs .togetherjs-chat-item {
  padding: 0 0 20px 0;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  padding: 10px 0px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #333333;
  min-height: 60px;
}
.togetherjs #togetherjs-chat-messages .togetherjs-chat-item a.togetherjs-person-url {
  width: 105px;
  white-space: nowrap;
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.togetherjs #togetherjs-chat-messages .togetherjs-person-self {
  float: left;
  margin-bottom: 20px;
  margin-top: 7px;
}
.togetherjs #togetherjs-chat-messages .togetherjs-person {
  float: left;
  margin-bottom: 20px;
}
.togetherjs .togetherjs-person-name-abbrev {
  color: #333333;
  font-family: openSansRegular, Helvetica, sans-serif;
  padding-top: 2px;
}
.togetherjs .togetherjs-timestamp {
  float: right;
  color: rgba(51, 51, 51, 0.5);
  font-size: 9px !important;
  padding: 0 15px;
}
.togetherjs .togetherjs-chat-content {
  white-space: pre-wrap;
  line-height: 20px;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  margin: 3px 15px 3px 60px;
}
.togetherjs #togetherjs-window-pointer-right,
.togetherjs #togetherjs-window-pointer-left {
  position: fixed;
  width: 10px;
  height: 10px;
  margin-right: -5px;
  margin-top: -5px;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 10002;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.togetherjs #togetherjs-window-pointer-right {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.togetherjs #togetherjs-window-pointer-left {
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.togetherjs .togetherjs-window {
  position: fixed;
  background-color: #ffffff;
  color: #000000;
  padding: 0 7px 0 7px;
  z-index: 10001;
  width: 286px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.togetherjs .togetherjs-window section {
  margin: 15px 7px;
}
.togetherjs .togetherjs-window > header {
  font-weight: bold;
  font-variant: normal;
  text-align: center;
  font-family: openSansRegular, Helvetica;
  color: #fff;
  margin: 0 -7px 0 -7px;
  padding: 10px 4px 5px 30px;
  height: 24px;
  background: #0095DD;
  border-radius: 4px 4px 0 0;
  position: relative;
  border-bottom: 1px solid #0071A7;
}
.togetherjs .togetherjs-window .togetherjs-share-link {
  width: 256px;
  font-size: 12px;
  padding: 6px 6px 4px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  font-family: Monaco, sans-serif;
  margin: 7px 0px;
}
.togetherjs .togetherjs-window .togetherjs-share-link:focus {
  border: 1px solid #0095DD;
}
.togetherjs .togetherjs-window header button.togetherjs-close {
  background-color: inherit;
  border: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid #0071A7;
  float: right;
  font-weight: bold;
  cursor: pointer;
  background-color: #0095dd;
  background-image: url('./images/icon-close@2x.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  width: 39px;
  height: 39px;
  margin-top: -10px;
  margin-right: -4px;
  border-top-right-radius: 4px;
}
.togetherjs .togetherjs-window header button.togetherjs-close:hover {
  background-image: url('./images/icon-close-active.png');
  background-color: rgba(0, 0, 0, 0.1);
}
.togetherjs .togetherjs-window #togetherjs-chat-messages {
  overflow-y: auto;
  /*FIXME: I'm just pulling numbers out of thin air here:*/

  height: 260px;
}
.togetherjs #togetherjs-feedback-form > header {
  font-weight: bold;
  font-variant: normal;
  text-align: center;
  font-family: openSansRegular, Helvetica, sans-serif;
  color: #fff;
  margin: 0 -1px 0 -1px;
  padding: 10px 4px 5px 30px;
  height: 24px;
  background: #0095DD;
  border-radius: 4px 4px 0 0;
  position: relative;
  border-bottom: 1px solid #0071A7;
}
.togetherjs #togetherjs-feedback-form.togetherjs-modal {
  background-color: #fff;
  color: #000000;
  padding: 0 0 5px 0;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border-left: 1px solid #c9c9c9;
  border-right: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  position: fixed;
  top: 46%;
  left: 47%;
  margin-left: -150px;
  margin-top: -10em;
  height: 24em;
  width: 399px;
}
.togetherjs #togetherjs-alpha-intro .togetherjs-small-feedback-txt {
  font-size: 10px;
}
.togetherjs #togetherjs-alpha-intro .togetherjs-modal-close:hover {
  background: #61921b;
}
.togetherjs #togetherjs-alpha-intro {
  height: 24em;
}
.togetherjs #togetherjs-intro .togetherjs-modal-dont-join {
  /*    background-repeat: repeat-x;
    border: 0;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    text-transform: none;
    vertical-align: middle;
    padding: 10px 0 10px 0;*/

}
.togetherjs .togetherjs-notification {
  position: fixed;
  background-color: #ffffff;
  color: #000000;
  padding: 0 7px 0 7px;
  z-index: 10001;
  width: 300px;
  border-radius: 4px;
  background: rgba(242, 242, 242, 0.9);
  border: 1px solid #BCBCBC;
  -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.4), inset 0px 3px 1px 0px #ffffff;
  -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.4), inset 0px 3px 1px 0px #ffffff;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.4), inset 0px 3px 1px 0px #ffffff;
}
.togetherjs .togetherjs-notification section {
  margin: 15px 7px;
}
.togetherjs .togetherjs-notification > header {
  font-weight: bold;
  font-variant: normal;
  text-align: center;
  font-family: openSansRegular, Helvetica;
  color: #fff;
  margin: 0 -7px 0 -7px;
  padding: 10px 4px 5px 30px;
  height: 24px;
  background: #0095DD;
  border-radius: 4px 4px 0 0;
  position: relative;
  border-bottom: 1px solid #0071A7;
}
.togetherjs .togetherjs-notification .togetherjs-share-link {
  width: 256px;
  font-size: 12px;
  padding: 6px 6px 4px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  font-family: Monaco, sans-serif;
  margin: 7px 0px;
}
.togetherjs .togetherjs-notification .togetherjs-share-link:focus {
  border: 1px solid #0095DD;
}
.togetherjs .togetherjs-notification header button.togetherjs-close {
  background-color: inherit;
  border: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid #0071A7;
  float: right;
  font-weight: bold;
  cursor: pointer;
  background-color: #0095dd;
  background-image: url('./images/icon-close@2x.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  width: 39px;
  height: 39px;
  margin-top: -10px;
  margin-right: -4px;
  border-top-right-radius: 4px;
}
.togetherjs .togetherjs-notification header button.togetherjs-close:hover {
  background-image: url('./images/icon-close-active.png');
  background-color: rgba(0, 0, 0, 0.1);
}
.togetherjs .togetherjs-notification #togetherjs-chat-messages {
  overflow-y: auto;
  /*FIXME: I'm just pulling numbers out of thin air here:*/

  height: 260px;
}
.togetherjs .togetherjs-notification:hover {
  background: #f2f2f2;
  cursor: pointer;
}
.togetherjs .togetherjs-notification .togetherjs-chat-item {
  border-bottom: 0px;
  word-wrap: break-word;
}
.togetherjs .togetherjs-notification section#togetherjs-chat-notifier-message {
  margin: 0px !important;
}
.togetherjs .togetherjs-notification .togetherjs-chat-content {
  font-size: 12px;
}
.togetherjs .togetherjs-notification section {
  font-size: 12px;
}
.togetherjs .togetherjs-notification .togetherjs-person-name {
  font-family: openSansRegular, Helvetica Bold, 'Helvetica Neue', Arial;
  font-size: 14px;
}
.togetherjs .togetherjs-notification button {
  min-width: 47% !important;
}
.togetherjs .togetherjs-notification .togetherjs-person {
  display: none;
}
.togetherjs .togetherjs-notification .togetherjs-timestamp {
  display: none;
}
.togetherjs .togetherjs-notification {
  border-bottom: 0px;
}
.togetherjs .togetherjs-notification img.togetherjs-notification-logo {
  float: left;
  margin: 22px 14px 14px 10px;
  width: 34px;
  height: 25px;
}
.togetherjs .togetherjs-notification img.togetherjs-notification-closebtn {
  float: right;
  padding: 14px 7px;
}
.togetherjs .togetherjs-notification img.togetherjs-notification-closebtn:hover {
  opacity: 0.5;
}
.togetherjs .togetherjs-notification section.togetherjs-buttons {
  border-top: 1px solid #E1E1E1;
}
.togetherjs .togetherjs-person {
  height: 36px;
  width: 36px;
  margin: 10px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: -2px -2px;
  border: 2px solid;
  border-radius: 2px;
  background-clip: border-box;
}
.togetherjs .togetherjs-person.togetherjs-person-small {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: -1px -18px;
  background-size: 22px 22px;
  background-position: -1px -1px;
}
.togetherjs .togetherjs-person-small .togetherjs-person-avatar-swatch {
  border-width: 3px;
  margin-left: 14px;
  margin-top: 0px;
}
.togetherjs .togetherjs-person-avatar-swatch {
  /* This is the element that lives inside all .togetherjs-person elements
       and is used for the triangle. */

  width: 0;
  height: 0;
  margin-left: 23px;
  padding: 0;
  border-top: 7px solid transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-top: 0px;
}
.togetherjs .togetherjs-person-inactive {
  opacity: 0.5;
}
.togetherjs .togetherjs-button .togetherjs-person {
  margin: 0 0 0 10px;
}
@-moz-document url-prefix() {
  /* firefox only styles */
  .togetherjs-button .togetherjs-person {
    margin: 10px 0 0 10px;
  }
}
.togetherjs header .togetherjs-person {
  float: left;
}
.togetherjs .togetherjs-dock-person > .togetherjs-dock-person-tooltip {
  display: none;
}
.togetherjs .togetherjs-dock-person:hover > .togetherjs-dock-person-tooltip {
  display: block;
}
.togetherjs .togetherjs-dock-person.togetherjs-active:hover > .togetherjs-dock-person-tooltip {
  display: none;
}
.togetherjs .togetherjs-dock-person-tooltip {
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial;
  position: absolute;
  right: 70px;
  top: 0px;
  padding: 8px;
  font-size: 12px;
  text-align: left;
  min-width: 30px;
}
.togetherjs .togetherjs-tooltip {
  background-color: rgba(42, 42, 42, 0.9);
  color: #fff;
  border-radius: 4px;
  line-height: 20px !important;
}
.togetherjs .togetherjs-dock-person-tooltip .togetherjs-person-name {
  font-size: 12px;
}
.togetherjs .togetherjs-person-tooltip-arrow-r {
  position: absolute;
  left: 46px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid rgba(0, 0, 0, 0.9);
  line-height: 20px;
  opacity: 0.9;
  top: 20px;
}
.togetherjs-triangle-up {
  position: absolute;
  top: -15px;
  width: 13px;
  left: 50px;
}
.togetherjs-triangle-up img {
  width: 12px;
  height: 13px;
}
.togetherjs-rtc-dialog-btn {
  text-align: right;
}
#togetherjs-rtc-info section.togetherjs-buttons {
  text-align: right !important;
}
#togetherjs-rtc-info label {
  font-size: 12px !important;
  float: left !important;
  padding-top: 13px;
  padding-left: 30px;
}
#togetherjs-rtc-info input {
  margin-top: 0px !important;
}
.togetherjs-chat-url-change {
  background: #f2f2f2;
  margin-top: 0px !important;
}
.togetherjs-chat-join-item {
  background: #f2f2f2;
  margin-top: 0px !important;
}
.togetherjs-chat-left-item {
  background: #f2f2f2;
  margin-top: 0px !important;
}
.togetherjs-inline-text {
  margin-top: 10px !important;
}
.togetherjs-chat-join-item .togetherjs-person {
  float: left;
  margin-bottom: 0px !important;
  margin-top: 0px;
}
.togetherjs-chat-left-item .togetherjs-person {
  float: left;
  margin-bottom: 0px !important;
  margin-top: 0px;
}
.togetherjs-chat-url-change .togetherjs-person {
  float: left;
  margin-bottom: 0px !important;
  margin-top: 0px;
}
.togetherjs-chat-join-item span.togetherjs-person-name {
  font-family: openSansRegular, Helvetica;
}
.togetherjs-chat-left-item span.togetherjs-person-name {
  font-family: openSansRegular, Helvetica;
}
.togetherjs-chat-url-change span.togetherjs-person-name {
  font-family: openSansRegular, Helvetica;
}
.togetherjs-clear {
  clear: both;
}
/* Menu */
#togetherjs-menu {
  width: 216px;
  position: fixed;
  font-size: 14px;
  background-color: #fff;
  z-index: 10003;
  border: 1px solid #979797;
  border-radius: 4px;
}
#togetherjs-menu hr {
  margin: 0px;
  border-top: 0px solid #E1E1E1;
}
#togetherjs-menu .togetherjs-menu-hr-avatar {
  margin-top: 20px;
  height: 0px;
  border-bottom: 1px solid #E1E1E1;
  font-size: 1px;
}
#togetherjs-menu .togetherjs-hr {
  height: 0px;
  margin: 0px;
  border-bottom: 1px solid #E1E1E1;
  font-size: 1px;
}
#togetherjs-menu .togetherjs-menu-item {
  margin: -1px 0px -1px;
  padding: 12px;
  line-height: 9px;
  height: 10px;
  clear: both;
  cursor: pointer;
}
#togetherjs-menu .togetherjs-menu-item.togetherjs-menu-disabled {
  cursor: default;
}
#togetherjs-menu .togetherjs-menu-item.togetherjs-menu-disabled:hover {
  background-color: inherit;
  border-radius: 4px;
  border-top: 1px solid #979797;
  padding-top: 11px !important;
}
#togetherjs-menu .togetherjs-menu-item img {
  float: left;
  height: 20px;
  width: 20px;
  margin-right: 10px;
  margin-top: -5px;
}
#togetherjs-menu .togetherjs-menu-item:hover {
  background-color: rgba(216, 216, 216, 0.5);
}
#togetherjs-menu .togetherjs-menu-item .togetherjs-avatar {
  height: 20px;
  width: 20px;
  padding: 0;
  margin: 0 10px 0 0;
}
#togetherjs-menu .togetherjs-menu-item .togetherjs-person-bgcolor-self {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #999;
  border-radius: 2px;
  margin-right: 12px;
  float: left;
  margin-top: -2px;
  margin-left: 4px;
}
#togetherjs-menu #togetherjs-menu-help {
  padding-left: 15px;
}
#togetherjs-menu #togetherjs-menu-feedback {
  padding-left: 15px;
}
#togetherjs-menu img#togetherjs-menu-avatar {
  float: left;
  padding-top: 8px;
}
#togetherjs-menu .togetherjs-person-name-self {
  padding-top: 8px;
  line-height: 32px;
  font-weight: bold;
}
#togetherjs-menu .togetherjs-self-name {
  width: 146px !important;
  float: right;
  margin-top: -23px;
  font-size: 12px;
  padding: 7px 7px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  margin: -2px 0px;
}
#togetherjs-menu .togetherjs-self-name:focus {
  border: 1px solid #0095DD;
}
#togetherjs-menu .togetherjs-self-name:focus {
  border-bottom: 1px solid #0095DD;
}
/*Participant windows*/
#togetherjs-participantlist.togetherjs-window {
  padding: -1px;
}
#togetherjs-participantlist.togetherjs-window section {
  overflow: scroll;
  height: 200px;
  margin: 0px -7px;
}
#togetherjs-participantlist section.togetherjs-buttons {
  height: auto;
  background: none;
  text-align: left;
  margin: auto;
  padding-top: 0px;
}
#togetherjs-participantlist .togetherjs-person.togetherjs-person-small {
  margin: 0px;
  width: 30px;
  height: 30px;
}
#togetherjs-participantlist.togetherjs-window section ul li {
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#togetherjs-participantlist.togetherjs-window .tj-name {
  padding-left: 5px;
}
#togetherjs-participantlist.togetherjs-window .tj-status {
  float: right;
  margin-top: 6px;
  margin-right: 10px;
  font-size: 24px;
  color: green;
}
#togetherjs-participantlist.togetherjs-window .tj-urllocation {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#togetherjs-participantlist .togetherjs-follow-question {
  margin-left: 0px;
}
#togetherjs-participantlist.togetherjs-window .tj-follow {
  font-size: 12px;
}
#togetherjs-participantlist.togetherjs-window .tj-btn-sm {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  margin: 0px 3px 0px 0px;
}
section.togetherjs-participant-window-main {
  margin: 0px -7px -7px !important;
}
.togetherjs-participant-window-row a.togetherjs-person-url {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 179px;
  display: inline-block;
}
.togetherjs p.togetherjs-participant-window-row {
  border-bottom: 1px solid #E1E1E1 !important;
  padding: 7px 14px 14px !important;
}
.togetherjs-participant-window-row strong {
  font-weight: 800;
}
.togetherjs-follow-question {
  margin-left: 10px;
}
.togetherjs-float-left {
  float: left;
}
.togetherjs-window input[type="radio"],
.togetherjs-window input[type="checkbox"] {
  margin: 0 0 0 !important;
}
.togetherjs-clear {
  clear: both;
  margin: 10px;
}
section.togetherjs-buttons {
  background: #F3F2F2;
  margin: 0px -7px !important;
  padding: 7px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: right;
}
section.togetherjs-buttons.togetherjs-buttons-notification-diff-url {
  margin: 7px -7px 0px !important;
  padding: 7px 3px 0px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  width: 300px;
  text-align: right;
}
.togetherjs-notification-diff-url {
  width: 288px !important;
  margin: 0px 7px !important;
}
.togetherjs-different-url button {
  min-width: 47% !important;
}
/*.togetherjs-different-url {
  text-align:right;
}*/
.togetherjs-same-url {
  padding-left: 7px !important;
  opacity: .5 !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
section.togetherjs-buttons .togetherjs-same-url {
  text-align: left;
}
/* Button set */
#togetherjs-dock {
  position: fixed;
  z-index: 10000;
  background-color: #0095dd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /*border:1px solid #000;*/

}
#togetherjs-dock.togetherjs-dock-right {
  padding: 0;
  bottom: 150px;
  right: 5px;
  border-radius: 4px;
  height: 260px;
  width: 60px;
}
#togetherjs-dock.togetherjs-dock-right #togetherjs-dock-anchor-vertical {
  display: none;
}
#togetherjs-dock.togetherjs-dock-right #togetherjs-dock-anchor-horizontal {
  display: inline;
}
#togetherjs-dock.togetherjs-dock-right #togetherjs-dock-anchor-horizontal img {
  width: 31px;
  height: 7px;
  padding: 0px 2px 2px 2px;
  pointer-events: none;
}
#togetherjs-dock.togetherjs-dock-left {
  padding: 0;
  bottom: 60px;
  left: 5px;
  border-radius: 0 4px 4px 0;
  height: 214px;
  width: 60px;
}
#togetherjs-dock.togetherjs-dock-left #togetherjs-dock-anchor-vertical {
  display: none;
}
#togetherjs-dock.togetherjs-dock-left #togetherjs-dock-anchor-horizontal {
  display: inline;
}
#togetherjs-dock.togetherjs-dock-left #togetherjs-dock-anchor-horizontal img {
  width: 6px;
  height: 6px;
  padding: 7px 2px 2px 2px;
}
#togetherjs-dock.togetherjs-dock-top {
  padding: 0;
  top: 40px;
  left: 50%;
  margin-left: -130px;
  border-radius: 4px 4px 0 0;
  height: 60px;
  width: 260px;
}
#togetherjs-dock.togetherjs-dock-top #togetherjs-buttons,
#togetherjs-dock.togetherjs-dock-top #togetherjs-dock-anchor {
  display: inline;
}
#togetherjs-dock.togetherjs-dock-top #togetherjs-dock-anchor-vertical {
  display: inline;
}
#togetherjs-dock.togetherjs-dock-top #togetherjs-dock-anchor-horizontal {
  display: none;
}
#togetherjs-dock.togetherjs-dock-top #togetherjs-dock-anchor-vertical img {
  width: 6px;
  height: 6px;
  padding: 2px;
}
/* Arrows for pointing */
.togetherjs-arrow {
  position: absolute;
  border: 2px solid #f00;
  z-index: 10010;
  padding: 0;
  margin: 0;
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
}
.togetherjs-chat-message.togetherjs-arrow-message {
  border: 2px solid #f00;
}
/* Shared cursors */
.togetherjs-cursor svg {
  -webkit-filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.3));
  -webkit-transform: rotate(-10deg);
}
.togetherjs-cursor-img {
  position: relative;
  top: 0;
}
.togetherjs-cursor img {
  width: 20px;
  -webkit-filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.2));
  /*FIX ME, moz filter not working...*/

  -moz-filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.2));
}
.togetherjs-cursor {
  position: absolute;
  z-index: 9999;
  font-size: 28px;
  font-weight: bolder;
  /* This magic CSS rule makes this element basically invisible to clicks/etc:
  (good on all but IE: http://caniuse.com/pointer-events */

  pointer-events: none;
  /*FIXME: maybe these should use position: fixed so the cursor
  stays stuck to the top of the screen until the appropriate time
  (when .togetherjs-scrolled-above/below is removed)?*/

}
.togetherjs-cursor:hover {
  cursor: pointer;
}
.togetherjs-cursor.togetherjs-scrolled-above {
  position: fixed;
}
.togetherjs-cursor.togetherjs-scrolled-above svg {
  -webkit-transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -webkit-transform: rotate(20deg);
  transition-duration: 0.8s;
  transition-property: transform;
  transform: rotate(20deg);
}
.togetherjs-cursor.togetherjs-scrolled-above .togetherjs-cursor-down {
  display: none;
}
.togetherjs-cursor.togetherjs-scrolled-below {
  position: fixed;
}
.togetherjs-cursor.togetherjs-scrolled-below svg {
  -webkit-transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -webkit-transform: rotate(-150deg);
  transition-duration: 0.8s;
  transition-property: transform;
  transform: rotate(-150deg);
}
.togetherjs-cursor.togetherjs-scrolled-below .togetherjs-cursor-up {
  display: none;
}
.togetherjs-cursor.togetherjs-scrolled-normal svg {
  -webkit-transition-duration: 0.8s;
  -webkit-transition-property: -webkit-transform;
  -webkit-transform: rotate(-10deg);
  transition-duration: 0.8s;
  transition-property: transform;
  transform: rotate(-10deg);
}
.togetherjs-cursor.togetherjs-scrolled-normal .togetherjs-cursor-up,
.togetherjs-cursor.togetherjs-scrolled-normal .togetherjs-cursor-down {
  display: none;
}
.togetherjs-cursor .togetherjs-cursor-container {
  opacity: 0.9;
  white-space: nowrap;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  font-size: 40%;
  position: relative;
  top: 5px;
  left: 15px;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
.togetherjs-click {
  position: absolute;
  z-index: 9998;
  pointer-events: none;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 5px;
  border: 3px solid #ff3a29;
  /*    Note, you must call this like:
  .transition(~"value, value, value")*/

  transition: width 2s, height 2s, margin 2s, border 2s;
  -moz-transition: width 2s, height 2s, margin 2s, border 2s;
  -webkit-transition: width 2s, height 2s, margin 2s, border 2s;
  -o-transition: width 2s, height 2s, margin 2s, border 2s;
}
.togetherjs-click.togetherjs-clicking {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 20px;
  border: 3px solid rgba(0, 0, 0, 0);
}
#togetherjs-starter .togetherjs-running {
  background-color: #f00;
  color: #fff;
  border-radius: 4px;
  border: 3px outset #d00;
  /*FIXME: add gradient*/

}
/* Modals */
#togetherjs-modal-background {
  position: fixed;
  background-color: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10002;
}
.togetherjs .togetherjs-modal {
  background-color: #ffffff;
  color: #000000;
  padding: 0 7px 0 7px;
  z-index: 10001;
  width: 286px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 5px !important;
  position: fixed;
  z-index: 10003;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  margin-top: -10em;
}
.togetherjs .togetherjs-modal section {
  margin: 15px 7px;
}
.togetherjs .togetherjs-modal > header {
  font-weight: bold;
  font-variant: normal;
  text-align: center;
  font-family: openSansRegular, Helvetica;
  color: #fff;
  margin: 0 -7px 0 -7px;
  padding: 10px 4px 5px 30px;
  height: 24px;
  background: #0095DD;
  border-radius: 4px 4px 0 0;
  position: relative;
  border-bottom: 1px solid #0071A7;
}
.togetherjs .togetherjs-modal .togetherjs-share-link {
  width: 256px;
  font-size: 12px;
  padding: 6px 6px 4px;
  border-radius: 4px;
  border: 1px solid #cccccc;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  font-family: Monaco, sans-serif;
  margin: 7px 0px;
}
.togetherjs .togetherjs-modal .togetherjs-share-link:focus {
  border: 1px solid #0095DD;
}
.togetherjs .togetherjs-modal header button.togetherjs-close {
  background-color: inherit;
  border: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid #0071A7;
  float: right;
  font-weight: bold;
  cursor: pointer;
  background-color: #0095dd;
  background-image: url('./images/icon-close@2x.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  width: 39px;
  height: 39px;
  margin-top: -10px;
  margin-right: -4px;
  border-top-right-radius: 4px;
}
.togetherjs .togetherjs-modal header button.togetherjs-close:hover {
  background-image: url('./images/icon-close-active.png');
  background-color: rgba(0, 0, 0, 0.1);
}
.togetherjs .togetherjs-modal #togetherjs-chat-messages {
  overflow-y: auto;
  /*FIXME: I'm just pulling numbers out of thin air here:*/

  height: 260px;
}
.togetherjs .togetherjs-modal.togetherjs-modal-wide {
  width: 550px;
  margin-left: -284px;
  height: 530px;
  margin-top: -275px;
}
.togetherjs .togetherjs-modal section.togetherjs-buttons {
  /*position: absolute;*/

  bottom: 0;
  background: #F2F2F2;
  width: 294px;
  padding: 10px;
  text-align: right;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-left: -7px;
  margin-bottom: 0px;
  border-top: 1px solid #E1E1E1;
}
.togetherjs .togetherjs-modal-wide section.togetherjs-buttons {
  width: 544px;
  text-align: center !important;
  position: absolute;
}
.togetherjs .togetherjs-walkthrough-slide {
  padding: 0 30px 0 30px;
  text-align: center;
}
.togetherjs .togetherjs-walkthrough-slide p {
  margin: 18px auto;
  width: 400px;
}
.togetherjs .togetherjs-walkthrough-slide iframe {
  border-radius: 4px;
}
.togetherjs section.togetherjs-walkthrough-slide .togetherjs-walkthrough-main-image .togetherjs-walkthrough-avatar-section {
  margin-top: 115px;
}
.togetherjs .togetherjs-avatar-preview {
  float: left;
  margin-left: 82px;
}
.togetherjs .togetherjs-avatar-upload-input {
  float: right;
  margin-right: 82px;
  margin-top: 19px;
}
.togetherjs .togetherjs-save-settings {
  margin-top: 239px;
}
.togetherjs section.togetherjs-walkthrough-slide .togetherjs-walkthrough-avatar {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 44%;
  top: 30%;
  border-radius: 4px 4px 4px 4px;
  border: 2px solid #cccccc;
  background: none repeat scroll 0% 0% #000000;
}
.togetherjs section.togetherjs-walkthrough-slide .togetherjs-walkthrough-avatar:hover {
  cursor: pointer;
  border: 2px solid #cccccc;
}
.togetherjs section.togetherjs-walkthrough-slide input.togetherjs-self-name {
  position: absolute;
  top: 50%;
  left: 29%;
  font-size: 14px;
  padding: 6px 6px 6px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
  font-family: openSansRegular, Helvetica, sans-serif;
  margin: -20px 0px;
}
.togetherjs section.togetherjs-walkthrough-slide .togetherjs-swatch {
  width: 32px;
  height: 32px;
  background: none repeat scroll 0% 0% #000000;
  position: absolute;
  top: 46.2%;
  right: 29%;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
}
.togetherjs section.togetherjs-walkthrough-slide .togetherjs-swatch:hover {
  cursor: pointer;
  border: 1px solid rgba(204, 204, 204, 0.2);
}
.togetherjs section.togetherjs-walkthrough-slide span.togetherjs-walkthrough-sendlink {
  top: 44%;
  position: relative;
}
.togetherjs section.togetherjs-walkthrough-slide input.togetherjs-share-link {
  top: 44%;
  position: relative;
}
.togetherjs .togetherjs-walkthrough-main-image {
  width: 400px;
  height: 300px;
  background: rgba(216, 216, 216, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(151, 151, 151, 0.1);
  margin: 0 auto;
}
.togetherjs .togetherjs-walkthrough-main-image img {
  width: 400px;
  height: 300px;
}
.togetherjs #togetherjs-walkthrough input,
.togetherjs textarea,
.togetherjs .uneditable-input {
  width: 177px;
}
.togetherjs #togetherjs-walkthrough select,
.togetherjs input[type="file"] {
  height: 30px;
  line-height: 0px;
}
.togetherjs #togetherjs-walkthrough-previous {
  cursor: pointer;
  width: 19px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 60% 60%;
  margin-left: 36px;
  margin-top: 28%;
  background-image: url('./images/icn-walkthrough-arrow-l.png');
  float: left;
}
.togetherjs #togetherjs-walkthrough-previous.togetherjs-disabled {
  cursor: default;
  opacity: 0.2;
}
.togetherjs #togetherjs-walkthrough-previous:hover {
  background-image: url('./images/icn-walkthrough-arrow-l-hover.png');
}
.togetherjs #togetherjs-walkthrough-next {
  cursor: pointer;
  width: 19px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 60% 60%;
  margin-right: 28px;
  margin-top: 28%;
  background-image: url('./images/icn-walkthrough-arrow-r.png');
  float: right;
}
.togetherjs #togetherjs-walkthrough-next.togetherjs-disabled {
  cursor: default;
  opacity: 0.2;
}
.togetherjs #togetherjs-walkthrough-next:hover {
  background-image: url('./images/icn-walkthrough-arrow-r-hover.png');
}
.togetherjs #togetherjs-walkthrough-progress {
  width: 537px;
  position: absolute;
  bottom: 66px;
  text-align: center;
}
.togetherjs .togetherjs-walkthrough-slide-progress {
  cursor: pointer;
  padding: 0 5px 0 5px;
  color: #D8D8D8;
  font-size: 20px;
}
.togetherjs .togetherjs-walkthrough-slide-progress.togetherjs-active {
  color: #9C9C9C;
}
.togetherjs .togetherjs-walkthrough-slide-progress:hover {
  color: #9C9C9C;
}
/* Animations */
/* Inspired by https://github.com/daneden/animate.css */
@-webkit-keyframes togetherjs-pulse {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes togetherjs-pulse {
  0% {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.1);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-o-keyframes togetherjs-pulse {
  0% {
    -o-transform: scale(1);
  }
  50% {
    -o-transform: scale(1.1);
  }
  100% {
    -o-transform: scale(1);
  }
}
@keyframes togetherjs-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.togetherjs-pulse {
  -webkit-animation-name: togetherjs-pulse;
  -moz-animation-name: togetherjs-pulse;
  -o-animation-name: togetherjs-pulse;
  animation-name: togetherjs-pulse;
}
.togetherjs-animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes togetherjs-color-pulse {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: inset 0 0 2px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
@-moz-keyframes togetherjs-color-pulse {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: inset 0 0 2px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
@-o-keyframes togetherjs-color-pulse {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: inset 0 0 2px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes togetherjs-color-pulse {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: inset 0 0 2px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
.togetherjs-color-pulse {
  -webkit-animation-name: togetherjs-color-pulse;
  -moz-animation-name: togetherjs-color-pulse;
  -o-animation-name: togetherjs-color-pulse;
  animation-name: togetherjs-color-pulse;
}
@-webkit-keyframes togetherjs-color-alert {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 5px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
@-moz-keyframes togetherjs-color-alert {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 5px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
@-o-keyframes togetherjs-color-alert {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 5px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
@keyframes togetherjs-color-alert {
  0% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 5px #0095dd;
  }
  100% {
    box-shadow: none;
  }
}
.togetherjs-color-alert {
  -webkit-animation-name: togetherjs-color-alert;
  -moz-animation-name: togetherjs-color-alert;
  -o-animation-name: togetherjs-color-alert;
  animation-name: togetherjs-color-alert;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
#togetherjs-profile-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 42px;
  top: 46px;
  background: url('./images/icn-gear.png');
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
#togetherjs-pick-color {
  width: 100px;
  height: 76px;
  margin-left: -35px;
  position: absolute;
  margin-top: 25px;
  background-color: #fff;
  z-index: 10004;
  border: 1px solid #979797;
  border-radius: 4px;
  padding: 5px;
}
#togetherjs-pick-color .togetherjs-swatch {
  cursor: pointer;
  display: inline-block;
  height: 12px;
  width: 12px;
  border: 1px solid;
  border-radius: 1px;
  margin: 4px;
}
#togetherjs-pick-color .togetherjs-swatch.togetherjs-swatch-active {
  border: 3px solid;
  border-radius: 3px;
}
#togetherjs-pick-color .togetherjs-swatch:hover {
  border: 2px solid rgba(0, 0, 0, 0.5);
  height: 10px;
  width: 10px;
  border-radius: 3px;
}
.togetherjs-focus {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.4;
  border: 3px solid;
  margin: -3px;
}
.togetherjs-only-mobile {
  display: none;
}
@media screen and (max-device-width: 480px) {
  {
    /*TogetherJS dock*/
  
    /*TogetherJS walkthrough*/
  
  }
  #togetherjs-dock.togetherjs-dock-right {
    top: 0px;
    width: auto;
    height: 40px !important;
    right: 0px;
    margin: 10px;
    bottom: 0px;
  }
  #togetherjs-dock #togetherjs-dock-anchor {
    width: 40px;
    height: 40px;
    float: right;
    user-select: all;
    cursor: default;
    display: inline;
  }
  #togetherjs-dock #togetherjs-buttons {
    display: inline;
  }
  #togetherjs-dock .togetherjs-button {
    float: right;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    border-top: none;
    width: 40px;
    height: 40px;
    background-size: 30px 30px;
  }
  #togetherjs-dock #togetherjs-profile-arrow {
    display: none;
  }
  #togetherjs-dock #togetherjs-dock-anchor-horizontal img {
    width: 24px;
    height: 24px;
    padding: 8px;
  }
  .togetherjs-only-mobile {
    display: block;
    text-align: center;
    /*  a.togetherjs-share-link {
      padding: 6px 111px 6px;
    }*/
  
  }
  .togetherjs-not-mobile {
    display: none;
  }
  .togetherjs .togetherjs-menu-item {
    cursor: pointer;
    margin: 0px -14px 0px;
    padding: 9px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
  .togetherjs #togetherjs-menu-feedback-button,
  .togetherjs #togetherjs-menu-update-color-button,
  .togetherjs #togetherjs-menu-help-button {
    display: none;
  }
  .togetherjs .togetherjs-menu-item img {
    display: none;
  }
  .togetherjs .togetherjs-menu-item:first-child {
    display: none;
  }
  .togetherjs .togetherjs-button .togetherjs-person {
    margin: 0 0 0 5px;
  }
  .togetherjs .togetherjs-person {
    background-size: 30px 30px;
    height: 26px;
    width: 26px;
  }
  .togetherjs .togetherjs-person-avatar-swatch {
    margin-left: 12px;
  }
  .togetherjs .togetherjs-window {
    width: 100%;
    margin-left: 0;
    height: 82%;
    margin-top: 0%;
    z-index: 10003 !important;
    top: 20%;
    left: -2px;
  }
  .togetherjs .togetherjs-window #togetherjs-chat-messages {
    width: 105%;
  }
  .togetherjs .togetherjs-window .togetherjs-close {
    display: none;
  }
  .togetherjs .togetherjs-window #togetherjs-chat-messages {
    height: 62%;
    top: -37px;
  }
  .togetherjs .togetherjs-subtitle {
    width: 98%;
    margin: 22px 7px;
  }
  .togetherjs #togetherjs-chat-input-box {
    width: 100%;
    bottom: 0px;
    position: fixed;
  }
  .togetherjs #togetherjs-chat-input {
    width: 95%;
  }
  .togetherjs .togetherjs-timestamp {
    padding: 8px 45px 0px 10px;
  }
  .togetherjs #togetherjs-rtc-not-supported section.togetherjs-buttons {
    display: none;
  }
  .togetherjs #togetherjs-menu-window section.togetherjs-buttons {
    display: none;
  }
  .togetherjs .togetherjs-modal {
    width: 94%;
    margin-left: 1%;
    height: 94%;
    margin-top: 1%;
    top: 0;
    left: 0;
  }
  .togetherjs .togetherjs-window > header {
    margin: -7px;
    padding: 10px;
  }
  #togetherjs-dock-participants {
    display: none;
  }
  #togetherjs-confirm-end section.togetherjs-buttons {
    position: fixed;
    bottom: 0;
    width: 92%;
  }
  #togetherjs-edit-name-window section.togetherjs-buttons {
    position: fixed;
    bottom: 0;
    width: 96%;
  }
  input.togetherjs-self-name {
    padding: 10px;
    width: 92%;
    margin-top: 10px;
  }
  #togetherjs-avatar-edit section.togetherjs-buttons {
    position: fixed;
    bottom: 0;
    width: 92%;
  }
  #togetherjs-avatar-edit .togetherjs-person {
    margin: 30px auto;
    float: none;
  }
  #togetherjs-avatar-edit #togetherjs-avatar-buttons {
    float: none;
    margin: 0 auto;
  }
  #togetherjs-window-pointer-right,
  #togetherjs-window-pointer-left {
    position: fixed;
    width: 10px;
    height: 10px;
    margin-right: -5px;
    margin-top: -5px;
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 10002;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  }
  #togetherjs-window-pointer-right {
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  #togetherjs-window-pointer-left {
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  .togetherjs .togetherjs-modal section {
    margin: 0px 7px;
  }
  #togetherjs-walkthrough-progress {
    width: 93%;
    text-align: center;
    position: static;
  }
  .togetherjs-modal-wide section.togetherjs-buttons {
    width: 93.9%;
    text-align: center !important;
    position: absolute;
    bottom: -17px;
  }
  .togetherjs-walkthrough-slide p {
    margin: 13px auto;
    width: 100%;
    font-size: 11px;
  }
  .togetherjs .togetherjs-walkthrough-main-image {
    width: auto;
    height: auto;
    background: rgba(216, 216, 216, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(151, 151, 151, 0.1);
    padding: 10px;
  }
  .togetherjs .togetherjs-walkthrough-main-image img {
    width: 50%;
    height: auto;
  }
  .togetherjs #togetherjs-walkthrough-next {
    cursor: pointer;
    width: 19px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: 60% 60%;
    margin-right: 0px;
    margin-top: 28%;
    background-image: url('./images/icn-walkthrough-arrow-r.png');
    float: right;
  }
  .togetherjs #togetherjs-walkthrough-previous {
    cursor: pointer;
    width: 19px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: 60% 60%;
    margin-top: 28%;
    background-image: url('./images/icn-walkthrough-arrow-l.png');
    float: left;
    margin-left: 0px;
  }
  .togetherjs .togetherjs-modal .togetherjs-share-link {
    width: 80%;
    font-size: 14px;
    padding: 14px;
    border-radius: 4px;
    border: 1px solid 
    #cccccc;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
    font-family: Monaco;
    margin: 7px 0px;
  }
  .togetherjs-walkthrough-sendlink {
    top: 44%;
    position: relative;
    padding: 15px;
  }
  .togetherjs section.togetherjs-walkthrough-slide input.togetherjs-self-name {
    position: absolute;
    top: 50%;
    left: 29%;
    font-size: 14px;
    padding: 6px 6px 6px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid 
    #cccccc;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
    font-family: openSansRegular;
    margin: -20px 11px;
    width: 60%;
  }
  .togetherjs section.togetherjs-walkthrough-slide .togetherjs-walkthrough-main-image .togetherjs-walkthrough-avatar-section {
    margin-top: 15px;
  }
  .togetherjs .togetherjs-avatar-preview {
    margin: 0 auto;
    float: none;
  }
  .togetherjs .togetherjs-avatar-upload-input {
    margin: 10px auto;
    float: none;
  }
  .togetherjs .togetherjs-avatar-upload-input input {
    width: 60%;
  }
  input.togetherjs-upload-avatar {
    line-height: 0px;
    width: 174px;
    margin-left: 0px;
  }
  .togetherjs section.togetherjs-walkthrough-slide input.togetherjs-self-name {
    float: left;
    font-size: 14px;
    padding: 6px 6px 6px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid 
    #cccccc;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
    font-family: openSansRegular;
    width: 66%;
    position: static;
    margin: 10px 10px;
  }
  .togetherjs section.togetherjs-walkthrough-slide .togetherjs-swatch {
    width: 32px;
    height: 32px;
    background: none repeat scroll 0% 0% 
    #000000;
    position: relative;
    float: right;
    right: 10px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #cccccc;
    top: 10px;
  }
  .togetherjs .togetherjs-save-settings {
    margin-top: 20px;
    margin-bottom: 0px;
  }
}
@media screen and (max-device-width: 480px) and (min-width: 480px) {
  {
    /*  #togetherjs-dock.togetherjs-dock-right {
      width: 27% !important; 
    }*/
  
  }
  .togetherjs-mobile-browser input.togetherjs-self-name {
    width: 95%;
    margin-top: 10px;
  }
  .togetherjs .togetherjs-window {
    width: 100%;
    left: -2px !important;
    top: 50%;
  }
  .togetherjs-mobile-browser #togetherjs-edit-name-window section.togetherjs-buttons {
    width: 99%;
  }
  #togetherjs-confirm-end section.togetherjs-buttons {
    width: 96.6%;
    position: absolute;
    bottom: 0;
  }
  #togetherjs-edit-name-window section.togetherjs-buttons {
    width: 99%;
  }
  input.togetherjs-self-name {
    width: 94%;
    margin-top: 10px;
  }
  #togetherjs-avatar-edit section.togetherjs-buttons {
    width: 95.3%;
    bottom: 0;
    background: #F2F2F2;
    padding: 10px;
    text-align: right;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top: 1px solid #E1E1E1;
    position: absolute;
  }
  .togetherjs-modal {
    width: 74% !important;
    height: 50% !important;
    margin: 20% 12% !important;
  }
  .togetherjs-mobile-browser .togetherjs .togetherjs-modal {
    width: 76% !important;
    margin-left: 1%;
    height: 94%;
    margin-top: 1%;
    top: 0;
    left: 0;
    height: 41%;
    margin: 20% 11%;
  }
  .togetherjs-modal-wide section.togetherjs-buttons {
    width: 97.4% !important;
  }
}
@media screen and (max-device-width: 480px) and (max-width: 480px) {
  .togetherjs .togetherjs-window {
    width: 96%;
    margin-left: 0;
    height: 82%;
    margin-top: 0%;
    z-index: 10003 !important;
    top: 20%;
    left: -2px;
  }
  .togetherjs .togetherjs-window #togetherjs-chat-messages {
    width: 105%;
  }
  .togetherjs .togetherjs-window .togetherjs-close {
    display: none;
  }
  .togetherjs .togetherjs-window #togetherjs-chat-messages {
    height: 62%;
    top: -37px;
  }
  #togetherjs-chat-input-box {
    width: 94% !important;
    bottom: 0px;
    position: fixed;
  }
  .togetherjs-timestamp {
    padding: 8px 15px 0px 10px !important;
  }
  input[type='text'],
  input[type='number'],
  textarea {
    font-size: 16px !important;
  }
}
/* We set this class on the <body> element when that last media query won't work
   but we detect in Javascript that the client should be treated as mobile */
.togetherjs-mobile-browser {
  /*TogetherJS dock*/

  /*TogetherJS walkthrough*/

}
.togetherjs-mobile-browser #togetherjs-dock.togetherjs-dock-right {
  top: 0px;
  width: auto;
  height: 40px !important;
  right: 0px;
  margin: 10px;
  bottom: 0px;
}
.togetherjs-mobile-browser #togetherjs-dock #togetherjs-dock-anchor {
  width: 40px;
  height: 40px;
  float: right;
  user-select: all;
  cursor: default;
  display: inline;
}
.togetherjs-mobile-browser #togetherjs-dock #togetherjs-buttons {
  display: inline;
}
.togetherjs-mobile-browser #togetherjs-dock .togetherjs-button {
  float: right;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-top: none;
  width: 40px;
  height: 40px;
  background-size: 30px 30px;
}
.togetherjs-mobile-browser #togetherjs-dock #togetherjs-profile-arrow {
  display: none;
}
.togetherjs-mobile-browser #togetherjs-dock #togetherjs-dock-anchor-horizontal img {
  width: 24px;
  height: 24px;
  padding: 8px;
}
.togetherjs-mobile-browser .togetherjs-only-mobile {
  display: block;
  text-align: center;
  /*  a.togetherjs-share-link {
    padding: 6px 111px 6px;
  }*/

}
.togetherjs-mobile-browser .togetherjs-not-mobile {
  display: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-menu-item {
  cursor: pointer;
  margin: 0px -14px 0px;
  padding: 9px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.togetherjs-mobile-browser .togetherjs #togetherjs-menu-feedback-button,
.togetherjs-mobile-browser .togetherjs #togetherjs-menu-update-color-button,
.togetherjs-mobile-browser .togetherjs #togetherjs-menu-help-button {
  display: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-menu-item img {
  display: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-menu-item:first-child {
  display: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-button .togetherjs-person {
  margin: 0 0 0 5px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-person {
  background-size: 30px 30px;
  height: 26px;
  width: 26px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-person-avatar-swatch {
  margin-left: 12px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-window {
  width: 100%;
  margin-left: 0;
  height: 82%;
  margin-top: 0%;
  z-index: 10003 !important;
  top: 20%;
  left: -2px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-window #togetherjs-chat-messages {
  width: 105%;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-window .togetherjs-close {
  display: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-window #togetherjs-chat-messages {
  height: 62%;
  top: -37px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-subtitle {
  width: 98%;
  margin: 22px 7px;
}
.togetherjs-mobile-browser .togetherjs #togetherjs-chat-input-box {
  width: 100%;
  bottom: 0px;
  position: fixed;
}
.togetherjs-mobile-browser .togetherjs #togetherjs-chat-input {
  width: 95%;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-timestamp {
  padding: 8px 45px 0px 10px;
}
.togetherjs-mobile-browser .togetherjs #togetherjs-rtc-not-supported section.togetherjs-buttons {
  display: none;
}
.togetherjs-mobile-browser .togetherjs #togetherjs-menu-window section.togetherjs-buttons {
  display: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-modal {
  width: 94%;
  margin-left: 1%;
  height: 94%;
  margin-top: 1%;
  top: 0;
  left: 0;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-window > header {
  margin: -7px;
  padding: 10px;
}
.togetherjs-mobile-browser #togetherjs-dock-participants {
  display: none;
}
.togetherjs-mobile-browser #togetherjs-confirm-end section.togetherjs-buttons {
  position: fixed;
  bottom: 0;
  width: 92%;
}
.togetherjs-mobile-browser #togetherjs-edit-name-window section.togetherjs-buttons {
  position: fixed;
  bottom: 0;
  width: 96%;
}
.togetherjs-mobile-browser input.togetherjs-self-name {
  padding: 10px;
  width: 92%;
  margin-top: 10px;
}
.togetherjs-mobile-browser #togetherjs-avatar-edit section.togetherjs-buttons {
  position: fixed;
  bottom: 0;
  width: 92%;
}
.togetherjs-mobile-browser #togetherjs-avatar-edit .togetherjs-person {
  margin: 30px auto;
  float: none;
}
.togetherjs-mobile-browser #togetherjs-avatar-edit #togetherjs-avatar-buttons {
  float: none;
  margin: 0 auto;
}
.togetherjs-mobile-browser #togetherjs-window-pointer-right,
.togetherjs-mobile-browser #togetherjs-window-pointer-left {
  position: fixed;
  width: 10px;
  height: 10px;
  margin-right: -5px;
  margin-top: -5px;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 10002;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.togetherjs-mobile-browser #togetherjs-window-pointer-right {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.togetherjs-mobile-browser #togetherjs-window-pointer-left {
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.togetherjs-mobile-browser .togetherjs .togetherjs-modal section {
  margin: 0px 7px;
}
.togetherjs-mobile-browser #togetherjs-walkthrough-progress {
  width: 93%;
  text-align: center;
  position: static;
}
.togetherjs-mobile-browser .togetherjs-modal-wide section.togetherjs-buttons {
  width: 93.9%;
  text-align: center !important;
  position: absolute;
  bottom: -17px;
}
.togetherjs-mobile-browser .togetherjs-walkthrough-slide p {
  margin: 13px auto;
  width: 100%;
  font-size: 11px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-walkthrough-main-image {
  width: auto;
  height: auto;
  background: rgba(216, 216, 216, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(151, 151, 151, 0.1);
  padding: 10px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-walkthrough-main-image img {
  width: 50%;
  height: auto;
}
.togetherjs-mobile-browser .togetherjs #togetherjs-walkthrough-next {
  cursor: pointer;
  width: 19px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 60% 60%;
  margin-right: 0px;
  margin-top: 28%;
  background-image: url('./images/icn-walkthrough-arrow-r.png');
  float: right;
}
.togetherjs-mobile-browser .togetherjs #togetherjs-walkthrough-previous {
  cursor: pointer;
  width: 19px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 60% 60%;
  margin-top: 28%;
  background-image: url('./images/icn-walkthrough-arrow-l.png');
  float: left;
  margin-left: 0px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-modal .togetherjs-share-link {
  width: 80%;
  font-size: 14px;
  padding: 14px;
  border-radius: 4px;
  border: 1px solid 
  #cccccc;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  font-family: Monaco;
  margin: 7px 0px;
}
.togetherjs-mobile-browser .togetherjs-walkthrough-sendlink {
  top: 44%;
  position: relative;
  padding: 15px;
}
.togetherjs-mobile-browser .togetherjs section.togetherjs-walkthrough-slide input.togetherjs-self-name {
  position: absolute;
  top: 50%;
  left: 29%;
  font-size: 14px;
  padding: 6px 6px 6px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid 
  #cccccc;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
  font-family: openSansRegular;
  margin: -20px 11px;
  width: 60%;
}
.togetherjs-mobile-browser .togetherjs section.togetherjs-walkthrough-slide .togetherjs-walkthrough-main-image .togetherjs-walkthrough-avatar-section {
  margin-top: 15px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-avatar-preview {
  margin: 0 auto;
  float: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-avatar-upload-input {
  margin: 10px auto;
  float: none;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-avatar-upload-input input {
  width: 60%;
}
.togetherjs-mobile-browser input.togetherjs-upload-avatar {
  line-height: 0px;
  width: 174px;
  margin-left: 0px;
}
.togetherjs-mobile-browser .togetherjs section.togetherjs-walkthrough-slide input.togetherjs-self-name {
  float: left;
  font-size: 14px;
  padding: 6px 6px 6px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid 
  #cccccc;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1) inset;
  font-family: openSansRegular;
  width: 66%;
  position: static;
  margin: 10px 10px;
}
.togetherjs-mobile-browser .togetherjs section.togetherjs-walkthrough-slide .togetherjs-swatch {
  width: 32px;
  height: 32px;
  background: none repeat scroll 0% 0% 
  #000000;
  position: relative;
  float: right;
  right: 10px;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #cccccc;
  top: 10px;
}
.togetherjs-mobile-browser .togetherjs .togetherjs-save-settings {
  margin-top: 20px;
  margin-bottom: 0px;
}
@media (min-width: 480px) {
  .togetherjs-mobile-browser {
    /*  #togetherjs-dock.togetherjs-dock-right {
      width: 27% !important; 
    }*/
  
  }
  .togetherjs-mobile-browser .togetherjs-mobile-browser input.togetherjs-self-name {
    width: 95%;
    margin-top: 10px;
  }
  .togetherjs-mobile-browser .togetherjs .togetherjs-window {
    width: 100%;
    left: -2px !important;
    top: 50%;
  }
  .togetherjs-mobile-browser .togetherjs-mobile-browser #togetherjs-edit-name-window section.togetherjs-buttons {
    width: 99%;
  }
  .togetherjs-mobile-browser #togetherjs-confirm-end section.togetherjs-buttons {
    width: 96.6%;
    position: absolute;
    bottom: 0;
  }
  .togetherjs-mobile-browser #togetherjs-edit-name-window section.togetherjs-buttons {
    width: 99%;
  }
  .togetherjs-mobile-browser input.togetherjs-self-name {
    width: 94%;
    margin-top: 10px;
  }
  .togetherjs-mobile-browser #togetherjs-avatar-edit section.togetherjs-buttons {
    width: 95.3%;
    bottom: 0;
    background: #F2F2F2;
    padding: 10px;
    text-align: right;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top: 1px solid #E1E1E1;
    position: absolute;
  }
  .togetherjs-mobile-browser .togetherjs-modal {
    width: 74% !important;
    height: 50% !important;
    margin: 20% 12% !important;
  }
  .togetherjs-mobile-browser .togetherjs-mobile-browser .togetherjs .togetherjs-modal {
    width: 76% !important;
    margin-left: 1%;
    height: 94%;
    margin-top: 1%;
    top: 0;
    left: 0;
    height: 41%;
    margin: 20% 11%;
  }
  .togetherjs-mobile-browser .togetherjs-modal-wide section.togetherjs-buttons {
    width: 97.4% !important;
  }
}
@media (max-width: 480px) {
  .togetherjs-mobile-browser .togetherjs .togetherjs-window {
    width: 96%;
    margin-left: 0;
    height: 82%;
    margin-top: 0%;
    z-index: 10003 !important;
    top: 20%;
    left: -2px;
  }
  .togetherjs-mobile-browser .togetherjs .togetherjs-window #togetherjs-chat-messages {
    width: 105%;
  }
  .togetherjs-mobile-browser .togetherjs .togetherjs-window .togetherjs-close {
    display: none;
  }
  .togetherjs-mobile-browser .togetherjs .togetherjs-window #togetherjs-chat-messages {
    height: 62%;
    top: -37px;
  }
  .togetherjs-mobile-browser #togetherjs-chat-input-box {
    width: 94% !important;
    bottom: 0px;
    position: fixed;
  }
  .togetherjs-mobile-browser .togetherjs-timestamp {
    padding: 8px 15px 0px 10px !important;
  }
  .togetherjs-mobile-browser input[type='text'],
  .togetherjs-mobile-browser input[type='number'],
  .togetherjs-mobile-browser textarea {
    font-size: 16px !important;
  }
}