.mainBody
{
  margin: 0;
  padding: 0px;
  width: auto;
  height: auto;
}

/* Main header, with company logo.  Will possibly change to one image, if
company logo doesn't have the company name on */

.header1
{
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0px;
  width: 728px;
  min-width: 728px;
  max-width: 728px;
  height: 96px;
  clear: both;
}

.header1Left
{
  float: left;
  border: 0px;
  padding: 0px;
}

.header1Right
{
  float: right;
  border: 0px;
  padding: 0px;
}

#logo
{
  clear: left;
}

#ACCALogo
{
  clear: right;
}

/* Secondary header, not really a header, just some writing and the main 3
links (3 to fit with the rule-of-three, magic number 3, i.e. catches the eye,
etc.).  color and background-color can be changed as needed. */

.header2
{
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(0,90,165);
  color: white;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  width: 728px;
  min-width: 728px;
  max-width: 728px;
  font-size: 13px;
  height: 17px;
  clear: both;
}

.header2Printing
{
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(0,90,165);
  color: white;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  width: 586px;
  min-width: 586px;
  max-width: 586px;
  font-size: 13px;
  height: 17px;
  clear: both; 
}

.header2Left
{
  margin-left: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  padding: 0px;
  float: left;
  clear: left;
}

.header2Right
{
  margin-right: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 0px;
  float: right;
  clear: right;
}

#header2RightP
{
}

/* Literally the spacer between the links, something to break the monotonous
gray line.  Again, this color can be changed to suit the style required */

.redline
{
  color: rgb(204,0,51);
}

.columns
{
  margin-left: 25px;
  margin-top: 2px;
  margin-bottom: 0px;
  margin-right: 25px;
  padding: 0px;
  width: 726px;
  min-width: 726px;
  max-width: 726px;
  height: auto;
  clear: both;
}

/* In other words: the navigation bar.  This column's sole purpose is to
grant the user access to the whole site (thereby removing the need for a site
map).  background-color here determines the whole column colour, see
#siteLinks to change the background colour of the navigation bar. 
  background-color: rgb(0,90,165); */

.leftColumn
{
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  height: auto;
  width: 138px;
  min-width: 138px;
  max-width: 140px;
  float: left;
  clear: left;
  border-bottom: 1px solid white;
  background-color: white;
}

.leftColumnContent
{
  margin: 0px;
  padding: 0px;
}

/* Controls the navigation bar.  color and background-color can be changed to
suit the style required.  NOTE: the color will also alter the colour of the
list markers.  For some reason, importing one's own marker hasn't worked,
though I have tried many things */

#siteLinks
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding-top: 0px;
  padding-bottom: 5px;
  padding-right: 0px;
  padding-left: 20px;
  line-height: 15px;
  margin: 0px;
  text-decoration: none;
  background-color: rgb(0, 90, 165);
  border-bottom: 1px solid white;
  color: rgb(255,204,0);
}

.zz
{
  padding-top: 5px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  margin-left: 5px;
  margin-right: 0px;
  list-style-image: url(../images/005_bullet.png);
}

a
{
  text-decoration: none;
}

a.xx
{
  color: white;
}

a.xx:visited
{
  color: white;
}

a.yy
{
  color: white;
}

a.yy:visited
{
  color: white;
}

a:hover
{
  text-decoration: underline;
}

/* The :visited section controls the colour of the links once the user has
visited the page they point to.  This colour can be changed (using color, as
per usual) to suit the style required (I'll get tired of saying that in a
minute, I can feel it). */

a:visited
{
  color: black;
}

a.pp
{
  color: black;
}

a.pp:visited
{
  color: black;
}


/* The colour of the name "Perpetual" heading the address. */

#cDS
{
  color: black;
}

/* The colour of the E-mail link */

#cDE
{
  color: white;
}

#cDE:visited
{
  color: white;
}


#contactDetails
{
  padding-left: 3px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 0px;
  color: black;
  text-align: left;
  border: 1px solid rgb(204,204,204);
}

/* The percentages here are tried and tested to look good in both IE and
Firefox, at 1024x768 resolution (96dpi).  For some reason, IE actually
accepts these percentages for what they are meant to be, so they are not
altered in the Holly hack below.  On a smaller screen resolution, or in a
smaller than full size browser window, the only displeasing mark is that the
banner image is partly off-screen.  But the columns of words flow pretty well
until the window is too small to be able to make sense of anything anyway (
although I may try to put in some "minumum-width" perameters to prevent it
from f*cking up too much in a small window). */

/* REVISION 1: Fixed width design approach adopted, now the site looks great in
   800x600 (as per request) and has an acceptably small amount of whitespace on
   the right in 1024x768.  (See the bbc website to see an example of this approach
   in common use - http://www.bbc.co.uk */

.rightColumn
{
  margin: 0px;
  padding: 0px;
  height: auto;
  width: 586px;
  min-width: 586px;
  max-width: 586px;
  float: right;
  clear: right;
  border: 1px solid white;
}

.printingColumn
{
  margin-left: 23px;
  margin-top: 2px;
  margin-bottom: 0px;
  margin-right: 25px;
  padding: 0px;
  width: 586px;
  min-width: 586px;
  max-width: 586px;
  border: 1px solid white;
}

#homeRC
{
}

.rightColumnContent
{
}

#banner1
{
}

#banner2
{
  margin-top: 0px;
  margin-left: 1px;
  margin-right: 0px;
  margin-bottom: 3px;
  padding: 0px;
}

/* The main text body on the site is controlled from here.  One can set the
size, style, colour, background colour and even the colour of the border (one
must be careful when updating the .html source to put text in the correct
paragraphs, and label the paragraphs correctly, as failing to do so will
reduce the quality of the output, especially where borders are used).

NOTE: Don't forget to update the #inlineTextX CSS as well, as these are meant
to be ordinary text as well (they are separate to make the column flowing
simpler, the only difference being that one is a class (the . indicates a
class) and the other is an ID (indicated by the #).  Unfortunately, the IDs
must be unique, so one must add another #inlineTextY method for each
subsequent use of the inline columns on the same page. */

.ordinaryText
{
  width: 584px;
  max-width: 584px;
  min-width: 584px;
  margin-top: 0px;
  margin-bottom: 7px;
  margin-left: 2px;
  margin-right: 0px;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 17px;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  color: black;
  background-color: white;
  text-align: justify;
  border: 1px solid rgb(204,204,204);
}

.bold
{
  font-weight: bold;
}

#testimonialsHeader
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-style: normal;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(0, 90, 165);
  background-color: white;
  text-align: left;
  float: left;
}

.testimonialText
{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 2px;
  margin-right: 0px;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 17px;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  color: black;
  background-color: white;
  text-align: justify;
  border: 1px solid rgb(204,204,204);
}

#ordinaryTextInTestimonials
{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 14px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: black;
  background-color: white;
  text-align: justify;
}

/* If one were to put a small image, such as a portrait of one of the owners,
into a body of text, and expect the text to flow around the image, this
section would be the one to use.  Create a div with a class="inTextColumns"
and then assign the class="inTextLeftColumn" to the image (for example) and
the class="inTextRightColumn" to a paragraph of text with the
id="inlineText1". If more than one such instance of flowing text, simply copy
and paste the "inlineText1" stuff and rename it "inlineText2" etc. as
required (remembering to give the paragraphs the different IDs respectively.
(not very extensively tested, may need tweaking). */

/* REVISION 1: Replaced the "id" for a usual "class", so no need to rename
   each paragraph "1", "2", etc., just call them all: class="inlineText1" */

/* REVISION 2: Remembered why I did it that way... */

.inTextColumns
{
  margin: 0px;
  padding: 0px;
  height: auto;
  width: 584px;
  min-width: 584px;
  max-width: 584px;
  clear: none;
  float: left;
}

.inTextLeftColumn
{
  width: 287px;
  min-width: 287px;
  max-width: 287px;
  padding: 0px;
  margin-right: 2px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  height: auto;
  float: left;
  clear: none;
  border: 1px solid rgb(204,204,204);
}

.inTextRightColumn
{
  width: 287px;
  min-width: 287px;
  max-width: 287px;
  padding: 0px;
  margin: 0px;
  height: auto;
  float: right;
  clear: none;
  border: 1px solid rgb(204,204,204);
}

.stupidIE
{
  width: 287px;
  min-width: 287px;
  max-width: 287px;
  margin-left: 0px;
  margin-right: 2px;
  margin-top: 0px;
  margin-bottom: 5px;
}

.inlineText1
{
  padding: 5px;
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 17px;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  color: black;
  background-color: white;
  text-align: justify;
}

.inColumnImage
{
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  padding: 0px;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 5px;
  margin-right: 0px;
  border: 0px;
}


/* The style of the headings in the main body. */

.ordinaryTextHeader
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(0, 90, 165);
  background-color: white;
  text-align: left;
}

.ordinaryTextHeaderRight
{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-style: italic;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(0, 90, 165);
  background-color: white;
  text-align: left;
  float: right;
}

.inlineLink
{  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(0, 90, 165);
  background-color: white;
  text-align: justify;
}

.inlineLink:visited
{  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(0, 90, 165);
  background-color: white;
  text-align: justify;
}

.inlineLinkHeader
{  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(0, 90, 165);
  background-color: white;
  text-align: justify;
}

.inlineLinkHeader:visited
{  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(0, 90, 165);
  background-color: white;
  text-align: justify;
}

.imageLink
{
  color: white;
  background-color: white;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.imageLink:visited
{
  color: white;
  background-color: white;
  padding: 0px;
  margin: 0px;
  border: 0px;
}
.hiddenLink
{
  color: white;
  background-color: white;
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.hiddenLink:visited
{
  color: white;
  background-color: white;
  padding: 0px;
  margin: 0px;
  border: 0px;
}





.linkImage
{
  border: 0px;
}

.formQuestion
{
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 0px;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: italic;
  line-height: 20px;
  font-weight: bold;
  font-variant: normal;
  text-transform: none;
  color: rgb(51,51,51);
  background-color: white;
  text-align: left;
}

.footer
{
  margin-left: 23px;
  margin-right: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  width: 728px;
  min-width: 728px;
  max-width: 728px;
  height: 40px;
  border: 0px;
  height: 31px;
  clear: both;
  font-family: Arial, Helvetica, sans-serif;
}

.normalImage
{
  float: left;
  border: 0px;
  padding: 0px;
  margin: 0px;
}


.footerPrinting
{
  margin-left: 23px;
  margin-right: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  width: 586px;
  min-width: 586px;
  max-width: 586px;
  height: 40px;
  clear: both;
  border: 0px;
  height: 31px;
  font-family: Arial, Helvetica, sans-serif;
}

.footerText
{
  padding: 0px;
  text-align: center;
  font-size: 9px;
  line-height: 31px;
  margin: 0px;
  width: 630px;
  min-width: 630px;
  max-width: 630px;
  float: left;
}

.footerTextP
{
  padding: 0px;
  text-align: center;
  font-size: 9px;
  line-height: 31px;
  margin: 0px;
  width: 430px;
  max-width: 430px;
  min-width: 430px;
  float: left;
}