/* background */
md-tabs > md-tabs-wrapper {
  /*background-color: #f00 !important;*/
}

/* color tab button */
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {
  /*color: #fff !important;*/
}

/* color tab button active */
md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
  color: #fff !important;
}

/* color icon */
md-tabs .md-tab[disabled], md-tabs .md-tab[disabled] md-icon {
/*  color: #000 !important; */
}

/* background border and swipe */
md-tabs md-ink-bar {
  background-color: #00B8D4;
}

SELECT ST_AsGeoJSON("poiGeometrico") geojson, * FROM "Incidente"
    WHERE 
ST_Intersects(ST_Buffer((SELECT shape FROM "RotaOlimpica" WHERE id = 1), 0.001),"poiGeometrico")
AND
inicio >= now() - interval '1 day'
AND
inicio <= now() + interval '1 day'
AND
status = 'ABERTO';

            var MyIcon = L.Icon.extend({
              options: {
                  iconUrl: '/data-s4c/Camadas/Rotas/s4c_ic_ending_point.png',
                  iconSize: new L.Point(24, 24),
                  iconAnchor: new L.Point(22, 94),
                  popupAnchor: new L.Point(-3, -76)
              }
            });
            var icon = new MyIcon();

                via.geom.setStyle({color: $scope.fillColor()});

                MapaService.adicionarLayer(via.geom);
                MapaService.obterMapa().then(function(mapa) {
                    mapa.fitBounds(via.geom);

                    var layers = _.first(via.geom.getLayers());
                    var posIni = layers.getLatLngs()[0];
                    var posEnd = layers.getLatLngs()[layers.getLatLngs().length -1];

                    var marker1 = L.marker([posIni.lat, posIni.lng], {icon: icon}).addTo(mapa);
                    var marker2 = L.marker([posEnd.lat, posEnd.lng]).addTo(mapa);

https://jsfiddle.net/fxL4zcma/1/

http://jsfiddle.net/b43hj/3387/

Fiz esse pequeno script para a landing Page da GVT é bem util. O footer fica travado quando o scrolltop chega em determinado elemento. theFixed é o elemento que vc quer comparar.

$(document).ready(function(){
var the = $("#theFixed").offset().top;

  $(window).scroll(function(){

    if($(this).scrollTop() > Math.max(0,($("#theFixed").offset().top + $("#theFixed").height())-$(this).scrollTop())){
  $("#theFixed").addClass("fixed")
  }else{
  $("#theFixed").removeClass("fixed");
  }

})

#channels_scroller {
  max-height: 100px;
  overflow-y: scroll;
  background: #ccc
}

#col_channels:hover #channels_scroller::-webkit-scrollbar {
    display: block;
}
#channels_scroller::-webkit-scrollbar {
    position: absolute;
    -webkit-appearance: none;
    width: 8px;
    display: none;
}
#channels_scroller::-webkit-scrollbar-corner {
    background: transparent;
}
#channels_scroller::-webkit-scrollbar-thumb {
    background: #ab9ba9;
    box-shadow: inset 0 -2px,inset 0 -3px,inset 0 2px,inset 0 3px;
    min-height: 36px;
}
#channels_scroller::-webkit-scrollbar-thumb, #channels_scroller::-webkit-scrollbar-track {
    background-clip: padding-box!important;
    border-radius: 3px;
    color: #4d394b;
}

#channels_scroller::-webkit-scrollbar-track {
    background: #3e313c;
    box-shadow: inset 0 -4px 0 0,inset 0 4px 0 0;
}
#channels_scroller::-webkit-scrollbar-thumb, #channels_scroller::-webkit-scrollbar-track {
    background-clip: padding-box!important;
    border-radius: 3px;
    color: #4d394b;
}

*::-webkit-scrollbar {
    width: 6px!important;
}
Pseudo ::scrollbar-thumb element
*::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
}
Pseudo ::scrollbar-track element
*::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
}

.app-wrapper-main::-webkit-scrollbar-track {
    background-color: #dfdfdf
}

        function returnPromisse() {
            var p = $q.defer();
            $http.get(API_ENDPOINT + '/usuarios')
                .then(function(response) {
                    if (typeof response.data === 'object') {
                        p.resolve(response.data);
                    } else {
                        p.reject(response);
                    }
                }, function(err) {
                    p.reject(err);
                });

            return p.promise;
        }

var promisse = returnPromisse().then(function(data){ console.log(data) })

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}
        
        
        header{
            text-align: center;
            font-size: 72px;
            line-height: 108px;
            height: 108px;
            background: #335C7D;
            color: #fff;
            font-family: 'PT Sans', sans-serif;
            
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }
        
        header.sticky {
            position: fixed;
            font-size: 24px;
            line-height: 48px;
            height: 48px; 
            width: 100%;
            background: #efc47D;
            text-align: left;
            padding-left: 20px;
        }

Sticky Header

      
     
     
      
     
     
      
     
     
     $(window).scroll(function() {
     if ($(this).scrollTop() > 1){
     $('header').addClass("sticky");
     }
     else{
     $('header').removeClass("sticky");
     }
     });

Outras referencias

http://jsfiddle.net/sinky/S8Fnq/

http://callmenick.com/_development/resize-header-on-scroll/

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

https://codepen.io/chrissp26/pen/gBrdo

https://codepen.io/renby/pen/tKnFH

-webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3))

Usado para fazer aquele efeitozinho do header do material-design

Cores legais

#3367d6 - header
#2a56c6 - content