User:Star0/sandbox/styles.css

.image-1{
	width: 95px;
	height:96px;
	
	position:absolute;
	z-index: 1;
	left: 20px;
	top:20px;

}
.image-2{
	width: 95px;
	height:96px;
	
	position:absolute;
	z-index: 2;
	left: 65px;
	top:65px;
}
.image-3{
	width: 35px;
	height:35px;
	
	position:absolute;
	z-index: 3;
	left: 130px;
	top:18px;
}



body {
	margin:0;
	padding:40px;
	background:#fff;
	font:70% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}

h1{
	font-size:220%;
	font-weight:normal;
}

h2{
	font-size:180%;
	font-weight:normal;	
}

dl.csslinegraph, dl.csslinegraph dt, dl.csslinegraph dd{
	margin:0;
	padding:0;
	} 	
dl.csslinegraph{
	width:467px;
	height:385px;
	} 
dl.csslinegraph dt{
	display:none;
	}
dl.csslinegraph dd{
	position:relative;
	float:left;
	display:inline;
	width:33px;
	height:330px;
	margin-top:22px;	
	} 
dl.csslinegraph dd.first{
	margin-left:33px;		
	} 	
dl.csslinegraph span{
	position:absolute;
	display:block;
	width:33px;	
	height:330px;
	left:0;	
	text-indent:-8000px;
	} 	
dl.csslinegraph span em{
	position:absolute;
	display:block;
	width:6px;	
	height:6px;
	left:-3px;	
	bottom:-3px;
	} 	
dl.csslinegraph span.d em{	
	left:-3px;	
	bottom:auto;	
	top:-2px;	
	} 		
	
/* position based on previous value (if we are going to increase) */

	.pi0{top:0px;}
	.pi1{top:-11px;}
	.pi2{top:-22px;}
	.pi3{top:-33px;}
	.pi4{top:-44px;}
	.pi5{top:-75px;}
	.pi6{top:-66px;}
	.pi7{top:-77px;}
	.pi8{top:-88px;}
	.pi9{top:-99px;}
	.pi10{top:-110px;}
	.pi11{top:-121px;}
	.pi12{top:-132px;}
	.pi13{top:-143px;}
	.pi14{top:-154px;}
	.pi15{top:-165px;}
	.pi16{top:-176px;}
	.pi17{top:-187px;}
	.pi18{top:-198px;}
	.pi19{top:-209px;}
	.pi20{top:-220px;}
	.pi21{top:-231px;}
	.pi22{top:-242px;}
	.pi23{top:-253px;}
	.pi24{top:-264px;}
	.pi25{top:-275px;}
	.pi26{top:-286px;}
	.pi27{top:-297px;}
	.pi28{top:-308px;}
	.pi29{top:-319px;}
	.pi30{top:-330px;}
	
/* position based on previous value (if we are going to decrease) */
		
	.pd0{top:330px;}
	.pd1{top:319px;}
	.pd2{top:308px;}
	.pd3{top:297px;}
	.pd4{top:286px;}
	.pd5{top:275px;}
	.pd6{top:264px;}
	.pd7{top:253px;}
	.pd8{top:242px;}
	.pd9{top:231px;}
	.pd10{top:220px;}
	.pd11{top:209px;}
	.pd12{top:198px;}
	.pd13{top:187px;}
	.pd14{top:176px;}
	.pd15{top:165px;}
	.pd16{top:154px;}
	.pd17{top:143px;}
	.pd18{top:132px;}
	.pd19{top:121px;}
	.pd20{top:110px;}
	.pd21{top:99px;}
	.pd22{top:88px;}
	.pd23{top:77px;}
	.pd24{top:66px;}
	.pd25{top:55px;}
	.pd26{top:44px;}
	.pd27{top:33px;}
	.pd28{top:22px;}
	.pd29{top:11px;}
	.pd30{top:0px;}
	
/* increased values */

	.i0{background-position:0 -1px;}
	.i1{background-position:-33px 0;}
	.i2{background-position:-66px 0;}
	.i3{background-position:-99px 0;}
	.i4{background-position:-132px 0;}
	.i5{background-position:-165px 0;}
	.i6{background-position:-198px 0;}
	.i7{background-position:-231px 0;}
	.i8{background-position:-264px 0;}
	.i9{background-position:-297px 0;}
	.i10{background-position:-330px 0;}
	.i11{background-position:-363px 0;}
	.i12{background-position:-396px 0;}
	.i13{background-position:-429px 0;}
	.i14{background-position:-462px 0;}
	.i15{background-position:-495px 0;}
	.i16{background-position:-528px 0;}
	.i17{background-position:-561px 0;}
	.i18{background-position:-594px 0;}
	.i19{background-position:-627px 0;}
	.i20{background-position:-660px 0;}
	.i21{background-position:-693px 0;}
	.i22{background-position:-726px 0;}
	.i23{background-position:-759px 0;}
	.i24{background-position:-792px 0;}
	.i25{background-position:-825px 0;}
	.i26{background-position:-858px 0;}
	.i27{background-position:-891px 0;}
	.i28{background-position:-924px 0;}
	.i29{background-position:-957px 0;}
	.i30{background-position:-990px 0;}
	
/* decreased values */
	
	.d0{background-position:0 -331px;}
	.d1{background-position:-33px -332px;}
	.d2{background-position:-66px -332px;}
	.d3{background-position:-99px -332px;}
	.d4{background-position:-132px -332px;}
	.d5{background-position:-165px -332px;}
	.d6{background-position:-198px -332px;}
	.d7{background-position:-231px -332px;}
	.d8{background-position:-264px -332px;}
	.d9{background-position:-297px -332px;}
	.d10{background-position:-330px -332px;}
	.d11{background-position:-363px -332px;}
	.d12{background-position:-396px -332px;}
	.d13{background-position:-429px -332px;}
	.d14{background-position:-462px -332px;}
	.d15{background-position:-495px -332px;}
	.d16{background-position:-528px -332px;}
	.d17{background-position:-561px -332px;}
	.d18{background-position:-594px -332px;}
	.d19{background-position:-627px -332px;}
	.d20{background-position:-660px -332px;}
	.d21{background-position:-693px -332px;}
	.d22{background-position:-726px -332px;}
	.d23{background-position:-759px -332px;}
	.d24{background-position:-792px -332px;}
	.d25{background-position:-825px -332px;}
	.d26{background-position:-858px -332px;}
	.d27{background-position:-891px -332px;}
	.d28{background-position:-924px -332px;}
	.d29{background-position:-957px -332px;}
	.d30{background-position:-990px -332px;}