/*
**	CSS Document
**	PJL Laboratories Ltd
**
**	Simon M White
**	White Webs - http://www.whitewebs.co.uk
**
**	2007 - 2009
*/


/*
**  general rules
*/


* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: #4c8dad;  /*  this is a shade of blue  */
  line-height: 1.35em;
  color: #000;
  text-align: left;
}

p {
  padding-top: 6px;
  font-size:  0.75em;
  display: block;
  clear: both;
}

h1 {
  font-size: 1.2em;
}

h2 {
  font-size: 0.75em;
  padding-top: 6px;
}

h1:first-letter, h2:first-letter {
  text-transform: capitalize;
}

a#email-address {
  font-size: 0.75em;
}

acronym {
  cursor: help;
  color: #000;
}

ul {
  font: 0.75em Verdana, Arial, Helvetica, sans-serif;
  clear: left;
}

li {

}

address {
  font: 0.75em Verdana, Arial, Helvetica, sans-serif;
  margin-left: 12px;
  margin-bottom: 3px;
}

img {
  border: none;
}

/* psudo classes */

a:link {
  color: #000;
  background-color: inherit;
  text-decoration: underline;
}

a:visited {
  color: #498bac;
  background-color: inherit;
  text-decoration: none;
}

a:hover {
  color: #fff;
  background: #498bac;
  text-decoration: none;
}

a:active {
  color: #ccc;
  background-color: inherit;
  text-decoration: none;
}

/*  class used as a clearing division  */

.clear {
  clear: both;
  padding: 10px 0px;
}


/*
**  divisions for backgrund images (wrapper, header, main and footer)
*/


#outerwrapper {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#header-shadow {
  background: url(../i/bg_shadow_top.gif) no-repeat center;
  width: 800px;
  height: 23px;
  clear: both;
  margin-top: 10px;
}

#main {
  background: url(../i/bg_shadow_middle.gif) repeat-y center;
  height: 36.1em;   /*  allow the site to grown if scaled */
  padding: 0 25px;
}

#footer-shadow {
  background: url(../i/bg_shadow_bottom.gif) no-repeat center top;
  width: 800px;
  height: 31px;
  clear: both;
}


/*
**  header section
*/


#header {
  width: 750px;
  height: 115px;
}

#logo {
  float: left;
}

#logo a {
  background: none;
}

#plj-laboratories-advert {
  float: left;
  width: 478px;
  height: 108px;
  background: #fff;
  margin-left: 10px;
}


/*
**  navigation section
*/


/*  skip to navigation  */

#skip {
  display: none;
}

#navigation {
  width: 733px;
  height: 26px;
  background-color: #240093;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.35em;
}

#navigation ul#nav {
  padding: 0;
  margin: 0;
}

#navigation ul#nav li {
  background: url(../i/pjl_nav_divider.gif) no-repeat right top;
  float: left;
  list-style-type: none;
  padding: 0;
}

#navigation ul#nav li a {
  display: block;
  color: #fff;
  height: 26px;
  padding: 0 40px;
  font-weight: bold;
}

#navigation ul#nav span {
  padding-top: 6px;
  vertical-align: middle;
}

#navigation li a:link {
  text-decoration: none;
}

#navigation li a:active {
  background: #6fa2ff;  /*  this is a light shade of blue */
  text-decoration: none;
}

#navigation li a:hover {
  text-decoration: none;
}

#navigation li a:visited {
  text-decoration: none;
}

#navigation li a:focus {
  background: #6fa2ff;  /*  this is a light shade of blue */
}

a#current {
  font-weight: bold;
  background: #498bac;
  color: #fff;
}


/*
**  many thanks to patrick griffiths and dan webb for the suckerfish Menu
**  - http://www.htmldog.com/articles/suckerfish/dropdowns/
**  - http://www.htmldog.com/articles/suckerfish/dropdowns/example/
*/


#navigation ul li ul {
  font-size: 1em;
  background-color: #240093;
  width: 225px;
  position: absolute;
  top: 14.5em;
  left: -999em;
}

#navigation ul#nav li ul li {
  float: left;
  clear: both;
  background-image: none;
}

#navigation ul#nav li ul li a {
  width: 145px;
}

#navigation ul ul li a span {

}

#navigation li:hover, #navigation li.sfhover {

}

#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {
  left: -999em;
}

#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul {
  left: auto;
}

#navigation ul#nav li ul li a:link {
  color: #fff;
  background: inherit;
}

#navigation ul#nav li ul li a:visited {
  color: #498bac;
}

#navigation ul#nav li ul li a:hover {
  background-color: #498bac;
  color: #fff;
  border: 0;
}

#navigation ul#nav li ul li a:active {
  background: #6fa2ff;
  color: #fff;
}

#navigation ul#nav li ul li a:focus {
  background: #6fa2ff;  /*  this is a light shade of blue */
  color: #fff;
}


/*
**  content section
*/


#content-wrapper {
  border: 1px solid #eee;
  width: 733px;
  height: 354px;
  margin: 15px auto;
}

#content {
  border: 5px solid #fff;
  background: #f3f6fc;
  padding: 0 10px 10px 10px;
  height: 334px;
  width: 60%;
  float: left;
  overflow: auto;
}

#page-image {
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
  background: #f3f6fc;
  height: 324px;
  width: 32.5%;
  float: left;
}

#page-image img {

}


/*
**  section specific styling
*/


#content li, .list-detail li {
  list-style-image: url(../i/pjl_bullet.gif);
  margin-left: 24px;
  line-height: 1.4em;
}

/*  contact us  */

body#contact-us #content {
  width: 37%;
}

/*  google map section  */

body#contact-us #map {
  width: 55%;
  float: left;
  padding-top: 5px;
}

/*  hcard microformat   */

body#contact-us .vcard {
  font-size: 0.75em;
}

body#contact-us .vcard .org, body#contact-us .vcard .street-address, body#contact-us .vcard a.email, body#contact-us .vcard .locality, body#contact-us .vcard .tel,  body#contact-us .vcard .fax {
  padding-left: 2em;
}

body#contact-us .vcard .street-address {
  background: url(../i/pjl_labs_address.gif) no-repeat left top;
}

body#contact-us .vcard a:link {
  color: #000;
  background: inherit;
}

body#contact-us .vcard a:visited {
  color: #498bac;
}

body#contact-us .vcard a:hover {
  color: #498bac;
  background: inherit;
  border: 0;
}

body#contact-us .vcard a:active {
  background: #6fa2ff;
  color: #fff;
}

#navigation ul#nav li ul li a:focus {
  background: #6fa2ff;  /*  this is a light shade of blue */
  color: #fff;
}

body#contact-us .vcard a.email {
  background: url(../i/pjl_labs_email.gif) no-repeat left center;
}

body#contact-us .vcard .tel {
  background: url(../i/pjl_labs_telephone.gif) no-repeat left center;
}

body#contact-us .vcard .fax {
  background: url(../i/pjl_labs_fax.gif) no-repeat left center;
}

/*  sitemap   */

body#site-map #content ul * {
  font-size: 1em;
}

body#site-map #content ul {
  padding-top: 0.5em;
}

/*  accessibility  */

body#accessibility #content ul {
    padding: 0.5em 0 1em 0;
}


/*
**  breadcrumb trail
*/


#breadcrumb-trail {
  font-size: 0.65em;
  padding-bottom: 6px;
}

#breadcrumb-trail span a {
  text-decoration: underline;
  color: #000;
}

#breadcrumb-trail span a:link {
  color: #000;
}

#breadcrumb-trail span a:visited {
  color: #000;
}

#breadcrumb-trail span a:hover {
  color: #fff;
  text-decoration: none;
}

#breadcrumb-trail span a:active {
  color: #fff;
}

#breadcrumb-trail span span {
  color: #498bac;
}


/*
**  footer section
*/


#footer {
  font-size: 0.75em;
  text-transform: capitalize;
  background: transparent;
}

#footer {
  width: 715px;
  height: 35px;
  margin: 0 auto;
  padding: 5px 10px;
}

#footer ul {
  padding-bottom: 5px;
}

#footer li {
  list-style: none;
  display: inline;
  padding: 0 5px;
}

#footer a:link {
  color: #000;
}

#footer a:visited {
  color: #498bac;
}

#footer a:hover {
  background: #498bac;
  color: #fff;
}

#footer a:active {

}

#footer a:focus {
  color: #fff;
  background: #6fa2ff;  /*  this is a light shade of blue */
}

#footer a#current {
  background: #498bac;
  color: #fff;
  font-weight: normal;
}

#footer ul li a span {
  text-transform: lowercase;
}

#ukas-logo {
  height: 115px;
  padding: 10px 33px;
}

#ukas-logo p {
  color: #fff;
  padding: 0 10px;
  width: 85%;
  font-size: 0.75em;
  float: left;
  font-style: italic;
}

#ukas-logo p acronym {
  color: #fff;
}

#ukas-logo img {
  margin-left: 15px;
  float: left;
}

#footer ul#copyright {

}

/*  footer-page icons   */

ul#footer-icons {
  position: relative;
  left: 270px;
  top: 25px;
  text-indent: -5000px;
  float: left;
}

ul#footer-icons li {
  position: absolute; 
  bottom: 3em;
  left: 350px;
  background: url(../i/pjl_labs_white_webs.gif) right top no-repeat;
  list-style: none;
  padding: 0;
}

ul#footer-icons a {
  width: 85px; 
  height: 4.65em; 
  display: block; 
}

ul#footer-icons li#white-webs a:link, ul#footer-icons li#white-webs a:visited {
  border: none;
}

ul#footer-icons li#white-webs a:hover {
  background: url(../i/pjl_labs_white_webs.gif) right bottom no-repeat;
}

ul#footer-icons li#white-webs a:active {
  border: none;
}