﻿/* CSS Document */
dl {
	margin: 20px 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	display: block;
}
dd {
	background-color: #CCCCCC;
	padding: 2px 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-top: 5px;
	display: block;
}
dd>span {
	position: absolute;
	text-align: left;
	padding-left: 1px;
	display: block;
}

* html dl.big span {
	display: block;
	position: absolute;
	width: 600px;
}
* html dl.middle span {
	display: block;
	position: absolute;
	width: 500px;
}
* html dl.small span {
	display: block;
	position: absolute;
	width: 400px;
}
/* bar value */
dd.v0 {
	width: 0%;
}
dd.v1 {
	width: 1%;
}
dd.v2 {
	width: 2%;
}
dd.v3 {
	width: 3%;
}
dd.v4 {
	width: 4%;
}
dd.v5 {
	width: 5%;
}
dd.v6 {
	width: 6%;
}
dd.v7 {
	width: 7%;
}
dd.v8 {
	width: 8%;
}
dd.v9 {
	width: 9%;
}
dd.v10 {
	width: 10%;
}
dd.v11 {
	width: 11%;
}
dd.v12 {
	width: 12%;
}
dd.v13 {
	width: 13%;
}
dd.v14 {
	width: 14%;
}
dd.v15 {
	width: 15%;
}
dd.v16 {
	width: 16%;
}
dd.v17 {
	width: 17%;
}
dd.v18 {
	width: 18%;
}
dd.v19 {
	width: 19%;
}
dd.v20 {
	width: 20%;
}
dd.v21 {
	width: 21%;
}
dd.v22 {
	width: 22%;
}
dd.v23 {
	width: 23%;
}
dd.v24 {
	width: 24%;
}
dd.v25 {
	width: 25%;
}
dd.v26 {
	width: 26%;
}
dd.v27 {
	width: 27%;
}
dd.v28 {
	width: 28%;
}
dd.v29 {
	width: 29%;
}
dd.v30 {
	width: 30%;
}
dd.v31 {
	width: 31%;
}
dd.v32 {
	width: 32%;
}
dd.v33 {
	width: 33%;
}
dd.v34 {
	width: 34%;
}
dd.v35 {
	width: 35%;
}
dd.v36 {
	width: 36%;
}
dd.v37 {
	width: 37%;
}
dd.v38 {
	width: 38%;
}
dd.v39 {
	width: 39%;
}
dd.v40 {
	width: 40%;
}
dd.v41 {
	width: 41%;
}
dd.v42 {
	width: 42%;
}
dd.v43 {
	width: 43%;
}
dd.v44 {
	width: 44%;
}
dd.v45 {
	width: 45%;
}
dd.v46 {
	width: 46%;
}
dd.v47 {
	width: 47%;
}
dd.v48 {
	width: 48%;
}
dd.v49 {
	width: 49%;
}
dd.v50 {
	width: 50%;
}
dd.v51 {
	width: 51%;
}
dd.v52 {
	width: 52%;
}
dd.v53 {
	width: 53%;
}
dd.v54 {
	width: 54%;
}
dd.v55 {
	width: 55%;
}
dd.v56 {
	width: 56%;
}
dd.v57 {
	width: 57%;
}
dd.v58 {
	width: 58%;
}
dd.v59 {
	width: 59%;
}
dd.v60 {
	width: 60%;
}
dd.v61 {
	width: 61%;
}
dd.v62 {
	width: 62%;
}
dd.v63 {
	width: 63%;
}
dd.v64 {
	width: 64%;
}
dd.v65 {
	width: 65%;
}
dd.v66 {
	width: 66%;
}
dd.v67 {
	width: 67%;
}
dd.v68 {
	width: 68%;
}
dd.v69 {
	width: 69%;
}
dd.v70 {
	width: 70%;
}
dd.v71 {
	width: 71%;
}
dd.v72 {
	width: 72%;
}
dd.v73 {
	width: 73%;
}
dd.v74 {
	width: 74%;
}
dd.v75 {
	width: 75%;
}
dd.v76 {
	width: 76%;
}
dd.v77 {
	width: 77%;
}
dd.v78 {
	width: 78%;
}
dd.v79 {
	width: 79%;
}
dd.v80 {
	width: 80%;
}
dd.v81 {
	width: 81%;
}
dd.v82 {
	width: 82%;
}
dd.v83 {
	width: 83%;
}
dd.v84 {
	width: 84%;
}
dd.v85 {
	width: 85%;
}
dd.v86 {
	width: 86%;
}
dd.v87 {
	width: 87%;
}
dd.88 {
	width: 88%;
}
dd.v89 {
	width: 89%;
}
dd.v90 {
	width: 90%;
}
dd.v91 {
	width: 91%;
}
dd.v92 {
	width: 92%;
}
dd.v93 {
	width: 93%;
}
dd.v94 {
	width: 94%;
}
dd.v95 {
	width: 95%;
}
dd.v96 {
	width: 96%;
}
dd.v97 {
	width: 97%;
}
dd.v98 {
	width: 98%;
}
dd.v99 {
	width: 99%;
}
dd.v100 {
	width: 100%;
}

/* bar color*/
.green {
	background-color: #00CC00;
}
.red {
	background-color: #FF0000;
}
.yellow {
	background-color: #FFCC00;
}
.orange {
	background-color: #FF9900;
}
.blue {
	background-color: #0099FF;
}
.purple {
	background-color: #CC33FF;
}
.pink {
	background-color: #FF99CC;
}

/* box dimension*/
dl.w350 {
	width: 350px;
}
dl.w400 {
	width: 400px;
}
dl.w450 {
	width: 450px;
}
dl.w500 {
	width: 500px;
}
dl.w550 {
	width: 550px;
}
dl.w600 {
	width: 600px;
}
dl.w650 {
	width: 650px;
}
dl.w700 {
	width: 700px;
}
dl.w750 {
	width: 750px;
}

/* with grid*/
dl.w350grid {
	background-image: url(grid350.png);
	width: 350px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;

}
dl.w400grid {
	background-image: url(grid400.png);
	width: 400px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}
dl.w450grid {
	background-image: url(grid450.png);
	width: 450px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}
dl.w500grid {
    background-image: url(grid500.png);
	width: 500px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}
dl.w550grid {
	background-image: url(grid550.png);
	width: 550px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}
dl.w600grid {
	background-image: url(grid600.png);
	width: 600px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}
dl.w650grid {
    background-image: url(grid650.png);
	width: 650px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}
dl.w700grid {
	background-image: url(grid700.png);
	width: 700px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}
dl.w750grid {
	background-image: url(grid750.png);
	width: 750px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;
}

/* Typo style*/
dl.big dd {
	height: 40px;
	font-size: 40px;
	line-height: 34px;
}
dl.middle dd {
	height: 28px;
	font-size: 22px;
	line-height: 26px;
}
dl.small dd {
	height: 18px;
	font-size: 11px;
	font-weight: bold;
	line-height: 17px;
}

/* Titles*/
dt {
	background-color: #FFFFFF;
	padding: 5px 0px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #EEEEEE;

}
dl.big dt {
	font-size: 24px;
	font-family: Arial, Helvetica, sans-serif;


}
dl.middle dt {
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;

}
dl.small dt {
	font-size: 13px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;

}
