Custom Styles not Displayed in Editor

[Alan-A]

I'm wanting to give users the possibility of adding custom styles that are defined in the standard theme 'style.css' file.
(The 'standard' method of implementing custom styles via the GS's CKEditor's "Styles" drop-down selector:

Code:

{ name : 'Marker: Yellow'    , element : 'span', styles : { 'background-color' : 'Yellow' } },

results in in-line styles. However, IMO this method misses out on one of the key features of CSS - the ability to administer styles centrally.)

I've followed Connie's excellent "WYSIWYG-Editor" tutorial in the GS Wiki (http://get-simple.info/wiki/how_to:wysiwyg_editor) and made my own custom style sheet.
I've also found out that you can define your own CSS classes for the 'Styles' window using:

Code:

{ name : 'Footnote', element : 'p', attributes : { 'class' : 'footnote' } },

This works, in so far as the editor applies my 'footnote' class to the 'p' tag correctly and when I look at my newly coded page from outside I can see that the browser is correctly applying the formatting that I've specified in the 'style.css' file.

However, what doesn't work is that this isn't WYSIWYG. Whilst clicking on the 'Marker: Yellow' default custom style shows a yellow background behind the text once the focus is changed from the editor toolbar back to the editor window, users can only see that they've applied my 'Footnote' class when they switch over to the editor's 'Source' view.
Which means that chaos and therefore an unhappy customer is almost certain to occur sometime along the line.

Does anyone know how to get the CKEditor to read the GS 'style.css' file 'realtime'?