$body-bg: #f4f5f8;
$header-height: 100px;
$header-link-text: #afb9c8;
$main-padding: 20px;
$nav-bg: #393d47;
$nav-text: #788188;
$nav-bg-hover: #283036;
$nav-text-hover: white;
$aside-width: 200px;

/**********
* Body
**********/
HTML {
  height: 100%;
}

BODY {
  background-color: $body-bg;
  min-height: 100%;
  font-weight: $normal-weight;

  &.no-spin .icon-spin {
    -webkit-animation: none;
    animation: none;
  };
}

.authenticated, #application {
  height: 100%;
}

B {
  font-weight: $bold-weight;
}

.farm {
  background-color: #000;
  background-image: url('images/background.jpg');
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

/**********
* Articles (above the page info/warnings)
**********/
.articles {
  position: relative;
  z-index: 3;
  background-color: white;

  ARTICLE {
    position: relative;
    padding: 7px 10px;
    text-align: center;

    &.close {
      position: absolute;
      cursor: pointer;
      top: 0;
      right: 0;
      bottom: 0;
      padding: 8px 10px;
    }

    &.warning {
      background-color: #e0717b;
      color: #fbd1cc;

      A,
      A:hover,
      A:focus,
      A:active,
      A:visited{
        color: white;
        font-weight: $bold-weight;
      }
    }
  }
}

/**********
* Main body
**********/
MAIN {
  position: relative;

  &.has-aside {
    margin-left: $aside-width;
  }
}

BODY.white MAIN {
  margin-top: $main-padding/2;
  margin-right: $main-padding;
  margin-bottom: $main-padding;
  margin-left: $main-padding;
  border-radius: 5px;

  &.has-aside {
    margin-left: ($aside-width + $main-padding);

    ASIDE {
      left: -1 * ($aside-width + $main-padding);
    }
  }
}

BODY.white MAIN {
  background-color: white;
}

/**********
* Section (within Main)
**********/
SECTION {
  padding: 20px 20px 0 20px;

  &.well {
    margin: 20px;
  }

  &.tab-section {
    padding: 20px;
  }
}

.overlay SECTION {
  padding: 20px 0 0 0;
}

.top-colors {
  position: relative;

  &:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-image: url('images/top-colors.gif');
    background-size: 100% 23px;
    background-repeat: no-repeat;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    image-rendering: pixelated;
  }
}

/**********
* Aside (side bar on the left next to left)
**********/
.aside-background {
  position: absolute;
  top: $header-height;
  left: 0;
  bottom: 0;
  width: $aside-width;
  background-color: transparent;
  z-index: 1;
}

ASIDE {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1*$aside-width;
  width: $aside-width;
  z-index: 1;
  padding: 17px 20px 0 20px;
  color: white;

  HR {
    border-top: 1px solid rgba(255,255,255,0.4);
  }

  .links {
    & > A,
    & > .link-with-actions > A{
      display: block;
      padding: 5px 0 4px 8px;
      cursor: pointer;
      font-weight: $bold-weight;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      font-size: 14px;
      clear: both;

      &.active {
        color: white;
        background-color: rgba(255,255,255,0.1);
        border-radius: 4px;
      }

      .resource-actions {
        float: right;
        position: relative;
        top: -3px;
        right: 3px;
      }

      I {
        margin-right: 5px;
      }

      .badge {
        float: right;
        background-color: transparent;
      }

    }

    .link-with-actions {
      position: relative;

      .resource-actions {
        position: absolute;
        top: 3px;
        right: 3px;
      }
    }
  }

  LABEL {
    color: rgba(255,255,255,0.5);
  }
}

UL.list-circles {
  @extend .list-unstyled;
  margin-top: 10px;
  font-weight: $bold-weight;

  &>LI {
    background-image: url('images/info-bubble.svg');
    background-repeat: no-repeat;
    min-height: 45px;
    padding-top: 5px;
    position: relative;
    padding-left: 45px;
    font-size: 14px;

    &>I {
      @extend .no-select;
      position: absolute;
      top: 0;
      left: 0;
      width: 34px;
      line-height: 38px;
      font-size: 16px;
      color: white;
      text-align: center;
      font-style: normal;

      &.fa {
        /* Font-Awesome knows how to center things properly.. */
        line-height: 34px;
      }
    }

    &:last-child {
      min-height: 34px;
      background-image: url('images/info-bubble-last.svg');
    }
  }

  &.list-circles-clear > LI {
    background-image: url('images/info-bubble-clear.svg');
    font-weight: $normal-weight;
    padding-bottom: 20px;

    &:last-child {
      background-image: url('images/info-bubble-clear-last.svg');
    }

    &>I {
      line-height: 34px;
      color: #667f85;
    }
  }
}

UL.list-lines {
  @extend .list-unstyled;

  &>LI {
    margin-top: 5px;
    border-bottom: 1px solid #e8ecf2;
    font-size: $font-size-small;

    LABEL {
      font-weight: $normal-weight;
      color: #9da0ae;
      display: inline-block;
      width: 100px;
      margin-bottom: 0;
    }
  }

  LI .btn-xs {
    position: relative;
    top: -2px;
  }
}

/**********
* Misc common global things
**********/
.footer-actions {
  margin: 20px 0;
  padding-bottom: 20px;
  text-align: center;
}

.input-list {
  margin: 5px 0;
}

.loading-overlay {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  text-align: center;
  width: 250px;
  padding: 20px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  color: #eee;
  z-index: 13;

  H3 {
    font-family: Helvetica;
  }
}

#loading-underlay, #loading-overlay {
  display: none;
}

.no-resize {
  resize: none;
}

.fixed {
  table-layout: fixed;
}

.clip {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: break-word;
}

.force-wrap {
  word-wrap: break-word;
}

.main-jumbotron {
  min-height: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  background-repeat: no-repeat;
  background-position: top center;
  color: white;
  padding: 1px 30px;
}

.well {
  border-radius: 5px;
  border:none;
  border-bottom: 2px solid #e9edf1;

  &.no-padding-margin {
    padding: 0;
    margin: 0;
  }
}

.radio-well {
  padding: 10px;
  font-size: 14px;

  LABEL {
    font-weight: $normal-weight;
    display: block;
    /* the radio button gets clipped with no padding */
    padding-left: 2px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: break-word;
  }
}

.text-mono {
  font-family: Consolas, "Andale Mono", "Lucida Console",  Monaco, "Courier New", Courier, monospace;
}

SECTION .well H5,
.graphs LABEL {
  font-weight: $normal-weight;
  color: #da8456;
  display: block;
  margin-bottom: 5px;
}

TABLE.graphs {
  width: 100%;
  table-layout: fixed;
}

.farm-box {
  SECTION {
    min-width: 50%;
    margin: 20px auto 0 auto;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
  }

  SECTION:first-of-type {
    margin-top: 50px;
  }
}

.hand {
  cursor: pointer;
  cursor: hand;
}

.no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// adds text indent with a 5px step through 15 layers
@for $i from 1 through 15 {
  .indent-#{$i} { text-indent: 10px * $i; }
}

// Vertical margins and padding witha 5px step
// e.g. r-mt-20 - {margin-top: 20px}
$spacing-property-map: (
    m:  margin,
    mt: margin-top,
    mr: margin-right,
    ml: margin-left,
    mb: margin-bottom,
    p:  padding,
    pt: padding-top,
    pb: padding-bottom,
    pl: padding-left,
    pr: padding-right
);
@for $size from 1 through 5 {
  $val: $size * 5px;
  @each $keyword, $property in $spacing-property-map {
    .r-#{$keyword}#{$size*5} {
      #{$property}: $val !important;
    }
  }
}

// SS-Gizmo doesn't know how to vertical align..
.ss-icon, [class^="ss-"] {
  vertical-align: -4%;
}

.btn-circle {
  display: inline-block;
  line-height: $line-height-base;
  vertical-align: middle;
  touch-action: manipulation;
  background-color: transparent;
  background-repeat: no-repeat;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 0;
  text-decoration: none;

  &[disabled] {
    opacity: 0.5;
  }
}

.btn-circle-text {
  width: auto;
  padding-left: 25px;
  color: #37B7E1;
}

.btn-circle-plus {
  @extend .btn-circle;
  background-image: url('images/circle-plus.svg');
}

.btn-circle-x {
  @extend .btn-circle;
  background-image: url('images/circle-x.svg');
}

.btn-circle-menu {
  @extend .btn-circle;
  background-image: url('images/circle-menu.svg');
}

ASIDE {
  .btn-circle-menu {
    background-image: url('images/circle-menu-white.svg');
  }

  .btn-circle-plus {
    background-image: url('images/circle-plus-white.svg');
  }

  .btn-circle-text {
    color: white;
  }
}

/**********
* Grid
**********/
.grid-header H1,
.grid-header H2,
.grid-header H3,
.grid-header H4,
.grid-header H5,
.grid-header H6,{
  color: #49bdaa;
}


.grid {
  /* Copied from .table because @extend doesn't work */
  width: 100%;
  max-width: 100%;
  margin-bottom: $line-height-computed;
  // Cells
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: $table-cell-padding;
        line-height: $line-height-base;
        vertical-align: top;
        border-top: 1px solid $table-border-color;
      }
    }
  }
  // Bottom align for column headings
  > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid $table-border-color;
  }
  // Remove top border from thead by default
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  // Account for multiple tbody instances
  > tbody + tbody {
    border-top: 2px solid $table-border-color;
  }

  // Nesting
  .table {
    background-color: $body-bg;
  }
  /* End: Copied from .table because @extend doesn't work */

  & > TBODY > TR:hover {
    background-color: rgba(255, 255, 0, 0.12);
  }

  & > THEAD > TR > TH,
  & > THEAD > TR > TD,
  & > TBODY > TR > TH,
  & > TBODY > TR > TD,
  & > TFOOT > TR > TH,
  & > TFOOT > TR > TD {
    padding: 8px 2px;
    font-size: 13px;
    vertical-align: top;
  }

  .actions {
    text-align: right;
  }

  .state {
    max-width: 100%;
    @extend .clip;
  }
}

@media (max-width: 701px) {
  .grid {
    & > THEAD > TR > TH,
    & > THEAD > TR > TD,
    & > TBODY > TR > TH,
    & > TBODY > TR > TD,
    & > TFOOT > TR > TH,
    & > TFOOT > TR > TD {
      display: block;
      border-top: 0;
      padding: 2px;

      &:first-child {
        border-top: 1px solid #f0f3f5;
      }
    }

    TH.actions {
      display: none;
    }

    & > THEAD > TR,
    & > TBODY > TR,
    & > TFOOT > TR {
      position: relative;
      display: block;
    }

    TD.actions {
      position: absolute;
      top: 2px;
      right: 2px;
    }
  }
}

/**********
* Form
**********/
.horizontal-form {
  H2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .form-label {
    text-align: right;
  }

  HR {
    margin: 8px 0 8px 0;
  }
}


.over-hr {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;

  & > span {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
  }

  & > span:before,
  & > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #e0e4ef;
  }

  & > span:before {
    right: 100%;
    margin-right: 15px;
  }

  & > span:after {
    left: 100%;
    margin-left: 15px;
  }
}

@media (max-width: $screen-md) {
  .horizontal-form {
    .form-label {
      text-align: left;
    }
  }
}

.toggle-advanced {
  text-align: center;
  text-transform: uppercase;
  font-weight: $bold-weight;
  color: #868f99;

  A,
  A:focus,
  A:active,
  A:visited,
  A:hover {
    cursor: pointer;
    text-decoration: none;
    color: #868f99;
  }
}


/**********
* Nav boxes (chooes a host/registry driver)
**********/
.nav-boxes {
  & > LI.active > A {
    border-color: #44b4a2;
  }

  .driver {
    background-position: center center;
    background-size: 90%;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
  }

  .active .driver {
    filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
  }

  &.checked-active .active:after {
    content: "\f058";
    top: 0;
    right: 0;
    font-family: FontAwesome;
    font-size: 25px;
    position: absolute;
    background-color: white;
    height: 29px;
    border-radius: 50%;
	color:#44b4a2;
  }
}

/**********
* Nav Tabs with active white
**********/
.nav-tabs-well {
  UL {
    border-bottom: 0;
  }

  LI {
    margin-right: 6px;

    A {
      border: 0 !important;
      background-color: #e5eaee;
      color: #bfc9d1;
      text-transform: uppercase;
    }

    &.active A,
    &.active A:hover {
      background-color: white;
      color: #de733d;
    }
  }
}

.nav-well {
  position: relative;
  top: -1px;
  border: 0;
  border-top-left-radius: 0;
}

/**********
* Collapse/expand toggle
**********/
.collapser {
  &:after {
    font-family: "rancher-icons";
    content: '\E613';
  }

  &.collapsed:after {
    font-family: "rancher-icons";
    content: '\E61F';
  }
}

.well.description {
  margin-top: 10px;
  margin-bottom: 0;

  P {
    margin: 0;
  }
}

SECTION.header H3 {
  .state {
    float: right;
    margin-right: 10px;
  }
}

.sad-ie {
  background-image: url('images/sad-ie.png');
  width: 300px;
  height: 317px;
  background-size: 300px 317px;
  background-repeat: no-repeat;
  margin: 0 auto;
}
