/* 
RESET
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* END RESET */


/*
COLOURS

ECECEC off-white
EEEEEE light grey
D9D9D9 mid grey

A8A8A8 menu selected

3E3E3E body grey
11119F dark blue
009B32 green

8F8F8F footer grey
707070 footer links
*/



/* ________________________________________ */

/* =CONTAINERS */

body {
  text-align:left;
  font-family : Arial, Helvetica, Verdana, sans-serif;
  font-size : 62.5%; 
  line-height: 1.3;
  letter-spacing: 0em;
  word-spacing: -0.01em;
  background: #fff url("/inc/img/bgnd/body.jpg") left top repeat-x;
  color: #3E3E3E;
  border-bottom: 150px #eee solid;
}
#skiplinks {
  position:absolute;
  left:0px;
  top:-500px;
  width:1px;
  height:1px;
  overflow:hidden;
}
#wrapper {
  position: relative;
  margin: 0px auto 0px auto;
  padding: 0 20px; /* see IE.css */
  width: 860px; 
}
#header {
  position: relative;
  padding-top: 280px; 
  height: 27px;
  margin: 0 -25px;
  background: url("/inc/img/bgnd/header.jpg") center top no-repeat;
}
#branding { 
  position: absolute;  
  top: 32px; 
  left: 29px;
  border: 0;
}
#branding img { 
  border: 0;
  margin: 0;
  float: none;
}
#menu { 
  position: absolute;  
  top: 113px; 
  left: 26px;
  padding: 0;
  height: 39px;
  width: 860px;
}
#inner {
  float: left;
  width: 640px;
  min-height: 400px; /* see IE.css */
  height:auto;
  padding: 0 0 40px 0;
}

#primary {
  float: right;
  width: 420px;

}
#secondary {
  float: left;
  width: 200px;
}
#tertiary {
  float: right;
  width: 200px;
}
#footer {
  clear: both;
  text-align: center;
  font-size: 1.1em;
  width: 900px; 
  padding: 10px 0 0 0;
  margin: 0 -20px -50px -20px;
  color: #8F8F8F; 
  background: #ECECEC;
}

/* ________________________________________ */

/* =TYPOGRAPHY */

img {
  border: 0px #ddd solid;
  float: left;
  margin: .3em .6em .6em 0;
}

p {
  clear: none;
  font-size: 1.2em;
  line-height: 1.4;
  margin: 0 0 1.2em 0;
  padding: 0;
}

blockquote p {
  padding: .6em ;
  border-top: 1px #ddd solid;
  border-bottom: 1px #ddd solid;
  font-size: 1.4em;
  background: #11119F;

}
cite {
  display: block;
  font-style: normal;
  margin: 0 0 3em 0;
  padding: 0;
  color: #999;
}
acronym,
abbr {
  cursor: help;
  border: 0;
} 
#primary acronym,
#primary abbr {
  border-bottom: 1px #777 dotted;
} 
#primary abbr.date {
  border: 0;
} 

/* -------- */
/* =LINKS */
a,
a:link 
a:active,
a:visited {
  font-weight: bold;
  text-decoration: none;
   border-bottom: 1px dotted #ccc;
  color: #009b32;
}

a:hover {
  border-bottom: 1px dotted #ccc;
  color: #009b32; 
  text-decoration: none;  
}
a.image,
a:hover.image { 
  border: 0; 
}

#wrapper h4 a {/* cascade strangeness requires wrapper definition */
  color: #3E3E3E;
}
#wrapper h4 a:hover {
  border-bottom: 1px dotted #ccc;
  color: #42515A; 
  text-decoration: none;  
}

#footer a {
  color: #707070;
}
#footer a:hover {
  color: #333;
}

/* ---------- */
/* =HEADINGS */

h1, h2, h3, h4 {
  font-weight: normal;
  padding: 0;
  margin: 1.2em 0 .3em 0;
  clear: both;
}
h1 {
  font-size: 2.2em;
  line-height: 1;
  margin: 0 0 .6em 0;
  font-weight: bold;
}
h2 {
  font-size: 1.8em;
  margin-top: .8em;
}
h2.sIFR-replaced {
  margin: 1.2em 0 0em 0;
}
h3 {
  font-size: 1.2em;
  font-weight: bold;
}
h4 {
  font-size: 1.3em;
  font-weight: bold;
  border-top: 1px #C5C5C5 solid;
  padding: .5em 0 .7em 0;
  background: url("/inc/img/bgnd/dot.gif") left bottom repeat-x;
}
h5 {
  font-size: 1.2em;
  text-transform: uppercase;
}
h6 {
  font-size: 1.2em;
  margin: 0;
}
/* -------- */
/* =LISTS */

ul, ol, dl {
  font-size: 1.2em;
  margin: 0 0 1.2em 0;
  padding: 0;
}
ol {
  margin-left: 20px;
  padding-left: 20px;
  list-style: upper-alpha;
}
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
#inner ul {
  border-bottom: 1px #eee solid;
}
#inner ul li {
  border-top: 1px #eee solid;
  background:url("/inc/img/bgnd/arrow-right.gif") no-repeat left .9em;  
  padding: .6em 0 0 15px;
  margin: 0 0 .7em 0;
}
#inner ul {
  border-bottom: 1px #eee solid;
}
#inner #primary ul li {
  border-top: 0px;
  background:url("/inc/img/bgnd/arrow-right.gif") no-repeat left center;  
  padding: 0 0 0 15px;
}
#inner #primary ul {
  border-bottom: 0px;
}
ul li.first {
  border: 0;
}
#inner ul li p {
  font-size: 1em;
  margin: 0;
}
#inner ul li ul,
#inner ul li ol {
  font-size: 1em;
  margin: 0.6em 0;
}
#inner ul li li {
  margin: 0.6em 0;
  border: none;
  background: none;
}
#inner ul li ol li {
  background: none;
  padding-left: 0;
}

dl dt{
  clear: both;
  float: left;
  width: 160px;
  margin: 0;
  padding: 1px 0 0 0;
  font-weight: bold;
}
dl dd{
  float: left;
  width: 260px;
  margin: 0 0 1.2em 0;
  padding: 1px 0 0 0;
}


/* -------- */
/* =TABLES */

table {
  margin: 1.2em 0 2.4em 0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-color: #11119F;
  width: 419px; /* see IE5.css */
  border-collapse:collapse; /* can't apply cellpadding & cellspacing in textiled tables */
}
th, td {
  margin: 0;
  padding: 4px 10px;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: #11119F;
  background: #11119F;
  font-size: 1.1em;
  text-align: left;
}
th {
  background: #A8A8A8;
  color: #11119F;
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: normal; 
  text-align: left;
}

/* ________________________________________ */

/* =HEADER  */

#header h1 { 
  padding-left: 23px;
}

#header #contact { 
  position: absolute;  
  top: 267px; 
  left: 559px;
  height: 28px;
  width: 320px; 
  background: url("/inc/img/bgnd/subscribe_teaser.png") center top no-repeat;
  font-size: 1.2em;
  line-height: 2;
  text-align: right;
}
#header #contact span { 
  float: left;
}
#header #contact a { 
  display: block;
  border: 0;
  padding: 0 30px 0 20px;
  color: #3E3E3E;
  background-image: url("/inc/img/bgnd/button.png");
  background-repeat: no-repeat;
  background-position: 260px 2px;
}
#header #contact a:hover { 
  color: #3E3E3E;
  border: 0;
}
#header #contact a:hover span  { 
  color: #3E3E3E;
}

/* ________________________________________ */

/* =FOOTER */

#footer ul {
  font-size: 1.1em;
}
#footer ul li {
  display: inline;
  padding: 0 .6em;
  border-right: 1px #ccc solid;
}
#footer ul li.last {
  padding-right: 0;
  border: 0;
}
#footer ul li a {
  font-weight: normal;
}

/* ________________________________________ */

/* =MENU */

#menu li { 
  float: left; 
  font-size: 1.1em;
  margin: 0px 2px 0 0;
  height: 36px;
}
#menu li.last { 
  margin: 0;
} 
#menu li a {
  float: left; 
  height: 36px; /* for Safari */
  border: 0;
  color: #3E3E3E;
  font-weight: bold;
  padding: 0 8px 0 0;
  background-image: url("/inc/img/bgnd/menu-button-right.png");
  background-position: right 0;
  background-repeat: no-repeat ;
}
#menu li a span {
  float: left; 
  padding: 9px 14px 9px 20px;
  height: 20px; /* for Safari (see IE5.css) */
  background-image: url("/inc/img/bgnd/menu-button-left.png");
  background-position: left 0;
  background-repeat: no-repeat;
}
#menu li a:hover {
  color: #009B32;
  border: 0;
}
#menu li.selected a {
  color: #009B32;
  border: 0;
}


/* ________________________________________ */

/* =GLOBAL CLASSES */

/* apply to any element that appears at top of page 
to neutralise top padding/margin */

.first{
  clear: both;
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
#secondary h4.first{
  clear: both;
  border-top: 1px #ccc solid;
  margin-top: .3em;
  padding-top: .5em;
}  
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
  inner: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.clearfix {display: inline-table;}

.related {
  clear: both;
  border-top: 1px #ccc solid;
  padding: .6em 0 0 0;
}
p.related {
  background:url("/inc/img/bgnd/arrow-right.gif") no-repeat left center;  
  padding-left: 15px;
}
.strap {
  font-weight: bold;
}
.caption {
  color: #999;
}


#primary .meta  {
  clear: both;
  font-size: 1.1em;
  padding: 0.5em 0 .7em 0 ; 
  margin: .5em 0 0 0;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #ddd;
  color: #999;
}


/* ________________________________________ */

/* =ARTICLES */

.article #primary  img {
  margin-bottom: 1.2em;
}


/* local navigation */
.nav {
  margin: 1.2em 0 2.4em 0;
  padding: 0;
  list-style: none;
}
#secondary .nav li {
  margin-bottom: 0.6em;
}
#secondary .nav li.first {
  border: 0;
}
.nav li a {
  font-weight: bold;
  border: 0;
}
.nav li.selected a {
  color: #3E3E3E;
}


/* ________________________________________ */

/* =LOCALISED */

/* 50:50 2 col layout  */
.split #inner {
  width: 860px;
}
.split #primary {
  float: left;
  width: 420px;
}
.split #secondary {
  float: right;
  width: 420px;
}



/* -------- */
/* =HOME */

.default #inner {
  width: 860px;
}
.default #inner .standfirst {
  float: left;
  margin: 0 20px 0 0;
  padding:  1.6em 0 0;
  width: 200px; /* see IE5.css */
}
#inner .quarter {
  float: left;
  margin: 0 20px 0 0;
  width: 200px; /* see IE5.css */
  height: 200px;
  overflow: hidden;
  position: relative;
}
#inner .third {
  float: left;
  margin: 0;
  width: 200px;
}
p.continued {
  position: absolute;
  top: 180px;
  left: 0;
  width: 200px;
  font-size: 1em;
  text-transform: uppercase;
}
.continued a {
  display: block;
  padding: 3px 8px 5px 8px;
  height: 46px /* see IE.css */
  color: #1b1ba4;
  background: #E8E8E8 url("/inc/img/bgnd/continued.png") no-repeat right 0 ;  
  border: 0;
}


/* -------- */
/* =ABOUT */


.about #wrapper .section {
  width: 860px;
}
.about .section #primary {
  width: 640px;
}
.about #tertiary {
  padding: 3.4em 0 0;
}
#wellcome {
  padding-top: 1.2em;
  border-top: 1px #ccc solid;
  border-bottom: 1px #ccc solid;
  margin: 1.8em 0 1.2em 0;

}
#wellcome img {
  float: right;
}
#imperial {
  clear: none;
  float: right;
  width: 340px;
  margin-top: 1.2em;
}
#imperial h2 {
  margin-top: 0;
}
.scientific-advisory-team #primary {
  padding-top: 2em;
}

/* -------- */
/* =CMV~IMPACT Clinical Study 
   =Clinical Applications*/

.clinical-applications #inner,
.cmv-impact-trial #inner {
  width: 530px;
}
.clinical-applications #primary,
.clinical-applications #tertiary,
.cmv-impact-trial #primary,
.cmv-impact-trial #tertiary {
  width: 310px;
}

/* -------- */
/* =SCIENCE */

.science #primary .figure {
  float: right;
  padding-left: 20px;
  width: 200px; /* see IE5.css */
}
.science #primary li {
  border: 0;
  padding-top: 0;
  background-position: 0 .2em;
  clear: none;
}

/* -------- */
/* =CONTACT */

.contact #inner dt {
  width: 100px;
  margin: 0;
}
.contact #inner dd {
  width: 320px;
  margin: 0 0 0.6em 0;
}

.contact #vacancies {
  float: right;
  margin: 2em 0 0 0;
  width:420px;
}