Contents of file '../../../css/jonssona.css':
1 /*-----------------------------------------------------------------------------
2 File: http://jonsson.eu/css/jonssona.css [Cascaded Style Sheet]
3 Created: May 28, 2006
4 Last change: November 30, 2006
5 Description: The "Bluebox" layout of jonsson.eu.
6 Author: Fredrik Jonsson <http://jonsson.eu>
7 Copyright (C) 2006, Fredrik Jonsson
8 -----------------------------------------------------------------------------*/
9
10 /*
11 * Now we proceed with layout-specific blocks.
12 * We here apply "color: #ff0000;" in order to be able to immediately trace
13 * down paragraphs of text not properly enclosed in <p>...</p>.
14 */
15 body {
16 padding: 0px;
17 border: 0px;
18 margin: 0px;
19 background-color: #ffffff;
20 font-family: verdana, arial, helvetica, sans-serif;
21 color: #2b2b2b;
22 font-size: 11px;
23 line-height: 15px;
24 /* font-size: small; */
25 text-align: center; /* To put the overall container in centered layout */
26 }
27
28 #container {
29 width: 700px;
30 margin: 0px auto;
31 text-align: left;
32 border: 0px solid green;
33 /* font-size: 80%; */
34 }
35
36 body#fullWidthLayout #container {
37 width: 100%;
38 }
39
40 /*
41 * The #navbar div in the XHTML code is the overall container for the
42 * brand, page header and navigation menu. The "clear: both;" is added
43 * to ensure that any floated objects are cleared before proceeding with
44 * the body of the page.
45 */
46 #navBar {
47 padding: 0px;
48 border: 0px solid green;
49 border-bottom: 3px solid #70a020;
50 margin: 0px;
51 height: 100px;
52 width: 700px;
53 margin-top: 0px;
54 background-color: #112f56;
55 background-image: url(/img/brushed/blue-700x100.png);
56 background-repeat: no-repeat;
57 background-position: 0px 0px;
58 clear: both;
59 }
60
61 /*
62 * The #brand div serves the purpose of being the container for the
63 * logo image in the page header. However, for browsers not capable
64 * of properly rendering the CSS styling, or even browsers with CSS
65 * disabled entirely, the #brand div also provides a header text,
66 * which under normal circumstances are hidden from the viewer by
67 * the "text-indent: -5000px;" statement.
68 */
69 #brand {
70 /*
71 position: absolute;
72 top: 38px;
73 left: 0px;
74 padding: 0px;
75 border: 1px solid red;
76 margin: 0px;
77 width: 116px;
78 height: 33px;
79 background-color: #000000;
80 background-color: #773333;
81 */
82 /*
83 background-image: url(/img/headfoot/jonsson-116x33.png);
84 background-repeat: no-repeat;
85 background-position: 0px 0px;
86 text-indent: -5000px;
87 */
88 display: none;
89 }
90
91 /*
92 * In order not to cause a box overflow within the #brand div due to
93 * the hidden header present, we here explicitly set the font size and
94 * margins. The only browser so far that had any problems with this is,
95 * not really surprisingly, Internet Explorer 6, obviously due to its
96 * pre-set table of rendering parameters. (Not really a bug as such.)
97 */
98 #brand h1 {
99 line-height: 10px;
100 margin: 0px;
101 font-size: 18px;
102 }
103
104 /*
105 * Set margin-left to 0px in order to force the navigation menu to
106 * always stay flush to its leftmost position. Otherwise, if set to
107 * auto, the navigation bar will be liquid, with navMenuContainer
108 * horizontally centered in the window.
109 *
110 * The margin settings "margin-left: 0px;" and "margin-right: auto;"
111 * here forces the #navMenuContainer div to be left aligned in the
112 * browser window, leaving 116px to the left edge by the "left: 116px;"
113 * statement. I suppose that this in principle could be solved by simply
114 * stating "left: 0px;" and a left margin of 116px, but in IE6 this does
115 * not seem to render properly, for some reason which I have not bothered
116 * to figure out yet.
117 */
118 #navMenuContainer {
119 position: relative;
120 top: 60px;
121 left: 190px;
122 padding: 0px;
123 border: 0px;
124 margin: 0px;
125 width: 42.4em;
126 margin-left: 0px;
127 margin-right: auto;
128 }
129
130 /*
131 * Starting out with the Navigation List ID selector 'navMenu', which
132 * is the top-level container of the navigation menus to be defined
133 * later on, we wish this to be centered in the page, of a height
134 * containing two rows of navigation buttons (the 'main' and 'submenu')
135 * each of total height 17 pixels.
136 *
137 * For the width of the Navigation List, we go for a fixed width just enough
138 * to contain five navigation buttons of the 'main' type, each of which we
139 * from now on choose to be of a total width of 102 pixels. This hence gives
140 * a total width of 5x102px=510px. This particular choice is nice not only
141 * as it gives a balanced layout, but also because it allows for the sub-menu
142 * to be grouped in six items as well as five. For example, by choosing six
143 * sub-menu items, each item should be of 85px width, hence also summing up
144 * to the total width of 510px.
145 *
146 * We here apply "text-align: center;" in order to center the text contained
147 * in any of the descendants of the #navMenu div. This way, we only specify
148 * the centering once and for all, with no need for repeating this in the
149 * formatting of any of the menu or sub-menu list items.
150 *
151 * The interior height of the entire, compound navigation bar, excluding the
152 * top and bottom borders, is set to 33px. (Recall that in the correct CSS
153 * box model, width and height refer to the interior dimensions, to which
154 * padding, borders and margins are to be added. In this particular case
155 * there is no horizontal padding or margins, so only the border thicknesses
156 * will be added.
157 */
158 #navMenu {
159 padding: 0px;
160 border: 0px solid cyan;
161 /* border-bottom: 1px solid #ffffff; */ /* #c4c617; */
162 margin: 0px;
163 position: relative;
164 top: 0px;
165 left: 0px;
166 /*
167 */
168 text-align: center;
169 /* width: 516px;*/ /* 6x96px = 576px */
170 /* height: 37px; */
171 height: 3.4em;
172 background-color: transparent;
173 white-space: nowrap;
174 }
175
176 /*
177 * Now define the appearance of all items in the main menu.
178 *
179 * First of all, recall that in correctly specified CSS, the 'width' and
180 * 'height' values refer to the width and height of the content area.
181 * By adding padding, borders and margins, the size of the content area
182 * is not affected but the overall size of the box of an element will be
183 * increased.
184 *
185 * For the list items in the main menu of the jonsson.eu site, we go for
186 * an overall margin of 0px (as the menu items all are to be flushed as
187 * tight as possible against each other) and a border of 1px. For the text,
188 * a font size of 12px is chosen, which typically corresponds to capital 'X'
189 * being of 9px height and the 'g' extending 3px below the base line, hence
190 * summing up to text lines being of 12px height. Text of this height is to
191 * fit into boxes of height 15 px.
192 */
193 #navMenu li {
194 /* height: 15px; */
195 float: left;
196 padding: 0px;
197 border-top: 0px solid red; /* The top and bottom borders add in total 2px */
198 border-bottom: 0px solid red; /* to the total height of the menu buttons. */
199 border-left: 0px;
200 border-right: 0px;
201 margin: 0px; /* Zero margin keeps the buttons as tight as possible */
202 list-style-type: none;
203 /* list-style: none; */
204 /* font: 12px/12px helvetica, tahoma, sans-serif; */
205 font: 1em/120% helvetica, tahoma, sans-serif;
206 }
207
208 /*
209 * Continued definition of appearance of all inactive items in the main
210 * menu, now targeting the styling of the anchors of the menu items.
211 * In this, we do not wish to add any additional border to the inactive
212 * items, just as for the active item.
213 */
214 #navMenu li a {
215 position: relative;
216 width: 7em; /* 86px; */
217 height: 1.4em; /*15/13px*/
218 display: block;
219 padding-top: 1px; /* 1px */
220 padding-left: 0px;
221 padding-right: 0px;
222 padding-bottom: 1px;
223 border-top: 0px;
224 border-left: 0px;
225 border-right: 0px;
226 border-bottom: 1px solid #c4c617;
227 margin: 0px;
228 color: #b1b224;
229 background-color: transparent;
230 text-decoration: none;
231 }
232
233 /*
234 * Define the appearance of the inactive items in the main menu as the
235 * cursor gets into focus, or "hover" above them.
236 */
237 #navMenu li a:hover {
238 color: #ffffff;
239 background-color: #09192e; /* #0e2747; */
240 }
241
242 /*
243 * As an inactive item in the main menu gets into focus, it will with the
244 * previous "#navMenu li a:hover" block get a light amber colour. I have
245 * here added the feature that the item also will assume a darker shade
246 * the moment the item is selected by clicking, explicitly stating that
247 * an action is to take place.
248 */
249 #navMenu li a:active {
250 color: #000000;
251 background-color: #666666;
252 }
253
254 /*
255 * Define appearance of the active selection in the main menu.
256 *
257 * As we for this item add left and right borders of 1px each, we here
258 * reduce the overall width of the item by 2px, hence leaving the active
259 * item being of the same width as the inactive ones. This construction
260 * is merely for the sake of keeping simplicity in the calculation of the
261 * overall width of the navigation bar, as we later on will center it in
262 * the containing wrapper and in the overall layout.
263 *
264 * Here the menu item width is set to two pixels less than the width of
265 * inactive items, due to the 2x1px border. Also, we do not add any
266 * additional border to the active item, just as this was avoided for
267 * the other, inactive items in the main menu.
268 */
269 #navMenu li#active a {
270 font-weight: normal;
271 /*
272 height: 15px;
273 width: 84px;
274 */
275 background-color: transparent;
276 color: #ffffff;
277 padding: 0px;
278 padding-bottom: 1px;
279 padding-top: 1px;
280 border-top: 1px solid #c4c617;
281 border-left: 1px solid #c4c617;
282 border-right: 1px solid #c4c617;
283 border-bottom: 0px;
284 }
285
286 /*
287 * Define the appearance of the active item in the main menu as the
288 * pointer gets into focus, or "hover" above the item. My philosophy
289 * here is that the active items should be fixed in appearance, and
290 * that only inactive items should flash up when getting into focus.
291 */
292 #navMenu li#active a:hover { background-color: #09192e; /* #0e2747; */ }
293
294 /*
295 * As for the main menu, we also in the sub-menu apply no margins in order
296 * to keep the button as tight as possible together.
297 *
298 * Important: The "left: 0px;" is here added to ensure that the items are
299 * flushed left; without this the submenu items starts listing to the right
300 * from below the active item in the main menu.
301 */
302 #navMenu ul#subnavMenu {
303 position: absolute;
304 width: 43em;
305 left: 0px;
306 top: 1.7em;
307 padding: 0px;
308 border: 0px;
309 margin: 0px;
310 white-space: nowrap;
311 background-color: transparent;
312 color: #ffffff;
313 }
314
315 #navMenu ul#subnavMenu li {
316 width: 7em;
317 height: 1.4em;
318 margin-right: 0px;
319 border: 0px;
320 }
321
322 /*
323 * As for the main menu, I prefer to flush the text labels also of the
324 * sub-menu down two pixels.
325 */
326 #navMenu ul#subnavMenu li a {
327 width: auto;
328 padding: 0px;
329 padding-top: 2px;
330 border: 0px;
331 }
332
333 /*
334 * Define appearance of inactive items in the submenu as the pointer
335 * hovers above the item.
336 */
337 #navMenu ul#subnavMenu li a:hover {
338 color: #ffffff;
339 background-color: #09192e; /* #0e2747; */
340 }
341
342 /*
343 * As an inactive item in the submenu is clicked, it should assume the same
344 * colour as its cousins in the main menu assume as they are selected, that
345 * is to say a dark-amberish tone.
346 */
347 #navMenu ul#subnavMenu li a:active {
348 color: #000000;
349 background-color: #666666;
350 }
351
352 /*
353 * Define appearance of active item in sub-menu. The only difference
354 * between an active and an inactive menu item is here that the former
355 * is set in bold typeface and the later not.
356 */
357 #navMenu ul#subnavMenu li#subactive a {
358 font-weight: bold;
359 }
360
361 * html > body #navMenu, * html > body #navMenu ul#subnavMenu {
362 width: 516px; /* IE5/Mac fixed width fix */
363 }
364
365 #magiceye {
366 top: 85px;
367 left: 43px;
368 width: 14px;
369 height: 14px;
370 background-image: url(/img/cameleont/cameleont-eye-28x14.png);
371 background-position: 0px 0px; /* Displace exactly one frame width */
372 background-position: -14px 0px; /* Displace exactly one frame width */
373 position: absolute;
374 }
375
376 #magiceye:hover {
377 background-position: 0px 0px; /* Displace exactly one frame width */
378 }
379
380 /*****************
381 #magiceye .hotspot {
382 top: 15px;
383 left: 10px;
384 width: 14px;
385 height: 14px;
386 border: 1px #ff4444;
387 position: relative;
388 }
389 *****************/
390
391 /*
392 * Define a simple layout to be applied to pages in which we do not wish to
393 * include a full navigation bar, such as in, for example, the initial root
394 * page at which the language to be used is chosen. In this "clean" page style
395 * only a banner at the left edge will appear.
396 */
397 #cleanPage {
398 background-color: #ffffff;
399 color: #dd4444;
400 background-image: url(/img/jonssonlogo/jonssonlogo.png);
401 background-repeat: no-repeat;
402 background-attachment: fixed;
403 background-position: 10px 40px;
404 }
405
406 /*
407 * The top level of the layout definition of non-empty pages has essentially
408 * two divs controlling the display modes: the oneColLayout and twoColLayout.
409 * In the oneColLayout layout, there is only one column of what we here denote
410 * as "primary" content. However, we allow for side content such as language
411 * switches and compact message forms, links etc. to be displayed along with
412 * the main text area.
413 *
414 */
415 #oneColLayout #primaryContent {
416 float: right;
417 width: 494px;
418 min-height: 440px;
419 padding: 10px;
420 border: 1px solid #cdcdcd;
421 margin-top: 8px; /* Seen by all browsers, but kept only by IE6 */
422 margin-bottom: 8px; /* Seen by all browsers, but kept only by IE6 */
423 margin-left: 0px; /*98px;*//* Seen by all browsers, but kept only by IE6 */
424 margin-right: /* 4px; *//* Seen by all browsers, but kept only by IE6 */
425 }
426
427 #oneColLayout #sourceView {
428 float: left;
429 width: 678px;
430 min-height: 440px;
431 padding: 10px;
432 border: 1px solid #cdcdcd;
433 margin-top: 8px; /* Seen by all browsers, but kept only by IE6 */
434 margin-bottom: 8px; /* Seen by all browsers, but kept only by IE6 */
435 margin-left: 0px; /* Seen by all browsers, but kept only by IE6 */
436 margin-right: 0px; /* 4px; */ /* Seen by all browsers, but kept only by IE6 */
437 }
438
439 #oneColLayout #imageView {
440 float: left;
441 width: 678px;
442 min-height: 440px;
443 padding: 10px;
444 border: 1px solid #cdcdcd;
445 margin-top: 8px; /* Seen by all browsers, but kept only by IE6 */
446 margin-bottom: 8px; /* Seen by all browsers, but kept only by IE6 */
447 margin-left: 0px; /* Seen by all browsers, but kept only by IE6 */
448 margin-right: 0px; /* 4px; */ /* Seen by all browsers, but kept only by IE6 */
449 }
450
451 #oneColLayout #sideContent {
452 float: left;
453 width: 176px; /* 188px */
454 padding: 0px;
455 border: 0px solid blue;
456 margin-top: 4px; /* Seen by all browsers, but kept only by IE6 */
457 margin-bottom: 8px; /* Seen by all browsers, but kept only by IE6 */
458 margin-left: 0px; /* -711px;*/ /* Seen by all browsers, but kept only by IE6 */
459 margin-right: 0px; /* 4px; */ /* Seen by all browsers, but kept only by IE6 */
460 }
461
462 #sideContent p {
463 font-family: helvetica, verdana, geneva, tahoma, sans-serif;
464 color: #343434;
465 font-size: 10px;
466 line-height: 14px;
467 }
468
469 #sideContent h2 {
470 font-size: 10px;
471 margin: 0px;
472 }
473
474 #fullWidthLayout #primaryContent {
475 margin: 8px;
476 min-height: 440px;
477 padding: 8px;
478 border: 1px solid #cdcdcd;
479 }
480
481 /*
482 * Define the general appearance of list items which appear within divs
483 * with id="primaryContent" (not being constructs of the navigation list).
484 * For ordered or unordered lists, as in the jonsson.eu site typically used
485 * in lists of articles, talks etc., we adjust the item spacing so as to
486 * produce a more readable text. This adjustment is only applied to list
487 * items within primaryContent divs, i.e. any list items in secondary or
488 * side columns are left unaffected by this adjustment.
489 */
490 #primaryContent li {
491 margin: 0em 0em;
492 }
493
494 #primaryContent .articleList li {
495 margin: 1em 0em;
496 }
497
498 /*
499 * Define the positioning of the language switch link. Whenever this link is
500 * placed directly within a div of ID primaryContent, it will be placed above
501 * the navigation bar and to the left in the page. This gives a well visible
502 * position for anyone entering the site, without cluttering up the overall
503 * impression of the page.
504 */
505 #primaryContent .languageSwitchEn, #primaryContent .languageSwitchSv {
506 /*
507 position: absolute;
508 top: 19px;
509 left: 0px;
510 position: relative;
511 margin-left: -70px;
512 margin-top: -10px;
513 */
514 position: absolute;
515 margin-left: 30%;
516 margin-top: 10px;
517 display: none; /* Have to fix this! */
518 }
519
520 #primaryContent .languageSwitchEn a, #primaryContent .languageSwitchSv a {
521 color: #b1b224;
522 }
523
524 #primaryContent table {
525 border: 1px solid #555555;
526 margin: 0px;
527 }
528
529 #primaryContent table td {
530 border: 1px solid #555555;
531 padding: 0px;
532 padding-left: 30px;
533 padding-right: 30px;
534 }
535
536 /*
537 * Definition of variable-width box floated within the primary content area.
538 * Typically, the divs of class "inset" are used for items such as inset
539 * images etc, around which the text should be wrapped. For an example of
540 * usage, see the inset photo at http://www.jonsson.eu/biography/
541 */
542 #primaryContent div.inset {
543 display: inline; /* Fixes the float double-margin bug */
544 float: right;
545 width: auto;
546 padding: 4px;
547 border: 1px solid #cdcdcd;
548 margin: -6px -6px 4px 6px;
549 }
550
551 /* Hides from IE-mac \*/
552 * html #primaryContent div.inset {word-wrap: break-word;}
553 /* End hide from IE-mac */
554
555 /*
556 * Define how the "back to previous page"-link should be styled. First,
557 * this is be cleared vertically of any other floating elements in the
558 * primaryContent div, as taken care of by the clear:both statement.
559 * Second, the link should be flushed right on the page, which is taken
560 * care of by float:right. Finally, some extra top margin is applied in
561 * order to separate it slightly from the final paragraph of text (or
562 * image element, for that sake).
563 */
564 .back {
565 float: right;
566 clear: both;
567 margin-bottom: 0px;
568 margin-top: 0px;
569 }
570
571 .center {
572 text-align: center;
573 }
574
575 /*
576 * The way I have implemented it any two-column layout is based on floating
577 * boxes, for example using the "#primaryContent" and "#secondaryContent" id's.
578 * As floating boxes do not occupy any vertical space (or at least this is the
579 * way it should be according to the CSS standard), the footer line would not
580 * have any solid box to set margins against, unless we explicitly clear the
581 * last box with "clear: both;" in CSS.
582 *
583 * As we a priori do not know the last box, we instead rely on using
584 * "<div class="clear"></div>" in the XHTML code. This of course is an
585 * additional expense, but in this case it is at least a reasonable
586 * sacrifice. [See also the comments on this issue in Andy Budd's "CSS
587 * Mastery" (Apress, 2006).]
588 */
589 .clear {
590 clear: both;
591 }
592
593 /*
594 * Define the apperance of pull-down menu selectors, as for example
595 * appearing in the CSS layout selector present in the side contents
596 * area.
597 */
598 .pulldown {
599 margin: 0px 0px 0px 0px;
600 padding: 0px 0px 0px 0px;
601 background-color: transparent;
602 }
603
604 .pulldown select {
605 width: 100%;
606 margin: 4px 0px 0px 0px;
607 padding: 0px;
608 font-size: 10px;
609 }
610
611 #mailForm, #searchForm {
612 font-family: Helvetica,Tahoma,"Trebuchet MS", sans-serif;
613 font-size: 10px;
614 margin-top: 4px;
615 margin-bottom: 4px;
616 margin-right: 0px; /* 4px; */
617 margin-left: 0px; /* 4px; */
618 width: 154px;
619 padding: 10px;
620 text-align: left;
621 border: 1px solid #cdcdcd;
622 float: left;
623 }
624
625 #mailForm form, #searchForm form {
626 padding: 0px;
627 margin: 0px;
628 }
629
630 /*
631 * This input width controls the search form as well as all address-fields
632 * in the short messenger on the main page.
633 */
634 #mailForm p {
635 line-height: 10px;
636 padding: 0px;
637 margin: 1px;
638 }
639
640 #mailForm input, #mailForm textarea, #searchForm input {
641 width: 144px;
642 margin: 0px;
643 margin-bottom: 3px;
644 }
645
646 #mailForm input:hover, #searchForm input:hover {
647 background-color: #f2f2bb;
648 }
649
650 #mailForm input:focus, #searchForm input:focus {
651 background-color: #f2f2bb;
652 }
653
654 #mailForm textarea {
655 width: 144px;
656 height: 110px;
657 margin: 0px;
658 }
659
660 #mailForm .sendButton, #mailForm .clearButton, #searchForm .sendButton {
661 font-family: verdana, helvetica, geneva, tahoma, sans-serif;
662 font-size: 11px;
663 height: 20px;
664 width: 56px;
665 margin: 1px;
666 padding: 0px;
667 }
668
669 #mailForm .emailFormFieldError {
670 color: #aa0000;
671 }
672
673 #mailForm .thanksForYourMessage {
674 color: #0000aa;
675 }
676
677 /*
678 * Define how the layout for the email form should be whenever it appears
679 * in the primaryContent area (instead of in the sideContent). This is the
680 * case in the contact page, for example.
681 */
682 #primaryContent #mailForm {
683 width: 450px;
684 border: 0px solid #000000;
685 }
686
687 #primaryContent #mailForm input {
688 width: 190px;
689 margin: 0px;
690 }
691
692 #primaryContent #mailForm input:hover {
693 background-color: #d2d2bc;
694 }
695
696 #primaryContent #mailForm textarea {
697 width: 350px;
698 height: 170px;
699 margin: 0px;
700 }
701
702 /*
703 * As the mailForm is brought into the primaryContent area (instead of its
704 * usual placement in the side contents area), the submit and clear buttons
705 * get stretched out in Safari unless their width are set again. For some
706 * reason, this helps Safari not to loose track of the button sizes, though
707 * I do not believe that it should be necessary to do this.
708 */
709 #primaryContent #mailForm .sendButton, #primaryContent #mailForm .clearButton {
710 font-size: 11px;
711 height: 20px;
712 width: 56px;
713 }
714
715 /*
716 * Fatten up the Courier for code viewing. For some strange reason, Courier
717 * is rendered as ridiculously thin in most browsers.
718 */
719 code {font-weight: 500;}
720
721 /*
722 * Define the appearance of emphasized blocks in displayed code excerpts.
723 */
724 code em {
725 font-style: normal; /* Don't use italic emphasis in displayed code blocks */
726 font-weight: normal; /* Avoid boldface here */
727 color: red;
728 }
729
730 /*
731 * The block quote usually appears in the context as a display which, in
732 * addition to its narrower width, requires some extra margin at the top
733 * and bottom to look proper. Here we add the modest margin of 1em to the
734 * vertical margins.
735 */
736 blockquote {
737 width: 80%;
738 margin-top: 1em;
739 margin-bottom: 1em;
740 margin-left: 10%;
741 margin-right: 10%;
742 }
743
744 body#oneColLayout #searchForm, body#fullWidthLayout #searchForm {
745 /*
746 position: absolute;
747 top: 11px;
748 left: 453px;
749 */
750 width: 262px;
751 padding: 0px;
752 border: 0px;
753 margin: 0px;
754 margin-top: -94px;
755 margin-left: 430px;
756 font-family: verdana, arial, helvetica, sans-serif;
757 font-size: 11px;
758 color: #b1b224;
759 display: inline;
760 }
761
762 body#oneColLayout #searchForm form, body#fullWidthLayout #searchForm form {
763 width: 260px;
764 padding: 0px;
765 border: 0px;
766 margin: 0px;
767 }
768
769 body #searchForm form p {
770 float: right;
771 padding: 0px;
772 border: 0px;
773 margin: 0px;
774 }
775
776 body #searchForm form p.hidden {
777 display: none;
778 }
779
780 /*
781 * Whenever the search form is placed above the navigation bar, as a direct
782 * descendant of the body ID, I prefer the submit button to be hidden. The
783 * way to start the search by just hitting ENTER is quite obvious in any
784 * case for single text-area forms like this one.
785 */
786 body#oneColLayout #searchForm .sendButton, body#fullWidthLayout #searchForm .sendButton {
787 display: none;
788 }
789
790 div.searchForm {display: none;}
791
792 /*
793 * Define the layout to apply to links to external (or internal) sites, as
794 * in my site usually placed in the side contents. Here the definitions of
795 * font sizes, line heights etc. are inherited from the #sideContent wrapper.
796 */
797 .cloudnav,
798 .links {
799 margin-top: 4px;
800 margin-bottom: 4px;
801 margin-right: 0px;
802 margin-left: 0px;
803 width: 154px;
804 padding: 10px;
805 border: 1px solid #cdcdcd;
806 float: left;
807 }
808
809 /*
810 * However, leave out the top border of the navigation cloud, which always
811 * comes first in the side content.
812 */
813 .cloudnav {
814 padding: 0px;
815 border-top: 0px;
816 }
817
818 /*
819 * The img-wrapper block creates a drop shadow of the image and adds a
820 * white border surrounded by one pixel. This block is adopted from Andy
821 * Budd's book "CSS Mastery", chapter three.
822 */
823 .img-wrapper {
824 background: url(/img/shadow/shadow.png) no-repeat right bottom;
825 float: left;
826 }
827
828 .img-wrapper div {
829 background: url(/img/shadow/mask.png) no-repeat left top;
830 padding: 0px 5px 2px 0px;
831 border: 0px;
832 margin: 0px;
833 float: left;
834 }
835
836 .img-wrapper img {
837 background-color: #ffffff;
838 border: 1px solid #999999;
839 padding: 5px;
840 }
841
842 /*
843 * The 'footerline' is the wrapper for the footer contents. This
844 * wrapper is needed in order to get the two horizontal border
845 * lines of the footer to extend all the way to the edges of the
846 * window, still ensuring that the 'footer' contents itself (that
847 * is to say, the items wrapped up by 'footerline') remain centered
848 * and of a fixed width equal to that of 'contents'.
849 *
850 * To avoid that the footerline box clutters up with other elements,
851 * we use the 'clear: both;' property to tell that it can not have
852 * any elements next to it. This way, the footerline box will be
853 * properly pushed down to form a self-standing entity in the document.
854 */
855 div#footerline {
856 padding: 0px;
857 border-top: 2px solid #70a020;
858 border-left: 0px;
859 border-right: 0px;
860 border-bottom: 2px solid #70a020;
861 margin-top: 4px;
862 margin-bottom: 0px;
863 margin-right: auto;
864 margin-left: 0px;
865 width: auto;
866 height: 20px; /* Unless height is explicitly set, IE7 drops out of proper
867 positioning of the contained element of ID footer (defined
868 below). This seems to be a bug still lingering along in
869 IE7 as of 17/11/2006. */
870 background-color: #112f56;
871 background-repeat: no-repeat;
872 background-position: 0px 0px;
873 /* background-image: url(/img/headfoot/footback-678x20.png); */
874 background-image: url(/img/brushed/blue-700x20.png);
875 }
876
877 /*
878 * Here goes the 'footer' box, which in contrary to the previously
879 * defined 'footerline' wrapper is of fixed width and also contains
880 * definitions for the typography of any elements entered without
881 * their own specifications.
882 */
883 div#footer {
884 margin: 0px;
885 margin-left: 0px;
886 width: 700px;
887 height: 17px; /* 17px+3px (height+padding) equals height of image */
888 padding: 3px 0px 0px 0px;
889 background-color: transparent;
890 color: #b1b224;
891 color: #ffffff;
892 border: 0px;
893 font-size: 11px;
894 }
895
896 /*
897 * The langageSwitch class is used for the "In Swedish, please" field in the
898 * footer of the page. We hook up the icon of a Swedish flag as a CSS entity
899 * whenever <div class"langageSwitch">...</div> appears in the XHTML code.
900 */
901 .languageSwitchSv {
902 float: left;
903 background: url(/img/lang/english.png) no-repeat 12px 2px;
904 padding-left: 30px;
905 }
906
907 .languageSwitchEn {
908 float: left;
909 background: url(/img/lang/swedish.png) no-repeat 12px 2px;
910 padding-left: 30px;
911 }
912
913 /*
914 * Whenever the language switch is placed in the footer area (that is to
915 * say, being child of an entity of the footer ID), we need to place this
916 * in a considerably lighter shade, as the footer area is quite dark.
917 */
918 #footer .languageSwitchSv a, #footer .languageSwitchEn a {
919 color: #ffffff;
920 }
921
922 /*
923 * The "copyright" class is similar to "langageSwitch", with the difference
924 * that no flag is attached and that the div is floated to the right instead.
925 */
926 #footer .copyright {
927 float: right;
928 padding-right: 10px;
929 }
930
931 /*
932 * Define the class 'pagePostScriptum' to be applied to the final box of
933 * the page, containing items like "Last modified" and "Copyright".
934 */
935 .pagePostScriptum {
936 margin-top: 6px;
937 margin-bottom: 0px;
938 margin-right: auto;
939 margin-left: 0x;
940 width: 700px;
941 height: 34px;
942 padding: 0px;
943 border: 0px;
944 font-size: 10px;
945 line-height: 13px;
946 font-style: italic;
947 clear: both;
948 }
949
950 /*
951 * Within the pagePostScriptum div the items are floated; divs of the
952 * lastModified class to the left and divs of the conformStatement class
953 * to the right.
954 */
955 .pagePostScriptum .lastModified {
956 float: left;
957 }
958
959 .pagePostScriptum .conformStatement {
960 float: right;
961 }
962
963 /*
964 * Definition of the general style of headers.
965 */
966 h1 {
967 font-size: 15px;
968 line-height: 18px;
969 }
970
971 h2 {
972 font-size: 12px;
973 line-height: 15px;
974 }
975
976 h3 {
977 font-size: 11px;
978 line-height: 14px;
979 }
980
981 /*
982 * Turn off general gaps between images.
983 */
984 img {
985 border: 0px;
986 }
987
988 /*
989 * Employing the external link-trick from Andy Budd's "CSS Mastery", leaving
990 * all browsers that properly follow the CSS standard to display an "external
991 * link" icon whenever the href of a link begins with "http". Unfortunately,
992 * Internet Explorer 6 is not such a browser. Notice that the 'a[href^="http"]'
993 * trick has to be defined before the general appearance of links. (See note
994 * in the section below.)
995 *
996 * As an additional feature of the external link trick, the displayed image
997 * is switched to one with a red arrow (extlink-red.png) whenever the cursor
998 * hovers above the external link.
999 */
1000 a[href^="http"] {
1001 background: url(/ico/link/extlink.png) no-repeat top right;
1002 color: #343434;
1003 padding-right: 10px;
1004 }
1005
1006 a[href^="http"]:hover {
1007 background: url(/ico/link/extlink-red.png) no-repeat right top;
1008 color: #999999;
1009 }
1010
1011 a[href^="http://localhost"], a[href^="http://www.jonsson.eu"], a[href^="http://www.spinor.eu"], a[href^="http://"] img {
1012 background-image: none;
1013 padding-right: 0px;
1014 }
1015
1016 a[href^="http://localhost"]:hover, a[href^="http://www.jonsson.eu"]:hover, a[href^="http://www.spinor.eu"]:hover, a[href^="http://"]:hover img {
1017 background-image: none;
1018 padding-right: 0px;
1019 }
1020
1021 /*
1022 * Another trick from Andy Budd's "CSS MAstery", to append a tiny PDF
1023 * icon to any link with a href ending with ".pdf", using 'a[href$=".pdf"]'.
1024 * Question: Does the 'a[href$=".pdf"]' trick work at all in Safari or IE6?
1025 * I have so far only had it properly working in Opera or Firefox.
1026 */
1027 a[href$=".pdf"] {
1028 background: url(/ico/link/pdflink.png) no-repeat right top;
1029 color: #343434;
1030 padding-right: 10px;
1031 }
1032
1033 /*
1034 * Define the general appearance of links. Notice that it is important that
1035 * the 'a[href^="http"]' trick above is declared first, as otherwise any
1036 * different coloring effects on hovering etc. will be neglected for these
1037 * external links, for some reason I haven't been able to track down yet.
1038 * This behaviour I have found in Safari.
1039 */
1040 a:link {
1041 color: #343434;
1042 border: 0px;
1043 }
1044
1045 a:visited {
1046 color: #343434;
1047 }
1048
1049 a:hover {
1050 color: #999999;
1051 }
1052
1053 a:active {
1054 color: #0000ff;
1055 }
1056
1057 abbr, acronym {
1058 text-decoration: none;
1059 border-bottom: 1px dotted #343434;
1060 cursor: help;
1061 }
1062
1063 /*
1064 * Sometimes a more "button-like" appearance of the links is desired.
1065 * For these cases, an extra semantic div of class "boxedlink" takes
1066 * care of the styling.
1067 */
1068 div.boxedlink a {
1069 padding: 4px;
1070 border: 1px solid #666666;
1071 margin: 8px;
1072 text-decoration: none;
1073 }
1074
1075 div.boxedlink a:hover {
1076 background-color: #333333;
1077 color: #ffffff;
1078 text-decoration: none;
1079 }
1080
1081 div.boxedlink a:active {
1082 background-color: #555555;
1083 color: #ffffff;
1084 text-decoration: none;
1085 }
1086
1087 /*
1088 * Define the appearance of articles as appearing in the section listing
1089 * my published scientific papers.
1090 */
1091 .article {
1092 border: 0px;
1093 }
1094
1095 .article ol {
1096 /* clear: both; */
1097 font-size: 18px;
1098 }
1099
1100 .abstract {
1101 border: 0px;
1102 }
1103
1104 /*
1105 * The "forwardBackwardBox" class defines the wrapper for div:s containing
1106 * forward and backward links, for example in long texts split into several
1107 * pages.
1108 */
1109 .forwardBackwardBox {
1110 margin-top: 4px;
1111 margin-bottom: 22px;
1112 }
1113
1114 .backwardLink {
1115 font-size: 11px;
1116 font-weight: bold;
1117 line-height: 14px;
1118 float: left;
1119 background: url(/ico/link/backward.png) no-repeat left;
1120 padding-left: 20px;
1121 }
1122
1123 .forwardLink {
1124 font-size: 11px;
1125 font-weight: bold;
1126 line-height: 14px;
1127 float: right;
1128 background: url(/ico/link/forward.png) no-repeat right;
1129 padding-right: 20px;
1130 }
1131
1132 .generalPageEntry {
1133 background-color: #ffffff;
1134 background-color: transparent;
1135 border: solid 0px #ccccff;
1136 margin-top: 4px;
1137 margin-bottom: 4px;
1138 }
1139
1140 .generalPageEntry img {
1141 float: left;
1142 border: solid 1px #000000;
1143 margin: 0px;
1144 padding: 0px;
1145 clear: none;
1146 }
1147
1148 .generalPageEntry p {
1149 float: left;
1150 border: solid 0px #000000;
1151 width: 420px;
1152 margin: 0px;
1153 margin-left: 10px;
1154 padding: 0px;
1155 clear: none;
1156 }
1157
1158 .cwebProgramEntry {
1159 background-color: #ffffff;
1160 background-color: transparent;
1161 background-image: url(/ico/48x48/web-48x48.png);
1162 background-position: top left;
1163 background-repeat: no-repeat;
1164 background-attachment: scroll;
1165 border: solid 0px #ccccff;
1166 min-height: 60px;
1167 margin-top: 8px;
1168 margin-bottom: 8px;
1169 }
1170
1171 .fortranProgramEntry {
1172 background-color: #ffffff;
1173 background-color: transparent;
1174 background-image: url(/ico/48x48/fortran-48x48.png);
1175 background-position: top left;
1176 background-repeat: no-repeat;
1177 background-attachment: scroll;
1178 border: solid 0px #ccccff;
1179 min-height: 60px;
1180 margin-top: 8px;
1181 margin-bottom: 8px;
1182 }
1183
1184 .cProgramEntry {
1185 background-color: #ffffff;
1186 background-color: transparent;
1187 background-image: url(/ico/48x48/c-48x48.png);
1188 background-position: top left;
1189 background-repeat: no-repeat;
1190 background-attachment: scroll;
1191 border: solid 0px #ccccff;
1192 min-height: 60px;
1193 margin-top: 8px;
1194 margin-bottom: 8px;
1195 }
1196
1197 .phpProgramEntry {
1198 background-color: #ffffff;
1199 background-color: transparent;
1200 background-image: url(/ico/48x48/php-48x48.png);
1201 background-position: top left;
1202 background-repeat: no-repeat;
1203 background-attachment: scroll;
1204 border: solid 0px #ccccff;
1205 min-height: 60px;
1206 margin-top: 8px;
1207 margin-bottom: 8px;
1208 }
1209
1210 .psProgramEntry {
1211 background-color: #ffffff;
1212 background-color: transparent;
1213 background-image: url(/ico/48x48/ps-48x48.png);
1214 background-position: top left;
1215 background-repeat: no-repeat;
1216 background-attachment: scroll;
1217 border: solid 0px #ccccff;
1218 min-height: 60px;
1219 margin-top: 8px;
1220 margin-bottom: 8px;
1221 }
1222
1223 .makefileSourceFileEntry {
1224 background-color: #ffffff;
1225 background-color: transparent;
1226 background-image: url(/ico/16x16/builder-16x16.png);
1227 background-position: top left;
1228 background-repeat: no-repeat;
1229 background-attachment: scroll;
1230 border: solid 0px #ffbbbb;
1231 min-height: 16px;
1232 margin-top: 8px;
1233 margin-bottom: 8px;
1234 }
1235
1236 .cwebSourceFileEntry {
1237 background-color: #ffffff;
1238 background-color: transparent;
1239 background-image: url(/ico/16x16/web-16x16.png);
1240 background-position: top left;
1241 background-repeat: no-repeat;
1242 background-attachment: scroll;
1243 border: solid 0px #ffbbbb;
1244 min-height: 16px;
1245 margin-top: 8px;
1246 margin-bottom: 8px;
1247 }
1248
1249 .cSourceFileEntry {
1250 background-color: #ffffff;
1251 background-color: transparent;
1252 background-image: url(/ico/16x16/c-16x16.png);
1253 background-position: top left;
1254 background-repeat: no-repeat;
1255 background-attachment: scroll;
1256 border: solid 0px #ffbbbb;
1257 min-height: 16px;
1258 margin-top: 8px;
1259 margin-bottom: 8px;
1260 }
1261
1262 .fortranSourceFileEntry {
1263 background-color: #ffffff;
1264 background-color: transparent;
1265 background-image: url(/ico/16x16/fortran-16x16.png);
1266 background-position: top left;
1267 background-repeat: no-repeat;
1268 background-attachment: scroll;
1269 border: solid 0px #ffbbbb;
1270 min-height: 16px;
1271 margin-top: 8px;
1272 margin-bottom: 8px;
1273 }
1274
1275 .texSourceFileEntry {
1276 background-color: #ffffff;
1277 background-color: transparent;
1278 background-image: url(/ico/16x16/tex-16x16.png);
1279 background-position: top left;
1280 background-repeat: no-repeat;
1281 background-attachment: scroll;
1282 border: solid 0px #ffbbbb;
1283 min-height: 16px;
1284 margin-top: 8px;
1285 margin-bottom: 8px;
1286 }
1287
1288 .phpSourceFileEntry {
1289 background-color: #ffffff;
1290 background-color: transparent;
1291 background-image: url(/ico/16x16/php-16x16.png);
1292 background-position: top left;
1293 background-repeat: no-repeat;
1294 background-attachment: scroll;
1295 border: solid 0px #ffbbbb;
1296 min-height: 16px;
1297 margin-top: 8px;
1298 margin-bottom: 8px;
1299 }
1300
1301 .psSourceFileEntry {
1302 background-color: #ffffff;
1303 background-color: transparent;
1304 background-image: url(/ico/16x16/ps-16x16.png);
1305 background-position: top left;
1306 background-repeat: no-repeat;
1307 background-attachment: scroll;
1308 border: solid 0px #ffbbbb;
1309 min-height: 16px;
1310 margin-top: 8px;
1311 margin-bottom: 8px;
1312 }
1313
1314 .metapostSourceFileEntry {
1315 background-color: #ffffff;
1316 background-color: transparent;
1317 background-image: url(/ico/16x16/mp-16x16.png);
1318 background-position: top left;
1319 background-repeat: no-repeat;
1320 background-attachment: scroll;
1321 border: solid 0px #ffbbbb;
1322 min-height: 16px;
1323 margin-top: 8px;
1324 margin-bottom: 8px;
1325 }
1326
1327 .pdfSourceFileEntry {
1328 background-color: #ffffff;
1329 background-color: transparent;
1330 background-image: url(/ico/16x16/adobereader-16x16.png);
1331 background-position: top left;
1332 background-repeat: no-repeat;
1333 background-attachment: scroll;
1334 border: solid 0px #ffbbbb;
1335 min-height: 16px;
1336 margin-top: 8px;
1337 margin-bottom: 8px;
1338 }
1339
1340 .djvuSourceFileEntry {
1341 background-color: #ffffff;
1342 background-color: transparent;
1343 background-image: url(/ico/16x16/djvu-16x16.png);
1344 background-position: top left;
1345 background-repeat: no-repeat;
1346 background-attachment: scroll;
1347 border: solid 0px #ffbbbb;
1348 min-height: 16px;
1349 margin-top: 8px;
1350 margin-bottom: 8px;
1351 }
1352
1353 .exeSourceFileEntry {
1354 background-color: #ffffff;
1355 background-color: transparent;
1356 background-image: url(/ico/16x16/x-16x16.png);
1357 background-position: top left;
1358 background-repeat: no-repeat;
1359 background-attachment: scroll;
1360 border: solid 0px #ffbbbb;
1361 min-height: 16px;
1362 margin-top: 8px;
1363 margin-bottom: 8px;
1364 }
1365
1366 .flow {
1367 float: left;
1368 clear: left;
1369 margin: 0px 0px 0px 0px;
1370 }
1371
1372 /*
1373 * Define styles specific to the PHP macro package 'photoview'. As this package
1374 * is considered as a "plugin-in", I prefer to tie up the styling of elements
1375 * quite strictly with a leading #photoview statement in each block.
1376 */
1377 #photoview {
1378 /* width: 860px; */
1379 padding: 0px;
1380 margin: 0px;
1381 border: 0px solid blue;
1382 }
1383
1384 #photoview .catalogueBanner {
1385 width: 238px;
1386 margin: 3px;
1387 border: 0px solid #990000;
1388 float: left;
1389 }
1390
1391 #photoview .catalogueBanner img {
1392 width: 221px;
1393 height: 58px;
1394 }
1395
1396 #photoview .catalogueBanner a:hover img {
1397 background-color: #c2c291; /* #ac9c51; */
1398 }
1399
1400 #photoview .catalogueBanner p {
1401 text-decoration: none;
1402 }
1403
1404 /*
1405 * The img-wrapper block creates a drop shadow of the image and adds a
1406 * white border surrounded by one pixel. This block is adopted from Andy
1407 * Budd's book "CSS Mastery", chapter three.
1408 */
1409 #photoview .img-wrapper, #photoview .img-wrapper-portrait
1410 {
1411 background: url(/img/photoview/shadow/shadow.png) no-repeat right bottom;
1412 float: left;
1413 }
1414
1415 #photoview .img-wrapper-portrait {
1416 margin-left: 70px;
1417 }
1418
1419 #photoview .img-wrapper div, #photoview .img-wrapper-portrait div {
1420 background: url(/img/photoview/shadow/mask.png) no-repeat left top;
1421 padding: 0px 5px 2px 0px;
1422 border: 0px;
1423 margin: 0px;
1424 float: left;
1425 }
1426
1427 #photoview .img-wrapper img, #photoview .img-wrapper-portrait img {
1428 background-color: #ffffff;
1429 border: 1px solid #777777; /* #999999; */
1430 padding: 5px;
1431 }
1432
1433 /*
1434 * Define the enclosing "bounding-box" div of each slide frame. This div will
1435 * typically contain the image of the slide frame, the drop-cast shadow from
1436 * this, the image thumb-nail to display, and the text label of the slide.
1437 * margin-bottom: This is the vertical spacing between the arranged slides.
1438 */
1439 #photoview .slide {
1440 padding: 0px;
1441 border: 0px solid green;
1442 margin-top: 0px;
1443 margin-left: 0px;
1444 margin-right: 1px;
1445 margin-bottom: 8px;
1446 float: left;
1447 }
1448
1449 #photoview .slide .slide-shadow {
1450 background: url(/img/photoview/shadow.png) no-repeat right bottom;
1451 float: left;
1452 }
1453
1454 #photoview .slide .slide-shadow div {
1455 background: url(/img/photoview/fuzzmask.png) no-repeat left top;
1456 padding: 0px;
1457 border: 0px;
1458 margin: 0px;
1459 float: left;
1460 }
1461
1462 /*
1463 * The displayed slides will all act as links to respective images of higher
1464 * resolution. However, any text that is accompanying the slides within the
1465 * slide frame area should in visual appearance not resemble regular links
1466 * as such. The following block causes any anchor within a div of class
1467 * 'slideshadow' to turn off its underlining of text.
1468 */
1469 .slide .slide-shadow div a {
1470 text-decoration: none;
1471 }
1472
1473 /*
1474 * Define the frame appearance of slides displayed in contact sheet mode.
1475 * The width of divs of class "slideFrame" is set to half the horizontal
1476 * width of the frame image. (Recall that we here use the roll-over technique,
1477 * with the inactive and hovered state of the slide frame incorporated in
1478 * the same background image, which is shifted depending on the state to
1479 * display.
1480 */
1481 #photoview .slide .slide-shadow div .slideFrame {
1482 width: 132px; /* This is half the width of the frame image. */
1483 height: 132px; /* This is the full height of the frame image. */
1484 padding: 0px;
1485 border: 0px;
1486 margin-top: 0px;
1487 margin-left: 0px;
1488 margin-right: 5px; /* To allow for the drop-cast shadow of 5px. */
1489 margin-bottom: 5px; /* To allow for the drop-cast shadow of 5px. */
1490 background-repeat: no-repeat;
1491 background-image: url(/img/photoview/slide.png);
1492 background-position: 0px 0px; /* The slide frame placed in top left position of the enclosing div of class 'slideFrame'. */
1493 }
1494
1495 /*
1496 * Define the positioning for the slides for next and previous images in
1497 * "slideshow" display mode.
1498 */
1499 .previousImage, .nextImage {
1500 margin: 5px;
1501 margin-top: 40px;
1502 position: absolute;
1503 border: 0px solid red;
1504 }
1505
1506 .previousImage {
1507 margin-left: 3px;
1508 }
1509
1510 .nextImage {
1511 margin-left: 694px;
1512 }
1513
1514 /*
1515 * In order to prevent any flickering of the image the first time the cursor
1516 * is hovered above the slide, we preload the composite image of the slide
1517 * frame and simply displace this image as we hover above it. This is (again)
1518 * a trick properly described in Andy Budd's book "CSS Mastery", there denoted
1519 * as the "Pixy-style rollover" technique (with due credit to Petr Stanicek,
1520 * the originator of the technique).
1521 */
1522 #photoview .slide .slide-shadow div .slideFrame:hover {
1523 background-position: -132px 0px; /* Displace exactly one frame width */
1524 }
1525
1526 #photoview .previousImage .slide .slide-shadow div div.slideFrame {
1527 background-image: url(/img/photoview/slide-prev.png);
1528 }
1529
1530 #photoview .previousImage .slide .slide-shadow div div.slideFrame:hover {
1531 background-position: -132px 0px; /* Displace exactly one frame width */
1532 }
1533
1534 #photoview .nextImage .slide .slide-shadow div div.slideFrame {
1535 background-image: url(/img/photoview/slide-next.png);
1536 }
1537
1538 #photoview .nextImage .slide .slide-shadow div div.slideFrame:hover {
1539 background-position: -132px 0px; /* Displace exactly one frame width */
1540 }
1541
1542 /*
1543 * Define the appearance of the images displayed in the slide frames. The
1544 * width and height here refer to the displayed image, with the inner
1545 * border thickness (that is, 2x2px) added to this. The top margin of 28px
1546 * is used for the vertical positioning of the image, while the left and
1547 * right margins ensure that the image is horizontally centered in the
1548 * frame (2x15px + 98px + 2x2px = 132px).
1549 */
1550 #photoview .slideFrame img {
1551 width: 98px; /* Width of the thumb-nail image displayed in the slide. */
1552 height: 74px; /* Height of the thumb-nail image displayed in the slide. */
1553 padding: 0px;
1554 border-top: 2px solid #555555; /* Interior drop-cast shadow. */
1555 border-left: 2px solid #555555; /* Interior drop-cast shadow. */
1556 border-right: 2px solid #a0a0a0; /* Interior drop-cast shadow. */
1557 border-bottom: 2px solid #bfbfbf; /* Interior drop-cast shadow. */
1558 margin-top: 28px;
1559 margin-left: 15px;
1560 margin-right: 15px;
1561 margin-bottom: 9px;
1562 }
1563
1564 #photoview .slideFrame img.portrait {
1565 width: 74px;
1566 height: 98px;
1567 margin-top: 15px;
1568 margin-left: 28px;
1569 margin-right: 28px;
1570 margin-bottom: -2px;
1571 }
1572
1573 /*
1574 * Define how any text on the slide frames should appear. Typically, this
1575 * is the date of exposure as shown on each slide viewed in, for example,
1576 * contact sheet mode. These settings apply regardless of whether the image
1577 * is displayed in portrait or landscape mode.
1578 */
1579 div.slideFrame p {
1580 font-family: verdana, helvetica, arial, sans-serif;
1581 font-size: 9px;
1582 line-height: 12px;
1583 text-indent: 0px;
1584 text-align: center;
1585 margin: 0px;
1586 color: #343434;
1587 }
1588
1589 #photoview .mainImage {
1590 width: 545px;
1591 padding: 0px;
1592 border: 0px solid red;
1593 margin: 0px;
1594 margin-top: -30px;
1595 margin-left: 145px;
1596 float: left;
1597 /* position: absolute; */
1598 }
1599
1600 /*
1601 * Set width of image area in landscape display mode.
1602 */
1603 #photoview .mainImage img {
1604 width: 528px;
1605 height: 396px;
1606 }
1607
1608 /*
1609 * Set width of image area in portrait display mode.
1610 */
1611 #photoview .mainImage img.portrait {
1612 width: 396px;
1613 height: 528px;
1614 }
1615
1616 #photoview .mainImage p {
1617 clear: both;
1618 }
1619
1620 #photoview #contactSheetSwitch {
1621 position: absolute;
1622 top: 138px;
1623 left: 18px;
1624 }
1625
1626 #photoview p.footerBanner {
1627 margin-top: 460px;
1628 }
1629
Generated by ::viewsrc::