Why is this CSS code not working in a template

My colleague has asked me to put a button into a web page template. I want to put the button into an empty table column/row. The button appears in the template in the table column, but not on the pages the template applies to (even though it goes through the process of updating the pages in Dreamweaver). Also, for some reason, the font style is lost in button - it should be Arial but it's coming in as a Times or something. I'm a beginner web designer so all this is new to me. Here's the HTML code that I copied and pasted into my web page template table column:

<a class="small blue awesome" href="http://iris.ca/storelist.html">Schedule an eye exam</a>
Here's the CSS code that appears in the external style sheet that page links to:

/* New CSS Buttons */

.awesome, .awesome:visited {
      background: #222 url(/images/alert-overlay.png) repeat-x;
      display: inline-block;
      padding: 5px 10px 6px;
      color: #fff;
      text-decoration: none;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
      text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
      border-bottom: 1px solid rgba(0,0,0,0.25);
      position: relative;
      cursor: pointer;
}


.awesome:hover                                          
{ background-color: #111; color: #fff; text-decoration: none; }
.awesome:active                                          
      { top: 1px; text-decoration: none; color: #fff; }
.small.awesome, .small.awesome:visited                   
      { font-size: 11px; padding: color: #fff; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited             
      { font-size: 13px; color: #fff; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited                   
      { font-size: 14px; padding: 8px 14px 9px; color: #fff; }
      
.blue.awesome, .blue.awesome:visited            
      { background-color: #2daebf; color: #fff; }
.blue.awesome:hover                                          
      { background-color: #007d9a; color: #fff; }

Is there something else I have to add? Thanks, Cindy