/documentation/css/docs.css

  1body {
  2  font-size: 14px;
  3  line-height: 21px;
  4  color: #333;
  5  background: #f6f6f6 url(../images/background.png);
  6  font-family: "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
  7}
  8.container {
  9  width: 950px;
 10  margin: 0;
 11  padding: 80px 0px 50px 50px;
 12  clear: both;
 13}
 14p, li {
 15  width: 625px;
 16}
 17a {
 18  color: #191933;
 19}
 20h1, h2, h3, h4, h5, h6, b.header {
 21  font-size: 18px;
 22  color: #000;
 23  margin-top: 40px;
 24  margin-bottom: 15px;
 25  text-shadow: #fff 0 1px 1px;
 26}
 27br.clear {
 28  height: 0;
 29  clear: both;
 30}
 31ul {
 32  padding-left: 20px;
 33}
 34b.header {
 35  display: block;
 36}
 37li {
 38  margin-bottom: 10px;
 39}
 40table {
 41  margin: 16px 0 0 13px; padding: 0;
 42  width: 625px;
 43}
 44  tr, td {
 45    margin: 0; padding: 0;
 46  }
 47    td {
 48      padding: 9px 15px 9px 0;
 49      vertical-align: top;
 50    }
 51table.definitions {
 52  width: auto;
 53  margin: 30px 0;
 54  border-left: 5px solid rgba(0,0,0,0.2);;
 55}
 56  table.definitions td {
 57    text-align: center;
 58    padding: 5px 20px;
 59  }
 60code, pre, textarea {
 61  font-family: Monaco, Consolas, "Lucida Console", monospace;
 62  font-size: 12px;
 63  line-height: 18px;
 64  color: #155;
 65  white-space: pre-wrap;
 66  word-wrap: break-word;
 67}
 68  p > code, li > code {
 69    display: inline-block;
 70    background: #fff;
 71    border: 1px solid #dedede;
 72    padding: 0px 0.2em;
 73  }
 74  pre {
 75    border-left: 5px solid rgba(0,0,0,0.2);
 76    padding: 3px 0 3px 12px;
 77    font-size: 12px;
 78  }
 79    pre.no_bar {
 80      border-left: 0;
 81      margin-left: 0;
 82      padding-left: 0;
 83    }
 84.timestamp {
 85  font-size: 11px;
 86  font-weight: normal;
 87  text-transform: uppercase;
 88}
 89div.anchor {
 90  position: relative;
 91  top: -90px;
 92  margin: 0 0 -20px;
 93}
 94div.code {
 95  position: relative;
 96  background: #fff;
 97  border: 1px solid #d8d8d8;
 98  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.23);
 99  -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.23);
100  box-shadow: 0px 0px 4px rgba(0,0,0,0.23);
101  zoom: 1;
102}
103  div.code .minibutton {
104    text-transform: none;
105    position: absolute;
106    right: 8px; bottom: 8px;
107  }
108  div.code .load {
109    left: 8px; right: auto;
110  }
111  div.code pre, div.code textarea {
112    float: left;
113    width: 450px;
114    background: #fff;
115    border: 1px dotted #d0d0d0;
116    border-top-width: 0;
117    border-bottom-width: 0;
118    border-right-width: 0;
119    margin: 0 3px 15px 3px;
120    padding: 10px 0 0 12px;
121  }
122    div.code pre:first-child {
123      border-left: 0;
124    }
125
126#fadeout {
127  z-index: 50;
128  position: fixed;
129  left: 0; top: 0; right: 0;
130  height: 100px;
131  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 255)), to(rgba(255, 255, 255, 0)));
132  background: -moz-linear-gradient(top, rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
133}
134
135#flybar {
136  position: fixed;
137  z-index: 100;
138  height: 50px;
139  min-width: 490px;
140  left: 40px; right: 40px; top: 25px;
141  background: #eee;
142  background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#dadada));
143  background: -moz-linear-gradient(top, #f8f8f8, #dadada);
144  border: 1px solid #aaa;
145  border-top: 1px solid #bbb;
146  border-bottom: 1px solid #888;
147  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
148  -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.1);
149  -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.1);
150  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
151}
152  #logo {
153    display: block;
154    outline: none;
155    float: left;
156    width: 242px;
157    margin-left: 10px;
158  }
159    #logo img {
160      margin: 5px 0 0 3px;
161    }
162  .navigation {
163    height: 50px;
164    font-size: 11px;
165    line-height: 50px;
166    text-transform: uppercase;
167    position: relative;
168    float: left;
169    padding: 0 20px;
170    border: 1px solid #aaa;
171    border-top: 0; border-bottom: 0; border-left-width: 0;
172    cursor: pointer;
173  }
174    .navigation.toc {
175      border-left-width: 1px;
176    }
177    .navigation:hover,
178    .navigation.active {
179      background: #eee;
180      background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f8f8f8));
181      background: -moz-linear-gradient(top, #eee, #f8f8f8);
182    }
183      .navigation.active {
184        height: 51px;
185        color: #000;
186        background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#fff));
187        background: -moz-linear-gradient(top, #e5e5e5, #fff);
188      }
189    .navigation .button {
190      font-weight: bold;
191    }
192      .navigation .button::selection {
193        background: transparent;
194      }
195    .navigation .contents {
196      display: none;
197      position: absolute;
198      background: #fff;
199      opacity: 0.97;
200      top: 51px; left: 0;
201      padding: 5px 0;
202      margin-left: -1px;
203      border: 1px solid #aaa;
204      -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
205      -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
206      -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.2);
207      box-shadow: 0 3px 5px rgba(0,0,0,0.2);
208    }
209      .navigation .contents a {
210        display: block;
211        width: 290px;
212        text-transform: none;
213        text-decoration: none;
214        height: 12px;
215        line-height: 12px;
216        padding: 4px 10px;
217        border: 1px solid transparent;
218        border-left: 0; border-right: 0;
219      }
220        .navigation .contents a:hover {
221          border-color: #ddd;
222          background: #eee;
223        }
224      .navigation.active .contents {
225        display: block;
226      }
227      .navigation .contents.menu {
228        z-index: 100;
229        border-top: 0;
230        -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0;
231        -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0;
232      }
233      .navigation .contents.repl_wrapper {
234        padding: 0;
235        position: fixed;
236        width: auto; height: auto;
237        left: 40px; top: 90px; right: 40px; bottom: 30px;
238        background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eaeaea));
239      }
240        .navigation .repl_bridge {
241          position: absolute;
242          height: 12px;
243          left: -1px; right: -1px;
244          bottom: -14px;
245          border: 1px solid #aaa;
246          z-index: 5;
247          background: #fff;
248          display: none;
249          border-top-color: #fff; border-bottom-color: #fff;
250        }
251          .navigation.active .repl_bridge {
252            display: block;
253          }
254        .navigation .code .minibutton {
255          top: 10px; right: 10px;
256          width: 40px;
257          text-transform: none;
258        }
259          .navigation .code a.minibutton.permalink {
260            top: 38px;
261            display: block;
262          }
263
264.bookmark {
265  display: block;
266  width: 0; height: 0;
267  position: relative;
268  top: -90px;
269}
270
271.navigation .contents.repl_wrapper .code {
272  cursor: text;
273  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
274  background: #181a3a url(../images/banding.png);
275  border: 2px solid #555;
276  padding: 0;
277  position: absolute;
278  top: 15px; left: 15px; right: 15px; bottom: 15px;
279}
280  .repl_wrapper .screenshadow {
281    position: absolute;
282    width: 200px; height: 150px;
283    background: url(../images/screenshadow.png?2);
284  }
285    .repl_wrapper .screenshadow.tl {
286      top: 0; left: 0;
287      background-position: 0 0;
288    }
289    .repl_wrapper .screenshadow.tr {
290      top: 0; right: 0;
291      background-position: -200px 0;
292    }
293    .repl_wrapper .screenshadow.bl {
294      bottom: 0; left: 0;
295      background-position: 0 -150px;
296    }
297    .repl_wrapper .screenshadow.br {
298      bottom: 0; right: 0;
299      background-position: -200px -150px;
300    }
301
302#repl_source, #repl_results {
303  background: transparent;
304  outline: none;
305  margin: 5px 0 20px;
306  color: #def;
307}
308  #repl_results, #repl_source_wrap {
309    width: auto; height: auto;
310    position: absolute;
311    margin-bottom: 0;
312    top: 10px; left: 10px; right: 10px; bottom: 15px;
313  }
314    #repl_results.error {
315      color: red
316    }
317    #repl_source_wrap {
318      margin-left: 5px;
319      width: 47%; right: 50%;
320      float: left;
321    }
322      #repl_source {
323        padding-left: 5px;
324        width: 100%;
325        height: 100%;
326        border: 0;
327        overflow-y: auto;
328        resize: none;
329      }
330    #repl_results_wrap {
331      white-space: pre;
332    }
333      #repl_results {
334        text-transform: none;
335        overflow-y: auto;
336        left: 50%;
337        border-left-color: #555;
338      }
339
340/*----------------------------- Mini Buttons ---------------------------------*/
341.minibutton {
342  cursor: pointer;
343  color: #333;
344  text-shadow: #eee 0 1px 1px;
345  font-weight: bold;
346  font-size: 11px;
347  line-height: 11px;
348  padding: 5px 10px 6px;
349  height: 11px;
350  text-align: center;
351  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
352  box-shadow: 0 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
353  border: 1px solid #b2b2b2; border-top-color: #c9c9c9; border-bottom-color: #9a9a9a;
354  background: url(../images/button_bg.png) repeat-x left top;
355}
356  .minibutton:active {
357    border-color: #aaa;
358    box-shadow: 0 1px 2px #e4e4e4; -webkit-box-shadow: 0 1px 2px #e4e4e4; -moz-box-shadow: 0 1px 2px #e4e4e4;
359  }
360  .minibutton::selection {
361    background: transparent;
362  }
363  .minibutton ::-moz-selection {
364    background: transparent;
365  }
366  .minibutton.ok {
367    color: #fff;
368    background-image: url(../images/button_bg_green.gif);
369    border-color: #4ba47c; border-top-color: #53b388; border-bottom-color: #459671;
370    text-shadow: #aaa 0 -1px 0;
371  }
372  .minibutton.dark {
373    border: 0;
374    color: #fff;
375    box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
376    background-image: url(../images/button_bg_dark.gif);
377    text-shadow: none;
378  }
379  .minibutton.error {
380     opacity: 0.5;
381     color: #600;
382     cursor: not-allowed;
383  }
384
385@media (max-width: 820px) {
386  .container {
387    width: auto;
388    padding: 1em;
389  }
390  p, li, table {
391    width: auto;
392  }
393  #fadeout {
394    display: none;
395  }
396  #flybar {
397    position: static;
398    height: auto;
399    min-width: 245px;
400  }
401    #logo {
402      float: none;
403    }
404    .navigation {
405      float: none;
406      border: none;
407    }
408  div.code pre, div.code textarea {
409    border-left: none;
410    border-top-width: 1px;
411    width: auto;
412    float: none;
413  }
414    div.code pre:first-child {
415      border-top: none;
416    }
417}