title: CSS conflict media queries in firefox
body: <p>I've a page where I use firefox specific css using <code>@-moz-document url-prefix()</code>.</p>
  
  <p>The thing is I have a media query targeting ipad resolutions. I've used firefox specific codes in the media query too. But firefox 10 doesn't pick this css and only pick the normal css. for an example.</p>
  
  <pre><code>@-moz-document url-prefix() {
  .with-hotel-list{
      margin-right: 5px !important;
      width: 130px;
  }
  .search-form input[type="button"]{
      margin-left: 57px;
      margin-top: 1px;
  }
  }
  
  @media screen and (max-width: 810px) and (min-width: 765px) {
     .search-form input[type=button] {
        width: 118px;
        margin-left: 36px;
      }
  
      @-moz-document url-prefix() {
      .hotel-list{
          height: 33px;
          margin-top: 3px;
          font-size: 13px;
      }
      .search-form input[type="button"] {
          margin-left: 46px !important;
          margin-top: 1px;
      }
  }
  }
  </code></pre>
  
  <p>Can any one help me on this. do I need to put the browser specific css first?</p>