Search:

Return to previous page

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



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

Return to previous page

Generated by ::viewsrc::

Last modified Wednesday 15 Feb 2023