<?php
  header("Content-Type: text/css");
  include('images_and_colours_pylons.php');
  include('colour_functions.php');
?>

/*
  2009-08-26 Anne Bennett, basic design, based on:
    http://meyerweb.com/eric/css/edge/complexspiral/demo.html

  Note that IE/Windows (any version) and possibly Opera (<=v6)
  do not properly support "background-attachment: fixed" for
  elements other than body.  On those browsers, the images may
  move with their containing element.

  There are several fixed images whose "selection" in a particular
  context gives the illusion of transparency.  All of them are of 
  our trusty pylon, with different foreground and background
  colours:
    - body ("frame" and logo)       black on orange, black text
    - content                       tan on peach, black text (brown headers)
    - the current nav link(s)       tan on peach, brown text
    - quiescent nav links           dark brown on brown, peach text
    - "hovering" nav link           brown on red, peach text
    - main table background         peach on cream, dark brown text
    (... and more as needed)

  Note: when I tried a background of "transparent" for the "div#link a"
  elements as suggested on the complexspiral web site, the links did
  not work as expected: they got the body background colour.  I had to
  specify the "right" background colour for each link.  This is because
  my links are at least partly below my image - complexspiral demo has
  a much higher image, higher than the div#links, so their links are
  never over an imageless part of the window.

*/

.PRINTONLY { /* stuff to be shown only when page is printed */
   display:             none !important;
}

/* =========== transparency and basic colour set-up ================= */

/* make page use full viewport; makes min-height percent work */
html {
  height:                       100%;
}

/* this is the "frame" around the page content, which contains */
/* the page header and footer and navigation links */
/* note that "position: relative|absolute" is indicated  */
/* further below for these elements. */
div#outer,
body { 
<?php colourscheme('main'); ?>
}

/* quiescent navigation links */
div#links div.sublinks a,
div#links a {
<?php colourscheme('brown','light','1px'); ?>
}

/* navigation link(s) to the current page/section */
div#links div.sublinks a.current,
div#links a.current {
<?php colourscheme('peach','light','1px'); ?>
}

/* navigation links being hovered over */
div#links div.sublinks a:hover,
div#links a:hover {
<?php colourscheme('red'); ?>
}

/* actual page content */
div#content { 
<?php colourscheme('peach','default','1px'); ?>
}

div#header {
<?php colourscheme('inherit','black'); ?>
}
div#footer {
<?php colourscheme('inherit','brown'); ?>
}

/* header colours */
div#content h1,
div#content h2,
div#content h3,
div#content h4,
div#content h5,
div#content h6 {
<?php colourscheme('inherit','brown'); ?>
}

/* links in the content text */
div#content a:link {
<?php colourscheme('inherit','brown'); ?>
}
div#content a:visited {
<?php colourscheme('inherit','dk brown'); ?>
}
div#content a:link:hover,
div#content a:visited:hover {
<?php colourscheme('inherit','red'); ?>
}

/* tables */
table { 
<?php colourscheme('cream','default','2px'); ?>
}

th {
<?php colourscheme('brown'); ?>
  border-style:                 none; /* no point; a bg color or image */
                                      /* overwrites the border */
}

td, th, tr {
  border-color:                 <?php pcolour('brown'); ?>; /* when used */
}

/* general classes usually used in tables */
/* be careful, though: if used in td or th, these overwrite borders */

.contentlike { 
<?php colourscheme('peach'); ?>
}

.highlight { 
<?php colourscheme('red','dark'); ?>
}


/* =========== section positions and sizes ========================== */

body {
  position:                     relative;
  font-size:                    10pt; /* sets "em" sizes of sub-elements */
  margin:                       0;
  padding:                      0;
  min-height:                   100%; /* fill viewport */
}

div#outer {
  position:                     absolute;
  top:                          3px;
  left:                         12em; /* room for navigation */
  right:                        3px;
  bottom:                       3px;
  padding:                      0 0.2em 0 0; /* T R B L */
  min-height:                   100%; /* fill body/viewport */
}

div#header p {
  margin:                       0.1em 1em 0.1em 1em; /* T R B L */
}

div#footer p {
  padding:                      0.2em;
}

div#content {
  padding:                      1.5em; /* adjust h1 left margin if adjusting this */
  min-height:                   70%; /* viewport except room for head/foot */
}

div#links {
  position:                     relative;
  top:                          170px; /* overlap the pylon */
  left:                         1px;
  width:                        12em;
  max-width:                    12em; /* don't lose any text */
}

/* this makes the entire navigation or subnav link fill a "block */
/* id div#links trumps class div.sublinks, so must specify */
div#links div.sublinks a,
div#links a {
  display:                      block;
  padding:                      5px 10px 5px 10px ; /* T R B L */
  margin:                       0 0 2px 0.2em; /* T R B L */
  text-decoration:              none;
  text-align:                   center;
}

/* reduce the width a bit each level down */
/* id div#links trumps class div.sublinks, so must specify */
div#links div.sublinks {
  position:                     relative;
  left:                         10%;
  width:                        90%;
}


/* =========== Fonts and alignment ================================== */

div#links,
div#header,
div#content h1,
div#content h2,
div#content h3,
div#content h4,
div#content h5,
div#content h6 {
  font-weight:                  bold;
  font-family:                  sans-serif;
}

div#links a {
  font-size:                    110%;
}
/* reduce the font size a bit each level down */
div.sublinks {
  font-size:                    90%;
}

div#header {
  font-size:                    200%;
  text-align:                   center;
}
div#footer {
  font-style:                   italic;
  font-size:                    80%;
}
div#content {
  font-family:                  serif;
  font-size:                    1em;
}

/* header sizes and alignment */
div#content h1,
div#content h2 {
  font-size:                    140%;
}
div#content h3,
div#content h4 {
  font-size:                    120%;
}
div#content h5,
div#content h6 {
  font-size:                    100%;
}
div#content h1 {
  margin:                       1em 0 0.5em -0.6em; /* T R B L */
}

.left {
  text-align:                   left;
}


/* =========== general text stuff =================================== */

dt {
  font-weight:                  bold;
}

code, pre {
  color:                        <?php pcolour('dk brown'); ?>;
  font-size:                    110%;
  font-family:                  monospace;
}

/* =========== tables =============================================== */

table {
  width:                        100%;
  border-collapse:              collapse;
  padding:                      0;
}

table.small {
  width:                        auto;
}

td, th, tr {
  border-style:                 none; /* default; add them in as needed */
  border-width:                 1px; /* when used */
}

/* this adds horizontal lines between rows */
/* but seems to be overridden if td or th has bg image/colour */
table.rowborders th,
table.rowborders td,
table.rowborders tr {
  border-style:                 solid none solid none; /* T R L B */
}

table.rowborders td.highlight {
  border-style:                 solid none solid none; /* T R L B */;
  border-width:                 8px; /* DEBUG */
}
table.rowborders td.thlike { 
  border-style:                 solid;
  /*border-width:                 8px; /* DEBUG */
}

table.rowborders th {
  border-width:                 2px; /* extra wide */
  border-style:                 solid none solid none; /* T R L B */
}

table.rowborders td,
table.rowborders th {
  padding-left:                 0.8em;
  padding-right:                0.8em;
}