1/* SKINS */
2.alo{{{cns}}} {
3    border-radius: 10px;
4}
5
6.alo-0600{{{cns}}} {
7    background-image: url(/resources/background.png{{{ns}}});
8    background-position: center center;
9    background-repeat: no-repeat;
10    height: 205px;
11    position: relative;
12    width: 560px;
13}
14
15
16/* THE AUTHOR */
17.alo{{{cns}}} .mod-plugin-brand h1 {
18    color: #3c3;
19    font-size: 18px;
20    font-weight: bold;
21    left: 80px;
22    line-height: 1;
23    margin: 0;
24    position: absolute;
25    top: 23px;
26}
27
28/* PLUGIN'S NAME */
29.alo{{{cns}}} .mod-plugin-name h1 {
30    color: #3c3;
31    font-size: 24px;
32    font-weight: bold;
33    line-height: 1;
34    margin: 0;
35    position: absolute;
36    right: 80px;
37    top: 23px;
38}
39
40/* CONTROLS */
41.alo{{{cns}}} .mod-control-group {
42    padding: 5px;
43    border-color: #000;
44    border-style: solid;
45	border-radius: 12px;
46    border-width: 1px 1px 1px 1px;
47    bottom: 149px;
48    color: #fff;
49    font-size: 10px;
50    font-weight: bold;
51    height: 80px;
52    left: 40px;
53    position: absolute;
54    right: 40px;
55    top: 47px;
56}
57
58.alo{{{cns}}} .mod-control-group > div {
59    margin-right: 2px;
60    margin-left: 2px;
61}
62
63.alo{{{cns}}} .mod-pedal-input,
64.alo{{{cns}}} .mod-pedal-output {
65    top: 4px;
66}
67
68/* SWITCH ON/OFF GENERAL */
69.alo{{{cns}}} .mod-switch {
70    cursor: pointer;
71    float: right;
72    height: 71px;
73    position: relative;
74}
75
76.alo{{{cns}}} .mod-switch-image {
77    background-image: url(/resources/switch-001.png{{{ns}}});
78    background-position: -9px 0px;
79    background-repeat: no-repeat;
80    background-size: auto 71px;
81    height: 71px;
82    width: 61px;
83}
84
85.alo{{{cns}}} .mod-switch-image.on {
86    background-position: -80px 0px;
87}
88
89.alo{{{cns}}} .mod-switch-image.off {
90    background-position: -9px 0px;
91}
92
93/* GREEN LIGHT */
94.alo{{{cns}}} .mod-green-light {
95    float: left;
96    height: 71px;
97    overflow: hidden;
98    position: relative;
99    text-align: center;
100    width: 74px;
101}
102
103.alo{{{cns}}} .mod-green-light .mod-green-light-image {
104    background-image: url(/resources/greenlight.png{{{ns}}});
105    background-position: left 0px;
106    background-repeat: no-repeat;
107    background-size: auto 71px;
108    height: 71px;
109    margin-top: 3px;
110    position: relative;
111    width: 71px;
112    z-index: 2;
113}
114
115.alo{{{cns}}} .mod-green-light .mod-black-light-image {
116    background-image: url(/resources/blacklight.png{{{ns}}});
117    background-position: left 0px;
118    background-repeat: no-repeat;
119    background-size: auto 71px;
120    height: 71px;
121    margin-top: 3px;
122    position: relative;
123    width: 71px;
124    z-index: 2;
125}
126
127.alo{{{cns}}} .mod-green-light .mod-green-light-title {
128    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
129    font-size: 10px;
130    font-weight: bold;
131    height:18px;
132    left: 0;
133    overflow:hidden;
134    position: absolute;
135    right: 0;
136    text-transform: uppercase;
137    top: 0;
138    z-index: 1;
139}
140
141/* KNOBS */
142.alo{{{cns}}} .mod-control-group .mod-knob {
143    display:inline-block;
144    float: left;
145    height:50px;
146    margin-top: 10px;
147    position:relative;
148}
149.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-image-wrapper {
150    padding: 1px;
151}
152.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-image {
153    background-image: url(/resources/knob.png{{{ns}}});
154    background-position: left center;
155    background-repeat: no-repeat;
156    background-size: auto 44px;
157    height: 44px;
158    position: relative;
159    overflow: hidden;
160    width: 44px;
161}
162.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-value {
163    border-radius: 0 0 8px 8px;
164    color: #fff;
165    font-size: 22px;
166    font-weight: bold;
167    text-align: center;
168}
169
170.alo{{{cns}}} .mod-control-group .mod-knob .mod-knob-title {
171    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
172    color: #fff;
173    font-size: 12px;
174    font-weight: bold;
175    height:18px;
176    text-align: center;
177}
178
179/* ENUMERATED LIST */
180.alo{{{cns}}} .mod-enumerated {
181    color:#fff;
182    display:inline-block;
183    left:132px;
184    overflow:hidden;
185    position:absolute;
186    top:-27px;
187    width:240px;
188}
189
190.alo{{{cns}}} .mod-enumerated .mod-enumerated-selected {
191    background-color:rgba(0,0,0,.8);
192    background-image:url(/resources/utils/dropdown-arrow-white.png{{{ns}}});
193    background-position:right center;
194    background-repeat:no-repeat;
195    border-radius:4px;
196    box-shadow:inset 1px 1px 5px #000;
197    color:#fff;
198    font-size:12px;
199    height:24px;
200    line-height:2;
201    margin-right:8px;
202    overflow:hidden;
203    padding:0 9px;
204}
205
206/* WHEN IS HOVER */
207.alo{{{cns}}} .mod-enumerated:hover .mod-enumerated-selected {
208    border-radius:4px 4px 0 0;
209}
210
211/* THE LIST OF OPTIONS */
212.alo{{{cns}}} .mod-enumerated .mod-enumerated-list {
213    display:none;
214    font-weight:bold;
215}
216
217.alo{{{cns}}} .mod-enumerated .mod-enumerated-list > div {
218    padding:3px 9px;
219}
220
221.alo{{{cns}}} .mod-enumerated .mod-enumerated-list > div:hover {
222    background:rgba(255,255,255,.2);
223    cursor:pointer;
224}
225
226/* WHEN THE LIST IS SHOWING */
227.alo{{{cns}}} .mod-enumerated .mod-enumerated-list {
228    background:rgba(0,0,0,.9);
229    display:none;
230    height:85px;
231    overflow:auto;
232    position:relative;
233    width:232px;
234    z-index:3;
235}
236
237
238/* SEPARATOR */
239.alo{{{cns}}} .mod-separator {
240    background: #000;
241    display: inline-block;
242    float: left;
243    height: 69px;
244    margin-top: 2px;
245	margin-right: 10px;
246	margin-left: 10px;
247    width: 1px;
248}
249