/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
div#headerdiv article,
div#headerdiv aside,
div#headerdiv details,
div#headerdiv figcaption,
div#headerdiv figure,
div#headerdiv footer,
div#footerdiv footer,
div#headerdiv header,
div#headerdiv hgroup,
div#headerdiv nav,
div#footerdiv nav,
div#headerdiv section,
div#footerdiv section { display: block; }
div#headerdiv audio,
div#headerdiv canvas,
div#headerdiv video { display: inline-block; *display: inline; *zoom: 1; }
div#headerdiv audio:not([controls]) { display: none; }
[hidden] { display: none; }
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 { background: #ffffff url(../../../images/global/pale_grey_slight_texture.jpg) top left repeat; }
body #contents { width: 100%; margin: 0; }
body #contents .contentspane { background-color: #fff; }
body #contents .footerpane { background-color: transparent; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
div#headerdiv { background-color: #fff; font-size: 11px; font-family: Verdana, sans-serif; }
div#local-masthead, div#local-masthead input, div#local-masthead select, div#local-masthead textarea { font-family: sans-serif; color: #222; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
div#headerdiv ::-moz-selection,
div#footerdiv ::-moz-selection { background: #71b360; color: #fff; text-shadow: none; } /* EMBL green */
div#headerdiv ::selection,
div#footerdiv ::selection { background: #71b360; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
div#headerdiv a { color: #00e; }
div#headerdiv a:visited { color: #551a8b; }
div#headerdiv a:hover { color: #06e; }
div#headerdiv a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
div#headerdiv a:hover,
div#headerdiv a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
div#headerdiv abbr[title] { border-bottom: 1px dotted; cursor: help; }
div#headerdiv b,
div#headerdiv strong { font-weight: bold; }
div#headerdiv blockquote { margin: 1em 40px; }
div#headerdiv dfn { font-style: italic; }
div#headerdiv hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
div#headerdiv del { text-decoration: line-through; }
div#headerdiv ins { background: #ff9; color: #000; text-decoration: none; }
div#headerdiv mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
div#headerdiv pre,
div#headerdiv code,
div#headerdiv kbd,
div#headerdiv samp, monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
div#headerdiv pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
div#headerdiv q { quotes: none; }
div#headerdiv q:before,
div#headerdiv q:after { content: ""; content: none; }
div#headerdiv small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
div#headerdiv sub,
div#headerdiv sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
div#headerdiv sup { top: -0.5em; }
div#headerdiv sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
div#headerdiv ul,
div#headerdiv ol { margin: 1em 0; padding: 0 0 0 40px; }
div#headerdiv dd { margin: 0 0 0 40px; }
div#headerdiv nav ul,
div#headerdiv nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
div#headerdiv div.nav ul,
div#headerdiv div.nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
div#headerdiv img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
div#headerdiv svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
div#headerdiv figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
div#local-masthead form { margin: 0; }
div#local-masthead fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
div#local-masthead label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
div#local-masthead legend { border: 0; *margin-left: -7px; padding: 0; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
div#local-masthead button, div#local-masthead input, div#local-masthead select, div#local-masthead textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
*/
div#local-masthead button, div#local-masthead input { line-height: normal; *overflow: visible; }
/*
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
*/
div#local-masthead table button,
div#local-masthead table input { *overflow: auto; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
*/
div#local-masthead button,
div#local-masthead input[type="button"],
div#local-masthead input[type="reset"],
div#local-masthead input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
/*
* Consistent box sizing and appearance
*/
div#local-masthead input[type="checkbox"],
div#local-masthead input[type="radio"] { box-sizing: border-box; }
div#local-masthead input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
div#local-masthead input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
div#local-masthead button::-moz-focus-inner,
div#local-masthead input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
div#local-masthead textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
div#local-masthead input:valid, div#headerdiv textarea:valid { }
div#local-masthead input:invalid,
div#local-masthead textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
div#headerdiv table { border-collapse: collapse; border-spacing: 0; }
div#headerdiv td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/*
Arguably, this is where we should put our global style rules, and hence
rename this file "ebi-boilerplate.css"
*/
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
div#headerdiv .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
div#headerdiv .ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
div#headerdiv .hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
div#headerdiv .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
div#headerdiv .visuallyhidden.focusable:active,
div#headerdiv .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
div#headerdiv .invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
div#headerdiv .clearfix:before,
div#headerdiv .clearfix:after { content: ""; display: table; }
div#headerdiv .clearfix:after { clear: both; }
div#headerdiv .clearfix { zoom: 1; }
/*
ebi-visual.css
Custom styling for achieving the EBI "look"
~ Typography
~ Forms
~ Tables
~ Lists
~ Colour
~ Tweaks
AUTHOR: Francis Rowland
DATE: Sep 2011
*/
/* Typography
===================================================*/
div#footerdiv *,
div#headerdiv * {
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
text-indent: 0;
line-height: 1.538;
}
.headerdiv {
border: 0 none;
height: auto;
left: 0;
margin: 0;
padding: 0;
position: relative;
top: 0;
width: auto;
}
div#footerdiv {
background-color: transparent;
height: auto;
font-size: 13px;
font-family: Verdana, sans-serif;
}
.contents {
position: relative;
top: auto;
width: 100%;
z-index:auto;
}
table.footerpane,
.footerpane {
font-size: 13px;
font-family: Verdana, sans-serif;
background: none;
border: none;
height: auto;
position: relative;
text-align: left;
width: 100%;
}
table.footerpane td {
padding: 0 0 1em 0;
}
table.footerpane td.footerrow {
padding: 0;
}
table.contentspane,
.contentspane {
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
div#footerdiv h1,
div#footerdiv h2,
div#footerdiv h3,
div#footerdiv h4,
div#footerdiv h5,
div#footerdiv h6,
div#headerdiv h1,
div#headerdiv h2,
div#headerdiv h3,
div#headerdiv h4,
div#headerdiv h5,
div#headerdiv h6 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 20px 0;
clear:both;
background-color: transparent;
}
div#headerdiv h1 {
font-size: 370%;
line-height: 125%;
background: transparent;
border: none;
}
div#headerdiv h1.strapline,
div#footerdiv h1.strapline{ font-size: 277%; /* ~40px */}
div#headerdiv h2 {
font-size: 277%;
line-height: 1.11; /* ~40px */
}
div#headerdiv h2.strapline { font-size: 182%; /* 24px */}
div#headerdiv .strapline {
font-size: 182%; /* 24px */
vertical-align: bottom;
color: #F7F7F7;
line-height: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 0 9px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
text-indent: 0;
}
div#headerdiv td h2 { font-size: 257%; } /* 36 / 14 * 100 */
div#headerdiv h3 {
font-size: 182%;
border-bottom: 1px solid #ccc;
line-height: 163%; /* ~39px... 39px + 1px border = 40px */
padding: 0 9px;
margin-bottom: 5px;
}
div#global-footer h3.services {color: #207a7a;}
div#global-footer h3.research {color: #63ae54;}
div#global-footer h3.training {color: #fab700;}
div#global-footer h3.industry {color: #346189;}
div#global-footer h3.funding {color: #e5969f;}
div#global-footer h3.about {color: #207a7a;}
div#global-footer h3.services a {color: #207a7a;}
div#global-footer h3.research a {color: #63ae54;}
div#global-footer h3.training a {color: #fab700;}
div#global-footer h3.industry a {color: #346189;}
/* div#global-footer h3.funding a {color: #e5969f;} */
div#global-footer h3.about a {color: #207a7a;}
div#global-nav-expanded img {
padding-left: 0.7em;
margin: 29px 0 0 0;
border: none;
}
div#global-nav-expanded h3.services { border-bottom: 2px solid #207a7a; }
div#global-nav-expanded h3.research { border-bottom: 2px solid #63ae54; }
div#global-nav-expanded h3.training { border-bottom: 2px solid #fab700; }
div#global-nav-expanded h3.industry { border-bottom: 2px solid #346189; }
div#global-nav-expanded h3.about { border-bottom: 2px solid #207a7a; }
div#global-nav-expanded h3.services { color: #333; }
div#global-nav-expanded h3.research { color: #333; }
div#global-nav-expanded h3.training { color: #333; }
div#global-nav-expanded h3.industry { color: #333; }
div#global-nav-expanded h3.about { color: #333; }
div#global-nav-expanded h3.services a { color: #333; }
div#global-nav-expanded h3.research a { color: #333; }
div#global-nav-expanded h3.training a { color: #333; }
div#global-nav-expanded h3.industry a { color: #333; }
div#global-nav-expanded h3.about a { color: #333; }
div#global-nav-expanded .grid_4 h3 { padding: 0; }
div#global-nav-expanded .grid_4 h3 a {
display: block;
padding: 0.5em 0.3em 0 0.3em;
}
div#global-nav-expanded .grid_4 h3 a:hover,
div#global-nav-expanded .grid_4 h3 a:focus,
div#global-nav-expanded .grid_4 h3 a:active { background-color: #ddd; }
div#headerdiv h4 {
font-size: 161.6%;
color: #000;
}
div#headerdiv h5 {
font-size: 138.5%;
color: #000;
}
div#headerdiv h6 {
font-size: 123%;
font-variant: small-caps;
color: #000;
}
div#headerdiv p,
div#headerdiv ul,
div#headerdiv ol {
/* font-size: 108%; */
font-size: 100%; /* 13px equivalent */
margin:0 0 20px 0; /* margins will collapse into one another */
}
div#headerdiv nav ul { font-size: 108%; } /* 14px equivalent */
div#headerdiv div.nav ul { font-size: 108%; } /* 14px equivalent */
div#headerdiv ul ul,
div#headerdiv ul ul ul,
div#headerdiv ol ol,
div#headerdiv ol ol ol { margin-bottom: 0; }
div#headerdiv p.meta {
font-size: 85%;
color: #444;
}
div#headerdiv blockquote {
/* font-size: 123.1%; */
font-size: 108%;
margin: 20px 9px;
padding: 10px 9px;
border-left: 3px solid #eee;
}
div#headerdiv form table th,
div#headerdiv form table td,
div#headerdiv td p,
div#headerdiv th p,
div#headerdiv ul ul,
div#headerdiv ol ol,
div#headerdiv ol ul,
div#headerdiv ul ol,
div#headerdiv ul ul ul,
div#headerdiv ol ol ol { font-size: 1em; }
div#headerdiv ul { list-style-type: circle; }
div#headerdiv code,
div#headerdiv pre {
font-size: 108%; /* font-family already declared in boilerplate CSS */
}
div#headerdiv p code,
div#headerdiv li code,
div#headerdiv h1 code,
div#headerdiv h2 code,
div#headerdiv h3 code,
div#headerdiv h4 code,
div#headerdiv h5 code,
div#headerdiv h6 code,
div#headerdiv td code,
div#headerdiv pre code { font-size: 1em; }
div#headerdiv pre {
padding: 3%;
border-width: 1px;
border-style: dotted;
overflow: auto;
}
div#headerdiv i,
div#headerdiv em { font-style: italic; }
div#headerdiv b,
div#headerdiv strong { font-weight: bold; }
div#headerdiv abbr,
div#headerdiv acronym {
border-bottom: 1px dashed #ccc;
cursor: help;
}
div#headerdiv dfn {
padding: 2px 3px;
background-color: #ddd;
cursor: help;
}
div#headerdiv img {
border: 0;
margin: 0;
}
div#headerdiv section img { margin: 7px 0; }
div#headerdiv div.section img { margin: 7px 0; }
/* Logo images */
div#headerdiv img.logo { margin-bottom: 2px; } /* This was necessary for the InterPro logo... */
div#headerdiv img.photo {
border: 1px solid #777777;
margin:0 0 20px 9px;
}
div#headerdiv p.logo-img img { margin: 0; }
/*
Float block level items left or right
*/
div#headerdiv .float-l {float:left; margin:0 9px 20px 0;}
div#headerdiv .float-r {float:right; margin:0 0 20px 9px;}
div#headerdiv img.float-l,
div#headerdiv img-float-r { margin-bottom: 0; }
/* Center images */
div#headerdiv .center { margin: 0 auto; }
div#headerdiv .alert,
div#headerdiv .warning { padding: 0.2em 0.3em; }
div#headerdiv .text-highlight {
color: #222;
background-color: #f3f3f3;
padding: 0 0.2em;
}
/* give some block level items 9px padding, to set them in from the edges of divs */
/* Required when we're applying the 984px layout CSS */
div#headerdiv h1,
div#headerdiv h2,
div#headerdiv h3,
div#headerdiv h4,
div#headerdiv h5,
div#headerdiv h6,
div#headerdiv p,
div#headerdiv form,
div#headerdiv table { padding: 0 9px; }
/* --- Links --- */
div#headerdiv a:link,
div#headerdiv a:visited {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: inherit;
}
div#headerdiv a:hover,
div#headerdiv a:focus,
div#headerdiv a:active { border-bottom-style: solid; }
div#headerdiv a.special {
font-style: italic;
border-bottom-style:double;
border-bottom-width: 3px;
padding: 0.1em 0.3em;
}
div#headerdiv footer ul li#jobs a { font-weight: bold; }
div#headerdiv h1 a:link,
div#headerdiv h1 a:visited,
div#headerdiv h2 a:link,
div#headerdiv h2 a:visited,
div#headerdiv h3 a:link,
div#headerdiv h3 a:visited,
div#headerdiv h4 a:link,
div#headerdiv h4 a:visited,
div#headerdiv h5 a:link,
div#headerdiv h5 a:visited { border-bottom: 0 none; color: inherit; }
/*
div#headerdiv h1 a:hover,
div#headerdiv h1 a:focus,
div#headerdiv h1 a:active,
div#headerdiv h2 a:hover,
div#headerdiv h2 a:focus,
div#headerdiv h2 a:active,
div#headerdiv h3 a:hover,
div#headerdiv h3 a:focus,
div#headerdiv h3 a:active,
div#headerdiv h4 a:hover,
div#headerdiv h4 a:focus,
div#headerdiv h4 a:active,
div#headerdiv h5 a:hover,
div#headerdiv h5 a:focus,
div#headerdiv h5 a:active { color: #444; }
*/
div#local-masthead p,
div#global-footer p {
margin: 20px 0;
padding: 0;
}
div#local-title h1,
div#local-title p,
div#local-title a,
div#local-title a:link,
div#local-title a:visited,
div#local-title a:active,
div#local-title a:hover {
color: #fff;
text-shadow: 1px 1px #333;
}
body.section-about div#local-masthead {
background: #60bdc4 url(../../../images/banners/EBI_ABOUT_Banner.jpg) top right no-repeat;
}
body.section-industry div#local-masthead {
background: #83a3c9 url(../../../images/banners/EBI_INDUSTRY_Banner.jpg) top right no-repeat;
}
body.section-research div#local-masthead {
background: #a8d793 url(../../../images/banners/EBI_RESEARCH_Banner.jpg) top right no-repeat;
}
body.section-research div#local-title h1,
body.section-research div#local-title p,
body.section-research div#local-title a,
body.section-research div#local-title a:link,
body.section-research div#local-title a:visited,
body.section-research div#local-title a:active,
body.section-research div#local-title a:hover {
color: #222;
text-shadow: 1px 1px #ccc;
}
body.section-services div#local-masthead {
background: #60bdc4 url(../../../images/banners/EBI_SERVICES_Banner.jpg) top right no-repeat;
}
body.section-training div#local-masthead {
background: #f9e292 url(../../../images/banners/EBI_TRAINING_Banner.jpg) top right no-repeat;
}
body.section-training div#local-title h1,
body.section-training div#local-title p,
body.section-training div#local-title a,
body.section-training div#local-title a:link,
body.section-training div#local-title a:visited,
body.section-training div#local-title a:active,
body.section-training div#local-title a:hover {
color: #222;
text-shadow: 1px 1px #ccc;
}
body.section-home div#local-masthead {
background: #1d8086 url(../../../images/banners/EBI_HOMEPAGE_Banner.jpg) top right no-repeat;
}
ul#local-nav li.functional {
float: right;
background-color: #444;
background-color: rgba(17,17,17,0.4);
}
.oldie ul#local-nav li.functional {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#66111111',EndColorStr='#66111111') !important;
}
/* We don't want any borders on those s */
div#headerdiv div#local-title-logo a,
div#headerdiv div#local-title a { border: 0 none; }
div#headerdiv a.external { background-image: none; }
/* Custom styling for different local masthead */
div#local-title.logo-title img,
div#local-title.logo-title-strapline img { float: left; margin: 1em 0.69em 0.69em; }
div#local-title.logo-title span,
div#local-title.logo-title-strapline span { display:block; margin: 0em 0 0.69em 0; float:left; }
div#local-title.logo-title span { margin-top: 1.2em; }
div#local-title.logo-title h1,
div#local-title.logo-title-strapline h1 { display: inline; line-height: 100%; }
div#local-title.logo-title-strapline h1 { font-size: 270%; }
div#local-title.logo-title-strapline p { display: inline; font-size: 123.1%; }
/* Local search */
div#local-search form fieldset,
form#local-search fieldset {
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.8);
padding: 0.5em 0.7em 0.5em 0.3em;
}
.oldie div#local-search form fieldset,
.oldie form#local-search fieldset {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ccffffff',EndColorStr='#ccffffff');
}
/* Lay things out */
div#local-search form fieldset div.left,
form#local-search fieldset div.left { width:80%; margin-right:2%; float:left; }
div#local-search form fieldset div.right,
form#local-search fieldset div.right { width:18%; float:left; text-align:center; }
/* A touch of RWD */
@media only screen and (min-width: 1100px) {
div#local-search form,
form#local-search { float: right; }
div#local-search form fieldset,
form#local-search fieldset { max-width:440px; }
}
div#local-search form fieldset input.form-submit,
div#local-search form fieldset input.submit,
form#local-search fieldset input.submit { display: inline; margin: 0.3em 0.2em 0.1em 0.2em; }
/* Get the local search input box to behave */
div#local-search form fieldset input.form-text,
div#local-search form fieldset input#local-searchbox,
form#local-search fieldset input#local-searchbox {
font-size: 123.1%; /* fontsize = 16px */
width: 95%;
}
/* Style local search examples*/
div#local-search form fieldset span.examples,
form#local-search fieldset span.examples { margin:0 0 0 0.3em; font-size:80%; }
/* Style the link to "Advanced" search*/
div#local-search form fieldset span.adv,
form#local-search fieldset span.adv { margin:0; font-size:80%; }
/*
ebi-global.css
Style rules for common EBI website elements - global and local headers and footers
~ generic masthead rules
~ masthead menus
~ global masthead
~ global menu
~ global search
~ local masthead
~ local menu
~ local search
~ local footer
~ global footer
(includes global expanded nav)
AUTHOR: Francis Rowland
DATE: Feb 2012
*/
/*
SITE-WIDE MASTHEAD LAYOUT AND SIZE
Generic rules for global and local mastheads
===================================================
*/
div#global-masthead,
div#global-masthead nav,
div#global-masthead div.nav { height: auto; }
div#global-masthead nav,
div#global-masthead div.nav { float: right; }
div#global-masthead p { margin: 0; }
div#global-masthead img {
padding-left: 0.69em;
float: left;
background: #333;
}
/*
div#local-masthead,
div#local-masthead nav { height: 120px; }
div#local-masthead.nomenu,
div#local-masthead nav { height: 100px; }
*/ /* Try and let it take care of itself... */
div#global-footer,
div#global-footer nav { height: auto; }
div#global-footer div.nav { height: auto; }
div#local-footer,
div#local-footer nav { height: auto; }
div#local-footer div.nav { height: auto; }
/*
HORIZONTAL MASTHEAD MENUS
Generic rules
====================================
*/
div.masthead ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
div.masthead ul li { float: left; }
div.masthead ul a {
display: block;
}
div.masthead ul li a,
div.masthead ul li a {
padding: 0.2em 0.6em;
}
div.masthead ul li abbr { border-bottom: 0 none; }
/*
GLOBAL MASTHEAD
==================================
*/
div#global-masthead {
border-bottom: 1px solid #e3e3e3;
}
div#global-masthead p {
float: left;
}
div#global-masthead p {
padding-left: 0;
}
div#global-masthead p#logo a:link,
div#global-masthead p#logo a:visited { border: 0 none; }
div#local-footer p {
padding-top: 10px;
margin: 0;
}
/* Global menu styling */
div#global-masthead ul {
float: right;
font-size: 93%; /* 12px */
}
div#global-masthead ul li {
display: inline-block;
display: -moz-inline-stack;
_width: 0px;
*display: inline;
zoom: 1;
white-space: nowrap !important;
}
div#global-masthead ul li {
display: inline-block;
display: -moz-inline-stack;
_width: 0px;
*display: inline;
zoom: 1;
white-space: nowrap !important;
}
div#global-masthead ul li a {
display: block;
border-right: 1px solid #000;
border-left: 1px solid #666;
padding-top: 5px;
height: 22px;
}
div#global-masthead ul li.first a { border-left: 0 none; }
div#global-masthead ul li.last a { border-right: 0 none; }
div#global-masthead ul li a:link,
div#global-masthead ul li a:visited {
color: white;
border-bottom: 0 none;
}
div#global-masthead ul li a:hover,
div#global-masthead ul li a:active,
div#global-masthead ul li a:focus,
div#global-masthead ul li.active a {
border-top: 3px solid white;
height: 20px
}
/* custom colour for Services */
div#global-masthead ul li#services a:hover,
div#global-masthead ul li#services a:active,
div#global-masthead ul li#services a:focus,
div#global-masthead ul li.active#services a {
border-top-color: #207a7a;
}
/* custom colour for Research */
div#global-masthead ul li#research a:hover,
div#global-masthead ul li#research a:active,
div#global-masthead ul li#research a:focus,
div#global-masthead ul li#research.active a {
/* border-top-color: #e3823e; */ /* Not allowed to use orange! */
border-top-color: #63ae54;
}
/* custom colour for Training */
div#global-masthead ul li#training a:hover,
div#global-masthead ul li#training a:active,
div#global-masthead ul li#training a:focus,
div#global-masthead ul li#training.active a {
border-top-color: #fab700;
}
/* custom colour for Industry */
div#global-masthead ul li#industry a:hover,
div#global-masthead ul li#industry a:active,
div#global-masthead ul li#industry a:focus,
div#global-masthead ul li#industry.active a {
border-top-color: #346189;
}
div#global-masthead ul li#industry {
display: none !important;
}
/* custom colour for Funding */
div#global-masthead ul li#funding a:hover,
div#global-masthead ul li#funding a:active,
div#global-masthead ul li#funding a:focus,
div#global-masthead ul li#funding.active a {
border-top-color: #e5969f;
}
/* custom colour for About us */
div#global-masthead ul li#about a:hover,
div#global-masthead ul li#about a:active,
div#global-masthead ul li#about a:focus,
div#global-masthead ul li#about.active a {
border-top-color: #207a7a;
}
/* Customisation for the GLOBAL search */
div#headerdiv form#global-search {
float: right;
margin: 3px 0;
padding: 0;
height: 24px;
vertical-align: top;
}
div#headerdiv form#global-search fieldset {
padding: 0;
margin: 0 9px;
border: 0 none;
background-color: transparent;
}
div#headerdiv form#global-search label {
display: inline;
margin-right: 0;
margin-top: 0.1em;
float: left;
}
div#headerdiv form#global-search input#global-searchbox {
font-size: 100%;
margin: 0 0.3em;
width:140px;
}
div#headerdiv form#global-search input.submit {
padding: 0.25em;
width: 24px;
height: 24px;
margin: 0;
display: inline;
background: url(../../../images/global/search-button.png) no-repeat;
background-position: 0 0;
width: 24px;
height: 24px;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
border:0 none;
filter:none;
/* font-size: 93%; */
float: left;
}
div#headerdiv form#global-search input.submit:hover,
div#headerdiv form#global-search input.submit:focus,
div#headerdiv form#global-search input.submit:active {
background-position: -24px 0;
width: 24px;
height: 24px;
}
/*
LOCAL MASTHEAD
==================================
*/
div#local-masthead {
border-bottom: 3px solid #eee;
}
/* div#local-masthead h1 { margin-bottom: 11px; } */
div#skip-to,
div#local-title-logo h1 {
left: -5000px;
top: -5000px;
position: absolute;
}
div#local-masthead h1 span {
font-size: 49.2%; /* h1 font-size is 370%, and I want 182%, so 0.492 * 370... */
margin-left: 32px;
letter-spacing: normal;
color: #424242;
}
div#local-masthead div {
float:left;
zoom: 1;
}
/* Local menu styling */
div#local-masthead nav {}
div#local-masthead ul {
margin-top:-5px;
height: auto;
width: 100%;
background-color: #111111;
background-color: rgba(17, 17, 17, 0.4);
}
.oldie div#local-masthead ul {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#66111111',EndColorStr='#66111111');
}
div#local-masthead ul li {
border-color: transparent;
border-right: 1px dotted #f8f8f8;
}
div#local-masthead ul li.active { background-color: #111; }
div#local-masthead ul li.last { border-right: 0 none; }
div#local-masthead ul li a {
}
div#local-masthead ul li a:link,
div#local-masthead ul li a:visited {
border-bottom: 3px solid transparent;
color: #f6f6f6;
}
div#local-masthead ul li.active a:link,
div#local-masthead ul li.active a:visited {
padding-top: 2px;
border-bottom: 3px solid #666;
background-color: #111;
}
div#local-masthead ul li a:hover,
div#local-masthead ul li a:focus,
div#local-masthead ul li a:active {
border-bottom: 3px solid #71b360;
color: #fff;
background-color: #333;
}
/* Local search */
div#local-search form fieldset,
form#local-search fieldset {
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.8);
padding: 0.5em 2em 0.5em 0.3em; /* Increased right padding from 0.7em because the fieldset could collapse... ! */
}
.oldie div#local-search form fieldset,
.oldie form#local-search fieldset {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ccffffff',EndColorStr='#ccffffff');
}
form#local-search input.submit { display: inline; }
form#local-search input#local-searchbox { font-size: 123.1%; width: 319px; } /* fontsize = 16px */
div#content {
padding-bottom: 40px;
}
ul#secondary-nav li.active a { font-weight: bold; }
/*
FOOTER
*/
div#local-footer,
div#global-footer {
background-color: white;
background-color: rgba(255, 255, 255, 0.85);
}
.oldie div#local-footer,
.oldie div#global-footer {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d9ffffff',EndColorStr='#d9ffffff');
}
section#ebi-footer-meta,
div#ebi-footer-meta.section {
clear: both;
}
/*
LOCAL FOOTER
===============================
*/
/* body.level1 div#local-footer {display: none;} */ /* kludge! just have a different HTML template for levels 1 and 2! */
div#local-footer {
background-color: #fff;
border-top: 2px solid #eee;
}
/*
GLOBAL FOOTER
================================
*/
div#global-footer {
border-top: 5px solid #eee;
/* height: 100%; */
/* background-color: #f7f7f7; */
margin: 0;
width: 100%;
}
div#global-footer div.nav div {
float: left;
}
div#global-footer h3 {
font-size: 108%; /* 14px */
padding: 0 9px;
margin-bottom: 5px;
/* color: #316B63; */
color: #333;
border-bottom: 1px solid #CCC;
line-height: 163%;
}
div#global-footer h3 {
font-size: 123.1%;
margin-bottom: 5px;
color: #333;
}
div#global-footer p {
font-size: 100%; /* 13px */
margin: 0 9px 5px 9px;
}
div#global-footer p.address {
color: #888;
}
div#global-footer ul {
font-size: 85%; /* 11px */
padding: 0 0 0 9px;
list-style: none;
margin-left: 0;
}
div#global-footer .alpha ul {
margin-top: 0;
}
div#global-footer a { border-bottom: 0 none; }
div#global-footer ul li a,
div#ebi-footer-meta p a { padding: 2px 4px 2px 0; }
div#global-footer ul li a:hover,
div#global-footer ul li a:focus,
div#global-footer ul li a:active,
div#ebi-footer-meta p a:hover,
div#ebi-footer-meta p a:focus,
div#ebi-footer-meta p a:active {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #e4e4e4;
}
div#ebi-footer-meta { font-size: 85%; /* 11px */ }
div#copyright-notice {
padding: 10px 0;
border-top: 1px solid #ccc;
}
div#copyright-notice p {
margin: 0;
}
div#footerdiv ul li#jobs a { font-weight: bold; }
div#footerdiv a:link,
div#footerdiv a:visited {
border-bottom-width: 1px;
border-bottom-color: inherit;
}
div#footerdiv a:hover,
div#footerdiv a:focus,
div#footerdiv a:active { border-bottom-style: solid; }
div#footerdiv a.special {
font-style: italic;
border-bottom-style:double;
border-bottom-width: 3px;
padding: 0.1em 0.3em;
}
div#footerdiv ul li#jobs a { font-weight: bold; }
div#footerdiv h1 a:link,
div#footerdiv h1 a:visited,
div#footerdiv h2 a:link,
div#footerdiv h2 a:visited,
div#footerdiv h3 a:link,
div#footerdiv h3 a:visited,
div#footerdiv h4 a:link,
div#footerdiv h4 a:visited,
div#footerdiv h5 a:link,
div#footerdiv h5 a:visited { border-bottom: 0 none; color: inherit; }
div#footerdiv h1 a:hover,
div#footerdiv h1 a:focus,
div#footerdiv h1 a:active,
div#footerdiv h2 a:hover,
div#footerdiv h2 a:focus,
div#footerdiv h2 a:active,
div#footerdiv h3 a:hover,
div#footerdiv h3 a:focus,
div#footerdiv h3 a:active,
div#footerdiv h4 a:hover,
div#footerdiv h4 a:focus,
div#footerdiv h4 a:active,
div#footerdiv h5 a:hover,
div#footerdiv h5 a:focus,
div#footerdiv h5 a:active { color: #333; }
div#footerdiv a,
div#footerdiv a:link {
color: #666;
line-height: 1.538;
padding: 2px 4px 2px 0
}
div#footerdiv a:visited {
border-bottom-color: #669966;
}
div#footerdiv a:hover,
div#footerdiv a:focus,
div#footerdiv a:active {
color: #0e6a0e;
border-bottom: 0px solid #669966;
}
div#footerdiv a.special:hover,
div#footerdiv a.special:focus,
div#footerdiv a.special:active {
/* color:#669966; */
border-bottom: 0px double #669966;
}
div#footerdiv h2 {
color: #669966;
}
div#footerdiv h3 {
color: #333;
}
div#footerdiv h1 a:link,
div#footerdiv h2 a:link,
div#footerdiv h3 a:link,
div#footerdiv h4 a:link,
div#footerdiv h5 a:link,
div#footerdiv h6 a:link,
div#footerdiv h1 a:visited,
div#footerdiv h2 a:visited,
div#footerdiv h3 a:visited,
div#footerdiv h4 a:visited,
div#footerdiv h5 a:visited,
div#footerdiv h6 a:visited {
border-bottom-color: #333;
}
/* 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 */
div#headerdiv form {
/* font-size:1.4em; */
font-size: 108%;
font-family: Helvetica, sans-serif;
color: #444;
}
div#headerdiv form p,
div#headerdiv form ul,
div#headerdiv form ol {font-size:1em;}
div#local-masthead form fieldset {
/* background-color:#fff; */
/* background-color:#f7f7f7;*/
border:2px solid #eee;
padding:0.5em 0.5em 0.5em 1em;
margin-top: 1.5em;
margin-bottom: 1.5em;
color: inherit;
}
div#local-masthead form legend {
font-size: 93%;
background-color: #e5e5e5;
color:#222;
padding:0.1em 0.5em;
border:2px solid #d8d8d8;
}
div#local-masthead form legend span {
color: #000;
font-size: 138.5%; /* 18px */
font-weight: bold;
margin: 0 4px;
}
div#local-masthead form legend.hide { visibility: hidden; }
div#local-masthead form label {display:inline; margin-right:0.3em;}
/*
form label {display:block; margin-bottom:0.2em; color: #111;}
form label.inline {display:inline; margin-right:0.3em;}
*/ /* block display looks stupid with elements like radio buttons and check boxes */
div#local-masthead form input {
margin:0.2em 0.1em 0.2em 0.2em;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
vertical-align: middle;
}
div#local-masthead form input.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;
}
div#local-masthead form input.submit:hover,
div#local-masthead form input.submit:focus,
div#local-masthead form input.submit:active {
background: #71b360; /* colour C1 */
}
div#local-masthead form input.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;
}
div#local-masthead input.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 */
div#headerdiv table {
border-collapse: collapse;
width: 100%;
background-color: white;
margin: 10px 0 16px 9px;
border: 5px solid #f1f1f1;
}
div#headerdiv th,
div#headerdiv td {
padding: 8px 5px 5px 5px;
border: 1px solid #f1f1f1;
border-collapse: collapse;
vertical-align: top;
}
div#headerdiv th,
div#headerdiv td { font-size: 108%; }
div#headerdiv th {
font-weight: bold;
background-color: #62caaf;
border-bottom: 3px solid #f7f7f7;
color: black;
}
/* icon to indicate leaving ebi.ac.uk domain */
/* deprecated by WGC 30/04/13
a span.external { background: url(../../../images/global/extlink.png) right center no-repeat; padding: 0 12px 0 0; }
*/
/*
tr:hover td,
tr:focus td,
th:focus > col { background-color: #f1f1f1; }
*/
/* Lists
=================================================== */
div#headerdiv ul,
div#headerdiv ol { padding: 0 0 0 27px; } /* overrides the padding in the base boilerplate CSS */
/* Colour
===================================================*/
div#content { background-color: #ffffff; }
/*
div#contents {
width: 98%;
margin: 0 1%;
height: auto;
}
*/
/* 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; */
}
div#headerdiv h1,
div#headerdiv h2,
div#headerdiv h3,
div#headerdiv h4,
div#headerdiv h5,
div#headerdiv h6 {
color: #222222;
}
div#headerdiv h4 { color: #666666; }
/* --- Links --- */
div#headerdiv a:link {
color:#3e3e3e;
}
div#headerdiv a:visited {
color: #666;
}
div#headerdiv a:hover,
div#headerdiv a:focus,
div#headerdiv a:active {
color: #000;
}
div#headerdiv a.special { background-color: #fff; }
/*
a.special:hover,
a.special:focus,
a.special:active {color:#000;}
*/
div#headerdiv pre {
background-color:#F2F2EC;
border-color:#999;
}
div#headerdiv code {
background-color:#F2F2EC;
border-color:#999;
}
div#headerdiv 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;
}
div#headerdiv .mute { color: #666; }
/* Table headings */
div#headerdiv th {
background-color: #F2F2EC;
}
/* Tweaks
===================================================*/
.container_24 {
width: 96%;
margin-left: auto;
margin-right: auto;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
display:inline;
float: left;
position: relative;
zoom:1;
_float: clear;
margin-left: 1%;
margin-right: 1%;
}
.oldie .grid_1,
.oldie .grid_2,
.oldie .grid_3,
.oldie .grid_4,
.oldie .grid_5,
.oldie .grid_6,
.oldie .grid_7,
.oldie .grid_8,
.oldie .grid_9,
.oldie .grid_10,
.oldie .grid_11,
.oldie .grid_12,
.oldie .grid_13,
.oldie .grid_14,
.oldie .grid_15,
.oldie .grid_16,
.oldie .grid_17,
.oldie .grid_18,
.oldie .grid_19,
.oldie .grid_20,
.oldie .grid_21,
.oldie .grid_22,
.oldie .grid_23,
.oldie .grid_24 {
margin-left: 0.9%;
margin-right: 0.9%;
}
.alpha,
.oldie .alpha {
margin-left: 0;
}
.omega,
.oldie .omega {
margin-right: 0;
}
.grid_1 {
width:2.1666%;
}
.grid_1.alpha,
.grid_1.omega {
width:3.1666%;
}
.grid_2 {
width:6.3333%;
}
.grid_2.alpha,
.grid_2.omega {
width:7.3333%;
}
.grid_3 {
width:10.5%;
}
.grid_3.alpha,
.grid_3.omega {
width:11.5%;
}
.grid_4 {
width:14.6666%;
}
.grid_4.alpha,
.grid_4.omega {
width:15.6666%;
}
.grid_5 {
width:18.8333%;
}
.grid_5.alpha,
.grid_5.omega {
width:19.8333%;
}
.grid_6 {
width:23.0%;
}
.grid_6.alpha,
.grid_6.omega {
width:24.0%;
}
.grid_7 {
width:27.1666%;
}
.grid_7.alpha,
.grid_7.omega {
width:28.1666%;
}
.grid_8 {
width:31.3333%;
}
.grid_8.alpha,
.grid_8.omega {
width:32.3333%;
}
.grid_9 {
width:35.5%;
}
.grid_9.alpha,
.grid_9.omega {
width:36.5%;
}
.grid_10 {
width:39.6666%;
}
.grid_10.alpha,
.grid_10.omega {
width:40.6666%;
}
.grid_11 {
width:43.8333%;
}
.grid_11.alpha,
.grid_11.omega {
width:44.8333%;
}
.grid_12 {
width:48.0%;
}
.grid_12.alpha,
.grid_12.omega {
width:49.0%;
}
.grid_13 {
width:52.1666%;
}
.grid_13.alpha,
.grid_13.omega {
width:53.1666%;
}
.grid_14 {
width:56.3333%;
}
.grid_14.alpha,
.grid_14.omega {
width:57.3333%;
}
.grid_15 {
width:60.5%;
}
.grid_15.alpha,
.grid_15.omega {
width:61.5%;
}
.grid_16 {
width:64.6666%;
}
.grid_16.alpha,
.grid_16.omega {
width:65.6666%;
}
.grid_17 {
width:68.8333%;
}
.grid_17.alpha,
.grid_17.omega {
width:69.8333%;
}
.grid_18 {
width:73.0%;
}
.grid_18.alpha,
.grid_18.omega {
width:74.0%;
}
.grid_19 {
width:77.1666%;
}
.grid_19.alpha,
.grid_19.omega {
width:78.1666%;
}
.grid_20 {
width:81.3333%;
}
.grid_20.alpha,
.grid_20.omega {
width:82.3333%;
}
.grid_21 {
width:85.5%;
}
.grid_21.alpha,
.grid_21.omega {
width:86.5%;
}
.grid_22 {
width:89.6666%;
}
.grid_22.alpha,
.grid_22.omega {
width:90.6666%;
}
.grid_23 {
width:93.8333%;
}
.grid_23.alpha,
.grid_23.omega {
width:94.8333%;
}
.grid_24,
.oldie .grid_24 {
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* prevent double external links (drupal problem) */
span.ext { display: none; }