I am having trouble getting my customized live agent window to show up properly.  I have created a visual force page based on the suggestions in the live agent developer guide.  I added it to a site and made it visible.  I am able to load the page by going directly to it just fine.  However, when I go and configure my chat button to use the custom page it just uses the stock look and feel and does not use my custom page.

The really strange thing is that I am able to get the custom page to show up if I "break" things a bit.  When adding the chat button to my page if I don't call the liveagent.init method on page but wait to call it until right before calling liveagent.startChat the first time I call startChat the popup window will fail to load because it attempts to access just a relative URL and not use the base liveagent url.  However, if I call startChat a second time it will pop a live chat window using my customized page.  Again, if I wait until init is complete startChat works perfectly and launches the chat as expected but not using a customized page.  The custom page is currently hosted in a sandbox, not sure if that makes a difference.

Nothing special with the javascript to launch the page:

liveagent.init('https://d.<instance_id>.salesforceliveagent.com/chat', '<deployment_id>', '<organization_id>');

window.liveagent.startChat('<chat_button_id>');

Here is my custom page:

<apex:page showHeader="false">
<!-- Add custom CSS here -->
<style type="text/css">
    body { background-color: #333333; padding: 7px;}
    #liveAgentChatLog {background-color: white; width: 100%}
    #liveAgentChatInput {width: 80%; margin-top: 10px;}
    .liveAgentState #waitingMessage { display: none; }
    .liveAgentSendButton {
        color: #FFFFFF;
        box-shadow: none;
        text-shadow: none;
        border: none;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        background: #41b7e3;
        display: inline-block;
        padding: 5px 20px 3px 20px;
        text-align: center;
        text-transform: uppercase;
    }
</style>
<!-- The root element for the chat window. This element gets a CSS class dynamically applied
to indicate the state of the chat window. Available states are:
"liveAgentStateWaiting" - indicates that the chat has not yet been answered.
"liveAgentState" - indicates that the chat is engaged
"liveAgentStateStatusMessage" - indicates that a status message is being displayed to the
user.
"liveAgentStateEnded" - indicates that the chat has ended. -->
<liveAgent:clientchat >
  <liveAgent:clientChatMessages />
  <div id="waitingMessage" class="modal">
    <!-- You can customize this waiting message HTML -->
    <em>You are now being connected to an agent.</em>
  </div>
  <liveAgent:clientChatLog />
  <div id="chatInput" class="pod">
    <liveagent:clientChatInput />
    <liveAgent:clientChatSendButton label="Send"/>
  </div>
</liveAgent:clientchat>
<!-- You can customize the window title with the js below -->
<script type="text/javascript">
window.title = "My Custom Live Chat Window";
</script>
</apex:page>