akam_roadmap/app/assets/stylesheets/projects.css.scss

// Place all the styles related to the Projects controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

//colors
$color_storm_dust_approx: #646464;
$alabaster: #fafafa;
$color_celeste_approx: #cecece;
$color_dodger_blue_approx: #1d84fb;
$color_logan_approx: #aaaacc;
$color_white_approx: #fefeff;
$white: #fff;
$color_ebony_clay_approx: #223344;
$color_arapawa_approx: #111166;
$color_mischka_approx: #ccccdd;
$color_stratos_approx: #000044;
$color_picton_blue_approx: #3ab1fe;

//fonts
$font_0: 'Open Sans';
$font_1: 'Open Sans Light';
$font_2: 'Open Sans Bold';

//@extend-elements
//original selectors
//.navbar-bright a, .navbar-bright .navbar-brand, #masthead h4
%extend_1 {
  color: $color_mischka_approx;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,300,600');
body {
  color: $color_storm_dust_approx;
  background-color: #FAFAFA;
}

h1 {
  font-family: $font_0, $font_1, $font_2;
}

h2 {
  font-family: $font_0, $font_1, $font_2;
}

h3 {
  font-family: $font_0, $font_1, $font_2;
}

.highlight {
  font-family: $font_0, $font_1, $font_2;
}

.navbar {
  a {
    font-family: $font_0, $font_1, $font_2;
  }
  &.affix {
    position: fixed;
    top: 0;
    width: 100%;
  }
}

#masthead {
  min-height: 311px;
  background-color: #1D84FB;
  color: $color_logan_approx;
  background-image: url('/assets/bg_header.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center 0;
  h4 {
    font-family: $font_0, $font_1, $font_2;
    @extend %extend_1;
  }
  h1 {
    font-size: 55px;
    line-height: 1;
    color: $color_white_approx;
    margin-top: 50px;
  }
  .well {
    clear: both;
    background-color: #1D84FB;
    border: none;
    //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: none;
    color: $white;
  }
}

footer {
  margin-top: 40px;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: $color_celeste_approx;
}

#topPanel {
  padding-top: 0;
  padding-left: 22px;
  padding-right: 22px;
  .panel-body {
    padding-top: 0;
  }
}

.top-spacer {
  background-color: $white;
  height: 40px;
}

a {
  color: $color_ebony_clay_approx;
  text-decoration: none;
  &:hover {
    color: $color_ebony_clay_approx;
    text-decoration: none;
  }
}

.icon-bar {
  background-color: $white;
}

@media screen and (min-width: 768px) {
  #masthead h1 {
    font-size: 80px;
  }
}

.navbar-bright {
  background-color: $color_arapawa_approx;
  color: $white;
  margin-bottom: 0;
  border-width: 0;
  a {
    @extend %extend_1;
  }
  .navbar-brand {
    @extend %extend_1;
  }
  li > a:hover {
    background-color: $color_stratos_approx;
  }
}

.dropdown-menu {
  min-width: 250px;
}

.caret {
  color: $white;
}

.navbar-toggle {
  color: $white;
  border-width: 0;
  &:hover {
    background-color: $white;
  }
}

.panel {
  clear: both;
  margin-top: -120px;
  background-color: $white;
  border-radius: 15;
  padding: 15px;
  box-shadow: 2px 2px 3px #aaaaaa;

  .lead {
    overflow: hidden;
    height: 90px;

  }
}

.thumbnail {
  margin-bottom: 8px;
}

.img-container {
  overflow: hidden;
  height: 170px;
  img {
    min-width: 280px;
    min-height: 180px;
    max-width: 380px;
    max-height: 280px;
  }
}

.txt-container {
  overflow: hidden;
  height: 100px;
}

.label-float {
  margin: 0 auto;
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  opacity: .9;
  padding: 6px;
  color: $white;
}

.navbar-form input {
  width: auto;
}

.form-inline input {
  width: auto;
}