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;
}

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

div.header {
  position: relative; /* V5.00 relative positioning allowed absolute positioning of child elements */
  left: 0;
  top: 0;
}
/* Social Media buttons */
div.header div.followOuter {
  position: absolute;
  top: 48px; /* V5.00 make room for register-interest */
  width: 980px; /* must match div.wrapper width */
}

div.footer div.followOuter {
  display: none;
}

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

div.followInner {
  float: right;
  width: 250px;
  margin-right: 12px;
}

div.followInner a {
  display: block;
  float: right;
  margin-left: 4px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  text-indent: 100%; /* hide link text */
  white-space: nowrap;
  background-repeat: no-repeat;
}

/* Social Media Icons from http://simpleicons.org */
div.followInner a.linkedin {
  background-color: #cccccc;
  background-image: url(../images/follow/linkedin-32.png);
}

div.followInner a.twitter {
  background-color: #cccccc;
  background-image: url(../images/follow/twitter-32.png);
}

div.followInner a.facebook {
  background-color: #cccccc;
  background-image: url(../images/follow/facebook-32.png);
}

div.followInner a.youtube {
  background-color: #cccccc;
  background-image: url(../images/follow/youtube-32.png);
}

div.followInner a.googleplus {
  background-color: #cccccc;
  background-image: url(../images/follow/googleplus-32.png);
}

div.followInner a.rss {
  background-color: #cccccc;
  background-image: url(../images/follow/rss-32.png);
}

div.followInner a.linkedin:hover,
.footer div.followInner a.linkedin {
  background-color: #007fb1;
}
div.followInner a.twitter:hover,
.footer div.followInner a.twitter {
  background-color: #00aced;
}
div.followInner a.facebook:hover,
.footer div.followInner a.facebook {
  background-color: #3b5998;
}
div.followInner a.youtube:hover,
.footer div.followInner a.youtube {
  background-color: #cc332d;
}
div.followInner a.googleplus:hover,
.footer div.followInner a.googleplus {
  background-color: #d14836;
}
div.followInner a.rss:hover,
.footer div.followInner a.rss {
  background-color: #ff8300;
}

/* Google Custom Search */
div.header div.googleCSEouter {
  position: absolute;
  top: 12px;
  right: 170px;
}

div.footer div.googleCSEouter {
  display: none;
}

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

div.googleCSEinner {
  width: 294px;
}

/* Google CSE V2 Classic theme overrides  */
.gsc-control-cse {
  padding: 0 !important;
  border-width: 0 !important;
}

.gsc-control-cse:after {
  display: none !important;
}

td.gsc-input {
  padding: 0 !important;
}
td.gsc-input div.gsc-input-box td.gsib_a {
  padding: 2px 4px;
}

input.gsc-input {
  margin: 0px !important;
  width: 190px !important;
  /* V5.00 remove rounded button corners on ipad */
  border-radius: 0;
  -webkit-appearance: none;
}


button.gsc-search-button,
input.gsc-search-button {
  background-color: #f0f0f0 !important;
  color: #045fb4 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 0 !important;
  margin-left: 0 !important;  
  min-width: 72px !important;
  height: 24px !important;
  /* V5.00 remove rounded button corners on ipad */
  border-radius: 0;
  -webkit-appearance: none;
}

.gsc-search-box .gsc-search-button-v2 svg {
  fill: #045fb4;
}

.gsc-clear-button {
  display: none !important;
}

.gsc-tabHeader {
  padding: 6px;
  border-top-color: #e9e9e9 !important;
}

.gsc-resultsRoot {
  line-height: 1.4em;
}

/* V5.00 Google Translate */
#google_translate_element {
  position: absolute;
  top: 12px;
  right: 0;
}

#google_translate_element .goog-te-gadget {
  width: 154px;
  max-width: 154px;
  margin-right: 12px;
  padding-right: 2px; /* extra 2px for outline */
}


#google_translate_element .goog-te-gadget-simple {
  border-color: #ddd;
  width: 100%;
}

#google_translate_element .goog-te-menu-value {
  color: #a9a9a9;
}

#google_translate_element .goog-te-menu-value span:first-child {
  display: inline-block;
  width: 98px;
  max-width: 98px;
  vertical-align: middle;
  overflow: hidden;
}

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

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

/* V5.00 register-interest form */
div.header .register-interest {
  position: absolute;
  width: 980px;
  top: 92px;
  color: #333333;
  font-size: 10px;
  line-height: 1.2em;
}

div.header .register-interest form {
  float: right;
  margin-right: 12px;
}

div.header .register-interest form p {
  font-size: 13px;
  padding: 0 0 4px 0;
  margin: 0;
}

div.header .register-interest #registerSubmit {
  background-color: #f0f0f0;
  color: #045fb4;
  font-size: 11px;
  font-weight: bold;
  padding: 0 8px;
  border-radius: 0;
  margin-left: 0;
  height: 24px;
  min-width: 72px;
  border: 1px solid #d9d9d9;
  /* V5.00 remove rounded button corners on ipad */
  -webkit-appearance: none;
  border-radius: 0;
  vertical-align: top;
}

div.header .register-interest input,
div.header .register-interest select {
  box-sizing: border-box;
}

div.header .register-interest #registerEmail,
div.header .register-interest #selectInterest {
  outline: none;
  font-size: 13px;
  padding: 1px 4px;
  border-width: 1px 0 1px 1px; /* V5.00 border on 3 sides to avoid double-border between elements */
  border-style: solid;
  border-color: #ddd;
  margin: 0;
  height: 24px;
  width: 190px;
  background: white;
  vertical-align: bottom; /* required for MSIE 8 */
  -webkit-appearance: none; /* V5.00 removes webkit/ios styling - dropdown arrow and 'embossed' look for select */
  -moz-appearance: none; /* V5.00 and in firefox */
  border-radius: 0;
}

div.header .register-interest #selectInterest::-ms-expand {
  /* V5.00 remove MSIE dropdown arrow */
  display: none;
}

div.header .register-interest #selectInterest {
  color: #a9a9a9;
  padding-left: 1px;
}

/* V5.00 set placeholder text color to match unfocused selectInterest */
div.header input::-webkit-input-placeholder {
  color: #a9a9a9 !important;
}

div.header input::-moz-placeholder {
  color: #a9a9a9 !important;
  opacity: 1;
}

div.header input:-ms-input-placeholder {
  color: #a9a9a9 !important;
}

div.header .register-interest #selectInterest:focus {
  color: black;
}

@-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: linear-gradient(top,#f0f0f0,#cccccc); /* CSS3 - V4.60 not yet supported by any browser? */
   background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#cccccc)); /* Chrome 1-9. Safari 4-5 */
   background: -webkit-linear-gradient(top,#f0f0f0,#cccccc); /* Chrome 10+, Safari 5.1+ */
   background: -moz-linear-gradient(top,#f0f0f0,#cccccc); /* Firefox 3.6+ */
   background: -ms-linear-gradient(top,#f0f0f0,#cccccc); /* MSIE 10 */
   -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; /* V5.00 font-size in pixels required for translation resizing - see lynx-menu.js */
}

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 12px 0 12px;
   margin: 0;
   border-color: white;
   border-style: solid;
   border-width: 0 1px 0 0;
}


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#landscape10 {
   background-image: url(../images/landscape10.jpg);
}

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

div.landscape h1 {
   color: white;
   margin: 0;
   line-height: 28px;
   font-size: 25px;
   font-weight: normal;
   /* V5.00 all landscapes now use the same header alignment */
   padding: 65px 0 0 34px;
}

/* 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 3 alternative layouts:
     1. sidebar and main
     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 {
   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 */
   width: 800px;
   height: 480px;
}

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;
}

.sidebarTiles {
  margin: 0 0 16px 0;
  padding: 0;
}

.sidebarTiles .sidebarTile {
  display: block;
  background: #f1f2f1;
  color: black;
  margin-left: -20px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.sidebarTiles a {
  text-decoration: none;
  display: block; /* link fills whole tile, easier to click on */
}

.sidebarTiles a:hover {
  color: #045fb4;
  text-decoration: none;
}

.sidebarTiles .tileThumb {
  display: block;
  width: 100%;
  height: auto;
}

.sidebarTiles .tileText {
  display: block;
  padding: 8px;
}


div.content div.sidebar a {
   text-decoration: none;
}

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.main iframe.blog {
   width: 530px;
   height: 440px;
}

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: #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.content div.fixedHeight {
  /* V4.90 CM this is a bodge for the columns on contact.html page and mobile-responsive
    compatibility - for the maps to be displayed level with each other on widescreen, 
    they need to be in separate div.content, but this fails to show the maps correctly
    in columns for mobile layout. */
  height: 248px; /* this is the height needed for Lynx London address */
}

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;
   font-size: 11px; /* V4.27 CM increased font size of footer so that bold text is distinguishable */
}

/* V4.27 CM Privacy and Cookies link in footer */
div.footer a {
   color: black;
   text-decoration: none;
}

div.footer a:hover {
   text-decoration: underline;
}

/* general paragraph styles */
p.intro {
   font-size: 13px;
   margin-bottom: 20px;
   line-height: normal; /* V5.00 normal line-height */
   padding: 0 8px; /* V5.00 added left and right padding to match #blogfeed */
}

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;
}

/* V5.00 blogfeed - dynamaically loaded, initially invisible, shown by script */
#blogfeed,
#twitterfeed {
  display: none;
  background-color: #f1f2f1;
  color: black;
  font-size: 13px;
  line-height: normal;
  padding: 8px;
}

#twitterfeed {
  margin-bottom: 10px;
}

#blogfeed .rssHeader,
#twitterfeed .twitterHeader {
  display: block;
  border-style: dotted;
  border-width: 0 0 1px 0;
  border-color: black;
  padding-bottom: 10px;
  margin-bottom: 12px;  
}

#blogfeed .rssHeading,
#twitterfeed .twitterHeading {
  display: inline-block;
  margin: 0;
  padding: 0;
}
#blogfeed .rssHeading a,
#twitterfeed .twitterHeading a {
  font-size: 18px;
  font-weight: normal;
}

#blogfeed .rssSubscribe,
#twitterfeed .twitterFollow {
  display: inline-block;
  font-weight: bold;
  font-size: 13px;
  float: right;
  width: 100px;
}

#blogfeed .rssSubscribe a:before {
  content: url(../images/blank-16.png);
  background: #ff8300 url(../images/rss-16.png) no-repeat center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

#twitterfeed .twitterFollow a:before {
  content: url(../images/blank-16.png);
  background: #00aced url(../images/twitter-16.png) no-repeat center; 
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

#blogfeed .rssSubscribe a,
#blogfeed .rssSubscribe a:visited,
#twitterfeed .twitterFollow a,
#twitterfeed .twitterFollow a:visited {
  color: black;
  text-decoration: none;
}

#blogfeed .rssLoading {
  background: url(../images/index/ajax-loader.gif) no-repeat;
  height: 20px;
}

#blogfeed .rssItem {
  border-style: dotted;
  border-width: 0 0 1px 0;
  border-color: black;
  margin-bottom: 12px;
  display: none;
}

#twitterfeed ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#twitterfeed ul li {
  border-style: dotted;
  border-width: 0 0 1px 0;
  border-color: black;
  margin-bottom: 12px;
}
#twitterfeed p.tweet,
#twitterfeed p.timePosted,
#twitterfeed p.interact {
  margin-bottom: 4px;
}
#twitterfeed .interact a {
  display: inline-block;
  margin-right: 8px;
}

#blogfeed .rssItemDate {
  display: block;
  font-style: italic;
  color: black;
  margin-top: 0;
  margin-bottom: 0;
}

#blogfeed .rssItemTitle {
  display: block;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}

#blogfeed .rssItemTitle a {
  color: black;
}

#blogfeed .rssItemTitle a:hover {
  color: #045fb4;
  text-decoration: none;
}

#blogfeed .rssItemDescription {
  display: block;
  margin-top: 0;
  font-weight: normal;
}

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 {
   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;
}

/* 7/4/2016 CM added missing lynx-slideshow-print style */
div.lynx-slideshow-print {
  display: none;
}

@media print {
  div.lynx-slideshow-print {
    display: block;
  }
  
  .fotorama {
    display: none;
  }
}

/* V4.91 CM fotorama slide show overrides */
.wrapper .fotorama__caption__wrap { 
  /* ensure this selector is more specific than fotorama's selector. 
     Precedence rules for equal selectors are not always applied predictably.
     MSIE 11 - same selector defined in CSS1 and CSS2 - 1st one selected
     Chrome 35 - 2nd one selected
  */
  background: #000;
  color: #fff;
  padding: 5px 10px;
  opacity: 0.8;
  overflow: hidden;
  font-size: 12px;
  width: 100%;
}

div.gisFieldList {
  width: 100%;
  background-color: #efefef;
}

div.gisFieldList ul { /* V4.90 CM gis-algeria.html */
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

div.gisFieldList ol { /* V4.90 CM gis-wsiberia.html */
  margin: 0 0 16px 0;
  padding: 0;
  list-style-position: inside;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}


/* V4.90 CM magnificPopup overrides */
.mfp-title {
  font-size: 12px;
}

div.thumbnail-right img{
  display: none;
}

.priceList {
  width: 500px;
}

/* V4.81 JQuery UI overrides */
/* Remove horiz stripe from background overlay for modal UI dialog - bug Jquery UI 10.1.4 */
.ui-front {
  z-index: 1001 !important;
}

.ui-widget-overlay {
  background: none repeat scroll 0 0 #000 !important;
  opacity: 0.3 !important;
  filter: Alpha(Opacity=30) !important;
}

/* V4.90 CM mobile style for screens smaller than div.wrapper width */
@media screen and (max-width: 980px) {
  body {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  div.wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
  }
  
  html>body div.wrapper {
    margin: 0;
  }
    
  div.banner {
    height: auto;
    width: 250px;
    overflow-x: hidden; /* V4.90 CM hide the swirl in the banner logo */
  }
  
  div.banner img {
    border-width: 0;
    margin: 0;
    margin-left: 6px; /* V4.90 CM makes text in logo line up with 20px left margin for the rest of the content */
  }
  
  @-moz-document url-prefix() {
     /* V4.91 CM Firefox-only CSS - undo the desktop workaround */
     div.banner {
        background-image: none;
     }

     div.banner img {
        position: static;
     }
  }

  div.menubar {
    height: auto;
    background: #f1f2f1;
  }
  
  div.menu {
    margin: 0;
    padding: 0;
  }
  
  div.menu li {
    float: none;
    display: inline-block;
    margin: 0;
    padding-left: 20px;
    padding: 0;
    border: 0;
    width: 32%; /* V4.90 CM 3 buttons per line */
    min-width: 100px; /* V4.90 CM but stop menu item text breaking onto multiple lines */
  }
  
  div.menu li:last-child { 
    float: none;
    display: inline-block;
  }
  
  div.menu li a.menuitem {
    padding-left: 0;
    margin-left: 20px;
  }
  
  div.header div.followOuter {
    display: none;
  }
  
  div.footer div.followOuter {
    display: block;
    position: static;
    top: auto;
    width: 100%;
  }
  
  div.followInner {
    float: left;
    width: 100%;
    margin: 10px 0;
  }
  
  /* V4.90 CM social media buttons are not floating right. This means they display in the reverse order */
  div.followInner a {
    display: inline-block;
    float: none;
    margin-left: 0;
    margin-right: 4px;
  }
  
  div.header div.googleCSEouter {
    display: none;
  }
  
  div.footer div.googleCSEouter {
    display: block;
    width: 100%;
  }
  
  div.googleCSEinner {
    float: none;
  }
  
  .gsc-results-wrapper-overlay {
    left: auto !important; /* V4.90 CM ensures Google search results are horizontally centred  */
  }

  div.header .register-interest {
    position: static;
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  
  div.header .register-interest form {
    float: none;
    margin: 20px;
    padding-right: 0;
  }
  
  div.header .register-interest #registerEmail,
  div.header .register-interest #selectInterest {
    border-width: 1px 1px 1px 1px;
  }
  
  #google_translate_element {
    position: static;
    width: 100%;
  }
  
  #google_translate_element .goog-te-gadget {
    float: none;
    margin: 20px;    
  }
  
  div.landscape {
    display: block;
    background-image: none !important;
    height: auto;
    margin: 10px 20px 0 20px;
  }
  
  div.landscape h1 {
    color: black;
    padding: 0 !important;
    font-size: 18px;
    line-height: 24px;
    width: 100% !important;
  }
  
  div.landscape .marquee,
  div.landscape .marquee a {
    color: black;
    position: static;
    padding-left: 0;
    line-height: normal;
  }
  
  div.content {
    display: table; /* V4.90 CM display as table so that rightsidebar can be defined as a table-footer-group and moved underneath */
    width: 100%;
  }
  
  @-moz-document url-prefix() {
    div.content {
      table-layout: fixed; /* V4.91 CM required in Firefox, otherwise contained element size is not restricted, and fotorama slideshow width is too large */
    }
  }

  html>body div.content div.sidebar {
    margin: 20px 20px 0 20px;
    float: none;
    display: block;
    width: auto;
  }
  
  div.sidebar .extraLinks {
    display: none;
  }
  
  /* V4.90 CM show map thumbnails side by side if there is space (in landscape mode) */
  div.sidebar ul.mapThumb {
    display: inline-block;
  }
  div.sidebar ul.mapThumb li {
    display: inline-block;
    margin-right: 20px;
  }
  
  div.content div.rightsidebar {
    margin: 20px;
    float: none;
    display: table-footer-group; /* V4.90 CM moves div.rightsidebar underneath its corresponding div.main */
    width: auto;
  }
  
  div.rightsidebar ul {
    margin-left: 20px; /* V4.90 CM because the rightsidebar is defined as a table-footer-group, we have to apply the margin to the list, not the container */
  }
  
  div.rightsidebar .sidebarTiles {
    margin: 0 20px 20px 20px; /* V5.00 because the rightsidebar is defined as a table-footer-group, we have to apply the margin to the list, not the container */
  }
  
  .sidebarTiles {
    display: flex;
    flex-flow: row wrap;
  }
  
  .sidebarTiles .sidebarTile {
    margin-left: 0;
    width: 148px;
    height: 148px;
    flex: 0 1 auto;
  }
  
  #QuickAdviserLinks.sidebarTiles {
    flex-flow: column nowrap;
  }
  #QuickAdviserLinks .sidebarTile:nth-child(2) {
    height: auto;
    width: auto;
    background: white;
    display: flex;
    flex-flow: row wrap;
  }
  #QuickAdviserLinks .sidebarTile:nth-child(2) .tileText {
    background: #f1f2f1;
    margin: 0 10px 10px 0;
    add width: 131.5px; /* add padding x 2 to match .sidebarTile width */
    flex: 0 1 auto;
  }
  
  div.content div.main {
    float: none;
    width: auto;
    line-height: normal;
  }
  
  html>body div.content h1,
  div.content h2,
  div.main h3,
  div.main h4,
  div.main p,
  #blogfeed .rssHeading,
  #twitterfeed .twitterHeading {
     margin-left: 20px;
     margin-right: 20px;
  }
  
  div.main ul,
  div.main ol {
     padding-left: 20px;
  }
  
  div.main iframe.blog {
    width: 100%;
    /* V4.90 CM best guess at height - will vary slightly depending on the content of the posts, but
       not that much, as content is truncated by the PHP RSS reader.
       we cannot set a dynamic height for an iframe with contents from a different domain, even with jquery.
       The problem is that the height is different for each mobile screen width */
    height: 2000px; 
  }
  
  @media screen and (orientation: landscape) {
    /* V4.90 CM mobile landscape mode - blog iframe does not need to be quite as tall.
       This is still a best guess for the required height */
    div.main iframe.blog {
      height: 1500px;
    }
  }
  
  div.content iframe.adviserMap {
    margin-left: 20px;
    width: calc(100% - 40px); /* V4.90 CM this feels like a really bad way of setting the right margin, but I cannot get anything else to work */
  }
  
  div.main img {
    max-width: 100%;
    height: auto;
  }
  
  div.main img.screenshot {
    margin-left: 20px;
  }
  
  div.content div.column1,
  div.content div.column2 {
    margin-left: 20px;
    margin-right: 20px;
    width: auto;
  }
  
  div.column1 h2,
  div.column2 h2 {
    margin-left: 0;
  }
  
  div.column1 iframe,
  div.column2 iframe { 
    /* V4.90 CM Google office location maps - ensure these are not full-width, so that they can be scrolled past */    
    margin-right: 20px; /* V4.90 CM not sure why margin-right works here, when it does not work for adviserMap above */
    width: 100% !important;
  }
  
  .priceList {
    padding: 0 20px;
    width: 100%;
  }
  
  div.lynx-slideshow {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }
  
  div.lynx-slideshow img {
    width: 100% !important;
    height: auto !important;
  }
  
  div.lynx-slideshow .nivo-caption {
    width: 100% !important;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  div.lynxDownload {
    padding: 20px;
  }
  
  div.lynxDownload input,
  div.lynxDownload select {
    width: 100%;
  }
  
  div.lynxDownload p {
    margin-left: 0;
  }
  
  div.lynxDownload p.lynxDownloadDescription {
    width: auto;
    margin-left: 20px;
  }
  
  div.gisFieldList ul { /* V4.90 CM gis-algeria.html, swap from 3 to 2 columns */
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
  
  #googleMap { /* V4.90 CM us-brokerage google map */
    width: auto !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  
  div.footer {
    padding: 10px 20px;
    margin: 0;
    height: auto;
  }
  
  div.footer p {
    margin: 0;
  }
  
  div.footer .copyright a {
    display: block;
  }
}