wysiwyg.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. @charset "UTF-8";
  2. /* LISIBILITY */
  3. * {
  4. font-size: 16px; }
  5. div {
  6. border: 1px dashed #D4D4D4; }
  7. p:after, ul:after {
  8. content: "¬";
  9. color: red; }
  10. h1:before, h2:before, h3:before, h4:before, h5:before, h6:before {
  11. color: blue;
  12. font-weight: normal;
  13. font-size: 10px;
  14. vertical-align: super; }
  15. h1:before {
  16. content: "h1 "; }
  17. h2:before {
  18. content: "h2 "; }
  19. h3:before {
  20. content: "h3 "; }
  21. h4:before {
  22. content: "h4 "; }
  23. h5:before {
  24. content: "h5 "; }
  25. h6:before {
  26. content: "h6 "; }
  27. h2 {
  28. font-size: 24px; }
  29. h3 {
  30. font-size: 18px; }
  31. h4 {
  32. font-size: 16px; }
  33. h5 {
  34. font-size: 14px; }
  35. h6 {
  36. font-size: 12px; }
  37. br:after {
  38. content: "·";
  39. color: red;
  40. border: 1px solid #999; }
  41. /* LAYOUT AND GRAPHICS */
  42. img {
  43. height: auto;
  44. margin: 0.5em 0; }
  45. p {
  46. border: 1px dashed #848484; }
  47. div {
  48. border: 1px solid #1A1A1A; }
  49. img, p, div {
  50. position: relative; }
  51. img:before, p:before, div:before {
  52. font-size: 10px;
  53. color: red;
  54. background-color: #1A1A1A;
  55. position: absolute;
  56. top: 0;
  57. z-index: 3000; }
  58. img.full, p.full, div.full {
  59. width: 99%; }
  60. img.full:before, p.full:before, div.full:before {
  61. content: " full "; }
  62. img.demi, p.demi, div.demi {
  63. width: 47%;
  64. margin-right: 2%; }
  65. img.demi:before, p.demi:before, div.demi:before {
  66. content: " demi ";
  67. right: 0; }
  68. img.tiers, p.tiers, div.tiers {
  69. width: 29%;
  70. margin-right: 2%; }
  71. img.tiers:before, p.tiers:before, div.tiers:before {
  72. content: " tiers ";
  73. right: 0; }
  74. img.quart, p.quart, div.quart {
  75. width: 23%;
  76. margin-right: 2%; }
  77. img.quart:before, p.quart:before, div.quart:before {
  78. content: " quart ";
  79. right: 0; }
  80. img.demi-left, p.demi-left, div.demi-left {
  81. width: 47%;
  82. float: left;
  83. margin-right: 2%; }
  84. img.demi-left:before, p.demi-left:before, div.demi-left:before {
  85. content: " demi-left ";
  86. left: 0; }
  87. img.demi-right, p.demi-right, div.demi-right {
  88. width: 47%;
  89. float: right;
  90. margin-left: 2%; }
  91. img.demi-right:before, p.demi-right:before, div.demi-right:before {
  92. content: " demi-right ";
  93. right: 0; }
  94. img.demi-center, p.demi-center, div.demi-center {
  95. width: 47%;
  96. display: block;
  97. margin: 0 auto; }
  98. img.demi-center:before, p.demi-center:before, div.demi-center:before {
  99. content: " demi-denter ";
  100. right: 0; }
  101. img.tiers-left, p.tiers-left, div.tiers-left {
  102. width: 29%;
  103. float: left;
  104. margin-right: 2%; }
  105. img.tiers-left:before, p.tiers-left:before, div.tiers-left:before {
  106. content: " tiers-left ";
  107. left: 0; }
  108. img.tiers-right, p.tiers-right, div.tiers-right {
  109. width: 29%;
  110. float: right;
  111. margin-left: 2%; }
  112. img.tiers-right:before, p.tiers-right:before, div.tiers-right:before {
  113. content: " tiers-right ";
  114. right: 0; }
  115. img.tiers-center, p.tiers-center, div.tiers-center {
  116. width: 29%;
  117. display: block;
  118. margin: 0 auto; }
  119. img.tiers-center:before, p.tiers-center:before, div.tiers-center:before {
  120. content: " tiers-center ";
  121. right: 0; }
  122. img.quart-left, p.quart-left, div.quart-left {
  123. width: 23%;
  124. float: left;
  125. margin-right: 2%; }
  126. img.quart-left:before, p.quart-left:before, div.quart-left:before {
  127. content: " quart-left ";
  128. left: 0; }
  129. img.quart-right, p.quart-right, div.quart-right {
  130. width: 23%;
  131. float: right;
  132. margin-left: 2%; }
  133. img.quart-right:before, p.quart-right:before, div.quart-right:before {
  134. content: " quart-right ";
  135. right: 0; }
  136. img.quart-center, p.quart-center, div.quart-center {
  137. width: 23%;
  138. display: block;
  139. margin: 0 auto; }
  140. img.quart-center:before, p.quart-center:before, div.quart-center:before {
  141. content: " quart-center ";
  142. right: 0; }
  143. h2 {
  144. font-size: 1.5em;
  145. font-size: 400; }
  146. h3 {
  147. font-size: 2em;
  148. font-weight: 300; }
  149. p {
  150. line-height: 1.3; }
  151. a {
  152. color: #20c498; }