master
1body {
2 margin: 0;
3 font-family: Helvetica, Arial, sans-serif;
4 font-size: 16px;
5}
6pre,
7code {
8 font-family: Menlo, monospace;
9 font-size: 14px;
10}
11pre {
12 line-height: 18px;
13}
14pre .comment {
15 color: #006600;
16}
17pre .highlight,
18pre .highlight-comment,
19pre .selection-highlight,
20pre .selection-highlight-comment {
21 background: #FFFF00;
22}
23pre .selection,
24pre .selection-comment {
25 background: #FF9632;
26}
27pre .ln {
28 color: #999;
29}
30body {
31 color: #222;
32}
33a,
34.exampleHeading .text {
35 color: #375EAB;
36 text-decoration: none;
37}
38a:hover,
39.exampleHeading .text:hover {
40 text-decoration: underline;
41}
42p,
43pre,
44ul,
45ol {
46 margin: 20px;
47}
48pre {
49 background: #e9e9e9;
50 padding: 10px;
51
52 -webkit-border-radius: 5px;
53 -moz-border-radius: 5px;
54 border-radius: 5px;
55}
56
57h1,
58h2,
59h3,
60h4,
61.rootHeading {
62 margin: 20px 0;
63 padding: 0;
64 color: #375EAB;
65 font-weight: bold;
66}
67h1 {
68 font-size: 24px;
69}
70h2 {
71 font-size: 20px;
72 background: #E0EBF5;
73 padding: 2px 5px;
74}
75h3 {
76 font-size: 20px;
77}
78h3,
79h4 {
80 margin: 20px 5px;
81}
82h4 {
83 font-size: 16px;
84}
85.rootHeading {
86 font-size: 20px;
87 margin: 0;
88}
89
90dl {
91 margin: 20px;
92}
93dd {
94 margin: 2px 20px;
95}
96dl,
97dd {
98 font-size: 14px;
99}
100div#nav table td {
101 vertical-align: top;
102}
103
104table.dir th {
105 text-align: left;
106}
107table.dir td {
108 word-wrap: break-word;
109 vertical-align: top;
110}
111div#page.wide table.dir td.name {
112 white-space: nowrap;
113}
114.alert {
115 color: #AA0000;
116}
117
118div#heading {
119 float: left;
120 margin: 0 0 10px 0;
121 padding: 21px 0;
122 font-size: 20px;
123 font-weight: normal;
124}
125div#heading a {
126 color: #222;
127 text-decoration: none;
128}
129
130div#topbar {
131 background: #E0EBF5;
132 height: 64px;
133 overflow: hidden;
134}
135
136body {
137 text-align: center;
138}
139div#page {
140 width: 100%;
141}
142div#page > .container,
143div#topbar > .container {
144 text-align: left;
145 margin-left: auto;
146 margin-right: auto;
147 padding: 0 20px;
148 width: 900px;
149}
150div#page.wide > .container,
151div#topbar.wide > .container {
152 width: auto;
153}
154div#plusone {
155 float: right;
156 clear: right;
157 margin-top: 5px;
158}
159
160div#footer {
161 text-align: center;
162 color: #666;
163 font-size: 14px;
164 margin: 40px 0;
165}
166
167div#menu > a,
168div#menu > input,
169div#learn .buttons a,
170div.play .buttons a,
171div#blog .read a {
172 padding: 10px;
173
174 text-decoration: none;
175 font-size: 16px;
176
177 -webkit-border-radius: 5px;
178 -moz-border-radius: 5px;
179 border-radius: 5px;
180}
181div#playground .buttons a,
182div#menu > a,
183div#menu > input {
184 border: 1px solid #375EAB;
185}
186div#playground .buttons a,
187div#menu > a {
188 color: white;
189 background: #375EAB;
190}
191#playgroundButton.active {
192 background: white;
193 color: #375EAB;
194}
195a#start,
196div#learn .buttons a,
197div.play .buttons a,
198div#blog .read a {
199 color: #222;
200 border: 1px solid #375EAB;
201 background: #E0EBF5;
202}
203.download {
204 width: 150px;
205}
206
207div#menu {
208 float: right;
209 min-width: 590px;
210 padding: 10px 0;
211 text-align: right;
212}
213div#menu > a {
214 margin-right: 5px;
215 margin-bottom: 10px;
216
217 padding: 10px;
218}
219div#menu > input {
220 position: relative;
221 top: 1px;
222 width: 60px;
223 background: white;
224 color: #222;
225}
226div#menu > input.inactive {
227 color: #999;
228}
229
230div.left {
231 float: left;
232 clear: left;
233}
234div.right {
235 float: right;
236 clear: right;
237}
238div.left,
239div.right {
240 width: 415px;
241}
242
243div#learn,
244div#about {
245 padding-top: 20px;
246}
247div#learn h2,
248div#about {
249 margin: 0;
250}
251div#about {
252 font-size: 20px;
253}
254
255div#about {
256 height: 96px;
257}
258div#gopher {
259 background: url(/doc/gopher/frontpage.png) no-repeat;
260 background-position: center top;
261 height: 155px;
262}
263a#start {
264 display: block;
265 padding: 10px;
266
267 text-align: center;
268 text-decoration: none;
269
270 -webkit-border-radius: 5px;
271 -moz-border-radius: 5px;
272 border-radius: 5px;
273}
274a#start .big {
275 display: block;
276 font-weight: bold;
277 font-size: 20px;
278}
279a#start .desc {
280 display: block;
281 font-size: 14px;
282 font-weight: normal;
283 margin-top: 5px;
284}
285
286div#learn .popout {
287 float: right;
288 display: block;
289 cursor: pointer;
290 font-size: 12px;
291 background: url(/doc/share.png) no-repeat;
292 background-position: right top;
293 padding: 5px 27px;
294}
295div#learn pre,
296div#learn textarea {
297 padding: 0;
298 margin: 0;
299 font-family: Menlo, monospace;
300 font-size: 14px;
301}
302div#learn .input {
303 padding: 10px;
304 margin-top: 10px;
305 height: 150px;
306
307 -webkit-border-top-left-radius: 5px;
308 -webkit-border-top-right-radius: 5px;
309 -moz-border-radius-topleft: 5px;
310 -moz-border-radius-topright: 5px;
311 border-top-left-radius: 5px;
312 border-top-right-radius: 5px;
313}
314div#learn .input textarea {
315 width: 100%;
316 height: 100%;
317 border: none;
318 outline: none;
319 resize: none;
320}
321div#learn .output {
322 border-top: none !important;
323
324 padding: 10px;
325 height: 59px;
326 overflow: auto;
327
328 -webkit-border-bottom-right-radius: 5px;
329 -webkit-border-bottom-left-radius: 5px;
330 -moz-border-radius-bottomright: 5px;
331 -moz-border-radius-bottomleft: 5px;
332 border-bottom-right-radius: 5px;
333 border-bottom-left-radius: 5px;
334}
335div#learn .output pre {
336 padding: 0;
337
338 -webkit-border-radius: 0;
339 -moz-border-radius: 0;
340 border-radius: 0;
341}
342div#learn .input,
343div#learn .input textarea,
344div#learn .output,
345div#learn .output pre {
346 background: #FFFFD8;
347}
348div#learn .input,
349div#learn .output {
350 border: 1px solid #375EAB;
351}
352div#learn .buttons {
353 float: right;
354 padding: 20px 0 10px 0;
355 text-align: right;
356}
357div#learn .buttons a {
358 height: 16px;
359 margin-left: 5px;
360 padding: 10px;
361}
362div#learn .toys {
363 margin-top: 8px;
364}
365div#learn .toys select {
366 border: 1px solid #375EAB;
367 margin: 0;
368}
369div#learn .output .exit {
370 display: none;
371}
372
373div#blog,
374div#video {
375 margin-top: 40px;
376}
377div#blog > a,
378div#blog > div,
379div#blog > h2,
380div#video > a,
381div#video > div,
382div#video > h2 {
383 margin-bottom: 10px;
384}
385div#blog .title,
386div#video .title {
387 display: block;
388 font-size: 20px;
389}
390div#blog .when {
391 color: #666;
392 font-size: 14px;
393}
394div#blog .read {
395 text-align: right;
396}
397
398.toggleButton { cursor: pointer; }
399.toggle .collapsed { display: block; }
400.toggle .expanded { display: none; }
401.toggleVisible .collapsed { display: none; }
402.toggleVisible .expanded { display: block; }
403
404table.codetable { margin-left: auto; margin-right: auto; border-style: none; }
405table.codetable td { padding-right: 10px; }
406hr { border-style: none; border-top: 1px solid black; }
407
408img.gopher {
409 float: right;
410 margin-left: 10px;
411 margin-bottom: 10px;
412 z-index: -1;
413}
414.pkgGopher {
415 text-align: right;
416}
417.pkgGopher .gopher {
418 float: none;
419 position: relative;
420 top: -40px;
421 margin-bottom: -120px;
422}
423h2 { clear: right; }
424
425/* example and drop-down playground */
426div.play {
427 padding: 0 20px 40px 20px;
428}
429div.play pre,
430div.play textarea,
431div.play .lines {
432 padding: 0;
433 margin: 0;
434 font-family: Menlo, monospace;
435 font-size: 14px;
436}
437div.play .input {
438 padding: 10px;
439 margin-top: 10px;
440
441 -webkit-border-top-left-radius: 5px;
442 -webkit-border-top-right-radius: 5px;
443 -moz-border-radius-topleft: 5px;
444 -moz-border-radius-topright: 5px;
445 border-top-left-radius: 5px;
446 border-top-right-radius: 5px;
447
448 overflow: hidden;
449}
450div.play .input textarea {
451 width: 100%;
452 height: 100%;
453 border: none;
454 outline: none;
455 resize: none;
456
457 overflow: hidden;
458}
459div#playground .input textarea {
460 overflow: auto;
461 resize: auto;
462}
463div.play .output {
464 border-top: none !important;
465
466 padding: 10px;
467 max-height: 200px;
468 overflow: auto;
469
470 -webkit-border-bottom-right-radius: 5px;
471 -webkit-border-bottom-left-radius: 5px;
472 -moz-border-radius-bottomright: 5px;
473 -moz-border-radius-bottomleft: 5px;
474 border-bottom-right-radius: 5px;
475 border-bottom-left-radius: 5px;
476}
477div.play .output pre {
478 padding: 0;
479
480 -webkit-border-radius: 0;
481 -moz-border-radius: 0;
482 border-radius: 0;
483}
484div.play .input,
485div.play .input textarea,
486div.play .output,
487div.play .output pre {
488 background: #FFFFD8;
489}
490div.play .input,
491div.play .output {
492 border: 1px solid #375EAB;
493}
494div.play .buttons {
495 float: right;
496 padding: 20px 0 10px 0;
497 text-align: right;
498}
499div.play .buttons a {
500 height: 16px;
501 margin-left: 5px;
502 padding: 10px;
503 cursor: pointer;
504}
505.output .stderr {
506 color: #933;
507}
508.output .system {
509 color: #999;
510}
511
512/* drop-down playground */
513#playgroundButton,
514div#playground {
515 /* start hidden; revealed by javascript */
516 display: none;
517}
518div#playground {
519 position: absolute;
520 top: 63px;
521 right: 20px;
522 padding: 0 10px 10px 10px;
523 z-index: 1;
524 text-align: left;
525 background: #E0EBF5;
526
527 border: 1px solid #B0BBC5;
528 border-top: none;
529
530 -webkit-border-bottom-left-radius: 5px;
531 -webkit-border-bottom-right-radius: 5px;
532 -moz-border-radius-bottomleft: 5px;
533 -moz-border-radius-bottomright: 5px;
534 border-bottom-left-radius: 5px;
535 border-bottom-right-radius: 5px;
536}
537div#playground .code {
538 width: 520px;
539 height: 200px;
540}
541div#playground .output {
542 height: 100px;
543}
544
545/* Inline runnable snippets (play.js/initPlayground) */
546#content .code pre, #content .playground pre, #content .output pre {
547 margin: 0;
548 padding: 0;
549 background: none;
550 border: none;
551 outline: 0px solid transparent;
552 overflow: auto;
553}
554#content .playground .number, #content .code .number {
555 color: #999;
556}
557#content .code, #content .playground, #content .output {
558 width: auto;
559 margin: 20px;
560 padding: 10px;
561 -webkit-border-radius: 5px;
562 -moz-border-radius: 5px;
563 border-radius: 5px;
564}
565#content .code, #content .playground {
566 background: #e9e9e9;
567}
568#content .output {
569 background: #202020;
570}
571#content .output .stdout, #content .output pre {
572 color: #e6e6e6;
573}
574#content .output .stderr, #content .output .error {
575 color: rgb(244, 74, 63);
576}
577#content .output .system, #content .output .exit {
578 color: rgb(255, 209, 77)
579}
580#content .buttons {
581 position: relative;
582 float: right;
583 top: -50px;
584 right: 30px;
585}
586#content .output .buttons {
587 top: -60px;
588 right: 0;
589 height: 0;
590}
591#content .buttons .kill {
592 display: none;
593 visibility: hidden;
594}
595a.error {
596 font-weight: bold;
597 color: white;
598 background-color: darkred;
599 border-bottom-left-radius: 4px;
600 border-bottom-right-radius: 4px;
601 border-top-left-radius: 4px;
602 border-top-right-radius: 4px;
603 padding: 2px 4px 2px 4px; /* TRBL */
604}