#groupList {
	display:flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
}

#groupList>div.groupEntry {
	display:block;
	width:98%;
	margin:5px 1%;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
div.middleGrant {
	color: var(--link-colour);
	cursor:pointer;
	background: var(--secondary-bg-colour);
    box-shadow: 0px 0px 10px 7px var(--secondary-bg-colour);
    margin: 10px 5px;
	border-radius: 8px;
}
.oldfangled div.middleGrant {
	box-shadow: 0px 0px 7px 2px maroon;
}
div.middleGrant:hover {
	color: var(--link-colour-hover);
}
.expanded div.middleGrant {
	color: var(--text-colour);
	cursor: default;
}
@media screen and (min-width: 550px)  {
	
	#groupList>div.groupEntry {
		width:47%
	}
}
@media screen and (min-width: 950px)  {
	#groupList>div.groupEntry {
		width:31%
	}
}

div.middleGrant a {
	text-decoration:none;
}

div.middleGrant a:hover {
	border-color:blue;
}

div.middleGrantName {
	font-weight:bold;
	text-align:left;
	font-size:110%;
	padding:5px;
}

div.middleGrantLand,
div.middleGrantTrg,
div.middleGrantEthnicity {
	text-align:left;
	padding:5px;
}
div.middleGrantLand {
	font-size:0.9em;
}
div.middleGrantExtraDetails {
	max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s, padding 0.8s;
}
.expanded div.middleGrantExtraDetails {
	padding-top:0.6em;
	max-height:12em;
}
div.middleGrantGL,
div.middleGrantWeblinksStart{
	padding:5px;
	text-align:left;
	font-size:80%;
}
div.middleGrantWeblinks{
	text-align:center;
}
div.middleGrantWeblinks a {
	display:inline-block;
	padding:0 1em;
}
div.middleGrantWeblinks a.textLink {
	display:none;
}
div.middleGrantShieldPositioning {
	position: relative;
    width: 48px;
    float: right;
    margin: 8px 8px 0 0;
}

div.middleGrantShieldBorder {
	overflow: hidden;
    height: 48px;
    width: 48px;
    -moz-border-radius: 60px;
    -khtml-border-radius: 60px;
    -webkit-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
	box-shadow: 1px 1px 2px 1px #333;
}

div.middleGrantShieldBorder img {
	padding:0;
}

div.middleGrantShield {
	text-align:center;
	float:right;
	width: 12px;
	height: 12px;
	background:darkgrey;
	border-right: 18px solid white;
	border-top: 18px solid gray;
	border-left: 18px solid white;
	border-bottom: 18px solid gray;
	-moz-border-radius: 60px;
	-khtml-border-radius: 60px;
	-webkit-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
}

#mapContainer {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

div.middleGrantMap {
	margin:0 auto;
	text-align:center;
	padding:0;
	width:430px; /*this is requred to be 430px in order for the positioning to work*/
	height:666px; /*this is requred to be 666px*/
	color:black;
	-moz-border-radius: 60px;
	-khtml-border-radius: 60px;
	-webkit-border-radius: 60px;
	-o-border-radius: 60px;
	border-radius: 60px;
	overflow:hidden;
}


div.middleGrantMap img { /*required to overrule the style in regiaText.css*/
	padding:0;
}

div.middleGrantMapGroup:hover {
	color:#FFDD00;
}

div.middleGrantMapGroup {
	text-align:center; 
	overflow:visible;
	z-index:1; 
	color:orangered; 
	position:relative;
	height:0;
	width:0;
}

div.middleDiaryMapThisYear {
	color:orangered; 
}

div.middleDiaryMapThisYearLocal {
	color:#C05; 
}

div.middleDiaryMapNextYear {
	color:deepskyblue; 
}

div.middleDiaryMapNextYearLocal {
	color:#45B; 
}

div.middleGrantMapShield {
	text-align:center;
	overflow:hidden;
	width: 2px;
	height: 2px;
	background:darkgrey;
	border-right: 10px solid white;
	border-top: 10px solid gray;
	border-left: 10px solid white;
	border-bottom: 10px solid gray;
	-moz-border-radius: 60px;
	-khtml-border-radius: 60px;
    -webkit-border-radius: 60px;
	-o-border-radius: 60px;
    border-radius: 60px;
}


div.middleGrantMapDetails {
	color:var(--text-colour-dark);
	overflow:hidden;
	background:Burlywood;
	width:430px;
	height:666px; /*same as map*/
	text-align:center;
	margin:0 auto;
	padding:0;
	-moz-border-radius: 60px;
	-khtml-border-radius: 60px;
    -webkit-border-radius: 60px;
	-o-border-radius: 60px;
    border-radius: 60px;
}

div.middleGrantMapHide {
	display:none;
}

div.middleGrantMapDetailsSide {
	/*display:inline-block;*/
	width:0px;
	height:400px;
	border-width: 0px 20px 50px 20px;
	border-style: none solid solid solid;
	border-color: rgba(222, 184, 135, 0);
	margin:0 16px 1px;
}

div.middleGrantMapDetailsTitle {
	display:inline-block;
	font-size:1.5em;
	font-weight:bold;
	padding:20px 0px;
}

div.middleGrantMapDetailsMain {
	padding:16px;
	text-align:left;
}

div.middleGrantMapDetailsWeblinks {
	display:block;
	margin:12px 12px 3px;
	text-align:center;
}
.shieldWall {
	position:relative;
	height:98px;
}
.shieldWall svg {
	position:absolute;
}

/*For GDS theme*/
html.gds #groupList {
  display:block;
}
html.gds #groupList>div.groupEntry {
  width:66%;
}
html.gds div.middleGrant:hover,
html.gds div.middleGrant {
  cursor: default;
  color:var(--text-colour);
}
html.gds div.middleGrant noscript,
html.gds div.middleGrantShieldPositioning {
  display:none;
}
html.gds div.middleGrantExtraDetails {
  max-height:initial;
  margin: 1em 0em 2em;
}
html.gds div.middleGrantWeblinks {
  padding-bottom: 1em;
  text-align:left;
}
html.gds div.middleGrantWeblinks a {
	display:none;
}
html.gds div.middleGrantWeblinks a.textLink {
	display:inline;
}