Hi memerylane,
You can add a mobile logo in the header by going into your mobile skin in Studio and adding a reference to whatever mobile logo asset you upload in the page header section of the wrapper.
Keep in mind that with the limited UI in mobile browsing, you will want to keep the mobile logo to a minimal size/dimension.
Here are a couple examples as reference:
http://supportforums.blackberry.com
Also, please find attached the mobile colors guide, similar to the desktop version you have.
In addition to the mobile colors guide that Ricky mentioned, one way that I've found particularly helpful in figuring out the styling overrides is to switch into the Mobile view on a desktop/laptop so that you can use your usual full-featured debuggers (ie. FireBug, Chrome Developer Tools, etc.)
To switch into mobile view, you can use the following query string:
?device-view=mobile
For example, to view the Lithosphere in mobile view:
http://lithosphere.lithium.com/?device-view=mobile
Here's a TKB article on the topic for reference:
Now you can easily use the "inspect" tool in your favorite debugger to figure out the classes and IDs to use in your CSS selectors.
