/* Various city hub only tweaks*/



/* Main events calendar css */

html {
   --main-bg-color: #f4f5f4;
	--link-color: #136278;
	--alt-dark-color: #002a32;
	--footer-color: var(--alt-dark-color);
	--panel-color: #F6FFD5;
	--bright-bg-color: #00b5b5;
	--box-bg-color: rgba(210, 219, 223, 0.8);
}

/*html {
     --main-bg-color: #f4f3ee;
     --link-color: #271a0e;
     --alt-dark-color: #93c8c4;
     --footer-color: var(--alt-dark-color);
}*/



body {
	background-color: var(--main-bg-color);
	font-weight: 300;
   background-image: url('/images/new%20banner.png');
   background-repeat: no-repeat;
   
}


#contentarea {
	margin-top: 20px;
   
}

.hubbox {
	margin-bottom: 20px;
}


p {
	margin-bottom: .5em
}


.poster a.editlink {
	color: yellow;
	font-weight: bold
}

.imagecredit {
	text-align: right;
	font-size: smaller;
	color: #0f5056;
	line-height: 1.2;
   margin-top: 3em;
}

.spaceafter {
	margin-bottom: 3em;
}


.fullwidthbanner {
   max-width: 100%;
   height: auto;
}

/* New calendar section */


button.caldate {
   font-size: 200%;
   line-height: 0.3;
   font-family: Poppins, sans-serif;
   font-weight: 300;
   background-color: #fff;
   color: var(--alt-dark-color);
   /*width: 4rem;*/
   display: block;
   border:0;
   border-radius: 0.2em;
   padding: 0 0.1em 0.3em 0.1em;
   text-align: center;
   /*float: left;
   margin-right: 20px;
   margin-bottom: 20px;*/
   margin-top: 0;
   box-sizing: border-box;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
   height: min-content;
   flex-basis: 4rem;
}

button.caldate.noredbar {
   background: #fff;
}

button.caldate .weekday {
   color: #be0000;
   font-size: 45%;
   line-height: 2;
   margin-bottom: 0.4em;
   display: block;
}

button.caldate .day {
   display: block;
   margin-bottom: 0.3em;
}

button.caldate .month {
   color: var(--alt-dark-color);
   font-size: 45%;
   line-height: 1;
   text-transform:  uppercase;
}

button.caldate:focus {
   box-shadow: 0px 0px 0px 5px #08b8ee;
   outline-width: 0;
   /*outline-color: #fff;*/
}


div.caltitleindent {
   flex: 1;
   margin-right: var(--box-padding);
}

.newstext div.item {
	display: inline-block;
	vertical-align: top;
}

.newstext div.label {
   width: 6em;
   display: inline-block;
   font-weight: bold;
}

/*
 * 
 * Stopped doing this. Removing spacing instead. Font-size zero is bad for accessibility.
 * 
#cal-container {
   font-size:0;
}
*/


#cal-container {
   display: block;
}

.eventsGrid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
	/* width: 100%; */
	/* grid-auto-rows: 1fr;*/
}

.eventsGrid h2 {
   margin-top: 0;
}

.eventsGrid .new_row {
   grid-column-start: 1;
   margin-top: 20px;
}

.eventsGrid .new_row:first-child {
	margin-top: 0;
}

#cal-container .newsitem {
   vertical-align: top;
   border-bottom:0;
   background-color: transparent;
   text-align: left;
   color: var(--link-color);
   font-weight: 400;
}


#cal-container .newsitem.blank {
   border: 0;
   margin: 0;
   padding: 0;
   height: 0;
} /* empty stub newsitem to enable justification  */


#cal-container .newsitem.col_0 {
   margin-right: 0;
}

.citytag {
   background-color: #d51726;
   color: white;
   font-size: 11px;
   line-height: 11px;
   display: inline-block;
   padding: 1px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   vertical-align: super;
   margin-left: 1em;
   letter-spacing:0;
}

.pupillagetag {
   background-color: #580bff;
   color: white;
   font-size: 11px;
   line-height: 11px;
   display: inline-block;
   padding: 1px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   vertical-align: super;
   margin-left:1em;
      letter-spacing:0;

}
.solicitorstag {
   background-color: #778f0a;
   color: white;
   font-size: 11px;
   line-height: 11px;
   display: inline-block;
   padding: 1px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   vertical-align: super;
   margin-left:1em;
      letter-spacing:0;

}

#cal-container .newsitem.eventImportant {
   border-top: 2px solid #25c1d2;
   background: linear-gradient(180deg, rgba(37,193,210,0.2) 0%, rgba(144,223,232,0.2) .5em, rgba(255,255,255,0.2) 100%);
}


.modalbody { margin-top: 1em;} 
.modalbody p {
   margin-top:0;
   margin-bottom: 1em;
}

.modalbody h2, .modalbody h3 ,.modalbody h4 {
	line-height: 1.4;
}


.booking, .caltime, .venue {margin-bottom: 0.2em}


.newsitem .newstitle .caltitleindent:hover, .newsitem .storylink:hover + .caltitleindent {
	text-decoration: underline;
   cursor: pointer;
}



.eventDate {
	line-height: 1.2;
   font-size: 80%;
	letter-spacing: 0;
	font-weight: 300;
}


.eventExternalLink {
   font-weight: bold;
}


/*
.caltitleindent, .caltitleindent b  {font-weight: 400;} 
*/

.newstitle {
	margin-bottom: 5px;
	padding: 0;
}


/* Featured slider items
 * 
This is no longer a slider but a stack of items, but the name has stuck

*/

.featuredList{
   position: relative;
   overflow: auto;
}

.featuredItem {
   width: 50%;
   height: 250px;
   background-size: cover;
   color: #fff;
   float: left; 
}

.featuredItem button.caldate {
   font-size: 250%;
   margin-left: 20px;
   margin-top: 20px;
   flex: 0 1 4.5rem;
   height: fit-content;
}

.caltitle {
   display: flex;
   width: 100%;
   gap: 20px;
}
.featuredItem .caltitleindent {
	font-size: 150%;
	margin-top: 20px;
	width: calc(100% - var(--box-padding));
	height: 220px;
	font-weight: 300;
}
.featuredItem .caltitleindent .inside {
	background-color: var(--bright-bg-color);
	color: var(--alt-dark-color);
	box-decoration-break: clone;
	padding: 0 0.2em;
}