/* CSS Document for NZ SI 2025*/

/*===================================================================================*/
/* Brand Variables */
/*===================================================================================*/
:root {
	--bg-light-green-rgb: 232, 235, 229;      /* [#e8ebe5] header, fotos  */
	--bg-links-green-rgb: 92, 167, 187;      /* [#5ca7bb] links, some text  */
	--bg-links-hover-rgb: 154, 192, 137;      /* [#9ac089] links hover */
	--bg-heading-green-rgb: 123, 168, 105;      /* [#7ba869] heading 1, LB background  */
	--bg-heading-gold-rgb: 255, 163, 92;      /* [#ffa35c] heading 2, LB background  */
}

body {
	color:rgba(var(--bs-white-rgb),1); background-color:rgba(var(--bs-white-rgb),1); 
	background-image: url(../img/frapple/cloth-green.jpg);
}
/* p, img, div, h1, h2, a {margin:0; padding:0; border:0} */
h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:1.5rem;
	color:rgba(var(--bg-heading-green-rgb),1);
	font-weight:bold;
	max-width:15rem;
	margin-left:-3rem;
	margin-bottom:1rem;
	padding:1rem 0.5rem 1rem 0.5rem;
	text-align:left;
	line-height:1.75rem;
	background-color:rgba(var(--bs-white-rgb),0.5);
}

h2 {margin-top:0.25rem; margin-bottom:0.25rem; padding-left:0.5rem; 
	font-family:Georgia, "Times New Roman", Times, serif; 
	font-size:1.25rem; 
	color:rgba(var(--bg-heading-gold-rgb),1); font-weight:bold;
	}
h2 i {color:rgba(var(--bg-heading-green-rgb),1);}

a {color:rgba(var(--bg-links-green-rgb),1);}
a:link, a:visited, a:active {text-decoration:none; }
a:hover {color:rgba(var(--bg-links-hover-rgb),1);}

#headerContent {}
#mainContent {margin-top:1rem;}
#mainContent p, .fotoStrip span {line-height:1.5em; padding: 0 0.5em 0 0.5em;}
#Footer {padding:0.25rem;}
#Footer p {
	background: rgba(var(--bs-white-rgb),0.5); 
	font-family:Arial, Helvetica, sans-serif; color:rgba(var(--bs-black-rgb),0.5); 
	font-size:0.75rem; text-align:center;
	padding:0.75rem;}
#Footer a {display: inline;}
#Footer a:hover { border-bottom: 1px dotted rgba(var(--bs-black-rgb),0.5);}

.maincontainer {
	max-width:850px; 
	background-color:rgba(var(--bs-white-rgb),1); 
	margin:0 auto; margin-top:1rem; padding:1rem; 
}
.comment {margin-top:4rem; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.25rem; 
	color:rgba(var(--bg-links-green-rgb),1); font-style:italic; text-align:left; padding:1rem;}
.bg-light-green {background-color: rgba(var(--bg-light-green-rgb), 1);}

.bigish {font-size:1.5rem;}
.smallish {font-size:0.9rem; font-family:Arial, Helvetica, sans-serif; color:rgba(var(--bs-black-rgb),0.5); text-align:center; padding:0.5rem;
}

.fotoStrip { background-color:rgba(var(--bg-light-green-rgb),1); 
	padding: 5px 1px 5px 1px;} 

.fotoStrip img{
	aspect-ratio: 1 / 1;  /* quick & dirty method to avoid thumbnail images. Work on all browsers? */
	width:200px;
	height:200px;
	object-fit: cover;
  }

.showDiv {background-color:rgba(var(--bg-light-green-rgb),1); 
	border:5px rgba(var(--bg-light-green-rgb),1) solid; margin:3px;}
.showDiv:hover {border:5px rgba(var(--bs-white-rgb),1) solid;}
.showDiv span {line-height:2rem; font-size:0.9rem;}


/* Resizing tricky header bits, getting there, not perfect */

@media (max-width: 768px) {
	h1 {font-size:1.0rem; margin-left:-3rem;}
	#headerContent h2 {font-size:1rem;}
	.comment {font-size:1.0rem; margin-top:1rem;}
}

@media (max-width: 576px) {
	h1 {margin-left:0;}
}


/* Lightbox overrides for local image paths and decoration */

.lb-cancel {
  background: url(../img/lightbox/loading.gif) no-repeat; 
}
.lb-nav a.lb-prev {
  background: url(../img/lightbox/prev.png) left 48% no-repeat; 
}
.lb-nav a.lb-next {
  background: url(../img/lightbox/next.png) right 48% no-repeat;
}

.lb-data .lb-caption {
  font-size: 1rem;
  font-weight: normal;
}

.lb-data .lb-details {
  padding:1rem;
  background-color:rgba(var(--bs-white-rgb),1);
}
.lb-data {color: rgba(var(--bs-black-rgb), 0.75)}

.lb-dataContainer  { 
	background-color: rgba(var(--bs-white-rgb),1);
	margin-top:0.5rem;
	padding-top: 0.25rem;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;	
}

.lb-data .lb-close {
  background: url(../img/lightbox/close.png) top right no-repeat;  /* amr */
  background-color:rgba(var(--bg-heading-green-rgb),1);
}