@charset "utf-8";

@import url(/common/verybasic2011.css) (min-width: 768px);
@import url(/tmpl/core2016.css) (min-width: 768px);
@import url(/tmpl/vf2026/forpc.css) (min-width: 768px);

@import url(/tmpl/vf2026/forsp.css) (max-width: 767px);
@import url(/tmpl/vf2026/hmbrgr.css) (max-width: 767px);


/*--------------------------------------------------------------------
*/

	#mainarea > p { margin:0.5em 0; }
	#mainarea .righty { width:20%; position:relative; margin-left:1em; }
		#mainarea .righty img { width:100%; }

	#realm td { border:none; }
	td { background-color:transparent; }
	.righty a u { border: none !important; }
	#menu * { line-height:1.5em !important; }
		#menu br { font-size:2px !important; }

	/* panelists */
	#prfls { 
		display:flex; 
		flex-wrap: wrap;
		margin:8px 0 0;
		}
		@media screen and (max-width:767px) { 
			#prfls .prfl{ width:50%;  padding:0 4px 8px; }
			}
		@media print {}
		@media screen and (min-width:768px) { 
			#prfls .prfl { width:160px; float:left; padding:0 8px 8px; }
			}
			#prfls .prfl p:first-child { 
				margin-bottom:0 !important; 
				/* can't def positive margin here because it works only when img exists. */
				}
			#prfls .prfl p:nth-child(2) { margin: 8px 0; }
			#prfls .prfl img { 
				width:100%; min-width:100%; aspect-ratio:1;
				background-image:url(/tmpl/vf2026/psn.png);
				background-size:cover;
				border-radius:16px;
				}
			.prfl * { font-size:12px !important; line-height:18px !important; }
				.prfl strong { font-size:14px !important; }
		#fullprfls .prfl { padding:16px 0 0; }
		#fullprfls p, 
		#fullprfls p a { font-size:12px !important; line-height:18px !important; }


	/* pictos clearfix */
	#icos::after { content: ""; display: block; clear: both; }

	/* SNSs */
	div#socials, #aftersocial {
		display:none;  
/* ◆ NONE is default here. Enable by overriding with BLOCK page by page if social widgets are needed. ◆ */
		}
		div#socials > div {
			float:right;
			margin-left:6px;
			}

/* COLORS (ANNUAL FEATURE)------------------------------------------------
*/

	*,
	#menu a:hover, #menu a:hover * {
	 	color:rgb(100,90,100) !important; 
		}

	@media print, screen and (min-width:768px) { 
		body {	background-color:rgb(239,231,255);
				background-image:url(/tmpl/vf2026/bg.png); 
				}
		#menu td:nth-child(3n)    div:before { background-color:rgb(255,188,0); }
		#menu td:nth-child(3n+1)  div:before { background-color:rgb(255,211,0); }
		#menu td:nth-child(3n+2)  div:before { background-color:rgb(255,188,158); }
		}
	
	#sups, #fb, #ig, #tw, #vcw {
		background-image:url(/tmpl/vf2026/bg.png);
		background-blend-mode:screen;
		}
		#sups, #vcw { background-color:rgb(140,60,60) !important; }
		#fb { background-color:rgb(0,80,0) !important; }
		#ig { background-color:rgb(80,0,0) !important; }
		#tw { background-color:rgb(0,0,120) !important; }

	div#mainarea h2:before {	background-color:rgb(255,86,110); }
	div#mainarea h3 {			background-color:rgb(255,174,0); }
	div#mainarea h4:before {	background-color:rgb(255,138,0); }
	div#mainarea h5:before {	background-color:rgb(195,0,0,255); }
		#prglist span { color:rgb(255,97,60) !important; }
	
	div.tinted { background-color:rgba(239,255,60,0.2) !important; }

	.hm-nv,
	.hm-nv-li:first-child::after {			/* this is the spike upward */
		background-color:rgb(250,240,240); 
		}
	.hm-nv,
	.hm-nv-li,
	.hm-nv-li:first-child::after {			/* this is the spike upward */
		border-color:rgb(230,160,140);
		}
		.hm-nv-a { Xcolor:rgb(80,40,90); }
	
/*--------------------------------------------------------------------
 COLORS & FONTS
*/
	XXX * { color:rgb(40,40,40) !important; }
	#menu *, div.nav h2 { color:rgb(100,100,100); }
	a:hover, a:hover * { color:rgb(130,130,130) !important; }

	div#outer { background-color:rgb(250,250,250); }

	td#sgnbd, div#mainarea, 
	div.nav, div#tm {
		background-color:white;
		border:solid 1px rgb(230,230,230);
		border-radius:8px;
		box-shadow:0 2px 4px rgba(0,0,0,0.05);
		}
		td#sgnbd {
			border-top-left-radius:0;
			border-top-right-radius:0;
			}
			
	td#sgnbd img { margin-bottom:-8px; }

	#realm td .table td,
	#realm td .table th, 
	div.textbox { border:solid 1px rgb(220,220,220) !important; }
		div.textbox *:first-child { margin-top:0 !important; }
	hr { color:rgb(220,220,220) !important; }

	div.nav h2, 
	#mainarea { 
		h4 { 
			border:dotted 3px rgb(220,220,220) !important; 
			border-style:dotted none none !important;
			}
			div.textbox h4, h3 + h4 { border:none !important; }
		}
	td#sgnbd, div#mainarea, div.pic, 
	div.nav, div#tm {
		border:solid 1px rgb(230,230,230) !important; 
		}

	td#lid { background-color:rgb(84,145,99); }

/*	p strong, p strong *,	*/
	p.strong, p.strong * { color:crimson !important; }