@media amzn-mobi will ensure that all relevant rules are applied to any amzn-mobi's. No need to put media rules in your document.
Currently, what is happening is this:
for example number:
- you are using classes "Frame" and "Publisher".
class="default" is displayed as a block and class="mobi" is hidden. WHEN the doc is a .mobi, this is reversed.
And neither is applicable, because neither of those classes are used. Therefore it uses the default style for all elements, "body {display:block}" (because obviously).
- you are using classes "default" and "amzn-mobi", I am assuming with the same css.
class="default" is displayed as block, and class="mobi" is hidden. WHEN the document is a .mobi, this is reversed. All this is just like before.
For the first logo, it will display exactly as you expect, I believe. This is because you added the class="default". The second logo will be displayed regardless. None of your rules apply to it, since you used class="amzn-mobi" instead of class="mobi". The class must match your css element rule, not the media query.
Media queries just choose which extra rules to apply to a document when the style is linked and the media being used, say a Kindle reader, or when the page is printed (if we're talking website pages), matches the rule.
More about media types:
http://www.w3schools.com/css/css_mediatypes.asp