Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                | <!--[if IE 8]><div class="ie8 oldie"><![endif]-->
| <!--[if IE 9]><div class="ie9 oldie"><![endif]-->

.branding-header

  .navbar.navbar-default.global-menu
  
    .container-fluid
    
        h1.talent-logo Talent Impact
      
        ul.nav.navbar-nav.navbar-right
        
          li
            a(href='#') Suzzy Smith - SmithCo, Inc.
          
                
          li
            a(href='#')
              i.fa.fa-sign-out
              | 
              | Sign Out
      
    
.app-menu(data-spy="affix", data-offset-top="42")

  .container-fluid

    .row

      .col-xs-6.col-md-4

        h2.talent-tagline.develop Develop
        h3.app-title
          a(href='#') Career Framework


      .navbar-content.col-xs-6.col-md-8

        .navbar-form.navbar-right

          .form-group
            .btn-group
              button.btn.btn-primary.btn-sm.dropdown-toggle(data-toggle="dropdown")
                i.fa.fa-user
                |  
                span.caret 
              ul.dropdown-menu(role='menu')
                li
                  a(href='#') User Action
                li
                  a(href='#') Another user action
                li
                  a(href='#') Something else here
                li.divider
                li
                  a(href='#') Separated user link

        

        


.body.container-fluid

  .row
  
    .col-xs-12.col-md-3.sidebar
    
      ul.nav.nav-pills.nav-stacked
        li 
          a.row(href="#one", data-toggle="pill") 
            i.fa.fa-home.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Home
        li 
          a.row(href="#two", data-toggle="pill") 
            i.fa.fa-users.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Explore Careers
        li.active 
          a.show-form-page.row(href="#three", data-toggle="pill") 
            i.fa.fa-user-md.col-xs-2.col-md-3
            .col-xs-10.col-md-9 My Role
        li 
          a.row(href="#four", data-toggle="pill") 
            i.fa.fa-laptop.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Self Assessments
        li 
          a.row(href="#five", data-toggle="pill") 
            i.fa.fa-puzzle-piece.col-xs-2.col-md-3
            .col-xs-10.col-md-9 Understanding Competencies
        li 
          a.row(href="#six", data-toggle="pill") 
            i.fa.fa-lightbulb-o.col-xs-2.col-md-3
            .col-xs-10.col-md-9 My Development Ideas
          
      
        
          
    .col-xs-12.col-md-9.guts
        
      .tab-content
    
        #one.tab-pane

          h2 
            i.fa.fa-home 
            | 
            | Home
          
          .row
          
            .col-xs-12.col-md-6

              h3 Sub Heading 1

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 

            .col-xs-12.col-md-6

              h3 Sub Heading 2

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
                

        #two.tab-pane

          h2 
            i.fa.fa-users 
            | 
            | Explore Careers
          
          .row
          
            .col-xs-12.col-md-6

              h3 Sub Heading 1

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 

            .col-xs-12.col-md-6

              h3 Sub Heading 2

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 



        #three.tab-pane.active

          h2 
            i.fa.fa-user-md 
            | 
            | My Role
            
          .row
          
            .col-xs-9.col-md-10
            
              h3 
                | Suzzy Smith 
                small Sales Consultant (Sales)

              h4 Work Dimensions

              p Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            
            .col-xs-3.col-md-2
            
              img.img-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/empl1.jpg", title="Employee Name")
          
          .well
          
            h4 Job Responsibilities

            .row

              .col-xs-12.col-md-4

                h5.well-heading Job Description

                p Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

              .col-xs-12.col-md-4

                h5.well-heading Skills

                p Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

              .col-xs-12.col-md-4

                h5.well-heading Competencies

                p Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
              
              
          .row

            .col-xs-6
            
              h4 Core Competencies
              
              ul
                li Anim pariatur cliche reprehenderit
                li enim eiusmod high life accusamus terry richardson ad squid
                li 3 wolf moon officia aute, non cupidatat skateboard dolor brunch
                li Food truck quinoa nesciunt laborum eiusmod
                li Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et
                li Nihil anim keffiyeh helvetica, cred nesciunt sapiente ea proident.
              
            .col-xs-6
            
              h4 Technical Competencies
              
              ul
                li Anim pariatur cliche reprehenderit
                li enim eiusmod high life accusamus terry richardson ad squid
                li 3 wolf moon officia aute, non cupidatat skateboard dolor brunch
                li Food truck quinoa nesciunt laborum eiusmod
                li Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et
                li Nihil anim keffiyeh helvetica, cred nesciunt sapiente ea proident.
              
          .row

            .col-xs-12

              h4 Development ideas for your role
              
              p Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
              
              p Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
              

          .well
          
            h4 Your Next Chapter

            .row

              .col-xs-12.col-md-4

                h5.well-heading You've started the following roles:

                ul.list-unstyled.list-inline
                  li 
                    | Sales Director 
                    br
                    img.img-thumbnail.well-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/empl1.jpg", title="Sales Director")
                  li 
                    | Trade Director 
                    br
                    img.img-thumbnail.well-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/empl1.jpg", title="Trade Mkt Director")
                  li 
                    | RTM Director 
                    br
                    img.img-thumbnail.well-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/empl1.jpg", title="RTM Director")

              .col-xs-12.col-md-4

                h5.well-heading You've self-identified as a:

                ul.list-unstyled.list-inline 
                  li
                    img.img-thumbnail.well-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/tmb-strengths_04.jpg", title="The Technician")
                  li
                    img.img-thumbnail.well-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/tmb-strengths_09.jpg", title="The Guru")
                  li
                    img.img-thumbnail.well-thumbnail(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/tmb-strengths_02.jpg", title="Road Block Remover")


              .col-xs-12.col-md-4

                h5.well-heading Explore more roles:

                p 
                  button.btn.btn-primary.btn-lg 
                    i.fa.fa-users  
                    | &nbsp;
                    | Explore More Careers
            
              


        #four.tab-pane

          h2 
            i.fa.fa-laptop 
            | 
            | Self Assessments
          
          .row
          
            .col-xs-12.col-md-4

              h3 Sub Heading 1

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 

            .col-xs-12.col-md-4

              h3 Sub Heading 2

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              
            .col-xs-12.col-md-4

              h3 Sub Heading 3

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque.
              
              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
              

        #five.tab-pane

          h2 
            i.fa.fa-puzzle-piece 
            | 
            | Understand Competencies

          h3 Lorem ipsum dolor sit amet

          table.table.table-striped.table-bordered
            thead
              tr
                th Table header 1
                th Table header 2
                th Table header 3
                th Table header 4
                th Table header 5
                th Table header 6
                th Table header 7
                th Table header 8
            tbody
              tr
                td Table value 1
                td Table value 2
                td Table value 3
                td Table value 4
                td Table value 5
                td Table value 6
                td Table value 7
                td Table value 8
              tr
                td Table value 9
                td Table value 10
                td Table value 11
                td Table value 12
                td Table value 13
                td Table value 14
                td Table value 15
                td Table value 16
              tr
                td Table value 17
                td Table value 18
                td Table value 19
                td Table value 20
                td Table value 21
                td Table value 22
                td Table value 23
                td Table value 24
              tr
                td Table value 25
                td Table value 26
                td Table value 27
                td Table value 28
                td Table value 29
                td Table value 30
                td Table value 31
                td Table value 32
              tr
                td Table value 33
                td Table value 34
                td Table value 35
                td Table value 36
                td Table value 37
                td Table value 38
                td Table value 39
                td Table value 40
              tr
                td Table value 1
                td Table value 2
                td Table value 3
                td Table value 4
                td Table value 5
                td Table value 6
                td Table value 7
                td Table value 8
              tr
                td Table value 9
                td Table value 10
                td Table value 11
                td Table value 12
                td Table value 13
                td Table value 14
                td Table value 15
                td Table value 16
              tr
                td Table value 17
                td Table value 18
                td Table value 19
                td Table value 20
                td Table value 21
                td Table value 22
                td Table value 23
                td Table value 24
              tr
                td Table value 25
                td Table value 26
                td Table value 27
                td Table value 28
                td Table value 29
                td Table value 30
                td Table value 31
                td Table value 32
              tr
                td Table value 33
                td Table value 34
                td Table value 35
                td Table value 36
                td Table value 37
                td Table value 38
                td Table value 39
                td Table value 40
                
                
        #six.tab-pane

            h2 
              i.fa.fa-lightbulb-o 
              | 
              | My Development Ideas

            h3 Lorem ipsum dolor sit amet

            .row

              .col-xs-12.col-md-2
              
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 

              .col-xs-12.col-md-2
        
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
                
              .col-xs-12.col-md-8
        
                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione? Iure repudiandae a repellendus eligendi deserunt sequi. Itaque. 
      
            
      .sidebar-collapse
      
        a.sidebar-collapse-control(href="#", title="Collapse / Expand Menu")
          span.fa-stack
            i.fa.fa-stop.fa-stack-2x
            i.fa.fa-compress.fa-stack-1x.fa-inverse
      
 
.footer.container-fluid

  
      
  .row.corporate
  
    .col-xs-12.col-md-3
    
      .mercer-logo Mercer
      
    .col-xs-12.col-md-7
      
      .content
        p &copy; 2002-2014 Mercer LLC, All Rights Reserved. Need help? 1-800-866-7474 Sunday 6:30pm - Friday 8pm EST
        
    .col-xs-12.col-md-2
        
      .social
        ul
          li.facebook
            a(href="#")
              i.fa.fa-facebook
          li.twitter
            a(href="#")
              i.fa.fa-twitter
          li.linkedin
            a(href="#")
              i.fa.fa-linkedin
          li.google-plus
            a(href="#")
              i.fa.fa-google-plus

      
      
| <!--[if lte IE 9]></div><![endif]-->
              
            
!

CSS

              
                @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300);
@import "compass";


//---------------
// generic vars

// greens - turquoise
$clr-dk-forecast:   #004C4F;
$clr-md-forecast:   #008075;
$clr-brt-forecast:  #0FB694;
$clr-lt-forecast:   #A7D9C8;

// grays - onyx
$clr-dk-gray:   #000;
$clr-md-gray:   #404040;
$clr-brt-gray:  #808080;
$clr-lt-gray:   #BFBFBF;
$clr-white:     #fff;

$clr-ph-brt-gray: #d6d6d8;
$clr-ph-lt-gray: #eff0f2;

// blues - sapphire
$clr-dk-mobilize:   #002C77;
$clr-md-mobilize:   #006D9E;
$clr-brt-mobilize:  #00A8C8;
$clr-lt-mobilize:   #A6E2EF;

// reds - ruby
$clr-dk-engage:   #690031;
$clr-md-engage:   #A9194F;
$clr-brt-engage:  #ED2C67;
$clr-lt-engage:   #F7B6BB;

// purples - iolite
$clr-dk-reward:   #43276D;
$clr-md-reward:   #595997;
$clr-brt-reward:  #6F83C1;
$clr-lt-reward:   #C4CAE6;

// red-orange - garnet
$clr-dk-assess:   #810009;
$clr-md-assess:   #BA2C2B;
$clr-brt-assess:  #EF4E45;
$clr-lt-assess:   #F9BEAD;

// amethyst
$clr-dk-develop:   #560054;
$clr-md-develop:   #932077;
$clr-brt-develop:  #CE3D95;
$clr-lt-develop:   #E7B8D5;


$clr-mercer-emerald-dark:       #004c4f; // green
$clr-mercer-emerald-medium:     #008075; 
$clr-mercer-emerald-bright:     #0fb694;
$clr-mercer-emerald-light:      #a7d9c8;

$clr-mercer-topaz-dark:         #8e5501; // gold & yellow
$clr-mercer-topaz-medium:       #C98314;
$clr-mercer-topaz-bright:       #FBAE17;
$clr-mercer-topaz-light:        #FFDDAC;

$clr-mercer-citrine-dark:       #8c3709; // orange
$clr-mercer-citrine-medium:     #C45F24;
$clr-mercer-citrine-bright:     #F48132;
$clr-mercer-citrine-light:      #FCCFAB;



  // map to shorter var names
  $clr-green-dark:             $clr-mercer-emerald-dark;
  $clr-green:                  $clr-mercer-emerald-medium;
  $clr-green-bright:           $clr-mercer-emerald-bright;
  $clr-green-light:            $clr-mercer-emerald-light;
  $clr-gold-dark:              $clr-mercer-topaz-dark;
  $clr-gold:                   $clr-mercer-topaz-medium;
  $clr-gold-bright:            $clr-mercer-topaz-bright;
  $clr-gold-light:             $clr-mercer-topaz-light;
  $clr-orange-dark:            $clr-mercer-citrine-dark;
  $clr-orange:                 $clr-mercer-citrine-medium;
  $clr-orange-bright:          $clr-mercer-citrine-bright;
  $clr-orange-light:           $clr-mercer-citrine-light;



$sansSerifStack: Arial, Helvetica, sans-serif;
$serifStack: 'Courier New', Georgia, 'Times New Roman', serif;
$monoSpaceStack: Consolas, 'Liberation Mono', Courier, monospace;
$openSansStack: 'Open Sans', Helvetica, Arial, sans-serif;


$img-logo-sprite01: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/logos-talent-all-sprite_1.png');

$img-logo-sprite02: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/logos-talent-sprite_1.png');



//---------------
// App vars

$number-base: 10;
$global-radius: 5px;

$clr-primary: $clr-md-develop;
$clr-primary-dark: $clr-dk-develop;
$clr-primary-bright: $clr-brt-develop;
$clr-primary-light: $clr-lt-develop;

$clr-background: $clr-white;
$clr-sidebar-background: lighten($clr-lt-gray, 13);
$clr-footer-background: $clr-ph-lt-gray;

$clr-text: $clr-md-gray;
$clr-text-dark: $clr-dk-gray;
$clr-text-bright: $clr-brt-gray;
$clr-text-light: $clr-lt-gray;

$clr-alert: $clr-md-assess;




//---------------
// mixins

@function goldrat($scale: 1) {
  
  @return round($number-base * 1.61803398875) * $scale
    
}


@mixin button-colors($clr) {
  
  background-color: $clr;
  @include background(linear-gradient(top, $clr 35%, darken($clr, 13) 65%));
  border-color: darken($clr, 13);
  box-shadow: 2px 2px 4px fade-out($clr-text-dark, 0.65);
  font-size: 0.85em;
  text-shadow: 1px 1px 2px fade-out($clr-text-dark, 0.75);
  text-transform: uppercase;
  
  &:hover {
    
    background-color: lighten($clr, 4);
    @include background(linear-gradient(top, lighten($clr, 4) 35%, darken($clr, 9) 65%));
    
  }
  
  &:active {
    
    background-color: darken($clr, 4);
    @include background(linear-gradient(top, darken($clr, 11) 35%, lighten($clr, 2) 65%));
    
  }
  
  .fa {
    font-size: 1.2em;
  }
  
}




//---------------
// base styles

html, body {

  background: $clr-ph-lt-gray;
  color: $clr-text;
  font: normal 14px/20px $openSansStack;
  
}


h1, h2 {
  color: $clr-primary;
}

h3, h4 {
  color: $clr-primary-dark;
}



//---------------
// component styles


.oldie.ie8 .modal-dialog {
  
  margin: 30px auto;
  width: 600px;
  
}


.btn, .form-control, .panel, .panel-heading, .panel-group .panel, .well {
  border-radius: 0;
}

.btn-default {
  
  @include button-colors($clr-ph-lt-gray);
  box-shadow: none;
  
}

.btn-primary {
  
  @include button-colors($clr-primary);
  
}

.btn-success {
  
  @include button-colors(adjust-hue($clr-green-bright, -13));
  
}

.btn-info {
  
  @include button-colors(lighten($clr-brt-mobilize, 5));
  
}

.btn-warning {
  
  @include button-colors($clr-gold);
  
}

.btn-sm, .btn-xs {
  
  font-size: 11px;
  line-height: 18px;
  
  .fa {
    font-size: 12px;
  }
  
}

.btn-lg {
  font-size: 16px;
}



.well-heading {
  
  border-bottom: solid 1px $clr-primary-light;
  font-weight: 700;
  padding-bottom: 4px;
  
}

.well-thumbnail {
  width: 100px;
}


.branding-header {
  
  .global-menu {
    
    background-color: $clr-background;
    @include background(linear-gradient(to bottom, $clr-background 35%, darken($clr-background, 6) 65%));
    border: 0;
    color: $clr-text;
    height: auto;
    margin-bottom: 0;
    min-height: 42px;
    
    .talent-logo {
      
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/logos-talent-sprite.png) no-repeat left top;
      @include hide-text;
      float: left;
      height: 15px;
      margin: 13px 0;
      padding: 0;
      position: relative;
      width: 132px;
      
    }
    
    .navbar-nav {
      
      float: right;
      height: auto;
      margin-bottom: 0;
      margin-top: 0;
      min-height: 42px;
      word-spacing: -4px; // fix whitespace issue with inline-blocks
      
      li {

        display: inline-block;
        float: none;
        font-size: 14px;
        height: 42px;
        margin: 0;
        min-height: 42px;

        &:first-child {
          border-left: 0;
        }

        &:last-child {
          border-right: 0;
          margin-right: 5px;
        }

        a {

          color: $clr-text;
          height: 42px;
          min-height: 42px;
          padding: 10px 13px;
          word-spacing: 0;

          &:hover {
            color: $clr-text-bright;
          }

          .fa {

            color: $clr-text-light;
            font-size: 18px;
            margin-right: 4px;

          }

        }

        .dropdown-menu {

          background-color: $clr-background;
          left: auto;
          position: absolute;
          right: -1px;
          top: 41px;

          li {

            font-size: 14px;
            border-left: 0;
            border-right: 0;
            box-shadow: none;
            display: block;
            height: auto;

            &.divider {
              height: 1px; 
              min-height: 1px;
            }

          }

          a {

            color: $clr-text;
            height: auto;
            padding: 3px 20px;

          }

        }

        &.open .dropdown-toggle {

          background: $clr-text-bright;
          border: 0;
          color: $clr-background;
          width: auto;

          .fa {
            color: $clr-background;
          }

        }

      }
      
    }
    
  }
  
}


.navbar {
  border-radius: 0; 
}


.app-menu {
  
  background-color: lighten($clr-text-dark, 10);
  @include background(linear-gradient(to bottom, lighten($clr-text-dark, 8) 35%, $clr-text-dark 65%));
  color: $clr-text-light;
  margin-bottom: 0;
  min-height: 51px;
  padding-bottom: 0;
  padding-top: 0;

  &.affix {

    left: 0;
    right: 0;
    top: 0;
    z-index: 500;

  }

  .talent-tagline, .mercer-logo {

    margin: 0;
    padding: 0;
    position: relative;

  }

  .talent-tagline {

    float: left;
    margin: 18px 0 0 0;
    padding: 0;

    &.develop {

      background: $img-logo-sprite02 no-repeat -126px -17px;
      @include hide-text;
      height: 12px;
      width: 93px;

    }

  }

  .app-title {

    color: darken($clr-background, 18);
    float: left;
    font-size: 16px;
    font-weight: 300;
    margin: 16px 0 0 12px;
    padding: 0;
    text-transform: uppercase;

    a {

      color: $clr-background;
      text-decoration: none;

      &:hover {
        color: darken($clr-background, 32);
      }

    }

  }
  
  .navbar-right {
    
    margin-left: 1.6em;
    padding: 0;
    
    li:last-child a {
      
      padding-right: 0;
      
    }
    
    &.main-nav li:last-child a,
    &.navbar-form .form-group .btn-group {
      
      padding-right: 15px;
      
    }
    
    
    
  }

  .navbar-content {
    
    padding-left: 0;
    min-height: 51px;
    
    a {
      
      color: $clr-background;
      text-transform: uppercase;
      
      &:hover {
      
        background: transparent;
        color: darken($clr-background, 13);
      
      }
      
    }
    
    .open a.dropdown-toggle, a.dropdown-toggle:focus {

      background: $clr-md-gray;
      color: $clr-background;

    }
    
    .dropdown-menu a {
      
      color: $clr-text;
      text-transform: none;
      
      &:hover {
      
        background: darken($clr-background, 5);
        
      }
      
    }
    
  }
  
  .search-form {
    
    padding-top: 8px;
    width: 12em;
    
  }
    
  
}

.oldie.ie8 .navbar-left {
  float: left;
}

.oldie.ie8 .navbar-right {
  float: right;
}

.oldie.ie8 .app-menu { 
  
  .navbar-content {
    
    height: 51px;
    padding-right: 15px;
    min-height: 51px;
    
  }
  
  .main-nav, .main-nav li {
    height: 51px;
  }
  
  .search-form, .navbar-form {
    
    margin-right: 0;
    
  }
  
  .navbar-right .dropdown-menu {
    
    left: auto;
    right: 0;
    
  }
  
  .navbar-nav {
    
    margin-top: 0;
    min-height: 51px;
    
    & > li {
      
      float: left;
      
      a {
        
        padding: 15px;
        min-height: 51px;
      
      }
      
    }
      
    .dropdown-menu {

      li {

        height: auto;
        min-height: auto;

        a {

          height: auto;
          min-height: auto;
          padding: 3px 20px;

        }

      }

      .divider {

        background-color: #e5e5e5;
        height: 1px;
        margin: 9px 0;
        overflow: hidden;

      }

    }
    
  }
  
}


.app-menu.affix + .body {
  margin-top: 51px;
}


.body {
  
  background-color: $clr-sidebar-background;
  @include background(
    linear-gradient(to top, $clr-sidebar-background, fade-out($clr-sidebar-background, 1) 33%),
    linear-gradient(to right, lighten(mix($clr-sidebar-background, $clr-primary-light, 30), 8), $clr-sidebar-background 16%)
  );
  
}


.sidebar {
  
  padding: 0;
  
  .quick-tools {
    
    height: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
    
    li {
      
      float: left;
      margin: 0;
      padding: 0;
      width: 25%;
      
      a {
        
        border-bottom: solid 1px darken($clr-sidebar-background, 8);
        border-left: solid 1px darken($clr-sidebar-background, 8);
        color: darken($clr-sidebar-background, 34);
        display: block;
        font-size: 24px;
        height: 36px;
        margin: 0;
        padding: 6px 0 0 0;
        text-align: center;
        
        &:hover {
          
          background: darken($clr-sidebar-background, 5);
          color: darken($clr-sidebar-background, 45);
          
        }
        
        
      }
      
      &:first-child a {
        border-left: 0;
      }
      
    }
    
    .quick-tools-menu {
      
      width: 100%;
  
      &.collapsed {
        display: none;
      }

    }
    
  }
  
  
  li+li {
    margin-top: 0;
  }
  
  .nav-pills {
    
      a {

        border-radius: 0;
        border-bottom: solid 1px darken($clr-sidebar-background, 8);
        color: $clr-primary-dark;
        font-size: 16px;
        padding-bottom: 16px;
        padding-top: 20px; 
        
        &:hover {
          background: darken($clr-sidebar-background, 5);
        }
        
        .fa {
          
          color: $clr-primary;
          font-size: 28px;
          text-align: center;
          
        }
        
      }
    
      .active a, .active a:active {
        
        background: $clr-background;
        color: $clr-primary;
        
        &:hover {
          background: darken($clr-background, 5);
          color: $clr-primary;
        }
        
        .fa {
          
          color: $clr-primary-bright;
          
        }
        
      }
    
  }
  
  
}

.guts {
  
  background: $clr-background;
  border-left: solid 1px darken($clr-sidebar-background, 8);
  @include clearfix;
  min-height: 460px;
  overflow: visible;
  position: relative;
  
  &.with-controls {
    padding-bottom: 90px;
  }
  
  .breadcrumb {
    
    background: $clr-ph-lt-gray;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 0 $clr-ph-brt-gray;
    margin-bottom: 0;
    margin-left: -15px;
    margin-right: -15px;
    
    li, li:before {
      color: $clr-text-bright;
    }
    
    a {
      color: $clr-primary;
    }
    
  }
  
  h2:first-child {
    
    border-bottom: 1px solid lighten($clr-text-light, 13);
    margin-bottom: 20px;
    margin-top: 6px;
    padding-bottom: 10px;
    
  }
  
}


.controls {
  
  background: $clr-ph-lt-gray;
  border-bottom: solid 1px darken($clr-ph-lt-gray, 8);
  bottom: 0;
  position: absolute;
  width: 100%;
  
  &.fade {
    
    height: 0;
    
    &.in {
      height: auto;
    }
    
  }
  
  .notification {
    
    padding-top: 10px; 
    
    .close-alert {
      
      color: $clr-alert;
      float: right;
      font-size: 1.5em;
      margin-top: -10px;
      padding: 0;
      
    }
    
  }
  
  .control-buttons {
    
    padding: 10px;
    text-align: right;
   
  }
  
}



.sidebar-collapse {
    
  bottom: -2px;
  left: -49px;
  position: absolute;
  z-index: 500;

  a {

    color: darken($clr-primary-light, 5);
    display: block;
    font-size: 24px;
    
    .fa-inverse {
      color: $clr-primary;
    }

  }

}

@media (max-width: 991px) { 
  .sidebar-collapse {
    display: none;
  }
}





.footer {
  
  background: $clr-footer-background;
  border-top: solid 1px darken($clr-footer-background, 8);
  color: $clr-text-light;
  font-size: 0.9em;
  min-height: 100px;
  
  a {
    color: $clr-primary;
  }
  
  h1, h2, h3, h4, h5 {
    
    color: $clr-primary;
    font-size: 1.4em;
    
  }
  
  .marketing {
   
    background: lighten($clr-footer-background, 5);
    border-bottom: solid 1px darken($clr-footer-background, 8);
    color: $clr-text;
    padding-bottom: 20px;
    
  }
  
  .corporate {

    padding-bottom: 20px;
    padding-top: 20px;

    
  }
  
  
  .mercer-logo {
    
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/mercer-logo.png) no-repeat left top;
    height: 17px;
    @include hide-text;
    width: 122px;
    
  }
  
  .content {
    

    
  }
  
  .social {
    
    text-align: right;
    
    li {
      
      display: inline-block;
      font-size: 14px;
      list-style: none;
      margin: 0 4px 0 0;
      min-width: 26px;
      padding: 6px;
      text-align: center;
      
      a {
        color: $clr-background;
      }
      
      &.facebook {
        background: #547bbe;
      }
      
      &.twitter {
        background: #78ccee;
      }
      
      &.linkedin {
        background: #2184c5;
      }
      
      &.google-plus {
        background: #d95232;
      }
      
    }
    
  }
  
  
}



              
            
!

JS

              
                $('#show-alert').click(function () {
  $('#alert-message').toggleClass('in'); 
});

$('.close-alert').click(function () {
  $(this).parent().removeClass('in'); 
});

$('#show-controls').click(function () {
  $('.controls').toggleClass('in'); 
  $('.guts').toggleClass('with-controls');
});

$('#cancel, #action').click(function () {
  $('.controls').removeClass('in'); 
  $('.guts').removeClass('with-controls');
});

$('.show-form-page').click(function () {
  $('.controls').addClass('in'); 
  $('.guts').addClass('with-controls');
});

$('.sidebar-collapse-control').click(function () {
  
  $(this).find('.fa-inverse').toggleClass('fa-compress').toggleClass('fa-expand');
  
  $('.guts').toggleClass('col-md-11').toggleClass('col-md-9');
  
  $('.sidebar').toggleClass('col-md-1').toggleClass('col-md-3');
  
  $('.sidebar .nav-stacked .row i').toggleClass('col-md-12').toggleClass('col-md-3');
  
  $('.sidebar .nav-stacked .row .col-md-9').toggle();
  $('.sidebar .quick-tools li:not(.quick-tools-menu)').toggle();
  $('.sidebar .quick-tools-menu').toggleClass('collapsed');
  
});


              
            
!
999px

Console