anthonymidili/FishBowl

/* universal */

body {
  background-size: cover;
  background-color: lightskyblue;
  background-image: image-url('under_the_sea_background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top;
}

h1, h2 {
  color: white;
  text-shadow: -2px -2px 5px black;

  small {
    color: orangered;
  }
}

.home-background {
  padding: 10px;
  margin-bottom: 40px;
  background-color: lightskyblue;
  border-radius: 4px;
  color: midnightblue;
}

.add-background {
  padding: 10px;
  margin-bottom: 2em;
  background-color: white;
  border-radius: 4px;

  .span8 {
    width: 600px;
  }
}

.table-background {
  background-color: white;
}

.add-text-shadow {
  color: greenyellow;
  text-shadow: -2px -2px 5px black;

  a {
    color: lightgray;

    &:hover {
      color: white;
    }
  }
}

.pad-right {
  margin-right: 1em;
}

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

.sign-up-btn {
  font-size: 35px;
  padding: 15px;
}

.center_fields {

  td {
    text-align: center !important;
    vertical-align: middle !important;
  }
}

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

section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #999;
}

.left-divider {
  border-left: 1px solid #999;
}

.callout {
  border: 3px solid black;
  background-color: midnightblue;
  color: deepskyblue;
  label {
    color: deepskyblue;
  }

  .add-on {
    color: black;
  }

  .help-block {
    color: lightskyblue;
    font-size: 13px;
  }
}

nav.pagination {
  background-color: white;
  border-radius: 4px;
  padding-right: 1em;
  padding-left: 1em;
}

/* top bar */

.divider {
  border-top: solid 2px darkgray;
}

.top-bar {
  a {
    color: $fb-topbar-font !important;
    &:hover {
      color: $fb-topbar-font-hover !important;
      &::after {
        border-color: $fb-topbar-font-hover transparent transparent !important;
      }
    }
    &::after {
      border-color: $fb-topbar-font transparent transparent !important;
    }
  }
  li.is-submenu-item {
    margin: 4px 0 4px 0;
    & a {
      padding: 6px;
      color: $fb-title-dropdown !important;
      &:hover {
        color: $fb-title-dropdown-hover !important;
        background: $fb-title-dropdown-background;
      }
    }
  }

  ul.is-dropdown-submenu {
    border-radius: 6px;
  }

  .brand {
    font-size: x-large;
  }
}

/* thumbnails */

.picture-frame {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
  transition: all 0.2s ease-in-out;
}

.bowl-thumbnail {
  height: 56em;
  overflow-y: auto;
  position: relative;
  background-color: white;
}

.your-thumbnail-height {
  height: 29em;
  position: relative;
}

.your-species-height {
  height: 27em;
  position: relative;
}

.add-thumbnail-height {
  height: 25em;
  position: relative;
}

.pad-top {
  top: 2em;
}

.center-image {
  height: 21em;
  position: relative;

  img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}

.info-height {
  height: 20em;
  overflow-y: auto;
}

.to-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.select-bar {
  background-color: midnightblue;
  padding: 1em;
  border-radius: 15px;

  a {
    color: deepskyblue;
    &:first-child {
      margin-right: 5em;
    }

    &:last-child {
      margin-left: 5em;
    }

    &:hover {
      color: white;
    }
  }
}

.alert-text {
  color: red;
}

/* water health test results */

.remove-link-underline {
  a:hover {
    text-decoration: none !important;
  }
}

.caution {
  background-color: yellow !important;
}

.unsafe {
  background-color: orange !important;
}

.danger {
  background-color: red !important;
}

.note-bar {
  background-color: midnightblue;
  padding: 1em;
  border-radius: 15px;
}

.graph-sample {
  width: 100%;
}

/* about water health sidebar */

.health-sidebar {
  background-color: midnightblue;
  border: 3px solid black;
  border-radius: 10px;
  z-index: 10;

  a {
    color: lightgray;

    &:hover {
      color: orangered;
    }
  }

  .nav-header {
    color: deepskyblue;
    font-family: Verdana;
  }
}

/* carousel */

.carousel-inner {
  background-color: lightskyblue;
  padding: 10px;
  width: 920px;
  border-radius: 4px;
}

.carousel-center-image {
  height: 30em;
  position: relative;

  img {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
  }
}

.carousel-span4 {
  width: 280px;
  height: 16em;
}

/* devise */

#error_explanation {
  @extend .alert;
}

.alert {
  border: 1px solid orangered;
  color: orangered;

  h2 {
    color: orangered;
    text-shadow: none;
  }
}

/* footer */

footer {
  margin-top: 30px;

  .developer-brand {
    float: left;
    display: block;
    padding: 10px 20px 10px;
    margin-left: -20px;
    font-size: 15px;
    color: #777777;
    text-decoration: none;

    &:hover {
      color: black;
    }
  }
}

div.fixed-button {
  position: fixed;
  bottom: 3em;
  right: 2em;
  z-index: 10;
  border-radius: 5px;
  box-shadow: 8px 8px 5px black;
}