Contents of file '../../../css/jonssonb.css':
1 /*-----------------------------------------------------------------------------
2 File: http://jonsson.eu/css/jonssonb.css [Cascaded Style Sheet]
3 Created: May 28, 2006
4 Last change: January 2, 2011
5 Description: The "wireframe" layout of jonsson.eu
6 Author: Fredrik Jonsson <http://jonsson.eu/>
7 Copyright (C) 2006-2011, Fredrik Jonsson
8 -----------------------------------------------------------------------------*/
9
10 /*
11 * Neutralise any default browser settings before proceeding.
12 */
13 * {padding: 0px; margin: 0px;}
14
15 /*
16 * Proceed with overall, global settings for the font family, font size,
17 * background color and default text color. In the body, the 'text-align:
18 * center;' block is used for centering the #container div. More about
19 * this in the comment on #container below.
20 */
21 body {
22 font-family: verdana, helvetica, arial, sans-serif;
23 font-size: 11px; /* Default font size, as base unit */
24 line-height: 150%; /* See Andy Clarke's book "Transcendental CSS" */
25 background-color: #ffffff; /* White background throughout all pages */
26 color: #454545; /* Grey text color throughout site, not black */
27 text-align: center; /* For the centering of #container */
28 }
29
30 /*
31 * The W3C Visual formatting model states: "If both 'margin-left'
32 * and 'margin-right' are 'auto', their used values are equal.
33 * This horizontally centers the element with respect to the edges
34 * of the containing block." So, a containing block should be able
35 * to be centered using the following rules:
36 * div#container {
37 * margin-left: auto;
38 * margin-right: auto;
39 * width: 50em;
40 * }
41 * However, some browsers do not center the containing blocks using
42 * this method as they ignore the auto margins. These browsers include:
43 * NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (in quirks-mode).
44 * By adding two simple rules, this problem can be overcome in all of
45 * the browsers mentioned above, excluding NN4.
46 * While these browsers ignore auto margins, they will follow
47 * "text-align: center". If this is applied to the body, the containing
48 * block will center correctly. The only problem with this new rule is
49 * that all content on the page is now center-aligned. To overcome the
50 * center alignment problem, a new declaration is added within the
51 * containing block rule set - "text-align: left". The final CSS code
52 * is hence:
53 * body {text-align: center;}
54 * div#container {
55 * margin-left: auto;
56 * margin-right: auto;
57 * width: 50em;
58 * text-align: left;
59 * }
60 * which is the way the centered layout at www.jonsson.eu is achieved.
61 */
62 #container {
63 width: 66.2em; /* Unit in terms of defined font size */
64 margin: 40px auto 40px auto;
65 text-align: left; /* Resetting of text-align from the declaration in body */
66 padding: 4px;
67 box-shadow: 6px 6px 12px #cccccc; /* Only accepted by CSS3+ */
68 }
69
70 /*
71 * Define the placement and shape of the container for the logo and navigation
72 * menu. We take the opportunity to hook up one of the angled corners as
73 * background image (top right) of this <div>.
74 */
75 #navBar {
76 position: relative;
77 padding: 0px;
78 border-bottom: 1px solid #000000; /* The black line beneath the navbar */
79 margin: 0px;
80 height: 3.2em; /* Unit in terms of defined font size */
81 width: 66.2em; /* Unit in terms of defined font size */
82 background-color: transparent;
83 background-image: url(/img/rightcorner.png);
84 background-repeat: no-repeat;
85 background-position: top right;
86 }
87
88 /*
89 * The #brand div serves the purpose of being the container for the
90 * logo image in the page header. However, for browsers not capable
91 * of properly rendering the CSS styling, or even browsers with CSS
92 * disabled entirely, the #brand div also provides a header text,
93 * which under normal circumstances are hidden from the viewer by
94 * the "text-indent: -500em;" statement. (Notice that the unit of
95 * displacement directly derives from the font size, to ensure a
96 * proper scaling in case of radical changes of this.)
97 */
98 #brand {
99 width: 160px;
100 height: 35px;
101 position: absolute;
102 top: 0px;
103 left: 0px;
104 background-image: url(/img/jonsson-grannysmith-bw.png);
105 background-image: url(/img/jonsson-grannysmith.png);
106 background-image: url(/img/jonsson-mygga.png);
107 background-position: top left;
108 background-repeat: no-repeat;
109 }
110
111 /*
112 * Hide the HTML text of the title/brand header by the "negative large
113 * text-indentation" standard trick.
114 */
115 #brand h1 {
116 display: none;
117 text-indent: -500em;
118 }
119
120 /*
121 * Set margin-left to 0px in order to force the navigation menu to
122 * always stay flush to its leftmost position. Otherwise, if set to
123 * auto, the navigation bar will be liquid, with navMenuContainer
124 * horizontally centered in the window.
125 *
126 * The margin settings "margin-left: 0px;" and "margin-right: auto;"
127 * here forces the #navMenuContainer div to be left aligned in the
128 * browser window, leaving 116px to the left edge by the "left: 116px;"
129 * statement. I suppose that this in principle could be solved by simply
130 * stating "left: 0px;" and a left margin of 116px, but in IE6 this does
131 * not seem to render properly, for some reason which I have not bothered
132 * to figure out yet.
133 */
134 div#navMenuContainer {
135 position: absolute;
136 right: 0em;
137 bottom: 1.5em;
138 padding: 0px;
139 border: 0px solid red;
140 margin: 0px;
141 }
142
143 /* Hides from IE-mac \*/
144 * html div#navMenuContainer {
145 width: 48.9em; margin-bottom: -1px;
146 margin-right: -6px;}
147 /* End hide from IE-mac */
148
149 /*
150 * Start with the shaping of the unordered list (ul) defining the
151 * navigation menu. The unordered list for the navigation menu is
152 * (from the code as generated by navmenu.php) targeted by its ID
153 * navMenu. This list is positioned as "relative" within the containing
154 * div of ID navMenuContainer.
155 */
156 ul#navMenu {
157 position: relative;
158 list-style: none; /* remove bullets of items in the navigation menu */
159 white-space: nowrap;
160 padding: 0px;
161 border: 0px;
162 margin: 0px;
163 }
164
165 /*
166 * Continue with the list items (li) within the unordered list of ID
167 * navMenu. By positioning the menu items using "float: left", they
168 * are taken out of the flow of the document and line up horizontally,
169 * meanwhile not occupying any vertical space.
170 */
171 ul#navMenu li {
172 float: left;
173 padding: 0px;
174 border: 0px;
175 margin: 0px;
176 list-style-type: none;
177 }
178
179 /*
180 * Having floated the list items, the contained anchors (link definitions)
181 * are now positioned using "position: relative", which takes the anchors
182 * back into the "normal" flow of the document again, expanding the enclosing
183 * floated list items vertically to exactly match the height ofthe anchors.
184 * This way, the floated list items will effectively occupy a finite height,
185 * in spite of that they are floated.
186 *
187 * The color scheme as applied to these items will in the final nav bar show
188 * up in the inactive items in the main menu.
189 */
190 ul#navMenu li a {
191 position: relative;
192 display: block;
193 width: 8em; /* With six main menu items -> 6*8 em width in total */
194 height: 1.5em;
195 padding: 1px 0px 0px 0px;
196 border: 0px solid blue;
197 border-bottom: 1px solid black;
198 margin: 0px;
199 color: #777777;
200 background-color: transparent;
201 text-align: center; /* Centering the text within the _anchor_ */
202 text-decoration: none;
203 }
204
205 /*
206 * Define appearance as the cursor hover above inactive items in the main menu.
207 */
208 ul#navMenu li a:hover {
209 color: #000000;
210 /* background-color: #7597b0; */ /* Bluish-grayish shade */
211 /* background-color: #b8de82; */ /* Slightly darker Granny Smith-greenish */
212 /* background-color: #f55b00; */ /* Orangeish */
213 /* background-color: #9d8b3e; */ /* "Goldish"-colored */
214 }
215
216 /*
217 * Define appearance as we click inside inactive items in the main menu.
218 * Please notice that the "li a:active" (X)HTML statement here might be
219 * somewhat misleading in terminology; this is not the same as an "active"
220 * item in the generated navigation list (which is rather the item indicating
221 * the current position in the hierarchy as parsed from the file system
222 * against the menu specification file).
223 */
224 ul#navMenu li a:active {
225 color: #000000;
226 background-color: #aaaaaa;
227 /* background-color: #7597b0; */ /* Bluish-grayish shade */
228 /* background-color: #d3ff95; */ /* Granny Smith-greenish */
229 background-color: #9d8b3e; /* "Goldish"-colored */
230 /* background-color: #ff5200; */ /* Orangeish */
231 }
232
233 ul#navMenu li#active a {
234 position: relative;
235 display: block;
236 padding: 0px 0px 1px 0px;
237 border-left: 1px solid black;
238 border-top: 1px solid black;
239 border-right: 1px solid black;
240 border-bottom: 0px;
241 background-color: #ffffff;
242 background-color: transparent;
243 color: #000000;
244 font-style: italic; /* Use italic emphasis in selected main item */
245 font-weight: normal;
246 }
247
248 ul#navMenu li#active a:hover {}
249
250 ul#navMenu ul#subnavMenu {
251 position: absolute;
252 list-style-type: none; /* remove bullets in submenu items in the nav menu */
253 white-space: nowrap;
254 left: 0px;
255 padding: 0px;
256 border: 0px;
257 margin: 0px;
258 }
259
260 /* Hides from IE-mac \*/
261 * html ul#navMenu ul#subnavMenu {width: 48.9em;}
262 /* End hide from IE-mac */
263
264 ul#navMenu ul#subnavMenu li {
265 padding: 0px;
266 border: 0px;
267 margin: 0px;
268 }
269
270 /*
271 * Important [added 20 august 2010]:
272 * For the chosen submenu item width of 8em, for some strange reason,
273 * IE8 renders overflow in the submenu of the navigation bar (while IE6
274 * and IE7 still are OK along with all other browsers I have tested on
275 * this, such as Safari, Firefox and Opera). I have solved this by
276 * targeting IE8 with a slighly lower width, by employing the hack
277 * described at http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-
278 * ie8-standards-mode. It seems to me that this is yet another "Internet
279 * Explorer"-standard product from Microsoft, deviating from the real
280 * CSS-standard.
281 */
282 ul#navMenu ul#subnavMenu li a {
283 width: 8em; /* If unset, width is matched tightly to the contained text */
284 width /*\**/: 7.95em\9; /* This hack targets ONLY IE8 in standards mode */
285 height: 1.5em;
286 padding: 0px;
287 border: 0px;
288 margin: 0px;
289 color: #000000; /* Foreground color of inactive items in submenu */
290 background: #666666; /* Background color of inactive items in submenu */
291 background-color: transparent;
292 font-style: normal; /* Reset italic emphasis to 'normal' for submenu */
293 text-align: center; /* Centering the text within the anchor */
294 }
295
296 ul#navMenu ul#subnavMenu li a:hover {
297 background-color: #000000;
298 color: #ffffff;
299 }
300
301 ul#navMenu ul#subnavMenu li#subactive a {
302 font-weight: bold;
303 padding: 0px 1px 0px 1px;
304 border: 0px;
305 margin: 0px;
306 }
307
308 /*
309 * As an illustration on how to exploit the class tags added by the
310 * navmenu.php script, the following six blocks target different main
311 * menu items of the "inactive" type, for which the background color
312 * can be set individually.
313 */
314 /* #d3ff95, #fef209, #7597b0 */
315 /* "Orangeish menu" */
316 ul#navMenu li a.home:hover {background-color: #ff5200;}
317 ul#navMenu li a.research:hover {background-color: #ff5200;}
318 ul#navMenu li a.programs:hover {background-color: #ff5200;}
319 ul#navMenu li a.genealogy:hover {background-color: #ff5200;}
320 ul#navMenu li a.photo:hover {background-color: #ff5200;}
321 ul#navMenu li a.resources:hover {background-color: #ff5200;}
322 /* "Goldish menu" */
323 /*
324 * ul#navMenu li a.home:hover {background-color: #9d8b3e;}
325 * ul#navMenu li a.research:hover {background-color: #9d8b3e;}
326 * ul#navMenu li a.programs:hover {background-color: #9d8b3e;}
327 * ul#navMenu li a.genealogy:hover {background-color: #9d8b3e;}
328 * ul#navMenu li a.photo:hover {background-color: #9d8b3e;}
329 * ul#navMenu li a.resources:hover {background-color: #9d8b3e;}
330 */
331 /* "Granny Smith greenish menu" */
332 ul#navMenu li a.home:hover {background-color: #d3ff95;}
333 ul#navMenu li a.research:hover {background-color: #d3ff95;}
334 ul#navMenu li a.programs:hover {background-color: #d3ff95;}
335 ul#navMenu li a.genealogy:hover {background-color: #d3ff95;}
336 ul#navMenu li a.photo:hover {background-color: #d3ff95;}
337 ul#navMenu li a.resources:hover {background-color: #d3ff95;}
338 /*
339 * Similarly, we may just as well let these fields obtain individual colors
340 * as the items are clicked.
341 */
342 /* "Orangeish menu" */
343 /*
344 *ul#navMenu li a.home:active {background-color: #ff5200; color: #000000;}
345 *ul#navMenu li a.research:active {background-color: #ff5200; color: #000000;}
346 *ul#navMenu li a.programs:active {background-color: #ff5200; color: #000000;}
347 *ul#navMenu li a.genealogy:active {background-color: #ff5200; color: #000000;}
348 *ul#navMenu li a.photo:active {background-color: #ff5200; color: #000000;}
349 *ul#navMenu li a.resources:active {background-color: #ff5200; color: #000000;}
350 */
351 /* "Goldish menu" */
352 /*
353 * ul#navMenu li a.home:active {background-color: #9d8b3e;}
354 * ul#navMenu li a.research:active {background-color: #9d8b3e;}
355 * ul#navMenu li a.programs:active {background-color: #9d8b3e;}
356 * ul#navMenu li a.genealogy:active {background-color: #9d8b3e;}
357 * ul#navMenu li a.photo:active {background-color: #9d8b3e;}
358 * ul#navMenu li a.resources:active {background-color: #9d8b3e;}
359 */
360 /* "Granny Smith greenish menu" */
361 ul#navMenu li a.home:active {background-color: #d3ff95;}
362 ul#navMenu li a.research:active {background-color: #d3ff95;}
363 ul#navMenu li a.programs:active {background-color: #d3ff95;}
364 ul#navMenu li a.genealogy:active {background-color: #d3ff95;}
365 ul#navMenu li a.photo:active {background-color: #d3ff95;}
366 ul#navMenu li a.resources:active {background-color: #d3ff95;}
367
368 /*
369 * Add a class for eliminating "The IE Escaping Floats Bug," see
370 * http://www.positioniseverything.net/explorer/escape-floats.html
371 */
372 /* Hides from IE-mac \*/
373 * html .floatholder {height: 1%;}
374 /* End hide from IE-mac */
375
376 /*
377 * Apply the method of clearing described in "How To Clear Floats Without
378 * Structural Markup," at http://www.positioniseverything.net/easyclearing.html
379 */
380 .clearfix:after {
381 content: ".";
382 display: block;
383 height: 0;
384 clear: both;
385 visibility: hidden;
386 }
387
388 /* Hides from IE-mac \*/
389 * html .clearfix {height: 1%;}
390 /* End hide from IE-mac */
391
392 /*
393 * Define a simple layout to be applied to pages in which we do not wish to
394 * include a full navigation bar, such as in, for example, the initial root
395 * page at which the language to be used is chosen. In this "clean" page style
396 * only a banner at the left edge will appear.
397 */
398 #cleanPage {
399 background-image: url(/img/jonssonlogo/jonssonlogo.png);
400 background-repeat: no-repeat;
401 background-attachment: fixed;
402 background-position: 10px 40px;
403 }
404
405 /*
406 * The top level of the layout definition of non-empty pages has essentially
407 * two divs controlling the display modes: the oneColLayout and twoColLayout.
408 * In the oneColLayout layout, there is only one column of what we here denote
409 * as "primary" content. However, we allow for side content such as language
410 * switches and compact message forms, links etc. to be displayed along with
411 * the main text area.
412 *
413 */
414 #oneColLayout #primaryContent {
415 float: right;
416 width: 46em;
417 min-height: 38em;
418 padding: 1em;
419 border: 1px solid #cdcdcd;
420 margin: 8px 0px 8px 0px;
421 }
422
423 /*
424 * Without applying the "word-wrap: break-word;" block to IE6, which here
425 * is targeted using the usual "* html"-hack, the primary content area can
426 * sometimes unexpectedly expand whenever, for example, images are viewed.
427 * (The primary content area is wide enough to make expansion due to text
428 * overflow quite rare.)
429 */
430 /* Hides from IE-mac \*/
431 * html #oneColLayout #primaryContent {word-wrap: break-word;}
432 /* End hide from IE-mac */
433
434 #oneColLayout #sideContent {
435 float: left;
436 width: 17.4em;
437 padding: 0px;
438 border: 0px solid blue;
439 margin: 8px 0px 8px 0px;
440 }
441
442 /*
443 * Definition of the general style of paragraphs. Notice that we here should
444 * ensure that all units are in terms of the currently used font size, rather
445 * than fixed in pixels. This is to ensure a proper scaling in case of changed
446 * font size, either by a change of settings in the browser (as this was a
447 * problem in IE up until IE7) or by a later change in the CSS code. Also
448 * notice that most of the text properties, such as font, size and color,
449 * is inherited from containing <div>:s, in particular the <body>.
450 */
451 p {
452 text-indent: 0em;
453 margin-top: 0em;
454 margin-bottom: 0.8em;
455 }
456
457 #sourceView,
458 #imageView {
459 float: left;
460 width: 64.0em;
461 min-height: 440px;
462 padding: 1.0em;
463 border: 1px solid #cdcdcd;
464 margin: 8px 0px 8px 0px;
465 }
466
467 /*
468 * Fatten up the Courier for code viewing. For some strange reason, Courier
469 * is rendered as ridiculously thin in most browsers.
470 */
471 code {font-weight: 500;}
472
473 #sourceView span.linenum {
474 color: #bbbbbb; /* "Greyish"-colored, instead of "Goldish" #9d8b3e; */
475 }
476
477 /*
478 * Define the appearance of emphasized blocks in displayed code excerpts.
479 */
480 code em,
481 code span.comment {
482 font-style: normal; /* Don't use italic emphasis in displayed code blocks */
483 font-weight: normal; /* Avoid boldface here */
484 color: #9d8b3e; /* "Goldish"-colored, instead of "Greyish" #bbbbbb */
485 }
486
487 /*
488 * The block quote usually appears in the context as a display which, in
489 * addition to its narrower width, requires some extra margin at the top
490 * and bottom to look proper. Here we add the modest margin of 1em to the
491 * vertical margins.
492 */
493 blockquote {
494 width: 80%;
495 margin-top: 1em;
496 margin-bottom: 1em;
497 margin-left: 10%;
498 margin-right: 10%;
499 }
500
501 /*
502 * Definition of the general style of headers.
503 */
504 h1 {
505 font-size: 15px;
506 line-height: 18px;
507 margin-top: 0.9em;
508 margin-bottom: 0.9em;
509 }
510
511 h2 {
512 font-size: 12px;
513 line-height: 15px;
514 margin-top: 1.5em;
515 margin-bottom: 0.9em;
516 }
517
518 h3 {
519 font-size: 11px;
520 line-height: 14px;
521 margin-top: 1.5em;
522 margin-bottom: 0.9em;
523 }
524
525 /*
526 * Employing the external link-trick from Andy Budd's "CSS Mastery", leaving
527 * all browsers that properly follow the CSS standard to display an "external
528 * link" icon whenever the href of a link begins with "http". Unfortunately,
529 * Internet Explorer 6 is not such a browser. Notice that the 'a[href^="http"]'
530 * trick has to be defined before the general appearance of links. (See note
531 * in the section below.)
532 *
533 * As an additional feature of the external link trick, the displayed image
534 * is switched to one with a golden arrow (extlink-red.png) whenever the cursor
535 * hovers above the external link.
536 */
537 a[href^="http"] {
538 background: url(/ico/link/extlink.png) no-repeat top right;
539 padding-right: 10px;
540 }
541
542 a[href^="http"]:hover {
543 background: url(/ico/link/extlink-red.png) no-repeat right top;
544 /* color: #9d8b3e; */ /* "Goldish"-colored */
545 color: #999999; /* "Greyish"-colored */
546 }
547
548 a[href^="http://localhost"],
549 a[href^="http://jonsson.eu"],
550 a[href^="http://www.jonsson.eu"],
551 a[href^="http://"] img {
552 background-image: none;
553 padding-right: 0px;
554 }
555
556 a[href^="http://localhost"]:hover,
557 a[href^="http://jonsson.eu"]:hover,
558 a[href^="http://www.jonsson.eu"]:hover,
559 a[href^="http://"]:hover img {
560 background-image: none;
561 padding-right: 0px;
562 }
563
564 /*
565 * Another trick from Andy Budd's "CSS MAstery", to append a tiny PDF
566 * icon to any link with a href ending with ".pdf", using 'a[href$=".pdf"]'.
567 * Question: Does the 'a[href$=".pdf"]' trick work at all in Safari or IE6?
568 * I have so far only had it properly working in Opera or Firefox.
569 */
570 a[href$=".pdf"] { /* Any link to a PDF file */
571 background: url(/ico/link/pdflink.png) no-repeat right top;
572 padding-right: 10px;
573 }
574
575 a[href$=".mov"] { /* Any link to a QuickTime movie */
576 background: url(/ico/link/qt/quicktime-8x8.png) no-repeat right top;
577 padding-right: 10px;
578 }
579
580 /*
581 * Define the general appearance of links. Notice that it is important that
582 * the 'a[href^="http"]' trick above is declared first, as otherwise any
583 * different coloring effects on hovering etc. will be neglected for these
584 * external links, for some reason I haven't been able to track down yet.
585 * This behaviour I have found in Safari.
586 */
587 a:link {
588 color: #454545; /* Should be same colour as in the body{} definition */
589 border: 0px;
590 }
591
592 a:visited {
593 color: #454545;
594 }
595
596 a:hover {
597 /* color: #9d8b3e; */ /* "Goldish"-colored */
598 color: #999999; /* "Greyish"-colored */
599 }
600
601 a:active {
602 color: #555555;
603 }
604
605 /*
606 * Abbreviations and acronyms (<abbr> and <acronym>) are two elements which
607 * are rarely seen in web pages, but whenever present they a very nice touch
608 * of completeness. At jonsson.eu, these elements are rendered as underlined
609 * with a dotted pattern, to distinguish them from regular links.
610 */
611 abbr, acronym {
612 text-decoration: none;
613 border-bottom: 1px dotted #343434;
614 cursor: help;
615 }
616
617 /*
618 * Slightly reduce the font size for side content, to 95%.
619 */
620 #sideContent p {
621 font-size: 95%;
622 }
623
624 #sideContent h2 {
625 font-size: 100%; /* 10px */
626 margin-top: 0.2em;
627 margin-bottom: 0.5em;
628 }
629
630 #fullWidthLayout #primaryContent {
631 margin: 8px 0px 8px 0px;
632 min-height: 44em;
633 padding: 8px;
634 border: 1px solid #cdcdcd;
635 }
636
637 #fullWidthLayout #primaryContent .logentry {
638 float: left;
639 border-top: 1px solid black;
640 }
641
642 #fullWidthLayout #primaryContent .logentry .day {
643 float: left;
644 width: 189px; /* To match the left column of the two-column layout */
645 border: 0px;
646 color: #666666;
647 }
648
649 #fullWidthLayout #primaryContent .logentry .day .date {
650 float: left;
651 border: 0px;
652 margin: 0px;
653 font-weight: bold;
654 }
655
656 #fullWidthLayout #primaryContent .logentry .day .position,
657 #fullWidthLayout #primaryContent .logentry .day .wind {
658 float: left;
659 clear: left;
660 border: 0px;
661 margin: 0px;
662 }
663
664 #fullWidthLayout #primaryContent .logentry .text {
665 float: left;
666 width: 521px;
667 border: 0px;
668 }
669
670 /*
671 * Define the appearance of the title text of each log entry. Here, we tighten
672 * up the container box of the h2 element and apply a thin and grey bottom
673 * line expanding the full width of the title.
674 */
675 #fullWidthLayout #primaryContent .logentry .text h2 {
676 margin: 0px;
677 border-bottom: 1px solid #aaaaaa;
678 }
679
680 /*
681 * Make a slight adjustment to the way insets, such as images or additional
682 * boxes of text, appear within log entries. Here, we take into account that
683 * the log entries are floated and that the negative margin which is in place
684 * in the "usual" inset will cause problems in alignment to the right edge.
685 */
686 #fullWidthLayout #primaryContent .logentry div.inset,
687 #fullWidthLayout #primaryContent .logentry div.inset_left {
688 display: inline; /* Fixes the float double-margin bug */
689 float: right;
690 width: auto;
691 padding: 4px;
692 border: 1px solid #cdcdcd;
693 margin: 4px 0px 4px 8px;
694 }
695
696 #fullWidthLayout #primaryContent .logentry div.inset_left {
697 float: left;
698 margin: 4px 8px 4px 0px;
699 }
700
701 /*
702 * Define the appearance of combo boxes, or "option lists".
703 */
704 /* div.pulldown select */
705 option {
706 font-weight: bold; /* normal; */
707 }
708
709 div.pulldown select option.mainMenuItem {
710 font-weight: bold;
711 }
712
713 /*
714 * Define the general appearance of list items which appear within divs
715 * with id="primaryContent" (not being constructs of the navigation list).
716 * For ordered or unordered lists, as in the jonsson.eu site typically used
717 * in lists of articles, talks etc., we adjust the item spacing so as to
718 * produce a more readable text. This adjustment is only applied to list
719 * items within primaryContent divs, i.e. any list items in secondary or
720 * side columns are left unaffected by this adjustment.
721 */
722 #primaryContent ul,
723 #primaryContent ol {
724 padding: 0em;
725 margin: 0em 1em 1em 3em; /* Gives a moderate controlled indent of lists */
726 }
727
728 /*
729 * For nested ordered lists, as number the inner list with letters instead.
730 */
731 #primaryContent ol ol {
732 list-style-type: upper-roman;
733 padding: 0em;
734 margin: 0em 0em 0em 3em; /* Slightly increased indent for the inner list */
735 }
736
737 #primaryContent li {
738 margin: 0em;
739 }
740
741 #primaryContent .articleList li {
742 margin: 1.2em 0em;
743 }
744
745 /*
746 * Define the positioning of the language switch link. Whenever this link is
747 * placed directly within a div of ID primaryContent, it will be placed above
748 * the navigation bar and to the left in the page. This gives a well visible
749 * position for anyone entering the site, without cluttering up the overall
750 * impression of the page.
751 */
752 #primaryContent .languageSwitchEn, #primaryContent .languageSwitchSv {
753 float: right;
754 }
755
756 #primaryContent table {
757 text-align: left;
758 padding: 0px;
759 border: 0px;
760 border-top: 1px solid #666666;
761 border-bottom: 1px solid #666666;
762 margin: 0px;
763 }
764
765 /*******************
766 #primaryContent table caption {
767 padding: 0px;
768 border: 0px;
769 border-top: 2px solid #000000;
770 margin: 0px;
771 }
772 ********************/
773
774 #primaryContent table tr {
775 padding: 0px;
776 border: 0px solid green;
777 margin: 0px;
778 }
779
780 #primaryContent table tr td {
781 padding-left: 5px;
782 padding-right: 5px;
783 padding-top: 0px;
784 padding-bottom: 0px;
785 border: 0px;
786 margin: 0px;
787 }
788
789 /*
790 * Definition of variable-width box floated within the primary content area.
791 * Typically, the divs of class "inset" are used for items such as inset
792 * images etc, around which the text should be wrapped. For an example of
793 * usage, see the inset photo at http://www.jonsson.eu/biography/
794 */
795 #primaryContent div.inset {
796 display: inline; /* Fixes the float double-margin bug */
797 float: right;
798 width: auto;
799 padding: 4px;
800 border: 1px solid #cdcdcd;
801 margin: 0px 0px 0px 10px;
802 }
803
804 /* Hides from IE-mac \*/
805 * html #primaryContent div.inset {word-wrap: break-word;}
806 /* End hide from IE-mac */
807
808 .listdir ul {
809 margin: 0px;
810 padding: 0px;
811 list-style-type: none;
812 }
813
814 .listdir ul li {
815 padding-left: 17px;
816 }
817
818 #primaryContent.biography ul {
819 margin: 0px;
820 padding: 0px;
821 list-style-type: none;
822 }
823
824 #primaryContent.biography ul li {
825 background: url(/img/angle1.png) no-repeat 0em 0.2em;
826 padding-left: 17px;
827 }
828
829 #primaryContent.biography ul li li {
830 background: url(/img/angle2.png) no-repeat 0em 0.2em;
831 padding-left: 17px;
832 }
833
834 /*
835 * Whenever a list enclosed by a div of class "links" is placed in the
836 * primaryContent area, the box is displayed as a floating element to
837 * the right of the insertion point, somewhat resembling inset boxes
838 * at wikipedia.
839 *
840 */
841 #primaryContent div.links {
842 display: inline; /* Fixes the float double-margin bug */
843 float: right;
844 width: 15em;
845 padding: 1em;
846 border: 1px solid #cdcdcd;
847 margin: -6px -6px 4px 6px;
848 }
849
850 /* Hides from IE-mac \*/
851 * html #primaryContent div.links {word-wrap: break-word;}
852 /* End hide from IE-mac */
853
854 #primaryContent div.links ul {
855 list-style-type: none;
856 margin: 0px;
857 padding: 0px;
858 }
859
860 #primaryContent div.links ul li {
861 margin: 0px;
862 padding: 0px;
863 }
864
865 #primaryContent.genealogy div.links ul li a {
866 display: block;
867 padding: 3px 0px 3px 2px;
868 width: 100%;
869 }
870
871 html>body #primaryContent.genealogy div.links ul li a {
872 width: auto;
873 }
874
875 #primaryContent.genealogy div.links ul li a:hover {
876 color: #ffffff;
877 background-color: #999999;
878 }
879
880 /*
881 * Definitions of styling of items in the genealogy section of jonsson.eu.
882 */
883 #primaryContent.genealogy table {
884 border: 0px solid #555555;
885 margin: 0px;
886 }
887
888 #primaryContent.genealogy table td {
889 border: 0px solid #555555;
890 padding: 0px;
891 padding-left: 10px;
892 padding-right: 10px;
893 vertical-align: bottom;
894 }
895
896 #primaryContent.genealogy table td span.normal {
897 font-size: 71%;
898 }
899
900 #primaryContent.genealogy table td input {
901 width: 11em;
902 }
903
904 #primaryContent.genealogy table td input.submitButton {
905 width: 5em;
906 }
907
908 #primaryContent.genealogy table td input:hover {
909 /*background-color: #d3ff95;*/ /* Granny Smith-greenish */
910 }
911
912 #primaryContent.genealogy table td input:focus {
913 /*background-color: #d3ff95;*/ /* Granny Smith-greenish */
914 }
915
916 #sideContent.genealogy ul {
917 list-style-type: none;
918 margin: 0px;
919 padding: 0px;
920 }
921
922 #sideContent.genealogy ul li {
923 margin: 0px;
924 padding: 0px;
925 }
926
927 #sideContent.genealogy ul li a {
928 display: block;
929 padding: 3px 0px 3px 2px;
930 width: 100%;
931 }
932
933 html>body #sideContent.genealogy ul li a {
934 width: auto;
935 }
936
937 #sideContent.genealogy li a:hover {
938 color: #ffffff;
939 background-color: #454545;
940 }
941
942 /*
943 * Define how the "back to previous page"-link should be styled. First,
944 * this is be cleared vertically of any other floating elements in the
945 * primaryContent div, as taken care of by the clear:both statement.
946 * Second, the link should be flushed right on the page, which is taken
947 * care of by float:right. Finally, some extra top margin is applied in
948 * order to separate it slightly from the final paragraph of text (or
949 * image element, for that sake).
950 */
951 .back {
952 float: right;
953 clear: both;
954 margin-bottom: 0px;
955 margin-top: 0px;
956 }
957
958 .center {
959 text-align: center;
960 }
961
962 /*
963 * The way I have implemented it any two-column layout is based on floating
964 * boxes, for example using the "#primaryContent" and "#secondaryContent" id's.
965 * As floating boxes do not occupy any vertical space (or at least this is the
966 * way it should be according to the CSS standard), the footer line would not
967 * have any solid box to set margins against, unless we explicitly clear the
968 * last box with "clear: both;" in CSS.
969 *
970 * As we a priori do not know the last box, we instead rely on using
971 * "<div class="clear"></div>" in the XHTML code. This of course is an
972 * additional expense, but in this case it is at least a reasonable
973 * sacrifice. [See also the comments on this issue in Andy Budd's "CSS
974 * Mastery" (Apress, 2006).]
975 */
976 .clear {
977 clear: both;
978 }
979
980 /*
981 * Define the apperance of pull-down menu selectors, as for example
982 * appearing in the CSS layout selector present in the side contents
983 * area.
984 */
985 .pulldown {
986 margin: 0px 0px 0px 0px;
987 padding: 0px 0px 0px 0px;
988 background-color: transparent;
989 }
990
991 .pulldown select {
992 width: 100%;
993 margin: 4px 0px 0px 0px;
994 padding: 0px;
995 font-size: 10px;
996 }
997
998 /*
999 * We do not set an explicit with of the enclosing .searchForm div,
1000 * as this should be allowed to stretch according to the inline set
1001 * of items such as label, input area and submit button.
1002 */
1003 .searchForm {
1004 width: 100%;
1005 padding: 0px;
1006 border: 0px;
1007 margin: 1em;
1008 }
1009
1010 body .searchForm {display: none;}
1011 #sideContent .searchForm {display: none;}
1012
1013 .searchForm p.hidden {
1014 display: none;
1015 }
1016
1017 .searchForm input {
1018 width: 100%; /* 12em; */
1019 padding: 0px;
1020 margin: 1em;
1021 }
1022
1023 /*
1024 * Whenever the search form is placed above the navigation bar, as a direct
1025 * descendant of the body ID, I prefer the submit button to be hidden. The
1026 * way to start the search by just hitting ENTER is quite obvious in any
1027 * case for single text-area forms like this one.
1028 */
1029 .searchForm .sendButton {
1030 display: none;
1031 }
1032
1033 /*
1034 * The layout of the mail form as placed in the #sideContents div is
1035 * identical to that of divs belonging to the links class. Though this
1036 * seems to suggest that one mrges the mail form into a div of class
1037 * links and reduce the styling of the mail form, I believe the pure
1038 * way is to simply keep it separate, as the mail for clearly is not
1039 * a set of links.
1040 */
1041 form#mailForm {
1042 width: auto;
1043 padding: 1em;
1044 border: 1px solid #cdcdcd; /* Border of entire box, not the input forms! */
1045 margin: 0px;
1046 margin-bottom: 8px;
1047 }
1048
1049 /*
1050 * Comment on "width: 12.8em;": Unless set explicitly, IE6 will here
1051 * cause overflow with the result of the left column (being a float)
1052 * dropped below the prmary content. All other browsers (Safari, Opera,
1053 * Firefox, IE7) except IE6 accept 'auto' width here. In order only to
1054 * target IE6, the usual "* html"-hack is employed.
1055 */
1056 form#mailForm input, #mailForm textarea {
1057 width: 100%;
1058 border: 1px solid #ababab; /* Border of the input areas of the mail form */
1059 margin: 0px;
1060 margin-bottom: 3px;
1061 }
1062
1063 /*
1064 * Avoid overflow of input fields in IE6. (This block is only seem by IE6.)
1065 */
1066 /* Hides from IE-mac \*/
1067 * html form#mailForm input, * html #mailForm textarea {width: 12.2em;}
1068 /* End hide from IE-mac */
1069
1070 #mailForm textarea {
1071 height: 10em;
1072 }
1073
1074 /*
1075 * As also the input fields are enclosed in paragraph delimiters,
1076 * the setting of the following block affects labels as well as
1077 * input fields.
1078 */
1079 form#mailForm p {margin: 1px;}
1080
1081 /*
1082 * Make the font size of the labels 90% less in size than in input fields.
1083 */
1084 form#mailForm p.fieldLabel {font-size: 90%;}
1085
1086 /*
1087 * As the pointer is hovered above the input areas of the mail form, we
1088 * apply a slightly darker border of the area of focus, just for the
1089 * visual effect. Note: This block does not affect Safari, which makes
1090 * use of its default form borders instead.
1091 */
1092 #mailForm input:hover,
1093 #mailForm textarea:hover {
1094 background-color: #b4d5fe; /* Apple Macintosh Aqua-bluish */
1095 background-color: #c6fc7c; /* Spiced-up Granny Smith-greenish */
1096 background-color: #d3ff95; /* Granny Smith-greenish */
1097 background-color: #ffffff;
1098 border: 1px solid #666666;
1099 }
1100
1101 #mailForm input:active,
1102 #mailForm textarea:active {
1103 background-color: #d8e9fe;
1104 background-color: #c6fc7c; /* Spiced-up Granny Smith-greenish */
1105 background-color: #d3ff95; /* Granny Smith-greenish */
1106 background-color: #ffffff;
1107 border: 1px solid #666666;
1108 }
1109
1110 #mailForm .sendButton, #mailForm .clearButton, #mailForm .sendPasscodeButton {
1111 font-size: 90%;
1112 height: 1.8em;
1113 width: 5.2em;
1114 margin: 1px;
1115 padding: 0px;
1116 background-color: transparent;
1117 border: 1px solid #aaaaaa;
1118 }
1119
1120 /*
1121 * Set the passcode submission button wider than the other buttons, as this
1122 * is to cover the full extent of the side column.
1123 */
1124 #mailForm .sendPasscodeButton {width: 100%;}
1125
1126 /*
1127 * As the pointer is hovered above the buttons of the mail form, let the
1128 * buttons become gray with a white text and a dark border, again just for
1129 * the sake of visual effect. Note: This block does not affect Safari,
1130 * which make use of its beautiful default Aqua-style buttons instead.
1131 */
1132 #mailForm .sendButton:hover,
1133 #mailForm .clearButton:hover,
1134 #mailForm .sendPasscodeButton:hover {
1135 background-color: #aaaaaa;
1136 color: #ffffff;
1137 border: 1px solid #000000;
1138 }
1139
1140 #mailForm .emailFormFieldError {
1141 color: #aa0000;
1142 }
1143
1144 #mailForm .emailFormPasscodeRequest {
1145 color: #0044aa;
1146 }
1147
1148 #mailForm .thanksForYourMessage {
1149 color: #364f13;
1150 }
1151
1152 /*
1153 * Define the layout to apply to links to external (or internal) sites, as
1154 * in my site usually placed in the side contents. Here the definitions of
1155 * font sizes, line heights etc. are inherited from the #sideContent wrapper.
1156 */
1157 #sideContent .cloudnav,
1158 #sideContent .links {
1159 width: auto;
1160 padding: 1em;
1161 border: 1px solid #cdcdcd;
1162 margin-top: 0px;
1163 margin-bottom: 8px;
1164 margin-right: 0px;
1165 margin-left: 0px;
1166 }
1167
1168 /*
1169 * However, leave out the top border of the navigation cloud, which always
1170 * comes first in the side content.
1171 */
1172 .cloudnav {
1173 padding: 0px;
1174 border-top: 0px;
1175 }
1176
1177 /*
1178 * The "word-wrap: break-word;" is a highly useful feature to avoid having
1179 * IE6 stretching the containing div whenever a word is too long to be
1180 * fitted in one single line. One example is "www.literateprogramming.com",
1181 * which by IE is considered as one single word, and meanwhile also being
1182 * too long to be fit into a div of width 17.4em. Without the word-wrap
1183 * statement, this single word will stretch the links box, which stretches
1184 * the sideContent box, causing this to drop below the main content.
1185 * Better to sacrifice the appearance of (rarely occurring) long words than
1186 * spoiling the entire layout. See http://msdn.microsoft.com/workshop/author
1187 * /dhtml/reference/properties/wordwrap.asp
1188 */
1189 /* Hides from IE-mac \*/
1190 * html #sideContent .links {word-wrap: break-word;}
1191 /* End hide from IE-mac */
1192
1193 /*
1194 * The img-wrapper block creates a drop shadow of the image and adds a
1195 * white border surrounded by one pixel. This block is adopted from Andy
1196 * Budd's book "CSS Mastery", chapter three.
1197 */
1198 .img-wrapper {
1199 background: url(/img/shadow/shadow.png) no-repeat right bottom;
1200 float: left;
1201 }
1202
1203 .img-wrapper div {
1204 background: url(/img/shadow/mask.png) no-repeat left top !important;
1205 background: url(/img/shadow/mask.gif) no-repeat left top;
1206 padding: 0px 5px 0px 0px;
1207 float: left;
1208 }
1209
1210 .img-wrapper img {
1211 background-color: #ffffff;
1212 border: 1px solid #666666;
1213 padding: 4px;
1214 }
1215
1216 /*
1217 * The 'footerline' is the wrapper for the footer contents. This
1218 * wrapper is needed in order to get the two horizontal border
1219 * lines of the footer to extend all the way to the edges of the
1220 * window, still ensuring that the 'footer' contents itself (that
1221 * is to say, the items wrapped up by 'footerline') remain centered
1222 * and of a fixed width equal to that of 'contents'.
1223 *
1224 * To avoid that the footerline box clutters up with other elements,
1225 * we use the 'clear: both;' property to tell that it can not have
1226 * any elements next to it. This way, the footerline box will be
1227 * properly pushed down to form a self-standing entity in the document.
1228 */
1229 div#footerline {
1230 position: relative;
1231 padding: 0px;
1232 border-top: 1px solid black;
1233 border-left: 0px;
1234 border-right: 0px;
1235 border-bottom: 1px solid black;
1236 margin: 0px;
1237 width: 66.2em;
1238 height: 30px; /* Unless height is explicitly set, IE7 drops out of proper
1239 positioning of the contained element of ID footer (defined
1240 below). This seems to be a bug still lingering along in
1241 IE7 as of 17/11/2006. */
1242 background-color: #ffffff;
1243 background-repeat: no-repeat;
1244 background-position: 0px 0px;
1245 background-image: url(/img/hub/hub-700x30.png);
1246 }
1247
1248 /*
1249 * Here goes the 'footer' box, which in contrary to the previously
1250 * defined 'footerline' wrapper is of fixed width and also contains
1251 * definitions for the typography of any elements entered without
1252 * their own specifications.
1253 */
1254 div#footer {
1255 position: absolute;
1256 top: 0px;
1257 left: 0px;
1258 width: 66.2em;
1259 height: 27px;
1260 padding: 0px 0px 0px 0px;
1261 border: 0px solid red;
1262 margin: 0px 0px 0px 12px; /* Why do I need to set this margin for IE6? */
1263 margin: 0px 0px 0px 0px;
1264 background-color: transparent;
1265 }
1266
1267 /*
1268 * The langageSwitch class is used for the "In Swedish, please" field in the
1269 * footer of the page. We hook up the icon of a Swedish flag as a CSS entity
1270 * whenever <div class"langageSwitch">...</div> appears in the XHTML code.
1271 */
1272 #footer .languageSwitchSv {
1273 float: left;
1274 background: url(/img/lang/english.png) no-repeat 0px 4px;
1275 padding: 0px;
1276 margin: 0px;
1277 padding-left: 19px;
1278 }
1279
1280 #footer .languageSwitchEn {
1281 float: left;
1282 background: url(/img/lang/swedish.png) no-repeat 0px 4px;
1283 padding: 0px;
1284 margin: 0px;
1285 padding-left: 19px;
1286 }
1287
1288 /*
1289 * The "copyright" class is similar to "langageSwitch", with the difference
1290 * that no flag is attached and that the div is floated to the right instead.
1291 */
1292 #footer .copyright {
1293 float: right;
1294 padding: 0px;
1295 margin: 0px;
1296 }
1297
1298 /*
1299 * Define the class 'pagePostScriptum' to be applied to the final box of
1300 * the page, containing items like "Last modified" and "Copyright".
1301 */
1302 .pagePostScriptum {
1303 width: 100%;
1304 padding: 0px;
1305 border: 0px;
1306 margin: 4px 0px 40px 0px;
1307 font-size: 95%;
1308 line-height: 1.5em;
1309 font-style: italic;
1310 clear: both;
1311 }
1312
1313 /*
1314 * Within the pagePostScriptum div the items are floated; divs of the
1315 * lastModified class to the left and divs of the conformStatement class
1316 * to the right.
1317 */
1318 .pagePostScriptum .lastModified {
1319 float: left;
1320 }
1321
1322 .pagePostScriptum .conformStatement,
1323 .pagePostScriptum #qrcode {
1324 float: right;
1325 }
1326
1327 /*
1328 * Turn off general gaps between images.
1329 */
1330 img {
1331 border: 0px;
1332 }
1333
1334 /*
1335 * Sometimes a more "button-like" appearance of the links is desired.
1336 * For these cases, an extra semantic div of class "boxedlink" takes
1337 * care of the styling.
1338 */
1339 div.boxedlink a {
1340 padding: 3px 60px 3px 60px;
1341 border: 1px solid #666666;
1342 margin: 8px;
1343 text-decoration: none;
1344 }
1345
1346 div.boxedlink a:hover {
1347 background-color: #333333;
1348 color: #ffffff;
1349 text-decoration: none;
1350 }
1351
1352 div.boxedlink a:active {
1353 background-color: #555555;
1354 color: #ffffff;
1355 text-decoration: none;
1356 }
1357
1358 /*
1359 * Define the appearance of articles as appearing in the section listing
1360 * my published scientific papers.
1361 */
1362 .article {
1363 border: 0px;
1364 }
1365
1366 .article ol {
1367 /* clear: both; */
1368 font-size: 18px;
1369 }
1370
1371 .abstract {
1372 border: 0px;
1373 }
1374
1375 /*
1376 * The "forwardBackwardBox" class defines the wrapper for div:s containing
1377 * forward and backward links, for example in long texts split into several
1378 * pages.
1379 */
1380 .forwardBackwardBox {
1381 margin-top: 4px;
1382 margin-bottom: 22px;
1383 }
1384
1385 .backwardLink {
1386 font-weight: bold;
1387 /*
1388 font-size: 11px;
1389 line-height: 14px;
1390 */
1391 float: left;
1392 background: url(/ico/link/backward.png) no-repeat left;
1393 padding-left: 20px;
1394 }
1395
1396 .forwardLink {
1397 font-weight: bold;
1398 float: right;
1399 background: url(/ico/link/forward.png) no-repeat right;
1400 padding-right: 20px;
1401 }
1402
1403 /*
1404 * Define the appearance of program entries. The overall layout of the
1405 * entries is defined once, using the icon for WEB programs as default,
1406 * after which the corresponding icons for Fortran, C, PHP and PostScript
1407 * are linked to the appropriate classes. Hence, we start out with the
1408 * specification of all common properties...
1409 */
1410 .cwebProgramEntry,
1411 .fortranProgramEntry,
1412 .cProgramEntry,
1413 .phpProgramEntry,
1414 .psProgramEntry,
1415 .generalProgramEntry {
1416 background-color: #ffffff;
1417 background-color: transparent;
1418 background-image: url(/ico/48x48/web-48x48.png);
1419 background-position: top left;
1420 background-repeat: no-repeat;
1421 background-attachment: scroll;
1422 border: solid 0px #ccccff;
1423 min-height: 60px;
1424 margin-top: 8px;
1425 margin-bottom: 8px;
1426 }
1427
1428 /*
1429 * ... which is followed by specifications of the respective icons to use.
1430 */
1431 .fortranProgramEntry { background-image: url(/ico/48x48/fortran-48x48.png); }
1432 .cProgramEntry { background-image: url(/ico/48x48/c-48x48.png); }
1433 .phpProgramEntry { background-image: url(/ico/48x48/php-48x48.png); }
1434 .psProgramEntry { background-image: url(/ico/48x48/ps-48x48.png); }
1435 .generalProgramEntry { background-image: url(/ico/48x48/plaincode-48x48.png); }
1436
1437 /*
1438 * An approach similar to the above is used for the styling of listings of
1439 * individual source files, where a specification of common properties...
1440 */
1441 .cwebSourceFileEntry,
1442 .makefileSourceFileEntry,
1443 .cSourceFileEntry,
1444 .fortranSourceFileEntry,
1445 .texSourceFileEntry,
1446 .phpSourceFileEntry,
1447 .psSourceFileEntry,
1448 .metapostSourceFileEntry,
1449 .pdfSourceFileEntry,
1450 .djvuSourceFileEntry,
1451 .exeSourceFileEntry {
1452 background-color: #ffffff;
1453 background-color: transparent;
1454 background-image: url(/ico/16x16/web-16x16.png);
1455 background-position: top left;
1456 background-repeat: no-repeat;
1457 background-attachment: scroll;
1458 border: solid 0px #ffbbbb;
1459 min-height: 16px;
1460 margin-top: 8px;
1461 margin-bottom: 8px;
1462 }
1463
1464 /*
1465 * ... is followed by specifications of the respective icons to use.
1466 */
1467 .makefileSourceFileEntry {background-image: url(/ico/16x16/builder-16x16.png);}
1468 .cSourceFileEntry {background-image: url(/ico/16x16/c-16x16.png);}
1469 .fortranSourceFileEntry {background-image: url(/ico/16x16/fortran-16x16.png);}
1470 .texSourceFileEntry {background-image: url(/ico/16x16/tex-16x16.png);}
1471 .phpSourceFileEntry {background-image: url(/ico/16x16/php-16x16.png);}
1472 .psSourceFileEntry {background-image: url(/ico/16x16/ps-16x16.png);}
1473 .metapostSourceFileEntry {background-image: url(/ico/16x16/mp-16x16.png);}
1474 .pdfSourceFileEntry {background-image: url(/ico/16x16/adobereader-16x16.png);}
1475 .djvuSourceFileEntry {background-image: url(/ico/16x16/djvu-16x16.png);}
1476 .exeSourceFileEntry {background-image: url(/ico/16x16/x-16x16.png);}
1477
1478 .flow {
1479 float: left;
1480 clear: left;
1481 margin: 0px 0px 0px 0px;
1482 }
1483
1484 /*
1485 * Define styles specific to the PHP macro package 'photoview'. As this package
1486 * is considered as a "plugin-in", I prefer to tie up the styling of elements
1487 * quite strictly with a leading #photoview statement in each block.
1488 */
1489 #photoview {
1490 /* width: 860px; */
1491 padding: 0px;
1492 margin: 0px;
1493 border: 0px solid blue;
1494 }
1495
1496 #photoview .catalogueBanner {
1497 width: 238px;
1498 margin: 3px;
1499 border: 0px solid #990000;
1500 float: left;
1501 }
1502
1503 #photoview .catalogueBanner img {
1504 width: 221px;
1505 height: 58px;
1506 }
1507
1508 #photoview .catalogueBanner a:hover img {
1509 background-color: #c2c291; /* #ac9c51; */
1510 }
1511
1512 #photoview .catalogueBanner p {
1513 text-decoration: none;
1514 }
1515
1516 /*
1517 * The img-wrapper block creates a drop shadow of the image and adds a
1518 * white border surrounded by one pixel. This block is adopted from Andy
1519 * Budd's book "CSS Mastery", chapter three.
1520 */
1521 #photoview .img-wrapper, #photoview .img-wrapper-portrait
1522 {
1523 background: url(/img/photoview/shadow/shadow.png) no-repeat right bottom;
1524 float: left;
1525 }
1526
1527 #photoview .img-wrapper-portrait {
1528 margin-left: 70px;
1529 }
1530
1531 #photoview .img-wrapper div, #photoview .img-wrapper-portrait div {
1532 background: url(/img/photoview/shadow/mask.png) no-repeat left top;
1533 padding: 0px 5px 2px 0px;
1534 border: 0px;
1535 margin: 0px;
1536 float: left;
1537 }
1538
1539 #photoview .img-wrapper img, #photoview .img-wrapper-portrait img {
1540 background-color: #ffffff;
1541 border: 1px solid #777777; /* #999999; */
1542 padding: 5px;
1543 }
1544
1545 /*
1546 * Define the enclosing "bounding-box" div of each slide frame. This div will
1547 * typically contain the image of the slide frame, the drop-cast shadow from
1548 * this, the image thumb-nail to display, and the text label of the slide.
1549 * margin-bottom: This is the vertical spacing between the arranged slides.
1550 */
1551 #photoview .slide {
1552 padding: 0px;
1553 border: 0px solid green;
1554 margin-top: 0px;
1555 margin-left: 0px;
1556 margin-right: 1px;
1557 margin-bottom: 8px;
1558 float: left;
1559 }
1560
1561 #photoview .slide .slide-shadow {
1562 background: url(/img/photoview/shadow.png) no-repeat right bottom;
1563 float: left;
1564 }
1565
1566 #photoview .slide .slide-shadow div {
1567 background: url(/img/photoview/fuzzmask.png) no-repeat left top;
1568 padding: 0px;
1569 border: 0px;
1570 margin: 0px;
1571 float: left;
1572 }
1573
1574 /*
1575 * The displayed slides will all act as links to respective images of higher
1576 * resolution. However, any text that is accompanying the slides within the
1577 * slide frame area should in visual appearance not resemble regular links
1578 * as such. The following block causes any anchor within a div of class
1579 * 'slideshadow' to turn off its underlining of text.
1580 */
1581 .slide .slide-shadow div a {
1582 text-decoration: none;
1583 }
1584
1585 /*
1586 * Define the frame appearance of slides displayed in contact sheet mode.
1587 * The width of divs of class "slideFrame" is set to half the horizontal
1588 * width of the frame image. (Recall that we here use the roll-over technique,
1589 * with the inactive and hovered state of the slide frame incorporated in
1590 * the same background image, which is shifted depending on the state to
1591 * display.
1592 */
1593 #photoview .slide .slide-shadow div .slideFrame {
1594 width: 132px; /* This is half the width of the frame image. */
1595 height: 132px; /* This is the full height of the frame image. */
1596 padding: 0px;
1597 border: 0px;
1598 margin-top: 0px;
1599 margin-left: 0px;
1600 margin-right: 5px; /* To allow for the drop-cast shadow of 5px. */
1601 margin-bottom: 5px; /* To allow for the drop-cast shadow of 5px. */
1602 background-repeat: no-repeat;
1603 background-image: url(/img/photoview/slide.png);
1604 background-position: 0px 0px; /* The slide frame placed in top left
1605 position of the enclosing div of
1606 class 'slideFrame'. */
1607 }
1608
1609 /*
1610 * Define the positioning for the slides for next and previous images in
1611 * "slideshow" display mode.
1612 */
1613 .previousImage, .nextImage {
1614 margin: 5px;
1615 margin-top: 40px;
1616 position: absolute;
1617 border: 0px solid red;
1618 }
1619
1620 .previousImage {
1621 margin-left: 3px;
1622 }
1623
1624 .nextImage {
1625 margin-left: 694px;
1626 }
1627
1628 /*
1629 * In order to prevent any flickering of the image the first time the cursor
1630 * is hovered above the slide, we preload the composite image of the slide
1631 * frame and simply displace this image as we hover above it. This is (again)
1632 * a trick properly described in Andy Budd's book "CSS Mastery", there denoted
1633 * as the "Pixy-style rollover" technique (with due credit to Petr Stanicek,
1634 * the originator of the technique).
1635 */
1636 #photoview .slide .slide-shadow div .slideFrame:hover {
1637 background-position: -132px 0px; /* Displace exactly one frame width */
1638 }
1639
1640 #photoview .previousImage .slide .slide-shadow div div.slideFrame {
1641 background-image: url(/img/photoview/slide-prev.png);
1642 }
1643
1644 #photoview .previousImage .slide .slide-shadow div div.slideFrame:hover {
1645 background-position: -132px 0px; /* Displace exactly one frame width */
1646 }
1647
1648 #photoview .nextImage .slide .slide-shadow div div.slideFrame {
1649 background-image: url(/img/photoview/slide-next.png);
1650 }
1651
1652 #photoview .nextImage .slide .slide-shadow div div.slideFrame:hover {
1653 background-position: -132px 0px; /* Displace exactly one frame width */
1654 }
1655
1656 /*
1657 * Define the appearance of the images displayed in the slide frames. The
1658 * width and height here refer to the displayed image, with the inner
1659 * border thickness (that is, 2x2px) added to this. The top margin of 28px
1660 * is used for the vertical positioning of the image, while the left and
1661 * right margins ensure that the image is horizontally centered in the
1662 * frame (2x15px + 98px + 2x2px = 132px).
1663 */
1664 #photoview .slideFrame img {
1665 width: 98px; /* Width of the thumb-nail image displayed in the slide. */
1666 height: 74px; /* Height of the thumb-nail image displayed in the slide. */
1667 padding: 0px;
1668 border-top: 2px solid #555555; /* Interior drop-cast shadow. */
1669 border-left: 2px solid #555555; /* Interior drop-cast shadow. */
1670 border-right: 2px solid #a0a0a0; /* Interior drop-cast shadow. */
1671 border-bottom: 2px solid #bfbfbf; /* Interior drop-cast shadow. */
1672 margin-top: 28px;
1673 margin-left: 15px;
1674 margin-right: 15px;
1675 margin-bottom: 9px;
1676 }
1677
1678 #photoview .slideFrame img.portrait {
1679 width: 74px;
1680 height: 98px;
1681 margin-top: 15px;
1682 margin-left: 28px;
1683 margin-right: 28px;
1684 margin-bottom: -2px;
1685 }
1686
1687 /*
1688 * Define how any text on the slide frames should appear. Typically, this
1689 * is the date of exposure as shown on each slide viewed in, for example,
1690 * contact sheet mode. These settings apply regardless of whether the image
1691 * is displayed in portrait or landscape mode.
1692 */
1693 div.slideFrame p {
1694 font-family: verdana, helvetica, arial, sans-serif;
1695 font-size: 9px;
1696 line-height: 12px;
1697 text-indent: 0px;
1698 text-align: center;
1699 margin: 0px;
1700 color: #343434;
1701 }
1702
1703 #photoview .mainImage {
1704 width: 545px;
1705 padding: 0px;
1706 border: 0px solid red;
1707 margin: 0px;
1708 margin-top: -30px;
1709 margin-left: 145px;
1710 float: left;
1711 /* position: absolute; */
1712 }
1713
1714 /*
1715 * Set width of image area in landscape display mode.
1716 */
1717 #photoview .mainImage img {
1718 width: 528px;
1719 height: 396px;
1720 }
1721
1722 /*
1723 * Set width of image area in portrait display mode.
1724 */
1725 #photoview .mainImage img.portrait {
1726 width: 396px;
1727 height: 528px;
1728 }
1729
1730 #photoview .mainImage p {
1731 clear: both;
1732 }
1733
1734 #photoview #contactSheetSwitch {
1735 position: absolute;
1736 top: 138px;
1737 left: 18px;
1738 }
1739
1740 #photoview p.footerBanner {
1741 margin-top: 460px;
1742 }
1743
1744 /*
1745 * Define styling of the sitemap of jonsson.eu, at http://jonsson.eu/sitemap/.
1746 * The (X)HTML blocks for the sitemap are recursively computed by the
1747 * SITEMAP PHP script, available at http://jonsson.eu/programs/php/sitemap/.
1748 */
1749 div#sitemap {
1750 padding: 0px;
1751 border: 0px;
1752 margin: 0px;
1753 }
1754
1755 /*
1756 * Determine the amount of indentation at each level of listing of sub-
1757 * directories in the site map. Also, set the leftmost containing border
1758 * of each (unordered) list <ul>...</ul> of subdirectories. I like to
1759 * keep things arranged this way so that one gets a visual clarity of
1760 * which blocks belong to which parent directory (which otherwise can be
1761 * hard if the sitemap is extended way off the current view).
1762 */
1763 div#sitemap ul {
1764 list-style: none; /* remove bullets of items in the navigation menu */
1765 padding-top: 6px;
1766 padding-bottom: 10px;
1767 margin-left: 20px;
1768 border-left: 1px solid #888888;
1769 border-bottom: 0px solid #888888; /* For a "full-size hook" */
1770 background: url(/img/hook.png) no-repeat bottom left; /* "small hook" */
1771 margin-bottom: 1px;
1772 }
1773
1774 /*
1775 * The "single line-dot" should be aligned to the very left (0ex) and 0.8ex
1776 * from the top. As usual, the x-height (ex), or "corpus size", refers to
1777 * the distance between the baseline and the mean line in a typeface.
1778 * This way, the site map is styled like:
1779 *
1780 * --* Some directory
1781 * |
1782 * +--* A sub-directory
1783 * | |
1784 * | +--* A sub-sub-directory
1785 * | |
1786 * | +--* Another sub-sub-directory
1787 * |
1788 * +--* Another sub-directory
1789 */
1790 div#sitemap ul li {
1791 margin-top: 6px;
1792 background: url(/img/dot.png) no-repeat 0ex .8ex;
1793 padding-left: 20px;
1794 }
1795
1796 /*
1797 * Definitions related to the formatting of ebook pages, such as browsing
1798 * controls, indexing and page access, etc. These blocks were originally
1799 * added for the formatting of the pages of Abramowitz and Stegun's reference
1800 * work "Handbook of Mathematical Functions", at http://jonsson.eu/hmf/
1801 */
1802 div.ebook_header h1,
1803 div.ebook_header h2 {
1804 float: left;
1805 }
1806
1807 div.ebook_header p {
1808 line-height: 15px;
1809 margin-top: 1.5em;
1810 margin-bottom: 0.9em;
1811 float: right;
1812 }
1813
1814 #oneColLayout #ebook {
1815 float: left;
1816 width: 64.0em;
1817 min-height: 440px;
1818 padding: 1.0em;
1819 border: 1px solid #cdcdcd;
1820 margin: 8px 0px 8px 0px;
1821 }
1822
1823 #oneColLayout #ebook ul {
1824 list-style: none; /* remove bullets of items in the index */
1825 margin-left: 6px;
1826 }
1827
1828 #oneColLayout #ebook ul ul {
1829 margin-left: 50px;
1830 font-style: italic;
1831 }
1832
1833 #oneColLayout #ebook div.pulldown {
1834 margin-top: 2px;
1835 margin-bottom: 10px;
1836 margin-left: auto;
1837 margin-right: auto;
1838 width: 36em;
1839 }
1840
1841 #oneColLayout #ebook .page_control {
1842 padding: 0px;
1843 width: 100%;
1844 margin-left: auto;
1845 margin-right: auto;
1846 margin-top: 10px;
1847 margin-bottom: 4px;
1848 text-align: center;
1849 }
1850
1851 #oneColLayout #ebook .page_control a.prev_page,
1852 #oneColLayout #ebook .page_control a.pdf_page,
1853 #oneColLayout #ebook .page_control a.png_page,
1854 #oneColLayout #ebook .page_control a.next_page {
1855 width: 8em;
1856 float: left;
1857 text-align: left;
1858 padding: 0px 10px 0px 10px;
1859 }
1860
1861 #oneColLayout #ebook .page_control a.pdf_page,
1862 #oneColLayout #ebook .page_control a.png_page {
1863 width: 14em;
1864 text-align: center;
1865 }
1866
1867 #oneColLayout #ebook .page_control a.next_page {
1868 float: right;
1869 text-align: right;
1870 }
1871
1872 .toc ul {
1873 list-style:none;
1874 /* width:40%; */
1875 }
1876
1877 .toc ul li {
1878 background:url(/ico/ebook/tocdot.png) repeat-x 0 1.0em;
1879 }
1880
1881 .toc ul li span.pages {
1882 float:right;
1883 padding-right: 0px;
1884 padding-left: 6px; /* Provides margin to the dotted line */
1885 background: #ffffff; /* Hide dots behind the text displayed by the link */
1886 }
1887
1888 .toc li span.subject {
1889 float:left;
1890 padding-left: 0px;
1891 padding-right: 4px; /* Provides margin to the dotted line */
1892 background: #ffffff; /* Hide dots behind the text displayed for the item */
1893 }
1894
1895 .toc li br {
1896 clear:both;
1897 }
1898
1899 /*
1900 * Display of equation numbers in displayed equations. See, for example,
1901 * http://jonsson.eu/research/lectures/lect1/web/
1902 */
1903 span.eqdef {
1904 float: right;
1905 }
1906
Generated by ::viewsrc::