<commit_before>//
// set bootstrap parameters first
// --------------------------------------------------

$brand-success: $SUCCESS_BORDER_COLOR;
$brand-info: $INFO_BORDER_COLOR;
$brand-warning: $WARNING_BORDER_COLOR;
$brand-danger: $DANGER_BORDER_COLOR;

$font-family-sans-serif: Verdana, Arial, Helvetica, sans-serif;
$font-family-base: $font-family-sans-serif;
$font-size-base: 13px;

$text-color: $BODY_FG_COLOR;
$body-bg: $BODY_BG_COLOR;

$link-color: $LINK_FG_COLOR;
$link-hover-color: $LINK_HOVER_FG_COLOR;

$padding-base-vertical: 5px;
$padding-base-horizontal: 10px;
$padding-large-vertical: 8px;
$padding-large-horizontal: 13px;
$padding-small-vertical: 4px;
$padding-small-horizontal: 8px;
$padding-xs-vertical: 1px;
$padding-xs-horizontal: 4px;

$component-active-color: $MENU_HOT_FG_COLOR;
$component-active-bg: $MENU_HOT_BG_COLOR;

$table-cell-padding: 6px;
$table-condensed-cell-padding: 4px;
$table-bg: $LIST_BG_COLOR;
$table-bg-accent: $LIST_ODD_BG_COLOR;
$table-bg-hover: $LIST_HOVER_BG_COLOR;
$table-bg-active: $MENU_WARM_BG_COLOR;
$table-border-color: $MENU_BORDER_COLOR;

$btn-font-weight: bold;
$btn-default-color: $BUTTON_FG_COLOR;
$btn-default-bg: $BUTTON_BG_COLOR2;
$btn-default-border: $BUTTON_BORDER_COLOR;
$btn-primary-color: $BUTTON_PRIMARY_FG_COLOR;
$btn-primary-bg: $BUTTON_PRIMARY_BG_COLOR2;
$btn-primary-border: $BUTTON_PRIMARY_BORDER_COLOR;
$btn-link-disabled-color: mix($BUTTON_FG_COLOR, $BUTTON_BG_COLOR2, 75%);

$input-bg: $INPUT_BG_COLOR;
$input-bg-disabled: mix($INPUT_FG_COLOR, $INPUT_BG_COLOR);
$input-color: $INPUT_FG_COLOR;
$input-border: $INPUT_BORDER_COLOR;
$input-color-placeholder: mix($INPUT_FG_COLOR, $INPUT_BG_COLOR);
$legend-color: $BODY_FG_COLOR;
$legend-border-color: $INPUT_BORDER_COLOR;
$input-group-addon-bg: $INPUT_BG_COLOR;
$input-group-addon-border-color: $INPUT_BORDER_COLOR;
$cursor-disabled: not-allowed;

$dropdown-bg: $MENU_BG_COLOR;
$dropdown-border: $MENU_BORDER_COLOR;
$dropdown-fallback-border: $MENU_BORDER_COLOR;
$dropdown-divider-bg: $MENU_BG_COLOR;
$dropdown-link-color: $MENU_FG_COLOR;
$dropdown-link-hover-color: $MENU_HOT_FG_COLOR;
$dropdown-link-hover-bg: $MENU_HOT_BG_COLOR;
$dropdown-link-active-color: $MENU_WARM_FG_COLOR;
$dropdown-link-active-bg: $MENU_WARM_BG_COLOR;
$dropdown-link-disabled-color: mix($MENU_FG_COLOR, $MENU_BG_COLOR, 75%);
$dropdown-header-color: $MENU_FG_COLOR;
$dropdown-caret-color: $BODY_FG_COLOR;

$grid-gutter-width: 30px;
$navbar-height: 40px;
$navbar-margin-bottom: 13px;
$navbar-border-radius: 0;
$navbar-padding-horizontal: 13px;
$navbar-padding-vertical: 10px;

$navbar-default-color: $TOP_BAR_FG_COLOR;
$navbar-default-bg: $TOP_BAR_BG_COLOR;
$navbar-default-border: $TOP_BAR_BORDER_COLOR;
$navbar-default-link-color: $TOP_BAR_LINK_FG_COLOR;
$navbar-default-link-hover-color: $TOP_BAR_LINK_HOVER_FG_COLOR;
$navbar-default-link-hover-bg: $TOP_BAR_LINK_HOVER_BG_COLOR;
$navbar-default-link-active-color: $TOP_BAR_LINK_FG_COLOR;
$navbar-default-link-active-bg: $TOP_BAR_LINK_BG_COLOR;
$navbar-default-link-disabled-color: mix($TOP_BAR_LINK_FG_COLOR, $TOP_BAR_LINK_BG_COLOR, 75%);
$navbar-default-link-disabled-bg: $TOP_BAR_LINK_BG_COLOR;

$pagination-color: $PAGER_FG_COLOR;
$pagination-bg: $PAGER_BG_COLOR;
$pagination-border: $PAGER_BORDER_COLOR;
$pagination-hover-color: $PAGER_HOVER_FG_COLOR;
$pagination-hover-bg: $PAGER_HOVER_BG_COLOR;
$pagination-hover-border: $PAGER_HOVER_BORDER_COLOR;
$pagination-active-color: $PAGER_ACTIVE_FG_COLOR;
$pagination-active-bg: $PAGER_ACTIVE_BG_COLOR;
$pagination-active-border: $PAGER_ACTIVE_BORDER_COLOR;
$pagination-disabled-color: mix($PAGER_FG_COLOR, $PAGER_BG_COLOR, 75%);
$pagination-disabled-bg: $PAGER_BG_COLOR;
$pagination-disabled-border: $PAGER_BORDER_COLOR;

$state-success-text: $SUCCESS_BORDER_COLOR;
$state-success-bg: $SUCCESS_BG_COLOR;
$state-success-border: mix($SUCCESS_BORDER_COLOR, $SUCCESS_BG_COLOR);
$state-info-text: $INFO_BORDER_COLOR;
$state-info-bg: $INFO_BG_COLOR;
$state-info-border: mix($INFO_BORDER_COLOR, $INFO_BG_COLOR);
$state-warning-text: $WARNING_BORDER_COLOR;
$state-warning-bg: $WARNING_BG_COLOR;
$state-warning-border: mix($WARNING_BORDER_COLOR, $WARNING_BG_COLOR);
$state-danger-text: $DANGER_BORDER_COLOR;
$state-danger-bg: $DANGER_BG_COLOR;
$state-danger-border: mix($DANGER_BORDER_COLOR, $DANGER_BG_COLOR);

$tooltip-opacity: 1;
$tooltip-max-width: 400px;
$tooltip-color: $TOOLTIP_FG_COLOR;
$tooltip-bg: $TOOLTIP_BG_COLOR;

$alert-success-bg: $SUCCESS_BG_COLOR;
$alert-success-text: $SUCCESS_FG_COLOR;
$alert-success-border: $SUCCESS_BORDER_COLOR;
$alert-info-bg: $INFO_BG_COLOR;
$alert-info-text: $INFO_FG_COLOR;
$alert-info-border: $INFO_BORDER_COLOR;
$alert-warning-bg: $WARNING_BG_COLOR;
$alert-warning-text: $WARNING_FG_COLOR;
$alert-warning-border: $WARNING_BORDER_COLOR;
$alert-danger-bg: $DANGER_BG_COLOR;
$alert-danger-text: $DANGER_FG_COLOR;
$alert-danger-border: $DANGER_BORDER_COLOR;

$progress-bg: $PROGRESS_BG_COLOR;
$progress-bar-color: $PROGRESS_FG_COLOR;
$progress-bar-bg: $PROGRESS_BAR_COLOR;

$list-group-bg: $LIST_BG_COLOR;
$list-group-border: $LIST_BORDER_COLOR;
$list-group-hover-bg: $LIST_BG_COLOR;
$list-group-disabled-color: $LIST_HEADER_FG_COLOR;
$list-group-disabled-bg: $LIST_HEADER_BG_COLOR;
$list-group-disabled-text-color: $LIST_HEADER_FG_COLOR;
$list-group-link-color: $LINK_FG_COLOR;
$list-group-link-hover-color: $LINK_HOVER_FG_COLOR;

$panel-bg: $LIST_BG_COLOR;
$panel-body-padding: 12px;
$panel-heading-padding: 8px 12px;
$panel-inner-border: $LIST_BORDER_COLOR;
$panel-footer-bg: $LIST_BG_COLOR;
$panel-default-text: $LIST_FG_COLOR;
$panel-default-border: $LIST_BORDER_COLOR;
$panel-default-heading-bg: $LIST_HEADER_BG_COLOR;

$help-block-max-width: 600px;

$hr-border: $LIST_BORDER_COLOR;

$sidebar-max-width: 15em;

@import "bootstrap-sprockets";
@import "bootstrap";

//
// overall page style
// --------------------------------------------------

a {
    background-color: $LINK_BG_COLOR;
    font-weight: $LINK_WEIGHT;
}

a:visited {
    color: $LINK_VISITED_FG_COLOR;
    background-color: $LINK_VISITED_BG_COLOR;
}

a:hover {
    color: $LINK_HOVER_FG_COLOR;
    background-color: $LINK_HOVER_BG_COLOR;
}

body {
    word-wrap: break-word;
}

blockquote {
    font-size: 100%;
}

.btn, .btn:visited,
.btn-default, .btn-default:visited {
    color: $BUTTON_FG_COLOR;
    @if $BUTTON_BG_COLOR1 == $BUTTON_BG_COLOR2 {
        background-color: $BUTTON_BG_COLOR1;
    } @else {
        @include gradient-vertical($BUTTON_BG_COLOR1, $BUTTON_BG_COLOR2);
    }
    border-color: $BUTTON_BORDER_COLOR;
    border-width: $BUTTON_BORDER_WIDTH;
    border-style: $BUTTON_BORDER_STYLE;
    border-radius: $BUTTON_BORDER_RADIUS;
    padding: 4px 8px;
}

.btn:hover, .btn-default:hover {
    color: $BUTTON_HOVER_FG_COLOR;
    @if $BUTTON_HOVER_BG_COLOR1 == $BUTTON_HOVER_BG_COLOR2 {
        background-color: $BUTTON_HOVER_BG_COLOR1;
    } @else {
        @include gradient-vertical($BUTTON_HOVER_BG_COLOR1, $BUTTON_HOVER_BG_COLOR2);
    }
    border-color: $BUTTON_HOVER_BORDER_COLOR;
}

.btn-primary {
    color: $BUTTON_PRIMARY_FG_COLOR !important;
    @if $BUTTON_PRIMARY_BG_COLOR1 == $BUTTON_PRIMARY_BG_COLOR2 {
        background-color: $BUTTON_PRIMARY_BG_COLOR1 !important;
    } @else {
        @include gradient-vertical($BUTTON_PRIMARY_BG_COLOR1, $BUTTON_PRIMARY_BG_COLOR2);
    }
    border-color: $BUTTON_PRIMARY_BORDER_COLOR;
}

.btn-primary:hover {
    color: $BUTTON_PRIMARY_HOVER_FG_COLOR;
    @if $BUTTON_PRIMARY_HOVER_BG_COLOR1 == $BUTTON_PRIMARY_HOVER_BG_COLOR2 {
        background-color: $BUTTON_PRIMARY_HOVER_BG_COLOR1 !important;
    } @else {
        @include gradient-vertical($BUTTON_PRIMARY_HOVER_BG_COLOR1, $BUTTON_PRIMARY_HOVER_BG_COLOR2);
    }
    border-color: $BUTTON_PRIMARY_HOVER_BORDER_COLOR;
}

.form-control {
    border-width: $INPUT_BORDER_WIDTH;
    border-style: $INPUT_BORDER_STYLE;
    border-radius: $INPUT_BORDER_RADIUS;
    padding: 4px 8px 3px 8px;
}

.help-block {
    max-width: $help-block-max-width
}
.tooltip-inner {
    word-wrap: break-word;
}

ul.tight-list {
    list-style: none;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

.arrow-up {
    margin-top: 3px;
}

//
// message banner at top
// --------------------------------------------------

.alert.message-banner {
    margin: 0.5em 1.0em;
    border-width: $BANNER_BORDER_WIDTH;
    border-style: $BANNER_BORDER_STYLE;
    border-radius: $BANNER_BORDER_RADIUS;
    padding: 0.5em 1.0em;
    font-size: 150%;
    text-align: center;
}

//
// Mushroom Observer logo
// --------------------------------------------------

#logo-trim {
    max-width: 100%;
    height: auto;
}

#navigation {
    #logo {
        background-color: $LOGO_BG_COLOR;
        border-width: 0px;
        border-bottom-width: $LOGO_BORDER_WIDTH;
        border-color: $LOGO_BORDER_COLOR;
        border-style: $LOGO_BORDER_STYLE;
        border-radius: 0px;
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            margin-bottom: 5px;
        }

        padding-top: 5px;
        padding-bottom: 5px;
        font: small-caps 25px/25px "Times New Roman", serif;
        text-align: center;
        white-space: nowrap;
        text-overflow: clip;
        overflow: hidden;
    }

    #logo #logo-text,
    #logo:visited #logo-text {
        color: $LOGO_FG_COLOR;
        background-color: transparent;
        text-decoration: none;
    }

    #logo:hover,
    #logo:hover div,
    #logo:hover #logo-text {
        color: $LOGO_HOVER_FG_COLOR;
        background-color: $LOGO_HOVER_BG_COLOR;
        text-decoration: none;
    }

    @if $LOGO_BORDER_STYLE == outset {
        #logo:active div {
            border-style: inset;
        }
    }
}

//
// left nav bar
// --------------------------------------------------

.sidebar-offcanvas {
    max-width: $sidebar-max-width;
}

#navigation {
    background-color: $LEFT_BAR_BG_COLOR;
    border-color: $LEFT_BAR_BORDER_COLOR;
    border-width: $LEFT_BAR_BORDER_WIDTH;
    border-style: $LEFT_BAR_BORDER_STYLE;
    border-top-left-radius: $LOGO_BORDER_RADIUS;
    border-top-right-radius: $LOGO_BORDER_RADIUS;
    border-bottom-left-radius: $LEFT_BAR_BORDER_RADIUS;
    border-bottom-right-radius: $LEFT_BAR_BORDER_RADIUS;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 10em;

    a {
        font-weight: normal;
    }

    .list-group {
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            margin-bottom: 15px;
        } @else {
            margin-bottom: 2px;
        }
    }

    .list-group-item.disabled,
    .list-group-item.disabled:hover,
    .list-group-item.disabled:focus {
        color: $LEFT_BAR_HEADER_FG_COLOR;
        background-color: $LEFT_BAR_HEADER_BG_COLOR;
        cursor: default;
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            margin-top: 10px;
        }
        padding-left: 5px;
    }

    .list-group-item {
        margin-top: 0px;
        border-color: $LEFT_BAR_BORDER_COLOR;
        border-width: $LEFT_BAR_ITEM_BORDER_WIDTH 0px;
        border-style: $LEFT_BAR_BORDER_STYLE;
        border-radius: 0px;
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            padding: 1px 5px;
        }
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-group-item:last-child {
        border-bottom-width: 0px;
    }

    .list-group-item.indent {
        padding-left: 10px;
    }

    .list-group-item,
    a.dropdown-toggle {
        color: $LEFT_BAR_FG_COLOR;
        background-color: $LEFT_BAR_BG_COLOR;
    }

    .list-group-item:hover,
    .list-group-item:focus,
    .list-group-item:hover a.dropdown-toggle,
    .list-group-item:focus a.dropdown-toggle,
    a.dropdown-toggle:hover {
        color: $LEFT_BAR_HOVER_FG_COLOR;
        background-color: $LEFT_BAR_HOVER_BG_COLOR;
    }
}

//
// top nav bar
// --------------------------------------------------

.navbar-default {
    color: $TOP_BAR_FG_COLOR;
    background-color: $TOP_BAR_BG_COLOR;
    margin-left: 10px;
    border-color: $TOP_BAR_BORDER_COLOR;
    border-width: $TOP_BAR_BORDER_WIDTH;
    border-style: $TOP_BAR_BORDER_STYLE;
    border-radius: $TOP_BAR_BORDER_RADIUS;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right-width: 0px;
    padding: 0px;

    a, a:visited {
        color: $TOP_BAR_LINK_FG_COLOR;
        background-color: $TOP_BAR_LINK_BG_COLOR;
    }

    a:hover {
        color: $TOP_BAR_LINK_HOVER_FG_COLOR;
        background-color: $TOP_BAR_LINK_HOVER_BG_COLOR;
    }

    .navbar-nav {
        margin-top: 8px;
        margin-right: 2px;
    }

    .navbar-nav > li > a,
    .navbar-nav > li > a.dropdown-toggle {
        color: $TOP_BAR_FG_COLOR !important;
        background-color: $TOP_BAR_BG_COLOR !important;
        margin: 0px 4px;
        border: 0px;
        padding: 2px 4px;
    }

    .navbar-nav > li > a:hover,
    .navbar-nav > li > a.dropdown-toggle:hover {
        color: $TOP_BAR_LINK_HOVER_FG_COLOR !important;
        background-color: $TOP_BAR_LINK_HOVER_BG_COLOR !important;
    }
}

//
// content
// --------------------------------------------------

#content {
    // margin-left: 2em; // NO! This pushes content off screen
    padding-bottom: 5em;
}

#title-caption, .owner-id {
    font-size: 170%;
    margin-top: 5px;
}

//
// interest eyes
// --------------------------------------------------

.interest_big {
    height: 50px;
    width: 50px;
}

.interest_small {
    height: 23px;
    width: 23px;
}

@media (min-width: $screen-sm-min) {
  .interest-eyes {
    position: absolute;
    top: 0;
  }
}

@media (min-width: $screen-md-min) {
  .interest-eyes {
    position: absolute;
    top: 0;
  }
}

@media (min-width: $screen-lg-min) {
  .interest-eyes {
    position: absolute;
    top: 0;
  }
}


//
// alerts
// --------------------------------------------------

.alert {
    margin: 0.5em 1.0em;
    border-width: $ALERT_BORDER_WIDTH;
    border-style: $ALERT_BORDER_STYLE;
    border-radius: $ALERT_BORDER_RADIUS;
    padding: 0.5em 1.0em;
    text-align: left;
}

//
// rss log
// --------------------------------------------------

.rss-log-item {
    padding: 5px;
    text-align: center;
    height: 350px;
}

.rss-fancy-time {
    position: absolute;
    top: -10px;
    right: 2px;
    color: mix($LIST_FG_COLOR, $LIST_BG_COLOR);
}

.rss-detail {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.rss-where, .rss-what {
    text-align: center;
}

.rss-what {
  overflow: hidden;
  text-overflow: ellipsis;
}

.rss_log_tab {
    margin-top: -5px !important;
}

//
// pagination links
// --------------------------------------------------

.pagination {
    margin-top: 5px;
    margin-bottom: 5px;
}

.pagination > li > a,
.pagination > li > span,
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span,
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border: 0 !important;
    border-radius: 0 !important;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    cursor: default;
}


//
// jquery lightbox
// --------------------------------------------------


/* Preload images */
body:after {
  content: url(close.png) url(loading.gif) url(prev.png) url(next.png);
  display: none;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox a.lightbox_link {
  color: white;
  text-decoration: underline;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: transparent;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

//
// theater view
// --------------------------------------------------


.theater-btn {
    position: absolute;
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.59);
    color: black;
    padding: 5px;
    top: 0px;
    border: 1px solid;
    text-decoration: none;
    display: none;
    font-size: 18px;
}

.theater-btn:hover, .theater-btn:focus {
    background: black;
    color: white;
    padding: 5px;
    top: 0px;
    border: 1px solid;
    text-decoration: none;
}



//
// image vote meter bar
// --------------------------------------------------

.vote-meter {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 200px;
    height: 7px;
    margin-bottom: 4px;
    overflow: hidden;
    background-color: $VOTE_METER_BG_COLOR;
    border-radius: 0px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
    border: $VOTE_METER_BORDER_COLOR;
}

.vote-meter-bar {
    float: left;
    width: 0px;
    height: 100%;
    font-size: 12px;
    line-height: 5px;
    color: #FFF;
    text-align: center;
    background-color: $VOTE_METER_FG_COLOR;
    box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15) inset;
    transition: width 0.6s ease 0s;
}

//
// autocompletion
// --------------------------------------------------

div.auto_complete {
    position: absolute;
    color: $MENU_FG_COLOR;
    background-color: $MENU_BG_COLOR;
    margin: 0px;
    border: 1px solid $MENU_BORDER_COLOR;
    padding: 0px;
    overflow-x: hidden;
    display: none;
    text-align: left;
    z-index: 100;

    ul {
        margin: 0px;
        border: 0px;
        padding: 0px;
        list-style: none;
        overflow-x: hidden;

        li {
            margin: 0px;
            border: 0px;
            padding: 2px 4px 2px 4px;
            white-space: nowrap;
        }

        li.selected {
            color: $MENU_HOT_FG_COLOR;
            background-color: $MENU_HOT_BG_COLOR;
        }
    }
}

//
// naming vote popup
// --------------------------------------------------

.popup {
    z-index: 1000;
    border: 1px solid $MENU_BORDER_COLOR;
    color: $MENU_FG_COLOR !important;
    background-color: $MENU_BG_COLOR !important;
    display: none;
}

//
// popup dialogs
// --------------------------------------------------

.hidden-links {
    display: none;
}
.cover {
    z-index: 999;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: rgba(128,128,128,0.50);
}
.popup-dialog {
    z-index: 1000;
    position: absolute;
    border: 1px solid $MENU_BORDER_COLOR;
    padding: 0em 1em;
    color: $MENU_FG_COLOR !important;
    background-color: $MENU_BG_COLOR !important;
    div {
        margin: 1em 0em;
        text-align: center;
        input {
            margin: 0em 1em;
        }
    }
}

//
// name_lister
// --------------------------------------------------

table.scroller th {
    font-size: 120%;
    padding-bottom: 5px;
}

div.scroller {
    color: $MENU_FG_COLOR;
    background-color: $MENU_BG_COLOR;
    height: 450px;
    overflow: auto;
    margin: 0;
    border: 1px solid $MENU_BORDER_COLOR;
    padding: 0;
    font-style: italic;

    ul {
        margin: 0;
        border: 0;
        padding: 0;
        list-style-type: none;
    }

    li {
        padding: 0px 5px 0px 5px;
    }

    span.normal {
        font-style: normal;
    }

    li.hot {
        color: $MENU_WARM_FG_COLOR;
        background-color: $MENU_WARM_BG_COLOR;
    }

    li.warm {
        color: $MENU_HOT_FG_COLOR;
        background-color: $MENU_HOT_BG_COLOR;
    }
}

//
// species list bulk editor
// --------------------------------------------------

.table-bulk-editor {
    td {
        padding: 4px 6px;
    }
    tr {
        white-space: nowrap;
    }
    tr:nth-child(odd) {
        border: 1px solid $LIST_ODD_BG_COLOR;
    }
    tr:nth-child(even) {
        border: 1px solid $LIST_EVEN_BG_COLOR;
    }
    tr.hot {
        border: 1px solid $LIST_BORDER_COLOR;
    }
    tr.hot a, div.row_controls a {
        background: none;
    }
    tr.hot a:hover, div.row_controls a:hover {
        background: none;
    }
    img.tiny {
        max-height: 50px !important;
        padding: 2px;
    }
    div.id_and_name {
        float: left;
        padding: 1px 0.5em 0 0.5em;
    }
    div.auto_complete {
        z-index: 3;
    }
    input, select, option {
        height: 2.0em;
    }
}

div.row_controls {
    display: none;
    position: absolute;
    text-align: left;
    padding: 2px 5px 2px 5px;
    border: 1px solid $LIST_BORDER_COLOR;
    border-top: none;
    color: $LIST_FG_COLOR;
    background: $LIST_ODD_BG_COLOR;
    z-index: 2;
    white-space: nowrap;
}

//
// edit translations
// --------------------------------------------------

.translation_container {
    height: 750px;
    padding-right: 0;

    > div {
        height: 750px;
        overflow-y: auto;
        height: 100%;
        background-color: $LIST_BG_COLOR;
        border: 1px solid $LIST_BORDER_COLOR;
        padding: 2px 5px;
    }

    .major_header {
        margin: 1em 0;
        font-weight: bold;
    }

    .minor_header {
        margin: 0.5em 0;
        font-weight: bold;
    }

    .comment {
        margin: 0.5em 0;
    }

    .tag_field {
        margin: 0;
    }

    .old_versions td {
        vertical-align: top;
        padding: 0 0.5em;
    }
}

//
// exif popup
// --------------------------------------------------

.exif_cover {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgba(128,128,128,0.25);
  z-index: 99999;
  table {
    height: 100%;
    margin: auto;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    background: none;
    td {
      margin: 0;
      padding: 0;
    }
  }
  .exif_popup {
    overflow: auto;
    margin: 0;
    border: 1px solid black;
    padding: 5px 14px 5px 8px;
    background: white;
    color: black;
    table {
      tr:nth-child(odd) {
        background: #DDD;
      }
      tr:nth-child(even) {
        background: #EEE;
      }
      td {
        padding: 0 0 0 1em;
      }
      td:first-child {
        padding-left: 0;
        width: auto;
        min-width: 20em;
        max-width: 40em;
      }
    }
  }
}

//
// pivotal tracker
// --------------------------------------------------

#pivotal_index {
    #pivotal_labels {
        background: none;
        margin: 5px 1em;
        td {
            vertical-align: top;
        }
        table {
            background: none;
            td:first-child {
                a {
                    margin-right: 0.5em;
                    padding: 0 5px;
                    font-size: 80%;
                    font-weight: bold;
                    white-space: nowrap;
                }
            }
            td:last-child {
                white-space: nowrap;
            }
        }
    }

    .pivotal_name {
        span.pivotal_votes,
        span.pivotal_state,
        span.pivotal_num_comments,
        span.pivotal_labels {
            margin: 0 5px;
        }
        span.pivotal_votes span:nth-child(2) {
            margin: 0px 5px;
        }
        a {
            padding: 0 5px;
            font-weight: bold;
        }
    }

    .pivotal_body {
        padding-top: 5px;
    }

    a:hover {
        text-decoration: none !important;
    }

    span.pivotal_name a, span.pivotal_name a:visited { color: #3b2821 }
    span.pivotal_name a:hover { color: #743931 }
    span.pivotal_unscheduled, a.pivotal_unscheduled, a.pivotal_unscheduled:visited { color: #777 }
    span.pivotal_unstarted, a.pivotal_unstarted, a.pivotal_unstarted:visited { color: #222 }
    span.pivotal_started, a.pivotal_started, a.pivotal_started:visited { color: #000 }
    a.pivotal_unscheduled:hover, a.pivotal_unstarted:hover, a.pivotal_started:hover { color: #777; background: #000 }
    a.pivotal_unscheduled, a.pivotal_unstarted, a.pivotal_started { border: 1px solid #7f7471 }
    a.pA, a.pX, a.p0, a.p1, a.p2, a.p3, a.p4 { border: 1px solid #7f7471 }
    a.pA:hover, a.pA:visited:hover { color: #AF8; background: #000 }
    a.pX:hover, a.pX:visited:hover { color: #FFF; background: #000 }
    a.p0:hover, a.p0:visited:hover { color: #AAF; background: #000 }
    a.p1:hover, a.p1:visited:hover { color: #F55; background: #000 }
    a.p2:hover, a.p2:visited:hover { color: #F83; background: #000 }
    a.p3:hover, a.p3:visited:hover { color: #FF0; background: #000 }
    a.p4:hover, a.p4:visited:hover { color: #FF0; background: #000 }
    a.p_day, a.p_day:visited { color: #3b2821; background: #AAFF88 }
    a.p_week, a.p_week:visited { color: #3b2821; background: #8ED672 }
    a.p_month, a.p_month:visited { color: #3b2821; background: #78B460 }
    a.p_none, a.p_none:visited { color: #3b2821; background: #669951 }
    a.pX, a.pX:visited { color: #3b2821; background: #FFF }
    a.p0, a.p0:visited { color: #3b2821; background: #AAF }
    a.p1, a.p1:visited { color: #3b2821; background: #F55 }
    a.p2, a.p2:visited { color: #3b2821; background: #F83 }
    a.p3, a.p3:visited { color: #3b2821; background: #FF0 }
    a.p4, a.p4:visited { color: #3b2821; background: #FF0 }
}

//
// textile sandbox
// --------------------------------------------------

.sandbox {
    border-width: $INPUT_BORDER_WIDTH;
    border-style: $INPUT_BORDER_STYLE;
    border-radius: $INPUT_BORDER_RADIUS;
    border-color: $INPUT_BORDER_COLOR;
    padding: 2px 5px 0px 5px;
}

//
// tables
// --------------------------------------------------

thead tr {
    color: $LIST_HEADER_FG_COLOR;
    background-color: $LIST_HEADER_BG_COLOR;
}

.table-striped {
    tbody > tr:nth-child(odd) {
        background-color: $LIST_ODD_BG_COLOR;
    }
    tbody > tr:nth-child(even) {
        background-color: $LIST_EVEN_BG_COLOR;
    }
}

.table-curators,
.table-description-permissions,
.table-herbarium,
.table-license-updater,
.table-location-help,
.table-manage-species-lists,
.table-project-members,
.table-review-donations,
.table-upload-report {
    th, td {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

.table-description-permissions {
    th, td {
        padding: 0.1em 0;
        text-align: center;
    }
    th:first-child,
    td:first-child {
        padding: 0.1em 0.5em;
        text-align: left;
    }
}

.table-donors {
    text-align: center;
    td {
        padding: 0.1em 1em;
    }
}

.table-herbarium {
    th:nth-child(1),
    td:nth-child(1) {
        text-align: center;
    }
    td:nth-child(2),
    td:nth-child(3) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 10em;
    }
}

.table-manage-species-lists {
    td {
        padding: 0.2em 1em;
    }
    tr {
        border-top: 1px solid $LIST_BORDER_COLOR;
    }
    tr:first-child {
        border-top: none;
    }
}

.table-publications {
    th, td {
        padding: 0.5em 0.5em;
    }
    td {
        border-top: 1px solid $LIST_BORDER_COLOR;
    }
    th:first-child, td:first-child {
        padding-left: 1em;
    }
    th:last-child, td:last-child {
        padding-right: 1em;
    }
    td:nth-child(2) {
        width: 20em;
        font-size: 85%;
        word-break: break-all;
    }
    td:nth-child(3),
    td:nth-child(4) {
        text-align: center;
        font-weight: bold;
    }
    td:last-child {
        text-align: center;
    }
}

.table-review-donations {
    th, td {
        border-right: 1px solid $LIST_BORDER_COLOR;
    }
    th:last-child, td:last-child {
        border: 0;
    }
}

.table-observation-form {
    background: none;
    width: 100%;
    td:first-child {
        padding-right: 10px;
    }
    td {
        padding-bottom: 5px;
    }
}

table.table-namings {
    width: 100%;
    tbody {
        border: 1px solid $LIST_BORDER_COLOR;
        border-radius: $INPUT_BORDER_RADIUS !important;
    }
    th {
        color: $BODY_FG_COLOR;
        background: $BODY_BG_COLOR;
        font-weight: normal;
        vertical-align: bottom;
    }
    th, td {
        padding: 5px;
    }
    th:first-child {
        padding-left: 0;
    }
    td:first-child {
        padding-left: 1em;
    }
    td:last-child {
        padding-right: 1em;
    }
}

.table-lifeform {
    tr td {
        padding: .1em 1em;
    }
    tr:nth-child(odd) {
        background-color: $LIST_ODD_BG_COLOR;
    }
    tr:nth-child(even) {
        background-color: $LIST_EVEN_BG_COLOR;
    }
}

.textile {
    th, td {
        padding: 0.3em;
        vertical-align: top;
    }
    th {
        vertical-align: bottom;
    }
}

//
// icons
// --------------------------------------------------

.icon-addon {
    position: relative;
    display: block;
}

.icon-addon:after,
.icon-addon:before {
    display: table;
    content: " ";
}

.icon-addon:after {
    clear: both;
}

.icon-addon.addon-md .glyphicon,
.icon-addon .glyphicon,
.icon-addon.addon-md .fa,
.icon-addon .fa {
    position: absolute;
    z-index: 10;
    left: 10px;
    font-size: 14px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: 1px;
    color: mix($INPUT_FG_COLOR, $INPUT_BG_COLOR);
}

.icon-addon.addon-lg .form-control {
    line-height: 1.33;
    font-size: 18px;
    padding: 10px 16px 10px 40px;
}

.icon-addon.addon-sm .form-control {
    padding: 5px 10px 5px 28px;
    font-size: 12px;
    line-height: 1.5;
}

.icon-addon.addon-lg .fa,
.icon-addon.addon-lg .glyphicon {
    font-size: 18px;
    margin-left: 0;
    left: 11px;
    top: 4px;
}

.icon-addon.addon-md .form-control,
.icon-addon .form-control {
    padding-left: 30px;
    float: left;
    font-weight: normal;
}

.icon-addon.addon-sm .fa,
.icon-addon.addon-sm .glyphicon {
    margin-left: 0;
    font-size: 12px;
    left: 5px;
    top: 1px
}

.icon-addon .form-control:focus + .glyphicon,
.icon-addon:hover .glyphicon,
.icon-addon .form-control:focus + .fa,
.icon-addon:hover .fa {
    color: $INPUT_FG_COLOR;
}

//
// generally useful classes
// --------------------------------------------------

.inline {
    display: inline-block;
}

.indent {
    padding-left: 10px !important;
}

.indent-one-em {
    padding-left: 1em;
}

.name-section p {
    margin: 0;
    padding-left: 1em;
    text-indent: -1em;
}

.obs-notes p {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.align-bottom {
    vertical-align: bottom !important;
}

.align-center {
    text-align: center;
}

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

.align-top {
    vertical-align: top !important;
}

.align-1px {
    text-align: 1px;
}

.bold {
    font-weight: 800;
}

.border-none {
    border: none;
}

.border-radius-none {
    border-radius: 0 !important;
}

form.button_to {
  display: inline;
  margin: 0;
  padding: 0;
  div { display: inline; }
  input[type=submit] {
    margin: 0;
    padding: 0;
    -webkit-appearance: caret;
    background: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: normal;
    cursor: pointer;
    color: #2050E0;
  }
  input[type=submit]:hover {
    text-decoration: underline;
  }
}

.monospace {
    font-family: monospace
}

.push-down {
    margin-top: 1em;
}

.push-down-more {
    margin-top: 1.5em;
}

.push-below-buttons {
    margin-top: 23px;
}

.push-up {
    margin-bottom: 1em;
}

.slight-pad {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pad-box {
    padding: 5px;
}

.border-box {
    border: 1px solid;
}

.pad-bottom {
    padding-bottom: .25em;
}

.pad-top {
    padding-top: 1em;
}

.kill-padding {
    padding: 0 !important;
}

.nowrap {
    white-space: nowrap;
}

.nowrap-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vcenter {
    display: flex;
    align-items: center;
}

// Most browsers allow you to zoom in or out: let the user decide what
// an optimal width for a line of text should be.  There is no way for us
// to decide for them intelligently, since browsers differ so much in how
// they deal with print views.
@media screen {
    .max-width-text {
        max-width: 600px;
    }

    .max-width-text-plus-padding {
        max-width: 650px;
    }

    .max-width-text-plus-image {
        max-width: 850px; // 600px text column + 160pm max thumbnail
    }

    .max-width-text-times-two {
        max-width: 1200px;
    }
}

//
// style tweaks
// --------------------------------------------------

.well p {
  margin: 0;
  padding: 0;
}

table.table-compact tr td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.list-group.list-group-compact .list-group-item {
    padding: 4px;
}

.input-group .icon-addon .form-control {
    border-radius: 0;
}

input[type=checkbox] {
    // fixes alignment issue in firefox; bootstrap applies this only to IE9:
    // margin-top: 1px \9;
    margin-top: 1px;
}

[data-role=link]:hover {
    cursor: pointer;
}

// got this trick from:
// http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
.file-field {
    position: relative;
    overflow: hidden;
    input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        background: red;
        cursor: inherit;
        display: block;
    }
    + span {
        margin-left: 0.5em;
    }
}

//
// small devices, tablets
// --------------------------------------------------

@media screen and (max-width: 767px) {
    // #navigation {
    //   padding-left: 15px;
    //   padding-right: 15px;
    // }

    .rss-box-details {
        height: auto !important;
    }

    .row-offcanvas {
        position: relative;
        -webkit-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
        -webkit-transform: translate3d(0,0,0);
    }

    .row-offcanvas-right {
        right: 0;
    }

    .row-offcanvas-left {
        left: 0;
    }

    .row-offcanvas-right
    .sidebar-offcanvas {
        right: -$sidebar-max-width;
    }

    .row-offcanvas-left
    .sidebar-offcanvas {
        left: -$sidebar-max-width;
    }

    .row-offcanvas-right.active {
        right: $sidebar-max-width;
    }

    .row-offcanvas-left.active {
        left: $sidebar-max-width;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: $sidebar-max-width;
    }

    .hidden-overflow-x {
        overflow-x: hidden !important;
    }

    .navbar-default {
        margin: 0;
    }

    .navbar-form {
        margin: 0;
        border: 0;
    }
}

//
// larger devices
// --------------------------------------------------

@media screen and (min-width: 767px) {
    .pull-left-sm {
        float: left;
    }
    .pull-right-sm {
        float: right;
    }
    .push-down-sm {
        margin-top: 1em;
    }
}

//
// specialized stuff for print view
// --------------------------------------------------

@media print {
    #right_side {
        width: 100% !important;
    }
}

//
// don't bold the labels on image date and geotag helper boxes
// on create observation page

.image_messages label,
.geocode_messages label {
  font-weight: normal;
}

.dashed-border {
    border: 5px dashed;
}

//
// Help tips on create observation page
// ------------------------------------------
.arrow-up {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid rgba(203, 203, 203, 0.9);
  position: absolute;
  left: 25px;
  top: 25px;
  margin-left: 1px;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid rgba(203, 203, 203, 0.9);
  position: absolute;
  left: 0;
  top: 25px;
  margin-left: 1px;
}

.form-observation-map {
  height: 400px;
  width: 100%;
}

.thumbnail-map-container {
  position:    relative;
  margin-bottom: 1em;
}
.thumbnail-map {
  position:    relative;
}
.thumbnail-map-box {
  position:    absolute;
  margin-top:  -2px;
  margin-left: -2px;
  border:      2px solid rgb(0, 255, 192);
}
.pin-offset {
  position:    absolute;
  width:       100%;
  height:      100%;
  margin-top:  2px;
  margin-left: -11px;
}
.red-pin {
  position:    absolute;
  width:       40px;
  height:      40px;
  background:  image-url("red_pin.png");
}
.thumbnail-buttons {
  z-index:     2;
  position:    absolute;
  padding:     10px;
  left:        0px;
  bottom:      0px;
}
.plus-button, .minus-button {
  width:       16px;
  height:      16px;
  background:  image-url("thumbnail-map-buttons.png");
}
.minus-button {
  height:      15px;
  background-position: 0px 15px;
}

.map-btn {
  @extend .btn;
  margin-top: 10px;
}

.spacer {
  height: 30px;
  width: 1px;
}
<commit_msg>Give logo more space to breathe<commit_after>//
// set bootstrap parameters first
// --------------------------------------------------

$brand-success: $SUCCESS_BORDER_COLOR;
$brand-info: $INFO_BORDER_COLOR;
$brand-warning: $WARNING_BORDER_COLOR;
$brand-danger: $DANGER_BORDER_COLOR;

$font-family-sans-serif: Verdana, Arial, Helvetica, sans-serif;
$font-family-base: $font-family-sans-serif;
$font-size-base: 13px;

$text-color: $BODY_FG_COLOR;
$body-bg: $BODY_BG_COLOR;

$link-color: $LINK_FG_COLOR;
$link-hover-color: $LINK_HOVER_FG_COLOR;

$padding-base-vertical: 5px;
$padding-base-horizontal: 10px;
$padding-large-vertical: 8px;
$padding-large-horizontal: 13px;
$padding-small-vertical: 4px;
$padding-small-horizontal: 8px;
$padding-xs-vertical: 1px;
$padding-xs-horizontal: 4px;

$component-active-color: $MENU_HOT_FG_COLOR;
$component-active-bg: $MENU_HOT_BG_COLOR;

$table-cell-padding: 6px;
$table-condensed-cell-padding: 4px;
$table-bg: $LIST_BG_COLOR;
$table-bg-accent: $LIST_ODD_BG_COLOR;
$table-bg-hover: $LIST_HOVER_BG_COLOR;
$table-bg-active: $MENU_WARM_BG_COLOR;
$table-border-color: $MENU_BORDER_COLOR;

$btn-font-weight: bold;
$btn-default-color: $BUTTON_FG_COLOR;
$btn-default-bg: $BUTTON_BG_COLOR2;
$btn-default-border: $BUTTON_BORDER_COLOR;
$btn-primary-color: $BUTTON_PRIMARY_FG_COLOR;
$btn-primary-bg: $BUTTON_PRIMARY_BG_COLOR2;
$btn-primary-border: $BUTTON_PRIMARY_BORDER_COLOR;
$btn-link-disabled-color: mix($BUTTON_FG_COLOR, $BUTTON_BG_COLOR2, 75%);

$input-bg: $INPUT_BG_COLOR;
$input-bg-disabled: mix($INPUT_FG_COLOR, $INPUT_BG_COLOR);
$input-color: $INPUT_FG_COLOR;
$input-border: $INPUT_BORDER_COLOR;
$input-color-placeholder: mix($INPUT_FG_COLOR, $INPUT_BG_COLOR);
$legend-color: $BODY_FG_COLOR;
$legend-border-color: $INPUT_BORDER_COLOR;
$input-group-addon-bg: $INPUT_BG_COLOR;
$input-group-addon-border-color: $INPUT_BORDER_COLOR;
$cursor-disabled: not-allowed;

$dropdown-bg: $MENU_BG_COLOR;
$dropdown-border: $MENU_BORDER_COLOR;
$dropdown-fallback-border: $MENU_BORDER_COLOR;
$dropdown-divider-bg: $MENU_BG_COLOR;
$dropdown-link-color: $MENU_FG_COLOR;
$dropdown-link-hover-color: $MENU_HOT_FG_COLOR;
$dropdown-link-hover-bg: $MENU_HOT_BG_COLOR;
$dropdown-link-active-color: $MENU_WARM_FG_COLOR;
$dropdown-link-active-bg: $MENU_WARM_BG_COLOR;
$dropdown-link-disabled-color: mix($MENU_FG_COLOR, $MENU_BG_COLOR, 75%);
$dropdown-header-color: $MENU_FG_COLOR;
$dropdown-caret-color: $BODY_FG_COLOR;

$grid-gutter-width: 30px;
$navbar-height: 40px;
$navbar-margin-bottom: 13px;
$navbar-border-radius: 0;
$navbar-padding-horizontal: 13px;
$navbar-padding-vertical: 10px;

$navbar-default-color: $TOP_BAR_FG_COLOR;
$navbar-default-bg: $TOP_BAR_BG_COLOR;
$navbar-default-border: $TOP_BAR_BORDER_COLOR;
$navbar-default-link-color: $TOP_BAR_LINK_FG_COLOR;
$navbar-default-link-hover-color: $TOP_BAR_LINK_HOVER_FG_COLOR;
$navbar-default-link-hover-bg: $TOP_BAR_LINK_HOVER_BG_COLOR;
$navbar-default-link-active-color: $TOP_BAR_LINK_FG_COLOR;
$navbar-default-link-active-bg: $TOP_BAR_LINK_BG_COLOR;
$navbar-default-link-disabled-color: mix($TOP_BAR_LINK_FG_COLOR, $TOP_BAR_LINK_BG_COLOR, 75%);
$navbar-default-link-disabled-bg: $TOP_BAR_LINK_BG_COLOR;

$pagination-color: $PAGER_FG_COLOR;
$pagination-bg: $PAGER_BG_COLOR;
$pagination-border: $PAGER_BORDER_COLOR;
$pagination-hover-color: $PAGER_HOVER_FG_COLOR;
$pagination-hover-bg: $PAGER_HOVER_BG_COLOR;
$pagination-hover-border: $PAGER_HOVER_BORDER_COLOR;
$pagination-active-color: $PAGER_ACTIVE_FG_COLOR;
$pagination-active-bg: $PAGER_ACTIVE_BG_COLOR;
$pagination-active-border: $PAGER_ACTIVE_BORDER_COLOR;
$pagination-disabled-color: mix($PAGER_FG_COLOR, $PAGER_BG_COLOR, 75%);
$pagination-disabled-bg: $PAGER_BG_COLOR;
$pagination-disabled-border: $PAGER_BORDER_COLOR;

$state-success-text: $SUCCESS_BORDER_COLOR;
$state-success-bg: $SUCCESS_BG_COLOR;
$state-success-border: mix($SUCCESS_BORDER_COLOR, $SUCCESS_BG_COLOR);
$state-info-text: $INFO_BORDER_COLOR;
$state-info-bg: $INFO_BG_COLOR;
$state-info-border: mix($INFO_BORDER_COLOR, $INFO_BG_COLOR);
$state-warning-text: $WARNING_BORDER_COLOR;
$state-warning-bg: $WARNING_BG_COLOR;
$state-warning-border: mix($WARNING_BORDER_COLOR, $WARNING_BG_COLOR);
$state-danger-text: $DANGER_BORDER_COLOR;
$state-danger-bg: $DANGER_BG_COLOR;
$state-danger-border: mix($DANGER_BORDER_COLOR, $DANGER_BG_COLOR);

$tooltip-opacity: 1;
$tooltip-max-width: 400px;
$tooltip-color: $TOOLTIP_FG_COLOR;
$tooltip-bg: $TOOLTIP_BG_COLOR;

$alert-success-bg: $SUCCESS_BG_COLOR;
$alert-success-text: $SUCCESS_FG_COLOR;
$alert-success-border: $SUCCESS_BORDER_COLOR;
$alert-info-bg: $INFO_BG_COLOR;
$alert-info-text: $INFO_FG_COLOR;
$alert-info-border: $INFO_BORDER_COLOR;
$alert-warning-bg: $WARNING_BG_COLOR;
$alert-warning-text: $WARNING_FG_COLOR;
$alert-warning-border: $WARNING_BORDER_COLOR;
$alert-danger-bg: $DANGER_BG_COLOR;
$alert-danger-text: $DANGER_FG_COLOR;
$alert-danger-border: $DANGER_BORDER_COLOR;

$progress-bg: $PROGRESS_BG_COLOR;
$progress-bar-color: $PROGRESS_FG_COLOR;
$progress-bar-bg: $PROGRESS_BAR_COLOR;

$list-group-bg: $LIST_BG_COLOR;
$list-group-border: $LIST_BORDER_COLOR;
$list-group-hover-bg: $LIST_BG_COLOR;
$list-group-disabled-color: $LIST_HEADER_FG_COLOR;
$list-group-disabled-bg: $LIST_HEADER_BG_COLOR;
$list-group-disabled-text-color: $LIST_HEADER_FG_COLOR;
$list-group-link-color: $LINK_FG_COLOR;
$list-group-link-hover-color: $LINK_HOVER_FG_COLOR;

$panel-bg: $LIST_BG_COLOR;
$panel-body-padding: 12px;
$panel-heading-padding: 8px 12px;
$panel-inner-border: $LIST_BORDER_COLOR;
$panel-footer-bg: $LIST_BG_COLOR;
$panel-default-text: $LIST_FG_COLOR;
$panel-default-border: $LIST_BORDER_COLOR;
$panel-default-heading-bg: $LIST_HEADER_BG_COLOR;

$help-block-max-width: 600px;

$hr-border: $LIST_BORDER_COLOR;

$sidebar-max-width: 15em;

@import "bootstrap-sprockets";
@import "bootstrap";

//
// overall page style
// --------------------------------------------------

a {
    background-color: $LINK_BG_COLOR;
    font-weight: $LINK_WEIGHT;
}

a:visited {
    color: $LINK_VISITED_FG_COLOR;
    background-color: $LINK_VISITED_BG_COLOR;
}

a:hover {
    color: $LINK_HOVER_FG_COLOR;
    background-color: $LINK_HOVER_BG_COLOR;
}

body {
    word-wrap: break-word;
}

blockquote {
    font-size: 100%;
}

.btn, .btn:visited,
.btn-default, .btn-default:visited {
    color: $BUTTON_FG_COLOR;
    @if $BUTTON_BG_COLOR1 == $BUTTON_BG_COLOR2 {
        background-color: $BUTTON_BG_COLOR1;
    } @else {
        @include gradient-vertical($BUTTON_BG_COLOR1, $BUTTON_BG_COLOR2);
    }
    border-color: $BUTTON_BORDER_COLOR;
    border-width: $BUTTON_BORDER_WIDTH;
    border-style: $BUTTON_BORDER_STYLE;
    border-radius: $BUTTON_BORDER_RADIUS;
    padding: 4px 8px;
}

.btn:hover, .btn-default:hover {
    color: $BUTTON_HOVER_FG_COLOR;
    @if $BUTTON_HOVER_BG_COLOR1 == $BUTTON_HOVER_BG_COLOR2 {
        background-color: $BUTTON_HOVER_BG_COLOR1;
    } @else {
        @include gradient-vertical($BUTTON_HOVER_BG_COLOR1, $BUTTON_HOVER_BG_COLOR2);
    }
    border-color: $BUTTON_HOVER_BORDER_COLOR;
}

.btn-primary {
    color: $BUTTON_PRIMARY_FG_COLOR !important;
    @if $BUTTON_PRIMARY_BG_COLOR1 == $BUTTON_PRIMARY_BG_COLOR2 {
        background-color: $BUTTON_PRIMARY_BG_COLOR1 !important;
    } @else {
        @include gradient-vertical($BUTTON_PRIMARY_BG_COLOR1, $BUTTON_PRIMARY_BG_COLOR2);
    }
    border-color: $BUTTON_PRIMARY_BORDER_COLOR;
}

.btn-primary:hover {
    color: $BUTTON_PRIMARY_HOVER_FG_COLOR;
    @if $BUTTON_PRIMARY_HOVER_BG_COLOR1 == $BUTTON_PRIMARY_HOVER_BG_COLOR2 {
        background-color: $BUTTON_PRIMARY_HOVER_BG_COLOR1 !important;
    } @else {
        @include gradient-vertical($BUTTON_PRIMARY_HOVER_BG_COLOR1, $BUTTON_PRIMARY_HOVER_BG_COLOR2);
    }
    border-color: $BUTTON_PRIMARY_HOVER_BORDER_COLOR;
}

.form-control {
    border-width: $INPUT_BORDER_WIDTH;
    border-style: $INPUT_BORDER_STYLE;
    border-radius: $INPUT_BORDER_RADIUS;
    padding: 4px 8px 3px 8px;
}

.help-block {
    max-width: $help-block-max-width
}
.tooltip-inner {
    word-wrap: break-word;
}

ul.tight-list {
    list-style: none;
    margin-bottom: 0.5em;
    padding-left: 1em;
}

.arrow-up {
    margin-top: 3px;
}

//
// message banner at top
// --------------------------------------------------

.alert.message-banner {
    margin: 0.5em 1.0em;
    border-width: $BANNER_BORDER_WIDTH;
    border-style: $BANNER_BORDER_STYLE;
    border-radius: $BANNER_BORDER_RADIUS;
    padding: 0.5em 1.0em;
    font-size: 150%;
    text-align: center;
}

//
// Mushroom Observer logo
// --------------------------------------------------

#logo-trim {
    max-width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

#navigation {
    #logo {
        background-color: $LOGO_BG_COLOR;
        border-width: 0px;
        border-bottom-width: $LOGO_BORDER_WIDTH;
        border-color: $LOGO_BORDER_COLOR;
        border-style: $LOGO_BORDER_STYLE;
        border-radius: 0px;
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            margin-bottom: 5px;
        }

        padding-top: 5px;
        padding-bottom: 5px;
        font: small-caps 25px/25px "Times New Roman", serif;
        text-align: center;
        white-space: nowrap;
        text-overflow: clip;
        overflow: hidden;
    }

    #logo #logo-text,
    #logo:visited #logo-text {
        color: $LOGO_FG_COLOR;
        background-color: transparent;
        text-decoration: none;
    }

    #logo:hover,
    #logo:hover div,
    #logo:hover #logo-text {
        color: $LOGO_HOVER_FG_COLOR;
        background-color: $LOGO_HOVER_BG_COLOR;
        text-decoration: none;
    }

    @if $LOGO_BORDER_STYLE == outset {
        #logo:active div {
            border-style: inset;
        }
    }
}

//
// left nav bar
// --------------------------------------------------

.sidebar-offcanvas {
    max-width: $sidebar-max-width;
}

#navigation {
    background-color: $LEFT_BAR_BG_COLOR;
    border-color: $LEFT_BAR_BORDER_COLOR;
    border-width: $LEFT_BAR_BORDER_WIDTH;
    border-style: $LEFT_BAR_BORDER_STYLE;
    border-top-left-radius: $LOGO_BORDER_RADIUS;
    border-top-right-radius: $LOGO_BORDER_RADIUS;
    border-bottom-left-radius: $LEFT_BAR_BORDER_RADIUS;
    border-bottom-right-radius: $LEFT_BAR_BORDER_RADIUS;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 10em;

    a {
        font-weight: normal;
    }

    .list-group {
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            margin-bottom: 15px;
        } @else {
            margin-bottom: 2px;
        }
    }

    .list-group-item.disabled,
    .list-group-item.disabled:hover,
    .list-group-item.disabled:focus {
        color: $LEFT_BAR_HEADER_FG_COLOR;
        background-color: $LEFT_BAR_HEADER_BG_COLOR;
        cursor: default;
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            margin-top: 10px;
        }
        padding-left: 5px;
    }

    .list-group-item {
        margin-top: 0px;
        border-color: $LEFT_BAR_BORDER_COLOR;
        border-width: $LEFT_BAR_ITEM_BORDER_WIDTH 0px;
        border-style: $LEFT_BAR_BORDER_STYLE;
        border-radius: 0px;
        @if $LEFT_BAR_ITEM_BORDER_WIDTH == 0px {
            padding: 1px 5px;
        }
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-group-item:last-child {
        border-bottom-width: 0px;
    }

    .list-group-item.indent {
        padding-left: 10px;
    }

    .list-group-item,
    a.dropdown-toggle {
        color: $LEFT_BAR_FG_COLOR;
        background-color: $LEFT_BAR_BG_COLOR;
    }

    .list-group-item:hover,
    .list-group-item:focus,
    .list-group-item:hover a.dropdown-toggle,
    .list-group-item:focus a.dropdown-toggle,
    a.dropdown-toggle:hover {
        color: $LEFT_BAR_HOVER_FG_COLOR;
        background-color: $LEFT_BAR_HOVER_BG_COLOR;
    }
}

//
// top nav bar
// --------------------------------------------------

.navbar-default {
    color: $TOP_BAR_FG_COLOR;
    background-color: $TOP_BAR_BG_COLOR;
    margin-left: 10px;
    border-color: $TOP_BAR_BORDER_COLOR;
    border-width: $TOP_BAR_BORDER_WIDTH;
    border-style: $TOP_BAR_BORDER_STYLE;
    border-radius: $TOP_BAR_BORDER_RADIUS;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right-width: 0px;
    padding: 0px;

    a, a:visited {
        color: $TOP_BAR_LINK_FG_COLOR;
        background-color: $TOP_BAR_LINK_BG_COLOR;
    }

    a:hover {
        color: $TOP_BAR_LINK_HOVER_FG_COLOR;
        background-color: $TOP_BAR_LINK_HOVER_BG_COLOR;
    }

    .navbar-nav {
        margin-top: 8px;
        margin-right: 2px;
    }

    .navbar-nav > li > a,
    .navbar-nav > li > a.dropdown-toggle {
        color: $TOP_BAR_FG_COLOR !important;
        background-color: $TOP_BAR_BG_COLOR !important;
        margin: 0px 4px;
        border: 0px;
        padding: 2px 4px;
    }

    .navbar-nav > li > a:hover,
    .navbar-nav > li > a.dropdown-toggle:hover {
        color: $TOP_BAR_LINK_HOVER_FG_COLOR !important;
        background-color: $TOP_BAR_LINK_HOVER_BG_COLOR !important;
    }
}

//
// content
// --------------------------------------------------

#content {
    // margin-left: 2em; // NO! This pushes content off screen
    padding-bottom: 5em;
}

#title-caption, .owner-id {
    font-size: 170%;
    margin-top: 5px;
}

//
// interest eyes
// --------------------------------------------------

.interest_big {
    height: 50px;
    width: 50px;
}

.interest_small {
    height: 23px;
    width: 23px;
}

@media (min-width: $screen-sm-min) {
  .interest-eyes {
    position: absolute;
    top: 0;
  }
}

@media (min-width: $screen-md-min) {
  .interest-eyes {
    position: absolute;
    top: 0;
  }
}

@media (min-width: $screen-lg-min) {
  .interest-eyes {
    position: absolute;
    top: 0;
  }
}


//
// alerts
// --------------------------------------------------

.alert {
    margin: 0.5em 1.0em;
    border-width: $ALERT_BORDER_WIDTH;
    border-style: $ALERT_BORDER_STYLE;
    border-radius: $ALERT_BORDER_RADIUS;
    padding: 0.5em 1.0em;
    text-align: left;
}

//
// rss log
// --------------------------------------------------

.rss-log-item {
    padding: 5px;
    text-align: center;
    height: 350px;
}

.rss-fancy-time {
    position: absolute;
    top: -10px;
    right: 2px;
    color: mix($LIST_FG_COLOR, $LIST_BG_COLOR);
}

.rss-detail {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.rss-where, .rss-what {
    text-align: center;
}

.rss-what {
  overflow: hidden;
  text-overflow: ellipsis;
}

.rss_log_tab {
    margin-top: -5px !important;
}

//
// pagination links
// --------------------------------------------------

.pagination {
    margin-top: 5px;
    margin-bottom: 5px;
}

.pagination > li > a,
.pagination > li > span,
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span,
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border: 0 !important;
    border-radius: 0 !important;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    cursor: default;
}


//
// jquery lightbox
// --------------------------------------------------


/* Preload images */
body:after {
  content: url(close.png) url(loading.gif) url(prev.png) url(next.png);
  display: none;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox a.lightbox_link {
  color: white;
  text-decoration: underline;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  background-color: transparent;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-container {
  padding: 4px;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

//
// theater view
// --------------------------------------------------


.theater-btn {
    position: absolute;
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.59);
    color: black;
    padding: 5px;
    top: 0px;
    border: 1px solid;
    text-decoration: none;
    display: none;
    font-size: 18px;
}

.theater-btn:hover, .theater-btn:focus {
    background: black;
    color: white;
    padding: 5px;
    top: 0px;
    border: 1px solid;
    text-decoration: none;
}



//
// image vote meter bar
// --------------------------------------------------

.vote-meter {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 200px;
    height: 7px;
    margin-bottom: 4px;
    overflow: hidden;
    background-color: $VOTE_METER_BG_COLOR;
    border-radius: 0px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
    border: $VOTE_METER_BORDER_COLOR;
}

.vote-meter-bar {
    float: left;
    width: 0px;
    height: 100%;
    font-size: 12px;
    line-height: 5px;
    color: #FFF;
    text-align: center;
    background-color: $VOTE_METER_FG_COLOR;
    box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15) inset;
    transition: width 0.6s ease 0s;
}

//
// autocompletion
// --------------------------------------------------

div.auto_complete {
    position: absolute;
    color: $MENU_FG_COLOR;
    background-color: $MENU_BG_COLOR;
    margin: 0px;
    border: 1px solid $MENU_BORDER_COLOR;
    padding: 0px;
    overflow-x: hidden;
    display: none;
    text-align: left;
    z-index: 100;

    ul {
        margin: 0px;
        border: 0px;
        padding: 0px;
        list-style: none;
        overflow-x: hidden;

        li {
            margin: 0px;
            border: 0px;
            padding: 2px 4px 2px 4px;
            white-space: nowrap;
        }

        li.selected {
            color: $MENU_HOT_FG_COLOR;
            background-color: $MENU_HOT_BG_COLOR;
        }
    }
}

//
// naming vote popup
// --------------------------------------------------

.popup {
    z-index: 1000;
    border: 1px solid $MENU_BORDER_COLOR;
    color: $MENU_FG_COLOR !important;
    background-color: $MENU_BG_COLOR !important;
    display: none;
}

//
// popup dialogs
// --------------------------------------------------

.hidden-links {
    display: none;
}
.cover {
    z-index: 999;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: rgba(128,128,128,0.50);
}
.popup-dialog {
    z-index: 1000;
    position: absolute;
    border: 1px solid $MENU_BORDER_COLOR;
    padding: 0em 1em;
    color: $MENU_FG_COLOR !important;
    background-color: $MENU_BG_COLOR !important;
    div {
        margin: 1em 0em;
        text-align: center;
        input {
            margin: 0em 1em;
        }
    }
}

//
// name_lister
// --------------------------------------------------

table.scroller th {
    font-size: 120%;
    padding-bottom: 5px;
}

div.scroller {
    color: $MENU_FG_COLOR;
    background-color: $MENU_BG_COLOR;
    height: 450px;
    overflow: auto;
    margin: 0;
    border: 1px solid $MENU_BORDER_COLOR;
    padding: 0;
    font-style: italic;

    ul {
        margin: 0;
        border: 0;
        padding: 0;
        list-style-type: none;
    }

    li {
        padding: 0px 5px 0px 5px;
    }

    span.normal {
        font-style: normal;
    }

    li.hot {
        color: $MENU_WARM_FG_COLOR;
        background-color: $MENU_WARM_BG_COLOR;
    }

    li.warm {
        color: $MENU_HOT_FG_COLOR;
        background-color: $MENU_HOT_BG_COLOR;
    }
}

//
// species list bulk editor
// --------------------------------------------------

.table-bulk-editor {
    td {
        padding: 4px 6px;
    }
    tr {
        white-space: nowrap;
    }
    tr:nth-child(odd) {
        border: 1px solid $LIST_ODD_BG_COLOR;
    }
    tr:nth-child(even) {
        border: 1px solid $LIST_EVEN_BG_COLOR;
    }
    tr.hot {
        border: 1px solid $LIST_BORDER_COLOR;
    }
    tr.hot a, div.row_controls a {
        background: none;
    }
    tr.hot a:hover, div.row_controls a:hover {
        background: none;
    }
    img.tiny {
        max-height: 50px !important;
        padding: 2px;
    }
    div.id_and_name {
        float: left;
        padding: 1px 0.5em 0 0.5em;
    }
    div.auto_complete {
        z-index: 3;
    }
    input, select, option {
        height: 2.0em;
    }
}

div.row_controls {
    display: none;
    position: absolute;
    text-align: left;
    padding: 2px 5px 2px 5px;
    border: 1px solid $LIST_BORDER_COLOR;
    border-top: none;
    color: $LIST_FG_COLOR;
    background: $LIST_ODD_BG_COLOR;
    z-index: 2;
    white-space: nowrap;
}

//
// edit translations
// --------------------------------------------------

.translation_container {
    height: 750px;
    padding-right: 0;

    > div {
        height: 750px;
        overflow-y: auto;
        height: 100%;
        background-color: $LIST_BG_COLOR;
        border: 1px solid $LIST_BORDER_COLOR;
        padding: 2px 5px;
    }

    .major_header {
        margin: 1em 0;
        font-weight: bold;
    }

    .minor_header {
        margin: 0.5em 0;
        font-weight: bold;
    }

    .comment {
        margin: 0.5em 0;
    }

    .tag_field {
        margin: 0;
    }

    .old_versions td {
        vertical-align: top;
        padding: 0 0.5em;
    }
}

//
// exif popup
// --------------------------------------------------

.exif_cover {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgba(128,128,128,0.25);
  z-index: 99999;
  table {
    height: 100%;
    margin: auto;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
    background: none;
    td {
      margin: 0;
      padding: 0;
    }
  }
  .exif_popup {
    overflow: auto;
    margin: 0;
    border: 1px solid black;
    padding: 5px 14px 5px 8px;
    background: white;
    color: black;
    table {
      tr:nth-child(odd) {
        background: #DDD;
      }
      tr:nth-child(even) {
        background: #EEE;
      }
      td {
        padding: 0 0 0 1em;
      }
      td:first-child {
        padding-left: 0;
        width: auto;
        min-width: 20em;
        max-width: 40em;
      }
    }
  }
}

//
// pivotal tracker
// --------------------------------------------------

#pivotal_index {
    #pivotal_labels {
        background: none;
        margin: 5px 1em;
        td {
            vertical-align: top;
        }
        table {
            background: none;
            td:first-child {
                a {
                    margin-right: 0.5em;
                    padding: 0 5px;
                    font-size: 80%;
                    font-weight: bold;
                    white-space: nowrap;
                }
            }
            td:last-child {
                white-space: nowrap;
            }
        }
    }

    .pivotal_name {
        span.pivotal_votes,
        span.pivotal_state,
        span.pivotal_num_comments,
        span.pivotal_labels {
            margin: 0 5px;
        }
        span.pivotal_votes span:nth-child(2) {
            margin: 0px 5px;
        }
        a {
            padding: 0 5px;
            font-weight: bold;
        }
    }

    .pivotal_body {
        padding-top: 5px;
    }

    a:hover {
        text-decoration: none !important;
    }

    span.pivotal_name a, span.pivotal_name a:visited { color: #3b2821 }
    span.pivotal_name a:hover { color: #743931 }
    span.pivotal_unscheduled, a.pivotal_unscheduled, a.pivotal_unscheduled:visited { color: #777 }
    span.pivotal_unstarted, a.pivotal_unstarted, a.pivotal_unstarted:visited { color: #222 }
    span.pivotal_started, a.pivotal_started, a.pivotal_started:visited { color: #000 }
    a.pivotal_unscheduled:hover, a.pivotal_unstarted:hover, a.pivotal_started:hover { color: #777; background: #000 }
    a.pivotal_unscheduled, a.pivotal_unstarted, a.pivotal_started { border: 1px solid #7f7471 }
    a.pA, a.pX, a.p0, a.p1, a.p2, a.p3, a.p4 { border: 1px solid #7f7471 }
    a.pA:hover, a.pA:visited:hover { color: #AF8; background: #000 }
    a.pX:hover, a.pX:visited:hover { color: #FFF; background: #000 }
    a.p0:hover, a.p0:visited:hover { color: #AAF; background: #000 }
    a.p1:hover, a.p1:visited:hover { color: #F55; background: #000 }
    a.p2:hover, a.p2:visited:hover { color: #F83; background: #000 }
    a.p3:hover, a.p3:visited:hover { color: #FF0; background: #000 }
    a.p4:hover, a.p4:visited:hover { color: #FF0; background: #000 }
    a.p_day, a.p_day:visited { color: #3b2821; background: #AAFF88 }
    a.p_week, a.p_week:visited { color: #3b2821; background: #8ED672 }
    a.p_month, a.p_month:visited { color: #3b2821; background: #78B460 }
    a.p_none, a.p_none:visited { color: #3b2821; background: #669951 }
    a.pX, a.pX:visited { color: #3b2821; background: #FFF }
    a.p0, a.p0:visited { color: #3b2821; background: #AAF }
    a.p1, a.p1:visited { color: #3b2821; background: #F55 }
    a.p2, a.p2:visited { color: #3b2821; background: #F83 }
    a.p3, a.p3:visited { color: #3b2821; background: #FF0 }
    a.p4, a.p4:visited { color: #3b2821; background: #FF0 }
}

//
// textile sandbox
// --------------------------------------------------

.sandbox {
    border-width: $INPUT_BORDER_WIDTH;
    border-style: $INPUT_BORDER_STYLE;
    border-radius: $INPUT_BORDER_RADIUS;
    border-color: $INPUT_BORDER_COLOR;
    padding: 2px 5px 0px 5px;
}

//
// tables
// --------------------------------------------------

thead tr {
    color: $LIST_HEADER_FG_COLOR;
    background-color: $LIST_HEADER_BG_COLOR;
}

.table-striped {
    tbody > tr:nth-child(odd) {
        background-color: $LIST_ODD_BG_COLOR;
    }
    tbody > tr:nth-child(even) {
        background-color: $LIST_EVEN_BG_COLOR;
    }
}

.table-curators,
.table-description-permissions,
.table-herbarium,
.table-license-updater,
.table-location-help,
.table-manage-species-lists,
.table-project-members,
.table-review-donations,
.table-upload-report {
    th, td {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

.table-description-permissions {
    th, td {
        padding: 0.1em 0;
        text-align: center;
    }
    th:first-child,
    td:first-child {
        padding: 0.1em 0.5em;
        text-align: left;
    }
}

.table-donors {
    text-align: center;
    td {
        padding: 0.1em 1em;
    }
}

.table-herbarium {
    th:nth-child(1),
    td:nth-child(1) {
        text-align: center;
    }
    td:nth-child(2),
    td:nth-child(3) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 10em;
    }
}

.table-manage-species-lists {
    td {
        padding: 0.2em 1em;
    }
    tr {
        border-top: 1px solid $LIST_BORDER_COLOR;
    }
    tr:first-child {
        border-top: none;
    }
}

.table-publications {
    th, td {
        padding: 0.5em 0.5em;
    }
    td {
        border-top: 1px solid $LIST_BORDER_COLOR;
    }
    th:first-child, td:first-child {
        padding-left: 1em;
    }
    th:last-child, td:last-child {
        padding-right: 1em;
    }
    td:nth-child(2) {
        width: 20em;
        font-size: 85%;
        word-break: break-all;
    }
    td:nth-child(3),
    td:nth-child(4) {
        text-align: center;
        font-weight: bold;
    }
    td:last-child {
        text-align: center;
    }
}

.table-review-donations {
    th, td {
        border-right: 1px solid $LIST_BORDER_COLOR;
    }
    th:last-child, td:last-child {
        border: 0;
    }
}

.table-observation-form {
    background: none;
    width: 100%;
    td:first-child {
        padding-right: 10px;
    }
    td {
        padding-bottom: 5px;
    }
}

table.table-namings {
    width: 100%;
    tbody {
        border: 1px solid $LIST_BORDER_COLOR;
        border-radius: $INPUT_BORDER_RADIUS !important;
    }
    th {
        color: $BODY_FG_COLOR;
        background: $BODY_BG_COLOR;
        font-weight: normal;
        vertical-align: bottom;
    }
    th, td {
        padding: 5px;
    }
    th:first-child {
        padding-left: 0;
    }
    td:first-child {
        padding-left: 1em;
    }
    td:last-child {
        padding-right: 1em;
    }
}

.table-lifeform {
    tr td {
        padding: .1em 1em;
    }
    tr:nth-child(odd) {
        background-color: $LIST_ODD_BG_COLOR;
    }
    tr:nth-child(even) {
        background-color: $LIST_EVEN_BG_COLOR;
    }
}

.textile {
    th, td {
        padding: 0.3em;
        vertical-align: top;
    }
    th {
        vertical-align: bottom;
    }
}

//
// icons
// --------------------------------------------------

.icon-addon {
    position: relative;
    display: block;
}

.icon-addon:after,
.icon-addon:before {
    display: table;
    content: " ";
}

.icon-addon:after {
    clear: both;
}

.icon-addon.addon-md .glyphicon,
.icon-addon .glyphicon,
.icon-addon.addon-md .fa,
.icon-addon .fa {
    position: absolute;
    z-index: 10;
    left: 10px;
    font-size: 14px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: 1px;
    color: mix($INPUT_FG_COLOR, $INPUT_BG_COLOR);
}

.icon-addon.addon-lg .form-control {
    line-height: 1.33;
    font-size: 18px;
    padding: 10px 16px 10px 40px;
}

.icon-addon.addon-sm .form-control {
    padding: 5px 10px 5px 28px;
    font-size: 12px;
    line-height: 1.5;
}

.icon-addon.addon-lg .fa,
.icon-addon.addon-lg .glyphicon {
    font-size: 18px;
    margin-left: 0;
    left: 11px;
    top: 4px;
}

.icon-addon.addon-md .form-control,
.icon-addon .form-control {
    padding-left: 30px;
    float: left;
    font-weight: normal;
}

.icon-addon.addon-sm .fa,
.icon-addon.addon-sm .glyphicon {
    margin-left: 0;
    font-size: 12px;
    left: 5px;
    top: 1px
}

.icon-addon .form-control:focus + .glyphicon,
.icon-addon:hover .glyphicon,
.icon-addon .form-control:focus + .fa,
.icon-addon:hover .fa {
    color: $INPUT_FG_COLOR;
}

//
// generally useful classes
// --------------------------------------------------

.inline {
    display: inline-block;
}

.indent {
    padding-left: 10px !important;
}

.indent-one-em {
    padding-left: 1em;
}

.name-section p {
    margin: 0;
    padding-left: 1em;
    text-indent: -1em;
}

.obs-notes p {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.align-bottom {
    vertical-align: bottom !important;
}

.align-center {
    text-align: center;
}

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

.align-top {
    vertical-align: top !important;
}

.align-1px {
    text-align: 1px;
}

.bold {
    font-weight: 800;
}

.border-none {
    border: none;
}

.border-radius-none {
    border-radius: 0 !important;
}

form.button_to {
  display: inline;
  margin: 0;
  padding: 0;
  div { display: inline; }
  input[type=submit] {
    margin: 0;
    padding: 0;
    -webkit-appearance: caret;
    background: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: normal;
    cursor: pointer;
    color: #2050E0;
  }
  input[type=submit]:hover {
    text-decoration: underline;
  }
}

.monospace {
    font-family: monospace
}

.push-down {
    margin-top: 1em;
}

.push-down-more {
    margin-top: 1.5em;
}

.push-below-buttons {
    margin-top: 23px;
}

.push-up {
    margin-bottom: 1em;
}

.slight-pad {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pad-box {
    padding: 5px;
}

.border-box {
    border: 1px solid;
}

.pad-bottom {
    padding-bottom: .25em;
}

.pad-top {
    padding-top: 1em;
}

.kill-padding {
    padding: 0 !important;
}

.nowrap {
    white-space: nowrap;
}

.nowrap-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vcenter {
    display: flex;
    align-items: center;
}

// Most browsers allow you to zoom in or out: let the user decide what
// an optimal width for a line of text should be.  There is no way for us
// to decide for them intelligently, since browsers differ so much in how
// they deal with print views.
@media screen {
    .max-width-text {
        max-width: 600px;
    }

    .max-width-text-plus-padding {
        max-width: 650px;
    }

    .max-width-text-plus-image {
        max-width: 850px; // 600px text column + 160pm max thumbnail
    }

    .max-width-text-times-two {
        max-width: 1200px;
    }
}

//
// style tweaks
// --------------------------------------------------

.well p {
  margin: 0;
  padding: 0;
}

table.table-compact tr td {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

.list-group.list-group-compact .list-group-item {
    padding: 4px;
}

.input-group .icon-addon .form-control {
    border-radius: 0;
}

input[type=checkbox] {
    // fixes alignment issue in firefox; bootstrap applies this only to IE9:
    // margin-top: 1px \9;
    margin-top: 1px;
}

[data-role=link]:hover {
    cursor: pointer;
}

// got this trick from:
// http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
.file-field {
    position: relative;
    overflow: hidden;
    input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        background: red;
        cursor: inherit;
        display: block;
    }
    + span {
        margin-left: 0.5em;
    }
}

//
// small devices, tablets
// --------------------------------------------------

@media screen and (max-width: 767px) {
    // #navigation {
    //   padding-left: 15px;
    //   padding-right: 15px;
    // }

    .rss-box-details {
        height: auto !important;
    }

    .row-offcanvas {
        position: relative;
        -webkit-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
        -webkit-transform: translate3d(0,0,0);
    }

    .row-offcanvas-right {
        right: 0;
    }

    .row-offcanvas-left {
        left: 0;
    }

    .row-offcanvas-right
    .sidebar-offcanvas {
        right: -$sidebar-max-width;
    }

    .row-offcanvas-left
    .sidebar-offcanvas {
        left: -$sidebar-max-width;
    }

    .row-offcanvas-right.active {
        right: $sidebar-max-width;
    }

    .row-offcanvas-left.active {
        left: $sidebar-max-width;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: $sidebar-max-width;
    }

    .hidden-overflow-x {
        overflow-x: hidden !important;
    }

    .navbar-default {
        margin: 0;
    }

    .navbar-form {
        margin: 0;
        border: 0;
    }
}

//
// larger devices
// --------------------------------------------------

@media screen and (min-width: 767px) {
    .pull-left-sm {
        float: left;
    }
    .pull-right-sm {
        float: right;
    }
    .push-down-sm {
        margin-top: 1em;
    }
}

//
// specialized stuff for print view
// --------------------------------------------------

@media print {
    #right_side {
        width: 100% !important;
    }
}

//
// don't bold the labels on image date and geotag helper boxes
// on create observation page

.image_messages label,
.geocode_messages label {
  font-weight: normal;
}

.dashed-border {
    border: 5px dashed;
}

//
// Help tips on create observation page
// ------------------------------------------
.arrow-up {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid rgba(203, 203, 203, 0.9);
  position: absolute;
  left: 25px;
  top: 25px;
  margin-left: 1px;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid rgba(203, 203, 203, 0.9);
  position: absolute;
  left: 0;
  top: 25px;
  margin-left: 1px;
}

.form-observation-map {
  height: 400px;
  width: 100%;
}

.thumbnail-map-container {
  position:    relative;
  margin-bottom: 1em;
}
.thumbnail-map {
  position:    relative;
}
.thumbnail-map-box {
  position:    absolute;
  margin-top:  -2px;
  margin-left: -2px;
  border:      2px solid rgb(0, 255, 192);
}
.pin-offset {
  position:    absolute;
  width:       100%;
  height:      100%;
  margin-top:  2px;
  margin-left: -11px;
}
.red-pin {
  position:    absolute;
  width:       40px;
  height:      40px;
  background:  image-url("red_pin.png");
}
.thumbnail-buttons {
  z-index:     2;
  position:    absolute;
  padding:     10px;
  left:        0px;
  bottom:      0px;
}
.plus-button, .minus-button {
  width:       16px;
  height:      16px;
  background:  image-url("thumbnail-map-buttons.png");
}
.minus-button {
  height:      15px;
  background-position: 0px 15px;
}

.map-btn {
  @extend .btn;
  margin-top: 10px;
}

.spacer {
  height: 30px;
  width: 1px;
}

{'fraction_non_alphanumeric': 0.17056810403832992, 'fraction_numerical': 0.026631821293012257, 'mean_word_length': 2.2657075510038203, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 83, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7240061', 'n_tokens_mistral': 32247, 'n_tokens_neox': 29869, 'n_words': 5593}