index.haml

%header#header
  .wrapper
    %h1
      %a{:href => "#"} 
        Converge
        %abbr UI
      
    %a.settings{:href => "#"} settings
    #notifications
      #indicator
        %span notifications
        %a.count.important{:href => "#"} 7
      / comment out to remove notifiation dialog
      /  
        .flash-message.fade-in-down
          .message
            Things have been happening
            %a{:href => "#"} here's proof
          .message
            This is a warning — be warned!
          .form
            %a.btn{:href => "#"} view all notifications
      / 
    %a.username{:href => "#"} long_username
    /
      %input{:placeholder => "Search", :type => "search"}/
    %nav
      %ul#menu
        / comment out the whole org li  to see conductor style
        %li
          #org{:title => " organization"} Fedora Project Organization
        %li
          %a{:href => "#"} dashboard
        %li
          %a{:href => "#"} instances
        %li
          %a.active{:href => "#"} environments
        %li
          %a{:href => "#"} permissions
        %li
          %a{:href => "#"} services

        /
          %li.search
            %input{:placeholder => "Search", :type => "search"}/
      %a.menu-link{:href => "#menu"} Menu

.wrapper

  %nav.tabs
    %ul
      %li
        %a.active{:href => "#"} pools
      %li
        %a{:href => "#"} catalogs
      %li
        %a{:href => "#"} more...
      %li
        %a{:href => "#"} and more?
      %li
        %a{:href => "#"} heaps?


  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
  .inset  
%footer.footer
  Version 3.4.5

script.js

$(document).ready(function(){
 $(window).scroll(function(){
  var h = $('body').height();
  var y = $(window).scrollTop();
  if( y > (h*.03) && y < (h) ){
   $("#header").addClass("compact fade-in-down");
  } else {
   $('#header').removeClass(' compact fade-in-down');
  }
 });
})

style.scss

@import "compass";
 @import url("https://openshift.redhat.com/app/stylesheets/overpass.css");
@import "compass/css3";

$text-scale: 11px; 




$tone:  #afb5b9;  
$rh-red1:      #cc0000; 
$page-width: 95em;
$rh-blue:      #4e9fdd;   

$bg:  lighten($tone, 13%);
$fg:  darken($tone, 30%);

body{ font-size:$text-scale; }

@media only screen and (min-width : 1440px)  {body{font-size:$text-scale*1}  }
@media only screen and (min-width : 2000px)  {body{font-size:$text-scale*1.1} }
@media only screen and (min-width : 2600px)  {body{font-size:$text-scale*1.5} }
*{box-sizing: border-box; @include box-sizing(border-box)}

.menu-link{display:none;}
.wrapper{
  margin: 0 auto; 
  max-width: $page-width; 
  position:relative; }

.inset {
  min-height:8em 2em; 
  margin: 4em 0; 
  padding:1.5em;  text-align:center; color: $tone;
  @include border-radius(.3333em);  background-color: lighten($tone, 28%);
}

body{ margin:0; padding:0; line-height:1.5em;
  color:darken( $tone, 50% );
  font-family: sans-serif; 
  margin: 0 auto;
  font-family:sans-serif ; 
  position:relative; 
  background-color: lighten($tone, 32%);
  background-size: 5px;
}

header{
  user-select:none; 
  margin:0 ; padding:0;  
  line-height: 2.5em;  
  padding-top:3em;  
  padding-left: 1em; 
  padding-right: 1em; 
  font-family:overpass, sans, sans-serif;  
  min-height:6em;
  background-color: lighten($tone, 10%); 
  @include background(linear-gradient(top , lighten($tone, 10%) 0%, darken($tone, 10%) 90%, darken($tone, 16%) 100%));


  a.username, a.logout, a.settings{
    text-decoration: none; 
    color: darken($tone, 37%); 
    text-shadow: 0 1px rgba(255,255,255,0.23); 
    float:right; 
    display: inline-block; 
    margin: 0 .5em;
    padding: 0em 1.5em; 
    line-height: 2.5em; 
    height:2.5em  ; 
    @include border-radius( .1333em); 
    &:hover{color:#333}
  }
     
   .username { 
    margin-right:0; 
    padding-right:0;}


  nav:before,  nav:after{
    display:block;  
    content:""; 
    width: 100%; 
    clear:both;
    position: relative;}


  nav  {
    @include transition( all .15s ease 0s);
    
    position:relative; 
    overflow:hidden; 
    display: table; 
    width: 100%; 
    clear:both;  
    margin: 0 auto;    
    padding-top: 1em; 
    padding-left:1.5em; 
    padding-right:1.5em; 
    border-radius:1em 1em 0 0 ;  
    ul {display: table-row; 
    li {display: table-cell; 
        width:10%;
        @include  transform(translate3d(0,0,0)); 
        a{ 
          @include transition( all 100ms ease) ;
          width: 97%; 
          margin: 0 auto;   
          display: inline-block;
          text-transform: capitalize;
          text-decoration: none;    
          position: relative; 
          padding: 1em 1em 1em 1em  ;  
          height: 3.5em; 
          line-height: 2.5em; 
        /*  transform:  translate(0,.5em); 
          -webkit-transform:translate3d(0,.5em,0);
          */color: darken($tone, 30%); 
          text-shadow: 0 1px rgba(255,255,255,0.2);   
          background-color: lighten($tone, 10%);
          
          @include border-radius( .6666em .6666em 0 0 ); 
          padding-top: .75em;  
          text-align:center;
          @include box-shadow( 
            inset 0 1.75em rgba(255,255,255,0.075),
            inset 0 0 0  1px rgba(255,255,255,0.05), 
            inset 0 1px rgba(255,255,255,0.3), 
            0 0 2px rgba(0,0,0,0.15),  
            0 3px 5px rgba(0,0,0,0.15));
         
           @include background(linear-gradient(top, lighten($tone, 10%) 0%, darken($tone, 1%) 100%));
 
          &:focus, &:active { 
            transform:  translate(0,0.00em);
            -webkit-transform:translate3d(0,0.0em,0); 
            background-color:rgba(255,255,255,0.25); 
            color: #000; 
            text-shadow: 0 1px rgba(255,255,255,0.3); 
            outline:0;  
            @include background(linear-gradient(top, lighten($tone, 20%) 0%, darken($tone, 0%) 100%)); }

          &:active { color:#000; text-shadow: 0 1px rgba(255,255,255,0.3); }
 
          &:hover{ 
            @include background(linear-gradient(top, lighten($tone, 15%) 0%, darken($tone, 0%) 100%)); 
            background-color:rgba(255,255,255,0.25); 
            color: darken($tone, 60%);  
            /*comment out these two ?*/
            transform:  translate(0,0.15em);
            -webkit-transform:translate3d(0,0.15em,0);}
        
          &.active{
            background-color:lighten($tone, 32%);  
            color:darken($tone, 50%); 
            background-image: none;
            @include box-shadow( inset 0 1.75em transparent,  inset 0 1px 0 transparent,  0 .25em lighten($tone, 32%) , 0 .25em .25em  rgba(darken($tone, 25%),.25));  
             transform:  translate(0,0);
            -webkit-transform:translate3d(0,0,0); 

            &:focus{
              color: #222; 
              opacity:.7}
            &:before{
              font-size:.75em;
              content:""; 
              position:absolute; 
              display:block; 
              bottom:-.0000001em; 
              left: -2em; 
              width: 2em; 
              height:3em;  
              border-radius: 0 0 .6666em 0; 
              @include box-shadow( .5em .5em lighten($tone, 32%)); }
            &:after{font-size:.75em;
              content:""; 
              position:absolute; 
              display:block; 
              bottom:-.0000001em; 
              right: -2em; 
              width: 2em; 
              height:3em;  
              @include border-radius( 0 0  0 .66666em); 
              @include box-shadow( -.5em .5em lighten($tone, 32%)); 
            }  
          }
        }
      }
    }
  }
  
  input[type="search"] {
    @include box-shadow( 0 1px rgba(255,255,255,0.15), inset 0 0 .3em rgba(0,0,0,0.1) );
    padding:  0; 
    line-height: 1em; 
    height: 2.5em  ;
    outline:0; 
    border:0; 
    -webkit-appearance:none; 
    appearance:none; 
    border-radius:.222em;  
    float:right; 
    margin-right:.2em; 
    @include box-sizing( border-box);  
    font-size:1em; 
    width: 10em;  
    text-indent:.5em; 
    transition: all .2s ease; 
    background-color: rgba(lighten($tone, 30%), 0);  
    
    &:focus{
      width: 20em; 
      background-color: lighten($tone, 50%);
      @include box-shadow( 0 1px rgba(255,255,255,0.25), inset 0 0 .2em rgba(0,0,0,0.732)); 
     
    }
  }
  
  ::-webkit-input-placeholder {
    color: darken($tone, 27%); 
    text-shadow: 0  1px rgba(255,255,255,0.2); 
    line-height:1.5em}
    
  ::-moz-placeholder {
    color: darken($tone, 27%); 
    text-shadow: 0 1px rgba(255,255,255,0.2)}
   
  #org{ 
    cursor: pointer;  
    position:relative; 
    text-align:left;  
    display: block;   width: 100%; 
    transition: all .1s ease;  
    background-color:rgba(lighten($tone, 17%),.5); 
    @include background(linear-gradient(top, lighten($tone, 19%) 0%, darken($tone, 0%) 100%));
    @include border-radius( .25em); 
    color:rgba(0,0,0,0.5);  
    @include box-shadow(  0 1px 2px rgba(0,0,0,0.15),  0 0 0 1px rgba(0,0,0,0.05),  inset 0 0 0 1px rgba(255,255,255,0.12),  inset 0 1.25em 0 rgba(255,255,255,0.15));  
    text-indent: 1em;  
    width: 97%; padding-right:3em;  
    min-width: 11em;
    text-overflow:ellipsis; 
    overflow: hidden; 
    white-space:nowrap;
    
    &:after{
      position:absolute; 
      top:0; 
      right:0; 
      content:""; 
      display: block;height: 2.5em ;
      width: 2.5em ;  
      @include box-shadow( 0 0 0 1px rgba(0,0,0,0.015), inset 0 0 0 1px rgba(255,255,255,0.1),  -.2em 0 .2em -.2em rgba(0,0,0,0.2)) ; 
      float:right; 
      border-radius:0 .25em  .25em 0;
    } 
    
    &:before{
      content:""; 
      border: .5em   solid black; 
      border-width:.5em .5em 0;
      border-color: #ccc transparent ; 
      border-color: rgba(0,0,0,0.2) transparent ;
      width: 0; height: 0; 
      position:absolute; right:0;
      margin-top: 1em; 
      margin-left:-4em; 
      margin-right: .75em;  
      transition: all .15s ease;
    }
    &:hover{
      background-color: rgba(255,255,255,0.5); 
      color:#333;
      &:before{ 
        border-color: #666 transparent ; 
        border-color: rgba(0,0,0,0.5) transparent ;
      }
    }
  }
  h1{
    text-transform:capitalize; 
    margin: 0 ; 
    pading:0; 
    float:left; 
    display: inline-block; 
    color:rgba(0,0,0,0.7); 
    text-shadow: 0 1px rgba(255,255,255,0.21);  
    font-weight: 300; 
    font-size:2em;  z-index:3; 
    line-height:1em; 
    text-indent: .75em; 
    font-family: Overpass, sans, sans-serif;
    a{text-decoration: none;  color:rgba(0,0,0,0.7); cursor:pointer; }

  abbr{color: darken($tone, 24%); font-size:.75em;}

  }
}

 

#notifications {
  padding-bottom:.5em; 
  user-select:none; 
  text-shadow: 0 1px rgba(255,255,255,0.1); 
  float:right;
  span{display:none;}
  .count{padding:0; 
    min-width: 3em; 
    text-decoration :none; 
    font-weight: bold;  
    margin:0;  color: darken($tone, 10%); 
    background-color: lighten($tone, 5%);
    text-align:center; display: inline-block; 
    @include box-shadow(  
      inset 0 0 0 1px rgba(255,255,255,0.1), 
      0 1px .21em 1px  rgba(0,0,0,0.05), 
      0 1px rgba(255,255,255,0.25));  
    padding: 0em 1em;}
  .important{background-color: $rh-red1; 
    @include box-shadow( 
      inset 0 0 0 1px darken($rh-red1, 2%), 
      0 1px .21em 1px  rgba(0,0,0,0.1)); 
    text-shadow: 0 -1px rgba(0,0,0,0.1); 
    color: white;  border-radius: .3333em  ; 
    position:relative; transition: all .31s ease 0;
    &:hover{-webkit-animation:wiggle .35s ease 0;-moz-animation:wiggle .35s ease 0;
}
    
  }
  .all { 
    border-radius: .5em;  
    margin-left: -.33333em; 
    transition: all .17s ease;
    background-color: rgba(lighten($tone, 15%), .5); 
    color:#333; color:rgba(0,0,0,0.5); 
    text-shadow: 0 1px rgba(255,255,255,0.3);
    &:hover{
      background-color: lighten($tone, 20%); }
  }
  em{display: none;}
  
  .important ~ .all {
    border-radius: 0 .33333em .33333em 0;
  } 

  .flash-message{
    font-family: sans, sans-serif; 
    z-index:9;
    -webkit-transform:translate3d(0,0,0);
    position: absolute;  
    background-color: lighten($tone, 65%); 
    padding: 0em; 
    min-width: 30em; 
    width: 15%;  
    display: block;  
    margin-right: 1.5em;    
    right: .5em; 
    color: darken($tone, 50%); 
    text-shadow: none;  
    padding-top:1em;
    border-radius: .5em; 
    box-shadow: 
      0 0 0 .5em darken($tone, 32%), 
      0 .1em .25em rgba(0,0,0,0.25), 
      inset 0 0 0 1px rgba(255,255,255,0.2), 
      inset 0 -.5em .2em rgba(0,0,0,0.01); 
    text-shadow: 0 1px rgba(0,0,0,0.05);  
    top: 4em;  -webkit-user-select:text; 
  
    &:before, &:after{content:"";
      display:block; height:0; 
      width: 0; 
      border: 1em solid #111;  
      border-color: transparent transparent  lighten($tone, 60%) ;  
      position:absolute; 
      top: -1.8em; 
      right:5.5em; 
      z-index:4;
    }
    &:before{
      border-bottom-color:darken($tone, 32%); 
      top: -1.5em;  
      border-width: 0em 1.5em 1.5em 1.5em; right: 5em;
    }
  
    .message{
      border-bottom:.099999999em solid rgba(0,0,0,0.1);
      margin-bottom: 1em;  
      padding: 1em; 
      padding-bottom:1.5em; 
      padding-top:none;  
      line-height: 1.5em; 
      color: #666; 
      text-shadow: none;
      a{
        color:#69d; 
        text-decoration: none;
      }
    }
  
    .form{
      .btn{
        color:darken($tone, 14%); 
        background-color: #fff; 
        padding:1em; text-align:center; 
        display: block; 
        width: 100%;
        text-decoration: underline ;
        @include background(linear-gradient(top , lighten($tone, 25%) 0%, lighten($tone, 0%) 100%)); 
        margin-top: -1em;/* W3C */
        margin-top: -1em;/* W3C */
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
        border-radius:0 0 .5em .5em ; 
        text-shadow: 0 1px rgba(255,255,255,0.5);
        text-decoration: none;    
        &:hover{color: darken($tone, 50%);  
        }
      } 
    }
  }
  
}
  
a:focus{outline:0}

a.settings{
    padding:0 !important; 
    text-indent:3em; 
    overflow:hidden; 
    width:2.5em; bheight:2.5em; 
    display:inline-block; 
    position:relative;  
    margin: 0 2em !important; 
    opacity:0.6; 
    transition: all .1s ease;
    &:before{ 
      content:""; 
      display: block; 
      height:.5em; 
      width: 2.25em; 
      border-radius:.25em; 
      background-color:transparent;  
      font-size:.75em;
      box-shadow:  
        0 3em darken($tone, 20%), 
        0 3.11em rgba(255,255,255,0.15),
        0 2em darken($tone, 20%),
        0 2.11em rgba(255,255,255,0.15),
        0 1em darken($tone, 20%),
        0 1.11em rgba(255,255,255,0.15); 
      position:absolute; 
      top:-.51em; 
      left:.5em;}  
    &:hover{
    opacity:1;
    }
  }

@keyframes wiggle{
    0% { transform: rotate(0deg);}
  25% {  transform: rotate(5deg);}
  75% {  transform: rotate(-5deg);}
}


.wiggle{
-webkit-animation:wiggle .2s ease-in infinite;
   -moz-animation:wiggle .2s linear infinite;
    -ms-animation:wiggle .2s linear infinite;
     -o-animation:wiggle .2s linear infinite;
        animation:wiggle .2s ease-in infinite;
}


/*

  _                                                              
 | |          |         o                |                       
 | |  __,   __|   _         _  _       __|   __           _  _   
 |/  /  |  /  |  |/-----|  / |/ |-----/  |  /  \_|  |  |_/ |/ |  
 |__/\_/|_/\_/|_/|__/   |_/  |  |_/   \_/|_/\__/  \/ \/    |  |_/
 |\                                                              
 |/                                                                                                                          


*/



@-ms-keyframes fade-in-down{
    0% { opacity: 0; -ms-transform: translate(0,-1em); }
  100% { opacity: 1;}}

@-o-keyframes fade-in-down{
    0% { opacity: 0; -o-transform: translate(0,-1em); }
  100% { opacity: 1;}}

@-webkit-keyframes fade-in-down{
    0% { opacity: 0;  -webkit-transform: translate(0,-1em); }
  100% { opacity: 1;}}

@-moz-keyframes fade-in-down{ 
    0% { opacity: 0; -moz-transform: translate(0,-1em);}  
  100% { opacity: 1;}} 

@keyframes fade-in-down{  
    0% { opacity: 0; transform: translate(0,-1em);}  
  100% { opacity: 1;}}


.fade-in-down, .fade-in-bottom{
-webkit-animation: fade-in-down .2s ease 0;
   -moz-animation: fade-in-down .2s ease 0;
    -ms-animation: fade-in-down .2s ease 0;
     -o-animation: fade-in-down .2s ease 0;
    animation: fade-in-down .2s ease 0;
}  

.fade-out-up, .fade-out-up{
-webkit-animation: fade-out-up .2s ease 0;
   -moz-animation: fade-out-up .2s ease 0;
    -ms-animation: fade-out-up .2s ease 0;
     -o-animation: fade-out-up .2s ease 0;
    animation: fade-out-up .2s ease 0;
}  
@-webkit-keyframes fade-out-up{
  0% { opacity: 1;}    
  100% { opacity: 0; transform: translate(0,-1em);}}

@-moz-keyframes fade-out-up{ 
  0% { opacity: 1;}    
  100% { opacity: 0; transform: translate(0,-1em);}}

@keyframes fade-out-up{  
  0% { opacity: 1;}    
  100% { opacity: 0; transform: translate(0,-1em);}}




  
li.search{
  width: .1%;
  input[type="search"] {
  margin: 0; margin-bottom:.25em; vertical-align: top;
  transform: translate(0em,1em);display: block; 
  width: 8em; 
  background-color: rgba(255,255,255,0);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.13);  
    border-radius:.3333333em;
  &:focus{ 
    width: 22em;
      background-color: white;
  }
  &::-webkit-input-placeholder {
    line-height:1.5em;
  }  
  }
}
  /*a terrible hack - will fix soon*/
@media  (max-width: 40em) {
  header{ 
    

    h1{width: 100%; clear:both; margin-bottom:1em;}
    nav, nav ul, nav ul li, nav ul li a{ 
      color:darken($tone, 40%) !important;
      display:block;  
      width: 100% !important; 
      clear:both; 
      padding:0 !important;  
      margin: 0 !important; 
      &:after, &:before{
        display:none !important;
      }
      &.active{display: none;}
    transform: none !important; 
      margin:.5em 0 !important; 
      box-shadow: none !important; 
      border-radius: .3333em !important; 
      text-align:left; 
      text-indent:1.5em; line-height:3em; 
      background-image: none ;
    }
  }
}

header{z-index:2; position:relative;}
.footer{
  position: fixed; 
  width: 100%; 
  background-color: lighten($tone, 19%); 
  box-shadow: 0 -1px lighten($tone, 10%), inset 0 1px lighten($tone, 30%); 
  bottom:0; 
  min-height:2.5em; 
  line-height:2.5em;  
  text-align:center; 
  margin:0em; 
  border-radius: 0 ; 
  z-index:1; 
  color:$tone; 
  text-shadow: 0 1px rgba(255,255,255,0.3)}


.compact{
    #notifications  {  .flash-message{right:-6em  ; }
}
  a.username {display:none;}
  h1{display: inline-block; vertical-align:middle; position: absolute; top:.75em; left:0; zoom:.7; -webkit-transform: translate(0,.25em ) ; &:hover{}}
  @include background( linear-gradient(top , lighten($tone, 19%) 0%, darken($tone, 0%) 100%));
  position:fixed; 
  height:4em;  vertical-align:middle;
  min-height: 0; 
  top: 0; 
  padding:0;  
  box-shadow: inset 0 -1px 2px rgba(255,255,255,0.2); 
  margin: 0; 
  width: 100%;  
  a.settings, #notifications{    z-index:3;  
    .important{
      &:hover{
        -webkit-animation:wiggle .2s ease infinite;
      }
    }
    position: absolute;  
    top: .75em;
  
  }
  #notifications{
    right:6em
  }
  a.settings{
    right:0em
  }
  nav{ 
    position:absolute;
    top: 0 !important; 
    margin: 0 ; 
    height:5em;
    overflow:hidden;
    padding-top:0;
    padding-right: 12em !important;
padding-left: 13em !important;
    a.active{  box-shadow:none;
      &:before, &:after{display:none}
    }
    ul{height:5em; 
      margin-left:3em;}
    li{line-height:3em}
    ul li a{
      width: 100%; 
      display: block; 
      vertical-align:middle;
      &:hover{transform: 0;  background-image: none;   transform:  translate(0,0);  -webkit-transform:translate3d(0,0,0); }
      &.active{ background-color: #fff; background-image:none; 
        @include background(linear-gradient(top , lighten($tone, 25%), #fff 25%)); 
        @include box-shadow(inset 1px 0 rgba(0, 0, 0, 0.14), inset -1px 0 rgba(0, 0, 0, 0.14), inset 0 0em .5em rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.5));
      
 
      }
      ul li{ line-height:2.5em;}
     background-color: transparent; 
      background-image:none; 
    box-shadow: none;
      border-radius:0 0 !important; 
      margin:0em;
      height:4em;}
  }/**/ 
  #org{ 
    @include background (linear-gradient (lighten($tone, 92%), lighten($tone, 4%) 95%)) ;  
    min-width:2em;   
    max-width: 15em;
    text-overflow:  ellipse;
    display:block;
    text-indent: 1em;  
    line-height:2.5em;
    padding-right: 3em;  
    margin-left:3em;
   ;
    &:before{right:0; position:absolute;}}
  .wrapper{
    position:relative;}
  &:after{
    height:.2em; 
    width: 100%; 
    content:""; 
    display: block;
    @include background( linear-gradient(top , rgba(0,0,0,0.5), transparent 95%) );
    position: fixed; 
    top: 4em;}
  
}

@media  (max-width: 50em) {
  header.compact #org{display:none }
    header.compact nav{padding-left:3em !important; margin-left:0; }

}

@media  (max-width: 40em) {
  header.compact nav{display:none }
}


/*temporary media query for retina*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  body{font-size:32px;}
}



.tabs{ 
   @include box-shadow (inset 0 .1111em .33333em rgba(0,0,0,0.1));
  @include background( linear-gradient(top , lighten($tone, 33%) 0%, lighten($tone, 26%) 100%));
  display:table; 
  min-height:4em; line-height:4em; width: 100%; margin: 3em auto; 
  &:after{content:"";display:block; width: 100%; clear:both;}
  /*
  @include border-radius(.3333em .3333em 0 0 );
  */
  ul{list-style: none; display:table-row; 
   
    li{ display:table-cell;  
      width: 1%;
      a{  font-weight: 700;
        @include transition( all .15s ease);
        display: block; 
        text-align:center; text-transform: capitalize; height: 4em; font-family: overpass, sans-serif, sans;; text-decoration:none; min-width: 7em;  max-width: 20em; margin: 0 auto; color:$tone; 
        
        &:hover{color: darken($tone, 50%);
            border-bottom: .25em solid lighten($tone, 10%);}
      &.active{
          position:relative; 
          color:darken($tone, 40%); 
          border-bottom: .25em solid $rh-blue;
          @include background( linear-gradient(top , rgba(lighten($tone, 50%),0.0) 70%, lighten($rh-blue, 32%) 100%));
          &:after
            {content:""; 
            display:block; 
            border-color: $rh-blue transparent; 
            border-width:  .75em .75em 0 .75em; border-style:  solid; width: 0; height:0;position: absolute; bottom:-.75em; left: 50%; margin-left: -.75em; z-index:9;}
 
        } 
      }
    }
  }
}