/* 
     Author: Jacob Ashdown
     Date: 27 July 2010
     Last Modified: 27 July 2010
*/

/* 
   Whole site stylesheet organised
   in order of presentation.
   Elements styles outside of classes and ids
   are declared at the end of the document.
*/

/* top menu bar */

.menuBar{
  background-image:url('gradient.php.png');
  background-repeat:repeat-x;
  height:100px;
  }

/* title bar with home and parent site links */

table.topBar
  {
  width:100%;
  position:relative;
  top:10px;
  bottom:10px;
  }

  #top1
  {
  text-align:center;
  vertical-align:middle;
  }

  #top2
  {
  vertical-align:middle;
  text-align:center;
  }

  #top1link
  {
  border-style:solid;
  border-width:2px;
  border-color:#D6CA96;
  background-color:white;
  vertical-align:middle;
  text-align:center;
  }

  #top2link
  {
  font-size:2.0em;
  text-decoration:none;
  color:inherit;
  }

/*top navigation*/

.bottomBar
  {
  text-align:center;
  vertical-align:middle;
  }

.bottomBar a
  {
  text-align:center;
  text-decoration: none;
  color:#4A4A4A;
  text-decoration: none;
  }

.bottomBar a:hover
  {
  color: black;
  }


/* body of index page */
div.index
  {
    margin: 20px;
  }

/* menu on left */
div.navBar
  {
  float: right;
  width:25%;
  position:relative;
  top:5%;
  bottom:20%;
  }

table.navBar
  {
  width:100%;
  position:relative;
  top:0%;
  bottom:0%;
  }

/*display divs*/
div.chart
  {
  width:70%;
  margin: auto;
  float: right;
  }
div.description
  {
  width: 600px;
  margin: auto;
  float: left;

  }
div.chartnotes
  {
  width: 600px;
  margin: auto;
  float: left;

  }

/* footer */
.footer
  {
  padding-top:20px;
  }
/* TODO could use jscript to style the height based on resolution detection
nest navbar in index div or not? use table with special id'd first box - very tall
and based on jscript detect. rest go white with 40% width and then 50% divided by 3
with shelter colour. looks lshaped but actually in bottomBar div.../table... Actually,
this is all dumb - should expand to fit content and have minmum height based on detected resolution
... that should do it...*/

  div.footer a
  {
  padding-left: 10px;
  text-decoration: none;
  }

  table.footer
  {
  width:100%;
  }
/*--------------*/
/* body of page */
/*--------------*/
body
  {
  font-size:100%;
  color:#4A4A4A;
  font-family:Arial,Helvetica,sans-serif;
  }

  p
  {
  padding-left:.5%;
  margin-left: .5%;
  }
  ul
  {
  width: 50em;
  margin-left: 0;
  padding-left: 5%;
  
  }
  
  li{
  list-style-type: square;
  }