/www/style.css

http://github.com/cgay/wiki · CSS · 389 lines · 297 code · 70 blank · 22 comment · 0 complexity · 41891784af466791e3b8b01946350bb6 MD5 · raw file

  1. /*
  2. * Basic page layout looks like this:
  3. * ----------------------------------------
  4. * | header-left header-right |
  5. * ----------------------------------------
  6. * | navigation | options menu |
  7. * | | ----------------------- |
  8. * | | |
  9. * | | content |
  10. * | | |
  11. * ----------------------------------------
  12. * | footer |
  13. * ----------------------------------------
  14. *
  15. * The entire section between the header and footer is called the "midsection".
  16. */
  17. body {
  18. font-family: "Lucida Grande", Verdana, Arial, sans-serif;
  19. color: #666;
  20. line-height: 1.5em;
  21. padding: 1em;
  22. }
  23. h1, h2, h3, h4 {
  24. color: #555;
  25. }
  26. h2 em {
  27. font-style: italic;
  28. }
  29. fieldset {
  30. border: none;
  31. padding: 1em 0;
  32. }
  33. #logo {
  34. display: inline;
  35. float: left;
  36. margin-bottom: 1.5em;
  37. position: relative;
  38. }
  39. #header-left {
  40. float: left;
  41. }
  42. #header-right {
  43. float: right;
  44. }
  45. #header-right form {
  46. margin: 0;
  47. }
  48. #header-right form::before {
  49. content: url(images/search.png);
  50. }
  51. #header-right a {
  52. border: none;
  53. }
  54. #header-right span.user-info::before {
  55. content: url(images/user.png);
  56. }
  57. #header-right span.not-logged-in {
  58. padding-left: 20px;
  59. }
  60. #content {
  61. width: 70%;
  62. float: left;
  63. display: inline-block;
  64. margin-left: 10px;
  65. margin-right: 10px;
  66. margin-bottom: 10px;
  67. }
  68. #midsection {
  69. clear: both;
  70. padding-top: 1em;
  71. }
  72. #midsection > ul ul, #midsection > ul ul ul {
  73. padding-left: 1em;
  74. }
  75. hr {
  76. clear: both;
  77. }
  78. #midsection > ul {
  79. padding: 0;
  80. }
  81. #navigation {
  82. float: left;
  83. }
  84. #navigation > li {
  85. margin-bottom: 2em;
  86. }
  87. #navigation > li ul {
  88. padding-top: 0.2em;
  89. }
  90. #navigation ul {
  91. list-style-type: square;
  92. }
  93. #navigation ul ul {
  94. padding-top: 0.3em;
  95. padding-bottom: 1em;
  96. list-style-type: circle;
  97. }
  98. #navigation a {
  99. border: none; /* don't display default underline for links */
  100. }
  101. #navigation a:visited {
  102. color: #58a;
  103. }
  104. #footer {
  105. font-size: 0.8em;
  106. margin-top: 1em;
  107. clear: both;
  108. }
  109. blockquote p::before {
  110. content: "\00BB";
  111. }
  112. blockquote p::after {
  113. content: "\00AB";
  114. }
  115. blockquote {
  116. line-height: 2em;
  117. font-family: Georgia, "Times New Roman", Times, serif;
  118. word-spacing: 0.2em;
  119. letter-spacing: 1pt;
  120. font-style: italic;
  121. margin-left: 1em;
  122. }
  123. blockquote + cite {
  124. float: right;
  125. margin: -1em 5em 2em 0;
  126. }
  127. blockquote + cite + hr {
  128. visibility: hidden;
  129. }
  130. #footer {
  131. text-align: center;
  132. }
  133. a {
  134. color: #58a;
  135. border: none;
  136. text-decoration: none;
  137. padding-bottom: 0px;
  138. }
  139. a:visited {
  140. color: #152772;
  141. text-decoration: none;
  142. padding-bottom: 0px;
  143. }
  144. a:hover {
  145. color: #58a;
  146. text-decoration: none;
  147. padding-bottom: 0px;
  148. border-bottom: 1px dotted black;
  149. }
  150. h2 {
  151. padding-top: 2em;
  152. margin-bottom: 1em;
  153. }
  154. h2:first-child {
  155. padding-top: 0;
  156. border-top: none;
  157. }
  158. body hr {
  159. border: none;
  160. margin: 2em 0 0 0;
  161. padding: 0;
  162. border: 0;
  163. line-height: 0px;
  164. height: 1px;
  165. display: block;
  166. }
  167. h2, #midsection, body hr {
  168. border-top: 0.1em dashed #ccc;
  169. }
  170. h3 {
  171. margin-bottom: 0.2em;
  172. padding-bottom: 0.1em;
  173. }
  174. h2 a {
  175. text-decoration: underline;
  176. }
  177. small.date {
  178. font-style: italic;
  179. margin-left: 0.5em;
  180. }
  181. #menu {
  182. float: right;
  183. background-color: #8bd;
  184. color: white;
  185. height: 2em;
  186. color: white;
  187. font-weight: bold;
  188. display: block;
  189. text-align: center;
  190. margin: 0 0 1em 0;
  191. }
  192. #menu ul {
  193. margin: 0;
  194. padding: 0;
  195. }
  196. #menu span {
  197. display: block;
  198. margin: 0.3em 0.5em;
  199. display: block;
  200. }
  201. #menu li {
  202. color: white;
  203. display: none;
  204. padding: 0 0.4em;
  205. margin: 0;
  206. }
  207. #menu a {
  208. color: white;
  209. border-bottom-color: white;
  210. }
  211. #menu:hover {
  212. width: auto;
  213. height: auto;
  214. }
  215. #menu:hover span {
  216. text-align: center;
  217. /* display: none; */
  218. }
  219. #menu:hover li {
  220. display: block;
  221. }
  222. label {
  223. display: block;
  224. font-weight: bold;
  225. margin: 0 -1em;
  226. }
  227. form table {
  228. text-align: center;
  229. }
  230. input[type=checkbox], input[type=radio] {
  231. margin: 0 1em 0 0;
  232. display: inline;
  233. }
  234. input + label {
  235. display: inline;
  236. }
  237. fieldset ol {
  238. list-style-type: none;
  239. padding: 0 2em;
  240. }
  241. fieldset li {
  242. margin: 0 0 2em 0;
  243. }
  244. ul.striped li:nth-child(odd) {
  245. background-color: #fcfcfc;
  246. }
  247. ul.big li {
  248. padding: 0.3em;
  249. margin: 0;
  250. }
  251. ul.big {
  252. list-style-type: square;
  253. }
  254. span.version {
  255. line-height: 0;
  256. }
  257. span.version a {
  258. border: none;
  259. }
  260. #changes dd {
  261. font-style: italic;
  262. }
  263. p.hint {
  264. margin: 0 1.5em ;
  265. padding: 1em;
  266. }
  267. .hint::before {
  268. content: url(images/info.png);
  269. }
  270. #diff {
  271. width: 100%;
  272. }
  273. span.object {
  274. line-height: 2em;
  275. font-weight: bold;
  276. }
  277. .page,
  278. .user {
  279. padding-left: 0.2em;
  280. }
  281. .page::before {
  282. content: url(images/page.png);
  283. }
  284. .user::before {
  285. content: url(images/user.png);
  286. }
  287. #search-form,
  288. #search-form fieldset,
  289. #search-form ol,
  290. #search-form li {
  291. display: inline;
  292. margin: 0;
  293. padding: 0;
  294. }
  295. #cse-search-box div {
  296. display: inline;
  297. margin: 0;
  298. padding: 0;
  299. }
  300. /* For use in <input>, <textarea>, etc elements themselves to indicate
  301. the entered value was invalid.
  302. */
  303. .invalid-input {
  304. background-color: yellow;
  305. }
  306. /* For use with the explanatory text associated with an invalid input field.
  307. */
  308. .field-error, .page-errors {
  309. color: red;
  310. }
  311. #comment-input {
  312. width: 30em;
  313. }
  314. pre {
  315. background: #cdf;
  316. border: 1px solid #679;
  317. color: #235;
  318. padding: 0.5em;
  319. }