Hello,

I am attempting to style the default "Chat Window", the one that displays automatically if a "Custom Chat Page" (visualforce page) is not defined. 

BEFORE

Is there a way to customize the CSS for this default chat window to look like this:

AFTER

I was able to copy the HTML code, then modify and reference the CSS from the default chat window to apply our branding style guidelines.  I do not want to create a custom chat window using visualforce, I just want to change the toolbar and button colors, that's it.

Alternatively, are there fully functional chat window visualforce templates available to customize?  How can I reverse engineer the rendered HTML  from the default chat window with all of the visualforce components in place, where I can create my own VF page:

<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
        <liveAgent:clientChat>
        <liveAgent:clientChatSaveButton />
        <liveAgent:clientChatEndButton />
        <div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index:0;">
                <liveAgent:clientChatAlertMessage />
                <liveAgent:clientChatStatusMessage />
        <table id="waitingMessage" cellpadding="0" cellspacing="0">
                <tr>
                        <td>Please wait while you are connected to an available agent.</td>
                </tr>
        </table>
        <div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute;word-wrap: break-word; z-index: 0;">
                <liveAgent:clientChatLog />
        </div>
        <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right:67px;">
                <liveagent:clientChatInput /><liveAgent:clientChatSendButton />
        </div>
</div>
        </liveAgent:clientChat>
</div>

Please help.

Thanks...