Styling PunBB documentation - ideas welcome

In an effort to better understand the PunBB CSS myself I have started working on some unofficial styling documentation. My original idea was to simply work through each line of the PunBB CSS and show exactly what changed with each line. The results of my efforts can be found here.

I worked from a fresh copy of PunBB 1.2.16 consistently using style/imports/Oxygen_cs.css, and provided both the original CSS, altered CSS, and a screenshot documenting the change in appearance.

As this was only for testing purposes some of the screenshots are low quality, but from this experiment I've realised the documentation has probably been approached from the wrong direction anyway. If, for example, somebody wanted to change the Main Menu Link Colours they wouldn't actually know beforehand which line in the CSS should be referenced. As a result they would have to jump between all of the threads I've created and check each screenshot - not the most practical use of time.

My new idea would be to setup a feature such as FotoNotes, a demo I've created can be found here (Hover over the Title and Description). By hovering over sections of the style a user can see exactly which line of PunBBs CSS would need to be edited. Multiple pages of FotoNotes would be needed, possibly broken down into Background Colours, Text Colours, Borders, etc.

Any feedback on how best to approach this documentation would be more than welcome Anyone who may be struggling to style PunBB should certainly chip in their own thoughts on how some documentation would make it easier for them.

If we can find a decent format for outlining documentation for styling PunBB 1.2 then it should be a breeze to knock out similiar documentation for PunBB 1.3 Final (whenever that may be due), that is of course if official documentation isn't provided (other than the /* css notes */ )

So... ideas welcome