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

/* this exists for one reason: the gauge and nogauge message need a home. 
   you can stack this box or float it or what have you. all of the other
   elements are relative to the div so the div is all yours */
  /* background-color : #ffffdd; */
div#cdg-shell { 
  float: right;
  position : relative;
  top:  50px;
  background-color : #FFF8C6;
  margin : auto;
  width : 180px;
  height : 380px;
  display : block;
  overflow : hidden;
}
  /* border : 1px solid #666; */


/* this holds the thermometer. The heigh of this box is critical to the 
   functionality I know, the crosshair is dumb, so shoot me. I like it :p
   Please note: The thermometer body is an embedded image. If you change 
   background colors, you'll need to change that image. The opaque portions 
   must stay that way.
   Grab the image from: http://mikecherim.com/experiments/images/cdg_tmom.gif */ 
div#cdg {
  margin : 0;
  width : 125px;
  height : 300px;
  display : block;
  cursor : crosshair;
  font-size : 0.8em;
  border-right : 2px solid #888; /* this sort of "finishes" the embedded image */
}

/* this is the marker and we stick it to the bottom. In-line css margin-bottom 
   is adjusted by the script to move the marker... like magic. The 
   background makes it cover up the Goal amount line. Using absolute 
   positioning for good not evil */
p#cdg_p { 
  position : absolute;
  background-color : #ffffdd;
  bottom : 0;
  left : 5px;
  color : #333;
  z-index : 5;
  border-bottom : 1px solid #cd0000;
}  


/* ah, the bold, red right-arrow (&rarr;)
   FYI: The arrow isn't supported by browser < or = to IE 5.5 */
p#cdg_p span.cdg_arw {
  color : #cd0000;
  font-weight : bold;
}

/* the mercury... I chose a slightly deeper red. it moves via script 
   as well like the marker, using margin-bottom */
div#cdg_m { 
  position : absolute;
  bottom : 0;
  right : 0;
  display : block;
  width : 55px;
  background-color : #cd0000;
}

/* I use this to position the image in the lower right to control mercury view */
div#cdg img {
  position : absolute;
  bottom : 0;
  right : 0;
  display : block;
  width : 60px;
  height : 300px;
}


p.pta_goal { text-align: right; 
             font-weight: bold; }

div#members p {
    position: absolute; 
    bottom: 0;
    left: 0; 
    text-align: center; 
    font-size: 14pt; 
    font-weight: bold; }

*.ptanum {
    color: green; 
    font-size: 20pt; }
    

/* End Styles */