.mobileShowDiary {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.mobileHideDiary {
	display:none;
}

.eventEntry { /*div for an event instance*/
	position:relative;
	background: var(--secondary-bg-colour);
    max-width: calc(100% - 2em);
    min-height: 3.750em;
    margin: 2em auto;
    padding: 1.250em;
    border-radius: 0.313em;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
    line-height: 1.5em;
    overflow: visible;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas:"diary-title     diary-title    diary-title" 
						"diary-date      diary-date     diary-date"
						"diary-address   diary-address  diary-address"
						"diary-notes     diary-notes    diary-NOTHING"
						"diary-links     diary-links    diary-links";
	background-color: var(--diary-event-bg-colour);
}

.conference {
	border-color:var(--diary-national-event-colour);
	color:var(--diary-local-event-colour);
}

.majorEvent {
	border-color:var(--diary-national-event-colour);
	color:var(--text-colour);
}

.localEvent {
	border-color:var(--diary-local-event-colour);
	color:var(--text-colour);
}

.overseas {
	border-color:var(--diary-overseas-event-colour);
	color:var(--text-colour);
}

.eventEntry.cancelled:before{
	content: "Cancelled";
    width: 100%;
    text-align: center;
    top: 60px;
    position: absolute;
    font-size: 310%;
    font-weight: 900;
    color: var(--error-colour);
    -ms-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    transform: rotate(-7deg);
    z-index: 1;
    text-shadow: -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow, 1px 1px 0 yellow;
}
.eventEntry.cancelled > * {
    filter: brightness(47%) contrast(85%);
}
html.oldfangled .eventEntry.cancelled > *,
html.lightTheme .eventEntry.cancelled > * {
    filter: contrast(25%);
}
.eventTitle {
	position: relative;
	padding: 0 2em 0 0.5em;
	font-size: 1.5em;
	margin: 0 0 0 -0.828em;
	line-height: 1.875em;
	border-radius: 0 0.156em 0.156em 0;
	box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.5);
	width:100%;
	margin-bottom: 14px;
	font-weight:bold;
	grid-area: diary-title;
	background:var(--diary-backup-colour);;
}
.eventTitle:before, .eventTitle:after{
	position:absolute;
	content: '';
	display: block;
}

.eventTitle:before{
  width: 0.469em;
  height: 100%;
  padding: 0 0 0.438em;
  top:0;
  left: -0.469em;
  background:inherit;
  border-radius: 0.313em 0 0 0.313em;
}

.eventTitle:after{
  width: 0.313em;
  height: 0.313em;
  background: rgba(0,0,0,0.35);
  bottom: -0.313em;
  left: -0.313em;
  border-radius: 0.313em 0 0 0.313em;
  box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}
.eventSubtitle {
    font-size: 15px;
    line-height: 1.5;
    padding: 1em 0 0;
}

@media (max-width: 800px) {
  span.address-narrow-wrap {
    display: block;
    position: relative;
    z-index: -1;
    font-size: 0;
    height: 0;
  }
}
@media (max-width: 750px) {
  .eventTitle {
    line-height: 1.143em;
    padding: 0 0.8em 0.5em 0.5em;
  }
	.eventSubtitle {
      padding-bottom: 0.6em;
  }
  .eventTitle:before, .eventTitle:after{
    font-size: 0.714em;
  }
  
}
div.toString {
	display:none;
	/*this is hidden on mobiles*/
}
.mainInfo { /*div for central bit*/
	display: inline-block;
    vertical-align: top;
	padding:5px;
}
.titleEventType {
  padding-right:2em;
}
.titleEventType, 
.dateline {
	display:inline-block;
}
.otherEvent.hiddenEvent {
	display:none;
}
.kitGuide {
	display:block;
}

div.webLinks,
div.mobileLinks {
	font-size: 80%;
	grid-area:diary-links;
	grid-auto-flow: column;
    grid-gap: 0 10%;
    padding: 10px;
}
div.mobileLinks {
    display: grid;
	justify-self: left;
}
div.webLinks {
	display:none;
	white-space:nowrap;
}

@media screen and (min-width: 750px)  {
  div.mobileLinks {
    display:none;
  }
  div.webLinks {
    display:block;
  }
	.mobileHideDiary {
		display:block;
		margin-left:auto;
		margin-right:auto;
	}
	.mobileShowDiary {
		display:none;
	}
	
	.eventEntry {
		grid-template-columns: 2fr 3fr 1fr;
		grid-template-areas:"diary-title  diary-title    diary-links" 
							"diary-date   diary-address  diary-links"
							"diary-date   diary-address  diary-links"
							"diary-notes   diary-notes   diary-NOTHING"
	}
	div.toString {
		display:block;
		/*this is shown in the wide layout*/
	}
	span.toString {
		display:none;
		/*this is now hidden*/
	}
	.mainInfo { /*div for central bit*/
		padding:5px 5px 5px 50px;
	}
}

.majorEvent .eventTitle,
.overseas .eventTitle,
.localEvent .eventTitle {
	margin-bottom:14px;
}

.majorEvent .eventTitle {
	background-color:var(--diary-national-event-colour);
	color:var(--diary-national-text-colour);
}
.localEvent .eventTitle {
	background-color:var(--diary-local-event-colour);
	color:var(--diary-local-text-colour);
}
.conferenceEvent .eventTitle {
	background-color:var(--diary-conference-event-colour);
	color:var(--diary-conference-text-colour);
}
.overseas .eventTitle {
	background-color:var(--diary-overseas-event-colour);
	color:var(--diary-overseas-text-colour)
}
.market .eventTitle {
	background-color:var(--diary-market-colour);
	color:var(--diary-market-text-colour);
}
.internalEvent .eventTitle {
	background-color:var(--diary-internal-event-colour);
	color:var(--diary-internal-text-colour);
}
.simpleStyleEvent {
	background-color:var(--diary-simple-event-colour);
	color:var(--diary-simple-text-colour);
}
.simpleStyleOther {
	background-color:var(--diary-simple-internal-event-colour);
	color:var(--diary-simple-internal-text-colour);
}

.preview {
	background-color: var(--diary-event-bg-colour);
	display: block;
	margin: 0 10px 3px;
	padding: 4px 5px 6px;
}

.dateInfo { /*div for dates*/
	display: inline-block; /*overwritten below*/
    vertical-align: top;
	font-size:17px;
	padding:5px;
	vertical-align: middle;
	text-align: left;
    grid-area: diary-date;
}

.dateMedium,.dateWide {
	display:none;
}
.dateNarrow {
	display:inline-block;
}



@media screen and (min-width: 350px)  {
	.dateNarrow,.dateMedium {
		display:none;
	}
	.dateMedium {
		display:inline-block;
	}
}
@media screen and (min-width: 650px)  {
	.dateNarrow,.dateMedium {
		display:none;
	}
	.dateWide {
		display:inline-block;
	}
}
@media screen and (min-width: 750px)  {
	.dateNarrow,.dateWide {
		display:none;
	}
	.dateMedium {
		display:inline-block;
	}
  .dateInfo {
    justify-self:left;
  }
}
@media screen and (min-width: 900px)  {
	.dateNarrow,.dateMedium {
		display:none;
	}
	.dateWide {
		display:inline-block;
	}
}

.addressField { /*div for menu bar*/
	text-align:left;
	padding:5px;
	font-size:16px;
	grid-area:diary-address;
}

.detailsField { /*div for menu bar*/
	font-size: 15px;
	padding: 2em 5px 0;
	line-height: 1.3;
	grid-area:diary-notes;
	margin-bottom:1em;
}

@media screen and (min-width: 750px)  {
	.detailsField { /*div for menu bar*/
		text-align:left;
	}
}

.detailsText {
	display:inline-block;
	text-align:left;
}

.mobileLinks img {
	max-height:50px;
	height:auto;
}
.pastEvent{
	display:none;
}
.showEvent {
	display:block;
}
.calendarLinks { /*div for links*/
	overflow:visible;
	cursor: pointer;
	color:var(--diary-calendar-link-colour);
	padding-bottom:1em;
}
.calendarLinks:after {
    content: "▼";
    margin-right: -2em;
    font-size: 80%;
    position:relative;
    top:-1px;
}
.calendarLinks:hover:after {
    top:1px;
}
.calendarLinks a { 
	color:inherit;
}

.calendarLinks:hover, .calendarLinks:focus, .calendarLinks:active {
  cursor: pointer;
}

.calendarLinks ul.dropdown{
	background: var(--diary-calendar-link-bg-colour);
	display: none;
	position: absolute;
	z-index: 999;
	padding: 0;
	list-style: none;
	margin: 4px 0 0;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

.calendarLinks:hover ul.dropdown, .calendarLinks:focus ul.dropdown, .calendarLinks:active ul.dropdown {
	display: block; /* Display the dropdown */
}
.calendarLinks ul.dropdown li{
	display: block;
	list-style: none;
	position: relative;
	text-align:left;
}

.calendarLinks ul.dropdown li a{
	color:var(--diary-calendar-link-colour);
	display: block;
	padding: 3px 8px;
	text-decoration: none;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

.calendarLinks ul.dropdown li a:hover{
	color: var(--diary-calendar-link-colour-hover);
	background: var(--diary-calendar-link-bg-colour-hover);
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE-only styles here. Works for IE10 & IE11*/
	#eventCentre *{
		text-align:center!important;
	}
	#eventCentre .dateInfo {
		font-weight:bold;
	}
}


.pastEventsTable {
    width:100%;
    vertical-align:top;
}
.pastEventsTable td {
    vertical-align:top;
    padding:6px;
}
details.pastDetails {
    padding:0;
}
details.pastDetails div {
    padding:3px 3px 3px 10px;
    margin-left:3px;
    border-left: 2px solid var(--text-colour);
}
span.pastCountry {
	font-size: 111%;
}
.pastNational .pastTitle,
.pastNational .pastType {
    font-weight:bold;
    font-size:120%;
    color: var(--diary-past-national-colour);
}
.pastLocal .pastTitle{
	font-weight:bold;
    font-size:120%;
}
.pastLocal .pastTitle,
.pastLocal .pastType {
    color: var(--diary-past-local-colour);
}
.pastInternal .pastTitle,
.pastInternal .pastType {
    color: var(--diary-past-internal-colour);
}
.hideNational .pastNational,
.hideLocal .pastLocal,
.hideInternal .pastInternal,
.hideNoPhoto tr:not(.pastPhoto) {
	display:none;
}
.mainColumn {
	width:70%;
}
.typeColumn,
.dateColumn {
	width:15%;
	text-align:center;
}
@media screen and (max-width:800px) {
	.dateColumn {
		width:30%;
	}
}

.flag {
	max-width:50%;
	margin:8px auto 5px;
	border:1px solid black;
	filter:sepia(80%);
}