/*
  +------------------------------------------------------------------+
  | Green-Beast.com                                                  |
  | CSS: Link Backgrounds                                            |
  | Cascading Style Sheet                                            |
  | Copyright Mar 2007                                               |
  | Use with attribution by visible link please!                     |
  | Attribute to: <a href="http://green-beast.com/">Mike Cherim</a>  |
  +------------------------------------------------------------------+
*/ 

/*
  I gave the links a class which could be added to external links 
  manually or by some scripting method. This is really sort of
  unnecessary; if the link text is well done, plus the use of title
  attribute, this is really just eye candy.
*/

/*
  Color the link, give it padding to make room for the background,
  and apply the image color/image
*/
a.ex {
  color : #669900;
  padding-right : 15px; 
  background : #fff url(images/clb-link.jpg) no-repeat bottom right;
  white-space : nowrap; /* Added April 12, 2007 (see note below)*/
}
/* 
  White-Space Note: I'd like to thank Scott Ramsey for bringing to my 
  a bug to my attention: If links with link backgrounds wrap lines in IE6 
  the background image goes bye-bye. I'm not shocked, though; it's IE6. 
  My fix for this is to add "nowrap" to the white-space property as shown 
  above. This should solve the problem and is probably acceptable if authors
  don't published links sentences or large phrases.

  April 14, 2007: Nope, that doesn't work. I don't know what to say other
  than the fact that IE6 blows.
*/


/*
  Remove the underline, change the color, change the image.
*/
a.ex:hover, a.ex:focus, a.ex:active {
  color : #000;
  text-decoration : none;
  background : #fff url(images/clb-link-over.jpg) no-repeat bottom right;
}
  
/*
  Change the background color/image on focus
*/
a.ex:focus, a.ex:active {
  background : #ffffdd url(images/clb-link-on.jpg) no-repeat bottom right;;
}

/*
  I use this class to pre-load the state-change images for better performance
*/
.offset {
  position : absolute;
  top : -9000px;
  left : -9000px;
}

/* End Styles */