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='#') John Smith - SmithCo, Inc.
          
          li.dropdown
            a.dropdown-toggle(href='#', data-toggle='dropdown')
              i.fa.fa-bars
              | 
              | Tools
              b.caret
            ul.dropdown-menu
              li
                a(href='#') Tools Action
              li
                a(href='#') Another Tools action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
              li.divider
              li
                a(href='#') One more separated link
                
          li
            a(href='#')
              i.fa.fa-sign-out
              | 
              | Sign Out
      
    
.app-menu(data-spy="affix", data-offset-top="42")

  .container-fluid

    .row

      .col-xs-4

        h2.talent-tagline.mobilize Mobilize
        h3.app-title
          a(href='#') Application Name


      .navbar-content.col-xs-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

        .nav.navbar-nav.navbar-right.search-form
          .input-group
            input.form-control.input-sm(type='text', placeholder='Search')
            .input-group-btn
              button.btn.btn-default.btn-sm(type='submit')
                i.fa.fa-search

        ul.nav.navbar-nav.navbar-right.main-nav
          li
            a(href='#') Main Nav Link 1
          li
            a(href='#') Main Nav Link 2
          li.dropdown
            a.dropdown-toggle(href='#', data-toggle='dropdown')
              | Main Nav Menu 3
              b.caret
            ul.dropdown-menu
              li
                a(href='#') Main Nav Action
              li
                a(href='#') Another Main Nav action
              li
                a(href='#') Something else here
              li.divider
              li
                a(href='#') Separated link
              li.divider
              li
                a(href='#') One more separated link


.body.container-fluid

  .row
  
    .col-xs-3.sidebar
    
      ul.quick-tools
        li
          a(href="#")
            i.fa.fa-home
        li
          a(href="#")
            i.fa.fa-bell
        li
          a(href="#")
            i.fa.fa-envelope
        li
          a(href="#")
            i.fa.fa-cog
        li.quick-tools-menu.collapsed
          a(href="#")
            i.fa.fa-bars
    
      ul.nav.nav-pills.nav-stacked
        li.active 
          a.row(href="#one", data-toggle="pill") 
            i.fa.fa-picture-o.col-xs-3
            .col-xs-9 Text content page
        li 
          a.row(href="#two", data-toggle="pill") 
            i.fa.fa-sitemap.col-xs-3
            .col-xs-9 Mixed content page 
        li 
          a.show-form-page.row(href="#three", data-toggle="pill") 
            i.fa.fa-apple.col-xs-3
            .col-xs-9 Form page
        li 
          a.row(href="#four", data-toggle="pill") 
            i.fa.fa-wrench.col-xs-3
            .col-xs-9 Text content page with a really, really, really long name
        li 
          a.row(href="#five", data-toggle="pill") 
            i.fa.fa-table.col-xs-3
            .col-xs-9 Table page
          
      
        
          
    .col-xs-9.guts
    
      ol.breadcrumb
        li
          a(href="#") Breadcrumb
        li
          a(href="#") Grandparent
        li
          a(href="#") Parent
        li.active Active Child
        
      .tab-content
    
        #one.tab-pane.active

          h2 Text content page
          
          .row
          
            .col-xs-6

              h3 Sub Heading

              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. 

              .well.clearfix
                .clr-box.clr-dk-forecast
                .clr-box.clr-md-forecast
                .clr-box.clr-brt-forecast
                .clr-box.clr-lt-forecast
                
                .clr-box.clr-dk-gray
                .clr-box.clr-md-gray
                .clr-box.clr-brt-gray
                .clr-box.clr-lt-gray
                
                .clr-box.clr-dk-mobilize
                .clr-box.clr-md-mobilize
                .clr-box.clr-brt-mobilize
                .clr-box.clr-lt-mobilize
                
                .clr-box.clr-dk-engage
                .clr-box.clr-md-engage
                .clr-box.clr-brt-engage
                .clr-box.clr-lt-engage
                
                .clr-box.clr-dk-reward
                .clr-box.clr-md-reward
                .clr-box.clr-brt-reward
                .clr-box.clr-lt-reward
                
                .clr-box.clr-dk-assess
                .clr-box.clr-md-assess
                .clr-box.clr-brt-assess
                .clr-box.clr-lt-assess
                
                .clr-box.clr-dk-gold
                .clr-box.clr-md-gold
                .clr-box.clr-brt-gold
                .clr-box.clr-lt-gold
                
                .clr-box.clr-dk-orange
                .clr-box.clr-md-orange
                .clr-box.clr-brt-orange
                .clr-box.clr-lt-orange
              
            .col-xs-6
            
              .panel.panel-default
                .panel-heading
                  h3.panel-title Panel title
                  
                .panel-body
                  p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores earum laboriosam qui debitis ipsam dolorem non quam voluptas ea ab eveniet minus eaque commodi fuga illo et animi suscipit optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  
                  p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  
                  p
                    button.btn.btn-primary(data-toggle='modal', data-target='#testPopup') 
                      i.fa.fa-level-up
                      | 
                      | Launch popup

                    #testPopup.modal.fade(tabindex='-1', role='dialog', aria-labelledby='testPopupLabel', aria-hidden='true')
                      .modal-dialog
                        .modal-content

                          .modal-header
                            button.close(type='button', data-dismiss='modal', aria-hidden='true') &times;
                            h4#testPopupLabel.modal-title Popup title

                          .modal-body
                            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. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione?

                          .modal-footer
                            button.btn.btn-default(type='button', data-dismiss='modal')
                              i.fa.fa-ban
                              | 
                              | Cancel
                            button.btn.btn-primary(type='button', data-dismiss='modal') 
                              i.fa.fa-floppy-o
                              | 
                              | Save
                              
                              
              p
                
                  
                button#show-controls.btn.btn-info
                  i.fa.fa-exclamation-circle
                  | 
                  | Toggle Button Controls
                  
                button#show-alert.btn.btn-warning
                  i.fa.fa-info-circle
                  | 
                  | Toggle Alert Message
                

        #two.tab-pane

          h2 Mixed content
          
          .row
          
            .col-xs-4

              h3 A bit of text

              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.
              
              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.
              
            .col-xs-4

              h3 An image

              p
                img.img-responsive(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/win.common.png")
                
            .col-xs-4

              h3 A list of items

              ul
                li list item 1
                li list item 2
                li list item 3
                li list item 4
                li list item 5
                li list item 6
                li list item 7
                li list item 8
                li list item 9
                li list item 10



        #three.tab-pane

          h2 Form page

          h3 Check out this interesting form!
          
          .row

            .col-xs-6
            
              form.form-horizontal(role='form')
                .form-group
                  label.col-xs-4.control-label(for='input1') Field one
                  .col-xs-8
                    input#input1.form-control(type='text', placeholder='Enter text')
                .form-group
                  label.col-xs-4.control-label(for='input2') Field two
                  .col-xs-8
                    input#input2.form-control(type='text', placeholder='Enter more text')
                .form-group
                  .col-xs-offset-4.col-xs-8
                    label.checkbox-inline
                      input(type='checkbox')
                      | Checkbox 1
                    label.checkbox-inline
                      input(type='checkbox')
                      | Checkbox 2
                    label.checkbox-inline
                      input(type='checkbox')
                      | Checkbox 3

                .form-group
                  label.col-xs-4.control-label(for='select3') Select fields
                  .col-xs-4
                    select#select3.form-control
                      option 1
                      option 2
                      option 3
                      option 4
                      option 5

                  .col-xs-4
                    select#select4.form-control
                      option A
                      option B
                      option C
                      option D
                      option E

                .form-group
                  label.col-xs-4.control-label(for='textarea4') Textarea field
                  .col-xs-8
                    textarea#textarea4.form-control(rows="3")
                  
            .col-xs-6
            
              #accordion.panel-group
                .panel.panel-default
                  .panel-heading
                    h4.panel-title
                      a(data-toggle='collapse', data-parent='#accordion', href='#collapseOne')
                        | Collapsible Group Item &num;1
                  #collapseOne.panel-collapse.collapse.in
                    .panel-body
                      | Anim pariatur cliche reprehenderit&comma; enim eiusmod high life accusamus terry richardson ad squid&period; 3 wolf moon officia aute&comma; non cupidatat skateboard dolor brunch&period; Food truck quinoa nesciunt laborum eiusmod&period; Brunch 3 wolf moon tempor&comma; sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et&period; Nihil anim keffiyeh helvetica&comma; craft beer labore wes anderson cred nesciunt sapiente ea proident&period; Ad vegan excepteur butcher vice lomo&period; Leggings occaecat craft beer farm-to-table&comma; raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS&period;
                .panel.panel-default
                  .panel-heading
                    h4.panel-title
                      a(data-toggle='collapse', data-parent='#accordion', href='#collapseTwo')
                        | Collapsible Group Item &num;2
                  #collapseTwo.panel-collapse.collapse
                    .panel-body
                      | Anim pariatur cliche reprehenderit&comma; enim eiusmod high life accusamus terry richardson ad squid&period; 3 wolf moon officia aute&comma; non cupidatat skateboard dolor brunch&period; Food truck quinoa nesciunt laborum eiusmod&period; Brunch 3 wolf moon tempor&comma; sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et&period; Nihil anim keffiyeh helvetica&comma; craft beer labore wes anderson cred nesciunt sapiente ea proident&period; Ad vegan excepteur butcher vice lomo&period; Leggings occaecat craft beer farm-to-table&comma; raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS&period;
                .panel.panel-default
                  .panel-heading
                    h4.panel-title
                      a(data-toggle='collapse', data-parent='#accordion', href='#collapseThree')
                        | Collapsible Group Item &num;3
                  #collapseThree.panel-collapse.collapse
                    .panel-body
                      | Anim pariatur cliche reprehenderit&comma; enim eiusmod high life accusamus terry richardson ad squid&period; 3 wolf moon officia aute&comma; non cupidatat skateboard dolor brunch&period; Food truck quinoa nesciunt laborum eiusmod&period; Brunch 3 wolf moon tempor&comma; sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et&period; Nihil anim keffiyeh helvetica&comma; craft beer labore wes anderson cred nesciunt sapiente ea proident&period; Ad vegan excepteur butcher vice lomo&period; Leggings occaecat craft beer farm-to-table&comma; raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS&period;


        #four.tab-pane

          h2 Text content page <small>with a really, really, really long name</small>
          
          .row
          
            .col-xs-3
            
              .well.well-sm

                h4 Sub Sub Heading

                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-3

              h4 Another Sub Heading

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione?
              
            .col-xs-3
            
              .well.well-sm

                h4 And Another

                p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione?
              
            .col-xs-3

              h4 And one more

              p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus unde aliquid aperiam saepe iste at architecto reiciendis blanditiis recusandae praesentium nihil ratione?

        #five.tab-pane

          h2 Table page

          h3 Wow, look at that table!

          table.table.table-striped.table-bordered
            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
            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
        
        
      .controls.row.fade

        .col-xs-7.notification 
        
          #alert-message.alert.alert-danger.fade
            button.btn.btn-link.close-alert(type='button') <i class="fa fa-times"></i>
            p <i class="fa fa-exclamation-triangle"></i> <strong>Error:</strong> Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

        .col-xs-5.control-buttons
          button#cancel.btn.btn-default
            i.fa.fa-ban
            | 
            | Cancel
          button#action.btn.btn-success
            i.fa.fa-check
            | 
            | Action
            
      .sidebar-collapse
        a.sidebar-collapse-control(href="#", title="Collapse / Expand Menu")
          i.fa.fa-compress
      
 
.footer.container-fluid

  .row.marketing
  
    .col-xs-3
      h3 Marketing Message
      p Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      
    .col-xs-9
    
      .row
  
        .col-xs-6
          h3 Ancellary Marketing Content
          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-6 
          h3 More Ancellary Marketing Content
          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.
      
  .row.corporate
  
    .col-xs-12
    
      .mercer-logo Mercer
      
      .content
        p &copy; 2002-2014 Mercer LLC, All Rights Reserved. Need help? 1-800-866-7474 Sunday 6:30pm - Friday 8pm EST
        
      .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;


$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;


.clr-box {
  
  border: solid 1px $clr-dk-gray;
  float: left;
  height: 25px;
  margin: 0 5px 5px 0;
  width: 25px;
  
  &.clr-dk-forecast { background: $clr-dk-forecast; }
  &.clr-md-forecast { background: $clr-md-forecast; }
  &.clr-brt-forecast { background: $clr-brt-forecast; }
  &.clr-lt-forecast { background: $clr-lt-forecast; }

  &.clr-dk-gray { background: $clr-dk-gray; }
  &.clr-md-gray { background: $clr-md-gray; }
  &.clr-brt-gray { background: $clr-brt-gray; }
  &.clr-lt-gray { background: $clr-lt-gray; }

  &.clr-dk-mobilize { background: $clr-dk-mobilize; }
  &.clr-md-mobilize { background: $clr-md-mobilize; }
  &.clr-brt-mobilize { background: $clr-brt-mobilize; }
  &.clr-lt-mobilize { background: $clr-lt-mobilize; }

  &.clr-dk-engage { background: $clr-dk-engage; }
  &.clr-md-engage { background: $clr-md-engage; }
  &.clr-brt-engage { background: $clr-brt-engage; }
  &.clr-lt-engage { background: $clr-lt-engage; }

  &.clr-dk-reward { background: $clr-dk-reward; }
  &.clr-md-reward { background: $clr-md-reward; }
  &.clr-brt-reward { background: $clr-brt-reward; }
  &.clr-lt-reward { background: $clr-lt-reward; }

  &.clr-dk-assess { background: $clr-dk-assess; }
  &.clr-md-assess { background: $clr-md-assess; }
  &.clr-brt-assess { background: $clr-brt-assess; }
  &.clr-lt-assess { background: $clr-lt-assess; }

  &.clr-dk-gold { background: $clr-gold-dark; }
  &.clr-md-gold { background: $clr-gold; }
  &.clr-brt-gold { background: $clr-gold-bright; }
  &.clr-lt-gold { background: $clr-gold-light; }

  &.clr-dk-orange { background: $clr-orange-dark; }
  &.clr-md-orange { background: $clr-orange; }
  &.clr-brt-orange { background: $clr-orange-bright; }
  &.clr-lt-orange { background: $clr-orange-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');


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

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

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

$clr-background: $clr-white;
$clr-sidebar-background: lighten($clr-primary-light, 8);
$clr-footer-background: $clr-ph-brt-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;
}



.branding-header {
  
  .global-menu {
    
    background-color: $clr-background;
    @include background(linear-gradient(top, $clr-background, darken($clr-background, 13)));
    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(top, lighten($clr-text-dark, 13), $clr-text-dark));
  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;

    &.mobilize {

      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167/logos-talent-sprite.png) no-repeat left -59px;
      @include hide-text;
      height: 12px;
      width: 87px;

    }

  }

  .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 {
      
      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: $clr-sidebar-background;
  
}


.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;
        padding-bottom: 12px;
        padding-top: 14px; 
        
        &:hover {
          background: darken($clr-sidebar-background, 5);
        }
        
        .fa {
          
          color: $clr-primary;
          font-size: 24px;
          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: 360px;
  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: 4px;
  left: -36px;
  position: absolute;
  z-index: 500;

  a {

    color: $clr-text;
    display: block;
    font-size: 28px;

  }

}







.footer {
  
  background: $clr-footer-background;
  border-top: solid 1px darken($clr-footer-background, 8);
  color: $clr-text;
  font-size: 0.9em;
  min-height: 200px;
  
  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;
    float: left;
    height: 17px;
    @include hide-text;
    width: 122px;
    
  }
  
  .content {
    
    float: left;
    margin-left: 12px;
    
  }
  
  .social {
    
    float: right;
    
    li {
      
      float: left;
      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').toggleClass('fa-compress').toggleClass('fa-expand');
  
  $('.guts').toggleClass('col-xs-11').toggleClass('col-xs-9');
  
  $('.sidebar').toggleClass('col-xs-1').toggleClass('col-xs-3');
  
  $('.sidebar .nav-stacked .row i').toggleClass('col-xs-12').toggleClass('col-xs-3');
  
  $('.sidebar .nav-stacked .row .col-xs-9').toggle();
  $('.sidebar .quick-tools li:not(.quick-tools-menu)').toggle();
  $('.sidebar .quick-tools-menu').toggleClass('collapsed');
  
});


              
            
!
999px

Console