Search:

Return to previous page

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



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

Return to previous page

Generated by ::viewsrc::

Last modified Wednesday 15 Feb 2023