1html {
  2  -webkit-touch-callout: none;
  3  -webkit-user-select: none;
  4  -khtml-user-select: none;
  5  -moz-user-select: none;
  6  -ms-user-select: none;
  7  user-select: none;
  8}
  9
 10body {
 11	margin: 0px;
 12	overflow: hidden;
 13}
 14
 15.nav {
 16  border-bottom: 1px solid #ccc;
 17  height: 50px;
 18  padding-top: 10px;
 19  padding-bottom: 10px;
 20  position: absolute;
 21  width: 100%;
 22  z-index: 99;
 23  background: #ffffff;
 24}
 25
 26.draw {
 27  height: 100%;
 28  width: 100%;
 29  position: absolute;
 30}
 31
 32.collapse {
 33  text-align: center;
 34}
 35
 36.showcolor {
 37  color: #E32818;
 38}
 39
 40.hud {
 41  width: 560px;
 42  height: 42px;
 43  display: none;
 44  position: absolute;
 45  margin-top: 6px;
 46}
 47
 48.hud .content {
 49  width: 100%;
 50  height: 100%;
 51  position: absolute;
 52  top: 0px;
 53  left: 0px;
 54  z-index: 999;
 55  padding-left: 2px;
 56  padding-right: 2px;
 57}
 58
 59.hud .cap-left {
 60  float: left;
 61  border-right: 12px solid #fff;
 62  border-top: 20px solid transparent;
 63  border-bottom: 20px solid transparent;
 64  z-index: 888;
 65  opacity: 0.6;
 66}
 67
 68.hud .center {
 69  float: left;
 70  width: 200px;
 71  height: 42px;
 72  background-color: #fff;
 73  z-index: 888;
 74  opacity: 0.6;
 75}
 76
 77.hud .cap-right {
 78  float: left;
 79  border-left: 12px solid #fff;
 80  border-top: 20px solid transparent;
 81  border-bottom: 20px solid transparent;
 82  z-index: 888;
 83  opacity: 0.6;
 84}
 85
 86.hexsvg {
 87  margin-top:3px;
 88  margin-bottom:3px;
 89  margin-left:2px;
 90  margin-right:2px;
 91}
 92
 93
 94/*SVG button stuff*/
 95.hexsvg.button {
 96  cursor: pointer;
 97}
 98/*REGULAR*/
 99.hexsvg.button .shape {
100  fill: #fff;
101  opacity: 0.8;
102}
103.hexsvg.button .drop {
104  fill: #333;
105  opacity: 0.2;
106}
107
108.hexsvg.button .icon {
109  fill: #333333;
110  opacity: 0.4;
111}
112
113/*HOVER*/
114.hexsvg.button:hover .shape {
115  fill: #fff;
116  opacity: 1;
117}
118.hexsvg.button:hover .drop {
119  fill: #333;
120  opacity: 0.4;
121}
122
123.hexsvg.button:hover .icon {
124  fill: #333;
125  opacity: 0.4;
126}
127
128/*ACTIVE*/
129.hexsvg.button.active .shape {
130  fill: #fff;
131  opacity: 1;
132}
133.hexsvg.button.active .drop {
134  fill: #333;
135  opacity: 0.65;
136}
137
138.hexsvg.button.active .icon {
139  fill: #333;
140  opacity: 0.65;
141}
142
143/*COLOR PICKER*/
144.hexsvg.color {
145  fill: #E32818;
146  cursor: pointer;
147}
148
149.hexsvg.color .drop {
150  fill: #E32818;
151  opacity: 0.2;
152  cursor: pointer;
153}
154
155.hexsvg .icon {
156  font-size: 16px;
157  font-weight: 400;
158  font-family: Helvetica, sans-serif;
159  color: #333;
160}
161
162.hexsvg .save {
163  font-size: 10px;
164  font-weight: 400;
165  font-family: Helvetica, sans-serif;
166  color: #333;
167}
168
169.hexsvg .load {
170  font-size: 10px;
171  font-weight: 400;
172  font-family: Helvetica, sans-serif;
173  color: #333;
174}
175
176.hexsvg .new {
177  font-size: 10px;
178  font-weight: 400;
179  font-family: Helvetica, sans-serif;
180  color: #333;
181}
182
183.hexcount {
184  font-family: 'Helvetica Neue', Helvetica Neue, 'Istok Web', Helvetica, sans-serif;
185  font-size: 26px;
186  font-weight: 100;
187  position:relative;
188  top: 3px;
189  margin-left: 10px;
190  width: 120px;
191  display: inline;
192}
193
194.gap {
195  width: 12px;
196  height: 100%;
197  display: inline;
198}
199
200.modal h1, .modal h2, .modal h3, .modal h4 {
201  font-weight: 100;
202}
203
204.modal .tool-explain {
205  padding-bottom:10px;
206  display: inline;
207  width: 200px;
208  height: 20px;
209  float: left;
210}
211
212.load .date, .load .loadme {
213  font-size: 18px;
214  font-weight: 100;
215}
216
217.load .how-many {
218  font-size: 22px;
219  font-weight: 100;
220}
221
222
223