1
body {
2
    overflow: hidden;
3
    font-family: "Ubuntu sans", Arial, sans-serif;
4
    font-size: 14px;
5
    color: #ddd;
6
    line-height: 1em;
7
    background: #1e1e1e;
8
}
9

10
#panel-center {
11
    margin: 0;
12
    position: absolute;
13
    z-index: 20;
14
    top: 0;
15
    bottom: 0;
16
    left: 200px;
17
    right: 400px;
18
}
19

20
#panel-left {
21
    margin: 0;
22
    position: absolute;
23
    z-index: 10;
24
    top: 0;
25
    bottom: 0;
26
    left: 0;
27
    width: 200px;
28

29
    background: #191919;
30
}
31

32
#panel-right {
33
    margin: 0;
34
    position: absolute;
35
    z-index: 30;
36
    top: 0;
37
    bottom: 0;
38
    right: 0;
39
    width: 400px;
40

41
    background: #191919;
42
}
43

44
#editor { 
45
    margin: 0;
46
    position: absolute;
47
    top: 0;
48
    bottom: 50%;
49
    left: 0;
50
    right: 0;
51
    z-index: 100;
52
}
53

54
#diagram { 
55
    margin: 0;
56
    position: absolute;
57
    bottom: 0;
58
    top: 50%;
59
    left: 0;
60
    right: 0;
61
    z-index: 200;
62
}
63

64
#editor-separator, #preview-separator {
65
    margin: 0;
66
    position: absolute;
67
    top: 50%;
68
    left: 0;
69
    right: 0;
70
    height: 3px;
71
    z-index: 300;
72
    background: #191919;
73
    border-top: 1px solid #292929;
74
    border-bottom: 1px solid #292929;
75
}
76
#preview-separator {
77
    z-index: 400;
78
    left: 3px;
79
}
80

81
#left-separator {
82
    margin: 0;
83
    position: absolute;
84
    top: 0;
85
    bottom: 0;
86
    right: 0;
87
    width: 3px;
88
    z-index: 300;
89
    background: #191919;
90
}
91

92
#right-separator {
93
    margin: 0;
94
    position: absolute;
95
    top: 0;
96
    bottom: 0;
97
    left: 0;
98
    width: 3px;
99
    z-index: 300;
100
    background: #191919;
101
}
102

103
#preview {
104
    margin: 0;
105
    position: absolute;
106
    top: 0;
107
    bottom: 50%;
108
    left: 3px;
109
    width: 396px;
110

111
    background: #1e1e1e;    
112
    border-left: 1px solid #292929;
113
    z-index: 210;
114
}
115

116
#console { 
117
    margin: 0;
118
    position: absolute;
119
    bottom: 0;
120
    top: 50%;
121
    left: 0;
122
    left: 3px;
123
    width: 396px;
124
    z-index: 220;
125
    background: #1e1e1e;    
126
    border-left: 1px solid #292929;
127
}
128

129
#console-text {
130
    background: transparent;
131
    border: none;
132
    width: 100%;
133
    height: 100%;
134
    color: #666;
135
    text-shadow: 0px 1px 1px #000000;
136
    filter: dropshadow(color=#000000, offx=0, offy=1);
137
    padding: 6px;
138
    outline: none;
139
    overflow: hidden;
140
    scroll: none;
141
}
142

143
#preview canvas {
144
    background: #161616;
145
}
146

147
#modules { 
148
    margin: 0;
149
    position: absolute;
150
    top: 0;
151
    bottom: 0;
152
    left: 0;
153
    width: 196px;
154

155
    font-size: 13px;
156

157
    background: #1e1e1e;
158
    border-right: 1px solid #292929;
159
}
160

161
#modules ul {
162
    -webkit-touch-callout: none;
163
    -webkit-user-select: none;
164
    -khtml-user-select: none;
165
    -moz-user-select: none;
166
    -ms-user-select: none;
167
    user-select: none;
168
    
169
    list-style: none;
170
    margin: 10px 0;
171
    padding: 0;
172
}
173

174
#modules li {
175
    list-style: none;
176
    line-height: 2.0em;
177
    padding: 0 20px;
178
    background: #1e1e1e;
179
    cursor: pointer;
180

181
    text-shadow: 0px 1px 1px #000000;
182
    filter: dropshadow(color=#000000, offx=0, offy=1);
183
}
184

185
#modules li:hover {
186
    background: #434343; /* Old browsers */
187
    background: -moz-linear-gradient(top, #888 0%, #4e4e4e 4%, #434343 96%, #1e1e1e 100%); /* FF3.6+ */
188
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(4%,#4e4e4e), color-stop(96%,#434343), color-stop(100%,#1e1e1e)); /* Chrome,Safari4+ */
189
    background: -webkit-linear-gradient(top, #888 0%, #4e4e4e 4%, #434343 96%, #1e1e1e 100%); /* Chrome10+,Safari5.1+ */
190
    background: -o-linear-gradient(top, #888 0%, #4e4e4e 4%, #434343 96%, #1e1e1e 100%); /* Opera 11.10+ */
191
    background: -ms-linear-gradient(top, #888 0%, #4e4e4e 4%, #434343 96%, #1e1e1e 100%); /* IE10+ */
192
    background: linear-gradient(to bottom, #888 0%, #4e4e4e 4%, #434343 96%, #1e1e1e 100%); /* W3C */
193

194
}
195

196
#modules li.active {
197
    background: #292929;
198
}
199

200
#render
201
{
202
    position: absolute;
203
    z-index: 9999999;
204
}
205