title: CSS rules for webkit based browsers
body: <p>I have the next CSS code:</p>
  
  <pre><code>#mgheader .letters {
    display: inline-block;
    margin-left: 55px;
    margin-top: -45px;
    position: absolute;
  }
  
  #mgheader .letters {
    display: inline-block;
    margin-left: 10px;
    position: absolute;
  }
  </code></pre>
  
  <p>Now I want to <strong>execute the first just in Google Chrome and Safari, and the second in other browsers</strong>.</p>
  
  <p>I tried this, but second code seems to be executing always:</p>
  
  <pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) {
    #mgheader .letters {
      display: inline-block;
      margin-left: 55px;
      margin-top: -45px;
      position: absolute;
    }
  }   
  
  #mgheader .letters {
    display: inline-block;
    margin-left: 10px;
    position: absolute;
  }
  </code></pre>
  
  <p>How can I fix that?</p>