/* 
Set the background colour for links (the "a") under the plone-navbar with the CSS class "state-private" 
to light grey, so that we don't have illegible red on blue) 
*/

/* 
.plone-navbar a.state-private {
    background-color: #0f41bb;
}
*/



.plone-navbar {
    background-color: #0f41bb;
}

/* Fix for workflow colours in global nav */

/* button */
.plone-navbar li.has_subtree > label {
    color: gray;
}

/* normal */
.plone-navbar li a.state-private {
    background: white;
    border-style: solid;
    border-color: LightGray;
    border-width: 1px;
}
.plone-navbar li a.state-internal {
    background: white;
    border-style: solid;
    border-color: LightGray;
    border-width: 1px;
}
.plone-navbar li a.state-internally_published {
    background: white;
    border-style: solid;
    border-color: LightGray;
    border-width: 1px;
}
.plone-navbar li a.state-pending {
    background: white;
    border-style: solid;
    border-color: LightGray;
    border-width: 1px;
}

/* inPath
.plone-navbar li.inPath a.state-private {
    background: LightGray;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
.plone-navbar li.inPath a.state-internal {
    background: LightGray;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
.plone-navbar li.inPath a.state-internally_published {
    background: LightGray;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
.plone-navbar li.inPath a.state-pending {
    background: LightGray;
    border-style: solid;
    border-color: black;
    border-width: 1px;
}

*/

/* 
Darken the portlet header 
*/

.portlet .portletHeader {
    background: #d3d3d3;
}

/*
Set the body text colour to black
*/

body {
    color: #000000;
}

/*
Set the link text colour to red per FHB's colours.docx
*/

a {
    color:#0489ec;
}


@media (min-width: 768px) {
  .plone-modal .plone-modal-content {
    width:  200px;
    height: 400px;
  }
}
@media (min-width: 992px) {
  .plone-modal .plone-modal-content {
    width:  300px;
    height: 600px;
  }
}
@media (min-width: 1200px) {
  .plone-modal .plone-modal-content {
    width:  400px;
    height: 800px;
  }
}
@media (min-width: 1600px) {
  .plone-modal .plone-modal-content {
    width:  1000px;
    height: 1000px;
  }
}
.popover__title {
  /* font-size: 24px; */
  /* line-height: 36px; */
  /* text-decoration: none; */
  /* color: rgb(228, 68, 68); */
  /* text-align: center; */
  /* padding: 15px 0; */
}

.popover__wrapper {
  position: relative;
  margin-top: 1.5rem;
  display: inline-block;
}
.popover__content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -150px;
  transform: translate(0, 10px);
  background-color: #bfbfbf;
  padding: 1.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: auto;
}
.popover__content:before {
  position: absolute;
  z-index: -1;
  content: "";
  right: calc(50% - 10px);
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #bfbfbf transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}
.popover__wrapper:hover .popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -20px);
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__message {
  text-align: center;
}

.photoAlbumEntryWrapper a {
  box-shadow: 20px 80px;
}


span.photoAlbumEntryWrapper img {
  display: block;
  margin: auto;
  width: 75%;
  padding-bottom: 20px;
}

.fhb_popover__title {
  /* font-size: 24px; */
  /* line-height: 36px; */
  /* text-decoration: none; */
  /* color: rgb(228, 68, 68); */
  /* text-align: center; */
  /* padding: 15px 0; */
  color: #ff6600;
}

.fhb_popover__wrapper {
  position: relative;
/*  margin-top: 1.5rem; */
/*  display: inline-block; */
}
.fhb_popover__content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
/*  left: -150px; */
  top: 50px;
  transform: translate(0, 10px);
  background-color: #bfbfbf;
  padding: 1.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: auto;
  display: block;
}
.fhb_popover__content:before {
  position: absolute;
  z-index: -1;
  content: "";
  right: calc(50% - 10px);
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #bfbfbf transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}
.fhb_popover__wrapper:hover .fhb_popover__content {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(0, -20px);
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.fhb_popover__h1 {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  box-sizing: border-box;
  margin: 0.67em 0;
  font-family: inherit;
  font-weight: 400;
  line-height: 1.1;
  color: inherit;
  margin-top: 25px;
  margin-bottom: 12.5px;
  font-size: 36px;
  display: block;
}
.fhb_popover__message {
  text-align: center;
}

/***** MODAL DIALOG ****/
#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:5vh;

	/* Sizing for visible dialog */
	width:80%;
	max-width:600px;
        height:90vh;

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	border-radius:8px;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	/* background-color:white; */
        /* background-color:#bfbfbf; */
        background-color:#f2f7fc;
	padding:20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
} 

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
} 

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
} 

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
} 


article a[href^="https://apiary.harcourt-brown.co.uk/apiary/content/image_modal"]::after
{
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

h1 {
  color: #0f41bb;
}

h2 {
  color: #0f41bb;
}