:root {
	/* --bg-color-water: # */
	/* --bg-color-fire:  */
}

body.theme_neutral {
	background-color: #2a2a2a;
}
.theme_water header div.he-bg {
	opacity: 0.8;
	background-image: url(../img/thepath-header-water.jpg);
	/* background-color: #ffffff33; */
	/* background-color: #000; */
	/* background-blend-mode: multiply; */
}
.theme_fire header div.he-bg {
	background-image: url(../img/thepath-header-fire.jpg);
	opacity: 0.8;
	/* background-color: #99339933; */
	/* background-color: #000; */
	/* background-blend-mode: multiply; */
}

body.theme_water {
	background-color: #ddd;
	background-image: url(../img/bg-water.jpg);
	background-position: top center;
}
.theme_water div#wrap-root {
	background: repeating-radial-gradient(circle, #ffffff33, #ffffff33 64px, #ffffff46 64px, #ffffff46 128px );
}
body.theme_fire {
	background-color: #113;
	background-image: url(../img/bg-fire.jpg);
	background-position: top center;
}


/* ======== MENUS ======== */ 

.theme_water nav.menu--fire {
	display: none;
}
.theme_fire nav.menu--water {
	display: none;
}

.theme_water nav.menu.menu--node {
	background-color: #00669944;
}

nav { 
	/* --menu-water-tshadow: #00222266; */
	/* --menu-water-color: #fafafa; */
	--menu-water-color: #449999ff;
	/* --menu-water-tshadow: #449999ff; */
	--menu-water-tshadow: #eeeeff66;
	--menu-water-a-bg-color: rgba(255,255,255,0.6);
	--menu-water-bordercolor: #00000055;
	
	--menu-fire-color: #fff;
	--menu-fire-tshadow: #555;
	/* --menu-fire-a-bg-color: rgba(255,255,255,0.4); */
	--menu-fire-a-bg-color: rgba(0,0,0,0.4);
	--menu-fire-bordercolor: #ffffff99;
	/* --menu-fire-tshadow: #448888ff; */
}


nav.menu--sub.menu--fire, nav.menu--sub.menu--water  {
	box-shadow: inset 0 3px 3px #00000044, inset 0 -3px 3px #00000044;	
	background-position: center center;
	font-weight: bold;
}
nav.menu--sub.menu--fire {
	/* box-shadow: inset 0 5px 5px #ffffff44, inset 0 -5px 5px #ffffff44; */
	background-image: url(../img/menu-fire.jpg);
}


nav.menu.menu--sub.menu--fire a {
	background-color: var(--menu-fire-a-bg-color);
	color: var(--menu-fire-color);
	border-color: var(--menu-fire-bordercolor);
	text-shadow: 1px 1px 0 var(--menu-fire-tshadow), 1px -1px 0 var(--menu-fire-tshadow), -1px 1px 0 var(--menu-fire-tshadow), -1px -1px 0 var(--menu-fire-tshadow);
}
nav.menu.menu--sub.menu--fire a:hover, nav.menu.menu--sub.menu--fire a:active {
	background-color: rgba(0,0,0,0.2);
}

nav.menu.menu.menu--sub.menu--fire a[data-curr='1'] {
	color: #edd;
}

nav.menu--sub.menu--water {
	background-image: url(../img/menu-water.jpg);
}


nav.menu.menu--sub.menu--water a {
	background-color: var(--menu-water-a-bg-color);
	color: var(--menu-water-color);
	border-color: var(--menu-water-bordercolor);
	text-shadow: 1px 1px 0 var(--menu-water-tshadow), 1px -1px 0 var(--menu-water-tshadow), -1px 1px 0 var(--menu-water-tshadow), -1px -1px 0 var(--menu-water-tshadow);
}
nav.menu.menu--sub.menu--water a:hover, nav.menu.menu--sub.menu--water a:active {
	background-color: rgba(255,255,255,0.1);
}

nav.menu.menu.menu--sub.menu--water a[data-curr='1'] {
	color: #557;
}


/* ======= ARTICLE ======== */

article {
	
	--water-wm-sect-bg: rgba(50,30,90,0.87);
	--water-bg-h1: #112255aa;
	--water-bg-h2: #11225599;
	
	--fire-wm-sect-bg: rgba(20,40,40,0.92);
	--fire-bg-h1: #222222aa;
	--fire-bg-h2: #33333399;
}

.theme_water article section h2, .theme_fire article section h2 {
	background-color: var(--h2-sec-bg);
}
.theme_water article h1 {
	background-color: var(--water-bg-h1);
}
.theme_water article h2 {
	background-color: var(--water-bg-h2);
}
.theme_fire article h1 {
	background-color: var(--fire-bg-h1);
}
.theme_fire article h2 {
	background-color: var(--fire-bg-h2);
}

.theme_water #wrap-main section {
	background-color: var(--water-wm-sect-bg);
}
.theme_fire #wrap-main section {
	background-color: var(--fire-wm-sect-bg);
}