Search:

Return to previous page

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



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

Return to previous page

Generated by ::viewsrc::

Last modified Wednesday 15 Feb 2023