/* -- general page elements -- */
html {
margin: 0;
padding: 0;
background-color: #eeddbb; /* use green to TEST; should never be visible */
}
body {
margin: 0;
padding: 0; /* for Opera, but it doesn't hurt to be specific */
font-size: 100%; /* set specific sizes on a lower level to avoid IE's "forgetfulness" about inheritance */
background-color: #eeddbb;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5 {
position: relative; /* allow elements to be absolutely positioned within container */
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
p, div, table {
position: relative; /* allow elements to be absolutely positioned within container */
}
img {
border: none;
}
/* ------------------------------------ links styling defined at end */
ul {
/* to line up text: margin-left + padding-left - 0.1em */
margin-left: 1.3em; /* space for bullet = margin for text */
padding-left: 1.3em; /* "margin" _before_ bullet */
list-style-type: disc; /* should be defined *before* (and as well as) list-style-image */
list-style-image: url(img/bul10.png); /* smaller version is bul8.png */
text-align: left;
}
hr { /* won't center in Opera - ignore */
display: block; /* makes it centered in IE - not without this rule! */
margin: 0.2em 1.5em;
height: 1px;
color: #af8d46;
background-color: #af8d46;
border: none;
}
/* -- main page sections -- */
#masthead { /* contains header 'bars': skip,heading,login... */
/*top: -1.1em;*/ /* for IE only! */
margin: 0;
padding: 0;
/*border: 2px solid maroon;*/
border-top: 2px solid #dbc69b;
border-bottom: 3px solid #dbc69b;
}
#skip { /* "skip" links (to content and to navigation) */
margin: 0;
background-color: #feedcb;
font-size: 0.6em;
line-height: 1.8em;
height: 1.8em;
border-top: 1px solid #af8d46;
}
#header { /* page header - contains skip bar */
margin: 0;
padding: 0;
/* NOTE: use background image to test image scaling - different for IE and Moz! */
/* use PHP script to present a random image instead of hard-coded image path */
/*
background-image: url("rnd_img.php?d=img/portr");
background-position: top left;
background-repeat: no-repeat;
*/
height: 6.7em; /* same as scaleable image heighht *: 6.1 IE, 6.7 Moz */
font-size: 0.85em; /* scaling works in combination with image scaling and h1 size! */
/*border-bottom: 1px solid #af8d46;*/
}
#login {
margin: 0;
background-color: #feedcb;
width: 100%;
height: 1em;
min-height: 15px;
font-size: 0.9em;
border-bottom: 1px solid #af8d46;
}
#page { /* contains content and sidebar */
/*top: -1.1em;*/ /* for IE only! */
padding: 0.5em;
/*height: auto;*/ /* does not seem to work with *positioned* rather than floated elements */
}
#content {
margin-right: 19em; /* leave space for sidebar */
margin-left: 0.5em; /* we'll add to this with margins on the elements within */
padding: 0;
font-size: 0.8em;
/*border: 1px dotted black;*/ /* DEBUG */
}
#sidebar {
position: absolute; /* use positioning to move sidebar next to content */
top: 0.5em; /* corresponds with top padding in #content */
right: 0.5em; /* mimicks the padding of #page */
padding: 0;
padding-bottom: 1em;
font-size: 0.8em; /* same as #content so width matches #content margin */
width: 18em;
/*border: 1px solid green;*/ /* DEBUG */
}
/* -- specific elements within main page sections -- */
#content p {
line-height: 1.25; /* some extra leading for readability (proportional to "normal") */
}
/* masthead elements */
#skip p {
margin: 0;
padding-right: 5px;
color: black;
text-align: right;
background-color: #feedcb; /* for IE which seems to forget about inheritance at times */
}
#header #hdrportrait {
float: left;
margin: 0;
/* use to test scaling
position: absolute;
top: 0;
left: 0;
margin-left: 95px;
*/
height: 6.7em; /* 6.1 = about 90px at fontsize 85% in IE; 6.7 in Moz */
}
#header h1 {
margin: 0; /* at least top 0 needed for Moz (not IE) */
font-size: 1.8em;
padding-top: 0.25em;
/*padding-left: 95px;*/ /* leave space for (background) image */
padding-left: 4em; /* leave space for ("background") image */
background-color: transparent; /* override generic h1 background color to let image show */
/*border: 1px solid green;*/ /* DEBUG */
}
#header h1 small {
/*font-size: 80%;*/ /* for IE */
line-height: 1.2em;
color: #af8d46;
}
#login p { /* trip title */
position: absolute; /* position absolute, relative to #login which must have position: relative! */
top: -2em; /* push up into heading area */
right: 0.5em;
margin: 0;
padding: 0;
font-size: 0.8em;
font-weight: 600;
text-align: right;
font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #af8d46;
/*border: 1px dotted green;*/ /* DEBUG */
}
/* content elements */
#content h2 {
/* always leave space for a flag 30px high, various widths */
padding-right: 63px; /* uzbek flag is 60px wide */
min-height: 30px; /* does not work in IE */
/* actual heading text */
margin-top: 0; /* needed for Moz */
padding-left: 0;
font-size: 1.35em;
line-height: 30px; /* centers the text in the bar but doesn't get in the way when scaling! (does not work in IE??) */
/* background */
background-color: #feedcb;
border-right: 1px solid #af8d46;
border-bottom: 1px solid #af8d46;
}
#content h2 img { /* permalink */
/*margin-left: 5px;*/ /* does not work in IE (padding doesn't either); replaced by no-breaking space (yuk!) */
padding-bottom: 3px; /* for better alignment with the text */
vertical-align: middle;
}
#content h3 {
font-size: 1.25em;
}
#content .highlight { /* adding span.highlight does NOT help with IE5 highlight problem */
font-weight: bold;
color: #aa0000;
background-color: #feedcb; /* #dbc69b */
}
#content dt {
font-weight: bold;
}
#map { /* country map */
/*margin-bottom: 1em;*/ /* no margin to keep show/hide link flush with map */
width: 100%; /* IE needs this to get overflow working but we'll keep it here as it does no harm */
overflow: auto; /* keep overflow until we can find a way to scale only when needed */
}
#map img {
/*width: 100%;*/ /* attempt scaling rather than overflow */
/* scaling works - but ALWAYS; we should to do this only if image is wider than space available! - see also itinmap */
/* use JavaScript?? get width of #map and apply to img if smaller than actual image width ... */
}
#content div.itinmap { /* route map in content */
/*margin-bottom: 1em;*/ /* no margin to keep show/hide link flush with map */
padding: 4px 4px 2px 4px;
width: 508px;
max-width: 100%; /* does not work in IE */
background-color: #feedcb; /*white*/
/*text-align: center;*/
border-top: 1px solid #af8d46;
border-right: 1px solid #dbc69b;
border-bottom: 1px solid #dbc69b;
border-left: 1px solid #af8d46;
}
#content div.itinmap .imgcap { /* caption for route map */
color: #333333;
font-size: 0.75em;
line-height: 1.5em;
}
#content div.mapreq {
margin-top: 1px;
margin-bottom: 1em;
font-size: 0.75em;
/*text-align: right;*/
}
/* -- sidebar content -- */
#sidebar div {
margin: 0;
padding: 0;
/*border: 1px solid red;*/ /* @@@ IE6 DEBUG */
}
/* major sidebar section containers */
#sidebar #nav,
#sidebar #rel,
#sidebar #about,
#sidebar #extra {
margin: 0;
padding: 0;
/*border: 1px solid blue;*/ /* DEBUG */
}
#sidebar #rel,
#sidebar #about,
#sidebar #extra {
margin-top: 0.5em; /* some extra space between major sections (collapses though) */
}
/* basic layout for sidebar boxes */
#sidebar .box {
margin: 0 0 1em 0; /* only vertical space between boxes */
font-size: 0.85em; /* scales with #sidebar 0.8 (which is needed there!) to 0.68 */
text-align: left;
border: 1px dashed #af8d46;
}
#sidebar .box h3 { /* basic layout for sidebar box headings */
margin: 0;
padding: 0.1em 0.1em 0.1em 0.4em;
font-size: 1.4em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #ffffff;
background-color: #af8d46;
}
#sidebar .box h4 { /* generic layout for sidebar box subheadings */
margin: 0;
padding: 0.15em 0 0.3em 0.6em; /* NOTE right padding causes problem in IE6 (enlarges box) */
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: left;
color: #000000;
background-color: #dbc69b;
}
#sidebar .box p { /* basic layout for sidebar box paragraphs */
margin: 0;
padding: 0.6em; /* @@@ may cause bottom border to disappear (?) */
}
#sidebar .itinmap { /* route map in itinerary block */
text-align: center;
}
#sidebar .thumbmap {
display: block;
margin: 0.2em auto;
border: 1px solid #af8d46;
}
/* GENERIC sidebar element treatments ------------ */
/* --- lists of floating image links - GENERIC styling */
/* - images made into block and floated so they "pack" into the available space
* - basically all the same width though for each list we may set a different one;
* we assume buttons with a
* - the ul is treated as the containing block inside which image links (inside
* li elements) are floated
* NOTE:
* height: auto; does NOT work for an ul element: We can't insert a br in there,
* and using clear on an empty li element does not work either.
*
*
* These blocks use the following structure _within_ a #sidebar .box :
*
* the h4 subheading is optional but _should_ be present if there are multiple blocks
* within a sidebar .box
* vertical spacing is provided with:
* - margin-bottom on the div.imgcont container
* - margin-top (part of margin shortcut) on the ul.imgfloat container
* both the same size (0.5em); done this way to ensure the first h4 is flush with the .box h3
*/
/* container that contains a ul list with image links */
/* - BUG in Mozilla:
h4 (here) sometimes "expands" vertically, into preceding block (overlap) or just expanding in height;
conclusion (after analysis and workaround attempts) - this seems to be caused by combination of:
- floated images
- images coming in late (retrieved from external server)
- no image size set
as long as the image hasn't appeared the rendering is preliminary, and Mozilla's attempt to
correct it once it's in seems to cause the "expanding headings" (other browsers apparently
use a different technique to adjust the layout)
NOTE: the same problem (still!!) happens when an image doesn't load at all: space is reserved
initially but "collapses" to show just the alt text when it times out; this confirms that the
"reflowing" is actually the problem.
- 1) initial attempt at workaround: setting a border round the whole block seemed to prevent it
so the strategy was:
- use a border _both_ at top and at bottom of the block (can't use them at the sides without
visibly affecting layout)
- make them invisible by setting them in the page background color, and turning OFF
the top one for the first block
Unfortunately, this seemed to have little effect
- 2) second attempt at workaround: set dimensions for the external images in the HTML (width + height)
so Mozilla can reserve space for them and float without having to "correct" layout when they come in
==> this DOES seem to work!
==> @@@ extra strategy: try to cache these so they are retrieved only once a day and
never cause rendering delays!!
*/
#sidebar .imgcont {
margin-bottom: 0.5em; /* provide some space between boxes */
height: auto; /* gives container height after floated image links *provided* there's a "clearing" element after the ul */
/*border: 1px solid red;*/ */DEBUG */
/*border-bottom: 1px solid #eeddbb;*/ /* (use blue for debug) border in page background color: border seems to prevent "expansion" of h4 subheadings seen in Mozilla... */
/*border-top: 1px solid #eeddbb;*/ /* (use blue for debug) border in page background color: border seems to prevent "expansion" of h4 subheadings seen in Mozilla... */
}
#sidebar h3 + .imgcont { /* selects first floater block; won't work in IE but it's only for Mozilla anyway */
/*border-top: none;*/ /* turn off border for first block */
}
#sidebar .imgcont h4 { /* the container may have a subheading before the list */
margin-bottom: 0;
/*border: 2px dotted black;*/ /* DEBUG */
}
/* actual list with image links - they should be normal link buttons, no more than 88px wide */
ul.imgfloat {
margin: 0.5em auto 0 auto; /* center block (not in IE) and have some space at the top */
padding: 0; /* must overrride "natural" padding of a ul element */
/*width: 97%;*/ /* avoid overlapping dotted border; 13em / 216px - works together with auto for centering */
text-align: left; /* applies to content; left, so a 'lone' element lines up! */
list-style-type: none; /* suppress all bullets */
list-style-image: none;
height: 0; /* requires clearing br *after* the ul block */
/*border: 1px solid red;*/ /* DEBUG */
}
ul.imgfloat li {
display: block; /* EXP: be explicit in IE5 - just width does not see to work */
width: 107px; /* 88 + 2 + 3 + (5+5) - works "sometimes" in IE */
margin-left: 2px;
padding: 2px; /* provides spacing between link blocks */
float: left; /* float deliberately - but requires "clear" element at end */
/*border: 1px solid blue;*/ /* DEBUG */
}
ul.imgfloat li a { /* link displayed as block with width (controlled by li here) -> highlight covers whole background */
display: block; /* makes background highlight as high as the contained image */
text-align: left; /* should align image left inside the a box - must be REPEATED with external link styling */
/*border: 1px solid green;*/ /* DEBUG */
}
/* to be used with blocks of floated image links: add br class="clear" after ul within containing div */
br.clear { /* to handle auto-height in blocks with floating images */
height: 1px; /* we only need clearing, not space! */
clear: both;
/*border: 1px solid blue;*/ /* DEBUG */
}
/* --- highlighted areas (paragraphs) */
/* NOTE:
Specifying the background color on #sidebar .box p.highlight works in Moz/FF and IE5 but NOT in IE6;
overriding it on an id (#latest, etc) works for IE6 but not in IE5, even with !important specified
on the second rule (tested by specifying different colors).
The solution is to just specify it ONLY on the ids (probably considered "specific" in most browsers)
which works across all browsers tested (also Opera). We can then specify the bold on the ids as well!
*/
#new p, /* p */
#navlatest, /* p */
#tripselinstr, /* p */
#alltrips { /* p */
margin: 0; /* use padding instead of margin so we can highlight whole area */
padding: 0.6em 0 0.6em 0.6em;
font-weight: bold;
background-color: #feedcb; /* #feedcb (test with red) highlighted background */
}
#new p {
color: #bb0000;
}
/* specific sidebar elements ------------ */
/* --- timeline and calendar */
#navcal {
font-size: 1em; /* provide handle for table font size... */
padding-bottom: .1em; /* try to combat disappearing bottom border */
}
#navcal div { /* this inner div contains the table we need to center */
text-align: center;
padding: 0.5em;
}
#navcal h4.trip, #navcal h4.cal { /* trip title, calendar title - generic sidebar h4 */
}
/* positioning of table and caption */
#navcal div table.calendar {
border-collapse: collapse;
width: 14.5em; /* should be enough to provide space for "September" heading - this *is* inherited by caption */
margin-left: auto;
margin-right: auto;
/*margin-top: 0.3em;*/ /* moved to caption! (NOTE: may be Mozilla bug) */
font-size: 1em; /* scales with #sidebar 0.8 (which is needed there!) */
}
table.calendar caption {
margin-left: auto; /* needed to align with table! - NOT inherited from table! */
margin-right: auto; /* needed to align with table! - NOT inherited from table! */
margin-top: 0.3em; /* moved to here from table! */
padding-bottom: 0.1em;
font-weight: bold;
font-size: 1.05em;
color: #ffffff;
background-color: #cbb07b;
}
/* end positioning of table and caption */
/* border styling */
table.calendar thead { /* does not work in IE */ /* tr */
border: 1px dotted #cbb07b;
}
table.calendar tbody.this { /* does not work in IE */ /* tr */
border: 1px dotted #cbb07b;
}
table.calendar tbody.prevnext {
border: none; /* make month navigation row seem "unconnected" even though 'headers' attribute still points to it as a header: overrides previous rule */
}
table.calendar td.calendar { /* outline cells for current month only - but not prev and next */
/* since 'prev' and 'next' cells don't have class 'calendar' they won't have a border! same for the day headers*/
border: 1px dotted #cbb07b;
}
/* end border styling */
/* styling of calendar face for current month */
table.calendar thead th { /* treat same as h3 header in a box */
font-size: 1em;
margin: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 0.1em;
}
table.calendar tbody.this td.calendarToday {
color: #993333;
background-color: #dbc69b;
}
table.calendar tbody.this td.next, td.prev { /* display dates not in the current month */
color: #af8d46;
}
/* end styling of calendar face for current month */
/* styling of links to blog entries */
table.calendar tbody.this td.calendarLink {
background-color: #feedcb; /* highlighted background */
}
/* styling of calendar navigation to other months */
table.calendar .prevnext th img {
vertical-align: middle;
padding-left: 2px;
padding-right: 2px;
}
table.calendar tbody.prevnext th img:hover,
table.calendar tbody.prevnext th img:focus
{ /* not supported by IE */
background-color: #ffffff;
}
table.calendar tbody.prevnext th.prev {
text-align: left;
}
table.calendar tbody.prevnext th.next {
text-align: right;
}
table.calendar tbody.prevnext td.calendarMonthNav:hover,
table.calendar tbody.prevnext td.calendarMonthNav:focus
{ /* not supported by IE */
color: #7f5d16; /* normal link color */
background-color: #ffffff;
}
/* end calendar navigation */
/* --- itinerary */
/* need some tweaks to make bullets appear in IE */
#navit {
text-align: left;
padding-bottom: 0.3em; /* avoid text hitting the border */
}
#navit h4.trip { /* trip title - generic sidebar h4 */
margin-top: 1em;
}
#navit h4.first { /* FIRST trip title - generic sidebar h4 */
margin-top: 0; /* overrides h4.trip style so MUST be specified after that! */
}
#navit h4.cntry { /* country name */
/*
two possible styles:
1. treat as generic h4 subheading, which lines up with bullets and has a #dbc69b background color
2. (override) line up country names with dates, no background:
padding-left 2.5 em = 1.3em + 1.3em - 0.1em : equal to ul: margin-left + padding-left - 0.1em
background-color: transparent;
*/
/* OVERRIDE - disabled, see above
padding-left: 2.5em;
background-color: transparent;
*/
/* OVERRIDES always needed */
padding-left: 0.7em; /* line up with bullets - different in IE! */
margin-top: 0.5em;
font-size: 1.1em;
}
/* three-part solution to problem of graphical bullets sitting too high on the line
and bumping up to the heading above:
1. tweak bullet image so there is NO space at the bottom but some to the top:
this "pushes the image down"
2. the effect is also to separate the lines of the list - this is solved by
setting the line height to 'normal' (effectively: just the natural height
1 or 100% also works for Moz/FF but not IE or Opera)
3. the list itself (ul) gets a little top margin to set it apart from the h4
subheading: we don't want to set a bottom margin on the heading since it
needs to be flush with following content in some cases.
*/
#navit ul {
margin-top: 2px; /* (was 0) extra space between subheading and bullet */
margin-right: 0.25em; /* avoid text hitting the border */
margin-bottom: 0;
}
#navit li { /* force "natural" lineheight to overcome effect of higher bullet images */
/* NOTE: 1 or 100% work well in Moz and FF, but is too tight in IE and Opera; 'normal' works for IE5, IE6, Opera, Moz, FF */
line-height: normal;
}
#navit .itinmap { /* route map */
width: 100%;
overflow: hidden; /* cut off if box becomes too small with small font size: scrollbars have little use here */
}
/* --- countries */
#navcntry {
/*top: 0em;*/ /* @@@ test IE5: moves to place after hover over a link; positioning does not help with initial overlap... */
text-align: left; /* somewhat redundant */
}
#navcntry h4.trip { /* trip title -> generic sidebar h4 */
}
#navcntry ul {
margin: 0; /* no space needed for bullet here */
padding: 0.6em; /* align under subheading */
text-align: left;
list-style-type: none;
list-style-image: none;
}
#navcntry li { /* somewhat redundant but does no harm */
margin: 0;
padding: 0;
}
/* --- categories */
#navcat div { /* make it a scrolling list! */
margin-left: 0; /*0.2em*/
margin-right: 2px; /* leave dashed border just visible */
margin-bottom: 0.2em; /* leave small space at the bottom of the list - does NOT work in IE5 with overflow! */
padding: 0;
height: 25em; /* make it a scrollable list */
overflow: auto;
}
#navcat h4.trip { /* trip explanation -> generic sidebar h4 */
}
#navcat ul { /* same style as for #navcntry ul - apart from limit on width */
margin: 0;
padding: 0.6em;
text-align: left;
list-style-type: none;
list-style-image: none;
width: 18em; /* NEEDED to allow for margins on #navcat div AND a vertical scrollbar; too large results in horizontal scrollbar! */
}
#navcat li { /* somewhat redundant but does no harm */
margin: 0;
padding: 0;
}
/* --- 43 places lists */
/* NOTE: original (js-written) div#goal-header dynamically replaced with h4! */
/* NOTE2: Problem is to have a vertical space below the list, which tends to disappear in IE5.
Defining padding-bottom on the div surrounding the elements for each section,
including the list, works consistently across, including in IE5. The lists
themselves should then have a bottom margin of 0).
*/
#fourtythree div { /* a div for a section here, surrounding heading plus list */
padding-bottom: 0.5em; /* whitespace below lists - see NOTE2 above */
}
#fourtythree ol { /* make it a scrolling list! (similar to #navcat div) */
margin-top: 0;
margin-right: 2px; /* leave dashed border just visible */
margin-left: 0;
margin-bottom: 0.2em; /* leave small space at the bottom of the list - does NOT work in IE5 with overflow! */
padding: 0;
padding-left: 3em;
max-height: 12em; /* not IE */ /* make it a scrollable list; IE: set *height* only for goal & countries, not rubber */
overflow: auto;
}
#fourtythree p {
margin-bottom: 0;
}
#fourtythree div#goal-list ol {
margin-top: 0.5em; /* override: small space below heading since there's no paragraph here */
}
#fourtythree div#goal-list li,
#fourtythree div#rubber-list li,
#fourtythree div#countries-list li {
color: #af8d46;
}
#fourtythree div#goal-list li span {
font-size: 95%;
}
/* --- tools */
#tools {
padding: 0;
}
#mysqllink img { /* set off image against light background */
border: 1px solid black;
}
/* --- listings */
/* displayed as block of floating images, just like the Google referrals block */
/* @@@ see generic method in .imgfloat */
#listings {
padding: 0;
}
/* --- stats */
/* contains both blocks of floating image links and centered other stats */
#stats {
padding: 0;
}
#stats div { /*border: 1px solid red;*/ /* DEBUG */ }
#stats p { /*border: 1px solid blue;*/ /* DEBUG */ }
#stats a { /*border: 1px solid green;*/ /* DEBUG */ }
#stats div { /* generic: includes the #StatCounter div! @@@ probably redundant - let p have its natural spacing */
margin: 0;
padding: 0;
}
#statslinks h4 { /* DEBUG ONLY the container may have a subheading before the list */
/*border: 2px dotted black;*/ /* DEBUG */
}
/* statistics links (centered - unlike floating image links) */
#StatCounter,
#ClustrMaps {
width: 97%; /* avoid overlapping dotted border */
text-align: center;
}
/* 1) VISIBLE counter should be centered but _generated_ code is in a div! */
#StatCounter div.statcounter { /* counter - already covered by generic rule above */
}
#StatCounter div.statcounter img { /* counter */
width: 68px;
margin: auto;
}
/* 2) (noscript) INVISIBLE counter should not take up vertical space */
#StatCounter div.invisible {
height: 0;
}
#StatCounter div.invisible img {
height: 0;
}
/* 3) link - always shown */
#StatCounter p.viewstats { /* 'view statistics' link */
margin-top: 0;
}
/* --- who */
#who {
text-align: left;
}
/* --- extra (copyright notice, etc.) - @@@ need better id name here! */
/* put *inside* sidebar since with absolutely-positioned column we can't put a footer at the bottom of the page! */
#extra {
margin-top: 1em; /* spacing below last block (doesn't work??) */
}
#extra div { /* highlight each box in this area! otherwise style each box separately */
margin: 0;
}
#extra #copyright { /* copyright - use highlight styling */
/* NOTE: in IE6 putting background color here does NOT work! */
margin-bottom: 0.5em;
font-size: 0.9em; /* 0.9 scales with #sidebar's 0.8 (which is needed there!) to 0.72 */
text-align: center; /* centers both contained paragraphs */
background-color: #feedcb;
border: 2px dotted #af8d46;
}
#extra #copyright p small {
font-size: 0.95em;
}
/* --- various classes, overriding generic styling --- */
.secmeta {
margin: 0;
padding: 0;
font-size: 0.85em;
padding-bottom: 1.5em;
text-align: left;
}
.scats {
font-style: italic;
}
.posted {
margin: 0;
padding: 0;
font-style: italic;
}
.center {
text-align: center;
}
.cookies {
margin: 0;
font-weight: normal;
/*font-size: 0.9em;*/ /* too small on Mac: added to already smaller font size in sidebar! */
}
#sidebar .new { /* for indication of new features - #sidebar to avoid conflict with form sections */
color: #bb0000;
}
.hidden { /* e.g. to hide as-yet-unhandled markup */
display:none
}
.link { /* plain text colored as link (as yet unhandled link markup) */
font-weight: 600;
color: #7f5d16;
}
/* --- dynamic styles - use JavaScript to set alternative class --- */
.ajaxoff { /* hide from browsers that are not ajax-capable */
display: none;
}
.ajaxon { /* show in browsers that _are_ ajax-capable */
display: block;
}
/* -------- ads -------- */
/* NOTE: padding on an iframe does NOT override/replace marginwidth & marginheight! */
/* -- elements containing actual ads --*/
/* NOTE: for content ads we add a border on the outer div; for sidebar ads
border already defined in generic sidebar box style.
NOTE2: except for the links unit (see comment), outer divs get no padding, but a margin
on the inner div instead; this makes it collapse to a smaller "bar" and allows adding
a background color on the outer div.
*/
#linkscontent { /* link unit container div */
/* NOTE: NO border at all here gets around the box model and rounding inconsistencies!! */
/* NOTE: NOT defining width here actually works better than defining it; it gets around the problem of
the width of the border that gets *added* to the width. 99./5% was an (FF) approximation then but
not defining width at all gets around the rounding problems.
By NOT defining width, the div, *including a border*, takes up full space so we can have a border again!
*/
margin-top: 0;
margin-bottom: 0.5em;
padding-top: 0.15em; /* push down Google content slightly - it's lined up badly! */
height: 1.5em; /* 1.5em or 2.2em; latter would correspond to timeline PLUS subheader */
background-color: #DBC69B;
border: 1px dashed #af8d46;
}
#linkscontent div {
margin: auto 0;
width: 100%;
/*border: 1px solid blue;*/
}
#adscontent { /* NOTE: margin defined on inner div! */
/* NOTE: NOT defining width here actually works better than defining it; it gets around the problem of
the width of the border that gets *added* to the width. 99./5% was an (FF) approximation then but
not defining width at all gets around the rounding problems.
*/
background-color: #feedcb;
border: 1px dashed #af8d46; /* since this is no longer 468 wide, border here instead of on iframe! */
}
#adssidebar {
background-color: #feedcb;
}
#adscontent div,
#adssidebar div { /* this inner div contains the iframe we need to center */
margin: 0.5em auto;
/*text-align: center;*/ /* for IE only, instead of margin: 0 auto; on the iframe */
}
#referrals { /* container divs keep full width; content centered within that */
background-color: #feedcb; /* "highlight" background color - THIS background color does work in IE6! */
}
#referrals div#refbuttons { /* one div containing both buttons */
margin: 0.5em auto;
text-align: center; /* works (and valid) because content is display: inline! */
}
/* -- link units -- */
#linkscontent iframe {
width: 100%; /* overrides specified width of 468px */
height: 1.2em; /* overrides specified width of 15px */
/*border: 1px solid green;*/ /* DEBUG */
}
/* -- ads -- */
/* - google generated content - */
#adscontent iframe {
display: block; /* needed to make margin:auto work!! */
margin: 0 auto; /* width and height are set by Google */
}
#adssidebar iframe {
display: block; /* needed to make margin:auto work!! */
margin: 0 auto; /* width and height are set by Google */
border: none;
}
/* -- referrals -- */
/* display: inline; makes the layout fluid: if there is enough space, the buttons will appear beside each other */
#ref-ff,
#ref-as {
display: inline;
/*border: 1px solid red;*/ /* DEBUG */
}
#ref-ff div,
#ref-as div { /* these divs contain the actual scripts producing the iframe with teh button */
display: inline;
margin: 0;
/*border: 1px solid blue;*/ /* DEBUG */
}
/* -- noscript content (not for referrals) -- */
#adscontent object {
margin: 0 auto;
display: block; /* needed to make margin: auto work!! */
width: 484px; /* 468 + 8*2 prevent scroll bars: allow margin within object of 8px !! */
height: 76px; /* 60 + 8*2 prevent scroll bars: allow margin within object of 8px !! */
/*border: 1px dashed #af8d46;*/ /* AVOID border here so we don't see a margin between it and the image */
}
#adssidebar object {
margin: 0 auto;
display: block; /* needed to make margin: auto work!! */
width: 141px; /* 125 + 8*2 prevent scroll bars: allow margin within object of 8px !! */
height: 141px; /* 125 + 8*2 prevent scroll bars: allow margin within object of 8px !! */
}
#adscontent object img, #adssidebar object img {
margin: 0;
padding: 0;
}
/* divs containing the alternative images "sent" by google: MUST have the same size as the images themselves */
#alt125x125 {
margin: 0;
padding: 0;
width: 125px;
height: 125px;
}
#alt468x60 {
margin: 0;
padding: 0;
width: 468px;
height: 60px;
}
/* -------- generic links styling -------- */
/* - The usual order is :link, :visited, :hover, :active. I find it more logical
to use :link, :visited, :active, :hover since the :hover state can be combined
with all of the preceding, It does seem to work (even in IE5, apart from the
unrelated bug described for :hover).
- :hover gets only a background color since this state can be combined!
- :focus gets the same treatment as :hover for keyboard-only users
- We specify font-weight on each of :link, :visited and :active because we don't
want to specify it on just a (which _might_ occur in embedded content as
a target!
*/
a:link {
font-weight: 600;
color: #7f5d16;
}
a:visited {
font-weight: 600;
color: #7f5d16; /* this _is_ needed to override browser default in some browsers */
text-decoration: none;
}
a:active {
font-weight: 600;
color: #c90d00; /* @@@ do we really want/need this different color when we don't use it on the sidebar? */
}
/* WEIRD problem in IE5 with :hover: _some_ links are not highlighted on hover
(but see NOTE below).
THERE IS NO CLEAR PATTERN.
Mostly this takes the form of the first link(s) being highlighted on hover,
but not the rest of a paragraph or list; sometimes the first few links in a
paragraph are not highlighted but later ones are... Specifying !important here
makes no difference. (And there is no problem in IE6.)
NOTE, this applies also to the (static) background highlighting used for
"current place" so it doesn't seem to be related to links and hover per se.
However, when all special link styling is taken out, there does not seem to
be a poblem...
I give up. I'll stop bothering now - as long as IE5 remains usable.
*/
a:hover,
a:focus
{
background-color: #feedcb;
}
/* ------- links styling overrides ------- */
/* --- masthead --- */
#skip a:link, #skip a:visited, #skip a:active {
color: #7f5d16;
text-decoration: none;
}
#skip a:hover,
#skip a:focus
{
/*text-decoration: underline;*/
background-color: #ffffff; /* extra highlight */
}
/* --- END masthead --- */
/* --- sidebar generic --- */
#sidebar a:link, #sidebar a:visited, #sidebar a:active {
color: #7f5d16;
text-decoration: none;
}
#sidebar a:hover,
#sidebar a:focus
{
background-color: #feedcb;
}
/* --- END sidebar generic --- */
/* --- calendar links --- */
/* NOTES 1 using #blogcal instead of table.calendar is more specific!)
2 use a different background color for hover; white does not give enough feedback on
a TFT (laptop) screen, so we use the darker color also used for sidebar h4 instead!
*/
#blogcal tbody.this td.calendarLink a {
/* make sure every link takes up whole cell */
display: block;
width: 100%;
}
#blogcal tbody.this td.calendarLink a:link,
#blogcal tbody.this td.calendarLink a:visited,
#blogcal tbody.this td.calendarLink a:active {
color: #7f5d16; /* normal link color */
background-color: #feedcb; /* highlighted background */
}
#blogcal tbody.this td.calendarLink a:hover,
#blogcal tbody.this td.calendarLink a:focus
{
color: #aa0000;
background-color: #dbc69b; /* _different_ 'high'light */
}
#blogcal tbody.prevnext th.calendarMonthNav a {
/* make sure every link takes up whole cell */
display: block;
width: 100%;
}
#blogcal tbody.prevnext th.calendarMonthNav a:link,
#blogcal tbody.prevnext th.calendarMonthNav a:visited,
#blogcal tbody.prevnext th.calendarMonthNav a:active {
color: #7f5d16; /* normal link color */
background-color: #feedcb; /* highlighted background */
}
#blogcal tbody.prevnext th.calendarMonthNav a:hover,
#blogcal tbody.prevnext th.calendarMonthNav a:focus
{
color: #aa0000;
background-color: #dbc69b; /* _different_ 'high'light */
}
/* --- END calendar links --- */
/* --- links in already highlighted sections --- */
#latest a:hover, /* p */
#tripselinstr a:hover, /* p */
#alltrips a:hover, /* p */
#latest a:focus, /* p */
#tripselinstr a:focus, /* p */
#alltrips a:focus /* p */
{
color: #990000; /* darker so we have not only color but also contrast change */
}
/* --- END links in highlighted sections --- */
/* --- external links --- */
/* Especially for those browsers where a background image doesn't work (IE, Opera)
we use a different color as well to distinguish external links:
color is reddish (we use more red), "related" to color used for Google
link elements but a luminance more like normal links.
The only problem with this is that the distinguishing fact here is *only* by color:
not accessible. (Adding a border on hover does not work in IE5 and causes "jumpiness"
in IE6 due to teh box model bug (sigh)).
*/
/* NOTES: 1 While for nearly all browsers just specifying a different link color
is sufficient, this is not the case with FF: for the JavaScript-generated links
the hover background color MUST be specified as well, or it won't be used -
and it must be specified as #fourtythree a:hover .
(a:hover.ext or #fourtythree a:hover.ext don't work!)
2 This doesn't solve the problem in IE5: only the first line in that generated list
will be highlighted on hover (even if we include the content ourselves rather than
with the external JavaScript, and even though the link highlighting DOES work for the
second list of the same structure.
3 In general, it seems to be best to attach the pseudo class at the end, even
though it might work the other way round in most browsers.
4 Trying to solve the link highlighting problem for IE5, I tried the ideas here:
http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp
In principle: repeating/changing the a:link style for font-weight in the :hover rule here...
Tried:
font-weight: 700;
border: 0;
but none make any difference. There must be a different cause for the problem here.
5 Using #fourtythree a or #fourtythree a:hover as (extra) selector is no longer necessary
since we now grab the content on the server and add the 'ext' class dynamically.
*/
a.ext:link, a.ext:visited, a.ext:active {
color: #993300 !important; /* visited needed for IE6; redundant but no problem otherwise */
}
a.ext:hover,
a.ext:focus
{
background-color: #feedcb !important; /* NEEDED for FF; redundant but no problem otherwise */
}
/* --------- external link icons --------- */
/* Icons are 10x10 and 12x13 - the small one is intended for the sidebar but clear enough that
it MAY be used for the main content area as well. Not for now, though.
*/
/* Original style (Wikipedia) used:
background: url("/img/extlink_lrg.png") center right no-repeat;
This causes problems with (hover) background *colors*.
Using separate properties should leave generic colors (including hover) untouched!
There are various problems with the background icon approach:
- for image links the place wrt the image depends on the line-height for the link
(NOT the image)! (but centered in IE5)
- in IE5 the link is transparent but OVERLAPS the background image: padding does not work!
- NOTHING is visible in IE6 or any version of Opera (overlap but not transparent link?)
NOTE: using ONLY the a[href^="http://"] selector will automatically not work in IE5, IE6
and Opera
NOTE2: using this selector automatically makes all of :link, :visited and :active apply
(since it refers to a link, and not just an anchor).
For now we use only this selector based on href and leave out these selectors for
link icons (but see above for external link coloring!)
#content a.ext:link
#sidebar a.ext:link
#fourtythree a ('ext' class now added dynamically, not possible in JavaScript output!)
*/
#content a[href^="http://"] { /* selector: not in IE5, IE6, Opera */
margin-right: 2px; /* space after the image */
padding-right: 14px; /* space FOR the image */
color: #993300 !important;
background-image: url("/img/extlink_lrg.png");
background-position: center right;
background-repeat: no-repeat;
/*background-color: green;*/ /* DEBUG - see which links are selected even if background image doesn't appear */
}
#sidebar a[href^="http://"] { /* selector: not in IE5, IE6, Opera */
margin-right: 2px; /* space after the image */
padding-right: 12px; /* space FOR the image */
color: #993300 !important;
background-image: url("/img/extlink_sml.png");
background-position: center right;
background-repeat: no-repeat;
/*background-color: blue;*/ /* DEBUG - see which links are selected even if background image doesn't appear */
}
/* ...image links: repeat display as block + text alignment here - does NOT work for Moz...*/
#sidebar .imgfloat a.ext:link {
display: block; /* needs to be repeated ... */
text-align: left; /* needs to be repeated ... */
}
#content a[href^="http://"]:hover,
#sidebar a[href^="http://"]:hover,
#content a[href^="http://"]:focus,
#sidebar a[href^="http://"]:focus
{ /* selector: not in IE5, IE6, Opera */
background-color: #feedcb !important; /* NEEDED for FF; redundant but no problem in other browsers */
}
/* --- END external links --- */