@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans Mono'), local('DroidSansMono'), url(/res/fonts/droidsansmono.woff) format('woff');
}
body {
  background-color: #000;
  color: #0f0;
  font-family: "Droid Sans Mono", monospace;
  font-size: 12pt;
  margin: 0;
  padding: 0;
}
.online-only {
  display: initial;
}
.offline-only {
  display: none;
}
body.offline .online-only {
  display: none;
}
body.offline .offline-only {
  display: initial;
}
.home {
  font-size: 8pt;
}
a {
  color: #0f0;
  text-decoration: none;
  border-bottom: 1px dotted;
}
li {
  margin: 0.5em 0;
}
th a {
  border-bottom: none;
}
h1 {
  font-size: 150%;
}
h2 {
  font-size: 130%;
}
h3 {
  font-size: 110%;
}
form {
  margin: 0;
  padding: 0;
}
form label {
  display: block;
}
form div.row {
  margin: 0 0 1em 0;
}
form div.form-group {
  margin: 0 0 1em 0;
}
form .hint,
form .hint-block {
  display: inline-block;
  font-style: italic;
  font-size: 90%;
}
select:focus,
input:focus,
option {
  outline: none;
}
select option {
  color: #0f0;
  background-color: #000;
}
select {
  background: transparent;
  width: 250px;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + .fancy-input:before {
  content: "\f096";
  font-family: "FontAwesome";
  width: 20px;
  display: inline-block;
}
input[type="checkbox"]:checked + .fancy-input:before {
  content: "\f046";
}
input[type="radio"] {
  display: none;
}
input[type="radio"] + .fancy-input:before {
  content: "\f10c";
  font-family: "FontAwesome";
  width: 20px;
  display: inline-block;
}
input[type="radio"]:checked + .fancy-input:before {
  content: "\f111";
}
.textinput,
input[type="text"],
input[type="search"],
input[type="password"],
textarea,
select {
  background-color: #000;
  border: 1px solid #0c0;
  border-radius: 3px;
  padding: 5px;
  color: #0f0;
  font-family: inherit;
}
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background-color: #030;
  border: 1px solid #0c0;
  border-radius: 3px;
  padding: 5px 15px;
  color: #0f0;
  cursor: pointer;
  font-family: inherit;
  font-size: 80% !important;
}
.button[disabled="disabled"] {
  opacity: 0.5;
  pointer-events: none;
}
#wrap {
  position: relative;
  margin: 0 auto 0 auto;
  padding: 50px 0 0 0;
  width: 800px;
}
#footer {
  clear: both;
  margin: 10px 0 0 0;
  text-align: center;
}
#footer a {
  color: #0c0;
}
.trademarks {
  font-size: 90%;
}
.legal {
  margin-top: 50px;
}
/**
 *
 * Editor
 *
 */
#scrollbar-cover {
  height: 100%;
  background-color: #000;
  position: absolute;
  left: -999px;
  top: 0px;
  z-index: 1000;
}
#scrollbar-thumb {
  height: 10px;
  width: 2px;
  position: absolute;
  color: #0f0;
  left: -999px;
  background-color: #0f0;
  margin-left: 5px;
  top: 0px;
  z-index: 1001;
  display: none;
}
#editorwrap {
  width: 800px;
  padding: 5px 0;
  color: #0f0;
  background-color: #000;
  border-top: 1px solid #010;
  border-bottom: 1px solid #010;
  overflow: visible;
  font-size: 12pt;
}
#editor,
#preview {
  box-sizing: border-box;
  width: 800px;
  color: #0f0;
  background-color: #000;
  border: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  outline: none;
  resize: none;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-feature-settings: "liga" 0;
  -ms-font-feature-settings: "liga" 0;
  -moz-font-feature-settings: "liga" 0;
}
#preview {
  white-space: normal;
}
#editor:focus {
  outline: none;
}
#preview {
  position: absolute;
  display: none;
}
#preview table {
  border-collapse: collapse;
  border-spacing: 0;
}
#preview table td,
#preview table th {
  border: 1px solid;
  padding: 5px 10px;
}
.doc-list {
  color: #090;
  clear: both;
  padding: 10px 0 10px 0;
}
.doc-list table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
.doc-list table a {
  color: #090;
}
.doc-list th {
  text-align: left;
  font-weight: bold;
  background-color: #020;
  padding: 2px;
}
.doc-list td {
  padding: 2px;
}
#showextra {
  margin: 10px 0;
  float: left;
  font-size: 150%;
  line-height: 20px;
}
#showextra a {
  text-decoration: none;
  border-bottom: none;
}
#info-link {
  margin: 10px 0;
  line-height: 20px;
}
#account {
  margin: 10px 0;
  line-height: 20px;
}
#statusmsg1 {
  float: right;
  width: 275px;
  text-align: right;
  margin-top: 5px;
}
#file-operation-spinner {
  position: absolute;
  left: -20px;
  margin-top: 5px;
}
#file-modified-flag {
  position: absolute;
  left: -20px;
}
#toolbar {
  float: left;
  width: 385px;
  text-align: left;
  letter-spacing: -1px;
}
#toolbar a {
  outline: none;
}
#controls {
  margin-top: 5px;
  width: 800px;
}
.controls a {
  color: #090;
}
/**
 *
 * Dialogs
 *
 */
.dialog {
  position: absolute;
  top: 225px;
  left: 200px;
  width: 360px;
  background-color: #030;
  border: 1px solid #060;
  border-radius: 3px;
  padding: 30px 20px 20px 20px;
  z-index: 100;
  box-shadow: 0 0 10px 5px #000;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
}
.dialog header {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: inherit;
  line-height: 25px;
  padding: 0 20px;
  font-size: 14px;
}
.dialog header label {
  font-weight: bold;
}
.closebutton {
  position: absolute;
  top: 0px;
  right: 20px;
  text-decoration: none;
  border: none;
  outline: none;
}
.dialog .scrollable {
  padding: 0 36px 0 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
#search {
  width: 660px;
  height: 250px;
  left: 50px;
}
#search-results {
  position: absolute;
  top: 90px;
  left: 0;
  height: 210px;
  width: 660px;
}
#search-results .folders,
#move-results .folders {
  text-align: left;
}
#search-results .folders .button,
#move-results .folders .button {
  display: inline-block;
  white-space: nowrap;
  margin: 0.5em 0;
}
#search input[name="q"] {
  padding-right: 20px;
  /*margin-right: 10px;*/
}
#clear-search {
  text-decoration: none;
  border: none;
  margin-left: -20px;
  margin-right: 5px;
}
#move {
  left: 180px;
  width: 400px;
  height: 200px;
}
#move-results {
  position: absolute;
  top: 75px;
  left: 0;
  height: 125px;
  width: 400px;
}
#move .footer {
  position: absolute;
  top: 200px;
}
#about {
  font-size: 125%;
}
#pro-promo .special {
  font-size: 125%;
}
#help {
  left: 30px;
  width: 700px;
  padding-bottom: 0;
}
#help-text {
  position: relative;
  top: -5px;
  left: -20px;
  width: 700px;
  max-height: 400px;
}
.help-menu {
  column-count: 2;
}
.help-menu li {
  list-style: none;
  margin: 0;
  line-height: 2em;
}
#trash {
  height: 250px;
}
#trash-items {
  position: absolute;
  top: 100px;
  left: 0;
  height: 200px;
  width: 360px;
}
#rev {
  height: 250px;
}
#rev-preview {
  position: absolute;
  display: none;
  top: 70px;
  left: 0;
  height: 230px;
  width: 360px;
  font-size: 90%;
  white-space: pre-wrap;
}
#rev-items {
  position: absolute;
  top: 60px;
  left: 0;
  height: 240px;
  width: 360px;
}
#share-this {
  padding: 10px 0 0 0;
}
#exportform .documents .list {
  border: 1px solid;
  border-radius: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 200px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  list-style: none;
  padding: 0;
}
#exportform .documents .list li {
  padding: 0 5px;
  cursor: -webkit-grab;
  cursor: grab;
}
#exportform .documents .list li::before {
  content: "\f0c9";
  font-family: "FontAwesome";
  padding: 0 5px 0 0;
}
.help {
  font-size: 150%;
}
#prompt {
  z-index: 200;
}
#folder-menu {
  min-width: 125px;
  border: 1px solid;
  position: absolute;
  margin-top: -5px;
  margin-left: -5px;
  z-index: 200;
  display: none;
}
#folder-menu .folder {
  padding: 5px;
  border-bottom: 1px solid;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu ul li {
  margin: 0;
  padding: 0;
}
.menu ul li a {
  display: block;
  text-decoration: none;
  border: none;
  padding: 0.5em;
}
@keyframes overlay-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.6;
  }
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.6;
  width: 100%;
  height: 100%;
  z-index: 101;
  animation: overlay-fadein 0.5s linear;
}
/**
 *
 * Export
 *
 */
.service-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  font-size: 36px;
  padding: 6px;
  margin: 10px 5px;
  line-height: 1em;
  background-color: #fff;
  border-radius: 3px;
  overflow: hidden;
  border: none;
  outline: none;
}
.service-icon-small {
  width: 16px;
  background-color: #fff;
  border-radius: 3px;
  margin: 1px;
  padding: 1px;
  display: inline-block;
  position: relative;
  top: 3px;
}
body.pro .service-icon {
  margin: 10px 15px;
}
/**
 *
 * Thesaurus
 *
 */
#thesaurus {
  position: absolute;
  display: none;
  width: 200px;
  margin-left: -120px;
  border: 1px solid;
  border-radius: 5px;
  padding: 20px;
}
/**
 *
 * Utility
 *
 */
.floatright {
  float: right;
}
.floatleft {
  float: left;
}
.alignleft {
  text-align: left;
}
.alignright {
  text-align: right;
}
.aligncenter,
.center {
  text-align: center;
}
.flex-center {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
}
.error,
.errorMessage {
  color: #fc0;
  background-color: #430;
  padding: 5px;
  border-radius: 3px;
}
.error a,
.errorMessage a {
  color: #fc0;
}
.errorMessage {
  background-color: inherit;
}
.has-error .help-block {
  color: #000;
  background-color: #0f0;
  margin: 5px 0;
  padding: 5px;
  display: inline-block;
  border-radius: 3px;
  font-weight: bold;
}
.success {
  background-color: #030;
  padding: 5px;
  border-radius: 3px;
}
.big {
  font-size: 120%;
}
.small {
  font-size: 85%;
}
.tiny {
  font-size: 75%;
}
.divider {
  border-bottom: 1px solid #060;
  margin: 20px 0 20px 0;
}
.box {
  border: 1px dotted;
  border-radius: 3px;
  padding: 1em;
}
.clear {
  clear: both;
}
.dim {
  opacity: 0.5;
}
a.icon-button {
  border-bottom: none;
}
.hidden {
  display: none;
}
.progressbar {
  border: 1px solid #0f0;
  border-radius: 3px;
  width: 100%;
  height: 10px;
  background: url("../img/animated-overlay.gif") #090;
  opacity: 0.25;
  display: inline-block;
}
/**
 *
 * jQuery UI widgets
 *
 */
.ui-slider {
  position: relative;
  background: #090;
  border: 1px solid #0f0;
  height: 12px;
  width: 250px;
  margin: -10px 0 15px 0;
}
.ui-slider-handle {
  background: #000;
  border: 1px solid #0f0;
  position: absolute;
  height: 20px;
  width: 20px;
  top: -5px;
  margin-left: -10px;
}
.ui-corner-all {
  border-radius: 3px;
}
.ui-helper-hidden-accessible {
  display: none;
}
.ui-tooltip {
  position: absolute;
  padding: 5px;
  border: 1px solid;
  border-radius: 3px;
  z-index: 1000;
}
.ui-tooltip.created-at {
  white-space: nowrap;
}
/**
 *
 * Tabs
 *
 */
#tabs.ui-tabs {
  zoom: none;
  padding: 0;
  position: relative;
}
#tabs.ui-widget {
  font-family: inherit;
  font-size: inherit;
}
#tabs.ui-widget-content {
  border: none;
  background: none;
  color: inherit;
}
#tabs .ui-widget-content {
  color: #0f0;
}
#tabs ul.ui-widget-header {
  border: none;
  background: none;
  color: inherit;
  font-weight: inherit;
}
#tabs.ui-corner-all {
  border-radius: 0;
}
#tabs .ui-tabs-hide {
  display: none;
}
#tabs .ui-tabs-nav {
  margin: 0 1em;
  padding: 0;
}
#tabs .ui-tabs-nav li a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  font-size: 100%;
  font-weight: bold;
  color: #000;
  background-color: #0f0;
}
#tabs .ui-tabs-nav li,
#tabs .ui-tabs-active {
  display: inline-block;
  *display: inline;
  /* IE7 */
  list-style: none;
  border: 1px solid #0f0;
  padding-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #fff;
  font-weight: normal;
  color: inherit;
  margin: 0 5px 0 0;
  z-index: 1;
  text-align: center;
  top: 1px;
  border-bottom: 0 !important;
}
#tabs .ui-tabs-nav li a {
  border-bottom: none;
  outline: none;
}
#tabs .ui-tabs-nav li.ui-tabs-active a {
  color: #0f0;
  background-color: #000;
}
#tabs .ui-tabs-panel {
  border: 1px solid #0f0;
  border-radius: 3px;
  padding: 20px;
  overflow: hidden;
  clear: both;
}
/**
 *
 * Prefs
 *
 */
#prefssample {
  float: right;
  box-sizing: border-box;
  width: 360px;
  height: 500px;
  color: #0f0;
  background-color: #000;
  font-size: 10pt;
  overflow: hidden;
  outline: none;
}
fieldset {
  border: 1px solid;
  border-radius: 3px;
  margin: 0 0 20px 0;
}
fieldset legend {
  font-weight: bold;
}
#PrefsForm_fontsize_slider,
#PrefsForm_soundvolume_slider,
#PrefsForm_uifade_slider {
  width: 300px;
}
.swatch-container {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 0;
  border: 2px dotted;
  padding: 3px;
  opacity: 0.4;
}
.swatch-container.active {
  border: 2px dotted;
  opacity: 1;
}
#color-schemes {
  width: 350px;
}
.swatch-container:hover {
  cursor: pointer;
}
.swatch {
  width: 20px;
  height: 20px;
  float: left;
}
/**
 *
 * News
 *
 */
#news-link {
  position: absolute;
  right: 0;
  top: 30px;
  opacity: 0.5;
}
#news-link.new {
  opacity: 1;
  font-weight: bold;
}
.news-item h2 {
  font-size: 120%;
}
.news-item {
  border-bottom: 1px dotted #030;
}
.offline-notice {
  top: 30px;
  position: absolute;
  left: 400px;
  font-size: 120%;
  text-transform: uppercase;
}
/**
 *
 * Goals
 *
 */
#goal {
  position: absolute;
  left: 0;
  top: 25px;
  line-height: 25px;
  opacity: 0.5;
  z-index: 100;
}
#goal i.fa {
  padding-right: 20px;
}
#goal .menu {
  display: none;
  position: absolute;
  width: auto;
}
#goal .menu-button {
  display: inline-block;
}
#goal .menu-button:hover .menu {
  display: block;
}
#goal ul.menu {
  margin: 0;
  padding: 0;
  border: 1px solid;
  border-radius: 3px;
  background: #000;
}
#goal ul.menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
#goal ul.menu li:hover {
  list-style: none;
}
#goal ul.menu li a {
  display: block;
  padding: 0 10px;
  border-bottom: none;
}
#goal-data {
  display: none;
}
#goal-percentage {
  display: inline-block;
}
#goal-progress {
  margin-left: -18px;
}
#sessiongoal-progress {
  margin-left: -18px;
  margin-right: 30px;
}
#goal-progress .percentage {
  display: inline-block;
}
#goal-progress .thermometer {
  display: inline-block;
  position: relative;
  top: 2px;
  width: 202px;
  height: 10px;
  border: 1px dotted;
  border-radius: 5px;
}
#goal-progress .thermometer .mercury {
  display: inline-block;
  position: absolute;
  width: 0px;
  height: 8px;
  top: 1px;
  border-radius: 5px;
}
/**
 *
 * Donate
 *
 */
.donate-form {
  display: inline-block;
  vertical-align: top;
  margin: 0 25px;
}
.donate-form p {
  margin-top: 0;
  font-weight: bold;
}
/**
 *
 * Upgrade/Pro
 *
 */
body.buy-pro #wrap {
  position: relative;
  margin: 0 auto 0 auto;
  padding: 50px 10px;
  width: auto;
  min-width: 500px;
  max-width: 900px;
}
.buy-button {
  display: inline-block;
  margin: 1em 10px;
  width: 200px;
  vertical-align: top;
}
.buy-button button,
.buy-button a.button {
  font-weight: bold;
  font-size: 1em;
  margin: 0.5em 0;
  padding: 8px 15px;
  display: inline-block;
  position: relative;
}
.buy-button button.highlight,
.buy-button a.button.highlight {
  border: 5px solid;
  margin-top: 0;
}
.buy-button button:hover,
.buy-button a.button:hover {
  top: -2px;
  padding: 8px 16px;
}
.buy-button .description {
  font-size: 80%;
}
.buy-button .countdown {
  font-weight: bold;
}
.feature {
  margin: 1em 0;
  clear: both;
}
.feature label {
  font-weight: bold;
  display: block;
  margin: 2em 0 0.5em 0;
}
.feature .description {
  margin: 0;
}
.demo {
  display: block;
  border: 1px solid;
  border-radius: 3px;
  color: #0f0;
  margin: 1em auto;
  padding: 0;
}
.demo-button {
  font-weight: normal;
  padding: 5px;
  border: 1px solid;
  border-radius: 3px;
}
.review {
  text-align: center;
}
.review .quote {
  font-style: italic;
}
/**
 *
 * Redeem giftcode
 *
 */
body.gift .upgrade-link {
  display: none;
}
/**
 *
 * Welcome
 * 
 */
.welcome {
  padding: 10px;
}
.welcome #wrap {
  position: relative;
  margin: 0 auto 0 auto;
  padding: 50px 0 0 0;
  width: auto;
  min-width: 500px;
  max-width: 900px;
}
.welcome video {
  width: 100%;
  max-width: 840px;
}
.welcome .title {
  font-weight: normal;
}
.welcome .tagline {
  font-size: 1.2em;
  margin: 40px 0;
  line-height: 1.5em;
}
.welcome .register-button {
  font-size: 1em !important;
}
.welcome .benefits {
  margin: 50px 0;
}
.welcome .features {
  margin: 50px 0;
}
.welcome .pricing table {
  width: 50%;
}
@media screen and (max-width: 1024px) {
  .welcome .pricing table {
    width: 90%;
    box-sizing: content-box;
  }
}
.feature-table {
  width: 100%;
}
.feature-table td {
  padding: 5px;
}
.feature-table th {
  padding: 5px;
  font-size: 1.5em;
}
.feature-table th:first-child {
  text-align: left;
  width: 70%;
}
.feature-table tr:last-child td {
  font-weight: bold;
}
/**
 *
 * Choose login
 * 
 */
.chooselogin .panel {
  padding-left: 12px;
  border-left: 3px solid;
}
/**
 *
 * Welcome page
 * 
 */
.welcome #footer {
  display: none;
}
.welcome .show-when-done {
  display: none;
}
.welcome .content {
  font-size: 120%;
  text-align: center;
}
.welcome .type-this {
  text-shadow: 0 0 10px #0f0;
  position: relative;
  display: block;
}
.welcome #cursor {
  display: inline-block;
  border-left: 1px solid #0f0;
  width: 2px;
  height: 1em;
  margin-bottom: -4px;
  position: absolute;
}
.welcome #cursor.blink {
  visibility: hidden;
}
/**
 *
 * Landing page
 * 
 */
.landing #footer {
  display: none;
}
.landing .show-when-done {
  display: none;
}
.landing .content {
  font-size: 120%;
  text-align: center;
}
.landing .type-this {
  text-shadow: 0 0 10px #0f0;
  position: relative;
  display: block;
}
.landing #cursor {
  display: inline-block;
  border-left: 1px solid #0f0;
  width: 2px;
  height: 1em;
  margin-bottom: -4px;
  position: absolute;
}
.landing #cursor.blink {
  visibility: hidden;
}
/**
 *
 * Stats
 * 
 */
.chart {
  margin-bottom: 50px;
}
.streak i {
  display: inline-block;
  margin: 1px;
}
#social {
  margin: 1em 0;
  text-align: center;
}
#social > div {
  display: inline-block;
  margin: 0 10px;
}
#social .fb-like span {
  float: left;
}
/**
 *
 * Custom icons
 * 
 */
@font-face {
  font-family: 'icomoon';
  src: url('/res/fonts/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
[class^="custom-icon-"],
[class*=" custom-icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.custom-icon-drive:before {
  content: "\e600";
}
.custom-icon-dropbox:before {
  content: "\e601";
}
.custom-icon-evernote:before {
  content: "\e602";
}
.custom-icon-wordpress:before {
  content: "\e603";
}
.custom-icon-tumblr:before {
  content: "\e604";
}
.custom-icon-movabletype:before,
.custom-icon-mt:before {
  content: "\e605";
}
.custom-icon-livejournal:before {
  content: "\e606";
}
.custom-icon-typepad:before {
  content: "\e607";
}
.custom-icon-pdf:before {
  content: "\e608";
}
.custom-icon-txt:before {
  content: "\e609";
}
.custom-icon-markdown:before {
  content: "\e60a";
}
.custom-icon-plaintext:before {
  content: "\e60b";
}
.custom-icon-immersive-mode:before {
  content: "\e60c";
}
.custom-icon-epub:before {
  content: "\e60d";
}
.custom-icon-html5:before {
  content: "\e60e";
}
/**
 *
 * Stripe Elements
 *
 */
.StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  background-color: white;
}