/***********************************************************************
** FILE: /new/css/layout.css                                          **
***********************************************************************/


/* Include in here the list of elements who need a fixed page width */

header nav, #search,              /* header */
footer .legal p, footer .info,    /* footer */
main .wrap, main > section        /* body */
      { max-width: 1440px; margin-left: auto; margin-right: auto; width: 100%; padding: 0 0.5em }
.make-maxwidth header nav,
.make-maxwidth #search,
.make-maxwidth footer .legal p,
.make-maxwidth footer .info,
.make-maxwidth main .wrap,
.make-maxwidth main > section { max-width: none }

main { position: relative }
.wrap { margin-top: 0 }

.allow-wide header nav, .allow-wide #search,              /* header */
.allow-wide footer .legal p, .allow-wide footer .info,    /* footer */
.allow-wide main .wrap, .allow-wide main > section        /* body */
      { max-width: 100%; margin-left: 0; margin-right: 0; }

/* Clearn fix */
.button-row:after,
main:after,
main .wrap:after,
form dl:after,
dl.twocol:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}

body { font-family: Roboto, arial, helvetica, sans-serif; text-rendering: optimizeLegibility }

section { padding-top: 0.5em }
section :first-child { margin-top: 0 }

.clear-margin { margin:0;height:0;padding:0;overflow:hidden }

/** TEST **/



.panel {    clear: both }


#cookie_box     { background-color: #000; color: #fff; }
#cookie_box div { max-width:1300px; margin: 0 auto; width: 100%; padding: 0 0.5em 0.5em }
#cookie_box     { font-size: 80%; }
#cookie_box span.right { padding: 1em }
#cookie_box span span { margin-left: 1em }
#cookie_box p { margin: 0; padding: 0.5em 0 0 0.5em }

.separator { border-top: 1px solid #ccc; margin-top: 1em }


/***********************************************************************
** FILE: /new/css/fonts.css                                           **
***********************************************************************/


@font-face {
  font-family: "sanger-custom";
  src: url("/new/fonts/sanger-custom.eot");
  src: url("/new/fonts/sanger-custom.eot#iefix") format("embedded-opentype"),
       url("/new/fonts/sanger-custom.woff") format("woff"),
       url("/new/fonts/sanger-custom.ttf") format("truetype"),
       url("/new/fonts/sanger-custom.svg#sanger-custom") format("svg");
  font-weight: normal;
  font-style: normal;
}
/*
@font-face {
  font-family: 'clean-thin';
  src: url('/new/gfx/clean-thin.eot');
  src: url('/new/gfx/clean-thin.eot#iefix') format('embedded-opentype'),
       url('/new/gfx/clean-thin.woff') format('woff'),
       url('/new/gfx/clean-thin.ttf') format('truetype'),
       url('/new/gfx/clean-thin.svg#clearthin') format('svg');
  font-weight: normal;
  font-style: normal; }
*/

/***********************************************************************
** FILE: /core/css/pagesmith/classes.css                              **
***********************************************************************/




/*jslint css: true */
 /* classes to do simple css, float, align, "hide", etc, clear floats */
div.right, .right { float: right; }
div.left,  .left  { float: left; }
.c     { text-align: center; }
.r     { text-align: right; }
.l     { text-align: left; }
.tt    { font-family:'Andale mono','Courier new',Courier,monospace }
.hide   { display:none; }
.clear-float:after {  content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clear  { clear:both; }
.clear-left { clear:left; }

/* Opacity setting classes - used primarily on the home page at the moment... */
.opac10 { opacity: 0.1; }
.opac20 { opacity: 0.2; }
.opac30 { opacity: 0.3; }
.opac40 { opacity: 0.4; }
.opac50 { opacity: 0.5; }
.opac60 { opacity: 0.6; }
.opac70 { opacity: 0.7; }
.opac80 { opacity: 0.8; }
.opac90 { opacity: 0.9; }

/* Highlight text as draft during development */
.draft  { color: #c00; background-color: #fcc; }

.print-show { display: none; }

@media print {
  .print-hide { display: none; }
  .print-show { display: block; }
  span.print-show { display: inline; }
}
h3 span.date { color:#666; }

.youtube-small { text-align: center; }
.youtube-large { margin: 10px; }

.spelling { background-color: #fcc; }
span.tag { font-weight: bold; color: #006; }
.attr { font-weight: bold; color: #060; }
.value { font-weight: bold; color: #600; }

.scrollable { overflow-x: auto; }
.yscroll { overflow-y: auto; }

.countdown span.play,
.countdown span.pause,
.countdown span.refresh
  { color: black; cursor: pointer; padding: 1px 0.5em; font-weight: bold; background-color: #ccc }

.redstuff{ color: #ff0000; font-weight: bold;}
.warning { color: #8e0018; font-weight: bold;}

.acronym-letter { text-decoration: underline }


/***********************************************************************
** FILE: /new/css/general.css                                         **
***********************************************************************/


html { box-sizing: border-box }
*, *:after, *:before { box-sizing: inherit }
img { border: 0 }
/*body { margin: 0; font-size: 100%;  background: #fff url(/new/gfx/triangles-dark.png) no-repeat }*/
body { margin: 0; font-size: 100%; background-color: #fff }

h1, h2, h3, h4, h5, h6, p { margin: 0.5em 5px }

main, header, nav, section, article, aside, footer { display:block; }

.ajaxwait:before { content:'O'; padding: 5px; font-family: 'sanger-custom';
     -moz-animation: spin 1.5s linear infinite;
  -webkit-animation: spin 1.5s linear infinite;
       -o-animation: spin 1.5s linear infinite;
          animation: spin 1.5s linear infinite;
}

@-moz-keyframes spin { from{   -moz-transform:rotate(0deg)} to{   -moz-transform:rotate(359deg)} }
@-webkit-keyframes spin { from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(359deg)} }
@-o-keyframes spin { from{     -o-transform:rotate(0deg)} to{     -o-transform:rotate(359deg)} }
@keyframes spin { from{        transform:rotate(0deg)} to{        transform:rotate(359deg)} }

/* The following are the hidden by default navigation -
  nav.responsive is the RHS move in panel for navigation when page is narrower.
  nav.section    is the "hidden" dropdown which appears when clicking the section title.
*/



/***********************************************************************
** FILE: /new/css/body.css                                            **
***********************************************************************/


/* Styling of main block - hacing margin-bottom 2em won't disappear behind the fixed footer! */

main { padding-bottom: 8em }

/* Headers/titles etc */
ul { margin-top: 0.5em; margin-bottom: 0.5em }
strong, main h1, main h2, main h3, main h4, main h5, main h6 { font-weight: 500 }
strong em { font-weight: 600 }
main h1 { font-size: 2.875em; line-height: 1.2em }
main h2 { font-size: 2.5em;   line-height: 1.2em }
main h3 { font-size: 2.2em;   line-height: 1.2em }
main h4 { font-size: 1.875em; line-height: 1.2em }
main h5 { font-size: 1.5em;   line-height: 1.2em }
main h6 { font-size: 1.25em;  line-height: 1.2em }

main #rhs h3 { font-size: 1.5em }
main #rhs h4 { font-size: 1.25em }
main #rhs h5 { font-size: 1em }

/* Some pagesmith stuff!!! */

.twocol dd.information, form dd.information, .twocol dt.information, form dt.information, form dt, form dd  { color: #000 }
.twocol dt, form dt { font-weight: 500 }

.col1 { width: 49%; float: left }
.col2 { width: 49%; float: right }


/* Now we sequeeze in main stuff! */

#main { width: 70%; float: left; padding-right: 0.5em }
#rhs  { width: 30%; float: right; padding-left: 0.5em }
.btt { color: #fff; cursor: pointer }

#rhs .panel { border-bottom: 1px solid #eeeeee }
#rhs > .panel:last-child { border-bottom: none }



/***********************************************************************
** FILE: /core/css/pagesmith/forms.css                                **
***********************************************************************/


 /* Replacement for previous (invalid) form css! */

.hidden { display: none; }
form dd p, form dd pre { padding-left: 0; padding-right: 0; }
form dt {
  clear:both; width:20%; float:left; text-align:right; margin: 1px 0; font-weight: bold
}
.twocol dd.information, form dd.information, .twocol dt.information, form dt.information { width: 100%; text-align: left; font-weight: normal; }
form dt a       { color: #663300; text-decoration: underline; font-weight: bold; }
form dt a:focus, form dt a:hover { color:#ff7c0d; }
form dd         { float:right; width:77%; padding:0 5px; margin: 1px 0 0.5em 0}

/* Classes to tweak the size of the left and right hand column widths...
  usually for checkboxes and drop downs */
form dt.fifty50  { width: 49%; }
form dd.fifty50  { width: 48%; }
form dt.forty60  { width: 39%; }
form dd.forty60  { width: 58%; }
form dt.eighty20 { width: 67%; }
form dd.eighty20 { width: 29%; }
form dt.left     { text-align: left; }
form dt.full_width_caption { float: none; width: auto; text-align: left; }
form dd.full_width_caption { float: none; width: auto; text-align: left; }
textarea._pubmed_list, input._pubmed { float: left; width: 10em }
textarea._pubmed_list { height: 20em }
form dd._pubmed ul { margin-left: 9em; }
form .max_len { float: right; border: 1px solid #666666; font-size: 80%; margin-right: 5em; padding: 1px 0.5em; }
/*
form dd ul { margin: 0; padding: 0; }
form dd ul li { float: left; padding: 0 12px; background-position: -16px -1984px; }
*/
form dt.buttons { width: 100%; text-align: center; }

form dd input, form dd textarea { width: 90%; }
form dd textarea.short { height: 4em }
form dd textarea.narrow { width: 7em; }
form dd input.vshort { width: 4em; }
form dd input.short { width: 7em; }
form dd input.medium { width: 15em; }
form dd input.mediumlong { max-width: 25em; }
form dd input.inline-submit { width: auto; padding: 2px 1em }

form dd select, form dd input { border: 1px solid #666; padding: 2px; }
form dd select:focus, form dd input:focus { border: 2px solid #090; padding: 1px;  }
/*form dd select:focus { padding: 0.5px }*/

form h3 { clear: both; }

div.bordered_short { width: 10em; float: left; border:1px #bcc5cc solid; padding: 0.2em 0.5em; margin-right:1em}
div.bordered       { width: 90%; float: left; border:1px #bcc5cc solid; padding: 0.2em 0.5em; margin-right:1em}
div.bordered_tall  { width: 90%; float: left; border:1px #bcc5cc solid; padding: 0.2em 0.5em; min-height: 10em; margin-right:1em}

ul.boxes { float: left; min-width: 20%; max-width: 90%; }
ul.boxes ul { margin-top: 0; margin-bottom: 0; }
ul.boxes span         { border:1px #bcc5cc solid; padding: 0.2em 0.5em; margin-right: 1em; }

.col-required { background-color: #fec; }
.col-optional { background-color: #fff; }
.col-error    { background-color: #fcc; }
.col-valid    { background-color: #cfc; }
.col-supervalid { background-color: #4a4; }

form.button-only input { font-size: 1.66em; padding: 0.2em 2em; font-weight: bold; margin: 1em; }
form.button-only input.pos { color: #090; }
form.button-only input.neg { color: #900; }

form div.button-row { clear: both; }
form div.button-default { float: right; min-width: 35%; text-align: left; margin-left: 2em; padding-top: 0; }
form div.button-other { max-width: 68%; text-align: right; padding-top: 0.66em; }
form div.button-default input { width: auto; padding: 0.2em 1em; font-weight: bold; font-size: 1.66em; }
form div.button-other input { width: auto; padding: 0.2em 1em; font-weight: bold; }
/*form dd.button-row input.cancel { color: #900; }
form dd.button-row input.next   { color: #090; }*/
form div.button-default input.valid    { color: #090; }
form div.button-default input.invalid  { color: #999; }

form.submitted div.button-default input.valid { color: #960 }

form dd input._checkbox, form dd input.checkbox { width: 1em; background-color: transparent; }
form dd input._checkbox, form dd input.checkbox, form dd input._file { border: 0; }

#rhs .form-progress ul li.valid { color: #090; }
#rhs .form-progress ul li.invalid { color: #900; }
#rhs .form-progress ul li.active { font-weight: bold; }

/* Modified widths so RHS doesn't break..*/
#rhs form div.button-default { width: 40%; } /* Has to be slighlty wider */
.col1 form dd,.col1_of_3 form dd, .col2 form dd, #rhs form dd { width: 73%; } /* Has to be slightly 2% narrow */
.col1 form dd.fifty50,.col1_of_3 form dd.fifty50, .col2 form dd.fifty50, #rhs form dd.fifty50  { width: 46%; }
.col1 form dd.eighty20,.col1_of_3 form dd.eighty20, .col2 form dd.eighty20, #rhs form dd.eighty20 { width: 28%; }

.all-deleted, .deleted, .deleted dl dt, .deleted dl dd { text-decoration: line-through; }

.form_error { color: #8e0018}
.form_warn  { color: #930; }
.form_msg   { color: #960; }
.form_info  { color: #060; }

optgroup { font-style: normal; }

form div.disabled { display: none; }
form dt.disabled { display: none; }
form dd.disabled { display: none; }

.qdef { color: #999; }
ul.ul_james, #rhs ul.ul_james { margin: 0; padding: 0; list-style: none; z-index: 200; text-align: left }
ul li.li_james, #rhs ul li.li_james { background: white; cursor: pointer; background-color: #fff; border: 1px solid #bcc5cc; border-width: 0 1px 1px 1px; padding: 2px; font-size: 90%; text-align: left; margin-left: 0; text-indent: 0 }
ul.ul_james li.li_james_hovered, #rhs ul.ul_james li.li_james_hovered { background-color: #bcc5cc; text-align: left }
ul.ul_james li:before, #rhs ul.ul_james li:before { content: '' }

.file-blob { float: left; width: 200px; }
.file-image { float: left; width: 400px; }

.col1-rhs { width:49%; float: left; }
.col2-rhs { width:49%; float: right; }

#rhs form dl { margin: 5px 5px 5px 10px; font-size: 80%; }
#rhs form .col1-rhs dt, #rhs form .col2-rhs dt { width:80%; text-align: left; font-weight: normal; color: #000 }
#rhs form .col1-rhs dd, #rhs form .col2-rhs dd { width:10% }


.chbarray { display: block; float: right; text-align: right; font-size: 80% }
.chbarray span { background-color: #e0e4e7; font-weight: bold; padding: 2px 0.5em; margin: 0.5em; cursor: pointer; white-space: nowrap }

.close_box { border: 1px solid #ccc; background: url(/core/gfx/close.png) #eee top right no-repeat; padding: 2px 20px 2px 5px; border-radius: 4px; white-space: nowrap; margin-right: 5px }
/* We need to tweak the line height slightly so that the "selected boxes" don't overlap with each other ... */
/* We then need to reset the selected box part! */
.multi_container { line-height: 2em }
.multi_container ul.ul_james { line-height: 1.4em }

.login-button { height: 24px; width: 24px; background: url(/core/gfx/oauth2-buttons.png) #fff no-repeat 0 -100px; vertical-align: middle; margin: 2px 0.5em 2px 2px }
.login-amazon   { background-position: 0 0 }      /* Amazon */
.login-google   { background-position: 0 -25px }  /* Google */
.login-facebook { background-position: 0 -50px }  /* Facebook */
.login-live     { background-position: 0 -75px }  /* Windows live */
.login-shib     { background-position: 0 -125px } /* Shibboleth */
.login-linkedin { background-position: 0 -150px } /* LinkedIn */
.login-sanger   { background-position: 0 -175px } /* LinkedIn */


/* copied from 6 ? */
input.add_entry { width: 3em }

.openid { background: url(/core/gfx/openid.png) no-repeat 2px; width: 70%; padding-left:22px }

dd.composite label { padding-right: 0.5em; }
dd.composite span { padding-right: 0.5em; }
span.composite { white-space: nowrap; padding-left: 1em }
span.composite:first-child { padding-left: 0 }
dd.doublespace { line-height: 2.2em }

@media all and (max-width: 480px) {
  #wrap form dl dd, #wrap form dl dt { width: 100%; float: none; margin-bottom: 0.25em; text-align: left }
  #wrap form dl dd { padding-left: 1em; margin-bottom: 0.5em }
}


/***********************************************************************
** FILE: /new/css/header.css                                          **
***********************************************************************/


/* header size */
header { position: relative; overflow: hidden; padding-top: 0; max-width: 1920px; margin: 0 auto;
         height: 120px; display: grid;
         grid-template-columns: 1fr 360px 1080px 1fr;
         grid-template-rows: 120px;
         background: linear-gradient(to right,#597fba,#232642);
      }
body footer { margin: 0 auto; max-width: 1920px; position: relative; background-color: #2d3a87 }
header h1 { grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 3; margin: 0; justify-content: space-around; }
header nav, #search { overflow:hidden; padding-top: 1em }
/* What to do if we are responsive? */

/* First the logo */
h1 img { height: 120px; width:190px }
/* Now search ... */
/* hidden search box at the top of the page */
#search              { text-align:right; display: none; }
#search p            { margin: 0; padding-top: 0; padding-bottom: 0.5em }
.show-search #search { display: block; height: 3em }
#search .text        { padding: 3px; font-size: 1em; width: 70%; border: 0; background-color: white; float: right; padding: 0.5em; }
#search .submit      { display: none }
#search span         { border: 0; font-size: 1em; width: 14%; background-color: #0865a0; color: white;
                       text-align: center; display: block; float: right;padding: 0.5em }
#search span:hover   { background-color: #0a84d1 }

/* Now the extra links (search/menu?) */
.extra-links a,
.extra-links span { display: block; height: 3em; font-size: 2em; color: white; float: left; padding: 0.75em 0.2em; cursor: pointer; font-family: sanger-custom; }
/* These are magnifying glass & Hamburger */
header .search:before { content: 'S' }
.ham:before { content: 'H' }
.l-login:before { content: '$' }
.l-logout:before { content: 'o' }
span.ham { display: none }

/* Now the layout of the navigation panel!! */
header nav div { margin-left: 200px; border-right: solid 210px transparent; height: 5em; width: 100% }

.qr { width: 70px; height:70px; display: none; }
.qr img, img.qr-img { width:62px; height: 62px; margin: 4px; }
@media print {
  .qr { display: block; float: right; position: absolute; top:0; right: 0; }
}

body footer { position: relative; overflow: hidden; padding-top: 0; max-width: 1920px; margin: 0 auto;
         height: 60px; display: grid; line-height: 24px;
         grid-template-columns: 1fr 960px 480px 1fr;
         grid-template-rows: 60px;
         background-color: #2d3a87; align-items: center }
footer p { grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4; margin: 0; justify-content: space-around; text-align: right; display: inline-block }
body#homepage footer p { display: inline-block }
footer p:first-of-type { grid-column-start: 2 ; grid-column-end: 3; text-align: left }

@media (max-width: 1480px) {
  header { grid-template-columns: 1rem 190px 1fr 1rem }
  body footer { grid-template-columns: 1rem 5fr 4fr 1rem }
}

@media (max-width: 1024px) {
  body footer { grid-template-rows: 60px 30px; height: 90px; grid-template-columns: 1rem 1fr 1rem }
  footer p { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; }
  footer p:first-of-type { grid-row-start: 1; grid-row-end: 2 }
}

@media (max-width: 512px) {
  body footer { height: 120px; grid-template-rows: 90px 30px }
}
body header h2.responsive { display: none }

#wrap header span { text-align: right; grid-row-start: 1; grid-row-end: 2; grid-column-start: 3; grid-column-end: 4; display: inline-block; align-items: center }
#wrap header span a { display: inline-block; float: none }
#wrap header a { text-decoration: none }


/***********************************************************************
** FILE: /new/css/colours-about.css                                   **
***********************************************************************/


/* About colours are
06466f
0865a0
0a84d1
*/
/* Dark */
nav.responsive li.active,
header nav li.active     { border-color:     #06466f }
nav.responsive li:hover,
nav.responsive h2,
header h2,
header nav li:hover      { background-color: #06466f }
/* Normal */
.toggle-width,
.btt,
nav.responsive ul,
header nav div,
nav.section li:hover      { background-color: #0865a0 }
/* Light */
.btt:hover               { background-color: #0a84d1 }
/* Gradient fudges! */
header nav h2            { background: linear-gradient(to bottom, #0865a0, #06466f) }
header nav div           { background: linear-gradient(to right,  rgba(0,0,0,0) 30px, #0865a0 0) }


/***********************************************************************
** FILE: /new/css/colours-news.css                                    **
***********************************************************************/


/* News colours are
5e216e
7f2d95
a039bc
*/
/* Dark */
.news nav.responsive li.active,
.news header nav li.active     { border-color:     #5e216e }
.news nav.responsive li:hover,
.news nav.responsive h2,
.news header h2,
.news header nav li:hover      { background-color: #5e216e }
/* Normal */
.news .toggle-width,
.news .btt,
.news nav.responsive ul,
.news header nav div,
nav.section li.news:hover      { background-color: #7f2d95 }
/* Light */
.news .btt:hover               { background-color: #a039bc }
/* Gradient fudges! */
.news header nav h2            { background: linear-gradient(to bottom, #7f2d95, #5e216e) }
.news header nav div           { background: linear-gradient(to right,  rgba(0,0,0,0) 30px, #7f2d95 0) }


/***********************************************************************
** FILE: /new/css/colours-science.css                                 **
***********************************************************************/


/* Science colours are
1c5e7d
267da6
309cd0
*/
/* Dark */
.science nav.responsive li.active,
.science header nav li.active     { border-color:     #1c5e7d }
.science nav.responsive li:hover,
.science nav.responsive h2,
.science header h2,
.science header nav li:hover      { background-color: #1c5e7d }
/* Normal */
.science .toggle-width,
.science .btt,
.science nav.responsive ul,
.science header nav div,
nav.section li.science:hover      { background-color: #267da6 }
/* Light */
.science .btt:hover               { background-color: #309cd0 }
/* Gradient fudges! */
.science header nav h2            { background: linear-gradient(to bottom, #267da6, #1c5e7d) }
.science header nav div           { background: linear-gradient(to right,  rgba(0,0,0,0) 30px, #267da6 0) }


/***********************************************************************
** FILE: /new/css/colours-people.css                                  **
***********************************************************************/


/* People colours are
953d03
c75104
f96505
*/
/* Dark */
.people nav.responsive li.active,
.people header nav li.active     { border-color:     #953d03 }
.people nav.responsive li:hover,
.people nav.responsive h2,
.people header h2,
.people header nav li:hover      { background-color: #953d03 }
/* Normal */
.people .toggle-width,
.people .btt,
.people nav.responsive ul,
.people header nav div,
nav.section li.people:hover      { background-color: #c75104 }
/* Light */
.people .btt:hover               { background-color: #f96505 }
/* Gradient fudges! */
.people header nav h2            { background: linear-gradient(to bottom, #c75104, #953d03) }
.people header nav div           { background: linear-gradient(to right,  rgba(0,0,0,0) 30px, #c75104 0) }


/***********************************************************************
** FILE: /new/css/colours-innovations.css                             **
***********************************************************************/


/* Innovations colours are
00514b
00847b
00b7ab
*/
/* Dark */
.innovations nav.responsive li.active,
.innovations header nav li.active     { border-color:     #00514b }
.innovations nav.responsive li:hover,
.innovations nav.responsive h2,
.innovations header h2,
.innovations header nav li:hover      { background-color: #00514b }
/* Normal */
.innovations .toggle-width,
.innovations .btt,
.innovations nav.responsive ul,
.innovations header nav div,
nav.section li.innovations:hover      { background-color: #00847b }
/* Light */
.innovations .btt:hover               { background-color: #00b7ab }
/* Gradient fudges! */
.innovations header nav h2            { background: linear-gradient(to bottom, #00847b, #00514b) }
.innovations header nav div           { background: linear-gradient(to right,  rgba(0,0,0,0) 30px, #00847b 0) }


/***********************************************************************
** FILE: /new/css/navigation.css                                      **
***********************************************************************/


/*
We have 3 parts of navigation

- The intra-section navigation which appears as a bar...
- The inter-section navigation which appears as a drop down...
- The responsive nagvigation which doesn't appear except when the button is pressed
*/
nav   { display: block }
nav.section li:hover, nav.responsive h2, nav a { text-decoration: none; color: #fff }

nav.responsive { display: none; position: absolute; top: 0; left: 100%; width: 16em; overflow: auto; height: 100vh; z-index: 999;
                 background: #000000 url("/new/gfx/triangles-home.png") no-repeat -20px 440px; }

/* The following div is designed to overlay the page so that links can't be clicked on */
.overlay { z-index: 99999; position: absolute; height: 9999px; display: none;
           width: 100%; background-color: #000; opacity: 0.25 }

header h2 {
  font-family: 'Roboto Condensed', arial, helvetica, sans-serif;
  margin: 0;
  text-transform: uppercase;
  padding: 1em; color: #fff; font-weight: normal;  }
header h2.responsive { display: none; padding: 0.25em 1em; line-height: 1.17em }

header nav h2 {
            -webkit-clip-path: polygon(20px 0,100% 0,100% 100%,0 100%,0 20px);
            float: left; cursor: pointer;
            clip-path: polygon(20px 0,100% 0,100% 100%,0 100%,0 20px);
            height: 3.4em; font-size: 1.5em; }
header nav h2:after             { font-family: sanger-custom; content: 'V'; padding-left: 0.5em }
header nav h2.expand-menu:after { content: 'U'; }

header nav li {
  display: block; float: left; height: 5em; padding: 1.8em 1.5em; cursor: pointer; list-style: none;
  text-decoration: none; box-sizing: border-box }

header nav ul             { height: 4em; margin: 0; padding: 0 }
header nav .active        { border-bottom: solid 0.5em #f00 }

/* nav.section is the pop-up navigation that appears when you click
   on the section heading in "desktop mode" mode! */
nav.section ul { width: 12em; position: absolute; top: 0px; left:200px; margin: 0; padding: 0; display: none; z-index: 999 }
nav.section li { border-top: solid 1px white; margin: 0; list-style: none; cursor: pointer;
  background-color: #e6e6e6; padding:1em 1.5em; }
nav.section li a{ color: #0865a0; }
nav.section li:hover a { color: #fff; }

/* nav.responsive is the navigation to appear on the right of the page! */

nav.responsive h2       { margin: 0; padding: 0.8em; font-size: 1em; font-weight: normal}
nav.responsive ul       { margin: 0; padding: 0}
nav.responsive a.inter,
nav.responsive li       { padding: 0.6em; border-left: solid 0.5em transparent; cursor: pointer; display: block; }

/* These have a (V) icon to the right */
nav.responsive a.inter:after,
nav.responsive h2:after      { content: 'V'; float: right; display: block; font-family: sanger-custom; font-size: 1.6em; margin: -0.2em 0}
/* These have a (>) icon to the right */
nav.responsive a.inter:after { content: 'R' }

@media screen {
  /* Code required to hide/show the right hand menu
     note IE hack in show-menu body nav.responsive to set left/width to 66/33 respectively to get menu
     appear on rhs as transform doesn't work...
  */
  html.show-menu { background-color: #000; }
    /* This is to make the bottom of the RHS black when the user scrolls
       the menu on a small screen - and scrolls the url bar off - minor
       chrome mobile bug */
  .show-menu body {
    -ms-transform:     translateX(-16em);
    -webkit-transform: translateX(-16em);
    transform:         translateX(-16em);
    transition:        transform 500ms ease-in-out;
    overflow:          hidden;
    /* Set the page height to "large" as when you do the trick with overflow hidden the 100% fails for the footer/body */
    height: 9999px }

  .show-menu .overlay { display: block; background-color: transparent\9 }
  .show-menu footer { display: none }
  .show-menu body nav.responsive { display: block; left: 66%\9; width:34%\9; }

  .hide-menu body { transform: translateX(0em); transition: transform 250ms ease-in-out }
}



/***********************************************************************
** FILE: /new/css/footer.css                                          **
***********************************************************************/


/*
+----------------------------------------------------------------------
| Copyright (c) 2015 Genome Research Ltd.
| This file is part of the Pagesmith web framework.
+----------------------------------------------------------------------
| The Pagesmith web framework is free software: you can redistribute
| it and/or modify it under the terms of the GNU Lesser General Public
| License as published by the Free Software Foundation; either version
| 3 of the License, or (at your option) any later version.
|
| This program is distributed in the hope that it will be useful, but
| WITHOUT ANY WARRANTY; without even the implied warranty of
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
| Lesser General Public License for more details.
|
| You should have received a copy of the GNU Lesser General Public
| License along with this program. If not, see:
|     <http://www.gnu.org/licenses/>.
+----------------------------------------------------------------------

# CSS classes for the footer of the page - based on styles provided
# by NewCity but simplifying both HTML and mark up by writing CSS as
# it was meant
#
# Author         : js5
# Maintainer     : js5
# Created        : 2015-08-12
# Last commit by : $Author: js5 $
# Last modified  : $Date: 2018-01-17 11:04:15 +0000 (Wed, 17 Jan 2018) $
# Revision       : $Revision: 31984 $
# Repository URL : $HeadURL: svn+tsssh://www-sanger-ac-uk@web-wwwsvn-20-01/repos/svn/sites/www-sanger-ac-uk/trunk/htdocs/new/css/footer.css $
*/

/* footer stuff */
/* Add a small border to the of the footer so that it's edge is dileneated when over content */

footer   { margin-top:       10px;
           padding-top:      0;
           background-color: #000;
           position:         fixed;
           bottom:           0;
           width:            100%;
           color:            #fff;
           box-shadow: 0 0 4px 2px #fff } /* box shadow adds slight translucent line to delineate footer from body */

footer h3 { cursor: pointer }
footer h2 { display: none } /* This separate footer from rest of the structure of the page and keeps manages page structure well */
footer a { color: #fff }

footer .info  { clear: both; font-size: 0.9em; padding: 0 }
#homepage footer .legal,
footer .legal { clear: both; border-top: 1px solid #595959; display: block }
#homepage footer .legal p { display: block }
footer div div { width: 33%; float: left; padding: 0 }
.footer-wide   { border-right: 1px solid #595959; padding: 0.5em 2em }
.footer-narrow div { width: 48%; float: left; border-right: 1px solid #595959; padding: 0.5em 2em }
/* Parts of the footer which are by default closed */
footer ul, footer ul.inline, footer h4, footer .info p  { display: none;  }
footer .legal p { color: #999; padding: 0.5em 2.22em; font-size: 0.85em; margin: 0 auto }
footer ul.inline { padding: 6px; }
footer li { padding: 0.5em 0 }


ul.inline  { padding-left: 0; margin: 0; }
.inline li { display: inline;  }

footer h3, footer h4, footer .info p { margin: 1em 5px 0.5em; font-weight: normal; font-size: 1em }
footer h3 { margin: 0.25em 5px }
footer h4 { font-size: 1.1em; margin-bottom: 0.25em }

/* Little expand contract arrow */
footer h3:after { font-family: sanger-custom; content: "u"; font-size: 50%; padding-left: 1em }

footer ul { list-style: none; padding: 0 }
footer li { margin-left: 5px }

/* Social media links */
ul.social_media { padding-left: 0 }
.social_media li { display: inline-block; height: 2em; width: 2em; margin: 1px; padding: 0; overflow: hidden; background-color: #f00 }

/* github #4183c4;
   stackoverflow: #fe7a15;
   google+: #dd4b39;
   instagram: #3f729b;
   bitbucket: #205081
*/

li.sm_fb { background-color: #3b5998 }
li.sm_tw { background-color: #3d7bab }
li.sm_yt { background-color: #cd201f }
li.sm_li { background-color: #0077b5 }
li.sm_bl { background-color: #fb7a78 }
.sm_fb a:before { content: "f" }
.sm_tw a:before { content: "a" }
.sm_yt a:before { content: "c" }
.sm_li a:before { content: "e" }
#wrap .social_media a { text-decoration: none; position: relative; padding-left: 5em }
#wrap .social_media a:before {
  font: normal 1.4em sanger-custom;
  text-decoration: none;
  position: absolute; left: 0; width: 2em; text-indent: 0; color: white; top: 0;
  padding: 0.25em 0.2em 0.2em;
}
#wrap .sm_bl a:before { font: normal 0.8em roboto; content: "blog"; padding-top: 0.6em; line-height: 1.4em; font-family: Roboto, arial, helvetica, sans-serif}

/* Athena swan links */
footer div.athena-swan { border-right: 0px; display: none; padding: 0.5em;  }
footer .athena-swan p { margin-top: 5px }
.athena-swan a { padding: 5px; width: 143px; height:80px; border:0; text-align: center; display: block; background-color: #fff; margin: 5px auto 10px }

.blist { margin-top: 0 }
@media print {
  body { background: none; }
  main { padding-bottom: 1em }
  footer .legal { font-size: 60% }
  footer { position: relative; box-shadow: none; background-color: white; color: black }
  footer .info { display: none }
  footer .legal p { padding: 0.5em 0 0; }
}

/* Deal with the expanded footer */
@media screen {
  #homepage footer p.printshow { display: none }
  footer.expanded div.footer-narrow div,
  footer.expanded div.footer-wide,
  footer.expanded div.footer-narrow { height: 14em; overflow: hidden }
  footer.expanded div.athena-swan { display: block }
  footer.expanded ul, footer.expanded h4, footer.expanded p { display: block }
  footer.expanded h3:after { content: "v"}
  #homepage footer h3:after { content: ""; cursor: auto }
  #homepage footer h3 { cursor: auto }
  #homepage main { margin-bottom: 10em }
  #homepage footer div.footer-narrow div,
  #homepage footer div.footer-wide,
  #homepage footer div.footer-narrow { height: 14em; overflow: hidden }
  #homepage footer div.athena-swan,
  #homepage footer ul, #homepage footer h4, #homepage footer p { display: block }

}

@media screen and (min-width: 1px) {
  #wrap { z-index: 1 }
}

@media screen and (max-width: 960px) {
  footer .legal p { padding: 0.25em }
  .footer-wide { width: 25% }
  .footer-narrow { width: 49% }
  .footer-wide, .footer-narrow div { padding: 0.5em }
  .footer-wide { width: 29% }
  .footer-narrow { width: 41% }
  .footer-narrow div { width: 40% }
  .footer-narrow .athena-swan{ width: 60% }
}
@media screen and (max-width: 800px) {
  .footer-narrow div, .footer-wide { padding: 0.5em 0.1em }
}

@media screen and (max-width: 640px) {
  footer { position: relative; margin-top: 2em; box-shadow: none;}
  footer h3 { padding: 0.25em }
  #wrap footer .footer-wide, #wrap footer .footer-narrow { float: none; width: 100%; padding: 2px 0.5em; height: auto; border-right: 0 }
  #wrap footer .footer-narrow div { float: left; width: 40%; padding: 0; height: auto; border-right: 0 }
  #wrap footer .footer-narrow div.athena-swan { float: left; width: 59%; padding: 0; height: auto; border-right: 0 }
    #homepage footer h3:after { content: "v" }
    #homepage footer h3 { cursor: pointer }
    #homepage main { margin-bottom: 0; }
    #homepage footer div.footer-narrow div,
    #homepage footer div.footer-wide,
    #homepage footer div.footer-narrow { height: auto; overflow: auto }
    #homepage footer div.athena-swan,
    #homepage footer ul, #homepage footer h4, #homepage footer p { display: none }

  footer .footer-narrow div { float: left; width: 40%; padding: 2px 0 }
  footer .footer-wide { border-bottom: solid 1px #595959 }
  .athena-swan span { display: block }
  /* expandy collapsey stuff when narrow! */
  #homepage footer div div.expanded,
  footer div div.expanded { overflow: hidden }
  #homepage footer .expanded ul, #homepage footer .expanded h4, #homepage footer .expanded p { display: block }
  #homepage footer .expanded div.athena-swan { display: block }
  #homepage footer .expanded h3:after { content: "v"}

  footer .expanded ul, footer .expanded h4, footer .expanded p { display: block }
  footer .expanded div.athena-swan { display: block }
  footer .expanded h3:after { content: "v"}
  main { padding-bottom: 0 }
}

@media screen {
  footer.xnarrow .legal p { padding: 0.25em }
  .xnarrow .footer-wide { width: 25% }
  .xnarrow .footer-narrow { width: 49% }
  .xnarrow .footer-wide, .footer-narrow div { padding: 0.5em }
  .xnarrow .footer-wide { width: 29% }
  .xnarrow .footer-narrow { width: 41% }
  .xnarrow .footer-narrow div { width: 40% }
  .xnarrow .footer-narrow .athena-swan{ width: 60% }
  .vnarrow main { padding-bottom: 0 }

  #homepage footer.vnarrow h3:after { content: "v" }
  #homepage footer.vnarrow h3 { cursor: pointer}
  footer.vnarrow { position: relative; margin-top: 2em; box-shadow: none; }
  footer.vnarrow h3 { padding: 0.25em }
  footer.vnarrow .footer-wide,
  footer.vnarrow .footer-narrow,
  footer.vnarrow .footer-narrow div { float: none; width: 100%; padding: 2px 0.5em; height: auto; border-right: 0 }
  footer.vnarrow .footer-wide { border-bottom: 1px solid #595959 }
  .vnarrow .athena-swan span { display: block }
  footer.vnarrow div div.expanded { overflow: hidden }
  footer.vnarrow .expanded ul, footer .expanded h4, footer .expanded p { display: block }
  footer.vnarrow .expanded div.athena-swan { display: block }
  footer.vnarrow .expanded h3:after { content: "v"}

}


/***********************************************************************
** FILE: /new/css/responsive.css                                      **
***********************************************************************/


/* Responsive tweaks for top area! */
@media screen {
  .narrow header h1 { padding-left: 0.25em }
  .narrow header nav { padding-top: 0.5em }
  .narrow header h2.responsive { padding-left: 0.5em }
  .narrow header .ham, .narrow header h2.responsive { display: block; }
  .narrow header nav div h2, .narrow header nav div ul { display: none }
  .narrow .extra-links { height: auto }
  .narrow .extra-links a, .narrow .extra-links span { height: 2em; padding: 0.3em 0 0 0.4em }
  .narrow #wrap header nav div { background: transparent; height: auto; margin-bottom: 0 }
  .narrow #wrap header { height: auto; padding-top: 0; }
  .narrow nav.section { display: none }
}

@media screen and (max-width: 960px) {
  header nav { padding-top: 0.5em }
  header h1 { padding-left: 0.25em }
  header h2.responsive { padding-left: 0.5em }
  header .ham, header h2.responsive { display: block }
  header nav div h2, header nav div ul { display: none }
  nav.section { display: none }
  .extra-links { height: auto }
  .extra-links a, .extra-links span { height: 2em; padding: 0.3em 0 0 0.4em }
  #wrap header nav div { background: transparent; height: auto; margin-bottom: 0 }
  #wrap header { height: auto; padding-top: 0; }
}


/***********************************************************************
** FILE: /new/css/print.css                                           **
***********************************************************************/


/* Things tagged with printshow should only be visible when printed */
#wrap .printshow { display: none }

@media print {
  #wrap .printshow { display: block }
  #wrap .printhide { display: none }
/* Now let's deal with the header */
  html header { background: none; height: auto; padding: 0; }

  html header li,
  html header nav span:before { display: none }

  /* Remove backgrounds etc from header */
  header h1, #wrap header div, #wrap header h2 { color: black; background: transparent; text-transform: none; padding-left: 0 }

  /* Format the print logo */
  header img { margin: 10px}
  header h1 img.printshow { width: 175px; height: 60px; padding: 0; margin-top: 0 }

  /* And the section header */
  html header h2:after { display: none }
  html header h2 { padding: 0.75em 0 0.75em 0.5em; font-family: Roboto, arial, helvetica, sans-serif;}

  /* Turn back on any active li */
  #wrap header nav li.active { display: block; border-color: transparent; background: none;
    font-size: 1.5em; padding-top: 0.75em; padding-left: 0.5em }
  #wrap header nav li.active a { color: black }
  #wrap header nav li.active:before { content: '|'; padding-right: 0.5em }

/* Now some footer stuff! */
  #wrap footer p { color: black }
  #wrap footer { position: relative; box-shadow: none; color: black }
  .extra-links { display: none }
}


/***********************************************************************
** FILE: /new/css/lists.css                                           **
***********************************************************************/


 /*---------------------------------------------------------------------
  Lists
-----------------------------------------------------------------------
  Entries in the right hand column have no "bullet!"
---------------------------------------------------------------------*/

/** Styles for 2, 3, 4, 5 column lists... */
.col_2 li { float: left; width: 48%; }
.col_3 li { float: left; width: 31%; }
.col_4 li { float: left; width: 22%; }
.col_5 li { float: left; width: 18%; }

.faq { margin:10px 10pt 20px 20px; }
.faq dt { font-weight: bold; margin: 0; color: #383838; margin-top: 10px; }
.faq dd { font-weight: normal; margin:0 0 10px 20px; color: #3d3d3d; }
.faq ol li { margin: 0 0 0 40px; padding:0;}

.sub_nav ul { padding: 10px; list-style: none; margin-top: 0 }


/***********************************************************************
** FILE: /new/css/links.css                                           **
***********************************************************************/


 /*---------------------------------------------------------------------
  Links
-----------------------------------------------------------------------
  .external - add a "linkto" graphic to each external link
            - but not in the "more" section!
---------------------------------------------------------------------*/

.onclick, .twocol dd.link, .link, a        { color: #06466f; text-decoration: underline; cursor: pointer; }
.link:focus, a:focus, .link:hover, a:hover { text-decoration: none; }
a img { border:none; }

.pdf:after, .ext-js-link:after {
    color:            #06466f;
    cursor:           pointer;
    text-decoration:  none;
    font:             bold 0.6em sanger-custom;
    vertical-align:   30%;
    padding-left:     0.5em;
    content:          'J'; }

.extftp:after { content: '#' }
.pdf:after {    content: '$'; color: #c00 }
body .no-img:after { content: ''}

@media print {
  a { text-decoration: none; }
  .ext-js-link { display: none }
}

.btt  { border: 0; padding: 0.25em 1em; white-space: nowrap; font-size: 80% }
a.btt { color: white; text-decoration: none }

.wide-lines { line-height: 1.7em }


/***********************************************************************
** FILE: /new/css/tabs.css                                            **
***********************************************************************/


 /*----------------------------------------------------------------------
  Secondary navigation "tabs."
------------------------------------------------------------------------
  CSS styles for the secondary navigation (blue gradient) on the page

  Note these are not real tabs just links!
----------------------------------------------------------------------*/

#rhs ul.tabs, ul.tabs  { margin: 0; padding: 0; list-style: none; float: left;}
#rhs ul.tabs, ul.tabs { margin-left: 3px; width: 95%; text-indent: 0 }
#rhs ul.navr, ul.navr { float: right; }
#rhs ul.tabs li, .tabs li { padding: 1px 0; margin: 0; list-style: none; float: left; text-indent: 0  }
#rhs ul.tabs li a, .tabs li a { padding: 4px 8px; text-decoration: none; font-weight: bolder; color: #333; float: left; }
ul.tabs {margin: 8px 6px 0 }
#rhs ul.tabs { font-size:80%; margin-top: 2px; }
#rhs ul.tabs li a:focus, .tabs li a:focus,
#rhs ul.tabs li a:hover, .tabs li a:hover { text-decoration: underline; color: #8E0018; }
#rhs ul.tabs .disabled, .tabs li.disabled {display:none}
#rhs ul.show-disabled li.disabled, ul.show-disabled li.disabled {display:block}
#rhs ul.tabs .disabled a, .tabs li.disabled a, .tabs li.disabled a:focus,
.tabs li.disabled a:hover { color: #808080; cursor: default; text-decoration: none; }
#rhs ul.tabs .active a:hover, .tabs .active a:hover,
#rhs ul.tabs .active a:focus, .tabs .active a:focus
 {color: white; text-decoration:underline; }


.tabs .active a, #rhs .tabs li.active a { color: #fff }
.tabs .active, .tabs li { border-top-left-radius: 6px; border-top-right-radius: 6px; text-indent: 0 }
#rhs .tabs li, .tabs li { background: linear-gradient(#f0f0f0,#ddd); margin-right: 1px; background-color: #f0f0f0 }
#rhs .tabs li.active, .tabs .active { background: linear-gradient(#81a7cc,#336cab); color: #fff; background-color: #336cab }


ul.second-tabs { margin: 0; padding: 4px 0 0; list-style: none; width: 100%; float: left; background: linear-gradient(#0e518d,#02486a); background-color: #0e518d   }
ul.second-tabs li { float: left; background: none; padding:0; text-indent: 0 }
ul.second-tabs li:first-child { margin-left: 5px }
ul.second-tabs li:last-child { margin-right: 5px }
ul.second-tabs li a { display:  block; padding: .25em 1em 0 1em; line-height: 2em;
  text-decoration: none; color: white; float: left;     font-weight: bold }
ul.second-tabs li a:focus,
ul.second-tabs li a:hover { color: #fff; text-decoration: underline; }
ul.second-tabs .active a:focus,
ul.second-tabs .active a, ul.second-tabs .active a:hover { color: #14559f; background-color: #fff; }

ul.second-tabs li:before,
ul.tabs li:before, #rhs ul.tabs li:before { content: ''; width: 0 }

@media print {
  ul.tabs { display: none; }
}

.sub_nav { float:right; width:20%; padding: 10px; }
.sub_nav h4:first-child, .sub_nav h3:first-child { background-color: #bcc5cc; padding: 5px 10px; margin: 0; }
.sub_nav ul { border: 1px solid #bcc5cc; }
.sub_nav li { padding-left: 10px; text-indent: -10px }
.sub_nav li:before { content: ''; width: 0 }
.sub_nav a { text-decoration: none; font-weight: bold; }
.sub_nav .active a { text-decoration: none; font-weight: bold; color: #999 }
.sub_data { float:left; width:75%; }

.sub_left { float: left; }
.sub_narrow_nav { width: 30%; }
.sub_narrow_data { width: 65%; }

@media print {
  .sub_nav { display: none; }
  .sub_data { float: none; width: auto; }
}

ul.tabs + div { clear: both }


/***********************************************************************
** FILE: /new/css/ps-layouts.css                                      **
***********************************************************************/


 .web-error { display: none; }
/*----------------------------------------------------------------------
  standard page....
------------------------------------------------------------------------
  These have the following layout:

  /---------------------------\ /--------\
  |     #main (75%)           | | #rhs   |
  |                           | | (24%)  |
  |                           | |        |
  |                           | \--------/
  |                           | /--------\
  |                           | |        |
  |                           | |        |
  |                           | |        |
  \---------------------------/ |        |
  /---------------------------\ \--------/
  |                           | /--------\
  |                           | |        |
  \---------------------------/ |        |
                                |        |
                                \--------/

   main is used to float col1 and col2 to the left in three col
   layouts
 ----------------------------------------------------------------------*/

 #outer { font-size: 0.75em; }

 #main  { float: left; width: 75%; padding:0; margin:0; border: 0; }

 #rhs  { width:24%; float: right; }

 #main:after {
   content:"."; display:block; height:0; clear:both; visibility:hidden; }

.col1 { width:49%; float: left; }
.col2 { width:49%; float: right; }

.col12 { width:66%; float: left; }
.col3 { width:32%; float: right; }

.col1_of_3 { width:32%; float: left; }
.col23_of_3 { width:66%; float: right; }

#rhs .col1, #rhs .col2 { width: auto; float: none; }

@media print {
  #rhs .panel { display:none; }
  #rhs .rhs_print { display:block; border-top: 1px solid #bcc5cc; padding-top: 10px; }
  #outer, body { width: 100%; min-width: 100%; max-width: 100%; margin: 0 auto; }
  #rhs, #main, #outer { width: 100%; float: none; }

}

.toggle-width { padding: 0.25em 0.5em; font: 0.5em 'sanger-custom'; color: #fff; margin-left: 1em; cursor: pointer; float: right }
#main  .toggle-width:after { content: 'r' }
#mainx .toggle-width:after { content: 'l' }
#rhsx { display: none }
#mainx { width: 100% }

.ep-plain { margin-top: 10px; }
#landing #main .ep-plain h3 { background: none; border-bottom: 0 }


/***********************************************************************
** FILE: /core/css/pagesmith/tables.css                               **
***********************************************************************/



/*----------------------------------------------------------------------
  Table styles
------------------------------------------------------------------------
  CSS styles for "sortable tables" in the page

  We may want to tweak this to be able to use the styles without making
  the table sortable
----------------------------------------------------------------------*/

/**
  table styles
**/

table {
  width: 90%;   border-collapse: collapse;   margin: 0.5em auto;   text-align: left; border: 1px solid #fff; }
/**
  thead/tfoot styles
**/
table.wide { width: 99% }
table tr th {
  font-weight: bold; background-color: #bcc5cc; color: #3d3d3d; border: 2px solid #fff; padding: 2px 0.5em;   text-align: center
}

table.sorted-table thead th.header:after { content: '\2195'; vertical-align: top; font-weight: normal; float: right; color: #fff; padding-bottom: 2px; }
table.sorted-table thead tr .header { cursor: pointer; }
/*&uarr; &darr; &#8645; */

table.narrow-sorted tr .header {
  padding-left: 4px; }

table.sorted-table thead th.headerSortDown:after { content: '\2193' }
table.sorted-table thead th.headerSortUp:after   { content: '\2191' }

table.sorted-table thead th.rotated_cell:after { height: 0; margin-top:-1.2em; }
td.break-word { word-wrap: break-word; width: 3em }
/**
  tbody and tfoot styles
**/
table td { color: #3d3d3d; padding: 2px 0.5em; background-color: #FFF; vertical-align: top; border: 2px solid #fff; }
table tbody td { background-color: #FFF; }
table tbody.foot td { background-color: #bcc5cc; font-weight: bold }

/** Hack to make sure the first row is grey if there is no header row! **/
table thead tr.filters td { padding: 2px }
table thead tr.filters td,
table.flip tbody tr.even td, table tbody tr.odd td { background-color:#e0e4e7; }
table.flip tbody tr.odd td { background-color:#fff; }
table.flip tbody tr.odd td { background-color:#fff; }

.r > td.c, .l > td.c, .c, .c > td { text-align: center; }
.l > td.r, .c > td.r, .r, .r > td { text-align: right; }
.c > td.l, .r > td.l, .l, .l > td { text-align: left; }
.nowrap, .nowrap > td { white-space: nowrap; }

.pager { text-align: center; margin:2px auto; font-size: 80%; }
.pager span span, .pager span strong { background-color: #bbb; padding: 2px 4px; margin: 0 2px; border: 1px solid #ccc; }
.pager span span { cursor: pointer; background-color: #ddd; }

tr.errors  td { font-weight: bold; color: #900 }
tr.warning td { font-weight: bold; color: #c60 }
tr.info    td { font-weight: bold; color: #090 }

.rotated_cell { white-space: nowrap; }
#outer tr.red    td { background-color: #fcc }
#outer tr.orange td { background-color: #fc9 }
#outer tr.yellow td { background-color: #ffc }
#outer tr.green  td { background-color: #cfc }

table div.rotated { padding: 0 2px; white-space: nowrap;
  -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
       -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
}
thead th { vertical-align: bottom; text-align: center; line-height: 1em; }

table .vertical { white-space: nowrap; }

table.lightgrey tbody td { background-color: #fafafa}

input.colfilter, select.colfilter { font-size: 90% }

.cross-highlight td.cross_h { background-color: #ddd; }
.cross-highlight td.cross_a { background-color: #ccc }


/***********************************************************************
** FILE: /core/css/pagesmith/two-col-lists.css                        **
***********************************************************************/


 .twocol dd p, .twocol dd pre { padding: 0; margin:0 0 0.5em 0; }
.twocol dt {
  clear:both; width:20%; float:left; color:#14559f; text-align:right; margin: 1px 0; font-weight: bold
}

.twocol dt a       { color: #663300; text-decoration: underline; font-weight: bold; }
.twocol dt a:focus, .twocol dt a:hover { color:#ff7c0d; }
.twocol dd         { float:right; width:76%; color:#000; padding:0 5px; margin: 1px 0 0.5em 0; clear: right}

dl.twocol { margin-top: 0.5em; }
dl.twocol dl.twocol { margin: 0; }
.twocol .twocol dt { text-align: left; }
.twocol .bordered { border-top: 1px solid #e0e4e7; }
.col1_of_3 .twocol dt, .col1 .twocol dt, .col2 .twocol dt { width: 20%; }
.col1_of_3 .twocol dd, .col1 .twocol dd, .col2 .twocol dd { width: 72%; }


.evenwidth dt, .evenwidth dd { width: 47% }
.col1_of_3 .evenwidth dt, .col1_of_3 .evenwidth dd, .col1 .evenwidth dt, .col2 .evenwidth dt, .col1 .evenwidth dd, .col2 .evenwidth dd { width: 45%; }

.threequart dt { width: 24%; }
.threequart dd { width: 73%; }
.col1 .threequart dt, .col2 .threequart dt { width: 22%; }
.col1 .threequart dd, .col2 .threequart dd { width: 71%; }

.twothird dt { width: 32%; }
.twothird dd { width: 65%; }
.col1 .twothird dt, .col2 .twothird dt { width: 30%; }
.col1 .twothird dd, .col2 .twothird dd { width: 60%; }

.longleft dt { width: 78%; text-align: left; }
.longleft dd { width: 18%; }
.col1 .longleft dt, .col2 .longleft dt { width: 70%; }
.col1 .longleft dd, .col2 .longleft dd { width: 22%; }

.leftalign dt, .outer dt { text-align: left; }
.outer dd { text-align: right; }
dl.twocol:after {
  content:"."; display:block; height:0; clear:both; visibility:hidden; }

dd.full_width, dt.full_width { width: 100%; float: none }

#rhs .twocol dt { width: 19% }
#rhs .twocol dd { width: 73% }

#rhs .evenwidth dt, #rhs .evenwidth dd { width: 46% }
#rhs .twothird dt { width: 30% }
#rhs .twothird dd { width: 60% }

dl.twocol:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }


/***********************************************************************
** FILE: /core/css/ext/james.css                                      **
***********************************************************************/


 .qdef { color: #999; }
ul.ul_james, #rhs ul.ul_james { margin: 0; padding: 0; list-style: none; font-size: 80%; text-align: left }
ul li.li_james, #rhs ul li.li_james { cursor: pointer; background-color: #fff; border: 1px solid #bcc5cc; border-top-width: 0; text-align: left }
ul li.li_james_hovered, #rhs ul li.li_james_hovered { background-color: #bcc5cc; text-align: left }
ul.ul_james li:before, #rhs ul.ul_james li:before { content: '' }


/***********************************************************************
** FILE: /core/css/ext/thickbox.css                                   **
***********************************************************************/


 /* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window { font-size: 0.9em; color: #333333; }

#TB_secondLine { font-size: 0.8em; color:#666666; }

#TB_window a:link {color: #666666; }
#TB_window a:visited {color: #666666; }
#TB_window a:hover {color: #000; }
#TB_window a:active {color: #666666; }
#TB_window a:focus{color: #000; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
  position: fixed;   z-index:1000;   top:0;   left: 0;   height:100%;   width:100%; }

.TB_overlayMacFFBGHack {background: url(/core/gfx/macffbghack.png) repeat; }
.TB_overlayBG {
  background-color:#000;   opacity: 0.75; }

#TB_window {
  position: fixed;   background: #ffffff;   z-index: 1002;   color:#000000;   display:none;   border: 4px solid #525252;   text-align:left;   top:50%;   left:50%; }

#TB_window img#TB_Image {
  display:block;   margin: 15px 0 0 15px;   border-right: 1px solid #ccc;   border-bottom: 1px solid #ccc;   border-top: 1px solid #666;   border-left: 1px solid #666; }

#TB_caption{
  /*height:25px; */
  font-size: 80%;   padding:7px 30px 10px 25px;   float:left; }

#TB_closeWindow{
  height:25px;   padding:11px 25px 10px 0;   float:right; }

#TB_closeAjaxWindow{
  padding:7px 10px 5px 0;   margin-bottom:1px;   text-align:right;   float:right; }

#TB_ajaxWindowTitle{
  float:left;   padding:7px 0 5px 10px;   margin-bottom:1px; }

#TB_title{
  background-color:#e8e8e8;   height:27px; }

#TB_ajaxContent{
  clear:both;   padding:2px 15px 15px 15px;   overflow:auto;   text-align:left;   line-height:1.4em; }

#TB_ajaxContent.TB_modal{
  padding:15px; }

#TB_ajaxContent p{
  padding:5px 0 5px 0; }

#TB_load{
  position: fixed;   display:none;   height:13px;   width:208px;   z-index:103;   top: 50%;   left: 50%;   margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

#TB_HideSelect{
  z-index:99;   position:fixed;   top: 0;   left: 0;   background-color:#fff;   border:none;   opacity: 0;   height:100%;   width:100%; }

#TB_iframeContent{
  clear:both;   border:none;   margin-bottom:-1px;   margin-top:1px; }


/***********************************************************************
** FILE: /core/css/pagesmith/references.css                           **
***********************************************************************/


 /*----------------------------------------------------------------------
  Reference styles
------------------------------------------------------------------------
  CSS styles for references in the page...

  .footnote     is the styling of the footnote elements generated by the
                <% Cite %> directive

  .periodical   Styling for periodicals in the <% References %>
                directive.

  We may want to extend this for other reference styles e.g. web links
----------------------------------------------------------------------*/

.footnote { font-size: 60%; vertical-align: 30%; }

.periodical { margin-top: 0.5em; margin-bottom: 0.5em; }
#wrap .periodical p.abstract { font-size: 0.9em; line-height: 1.2em; margin: 0.25em 2em; }

/* Styles for individual elements - this is marked up in a
   microformats style! */
.periodical .article { font-weight: bold; margin-top: 0.5em; }
.periodical .authors { font-size: 80%; }
.periodical .publication { font-size: 80%; }
.periodical .title   { font-style: italic; }
.periodical .links   { font-size: 80%; }
.periodical .volume  { font-weight: bold; }
.periodical .links a { font-weight: bold; text-decoration: none; }

/* Tiger striping */
.ref_1 { background-color: #e0e4e7; }

/* Hide the following if the content is marked as "closed" */
.periodical.ref-closed .affiliation, .periodical.ref-closed .grants, .periodical.ref-closed .abstract { display: none; }

ul.references { padding-left: 0 }
li.periodical { margin-top: 0; margin-left: 10px; list-style-type: none }
li.periodical:before { content: ''; width: 0 }

li.periodical h4:first-child, li.periodical h4 { margin-bottom:0; margin-left: 0; }
li.periodical h4:before { content: ">"; color: #bcc5cc; width: 20px; float: left; display:block; margin-left: -20px; padding-right: 0; }
li.ref-coll   h4:before { content: "\25BC"; cursor: pointer }
li.ref-closed h4:before { content: "\25BA"; cursor: pointer }
li.periodical h4, li.periodical p, li.periodical h4:first-child { margin-right: 10px; padding:0 0 0 20px; margin-left: 0; text-indent: 0}
li.periodical h4, li.periodical .authors, li.periodical .links, li.periodical .publication { font-size: 1em; }

.references p { margin-top: 0.3em; margin-bottom: 0.3em }


/***********************************************************************
** FILE: /new/css/references.css                                      **
***********************************************************************/


li.ref-coll   h4:before { content: "V"; font-family: 'sanger-custom'; }
li.ref-closed h4:before { content: "R"; font-family: 'sanger-custom'; }


/***********************************************************************
** FILE: /core/css/pagesmith/tab-contents.css                         **
***********************************************************************/


 /*----------------------------------------------------------------------
  Tab content...
------------------------------------------------------------------------
  Note the actual tabs share CSS with the main navigation tabs so
  are defined in pagesmith-header.css...

  Note we don't hide the display on the print version of the page!
----------------------------------------------------------------------*/
.collapsed .tabc { border-top: 0 }
.tabc { border-top: 1px solid #14559f; clear: both; }

.tabc_hid { display: none; }


.no-top-border { border-top: 0; }

.tabc > h3 { display:none; }
.no-top-border  > h3      { display: block; margin-top: 5px; }
.hide-heading   > h3      { display: none }
.tabc h4, .tabc > h3.keep { display:block; margin-top: 5px; }
.tabc p + h4, .tabc ul + h4, .tabc ol + h4, .tabc div + h4, .tabc dl + h4 { margin-top: 12px}
/* re-instate when checked that all the headings are the right size!
  #project #main .tabc h3 {background:none; border-bottom:none}
*/
form .tabc dl { margin-top: 1em }
@media print {
  /* Show all the tabs which have been hidden, and remove the
     extra border at the top of the tabs */
  .tabc h3 { display: block; }
  .tabc { border-top: 0; }
  .tabc_hid { display: block; }
}


/***********************************************************************
** FILE: /new/css/collapse.css                                        **
***********************************************************************/


/*----------------------------------------------------------------------
  Collapse + expand functionality
------------------------------------------------------------------------
  buttons
    A blank gif is inserted into each of the ".collapsible h3" elements
    on the page - which is then styled as below.. it uses the same
    graphic as the expand/collapse all and is only changed by the
    vertical position within the image.
  hiding div
    When collapsed we need to hide the div - this is simply a case of
    setting display to none!
  box styling
    We over-ride the box styling by moving the image around, the two
    of the collapsable boxes are always v-light grey, and the bottom is
    when the box is collapsed
----------------------------------------------------------------------*/
.sanger-icon { font-family: sanger-custom }
.collapsible h3:first-child span ,
  .collapsible h4.keep span ,
  .collapsible p.head span { cursor: pointer; padding-right: 0.5em; }

.collapsed div.ajax, .collapsed div.coll, .collapsed ul, .collapsed .searchhit,
.collapsed table, .collapsed pre, .collapsed h4, .collapsed p, .collapsed h5, .collapsed h6,
.collapsed dl, .collapsed ul, .collapsed ol { display: none; }

.collapsed h4.keep { display: block; }

.collapsed p.head { display: block }

.collapsible p.head span { color: #000 }
.collapsible p.head .hide { display: inline }
.collapsible p.head .show { display: none; }

.collapsed p.head .hide { display: none }
.collapsed p.head .show { display: inline }

#rhs .collapsible h3 { margin-top: 0; border-top-left-radius: 10px; border-top-right-radius: 10px;
  padding-top: 8px }



/***********************************************************************
** FILE: /new/css/boxes.css                                           **
***********************************************************************/


.box-info      { background-color: #cfc; border: solid 0.25em #cfc; } /* green */
#rhs .box-info h3, .box-info h3 { color: #060; background-image:none; font-size: 1em }
.panel .box-info  { background-color: #cfc; border: 0; } /* green */
.panel .box-info        h3 { color: #060; border-bottom: 1px solid #060; font-size: 1em }

.box-msg      { background-color: #ffc; border: solid 0.25em #ffc; } /* yellow */
#rhs .box-msg h3, .box-msg h3 { color: #960; background-image:none; font-size: 1em }
.panel .box-msg   { background-color: #ffc; border: 0; } /* yellow */
.panel .box-msg         h3 { color: #960; border-bottom: 1px solid #960; font-size: 1em }

.box-error      { background-color: #fcc; border: 0; border: solid 0.25em #fcc } /* red */
#rhs .box-error h3, .box-error h3 { color: #8e0018; background-image:none; font-size: 1em }
.panel .box-error { background-color: #fcc; border: 0; } /* red */
.panel .box-error       h3 { color: #8e0018; border-bottom: 1px solid #8e0018; font-size: 1em }

.box-warn      { background-color: #ffe8cc; border: 0; border: solid #ffe8cc} /* orange */
#rhs .box-warn h3, .box-warn h3 { color: #8e0018; background-image:none; font-size: 1em }
.panel .box-warn  { background-color: #ffe8cc; border: 0; } /* orange */
.panel .box-warn        h3 { color: #8e0018; border-bottom: 1px solid #8e0018; font-size: 1em }



/***********************************************************************
** FILE: /core/css/templates/ps/resizing.css                          **
***********************************************************************/



/* This playing around twith maximum width CSS files - to
  improve performance on small devices */

/******************

Greater than 840px.....
+---------------------------------------+
| LOGO                       search box |
+---------------------------------------+
|_Tabs__________________________________|
| +-main----------------+ +-rhs-------+ |
| | +-col1--+ +-col2--+ | | +-col1--+ | |
| | |       | |       | | | |       | | |
| | |       | |       | | | |       | | |
| | |       | |       | | | +-------+ | |
| | |       | |       | | | +-col2--+ | |
| | |       | |       | | | |       | | |
| | |       | +-------+ | | |       | | |
| | |       |           | | +-------+ | |
| | +-------+           | +-----------+ |
| +---------------------+               |
+---------------------------------------+

Greater than 630px.....

+-------------------------+
| LOGO         search box |
+-------------------------+
|_Tabs____________________|
| +-main----------------+ |
| | +-col1--+ +-col2--+ | |
| | |       | |       | | |
| | |       | |       | | |
| | |       | |       | | |
| | |       | |       | | |
| | |       | |       | | |
| | |       | +-------+ | |
| | |       |           | |
| | +-------+           | |
| +---------------------+ |
| +-main----------------+ |
| | +-col1--+ +-col2--+ | |
| | |       | |       | | |
| | |       | |       | | |
| | |       | +-------+ | |
| | +-------+           | |
| +---------------------+ |
+-------------------------+

Greater than 480px

+-------------------------+
| LOGO         search box |
+-------------------------+
|_Tabs____________________|
| +-main----------------+ |
| | +-col1------------+ | |
| | |                 | | |
| | |                 | | |
| | |                 | | |
| | |                 | | |
| | +-----------------+ | |
| | +-col2------------+ | |
| | |                 | | |
| | |                 | | |
| | +-----------------+ | |
| +---------------------+ |
| +-rhs-----------------+ |
| | +-col1--+ +-col2--+ | |
| | |       | |       | | |
| | |       | |       | | |
| | |       | +-------+ | |
| | +-------+           | |
| +---------------------+ |
+-------------------------+

Smaller than 480px

+---------------------+
| LOGO        s'ch bx |
+---------------------+
|_Tabs________________|
| +-main------------+ |
| | +-col1--------+ | |
| | |             | | |
| | |             | | |
| | |             | | |
| | |             | | |
| | +-------------+ | |
| | +-col2--------+ | |
| | |             | | |
| | |             | | |
| | +-------------+ | |
| +-----------------+ |
| +-rhs-------------+ |
| | +-col1--------+ | |
| | |             | | |
| | |             | | |
| | +-------------+ | |
| | +-col2--------+ | |
| | |             | | |
| | +-------------+ | |
| +-----------------+ |
+---------------------+
*/


@media all and (max-width: 800px) {
  body { min-width: 320px }
  #faculty #main, #main, #faculty #rhs, #rhs { float: none; width: 100%; }
  #rhs .col1 { width:49%; float: left; }
  #rhs .col2 { width:49%; float: right; }
}

@media all and (max-width: 1200px) {
  form .col1, form .col2 { float: none; width: 100% }
}

@media all and (max-width: 780px) {
  .col1 .col1,   .col2 .col1,   .col1 .col2,   .col2 .col2 { float: none; width: 100%; }
}

@media all and (max-width: 640px) {
  .col1, .col2 { float: none; width: 100%; }
  #access { display: none; }
}

@media all and (max-width: 480px) {
  #rhs .col1, #rhs .col2 { float: none; width: 100%; }
}