/www/style.css

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