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	dpavlin	919	/* 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			}