body {
	background:#1D3709;
	margin 0;
	padding 0;
	color:#fff;
}
a:link {
	text-decoration : none;
	color:#FFFF99;
	
	} 
a:visited {
	
	text-decoration : none; 
	color:#FFFF99;
	
	} 	
a:hover {
	text-decoration:none;	
	color:#FFFF99;
	
	}  

#wrapper {
	margin:auto;
	width:915px;
	overflow:hidden;

}
#banner {
	margin-left:15px;
	width:885px;
	height:100px;
	position:relative;
	overflow:hidden;
}
/* Slideshow replacing the old Flash banner (flash/polis.swf). The five
   photos are the ones that were embedded in that movie. */
#banner ul {
	margin:0;
	padding:0;
	list-style:none;
}
#banner li {
	position:absolute;
	top:0;
	left:0;
	width:885px;
	height:100px;
	opacity:0;
	animation:banner-fade 20s linear infinite;
}
/* Negative, so every slide is already mid-cycle at load. With positive
   delays the first pass hard-cuts instead of crossfading: slides 2-5 have
   not started yet, so nothing is fading in while slide 1 fades out. */
#banner li:nth-child(2) { animation-delay:-16s; }
#banner li:nth-child(3) { animation-delay:-12s; }
#banner li:nth-child(4) { animation-delay:-8s; }
#banner li:nth-child(5) { animation-delay:-4s; }
#banner img {
	display:block;
	width:885px;
	height:100px;
	object-fit:cover;
	object-position:center 60%;
	border:0;
}
@keyframes banner-fade {
	0%, 16%  { opacity:1; }
	20%, 96% { opacity:0; }
	100%     { opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
	#banner li { animation:none; }
	#banner li:first-child { opacity:1; }
}
#header {
	margin-left:15px;
	width:885px;
	font-size:25px; 
	font-family:"Trebuchet MS"; 
	letter-spacing:4px;
}
#body_wrapper {
	width:900px;
	margin:0;
	padding:0;
	overflow:hidden;
	
}
#menu {
	padding-top:40px;
	width:223px;
	height:380px;
	float:left;

}
/* Navigation replacing the old Flash menus (flash/raides3.swf for Lithuanian,
   flash/raidesen.swf for English). OCR A Extended was the font used there. */
#menu ul {
	margin:0;
	padding:0;
	list-style:none;
}
#menu li {
	font-family:"OCR A Extended","Courier New",monospace;
	font-size:12px;
	font-weight:bold;
	letter-spacing:4px;
	line-height:1;
	text-align:left;
	margin:0 0 24px 0;
}
#menu li.nav-lang {
	margin-top:44px;
}
#menu a:link, #menu a:visited {
	color:#fff;
	text-decoration:none;
}
#menu a:hover, #menu a:focus, #menu li.current a {
	color:#FFFF99;
}
#main {
	padding-left:100px;
	margin-top:40px;
	float:left;
	width:570px;
}

#main h1 {

	font-family:"Trebuchet MS"; 
	font-weight:bold;
	font-size:16px;
	
}


#main p {

	font-family:"Trebuchet MS"; 
	font-size:12px;
	text-align:justify;
	line-height: 2;
	
}
#main img {
	border: 1px solid #FFFFFF;
	margin-bottom:5px;
	
}
.right {
	margin-left:20px;
	float:right;
}
.left {
	margin-right:20px;
	float:left;
}
#apacia {
	height:15px;
	width:900px
	font-family:"Trebuchet MS"; 
	text-align:center;
	font-size:10px;
}
li {
	font-family:"Trebuchet MS"; 
	font-size:12px;
	text-align:justify;
	line-height: 2;	
}
#wrapper_img {
	width:570px;
	overflow:hidden;
	margin-bottom:15px;
}

/* ==========================================================================
   Promo for the exhibition site, in the left column under the menu.
   The photo is a crop of the exhibition's own poster; the title sits on
   top as text so it stays legible at 223px rather than being baked in.
   ========================================================================== */

#paroda_promo {
	display:block;
	position:relative;
	width:223px;
	margin-top:46px;
	overflow:hidden;
	line-height:0;
	border:1px solid #6b8352;
}

#paroda_promo img {
	display:block;
	width:100%;
	height:auto;
	transition:opacity .25s;
}

#paroda_promo:hover img,
#paroda_promo:focus img { opacity:.75; }

#paroda_promo .promo_text {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:7px 9px 8px;
	background:rgba(15,32,4,.72);
	font-family:"Trebuchet MS",Arial,sans-serif;
	line-height:1.25;
}

#paroda_promo .promo_kicker {
	display:block;
	font-size:10px;
	letter-spacing:2px;
	text-transform:uppercase;
	color:#c7d9b4;
}

#paroda_promo .promo_title {
	display:block;
	font-size:12px;
	font-weight:bold;
	letter-spacing:1px;
	color:#ffffff;
}

#paroda_promo:hover .promo_title,
#paroda_promo:focus .promo_title { color:#FFFF99; }

/* ==========================================================================
   Mobile / responsive
   Everything above is the original fixed 915px desktop layout and is left
   alone. Below 960px the columns stack, the fixed widths go fluid and the
   menu moves above the content.
   ========================================================================== */

html {
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}

/* Nothing should be able to push the page sideways. */
img {
	max-width:100%;
	height:auto;
}

@media (max-width:959px) {
	#wrapper {
		width:auto;
		max-width:915px;
		padding:0 14px;
	}

	#banner {
		margin-left:0;
		width:auto;
		height:clamp(58px,11vw,100px);
	}
	#banner li,
	#banner img {
		width:100%;
		height:100%;
	}

	#header {
		margin-left:0;
		width:auto;
		font-size:clamp(16px,4.2vw,25px);
		letter-spacing:2px;
		padding-top:6px;
	}

	#body_wrapper { width:auto; }

	/* The menu becomes a wrapping row above the text. */
	#menu {
		float:none;
		width:auto;
		height:auto;
		padding-top:18px;
	}
	#menu ul {
		display:flex;
		flex-wrap:wrap;
		gap:12px 24px;
	}
	#menu li { margin:0; }
	#menu li.nav-lang { margin-top:0; }

	/* Sits under the wrapped menu row rather than in a column. */
	#paroda_promo {
		width:100%;
		max-width:280px;
		margin-top:20px;
	}

	#main {
		float:none;
		width:auto;
		padding-left:0;
		margin-top:22px;
	}

	#wrapper_img {
		width:auto;
		overflow:visible;
	}

	#apacia {
		width:auto;
		height:auto;
		padding:16px 0;
	}
}

@media (max-width:600px) {
	/* 12px justified is unreadable on a phone. */
	#main p,
	#main li {
		font-size:15px;
		line-height:1.7;
		text-align:left;
	}
	#main h1 { font-size:17px; }
	#main h3 { font-size:16px; }

	#menu li {
		font-size:13px;
		letter-spacing:3px;
	}

	/* Floated figures would leave slivers of text beside them. */
	.left,
	.right {
		float:none;
		display:block;
		margin:0 auto 14px;
	}

	/* Thumbnail galleries stay in rows - they are only 150px wide. */
	#wrapper_img { text-align:center; }
	#wrapper_img .left,
	#wrapper_img .right {
		display:inline-block;
		margin:4px;
	}

	#apacia { font-size:12px; }
}

/* The lightbox overlay sizes itself to the photo's natural width, so it
   needs capping too - see the matching clamp in js/lightbox.js. */
#outerImageContainer,
#imageDataContainer {
	max-width:100%;
}
#lightbox img {
	max-width:100%;
	height:auto;
}