/* push cantarell with font-face in teh future */
/* FIXME: needs dark colors from here */
@import url(http://fonts.googleapis.com/css?family=Cantarell:400,700);
body {
  color: #eeeeec;
  background: #212424 url(../img/noise.png) repeat 0 0;
  font-family: Cantarell, Sans-Serif;
  font-size: 11pt;
  margin: 0;
  padding: 0;
  border: 0; }

fieldset {
  margin: 0; }

button, .button, input[type="button"], input[type="submit"] {
  -webkit-appearance: none;
  /* this should make the button behave like a box */
  font-family: Cantarell;
  font-size: 11pt;
  background-color: #454c4c;
  background-image: -moz-linear-gradient(top, #454c4c, #212424);
  background-image: -webkit-linear-gradient(top, #454c4c, #212424);
  background-image: -o-linear-gradient(top, #454c4c, #212424);
  background-image: -ms-linear-gradient(top, #454c4c, #212424);
  background-image: linear-gradient(top, #454c4c, #212424);
  color: #eeeeec;
  display: inline-block;
  border: 1px solid #24282a;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 4px;
  margin: 2px; }
  button:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    background-image: -moz-linear-gradient(top, #5d6767, #262a2a);
    background-image: -webkit-linear-gradient(top, #5d6767, #262a2a);
    background-image: -o-linear-gradient(top, #5d6767, #262a2a);
    background-image: -ms-linear-gradient(top, #5d6767, #262a2a);
    background-image: linear-gradient(top, #5d6767, #262a2a); }
  button:active, .button:active, input[type="button"]:active, input[type="submit"]:active {
    background-image: -moz-linear-gradient(top, #151717, #434a4a);
    background-image: -webkit-linear-gradient(top, #151717, #434a4a);
    background-image: -o-linear-gradient(top, #151717, #434a4a);
    background-image: -ms-linear-gradient(top, #151717, #434a4a);
    background-image: linear-gradient(top, #151717, #434a4a); }

button[disabled] {
  opacity: 0.2;
  background-color: transparent; }
  button[disabled]:hover {
    background-color: transparent; }
  button[disabled]:active {
    background-color: transparent; }

.fr {
  float: right; }

.fl {
  float: left; }

.defaultbutton {
  background-image: -moz-linear-gradient(top, #7fc141, #47850d);
  background-image: -webkit-linear-gradient(top, #7fc141, #47850d);
  background-image: -o-linear-gradient(top, #7fc141, #47850d);
  background-image: -ms-linear-gradient(top, #7fc141, #47850d);
  background-image: linear-gradient(top, #7fc141, #47850d);
  border: 1px solid #2f5d04; }
  .defaultbutton:hover {
    background-image: -moz-linear-gradient(top, #99ce67, #539c0f);
    background-image: -webkit-linear-gradient(top, #99ce67, #539c0f);
    background-image: -o-linear-gradient(top, #99ce67, #539c0f);
    background-image: -ms-linear-gradient(top, #99ce67, #539c0f);
    background-image: linear-gradient(top, #99ce67, #539c0f); }
  .defaultbutton:active {
    background-image: -moz-linear-gradient(top, #2e5708, #72af39);
    background-image: -webkit-linear-gradient(top, #2e5708, #72af39);
    background-image: -o-linear-gradient(top, #2e5708, #72af39);
    background-image: -ms-linear-gradient(top, #2e5708, #72af39);
    background-image: linear-gradient(top, #2e5708, #72af39); }

.warningbutton {
  background-image: -moz-linear-gradient(top, #cd4b4b, #b70000);
  background-image: -webkit-linear-gradient(top, #cd4b4b, #b70000);
  background-image: -o-linear-gradient(top, #cd4b4b, #b70000);
  background-image: -ms-linear-gradient(top, #cd4b4b, #b70000);
  background-image: linear-gradient(top, #cd4b4b, #b70000);
  border: 1px solid #a40000; }
  .warningbutton:hover {
    background-image: -moz-linear-gradient(top, #d87373, #d10000);
    background-image: -webkit-linear-gradient(top, #d87373, #d10000);
    background-image: -o-linear-gradient(top, #d87373, #d10000);
    background-image: -ms-linear-gradient(top, #d87373, #d10000);
    background-image: linear-gradient(top, #d87373, #d10000); }
  .warningbutton:active {
    background-image: -moz-linear-gradient(top, #840000, #c73737);
    background-image: -webkit-linear-gradient(top, #840000, #c73737);
    background-image: -o-linear-gradient(top, #840000, #c73737);
    background-image: -ms-linear-gradient(top, #840000, #c73737);
    background-image: linear-gradient(top, #840000, #c73737); }

#toolbar-main {
  position: fixed;
  display: table-cell;
  vertical-align: middle;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  border: 0;
  background-color: #323331;
  background-image: -moz-linear-gradient(top, #525351, #323331);
  background-image: -webkit-linear-gradient(top, #525351, #323331);
  background-image: -o-linear-gradient(top, #525351, #323331);
  background-image: -ms-linear-gradient(top, #525351, #323331);
  background-image: linear-gradient(top, #525351, #323331);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  text-align: center; }
  #toolbar-main.selectmode {
    background-image: -moz-linear-gradient(top, #8e9c80, #4f6838);
    background-image: -webkit-linear-gradient(top, #8e9c80, #4f6838);
    background-image: -o-linear-gradient(top, #8e9c80, #4f6838);
    background-image: -ms-linear-gradient(top, #8e9c80, #4f6838);
    background-image: linear-gradient(top, #8e9c80, #4f6838); }

#notify {
  position: absolute;
  display: none;
  overflow: hidden;
  z-index: 2;
  background-color: #515a5a;
  background-image: -moz-linear-gradient(top, #393f3f, #515a5a 10px);
  padding: 1em 2em 1em 1em;
  top: 43px;
  left: 50%;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border: 1px solid #24282a;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); }
  #notify .message {
    float: left;
    min-width: 300px; }
  #notify .closebutton {
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -8px;
    display: block;
    width: 16px;
    height: 16px;
    background: url(../img/window-close-symbolic.png) no-repeat 0 0; }
  #notify button {
    float: right; }

#overlay-toolbar {
  display: none;
  position: absolute;
  z-index: 10;
  bottom: 10px;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 12px;
  /*  can't do rgba gradients?
      background-color: $button_gradient_color_a;
      @include gradient-vertical(rgba(100,100,100,0.3), rgba(0,0,0,0.5));
    }
  */ }
  #overlay-toolbar fieldset {
    padding: 0;
    margin: 0;
    border: 0; }
  #overlay-toolbar button {
    padding: 9px; }

#content {
  position: fixed;
  overflow-y: auto;
  top: 52px;
  bottom: 0;
  right: 0;
  left: 0; }

.box-contain {
  position: relative;
  display: inline-block;
  font-size: 90%;
  text-align: center;
  max-width: 150px;
  overflow: hidden;
  vertical-align: top; }
  .box-contain .box {
    cursor: pointer;
    position: relative;
    display: block;
    width: 128px;
    height: 128px;
    background-color: #393f3f;
    border: 1px solid #697575;
    margin: 12px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
    .box-contain .box img {
      width: 128px;
      height: 128px; }
    .box-contain .box .check {
      position: absolute;
      z-index: 3;
      bottom: 6px;
      right: 6px;
      width: 39px;
      height: 39px; }
      .box-contain .box .check input[type=checkbox] {
        opacity: 0; }
        .box-contain .box .check input[type=checkbox] + span {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url(../img/checkbox-off.png) no-repeat 0 0; }
        .box-contain .box .check input[type=checkbox]:checked + span {
          background: url(../img/checkbox-on.png) no-repeat 0 0; }
    .box-contain .box.suspended {
      box-shadow: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none; }
      .box-contain .box.suspended span.checkers {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("../img/checkers.png") repeat 0 0; }
      .box-contain .box.suspended img {
        opacity: 0.2; }
  .box-contain .label {
    whitespace: wrap; }