* { margin: 0; padding: 0; }
body  /* Changed font family */ { font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.6; background-color:#f78f1e; }
h1 { color: #ff4500; font-size: 1.8em; text-align: center; text-transform: capitalize; word-spacing: 4px; letter-spacing: 4px; margin-bottom: 1.2em; padding-top: 10px; padding-bottom: 0; border-bottom: 1px solid #ff4500  }
h2 { color: #00f; font-size: 1.6em; text-align: left; text-transform: capitalize; word-spacing: 2px; letter-spacing: 1px; margin-top: 1.2em; margin-bottom: 0; }
h3 { color: #00f; font-size: 1.4em; font-weight: bold; text-align: left; text-transform: capitalize; word-spacing: 2px; letter-spacing: 1px; margin-top: 1.2em; }
h4 { color: #00f; font-weight: bold; text-align: left; text-transform: capitalize; word-spacing: 2px; letter-spacing: 1px;}
h5 { color: #ff4500; font-weight: bold; background-color: #ccc4ff; text-align: left; word-spacing: 2px; letter-spacing: 1px;}
p   { line-height: 1.4em; text-align: left; margin-bottom: 1em; }
h4, h5, p, td { font-size: 1.2em; text-align: left; margin-top: 0.4em; }
ul, li, ol  /* No idea why need to reduce font size wrt p */ { font-size: 1.1em; margin-top: 0.2em; margin-left: 1.4em; }
ul { margin-bottom: 1.2em; }
ul ul  /*  Controls 2nd tier nested list */ { margin-bottom: 0; margin-left: 2em; }
li li  /* Need to reduce font size wrt 1st tier lists  */ { font-size: 0.9em; font-family: Verdana, Arial, Helvetica, sans-serif; margin-top: 0; margin-bottom: 0; }
td { vertical-align: top; border-width: 0 }
img { border-style: none; }
.bold_centre { font-weight: 700; text-align: center; }
.bold_blue_left { color: #00f; font-size: 1.4em; font-weight: 700; text-align: left; }
.centre { text-align: center; }
#wrapper { background-color: #fff; }
#branding { background-color: #005daa; position: relative; height: 150px; border-bottom: 4px solid #f78f1e; }
#contact  /* To float right txt must precede the element it is to go next to */ { float: right; margin: 6px 12px; padding: 6px 12px; }
#contact2 { margin: 6px 12px; padding: 6px 12px; border: solid 1px #000; }
.contactText  /* Same as H3 (bar margin/pading). Used to prevent problems with accessibility */ { color: #00f; font-size: 1.4em; font-weight: bold; text-align: left; text-transform: capitalize; word-spacing: 2px; letter-spacing: 1px; margin-top: 0; padding-top: 0; }
/*Navigation*/
#mainNav  /*  font size & left magrin required to over ride Body */ { font-size: 1em; background-color: #eef; margin-top: 1em; margin-left: 0; padding: 20px 0; }
#mainNav li  /* Have over writing generic classes for ul, li */ { list-style: none; font-size: 1em; font-weight: bold; line-height: 3em; text-decoration: none; text-align: center; text-transform: lowercase; word-spacing: 4px; vertical-align: middle; margin: 0; padding: 0; border-top: 1px solid #99c; }
#mainNav li + li + li + li + li + li + li + li + li + li + li + li +li   /* This adds the boarder to the bottom of the last item in the list. If UL used boarder some distance away from last item in the list */ { border-bottom: 1px solid #99c; }
#mainNav li a { text-decoration: none; width: 18em; display: block; }
#mainNav li a:link { color: #395584 }
#mainNav li a:visited { color: #ff4500 }
#mainNav li a:hover { color: #9b9b9b }
#mainNav li a:active { color: #95ff90 }
skiplinks { position: absolute; left: -500em; }
/*Control of txt & corners
 for RHS*/
#secondaryContent { margin-top: 1em; margin-right: 1em; }
#secondaryContent h3  /* Info here not as important as in main area hence use of h3. Also removes possible confusion re accessibility */ { color: #fff; font-size: 1.2em; text-align: left; margin-right: 0; margin-bottom: 4px; padding-right: 0; padding-bottom: 0; padding-left: 4px; border-bottom: 1px solid #fff; }
#secondaryContent h3:first-child  /* Used to pull the first header (& hence all items) up the page */ { margin-top: 0; padding-top: 10px; }
#secondaryContent p { font-size: 1.1em; margin-top: 0; margin-right: 12px; margin-left: 12px; }
.box { background: #f78f1e url(../images/bottom_left_O.gif) no-repeat left bottom; }
.box-outer  /* Bottom left - uesd #secondaryContent   */ { background-image: url(../images/target.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right bottom; padding-bottom: 30px; }
.box-inner { background-image: url(../images/top_left_O.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; }
.topRight { background-image: url(../images/top_right_O.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right top; }
/*Layout
================================= */
body { font-size: 62.5%; text-align: center; }
#wrapper { width: 100em; max-width: 100%; margin: 0 auto; text-align: left; }
#mainNav   { width: 18em; max-width: 18%; float: left; }
#content  /* Padding as per top in Secondary Content */ { width: 80em; max-width: 80%; float: right; padding-bottom: 1em; }
#mainContent { width: 53em; max-width: 66%; float: left; }
#secondaryContent { width: 24em; max-width: 31%; float: right; } 
#footer { clear: both; }
/*Heading*/
#logo { position: absolute; top: 0; left: 5px; z-index: 1000; float: left; }
#slogan  /* Line height provents IE from partially hidding slogan */ { color: #fff; font-size: 1.3em; font-weight: 700; line-height: 1.4em; position: absolute; top: 35px; right: 25px; z-index: 4000; float: right; padding-right: 5px; }
#globe { position: absolute; top: 0; right: 5px; z-index: 3000; float: right; margin-top: 0; margin-right: 0; }
/*Links within the text*/
a  { text-decoration: none   }
a:link { color: #395584 }
a:visited { color: #808080 }
a:hover { color: #9b9b9b }
a:active { color: #95ff90 ; }
a[href^="mailto:"] { color: #008000; font-weight: 500; background: url(../images/email.gif) no-repeat right top; padding-right: 20px; }
/*Footer*/
#footer   { background-color: #f78f1e; padding-top: 6px; padding-bottom: 1px; }
.footer_menu  /* Margin to close gap btw rows */ { color: #fff; font-size: 1em; text-decoration: none; text-align: center; margin-top: 1px; margin-bottom: 0; }
.footer_menu a:link       { color: #fff ; font-weight: 700; }
.footer_menu a:visited       { color: #808080 ; font-weight: 700; }
.footer_menu a:hover    { color: #9b9b9b ; font-weight: 700; }
.footer_menu a:active        { color: #95ff90 ; font-weight: 700; }
.designedby      { color: #fff; font-size: 1em; text-align: center; margin-top: 0; }
/*Accessibility*/
skiplinks { position: absolute; left: -500em; }
/*Form Control*/
fieldset { margin: 1em 0; padding: 1em; border: solid 1px #cc0c00; }
legend { font-weight: bold; }
label { width: 10em; float: left; display: block; }
input { width: 200px; }
input[type="text"], textarea { border-color: #999 #ccc #ccc #999; border-style: solid; border-width: 2px 1px 1px 2px; }
textarea { width: 300px; height: 100px; }
input:focus, textarea:focus { background-color: #ffc; }
#sourceLabel { text-indent: -1000em; width: 0; }
#source { margin-left: 120px; }
#submit { color: #fff; background-color: #395584; width: 75px; }
/*Portfolio*/
.captioned_photo_r  /* negative margin to align image on the right */ { float: right; margin: 0.5em 1em 0.5em 0; padding: 0; line-height: 1em; width: 194px; }
.captioned_photo_r p { width: 100%; margin: 0; padding: 1em 0; font: 1em/1.75em Verdana, sans-serif; color: #000; text-align: center; }
.captioned_photo_r img { margin: 0; padding: 2px; border: double 3px #8894b5; display: block; }
.captioned_photo_l { float: left; margin: 0.5em 0 0.5em 1em; padding: 0; line-height: 1em; width: 194px; }
.captioned_photo_l p { width: 100%; margin: 0; padding: 1em 0; font: 1em/1.75em Verdana, sans-serif; color: #000; text-align: center; }
.captioned_photo_l img { margin: 0; padding: 2px; border: double 3px #8894b5; display: block; }
/*Website Audit*/
#essential, #premium { background-color: #e0d2ff; margin-bottom: 1.2em; border: solid 2px #99c; }
#essential h3, #premium h3 { text-align: center; margin-top: 0; }
#essential p, #premium p { margin-right: 0.3em; margin-left: 0.3em; padding-right: 0.3em; padding-left: 0.3em; }
/*E-newsletters*/
#eRHS  /* ex mainNav */ { background-color: #eef; width: 25em; float: right; max-width: 31%; margin-top: 1.5em; margin-right: 4em; }
#eRHS h2 { margin-top: 0.2em; }
#eRHS li { font-size: 1em; line-height: 1em; margin-right: 0; margin-bottom: 1em; margin-left: 0; padding-right: 0; padding-left: 0; border-bottom: 0.1em solid #395584; list-style-type: none; }
#eRHS li a { text-decoration: none; display: block; }
#eRHS li a:link { color: #395584 }
#eRHS li a:visited       { color: #808080 }
#eRHS li a:hover { color: #95ff90 }
#econtent  /* Main content area */ { width: 57em; float: left; max-width: 57%; margin-left: 4em; }
.eNews  /* Use for Related Articles */ { background-color: #eef; border: ridge 0.2em #99c; }
#boxed { margin-left: 1.5em; }
#boxed p { margin-right: 0.5em; margin-left: 0.5em; padding-right: 0.5em; padding-left: 0.5em; }
#imageRight { position: relative; float: right; }