/* -----------------------------------------------------
 *   skin name: green-dark
 *   version  : 23.07
 * ----------------------------------------------------- */
/* -----------------------------------------------------
 *   page width
 * ----------------------------------------------------- */
:root {
	--pageWidth: 1330px;
}
/* -----------------------------------------------------
 *   general
 * ----------------------------------------------------- */
:root {
	--color-prime:  #005230;				/* nav, button, aside border     */
	--color-hover:  #106240;				/* nav, button --> hover         */
	--color-active: #207250;				/* nav, button                   */
	--color-select: #207250;				/* nav-highlight, button:active  */
}
body {
	background-image: url("../img/bg-plank-03.jpg");
	font-family: Verdana, Helvetica, Geneva, "Lucida sans", sans-serif;
	font-size: 18px;
	color: #333333;
}
a {
	color: #8e0000;
}
a:hover {
	color: #be3030;
}
/* ------------------------------------
 *   header 
 * ------------------------------------ */
#hd-title {
	color: #ffffff;
	text-shadow: 2px 2px 4px #000000;
}
#hd-title a {
	color: #ffffff;
}
#hd-subtitle {
	font-size: 17px;
	color: #ffffff;
	text-shadow: 2px 2px 2px #000000;
}
/* ------------------------------------
 *   nav 
 * ------------------------------------ */
/* -- 3d desktop menu -- */
#nv1 {
	height: 44px;
	border-top: 1px solid #207250;
	border-bottom: 1px solid #004220;
}
.nav-item {
	position: relative;
	top: -1px;
	color: #cceedd;
	border-top: 1px solid #207250;
	border-bottom: 1px solid #004220;
}
.menu-item-block:hover .nav-item {
	color: #ffffff;
	border-top: 1px solid #308260;
	border-bottom: 1px solid #237845;
}
.nav-highlight {
	color: #ffffff;
	border-top: 1px solid #3d896d;
	border-bottom: 1px solid #136835;
}
/*.submenu {top: 45px;}*/
/* -- desktop menu -- */
.nav-item {
	line-height: 44px;
	padding: 0 15px;
}
/* ------------------------------------
 *   mobile nav (side menu) 
 * ------------------------------------ */
#side-nav {
	background-color: var(--color-prime);
}
#side-menu-wrapper {
	border-top: 1px solid #004220;
}
.side-item {
	color: #f0f3f0;
	border-bottom: 1px solid #004220;
}
.side-item:hover,
.side-item:active {
	color: #ffffff;
	background-color: var(--color-hover);
}
/* ------------------------------------
 *   button  (standard form) 
 * ------------------------------------ */
input[type=button] {
	border-width: 1px;
	border-color: #308260 #004220 #004220 #308260;
}


/* =====================================================
 *   screen size
 * ===================================================== */
 /* -- header ------------------------------ */
@media screen and (min-width: 601px) {
	#hd1 { height: 220px; }
}
@media screen and (max-width: 600px) {
	#hd1 { height: 150px; }
}

/* -- header title ------------------------- */
@media screen and (min-width: 801px) {
	#hd-title {
		top: 25px;
		left: 20px;
		bottom: auto;
		font-size: 2.3rem;
	}
	#hd-subtitle{
		top: 65px;
		left: 20px;
	}
}
@media screen and (max-width: 800px) {
	#hd-title {
		top: auto;
		left: 10px;
		bottom: 25px;
		font-size: 1.5rem;
	}
	#hd-subtitle{
		bottom: 10px;
		left: 10px;
	}
}

/* -- logo --------------------------------- */
@media screen and (min-width: 801px) {
	#hd-wrap-logo {
		top: 30px;
		left: 30px;
		width: 100px;		/* emblem */
	}
	#hd-wrap-logo img {
		filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.8));
	}
}
@media screen and (max-width: 800px) {
	#hd-wrap-logo {
		top: 25px;
		left: 20px;
		width: 70px;		/* emblem */
	}
	#hd-wrap-logo img {
		filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.8));
	}
}
@media screen and (max-width: 450px) {
	#hd-wrap-logo {
		display: none;
	}
}

/* -- nav ---------------------------------- */
@media screen and (min-width: 1001px) {
	#side-nav { visibility: hidden; }
	#btn-menu { display: none; }
}
@media screen and (max-width: 1000px) {
	#hd1 { border-bottom: 8px solid var(--color-prime); }
	nav { display: none; }
}