         // the reason why we draw it in the case of drawBackground == 0 is for
         // mouse hit testing purposes
         graphics.beginFill(backgroundColor, drawBackground ? 1 : 0);
-        graphics.lineStyle();
-        graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
-        graphics.endFill();
-        
-        // FIXME (rfrishbe): separators should be stylable
-        // draw seperators: two lines
-        // 1 pixel from bottom
-        graphics.lineStyle(1, 0x1C1C1C);
-        graphics.moveTo(0, unscaledHeight-1);
-        graphics.lineTo(unscaledWidth, unscaledHeight-1);
-        
-        // line on the bottom
-        graphics.lineStyle(1, 0x606060);
-        graphics.moveTo(0, unscaledHeight);
-        graphics.lineTo(unscaledWidth, unscaledHeight);
+		graphics.lineStyle();
+		graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+		graphics.endFill();
+		
+		var topSeparatorColor:uint;
+		var topSeparatorAlpha:Number;
+		var bottomSeparatorColor:uint;
+		var bottomSeparatorAlpha:Number;
+		
+		// Selected and down states have a gradient overlay as well
+		// as different separators colors/alphas
+		if (selected || down)
+		{
+			var colors:Array = [0x000000, 0x000000 ];
+			var alphas:Array = [.2, 0];
+			var ratios:Array = [0, 255];
+			var matrix:Matrix = new Matrix();
+			
+			// gradient overlay
+			matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
+			graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
+			graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
+			graphics.endFill();
+			
+			// separator props - dark lines on the top and the bottom
+			topSeparatorColor = 0x000000;
+			topSeparatorAlpha = .3;
+			bottomSeparatorColor = 0x000000;
+			bottomSeparatorAlpha = .3;
+		}
+		else
+		{
+			// default look:  separators are a highlight on the top and 
+			// shadow on the bottom
+			topSeparatorColor = 0xFFFFFF;
+			topSeparatorAlpha = .25;
+			bottomSeparatorColor = 0x000000;
+			bottomSeparatorAlpha = .2;
+		}
+		
+		// draw separators
+		graphics.beginFill(topSeparatorColor, topSeparatorAlpha);
+		graphics.drawRect(0, 0, unscaledWidth, 1);
+		graphics.endFill();
+		
+		graphics.beginFill(bottomSeparatorColor, bottomSeparatorAlpha);
+		graphics.drawRect(0, unscaledHeight - 1, unscaledWidth, 1);
+		graphics.endFill();
+		
+		
+		// add extra separators to the first and last items so that 
+		// the list looks correct during the scrolling bounce/pull effect
+		// top
+		if (itemIndex == 0)
+		{
+			graphics.beginFill(bottomSeparatorColor, bottomSeparatorAlpha);
+			graphics.drawRect(0, -1, unscaledWidth, 1);
+			graphics.endFill();	
+		}
+		
+		// bottom
+		var dataGroup:DataGroup = parent as DataGroup;
+		if (dataGroup && itemIndex == dataGroup.numElements - 1)
+		{
+			graphics.beginFill(topSeparatorColor, topSeparatorAlpha);
+			graphics.drawRect(0, unscaledHeight, unscaledWidth, 1);
+			graphics.endFill();	
+		}
+		
+
     }
     
     /**

        _dragging = value;
    }
    
    //--------------------------------------------------------------------------
    //
    //  Overridden methods: UIComponent

            // reset text if it was truncated before.
            if (labelDisplay.isTruncated)
                labelDisplay.text = label;
		
			textHeight = labelDisplay.measuredTextSize.y;
        }

		var metrics:TextLineMetrics = labelDisplay.getLineMetrics(0);

		var ascentDelta:Number = textHeight - (metrics.ascent - 2); // We need the ascent that doesn't include the "slop"
		
        // text should take up the rest of the space width-wise, but only let it take up
        // its measured textHeight so we can position it later based on verticalAlign
        var labelWidth:Number = Math.max(viewWidth, 0);
        var labelHeight:Number = Math.max(Math.min(viewHeight + ascentDelta, textHeight), 0);
        setElementSize(labelDisplay, labelWidth, labelHeight);    
   
		var labelY:Number = 0;

		// Vertical align is calcuated differently for top/bottom/middle. To get as accurate as possible we
		// want to avoid calculations using the slop.  We only use it when we absolutely need it when
		// verticalAlign == "top".  
		if (verticalAlign == "top")
			labelY = paddingTop - (StyleableTextField.TEXT_HEIGHT_PADDING/2 + 3); // accounts for gutter and slop
		else if (verticalAlign == "bottom")
			labelY = viewHeight - (metrics.ascent + StyleableTextField.TEXT_HEIGHT_PADDING/2) + paddingTop; //viewHeight - (labelHeight - metrics.descent - metrics.leading) + paddingTop;
		else // if (verticalAlign == "middle")
			labelY = Math.round(.5 * (viewHeight - (textHeight - metrics.descent + StyleableTextField.TEXT_HEIGHT_PADDING))) + paddingTop;	
		// made "middle" last even though it's most likely so it is the default and if someone 
		// types "center", then it will still vertically center itself.

		setElementPosition(labelDisplay, paddingLeft, labelY);
		
        // attempt to truncate the text now that we have its official width
        labelDisplay.truncateToFit();
    }
