/* the core file! cascade with a color scheme... */

/*
  http://www.google.com/webfonts
  Some fonts lack the Esperanto hatted characters.
  Some have them, but they don't look good;
  shorter, or look like from a different font,
  or look darker, or look darker when the font is larger.
  Gentium Basic and Gentium Book Basic work pretty well, though serif.
  And the italic lowercase ĵ slants too much.
  Best overall? Good old Junicode! It has Esperanto, Cyrillic, Old English,
  and Runes, and the hatted Esperanto characters look good in italic.
*/

/*
@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic);
body { font-family: 'Gentium Book Basic', serif }
*/

@import url(/fonts/junicode.css);
body { font-family: 'Junicode', serif }

a:link, a:visited, a:active, a:hover { text-decoration: none }

ul, ol, dir, dl, menu { margin-left: 1em }

hr { margin-top: 0; margin-bottom: 1em }

/* for block elements */
.bottommargin { margin-top: 0; margin-bottom: 1em }
.topmargin { margin-top: 1em; margin-bottom: 0 }
.nomargins { margin-top: 0; margin-bottom: 0 }
.margins, .bothmargins { margin-top: 1em; margin-bottom: 1em }

.babble { margin: 1em 5% 1em 5% }

.livatabelo, .dekstratabelo { border: 2px solid #06C }
.livatabelo { margin: 0 1em 1em 0; float: left }
.dekstratabelo { margin: 0 0 1em 1em; float: right }
table.livatabelo b, table.dekstratabelo b { padding: 0.2em 1em; white-space: nowrap }

h1, h2, h3, h4, h5, h6
   {
   display: block;
   font-style: normal;
   font-weight: normal;
   padding-left: 0;
   padding-right: 0;
   text-align: left;
   margin-top: 1em;
   margin-bottom: 1em;
   }

/* There are 6 header levels but 7 standard font sizes */
/* I chose to skip the largest font size herein        */

h1 { font-size: x-large; font-style: italic; font-weight: bold; margin-top: 0; margin-bottom: 0 }
h2 { font-size: large }
h3 { font-size: medium }
h4 { font-size: small }
h5 { font-size: x-small }
h6 { font-size: xx-small }

div.msgheader { margin-top: 1em; margin-bottom: 1em }
div.msgquoted { margin-top: 1em; margin-bottom: 1em }
div.attribution { margin-top: 1em; margin-bottom: 1em; text-align: right; font-style: italic }

.navigilo { font-style: italic; text-align: right; margin-top: 0; margin-bottom: 1em }

.boxed { border: thin solid }

/*
threedotsdown and synonyms are used something like this...
   <div class="threedotsdown">.<br>.<br>.</div>
The three dots are used to link chunks of text, sometimes to indicate
omission of material (as here, and in auxlangs/mentions), sometimes to
indicate linkage without omission (that is, a linkage between related
but independent items, as in my metaphysics pages). Be sure to adjust
margins of adjoining blocks if necessary, to insure that their margin
specs don't conflict.
*/
.threedotsdown, .downdowndown, .threedotsvertically { font-size: xx-small; font-weight: bold; margin-top: 1em; margin-bottom: 1em; text-align: center }

/* oldfashioned paragraph indentation, like english teachers demand */
p.oldfashionedindentation, p.englishteacherindentation { text-indent: 1em }
p.dekstrakomence { text-indent: 5% }
p.duobledekstrakomence { text-indent: 10% }

/* a class for small caps */
.majusklete { font-variant: small-caps }

/* diversaj esperante */

.grandege { font-size: xx-large }
.grande { font-size: x-large }
.grandete { font-size: large }
.mezgrande { font-size: medium }
.malgrandete { font-size: small }
.malgrande { font-size: x-small }
.malgrandege { font-size: xx-small }

.pligrande { font-size: larger }
.plimalgrande { font-size: smaller }

.dike { font-weight: bold }
.italike { font-style: italic }

p.centre, div.centre { text-align: center }

p.tutdekstre, div.tutdekstre { text-align: right }
p.tutlive, div.tutlive { text-align: left }
p.dekstre, div.dekstre { text-align: left; margin-left: 2em }
p.live, div.live { text-align: right; margin-right: 2em }