2 colors + different weight on one element using spans

Question

trying to get the span to use the lighter weigth and be a different color

sIFR.replace(xxx, { selector: 'h1#logo', css: [ '.sIFR-root { font-size:44px; font-weight:Bold; font-family : Gotham Bold; color:#17140c; letter-spacing:-2; text-transform: uppercase; margin: 0 !important;' ]

,filters: { DropShadow: { distance: 1 ,color: '#f5f5f5' ,strength: 2 ,alpha: .5 ,blurX: 0 ,blurY: 0

    }
  }

,wmode: 'transparent' });

sIFR.replace(xxx, { selector: 'h1#logo span.thin', css: [ '.sIFR-root { font-size:14px; font-family : Gotham Light !important; color:#ddd; letter-spacing:-2; text-transform: uppercase; margin: 0 !important;' ]

,filters: { DropShadow: { distance: 1 ,color: '#f5f5f5' ,strength: 2 ,alpha: .5 ,blurX: 0 ,blurY: 0

    }
  }

,wmode: 'transparent' });

Answer 1

The first replacement already replaces the entire <h1>. Put in a new CSS selector within the css argument to sIFR.replace() for .thin that has the Light font family.