/*Container for the image frame aka the top image*/
.frame{
position: absolute;
z-index: 2;
}
/*The container the character goes in for easy placement*/
#charity{
position: relative;
height: 210px;
width: 170px;
margin: 0px auto;
}
/*Adds padding around image to make border. Needed only for pngs.*/
img.loadpic{
margin: 10px;
}
/*Prevents spillover from middle layer moving up*/
#charitycontainer{
position: relative;
overflow: hidden;
height: 210px;
width: 170px;
background: #FFF;
}
/*The middle layer container, hiding base image initially*/
#charityoverlay{
position: absolute;
z-index: 1;
}
/*White div in #dudeoverlay that fill space the edge image doesn't*/
#charityblock{
height: 210px;
width: 170px;
background: #FFF;
}
/*Image that adds effect the fill, in this case slanted*/
#charityedge{
height: 90px;
width: 170px;
}

.charitytarget {font-size: 14px; color: #009de9; font-weight: bold; margin-left: 12px;}

.charityleft {float: left; width: 360px; padding-right: 25px; margin-right:15px; border-right: 1px solid #aaa;}
.charityright {float: left; width: 180px;}

.charitypercentage {position: absolute; top: 60px; z-index: 999; left: 46px; font-size: 40px;}