body {
	margin: 0px;
	background-color: #DBE3F3;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.4em;
}
h2 {
	font-size: 14px;
	line-height: 1.3em;
	color: #0066CC;
	margin: 0px 0px 3px 0px;
	text-decoration: none;
}
.archive h2 {
	margin: 0px;
}
a {
	text-decoration: none;
	color: #0066CC;
}
a img { /* ffs, firefox */
	border: none;
}
a:hover {
	text-decoration: underline;
}
ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
ul li {
	padding-left: 15px;
	background-image: url(../images/list-bullet.gif);
	background-position: left 6px;
	background-repeat: no-repeat;
}
hr {
	width: 80%;
	border: none;
	border-top: 1px solid #ccc;
}
/*
	I cannot disable chosen.js without it screwing up the back-end so I'm having to
	override it as best as I can.
*/
.chzn-drop ul li {
	/* The padding gets overridden by chosen.css */
	background-image: none;
}
.chzn-container {
	width: auto !important; /* The js sets an inline width but it's incorrect. */
}
/* weird... but tables appear to have a small default cellspacing. */
table {
	border-spacing: 0px;
}
#centre ul {
	margin-bottom: 10px;
}
/* Mainly here for the help document I wrote for adding sobi2 entries on the front-end. */
ol li {
	margin: 10px 0px 10px 0px;
}
#main {
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 1024px;
	background-image: url(../images/bg-body.jpg);
	background-repeat: repeat-y;
}
#body {
	width: 950px;
	_width: 951px; /* IE6, wtf */
	margin-left: auto;
	margin-right: auto;
}
#container {
	background-color: #FFFFFF;
}
#top-bar {
	height: 10px;
	width: 100%;
	background-image: url(../images/bg-top-bar.jpg);
	background-repeat: repeat-x;
}
#top-nav {
	width: 770px;
	float: left;
}
#banner {
	height: 250px;
}
#top-menu {
	background-image: url(../images/bg-top-menu.jpg);
	background-repeat: repeat-x;
	height: 30px;
	width: 770px;
	font-size: 13px;
	float: left;
}
#top-menu ul {
}
#top-menu ul li {
	float: left;
	background-image: url(../images/bg-top-menu-bullet.jpg);
	background-position: center right;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	position: relative;
}
#top-menu ul li a {
	color: #E6E6E6;
	display: block; /* This is key to working in Safari!  Also note the float: left in the class above. */
	text-decoration: none;
	margin: 0px;
	padding: 7px 10px 8px 10px; /* Adjust top/bottom to suit the hover highlight on the menu. */
}
#top-menu ul li a:hover {
	text-decoration: underline;
	background-image: url(../images/bg-top-menu-highlighted.jpg);
	background-repeat: repeat-x;
}
#top-menu ul li.active a {
	text-decoration: none;
	background-image: url(../images/bg-top-menu-highlighted.jpg);
	background-repeat: repeat-x;
}
/* fancy menu stuff */
/* Active top-level menu entry */
#top-menu ul li.active li a,
#top-nav-menu ul li ul li a {
	background-image: none;
	background-color: #3366FF;
	color: #E6E6E6;
	text-decoration: none;
	font-weight: normal;
}
#top-menu ul li.active li a:hover {
	text-decoration: underline;
}
#top-menu ul li ul {
	position: absolute;
	left: -999em;
	top: 30px;
	height: auto;
	margin: 0px;
	font-size: 12px;
	z-index: 100; /* Fixes Google ad hover issue */
}
#top-menu ul li ul a {
	width: 140px;
	margin: 0px;
	padding: 6px 12px 6px 8px;
	background-image: none;
	background-color: #3366FF;
	color: #E6E6E6;
	border: 1px solid #0033FF;
	border-top: none;
	opacity: 0.9;
}
#top-menu ul li ul a:hover {
	background-image: none;
	background-color: #0033FF;
	color: #E6E6E6;
	text-decoration: underline;
}
/* Active submenu entry */
#top-menu ul li ul li.active a {
	font-weight: bold;
	background-color: #3366FF;
	color: #E6E6E6;
	border: 1px solid #0033FF;
}
#top-menu ul li ul ul {
	margin: -24px 0 0 145px !important;
	margin: -24px 0 0 144px; /* IE6 fix */
	border: 1px solid #0066CC;
	width: 145px;
}
#top-menu ul li:hover ul ul, #top-menu ul li:hover ul ul ul, #top-menu ul li.sfhover ul ul, #top-menu ul li.sfhover ul ul ul {
	left: -999em;
}
#top-menu ul li:hover ul, #top-menu ul li li:hover ul, #top-menu ul li li li:hover ul, #top-menu ul li.sfhover ul, #top-menu ul li li.sfhover ul, #top-menu ul li li li.sfhover ul {
	left: auto;
}
#top-menu ul li:hover, #top-menu ul li.sfhover {
	background-image: none;
}
.category-desc hr {
	border: none;
	border-top: 1px solid #CCCCCC;
}
/* end of fancy menu stuff */
/* Custom styles that I use in the editor (see editor.css) */
.item-page p {
	margin-top: 0px;
}
.photo-table-left {
	float: left;
	margin: -3px 10px 10px 0px;
}
.photo-table-centre {
        margin: 0px auto 10px auto;
}
.photo-table-right {
	float: right;
	margin: -3px 0px 10px 10px;
}
.photo-table-left,
.photo-table-right,
.photo-table-centre {
	padding: 5px;
	border: 1px solid #EEE;
	border-radius: 10px;
	background-color: #F7F7F7;
	border-color: #EEE;
}
.photo-table-left img,
.photo-table-right img,
.photo-table-centre img {
	border-radius: 5px;
	margin-bottom: 3px !important; /* Overrides an inline style attribute by JCE Mediabox */
}
#jcemediabox-popup-img {
	border-radius: 5px;
}
#jcemediabox-popup-caption p {
	font-style: italic;
}
/* Left sidebar */
#left {
	width: 180px;
	background-image: url(../images/bg-left-nav.jpg);
	background-repeat: repeat-x;
	background-position: top;
	float: left;
	min-height: 800px;
}
/* Left banner ads: note that this applies to all of them. */
#left .banneritem {
	width: 160px;
	margin: 10px auto 10px auto;
}
/* Modules: just add here as needed. Any further customisation can be added below. */
.moduletable-search,
.moduletable-events,
.moduletable-latest-results ,
.moduletable-multisport,
.moduletable-tri {
	border-top: 1px solid #CCCCFF;
	margin: 10px;
	padding: 5px 0px 0px 0px;
}
.moduletable-ctas {
	margin-top: 4px;
}
.moduletable-ctas p {
	margin-top: 0px;
}
.moduletable-search {
	padding-top: 10px;
}
.moduletable-search label {
	display: none;
}
.moduletable-search .inputbox {
	color: #806000;
	border: 1px solid #999999;
	border-radius: 3px;
	padding: 2px;
	width: 155px;
}
.moduletable-hats {
	margin: 10px 0px 10px 0px;
}
.moduletable-hats h3 {
	margin-top: 2px;
	font-size: 12px;
}
/* Stupid editor */
.moduletable-hats p {
	margin: 0px;
}
/* CTAs for the "other" site */
.moduletable-multisport,
.moduletable-tri {
	margin: 10px 0px 10px 0px;
}
.moduletable-multisport h3 {
	margin-top: 2px;
	font-size: 12px;
}
.moduletable-events h3,
.moduletable-latest-results h3
{
	font-size: 14px;
	font-weight: normal;
	color: #0033CC;
	margin: 0px 0px 5px 0px;
}
.moduletable-latest-results { /* Moved to the "right" position */
	margin: 5px;
	border-top: none; /* Tri site only, until I figure out something to put above it */
}
.moduletable-latest-results ul li {
	margin-bottom: 2px;
}
/* Facebook Like button */
.moduletable-facebooklike {
	float: right;
	width: 90px; /* keeps FB iframe screwups from destroying my layout. It's happening regularly in IE6. */
	height: 25px;
	overflow: hidden;
	margin: 5px 0px 0px 0px;
}
/* Thanks to JCE for wrapping iframes with a <p> tag. */
.moduletable-facebooklike p {
	margin: 0px;
}
/* Ads (both left and right) */
#left .moduletable-ad {
/*
	Grumble, 'auto' left and right isn't working with the OMD Kathmandu ad.
	margin: 10px auto 0px auto;
*/
	margin: 10px 10px 0px 10px;
}
/* You can now hide annoying animated ads (but only for that page-load). */
a#banner-hide-link {
	color: #999;
	font-size: 10px;
	display: block;
	width: 40px;
	text-align: right;
	margin: 0px 0px 0px auto;
	padding: 0px 3px 0px 0px;
}
a#banner-hide-link:hover {
	text-decoration: none;
	color: #333;
}
#right .moduletable-ad {
	margin: 8px 0px 0px 0px;
	width: 160px;
}
/* May as well keep all of the ad classes together. */
#ads-bottom {
	width: 470px;
	margin: 10px auto 0px auto;
}
/* Upcoming Events module */
.moduletable-events { /* Moved to the "right" position */
	margin: 5px;
}
.moduletable-events .mod_events_latest_table {
	margin-top: 5px;
}
.moduletable-events .mod_events_latest_content {
	display: block;
	margin-left: 10px;
}
.moduletable-events .mod_events_latest_date {
	color: #806000;
}
.moduletable-events .mod_events_latest_callink {
	margin-top: 5px;
	text-align: right;
}
.moduletable-events .mod_events_latest_callink a {
	color: #CC0000;
}
/* End of Upcoming Events module */
#centre {
	width: 590px;
	padding: 8px 10px 10px 10px;
	margin: 0px;
	float: left;
}
#centre label {
	font-weight: bold;
}
#right {
	float: left;
	width: 160px;
/*	position: relative; /* For FB Like button positioning */
}
#footer {
	height: 80px;
	margin: 0px auto 0px auto;
	clear: both;
	text-align: center;
	color: #CCCCCC;
	background-image: url(../images/bg-footer.jpg);
	background-repeat: no-repeat;
	background-position: center;
}
#footer p {
	margin: 0px;
	padding: 4px 0px 1px 0px;
}
#footer a {
	color: #CCCCCC;
	text-decoration: underline;
}
#footer a:hover {
	text-decoration: none;
}
#footer ul {
	margin: 0px;
	padding: 0px;
}
#footer ul li {
	list-style: none;
	margin: 0px 7px 0px 7px;
	display: inline;
	background-image: none;
	padding: 0px;
}
#footer ul li a {
	text-decoration: none;
	color: #CCCCCC;
}
#footer ul li a:hover {
	text-decoration: underline;
}
.fb-share-button {
	width: 56px;
	float: right;
	margin: -2px 5px 0px 5px;
}
h1,
.contentpagetitle,
.componentheading,
.contentheading,
.jev_evdt .jev_evdt_title {
	margin: 0px 0px 5px 0px;
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
	color: #0066CC;
	text-decoration: none;
}
.item-page iframe {
	border: 1px solid #999;
	padding: 2px;
}
.column-1, .column-2 {
	padding: 0px;
	float: left;
	width: 285px;
}
.column-1 {
	margin: 0px 5px 0px 0px;
}
.column-2 {
	margin: 0px 0px 0px 5px;
}
/*** System messages and errors: used by user registration among other things. ***/
dl#system-message {
	border: 2px solid #FF9900;
	padding: 5px;
	margin: 5px;
}
dl#system-message dt.error,
dl#system-message dt.warning {
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
}
dl#system-message dt.message {
	font-size: 12px;
	font-weight: bold;
	color: #009900;
}
dl#system-message dd{
	margin-left: 0px;
}
dl#system-message ul{
	padding-left: 0px;
}
/* The form validation sets these classes when an input is no good */
input.invalid {
	border: 2px solid #FF3333;
}
label.invalid {
	color: #FF3333;
}
/* Club Finder page. */
#club-finder {
}
#club-finder h2 {
	color: #996600;
}
/*** Frontpage ***/
.moduletable-main-intro {
	border-bottom: 1px solid #CCCCCC;
	padding-bottom: 2px;
	margin-bottom: 4px;
}
.moduletable-main-intro p {
	margin: 0px 0px 5px 0px;
}
.moduletable-breadcrumbs {
	margin-bottom: 5px;
}
.moduletable-announcement {
	border: 1px dashed red;
	background-color: #FFFFEE;
	padding: 5px;
	margin: 0px 0px 10px 0px;
}
.moduletable-announcement h2 {
	font-size: 14px;
	line-height: 1.3em;
	color: #0066CC;
	margin: 0px 0px 3px 0px;
	text-decoration: none;
}
.moduletable-announcement p {
	margin: 2px 0px 2px 0px;
}
.articles h2 {
	margin: 0px;
}
.item h2 a,
.archive h2 a {
	font-size: 14px;
	line-height: 1.3em;
	color: #0066CC;
	text-decoration: none;
}
.item h2 a:hover,
.archive h2 a:hover {
	text-decoration: underline;
}
.item p {
	margin-top: 2px;
	margin-bottom: 5px;
}
.item .intro a,
#archive-items .intro a {
	color: #000000;
}
.item .intro a:hover,
#archive-items .intro a:hover {
	text-decoration: none;
}
.article-thumb {
	float: left;
	border: 1px solid #DDDDDD;
	border-radius: 3px;
	margin: 2px 5px 0px 0px;
	padding: 2px;
	border-radius: 3px;
}
/* Linked images: usually gallery items */
.item img a {
	border: none;
}
/* A little spacing */
.link-section,
.link-category {
	margin-top: 2px;
	margin-bottom: 2px;
	font-size: 12px;
	color: #996600;
}
.link-section a,
.link-category a {
	text-decoration: none;
	color: #996600;
}
.link-section a:hover,
.link-category a:hover {
	text-decoration: underline;
}
.publish-date,
.published {
	color: #666666;
	margin-left: 0px;
}
a.readon {
	color: #0066CC;
	text-decoration: none;
	background-image: url(../images/bg-readmore.gif);
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 10px;
}
a.readon:hover {
	text-decoration: underline;
}
.row-separator {
	display: block;
	padding: 2px 1px 1px 1px;
	margin: 0px auto 10px auto;
	width: 80%;
	font-size: 0px;
	line-height: 0px;
	border-bottom: 1px solid #CCCCCC;
	clear: both; /* Sometimes we have a short intro with an image */
}
/* Content items */
.article-info {
	margin: 5px 0px 5px 0px;
}
.article-info dd {
	margin: 5px 0px 5px 0px;
}
/* I want tighter spacing for the category pages. */
.blog h2,
.blog-featured h2 {
	margin: 0px;
}
.blog .article-info,
.blog-featured .article-info {
	margin: 0px;
}
.blog .article-info dd,
.blog-featured .article-info dd {
	margin: 0px;
}
/* Override for the archive page */
.archive .article-info {
	margin: 0px;
}
.category-name {
	margin-left: 0px;
}
.section-category-links a,
.category-name a {
	color: #996600;
	font-size: 12px;
}
.item-page h2 {
	font-size: 14px;
	color: #0066CC;
	text-decoration: underline;
	font-weight: normal;
}
h3 {
	font-size: 13px;
	color: #0066CC;
	font-weight: normal;
}
h4 {
	font-size: 12px;
	color: #0066CC;
	font-weight: bold;
	margin: 0.3em 0em 0.3em 0em;
}
/* Search results page */
.search .search-no-results {
	margin: 10px 3px;
	font-style: italic;
}
.search fieldset {
	border: 1px solid #999999;
	padding: 10px;
	background-color: #F7F7FF;
}
.search .error {
	color: #FF0000;
	font-weight: bold;
	margin: 10px 0px 0px 5px;
}
.search .phrases-box {
	margin: 10px 0px 10px 0px;
}
.search .phrases-box .controls {
	float: left;
	margin-top: 2px;
}
.search label.ordering {
	margin-left: 10px;
}
.search .search-only {
	font-weight: bold;
}
.search .limit-box {
	margin-left: 10px;
}
.search .searchintro {
	margin: 10px 0px 10px 0px;
}
.search p.counter {
	text-align: center;
}
dl.search-results {
	border-top: 1px solid #CCCCCC;
	padding-top: 5px;
}
.search-results dd {
	padding-left: 25px;
	margin: 0px;
}
.search-results dt.result-title {
	font-size: 12px;
}
.search-results dd.result-category {
	color: #806000;
	margin: 2px 0px 2px 0px;
}
.search-results dd.result-text {
	padding-bottom: 5px;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 5px;
}

/* Used by all banners (there are exceptions above for the main homepage banner images) */
.clr {
	clear: both;
}
.pagination,
#dm_nav {
	text-align: center;
	margin-top: 10px;
}
.pagination ul {
	list-style: none;
}
.pagination ul li {
	background-image: none;
	padding-left: 0px;
	margin: 0px 5px 0px 5px;
	display: inline;
}
.description {
	margin-bottom: 10px;
}
/* Tooltips for the front-end */
/* It's not possible to remove the paginator next/previous/start/end tooltips so I'm hiding them. */
div.tooltip {
	display: none !important;
}
/* I don't remember what these are for... should I get rid of them? */
div.tool-tip {
	border: 1px solid #00f;
	padding: 4px;
	background-color: #ffff99;
}
div.tool-tip .tool-title {
	font-weight: bold;
	color: #00f;
}
div.tool-text {
}
/* Hide empty JEvents header table (I turned off the component heading so I can insert my blurb module) */
#jevents_header {
	display: none;
}
/* Hide JEvents options when logged in */
.ev_adminpanel form {
	display: none;
}
/* Hide JEvents logo on the submission form */
div.header.icon-48-jevents {
	background-image: none;
	padding-left: 0px !important; /* grumble */
	margin-left: 0px;
}
#jevents_body .maintable .tableh1 a,
#jevents_body .maintable .tableh1 a:hover {
	color: #0066CC;
}
#jevents_body .tableh1 #calendar_disclaimer {
	display: none;
}
#jevents_body .tableh1 ol,
#jevents_body .tableh1 ol li {
	margin: 5px 0px 5px 0px;
}
/* I don't seem to be able to "unset" it. */
#jevents_body p {
	margin: 1em 0px 1em 0px;
}
/* This also overwrites links in the calendar view... */
#jevents_body a,
#jevents_body a:hover {
	color: #0066CC;
}
/* ...and this sets those ones back. */
#jevents_body .maintable a,
#jevents_body .maintable a:hover {
	color: #606F79;
}
#jevents_body .maintable .tablev1 a,
#jevents_body .maintable .tablev1 a:hover {
	color: #FFFFFF;
}
/* The links on the day-headings in the weekly view */
#jevents_body a.ev_link_weekday,
#jevents_body a.ev_link_weekday:hover {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 12px;
}
/* I want MY font choices, thanks. */
#jevents_body td, #jevents_body tr, #jevents_body p, #jevents_body div {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
	line-height: 1.4em;
}
/* This is the table in the monthly view.  Smaller text helps keep the layout in control. */
#jevents_body .maintable {
	font-size: 11px;
}
/* This comes with quite a bit of baggage that we don't want (the template has been modified to use h2 for the details view heading). */
/* Update: make it look like a normal H1 */
/* Update2: I've made it into an actual H1. In case I put in some actual H2s, I'll make these look like a normal H2. */
#jevents_body h2 {
	color: #0066CC;
	background-image: none;
	background-position: none;
	background-repeat: none;
	text-decoration: none;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3em;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
}
#jevents_body h3 {
	font-size: 14px;
	font-weight: normal;
	color: #0066CC;
	margin: 0px 0px 5px 0px;
}
/* I have to be really specific to override the built-in styles. */
#jevents_body .jev_evdt {
	padding: 0px; /* ffs */
}
#jevents_body .jev_evdt .jev_evdt_summary,
#jevents_body .jev_evdt .jev_evdt_contact,
#jevents_body .jev_evdt .jev_evdt_location {
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}
#jevents_body .jev_evdt .jev_evdt_creator,
#jevents_body .jev_evdt .jev_evdt_hits,
#jevents_body .jev_evdt .jev_evdt_extrainf {
	display: none;
}
#jevents_body .jev_evdt .jev_evdt_desc {
	padding: 0px;
}
#jevents_body .tableh1 {
	font-size: inherit;
	background-image: none;
	background-position: none;
	background-repeat: none;
	background-color: none;
	border: none;
	padding: 0px;
}
#jevents_body .tableh1 p ,
#jevents_body .table1 ol li{
	line-height: 1.3em;
}
#jevents_body .maintable {
	border: none;
}
#jevents_body .contentpaneopen td {
	padding-left: 0px;
}
#jevents_body .event_legend_viewonly {
	margin: 5px 0px 5px 5px;
	color: #606F79;
}
/* The jevents table caused issues with Safari when the event category display was added */
#jevents_body  .tablec div.event_legend_container {
	width: 640px;
}
/* Widen the legend items slightly */
#jevents_body div.event_legend_item {
	width: 140px;
}
#jevents_body td.buttontext {
	padding: 0px 5px 0px 5px;
}
#jevents_body .buttontext a,
#jevents_body .today,
#jevents_body .caldaydigits,
#jevents_body .previousmonth, #jevents_body .previousday, #jevents_body .previousweek,
#jevents_body .nextmonth, #jevents_body .nextday, #jevents_body .nextweek
{
	font-size: inherit;
}
#jevents_body .previousmonth a img,
#jevents_body .nextmonth a img {
	position: relative;
	top: -4px;
}
#jevents_body .sundayemptyclr,
#jevents_body .weekdayemptyclr,
#jevents_body .weekdaytopclr,
#jevents_body .sundaytopclr {
	font-size: inherit;
}
/* These are the borders inside the monthly calendar view. */
#jevents_body .previousmonth,
#jevents_body .previousday,
#jevents_body .previousweek,
#jevents_body .currentmonth,
#jevents_body .currentday,
#jevents_body .currentweek,
#jevents_body .sundayemptyclr,
#jevents_body .weekdayemptyclr,
#jevents_body .weekdayclr,
#jevents_body .sundayclr,
#jevents_body .todayclr,
#jevents_body .tablec {
	border-left: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	padding-top: 3px;
}
#jevents_body .caldaydigits {
	color: #666666;
}
/* More borders, chage with the above */
#jevents_body .nextmonth, #jevents_body .nextday, #jevents_body .nextweek {
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
}
/* Tidy up the daily view */
#jevents_body li.ev_td_li {
	margin: 10px 0px 10px 0px;
	padding-left: 5px;
}
.jev_row_loc_heading {
	font-weight: bold;
}
li.ev_td_li {
	background: none;
}
/* Monthly calendar main view: tidy up the event display a little */
#jevents_body {
	line-height: 1.2em; /* 'auto' gets eaten and won't override the jevents css. */
}
#jevents_body .eventfull {
	border: none;
	margin-bottom: 5px;
	border-radius: 5px;
	padding: 3px 3px 0px 3px;
}
/* We want the link to expand to fill the entire width of its container */
#jevents_body .eventfull a {
	display: block;
}
/* Monthly calendar tooltip styles.  These don't work with #jevents_body in front of them. */
div.jevtt_title {
	border: 1px solid #ddd;
	border-bottom: none;
}
div.jevtt_text {
	border: 1px solid #ddd;
	border-top: none;
	font-size: 11px;
}
#jevents_body table.event-icons td {
	width: 120px;
	padding: 5px 10px 5px 10px;
	font-size: 12px;
}
#jevents_body table.event-icons td img {
	display: block;
	margin: 0px 0px 5px 0px;
}

/* Ignite Gallery */

/* We also need this to remove the border that it puts around a hyperlinked image */
div.main_images_wrapper .main_thumb_container a img {
	border: none;
}
div.main_images_wrapper .large_img {
	border: 1px solid #CCCCCC;
	box-shadow: none;
	padding: 2px;
}
div.main_images_wrapper .thumbs_div {
	margin: 0px;
	position: relative;
}
div.main_image_slideshow_wrapper {
	position: relative;
}
div.main_img_numbering {
	position: absolute;
	left: 280px;
	bottom: -20px;
}
/* Reposition these bits in the 3-column layout (article photo gallery profile).  120px narrower. */
.centre-3col div.main_img_numbering {
	left: 160px;
}
/* Grr, a '#jevents_body div" style was overriding this :/ */
#jevents_body div.main_images_wrapper .main_thumb_table .thumbs_index,
div.main_images_wrapper .main_thumb_table .thumbs_index {
	position: absolute;
	left: 5px;
	top: 5px;
	margin: 0px;
	padding: 1px 3px 1px 3px;
	background-color: #000000;
	color: #ffffff;
	text-align: left;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	z-index: 1;
}
/* JEvents again */
#jevents_body div.main_images_wrapper .main_large_image  .main_image_index,
div.main_images_wrapper .main_large_image  .main_image_index {
	position: absolute;
	margin: 3px;
	padding: 1px 3px 1px 3px;
	background-color: #000000;
	color: #ffffff;
	text-align: left;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity: 0.6;
	opacity: 0.6;
	z-index: 99;
}
div.main_slideshow_buttons {
	float: none;
	margin: 5px auto 5px auto;
	width: 99px;
}
div.main_slideshow_buttons img {
	border: none;
}
div.main_large_image {
	padding: 0px;
}
/* Allow independent width of main image and thumbs */
div.main_image_slideshow_wrapper {
	float: none;
}
div.main_thumb_container {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
div.main_thumbs_arrow_wrapper {
	float: none;
	margin: 5px auto 5px auto;
}
div.main_left_right_arrows_div {
	float: none;
	margin-left: auto;
	margin-right: auto;
}

/* Override the normal .article-text img class (galleries are embedded in content items) */
.article-text .main_left_right_arrows_div img {
	border: none;
	padding: 0px;
}
.article-text .main_thumb_table td {
	padding: 0px;
}

/* News Archive */
.archive fieldset {
	border: 1px solid #D7D7D7;
	background-color: #F7F7F7;
	border-radius: 3px;
}
#archive-items .row0,
#archive-items .row1 {
	padding: 5px 0px 5px 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-top: 1px solid #CCCCCC;
	background-image: none;
	clear: both;
}
#archive-items dl,
#archive-items dd {
	margin: 0px;
}
#archive-items .intro p {
	margin: 2px 0px 0px 0px;
}
/* Override the main class */
#archive-items .article-thumb {
	margin-top: 0px;
}
/*
	Google Maps plugin
	The relative position and height are to fix a problem with the disclaimer moving to the top
	when you "enlarge" the map then close its lightbox.
	See also the position/left/top/width attributes for "div.googlemap .googlemapdisclaimer" below.
	UPDATE: I've moved the disclaimer out of the googlemap div in the HTML.
*/
div.googlemap {
	margin-top: 10px;
	border: 1px solid #ccc;
	width: 580px;
	margin: 10px auto 0px auto;
}

/* The jevents_body declaration is there because otherwise the normal jevents_body stuff overrides us. */
div.googlemap a.lightboxlink,
#jevents_body div.googlemap a.lightboxlink {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	margin: 0px auto 0px auto;
	padding: 3px 0px;
	background-color: #eee;
	color: #03c;
	border-radius: 10px 10px 0px 0px;
}

div.googlemap a.lightboxlink:hover,
#jevents_body div.googlemap a.lightboxlink:hover {
	text-decoration: none;
	color: #06f;
}

div.googlemap .googlemapdisclaimer {
	text-align: center;
	font-style: italic;
	background-color: #eee;
	border-radius: 0px 0px 10px 10px;
	padding: 2px 0px 2px 0px;
}

/* These styles control alignments of the elements inside the popup within the Google map. */
div.gmnoprint {
	text-align: center;
}

div.gmnoprint .mapdirform {
	text-align: left;
}

div.gmnoprint .mapdirform .button {
	margin: 0px auto 0px auto;
	display: block;
}

/* Round the corners of the Google Map popup */
/* I have to do both mb_centre and mb_contents for Safari. */
div#mb_center,
div#mb_contents {
	border-radius: 10px 10px 0px 0px;
}
div#mb_bottom {
	border-radius: 0px 0px 10px 10px;
}