Frey/CSS/Area.css

/* style graph */

ul.graphon 
{
  float: left;
  display: block;
  border: 1px solid #ccc;
  margin: 0px;
  padding: 1em 2.5em;
  background: #fff;
  position: relative;
  list-style-type: none;
}

/*
* html ul.graphon {
  padding-bottom: 25px;
}
*/

ul.graphon:after 
{
  content: '.';
  display: block;
  height: 0px;
  width: 0px;
  visibility: hidden;
  clear:both;
}

ul.graphon li 
{
   float:left;
   width: 0px;  
   color: #f00;
   background: #f00;  
   position: relative;
   border-width: 0px;
   border-color: #f00;
   border-right-width: 50px;
   border-style:solid;
   border-top-color: #fff;
   padding: 0px;
   margin: 0px;
   }

ul.graphon li.down 
{
  border-right-width: 0px;
  border-left-width: 50px;
}

ul.graphon li.last
{
  border-width: 0px;
}
   
ul.graphon li span.val
{
   display: block;
   position: absolute;
   top: -17px;
   left: -20px;
   width: 40px;
   font-size: 10px;
   border: 1px solid #000;
   text-align: center;
   background: #fdd;
   color: #000;
   height: 15px;
   }
ul.graphon li.down span.val 
{
  top: -67px;
  left: -70px;
}
ul.graphon li span.name 
{
   position: absolute;
   bottom: -22px;
   display: block;
   left: -20px;
   height: 20px;   
   width: 40px;
   font-weight: bold;
   text-align: center;
   color: #000;
}

ul.graphon li.down span.name 
{
   left: -70px;
}


/* style unorderd list into table */

ul.graph {
  float: left;
  margin: 0px;
  padding: 0px;
  background: #fff;
/*
  height: 20em;
  overflow: auto;
*/
  border: 1px solid #ccc;
  border-bottom: 0px;
}

/* table rows */
.graph li
{
  display: block;
  clear: both; 
  width: 20em;
  border: 0px;
  border-bottom: 1px solid #ccc;
  padding: 0;
  margin: 0;
}
.graph li:after
{
  content: '.';
  display: block;
  height: 0px;
  width: 0px;
  visibility: hidden;
  clear:both;
}

/* left column */
.graph .name {
  width: 10em;
  text-align: left;
  float: left;
  border-right: 1px solid #ccc;
}

.graph .val {
  float:left; 
}
1	/* style graph */
2
3	ul.graphon
4	{
5	float: left;
6	display: block;
7	border: 1px solid #ccc;
8	margin: 0px;
9	padding: 1em 2.5em;
10	background: #fff;
11	position: relative;
12	list-style-type: none;
13	}
14
15	/*
16	* html ul.graphon {
17	padding-bottom: 25px;
18	}
19	*/
20
21	ul.graphon:after
22	{
23	content: '.';
24	display: block;
25	height: 0px;
26	width: 0px;
27	visibility: hidden;
28	clear:both;
29	}
30
31	ul.graphon li
32	{
33	float:left;
34	width: 0px;
35	color: #f00;
36	background: #f00;
37	position: relative;
38	border-width: 0px;
39	border-color: #f00;
40	border-right-width: 50px;
41	border-style:solid;
42	border-top-color: #fff;
43	padding: 0px;
44	margin: 0px;
45	}
46
47	ul.graphon li.down
48	{
49	border-right-width: 0px;
50	border-left-width: 50px;
51	}
52
53	ul.graphon li.last
54	{
55	border-width: 0px;
56	}
57
58	ul.graphon li span.val
59	{
60	display: block;
61	position: absolute;
62	top: -17px;
63	left: -20px;
64	width: 40px;
65	font-size: 10px;
66	border: 1px solid #000;
67	text-align: center;
68	background: #fdd;
69	color: #000;
70	height: 15px;
71	}
72	ul.graphon li.down span.val
73	{
74	top: -67px;
75	left: -70px;
76	}
77	ul.graphon li span.name
78	{
79	position: absolute;
80	bottom: -22px;
81	display: block;
82	left: -20px;
83	height: 20px;
84	width: 40px;
85	font-weight: bold;
86	text-align: center;
87	color: #000;
88	}
89
90	ul.graphon li.down span.name
91	{
92	left: -70px;
93	}
94
95
96
97	/* style unorderd list into table */
98
99	ul.graph {
100	float: left;
101	margin: 0px;
102	padding: 0px;
103	background: #fff;
104	/*
105	height: 20em;
106	overflow: auto;
107	*/
108	border: 1px solid #ccc;
109	border-bottom: 0px;
110	}
111
112	/* table rows */
113	.graph li
114	{
115	display: block;
116	clear: both;
117	width: 20em;
118	border: 0px;
119	border-bottom: 1px solid #ccc;
120	padding: 0;
121	margin: 0;
122	}
123	.graph li:after
124	{
125	content: '.';
126	display: block;
127	height: 0px;
128	width: 0px;
129	visibility: hidden;
130	clear:both;
131	}
132
133	/* left column */
134	.graph .name {
135	width: 10em;
136	text-align: left;
137	float: left;
138	border-right: 1px solid #ccc;
139	}
140
141	.graph .val {
142	float:left;
143	}