Search:

Return to previous page

Contents of file '../../../css/jonssonc.css':




Deprecated: Function split() is deprecated in /storage/content/45/2011745/jonsson.eu/public_html/php/htmlicise.php on line 46
    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   

Return to previous page

Generated by ::viewsrc::

Last modified Monday 21 Feb 2011