Issues working with XPage Tabbed Panel Controls - Aligning Tab Headers with Margin

This was something that I was thinking to do for a long time but never had to do it before. Thanks to my most demanding customer who literally takes a scale and measures micrometer differences on the screen, I am now finding time for working with this finer details on the screen.

The goal is to get the tab headers of a Tabbed Control in XPages to align itself with the margin. I know we always play around with options available in the control's property tab to do it. Atleast I always do it that way :P. I did play around with margins and found some frustrating issues that resulted in some sort of "so-close" answers all the time.

Thanks to chrome and firefox and their developer modes, I was able to do something that pleases me.

Jumping straight to the point, my XPage Tabbed Control looked some what like one in the following screen shot

Hmm looking at this part of screen alone make me realize why my customer was like "WHAT THE HELL!!! WHY IS THE PASSENGER DATA OUT OF LINE!!!". That was scary :P

At last (so at least now) I was able to modify that to look like the following

  Looks pretty nice tight. My customer is really something. Wonder about the eagle eyes my customer has got :)

The trick that helped me do this is very simple. Just add the following to your style sheet

ul.xspTabbedPanelTabs {
left: 0px;
}

and by the way if you are interested, its 10px by default. Thank you wasting some of your time reading my story and not scolding me :)