title: can't get buttons to be responsive and scale like the rest of my page
body: <p>I've got most of this page to be responsive but the only thing I can't seem to figure out are the two buttons. They are using javascript for a mouseover effect so not sure if that is messing with things or not. I basically just want the images to scale along with the rest of the page when you view it in different resolutions. </p>
  
  <pre><code>http://74.117.156.152/~pr0digy/
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
          &lt;title&gt;US Legal Support - CapEx&lt;/title&gt;
          &lt;meta charset="utf-8" /&gt;
  
          &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
          &lt;meta name="viewport" content="width-device-width, initial-scale-1.0"&gt;
  
          &lt;script type="text/javascript"&gt;
  if (document.images) {
      new1 = new Image;
      new2 = new Image;
      existing1 = new Image;
      existing2 = new Image;
      new1.src = "images/new1.png";
      new2.src = "images/new2.png";
      existing1.src = "images/existing1.png";
      existing2.src = "images/existing2.png";
  }
  function swapImage(thisImage,newImage) {
      if (document.images) {
          document[thisImage].src = eval(newImage + ".src");
      }
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body class="body"&gt;
  
          &lt;header class="mainHeader"&gt;
              &lt;img src="images/uslegalbox.png" alt="usls box" &gt;
          &lt;/header&gt;
  
          &lt;div class="textBox"&gt;
  
              &lt;div class="text"&gt;
                      &lt;h1&gt;Capital&lt;/h1&gt;
                      &lt;h2&gt;Expenditures&lt;/h2&gt;
              &lt;/div&gt;
  
              &lt;div class="buttonsBox"&gt;
                  &lt;div class="newcapex"&gt;
                      &lt;a href="#" onMouseOver="swapImage('new','new2')" onMouseOut="swapImage('new','new1')"&gt;&lt;img src="images/new1.png" class="ri" name="new" alt="new capex"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                      &lt;div class="capexstatus"&gt;
                          &lt;a href="#" onMouseOver="swapImage('existing','existing2')" onMouseOut="swapImage('existing','existing1')"&gt;&lt;img src="images/existing1.png" class="ri" name="existing" alt="check status" width="310px" height=$
                      &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>body {
          background: url('images/bg.jpg');
          background-size: 100%;
          background-repeat:no-repeat;
          color: #000305;
          font-size: 87.5%; /* Base font size is 14px */
          font-family: Arial; 'Lucida Sans Unicode';
          text-align: left;
          width: 100%;
          margin: 0;
          padding: 0;
          height: 100%;
  }
  
  .mainHeader {
      width: 30%
          height: auto;
          margin: 2% 0 0 -1%;
  }
  
  .mainHeader img {
          width: 35%;
          height: 100%;
  }
  
  .textBox {
      height: 275px;
          margin-top: 3%;
          background-image: url('images/buttonsbox.png');
          background-repeat: repeat-x;
  }
  
  .text {
          width: 40%;
          margin-left: 5%;
          float: left;
          margin-top: -1%;
  }
  
  .buttonsBox {
      width: 55%;
          float: right;
          margin-top: 50px;
  }
  
  .newcapex {
      float: left;
          border: 0;
          margin-top: 45px;
  }
  
  .capexstatus {
      margin-left: 50%;
          border: 0;
          margin-top: 45px;
  }
  
  .newcapex img {
          width: 100%;
  }
  
  /* Text */
  
  h1 {
          color: #ffffff;
          font-size: 5.0em;
          margin-top: 60px;
  }
  
  h2 {
          color: #ffffff;
          font-size: 5.0em;
          margin-top:-30px;
  }
  </code></pre>