Override CSS for only login page via local.xml

Question

How can I override a CSS class selector only my footer on the login page?

login page is the default login page which is copied and loaded from

/theme/package/template/persistent/customer/form/login.phtml

The page identifier seems to be:

customer-account-login

But my CSS has no effect. How can I do this?

'local.xml' contains this code:

<?xml version="1.0"?> 
  <layout version="0.1.0">
     <!-- Login Page -->
     <customer-account-login>
        <reference name="head">
          <action method="addItem">
            <type>skin_css</type>
            <file>css/login.css</file>
          </action>
        </reference>
     </customer-account-login>
  </layout>

'login.css' file is this (which what I want to apply to the footer container):

.footer-container { height:185px; padding:0px 0px 10px 0px; position:absolute; bottom:0; width:98%; }

Answer 1

change your local.xml layout handle to customer_account_login, It should be

<?xml version="1.0"?> 
  <layout version="0.1.0">
     <!-- Login Page -->
     <customer_account_login>
        <reference name="head">
          <action method="addItem">
            <type>skin_css</type>
            <file>css/login.css</file>
          </action>
        </reference>
     </customer_account_login>
  </layout>

Answer 2

You are using the wrong handler

instead

<customer-account-login>

Use

<customer_account_login>

it should be _ not -