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

/* 
  here's a holding container to which the text will be relative to. The
  width/height must be in ems and the padding shown is critical to make the 
  box respect the positioned text though the value can be changed to whatever.
  on this page this box is centered, but to make life easier, left-align it
  and give yourself some breathing room. 
*/
#cts {
  position : relative;
  margin : auto;
  width : 29em; 
  height : 13.2em;
  padding : 5%; 
}

/* absolutely position the shadow text Xpx from upper left, depending on shadow depth */
#cts h2 {  
  position : absolute;
  font-size : 350%;    /* This huge size is just for this experiment */
  color : #000;
  top : 2px;
  left : 2px;
}

/* absolutely position the top text -Xpx from the shadow text, match the px size */
#cts h2 span {
  position : absolute;
  color : #669900;
  top : -2px;
  left : -2px;
}

/*
  this offset text is accessible yet hidden when styles are supported to help the 
  replicated shadow text make more sense to non-CSS and screen reader users. For
  ethical SEO reasons, whatever the hidden statment is should be available on
  the same page somewhere else. Try to make it read well as this is important.
*/
#cts h2 span.offset {
  position : absolute;
  top : -9000px;
  left : -9000px;
}

/* 
  this goes in an If IE conditional comment. IE, including IE7, screws up padding and 
  affects the text width and position so this will probably be needed. 
*/

#cds { 
  width : 32em;
}

/* End Styles */