html {
   /* V4.15 CM always show vertical scrollbar - avoids banner jumping
      when switching pages, for pages which do not scroll */
   overflow-y: scroll;
}

body {
   background-color: #f1f1f1;
   font-family: Arial, sans-serif;
   font-size: 10px;
   color: #333333;
   line-height: 1.2em; /* V4.10 CM set line height relative to font size - was 18px */
}

/* reset default margin and padding */
div, h1, h2, h3, h4, h5, h6, p, ul, ol {
   margin: 0;
   padding: 0;
}

h1 {
   font-size: 20px;
}

h2 {
   font-size: 18px;
}

h3 {
   font-size: 16px;
}

h4 {
   font-size: 14px;
}

h5 {
   font-size: 12px;
}

h6 {
   font-size: 10px;
}

.nostyle {
   /* fallback elements displayed when stylesheet not found */
   display: none;
}

hr {
   height: 1px;
   display: block;
   clear: both;
   border-style: dotted; /* MSIE6 draws as dashed - we can live with this */
   border-color: black;
   border-width: 0 0 1px 0;
   padding-top: 24px;
   margin-bottom: 12px;
   width: 100%;
}

img {
   border-width: 0;
}

div.wrapper {
   padding: 0;
   margin: 10px auto; /* MSIE 6 */
   width: 980px;
   background-color: white;
   overflow: hidden;
   /* rounded corners (not yet supported by MSIE) */
   border-radius: 12px; /* CSS3 standard - not currently supported by any browser */
   -moz-border-radius: 12px; /* Firefox */
   -webkit-border-radius: 12px; /* webkit/Chrome */
}

html>body div.wrapper {
   margin: 20px auto; /* all other browsers */
}

@media screen {
   div.wrapper {
      /* drop shadow */
      box-shadow: 3px 3px 4px #000000; /* CSS3 standard - not currently supported by any browser */
      -moz-box-shadow: 3px 3px 4px #000000; /* Firefox */
      -webkit-box-shadow: 3px 3px 3px #000000; /* Chrome */
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* MSIE 8 */
   }
}

div.banner {
   height: 116px; /* must match height of banner image */
   overflow: hidden;
}

div.banner img {
   border-width: 0;
   margin-left: 16px;
}

@-moz-document url-prefix() {
   /* Firefox-only CSS hack
     FF does not clip an image to its container's rounded corners (whereas this
     works OK in Chrome, and rounded corners not supported at all in MSIE).
     To work around this bug, clip the banner image, and add the same image
     as a background-image */
   div.banner {
      background-image: url(../images/lynx-banner.png);
      background-position: 16px 0;
      background-repeat: no-repeat;
      -moz-border-radius-topright: 12px;
   }
   
   div.banner img {
      position: absolute;
      clip: rect(0,900px,116px,0);
   }
}

div.menubar {
   background-color: #cccccc;
   /* vertical gradient for browsers which support it */
   background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#cccccc)); /* webkit/Chrome */
   background: -moz-linear-gradient(top,#f0f0f0,#cccccc); /* Firefox 3.6+ */
   -ms-filter: "progid:DxImageTransform.Microsoft.Gradient(startColorstr='#f0f0f0',endColorstr='#cccccc')"; /* MSIE 8 */
   height: 30px;
   margin: 0;
}

div.menu {
   padding: 0;
   margin: 0 12px 0 12px;
   font-size: 13px;
}

div.menu ul {
   list-style: none;
   line-height: 30px; /* must match div.menubar height */
   display: block;
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
}

div.menu li {
   float: left;
   position: relative;
   display: inline;
   padding: 0;
   margin: 0;
   border-color: white;
   border-style: solid;
   border-width: 0 1px 0 0;
   padding-left: 12px;
   padding-right: 12px;
}

div.menu li:last-child { /* last-child supported by FF and Chrome */
   float: right;
   border-right-width: 0px;
}

a.menuitem {
   color: #045fb4; /* #5191cd; */
   font-weight: bold;
   text-decoration: none;
   padding-left: 10px;
   padding-right: 10px;
}

a.menuitem:hover {
   color: black;
}

div.menu a#currentitem { /* set by javascript in page onload */
   color: black;
}

div.landscape {
   background-position: 0 0;
   background-repeat: no-repeat;
   height: 207px;
}

div#landscape1 {
   background-image: url(../images/landscape1.jpg);
}

div#landscape2 {
   background-image: url(../images/landscape2.jpg);
}

div#landscape3 {
   background-image: url(../images/landscape3.jpg);
}

div#landscape4 {
   background-image: url(../images/landscape4.jpg);
}

div#landscape5 {
   background-image: url(../images/landscape5.jpg);
}

div#landscape6 {
   background-image: url(../images/landscape6.jpg);
}

div#landscape7 {
   background-image: url(../images/landscape7.jpg);
}

div#landscape8 {
   background-image: url(../images/landscape8.jpg);
}

div#landscape9 {
   background-image: url(../images/landscape9.jpg);
}

div.landscape h1 {
   color: white;
   margin: 0;
   line-height: 28px;
   font-size: 25px;
   font-weight: normal;
}

div#landscape1 h1 {
   padding: 65px 0 0 34px;
   width: 45%;
}

div#landscape2 h1,
div#landscape3 h1,
div#landscape4 h1,
div#landscape5 h1,
div#landscape6 h1,
div#landscape7 h1,
div#landscape8 h1,
div#landscape9 h1 {
   padding: 150px 0 0 223px;
}

/* alternative layouts:
   * We can have multiple div.content elements on a single page - they will be displayed
     across the whole page width:
     
     |-- CONTENT1 --|
     |-- CONTENT2 --|
     |-- CONTENT3 --|
     
   * Each div.content can contain one of 2 alternative layouts:
     1. sidebar and main (as on index.html)
     2. column1 and column2 - 2 columns of equal width
     3. sidebar, main, rightsidebar
*/

div.content {
   clear: both;
}

/* default content element styles */
div.content h1 {
   margin: 4px 0 16px 0; /* MSIE 6 */
   line-height: 1.2em; /* V4.1 explicit line-height set for headings */
}

html>body div.content h1 {
   margin: 0 0 16px 0; /* all other browsers */
}

div.content h2,
div.content h3,
div.content h4,
div.content h5,
div.content h6 {
   margin: 0 0 16px 0;
}

div.content p {
   margin: 0 0 16px 0;
}

div.content ul {
   margin: 0 30px 16px 20px;
}

div.content ol {
   margin: 0 30px 16px 20px;
}

div.content a { /* default link style */
   text-decoration: none;
   color: #045fb4;
}

div.content a:hover {
   /*color: black;*/
   text-decoration: underline; /* V4.10 changed default link behaviour from hover-black to hover-underline */
}

div.content iframe.adviserMap {
   display: block;
   margin: 0 auto; /* should set horizontal centring */
   background: url(../images/loading.gif) no-repeat center center; /* V4.10 added loading background */
}

@media screen {
   div.content iframe.adviserMap {
      /* drop shadow */
      box-shadow: 3px 3px 4px #000000; /* CSS3 standard - not currently supported by any browser */
      -moz-box-shadow: 3px 3px 4px #000000; /* Firefox */
      -webkit-box-shadow: 3px 3px 3px #000000; /* Chrome */      
      /* V4.11 Google map of  adviser outlines
        MSIE 8 filter shadow settings do not play well with a google map iframe!
        We cannot apply an ms-filter shadow to this google map iframe, as this interferes with  google's own styling, 
        making the world map underlay invisible, and showing the KML polygons with ugly drop-shadow for each vertex.
        We also have to set
        position:relative 
        for MSIE 8 to avoid the div.wrapper shadow filter setting from cascading through to the iframe, 
        making the google basemap invisible */
      position: relative; 
   }   
}

div.content div.sidebar {
   display: block;
   margin: 20px 0 0 15px; /* MSIE 6 */
   float: left;
   width: 20%;
   color: #333333;
   font-size: 13px;
   line-height: 1.4em; /* V4.10 CM added explicit line-height for sidebar */
}

html>body div.content div.sidebar {
   margin: 20px 0 0 30px; /* all other browsers */
}

div.content div.sidebar ul {
   list-style: none;
   margin: 0 0 16px 0; /* override default div.content ul margin */ 
   padding: 0;
}

div.content div.sidebar a {
   text-decoration: none;
   /*color: #333333;*/ /* V4.10 changed default link colour in sidebar to #045fb4 (blue) */
}

div.content div.sidebar a:hover {
   color: #045fb4; /* #5191cd; */
   text-decoration: underline; /* V4.10 add underline on link hover */
}

div.content div.main {
   display: block;
   float: left;
   width: 530px;
   margin: 20px 0 20px 0;
   font-size: 12px;
   line-height: 1.2em; /* V4.10 line-height changed from 14px to 1.2em */
}

div.content div.rightsidebar {
   display: block;
   float: right;
   width: 20%;
   color: #333333;
   font-size: 13px;
   line-height: 1.4em;
   margin: 20px 0 0 0;
}

div.rightsidebar ul {
   list-style: none;
   margin: 0 0 16px 0;
   padding: 0;
}

div.rightsidebar ul li {
   display: block;
}

div.rightsidebar a {
   text-decoration: none;
   /*color: #333333;*/
   color: #045fb4;
}

div.rightsidebar a:hover {
   text-decoration: underline;
   color: #045fb4;
}

div.content div.column1 {
   display: block;
   clear: both;
   float: left;
   width: 45%;
   margin-top: 20px;
   margin-left: 30px;
   font-size: 12px;
   line-height: 1.2em; /* V4.10 line-height changed from 14px to 1.2em */
}

div.content div.column2 {
   display: block;
   float: left;
   width: 45%;
   margin-top: 20px;
   margin-left: 30px;
   font-size: 12px;
   line-height: 1.2em; /* V4.10 line-height changed from 14px to 1.2em */
}

div.footer {
   clear: both;
   display: block;
   height: 30px;
   background-color: #cccccc;
   color: black;
   padding-top: 10px;
   margin-top: 0;
   /* Firefox 3.6 - border radius from #wrapper must be repeated (OK in Chrome) */
   -moz-border-radius-bottomleft: 12px;
   -moz-border-radius-bottomright: 12px;
}

@media print {
   div.footer {
      display: none;
   }
}

div.footer p {
   margin-left: 30px;
   margin-top: 4px;
}

/* general paragraph styles */
p.intro {
   color: #045fb4; /* #5191cd; */
   font-size: 13px;
   margin-bottom: 20px;
   line-height: 1.2em; /* V4.10 line-height changed from 15px to 1.2em */
   font-weight: bold;
}

p.address {
   padding-left: 12px; /* extra indentation */
}

p.smallprint {
   font-size: 10px;
   line-height: 1.2em; /* V4.10 line-height changed from 11px to 1.2em */
}

.red {
   color: red;
}

img.centre {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

/* V4.10 set equal widths for form elements
   http://stackoverflow.com/questions/895904/select-inputrs-and-text-inputs-in-html-best-way-to-make-equal-width */
input,
select,
textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* styles for Lynx Download forms */
div.lynxDownload {
   border-style: dotted; 
   border-width: 1px 0; 
   padding-top: 12px;   
   margin-bottom: 12px;
   overflow: hidden; /* V4.10 overflow: auto causes a horiz scrollbar in Chrome */
}

div.lynxDownload label {
   display: block; 
   float: left;   
   width: 200px; 
   color: black; 
   clear: left; 
   margin-bottom: 2px;
}

div.lynxDownload input, 
div.lynxDownload select {
   display: block;   
   width: 300px; 
   margin-bottom: 2px; 
   background-color: white; 
   border: 1px solid #cccccc;
}

div.lynxDownload p {
   display: block; 
   clear: both; 
   margin: 12px 0;
}

div.lynxDownload a.lynxDownloadLink {
   display: block;
   clear: left;
   float: left;
   width: 200px;
}

div.lynxDownload p.lynxDownloadDescription { /* MSIE6 not recognising clear: right */
   /* this is a workaround - starts description on the next line from download link,
     but at least the column margins line up properly */
   display: block;
   position: relative;
   left: 200px;
   width: 300px;
   margin-top: 0px;
}

html>body div.lynxDownload p.lynxDownloadDescription { /* all other browsers allow download and description to be floated */
   left: 0;   
   float: left;
   clear: right;
}

/* display client list in a grid format */
/* max logo size 150x100px */
div.clientList div.client {
   float: left;
   padding: 12px;
   width: 150px;
   height: 110px;
   overflow: hidden;
}

div.client a {
   float: left;
   clear: left;
   display: block;
   margin-top: 6px;
   width: 150px; /* required for MSIE6 */
}

div.client img {
   /*float: left;
   clear: left;*/
   /* V4.02 changed img to block for inclusion inside link to client homepage */
   display: block;
   padding-bottom: 4px;
}

/* Nivo JQuery slider (slideshow container) */
div.lynx-slideshow {
   position: relative;
   width: 640px;
   height: 480px;
   background: url(../images/loading.gif) no-repeat center center;
}

div.lynx-slideshow img {
   position: absolute;
   top: 0px;
   left: 0px;
   display: none;
}

div.lynx-slideshow p.print-caption {
   display: none;
}

div.lynx-slideshow a {
   border: 0px;
   display: block;
}

/*  
 V4.10 CM added Nivo slideshow class overrides
 V4.11 CM added pause/play button 
*/
.nivo-directionNav {
   display: block;
   width: 90px;
   height: 30px;
   top: 0;
   left: 0;
   padding: 5px;
   /*background-color: yellow;*/
}

.nivo-directionNav a {
   display: block;
   width: 30px;
   height: 30px;
   background: url(../images/arrows.png) no-repeat;
   text-indent: -9999px;
   border: 0;
   top: 0;
   position: relative; /* relative positioning - see below */
}

a.nivo-nextNav {
   background-position:-30px 0;
   left: 60px;
   top: -30px; /* with relative positioning, top and left are relative to where they would have been with normal positioning! */
}

a.nivo-prevNav {
   background-position: 0 0;
   left: 0;
   top: 0;
}

a.nivo-pauseNav {
   background-position:-60px 0;
   left: 30px;
   top: -60px;
}

a.nivo-playNav {
   background-position:-90px 0;
   left: 30px;
   top: -60px;
}

@media print {
   div.lynx-slideshow {
      height: auto;
   }
   
   div.lynx-slideshow img {
      display: block !important;
      position: static;
      height: auto;
      width: auto;
      margin-bottom: 10px;
   }
   
   div.lynx-slideshow p.print-caption {
      display: block;
   }
      
  .nivo-caption {
      display: none;
  }
}
/*  
 V4.12 BS added for staff image display on rollover
*/

div.thumbnail-right img{
visibility:hidden;
position: relative;
right: -110px;
width:70px;
float:left;
margin-left:-70px;
text-decoration:none;
color:#FFFFFF;
}

div.thumbnail-right:hover img {
visibility: visible;
position: relative;
right: -110px;
width:70px;
float:right;
margin-left:-70px;
text-decoration:none;
color:#FFFFFF;
}
div.thumbnail-left img{
visibility:hidden;
position: relative;
left: -110px;
width:70px;
float:right;
margin-right:-70px;
text-decoration:none;
color:#FFFFFF;
}

div.thumbnail-left:hover img {
visibility: visible;
position: relative;
left: -110px;
width:70px;
float:left;
margin-right:-70px;
text-decoration:none;
color:#FFFFFF;
}