demo.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. html, body {
  2. margin: 0;
  3. padding: 0;
  4. font-family: Helvetica, Arial, Verdana, sans-serif;
  5. background-color: #DDF;
  6. height: 100%;
  7. }
  8. textarea {
  9. font-family: monospace;
  10. }
  11. #header {
  12. margin: 0;
  13. padding: 0.4em 0 0 0;
  14. text-align: center;
  15. color: #002;
  16. }
  17. #header h1 {
  18. font-size: 2em;
  19. }
  20. #header * {
  21. margin: 0;
  22. padding: 0;
  23. line-height: 1em;
  24. font-weight: 100;
  25. }
  26. #header a {
  27. color: #005;
  28. position: relative;
  29. z-index: 20;
  30. }
  31. #bothContainers {
  32. position: absolute;
  33. top: 0;
  34. bottom: 0;
  35. margin-top: 2.4em;
  36. width: 100%;
  37. }
  38. #leftContainer, #rightContainer {
  39. margin: 0;
  40. padding: 0;
  41. position: absolute;
  42. width: 48.5%;
  43. top: 0;
  44. bottom: 0;
  45. }
  46. #leftContainer {
  47. float: left;
  48. left: 1%;
  49. }
  50. #rightContainer {
  51. float: right;
  52. right: 1%;
  53. }
  54. #rightContainer > * {
  55. float: right;
  56. }
  57. .label {
  58. margin: 0;
  59. padding: 0;
  60. position: relative;
  61. width: 100%;
  62. display: block;
  63. }
  64. .label * {
  65. position: relative;
  66. font-weight: 900;
  67. }
  68. .label span {
  69. color: #444;
  70. }
  71. #outputType {
  72. display: block;
  73. margin-left: auto;
  74. font-weight: 900;
  75. font-family: Arial, Verdana, sans-serif;
  76. background-color: #dacccc;
  77. color: #444;
  78. border: 1px solid #999;
  79. }
  80. .pane {
  81. margin: 1.6em 0em 0.2em;
  82. padding: 0.6em;
  83. background-color: #eee;
  84. display: block;
  85. border: 1px solid #000;
  86. top: 0;
  87. bottom: 0;
  88. left: 0;
  89. right: 0;
  90. position: absolute;
  91. overflow: auto;
  92. }
  93. #previewPane {
  94. background-color: #f3eeee;
  95. }
  96. #outputPane {
  97. background-color: #6c6666;
  98. color: #fff;
  99. display: none;
  100. }
  101. #syntaxPane {
  102. background-color: #e6dede;
  103. background-color: #f7ecec;
  104. display: none;
  105. }
  106. #inputPane {
  107. background-color: #fff;
  108. }
  109. #previewPane {
  110. padding: 0;
  111. }
  112. #previewPane > * {
  113. margin-left: 4px;
  114. margin-right: 4px;
  115. }
  116. #previewPane > blockquote {
  117. margin-left: 3em;
  118. }
  119. #previewPane > :first-child {
  120. margin-top: 4px; /* pane padding */
  121. }
  122. #previewPane * {
  123. line-height: 1.4em;
  124. }
  125. #previewPane code {
  126. font-size: 1.3em;
  127. }