Spry menu for my phone.css and tablet.css?

Question

I finished learning how to set up my media queries and during the process I changed the properties of my spry menu for my phone.css. I now realize that all my menu bars are the size that I did for my phone.css.
How can I get my phone.css and tablet.css to recognize different spry menu bars? I was thinking to place certain spry menu css information inside of the appropriate phone.css or tablet.css (in my case) then within my #navigation ID.
Does anyone see what trap I have set for myself?
This has come about when I started to make a current site viewable in a tablet and phone device. As I change the spry menu bar it changes all of my navigation.
Thanks in advance for the help.

Answer 1

So in other words are you saying to paste in my spry menu bar css code into let's say my phone.css?
current phone.css code:
<><>
@charset "utf-8";
@import url("SpryAssets/SpryMenuBarHorizontal.css");
body {
    text-align: center;
    background-color: #be7042;
#wrapper {
    height: 750px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    background-color: #006400;
    position: static;
#bottombanner {
    text-align: center;
    height: 192px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 25px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 8px;
    line-height: 2px;
    color: #FFF;
    position: static;
#ckimage {
    text-align: center;
    height: 145px;
    width: 75px;
    margin-top: 50px;
    margin-left: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#estriolimage {
    text-align: center;
    height: 75px;
    width: 56px;
    margin-top: 45px;
    margin-left: 26px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 6px;
    color: #FFF;
    position: static;
#maincopy {
    font-family: Verdana, Geneva, sans-serif;
    text-align: left;
    height: 350px;
    width: 200px;
    margin-top: -265px;
    margin-left: 115px;
    color: #FFF;
    font-size: 8px;
    position: static;
#navigation {
    text-align: center;
    height: 49px;
    width: 320px;
    margin-top: 1px;
    position: static;
#topbanner {
    text-align: center;
    height: 48px;
    width: 320px;
    margin-right: auto;
    margin-left: auto;
    position: static;
><><
Would I paste my spry menu bar css code into my #navigation portion of my phone.css (I bolded the part where I think I would paste in my spry menu css.)