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