/* ---main stylesheet for
Wellcome Trust Collection
----*/

/*
styles reset ---------------------------------- */
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,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

ol, ul {list-style: none;}
/*
tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
strong {font-weight: bold}

/*
self clearing rules */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix{ display: inline-block; }
.clearfix { display: block; }

/*
basic styles ---------------------------------- */
html.scroll{min-height: 100.01%; overflow: scroll }
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:62.5%;
    height:100%;
    width:100%;
    margin: 0 auto;
    color: #333;
}
a {color: #333;}
.contentCol a{color:#8e0885; text-decoration: none; }
.contentCol h2 a,
.contentCol h3 a,
.contentCol h4 a{padding: 0; background: none; font-weight: bold}
.contentCol a:hover {text-decoration: underline}
p {margin-bottom:1em;}




/*
main layout ---------------------------------- */
#wrapperOuter {
    font-size: 1.3em;
    text-align: center;
}
#wrapperInner {
    width: 960px;
    margin: 0 auto;
    padding: 18px 10px;
    text-align: left;
    overflow:hidden;
}

#header{
    position: relative;
    height: 6.35em;
    margin-bottom:-1px;
}

.mainNav {
    position: relative;
    border-bottom: 1px solid #000;
    text-transform: uppercase;
    width: 960px;
    margin: -46px 0 0px 0;
}
.subNav {
    float: left;
    width: 288px;
    margin: 22px 21px 20px 0;
    background: #bbba12;
    min-height:35.8em;
    display:inline;
}

.contentCol {
    float: left;
    padding: 0 0 20px 0;
    width: 650px;
    margin: -6px 0 0 -7px;
    display: inline;
	overflow:hidden;
}
.subpage .contentCol {padding-bottom: 20px}

.relatedCol {
    padding: 0 0 0 0;
}

body.explore .centreCol {width: 645px; float: right; }

/*
interface ---------------------------------- */
.hide {display: none}
.remove {height: 1px; width: 1px; margin: -1px 0 0 -1px; overflow: hidden; text-indent: -5000px; display: block}
.emphasisedLink a{padding-left: 15px; background: url(../../../../images/interface/arrow.gif) left 0.2em no-repeat; }
/*
header ---------------------------------- */
#header .logo {
    border: none;
    display:block;
    height:57px;
    overflow:hidden;
    position:static;
    width:336px;
}
#header .logo a {display: block; padding: 1px;}
#header .topLinks{
    position: absolute;
    right: 0;
    top: 0;
    width:44em;
    text-align: right;
    font-size: 0.9em;
    max-width:620px;
}
#header .topLinks p {float: left; margin-top:5px;}
#header .topLinks a {
    padding:0 0.2em;
    text-decoration: none;
}
#header .topLinks a:hover {text-decoration: underline;}
#header fieldset.searchForm {
    float: right;
    width: 12em;
    text-align: right;
    margin-top: .2em;
}
/*
search form ---------------------------------- */


fieldset.exploreForm {clear:both;}

fieldset.searchForm input,
fieldset.exploreForm input{
    border: 1px solid #000;
    color: #999;
    width: 8em;
    padding: 2px 5px 2px 5px;
    font-size: 1em;
    line-height:1em;
    vertical-align:middle;
}
fieldset.searchForm input.button,
fieldset.exploreForm input.button{
    width:2.5em;
    cursor:pointer;
    border: 1px solid #ccc;
    background: #fff;
    color: #000;
    font-weight: bold;
    padding: 1px 1px 1px 1px;
    line-height:1.1em;
}
fieldset.searchForm input.button:hover,
fieldset.searchForm input.buttonHover,
fieldset.exploreForm input.buttonHover{
    background: #ccc;
}

/*
footer ---------------------------------- */
#footer {
    width:960px;
    border-top: 1px solid #000;
    padding: 8px 0 12px 0;
    margin-top:2.5em;
    font-size: 0.9em;
    position:relative;
    clear: both
}
#footer a { padding: 0 0.5em; text-decoration: none; font-weight: bold;}
#footer .lhs { float: left; clear: left; margin: 0 0 0.7em -0.5em; width: 45em}
#footer .addlinks a{font-weight: normal}
#footer a:hover { text-decoration: underline}
#footer a.last {padding-right: 0}
#footer .rhs { float: right; text-align: right; }
#footer .rhs address {font-style: normal; font-weight: normal; text-transform: none; margin: 0 0 0.7em 0}
.features h2 {
    text-transform: uppercase;
    font-size: 45px;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    line-height: 1.2em;
    vertical-align: middle;
    color:#999999;
}

/*
main nav ---------------------------------- */
.mainNav ol {
    font-size: 1.6em;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    float: right;
    margin: 0 -10px 0 0;
    padding: 0
}
.mainNav ol li {
    float: left;
    padding: 0;
    position: relative;
    bottom: -1px;
}
.mainNav ol li.on {
    background: url(/images/interface/up-pointer_white.gif) 50% bottom no-repeat;
    position: relative;
    bottom: -1px;
}

.mainNav ol li a{
    text-decoration: none;
    color: #999;
    padding:0 10px 14px 10px;
    display: block;
    float: left;
}
.mainNav ol li.on a,
.mainNav ol li a:hover {
    color: #000 !important;

}
.mainSubNav {width: 100%;margin: 1.2em 0 1em 0;}
.mainSubNav ul {float: right}
.mainSubNav li ,
.contentCol .mainSubNav li {padding: 0; list-style-type: none;float: left; text-transform: uppercase; margin: 0 0 0 10px; font-weight: bold; font-size: 1.1em; }
.mainSubNav li a {text-decoration: none;color:#999999; background: none; padding-left:0}
.mainSubNav li a:hover,
.mainSubNav li.on a{color:#000;}

/* subnav */
.subNav ul li {padding: 0; margin: 0}
.subNav ul li a {
    display: block;
    padding: 8px 5px 8px 20px;
    font-size: 1.3em;
    font-weight: bold;
    border-left: 1px solid #B0B124;
    border-top: 1px solid #fff;
}
.subNav ul li.on a {background: #fff;  border-left: 1px solid #fff; border-top: 1px solid #fff;}
.subNav ul li a:hover {color: #fff}
.subNav ul li ul {margin:0; padding: 0; border: none}
.subNav ul.themes {margin: 1em 0; border: none; }
.subNav ul.themes li a {padding: 2px 5px 3px 35px; font-size: 1.1em; border: none;background:url(../../../../images/interface/arrow.gif) transparent no-repeat 20px 0.2em;}
.subNav .exploreForm input.Search {width: 190px; margin-left: 20px }
.subNav a,
.subNav a:link{
    color: #333;
    text-decoration: none;
}
.subNav ul li.on a:hover {color: #333; }
.subNav ul li.on {background: #fff;border-left:1px solid #B0B124;border-right:1px solid #B0B124; overflow:hidden;}
/* 2nd level */
.subNav li ul {background: #fff;width:286px;}
.subNav li ul li {border-left: none; width:286px;}
.subNav ul li ul li {padding: 0.5em 0 0 0}
.subNav ul li ul li a,
.subNav ul li ul li a:hover{display: block;color: #333;font-size: 1.1em;padding: 2px 5px 10px 39px;font-weight: normal;border: none !important }
.subNav ul li.on ul li a{background:transparent url(../../../../images/interface/arrow.gif) no-repeat 26px 4px; }
.subNav li li a:hover{cursor: pointer;text-decoration: underline}
.subNav li ul li.on {border-width: 0;  }
.subNav li ul li fieldset {margin: 1em 0}
.subNav ul li ul li.on a {font-weight: bold}
/* 3rd level */
.subNav ul li ul li ul {background: #f1f1cf; padding: 0.5em 0 0.5em 11px; width: 274px; font-size: 0.9em}
.subNav ul li ul li.on ul a {font-weight: normal; background: none; padding-left: 26px; width: 220px}
.subNav ul li ul li.on ul li.on {background: transparent}
.subNav ul li ul li.on ul li.on a {font-weight: bold;}
/* 4th level */
.subNav ul li ul li ul ul{width: 260px; border-bottom: none}
.subNav ul li ul li.on ul li.on ul a {font-weight: normal}
.subNav ul li ul li.on ul li.on ul li.on a {color: #333; font-weight: bold}

/* intro section */
.subNav p.title {color: #fff; text-transform: uppercase; margin: 8px 10px 5px 20px; font-size: 2em}
.subNav p {font-size: 1.1em; margin: 8px 10px 5px 20px; line-height: 1.4em}
.subNav p.title {font-size: 2em;margin: 20px 10px 10px 20px; line-height: 0.9em; position: relative}
.subNav p a {font-weight: bold;background:transparent url(../../../../images/interface/arrow.gif) no-repeat scroll left 2px; padding-left: 15px}
.subNav p.title a {padding: 0; background: none; color: #fff}
.subNav ul {width:288px; margin-top: 1.5em;  border-bottom: 1px solid #fff; ;}
.subNav ul ul {position:static; margin: 0; padding: 0 0 1em 0}
.subNav ul ul li a{padding-top: 0}



/* related col */
.relatedCol p a {text-decoration: none; clear: both; background:transparent url(../../../../images/interface/arrow.gif) no-repeat scroll left 2px; padding-left: 15px}
.relatedCol a:hover {text-decoration: underline}
.relatedCol h3 {
    font-size: 1.1em;
    font-weight: bold;
    color:#666;
    margin: 1em 0;
}
.relatedCol h3 a {color:#902B8B;}
.relatedCol .gallery,
.relatedCol .topics{
    border-top: 1px solid #000
}
.relatedCol .media {
    margin-top: -1em
}
.relatedCol .media img {
    margin-bottom: 10px
}
.relatedCol .media a.action {
    background:#FFFFFF url(/images/interface/blue-arrow.gif) no-repeat scroll 3px 3px;
    padding-left: 20px;
    color:#6A7EC1;
}
.relatedCol .topics p {
    margin: 0.5em 0
}
.relatedCol .topics a {
    color: #6a7ec1;
}
.relatedCol .gallery img {
    float: right;
    margin: 10px 0 0 20px
}
/* interface elements */
#wrapperInner .previous,
#wrapperInner .next{
    width: 26px;
    height: 42px;
    text-indent: -5000px;
    overflow: hidden;
    position: absolute;
    left: 11px;
    top: 130px;
    background: transparent url(/images/interface/back-arrow.png) no-repeat left top;
    cursor: pointer;
    display: block
}
#wrapperInner .next {
    left: 925px;
    background: transparent url(/images/interface/forward-arrow.png) no-repeat left top;
}

#wrapperInner .next:hover,
#wrapperInner .previous:hover {
    background-position: 0 -42px
}
/* content */

h1 {
    font-size: 1.4em;
    font-weight: bold;
    margin: -2px 0 0.3em 0;
    color: #000;
    line-height: 1.4em;
}
h2 {
    font-size: 1.25em;
    font-weight: bold;
    color: #000;
    margin: 0.3em 0;
}

h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 0.5em 0;
}
h4 {
    font-size: 0.9em;
    font-weight: bold;
     margin: 0.5em 0;
}
h5 {
    font-size: 0.9em;
    font-style: italic;
    font-weight: bold;
     margin: 0.5em 0;
}
h6 {
    font-size: 0.9em;
    font-style: italic;
     margin: 0.5em 0;
}
.contentCol p {
    margin-bottom: 1em;
    line-height: 1.4em;
}
.contentCol ul {margin: 0.5em 0}
.contentCol ul li{padding: 0; margin:0.2em 0 0.2em 1em; list-style-type: disc}
.contentCol ul.noBullet li {list-style-type: none}


.contentCol .contentFeature {
    margin-bottom: 0.5em;

}

.centreCol {
    margin:6px 0 0 0;
    position: relative;
    left: 0;
    float: right;
    display: inline;
}
.oneCol {width: auto}

.titleSection {margin-top: 22px; width:650px; clear: both}
.listing .titleSection h1 {float: left}
.titleSection h2 {clear: left}
.titleSection h1 em {font-weight: normal; clear: both}
.titleSection a {font-weight: bold}


/*
calendar ---------------------------------- */
.calendar .contentCol { width: 960px;}
table.calendar { margin: 0;border-bottom: 2px solid #000;zoom:1;}
table.calendar th {
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    border-bottom: 2px solid #000;
    border-width: 0 0 2px 0;
	
}
table.calendar th p {font-weight: normal; margin: 5px 0 0 0; line-height: 1.1em}
table.calendar td {
    text-align: left;
    border: 1px solid #333333;
    font-size: 0.9em;
    position: relative;
    color: #333;
    width: 130px;
	
}
table.calendar tbody th {text-indent: -1000px; overflow: hidden; border-left: 2px solid #000;width: 80px; height: 90px }

/* categorised sections */
table.calendar tr.events td {background: #e4e49e; border: 1px solid #bcbb0b; border-width: 1px 1px 0 0; }
table.calendar tr.events th {background: #bdbb0e url(/images/interface/calendar_events_header.gif) top left no-repeat; border-top: 1px solid #BCBB0B}

table.calendar tr.tours td {background: #cbd5ee; border: 1px solid #7b94d4; border-width: 1px 1px 0 0}
table.calendar tr.tours th {background: #7b94d4  url(/images/interface/calendar_tours_header.gif) top left no-repeat}
table.calendar tr.exhibitions,table.calendar tr.collections {height: 90px}
table.calendar tr.exhibitions td {background: #e1b3e1; border: 1px solid #6b026b; border-width: 1px 1px 0 0}
table.calendar tr.exhibitions th {background: #9d009a  url(/images/interface/calendar_exhibitions_header.gif) top left no-repeat;}
table.calendar tr.collections td {background: #e2e2e2; border: 1px solid #949494; border-width: 1px 1px 0 0}
table.calendar tr.collections th {background: #959595  url(/images/interface/calendar_collections_header.gif) top left no-repeat; border-bottom: none}

table.calendar tr td.on {background: #fff; vertical-align: top; height:90px;}
table.calendar tr td.on a {background:transparent url(/images/interface/arrow.gif) no-repeat scroll left 0.2em;padding-left:15px;}
table.calendar tr td.on h3 a {background:none; padding-left:0;}
table.calendar tr td.on div {padding: 6px 0}
table.calendar td.last {border-right: 2px solid #000 !important;}
table.calendar td img {display:block;}
table.calendar td p{margin: 0.2em 10px;}


table.calendar td.on h3 {padding-left: 10px}
table.calendar td.on h3 a {background-image: none padding-left: 0}
table.calendar td.on div.summary {float: left;width: 240px; padding:10px 0 0 20px; margin: 0  }
table.calendar td.on div.summary h3 {padding-left: 0}
table.calendar td.on div.summary p{margin:0.2em 10px 0.2em 0;}
table.calendar td div.des {float: left; width: 320px; margin-top: 3px}
table.calendar td div.des h4 {font-weight: bold}
table.calendar td div.des p {margin: 0; color: #808080}

.calendar .open {
    position: absolute;
    background: #bebebe;
    margin: 0;
}
.calendar .open li {
    background: #fff;
    border: 1px solid #000;
    min-height: 15em;
    list-style-type: none;
    width: 400px;
    margin: -5px 5px 5px -5px;
    padding-bottom: 40px
}
.calendar .open li p {width: 230px; font-size: .9em; float: right}
.calendar .open li p.topic {font-weight: bold; color: #8E0885;padding: 10px 0 0 0}
.calendar .open li p.topic a{background: none; padding: 0}
.calendar .open li p span {padding-left: 10px}
.calendar .open h3 {
    cursor: pointer;
    color: #fff;
    background: #999999 url(/images/interface/feature_pointer_opaque.gif) bottom left no-repeat;
    font-size: 1.3em;
    padding: 8px 8px 14px 30px;
}
.calendar .exhibitions h3 {margin-top:0;}
.calendar .open h3 span {padding-left: 18px;background: url(/images/interface/minus.gif) left 4px no-repeat}
.calendar .open img {float: left; margin: 12px}
.calendar .open .close {padding-left: 15px;color:#8E0885; background: url(/images/interface/cross.gif) left 3px no-repeat; display:block; cursor: pointer; position: absolute; bottom: 20px; right: 20px}

table.calendar td.on {
    background: #fff;
    border: 1px solid #fff;
    border-top: 1px solid #333;
    border-right: 1px solid #333
}
table.calendar th.headerMain {
    margin: 0;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    padding: 6px 0;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height:4.5em;
}
table.calendar th.headerMain h2 {
    font-size: 1.7em;
    font-family:Arial;
    line-height: 1.3em;
    
    margin:0 0 0.2em 0;
	
}
table.calendar th.headerMain a,
table.calendar th.headerMain a:hover{
    text-decoration: none;
    padding: 0;
    background: none;
}
#wrapperInner table.calendar th.headerMain h2 a {top: 5px;}
#wrapperInner table.calendar th.headerMain h2 .previous {left: 0;}
#wrapperInner table.calendar th.headerMain h2 .next {left: auto; right: 11px;}


.calendar .contentCol h2 {font-size: 1.4em; margin: 1.5em 0 1em 0}

/* week at a glance */
.calendar p.overview {margin: 2em 0 1em -7px}
.calendar p.overview a{ margin-left: 7px; font-weight: bold; padding-left: 15px; background: url(../../../../images/interface/arrow.gif) left 0.2em no-repeat;   }
.calendar p.overview .last a{border: none}
.calendar .category {clear: both}
.calendar .category h3 {
    background:#999 url(/images/interface/feature_pointer.gif) no-repeat left bottom;
    color:#FFFFFF;
    padding:8px 8px 14px 30px;
    font-size: 1.2em;
    cursor: pointer;
    width: 920px;
    position: relative;
    z-index: 10;
    margin: 0
}

.calendar .category h3.open {position: static; margin-bottom: 0; background-image: url(/images/interface/feature_pointer_opaque.gif)}
.calendar .collectionCategory h3 {background-image: url(/images/interface/feature_pointer_opaque.gif); z-index: 7}
.calendar .exhibitionCategory h3 { z-index: 8}
.calendar .tourCategory h3 { z-index: 9}
.calendar .category h3 span {padding-left: 18px;background: url(/images/interface/plus.gif) left 4px no-repeat}
.calendar .category h3.open span {background-image:url(/images/interface/minus.gif) }
.calendar .category ul li {float: left; width: 455px; margin:0 15px 10px 0; list-style-type: none}
.calendar .category ul li h4 {font-weight: bold; color: #8e0885; font-size: 1em; margin: -0.3em 0 0.2em 0}
.calendar .category ul li p.date {font-weight: bold; margin-bottom: 0 }
.calendar .category ul li  a.img {float: left; margin-right: 15px; position:static;}
.calendar .category ul li img {display:block;}
.calendar .img {position: relative; width: 77px; display: block; text-decoration: none; background: none; padding: 0}
table.calendar tr td.on a.img {background:transparent none;padding-left:0;width:auto;float:left;display:block;}
.calendar .category ul li div {float: left; width: 340px}
.calendar div.container {padding:10px 0;float: none;}
/*
homepage ---------------------------------- */

/* headers */
#wrapperInner .features h2 a,
#wrapperInner .features h2.selected a{
    text-decoration: none;
    display: block;
    border-top: 1px solid #999;
    color: #999;
    padding:10px 26px 0 26px;
    width: 906px;
    height:54px;

}
#wrapperInner .features h2.eventson,
#wrapperInner .features h2.explore,
#wrapperInner .features h2.visit{
    text-indent: -5000px;
    overflow: hidden;
    cursor: pointer;
    margin: 0 0 4px 0
}

#wrapperInner .features h2.explore a {background: url(../../../../images/interface/heading_explore.gif) 54px 8px no-repeat;}
#wrapperInner .features h2.visit a {background: url(../../../../images/interface/heading_visitus.gif) 54px 8px no-repeat;}
#wrapperInner .features h2.eventson a:hover,
#wrapperInner .features h2.explore a:hover,
#wrapperInner .features h2.visit a:hover,
#wrapperInner .features h2.selected a{
    border-color: #333;
    background-position: 54px -60px;
}

#wrapperInner .features h2.eventson a{background: url(../../../../images/interface/heading_whatson.gif) 54px 8px no-repeat; border: none}
#wrapperInner .features h2.selected a{
    background-position: 54px -60px;
}

/* content */
.featureContent {
    height:316px;
    position: relative;
    overflow: hidden;
	padding: 0 56px 14px 60px;
}
.mainFeature {height: 280px}
.featureImage {position: relative; float: left; margin-right: 20px; display: inline}
.features .description {
    position: absolute;
    top: 0;
    left: 10px;
    width: 300px;
    padding: 10px;
    text-transform: uppercase
}
.homepage .featureContent .readMore {width: 375px; display: block; float: left;position: absolute; bottom: 0; left: 0; padding: 10px 20px; background: url(/images/interface/white_trans.png) top left repeat; margin: 0 !important; line-height: 1.3em !important}
.homepage .double .readMore {width: 800px}
.featureContent .readMore a,
.homepage .visitFeature .intro .readMore a {font-weight: bold; padding: 0 10px 0 15px; color: #000; text-decoration: none; background: transparent url(../../../../images/interface/arrow.gif) no-repeat scroll left 0.2em}
.homepage .visitFeature .intro .readMore a {display: inline; font-size: 0.9em;  }

.featureContent .readMore a:hover {text-decoration: underline}
.featureContent a.vid {background-image: url(/images/interface/play.gif)}
.featureContent a.aud {background-image: url(/images/interface/audio.gif)}
.features .description h3 {
    text-transform: uppercase;
    font-size: 1.9em;
    line-height: 1.1em;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #fff;
    margin-bottom: 0;
    position: relative;
}
.features .description h3 em {display: block; clear: both; font-style:normal }
.features .description p {
    margin: 0.5em 0;
    padding: 0;
    color: #000;
    text-transform: none;
    line-height: 1em;
    font-size: 1.1em;
    font-weight: bold;
}

.features .hideOverlay {
    display:none;
}

#accordion div.featureContent { display: none; }
#accordion div.selected { display: block; }

/* carousel */
#carousel, #galleryCarousel, #exploreCarousel, #spotCarousel {
	overflow:hidden;
}
#carouselInner, #galleryCarouselInner, #exploreCarouselInner, #spotCarouselInner {
	overflow:hidden;
	width:680px;
	position:relative;
	/*position: absolute;*/

}
#carouselInner ul, #galleryCarouselInner ul, #exploreCarouselInner ul, #spotCarouselInner ul {
	position: relative;
	padding: 0;
}
#carouselInner li, #galleryCarouselInner li, #exploreCarouselInner li, #spotCarouselInner li {
	float: left;
	list-style: none;
}

.homepage ul#mycarousel {position: relative;}
.homepage #carouselInner {width: 840px;}
ul#mycarousel li,
ul#mycarousel2 li{float: left; zoom:1;}
ul#mycarousel {float: left; width: 900px; height: 278px; overflow: hidden; }
ul#mycarousel2 {overflow: hidden; height:24em; width: 505px;  }

/* explore section */
.homepage .featureContent ul#mycarousel2 li {float: left; margin:0; height: 330px; width: 510px; }
.homepage .featureContent .contentArea #carousel {margin-left: 20px}
.homepage .featureContent .contentArea #carouselInner {overflow: hidden; position: absolute; }
.homepage .featureContent ul#mycarousel2 li .box {margin:0 20px 22px 0px !important;}
.homepage .featureContent .intro {float: left;background:#bbba12; width: 327px; padding: 15px 10px 20px 0; height: 21em; display: inline }
.homepage .featureContent .intro p {font-size:1.1em;margin:8px 10px 5px 20px; line-height:1.3em}
.homepage .featureContent .intro ul {margin: 16px 20px 16px 20px}
.homepage .featureContent .intro .exploreForm input {width: 240px; }
.homepage .featureContent .intro .exploreForm {margin-left: 20px; display: inline}
.homepage .featureContent .intro .exploreForm input.button {width:30px}
.homepage .featureContent .intro a{background:transparent url(../../../../images/interface/arrow.gif) no-repeat 0 .3em; color:#333;font-size:1.1em; padding:2px 5px 3px 15px; display: block; text-decoration: none; font-weight: bold}
.homepage .featureContent .intro h3 {font-size:1.9em;text-transform: uppercase; color: #fff; margin: 0 0 0 20px;}

.featureContent .box h3 {font-size: 1em; margin: 0 0 0.3em 0}
.featureContent .box a {text-decoration:none; color:#000; font-weight:bold;padding: 1px 5px 1px 0;background-image: none; font-size: 1em }
.featureContent .box a:hover, .featureContent .box a:active, .featureContent .hover a {text-decoration:underline;}
.homepage .featureContent .box div p{margin-bottom: 0.5em}
.homepage .featureContent .box div p a {background:transparent url(../../../../images/interface/arrow.gif) no-repeat 0 0.2em;padding-left: 15px; color: #8E0885 }
.featureContent div.intro a:hover{text-decoration: underline }
.featureContent .contentArea {float: left; width: 505px; display: inline}
.featureContent .contentArea #carouselInner {width: 505px;}

.cufon-canvas canvas {position:relative;}



/* visit section */
.homepage .visitFeature .intro {width: 400px; height: 240px; position: relative;}
.homepage .visitFeature .intro table {margin: 20px 0 0 20px; table-layout: fixed;}
.homepage .visitFeature .intro table td,
.homepage .visitFeature .intro table th { padding: 1px; font-size: 1.1em}
.homepage .visitFeature .intro table th {width: 110px}
.homepage .visitFeature li div {margin-right: 20px}
.homepage .visitFeature li div img {position:relative;}
.homepage .visitFeature .intro ul {margin:0 }
.homepage .visitFeature .intro ul li {float: left; margin-left: 5px}
.homepage .visitFeature .intro ul li span {background: none; padding-left: 0}

/*
explore pages ---------------------------------- */
.explore .grid {position: relative; margin: 22px 0 0 -20px; width: 680px  }
.explore .grid #slideInner {margin-left: 0}
.explore .grid #mycarousel {height: 36em; margin: 0; list-style-type: none; }
html.js .explore .grid #mycarousel {width: 4000px}
.explore .grid #mycarousel li {margin: 0; width:680px; }
.explore .grid a {padding: 0; background: none; display:block; font-weight: bold}
.explore .grid .more {position: absolute; left: 42px; bottom: 35px; font-size: 1.7em }

.explore #wrapperInner .grid .previous {top: 50px; left: 0px}
.explore #wrapperInner .grid .next {top: 50px; left: 105px}
.explore #wrapperInner p.more .next {text-indent: 0; left: 0; top: -30px; background: none; padding: 0; width: auto }
.explore div.box,
.featureContent div.box{
    width: 149px;
    height: 10.85em;
    float: left;
    margin: 0 0 27px 18px;
    overflow: hidden;
    position: relative;
    background: #eee
}
.featureContent div.box { margin: 0 0 22px 20px;}
.explore div.moreBox {background: #fff !important}
.explore div.box {margin-bottom: 18px}
.explore div.wide {width: 316px; background: #000; margin-right: 0}

.explore .box div div,
.featureContent .box div{
    position: absolute;
    bottom: 0;
    left: 0;
    background: transparent url(../../../../images/interface/lightGrey_trans.png) left top repeat;
    width: 139px;
    padding: 5px;
}
.featureContent .box div p,
.grid .box div p{display: none}
.grid .wide div p {display: block}
.explore .box .overlay{
    height: 11em;
    position: relative;
    top: -147px;
    margin-left: 148px;
}
.explore div.wide .overlay,
.explore div.wide .overlay div {background: transparent; color: #fff; position: absolute; top: 0; left: 0}
.explore div.wide .overlay a {color: #fff; position: relative}
.box .overlay div{position: absolute; top: 0px;background: none; padding: 10px 20px 10px 20px;width:158px;}
.box div p {width:137px; margin-bottom: 0;}
.box div h2,
.box div h3{width:137px; margin: 0; font-size: 1em}
.box h2 a {color:#000;  }

.explore .grid p a {background: transparent url(../../../../images/interface/arrow.gif) no-repeat 0 0.4em;padding:1px 5px 1px 15px;}

.relatedLinks {width:100%; clear: both; float: right; margin: 5px 0 20px 0;}
/*.explore .relatedLinks{margin-right: -10px}*/
.explore .relatedLinks ul {margin-right: -10px; position: relative; left: -5px}
.relatedLinks h2,
.centreCol .commentForm h2, .centreCol .userComment h2 {
    background:#999999 url(/images/interface/feature_pointer.gif) no-repeat scroll left bottom;
    color:#FFFFFF;
    font-size:1.2em;
    padding:8px 8px 14px 30px;
    cursor: pointer;
}
.relatedLinks h2 {background-image: url(/images/interface/feature_pointer_opaque.gif); width: 615px }

.relatedLinks h2 span,
.centreCol .commentForm h2 span,
.centreCol .userComment h2 span{background:transparent url(/images/interface/plus.gif) no-repeat scroll left 4px;padding-left:18px;position: relative; z-index: 100; position: relative; top: -2px; left: 0}

.relatedLinks h2.open span,
.centreCol .commentForm h2.open span {background-image: url(/images/interface/minus.gif)}
.centreCol .userComment h2.open span {background-image: url(/images/interface/minus.gif)}

.relatedLinks img {float: left}
.relatedLinks ul {display: inline-block; float: right; margin: 0 -3px 0 0; width: 656px; }
.relatedLinks ul li {float: left; width: 215px; margin: 0 3px 0 0; list-style-type: none; position: relative }
.relatedLinks p {font-size: 0.9em; padding: 0.6em 0 0.3em 0; margin: 0; clear: both}
.relatedLinks div { padding: 0 0 0 10px; float: left; width: 150px}
.relatedLinks a,
.relatedLinks a:visited {font-weight: bold;}
.relatedLinks a.img {padding: 0; text-decoration: none; background: none}
.relatedLinks h3 {float: left; width: 36px; background: #bbba12 url(../../../../images/interface/feature_exhibition_header.gif) top left no-repeat; height: 15em; text-indent: -5000px; overflow: hidden; display: block; margin: 0}
.relatedLinks .slideshow {width: 179px; height: 120px; margin-bottom: 4px }
.relatedLinks .slideshow a {padding: 0; background: none}

/* carousel */
.relatedLinks ul ul.carousel {margin: 0 !important; left: 0; float: none; position:relative; overflow: hidden; margin-left: -20px }
.relatedLinks ul li ul.carousel li {margin: 0; width: auto; width:160px; float: left}
.relatedLinks ul li #spotCarousel {padding: 0; width: auto}
.relatedLinks ul li #spotCarousel .previous,
.relatedLinks ul li #spotCarousel .previous:hover{top: 5px; left: 5px; background: url(/images/interface/back-arrow_vsmall.gif) top left no-repeat; height: 30px}
.relatedLinks ul li #spotCarousel .next,
.relatedLinks ul li #spotCarousel .next:hover {top: 5px; left: 130px; background: url(/images/interface/forward-arrow_vsmall.gif) top left no-repeat; height: 30px}
.relatedLinks ul li #spotCarouselInner {padding: 0; width: 150px}
.relatedLinks ul li .buttons {background: transparent url(../../../../images/interface/lightGrey_trans.png) left top repeat; width: 140px; height: 30px; position: absolute; top: 114px; left: 46px}
.relatedLinks ul li ul.carousel li img {float: none}

/*
user comments ---------------------------------- */
.centreCol .userComment ul {list-style:none; padding:0 0 7px 0; margin:0.5em 0 0 0 }
.userComment ul li {list-style:none; padding:0; margin: 0 0 10px 0; border: 1px solid #ccc; position: relative}
.centreCol .userComment p {clear: both; background: #efefef; padding: 4px; border-bottom:2px solid #FFFFFF; margin: 1px}
.centreCol .userComment div {clear: both; padding: 5px;}
.userComment .badwolf {padding: 0; margin: 0; background:none; font-size:.85em; }
.userComment h3 {padding: 0 0 5px 0; font-size: .85em}
.userComment ul li p span.left { display:inline; float:left; font-style:italic; }
.userComment ul li p span.right { display:inline; float: right; position: relative}
.userComment ul li p span a.flag {display: block; width: 20px; height: 15px; text-indent: -5000px; padding: 0; background: url(../../../../images/interface/alert.gif) 0 0 no-repeat }
.userComment ul li p span a.flagAlert {display: block; width: 20px; height: 16px; text-indent: -5000px; padding: 0; background: url(../../../../images/interface/alert.gif) 0 -15px no-repeat}

/*
exhibition pages ---------------------------------- */
.exhibitionImage{border-bottom: 1px solid #333333; padding-bottom: 1.7em; margin-bottom: 2em}
.exhibitionImage ul{margin: 0 0 2.5em 0}
.exhibitionImage ul li,
.galleryContainer ul li{float: left; list-style-type: none; margin: 0 17px 0 0; }
.exhibitionImage p {font-size: 1.2em; margin: 1em  0 0 0; line-height: 1.3em}


/*
galleries---------------------------------- */
.galleryVideo,
.galleryInteractive{
    position: relative;
    margin-top: 16px}
.galleryInteractive p,
.galleryVideo p {margin-top: 10px}
.galleryInteractive h2{margin: 0;padding: 20px; color: #fff; text-align: left }
/*.galleryInteractive p {margin-top:10px; text-align: left; color: #fff; padding-left: 20px}*/
.galleryVideo a,
.galleryInteractive a{padding-right: 30px;}


/*
image gallery ---------------------------------- */
.galleryContainer {
    position: relative;
    margin-top: 16px}
.galleryContainer p,
.galleryVideo p{float: left}
.galleryImage {text-align: center; background: #000; margin-bottom: 10px}
.galleryImage img {margin: 0 auto;display:block;}
.gallery .links ul li{list-style-type: none; margin-left: 0;}
.gallery .links ul li a { background: url(/images/interface/arrow.gif) left 0.3em no-repeat; padding-left: 15px;}
.gallery .links ul li.creativeComms {margin:1em 0 1em 0; padding: 1.2em 0; border: 1px solid #eee; border-width: 1px 0; font-size: 0.8em}
.gallery .links ul li.creativeComms a {background: none; padding-left: 0}
.galleryContainer a,
.galleryVideo a  {display: inline-block; background: url(/images/interface/arrow.gif) left 0.3em no-repeat; padding-left: 15px;}

.galleryVideo a.toggle,
.galleryInteractive a.toggle,
.galleryContainer a.toggle{padding-right: 3px;  width: 11.5em;}

.galleryVideo a.close,
.galleryInteractive a.close,
.galleryContainer a.close {background-image: url(/images/interface/cross.gif);background-repeat:no-repeat;}

.galleryVideo .details, 
.galleryInteractive .details, 
.galleryContainer .details {float: right; width: 360px; text-align: right}

.gallery .caption,
.galleryVideo .caption{border-top: 1px solid #333333; clear: both; padding-top: 10px; text-align: left }
.gallery .slideshow { overflow-y: scroll; height: 85px; margin: 0 auto; position: relative}

#slideInner {margin-left: 30px}
.galleryThumbnails {
    padding: 10px 0 0 0;
    position: relative;
    clear: both;
}

.galleryThumbnails .thumb {float: left; margin: -1px 9px 0 0; width: 86px }
.galleryThumbnails .thumb a {
    display: block;
    border: 2px solid #fff;
    float: left;
    height: 79px;
    padding-left: 0; background: none}
.galleryThumbnails .thumb a:hover,
.galleryThumbnails .thumb a.on{border: 2px solid #9f9794; padding-left: 0; background: none}
.galleryThumbnails .thumb a img {margin: 1px; padding: 0; border:none}
.galleryThumbnails #galleryCarousel, .galleryThumbnails #carousel  {height: 83px}
.galleryThumbnails #galleryCarouselInner, .galleryThumbnails #carouselInner {width: 600px; margin-left: 25px}

#wrapperInner  .galleryThumbnails .next {top: 35px; left: 633px; background-image: url(/images/interface/forward-arrow_small.gif); height: 30px}
#wrapperInner  .galleryThumbnails .previous{top: 35px; left: 0; background-image: url(/images/interface/back-arrow_small.gif); height: 30px}
#wrapperInner  .galleryThumbnails .previous:hover,
#wrapperInner  .galleryThumbnails .next:hover {background-position: 0 -29px}

#wrapperInner .galleryContainer .previous {background-image: url(/images/interface/back-arrow.png); background-position:0 -42px; height: 42px; top: 170px; left: 10px; display:block;}
#wrapperInner .galleryContainer .next {background-image: url(/images/interface/forward-arrow.png); background-position:0 -42px; height: 42px;top: 170px; left: 610px; display:block;}
#wrapperInner .galleryContainer a.previous:hover,
#wrapperInner .galleryContainer a.next:hover {background-position:0 0;}
#wrapperInner .galleryContainer .js_hide {display: none}

/*
full size image ---------------------------------- */
.fullsize .contentCol { width: 960px;}
.fullsize .contentCol img {margin-top: 20px; display: block}
.fullsize .back {display: block; margin-top: 20px;font-weight: bold}
.fullsize .WAMCaption {text-align: right}
/*
general ---------------------------------- */
ul.listing a.img {display: block; float:left; margin: 2px 10px 0 0;position: relative;}
ul.listing {margin: 0;}
ul.listing li {margin: 0.3em 0;  width:650px; float:left;}
ul.listing li div {height: 144px;border-bottom:1px solid #cccccc; float: left;width: 490px}
ul.listing li a:link, ul.listing li a:visited {text-decoration:none;color:#8e0885; padding-left: 0; background: none}
ul.listing li a:hover, ul.listing li a:focus, ul.listing li a:active {text-decoration:underline; }
img.mainImage {margin: 0 0 0.5em 0}

body.calendar ul.listing a.img {margin-left: 26px; display: inline}
body.calendar ul.listing li {padding-bottom: 1.5em;margin: 0.75em 0; }
body.calendar ul.listing li div {float: left; width: 320px}

div.pagination { font-weight: bold; padding:10px 0 20px 0; border-bottom: 1px solid #999; width: 99%; text-align: right}
div.pagination ul{display: inline; list-style-type: none; margin: 0 3px 0 -3px }
div.pagination ul li{display: inline; list-style-type: none; margin: 0;padding-left: 8px;  border-left: 1px solid #000; }
div.pagination ul li:first-child,
div.pagination ul li.first{border-left: none}
div.pagination ul li a {background: none; font-weight: normal; padding-left: 0 }
#wrapperInner div.pagination .prev{display: inline-block; height: 17px; position: relative; left: 0; top: 2px; text-indent: 1000px; overflow: hidden; width:12px; padding: 0 0 0 4px; background: url(/images/interface/arrow_prev.gif) right 2px no-repeat; margin-right: 10px }
#wrapperInner div.pagination .next{display: inline-block; height: 17px; position: relative; left: 0; top: 2px; text-indent: 1000px; overflow: hidden; width:12px; padding: 0 0 0 4px; background: url(/images/interface/arrow_next.gif) right 2px no-repeat }

/*
form styles ---------------------------------- */
.centreCol .addThis {float: right; clear: both;padding: 20px 0 10px 0}
.centreCol .addThis a {background: none}
.centreCol .commentForm, .centreCol .userComment {clear: both; }
.centreCol .commentForm input.submit {padding: 4px; margin: 4px 0}
.centreCol .commentForm h2, .centreCol .userComment h2 {margin: 10px 0 -10px -3px; position: relative; z-index: 100 }
.centreCol .commentForm h2 span, .centreCol .userComment h2 span {background-image:  url(/images/interface/plus.gif)}
.centreCol .commentForm h2.open, .centreCol .userComment h2.open,
.centreCol .commentForm h2.last,
.centreCol .userComment h2.last{background-image: url(/images/interface/feature_pointer_opaque.gif); margin-bottom: 0}
.centreCol .commentForm h2.last span,
.centreCol .userComment h2.last span {top: -3px}
.centreCol .extended ul {display: block !important} /* overrides default closed option for form*/
.centreCol .form h2{border-bottom: 1px solid #8e0885; color: #8e0885}
.centreCol .commentForm ul {margin-top: 1em}
.centreCol .commentForm li, .centerCol .userComment li,
.centreCol .form li{margin: 0.5em 0; list-style-type: none}
.centreCol textarea {overflow: auto; font-family: arial; font-size: 0.9em; width: 470px}
.centreCol label {width: 160px; display: block; float: left}
.centreCol input {width: 200px}
.centreCol input.submit {background: #8e0885; border: 1px solid #ccc; color: #fff; width: 6em; font-weight: bold }
.centreCol input.submit:hover {border: 1px solid #8e0885; background: #ccc; color: #8e0885}
.filterForm {float: right;  margin-right: 2px; }
.filterForm label {text-align: right;padding: 3px 10px 0 0;}
.filterForm select {width: 150px}
.filterFormRow {float:left;width:100%;}
.centreCol .button {
    background:#FFFFFF none repeat scroll 0 0;
    border:1px solid #CCCCCC;
    color:#000000;
    cursor:pointer;
    font-weight:bold;
    line-height:1.1em;
    padding:1px;
    width:30px;}
.centreCol .button:hover {background:#CCCCCC none repeat scroll 0 0;}
.centerCol .checkbox { padding:3px 0; }
.centreCol .checkbox label { width:auto; }
.centreCol .checkbox input { width:auto; float:left; margin-right: 10px; display: inline-block}


/*
sitemap ---------------------------------- */
ul.sitemap {margin: 0 0 40px -3px; clear: both}
ul.sitemap li {margin: 20px 0 0 0; list-style-type: none;  }
ul.sitemap li a {
    background:#999999 url(/images/interface/feature_pointer.gif) no-repeat scroll left bottom;
    color:#FFFFFF;
    cursor:pointer;
    font-size:1.2em;
    padding:10px 8px 18px 30px;
    display: block;
    margin:10px 0 -25px 0;
    position:relative;
    font-weight: bold;
}
ul.sitemap li a:hover {text-decoration: none}
ul.sitemap li a.open {
    margin:0;
    position:relative;
    background-image: url(/images/interface/feature_pointer_opaque.gif);
}
ul.sitemap li a.last {background-image: url(/images/interface/feature_pointer_opaque.gif);}
ul.sitemap li a span {
    background:transparent url(/images/interface/plus.gif) no-repeat scroll left 4px;
    padding-left:18px;
    position:relative;
    z-index:100;
    display: inline-block;
    }
ul.sitemap li a.open span { background-image: url(/images/interface/minus.gif)}
ul.sitemap li li {padding: 0 0 0 10px;margin: 10px 0 0 1em; background: transparent url(/images/interface/small_dark_arrow.gif) 0 4px no-repeat; position: relative;zoom:1;}
ul.sitemap li li a {padding: 0; background: none; color: #333; font-size: 1em; display: inline; font-weight: normal}
#tooltip{
    position:absolute;
    border:1px solid #F4F5F5;
    background:#8D2C8D;
    padding:4px 5px;
    color:#fff;
    display:none;

}

.features .featureImage:hover {cursor: pointer}
.error { color:#f00; font-weight:bold; display:inline; }

/* ---dynamic, javascript stylesheet for
    Wellcome Trust collection
---- */.js_hide{display:none}
.js_show{display:block}
/* datepicker  */table.jCalendar{border-collapse:separate}
table.jCalendar th{background:#333;color:#fff;font-weight:700;font-size:1.1em;padding:8px}
table.jCalendar td{background:#ccc;color:#000;text-align:center;font-size:1.1em;padding:8px}
table.jCalendar td.other-month{background:#ddd;color:#aaa}
table.jCalendar td.today{background:#666;color:#fff;font-weight:700}
table.jCalendar td.selected{background:#f66;color:#fff}
table.jCalendar td.selected.dp-hover{background:#f33;color:#fff}
table.jCalendar td.dp-hover,table.jCalendar tr.activeWeekHover td{background:#fff;color:#000}
table.jCalendar tr.selectedWeek td{background:#8F2B8C;color:#fff}
/* datepicker   NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css  */div.dp-popup{position:relative;background:#ccc;font-size:10px;font-family:arial, sans-serif;line-height:1.2em;padding:2px}
div#dp-popup{position:absolute;z-index:199;margin-left:15px !important}
div.dp-popup h2{text-align:center;font-size:1.4em;line-height:1em;margin:4px 0;padding:0}
a#dp-close{font-size:11px;text-align:center;display:block;padding:4px 0}
a#dp-close:hover{text-decoration:underline}
div.dp-popup a{color:#000;text-decoration:none;padding:3px 2px 0}
div.dp-popup div.dp-nav-prev{position:absolute;top:4px;left:4px;width:100px}
div.dp-popup div.dp-nav-prev a{float:left}
div.dp-popup div.dp-nav-next{position:absolute;top:4px;right:4px;width:100px}
div.dp-popup div.dp-nav-next a{float:right}
div.dp-popup a.disabled{cursor:default;color:#aaa}
/* slideshow */.gallery .slideshow{overflow:hidden}
#slideshow{position:relative;clear:both}
#slideInner{position:relative;overflow:hidden}
.galleryThumbnails .thumb{margin:0}
table.jCalendar td.disabled,table.jCalendar td.disabled.dp-hover,table.jCalendar td.unselectable,table.jCalendar td.unselectable:hover,table.jCalendar td.unselectable.dp-hover{background:#bbb;color:#888}
div.dp-popup div.dp-nav-prev a,div.dp-popup div.dp-nav-next a,div.dp-popup td,.box{cursor:pointer}
div.dp-popup div.dp-nav-prev a.disabled,div.dp-popup div.dp-nav-next a.disabled,div.dp-popup td.disabled,.landing #blank{cursor:default}

/*
survey popup ---------------------------------- */

#survey{
	display: none;
	background: #a3a6ab url(../../../../images/interface/survey.png) no-repeat bottom left;
	width: 222px;
	font-size: .9em;	
	bottom: 0;
	right: 0;
	z-index: 9999;
	float: right;
}

.survey-green{
	background: #beb800 url(../../../../images/interface/survey-green.png) no-repeat bottom left !important;
}
.survey-purple{
	background: #b00d9a url(../../../../images/interface/survey-purple.png) no-repeat bottom left !important;
}
.survey-big{
	font-size: 1em !important;
	width: 250px !important;
}
#survey a:link, #survey a:visited{
	display: block;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 20px 10px 25px;
	background: url(../../../../images/interface/survey-link.png) no-repeat 10px 10px;
}
#survey a:hover, #survey a:focus, #survey a:active{
	text-decoration: underline;
}
#survey-close:link, #survey-close:visited{
	float: right;
	padding: 0 !important;
	position: relative;
	overflow: hidden;
	width: 30px;
	height: 13px
}
#survey-close:link span, #survey-close:visited span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #767676 url(../../../../images/interface/survey-close.png) no-repeat center 0;
}
#survey-close:hover span, #survey-close:focus span, #survey-close:active span{
	background: #767676 url(../../../../images/interface/survey-close-hover.png) no-repeat center 0;
}
.survey-green #survey-close:link span, .survey-green #survey-close:visited span{
	background: #4A4A4A url(../../../../images/interface/survey-close-green.png) no-repeat center 0;
}
.survey-green #survey-close:hover span, .survey-green #survey-close:focus span, .survey-green #survey-close:active span{
	background: #4A4A4A url(../../../../images/interface/survey-close-hover-green.png) no-repeat center 0;
}
.survey-purple #survey-close:link span, .survey-purple #survey-close:visited span{
	background: #010101 url(../../../../images/interface/survey-close-purple.png) no-repeat center 0;
}
.survey-purple #survey-close:hover span, .survey-purple #survey-close:focus span, .survey-purple #survey-close:active span{
	background: #010101 url(../../../../images/interface/survey-close-hover-purple.png) no-repeat center 0;
}