style.css 15 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033
  1. .container-body {
  2. width: 100%;
  3. overflow:hidden;
  4. }
  5. a > img {
  6. max-height:70%;
  7. float:left;
  8. padding-left:22px;
  9. padding-top:8px;
  10. }
  11. body {
  12. margin: 0;
  13. font-family: HelveticaNeueBold,Helvetica,Helvetica,Arial,sans-serif;
  14. font-size: 16px;
  15. background-color: #fff;
  16. line-height: 1.3em;
  17. }
  18. pre,
  19. code {
  20. font-family: Menlo, monospace;
  21. font-size: 14px;
  22. }
  23. pre {
  24. line-height: 1.4em;
  25. overflow-x: auto;
  26. }
  27. pre .comment {
  28. color: #006600;
  29. }
  30. pre .highlight,
  31. pre .highlight-comment,
  32. pre .selection-highlight,
  33. pre .selection-highlight-comment {
  34. background: #FFFF00;
  35. }
  36. pre .selection,
  37. pre .selection-comment {
  38. background: #FF9632;
  39. }
  40. pre .ln {
  41. color: #999;
  42. }
  43. body {
  44. color: #222;
  45. }
  46. a,
  47. .exampleHeading .text {
  48. color: #375EAB;
  49. text-decoration: none;
  50. }
  51. a:hover,
  52. .exampleHeading .text:hover {
  53. text-decoration: underline;
  54. }
  55. p, li {
  56. max-width: 800px;
  57. word-wrap: break-word;
  58. }
  59. p,
  60. pre,
  61. ul,
  62. ol {
  63. display: inherit;
  64. margin: 20px;
  65. }
  66. .packages {
  67. margin: 0px;
  68. text-align: left;
  69. width: 100%;
  70. }
  71. pre {
  72. background: #EFEFEF;
  73. padding: 10px;
  74. -webkit-border-radius: 5px;
  75. -moz-border-radius: 5px;
  76. border-radius: 5px;
  77. }
  78. .title {
  79. font-family: HelveticaNeueBold,Helvetica,Helvetica,Arial,sans-serif;
  80. text-shadow: rgba(0,0,0,0.8) 0 -1px 0;
  81. color: #fff;
  82. -webkit-font-smoothing: antialiased;
  83. margin:20px;
  84. display:inherit;
  85. }
  86. h1,
  87. h2,
  88. h3,
  89. h4,
  90. .rootHeading {
  91. margin: 20px 0 20px;
  92. padding: 0;
  93. color: #375EAB;
  94. font-weight: bold;
  95. }
  96. h1 {
  97. font-size: 28px;
  98. line-height: 1;
  99. }
  100. h2 {
  101. font-size: 20px;
  102. background: #E0EBF5;
  103. padding: 8px;
  104. line-height: 1.25;
  105. font-weight: normal;
  106. }
  107. h2 a {
  108. font-weight: bold;
  109. }
  110. h3 {
  111. font-size: 20px;
  112. }
  113. h3,
  114. h4 {
  115. margin: 20px 5px;
  116. }
  117. h4 {
  118. font-size: 16px;
  119. }
  120. .rootHeading {
  121. font-size: 20px;
  122. margin: 0;
  123. }
  124. dl {
  125. margin: 20px;
  126. }
  127. dd {
  128. margin: 0 0 0 20px;
  129. }
  130. dl,
  131. dd {
  132. font-size: 14px;
  133. }
  134. div#nav table td {
  135. vertical-align: top;
  136. }
  137. div#mobile_container {
  138. display:inline-block;
  139. font-size: 15px;
  140. margin-left:auto;
  141. margin-right:auto;
  142. line-height:100%;
  143. }
  144. div#mobile-nav {
  145. display:none;
  146. }
  147. div#logo_container {
  148. height:100%;
  149. display:table-cell;
  150. float:left;
  151. vertical-align:middle;
  152. }
  153. div#mobile_only {
  154. display:none;
  155. }
  156. div#fixed {
  157. position: fixed;
  158. width: 100%;
  159. height: 100%;
  160. }
  161. div .top_link {
  162. float:right;
  163. overflow:auto;
  164. display:inline;
  165. padding-top:2px;
  166. }
  167. .pkg-dir {
  168. width: 20%;
  169. max-width:400px;
  170. min-width:325px;
  171. height: calc(100% - 64px);
  172. position: relative;
  173. background: #F6F6F6;
  174. overflow:hidden;
  175. float: left;
  176. display: inline-block;
  177. box-sizing: border-box;
  178. border-top-style:hidden;
  179. border-left-style:hidden;
  180. border-bottom-style:hidden;
  181. }
  182. .pkg-dir table {
  183. border-collapse: collapse;
  184. border-spacing: 0;
  185. }
  186. .pkg-name {
  187. padding-right: 20px;
  188. }
  189. .alert {
  190. color: #AA0000;
  191. }
  192. .top-heading {
  193. float: left;
  194. padding: 21px 0;
  195. font-size: 20px;
  196. font-weight: normal;
  197. }
  198. .top-heading a {
  199. color: #222;
  200. text-decoration: none;
  201. }
  202. div#topbar {
  203. background: #444;
  204. height: 64px;
  205. overflow: hidden;
  206. position: relative;
  207. }
  208. div#page {
  209. box-sizing: border-box;
  210. height:calc(100% - 64px);
  211. overflow:auto;
  212. }
  213. div#page > .container,
  214. div#topbar > .container {
  215. text-align: left;
  216. padding: 0 20px;
  217. }
  218. div#topbar > .container,
  219. div#page > .container {
  220. }
  221. div#page.wide > .container,
  222. div#topbar.wide > .container {
  223. }
  224. div#plusone {
  225. float: right;
  226. clear: right;
  227. margin-top: 5px;
  228. }
  229. div#footer {
  230. text-align: center;
  231. color: #666;
  232. font-size: 14px;
  233. margin: 40px 0;
  234. }
  235. div#menu > a,
  236. div#menu > input,
  237. div#learn .buttons a,
  238. div.play .buttons a,
  239. div#blog .read a,
  240. #menu-button {
  241. padding: 10px;
  242. text-decoration: none;
  243. font-size: 16px;
  244. -webkit-border-radius: 5px;
  245. -moz-border-radius: 5px;
  246. border-radius: 5px;
  247. }
  248. div#playground .buttons a,
  249. div#menu > a,
  250. div#menu > input,
  251. #menu-button {
  252. border: 1px solid #375EAB;
  253. }
  254. div#playground .buttons a,
  255. div#menu > a,
  256. #menu-button {
  257. color: white;
  258. background: #375EAB;
  259. }
  260. #playgroundButton.active {
  261. background: white;
  262. color: #375EAB;
  263. }
  264. a#start,
  265. div#learn .buttons a,
  266. div.play .buttons a,
  267. div#blog .read a {
  268. color: #222;
  269. border: 1px solid #375EAB;
  270. background: #E0EBF5;
  271. }
  272. .download {
  273. width: 150px;
  274. }
  275. div#menu {
  276. display: inline;
  277. float: right;
  278. padding: 10px;
  279. white-space: nowrap;
  280. }
  281. div#menu.menu-visible {
  282. max-height: 500px;
  283. }
  284. div#menu > a,
  285. #menu-button {
  286. margin: 10px 2px;
  287. padding: 10px;
  288. }
  289. div#menu > input {
  290. position: relative;
  291. top: 1px;
  292. width: 140px;
  293. background: white;
  294. color: #222;
  295. box-sizing: border-box;
  296. }
  297. div#menu > input.inactive {
  298. color: #999;
  299. }
  300. #menu-button {
  301. display: none;
  302. position: absolute;
  303. right: 5px;
  304. top: 0;
  305. margin-right: 5px;
  306. }
  307. #menu-button-arrow {
  308. display: inline-block;
  309. }
  310. .vertical-flip {
  311. transform: rotate(-180deg);
  312. }
  313. div.left {
  314. float: left;
  315. clear: left;
  316. margin-right: 2.5%;
  317. }
  318. div.right {
  319. float: right;
  320. clear: right;
  321. margin-left: 2.5%;
  322. }
  323. div.left,
  324. div.right {
  325. width: 45%;
  326. }
  327. div#learn,
  328. div#about {
  329. padding-top: 20px;
  330. }
  331. div#learn h2,
  332. div#about {
  333. margin: 0;
  334. }
  335. div#about {
  336. font-size: 20px;
  337. margin: 0 auto 30px;
  338. }
  339. div#gopher {
  340. background: url(/doc/gopher/frontpage.png) no-repeat;
  341. background-position: center top;
  342. height: 155px;
  343. }
  344. a#start {
  345. display: block;
  346. padding: 10px;
  347. text-align: center;
  348. text-decoration: none;
  349. -webkit-border-radius: 5px;
  350. -moz-border-radius: 5px;
  351. border-radius: 5px;
  352. }
  353. a#start .big {
  354. display: block;
  355. font-weight: bold;
  356. font-size: 20px;
  357. }
  358. a#start .desc {
  359. display: block;
  360. font-size: 14px;
  361. font-weight: normal;
  362. margin-top: 5px;
  363. }
  364. div#learn .popout {
  365. float: right;
  366. display: block;
  367. cursor: pointer;
  368. font-size: 12px;
  369. background: url(/doc/share.png) no-repeat;
  370. background-position: right top;
  371. padding: 5px 27px;
  372. }
  373. div#learn pre,
  374. div#learn textarea {
  375. padding: 0;
  376. margin: 0;
  377. font-family: Menlo, monospace;
  378. font-size: 14px;
  379. }
  380. div#learn .input {
  381. padding: 10px;
  382. margin-top: 10px;
  383. height: 150px;
  384. -webkit-border-top-left-radius: 5px;
  385. -webkit-border-top-right-radius: 5px;
  386. -moz-border-radius-topleft: 5px;
  387. -moz-border-radius-topright: 5px;
  388. border-top-left-radius: 5px;
  389. border-top-right-radius: 5px;
  390. }
  391. div#learn .input textarea {
  392. width: 100%;
  393. height: 100%;
  394. border: none;
  395. outline: none;
  396. resize: none;
  397. }
  398. div#learn .output {
  399. border-top: none !important;
  400. padding: 10px;
  401. height: 59px;
  402. overflow: auto;
  403. -webkit-border-bottom-right-radius: 5px;
  404. -webkit-border-bottom-left-radius: 5px;
  405. -moz-border-radius-bottomright: 5px;
  406. -moz-border-radius-bottomleft: 5px;
  407. border-bottom-right-radius: 5px;
  408. border-bottom-left-radius: 5px;
  409. }
  410. div#learn .output pre {
  411. padding: 0;
  412. -webkit-border-radius: 0;
  413. -moz-border-radius: 0;
  414. border-radius: 0;
  415. }
  416. div#learn .input,
  417. div#learn .input textarea,
  418. div#learn .output,
  419. div#learn .output pre {
  420. background: #FFFFD8;
  421. }
  422. div#learn .input,
  423. div#learn .output {
  424. border: 1px solid #375EAB;
  425. }
  426. div#learn .buttons {
  427. float: right;
  428. padding: 20px 0 10px 0;
  429. text-align: right;
  430. }
  431. div#learn .buttons a {
  432. height: 16px;
  433. margin-left: 5px;
  434. padding: 10px;
  435. }
  436. div#learn .toys {
  437. margin-top: 8px;
  438. }
  439. div#learn .toys select {
  440. border: 1px solid #375EAB;
  441. margin: 0;
  442. }
  443. div#learn .output .exit {
  444. display: none;
  445. }
  446. div#video {
  447. max-width: 100%;
  448. }
  449. div#blog,
  450. div#video {
  451. margin-top: 40px;
  452. }
  453. div#blog > a,
  454. div#blog > div,
  455. div#blog > h2,
  456. div#video > a,
  457. div#video > div,
  458. div#video > h2 {
  459. margin-bottom: 10px;
  460. }
  461. div#blog .title,
  462. div#video .title {
  463. display: block;
  464. font-size: 20px;
  465. }
  466. div#blog .when {
  467. color: #666;
  468. font-size: 14px;
  469. }
  470. div#blog .read {
  471. text-align: right;
  472. }
  473. .toggleButton { cursor: pointer; }
  474. .toggle .collapsed { display: block; }
  475. .toggle .expanded { display: none; }
  476. .toggleVisible .collapsed { display: none; }
  477. .toggleVisible .expanded { display: block; }
  478. table.codetable { margin-left: auto; margin-right: auto; border-style: none; }
  479. table.codetable td { padding-right: 10px; }
  480. hr { border-style: none; border-top: 1px solid black; }
  481. img.gopher {
  482. float: right;
  483. margin-left: 10px;
  484. margin-bottom: 10px;
  485. z-index: -1;
  486. }
  487. h2 { clear: right; }
  488. /* example and drop-down playground */
  489. div.play {
  490. padding: 0 20px 40px 20px;
  491. }
  492. div.play pre,
  493. div.play textarea,
  494. div.play .lines {
  495. padding: 0;
  496. margin: 0;
  497. font-family: Menlo, monospace;
  498. font-size: 14px;
  499. }
  500. div.play .input {
  501. padding: 10px;
  502. margin-top: 10px;
  503. -webkit-border-top-left-radius: 5px;
  504. -webkit-border-top-right-radius: 5px;
  505. -moz-border-radius-topleft: 5px;
  506. -moz-border-radius-topright: 5px;
  507. border-top-left-radius: 5px;
  508. border-top-right-radius: 5px;
  509. overflow: hidden;
  510. }
  511. div.play .input textarea {
  512. width: 100%;
  513. height: 100%;
  514. border: none;
  515. outline: none;
  516. resize: none;
  517. overflow: hidden;
  518. }
  519. div#playground .input textarea {
  520. overflow: auto;
  521. resize: auto;
  522. }
  523. div.play .output {
  524. border-top: none !important;
  525. padding: 10px;
  526. max-height: 200px;
  527. overflow: auto;
  528. -webkit-border-bottom-right-radius: 5px;
  529. -webkit-border-bottom-left-radius: 5px;
  530. -moz-border-radius-bottomright: 5px;
  531. -moz-border-radius-bottomleft: 5px;
  532. border-bottom-right-radius: 5px;
  533. border-bottom-left-radius: 5px;
  534. }
  535. div.play .output pre {
  536. padding: 0;
  537. -webkit-border-radius: 0;
  538. -moz-border-radius: 0;
  539. border-radius: 0;
  540. }
  541. div.play .input,
  542. div.play .input textarea,
  543. div.play .output,
  544. div.play .output pre {
  545. background: #FFFFD8;
  546. }
  547. div.play .input,
  548. div.play .output {
  549. border: 1px solid #375EAB;
  550. }
  551. div.play .buttons {
  552. float: right;
  553. padding: 20px 0 10px 0;
  554. text-align: right;
  555. }
  556. div.play .buttons a {
  557. height: 16px;
  558. margin-left: 5px;
  559. padding: 10px;
  560. cursor: pointer;
  561. }
  562. .output .stderr {
  563. color: #933;
  564. }
  565. .output .system {
  566. color: #999;
  567. }
  568. /* drop-down playground */
  569. #playgroundButton,
  570. div#playground {
  571. /* start hidden; revealed by javascript */
  572. display: none;
  573. }
  574. div#playground {
  575. position: absolute;
  576. top: 63px;
  577. right: 20px;
  578. padding: 0 10px 10px 10px;
  579. z-index: 1;
  580. text-align: left;
  581. background: #E0EBF5;
  582. border: 1px solid #B0BBC5;
  583. border-top: none;
  584. -webkit-border-bottom-left-radius: 5px;
  585. -webkit-border-bottom-right-radius: 5px;
  586. -moz-border-radius-bottomleft: 5px;
  587. -moz-border-radius-bottomright: 5px;
  588. border-bottom-left-radius: 5px;
  589. border-bottom-right-radius: 5px;
  590. }
  591. div#playground .code {
  592. width: 520px;
  593. height: 200px;
  594. }
  595. div#playground .output {
  596. height: 100px;
  597. }
  598. /* Inline runnable snippets (play.js/initPlayground) */
  599. #content .code pre, #content .playground pre, #content .output pre {
  600. margin: 0;
  601. padding: 0;
  602. background: none;
  603. border: none;
  604. outline: 0px solid transparent;
  605. overflow: auto;
  606. }
  607. #content .playground .number, #content .code .number {
  608. color: #999;
  609. }
  610. #content .code, #content .playground, #content .output {
  611. width: auto;
  612. margin: 20px;
  613. padding: 10px;
  614. -webkit-border-radius: 5px;
  615. -moz-border-radius: 5px;
  616. border-radius: 5px;
  617. }
  618. #content .code, #content .playground {
  619. background: #e9e9e9;
  620. }
  621. #content .output {
  622. background: #202020;
  623. }
  624. #content .output .stdout, #content .output pre {
  625. color: #e6e6e6;
  626. }
  627. #content .output .stderr, #content .output .error {
  628. color: rgb(244, 74, 63);
  629. }
  630. #content .output .system, #content .output .exit {
  631. color: rgb(255, 209, 77)
  632. }
  633. #content .buttons {
  634. position: relative;
  635. float: right;
  636. top: -50px;
  637. right: 30px;
  638. }
  639. #content .output .buttons {
  640. top: -60px;
  641. right: 0;
  642. height: 0;
  643. }
  644. #content .buttons .kill {
  645. display: none;
  646. visibility: hidden;
  647. }
  648. a.error {
  649. font-weight: bold;
  650. color: white;
  651. background-color: darkred;
  652. border-bottom-left-radius: 4px;
  653. border-bottom-right-radius: 4px;
  654. border-top-left-radius: 4px;
  655. border-top-right-radius: 4px;
  656. padding: 2px 4px 2px 4px; /* TRBL */
  657. }
  658. #heading-narrow {
  659. display: none;
  660. }
  661. .downloading {
  662. background: #F9F9BE;
  663. padding: 10px;
  664. text-align: center;
  665. border-radius: 5px;
  666. }
  667. @media (max-width: 930px) {
  668. #heading-wide {
  669. display: none;
  670. }
  671. #heading-narrow {
  672. display: block;
  673. }
  674. .pkg-dir {
  675. display: none;
  676. }
  677. .title {
  678. margin:5px;
  679. }
  680. div#page {
  681. box-sizing: border-box;
  682. width:100%;
  683. height:calc(100% - 64px);
  684. float:right;
  685. display:inline-block;
  686. overflow:auto
  687. }
  688. div#menu {
  689. display: none;
  690. }
  691. div#topbar {
  692. height: 30px;
  693. padding: 10px;
  694. }
  695. a > img {
  696. max-height:100%;
  697. float:left;
  698. padding-left:10px;
  699. padding-top:2px;
  700. }
  701. div#mobile-nav {
  702. display:inline-block;
  703. float:right;
  704. border-bottom: 13px double white;
  705. border-top: 4px solid white;
  706. content:"";
  707. height: 5px;
  708. width:30px;
  709. }
  710. div#mobile_container {
  711. display:inline-block;
  712. width: 100%;
  713. padding-left:20px;
  714. padding-top:10px;
  715. }
  716. }
  717. @media (max-width: 760px) {
  718. .container .left,
  719. .container .right {
  720. width: auto;
  721. float: none;
  722. }
  723. div#about {
  724. max-width: 500px;
  725. text-align: center;
  726. }
  727. .title {
  728. margin:5px;
  729. }
  730. .pkg-dir {
  731. display: none;
  732. }
  733. div#page {
  734. box-sizing: border-box;
  735. width:100%;
  736. height:calc(100% - 64px);
  737. float:right;
  738. display:inline-block;
  739. overflow:auto
  740. }
  741. div#menu {
  742. display: none;
  743. }
  744. div#topbar {
  745. height: 30px;
  746. padding: 10px;
  747. }
  748. div#mobile-nav {
  749. display:inline-block;
  750. float:right;
  751. border-bottom: 13px double white;
  752. border-top: 4px solid white;
  753. content:"";
  754. height: 5px;
  755. width:30px;
  756. }
  757. }
  758. @media (min-width: 700px) and (max-width: 1000px) {
  759. div#menu > a {
  760. margin: 5px 0;
  761. font-size: 14px;
  762. }
  763. div#menu > input {
  764. font-size: 14px;
  765. }
  766. .title {
  767. margin:5px;
  768. }
  769. .pkg-dir {
  770. display: none;
  771. }
  772. div#page {
  773. box-sizing: border-box;
  774. width:100%;
  775. height:calc(100% - 64px);
  776. float:right;
  777. display:inline-block;
  778. overflow:auto
  779. }
  780. div#menu {
  781. display: none;
  782. }
  783. div#topbar {
  784. height: 30px;
  785. padding: 10px;
  786. }
  787. div#mobile-nav {
  788. display:inline-block;
  789. float:right;
  790. border-bottom: 13px double white;
  791. border-top: 4px solid white;
  792. content:"";
  793. height: 5px;
  794. width:30px;
  795. }
  796. }
  797. @media (max-width: 700px) {
  798. body {
  799. font-size: 15px;
  800. }
  801. pre,
  802. code {
  803. font-size: 13px;
  804. }
  805. div#page > .container {
  806. padding: 0 10px;
  807. }
  808. div#topbar {
  809. padding: 10px;
  810. }
  811. div#topbar > .container {
  812. padding: 0;
  813. }
  814. #heading-wide {
  815. display: block;
  816. }
  817. #heading-narrow {
  818. display: none;
  819. }
  820. .top-heading {
  821. float: none;
  822. display: inline-block;
  823. padding: 12px;
  824. }
  825. div#menu {
  826. padding: 0;
  827. min-width: 0;
  828. text-align: left;
  829. float: left;
  830. }
  831. div#menu > a,
  832. div#menu > input {
  833. display: block;
  834. margin-left: 0;
  835. margin-right: 0;
  836. }
  837. div#menu > input {
  838. width: 100%;
  839. }
  840. #menu-button {
  841. display: inline-block;
  842. }
  843. p,
  844. pre,
  845. ul,
  846. ol {
  847. margin: 10px;
  848. }
  849. .pkg-synopsis {
  850. display: none;
  851. }
  852. img.gopher {
  853. display: none;
  854. }
  855. .pkg-dir {
  856. display: none;
  857. }
  858. .title {
  859. margin:5px;
  860. }
  861. div#page {
  862. box-sizing: border-box;
  863. width:100%;
  864. height:calc(100% - 64px);
  865. float:right;
  866. display:inline-block;
  867. overflow:auto
  868. }
  869. div#menu {
  870. display: none;
  871. }
  872. div#topbar {
  873. height: 30px;
  874. padding: 10px;
  875. }
  876. div#mobile-nav {
  877. display:inline-block;
  878. float:right;
  879. border-bottom: 13px double white;
  880. border-top: 4px solid white;
  881. content:"";
  882. height: 5px;
  883. width:30px;
  884. }
  885. }
  886. @media (max-width: 480px) {
  887. #heading-wide {
  888. display: none;
  889. }
  890. #heading-narrow {
  891. display: block;
  892. }
  893. .pkg-dir {
  894. display: none;
  895. }
  896. .title {
  897. margin:5px;
  898. }
  899. div#page {
  900. box-sizing: border-box;
  901. width:100%;
  902. height:calc(100% - 64px);
  903. float:right;
  904. display:inline-block;
  905. overflow:auto
  906. }
  907. div#menu {
  908. display: none;
  909. }
  910. div#topbar {
  911. height: 30px;
  912. padding: 10px;
  913. }
  914. div#mobile-nav {
  915. display:inline-block;
  916. float:right;
  917. border-bottom: 13px double white;
  918. border-top: 4px solid white;
  919. content:"";
  920. height: 5px;
  921. width:30px;
  922. }
  923. }
  924. @media print {
  925. pre {
  926. background: #FFF;
  927. border: 1px solid #BBB;
  928. white-space: pre-wrap;
  929. }
  930. }