html {
  font-size: 100%;
  font-family: sans-serif;
  height: 100%;
}
body {
  background-color: #FFF;
  margin: 0;
  padding: 0;
  height: 100%;
}
/* Generic {{ */
.container.folded .header + * {
  display: none;
}
.clicked {
  color: yellow;
  transition: color 400ms;
}
[data-method] {
  cursor: pointer;
}
/* }} */
#templates {
  display: none;
}
#statusbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 1rem;
  width: 100%;
  font-size: .5rem;
  background-color: #000;
  color: #FFF;
  text-align: right;
  z-index: 1003;
}
#statusbar > * {
  color: #888;
  padding: 2px .5rem;
}
#messagebar {
  position: fixed;
  top: -2rem;
  left: 0;
  width: 100%;
  min-height: 2.5rem;
  padding: .5rem;
  z-index: 1002;
  color: white;
  font-weight: bold;
  background-color: transparent;
  transition: top .5s, background-color .5s;
}
#messagebar.info, #messagebar.error {
  top: 1rem;
}
#messagebar.info {
  background-color: #0F0;
}
#messagebar.error {
  background-color: #F00;
}
body.error #statusbar .error {
  color: #F00;
}
body.net #statusbar .onoff {
  color: #0F0;
}
#menu {
  position: fixed;
  z-index: 999;
  top: 1rem;
  padding: 0;
  height: 100%;
  width: 11.5rem;
  background-color: #EEE;
  color: #FFF;
  transition: margin .5s ease-in-out, background-color .5s;
  transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
body.menu-left #menu {
  left: 0;
  margin: 0 0 0 -9.5rem;
}
body.menu-right #menu {
  right: 0;
  margin: 0 -9.5rem 0 0;
}
#menu .slider {
  width: 2rem;
  height: 100%;
  background-color: rgba(255, 255, 255, .5);
}
#menu.show .slider {
  background-color: #BBB;
  transition: background-color .5s;
}
body.menu-left #menu .slider {
  margin-left: 9.5rem;
  transition: margin .5s ease-in-out;
}
body.menu-right #menu .slider {
  margin-right: 9.5rem;
}
#menu .scrollbar {
  position: relative;
  width: calc(2rem - 2px);
  border-width: 1px;
  border-style: solid;
  color: #080;
  z-index: 1000;
  pointer-events: none;
}
body #statusbar .syncInProgress {
  position: fixed;
  right: 3.3rem;
}
body.sync #statusbar .syncInProgress {
  color: #FFF;
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
#menu .onoff {
  color: #888;
}
#menu .menuOnline,
body.online #menu .menuOffline {
  display: none;
}
body.online #menu .menuOnline {
  display: inline;
}
body.online #menu .onoff {
  color: #0F0;
}
body.menu-left #menu .scrollbar {
  left: 0;
  transition: left .5s ease-in-out;
  transition-timing-function: cubic-bezier(0.5, -0.25, 0.5, 1.25);
}
body.menu-right #menu .scrollbar {
  right: 0;
  transition: right .5s ease-in-out;
  transition-timing-function: cubic-bezier(0.5, -0.25, 0.5, 1.25);
}
body.menu-right #menu.show .scrollbar {
  right: 8.5rem;
}
#menu .content {
  float: right;
  line-height: 3em;
  margin: 3rem 2.5rem 3rem 0;
}
@media (max-height: 320px) {
  #menu .content {
    line-height: 2.2em;
  }
}
body.menu-right #menu .content {
  margin: 0.66rem 0.5rem;
}
body.menu-left #menu.show {
  margin-left: -1rem;
  background-color: #000;
}
body.menu-right #menu.show {
  margin-right: -1rem;
  background-color: #000;
}
#menu .content > p {
  text-align: right;
  font-weight: bold;
  display: table-row;
}
#menu .content > p > * {
  vertical-align: middle;
  padding-right: .4rem;
}
#menu a.button {
  padding: 20px 20px;
}
#menu .content .inspect {
  color: #FFFFFF;
  text-decoration: none;
}
body.menu-left #menu .content .icon-chevron-right,
body.menu-right #menu .content .icon-chevron-left {
  display: none;
}
#menu .content label.onoff {
  margin-left: -10px;
}
[data-tile] {
  margin-top: 1rem;
  padding-top: 4em;
  display: none;
  max-width: 35rem;
  min-height: 100%;
  transition: transform .5s ease-in-out;
  transition-timing-function: cubic-bezier(0.5, -0.25, 0.5, 1.25);
  overflow: hidden;
}
[data-tile] > header, [data-tile] > * > header {
  margin: -1rem -0.5rem 1rem -3rem;
  padding: 0.2rem 1rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  /*position: sticky;*/
  position: fixed;
  top: 2rem;
  width: 100%;
  z-index: 1001;
}
@media (min-width: 78rem) {
  [data-tile] > header, [data-tile] > * > header {
    width: 37rem;
  }
}
[data-tile] > header + *, [data-tile] > * > .body {
  transform: translate(0, 0);
  transition: transform .5s ease-in-out;
  transition-timing-function: cubic-bezier(0.5, -0.25, 0.5, 1.25);
}
body.menu [data-tile] > header + *, body.menu [data-tile] > * > .body {
  transform: translate(9rem, 0);
}
body.menu .popup[data-tile] > header + *, body.menu .popup[data-tile] > * > .body {
  transform: translate(0, 0);
}
[data-tile] header h2 {
  margin: 0.5rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
[data-tile] header h2 > a {
  font-size: 1.6rem;
  padding: 0.5rem .5rem 0.5rem 0;
  margin-right: .5rem;
  border-style: outset;
  border-color: #888;
  border-width: 0 1px 0 0;
}
[data-tile] header h2 .center {
  display: inline-block;
  overflow: hidden;
  width: calc(100% - 6rem);
  text-overflow: ellipsis;
}
[data-tile] > header h2 > .right, [data-tile] > * > header h2 > .right {
  padding: .5rem;
  border-width: 0;
}
.container header h2 > a.right {
  border-width: 0 0 0 1px;
  padding: 0 0 0 1rem;
}
body.menu-left [data-tile] {
  padding-left: 2.5rem;
  padding-right: 0.5rem;
}
body.menu-right [data-tile] {
  padding-left: 0.5rem;
  padding-right: 2.5rem;
}
body.popup {
  background-color: #BBB;
}
body.popup .shown {
  opacity: 0.3;
}
/*
.popup[data-tile] {
  position: absolute;
  top: 12%;
  left: 25%;
  width: 50%;
  overflow: auto;
  border: 2px solid white;
  border-radius: 0.5rem;
  background-color: #444;
  color: #FFF;
  opacity: 1;
  display: block;
  box-shadow: 0 0 1rem #000;
  padding: 0.5rem !important;
}
*/
.popup[data-tile] {
  position: absolute;
  top: 0;
  transition: left .5s, opacity .5s;
  /*left: 42rem;*/
  left: 0rem;
  opacity: 0;
  width: 35rem;
  display: block;
  background-color: inherit;
}
@media (min-width: 78rem) {
  [data-tile] {
    border-width: 0 1px;
    border-style: solid;
    border-color: #888;
  }
}
body.popup [data-tile] > header, body.popup [data-tile] > * > header {
  width: 36rem;
}
body.hosted .ifInstalled, body.installed .ifHosted {
  display: none;
}
#list {
  margin: 0;
  padding: 0;
}
#list .content,
#list .toolbar,
#list .articleMenu {
  display: none;
}
#list li.read {
  color: #444;
}
#articleShowTile h3 {
  margin-top: 0;
}
#articleShowTile .toolbar,
#articleShowTile .articleMenu {
  display: block;
}
#list .content + .toolbar {
  margin-top: 2rem;
}
#articleShowTile .articleActions .alternate {
  display: none;
}
#articleShowTile .hasAlternates .articleActions .alternate {
  display: inline;
}
#articleShowTile .articleMenu {
  position: fixed;
  top: 1rem;
  right: 0;
  padding: .7rem;
  width: 1.5rem;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 1);
  color: #000;
  z-index: 1000;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 .5rem;
  border-style: solid;
  border-color: #888;
  box-shadow: 0 0 .5rem #888;
}
.popup[data-tile] .articleMenu {
  left: calc(100vw - 6.9rem);
  z-index: 5000;
  background-color: red;
}
#articleShowTile .articleMenu > p {
  position: fixed;
  background-color: rgba(255, 255, 255, .9);
  margin: -0.7rem;
  padding: .8rem;
}
#articleShowTile .articleMenu.folded {
  color: white;
}
#articleShowTile .articleMenu.folded > p {
  background-color: rgba(255, 255, 255, .5);
  color: black;
}
#articleShowTile .articleMenu .articleActions {
  transition: margin .3s ease-in-out, color .3s ease-in-out;
  margin-top: 3.5rem;
}

#articleShowTile .articleMenu.folded .articleActions {
  margin-top: calc(-100vh);
}

#articleShowTile .content .note {
  padding: 10px;
  display: block;
  float: left;
}
#articleShowTile .content > .notes,
#articleShowTile .content > .alternates,
#articleShowTile .tabMeta > .tags {
  display: table;
  border-collapse: separate;
  border-spacing: 1rem .5rem;
  vertical-align: middle;
}
#articleShowTile .content > .alternates {
  background-color: #444;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 5rem;
  position: absolute;
  top: 0;
}
#articleShowTile .tabMeta .tags * {
  padding: 2px;
  vertical-align: middle;
}
#articleShowTile .tabMeta .tags .tag {
  display: table-cell;
  background-color: yellow;
  border-radius: 5px;
  margin: 0px 5px;
  box-shadow: -5px 5px 5px #888;
}
#articleShowTile .tabMeta .url {
  margin: 0;
}
#articleShowTile .tabMeta .date {
  margin: 0;
  font-style: italic;
}
#articleShowTile .compose {
  display: none;
}
#articleShowTile [data-flags*=",editable,"] .compose {
  display: inline;
}
#articleShowTile ul.tabs {
  list-style-type: none;
}
#articleShowTile ul.tabs li {
  display: inline;
}
#articleShowTile ul.tabs li.tab-notes {
  display: none;
}
#articleShowTile .hasNotes ul.tabs li.tab-notes {
  display: inline;
}
#articleShowTile.tab-content ul.tabs li.tab-content a,
#articleShowTile.tab-notes ul.tabs li.tab-notes a,
#articleShowTile.tab-meta ul.tabs li.tab-meta
{
  font-weight: bold;
}
#articleShowTile .content,
#articleShowTile .tabNotes,
#articleShowTile .tabMeta {
  display: none;
}
#articleShowTile.tab-content .content,
#articleShowTile.tab-notes .tabNotes,
#articleShowTile.tab-meta .tabMeta
{
  display: block;
}
#articleShowTile .tabNotes > div {
  border: 1px solid #888;
  border-radius: .33rem;
  margin: 1rem;
  padding: 1rem;
  background-color: #F0F0F0;
}
#articleShowTile .tabNotes,
#articleShowTile .tabMeta {
  margin: 2rem 0;
}
#main .filters {
  font-size: 1rem;
}
#main .filters fieldset {
  width: calc(100% - 5rem);
}
#main .filters a,
.toolbar a {
  padding: .4em;
}
#main .filters .delete,
#main.edit .filters a {
  display: none;
}
#main.edit .filters .edit,
#main.edit .filters .delete {
  display: inline;
}
#main .delitem {
  display: none;
  margin-right: 1rem;
}
#main.edit .delitem {
  display: block;
  float: left;
  padding: 0 1rem 0 .5rem;
}
#list > li, #feedsList > li {
  max-width: 35em;
  margin: auto;
  border-color: #888;
  border-width: 0 0 1px 0;
  border-style: solid;
  overflow: hidden;
}
#main > .filters {
  margin-top: -1em;
}
#main > .filters fieldset {
  display: inline;
}
#list > li h2 span {
  display: none;
}
#list > li h2 span.title,
#list > li.hasNotes h2 .hasNotes,
#list > li[data-tags*=",archive,"] h2 .isArchive,
#list > li[data-tags*=",feed,"] h2 .isFeed,
#list > li[data-tags*=",star"] h2 .isStar
{
  display: inline;
}
#list > li[data-tags*=",archive,"],
#list > li[data-tags*=",feed,"] {
  display: none;
}
#main.archives .filters .archive,
[data-tags*=",archive,"] .archive,
#main.feeds .filters .feed,
[data-tags*=",feed,"] .feed,
#main.stars .filters .star,
[data-tags*=",star,"] .star {
  color: yellow;
}
#main.archives #list > li[data-tags*=",archive,"],
#main.feeds #list > li[data-tags*=",feed,"] {
  display: block;
}
#main.stars #list > li:not([data-tags*=",star,"]) {
  display: none;
}
#main.stars #list > li[data-tags*=",star,"] {
  display: block;
}
/* Hide URL of article without url */
#list > li[data-url*="#"] .content .url, #list > li[data-url*=""] .content .url {
  display: none;
}
#list h2 .icon-star {
  color: yellow;
  text-shadow: 0 0 1px #000;
}
#list > li > h2, #feedsList > li > h2 {
  margin: 0.66rem 0;
  font-size: 1.2rem;
}
#list > li > h2 > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
#articleShowTile .content img {
  max-width: 100%;
}
#list > li.hideLeft,
#list > li.showLeft {
  transform: translateX(-100%);
}
#list > li.hideRight,
#list > li.showRight {
  transform: translateX(100%);
}
#list a.action-icon:before {
  background-color: #000000;
  border-radius: 5px;
  margin: -7px 0 0 -40px;
}
#list a.action-icon {
  margin: 20px;
  padding: 0 20px;
}
/*
#list > li.public {
  border-color: #AFA;
}
#list > li.private {
  border-color: #FAA;
}
#list .text {
  margin: 40px;
  white-space: pre-wrap;
}
*/
#list .content pre {
  white-space: pre-wrap;
}
.hidden {
  display: none !important;
}
.shown {
  display: inherit;
}
#articleEditTile > form ,
#settings > form {
  max-width: 600px;
  margin: auto;
}
#tagList {
  list-style-type: none;
  padding: 0;
}
#tagList li {
  border-color: #888;
  border-width: 0 0 1px 0;
  border-style: solid;
  padding: 1rem .5rem;
}
#articleEditTile.article .url,
#articleEditTile.url .article {
  display: none;
}
/** Settings {{ **/
[data-tile].settings .container {
  border: 1px solid #888;
  border-radius: 2px;
  margin: .5rem 0;
}
[data-tile].settings .container > .header {
  padding: 0.01rem;
}
[data-tile].settings .container > .header > * {
  margin: 0.5rem;
}
.container .header .left {
  display: inline-block;
  width: calc(100% - 4rem);
}
#settingsAlarm {
  text-align: center;
}
#settingsAlarm p {
  margin: .5rem;
}
body.fxos.installed #settingsProxy {
  display: none;
}
/** }} **/
/** Credits {{ **/
#credits .title {
  text-align: center;
}
#credits .title img {
  border-radius: 50%;
  background-color: #0F0;
}
/** Credits }} **/
#auth {
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 10001;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#authFrame {
  height: 100%;
  width: 100%;
  border: 0;
}
#feedsList, #feedDetail ul {
  padding: 0;
}
#feedsList li, #feedDetail li {
  list-style-type: none;
  padding: .5rem 0;
  border-bottom: 1px solid #888;
}
#feedDetail li .title {
  padding: 0;
  margin: 0;
  font-weight: bold;
}
#feedDetail li .updated {
  padding: 0;
  margin: 0;
  font-style: italic;
}
.textareaLength {
  position: relative;
  top: -1.5rem;
  left: calc(100% - 2rem);
  color: #444;
}
/** Console {{ **/
#debugLog {
  white-space: pre-wrap;
  border: 1px solid #888;
  border-radius: 2px;
  padding-left: 2rem;
}
#debugLog > p {
  margin: 0;
  padding: 0;
  text-indent: -2rem;
}
#debugLog .debug   { background-color: transparent; color: black; font-weight: bold;}
#debugLog .info    { background-color: green; color: white; font-weight: bold;}
#debugLog .warning { background-color: orange; color: white; font-weight: bold;}
#debugLog .error   { background-color: red; color: white; font-weight: bold;}
/** Console }} **/
/** Settings }} **/
/** Fonts **/
a[class*="icon-"] {
  color: inherit;
  text-decoration: none;
}
[class*="icon-"] {
  font-size: 1.6em;
}
fieldset.compact [class*="icon-"] {
  font-size: 1em;
}
iframe[seamless], iframe[seamless="*"]:not([seamless="false"]):not([seamless="no"]) {
  border:none;
  width:auto;
  height:auto;
  padding: 0px;
  background-color: transparent;
  overflow:visible;
  overflow-y:visible;
  overflow-x:visible;
}
#tooltip {
  width: 10rem;
  padding: .5rem;
  color: black;
  background: yellow;
  border: 2px solid #000;
  border-radius: 10px;
  position: absolute;
  z-index: 2000;
  display: none;
}
#tooltip:before {
  content: "";
  border-width: 0 5px 10px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
  width: 0;
  height: 0;
  display: block;
  position: relative;
  bottom: 20px;
  margin: 0 auto;
}
@keyframes pointer {
  0% { transform: scale(0.1); opacity: 0; }
  1% { transform: scale(0.15); opacity: 0.8; }
  100% { opacity: 0; transform: scale(1); }
}
#pointer {
  position: absolute;
  z-index: 2000;
  width: 3rem;
  height: 3rem;
  display: none;
  border: 1rem solid red;
  box-shadow: 0 0 1rem yellow;
  border-radius: 50%;
  background-color: transparent;
  animation: pointer 1s infinite linear;
}
#help {
  position: fixed;
  width: 50%;
  top: 25%;
  left: 25%;
  background-color: #FFF;
  border: 3px solid black;
  box-shadow: 0 0 .5rem #000;
  padding: .5rem;
  border: 3px black;
  border-radius: .5rem;
  box-shadow: 0 0 1rem #888;
  font-weight: bold;
  display: none;
  z-index: 2000;
}
#help .content {
  padding-bottom: 1rem;
}
#help .toolbar {
  text-align: center;
  padding: 0 .7rem;
}
/** Buttons **/
button {
  display: block;
  width: 100%;
  margin: 5px 0;
  padding: 7px;
  font-size: 1rem;
  font-weight: bold;
  color: #444;
  border: 1px solid #888;
  border-radius: 2px;
}
p.col2 {
  display: flex;
}
p.col2 button {
  width: 49%;
  display: inline;
  margin: .33rem;
}
p.float {
  clear: both;
}
p.float button {
  width: 45%;
  display: block;
  float: left;
  margin: .33rem;
}
fieldset {
  border: 1px solid #888;
  border-radius: 3px;
}
fieldset.inline {
  border-width: 0;
  padding: 0px;
}
fieldset.inline > p {
  margin: 5px 0;
  border: 1px solid #888;
  border-radius: 2px;
  display: table;
  width: 100%;
  background-color: #FFF;
}
fieldset.inline > p > * {
  display: inline;
  margin: 0;
  padding: 5px;
  width: auto;
  height: 2rem;
  background: #FFF;
  color: #333;
  display: table-cell;
  vertical-align: middle;
}
fieldset.inline.compact > p > * {
  padding: 2px;
  height: 1.2rem;
  background: #FFF;
}
fieldset.inline > select {
  width: 100%;
  border: 1px solid #AAA;
  border-radius: 5px;
  padding: 0.33rem;
}
fieldset.inline.text label {
  border-width: 0px;
  background-color: #EEE;
  width: 3rem;
  max-width: 5rem;
  overflow: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
}
fieldset.inline.check label,
fieldset.inline.text input {
  border-width: 0px;
  width: calc(100% - 3.5em);
}
fieldset.inline input:focus + button {
  color: #888;
}
fieldset.inline input[type="checkbox"],
fieldset.inline input[type="radio"] {
  margin: 15px
}
fieldset.inline button {
  padding: 5px 0;
  border-width: 0px;
  color: transparent;
}
fieldset.inline > textarea {
  border: 1px solid #888;
  border-radius: 2px;
  width: 100%;
}
input[type="range"] {
  width: 90%;
  margin: auto;
}
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
	content: "\e600";
}
.icon-star:before {
	content: "\e601";
}
.icon-star-empty:before {
	content: "\e602";
}
.icon-ok:before {
	content: "\e603";
}
.icon-remove:before {
	content: "\e604";
}
.icon-zoom-in:before {
	content: "\e605";
}
.icon-zoom-out:before {
	content: "\e606";
}
.icon-cog:before {
	content: "\e607";
}
.icon-home:before {
	content: "\e608";
}
.icon-tag:before {
	content: "\e609";
}
.icon-tags:before {
	content: "\e60a";
}
.icon-pencil:before {
	content: "\e60b";
}
.icon-chevron-left:before {
	content: "\e60c";
}
.icon-chevron-right:before {
	content: "\e60d";
}
.icon-chevron-up:before {
	content: "\e60e";
}
.icon-chevron-down:before {
	content: "\e60f";
}
.icon-info-sign:before {
	content: "\e610";
}
.icon-question-sign:before {
	content: "\e611";
}
.icon-plus:before {
	content: "\e612";
}
.icon-minus:before {
	content: "\e613";
}
.icon-exclamation-sign:before {
	content: "\e614";
}
.icon-reorder:before {
	content: "\e615";
}
.icon-trash:before {
	content: "\e616";
}
.icon-off:before {
	content: "\e617";
}
.icon-repeat:before {
	content: "\e618";
}
.icon-refresh:before {
	content: "\e619";
}
.icon-magic:before {
	content: "\e61a";
}
.icon-fullscreen:before {
	content: "\e61b";
}
.icon-cut:before {
	content: "\e61c";
}
.icon-eraser:before {
	content: "\e61d";
}
.icon-inbox:before {
	content: "\e61e";
}
.icon-unlink:before {
	content: "\e61f";
}
.icon-wrench:before {
	content: "\e620";
}
.icon-info:before {
	content: "\e621";
}
.icon-question:before {
	content: "\e622";
}
.icon-exclamation:before {
	content: "\e623";
}
.icon-sun:before {
	content: "\e624";
}
.icon-moon:before {
	content: "\e625";
}
.icon-flag:before {
	content: "\e626";
}
.icon-bookmark:before {
	content: "\e627";
}
.icon-ban-circle:before {
	content: "\e628";
}
.icon-lock:before {
	content: "\e629";
}
.icon-share:before {
	content: "\e62a";
}
.icon-comment:before {
	content: "\e62b";
}
.icon-comments:before {
	content: "\e62c";
}
.icon-rss:before {
	content: "\e62d";
}
/** encoding:utf-8 **/

/* RESET */
#remotestorage-widget {
    text-align: left;
}
#remotestorage-widget input,
#remotestorage-widget button {
    font-size: 11px;
}
#remotestorage-widget form input[type=email] {
    margin-bottom: 0;  /* HTML5 Boilerplate */
}
#remotestorage-widget form input[type=submit] {
    margin-top: 0;  /* HTML5 Boilerplate */
}
/* /RESET */

#remotestorage-widget, #remotestorage-widget * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#remotestorage-widget {
    position: absolute;
    right: 10px;
    top: 10px;
    font: normal 16px/100% sans-serif !important;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    cursor: default;
    z-index: 10000;
}

#remotestorage-widget .rs-bubble {
    background: rgba(80, 80, 80, .7);
    border-radius: 5px 15px 5px 5px;
    color: white;
    font-size: 0.8em;
    padding: 5px;
    position: absolute;
    right: 3px;
    top: 9px;
    min-height: 24px;
    white-space: nowrap;
    text-decoration: none;
}

#remotestorage-widget .rs-bubble-text {
    padding-right: 105px;
    /* make sure the bubble doesn't "jump" when initially opening. */
    min-width: 182px;
}

#remotestorage-widget .rs-action {
    cursor: pointer;
}

/* less obtrusive cube when connected */
#remotestorage-widget.remotestorage-state-connected .rs-cube,
#remotestorage-widget.remotestorage-state-busy .rs-cube {
	opacity:.3;
	-webkit-transition: opacity .3s ease;
	-moz-transition: opacity .3s ease;
	-ms-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}
#remotestorage-widget.remotestorage-state-connected:hover .rs-cube,
#remotestorage-widget.remotestorage-state-busy:hover .rs-cube,
#remotestorage-widget.remotestorage-state-connected .rs-bubble:not(.rs-hidden) + .rs-cube {
	opacity:1 !important;
}

#remotestorage-widget .rs-backends {
    position: relative;
    top: 5px;
    right: 0;
}

#remotestorage-widget .rs-cube {
    position: relative;
    top: 5px;
    right: 0;
}

/* pulsing animation for cube when loading */
#remotestorage-widget .rs-cube.remotestorage-loading {
    -webkit-animation:remotestorage-loading .5s ease-in-out infinite alternate;
    -moz-animation:remotestorage-loading .5s ease-in-out infinite alternate;
    -o-animation:remotestorage-loading .5s ease-in-out infinite alternate;
    -ms-animation:remotestorage-loading .5s ease-in-out infinite alternate;
    animation:remotestorage-loading .5s ease-in-out infinite alternate;
}
@-webkit-keyframes remotestorage-loading { to{opacity:.7} }
@-moz-keyframes remotestorage-loading { to{opacity:.7} }
@-o-keyframes remotestorage-loading { to{opacity:.7} }
@-ms-keyframes remotestorage-loading { to{opacity:.7} }
@keyframes remotestorage-loading { to{opacity:.7} }


#remotestorage-widget a {
    text-decoration: underline;
    color: inherit;
}

#remotestorage-widget form {
    margin-top: .7em;
    position: relative;
}

#remotestorage-widget form input {
    display: table-cell;
    vertical-align: top;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    color: white;
    outline: none;
    line-height: 1.5em;
    height: 2em;
}
#remotestorage-widget form input:disabled {
    color: #999;
    background: #444 !important;
    cursor: default !important;
}

#remotestorage-widget form input[type=email]:focus {
    background: #223;
}
#remotestorage-widget form input[type=email] {
    background: #000;
    width: 100%;
    height: 26px;
    padding: 0 30px 0 5px;
    border-top: 1px solid #111;
    border-bottom: 1px solid #999;
}
#remotestorage-widget button:focus,
#remotestorage-widget input:focus {
    box-shadow: 0 0 4px #ccc;
}

#remotestorage-widget form input[type=email]::-webkit-input-placeholder {
    color: #999;
}
#remotestorage-widget form input[type=email]:-moz-placeholder {
    color: #999;
}
#remotestorage-widget form input[type=email]::-moz-placeholder {
    color: #999;
}
#remotestorage-widget form input[type=email]:-ms-input-placeholder {
    color: #999;
}

#remotestorage-widget form input[type=submit] {
    background: #000;
    cursor: pointer;
    padding: 0 5px;
}
#remotestorage-widget form input[type=submit]:hover {
    background: #333;
}

#remotestorage-widget .rs-info-msg {
    font-size: 10px;
    color: #eee;
    margin-top: 0.7em;
    white-space: normal;
}

#remotestorage-widget .rs-info-msg.last-synced-message {
    display: inline;
    white-space: nowrap;
    margin-bottom: .7em
}

#remotestorage-widget .rs-info-msg a:hover,
#remotestorage-widget .rs-info-msg a:active {
    color: #fff;
}

#remotestorage-widget button img {
    vertical-align: baseline;
}
#remotestorage-widget button {
    border: none;
    border-radius: 6px;
    font-weight: bold;
    color: white;
    outline: none;
    line-height: 1.5em;
    height: 26px;
    width: 26px;
    background: #000;
    cursor: pointer;
    margin: 0;
    padding: 5px;
}
#remotestorage-widget button:hover {
    background: #333;
}

#remotestorage-widget .rs-bubble button.connect {
    display: block;
    background: none;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 1;
    /* increase clickable area of connect button */
    margin: -5px;
    padding: 10px;
    width: 36px;
    height: 36px;
}
#remotestorage-widget .rs-bubble button.connect:not([disabled]):hover {
    background: rgba(150,150,150,.5);
}
#remotestorage-widget .rs-bubble button.connect[disabled] {
    opacity: .5;
    cursor: default !important;
}
#remotestorage-widget .rs-bubble button.rs-sync {
    position: relative;
    left: -5px;
    bottom: -5px;
    padding: 4px 4px 0 4px;
    background: #555;
}
#remotestorage-widget .rs-bubble button.rs-sync:hover {
    background: #444;
}
#remotestorage-widget .rs-bubble button.rs-disconnect {
    background: #721;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 4px 0 4px;
}
#remotestorage-widget .rs-bubble button.rs-disconnect:hover {
    background: #921;
}

#remotestorage-widget .remotestorage-error-info {
    color: #f92;
}
#remotestorage-widget .remotestorage-reset {
    width: 100%;
    background: #721;
}
#remotestorage-widget .remotestorage-reset:hover {
    background: #921;
}

#remotestorage-widget .rs-bubble .content {
    margin-top: 7px;
}

#remotestorage-widget pre {
    user-select: initial;
    -webkit-user-select: initial;
    -moz-user-select: text;
    max-width: 27em;
    margin-top: 1em;
    overflow: auto;
}
#remotestorage-widget .rs-centered-text{
    text-align: center;
}
#remotestorage-widget .rs-bubble.rs-hidden {
    padding-bottom: 2px;
    border-radius: 5px 15px 15px 5px;
}

#remotestorage-widget .rs-error-msg{
    min-height: 5em;
}

.rs-bubble.rs-hidden .rs-bubble-expandable {
    display: none;
}
.remotestorage-state-connected .rs-bubble.rs-hidden{
    display: none;
}

.remotestorage-connected {
    display: none;
}
.remotestorage-state-connected .remotestorage-connected {
    display: block;
}
.remotestorage-initial {
    display: none;
}
.remotestorage-state-initial .remotestorage-initial {
    display: block;
}
.remotestorage-error {
    display: none;
}
.remotestorage-state-error .remotestorage-error {
    display: block;
}
.remotestorage-state-authing .remotestorage-authing {
    display: block;
}
.remotestorage-state-offline .remotestorage-connected,
.remotestorage-state-offline .remotestorage-offline{
    display: block;
}
.remotestorage-unauthorized {
    display: none;
}
.remotestorage-state-unauthorized .rs-bubble.rs-hidden{
    display: none;
}
.remotestorage-state-unauthorized .remotestorage-connected,
.remotestorage-state-unauthorized .remotestorage-unauthorized {
    display: block;
}
.remotestorage-state-unauthorized .rs-sync{
    display: none;
}

.remotestorage-state-busy .rs-bubble.rs-hidden{
   display: none;
}
.remotestorage-state-busy .rs-bubble{
    display: block;
}
.remotestorage-state-busy .remotestorage-connected{
  display: block;
}
.remotestorage-state-authing .rs-bubble-expandable{
    display: none;
}




/* Default {{ */
.header,
[data-tile] header,
[data-tile] > * > header {
  background-color: #E66000;
  color: white;
}
#menu .scrollbar {
  background-color: rgba(230, 96, 0, 0.3);
  border-color: #F80;
}
body.online #menu .scrollbar {
  background-color: #F80;
}
fieldset.inline > p:hover {
  border-color: #f97c17;
  box-shadow: 0 0 5px #f97c17;
}
/* }} */
/* Green {{ */
body.themeGreen .header,
body.themeGreen [data-tile] > header,
body.themeGreen [data-tile] > * > header {
  background: linear-gradient(to bottom,  #1AFAA5,  #20F47A);
  color: white;
}
body.themeGreen #menu .scrollbar {
  background-color: rgba(0, 255, 0, .3);
  border-color: #080;
}
body.themeGreen.online #menu .scrollbar {
  background-color: #0F0;
}
body.themeGreen fieldset.inline > p:hover {
  border-color: #0F0;
  box-shadow: 0 0 5px #0F0;
}
/* }} */
/* Blue {{ */
body.themeBlue .header,
body.themeBlue [data-tile] > header,
body.themeBlue [data-tile] > * > header {
  background: #007EB2;
  color: white;
}
body.themeBlue #menu .scrollbar {
  background-color: rgba(0, 126, 178, .3);
  border-color: #007EB2;
}
body.themeBlue.online #menu .scrollbar {
  background-color: #007EB2;
}
body.themeBlue fieldset.inline > p:hover {
  border-color: #007EB2;
  box-shadow: 0 0 5px #007EB2;
}
/* }} */
/* Red {{ */
body.themeRed {
  color: #EEE;
  background-color: #222;
}
body.themeRed button,
body.themeRed .header,
body.themeRed [data-tile] > header,
body.themeRed [data-tile] > * > header {
  background: radial-gradient(ellipse farthest-corner, #aa0000 0%, #000000 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  color: white;
}
body.themeRed #menu .scrollbar {
  background-color: rgba(255, 0, 0, .7);
  border-color: #800;
}
body.themeRed.online #menu .scrollbar {
  background-color: #F00;
}
body.themeRed.online fieldset.inline > p:hover {
  border-color: #F00;
  box-shadow: 0 0 5px #F00;
}
body.themeRed fieldset.inline > p:hover {
  border-color: #F00;
  box-shadow: 0 0 5px #F00;
}
/* }} */