
@dark-grey: #242b32;
@medium-grey: #37424c;
@light-grey: #ececec;
@white: #ffffff;
@red: #cd2626;
@yellow: #eead0e;    
@green: #228b22;
@blue: #00BFFF;


@font-size: 1.5em;
@small-font-size: 0.8em;

body {
  background-color: @light-grey;
  line-height: 27px;
  font-size: @font-size;
}

.popover-title{ color: @medium-grey; }
.popover-content{ color: @medium-grey; }

.emph { font-weight: bold; }

.header(@ptop, @pbot, @bg, @c){
  position: fixed;
  width:100%;
  z-index:15;
  padding-top: @ptop;
  padding-bottom: @pbot;
  background-color: @bg;
  color: @c;
}

#top-header { .header(15px, 13px, black, @light-grey) }

.fa-spin {
  -webkit-animation: fa-spin 5s infinite linear;
  animation: fa-spin 5s infinite linear;
}

.version-badge {
  visibility: visible;
  background-color: transparent;
  color: @medium-grey;
  margin-top: 15px;
  margin-left: 25px;
}

.post{
  box-shadow: 0px 1px 5px #ababab;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 15px;
  background-color: @white;
}

.main {
  box-shadow: inset 1px 3px 1px -2px #ababab;
  padding-top: 60px;
  padding-bottom: 15px;
}

.icon(@url, @size){
  display: inline-block;
  height: @size;
  width: @size;
  margin-left: 10px;
  background: url(@url) no-repeat center center;
  background-size: @size @size;
}

a.crate-icon { .icon("../img/crateicon.png", 32px); }

.remoteCaret {
  position: absolute;
}

.squareCaret {
  position: absolute;
  top: -6px;
  left: -2px;
  width: 6px;
  height: 6px;
}

.infoCaret {
  position: absolute;
  bottom: 6px;
  left: -6px;
  padding: 2px 4px;
  color: #333;
}

.ace_editor,
.ace_scroller,
.ace_marker-layer {
  overflow: visible !important;
}