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