/*
  +------------------------------------------------------------------+
  | 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 */
div#cdg-shell
{
	background-color: #FFFFFF;
	margin: auto;
	width: 170px;
	height: 350px;
	display: block;
	overflow: hidden;
}

/* This styles the heading and the positions left both it second line (goal amount) */

.aap_goal1{
	font-size: 0.5em;
}

h2#cdg_h2, p#cdg_goal
{
	color: #cd0000;
	font-size: 0.5em;
	padding: 0;
	margin-left: 5px;
}

/* but the styles for the second line need some tweaking */
p#cdg_goal
{
	color: #cd0000;
	font-size: 1.1em;
	font-weight: bold;
	padding-bottom: 2px;
}

/* 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: 1;
	width: 150px;
	height: 300px;
	display: block;
	position: relative;
	font-size: 0.8em;
	border-right: 2px solid #FFFFFF; /* 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: #FFFFFF;
	bottom: 0;
	left: 0px;
	color: #333;
	z-index: 5;
	border-bottom: 1px solid #cd0000;
}

/* this is so non-visual users will have the data presented to them in a logical 
   way not needed by those with the imagery */
p#cdg_p span.blind
{
	position: absolute;
	margin-top: -9000px;
	margin-left: -9000px;
}

/* 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: 89px;
	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: 99px;
	height: 300px;
}

/* this is the no fundraiser text */
p#cdg_no
{
	font-size: 0.8em;
	font-weight: bold;
	margin: 20px 15px;
	line-height: 30px;
}

/* this is the no fundraiser link style (Contact Us) */
p#cdg_no a
{
	color: #669900;
}

/* and it hover and focus states */
p#cdg_no a:hover, p#cdg_no a:focus, p#cdg_no a:active
{
	text-decoration: none;
	color: #000;
}

.gaugeHeader
{
	font-size: 2em;
	color: #4d9b11;
}

.gaugeWaitList
{
	font-size: 0.8em;
}

.gaugeFooter
{
	font-size: 0.7em;
}

.gaugePatientInfo
{
	font-size: 1em;
	color: #4d9b11;
	font-weight:bold;
}

.gaugeGoalInfo
{
	font-size: 1em;
	color: #cd0000;
	font-weight:bold;	
}

/* End Styles */