@import "komuna.css";

body {
  position: relative;
  padding: 0px;
  margin: 0px;
  background: #dddddd url(/bildoj/supra-gradiento.png) repeat-x top;
  font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6,
dt { 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

dd {
  margin-left: 2.5em; 
}

#container {
  width: 793px;
  padding: 0 0px;
  margin: 0px auto;
  position: relative;
  background: white url(/bildoj/flankombroj-neniun.jpg) repeat-y center;
}
#container > header {
  border: none;
  width: 793px;
  height: 167px;
  margin: 0px auto;
  background-image: url(/bildoj/logo-gradient.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
#logo {
  margin: 0;
  font-family: Georgia, "Goudy Old Style", Times, serif;
  padding: 50px 35px 0 0;
  text-align: right;
  font-weight: bold;
}
#logo a { text-decoration: none }
#logo a:hover { text-decoration: underline }

#logo {
  color: white;
}

#logo a {
  color: white;
}
#logo h1 { 
  font-family: inherit;
  /* font-family: Georgia, "Goudy Old Style", Garamond, Times, serif; */
  margin: 0; font-size: 48px;
  letter-spacing: -.2pt;
  font-weight: bold;
  line-height: .7em;
}
#logo .granda { display: block; }
#logo .eta { 
  font-family: Garamond, "Goudy Old Style", serif; 
  font-size: 40% 
}

body > article,
#content {
  margin-top: 3.2em;
  padding: 0 28px;
  padding-bottom: 10px;
  background: url(/bildoj/malsuprajxo.jpg) no-repeat bottom;
  position: relative; /* to make MSIE happy */
}

#container > article,
#content > article,
#primary-content {
  /* margin-left: 5em; /* lasu spacon por maldekstra navigilo */
  margin-left: 0.5em;
  margin-right: 1em;
  margin-bottom: 1em;
  font-size: 10.5pt;
  font-family: Georgia, serif;
  width: 500px;
  min-height: 460px;
}

#container > article ul li,
#content > article ul li,
#primary-content ul li { margin-bottom: 1em }

#container > article, ul.densa li,
#content > article ul.densa li,
#primary-content ul.densa li { margin-bottom: 0 }

#container > article ol li,
#content > article ol li,
#primary-content ol li { margin-bottom: 1em }

#container > article dt,
#content > article dt,
#primary-content dt { font-family: inherit }

#container > article p,
#content > article p,
#primary-content p { line-height: 1.3em; }

#container > footer {
  background: #dddddd;
  margin-bottom: 1em;
  text-align: center;
  font-size: 75%;
  /* background: url(/bildoj/malsuprombro.jpg) no-repeat bottom; */
}

#container > nav {
   position: absolute;
   top: 147px;
   left: 7px;
   width: 686px;
   height: 3.5em;
   text-align: center;
}
#container > nav ul {
  position: absolute;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
  width: 766px;
}
#container > nav ul ul {
   padding: .35em 7px;
   background: #2c5da0 url(/bildoj/menu-malhela.png) repeat-x top left;
}
#container > nav ul ul ul { 
   font-size: 90%;
   background: #c5ecfd url(/bildoj/menu-pala.png) repeat-x top left;
   top: 1.9em;
}
#container > nav ul ul ul ul ul {  /* kvara nivelo: maldekstre, vertikale */
  position: static;
}
#container > nav ul ul ul ul {  /* tria nivelo: maldekstre, vertikale */
  top: 2.8em;
  left: -1.5em;
  width: 10em;
  background: transparent;
  margin: 0;
}
#container > nav ul ul ul ul li {
  display: block;
  text-align: left;
  margin-top: 1em;
}
#container > nav ul ul ul ul li a {
  background: transparent;
}
#container > nav ul li {
  display: inline;
  margin: 0;
  padding: 0;
  white-space: nowrap;        /* don't split tabs */
}
#container > nav ul li a { display: none; }  /* kasxu 1-an, 4-an+ nivelojn */

#container > nav ul ul li a {
  border-right: 1px solid #8888bb;
  display: inline;
  padding: .37em 1.6em;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  /* background: #2c5da0 url(/bildoj/menu-malhela.png) repeat-x top left; */
}
#container > nav ul ul ul li a {
  border-right: 1px solid #ddddff;
  font-weight: normal;
  color: #2222ff;
}
#container > nav ul ul ul ul li a { border-right: none }

#container > nav ul ul li:first-child a { border-left: 1px solid #8888bb }
#container > nav ul ul ul li:first-child a { border-left: 1px solid #ddddff}
#container > nav ul ul ul ul li:first-child a { border-left: none }

#pri a#pri-ligo,
#kursoj a#kursoj-ligo,
#ligoj a#ligoj-ligo,
#kunvenoj a#kunvenoj-ligo,
#container > nav ul ul li .active a,
#container > nav ul ul li a.you-are-here,
#container > nav ul ul li a:hover {
   background: #c5ecfd url(/bildoj/menu2-pala.png) repeat-x top left;
   color: black;
}
#container > nav ul ul ul li .active a,
#container > nav ul ul ul li a.you-are-here,
#container > nav ul ul ul li a:hover {
  background-image: none;
  background-color: white;
  color: black;
}
#container > nav ul ul ul li .active a,
#container > nav ul ul ul li a.you-are-here {
  font-weight: bold;
}

#container > nav ul ul ul ul li .active a,
#container > nav ul ul ul ul li a.you-are-here,
#container > nav ul ul ul ul li a:hover {
  background: transparent;
  color: black;
}

body > article,
#content > aside,
#extra-content {
   position: absolute;
   top: .5em;
   right: 2em;
   width: 200px;
   text-align: left;
   font-family: Helvetica, sans-serif;
   font-size: 80%;
   padding-left: 1em;
}
.afisxo { 
  /* border: 1px solid #aaa;  
  padding: .5em;
  -moz-border-radius: .5em;
  */
}
/* http://www.alistapart.com/articles/cssdropshadows/ */

.shadow {
  float: left;
  background: url(/bildoj/shadowAlpha.png) no-repeat bottom right !important;
  background: url(/bildoj/shadow.gif) no-repeat bottom right;
  margin: 6px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.shadow div {
  display: block;
  position: static;       /* for Mac MSIE */
  position/**/: relative; /* for everyone else: hide from Mac MSIE */
  /* background-color: #fff; */
  /* border: 1px solid #a9a9a9; */
  margin: -6px 6px 6px -6px;
  padding: 0px;
}


.img-shadow {
  float: left;
  background: url(/bildoj/shadowAlpha.png) no-repeat bottom right !important;
  background: url(/bildoj/shadow.gif) no-repeat bottom right;
  margin: 6px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.img-shadow img {
  display: block;
  position: static;       /* for Mac MSIE */
  position/**/: relative; /* for everyone else: hide from Mac MSIE */
  /* background-color: #fff; */
  /* border: 1px solid #a9a9a9; */
  margin: -6px 6px 6px -6px;
  padding: 0px;
}

#tradukilo {
  float: right;
}

:target {
  background-color: #ff6;
  border-color: #cc1;
  padding: .5em;
}

.afisxo :target {
  background-color: inherit;
  padding: none;
}
.afisxo ol li { margin: 0em; padding: 0em; line-height: 1.4em }

/*
 * Miniature calendar listing in grid form.
 */

.grid { 
  margin: 0;
  padding: .2em;
  padding-right: 0;
  font-family: sans-serif;
  z-index: 20;
  position: relative; /* Gecko needs this; otherwise links get obscured
                       * when floating */
}

.grid table { 
  border-spacing: 1px;
  border-collapse: separate;
  border: 1px solid gray;
  -moz-border-radius: .4em; border-radius: .4em;
  background: white;
}
.grid th { 
  text-align: center;
  font-weight: normal;
}
.grid th.month { 
  font-weight: bold
}
.grid th.day {
  font-size: 80%;
}
.grid td { 
  text-align: right;
  vertical-align: middle;
  color: #444;
  font-size: 90%;
}
.grid td { 
  /* -moz-border-radius: .4em; border-radius: .4em; */
}
.grid td div,
.grid td a {
  margin: 0px;
  padding: 2px;
  border: 1px solid #bbb;
  /* -moz-border-radius: .4em; border-radius: .4em; */
}
.grid td a {
  display: block;
  background-image: url(/bildoj/blue-button-gradient.png);
  background-repeat: repeat-x;
  z-index: 25;
  font-weight: bold;
  text-decoration: none;
}
.grid td strong { font-weight: normal; }
/* space fillers */
.grid td[colspan],
.grid td.spacer { 
  border: none;
}

ul.archives,
ul.archives ul,
ul.categories,
ul.categories ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
ul.archives ul,
ul.categories ul {
  margin-left: 1em;
}
ul.archives li,
ul.categories li {
  margin-left: 0;
  padding-left: .5em;
}

nav a { 
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline
}
 
/* superi iujn ajn kolorojn rilatajn al lingvoj */
a:link {
  color: #0000ff;
}
a:visited {
  color: #880088;
}

acronym, abbr {
  cursor: help;
  speak: spell-out;
}

.afisxo h1 a:link,
.afisxo h1 a:visited,
h2 a:link,
h2 a:visited,
h3 a:link,
h3 a:visited {
  text-decoration: none;
  color: inherit;
}
.afisxo h1 a:hover,
h2 a:hover,
h3 a:hover {
  text-decoration: underline;
}

#atentigilo .enhavo {
  padding: .5em;
  padding-top: 1em;
  background-color: #ffd;
  border: 2px solid #eea;
  -moz-border-radius: .7em; -border-radius: .7em;
}