/* -- overall layout -- */
html  { 
  padding: 2%;
  background-color: #6a95bd;	/* bottom color of gradient */
  background-image: url("backgr_gradient-vert.png"); /* rendered in front of color, if any */
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: top left;
  color: #4a5e73;
  font-family: Trebuchet, Verdana, Arial, sans-serif;
  word-spacing: .1em;
}
body  { 
  padding: 0;
  margin: 0 auto;		/* center */
  max-width: 84em;		/* twice 42 CpL */
}
img  { 
  border: none;
}

/* -- text -- */
a  { 
  text-decoration: none;
}
a:hover  { 
  background-color: #ffffd6;
  outline: 1px solid #d8d81a;
}
/* display a mail letter icon after mailto: links */
a[href^="mailto:"]:after  { 
  content: url( "mail.png");	/* no text fall-back */
  padding-left: .3em;
}
/* display an external-link symbol after http links */
a[href^="http:"]:after  { 
  content: url( "external_link.png");	/* no text fall-back */
  padding-left: .3em;
}
samp  { 
  color: blue;
  font-style: italic;
  font-weight: bolder;
}
ul, dl, ol  { 
  margin: 0 auto;
  padding-left: 0;
}
dd  { 
  margin-left: 5%;
}
sup.reference a:after  { 
  content: ")";
}
span.name  { 
  font-variant: small-caps;
}
p, ol  { 
  margin: 0 auto;
}
p + p, p + a + ol  { 
  margin: .5em auto 0;
}
.error { 
  color: #b00;
}


/* -- content -- */
.tile  {  /* layering effect */
  border-style: solid;
  border-width: 2px;
  border-color: #f9f9f9 #3e4e7f #424242 #e5edff;   /* alternative: #ff and #e6 */
  background-image: url("transparent-white50.png");
} 
.tileContent  {  /* horizontal gradient */
  padding: 2%;
  background-image: url("gradient-horiz-512-blue.png");
  background-repeat: repeat-y;
} 
.tileContent:after  { 
  content: "";
  display: block;
  clear: both;
}
.tile h1  { 
  margin: 1.5em auto 1em;
  color: #555555;
  font-size: 1.5em;
  font-variant: small-caps;
}
.tile h2  { 
  margin: 1em auto .5em;
  color: #a00000;
  font-size: 1.2em;
  font-variant: small-caps;
}
.major { 
  margin-top: 1em;
  max-width: 52em;		/* gives approx. 52 CpL, characters per line */
}
.major .tileContent  { 
  padding: 5%;
}
.minor { 
  float: right;
  margin: 0 0 1em 2em;
  max-width: 30%;
}
.menu  { 
  text-align: center;
  margin-bottom: 2em;
}
/* .menu .item + .item  {  */
/*   margin-left: 1em; */
/* } */
.menu .item  { 
  background: #99b6d2 url( "gradient-vertical-12.png") repeat-x;
  padding: .3em;
  border: 1px solid #b1c1d1;
}
.menu .item:hover  { 
  background: #d3d39b url( "gradient-vertical-12-hover.png") repeat-x;
}
.menu .item a:hover  { 		/* no hovering effect for links when box has hovering */
  background-color: transparent;
  outline: 0;
}
.menu .item.disabled  { 
  color: #444;
  background: #b6b6b6 url( "gradient-vertical-12-disabled.png") repeat-x;
}


/* -- header -- */
.header  { 
  margin-left: auto;
  width: 70%;
  max-width: 70%;
}
.header img  { 
  width: 100%;		/* in case the image is smaller than the main column: upscale image */
  max-width: 100%;
}


/* -- footer -- */
.footer  { 
  margin: 1.5em auto 0;
  font-size: 90%;
  max-width: 80%;
}
.footer .logo  { 
  max-width: 15%;
  float: right;
  margin-left: 2em;
}
.footer ul  { 
  margin: 0;
  list-style-type: none;
  list-style-position: inside;
}
.footer ul li:before  { 
  content: '\FF0A\00A0';
  color: #fb0;
}


/* -- development -- */
/* body, h1, h2, h3, div, p, ul, ol, dl, dt, dd, li, img { */
/*   outline: 1px solid red; */
/* } */