BODY { color: #555555; margin: 10px; margin-top: 10px; /* doesn't seem to work correctly! */ /* strangely, in Netscape 4 relative urls here must be relative to the original page, and in Mozilla it should be relative to the stylesheet... The latter of course makes more sense (because then many pages in different directories can use the same stylesheet and refer to the same image) and mandated explicitly in the stadard. Anyway, in Netscape 4, use "homepage/bg-120.GIF". */ background: url("bg-120.GIF") repeat-y left; margin-left: 145px; margin-right: 145px; } /* use an Hebrew document. [Alternatively, we could have used BODY.hebrew and forced the user to use "" but that is less convenient] */ BODY[dir=rtl] { /* Instead of the following, I put DIR=RTL (I saw that ALIGN=RIGHT is not needed) on the BODY, so that browsers without CSS support (e.g., lynx) will still show Hebrew correctly (if it supported bidi, that is...) */ /* text-align: right; direction: rtl;*/ background: url("bg-120-rtl.GIF") repeat-y right; /*font-family: "arial", serif;*/ } B { color: #444444; } /*P, H1, H2, H3, LI { margin-left: 135px; margin-right: 135px; }*/ /* A:link or even :link are enough */ /* NOTE: every "a" here should really be a[href], i.e., only a tags with a href parameter - but it appears that IE does not support this feature... So I'll just use plain a, for the poor saps using IE... */ A:link { color: #CC0000; } A:visited { color: #330099; } A:active { /*color: #FF3300;*/ background: #FFFFCC; } /* A:hover { background: #F0F0C0; } */ H1 { font-size: 3em; font-weight: bold; font-family: "nimbus roman", "times new roman", "utopia", "charter", "century schoolbook", serif; color: #EB9800; margin-top: 1ex; margin-bottom: 2ex; /*text-align: right;*/ } /* note that in H1.small margin-top is 2ex, twice that in H1, because the font is half the size */ H1.small, H1.subtitle { font-size: 1.5em; font-weight: normal; margin-top: 2ex; } H1.subtitle { color: #AB9800; } /* small space between H1 and H1.small */ H1 + H1.small { margin-top: -4ex } H1.small + H1 { margin-top: -1ex } H1 + H1.subtitle { margin-top: -4ex } H1.subtitle + H1 { margin-top: -1ex } H2 { color: #FF3300; font-size: 2em; font-weight: normal; /* for Hebrew, aharoni, ariam, levenim mt and miriam all look good for headings. I can't decide... */ font-family: "nimbus sans", "arial", sans-serif; /*font-variant: small-caps;*/ line-height: 1; text-indent: 0em; margin-top: 2ex; margin-bottom: 0ex; } H3 { color: #FF3300; font-size: 1.5em; font-weight: normal; font-family: "nimbus sans", "arial", sans-serif; /*font-variant: small-caps;*/ line-height: 1; text-indent: 0em; margin-top: 1.0ex; margin-bottom: 0.0ex; } P { text-indent: 1em; text-align: justify; margin-top: 0.3em; margin-bottom: 0.3em; /*line-height: 1.05;*/ /* a little (but only a little) more space */ } BLOCKQUOTE { margin-left: 40px; margin-right: 40px; text-align: justify; /*just experimenting with some color effect: maybe I should remove it*/ border-bottom: solid #D0D0A0; border-top: solid #D0D0A0; padding: 2px 4px; border-width: 1px; background: #FFFFE5; border-bottom: solid #DDAAAA; border-top: solid #DDAAAA; padding: 2px 4px; border-width: 1px; background: #FFF5F5; } B.extra { color: #CC0000; } UL { text-align: justify; list-style: url("black.gif") disc; } LI { margin-top: 0.8ex; margin-bottom: 0.8ex; } /* TODO: originally I had here (and in other places) .main > H2, but it appears that in IE 6 that doesn't work (it does work in Mozilla, Konqueror and Opera). So I removed the ">", for the poor saps who use IE... */ /* LI in a UL with class=compact (or itself with class=compact, but that isn't too useful) gets special treatment. Similarly for class=large */ .compact LI, LI.compact { list-style: disc; margin-top: 0.1ex; margin-bottom: 0.1ex; } .large LI, LI.large { font-size: 1.5em; font-weight: bold; font-style: italic; } /* TODO: give special look to UL inside UL, and so on. */ /* useful for H1, H2, etc. */ .nomargin-top { margin-top: 0ex; } /* useful for making spacing using div */ .vspace6ex { margin-top: 6ex; margin-bottom: 0; } .vspace4ex { margin-top: 4ex; margin-bottom: 0; } .vspace2ex { margin-top: 2ex; margin-bottom: 0; } /* useful for P */ .noindent { text-indent: 0em; } /* P:before { content: "hello" } */ /* interesting trick to foil spammers: instead of @ .at:before { content: "@"; } */ /*old try: .leftmargin {position: absolute; left:10px; top: auto;} */ /* Put something (such as a picture) with class=leftmargin for it to be a float on the left margin (text will nicely wrap around it). */ .leftmargin { float: left; margin-left: -135px; margin-right: 4px; margin-bottom: 4px; } .rightmargin { float: right; margin-right: -135px; margin-left: 4px; margin-bottom: 4px; } /* instead of TD.eftmargin, we really nead caption.eftmargin, but unfortunately mozilla 0.9.2 does not support caption-side: yet, so CAPTION.eftmargin doesn't work.... CAPTION.eftmargin is the proper way to go for the photo album captions, but we use .leftcaptrick for now instead... :( Add margin-top: 80px (for example) to get the caption further down. */ CAPTION.eftmargin { caption-side: left; margin-left: -135px; width:100px; text-align: right; vertical-align: middle; color: #AAAAAA; font-size:3em; } .leftcaptrick { float: left; margin-left: -135px; color: #AAAAAA; font-size:1.2em; width:105px; text-align: right; } /* right float image (see, for example reading.html, music.html) */ IMG.rightfloat { float: right; margin-left: 5px; margin-top: 5px; margin-bottom: 5px; } IMG.topleftfloat { float: left; margin-right: 5px; margin-bottom: 5px; } IMG.toprightfloat { float: right; margin-left: 5px; margin-bottom: 5px; } /* funky language menu (I'm not sure if this should be here... anyway, it's only used in index.html/hindex.html) */ .funkymenu { float:left; margin-left: -135px; margin-right: 4px; margin-bottom: 4px; margin-top: 120px; color: #FFFFFF; font-size: 90%; line-height: 1.1; border: solid #444444; background: #333333; padding: 2px 2px; border-width: 2px; } BODY[dir=rtl] .funkymenu { float:right; margin-right: -135px; margin-left:4px } .funkymenu B, .funkymenu A:visited, .funkymenu A:link, .funkymenu A:active { color: #EEEEAA; } .funkymenu I { color: #FFFFFF; } .funkymenu P { text-indent:0px; } /* fix stuff for printing, so my pages print nicer. For example, printing in a shade of dark gray is not good - black is better. Fat margins and big fonts are a terrible waste on paper. I still have some experimenting: how to make pictures smaller? How to get my homepage to print properly? (the doggie page prints on Mozilla nicely except a few bugs. Konqueror prints nicely but seems to ignore the settings here or something). */ @media print { BODY { overflow: visible; margin-left: 135px; margin-right: 0px; color: black; font-size: 11pt;} B { color: black; } }