Overriding admin-bar.css

Hey there.

I’m using a variety of hooks to adjust the admin bar, making a login form for non logged in users.

You can see the hooks I’m using below – not very tidy yet, will neaten that up soon.

However, the issue I am having is: how do I style the elements in the bar? As you can see, I’ve added a login form, and a message, but my attempts to style anything fail due to it being overridden by admin-bar.css.

See here – http://jonrackham.com/tastour/ – The “join today” link is not responding to my css for its #nobreak declaration.

How do I get round this? Don’t want to edit admin-bar.css in case it’s overwritten in a future upgrade of WP.

Help appreciated!
Chris

My functions.php code below:

add_filter( 'show_admin_bar', '__return_true' );
add_action( 'admin_bar_menu', 'add_toolbar_stuff', 999 );
function add_toolbar_stuff( $wp_admin_bar ) {
    $wp_admin_bar->remove_node('search');
}
add_action( 'admin_bar_menu', 'wp_admin_bar_login', 999 );
function wp_admin_bar_login( $wp_admin_bar ) {
	if ( is_user_logged_in() )
		return;	

		$form = '<div class="loginform">';
		$form .= '<form action="http://jonrackham.com/tastour/wp-login.php" method="post" id="adminbarlogin">';
		$form .= '<input class="adminbar-input" name="log" id="adminbarlogin-log" type="text" value="Username" />';
		$form .= '<input class="adminbar-input" name="pwd" id="adminbarlogin-pwd" type="password" value="Password" />';
		$form .= '<input type="submit" class="adminbar-button" value="Login"/>';
		$form .= '<span class="adminbar-loginmeta">';
		$form .= '<input type="checkbox" checked="checked" tabindex="3" value="forever" id="rememberme" name="rememberme">';
		$form .= '<label for="rememberme">Remember me</label>';
		$form .= '<a href="http://jonrackham.com/tastour/wp-login.php?action=lostpassword">Lost your password?</a></span></form>';
		$form .= '</div>';

	$wp_admin_bar->add_node( array(
		'id'     => 'login',
		'title'  => $form,
		'meta'   => array('class'    => 'admin-bar-login')
	) );

	$message = '<p>Not a Bon Vivant member yet? Why not <a id="nobreak" href="http://jonrackham.com/tastour/member-registration/">join today?</a></p>';

		$wp_admin_bar->add_node( array(
		'id'     => 'message',
		'title'  => $message,
		'meta'   => array('class'    => 'admin-bar-message')
	) );

}