// Variables
@bd-overlay: "../img/bd1.png";
@sans-fonts:Lucida Grande, Lucida Sans Unicode, Lucida Sans, Verdana, sans-serif;
@serif-fonts:Palatino Linotype, Palatino, Book Antiqua, Garamond, Times New Roman, Times, serif;
@monospace-fonts:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;

// Mobiles

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust:none;
  }
}

// Noisy backgrounds

.bkg(@color, @overlay:'../img/nop.png') {
  background:@color;
  background:
    url("@{overlay}") top center no-repeat,
    url(../img/ui/noise.png) center center repeat,
    @color;
}
.bkg-v(@top, @bottom, @overlay:'../img/nop.png') {
  @base: (@top + @bottom) / 2;
  .bkg-v-base(@top, @bottom, @base, @overlay);
}
.bkg-v-base(@top, @bottom, @base, @overlay:'../img/nop.png') {
  background:@base;
  background:
    url("@{overlay}") top center no-repeat,
    url(../img/ui/noise.png) center center repeat,
    -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom)) repeat-x,
    @bottom;
  background:
    url("@{overlay}") top center no-repeat,
    url(../img/ui/noise.png) center center repeat,
    -moz-linear-gradient(-90deg, @top, @bottom) repeat-x,
    @bottom;
  background:
    url("@{overlay}") top center no-repeat,
    url(../img/ui/noise.png) center center repeat,
    -o-linear-gradient(-90deg, @top, @bottom) repeat-x,
    @bottom;
}

// Reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body { line-height: 1; min-width:960px }
ol, ul { list-style: none outside }
blockquote, q { quotes: none }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a, a:visited { color:#444 }
a:hover { color: #222 }
input { vertical-align: middle }

// Some very-very commons

h1 {
  font-size:1.56em;
  margin:.75em 0;
}
h2 {
  font-size:1.27em;
  margin:.5em 0;
}
h3 {
  font-size:1.11em;
  margin:.35em 0;
}
.hidden, .hp { display:none }
.centered { text-align:center }
.emphasized { font-style:italic }
.left-align { text-align:left }
.right-align { text-align:right }
.smallpad { padding:8px }
.pad { padding:16px }
.sidepad {
  padding-left:16px;
  padding-right:16px;
}
.toppad { padding-top: 16px }
.bottompad { padding-bottom: 16px }
.leftpad { padding-left:16px }
.rightpad { padding-right:16px }
.left-margin { margin-left:16px }
.right-margin { margin-right:16px }
.left-stroke { border-left:4px solid #ddd }
.right-stroke { border-right:4px solid #ddd }
.relative { position: relative }

.nopad {
  margin-left:-16px;
  margin-right:-16px;
}
.nomargin { margin:0 }
.left-float { float:left }
.right-float { float:right }
.clear { clear:both }
hr.clear {
  clear:both;
  margin:0;
  border:0;
  padding:0;
}
.nowrap { white-space:nowrap }

.placeholder {
  margin:16px auto;
  text-align:center;
  font-size:.85em;
}
.loading {
  .placeholder;
}

.baseline-inlines {
  vertical-align:baseline;
  span, code, em, strong, a, mark, ins, del, b, i, s, u, tt {
    vertical-align:baseline;
  }
}

.inplace {
  color:#444;
  text-decoration:none;
  &:hover { text-decoration:underline }
}
a.hollow {
  text-decoration:none;
  color:#555;
  &:hover { color:#222 }
}
.no-items {
  font-style:italic;
  font-size:.85em;
  color:#777;
  &.highlight {
    color: #fff;
    text-shadow:0 1px 1px rgba(0,0,0,.5);
  }
}
.highlight {
  color: #fff;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
}
.bevel {
  color:#444;
  text-shadow:0 -1px 1px rgba(255,255,255,.5);
}
.frame { border:1px solid #aaa }
.lay { margin: .75em 0 }
hr.sep {
  clear:both;
  border:0;
  margin:16px 0;
}
.smooth-group {
  &:first-child {
    border-top-left-radius:8px;
    border-top-right-radius:8px;
  }
  &:last-child {
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
  }
}

pre {
  background: #eef7ee;
  border: 1px solid #ccddcc;
  border-width: 1px 0;
  padding: 8px;
  overflow-x:auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap !important;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  text-shadow:none;
  code {
    font-size:12px;
    display: block;
    border:0;
    padding:0;
    background:transparent;
  }
}

.subtle, .subtle:visited {
  color:#666;
  font-size:.8em;
}

.red-asterisk {
  color:#a00;
  font-weight:bold;
  font:2em @serif-fonts;
  text-decoration:none;
}

.ea-reflect(@depth, @amount) {
  -webkit-box-reflect: below @depth
    -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(transparent),
        color-stop(@amount, transparent),
        to(rgba(255,255,255,.75))
    );
}
.ea-reflect(@depth) {
  .ea-reflect(@depth, .5);
}

// Basic colors

.bkg-main { .bkg(#f7f7f0) }

.snow { .bkg(#e0e0e0) }
.snow-gr { .bkg-v(#fff, #e0e0e0) }
.pnl-snow {
  .snow-gr;
  color:#444;
  text-shadow:0 1px 1px #fff;
  a { color:#444 }
}
.bd-snow { .bkg-v(#fff, #e0e0e0, @bd-overlay) }

.ghost { .bkg(#ccccc0) }
.ghost-gr { .bkg-v(#eeeee0, #ccccc0) }
.pnl-ghost {
  .ghost-gr;
  color:#444;
  text-shadow:0 1px 1px #fffff0;
  a { color:#444 }
}
.bd-ghost { .bkg-v(#eeeee0, #ccccc0, @bd-overlay) }

.silver { .bkg(#999990) }
.silver-gr { .bkg-v(#ccccc7, #999990) }
.pnl-silver {
  .silver-gr;
  color:#444;
  text-shadow:0 1px 1px #fffff0;
  a { color:#444 }
}
.bd-silver { .bkg-v(#ccccc7, #999990, @bd-overlay) }

.gold { .bkg(#ccaa77) }
.gold-gr { .bkg-v(#ddd7b0, #a08f60) }
.pnl-gold {
  .gold-gr;
  color:#444;
  text-shadow:0 1px 1px #fffff0;
  a { color:#444 }
}
.bd-gold { .bkg-v(#ddd7b0, #a08f60, @bd-overlay) }

.obsidian { .bkg(#333) }
.obsidian-gr { .bkg-v(#444, #333) }
.pnl-obsidian {
  .obsidian-gr;
  color:#fffff0;
  text-shadow:0 -1px 1px #222;
  a { color:#fffff0 }
}
.bd-obsidian { .bkg-v(#444, #333, @bd-overlay) }

@lime: #669933;
.lime { .bkg(#477101) }
.lime-gr { .bkg-v(#7fb707, #477101) }
.pnl-lime {
  .lime-gr;
  color:#fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  a { color: #cec }
}
.bd-lime { .bkg-v(#7fb707, #477101, @bd-overlay) }

@lemon: #eedd66;
.lemon { .bkg(#cc9944) }
.lemon-gr { .bkg-v(#ffee99, #cc9944) }
.pnl-lemon {
  .lemon-gr;
  color:#333;
  text-shadow: 0 1px 1px #ffee99;
  a { color: #555 }
}
.bd-lemon { .bkg-v(#ffee99, #cc9944, @bd-overlay) }

@rose: #cc3333;
.rose { .bkg(#6f1414) }
.rose-gr { .bkg-v(#c24242, #6f1414) }
.pnl-rose {
  .rose-gr;
  color:#fff;
  text-shadow: 0 1px 1px #6f1414;
  a { color: #ecc }
}
.bd-rose { .bkg-v(#c24242, #6f1414, @bd-overlay) }

@indigo: #96d;
.indigo { .bkg(#63a) }
.indigo-gr { .bkg-v(#96d, #63a) }
.pnl-indigo {
  .indigo-gr;
  color:#fff;
  text-shadow: 0 1px 1px #5f146f;
  a { color: #f7e0f7 }
}
.bd-indigo { .bkg-v(#96d, #63a, @bd-overlay) }

@smoke: #778890;
.smoke { .bkg(#778890) }
.smoke-gr { .bkg-v(#99aab0, #778890) }
.pnl-smoke {
  .smoke-gr;
  color:#fafafa;
  text-shadow: 0 1px 1px #606677;
  a { color: #f5f9ff }
}
.bd-smoke { .bkg-v(#99aab0, #778890, @bd-overlay) }

@sand: #776;
.sand { .bkg(#776) }
.sand-gr { .bkg-v(#998, #776) }
.pnl-sand {
  .sand-gr;
  color:#f0f0e7;
  text-shadow: 0 1px 1px #553;
  a { color: #fff }
}
.bd-sand { .bkg-v(#998, #776, @bd-overlay) }

// Buttons

.ctl-link {
  display:inline-block;
  border-radius:8px;
  border-bottom:1px dotted #999;
  padding:4px 8px;
  text-decoration:none;
  span, strong, em, code, img { vertical-align: middle }
  color:#555;
  text-shadow: 0 1px 1px #fff;
  &:hover {
    color:#222;
  }
  img { margin-right: -4px }
}

.cmd-base(@top, @bottom) {
  @shd:darken(@bottom, 5%);
  display:inline-block;
  font-size:20px;
  line-height:1em;
  padding:12px 16px;
  border:0;
  cursor:pointer;
  color:@bottom;
  text-shadow:0 1px 1px #fff;
  text-decoration:none;
  border-radius: 4px;
  box-shadow:1px 1px 4px rgba(0,0,0,.75);
  .snow-gr;
  &:hover, &:active, &.active, &.current {
    color:#fff;
    .bkg-v(@top, @bottom);
    text-shadow:0 -1px 1px @shd;
  }
  &:active {
    padding:13px 16px 11px;
    box-shadow:1px 1px 4px rgba(0,0,0,.75),
               0 8px 16px rgba(0,0,0,.15) inset;
  }
  &.small {
    font-size:14px;
    padding:8px 12px;
    &:active { padding: 9px 12px 7px }
  }
}

.cmd-lime, .cmd-lime:visited {
  .cmd-base(#7fb707, #477105);
}
.cmd-rose, .cmd-rose:visited {
  .cmd-base(#c24242, #6f1414);
}
.cmd-smoke, .cmd-smoke:visited {
  .cmd-base(#99aab0, #778890);
}

.cmd-glossy {
  display:inline-block;
  font-size:20px;
  line-height:1em;
  padding:8px 16px;
  border:0;
  cursor:pointer;
  background:rgba(0,0,0,.05);
  border-radius:8px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.6);
  box-shadow:0 1px 0 rgba(255, 255, 255, 0.6) inset,
             0 1px 4px rgba(0, 0, 0, 0.6);
  text-decoration:none;
  &:hover {
    box-shadow:0 1px 0 rgba(255, 255, 255, 0.6),
               0 0 2px rgba(0, 0, 0, 0.6) inset;
  }
  &:active {
    padding:9px 16px 7px;
  }
  &.dark {
    color:#333;
    text-shadow:0 1px 1px rgba(255,255,255,.6);
  }
}

// Tags

.tag-base {
  border-radius: ~"24px/8px";
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  background:#fff;
  box-shadow: 0 0 16px rgba(0,0,0,.15) inset,
              0 1px 4px rgba(0,0,0,.5)
}

.tag-lime {
  .tag-base;
  color:@lime;
  text-shadow:none;
  &:hover {
    .lime-gr;
    color:#fff;
  }
}

// Close-link

.close-link {
  display:block;
  width:24px;
  height:24px;
  text-align:center;
  border:2px solid #fff;
  background:rgba(0,0,0,.8) url(../img/close.png) center center no-repeat;
  border-radius:32px;
  box-shadow:0 1px 3px rgba(0,0,0,.6);
  cursor:pointer;
}

// Forms

.submission {
  dt, dd, input, textarea, select { position:relative }
  dt { text-align: left }
  dd { margin: .15em 0 .5em }
  .descr {
    display:block;
    color:#777;
    text-align:right;
    font-size: 11px;
    text-shadow:none;
    &.left { text-align: left }
  }
  .field {
    position:relative;
    background:#fff;
    border:1px solid #aaa;
    font-size:20px;
    width:100%;
    padding:2px 0;
    outline:0;
    &[readonly] { background: #f0f0ee; color: #444 }
    &:focus, &:hover {
      background-color:#fafaf5;
      border:1px solid #aaa;
    }
    &.small {
      font-size:16px;
    }
    &.tiny {
      font-size:12px;
    }
    &.warn {
      text-indent:24px;
      background-image:url("../img/icons/16/warning.png");
      background-repeat:no-repeat;
      background-position:4px center;
    }
  }
  .ea-date-input {
    background:#fff url(../img/icons/24/calendar.png) 4px center no-repeat;
    text-indent:32px;
  }
  textarea {
    width:100%;
    min-width:100%;
    max-width:100%;
    background:#fff;
    border:1px solid #aaa;
    padding:2px 0;
    outline:0;
    margin:0;
    font:12px @monospace-fonts;
    resize:vertical;
    &:focus, &:hover {
      background:#fafaf5;
      border:1px solid #aaa;
    }
  }
  input[type=checkbox] { font-size:16px }
  label[for] { cursor:pointer }

  .timespan {
    display:inline-block;
    width: 72px;
    overflow: hidden;
    .descr { float:left }
  }
  input {
    &[type="number"] {width: 64px}
    &[type="checkbox"] {font-size: 20px}
    &[disabled] {
      opacity:.5;
    }
  }
  table.fieldset {
    width:100%;
    border-collapse: collapse;
    td {
      width:49%;
      padding:4px;
      &:first-child { text-align: right }
      &:last-child { text-align: left}
      label {
        display:block
      }
    }
  }

}

.submission.inline-edit {
  .descr {
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    opacity:0;
    &.visible { opacity: 1 }
    &.inline-editing {
      opacity:1;
      padding-right:64px;
    }
  }
  .field.inline-edit, textarea.inline-edit {
    background:transparent;
    border:1px solid transparent;
    border-bottom:1px dashed #ddd;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    &:not([readonly="readonly"]):focus, &:not([readonly="readonly"]):hover {
      background:#fafaf5;
      border:1px solid #aaa;
    }
  }
  textarea.inline-edit {
    border:1px dashed #ddd;
  }
}

.submits {
  text-align:center;
  margin:1em 0 0;
  &.float {
    float:right;
    margin:0 0 8px;
  }
  &.left-align { text-align:left }
  &.right-align { text-align:right }
  &.nomargin { margin:0 }
}

.embed-field {
  background: #eef7ee;
  border: 1px solid #ccddcc;
  font:12px @monospace-fonts;
}

// Inline editing

.ea-inline-edit-wrapper {
  position:relative;
  .ea-inline-edit-controls {
    position:absolute;
    bottom:-24px;
    right:8px;
    height:24px;
    width:48px;
    span {
      display:inline-block;
      width:24px;
      height:24px;
      cursor:pointer;
    }
    .ea-inline-edit-save {
      background:url("../img/icons/24/accept.png");
    }
    .ea-inline-edit-cancel {
      background:url("../img/icons/24/delete.png");
    }
  }
}

// Colorbox

#colorbox, #cboxOverlay, #cboxWrapper {
  position:absolute;
  top:0;
  left:0;
  z-index:9999;
}
#cboxOverlay {
  position:fixed;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.25)
}
#cboxLoadedContent {
  position:relative;
  background:#fff;
  overflow:hidden;
  padding:16px;
  border-radius:8px;
  max-width:800px;
  .bkg(#f7f7f0);
  box-shadow: 0 0 2px rgba(0,0,0,.3),
              0 0 24px rgba(0,0,0,.1) inset;
}
#cboxWrapper {
  background:rgba(255,255,255,.15);
  box-shadow:0 2px 8px #000;
  border-radius:16px;
  padding:16px;
}
#cboxWrapper #ea-notices, #cboxWrapper #ea-notices li {
  box-shadow:none;
}
#cboxClose {
  position:absolute;
  top:-24px;
  right:-8px;
  text-indent:-9999px;
  &::after {
    content:'×';
    text-indent:0;
    display:block;
    width:24px;
    height:24px;
    font-size:16px;
    font-weight:bold;
    line-height:24px;
    text-align:center;
    border-radius:32px;
    border:2px solid #fff;
    background:rgba(0,0,0,.6);
    text-shadow:none;
    box-shadow:1px 1px 3px rgba(0,0,0,.5);
    color:#fff;
    cursor:pointer;
  }
}

// JQuery Tools Date Input

#calroot {
  position:absolute;
  .pnl-ghost;
  z-index:10000;
  width:232px;
  border-radius:4px;
  padding:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}

#calhead {
  overflow:hidden;
  height:24px;
  text-align:center;
  margin-bottom:8px;
}

#caltitle, #calnext, #calprev {
  font-size:16px;
  display:inline-block;
  text-align:center;
}

#caltitle {
  width:176px;
  line-height:24px;
  color:@lime;
}

#calnext, #calprev {
  font-size:20px;
  width:24px;
  line-height:24px;
  cursor:pointer;
}

#calprev:after { content:'«' }
#calnext:after { content:'»' }

#calprev.caldisabled, #calnext.caldisabled {
  visibility:hidden;
}

#caldays {
  font-size:12px;
  height:16px;
}

#caldays span {
  display:block;
  float:left;
  width:32px;
  text-align:center;
}

#calweeks {
  background:#fff;
  border-radius:4px;
  padding:4px;

  .calweek {
    overflow:hidden;
    clear:both;
  }
  .calweek a {
    display:block;
    float:left;
    width:30px;
    height:20px;
    margin:1px;
    padding-bottom:2px;
    text-decoration:none;
    font-size:12px;
    line-height:24px;
    text-align:center;
    color:#333;
    border-radius:32px;
  }
  .calweek a:hover, .calfocus {
    background-color:rgba(0,0,0,.1);
  }
  a.caloff { color:#888 }
  a.caloff:hover { background-color:rgba(0,0,0,.1) }
  a.caldisabled {
    background-color:#efefef !important;
    color:#ccc !important;
    cursor:default;
  }

  #calcurrent {
    .pnl-lime;
    color:#fff;
  }
  #caltoday {
    .pnl-ghost;
    color:#000;
  }
}

// Notices

.notices, #ea-notices {
  list-style:none outside;
  box-shadow:0 0 4px rgba(0,0,0,.4);
  li {
    font-size:14px;
    text-align:left;
    padding:4px 8px;
    a {
      .inplace;
      color:#fff;
    }
    &.info { .pnl-lime }
    &.warn { .pnl-lemon }
    &.error { .pnl-rose }
    span, code, em, strong, a, mark, ins, del, b, i, s {
      vertical-align:baseline;
    }
  }
}

#ea-notices {
  position:fixed;
  bottom:0;
  z-index:100000;
  width:100%;
  li {
    a.hide {
      float:right;
      font-weight:bold;
      line-height:16px;
      font-size:16px;
      text-decoration:none;
      opacity:.75;
      color:#333;
      text-shadow:none;
      &:hover { opacity:.95 }
    }
  }
}

// Views

body {
  font:16px @sans-fonts;
  &.serif {
    font:16px @serif-fonts;
  }
}

// Modal layout

#ea-modal {
  position:relative;
  width: 480px;
  margin: 0 auto;
  text-align:center;
  &.wide {
    width:800px;
  }
  // Heading
  header {
    position:relative;
    background:url("../img/acorn.png") center center no-repeat;
    background-size:144px 144px;
    text-shadow:2px 2px 8px #333;
    font-weight:normal;
    font-size:64px;
    height:224px;
    a {
      .ea-reflect(-18px);
      display:block;
      width:100%;
      position:absolute;
      text-align:center;
      bottom:56px;
      z-index:100;
      color:#fff;
      text-decoration:none;
    }
  }
  // Frames, overlays
  #ea-modal-frame {
    position:relative;
    overflow:hidden;
    margin-top:-64px;
  }
  .slide {
    text-align:left;
  }
  // Fields
  h2 {
    font-size:22px;
    margin:0;
    margin-bottom:1em;
    color:#444;
  }
  hr {
    margin:1em 0;
  }
  .extra {
    text-align:right;
    a {
      .inplace;
      font-size:14px;
    }
  }
}

.ea-pwd-grid {
  td {
    vertical-align:bottom;
    padding:0 8px;
  }
}

// Profile layout

#ea-profile-view {
  text-align:left;
  .passport {
    .avatar {
      float:left;
      width:108px;
      margin:16px 0 16px 16px;
      .descr {
        text-align:left;
      }
      img {
        width:96px;
        height:96px;
        border:1px solid #aaa;
        padding:4px;
      }
    }
    .vcard {
      padding:16px;
      overflow:hidden;
    }
  }
}

// Top menu

.ea-top-menu {
  position:fixed;
  top:0;
  left:0;
  z-index:10000;
  height:32px;
  width:100%;
  min-width:960px;
  nav {
    ul {
      overflow:hidden;
      height:32px;
      li {
        float:left;
        a {
          display:block;
          font-size:14px;
          line-height:32px;
          padding:0 8px;
          text-decoration:none;
          &:hover {
            background: rgba(255,255,255,.1)
          }
        }
      }
    }
  }
  // appear on hover
  -webkit-transition:opacity .3s;
  -moz-transition:opacity .3s;
  opacity:.33;
  &.solid { opacity:.75 }
  &.hollow nav {
    opacity:0;
    -webkit-transition:opacity .3s;
    -moz-transition:opacity .3s;
  }
  &:hover, &:hover nav { opacity:1 }
}

// Identity bar

#ea-identity {
  position:fixed;
  top:0;
  right:0;
  z-index:10000;
  background:rgba(0,0,0,.5);
  height:40px;
  line-height:40px;
  text-align:right;
  white-space:nowrap;
  border-bottom-left-radius:8px;
  a { float:left }
  .username {
    overflow:hidden;
    text-decoration:none;
    color:#ddd;
    text-shadow:0 1px 1px rgba(0,0,0,.75);
    &:hover { color:#fff }
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:right;
    max-width:320px;
    padding:0 8px;
  }
  .glyph {
    width:40px;
    height:40px;
    position:relative;
    opacity:.85;
    &:hover { opacity:1 }
  }
  #ea-mail-indicator {
    background: url(../img/glyphs/32/envelope.png) center center no-repeat;
    &.new { background: url(../img/icons/32/yellow_mail.png) center center no-repeat; }
  }
  img {
    border-radius:4px;
    width:32px;
    height:32px;
    margin:0 4px 4px;
  }
}

#ea-notifications-count {
  position:absolute;
  top:8px;
  bottom:0;
  left:0;
  right:0;
  text-align:right;
  span {
    display:inline-block;
    vertical-align:top;
    text-decoration:none;
    color:#fff;
    text-shadow:none;
    background:rgba(196,32,32,1);
    box-shadow:0 1px 1px rgba(0,0,0,1);
    font-size:10px;
    line-height:10px;
    padding:2px 4px;
    border-radius:16px;
  }
}

.ea-notification {
  position:relative;
  * { vertical-align: baseline }
  &.new { z-index: 10 }
  &.new a {
    font-size:16px;
    background: #fff;
    color:#333;
    .icon {
      width:64px;
      height:64px;
    }
  }
  a {
    font-size:14px;
    padding:8px;
    background:#f7f7ee;
    display:block;
    color:#555;
    text-decoration:none;
    .icon {
      float:left;
      width:48px;
      height:48px;
      margin-right:8px;
    }
    .wrap { overflow:hidden }
    .h2 { font-weight:normal }
    p, h1, h2, h3, ul, ol, li { margin:8px 0 }
    &:hover {
      box-shadow:0 1px 4px rgba(0,0,0,.6);
    }
    blockquote, .blockquote {
      margin-left:0;
      text-indent:16px;
      &::before {
        font-size:64px;
        top:-24px;
        left:-16px;
      }
    }
  }
  .status {
    text-align:right;
    color:#777;
    font-size:12px;
    line-height:12px;
    font-style:italic;
  }
}

// Viewport layout

#ea-outer {
  margin:0 auto;
  width:960px;
  position:relative;
  z-index:1;
}

#ea-wrapper {
  padding:0 8px;
}

#ea-header {
  height:64px;
}

.ea-logo {
  position:relative;
  width:128px;
  height:64px;
  margin-left:16px;
  text-align:center;
  background:url(../img/acorn.png) top center no-repeat;
  background-size:64px 64px;
  a {
    position:absolute;
    top:32px;
    left:0;
    text-decoration:none;
    line-height:32px;
    font-size:32px;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
  }
  &.reflect a { .ea-reflect(0px) }
}

.ea-small-logo {
  position:absolute;
  width:128px;
  height:64px;
  text-align:center;
  background:url(../img/acorn.png) top center no-repeat;
  background-size:48px 48px;
  a {
    position:relative;
    top:8px;
    text-decoration:none;
    line-height:32px;
    font-size:24px;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
  }
}

.ea-top-nav {
  position:absolute;
  height:32px;
  top:-48px;
  left:160px;
  ul {
    list-style:none outside;
    padding:0 8px;
    font-size:0;
    text-align:center;
    li {
      margin:0 4px;
      display:inline-block;
      a {
        display:block;
        padding:0 8px;
        font-size:14px;
        line-height:32px;
        height:32px;
        overflow:hidden;
        text-decoration:none;
        color:#444;
        text-shadow:0 1px 1px rgba(255,255,255,.75);
        border-radius:32px;
        img {
          width:32px;
          height:32px;
        }
        span { vertical-align: baseline }
        &:hover {
          box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
                     0 1px 0 rgba(0,0,0,.2);
          background:rgba(255,255,255,.1);
        }
        max-width:216px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      &.active a, &.current a {
        box-shadow:0 1px 0 rgba(255, 255, 255, 0.2),
                   0 0 4px rgba(0, 0, 0, 0.4) inset;
        background:rgba(0,0,0,.1);
      }
    }
  }
  &.dark ul li a {
    color:#fff;
    text-shadow:0 1px 1px rgba(0,0,0,.5);
  }
}

#ea-footer {
  position:relative;
  font-size:12px;
  margin:16px 0;
  text-align:center;
  text-shadow:0 1px 1px rgba(255,255,255,.25);
  color:#444;
  a {
    text-decoration: none;
    color:#444;
    &:hover { color: #222 }
  }
  address { font-style:normal }
  &.dark, &.dark a {
    color:#fff;
    text-shadow:0 1px 1px rgba(0,0,0,.5);
  }
  .powered-by {
    span, a { vertical-align:baseline }
    a {
      color:#222;
      font:1.15em @serif-fonts;
      font-style:italic;
      &:hover {
        color:#000;
      }
    }
  }
  p, address, ul {
    margin:8px 0;
  }
}

#ea-viewport {
  position:relative;
  > .loading {
    font-size:2em;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
  }
}

.ea-grid {
  width:100%;
  &::after {
    content:'';
    display:block;
    clear:both;
  }
}

.w20 { float:left; width:20% }
.w25 { float:left; width:25% }
.w30 { float:left; width:30% }
.w33 { float:left; width:34% }
.w40 { float:left; width:40% }
.w50 { float:left; width:50% }
.w60 { float:left; width:60% }
.w66 { float:left; width:66% }
.w70 { float:left; width:70% }
.w75 { float:left; width:75% }
.w80 { float:left; width:80% }

// UI elements

.ea-main-frame {
  .bkg-main;
  overflow:hidden;
  color:#444;
  text-shadow:0 1px 1px #fff;
  box-shadow: 0 0 3px rgba(0,0,0,.4),
              0 0 24px rgba(0,0,0,.1) inset;
  &.top {
    border-top-left-radius:8px;
    border-top-right-radius:8px;
  }
  &.bottom {
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
  }
}

.ea-frame-clipped {
  background:rgba(0,0,0,.1);
  box-shadow:inset 0 0 4px rgba(0,0,0,.5);
  border-radius:16px;
  padding:16px;
}

.ea-frame-overlay {
  background:rgba(255,255,255,.25);
  box-shadow:0 2px 8px rgba(0,0,0,.5); //, inset 0 8px 0 rgba(255,255,255,.2);
  border-radius:16px;
  padding:16px;
}

.ea-frame-panel {
  box-shadow:0 1px 3px rgba(0,0,0,.5);
  padding:4px 8px;
}

.ea-frame-plastic {
  background:rgba(255,255,255,.25);
  box-shadow:0 0 3px rgba(0,0,0,.2),
             0 0 4px rgba(255,255,255,1) inset,
             0 0 8px rgba(255,255,255,1) inset,
             0 -8px 24px rgba(0,0,0,.05) inset;
  border-radius:8px;
  padding:8px;
}

.ea-fixed-nav {
  position:fixed;
  z-index:99999;
  bottom:16px;
  left:16px;
  > a {
    display:inline-block;
    text-decoration:none;
    background:rgba(0,0,0,.6);
    line-height:40px;
    padding:0 8px;
    border-radius:16px;
    border:2px solid #444;
    color:#fff;
    text-shadow:0 1px 1px #000;
  }
}

.ea-nav-bar {
  .ghost-gr;
  overflow:hidden;
  text-align:center;
  line-height:32px;
  height:32px;
  padding:4px 0;
  &.stroke {
    border:1px solid #aaa;
    border-width:1px 0;
    &.notop { border-top:0 }
    &.nobottom { border-bottom:0 }
  }
  &.top {
    border-top:0;
  }
  &.bottom {
    border-bottom:0;
  }
  &.small li {
    margin:0;
    a {
      font-size: 14px;
      padding:0 2px;
    }
  }
  h2 { margin: 0 }
  a {
    text-decoration: none;
    color:#444;
    &:hover { color:#222 }
  }
  li {
    vertical-align:top;
    display:inline-block;
    margin:0 2px;
    a {
      display:block;
      font-size:14px;
      line-height: 32px;
      height: 32px;
      text-align:center;
      text-decoration:none;
      border-radius:16px;
      overflow:hidden;
      padding:0 4px;
      text-shadow:0 1px 1px rgba(255,255,255,.5);
      img {
        width:32px;
        height:32px;
      }
      span { vertical-align: baseline }
    }
    &.active a, &.active a:hover, &.current a {
      background:rgba(255,255,255,.5);
      box-shadow:0 1px 0 rgba(255, 255, 255, 0.6),
                 0 0px 2px rgba(64, 64, 0, 0.6) inset;
    }
  }
  &.lime {
    .pnl-lime;
    li {
      a {
        color:#fff;
        text-shadow:0 1px 1px rgba(0,0,0,.5);
        &:hover {
          box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
                     0 1px 0 rgba(0,0,0,.2);
          color:#fff;
        }
      }
      &.active a, &.active a:hover, &.current a {
        background:rgba(0,0,0,.1);
        box-shadow:0 1px 0 rgba(255, 255, 255, 0.2),
                   0 0 4px rgba(0, 0, 0, 0.4) inset;
      }
    }
  }
  // TODO work out following ones if necessary
  &.sand {
    .pnl-sand;
  }
  &.obsidian {
    .pnl-obsidian;
  }
  &.snow {
    .pnl-snow;
    li a:hover {
      color:#000;
    }
    li.active a, li.active a:hover, li.current a {
      background:#fff;
      box-shadow:0 1px 0 rgba(255, 255, 255, 1),
                 0 0px 2px rgba(0, 0, 0, 0.6) inset;
    }
  }
}

.ea-quicknav {
  border:0;
  border-collapse:collapse;
  border-bottom:1px solid #ddd;
  background:#fff;
  width:100%;

  td {
    text-align:center;
    width:33%;
    &.ea-prev {text-align:left}
    &.ea-next {text-align:right}
    a {
      display:block;
      padding:8px;
      font-size:12px;
      color:#999;
      text-decoration:none;
    }
  }
}

.ea-slider {
  position:relative;
  overflow:hidden;
}

.ea-toolbox {
  margin:8px;
  h2 {
    .pnl-ghost;
    font-size:16px;
    height:32px;
    line-height:32px;
    margin:0;
    padding:0 8px;
    box-shadow:0 0 3px rgba(0,0,0,.6);
    border-radius:8px 8px 0 0;
  }
  ul {
    li {
      &:last-child a { border-radius: 0 0 8px 8px }
      a {
        display:block;
        padding:0 8px;
        line-height:32px;
        font-size:14px;
        text-decoration:none;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        color:#444;
        background:rgba(255,255,255,.75);
        box-shadow:0 0 2px rgba(0,0,0,.4);
        img {
          width:24px;
          height:24px;
        }
        &:hover {
          background:rgba(248,248,232,.75);
          box-shadow: 0 0 8px rgba(0,0,0,.1) inset,
                      0 0 3px rgba(0,0,0,.6);
        }
      }
      &.active a, &.current a {
        background:rgba(255,255,255,.75);
        color:@lime;
        text-shadow:0 1px 1px #fff;
      }
    }
  }
}

.ea-frameset {
  list-style:none outside;
  overflow:hidden;
  min-height:1px;
  li {
    display:none;
  }
}

.ea-input-grid {
  position:relative;
  td { padding:0 4px }
  td.top { vertical-align:top }
  td.bottom { vertical-align:bottom }
}

.ea-details {
  dt {
    color:#555;
    font-weight:bold;
  }
  dd {
    margin:.5em 0;
    line-height:1.5em;
    font-style:italic;
    &.nopad {
      padding:0;
      margin:.5em -16px;
    }
    code {
      font-style:normal;
      line-height:1.5em;
    }
  }
}

.ea-inline-menu {
  list-style: disc outside;
  > li {
    display:inline;
    &::before { content:' • ' }
    &:first-child::before { content:'' }
    > a { vertical-align: baseline }
  }
}

.ea-activity-completion-stats {
  overflow:hidden;
  .chart {
    float:left;
    width:70%;
  }
  .stats {
    float:right;
    width:30%;
  }
}

.ea-compact {
  li {
    overflow:hidden;
    .descr {
      color:#777;
      font-size:12px;
    }
    .ordinal {
      font:32px @monospace-fonts;
      font-weight:bold;
      color:#777;
    }
    input[type="radio"], input[type="checkbox"] {
      margin-left:18px;
    }
    .indicator {
      float:left;
      margin:8px;
    }
    .float { float:left }
    > a {
      display:block;
      overflow:hidden;
      font-size:16px;
      text-decoration:none;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
      border-radius:8px;
      padding:8px;
      color:#444;
      img {
        width:32px;
        height:32px;
      }
      &:hover {
        background:rgba(0,0,0,.05);
      }
    }
    p {
      line-height:1em;
      margin:.25em 0;
    }
    ul {
      border-left:1px dashed #ccc;
      margin-left:24px;
      padding-left:8px;
    }
    blockquote {
      margin-left:24px;
    }
  }
}

.ea-autocomplete {
  position:absolute;
  top:28px;
  left:0;
  z-index:100;
  width:320px;
  background:rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  border-radius:8px;
  overflow:hidden;
  .ea-search-result {
    margin:0;
    cursor:pointer;
    &.current {
      .pnl-lime;
      * {
        color:#fff;
        text-shadow: 0 -1px 1px #477101;
      }
    }
    &:first-child {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    &:last-child {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
}

.ea-search-hints {
  position:absolute;
  top:8px;
  right:12px;
  span, em, strong { vertical-align: baseline }
  a {
    .tag-lime;
    text-decoration: none;
    display:block;
    font-size:16px;
    padding:6px 12px;
  }
}

.ea-orderable {
  > li {
    cursor: move;
    border: 1px solid #aaa;
    padding: 0 8px;
    margin-bottom: 8px;
    line-height:48px;
    background: transparent url("../img/move-v.png") center right no-repeat;
    > img {
      width:32px;
      height:32px;
    }
    &:hover { background: #fff url("../img/move-v.png") center right no-repeat }
  }
}

.ea-breadcrumb {
  height:32px;
  overflow:hidden;
  border-bottom:1px solid #aaa;
  .snow-gr;
  li {
    position:relative;
    float:left;
    min-width:32px;
    max-width:172px;
    line-height:32px;
    text-align:center;
    border-radius:16px;
    border-right:1px solid #aaa;
    padding:0 12px;
    > a {
      display:block;
      color:#444;
      text-decoration:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      span {vertical-align:baseline}
    }
    &:last-child a, &.current a, &.active a { color:@lime }
    .icon {
      width:32px;
      height:32px;
    }
  }
  &.wide li {
    max-width:256px;
  }
  &.no-current li:last-child a { color: #444 }
  &.no-current li.active a { color: @lime }
}

.ea-tile {
  width:160px;
  display:inline-block;
  vertical-align:top;
  text-align:center;
  a {
    display:block;
    font:14px/1.5 @sans-fonts;
    border-radius:8px;
    text-decoration:none;
    padding:4px 0 8px;
    color:#444;
    &:hover { background:rgba(0,0,0,.05)}
  }
  img {
    display:block;
    margin:0 auto 8px;
  }
}

.ea-tiles {
  list-style:none outside;
  padding:0;
  li { .ea-tile }
}

.ea-letters {
  .ea-letterbox { margin-bottom:16px }
  margin-bottom: -16px
}

.ea-letterbox {
  position:relative;
  background:#fff;
  padding:16px;
  box-shadow:0 0 24px rgba(0,0,0,.1) inset,
             0 1px 4px rgba(0,0,0,.6);
  color:#555;
  &::after {
    content:'';
    position:absolute;
    z-index:-1;
    left:16px;
    right:16px;
    bottom:0;
    top:75%;
    box-shadow:0 0 24px rgba(0,0,0,.6);
    border-radius:~"160px / 8px";
  }
  .ea-api-elem { margin:0 }
  .controls {
    text-align:right;
    color:#555;
    a {
      color:@lime;
      text-decoration:none;
      font-size:14px;
      &:hover { text-decoration: underline; }
    }
  }
}

.ea-speech {
  overflow:hidden;
  padding:8px;
  .author {
    position:relative;
    z-index:20;
    float:left;
    margin:0 20px 0 0;
    padding-top:24px;
    &::before {
      content:'';
      background:#fff;
      box-shadow:0 1px 4px rgba(0,0,0,.6);
      position:absolute;
      top:32px;
      right:-4px;
      width:8px;
      height:8px;
      border-radius:8px;
    }
    &::after {
      content:'';
      background:#fff;
      box-shadow:0 1px 4px rgba(0,0,0,.6);
      position:absolute;
      top:16px;
      right:-28px;
      width:24px;
      height:24px;
      border-radius:24px;
    }
  }
  .wrap {
    position:relative;
    z-index:30;
    float:left;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.6);
    border-radius:16px;
    padding:8px;
    width:640px;
    textarea {
      border:1px dashed #ddd;
      background:transparent;
      border-radius:8px;
    }
    pre {
      font:12px @monospace-fonts;
      background:transparent;
      border:0;
      padding:0;
      margin:0;
    }
    a.elem-wrap {
      text-decoration: none;
    }
    .submits {
      margin:4px 0 0;
    }
    .status {
      text-align:right;
      color:#777;
      font-size:10px;
      font-style:italic;
    }
  }
  &.right {
    .wrap {
      float:right;
    }
    .author {
      float:right;
      margin:0 0 0 20px;
      &::before {
        left:-4px;
      }
      &::after {
        left:-28px;
      }
    }
  }
  &.new .wrap {
    background:#f7f7ee;
  }
}

table.ea-summary {
  width:100%;
  border-collapse:collapse;
  border:1px solid #ccc;
  border-width:1px 0;
  &.noborder { border: 0 }
  &.border { border-width: 1px }
  th {
    font-weight:normal;
    font-size: 14px;
    font-weight:bold;
    text-align: left;
    line-height:16px;
    padding:8px;
    color:#000;
    background:rgba(255,255,255,.5);
    &.right-align { text-align: right }
    &.centered { text-align: center }
  }
  thead tr {
    border-bottom:1px solid #ccc;
  }
  tbody tr {
    border-bottom:1px dashed #ccc;
    &:last-child { border: 0 }
  }
  td {
    color:#555;
    padding:8px;
    line-height:16px;
    &.icon {
      width:24px;
      padding:0 4px;
    }
    &.nowrap { white-space:nowrap }
    &.index {
      text-align:center;
      width:32px;
    }
    &.top { vertical-align:top }
    &.bottom { vertical-align:bottom }
    a { .inplace }
    .avatar { border-radius:8px }
  }
}

table.ea-chooser {
  width: 100%;
  td:first-child {
    width: 100px;
  }
}

.ea-frame-heading {
  .ghost-gr;
  margin:-16px -16px 16px;
  padding:0 8px;
  line-height:40px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  img {
    width:32px;
    height:32px;
  }
  a {
    text-decoration:none;
    color:#555;
    &:hover {
      color:#333;
    }
  }
}

.ea-file-upload {
  border:1px dashed #aaa;
  .placeholder {
    margin:0;
    line-height:48px;
    cursor:pointer;
    text-align:center;
    color:@lime;
  }
  &.ea-disabled {
    background:#eee;
    opacity:.5;
  }
}

.ea-file-upload-form {
  position:absolute;
  margin:0;
  padding:0;
  input[type="file"] {
    position:absolute;
    top:0;
    left:0;
    z-index:10000;
    cursor:pointer;
    opacity:0;
  }
}

.ea-file-upload-iframe {
  visibility:hidden;
  width:0;
  height:0;
}

.ea-search-input {
  -webkit-appearance: textfield;
  border-radius:16px;
  border:1px solid #aaa;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.15);
  padding:2px 8px;
}

.ea-date-input {
  padding-left:24px;
  background:#fff url(../img/icons/16/calendar.png) 4px center no-repeat;
}

.ea-removable {
  position:relative;
  .handle{
    position:absolute;
    top:4px;
    left:4px;
    cursor:pointer;
    &:after {
      content:'×';
      font-size:14px;
      font-weight:bold;
      line-height:14px;
      padding:0 4px 2px;
      border-radius:16px;
      border:2px solid #fff;
      background:rgba(0,0,0,.6);
      text-shadow:none;
      box-shadow:none;
      color:#fff;
    }
    &:hover:after {
      background:rgba(0,0,0,.8);
    }
  }
}

.ea-calendar {
  nav {
    .pnl-rose;
    table {
      width:100%;
      td {
        padding:0 12px;
        width: 33%;
        text-align:center;
        vertical-align:middle;
        line-height:48px;
        &:first-child { text-align:left }
        &:last-child { text-align:right }
      }
    }
    span, strong { vertical-align: baseline }
    strong {
      background:rgba(0,0,0,.2);
      padding:8px 16px;
      border-radius:24px;
      box-shadow:0 1px 0 rgba(255,255,255,.2),
                 0 -1px 0 rgba(0,0,0,.4);
      color:#fff7f7;
      text-shadow:0 1px 1px rgba(0,0,0,.5);
    }
    a {
      text-decoration: none;
      &:hover {
        color:#fff;
      }
    }
    &::after {
      content:'';
      display:block;
      height:4px;
      .pnl-ghost;
      border-bottom:1px solid #999;
    }
  }
  footer nav {
    td {
      line-height:32px;
      strong {
        background:transparent;
        box-shadow:none;
      }
    }
    &::after {
      display:none;
    }
  }
  > table {
    width:100%;
    border-collapse:collapse;
    th.weekday, td.day { width: 13.5% }
    text-shadow:none;
    th {
      background:#fff;
      text-align:center;
      font:14px/28px @serif-fonts;
      color:#777;
      border-bottom:1px solid #ccc;
    }
    td {
      text-align:center;
      vertical-align:middle;
      border:1px solid #ddd;
      font:16px/1em @serif-fonts;
      &.day {
        a {
          position:relative;
          display:block;
          text-decoration:none;
          color:#888;
          font-size:40px;
          line-height:64px;
          &:hover::after {
            content:'';
            display:block;
            position:absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:rgba(0,0,0,.05);
          }
        }
      }
      &.current {
        background:rgba(255,255,255,.75);
        a { color:#444 }
      }
      &.today a {
        color:@rose;
      }
      &:first-child { border-left: 0 }
      &:last-child { border-right: 0 }
      &.event-A a {
        background:url("../img/priority-a.png") center 0 no-repeat;
      }
      &.event-B a {
        background:url("../img/priority-b.png") center 0 no-repeat;
      }
      &.event-C a {
        background:url("../img/priority-c.png") center 0 no-repeat;
      }
      &.event-D a {
        background:url("../img/priority-d.png") center 0 no-repeat;
      }
    }
  }
}

.ea-cal-day {
  float:left;
  width:160px;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
  border-radius:8px;
  overflow:hidden;
  margin-right:16px;
  .daynumber {
    background:#fff;
    color:#444;
    box-shadow:0 0 24px rgba(0,0,0,.1) inset;
    font: 72px/120px @serif-fonts;
    text-align:center;
    &.today { color: @rose }
  }
  .month-year {
    .pnl-rose;
    text-align:center;
    a {
      text-decoration:none;
      line-height:32px;
      &:hover {
        color:#fff;
      }
    }
    &::before {
      content:'';
      display:block;
      height:4px;
      .pnl-ghost;
      box-shadow:0 0 3px rgba(0,0,0,.75);
    }
  }
}

#ea-cal-events {
  overflow:hidden;
  padding:4px 12px 8px;
  .create {
    float:right;
  }
  .events-list {
    clear:both;
    margin-top:32px;
    list-style:none outside;
    li {
      position:relative;
      box-shadow:0 0 24px rgba(0,0,0,.1) inset,
                 0 1px 4px rgba(0,0,0,.6);
      color:#555;
      padding:12px;
      margin:16px 0;
      background:#fff;
      &::after {
        content:'';
        position:absolute;
        z-index:-1;
        left:16px;
        right:16px;
        bottom:0;
        top:75%;
        box-shadow:0 0 24px rgba(0,0,0,.6);
        border-radius:~"160px / 8px";
      }
      .title {
        font:18px/1 @sans-fonts;
      }
      h3 {
        font-size:20px;
        font-weight:normal;
      }
      pre {
        font:12px @monospace-fonts;
        border:0;
        background:transparent;
        padding:0;
        margin:8px 0 0;
      }
      a.delete, .company-icon {
        position:absolute;
        top:-12px;
        right:-12px;
      }
      .priority {
        position:relative;
        top:-12px;
        left:-12px;
        height:24px;
        overflow:hidden;
        margin-bottom:-24px;
      }
      .priority::before {
        position:absolute;
        top:-28px;
        left:-24px;
        width:48px;
        height:48px;
        content:'';
        display:inline-block;
        border-radius:24px;
      }
      &.event-A .priority::before { .pnl-rose }
      &.event-B .priority::before { .pnl-indigo }
      &.event-C .priority::before { .pnl-lime }
      &.event-D .priority::before { .pnl-silver }
    }
  }
}

// Workshop

#ea-item-edit-pane-wrap {
  position:relative;
  overflow:visible;
  > .handle {
    position:absolute;
    cursor:pointer;
    bottom:-24px;
    right:0;
    width:24px;
    height:24px;
    background:#aaa url(../img/ui/tree_collapsed.png) center center no-repeat;
    border-bottom-left-radius:8px;
    &.collapsed {
      background:#aaa url(../img/ui/tree_expanded.png) center center no-repeat;
    }
  }
}

#ea-workshop-item-menu {
  .pnl-obsidian;
  width:auto;
  min-width:0;
  border-radius:0 0 8px 0;
  .ea-preview-nav {
    float:left;
  }
}

.ea-workshop-footer {
  border-top:1px solid #aaa;
  .pnl-ghost;
  .ea-quicknav {
    border: 0;
    background: transparent;
    a {
      color:#555;
      text-shadow:0 1px 0 #fff;
      &:hover { color:#222 }
    }
  }
}

td.ea-ctl-preview {
  .baseline-inlines;
  width:auto;
  overflow:hidden;
  max-width:200px;
}

.ea-elem-manager {
  overflow:hidden;
  border:1px solid #aaa;
  .ea-elems-list {
    list-style:none outside;
    li {
      position:relative;
      margin:4px;
      margin-left:24px;
      padding:8px;
      border: 1px solid #e0e0d0;
      background: rgba(255,255,250,.7);
      z-index:100;
      line-height:24px;
      &::after {
        content:'';
        display:block;
        position:absolute;
        width:32px;
        background:url(../img/move-v.png) center center no-repeat;
        top:0;
        bottom:0;
        left:-28px;
      }
      a, label, span {
        font-size:12px;
      }
      .ea-item-delete {
        float:right;
      }
      input[type="text"] {
        width:768px;
      }
      // prevent bugs with depth
      > * {
        position:relative;
        z-index:200;
      }
    }
  }
  .no-items {
    margin:16px;
  }
  .ea-item-add {
    .ctl-link;
    float:right;
    font-size:14px;
    margin:4px;
  }
  .field {
    font:11px @monospace-fonts;
    width:auto;
  }
  .indicator {
    margin:4px 4px 0 0;
  }
}

.ea-ctl-edit {
  .ctl-type {
    text-align:center;
    span, img {
      display:inline-block;
    }
  }
}

.ea-img-preview img {
  margin:16px;
  max-width:80%;
  border-radius:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}

.ea-objective-summary {
  margin-bottom:16px;
  &::after {
    content:'';
    display:block;
    clear:both;
  }
  .completion {
    float:right;
    width:280px;
    padding:8px;
    margin:8px;
    border:1px solid #ccddcc;
    background:#eef7ee;
    dt {
      font-weight:normal;
      font-size:14px;
      font-variant:small-caps;
    }
    dd {
      font-size:18px;
      margin-bottom:8px;
    }
  }
  .wrap {
    overflow:hidden;
    h2, h3, p { margin:0 }
  }
  .ea-objective-token {
    margin-right:4px;
  }
  h3 {
    font-size:18px;
    font-style:italic;
  }
  .title {
    padding-left:8px;
    line-height:1.2em;
  }
  .stats {
    margin-top:16px;
    margin-left:16px;
    border-left:1px dashed #ccc;
    padding-left:24px;
  }
  > a {
    line-height:32px;
    text-decoration:none;
  }
  > section {
    margin-left:2em;
  }
}

dl.stats {
  dt {
    font-size:15px;
    font-variant:small-caps;
    font-weight:normal;
    text-decoration:underline;
  }
  dd {
    padding:8px 8px 16px 24px;
    font-style:italic;
    font-size:1.2em;
  }
}

.ea-sticky-note {
  overflow:hidden;
  width:224px;
  height:224px;
  padding:8px;
  background:rgba(250,250,225,.9);
  box-shadow:0 3px 5px rgba(0,0,0,.5);
  -webkit-transition:-webkit-transform .3s;
  -webkit-transform:rotate(-4deg);
  -moz-transition:-moz-transform .3s;
  -moz-transform:rotate(-4deg);
  font-size:11px !important;
  text-align:left;
  color:#333;
  &.mini {
    width:160px;
    height:160px;
  }
  p { margin: .75em 0 }
  .ea-sticky-button {
    position:absolute;
    top:-8px;
    right:-8px;
    overflow:hidden;
    border-radius:32px;
    border:2px solid #fff;
    box-shadow:1px 1px 1px rgba(0,0,0,.5);
  }
}

.ea-thumbs {
  list-style:none outside;
  li {
    position:relative;
    display:inline-block;
    vertical-align:top;
    margin:8px 4px;
    &::before {
      content:'';
      display:block;
      position:absolute;
      z-index:2;
      box-shadow:0 0 12px rgba(0,0,0,.6);
      top:75%;
      left:8px;
      right:8px;
      bottom:0;
      border-radius:~"64px/8px";
    }
    > .wrap {
      position:relative;
      z-index:3;
      text-align:center;
      background:#fff;
      padding:8px;
      width:144px;
      box-shadow:0 1px 4px rgba(0,0,0,.4),
                 0 0 16px rgba(0,0,0,.1) inset;
    }
    &.current > .wrap {
      box-shadow:0 1px 4px rgba(0,0,0,.4),
                 0 0 16px rgba(0,0,0,.1) inset,
                 0 0 4px rgba(144,180,216,1),
                 0 0 32px rgba(144,180,216,.6) inset;
    }
    .preview {
      display:block;
      overflow:hidden;
      line-height:140px;
      max-height:140px;
      img {
        max-height:140px;
        max-width:140px;
      }
    }
    .controls {
      display:none;
      font-size:0;
      background:rgba(0,0,0,.4);
      position:absolute;
      padding:4px 4px 2px;
      top:-12px;
      right:-8px;
      border-radius:16px;
      border:2px solid #fff;
      box-shadow:0 1px 3px rgba(0,0,0,.4);
      > a {
        text-decoration:none;
      }
    }
    &:hover .controls { display:block }
    .embed {
      padding:2px 0;
      width:99%;
      font:12px @monospace-fonts;
      border:1px solid #eee;
      background:#fcfcf7
    }
  }
  &.select {
    .controls { display:block }
  }
}

.ea-vcs-name-status {
  margin:8px 0;
  padding:8px;
  border-radius:16px 0 0 16px;
  overflow:hidden;
  &.added { border-left:4px solid @lime }
  &.modified { border-left:4px solid @lemon }
  &.deleted { border-left:4px solid @rose }
  .name-status-obj {
    position:relative;
    cursor:default;
    padding:4px;
    border-radius:8px;
    overflow:hidden;
    &.not-item { opacity: .75 }
    > img {
      float:left;
      margin-right:4px;
    }
    .path {
      font:11px/1 @monospace-fonts;
    }
    .controls {
      display:none;
      position:absolute;
      top:4px;
      right:8px;
    }
    &:hover .controls { display: block }
  }
  &.hover .name-status-obj:hover { background: rgba(0,0,0,.05) }
}

.ea-vcs-commit-body {
  font:12px @monospace-fonts;
  border-width:1px;
  border-radius:8px;
}

.ea-vcs-diff {
  .hunk {
    margin:12px 0;
    position:relative;
    > .wrap {
      position:relative;
      background:#fff;
      padding:8px;
      z-index:3;
      box-shadow:0 1px 3px rgba(0,0,0,.4),
               0 0 16px rgba(0,0,0,.1) inset;
    }
    &::after {
      content:'';
      display:block;
      position:absolute;
      z-index:2;
      top:75%;
      bottom:0;
      left:8px;
      right:8px;
      border-radius:~"160px/8px";
      box-shadow: 0 0 8px rgba(0,0,0,.6);
    }
    del, ins, .del, .ins { text-decoration: none }
    del, .del { background: #f7d0d0 }
    ins, .ins { background: #d0f7d0 }
    &.plain > .wrap {
      font:12px/1 @monospace-fonts;
      white-space:pre-wrap;
    }
    &.plain-divs > .wrap > div {
      font:12px/1 @monospace-fonts;
      white-space:pre-wrap;
    }
    &.blocks {
      font:16px/1.5 @serif-fonts;
      > .wrap {padding:0}
      h3 { padding:8px }
      pre { background:transparent; border: 0 }
      .del, .ins {
        background:transparent;
        padding: 8px;
      }
      .del {
        border-left: 4px solid #f7d0d0;
        background: #fff7f7;
      }
      .ins {
        border-left: 4px solid #d0f7d0;
        background: #f7fff7;
      }
    }
  }
}

// Surveillance

.ea-cache-hit { color:@lime }
.ea-cache-miss { color:@rose }
.ea-query {
  font-size:11px;
  border-width:1px;
  border-radius:8px;
  margin:8px 0;
}

.ea-searchbox {
  font-size:12px;
  dd {
    margin: 0 0 4px;
  }
  label {
    color:#555;
  }
}

// Learning

.ea-enrollments-group {
  border-right:1px solid #ccc;
  border-radius:16px;
  padding-right:16px;
  > .title {
    text-align:right;
    font-size:12px;
    line-height:12px;
    color:#aaa;
    margin:0;
  }
}

// Generic content styles

.content-output {
  .baseline-inlines;
  font:16px @serif-fonts;
  line-height:1.5em;

  .nomargin { margin:0 }
  .no-overflow { overflow:hidden }

  // blocks

  h1 {
    font-size:1.56em;
  }
  h2 { 
    font-size:1.37em;
    font-variant:small-caps;
    border-bottom:1px solid #ccc;
  }
  h3 {
    font-size:1.2em;
    font-style:italic;
  }
  hr {
    border:0;
    border-bottom:1px dotted #ccc;
    &.sep { border: 0 }
  }
  p, li, ul, ol, dl, h1, h2, h3, blockquote {
    margin:.75em 0;
  }
  pre { margin:1em 0 }
  ul {
    padding-left:2em;
    list-style:disc outside;
  }
  ol {
    padding-left:2em;
    list-style:decimal;
  }
  li {
    margin:.5em 0;
    pre, .shell-input, .shell-output {
      border-width:1px;
      border-radius:4px;
      margin-right:8px;
    }
  }
  dt { font-weight: bold }
  dd { padding-left: 2em }
  table {
    border-collapse:collapse;
    margin:1em 0;
    thead tr {
      border:1px solid #ccc;
      border-width:1px 0;
    }
    th { background:#eee}
    th, td {
      border:1px solid #eee;
      padding: 4px 8px;
    }
    &.centered {
      margin:1em auto;
    }
  }
  blockquote, .blockquote {
    position:relative;
    margin-left:2em;
    text-indent:2em;
    &::before {
      content:"“";
      font:128px Times, serif;
      font-weight:bold;
      opacity:.1;
      position:absolute;
      left:-48px;
      top:-32px;
    }
  }

  // inlines

  a {
    text-decoration:underline;
    color:#555;
    &:hover { color:#333 }
  }
  img { max-width:100% }
  > pre { .nopad }
  .middle > * { vertical-align:middle }
  code {
    font-size:12px;
    background: #eef7ee;
    border: 1px solid #ccddcc;
    padding:0 2px;
    white-space:nowrap;
  }
  pre code {
    background:transparent;
    border:0;
    padding:0;
    line-height:1.5em;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
  }

  // rich styles

  .kicker {
    font-size: 1.25em;
    line-height: 1.7em;
  }

  .sidenote {
    width:180px;
    font-size: 12px;
    float:right;
    text-align: left;
    margin:0 0 0 16px;
    pre, code { font-size:11px }
    li {
      margin: 1.5em 0 1.5em;
      word-spacing: .1em;
      line-height: 1.75em
    }
  }

  .footnote {
    border-top: 1px solid #999;
    font-size: 12px;
    line-height:1.5em;
    margin-top: 2em;
    padding-top: 1em;
    pre, code { font-size: 11px }
  }

  .caption {
    font-style: italic;
    margin: 0;
  }

  .superscript, .subscript {
    font-family: @serif-fonts;
    vertical-align: super;
    font-size: 75%;
    margin-right: .4em;
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: .1em;
    line-height: 0
  }

  .subscript {vertical-align: sub}
  a.superscript, a.subscript {text-decoration: none}

  .centered, .centered p {text-align:center}
  .right-float {
    float:right;
    margin-left:1em;
  }
  .left-float {
    float:left;
    margin-right:1em;
  }

  .thumb {
    &.shadow img {
      border-radius:8px;
      box-shadow:0 1px 3px rgba(0,0,0,.6);
    }
    &.tiny img { width: 60px }
    &.small img { width: 120px }
    &.medium img { width: 180px }
    &.large img { width: 240px }
  }

  .warning {
    background:#ffe;
    border:1px solid #cca;
    padding:8px 16px;
    margin:8px 16px;
    border-radius:8px;
    text-align:center;
  }

  .shell-input, .shell-output {
    position:relative;
    overflow:visible;
    margin-left:-16px;
    margin-right:-16px;
    padding-left:16px;
    padding-right:16px;
    border-width:1px 0;
    border-style:solid;
    &::after {
      content:'';
      display:block;
      position:absolute;
      top:-16px;
      right:8px;
      width:32px;
      height:32px;
    }
  }

  .shell-input {
    background:#def;
    border-color:#bcd;
    &::after {
      background:url("../img/icon-keyboard.png") center center no-repeat;
    }
  }

  .shell-output {
    background:#efd;
    border-color:#cdb;
    &::after {
      background:url("../img/icon-display.png") center center no-repeat;
    }
  }

}

.content-source {
  padding-top:16px;
  position:relative;
}

select.ea-autosave {
  width:100%;
  border:1px solid #aaa;
}

// API snippets

.ea-api-elem {
  margin:8px 0;
  overflow:hidden;
  color:#444;
  img.float {
    float:left;
    width:48px;
    height:48px;
    margin-right:4px;
  }
  a {
    text-decoration:none;
    color:#444;
    &:hover { color:#222 }
  }
  p { line-height:20px }
  .subtle {
    margin:0;
    color:#555;
    font-size:12px;
  }
  h1,h2,h3,h4 {
    margin:0;
    line-height:48px;
  }
  .elem-wrap {
    display:block;
    overflow:hidden;
    border-radius:8px;
    padding:4px;
    code { color: @lime }
    .title { line-height: 24px }
  }
  a.elem-wrap:hover { background: rgba(0,0,0,.05) }
  &.oneline {
    margin:0;
    .elem-wrap { padding: 0 }
    img.float {
      width:32px;
      height:32px;
    }
    h1,h2,h3,h4,p {
      margin: 0;
      line-height:32px;
    }
    p.subtle { line-height: 12px }
  }
}

.ea-api-contract {
  overflow:hidden;
  white-space:nowrap;
  text-align:center;
  border-radius:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  > header {
    .pnl-ghost;
    overflow:hidden;
  }
  > footer {
    .ghost;
    overflow:hidden;
    line-height:32px;
    text-align: right;
    padding:0 16px;
    .no-items, .subtle { color:#555 }
    .subtle { font-size: 12px }
  }

  table {
    border-collapse:collapse;
    width:100%;
    .pnl-ghost;
    th {
      .pnl-obsidian;
      font-size:20px;
      line-height:32px;
    }
    .middle {
      width: 20%;
      text-align:center;
      input, strong { font-size:20px }
    }
    .left, .right { width: 40% }
    .left {
      margin-left:4px;
      img { float:right }
      text-align:right;
    }
    .right {
      margin-right:4px;
      img { float:left }
      text-align:left;
    }
    td { padding: 8px 0 }
    td img {
      width: 48px;
      height: 48px;
      margin: 0 4px;
    }
  }

  .wrap {
    overflow:hidden;
    max-width:296px;
    * {
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }

  .fee {
    position:relative;
    display:inline-block;
    text-align:center;
    background:rgba(255,255,255,.5);
    line-height:48px;
    height:48px;
    padding-left:16px;
    border-radius:4px 0 0 4px;
    &:after {
      content:'';
      position:absolute;
      top:0;
      right:-20px;
      display:block;
      width:0;
      height:0;
      border-left:20px solid rgba(255,255,255,.5);
      border-top:24px solid transparent;
      border-bottom:24px solid transparent;
    }
  }

}

.ea-api-transaction {
  a {
    display:block;
    overflow:hidden;
    padding:0 8px;
    border-radius:8px;
    text-decoration: none;
    color:#555;
    &:hover {
      color:#333;
      background:rgba(0,0,0,.1);
    }
  }
  h2 {
    img {
      width:48px;
      height:48px;
      float:left;
    }
  }
  > ul {
    margin-left:48px;
    border-left:4px solid #ddd;
    overflow:hidden;
    border-radius:16px 0 0 16px;
    > li:nth-child(2n) {
      background:rgba(0,0,0,.05)
    }
  }
  .ea-per-account-totals {
    li {
      border-bottom: 1px dashed #ccc;
    }
  }
}

.ea-amount {
  &.pos { color:@lime }
  &.neg { color:@rose }
}

.ea-api-operation {
  overflow:hidden;
  padding:4px 16px;
  .ea-amount {
    font-size:20px;
    font-weight:bold;
    line-height:32px;
    min-width:160px;
    max-width:320px;
    float:left;
    text-align:right;
    padding:0 8px;
  }
  .ea-details {
    padding-left:44px;
    font:12px @monospace-fonts;
  }
  img {
    float:left;
    width:32px;
    height:32px;
    margin:0 8px;
  }
  .wrap {
    overflow:hidden;
    line-height:12px;
  }
  code { font-size: 12px }
  &.topdash {
    border-top:1px dashed #aaa;
  }
  .ea-api-account {
    margin:0;
  }
}

.ea-objective-token {
  position:relative;
  display:inline-block;
  font:20px/32px @serif-fonts;
  font-weight:bold;
  text-align:center;
  width:32px;
  height:32px;
  border-radius:32px;
  box-shadow:1px 1px 3px rgba(0,0,0,.5);
  &.small {
    width:24px;
    height:24px;
    font-size:16px;
    line-height:24px;
  }
}