/*********************************************************************
**                                                                  **
** (c) Jaguar Software Ltd. 2006-11                                 **
**                                                                  **
** File: screen.css                                                 **
** History:                                                         **
**  15-Nov-06  RWB  Initial creation                                **
**  30-Nov-06  JIK  plainText                                       **
**  01-Dec-06  RWB  callOuts                                        **
**  08-Aug-11  RWB  tidy up, change tag case...                     **
**                                                                  **
** Function:                                                        **
**  style sheet for screen display                                  **
**                                                                  **
*********************************************************************/

body {
/* background: scroll transparent url("images/topBarBkgnd.gif") repeat-x left top; */
   color: #333333;
   font-family: tahoma, verdana, arial, helvetica, sans-serif;
   font-size: small; /* =13px */
   margin: 0;
   text-align: center;
}

#frame {
   border: #330066 2px solid;
   margin: auto;
   position: relative; /* !!! this triggers lots of good behaviour */
   text-align: left;
   width: 720px;
}

#topBar {
/* background-color: #330066; this was the body background image */
   background-image: url("images/strap.gif");
   background-repeat: no-repeat;
   height: 95px;
}

#topBar .strap {
   color: #FFFFFF;
   float: left;
   font-size: 17px; /* large; fix so text-size ops don't overflow */
   margin-left: 10px;
   margin-top: 20px;
   text-align: right;
   width: 320px;
/*
try out composite banner
*/
   visibility: hidden;
}

#topBar img {
/* background-color: #FFFFFF; -- new logo is white on transparent */
   float: right;
   margin-right: 40px;
   margin-top: 10px;
/*
try out composite banner
*/
   visibility: hidden;
}

/* experimental, not used at the moment
#topBar span.logo {
   color: #FFFFFF;
   float: right;
   font-family: stencil, times, serif;
   font-size: xx-large;
   margin-right: 10px;
   margin-top: 10px;
   text-align: center;
   width: 200px;
}
*/

#topMenu {
   background-color: #CCCCCC;
/* border-left: #999999 1px solid; -- better without, now frame has border */
   font-size: 12px;
   font-weight: bold;
   white-space: nowrap;
   height: 26px;
}

#topMenu a {
/* background-color: #CCCCCC; -- do in above, so fills in gap on RHS */
   border-right: #999999 1px solid;
   color: #555555;
   display: block;
   float: left;
   padding: 6px 15px 6px 15px;
   text-decoration: none;
}

#topMenu a.thisPage {
   background-color: #FFFFFF; /* transparent, see above. same as hookText */
   color: #222222;
}

#topMenu a:hover {
   background-color: #DDDDDD;
   color: #000000;
}

h1, h2, h3 {
   color: #330066;
}
h1 {
   font-size: medium;
}
h2 {
   font-size: small;
}
h3 {
   font-size: small;
   margin-bottom: 0;
}

ul {
   margin-top: 5px;
   margin-bottom: 5px;
}

#hookText {
   background: url("images/stones.jpg") no-repeat 450px 70px;
/*       : top right bottom left */
   margin: 20px 10px 20px 10px;
   padding-left: 20px;
   padding-right: 300px;
}

#plainText {
   margin: 20px 10px 20px 10px;
   padding-left: 20px;
   padding-right: 300px;
}

#otherText1 {
   background: url("images/knot.jpg") no-repeat 20px 0px;
   margin: 20px 10px 20px 10px;
   padding-left: 300px;
   padding-right: 20px;
}

#otherText2 {
/* This isn't used at the moment */
/* background: url("images/jaguar.jpg") no-repeat 520px 30px; */
   margin: 20px 10px 20px 10px;
   padding-left: 20px;
   padding-right: 300px;
}

div.callOut {
   color: #606060;
   font-size: 110%;
   white-space: pre;
   width: 250px;
/*
   color: #606060;
   font-size: 130%;
   font-style: italic;
   font-family: Baskerville, Times, serif;
*/
}

div#referralCallOut {
   position: absolute;
   right: 20px;
   top: 450px;
}

#footer {
   background-color: #330066;
   color: #FFFFFF;
   font-size: smaller;
   margin-top: 30px;
   padding: 5px;
   text-align: right;
}

/*
a {
   color: #0000CC;
   text-decoration: none;
}
*/
/*
a:visited {
   color: #660066;
}
*/
a:hover {
   background-color: #CCCCCC;
   color: #660000;
}

a img {
   border-style: none;
}

address {
   font-style: normal;
   padding-bottom: 5px;
   padding-top: 10px;
   margin-top: 0;
   white-space: pre;
}

/* that's it */