Split-Flap/css/base.css at master · rcreasey/Split-Flap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
body {
  background: #0F0F0F;
  color: #FFF;
  font-family: helvetica;
}
a {
  color: #FFF;
  text-decoration: none;
}
.splitflap {
  width: 1400px;
  overflow: none;
  white-space: nowrap;
  margin: 20px 10px;
}
.splitflap h1 {
  text-transform: uppercase;
  font-size: 2.5em;
}
.splitflap .header {
  float: left;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.splitflap .row {
  clear: both;
  height: 60px;
}
.splitflap .group {
  float: left;
  margin-right: 30px;
}
.splitflap .separator {
  float: left;
  height: 40px;
  width: 15px;
  font-weight: bold;
  font-size: 1.8em;
}
.splitflap .status {
  margin-right: 0;
}
  .splitflap .status div {
    float: left;
    margin: 10px 10px 0 0;
    width: 18px;
    height: 18px;
  }
    .splitflap .status div.on {
      background-position: -18px 0;
    }
    .splitflap .status .s0 {
      background: url('../img/lights_green.png') no-repeat;
    }
    .splitflap .status .s1 {
      background: url('../img/lights_red.png') no-repeat;
    }
.splitflap .full,
.splitflap .number,
.splitflap .character {
  float: left;
  margin-right: 5px;
  width: 25px;
  height: 40px;
  background: url('../img/split-flap-letters-yellow-sm.png') no-repeat;
  background-position: 0px 0px;
}
  .splitflap .full span,
  .splitflap .number span,
  .splitflap .character span {
    width: 25px;
    height: 40px;
    display: block;
    background: url('../img/split-flap-letters-yellow-sm.png') no-repeat;
    background-position: -25px 0px; /* start with a space */
  }

/* SPACE AND TRANSITION IMAGES */
.splitflap span.ctrn { background-position: 0px 0px; } /* transition */
.splitflap span.csp { background-position: -25px 0px; } /* space */
/* FULL SET DRUM */
.splitflap .full span.csp { background-position: -25px 0px; } /* space */
.splitflap .full span.cA { background-position: -50px 0px; } /* A */
.splitflap .full span.cB { background-position: -75px 0px; }
.splitflap .full span.cC { background-position: -100px 0px; }
.splitflap .full span.cD { background-position: -125px 0px; }
.splitflap .full span.cE { background-position: -150px 0px; }
.splitflap .full span.cF { background-position: -175px 0px; }
.splitflap .full span.cG { background-position: -200px 0px; }
.splitflap .full span.cH { background-position: -225px 0px; }
.splitflap .full span.cI { background-position: -250px 0px; }
.splitflap .full span.cJ { background-position: -275px 0px; }
.splitflap .full span.cK { background-position: -300px 0px; }
.splitflap .full span.cL { background-position: -325px 0px; }
.splitflap .full span.cM { background-position: -350px 0px; }
.splitflap .full span.cN { background-position: -375px 0px; }
.splitflap .full span.cO { background-position: -400px 0px; }
.splitflap .full span.cP { background-position: -425px 0px; }
.splitflap .full span.cQ { background-position: -450px 0px; }
.splitflap .full span.cR { background-position: -475px 0px; }
.splitflap .full span.cS { background-position: -500px 0px; }
.splitflap .full span.cT { background-position: -525px 0px; }
.splitflap .full span.cU { background-position: -550px 0px; }
.splitflap .full span.cV { background-position: -575px 0px; }
.splitflap .full span.cW { background-position: -600px 0px; }
.splitflap .full span.cX { background-position: -625px 0px; }
.splitflap .full span.cY { background-position: -650px 0px; }
.splitflap .full span.cZ { background-position: -675px 0px; } /* Z */
.splitflap .full span.c0 { background-position: -700px 0px; } /* 0 */
.splitflap .full span.c1 { background-position: -725px 0px; }
.splitflap .full span.c2 { background-position: -750px 0px; }
.splitflap .full span.c3 { background-position: -775px 0px; }
.splitflap .full span.c4 { background-position: -800px 0px; }
.splitflap .full span.c5 { background-position: -825px 0px; }
.splitflap .full span.c6 { background-position: -850px 0px; }
.splitflap .full span.c7 { background-position: -875px 0px; }
.splitflap .full span.c8 { background-position: -900px 0px; }
.splitflap .full span.c9 { background-position: -925px 0px; } /* 9 */
.splitflap .full span.cper { background-position: -950px 0px; } /* . */
.splitflap .full span.ccom { background-position: -975px 0px; } /* , */
.splitflap .full span.cque { background-position: -1000px 0px; } /* ? */
.splitflap .full span.cexc { background-position: -1025px 0px; } /* ! */
.splitflap .full span.csla { background-position: -1050px 0px; } /* / */
.splitflap .full span.capo { background-position: -1075px 0px; } /* ' */
.splitflap .full span.cplu { background-position: -1100px 0px; } /* + */
.splitflap .full span.cmin { background-position: -1125px 0px; } /* - */
.splitflap .full span.ccol  { background-position: -1150px 0px; } /* : */
.splitflap .full span.cat  { background-position: -1175px 0px; } /* @ */
.splitflap .full span.chsh  { background-position: -1200px 0px; } /* # */
/* NUMBERS ONLY DRUM */
.splitflap .number span.csp { background-position: -25px 0px; } /* space */
.splitflap .number span.c0 { background-position: -700px 0px; } /* 0 */
.splitflap .number span.c1 { background-position: -725px 0px; }
.splitflap .number span.c2 { background-position: -750px 0px; }
.splitflap .number span.c3 { background-position: -775px 0px; }
.splitflap .number span.c4 { background-position: -800px 0px; }
.splitflap .number span.c5 { background-position: -825px 0px; }
.splitflap .number span.c6 { background-position: -850px 0px; }
.splitflap .number span.c7 { background-position: -875px 0px; }
.splitflap .number span.c8 { background-position: -900px 0px; }
.splitflap .number span.c9 { background-position: -925px 0px; } /* 9 */
.splitflap .number span.cper { background-position: -950px 0px; } /* . */
.splitflap .number span.ccom { background-position: -975px 0px; } /* , */
/* CHARACTERS ONLY DRUM */
.splitflap .character span.csp { background-position: -25px 0px; } /* space */
.splitflap .character span.cA { background-position: -50px 0px; } /* A */
.splitflap .character span.cB { background-position: -75px 0px; }
.splitflap .character span.cC { background-position: -100px 0px; }
.splitflap .character span.cD { background-position: -125px 0px; }
.splitflap .character span.cE { background-position: -150px 0px; }
.splitflap .character span.cF { background-position: -175px 0px; }
.splitflap .character span.cG { background-position: -200px 0px; }
.splitflap .character span.cH { background-position: -225px 0px; }
.splitflap .character span.cI { background-position: -250px 0px; }
.splitflap .character span.cJ { background-position: -275px 0px; }
.splitflap .character span.cK { background-position: -300px 0px; }
.splitflap .character span.cL { background-position: -325px 0px; }
.splitflap .character span.cM { background-position: -350px 0px; }
.splitflap .character span.cN { background-position: -375px 0px; }
.splitflap .character span.cO { background-position: -400px 0px; }
.splitflap .character span.cP { background-position: -425px 0px; }
.splitflap .character span.cQ { background-position: -450px 0px; }
.splitflap .character span.cR { background-position: -475px 0px; }
.splitflap .character span.cS { background-position: -500px 0px; }
.splitflap .character span.cT { background-position: -525px 0px; }
.splitflap .character span.cU { background-position: -550px 0px; }
.splitflap .character span.cV { background-position: -575px 0px; }
.splitflap .character span.cW { background-position: -600px 0px; }
.splitflap .character span.cX { background-position: -625px 0px; }
.splitflap .character span.cY { background-position: -650px 0px; }
.splitflap .character span.cZ { background-position: -675px 0px; } /* Z */
.splitflap .character span.cper { background-position: -950px 0px; } /* . */
.splitflap .character span.ccom { background-position: -975px 0px; } /* , */