/* $Header: /local/cvs_repository/c24.cafmodule/web_static/css/common.css,v 1.20 2014/02/06 18:22:15 sacha Exp $ */ /*----------------------------------------------------------------------*/ /* defaults & utility classes */ ul.taglist-print { margin-left: 0; padding-left: 0; } div.articletext-print div.image div.info { color: #000; } div.footer-print { padding-top: 50px; } .noborder { border: none !important; } div.debug { font-family: monospace; font-size: 12px; color: #ccc; white-space: pre; } div#body { /* can't apply styles to in IE6+xhtml */ width: 1160px; color: #666; } input, textarea, /* yui fonts doesn't do this properly for IE6? */ .x-form-element { /* for ExtJS inputs */ font-family: Verdana; color: #666; /* for Safari, to remove the focus highlight */ outline-style: none; outline-width: 0px; } input.button { color: #333; } a, a:link, a:visited, a:hover, a:active, a:focus { outline: none; text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; cursor: pointer; } .hidden { display: none; } .floatcontainer { /* apply to a container to make it as tall as its floats */ zoom:1; /* for IE6 to trigger overflow */ overflow: hidden; } .left { float: left; } .right { float: right; } .clearfloat { clear: both; } /* In xhtml strict, imgs are inline by default. We never want this. */ img { display: block; } ul.inline li { display: inline; } /* equal height columns trick; the container for these should hide overflow * http://www.positioniseverything.net/articles/onetruelayout/equalheight */ .eqcol { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } .eqcol-container { zoom:1; /* for IE6 to trigger overflow */ overflow: hidden; } /* There is a problem with anchors and the equal-heights-columns technique: * http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems#linking * The following appears to fix it * http://www.webmasterworld.com/forum83/8516.htm */ .anchor { position: absolute; } /* a.remember-section {} * Grepped for this? It's not a cosmetic style; it's a class used to * identify hyperlinks that are adorned with specific onclick * behaviour at page load time. See 'remember.js'. */ /* tabs */ /* the z-index stuff, combined with bottom borders and margin-bottom: -1px * (to make adjacent boxes overlap) is what makes the currently-selected tab * look like it's attached to its tab */ /* ### replaced with images as part of Aug '09 redesign ul.tabs { font-weight: bold; font-size: 77%; text-transform: uppercase; zoom:1; overflow: hidden; position: relative; z-index: 1; } ul.top-tabs { margin-bottom: -1px; } ul.bottom-tabs { margin-top: -1px; } ul.tabs li { float: left; height: 18px; line-height: 18px; vertical-align: middle; background-color: #eee; margin-right: 3px; border: 1px solid #ccc; } ul.tabs li.selected { background-color: #fff; } ul.top-tabs li.selected { border-bottom: 1px solid #fff; } ul.bottom-tabs li.selected { border-top: 1px solid #fff; } ul.tabs li a { padding-left: 8px; padding-right: 8px; } ul.tabs li a:link, ul.tabs li a:visited { color: #999; } ul.tabs li a:hover { text-decoration: none; } ul.tabs li a:focus { text-decoration: none; } ul.tabs li.tablink { float: right; border: none; background: none; } .tabgroup { border-top: solid 1px #cccccc; position: relative; z-index: 0; } */ ul.tabs { zoom:1; overflow: hidden; } ul.tabs li { float: left; width: 100px; height: 22px; line-height: 22px; vertical-align: middle; } ul.tabs li a { display: block; width: 94px; padding-left: 6px; height: 22px; background-position: center left; background-repeat: no-repeat; background-image:url('../../img/c24/tab-inactive.gif'); font-size: 85%; } ul.tabs li.selected a { background-image:url('../../img/c24/tab-active.gif'); } ul.tabs li#archived-tab { float: right; width: auto; } ul.tablinks li { display: inline; font-size: 85%; } /* div.tabpanes { float: left; /* prevents print issues */ } */ a.offsite { word-wrap: break-word; } h1.recordtitle { font-size: 146.5%; padding-top: 5px; padding-bottom: 5px; } div#map { background-position: top left; background-repeat: no-repeat; background-image:url('../../img/c24/map-loading.gif'); background-color: #e5e3df; /* google sets it to this later anyway */ } /*----------------------------------------------------------------------*/ /* Advertising */ div#ad-banner { position: absolute; top: 0px; left: 136px; width: 728px; height: 90px; z-index: 0; /* attempt to prevent flash movies appearing above popups */ } div#ad-skyscraper { position: absolute; top: 236px; left: 1000px; width: 120px; height: 600px; z-index: 0; /* attempt to prevent flash movies appearing above popups */ } div#ad-skyscraper object, div#ad-skyscraper iframe { width: 120px; height: 600px; } @media only screen and (min-width : 481px){ div.mobile-body-advert{ display: none; } } #google-adsense { width: 300px; height: 250px; margin-bottom: 20px; } div#ad-mpu-warning { width: 300px; text-align: center; text-transform: capitalize; font-size: 77%; color: #888; padding: 5px 0px; border-top: solid 4px #888; } div#ad-mpu { width: 300px; padding-bottom: 10px; border-bottom: solid 4px #888; margin-bottom: 20px; overflow: hidden; z-index: 0; } div#ad-mpu object, div#ad-mpu iframe { width: 300px; height: 250px; } div#page { /* position: absolute; ### causes page to disappear in IE print preview */ position: relative; top: 20px; left: 20px; width: 960px; } /*----------------------------------------------------------------------*/ /* header */ div#banner { width: 960px; height: 140px; background-color: #666; /* temporary */ } div#banner img { display: block; } div#banner span.title { display: none; } div#global { width: 960px; margin-bottom: 16px; } ul#nav1 { float: left; vertical-align: middle; } ul#nav2 { clear: both; width: 960px; vertical-align: middle; font-size: 85%; } /* horizontal navigation bars */ ul.navhorizontal li { display: inline; } /* all navigation links */ ul.nav li a:hover, ul.nav li a:active { text-decoration: none; } ul.nav li.selected a:hover, ul.nav li.selected a:active { text-decoration: none; } div#date { float: right; line-height: 20px; vertical-align: middle; font-size: 85%; } div#crumbtrail { display: inline; /* for IE6 double-margin bug */ float: left; line-height: 20px; font-size: 85%; } div#crumbtrail div div.links { display: inline; } div#crumbtrail .first { padding-left: 18px; background-position: center left; background-repeat: no-repeat; background-image:url('../../img/c24/home-icon.gif'); } /* wasn't able to implement the separator bar using divs & floats; * spacing around form elements is too inconsistent across browsers */ a#adv-search { display: block; float: right; line-height: 18px; vertical-align: middle; font-weight: bold; } form#searchform { display: block; float: right; } form#searchform table { height: 18px; border-collapse: collapse; } form#searchform table tbody tr td.activity { width: 19px; height: 18px; } img.activity-indicator { display: none; margin-top: 1px; width: 16px; height: 16px; vertical-align: middle; } form#searchform table tbody tr td.adv-link-cell { text-transform: uppercase; } div#searchbox { width: 300px; } div#searchbox form#searchform { float: left; } div#searchbox a#adv-search { float: left; margin-top: 5px; margin-left: 18px; /* indent by width of activity gif */ } div#nav3 span.title { text-transform: none; } /*----------------------------------------------------------------------*/ /* titled boxes (related content etc) */ div.rbox { margin-bottom: 20px; } div.rbox div.heading { padding-left: 10px; padding-right: 10px; line-height: 20px; vertical-align: middle; font-size: 77%; color: #fff; } div.rbox div.heading span.title { display: block; float: left; } div.rbox div.heading span.count { display: block; margin-left: 0.5em; float: left; } div.rbox div.heading span.link { display: block; float: right; } div.rbox div.heading span.link img { display: inline; vertical-align: top; width: 16px; height: 16px; padding-top: 2px; } div.rbox div.heading span.link span.linkmarker { color: #f00; } div.rbox div.heading span.link a:link, div.rbox div.heading span.link a:visited, div.rbox div.heading span.link a:hover { color: #fff; } div.rbox div.content { clear: both; padding: 9px; font-size: 85%; } div.rbox div.content ul li { padding-top: 0.7692em; } div.rbox div.content ul li span.title { text-transform: uppercase; } div.rbox div.content a.moreresults { display: block; float: right; } /*----------------------------------------------------------------------*/ /* main content */ div#mid { margin-bottom: 20px; } div#content, div#content2 { clear: both; width: 420px; margin-right: 10px; float: left; } div#content2 { width: 640px; } /*----------------------------------------------------------------------*/ /* rhs related content */ div.rhscol-box-top { overflow: hidden; margin-bottom: 20px; /* for IE6 */ zoom:1; } div.rhscol1 { width: 200px; margin: 0px 10px 0px 10px; float: left; display: inline; /* for IE6, to avoid double margins */ } div.rhscol2 { width: 300px; float: right; display: inline; /* for IE6, to avoid double margins */ } div.placeholderbox1, div.placeholderbox2, div.placeholderbox3, div.placeholderbox4 { width: 100%; margin-bottom: 20px; background-color: #f0f0f0; } div.placeholderbox1 { height: 200px; } div.placeholderbox2 { height: 300px; } div.placeholderbox3 { height: 500px; } div.placeholderbox4 { width: 250px; height: 250px; } /*----------------------------------------------------------------------*/ /* footer */ div#footer { clear: both; width: 960px; margin-bottom: 40px; /* I don't know why this has to be double */ font-size: 85%; } div.ftsep { float: left; height: 1px; width: 960px; margin-bottom: 10px; } /* used to be ftsponsors, but this seems to be a reserved name in adblock */ div#ftspons { padding-top: 10px; padding-bottom: 20px; } div#ftspons a { margin-right: 20px; } div#ftspons a.last { margin-right: 0px; } div#ftspons a img { display: inline; vertical-align: middle; } div#ftdisclaimer { float: left; width: 550px; } table#ftnav { float: right; border-collapse: collapse; text-align: right; } table#ftnav td { border-right: solid 1px #ddd; padding: 0px 10px; } table#ftnav td.lastcol { border-right: none; padding-right: 0px; } /*----------------------------------------------------------------------*/ /* include: subjectrhs (rhs related content) */ /* level 3 nav is an rbox, but slightly different */ div#nav3 { font-weight: bold; margin-bottom: 20px; } div#nav3 div.heading { font-weight: bold; } div#nav3 div.content { padding-top: 0px; } div#nav3 div.content ul li { clear: both; /* fixes for IE vertical spacing bug */ _display: inline; vertical-align: top; } div#nav3 div.content ul li a { display: block; float: left; width: 130px; padding-right: 10px; } div#nav3 div.content ul li a:hover { text-decoration: none; } div.rboxrhs1 { width: 200px; } div.rboxrhs1 div.content { padding: 0px; } div.rboxrhs1 div.content ul li { padding: 8px; } div.rboxrhs1 div.content ul li a.recordtitle { display: block; float: left; width: 184px; margin-bottom: 5px; } div.rboxrhs1 div.content ul li div.recordimage { clear: both; float: left; width: 70px; height: 70px; margin-right: 8px; } div#relatedwebsites div.content ul li div.recordimage, div#relatedobjects div.content ul li div.recordimage { clear: none; /* title is displayed right of image, not above */ } div.rboxrhs1 div.content ul li div.recordimage img { height: 100%; width: 100%; } div.rboxrhs1 div.content ul li div.noimage { background-color: #eee; } div.rboxrhs1 div.content ul li div.recordsummary, div#relatedwebsites div.content ul li a.recordtitle, div#relatedobjects div.content ul li a.recordtitle { width: 102px; float: right; } div#teachingresources div.content ul li div.recordimage, div#relatedevents div.content ul li div.recordimage, div#relatedresources div.content ul li div.recordimage { display: none; } div#teachingresources div.content ul li div.recordsummary, div#relatedevents div.content ul li div.recordsummary, div#relatedresources div.content ul li div.recordsummary { width: 184px; _width: 180px; _float: left; /* IE6 duplicate character float bug fix */ } div.rboxrhs2 { width: 100%; } div.rboxrhs2 div.content { padding: 0px; } div.rboxrhs2 div.content ul li div.recordimage { float: left; clear: both; width: 70px; height: 70px; margin-right: 8px; } div.rboxrhs2 div.content ul li div.noimage { background-color: #eee; } div.rboxrhs2 div.content ul li a.recordtitle { display:block; float:left; margin-bottom:5px; } div.rboxrhs2 div.content ul li div.recordsummary { display: block; float: right; width: 202px; } /* ### temporary */ div#mostpop div.tabpanes div.pane { height: 128px; border: solid 1px #ccc; border-top: none; } div#relatedvenues div.rbox { display: none; } div#relatedvenues div.selected { display: block; } /*----------------------------------------------------------------------*/ /* article lists (on subjectlp, regionlp, maplp) */ div#lp-title-box { margin-bottom: 15px; clear: both; } div#pagetitle-box { margin-bottom: 0.5em; } div#pagetitle-box h1 { float: left; } div#pagetitle-rss-box { font-size: 85%; display: block; float: right; } div#pagetitle-rss-box a { text-transform: capitalize; } div#pagetitle-rss-box img { /* rss icon */ display: inline; padding-left: 5px; } a#rss-icon-link { font-size: 16px; vertical-align: middle; } table#canned-search-buttons { margin-bottom: 15px; } table#canned-search-buttons tr { height: 22px; } table#canned-search-buttons .button-spacer { width: 10px; } table#canned-search-buttons a:link, table#canned-search-buttons a:visited, table#canned-search-buttons a:hover, table#canned-search-buttons a:active { line-height: 20px; vertical-align: middle; font-size: 85%; color: #fff; } div#articlelist div.article1 { padding-bottom: 10px; } div#articlelist div.article1 div.content h2 { font-size: 116%; margin-bottom: 0.5em; } div#articlelist div.article1 div.content p { font-size: 85%; } div#articlelist div.article1-vertical div.content h2 { margin-top: 0.5em; } div#articlelist div.article1-horizontal img { float: left; } div#articlelist div.article1-horizontal div.content { float: right; margin-left: 10px; } div#articlelist div.article-2up, div#articlelist div.articleN { padding-top: 10px; padding-bottom: 10px; } div#articlelist div.article2 { width: 200px; } div#articlelist div.article2 div.content h2 { font-size: 100%; margin-top: 0.5em; margin-bottom: 0.5em; } div#articlelist div.article2 div.content p { font-size: 85%; } div#articlelist div.articleN { padding-top: 10px; padding-bottom: 10px; border-top: solid 1px #666; } div#articlelist div.articleN img { float: left; } div#articlelist div.articleN div.content { float: right; width: 330px; } div#articlelist div.articleN div.content h2 { font-size: 100%; margin-bottom: 0.5em; } div#articlelist div.articleN div.content p { font-size: 85%; } div#articlelist a.morelink { display: block; width: 420px; padding-top: 10px; padding-bottom: 10px; border-top: solid 1px #666; text-align: right; font-size: 85%; } /*----------------------------------------------------------------------*/ /* controller: c24_article (article display page) */ .c24_article div#mid { /* Padding added to accommodate a facebook popup from the Like * buttons on Connect10 voting articles for Museums at Night 2013 */ padding-bottom: 160px; } div#author-dates { font-size: 85%; line-height: 18px; } span.sep { color: #bbb; } div#tags { font-size: 85%; margin-bottom: 15px; } div#tags ul, div#tags ul li { display: inline; } div#article-tabpanes { margin-top: -1px; border-top: solid 1px #d4d4d4; padding-top: 10px; } div#article div.tabpanes { margin-bottom: 20px; } div#articletext h1, div#articletext h2, div#articletext h3, div#articletext h4, div#articletext h5, div#articletext h6 { margin-bottom: 1em; } div#articletext h1 { font-size: 116%; font-weight: bold; } div#articletext h2 { font-size: 108%; font-weight: bold; } div#articletext h3 { font-size: 100%; font-weight: bold; } div#articletext h4 { font-size: 93%; font-weight: bold; } div#articletext h5 { font-size: 85%; font-weight: bold; } div#articletext h6 { font-size: 85%; font-style: italic; } div#articletext h2.teachers_info { font-size: 85%; color: #ff6600; } div#articletext p, div#articletext div.legacy p, div#articletext ul, div#articletext ol { padding-bottom: 1em; } div#articletext p, div#articletext div.legacy p, div#articletext ul li, div#articletext ol li { font-size: 85%; } div#articletext ul { /* padding for bullets */ padding-left: 1em; _padding-left: 1.2em; } div#articletext ul li { list-style-type: disc; list-style-position: outside; margin-top: 0.5em; } div#articletext ol li { list-style-type: decimal; list-style-position: inside; margin-top: 0.5em; } /* legacy 24HM layout: image next to caption */ div#articletext div.legacy { clear: both; } div.image { clear: both; margin-bottom: 1em; } div.image img { display: block; border: solid 1px #d4d4d4; } div.image div.info { position: relative; font-size: 85%; font-style: italic; background-color: #d4d4d4; color: #666; } div.image { background-color: #fff; } div.image div.info span.caption, div.image div.info span.copyright { display: block; padding: 0.5em; } div.legacy { width: 420px; } div.imagefull div.info span.caption { float: left; } div.imagefull div.info span.copyright { float: right; } div.imageleftadjacent img { float: left; } div.imageleftadjacent div.info { float: right; } div.imagerightadjacent img { float: right; } div.imagerightadjacent div.info { float: left; } div.imageleftadjacent div.info span.caption, div.imagerightadjacent div.info span.caption { position: absolute; top: 0px; } div.imageleftadjacent div.info span.copyright, div.imagerightadjacent div.info span.copyright{ position: absolute; bottom: 0px; } div.imageleftabove { float: left; margin-top: 3px; /* just makes it line up better with text */ margin-right: 20px; _margin-top: 4px; /* IE6 */ _margin-right: 17px; /* IE6 */ } div.imagerightabove { float: right; margin-top: 3px; /* just makes it line up better with text */ margin-left: 20px; _margin-top: 4px; /* IE6 */ _margin-right: 17px; /* IE6 */ } div.sep { clear: both; height: 1px; width: 100%; margin-bottom: 0.25em; } div#pagelinks { float: right; font-size: 85%; font-weight: bold; text-transform: uppercase; margin-bottom: 0.25em; } div#pagelinks ul { display: inline; margin-left: 2em; } div#pagelinks ul li { display: inline; } span.inactivelink { color: #ddd; } div#pagelinks ul li a { padding-left: 0.5em; /* increase clickable area */ } div#pagelinks ul li a:link, div#pagelinks ul li a:visited, div#pagelinks a:link, div#pagelinks a:visited { color: #666; } div#pagelinks ul li a:hover, div#pagelinks a:hover { color: #dc0; text-decoration: none; } div#pagelinks ul li.selected a:link, div#pagelinks ul li.selected a:visited { color: #dc0; } div#pagelinks ul li.selected a:hover { color: #dc0; text-decoration: none; } div.taglinks { border: solid 1px #d4d4d4; background-color: #fafafa; padding: 6px; margin-bottom: 20px; font-size: 85%; line-height: 18px; } div.taglinks div.title { font-weight: bold; } div.taglinks ul { display: inline; } div.taglinks ul li { display: inline; } div#more-tags div.title { float: left; } div.commenttext { /* all comment text blue & italic */ color: #453c95; font-style: italic; width: 99%; /* for IE6 italic box-width bug */ word-wrap: break-word; } div#latestcomment div.heading { background-color: #003366; } div#latestcomment div.content { border: solid 1px #ccc; border-top: none; } div#latestcomment div.content div.commenttext { padding-bottom: 1em; } div#latestcomment div.content span.linkmarker { color: #ed5114; } div#latestcomment div.content a.seemore { padding-bottom: 10px; } div#latestcomment div.content a.seemore:link, div#latestcomment div.content a.seemore:visited, div#latestcomment div.content a.seemore:hover { color: #999; } div#referencedvenues { margin-bottom: 20px; } div#referencedvenues div.title { font-size: 93%; font-weight: bold; margin-bottom: 1em; } div#referencedvenues ul li { font-size: 85%; margin-bottom: 1em; } div#referencedvenues ul li a.venuename { display: block; } ul#articlefunctions { border-top: solid 1px #d4d4d4; padding-top: 6px; font-family: Arial, sans-serif; /* necessary to make them fit on 1 line */ font-size: 85%; } ul#articlefunctions li { display: inline; } ul#articlefunctions li a { display: inline-block; height: 16px; vertical-align: middle; } ul#articlefunctions a#back-to-top, ul#articlefunctions a#print-page, ul#articlefunctions a#email-page { padding-left: 20px; line-height: 16px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; } ul#articlefunctions a#back-to-top { background-image:url('../../img/c24/icon-top.gif'); } ul#articlefunctions a#print-page { background-image:url('../../img/c24/icon-print.gif'); } ul#articlefunctions a#email-page { background-image:url('../../img/c24/icon-email.gif'); } ul#articlefunctions a img { display: inline; } /* article comments pane */ div#articlecomments div#question { font-size: 100%; font-weight: bold; } div#articlecomments div#webc-form-title { font-size: 100%; font-weight: bold; } form#webc-form fieldset label { display: block; font-size: 77%; margin-top: 1em; } form#webc-form fieldset textarea, form#webc-form fieldset input { width: 75%; font-size: 85%; border: solid 1px #ccc; } form#webc-form fieldset textarea { height: 10em; overflow: auto; } form#webc-form button, div#webc-result button { font-size: 85%; padding: 1px 5px; cursor: pointer; display: block; width: auto; margin-top: 1em; border: solid 1px #ccc; } div#webc-result { margin-top: 1em; background-color: #fe9; padding: 1em; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } div#webc-result div { font-size: 85%; margin-bottom: 0.5em; } div#articlecomments div#commentdisclaimer { font-size: 77%; margin-top: 2em; margin-bottom: 2em; padding: 1em; background-color: #eee; } div#articlecomments ul#comments { margin-bottom: 20px; } div#articlecomments ul#comments li { margin-top: 1em; border-top: solid 1px #ccc; } div#articlecomments ul#comments li div.whowhen { float: left; width: 75%; font-size: 77%; padding-top: 1em; /* weird things happen in IE6 if you put this in li */ } div#articlecomments ul#comments li div.whowhen span.submitter { display: block; } div#articlecomments ul#comments li div.whowhen span.time { display: block; } div#articlecomments ul#comments li div.controls { float: right; font-size: 77%; padding-top: 1em; /* weird things happen in IE6 if you put this in li */ } div#articlecomments ul#comments li div.controls div.reported { margin-left: -16px; padding-left: 16px; background-repeat: no-repeat; background-position: middle left; background-image: url('../../img/extjs/icons/bullet_error.png'); padding-top: 2px; } div#articlecomments ul#comments li div.commenttext { clear: both; font-size: 85%; padding-top: 1em; } div#articlecomments ul#comments li div.reported { font-style: normal; color: #999; } div#articlecomments ul#comments li div.comment-response-heading { margin-top: 1em; font-size: 77%; color: #ed5114; background-color: #eee; padding: 1em; } div#articlecomments ul#comments li div.comment-response { background-color: #eee; padding: 1em; padding-top: 0; width: 99%; /* for IE6 italic box-width bug */ } div#articlecomments a#comments-back-link { display: block; border-top: solid 1px #ccc; margin: 20px 0px; padding-top: 0.5em; } div.sep { background-color: #666; } /*----------------------------------------------------------------------*/ /* controller: search (search results) */ div#search-controls { margin-top: 10px; margin-bottom: 20px; } div#resulttotal { /* font-family: Georgia, serif; */ font-weight: bold; font-size: 116%; margin-bottom: 5px; } div#resulttotal, div#sortoptions, div#query, div#paged-nav-top, div#paged-nav-bottom { width: 640px; } div#sortoptions, div#query, div#paged-nav-top, div#paged-nav-bottom { font-size: 85%; } div#paged-nav-top { margin-top: 8px; } div.display-options, div.paged-nav-links { /* width: 320px; */ } div.display-options { float: left; } div.paged-nav-links { float: right; text-align: right; } div.paged-nav-links span, div.paged-nav-links a { height: 20px; vertical-align: middle; padding-left: 0.3em; } div.paged-nav-links span.inactive-link.selected { text-decoration: underline; } div#sortoptions, div#query { border-bottom: solid 1px #ccc; padding-bottom: 8px; } div#query { margin-top: 8px; } div#sortoptions ul, div#query ul { display: inline; margin-left: 1em; } div#query ul li { display: inline; color: #333; font-weight: bold; margin-right: 1em; } div#sortoptions ul li { display: inline; } div#sortoptions ul li a:link, div#sortoptions ul li a:visited, div#sortoptions ul li a:hover, span#dirglyph { text-transform: capitalize; } div#sortoptions ul li img { display: inline; } div#referrer-controls { float: right; } div.search div#content { width: 640px; } div.resultset { clear: both; width: 100%; margin-bottom: 15px; } div#searchrefine div.facet { background-color: #ccc; color: #333; font-weight: bold; } div.resultset div.heading { border-top: solid 4px; color: #333; font-weight: bold; background-color: #fff; padding: 5px 0px; border-bottom: solid 1px #ccc; } div.resultset div.content { font-size: 100%; border: none; padding: 0px; } div.resultset div.content ul { padding: 0px; } div.resultset div.content ul li { width: 640px; margin:0px; padding: 15px 0px; border-bottom:1px solid #D4D4D4; } div.resultset div.content ul li div.recordimage { font-size: 77%; float: left; width: 70px; height: 70px; margin-right: 10px; } div.resultset div.content ul li div.noimage { background-color: #f0f0f0; } div.resultset div.content ul li div.recordimage img { max-height: 100%; max-width: 100%; } div.resultset div.content ul li div.recorddetails { float: right; width: 560px; margin-top: -3px; } div.resultset div.content ul li div.recorddetails span.recordtype, div.resultset div.content ul li div.recorddetails span.recordstatus, div.resultset div.content ul li div.recorddetails span.recordcounty { display: block; font-size: 85%; } div.resultset div.content ul li div.recorddetails span.recordtype { float: left; } div.resultset div.content ul li div.recorddetails span.recordstatus { float: right; color: #cc0000; } div.resultset div.content ul li div.recorddetails span.recordcounty { clear: both; } div.resultset div.content ul li div.recorddetails a.recordtitle { clear: both; display: block; font-size: 108%; font-weight: bold; padding: 5px 0px; } div.resultset div.content ul li div.recorddetails div.recordsummary { display: block; font-size: 85%; padding-bottom: 5px; } div.resultset div.content ul li div.recorddetails span.recordvenue, div.resultset div.content ul li div.recorddetails span.recordtown, div.resultset div.content ul li div.recorddetails span.recorddate, div.resultset div.content ul li div.recorddetails div.recordtags { font-size: 85%; } div.resultset div.content ul li div.recorddetails span.recordstatus { display: block; font-size: 77%; color: #990000; margin-bottom: 0.5em; } div.resultset div.content ul li div.recorddetails div.recordtags { margin-top: 0.2em; } div.resultset div.content ul li div.recorddetails span.sep { color: #ccc; font-size: 77%; margin-left: 0.25em; margin-right: 0.25em; vertical-align: 1px; } div.resultset div.content a.moreresults { clear: both; font-size: 85%; padding: 10px 10px 0px 0px; } div#nomatches { border-top: 1px solid #ddd; font-size: 85%; padding: 10px; padding-top: 20px; } div#searchrefine { background-color: #fff; } div#searchrefine div#views { font-size: 85%; margin: 10px 0px 5px 0px; padding-bottom: 10px; } div#searchrefine ul li { padding-top: 5px; } div#searchrefine ul li.top { padding: 5px 0px; border-bottom: solid 1px #d4d4d4; } div#searchrefine ul li.top.last { border-bottom: none; } div#searchrefine div.toggleon, div#searchrefine div.toggleoff { height: 16px; background-position: 0px 0px; } div#searchrefine div.content { border-bottom: solid 1px #d4d4d4; padding: 0px; } div#searchrefine div.facet { margin-top: 10px; background-color: #fff; color: #333; } div#searchrefine div.facet span.title { text-transform: none; } div#searchrefine div.last { border-bottom: solid 1px #ddd; margin-bottom: 20px; } form#dform select { margin-top: 0.5em; width: 80px; } ul.facettreebranch { margin-left: 10px; } div#search-help { font-size: 85%; } div#search-help p { margin-bottom: 0.5em; } /*----------------------------------------------------------------------*/ /* controller: c24_venue (venue display page) */ div#page.c24_venue ul.tabs { padding-top: 13px; padding-bottom: 10px; border-top: solid 1px #d4d4d4; margin-top: 11px; border-bottom: solid 4px #666; margin-bottom: 13px; } div.c24_venue div#content { width: 640px; } div.venuepane { width: 640px; margin-bottom: auto; } /* The padding/margin on these divs, in combination with the overflow * property on the venuepane container (inherited from floatcontainer), * is a hack to achieve equal column heights. The value 20,000 was * chosen because it works for current the longest tab, the British * Museum's Collections tab (se000073). * * http://www.ejeliot.com/blog/61 */ div.venuepane { width: 420px; padding-right: 9px; border-right: solid 1px #d4d4d4; margin-right: 10px; float: left; _float: right; /* important, to avoid IE6 3 pixel float bug */ } div.venuepane div.details div.intro { font-size: 85%; margin-bottom: 1em; } div#venuepane2 div.details div.intro { margin-bottom: 1em; } div.tabpanes div.contacts { width: 200px; float: right; overflow: hidden; word-wrap: break-word; } div.venuepane div.contacts div.disclaimer { font-size: 85%; padding-top: 1em; border-top: solid 1px #d4d4d4; } div.venuebox h2, div.venuebox h3, div.venuebox h4, div.venuebox p, div.venuebox ul li { font-size: 85%; } div.venuebox h2 { font-weight: bold; padding-top: 0px; /* padding-top: 1em; border-top: solid 1px #d4d4d4; */ } div.venuebox div#venuetype h2 { display: inline; border-top: none; padding-top: 0px; margin-right: 1em; } div.venuebox div#venuetype p { display: inline; } div.venuebox div#venuetype { margin-bottom: 1em; } div.venuebox h3 { font-weight: bold; } div.venuebox h4 { font-style: italic; } div.venuebox p, div.venuebox ul { margin-bottom: 1em; } img#venueimg { margin-bottom: 10px; } ul#venueconstituents li { margin-bottom: 0.5em; } div.venue-expand { margin-bottom: 10px; } div.venue-expand div.heading { background-color: #ddd; color: #333; padding-left: 0px; } div.venue-expand div.heading span.link { float: left; margin-right: 10px; } div.venue-expand div.heading span { cursor: pointer; } div.venue-expand div.content { font-size: 100%; padding: 1em 0px 0px 0px; } div.venue-expand div.content ul li { padding: 0px; } div.venue-expand div.content p h3 { display: inline; padding: 0px; font-style: italic; } div#venuefacilityicons { padding: 10px 0px 5px 0px; } img.venuefacilityicon { display: inline; width: 30px; height: 30px; } div#mapcontainer a#mapprint { display: block; right: 10px; font-size: 85%; padding: 0.5em; padding-right: 10px; text-align: right; } div.venuebox div#map, div.venuebox div#map-print { width: 418px; height: 418px; border: solid 1px #ddd; } div.venueselected div.itemdetails { background-color:#f8fcff; border: solid 1px #d4d4d4; border-top: none; margin-bottom: 10px; padding: 0px 9px; } div.venueitem div.banner { display: block; background-color: #ddd; padding: 4px 9px; color: #333; text-transform: uppercase; font-size: 77%; } div.venueitem div.itemdetails img { float: left; margin: 9px 9px 9px 0px; } div.venueitem div.itemdetails h2 { padding-top: 0.5em; font-size: 116%; } div.venueitem div.itemdetails div.eventdate { clear: both; margin-top: 0.5em; margin-bottom: 1em; } div.venueitem div.itemdetails div.eventdate ul { float: left; } div.venueitem div.itemdetails div.eventdate span.onnow, div.venueitem div.itemdetails div.eventdate span.event-status { font-size: 93%; font-style: normal; } div.venueitem div.itemdetails div.eventdate span.onnow { text-transform: uppercase; font-size: 77%; color: #009900; } div.venueitem div.itemdetails div.eventdate span.event-status { float: right; color: #CC0000; } div.venuecollection div h2 { padding-bottom: 1em; } div.venuecollection { border-top: solid 1px #ccc; } div.venuecollection div.with-image div { float: right; width: 340px; } div.venueselected div.with-image div { width: 320px; } div#page.c24_venue ul.tablinks { width: 429px; border-right: solid 1px #d4d4d4; } /* designated collection etc logos */ div#venue-logos { margin-bottom: 10px; } div#venue-logos img { float: left; } /*----------------------------------------------------------------------*/ /* controller: maplp (map landing page) */ div.maplp div#searchbox { float: right; } div.maplp div#content { min-height: 500px; } div#content p#pageintro, div#content2 p#pageintro { font-size: 85%; margin-bottom: 10px; } div.maplp div#content h2 { font-size: 85%; font-weight: bold; margin-bottom: 10px; } /* div.maplp div#content ul { margin-bottom: 10px; } div.maplp div#content ul li { float: left; font-size: 85%; margin-right: 2em; margin-bottom: 0.5em; } */ div.maplp div#place-menus-box { border-top: 2px solid; width: 420px; margin-bottom: 20px; } div.maplp div#place-menus-box ul { border-bottom: solid 1px; padding: 9px 0px; margin-bottom: 0px; } div.maplp div#place-menus-box ul li { float: left; font-size: 85%; margin-right: 2em; margin-bottom: 0.5em; display: block; width: 110px; } div#rhs-map-help { float: left; width: 180px; margin: 0px 10px 20px 10px; padding: 10px; font-size: 85%; } /*----------------------------------------------------------------------*/ /* Sitemap */ ul.sitemap { padding-left: 2em; margin-bottom: 1em; } ul.level1 { padding: 0px; } a.level1 { font-size: 116%; } a.level1, a.level2 { text-transform: uppercase; display: block; margin-bottom: 0.5em; } a.level2, a.levelN { font-size: 85%; } /*----------------------------------------------------------------------*/ /* google map markers */ div.mapmarkerinfo { font-size: 66%; width: 200px; margin-bottom: 5px; padding-bottom: 1em; } div.mapmarkerinfo .venuename { display: block; margin-bottom: 5px; } div.mapmarkerinfo img, div.mapmarkerinfo div.noimage { display: block; float: left; } div.mapmarkerinfo div.noimage { width: 70px; height: 70px; background-color: #eee; } div.mapmarkerinfo span.summary { display: block; float: right; width: 125px; margin-bottom: 0.5em; } div.mapmarkerinfo span.eventstitle { clear: both; display: block; padding-top: 0.5em; } div.mapmarkerinfo ul { padding: 0px; } div.mapmarkerinfo ul li { padding-top: 0.5em; font-size: 100%; } div.mapmarkerinfo ul li a { display: block; } div#rhs-map-col { float: left; width: 530px; margin: 0px; } div#rhs-map { clear: both; /* otherwise canned search buttons overlap, not sure why */ border: solid 1px #ccc; margin-left: 10px; margin-bottom: 20px; } div#rhs-map div#map { width: 518px; height: 478px; } div#rhs-map-help { height: 60px; } div#rhs-map-controls { width: 500px; padding: 9px; background-color: #f0f0f0; border-top: solid 1px #ccc; } div#rhs-map-controls label#address-label { font-weight: bold; } div#rhs-map-controls input#address { line-height: 20px; } div#rhs-map-controls h2 { font-size: 85%; font-weight: bold; margin-bottom: 10px; } div#rhs-map-controls div.instructions { font-size: 85%; } div#rhs-map-controls fieldset { font-size: 85%; } div#rhs-map-controls fieldset div.input { margin-left: 20px; margin-bottom: 0.5em; } div#rhs-map-controls fieldset div.input label { display: block; } div#rhs-map-controls fieldset div.input-radio { display: inline; margin-right: 2em; margin-bottom: 0.5em; } div#rhs-map-controls fieldset div.input-radio input, div#rhs-map-controls fieldset div.input-radio label { vertical-align: middle; } div#rhs-map-controls fieldset div.input div.input-date { float: left; margin-right: 10px; } div#rhs-map-controls fieldset div.input div.input-date label { display: block; } div#rhs-map-controls fieldset input#map-update-button { display: inline; vertical-align: top; } div#rhs-map-resultset { padding: 9px; font-size: 85%; } div#rhs-map-resultset div.result-nav { margin-bottom: 10px; } div#rhs-map-resultset div.result-nav span.nitems { font-weight: bold; padding-right: 3em; } div#rhs-map-resultset div.result-nav span.disabled-link { color: #999; } div#rhs-map-resultset div.result-item span.title { display: block; } div#rhs-map-resultset div.result-item span.title a { padding-left: 0.5em; } div#rhs-map-resultset div.result-item span.address { display: none; } div#rhs-map-resultset div.result-item span.eventstitle { clear: both; display: block; font-style: italic; padding-top: 0.5em; } div#rhs-map-resultset div.result-item ul { padding: 0px; margin-left: 20px; } div#rhs-map-resultset div.result-item ul li { padding-top: 0.5em; font-size: 100%; } div#rhs-map-resultset div.result-item ul li a { display: block; } /*----------------------------------------------------------------------*/ /* controller: homepage */ div#page.homepage div#content { min-height: 500px; } div#page.homepage div#pagetitle-box { margin-bottom: 0px; } div#page.homepage div#pagetitle-box img { float; right; } div#page.homepage p#pageintro { padding: 5px 0px; margin-bottom: 0px; } div#homepage-rhs { float: left; width: 530px; } div#homepage-latest, div.homepage-section1, div.homepage-section2, div.homepage-website { width: 420px; padding-bottom: 20px; } div#homepage-latest h1, div.homepage-section1 h1 { width: 420px; border-bottom: solid 1px; margin-bottom: 0.5em; } div#homepage-latest div.item { clear: both; width: 420px; } div#homepage-latest h1, div.homepage-section1 h1 { font-size: 85%; font-weight: bold; border-color: #ccc; } div.homepage-website h1, div.homepage-section2 h1 { width: 411px; padding-left: 9px; color: #fff; text-transform: uppercase; line-height: 20px; vertical-align: middle; font-size: 77%; } div#homepage-latest div.item, div.homepage-section1 div.item { width: 420px; } div.homepage-website div.item, div.homepage-section2 div.item { width: 418px; border-style: solid; border-width: 0px 1px 1px 1px; } div#homepage-latest div.item a.img, div.homepage-section1 div.item a.img, div.homepage-section2 div.item a.img { float: left; } div.homepage-website div.item a.img { float: right; } div#homepage-latest div.item div.content, div.homepage-website div.item div.content, div.homepage-section1 div.item div.content, div.homepage-section2 div.item div.content { float: right; } div.homepage-section1 div.item div.content { width: 340px; padding-left: 10px; } div.homepage-section2 div.item div.content, div.homepage-website div.item div.content { width: 330px; padding: 9px; } div#homepage-latest div.item div.content h2 { font-size: 116%; font-weight: bold; } div.homepage-section1 div.item div.content h2 { font-size: 100%<; font-weight: bold; } div.homepage-website div.item div.content h2, div.homepage-section2 div.item div.content h2 { font-size: 85%; } div#homepage-latest div.item div.content p, div.homepage-website div.item div.content p, div.homepage-section1 div.item div.content p, div.homepage-section2 div.item div.content p { margin-top: 0.5em; font-size: 85%; } div#page.homepage div#searchbox, div#homepage-map-box { margin-left: 10px; _background-color: #fff; /* IE6, to hide bleeding C24 gutter lines */ } div#homepage-map-box { padding-bottom: 9px; border-bottom: solid 1px #d4d4d4; margin-bottom: 20px; } div#homepage-map-box, div#homepage-map-box div.content { width: 520px; } div#homepage-map-box h1 { padding-left: 10px; line-height: 20px; vertical-align: middle; } div#homepage-map-box div.content { padding-top: 10px; } div#homepage-map-listings { float: left; width: 200px; } div#homepage-map-listings div.blurb { padding-bottom: 9px; border-bottom: solid 1px #d4d4d4; font-size: 85%; } div#homepage-map-listings ul li { padding: 8px 0px; border-bottom: solid 1px #d4d4d4; } div#homepage-map-listings ul li.last { border-bottom: 0px; } div#homepage-map-listings ul li a.recordtitle { /* font-family: Georgia, serif; */ font-size: 85%; } div#homepage-map-listings ul li div.recordimage { display: none; } div#homepage-map-listings ul li div.recorddate { color: #666; margin-bottom: 5px; } div#homepage-map-listings ul li div.recordsummary { display: block; font-size: 85%; } div#homepage-map-listings a.moreresults { display: block; padding-top: 8px; border-top: solid 1px #d4d4d4; font-size: 85%; } div#homepage-map { float: right; width: 300px; font-size: 85%; float: right; } div#homepage-map div.heading { font-size: 85%; line-height: 20px; vertical-align: middle; padding: 0px 5px; } div#homepage-map ul#map-links { border: solid 1px #d4d4d4; } div#homepage-map ul#map-links li { padding: 4px; border-bottom: solid 1px #d4d4d4; } div#homepage-map ul#map-links li.last { border-bottom: none; } div#map { font-family: Verdana, Helvetica, sans-serif; } div#homepage-partners { width: 960px; clear: both; margin-bottom: 20px; } div#homepage-partners h1 { width: 951px; padding-left: 9px; color: #fff; text-transform: uppercase; line-height: 20px; vertical-align: middle; font-size: 77%; } div#homepage-partners div.content { width: 940px; height: 70px; padding: 9px; border: solid 1px #ccc; border-top: none; } div#homepage-hotspots1 { width: 520px; margin-left: 10px; margin-bottom: 20px; } div#homepage-hotspots1 div.l { width: 200px; margin-right: 10px; } div#homepage-hotspots1 div.r { width: 300px; margin-left: 10px; } /*----------------------------------------------------------------------*/ /* Controller: submission_form_receiver */ div#web-comment-server-result { font-size: 85%; } /*----------------------------------------------------------------------*/ /* browser print styles */ @media print { div#body { width: 980px; } div#page { top: 0px; left: 0px; } div.advert, div#ad-mpu-warning, #google-adsense, ul.taglist { display: none !important; } .eqcol { margin-bottom: 0px !important; padding-bottom: 0px !important; } .eqcol-container { overflow: visible; } /* IE hacks */ div.homepage-section1 div.item div.content { _width: 338px; } div.venuepane div.details { _padding-right: 8px; } div#rhs-map { _margin-left: 9px; } table#canned-search-buttons { _display: none; } div.homepage-section1 p { _width: 320px; /* IE6 print preview crashes without this */ } } /* end @media print */ /*----------------------------------------------------------------------*/ /* ExtJS */ .dashboard img { display: inline; } /*----------------------------------------------------------------------*/ /* venue thumbnail carousel */ #carousel { height: 102px; margin-bottom: 1em; } .c24_venue #carousel-prev { float: left; margin-top: 25px; background: url("../../img/c24/carousel-thumbnail-navigation-buttons.png") no-repeat -8px 0; width: 22px; height: 54px; cursor: pointer; } .c24_venue #carousel-next { float: right; margin-top: 25px; background: url("../../img/c24/carousel-thumbnail-navigation-buttons.png") no-repeat -41px 0; width: 22px; height: 54px; cursor: pointer; } .c24_venue #carousel-strip { float: left; overflow: hidden; width: 370px; height: 102px; } .c24_venue #carousel-strip ul { margin: 0; list-style: none; position: relative; width: 2000px; } .c24_venue #carousel-strip ul li { float: left; width: 70px; padding: 3px; } .c24_venue #carousel-strip ul li img { width: 100%; cursor: pointer; } /*----------------------------------------------------------------------*/ /* Object page */ .object-data { clear: both; margin-top: 0.5em; } .object-data .caption { display: inline; font-weight: bold; margin-right: 0.25em; } .object-data .data { display: inline; } /*----------------------------------------------------------------------*/ /* article carousel gallery */ .obj-carousel { background-color: #333; margin-bottom: 15px; /* position: relative; */ } .obj-carousel .gallery { overflow: hidden; position: relative; } .obj-carousel .gallery .nav { display: none; position: absolute; top: 0px; right: 0px; cursor: pointer; padding: 5px; } .obj-carousel .gallery .nav span { display: block; float: left; background: url("../../img/c24/carousel-navigation-buttons.png") no-repeat; height: 18px; margin: 0px 5px; cursor: pointer; } .obj-carousel .gallery .nav .prev { background-position: -1px 0; width: 13px; } .obj-carousel .gallery .nav .next { background-position: -18px 0; width: 13px; } .obj-carousel .gallery .nav .pause { background-position: -50px 0; width: 14px; } .obj-carousel .gallery .nav .play { background-position: -35px 0; width: 11px; } .obj-carousel .gallery .nav .zoom { background-position: -109px 0; width: 19px; } .obj-carousel .gallery .nav .close { background-position: -91px 0; width: 16px; } .obj-carousel .gallery .caption-wrap { display: none; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); bottom: 0; color: #fff; padding: 10px; position: absolute; } .obj-carousel .gallery .caption .view-source { float: right; margin-top: 10px; display: inline-block; } .obj-carousel .gallery .view-source { display: none; color: #fff; } .obj-carousel .gallery .main-img-wrap { margin: auto; width: auto; height: 100%; overflow: hidden; } .obj-carousel .gallery img { margin: auto; max-width: 100%; } .obj-carousel ul.carousel-data { display: none; } /* body carousel */ .obj-carousel .body-carousel { width: 420px; height: 236px; } .obj-carousel .body-carousel .gallery { height: 236px; } .obj-carousel .body-carousel .gallery img { max-width: 100%; max-height: 236px; } .obj-carousel .body-carousel .gallery .main-img-wrap { cursor: pointer; } .obj-carousel .body-carousel .gallery .caption-wrap { width: 400px; } /* popup carousel */ .obj-carousel .popup-carousel { display: none; margin-bottom: 0px; /* height & width set by javascript */ -moz-box-shadow: 0px 0px 20px #666; -webkit-box-shadow: 0px 0px 20px #666; box-shadow: 0px 0px 20px #666; background-color: #000; } .obj-carousel .popup-carousel .gallery { height: 100%; } .obj-carousel .popup-carousel .gallery img { max-width: 100%; max-height: 100%; } .obj-carousel .popup-carousel .gallery .caption-wrap { width: 100%; }