Magento – CSS not showing for “NEW” or “SALE” label

So I followed this tutorial to add "NEW" or "SALE" label for this site: http://www.ubertheme.com/docs/add-product-labels/. The label does show up on the product icon but for some reason the CSS isn't showing.

Current code for the app\design\frontend\default{theme}\template\catalog\product\list.phtml

<?php

?>
<?php

?>
<?php
    $_productCollection=$this->getLoadedProductCollection();
    $_helper = $this->helper('catalog/output');
?>
<?php if(!$_productCollection->count()): ?>



<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<?php $i=1; ?>

<!--label-->
<?php $i=0; foreach ($_productCollection as $_product): ?>

<?php

$_product = Mage::getModel('catalog/product')->load($_product->getId());

$attribute = $_product->getResource()->getAttribute('label');

 if(is_object($attribute)) {

  $attdefaultvalue = $attribute->getDefaultValue();

  $attributeValue = Mage::getModel('catalog/product')->load($_product->getId())->getlabel();

  $attributeValueName = Mage::getModel('catalog/product')->load($_product->getId())->getAttributeText('label');

   if(strlen($attributeValue) &&  ($attdefaultvalue !== $attributeValue)) { 

    $labeltype = $attributeValueName;        

    } 

    else {

    $labeltype = "";

   } 

 } 

?>

<?php if ($labeltype): ?>

 <span class="<?php echo $labeltype; ?>-label"><?php echo $labeltype; ?></span>  

<?php endif; ?>

<!--end label-->

<div class="product_top_box_container">
  <div class="product_top_box_image"> <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>" width="162" height="162" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a> </div>
  <div class="product_top_box_name" style=" height:80px;"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></div>
  <div class="sep2" style="float:left;"></div>
  <div class="product_box_read_more"><a href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo $this->getSkinUrl('images/product_read_more.png', array('_secure' => true)) ?>" alt="" /></a></div>
  <div class="flaot_clear"></div>
</div>
<? if( $i%5 == 0) 

                   { ?>
<?php } 
                  else {
                    ?>
<div class="product_seperater"></div>
<?php   
                  }


               ?>
<?php $i++ ; endforeach ;  ?>
<div class="flaot_clear"></div>
</div>
</div>
</div>
<?php endif; ?>

And my CSS: skin\frontend\default{theme}\css.style
has this code in it

/*Product Label*/
.products-grid .NEW-label {
    background: #15ae75;
    padding: 2px 5px;
    position: absolute;
    right: -5px;
    top: -5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 92%;
    border-radius: 3px;
}
.products-grid .DISCONTINUED-label {
    background: #ef4135;
    padding: 2px 5px;
    position: fixed;
    position: absolute;
    right: -5px;
    top: -5px;
    color: #fff;
    text-transform: uppercase;
    font-size: 92%;
    border-radius: 3px;
}