/* main reference/tutorial: http://www.w3schools.com/css/ */
/* more sources:
   http://www.mandarindesign.com/opacity.html
   http://www.xs4all.nl/~peterned/csshover.html (IE hover workaround)
   http://css.maxdesign.com.au/listamatic2/vertical11.htm (cool menus)
   http://www.cssplay.co.uk/menu/gallery4.html (funny image gallery)
   http://kryogenix.org/code/browser/jses/ (javascript event sheets!?)
*/

/* standard font and colors */
body { font:normal normal normal 12px helvetica;
   background-color:#fafafa; color:#333333;
   }
table { background-color:#fafafa; }
a { color:#333333; text-decoration:none; border:solid 0px black; }
a:hover { cursor:pointer; }

/* positioning and dimensions */
h1 { position:absolute; left:5%; top:96px; width:90%; }
table { width:90%; min-width:480px; table-layout:auto; }
table#nav { position:absolute; left:5%; top:25px; height:42px; }
table#nav td { width:20%; }
table.txt { position:absolute; left:5%; top:164px; height:64%; }
table.txt td { height:24px; }
table.img { position:absolute; left:5%; top:164px; height:64%; }
table.img td { height:140px; }
table.gal { position:absolute; left:5%; top:112px; height:75%; }
table.idx { position:absolute; left:5%; top:112px; height:75%; }

/* standard alignments and padding */
table#nav td { text-align:left; vertical-align:middle; }
table.txt td { text-align:left; vertical-align:top;
   padding:10px 10px 10px 0px; }
table.img td { text-align:center; vertical-align:top; padding:10px 10px; }
/* border-color:transparent doesn't work in IE */
table.img img { border-style:solid; border-color:#fafafa; }
table.img img.ov { border-width: 5px 20px 5px; }
table.img img.oh { border-width:20px 10px 5px; }
table.gal td { text-align:center; vertical-align:middle; }
table.gal img { border:solid 0px black; }
table.idx td { text-align:center; vertical-align:middle; }
table.idx img { border:solid 0px black; }

/* fonts, check at http://markup.co.nz/colorPicker/back_to_font.htm */
h1 { font:normal small-caps bold 18px helvetica; letter-spacing:.2em; }
table#nav { font:normal small-caps normal 9px helvetica; letter-spacing:.5em; }
table#nav td.cur { font:normal small-caps normal 9px helvetica; letter-spacing:.6em; }
table.txt { font:normal normal normal 12px helvetica; }
table.img { font:normal normal normal 12px helvetica; }
table.gal { font:normal normal normal 12px helvetica; }
table.idx { font:normal small-caps bold 18px helvetica; cursor:pointer; }
table.idx p { letter-spacing:.4em; color:#aaaaaa; }
table.idx#nav td, table.idx#nav a { color:#aaaaaa; }

/* copyright in table */
table td.copyright { text-align:right; vertical-align:bottom;
   font:italic normal normal 8px helvetica; }
table td.copyright { height:52pt; }
table.txt td.copyright { height:75%; }

/* hide & show using html events onmouseover/onmouseout */
.show { opacity:1.0; filter:alpha(opacity=100); }
.fade { opacity:0.22; filter:alpha(opacity=22); }
.hide { opacity:0.07; filter:alpha(opacity=7); }
.none { opacity:0.00; filter:alpha(opacity=0); }
/* alternative approach (in IE only a:hover works for <a href="..">..</a>):
   table.nav { opacity:0; }
   table.nav:hover { opacity:1; }
*/

/* hide img captions using a:hover */
table.img td a { color:#fafafa; }
table.img td a:hover { color:#333333; cursor:pointer; }

/* debugging: reset line width */
table    { border:solid 0px black; border-collapse:separate; }
table td { border:solid 0px black; }