fix close icon visibility

fix close icon visibility

@modified-icon-width: @component-icon-size / 2;
@tab-top-padding: 0;
@tab-bottom-border-height: 0;
@tab-border: 0 solid @level-5-bg;
@tab-max-width: 160px;
@tab-min-width: @tab-height * 2;

.tab-bar {
  height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
  overflow-x: auto;
  overflow-y: hidden;
  background: @tab-bar-background-color;

  margin-top: @modular-scale-xxs * 1rem; // create a small space above tabs

  &::-webkit-scrollbar {
    display: none;
  }

  .tab {
    position: relative;
    top: @tab-top-padding;
    max-width: @tab-max-width;
    min-width: @tab-min-width;
    height: @tab-height;
    line-height: @tab-height;
    font-size: @modular-scale-m * 1rem;
    padding: 0;
    margin: 0;
    color: @tab-text-color;
    background: transparent;
    border-right: @tab-border;
    border-top-left-radius: @component-border-radius;
    border-top-right-radius: @component-border-radius;

    &:hover {
      color: @base-fg;
      .close-icon {
        transform: scale(1);
      }
    }

    .title {
      position: relative;
      z-index: 1;
      padding: 0  @modular-scale * @component-padding 0  @component-padding;
    }

    .close-icon {
      right: -2px;
      z-index: 3;
      margin-right: @component-padding;
      margin-top: -1px; // make it sit in the middle of x-height
      text-align: right;
      line-height: @tab-height;
      background: inherit;
      transform: scale(0);
      transition: transform .2s .1s, border .2s .1s, color .2s .1s;

      &:hover {
        color: @ui-accent;
        transition: transform .1s, border .1s, color .1s;
      }

      &:active {
        opacity: .3;
      }
    }
    &:hover .close-icon {
      transform: scale(1);
    }
  }

  .tab.active {
    z-index: 1;
    flex: 2 0 auto;
    padding-right: @modified-icon-width + 2px;
    background-color: @tab-background-color-active;
    color: @base-fg;

    & .close-icon {
      color: @base-fg;
      transform: scale(1);
    }

    &:hover .close-icon {
      color: @base-fg;

      &:hover {
        color: @ui-accent;
        }
    }

    // Active pane marker
    atom-pane.active &:before {
      transform: scaleY(1);
    }

  }

  .tab.modified {
    &:not(:hover) .close-icon {
      top: 1px;
      right: 0;
      width: auto;
      height: auto;
      border: 0;
      border-radius: 0;
      transform: scale(1);

      &:before {
        content: "\f052";
        /* color: @ui-accent; */
        display: inline-block;
      }
    }

    &:hover .close-icon {
      color: inherit;
      transform: scale(1);
      &:before {
        content: "\f052";
      }
    }
    &:hover .close-icon:hover {
      color: @ui-accent;
      &:before {
        content: "\f052";
      }
    }
  }

  .tab.is-dragging {
    background: darken(@level-2-bg, 6%);
    border-color: transparent;
    opacity: .5;
    & .close-icon,
    &:before,
    &:after {
      visibility: hidden;
    }
  }

  .placeholder {
    margin: 0;
    height: @tab-height + @tab-top-padding;
    background: @level-5-bg;
    pointer-events: none;
    &:after {
      top: @tab-height/2 + @tab-top-padding - 5px ;
      width: 10px;
      height: 10px;
      margin: 0;
      border-radius: 0;
      border: 5px solid;
      border-color: transparent transparent transparent @level-5-bg;
      background: transparent;
    }

    &:last-child {
      margin-left: -2px;

      &:after {
        margin-left: -10px;
        border-color: transparent @level-5-bg transparent transparent;
      }
    }
  }
}

@modified-icon-width: @component-icon-size / 2;
@tab-top-padding: 0;
@tab-bottom-border-height: 0;
@tab-border: 0 solid @level-5-bg;
@tab-max-width: 160px;
@tab-min-width: @tab-height * 2;

.tab-bar {
  height: @tab-height + @tab-top-padding + @tab-bottom-border-height;
  overflow-x: auto;
  overflow-y: hidden;
  background: @tab-bar-background-color;

  margin-top: @modular-scale-xxs * 1rem; // create a small space above tabs

  &::-webkit-scrollbar {
    display: none;
  }

  .tab {
    position: relative;
    top: @tab-top-padding;
    max-width: @tab-max-width;
    min-width: @tab-min-width;
    height: @tab-height;
    line-height: @tab-height;
    font-size: @modular-scale-m * 1rem;
    padding: 0;
    margin: 0;
    color: @tab-text-color;
    background: transparent;
    border-right: @tab-border;
    border-top-left-radius: @component-border-radius;
    border-top-right-radius: @component-border-radius;

    &:hover {
      color: @base-fg;
      .close-icon {
        transform: scale(1);
      }
    }

    .title {
      position: relative;
      z-index: 1;
      padding: 0  @component-padding;
    }

    .close-icon {
      right: 0;
      z-index: 3;
      margin-right: @component-padding;
      margin-top: -1px; // make it sit in the middle of x-height
      text-align: right;
      line-height: @tab-height;
      background: inherit;
      transform: scale(0);
      transition: transform .2s .1s, border .2s .1s, color .2s .1s;

      &:hover {
        color: @ui-accent;
        transition: transform .1s, border .1s, color .1s;
      }

      &:active {
        opacity: .3;
      }
    }
    &:hover .close-icon {
      transform: scale(1);
    }
  }

  .tab.active {
    z-index: 1;
    flex: 2 0 auto;
    padding-right: @modified-icon-width + 2px;
    background-color: @tab-background-color-active;
    color: @base-fg;

    &:hover .close-icon {
      color: @base-fg;

      &:hover {
        color: @ui-accent;
        }
    }

    & .close-icon {
      color: @base-fg;
      transform: scale(1);
    }

    // Active pane marker
    atom-pane.active &:before {
      transform: scaleY(1);
    }

  }

  .tab.modified {
    &:not(:hover) .close-icon {
      top: 1px;
      right: 0;
      width: auto;
      height: auto;
      border: 0;
      border-radius: 0;
      transform: scale(1);

      &:before {
        content: "\f052";
        /* color: @ui-accent; */
        display: inline-block;
      }
    }

    &:hover .close-icon {
      color: inherit;
      transform: scale(1);
      &:before {
        content: "\f052";
      }
    }
    &:hover .close-icon:hover {
      color: @ui-accent;
      &:before {
        content: "\f052";
      }
    }
  }

  .tab.is-dragging {
    background: darken(@level-2-bg, 6%);
    border-color: transparent;
    opacity: .5;
    & .close-icon,
    &:before,
    &:after {
      visibility: hidden;
    }
  }

  .placeholder {
    margin: 0;
    height: @tab-height + @tab-top-padding;
    background: @level-5-bg;
    pointer-events: none;
    &:after {
      top: @tab-height/2 + @tab-top-padding - 5px ;
      width: 10px;
      height: 10px;
      margin: 0;
      border-radius: 0;
      border: 5px solid;
      border-color: transparent transparent transparent @level-5-bg;
      background: transparent;
    }

    &:last-child {
      margin-left: -2px;

      &:after {
        margin-left: -10px;
        border-color: transparent @level-5-bg transparent transparent;
      }
    }
  }
}


fix the left margin which causes a space in the help drawer article titles and tour titles

.umb-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    z-index: 10;
    width: @drawerWidth;
    background: @brownGrayLight;
    box-shadow: inset 5px 0 20px rgba(0,0,0,.3);
}

.umb-drawer-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */

.umb-drawer-header {
    flex: 0 0 100px;
    padding: 20px 30px;
    box-sizing: border-box;
}

.umb-drawer-header__title {
    font-size: @fontSizeLarge;
    font-weight: bold;
    margin-top: 7px;
    margin-bottom: 7px;
}

.umb-drawer-header__subtitle {
    font-size: @fontSizeSmall;
}

/* Content */

.umb-drawer-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 30px 20px 30px;
}

/* Footer */
.umb-drawer-footer {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 31px;
    padding: 15px 30px;
}

/* Our badge - should be moved */

.umb-help-badge {
    padding: 10px 20px 10px 55px;
    background: @white;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    display: block;
    margin-bottom:5px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
}

.umb-help-badge:hover,
.umb-help-badge:active,
.umb-help-badge:focus {
    text-decoration: none;

    .umb-help-badge__title  {
        text-decoration: underline !important;
    }
}

.umb-help-badge__icon {
    font-size: 36px;
    transform: translate(0,-50%);
    position: absolute;
    left: 10px;
    top: 50%;
    color: @red-l3;
}

.umb-help-badge__title {
    font-size: 15px;
    font-weight: bold;
    color: @black;
}

/* Help article */

.umb-help-article {
    background: @white;
    padding: 20px;
    line-height: 1.4em;
}

/* Make sure typography looks good */
.umb-help-article h1,
.umb-help-article h2,
.umb-help-article h3,
.umb-help-article h4 {
    line-height: 1.3em;
    font-weight: bold;
}

.umb-help-article h1 { font-size: 20px; }
.umb-help-article h2 { font-size: 16px; margin-top: 20px; }
.umb-help-article h3 { font-size: 15px; }
.umb-help-article h4 { font-size: 14px; }

.umb-help-article ol li,
.umb-help-article ul li {
    line-height: 1.4em;
    margin-bottom: 8px;
}

.umb-help-article code {
    white-space: pre-wrap;
    word-break: break-word;
}

.umb-help-article-navigation {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* the outer container for each help type - tours, video etc */
.umb-help-section + .umb-help-section {
    margin-top:20px;
}

.umb-help-section__title {
    margin:0 0 10px;
}

/* Help list */

.umb-help-list {
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    background: @white;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);

    [data-element*="help-tours"] & {
        margin-bottom:5px;
    }
}

.umb-help-list-item {
    margin-bottom: 1px;
    border-radius: 0;
    border-bottom: 1px solid @gray-9;
    padding: 10px;
}

.umb-help-list-item:last-child {
    border-bottom: none;
}

.umb-help-list-item__group-title i {
    margin-right:2px;
    text-decoration: none;
}

.umb-help-list-item__content {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 10px;
    text-decoration: none;
}

.umb-help-list-item:hover,
.umb-help-list-item:focus,
.umb-help-list-item:active,
.umb-help-list-item > a:hover,
.umb-help-list-item > a:focus,
.umb-help-list-item > a:active {
    text-decoration: none;

    .umb-help-list-item__title {
        text-decoration: underline;
    }
}

.umb-help-list-item__title {
    font-size: 14px;
    display: block;
}

.umb-help-list-item__description {
    margin-top: 5px;
    display: block;
    font-size: 14px;
}

.umb-help-list-item__icon {
    margin-right: 8px;
    color: @gray-4;
    font-size: 18px;
    float: left;
}

.umb-help-list-item__open-icon {
    font-size: 14px;
    color: @gray-6;
    margin-left: auto;
}

.umb-help-list-item:hover .umb-help-list-item__group-title {
    text-decoration: underline;
}

[data-element*="tour-"].umb-help-list-item:hover .umb-help-list-item__title {
    text-decoration:none;
}

.umb-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    z-index: 10;
    width: @drawerWidth;
    background: @brownGrayLight;
    box-shadow: inset 5px 0 20px rgba(0,0,0,.3);
}

.umb-drawer-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Header */

.umb-drawer-header {
    flex: 0 0 100px;
    padding: 20px 30px;
    box-sizing: border-box;
}

.umb-drawer-header__title {
    font-size: @fontSizeLarge;
    font-weight: bold;
    margin-top: 7px;
    margin-bottom: 7px;
}

.umb-drawer-header__subtitle {
    font-size: @fontSizeSmall;
}

/* Content */

.umb-drawer-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 30px 20px 30px;
}

/* Footer */
.umb-drawer-footer {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 31px;
    padding: 15px 30px;
}

/* Our badge - should be moved */

.umb-help-badge {
    padding: 10px 20px 10px 55px;
    background: @white;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    display: block;
    margin-bottom:5px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);
}

.umb-help-badge:hover,
.umb-help-badge:active,
.umb-help-badge:focus {
    text-decoration: none;

    .umb-help-badge__title  {
        text-decoration: underline !important;
    }
}

.umb-help-badge__icon {
    font-size: 36px;
    transform: translate(0,-50%);
    position: absolute;
    left: 10px;
    top: 50%;
    color: @red-l3;
}

.umb-help-badge__title {
    font-size: 15px;
    font-weight: bold;
    color: @black;
}

/* Help article */

.umb-help-article {
    background: @white;
    padding: 20px;
    line-height: 1.4em;
}

/* Make sure typography looks good */
.umb-help-article h1,
.umb-help-article h2,
.umb-help-article h3,
.umb-help-article h4 {
    line-height: 1.3em;
    font-weight: bold;
}

.umb-help-article h1 { font-size: 20px; }
.umb-help-article h2 { font-size: 16px; margin-top: 20px; }
.umb-help-article h3 { font-size: 15px; }
.umb-help-article h4 { font-size: 14px; }

.umb-help-article ol li,
.umb-help-article ul li {
    line-height: 1.4em;
    margin-bottom: 8px;
}

.umb-help-article code {
    white-space: pre-wrap;
    word-break: break-word;
}

.umb-help-article-navigation {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* the outer container for each help type - tours, video etc */
.umb-help-section + .umb-help-section {
    margin-top:20px;
}

.umb-help-section__title {
    margin:0 0 10px;
}

/* Help list */

.umb-help-list {
    list-style: none;
    margin-left: 0;
    margin-bottom: 0;
    background: @white;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16);

    [data-element*="help-tours"] & {
        margin-bottom:5px;
    }
}

.umb-help-list-item {
    margin-bottom: 1px;
    border-radius: 0;
    border-bottom: 1px solid @gray-9;
    padding: 10px;
}

.umb-help-list-item:last-child {
    border-bottom: none;
}

.umb-help-list-item__group-title i {
    margin-right:2px;
    text-decoration: none;
}

.umb-help-list-item__content {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 10px;
    text-decoration: none;
}

.umb-help-list-item:hover,
.umb-help-list-item:focus,
.umb-help-list-item:active,
.umb-help-list-item > a:hover,
.umb-help-list-item > a:focus,
.umb-help-list-item > a:active {
    text-decoration: none;

    .umb-help-list-item__title {
        text-decoration: underline;
    }
}

.umb-help-list-item__title {
    font-size: 14px;
    display: block;
    margin-left: 26px;
}

.umb-help-list-item__description {
    margin-top: 5px;
    display: block;
    font-size: 14px;
}

.umb-help-list-item__icon {
    margin-right: 8px;
    color: @gray-4;
    font-size: 18px;
    float: left;
}

.umb-help-list-item__open-icon {
    font-size: 14px;
    color: @gray-6;
    margin-left: auto;
}

.umb-help-list-item:hover .umb-help-list-item__group-title {
    text-decoration: underline;
}

[data-element*="tour-"].umb-help-list-item:hover .umb-help-list-item__title {
    text-decoration:none;
}


:art: fix header hover color

:art: fix header hover color

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.tester-tiny {
  vertical-align: middle !important;
  display: inline-block;
  cursor: wait;
  margin-left: 3px;
  margin-right: 3px;
  background-color: @app-background-color;
  &.idle {
    cursor: initial;
    background: radial-gradient(#64c42d 0.1em, transparent 0.11em);
  }
  &.idle::before, &.idle::after {
    display: none;
    -webkit-animation: none;
  }
}

.gutter[gutter-name=tester] {
    min-width: 0.5em;
}

atom-text-editor.editor .tester-gutter {
  width: 100%;
  height: 90% !important;
  border-radius: 3px;
}

atom-text-editor.editor .tester-row {
  /* Take up the full allowed width */
  left: 0;
  right: 0;
  /* Align the tester dot in the middle */
  display: flex;
  align-items: center;
  justify-content: center;
}

atom-text-editor.editor .tester-highlight, .tester-highlight{
  &.badge {
    border-radius: @component-border-radius;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &.failed {
    &:not(.line-number){
      background-color: @background-color-error;
      color: contrast(@background-color-error);
    }
    .tester-gutter{
      color: @background-color-error;
    }
    .region {
      border-bottom: 1px dashed @background-color-error;
    }
  }
  &.skipped {
    &:not(.line-number){
      background-color: @background-color-warning;
      color: contrast(@background-color-warning);
    }
    .tester-gutter{
      color: @background-color-warning;
    }
    .region {
      border-bottom: 1px dashed @background-color-warning;
    }
  }
  &.passed {
    &:not(.line-number){
      background-color: @background-color-success;
      color: contrast(@background-color-success);
    }
    .tester-gutter{
      color: @background-color-success;
    }
    .region {
      border-bottom: 1px dashed @background-color-success;
    }
  }
  &.unknown {
    &:not(.line-number){
      background-color: #939395;
      color: contrast(#939395);
    }
    .tester-gutter{
      color: #939395;
    }
    .region {
      border-bottom: 1px dashed #939395;
    }
  }

  // Used by bottom status icon
  &.status-failed {
    color: @background-color-error;
  }
  &.status-passed{
    color: @background-color-success;
  }
  &.status-skip{
    color: @background-color-warning;
  }
}

.tester-view {
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;

	.output {
	  overflow: auto;
		background-color: inherit;
    height: 100%;
	}
}

.tester-toolbar {
  width: 100%;
  padding: 0px 5px 0px 5px;
  line-height: 2.5em;
}

.tester-wait-button {
  opacity: 1;
  background-image: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.15) 50%) !important;
  background-size: 10px 100%;
  -webkit-animation: available-package-is-installing 0.5s linear infinite;
}

.tester-messages {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;

  div {
    margin-right: 0px !important;
  }

  .tester-messages-container {
    height: 100%;
    width: 100%;
    overflow: overlay;
  }

  .tester-message-header {
    width: 100%;
    cursor: pointer;
    background-color: @panel-heading-background-color !important;
    font-weight: 700;
    word-break: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    min-height: 1.5em;
    .sort-indicator {
      position: absolute;
      transform: scale(0.6);
    }
    &.tester-message-cell:hover {
      color: @text-color-selected
    }
  }
  .tester-message-row {
    cursor: pointer;
    word-break: break-word;
    text-overflow: ellipsis;
    display: flex;
    -webkit-user-select: text;
  }
  .tester-message-row:nth-child(odd){
    background-color: @background-color-highlight;
  }
  .tester-message-row:hover{
    background-color: @panel-heading-border-color;
    color: @text-color-selected;
  }
  .tester-message-cell {
    border-left: 1px solid @panel-heading-border-color;
    overflow: hidden;
    padding: 2px 4px;
    word-break: break-word;
    text-overflow: inherit;
  }
  .tester-message-state {
    min-width: 5rem;
    width: 5%;
  }
  .tester-message-duration {
    min-width: 5rem;
    width: 5%;
  }
  .tester-message-title {
    min-width: 50px;
    width: 25%;
  }
  .tester-message-error {
    min-width: 50px;
    width: 50%;
  }
  .tester-message-location {
    min-width: 50px;
    width: 15%;
  }
  .tester-empty-container {
    font-style: italic;
    padding: 1em;
    text-align: center;
  }
  .tester-header {
    border-top: 1px solid @panel-heading-border-color;
    border-bottom: 1px solid @panel-heading-border-color;
    padding-bottom: 4px;
  }
}

.tester-tooltip-title {
  float: left;
}

.tester-bottom-status {
  min-width: 2em;
  line-height: 1.3em;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  &[hidden] {
    display: none;
  }
  &.tester-status-failed {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  &.tester-status-passed {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  &.tester-status-skipped {
    border-radius: 0;
  }
}

.tester-bottom-container {
  margin-right: .6em;
  [hidden] {
    display: none;
  }
}

.tester-inline-message {
  border: 1px solid @base-border-color;
  max-height: 1.7em;
  overflow: auto;
  background: @overlay-background-color;
  color: @text-color-highlight;
  border-radius: @component-border-radius;
  padding: 0px 3px 0px 3px;
  &.full-size {
    max-height: 100%;
  }
}

.tester-inline-message-tail {
  margin-top: -1.6em;
  margin-left: 1em;
  z-index: 0;
}

.tester-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  cursor: row-resize;
  z-index: 3;
}

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.tester-tiny {
  vertical-align: middle !important;
  display: inline-block;
  cursor: wait;
  margin-left: 3px;
  margin-right: 3px;
  background-color: @app-background-color;
  &.idle {
    cursor: initial;
    background: radial-gradient(#64c42d 0.1em, transparent 0.11em);
  }
  &.idle::before, &.idle::after {
    display: none;
    -webkit-animation: none;
  }
}

.gutter[gutter-name=tester] {
    min-width: 0.5em;
}

atom-text-editor.editor .tester-gutter {
  width: 100%;
  height: 90% !important;
  border-radius: 3px;
}

atom-text-editor.editor .tester-row {
  /* Take up the full allowed width */
  left: 0;
  right: 0;
  /* Align the tester dot in the middle */
  display: flex;
  align-items: center;
  justify-content: center;
}

atom-text-editor.editor .tester-highlight, .tester-highlight{
  &.badge {
    border-radius: @component-border-radius;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &.failed {
    &:not(.line-number){
      background-color: @background-color-error;
      color: contrast(@background-color-error);
    }
    .tester-gutter{
      color: @background-color-error;
    }
    .region {
      border-bottom: 1px dashed @background-color-error;
    }
  }
  &.skipped {
    &:not(.line-number){
      background-color: @background-color-warning;
      color: contrast(@background-color-warning);
    }
    .tester-gutter{
      color: @background-color-warning;
    }
    .region {
      border-bottom: 1px dashed @background-color-warning;
    }
  }
  &.passed {
    &:not(.line-number){
      background-color: @background-color-success;
      color: contrast(@background-color-success);
    }
    .tester-gutter{
      color: @background-color-success;
    }
    .region {
      border-bottom: 1px dashed @background-color-success;
    }
  }
  &.unknown {
    &:not(.line-number){
      background-color: #939395;
      color: contrast(#939395);
    }
    .tester-gutter{
      color: #939395;
    }
    .region {
      border-bottom: 1px dashed #939395;
    }
  }

  // Used by bottom status icon
  &.status-failed {
    color: @background-color-error;
  }
  &.status-passed{
    color: @background-color-success;
  }
  &.status-skip{
    color: @background-color-warning;
  }
}

.tester-view {
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;

	.output {
	  overflow: auto;
		background-color: inherit;
    height: 100%;
	}
}

.tester-toolbar {
  width: 100%;
  padding: 0px 5px 0px 5px;
  line-height: 2.5em;
}

.tester-wait-button {
  opacity: 1;
  background-image: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.15) 50%) !important;
  background-size: 10px 100%;
  -webkit-animation: available-package-is-installing 0.5s linear infinite;
}

.tester-messages {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;

  div {
    margin-right: 0px !important;
  }

  .tester-messages-container {
    height: 100%;
    width: 100%;
    overflow: overlay;
  }

  .tester-message-header {
    width: 100%;
    cursor: pointer;
    background-color: @panel-heading-background-color !important;
    font-weight: 700;
    word-break: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    min-height: 1.5em;
    .sort-indicator {
      position: absolute;
      transform: scale(0.6);
    }
  }
  .tester-message-header:hover {
    color: @text-color-selected
  }
  .tester-message-row {
    cursor: pointer;
    word-break: break-word;
    text-overflow: ellipsis;
    display: flex;
    -webkit-user-select: text;
  }
  .tester-message-row:nth-child(odd){
    background-color: @background-color-highlight;
  }
  .tester-message-row:hover{
    background-color: @panel-heading-border-color;
    color: @text-color-selected;
  }
  .tester-message-cell {
    border-left: 1px solid @panel-heading-border-color;
    overflow: hidden;
    padding: 2px 4px;
    word-break: break-word;
    text-overflow: inherit;
  }
  .tester-message-state {
    min-width: 5rem;
    width: 5%;
  }
  .tester-message-duration {
    min-width: 5rem;
    width: 5%;
  }
  .tester-message-title {
    min-width: 50px;
    width: 25%;
  }
  .tester-message-error {
    min-width: 50px;
    width: 50%;
  }
  .tester-message-location {
    min-width: 50px;
    width: 15%;
  }
  .tester-empty-container {
    font-style: italic;
    padding: 1em;
    text-align: center;
  }
  .tester-header {
    border-top: 1px solid @panel-heading-border-color;
    border-bottom: 1px solid @panel-heading-border-color;
    padding-bottom: 4px;
  }
}

.tester-tooltip-title {
  float: left;
}

.tester-bottom-status {
  min-width: 2em;
  line-height: 1.3em;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  &[hidden] {
    display: none;
  }
  &.tester-status-failed {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  &.tester-status-passed {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  &.tester-status-skipped {
    border-radius: 0;
  }
}

.tester-bottom-container {
  margin-right: .6em;
  [hidden] {
    display: none;
  }
}

.tester-inline-message {
  border: 1px solid @base-border-color;
  max-height: 1.7em;
  overflow: auto;
  background: @overlay-background-color;
  color: @text-color-highlight;
  border-radius: @component-border-radius;
  padding: 0px 3px 0px 3px;
  &.full-size {
    max-height: 100%;
  }
}

.tester-inline-message-tail {
  margin-top: -1.6em;
  margin-left: 1em;
  z-index: 0;
}

.tester-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  cursor: row-resize;
  z-index: 3;
}


fix unreadable team chat input text color

@import (reference) '../../customize/src/less2/include/framework.less';
@import (reference) '../../customize/src/less2/include/drive.less';
@import (reference) '../../customize/src/less2/include/messenger.less';
@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
@import (reference) "../../customize/src/less2/include/tools.less";
@import (reference) "../../customize/src/less2/include/colortheme.less";

&.cp-app-team {
    .framework_min_main(
        @bg-color: @colortheme_teams-bg,
        @warn-color: @colortheme_teams-warn,
        @color: @colortheme_teams-color
    );

    .drive_main();
    .messenger_main();
    .sidebar-layout_main();

    @roster-bg-color: #efefef;

    #cp-sidebarlayout-container {
        @media screen and (max-width: 900px) {
            .cp-app-drive-toolbar-leftside {
                .cp-dropdown-button-title span:last-child {
                    display: none;
                }
                .cp-toolbar-share-button span:last-child {
                    display: none;
                }
            }
        }
        div#cp-sidebarlayout-leftside {
            background-color: #e0e0e0;
        }
        div#cp-sidebarlayout-rightside.cp-rightside-drive {
            padding: 0;
            & > .cp-team-chat {
                display: flex;
                height: 100%;
                margin: 0;
                .cp-app-contacts-container {
                    height: 100%;
                }
                .cp-app-contacts-input {
                    textarea {
                        border: 0px;
                        color: @cryptpad_text_col;
                    }
                }
            }
            & > .cp-team-drive {
                display: flex;
                height: 100%;
                margin: 0;
                .cp-app-drive-container {
                    height: 100%;
                }
            }
            .cp-limit-buttons {
                display: none;
            }
        }

        .cp-leftside-narrow {
            .cp-avatar {
                overflow: visible;
            }
        }
        .cp-team-cat-header {
            justify-content: center;
            .avatar_main(30px);
            .cp-avatar {
                justify-content: center;
                font-size: 20px;
            }
            media-tag, .cp-avatar-default {
                margin-right: 3px;
            }
            media-tag {
                order: -1;
            }
            cursor: default !important;
            font-size: 18px;
            &:hover {
                background-color: transparent !important;
            }
            span.cp-sidebarlayout-category-name {
                padding-left: 5px;
            }
        }
        .cp-team-cat-chat {
            span.cp-team-chat-notification {
                color: red;
            }
        }

        .cp-team-list {
            .cp-team-list-container {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                flex-wrap: wrap;
            }
            .cp-team-list-team {
                .tools_unselectable();
                background-color: @roster-bg-color;
                display: flex;
                align-items: center;
                flex-flow: column;
                width: 300px;
                max-width: 90%;
                height: 400px;
                padding: 20px;
                margin: 5px;
                .cp-team-list-avatar {
                    .avatar_main(200px);
                }
                .cp-team-list-name {
                    flex: 1;
                    min-width: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    max-width: 500px;
                    font-size: 25px;
                    display: inline-flex;
                    align-items: center;
                    &.empty {
                        white-space: initial;
                        text-align: center;
                    }
                }
                .cp-team-list-open {
                    width: 100%;
                }
            }
        }
        .cp-team-avatar {
            .avatar_main(300px);
            .cp-avatar img {
                max-width: 100%;
                max-height: 100%;
            }
        }
        .cp-team-roster {
            .avatar_main(50px);
            .cp-hidden {
                display: none;
            }
            .cp-app-team-roster-header {
                margin-bottom: 20px;
                button:not(:last-child) {
                    margin-right: 5px;
                }
            }
            .cp-team-roster-member {
                display: flex;
                align-items: center;
                margin: 5px;
                padding: 2px;
                max-width: 500px;
                background-color: @roster-bg-color;
                &:hover {
                    background-color: darken(@roster-bg-color, 5%);
                }
                .cp-avatar {
                    margin-right: 10px;
                }
                .cp-team-member-status {
                    margin-left: 5px;
                    width: 5px;
                    height: 50px;
                    display: inline-block;
                    background-color: red;
                    &.online {
                        background-color: green;
                    }
                }
                .cp-team-member-name {
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    .tools_unselectable();
                }
                .cp-team-member-actions {
                    .fa {
                        height: 25px;
                        width: 25px;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        &:hover {
                            background-color: darken(@roster-bg-color, 10%);
                        }
                    }
                }
            }
        }
        .cp-team-link {
            max-width: 550px;
            .cp-teams-invite-from {
                display: flex;
                margin-bottom: 20px;
                .cp-teams-invite-from-author {
                    display: flex;
                    margin-left: 10px;
                    .cp-teams-invite-from-avatar {
                        .avatar_main(25px);
                        margin: 0px 5px;
                    }
                }
            }
            .cp-teams-invite-message {
                background-color: fade(@colortheme_logo-2, 25%);
                color: @cryptpad_text_col;
                resize: none;
                width: 100%;
                padding: 12px;
                margin-bottom: 20px;
                white-space: pre;
            }
            .cp-teams-invite-password {
                margin-bottom: 20px;
            }
            i.fa.fa-spin.fa-spinner {
                margin-right: 10px;
            }
        }
    }

    #cp-teams-roster-dialog {
        table {
            width: 100%;
            table-layout: fixed;
            &.cp-teams-generic {
                margin-bottom: 30px;
                margin-top: 30px;
            }
            tr:nth-child(even) {
                background-color: fade(@colortheme_modal-dim, 25%);
            }
        }
        p {
            text-align: left;
        }
        h5 {
            text-align: left;
        }
        ul {
            text-align: left;
            padding-left: 30px;
        }
        li {
            font-weight: bold;
        }
    }
}

@import (reference) '../../customize/src/less2/include/framework.less';
@import (reference) '../../customize/src/less2/include/drive.less';
@import (reference) '../../customize/src/less2/include/messenger.less';
@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
@import (reference) "../../customize/src/less2/include/tools.less";
@import (reference) "../../customize/src/less2/include/colortheme.less";

&.cp-app-team {
    .framework_min_main(
        @bg-color: @colortheme_teams-bg,
        @warn-color: @colortheme_teams-warn,
        @color: @colortheme_teams-color
    );

    .drive_main();
    .messenger_main();
    .sidebar-layout_main();

    @roster-bg-color: #efefef;

    #cp-sidebarlayout-container {
        @media screen and (max-width: 900px) {
            .cp-app-drive-toolbar-leftside {
                .cp-dropdown-button-title span:last-child {
                    display: none;
                }
                .cp-toolbar-share-button span:last-child {
                    display: none;
                }
            }
        }
        div#cp-sidebarlayout-leftside {
            background-color: #e0e0e0;
        }
        div#cp-sidebarlayout-rightside.cp-rightside-drive {
            padding: 0;
            & > .cp-team-chat {
                display: flex;
                height: 100%;
                margin: 0;
                .cp-app-contacts-container {
                    height: 100%;
                }
                .cp-app-contacts-input {
                    textarea {
                        border: 0px;
                        color: white;
                    }
                }
            }
            & > .cp-team-drive {
                display: flex;
                height: 100%;
                margin: 0;
                .cp-app-drive-container {
                    height: 100%;
                }
            }
            .cp-limit-buttons {
                display: none;
            }
        }

        .cp-leftside-narrow {
            .cp-avatar {
                overflow: visible;
            }
        }
        .cp-team-cat-header {
            justify-content: center;
            .avatar_main(30px);
            .cp-avatar {
                justify-content: center;
                font-size: 20px;
            }
            media-tag, .cp-avatar-default {
                margin-right: 3px;
            }
            media-tag {
                order: -1;
            }
            cursor: default !important;
            font-size: 18px;
            &:hover {
                background-color: transparent !important;
            }
            span.cp-sidebarlayout-category-name {
                padding-left: 5px;
            }
        }
        .cp-team-cat-chat {
            span.cp-team-chat-notification {
                color: red;
            }
        }

        .cp-team-list {
            .cp-team-list-container {
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                flex-wrap: wrap;
            }
            .cp-team-list-team {
                .tools_unselectable();
                background-color: @roster-bg-color;
                display: flex;
                align-items: center;
                flex-flow: column;
                width: 300px;
                max-width: 90%;
                height: 400px;
                padding: 20px;
                margin: 5px;
                .cp-team-list-avatar {
                    .avatar_main(200px);
                }
                .cp-team-list-name {
                    flex: 1;
                    min-width: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    max-width: 500px;
                    font-size: 25px;
                    display: inline-flex;
                    align-items: center;
                    &.empty {
                        white-space: initial;
                        text-align: center;
                    }
                }
                .cp-team-list-open {
                    width: 100%;
                }
            }
        }
        .cp-team-avatar {
            .avatar_main(300px);
            .cp-avatar img {
                max-width: 100%;
                max-height: 100%;
            }
        }
        .cp-team-roster {
            .avatar_main(50px);
            .cp-hidden {
                display: none;
            }
            .cp-app-team-roster-header {
                margin-bottom: 20px;
                button:not(:last-child) {
                    margin-right: 5px;
                }
            }
            .cp-team-roster-member {
                display: flex;
                align-items: center;
                margin: 5px;
                padding: 2px;
                max-width: 500px;
                background-color: @roster-bg-color;
                &:hover {
                    background-color: darken(@roster-bg-color, 5%);
                }
                .cp-avatar {
                    margin-right: 10px;
                }
                .cp-team-member-status {
                    margin-left: 5px;
                    width: 5px;
                    height: 50px;
                    display: inline-block;
                    background-color: red;
                    &.online {
                        background-color: green;
                    }
                }
                .cp-team-member-name {
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    .tools_unselectable();
                }
                .cp-team-member-actions {
                    .fa {
                        height: 25px;
                        width: 25px;
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        &:hover {
                            background-color: darken(@roster-bg-color, 10%);
                        }
                    }
                }
            }
        }
        .cp-team-link {
            max-width: 550px;
            .cp-teams-invite-from {
                display: flex;
                margin-bottom: 20px;
                .cp-teams-invite-from-author {
                    display: flex;
                    margin-left: 10px;
                    .cp-teams-invite-from-avatar {
                        .avatar_main(25px);
                        margin: 0px 5px;
                    }
                }
            }
            .cp-teams-invite-message {
                background-color: fade(@colortheme_logo-2, 25%);
                color: @cryptpad_text_col;
                resize: none;
                width: 100%;
                padding: 12px;
                margin-bottom: 20px;
                white-space: pre;
            }
            .cp-teams-invite-password {
                margin-bottom: 20px;
            }
            i.fa.fa-spin.fa-spinner {
                margin-right: 10px;
            }
        }
    }

    #cp-teams-roster-dialog {
        table {
            width: 100%;
            table-layout: fixed;
            &.cp-teams-generic {
                margin-bottom: 30px;
                margin-top: 30px;
            }
            tr:nth-child(even) {
                background-color: fade(@colortheme_modal-dim, 25%);
            }
        }
        p {
            text-align: left;
        }
        h5 {
            text-align: left;
        }
        ul {
            text-align: left;
            padding-left: 30px;
        }
        li {
            font-weight: bold;
        }
    }
}


Pull request #1588: BI-76759 按视觉要求改一下灰化边框色

Merge in VISUAL/fineui from ~WINDY/fui:master to master

* commit 'f60851b8c5c0e8ef90a722f5c4cbc4d76f046b77':
  无JIRA任务 按视觉要求改一下灰化边框色

//常量库

//classified

//
@font-size-12: 12px;
@font-size-13: 13px;
@font-size-14: 14px;
@font-size-15: 15px;
@font-size-16: 16px;
@font-size-18: 18px;
@font-size-20: 20px;
@font-size-22: 22px;
@font-size-24: 24px;
@font-size-30: 30px;
@font-size-40: 40px;
@font-size-50: 50px;
@font-size-60: 60px;
@font-size-70: 70px;
@radius-2: 2px;
@radius-6: 6px;

@opacity-15: 0.15;
@opacity-20: 0.2;

//font color
@font-color-black: #232e40;
@font-color-normal: #3d4d66;
@font-color-normal-theme-dark: #d6e0dc;
@font-color-light-gray: #647185;
@font-color-light-gray-theme-dark: #afb7c6;
@font-color-disabled: #9ea6b2;
@font-color-disabled-theme-dark: #878d9f;
@font-color-tips: #9ea6b2;
@font-color-tips-theme-dark: #6b7084;
@font-color-light-disabled: #d0d4da;
@font-color-light-disabled-theme-dark: #606479;
@font-color-gray: #999999;
@font-color-white: #ffffff;
@font-color-white-theme-dark: #20263b;
@font-color-light-highlight: #eaf2fd;
@font-color-medium-highlight: #d7e7fc;
@font-color-highlight: #3685f2;
@font-color-blue: #23beef;
@font-color-light-blue: #e9f8fd;
@font-color-success: #13cd66;
@font-color-warning: #faaa39;
@font-color-negative: #e65251;
@font-color-yellow: #ffc101;

//background color
@background-color-black: #232E40;
@background-color-black-theme-dark: #606479;
@background-color-light-black: #3d4d66;
@background-color-light-black-theme-dark: #d6e0dc;
@background-color-default: #ffffff;
@background-color-default-theme-dark: #20263b;
@background-color-normal: #f7f8fa;
@background-color-normal-theme-dark: #191b2b;
@background-color-light-highlight: #eaf2fd;
@background-color-medium-highlight: #d7e7fc;
@background-color-highlight: #3685f2;
@background-color-blue: #23beef;
@background-color-light-blue: #e9f8fd;
@background-color-dark: #d4dadd;
@background-color-light-gray: #f2f4f7;
@background-color-light-gray-theme-dark: #292f45;
@background-color-medium-gray: #e8eaed;
@background-color-medium-gray-theme-dark: #363e55;
@background-color-dark-gray: #d0d4da;
@background-color-dark-gray-theme-dark: #606479;
@background-color-disabled: #f2f4f7;
@background-color-disabled-theme-dark: #292f45;
@background-color-light-disabled: #9ea6b2;
@background-color-light-disabled-theme-dark: #878d9f;
@background-color-yellow: #ffc101;

@background-color-negative: #e65251;
@background-color-light-negative: #ffecec;
@background-color-dark-negative: #3A2940;
@background-color-light-warning: #feeed7;
@background-color-warning: #faaa39;

@background-color-dark-success: #13cd66;
@background-color-light-success: #e1f4e7;
@background-color-normal-success: #647185;

//border color
@border-color-default: #ffffff;
@border-color-black: #232e40;
@border-color-line: #e8eaed;
@border-color-line-theme-dark: #363e55;
@border-color-light-line: #f2f4f7;
@border-color-light-line-theme-dark: #292f45;
@border-color-dark-line: #9EA6B2;
@border-color-dark-line-theme-dark: #878D9F;
@border-color-highlight: #3685f2;

@border-color-warning: #fbb03b;
@border-color-negative: #e65251;
@border-color-success: #13cd66;
@border-color-light-negative: #f4cbcb;
@border-color-normal-success: #eddea2;

//split color
@border-color-disabled: #e8eaed;
@border-color-disabled-theme-dark: #363e55;

//scroll color
@scroll-color: #232e40;
@scroll-color-theme-dark: #ffffff;
@scroll-thumb-color: #232e40;
@scroll-thumb-color-theme-dark: #232e40;

@water-mark-color-theme-dark: #878d9f;

//常量库

//classified

//
@font-size-12: 12px;
@font-size-13: 13px;
@font-size-14: 14px;
@font-size-15: 15px;
@font-size-16: 16px;
@font-size-18: 18px;
@font-size-20: 20px;
@font-size-22: 22px;
@font-size-24: 24px;
@font-size-30: 30px;
@font-size-40: 40px;
@font-size-50: 50px;
@font-size-60: 60px;
@font-size-70: 70px;
@radius-2: 2px;
@radius-6: 6px;

@opacity-15: 0.15;
@opacity-20: 0.2;

//font color
@font-color-black: #232e40;
@font-color-normal: #3d4d66;
@font-color-normal-theme-dark: #d6e0dc;
@font-color-light-gray: #647185;
@font-color-light-gray-theme-dark: #afb7c6;
@font-color-disabled: #9ea6b2;
@font-color-disabled-theme-dark: #878d9f;
@font-color-tips: #9ea6b2;
@font-color-tips-theme-dark: #6b7084;
@font-color-light-disabled: #d0d4da;
@font-color-light-disabled-theme-dark: #606479;
@font-color-gray: #999999;
@font-color-white: #ffffff;
@font-color-white-theme-dark: #20263b;
@font-color-light-highlight: #eaf2fd;
@font-color-medium-highlight: #d7e7fc;
@font-color-highlight: #3685f2;
@font-color-blue: #23beef;
@font-color-light-blue: #e9f8fd;
@font-color-success: #13cd66;
@font-color-warning: #faaa39;
@font-color-negative: #e65251;
@font-color-yellow: #ffc101;

//background color
@background-color-black: #232E40;
@background-color-black-theme-dark: #606479;
@background-color-light-black: #3d4d66;
@background-color-light-black-theme-dark: #d6e0dc;
@background-color-default: #ffffff;
@background-color-default-theme-dark: #20263b;
@background-color-normal: #f7f8fa;
@background-color-normal-theme-dark: #191b2b;
@background-color-light-highlight: #eaf2fd;
@background-color-medium-highlight: #d7e7fc;
@background-color-highlight: #3685f2;
@background-color-blue: #23beef;
@background-color-light-blue: #e9f8fd;
@background-color-dark: #d4dadd;
@background-color-light-gray: #f2f4f7;
@background-color-light-gray-theme-dark: #292f45;
@background-color-medium-gray: #e8eaed;
@background-color-medium-gray-theme-dark: #363e55;
@background-color-dark-gray: #d0d4da;
@background-color-dark-gray-theme-dark: #606479;
@background-color-disabled: #f2f4f7;
@background-color-disabled-theme-dark: #292f45;
@background-color-light-disabled: #9ea6b2;
@background-color-light-disabled-theme-dark: #878d9f;
@background-color-yellow: #ffc101;

@background-color-negative: #e65251;
@background-color-light-negative: #ffecec;
@background-color-dark-negative: #3A2940;
@background-color-light-warning: #feeed7;
@background-color-warning: #faaa39;

@background-color-dark-success: #13cd66;
@background-color-light-success: #e1f4e7;
@background-color-normal-success: #647185;

//border color
@border-color-default: #ffffff;
@border-color-black: #232e40;
@border-color-line: #e8eaed;
@border-color-line-theme-dark: #363e55;
@border-color-light-line: #f2f4f7;
@border-color-light-line-theme-dark: #292f45;
@border-color-dark-line: #9EA6B2;
@border-color-dark-line-theme-dark: #878D9F;
@border-color-highlight: #3685f2;

@border-color-warning: #fbb03b;
@border-color-negative: #e65251;
@border-color-success: #13cd66;
@border-color-light-negative: #f4cbcb;
@border-color-normal-success: #eddea2;

//split color
@border-color-disabled: #d0d4da;
@border-color-disabled-theme-dark: #606479;

//scroll color
@scroll-color: #232e40;
@scroll-color-theme-dark: #ffffff;
@scroll-thumb-color: #232e40;
@scroll-thumb-color-theme-dark: #232e40;

@water-mark-color-theme-dark: #878d9f;


Fixed course ID display in visual schedule

// ======================================================
// Variables
// ======================================================
@import "mixins.less";
@import "variables.less";
@import "variables-override.less";
@import "font-awesome.less";

// ======================================================
// Accordion
// ======================================================
.accordion-group {
  /*border-left:5px solid @grayLighter;
  border-top:1px solid @grayLighter;
  border-bottom: 1px solid @grayLighter;*/
  border-right: 0px;

  h3 {
    color:@white;
    padding-top: 3px;
    text-transform:uppercase;
    font-weight:normal;
    line-height: 1.1em;

  }
  .border-radius(0px);
}

.accordion-heading {

  border-bottom: 0;
  /*border-right:1px solid #e5e5e5;*/

  a {
    color:@white;
    font-size: 1.5em;
  	}

 }

   a:hover {text-decoration: none;}

.courseBorder (@color) {
  border-left:5px solid @color;
  border-top:1px solid @color;
  border-bottom: 5px solid @color;
}

.c1 {
 background-color:@courseOrange;
}
.c1a {
 background-color:@courseOrange;
}
.c2 {
 background-color:@courseGreen;
}
.c2a {
 background-color:@courseGreen;
}
.c3 {
  background-color: @courseBlue;
}
.c3a {
  background-color: @courseBlue;
}
.c4{
  background-color: @courseRed;
}
.c4a{
  background-color: @courseRed;
}
.c5{
  background-color: @courseBrown;
}
.c5a{
  background-color: @courseBrown;
}
.c6{
  background-color: @coursePurple;
}
.c6a{
  background-color: @coursePurple;
}
.c7{
  background-color: @courseGold;
}
.c7a{
  background-color: @courseGold;
}
.c8{
  background-color: @courseTeal;
}
.c8a{
  background-color: @courseTeal;
}

.c1Border {
  .courseBorder(@courseOrange);
}
.c1aBorder {
  .courseBorder(@courseOrange);
}
.c2Border {
  .courseBorder(@courseGreen);
}
.c2aBorder {
  .courseBorder(@courseGreen);
}

.c3Border {
  .courseBorder(@courseBlue);
}
.c3aBorder {
  .courseBorder(@courseBlue);
}

.c4Border {
  .courseBorder(@courseRed);
}
.c4aBorder {
  .courseBorder(@courseRed);
}

.c5Border {
  .courseBorder(@courseBrown);
}
.c5aBorder {
  .courseBorder(@courseBrown);
}

.c6Border {
  .courseBorder(@coursePurple);
}
.c6aBorder {
  .courseBorder(@coursePurple);
}

.c7Border {
  .courseBorder(@courseGold);
}
.c7aBorder {
  .courseBorder(@courseGold);
}

.c8Border {
  .courseBorder(@courseTeal);
}
.c8aBorder {
  .courseBorder(@courseTeal);
}

.accordion-heading .accordion-toggle {
  padding: 0px 10px;
}

.accordion-inner {
  padding: 9px 10px;
  background-color:@myuw;
}

// ======================================================
// buttons
// ======================================================
.btn-visual {
  margin-top:-8px;
  font-weight:normal;
  height: 2em;
  padding-top: .75em;
  padding-bottom: 2px;
}

// ======================================================
// navbar
// ======================================================

.navbar-inner {
//  #gradient > .vertical(lighten(@navbarBackground,5%), darken(@navbarBackgroundHighlight,3%));
  #gradient > .vertical(@uwpurple, @uwpurple);
}

.navbar .btn {
@elementHeight: 28px;
  margin: ((@navbarHeight - @elementHeight) / 2 - 5) 5px ((@navbarHeight - @elementHeight) / 2 - 4);
}

// Active nav items
.navbar .nav .active > a {
  #translucent > .background(@uwLighter, .2);
  border: 1px solid @grayDarker;
  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.15)");

}

.navbar .nav .logout > a {
  //#translucent > .background(@uwLighter, .2);
  //#gradient > .vertical(lighten(@navbarBackground,15%), lighten(@navbarBackgroundHighlight,2%));
  border: 1px solid @grayDarker;

  //.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.3)");

}
// Navbar button for toggling navbar items in responsive layouts
// These definitions need to come after '.navbar .btn'
.navbar .btn-navbar {
  padding: 12px 12px;
  .buttonBackground(lighten(@uwpurple,3%), lighten(@uwpurple,15%));
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0px 1px 0 rgba(255,255,255,.125)");
}

.navbar .btn-navbar .icon-bar {
  height: 3px;
  .border-radius(1.5px);
}

.navbar-fixed-top,
.navbar-static-top {
  .navbar-inner {
    //.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
    .box-shadow(~"0 1px 3px .5px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.1)");
  }
}

.navbar .nav > li > a {
  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}
//create collapsed nav
body {
    padding-top: 0;
  }
  // Unfix the navbars
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    position: static;
  }
  .navbar-fixed-top {
    margin-bottom: @baseLineHeight;
  }
  .navbar-fixed-bottom {
    margin-top: @baseLineHeight;
  }
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
    padding: 5px;
  }
  .navbar .container {
    width: auto;
    padding: 0;
  }
  // Account for brand name
  .navbar .brand {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 0 0 -5px;
  }

  // COLLAPSIBLE NAVBAR
  // ------------------
  // Nav collapse clears brand
  .nav-collapse {
    clear: both;
  }
  // Block-level the nav
  .nav-collapse .nav {
    float: none;
    margin: 0 0 (@baseLineHeight / 2);
  }
  .nav-collapse .nav > li {
    float: none;
  }
  .nav-collapse .nav > li > a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > .divider-vertical {
    display: none;
  }
  .nav-collapse .nav .nav-header {
    color: @navbarText;
    text-shadow: none;
  }
  // Nav and dropdown links in navbar
  .nav-collapse .nav > li > a,
  .nav-collapse .dropdown-menu a {
    padding: 9px 15px;
    font-weight: bold;
    color: @navbarLinkColor;
    .border-radius(3px);
  }
  // Buttons
  .nav-collapse .btn {
    padding: 4px 10px 4px;
    font-weight: normal;
    .border-radius(4px);
  }
  .nav-collapse .dropdown-menu li + li a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > li > a:hover,
  .nav-collapse .dropdown-menu a:hover {
    background-color: @navbarBackground;
  }
  .navbar-inverse .nav-collapse .nav > li > a:hover,
  .navbar-inverse .nav-collapse .dropdown-menu a:hover {
    background-color: @navbarInverseBackground;
  }
  // Buttons in the navbar
  .nav-collapse.in .btn-group {
    margin-top: 5px;
    padding: 0;
  }
  // Dropdowns in the navbar
  .nav-collapse .dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    float: none;
    display: block;
    max-width: none;
    margin: 0 15px;
    padding: 0;
    background-color: transparent;
    border: none;
    .border-radius(0);
    .box-shadow(none);
  }
  .nav-collapse .dropdown-menu:before,
  .nav-collapse .dropdown-menu:after {
    display: none;
  }
  .nav-collapse .dropdown-menu .divider {
    display: none;
  }
  // Forms in navbar
  .nav-collapse .navbar-form,
  .nav-collapse .navbar-search {
    float: none;
    padding: (@baseLineHeight / 2) 15px;
    margin: (@baseLineHeight / 2) 0;
    border-top: 1px solid @navbarBackground;
    border-bottom: 1px solid @navbarBackground;
    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
  }
  // Pull right (secondary) nav content
  .navbar .nav-collapse .nav.pull-right {
    float: none;
    margin-left: 0;
  }
  // Hide everything in the navbar save .brand and toggle button
  .nav-collapse,
  .nav-collapse.collapse {
    overflow: hidden;
    height: 0;
  }
  // Navbar button
  .navbar .btn-navbar {
    display: block;
  }

  // STATIC NAVBAR
  // -------------
  .navbar-static .navbar-inner {
    padding-left:  10px;
    padding-right: 10px;
  }

/*
.navbar .nav > a {
	&:last-child {
  color: @yellow;
}
}*/

// ======================================================
// tables
// ======================================================

.table-meeting  {
  width: 98%;
  border-collapse: separate; // Done so we can round those corners!
  *border-collapse: collapsed; // IE7 can't round corners anyway
  min-height: 20px;
  //margin-bottom: 5px;
  margin: 5px 1% 5px 1%;
  background-color: @bodyAccent;
  border: 1px solid #eee;
  border: 1px solid rgba(0,0,0,.09);
  .border-radius(2px);
 .box-shadow(inset 1px 1px 5px rgba(0,0,0,.05));
  td {
    line-height: @baseLineHeight - 2;
    padding: 5px 4px;
    border-bottom: 1px solid #eee;
 	border-bottom: 1px solid rgba(0,0,0,.03);
  }

  tbody:first-child tr:last-child td {
    border-bottom: 0;
  }
  td:nth-child(2) {
    text-align: center;
  }
  td:last-child {
    text-align: right;
  }

}

// ======================================================
// type
// ======================================================
// Body Text
a {
	font-size: @baseFontSize + 3;
}

//Headings

.scheduleHeading {
  font-weight: bold;
  line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
}

// Page header
.page-header {
  padding-bottom: 5px;
  margin: 15px 0;
  border: none;
	h1 {
  		line-height: 1;
	}

	h2 {
		  font-size: 18px;
		  padding-left: 5px;
		  border-left: 5px solid @yellow;
		  line-height: 26px;
  	small {
    font-size: 18px;
  	}
	}
}
//Lists
ul.unstyled,
ol.unstyled {
  	li.additional {line-height: @baseLineHeight * 1.5;}
}
	li.inline {display:inline;}

.dl-horizontal {
  dt {
  	//width: 20px;
    margin-bottom:5px;
  }
  dd {
    margin-bottom:10px;
  }
}
// ======================================================
// custom Styles
// ======================================================
.courseIDtitle {
  padding-right:10px;
  font-size: 28px;
  line-height: .8;
  display: block;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.1), 1px 1px rgba(255,255,255,.2);
}

.shortTitle {
  margin-top: 3px;
  white-space: nowrap;
  font-size: 16px;

}
.visual-schedule {
	width: 100% ;
	//margin-left: -10px;
	//border: 1px solid red;
	height: 20em;
	position:relative;
	background-color: @grayLighter;
	.clearfix();
}

@time-bar-width: 8%;
.time-bar {
	height: 100%;
	width: @time-bar-width;
	//border: 1px solid orange;
	position: relative;
	display:inline-block;
	float: left;
	background-color: @grayLighter;
	font-weight: bold;
//	padding-left: 1px;
}
.time-bar > p {

}
.five-day {
	width:19%;
	height:100%;
	border: 1px solid black;
	position: relative;
	display:inline-block;
	float: left;
	color: @white;
}

.six-day {
	width: (97% - 5) / 6;
	//width: 14%;
	height:100%;
	//border-right: 1px inset black;
	position: relative;
	display: inline-block;
	//margin-left:-5px;
	float: left;
	color: @white;

	p {color:#333;}
}
.six-day:last-child, .five-day:last-child {
	border-right: none;

}

.six-day:nth-of-type(even),fice-day:nth-of-type(odd) {

	background-color: darken(@grayLighter,3%);
}

.day-label {
	width:100%;
	border-bottom: 1px solid @grayLight;
	height:7%;
	top:0px;
}
.day-label > p {
	text-align: center;
}
.visual-course {
	width: 100%;
	.border-radius(2px);
	//padding: 3px;
	text-align: center;
	font-size: 12px;
}
.show_section_details {
	font-size: 12px;
}
// ======================================================
// utilities
// ======================================================
.pull-right-center {

  float: right;
  font-size:30px;
  position: relative;
  top: 15px;
  right: 3px;

}

.container-fluid {
  padding-right: 10px;
  padding-left: 10px;
  .clearfix();
}

// ======================================================
// Variables
// ======================================================
@import "mixins.less";
@import "variables.less";
@import "variables-override.less";
@import "font-awesome.less";

// ======================================================
// Accordion
// ======================================================
.accordion-group {
  /*border-left:5px solid @grayLighter;
  border-top:1px solid @grayLighter;
  border-bottom: 1px solid @grayLighter;*/
  border-right: 0px;

  h3 {
    color:@white;
    padding-top: 3px;
    text-transform:uppercase;
    font-weight:normal;
    line-height: 1.1em;

  }
  .border-radius(0px);
}

.accordion-heading {

  border-bottom: 0;
  /*border-right:1px solid #e5e5e5;*/

  a {
    color:@white;
    font-size: 1.5em;
  	}

 }

   a:hover {text-decoration: none;}

.courseBorder (@color) {
  border-left:5px solid @color;
  border-top:1px solid @color;
  border-bottom: 5px solid @color;
}

.c1 {
 background-color:@courseOrange;
}
.c1a {
 background-color:@courseOrange;
}
.c2 {
 background-color:@courseGreen;
}
.c2a {
 background-color:@courseGreen;
}
.c3 {
  background-color: @courseBlue;
}
.c3a {
  background-color: @courseBlue;
}
.c4{
  background-color: @courseRed;
}
.c4a{
  background-color: @courseRed;
}
.c5{
  background-color: @courseBrown;
}
.c5a{
  background-color: @courseBrown;
}
.c6{
  background-color: @coursePurple;
}
.c6a{
  background-color: @coursePurple;
}
.c7{
  background-color: @courseGold;
}
.c7a{
  background-color: @courseGold;
}
.c8{
  background-color: @courseTeal;
}
.c8a{
  background-color: @courseTeal;
}

.c1Border {
  .courseBorder(@courseOrange);
}
.c1aBorder {
  .courseBorder(@courseOrange);
}
.c2Border {
  .courseBorder(@courseGreen);
}
.c2aBorder {
  .courseBorder(@courseGreen);
}

.c3Border {
  .courseBorder(@courseBlue);
}
.c3aBorder {
  .courseBorder(@courseBlue);
}

.c4Border {
  .courseBorder(@courseRed);
}
.c4aBorder {
  .courseBorder(@courseRed);
}

.c5Border {
  .courseBorder(@courseBrown);
}
.c5aBorder {
  .courseBorder(@courseBrown);
}

.c6Border {
  .courseBorder(@coursePurple);
}
.c6aBorder {
  .courseBorder(@coursePurple);
}

.c7Border {
  .courseBorder(@courseGold);
}
.c7aBorder {
  .courseBorder(@courseGold);
}

.c8Border {
  .courseBorder(@courseTeal);
}
.c8aBorder {
  .courseBorder(@courseTeal);
}

.accordion-heading .accordion-toggle {
  padding: 0px 10px;
}

.accordion-inner {
  padding: 9px 10px;
  background-color:@myuw;
}

// ======================================================
// buttons
// ======================================================
.btn-visual {
  margin-top:-8px;
  font-weight:normal;
  height: 2em;
  padding-top: .75em;
  padding-bottom: 2px;
}

// ======================================================
// navbar
// ======================================================

.navbar-inner {
//  #gradient > .vertical(lighten(@navbarBackground,5%), darken(@navbarBackgroundHighlight,3%));
  #gradient > .vertical(@uwpurple, @uwpurple);
}

.navbar .btn {
@elementHeight: 28px;
  margin: ((@navbarHeight - @elementHeight) / 2 - 5) 5px ((@navbarHeight - @elementHeight) / 2 - 4);
}

// Active nav items
.navbar .nav .active > a {
  #translucent > .background(@uwLighter, .2);
  border: 1px solid @grayDarker;
  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.15)");

}

.navbar .nav .logout > a {
  //#translucent > .background(@uwLighter, .2);
  //#gradient > .vertical(lighten(@navbarBackground,15%), lighten(@navbarBackgroundHighlight,2%));
  border: 1px solid @grayDarker;

  //.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.3)");

}
// Navbar button for toggling navbar items in responsive layouts
// These definitions need to come after '.navbar .btn'
.navbar .btn-navbar {
  padding: 12px 12px;
  .buttonBackground(lighten(@uwpurple,3%), lighten(@uwpurple,15%));
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0px 1px 0 rgba(255,255,255,.125)");
}

.navbar .btn-navbar .icon-bar {
  height: 3px;
  .border-radius(1.5px);
}

.navbar-fixed-top,
.navbar-static-top {
  .navbar-inner {
    //.box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)");
    .box-shadow(~"0 1px 3px .5px rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.1)");
  }
}

.navbar .nav > li > a {
  text-shadow: 0 1px 0 @navbarBackgroundHighlight;
}
//create collapsed nav
body {
    padding-top: 0;
  }
  // Unfix the navbars
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    position: static;
  }
  .navbar-fixed-top {
    margin-bottom: @baseLineHeight;
  }
  .navbar-fixed-bottom {
    margin-top: @baseLineHeight;
  }
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
    padding: 5px;
  }
  .navbar .container {
    width: auto;
    padding: 0;
  }
  // Account for brand name
  .navbar .brand {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 0 0 -5px;
  }

  // COLLAPSIBLE NAVBAR
  // ------------------
  // Nav collapse clears brand
  .nav-collapse {
    clear: both;
  }
  // Block-level the nav
  .nav-collapse .nav {
    float: none;
    margin: 0 0 (@baseLineHeight / 2);
  }
  .nav-collapse .nav > li {
    float: none;
  }
  .nav-collapse .nav > li > a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > .divider-vertical {
    display: none;
  }
  .nav-collapse .nav .nav-header {
    color: @navbarText;
    text-shadow: none;
  }
  // Nav and dropdown links in navbar
  .nav-collapse .nav > li > a,
  .nav-collapse .dropdown-menu a {
    padding: 9px 15px;
    font-weight: bold;
    color: @navbarLinkColor;
    .border-radius(3px);
  }
  // Buttons
  .nav-collapse .btn {
    padding: 4px 10px 4px;
    font-weight: normal;
    .border-radius(4px);
  }
  .nav-collapse .dropdown-menu li + li a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > li > a:hover,
  .nav-collapse .dropdown-menu a:hover {
    background-color: @navbarBackground;
  }
  .navbar-inverse .nav-collapse .nav > li > a:hover,
  .navbar-inverse .nav-collapse .dropdown-menu a:hover {
    background-color: @navbarInverseBackground;
  }
  // Buttons in the navbar
  .nav-collapse.in .btn-group {
    margin-top: 5px;
    padding: 0;
  }
  // Dropdowns in the navbar
  .nav-collapse .dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    float: none;
    display: block;
    max-width: none;
    margin: 0 15px;
    padding: 0;
    background-color: transparent;
    border: none;
    .border-radius(0);
    .box-shadow(none);
  }
  .nav-collapse .dropdown-menu:before,
  .nav-collapse .dropdown-menu:after {
    display: none;
  }
  .nav-collapse .dropdown-menu .divider {
    display: none;
  }
  // Forms in navbar
  .nav-collapse .navbar-form,
  .nav-collapse .navbar-search {
    float: none;
    padding: (@baseLineHeight / 2) 15px;
    margin: (@baseLineHeight / 2) 0;
    border-top: 1px solid @navbarBackground;
    border-bottom: 1px solid @navbarBackground;
    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
  }
  // Pull right (secondary) nav content
  .navbar .nav-collapse .nav.pull-right {
    float: none;
    margin-left: 0;
  }
  // Hide everything in the navbar save .brand and toggle button
  .nav-collapse,
  .nav-collapse.collapse {
    overflow: hidden;
    height: 0;
  }
  // Navbar button
  .navbar .btn-navbar {
    display: block;
  }

  // STATIC NAVBAR
  // -------------
  .navbar-static .navbar-inner {
    padding-left:  10px;
    padding-right: 10px;
  }

/*
.navbar .nav > a {
	&:last-child {
  color: @yellow;
}
}*/

// ======================================================
// tables
// ======================================================

.table-meeting  {
  width: 98%;
  border-collapse: separate; // Done so we can round those corners!
  *border-collapse: collapsed; // IE7 can't round corners anyway
  min-height: 20px;
  //margin-bottom: 5px;
  margin: 5px 1% 5px 1%;
  background-color: @bodyAccent;
  border: 1px solid #eee;
  border: 1px solid rgba(0,0,0,.09);
  .border-radius(2px);
 .box-shadow(inset 1px 1px 5px rgba(0,0,0,.05));
  td {
    line-height: @baseLineHeight - 2;
    padding: 5px 4px;
    border-bottom: 1px solid #eee;
 	border-bottom: 1px solid rgba(0,0,0,.03);
  }

  tbody:first-child tr:last-child td {
    border-bottom: 0;
  }
  td:nth-child(2) {
    text-align: center;
  }
  td:last-child {
    text-align: right;
  }

}

// ======================================================
// type
// ======================================================
// Body Text
a {
	font-size: @baseFontSize + 3;
}

//Headings

.scheduleHeading {
  font-weight: bold;
  line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
}

// Page header
.page-header {
  padding-bottom: 5px;
  margin: 15px 0;
  border: none;
	h1 {
  		line-height: 1;
	}

	h2 {
		  font-size: 18px;
		  padding-left: 5px;
		  border-left: 5px solid @yellow;
		  line-height: 26px;
  	small {
    font-size: 18px;
  	}
	}
}
//Lists
ul.unstyled,
ol.unstyled {
  	li.additional {line-height: @baseLineHeight * 1.5;}
}
	li.inline {display:inline;}

.dl-horizontal {
  dt {
  	//width: 20px;
    margin-bottom:5px;
  }
  dd {
    margin-bottom:10px;
  }
}
// ======================================================
// custom Styles
// ======================================================
.courseIDtitle {
  padding-right:10px;
  font-size: 28px;
  line-height: .8;
  display: block;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.1), 1px 1px rgba(255,255,255,.2);
}

.shortTitle {
  margin-top: 3px;
  white-space: nowrap;
  font-size: 16px;

}
.visual-schedule {
	width: 100% ;
	//margin-left: -10px;
	//border: 1px solid red;
	height: 20em;
	position:relative;
	background-color: @grayLighter;
	.clearfix();
}

@time-bar-width: 8%;
.time-bar {
	height: 100%;
	width: @time-bar-width;
	//border: 1px solid orange;
	position: relative;
	display:inline-block;
	float: left;
	background-color: darken(@grayLighter,3%);
	font-weight: bold;
//	padding-left: 1px;
}
.time-bar > p {

}
.five-day {
	width:19%;
	height:100%;
	border: 1px solid black;
	position: relative;
	display:inline-block;
	float: left;
	color: @white;
}

.six-day {
	width: (97% - 5) / 6;
	//width: 14%;
	height:100%;
	//border-right: 1px inset black;
	position: relative;
	display: inline-block;
	//margin-left:-5px;
	float: left;
	color: @white;

	p {color:#333;}
}
.six-day:last-child, .five-day:last-child {
	border-right: none;

}
/*
.six-day:nth-of-type(even),fice-day:nth-of-type(odd) {

	background-color: darken(@grayLighter,3%);
}*/

.day-label {
	width:100%;
	border-bottom: 1px solid @grayLight;
	height:7%;
	top:0px;
}
.day-label > p {
	text-align: center;
}
.visual-course {
	width: 100%;
	.border-radius(2px);
	//padding: 3px;
	text-align: center;
	font-size: 12px;
}
// ======================================================
// utilities
// ======================================================
.pull-right-center {

  float: right;
  font-size:30px;
  position: relative;
  top: 15px;
  right: 3px;

}

.container-fluid {
  padding-right: 10px;
  padding-left: 10px;
  .clearfix();
}


Added blockquote styling.

Added blockquote styling.

@import "/packages/c2o-core/client/stylesheets/core.lessimport";
@import "/packages/c2o-tumblrfeed/client/stylesheets/tumblrfeed.lessimport";
@import "icons.lessimport";

@gray-lightest:         #F4F4F4;

@brand-primary:         #FF7700;

@orange:                #FF7700;
@orange-light:          lighten(@orange, 10%);
@yellow:                #FFCC00;
@yellow-light:          lighten(@yellow, 10%);
@yellow-lighter:        lighten(@yellow, 43%);

@link-color:            @orange;
@btn-primary-bg:        #FF6600;
@btn-primary-bg-hl:     darken(@btn-primary-bg, 10%);

@sidebar-color:         #CCCCCC;
@sidebar-bg:            #454545;

// Custom mixins

.link(@color: @link-color, @hover-color: darken(@link-color, 10%)) {
  color: @color;
  .transition(color 200ms ease-in);

  &:hover {
    color: @hover-color;
  }
}

.curly-box-shadow {
  position: relative;
  &:before,
  &:after {
    position: absolute;
    bottom: 18px;
    left: 5px;
    z-index: -1;
    width: 80%;
    height: 20%;
    content: "";
    .rotate(-2deg);
    .box-shadow(0 15px 10px rgba(0, 0, 0, 0.7));
  }
  &:after {
    right: 5px;
    left: auto;
    .rotate(2deg);
  }
}

// Reusable classes UNDER CONSTRUCTION

.bl {
  display: block;
  color: @gray;
  text-decoration: none;
}

.block {
  display: block;
}

a.block {
  position: relative;
  display: block;
  margin: 10px -10px;
  padding: 10px;
  border-radius: 5px;
  .link(@text-color, @text-color);
  .clearfix();

  h4 {
    margin-top: 5px;
  }
}

a.block:hover {
  background-color: @gray-lightest;
  text-decoration: none;
}

// Bootstrap overrides

img {
  max-width: 100%;
}

time {
  color: @gray-light;
}

.btn {
  border-radius: 3px;
  .box-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
}

.jumbotron {
  color: #EFEFEF;
  background-color: #333;
  @media (max-width: @screen-sm) {
    padding: 30px 0;
  }
}

.header {
  margin-top: 0;
}

.subhead {
  //margin-top: 40px;
}

// Type

h1, h2, h3, h4 {
  font-family: @font-family-sans-serif;
}

.lead {
  font-weight: 300;
  font-size: 24px;
  line-height: 36px;
}

// Layout

header {
  height: 40px;
}

header {
  padding-left: 0;
  padding-right: 0;
  background-color: #333;
}

blockquote {
  margin-bottom: 0;
  font-size: 24px;
  font-style: italic;
}

#login-buttons {
  float: right;
}

#layout {
  background-color: #fff;
}

.masthead .lead {
  margin-top: 10%;
  margin-bottom: 0;
}

.masthead h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
}

.tag.selected {
  background-color: #121212;
}

#icons-home i {
  float: left;
  margin: 0 10px 10px 0;
  width: 64px;
  height: 64px;
  background-image: url('/images/sprite_home.png');
  background-position: 0 0;
}

#icons-home i.icon-work {
  background-position: 0 0;
}

#icons-home i.icon-method {
  background-position: 0 -64px;
}

#icons-home i.icon-lab {
  background-position: 0 -128px;
}

#icons-home i.icon-about {
  background-position: 0 -192px;
}

#icons-home i.icon-contact {
  background-position: 0 -256px;
}

/* PACKAGE OVERRIDES */

#masthead-home {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  min-height: 480px;
  margin-bottom: 20px;
  background: url('/images/bg_home.jpg') center center no-repeat;
  background-size: cover;

  h1,
  .lead {
    padding: 0 5px;
    background-color: #121212;
    color: #FFFFFF;
    opacity: .7;
    //color: @white;
    //text-shadow: -3px 0 #171717, 0 3px #171717, 3px 0 #171717, 0 -3px #171717;
  }
}

.view-home {
  h2 {
    margin-bottom: 20px;

  }

  #expertise .block {
    margin-bottom: 20px;
    padding: 10px;
    color: #FFF;
    background-color: #333;
    border: solid 1px @gray-light;
    //border-radius: 10px;

    h4 {
      margin-top: 0;
    }
  }
}

.view-expertise {
  h5,
  ul {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.view-work {
  .project {
    .bl;
    padding: 10px;
    background-color: @yellow-lighter;

    img {
      position: relative;
      max-width: none;
      width: 268px;
      margin: -10px -10px 15px -10px;
    }
  }
}

#footer {
  padding-top: 30px;
  margin-top: 20px;
  margin-bottom: -1000px;
  padding-bottom: 1000px;
  border-top: 1px solid #E5E5E5;
  background-color: whiteSmoke;
  color: @gray-light;

  section {
    padding-left: 10px;
    padding-right: 10px;
  }
}

#footer a {
  color: inherit;
}

#footer .social .btn {
  width: 34px;
  text-align: center;
  margin: 10px 10px 10px 0;
  padding: 0px;
  background-color: #FFF;
  .transition(all .2s linear);
}

#footer .social i {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0;
  line-height: 32px;
  background: url('/images/sprite_social.png') 0 0 no-repeat;
  .opacity(.67);
  &:hover {
    .opacity(1);
  }
  &.icon-linkedin {
    background-position: 0 -32px;
  }
  &.icon-twitter {
    background-position: 0 -64px;
  }

}

#back-to-top {
  position: fixed;
  right: 0;
  bottom: 0;
}

.navbar .btn-navbar, .navbar .btn-navbar:hover, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
  float: left;
}
.navbar .btn-navbar {

}

/* MASONRY */

.masonry {
  margin-top: 20px;
}

.masonry .brick {
  width: 270px;
  display: block;
  vertical-align: top;
  margin-bottom: 20px;
}

/* SIDEBARS */

.sidebar-btn {
  background: #333 url(/images/menu.svg) center center no-repeat;
  background-size: 24px 24px;

  &:hover {
    background-color: @orange;
  }
}

.sidebar {
  left: -250px;
  width: 80%;
  max-width: 250px;
  background-color: #333;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    > li {
      > a {
        display: block;
        padding: 10px 12px;
        font-family: @font-family-base;
        font-weight: bold;
        color: #CCC;
        background-color: #333;
        border-bottom: solid 1px #444;
      }
      > a:hover {
        text-decoration: none;
      }
    }
    > li.active > a {
      background-color: #787878;
      border-bottom-color: #787878
    }
  }
}

#layout,
.sidebar {
  .transition(all 200ms ease-in-out);
}

body.sidebar-open {
  #layout {
    .translate(125px, 0);
  }
}

body.menu-open {
  #menu {
    left: 0;
  }
}

/* PSGER */

.pager {
  position: fixed;
  top: 50%;
  width: 80px;
  height: 80px;
  background-color: @orange;
}

#pager-prev {
  left: 0;
}

#pager-next {
  right: 0;
}

@import "/packages/c2o-core/client/stylesheets/core.lessimport";
@import "/packages/c2o-tumblrfeed/client/stylesheets/tumblrfeed.lessimport";
@import "icons.lessimport";

@gray-lightest:         #F4F4F4;

@brand-primary:         #FF7700;

@orange:                #FF7700;
@orange-light:          lighten(@orange, 10%);
@yellow:                #FFCC00;
@yellow-light:          lighten(@yellow, 10%);
@yellow-lighter:        lighten(@yellow, 43%);

@link-color:            @orange;
@btn-primary-bg:        #FF6600;
@btn-primary-bg-hl:     darken(@btn-primary-bg, 10%);

@sidebar-color:         #CCCCCC;
@sidebar-bg:            #454545;

// Custom mixins

.link(@color: @link-color, @hover-color: darken(@link-color, 10%)) {
  color: @color;
  .transition(color 200ms ease-in);

  &:hover {
    color: @hover-color;
  }
}

.curly-box-shadow {
  position: relative;
  &:before,
  &:after {
    position: absolute;
    bottom: 18px;
    left: 5px;
    z-index: -1;
    width: 80%;
    height: 20%;
    content: "";
    .rotate(-2deg);
    .box-shadow(0 15px 10px rgba(0, 0, 0, 0.7));
  }
  &:after {
    right: 5px;
    left: auto;
    .rotate(2deg);
  }
}

// Reusable classes UNDER CONSTRUCTION

.bl {
  display: block;
  color: @gray;
  text-decoration: none;
}

.block {
  display: block;
}

a.block {
  position: relative;
  display: block;
  margin: 10px -10px;
  padding: 10px;
  border-radius: 5px;
  .link(@text-color, @text-color);
  .clearfix();

  h4 {
    margin-top: 5px;
  }
}

a.block:hover {
  background-color: @gray-lightest;
  text-decoration: none;
}

// Bootstrap overrides

img {
  max-width: 100%;
}

time {
  color: @gray-light;
}

.btn {
  border-radius: 3px;
  .box-shadow(0 1px 0 rgba(0, 0, 0, 0.1));
}

.jumbotron {
  color: #EFEFEF;
  background-color: #333;
  @media (max-width: @screen-sm) {
    padding: 30px 0;
  }
}

.header {
  margin-top: 0;
}

.subhead {
  //margin-top: 40px;
}

// Type

h1, h2, h3, h4 {
  font-family: @font-family-sans-serif;
}

.lead {
  font-weight: 300;
  font-size: 24px;
  line-height: 36px;
}

// Layout

header {
  height: 40px;
}

header {
  padding-left: 0;
  padding-right: 0;
  background-color: #333;
}

#login-buttons {
  float: right;
}

#layout {
  background-color: #fff;
}

.masthead .lead {
  margin-top: 10%;
  margin-bottom: 0;
}

.masthead h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
}

.tag.selected {
  background-color: #121212;
}

#icons-home i {
  float: left;
  margin: 0 10px 10px 0;
  width: 64px;
  height: 64px;
  background-image: url('/images/sprite_home.png');
  background-position: 0 0;
}

#icons-home i.icon-work {
  background-position: 0 0;
}

#icons-home i.icon-method {
  background-position: 0 -64px;
}

#icons-home i.icon-lab {
  background-position: 0 -128px;
}

#icons-home i.icon-about {
  background-position: 0 -192px;
}

#icons-home i.icon-contact {
  background-position: 0 -256px;
}

/* PACKAGE OVERRIDES */

#masthead-home {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  min-height: 480px;
  margin-bottom: 20px;
  background: url('/images/bg_home.jpg') center center no-repeat;
  background-size: cover;

  h1,
  .lead {
    padding: 0 5px;
    background-color: #121212;
    color: #FFFFFF;
    opacity: .7;
    //color: @white;
    //text-shadow: -3px 0 #171717, 0 3px #171717, 3px 0 #171717, 0 -3px #171717;
  }
}

.view-home {
  h2 {
    margin-bottom: 20px;

  }

  #expertise .block {
    margin-bottom: 20px;
    padding: 10px;
    color: #FFF;
    background-color: #333;
    border: solid 1px @gray-light;
    //border-radius: 10px;

    h4 {
      margin-top: 0;
    }
  }
}

.view-expertise {
  h5,
  ul {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.view-work {
  .project {
    .bl;
    padding: 10px;
    background-color: @yellow-lighter;

    img {
      position: relative;
      max-width: none;
      width: 268px;
      margin: -10px -10px 15px -10px;
    }
  }
}

#footer {
  padding-top: 30px;
  margin-top: 20px;
  margin-bottom: -1000px;
  padding-bottom: 1000px;
  border-top: 1px solid #E5E5E5;
  background-color: whiteSmoke;
  color: @gray-light;

  section {
    padding-left: 10px;
    padding-right: 10px;
  }
}

#footer a {
  color: inherit;
}

#footer .social .btn {
  width: 34px;
  text-align: center;
  margin: 10px 10px 10px 0;
  padding: 0px;
  background-color: #FFF;
  .transition(all .2s linear);
}

#footer .social i {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0;
  line-height: 32px;
  background: url('/images/sprite_social.png') 0 0 no-repeat;
  .opacity(.67);
  &:hover {
    .opacity(1);
  }
  &.icon-linkedin {
    background-position: 0 -32px;
  }
  &.icon-twitter {
    background-position: 0 -64px;
  }

}

#back-to-top {
  position: fixed;
  right: 0;
  bottom: 0;
}

.navbar .btn-navbar, .navbar .btn-navbar:hover, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
  float: left;
}
.navbar .btn-navbar {

}

/* MASONRY */

.masonry {
  margin-top: 20px;
}

.masonry .brick {
  width: 270px;
  display: block;
  vertical-align: top;
  margin-bottom: 20px;
}

/* SIDEBARS */

.sidebar-btn {
  background: #333 url(/images/menu.svg) center center no-repeat;
  background-size: 24px 24px;

  &:hover {
    background-color: @orange;
  }
}

.sidebar {
  left: -250px;
  width: 80%;
  max-width: 250px;
  background-color: #333;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    > li {
      > a {
        display: block;
        padding: 10px 12px;
        font-family: @font-family-base;
        font-weight: bold;
        color: #CCC;
        background-color: #333;
        border-bottom: solid 1px #444;
      }
      > a:hover {
        text-decoration: none;
      }
    }
    > li.active > a {
      background-color: #787878;
      border-bottom-color: #787878
    }
  }
}

#layout,
.sidebar {
  .transition(all 200ms ease-in-out);
}

body.sidebar-open {
  #layout {
    .translate(125px, 0);
  }
}

body.menu-open {
  #menu {
    left: 0;
  }
}

/* PSGER */

.pager {
  position: fixed;
  top: 50%;
  width: 80px;
  height: 80px;
  background-color: @orange;
}

#pager-prev {
  left: 0;
}

#pager-next {
  right: 0;
}