1body {
2  font-family: "Helvetica Neue", Helvetica, sans-serif;
3  margin: 30px auto;
4  width: 1024px;
5  position: relative;
6}
7
8header {
9  padding: 6px 0;
10}
11
12input {
13  font-size: 10px;
14}
15
16.group {
17  margin-bottom: 1em;
18}
19
20.axis {
21  font: 10px sans-serif;
22  position: fixed;
23  pointer-events: none;
24  z-index: 2;
25}
26
27.axis text {
28  -webkit-transition: fill-opacity 250ms linear;
29}
30
31.axis path {
32  display: none;
33}
34
35.axis line {
36  stroke: #000;
37  shape-rendering: crispEdges;
38}
39
40.axis.top {
41  background-image: linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
42  background-image: -o-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
43  background-image: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
44  background-image: -webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
45  background-image: -ms-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
46  top: 0px;
47  padding: 0 0 24px 0;
48}
49
50.axis.bottom {
51  background-image: linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
52  background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
53  background-image: -moz-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
54  background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
55  background-image: -ms-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
56  bottom: 0px;
57  padding: 24px 0 0 0;
58}
59
60.horizon {
61  border-bottom: solid 1px #000;
62  overflow: hidden;
63  position: relative;
64}
65
66.horizon {
67  border-top: solid 1px #000;
68  border-bottom: solid 1px #000;
69}
70
71.horizon + .horizon {
72  border-top: none;
73}
74
75.horizon canvas {
76  display: block;
77}
78
79.horizon .title,
80.horizon .value {
81  bottom: 0;
82  line-height: 30px;
83  margin: 0 6px;
84  position: absolute;
85  text-shadow: 0 1px 0 rgba(255,255,255,.5);
86  white-space: nowrap;
87}
88
89.horizon .title {
90  left: 0;
91  font-size: 8px;
92}
93
94.horizon .value {
95  right: 0;
96}
97
98.line {
99  background: #000;
100  opacity: .2;
101  z-index: 2;
102}
103
104@media all and (max-width: 1023px) {
105  body { margin: 0px auto; }
106  .axis { position: static; }
107  .axis.top, .axis.bottom { padding: 0; }
108}
109