title: Custom CSS color overlay
body: <p>I am trying to write up some CSS for a company logo that is a fairly accurate depiction of the <a href="http://www.portfoliollc.com/inc/img/logo.jpg" rel="nofollow">jpg</a> currently on the company server. its pretty basic except for some color overlays on the logo. </p>
  
  <p>My question is: 
  is this even possible? if so how can i go about doing so</p>
  
  <p>please dont bash, im a total noob, my first line of html was about a week ago...</p>
  
  <p><strong>Here is my markup</strong></p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;
  
      &lt;/title&gt;
      &lt;link rel="stylesheet" href="css/stylesheet.css"
  &lt;/head&gt;
  &lt;style contenteditable=""&gt;
  #infinity {
  position: absolute;
  width: 212px;
  height: 100px;
   -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  }
  
   #infinity:before,
  #infinity:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;    
  border: 15px solid;
  -moz-border-radius: 50px 50px 0 50px;
       border-radius: 50px 50px 0 50px;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
  }
  #infinity:before{
  color: #ADB2B3;
  }
  #infinity:after {
  left: auto;
  right: 15;
  color: #A99055;
  -moz-border-radius: 50px 50px 50px 0;
       border-radius: 50px 50px 50px 0;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
  }                       
                                      &lt;/style&gt;
  &lt;body&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;div&gt;
  &lt;div&gt;   
      &lt;div style="float:left; margin-right: 0px;"id="infinity"&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;                 
           font-family: Avenir, sans-serif;"&gt;
      PORTFOLIO
      &lt;/p&gt;
  &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>