@charset "utf-8";
* { box-sizing: border-box;  border-radius: 2px;  margin:0;  padding:0;}
svg {border-radius:0;}

html, body, main, section, article, div, figure, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, aside, article, footer, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, var, b, u, i, center, dl, dt, dd, fieldset, form, fieldset, label, legend, table, caption, tbody, tfoot, thead,  button, figure, figcaption, picture {margin:0; padding:0; border:0; outline:0;  vertical-align:baseline; } 

section {margin:32px 3%;}

h1 {color:#369;
	font-size: 150%;
	line-height: 150%;
	clear: both;
	font-weight: 450;
	margin: 24px 0 8px 0;
	font-family:Georgia, "Times New Roman", Times, serif
}

.crumb {text-align:right; padding-right: 16px; border-top: solid 1px #369; font-size: 80%;}
.crumb svg {margin-left: 2%;}
.crumb svg path, .crumb svg circle, .crumb svg polyline {stroke: #999; fill: none;} 

h2 { clear:both;
 	/*background-image: linear-gradient(to top, #fff, #ddd);*/
	font-size: 32px;
	color: #369;
	line-height: 40px;
	font-weight:500;
	margin: 64px 0 8px 0;
	padding: 8px 0;
	
	}


h3 {color: #369;
   	font-size: 16px;
	line-height: 170%;
	font-weight: 600;
	margin: 40px 0px 0px 0px;
}
h3::before {content:"\2756"; padding-right: 8px;}

h4 {color: #666;
font-weight: 400;
   	font-size: 16px;
	line-height: 170%;
	border-bottom:dotted 1px #ccc;
	padding: 16px 0px 0px 0px;
}
h4::before {content:"\2662"; padding-right: 8px;}

h5 {color: #666;
   	font-size: 16px;
	line-height: 160%;
	font-weight: 300;
	padding: 16px 0px 0px 0px;
	border-bottom:dotted 1px #ccc;
	}
h5::before {content:"\26ac"; padding-right: 8px;}

h6 {white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight:500;
	font-size: 13px;
	color: #777;
	padding: 0px 12px;
	border: solid 1px #ddd;
	border-radius: 0 16px 0 0;
	background: #f5f5f5;
	display:inline-block;
	margin-top:12px;
	margin-bottom:-8px;
}

.text-in-box {border: solid 1px #ccc; background: #f7f7f7; padding: 0px 16px; border-radius:5px; color:#888;}

p { margin: 24px 0;}
a { color:#369;  text-decoration:none; }
em {font-weight:520; color:#000;}
ul, ol{margin: 16px 0 16px 2%;}
li{ margin: 8px; padding:6px 0; list-style-position: outside;}
li span {color: #aaa; padding-left: 16px;}
img {max-width: 100%; height:auto; border-radius:2px;}
a:hover  {color:#69c;}
a:hover img {-webkit-filter: brightness(107%);}
figure {font-size: 87%; line-height:120%; text-align:center; color: #999; }
figure img {display: block;}
hr {clear:both; height:1px; border-width:0; background-color:#ccc}
table{border-collapse: collapse;border-spacing:0; 	border: 1px solid #ccc;	margin-top: 32px; width:100%; }
table th{padding: 8px 0}
table td{border: 1px solid #ddd; padding: 8px 2px 8px 8px;	vertical-align: middle;}
table li {margin: 0; padding:8px 0; line-height:125%;}

body, pre{ width:100%; font-family: Roboto, Tahoma, Helvetica, Arial,  Verdana, sans-serif;	color: #666; font-size: 18px; line-height: 30px; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}

header {
position: sticky;
	position: -webkit-sticky; 
	top: -64px;
	Width:100%;
	z-index: 99999; 
	box-shadow:0px 12px 8px -12px rgba(0,0,0,0.4);
	background-color: #f7f7f7;
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #ccc;
	transition: top 1s ease;

	/*background-image: linear-gradient(rgba(167,214,247,1), rgba(255,255,255,1));
	background-image: linear-gradient(rgba(8,113,193,0.9), rgba(194,222,245,0.9));*/
}

nav {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 3% 8px 3%;
	white-space: nowrap;
	overflow: hidden;

	}

#nav-line1 {display: flex; justify-content: space-between; align-items: flex-end; font-size: 90%;}

#logo {}
#logo svg path#sun {}
#logo:hover svg path#sun {stroke:#ff1; stroke-width: 0.1px; transition:2s ease;}
#logo:hover svg path#vc {stroke:#69c; stroke-width: 2px; transition:0.5s ease;}

#blog {}
@keyframes drawyj{ to {stroke-dashoffset:0; }}
#blog:hover svg path.draw {stroke: #036; animation: drawyj 1.5s forwards infinite linear; stroke-dasharray:100; stroke-dashoffset:100; animation-iteration-count:1;}

@media only screen and (min-width: 1201px) {main {font-size: 130%; color:#666;}}
@media only screen and (max-width: 1200px) {main {font-size: 120%;}}
@media only screen and (max-width: 749px) {main {font-size: 112%; line-height:1.65; color: #555; }}
@media only screen and (max-width: 479px){main {font-size: 106%; color: #444;}}
@media only screen and (max-width: 431px){main {font-size: 100%; line-height:1.6;}}	



#flexContainer {display: block; max-width:900px; margin:0 auto; }
main {width: 100%; margin-top:16px; }
@media only screen and (max-width: 480px){main {font-size: 16px; color: #666; line-height: 28px} }
@media only screen and (max-width: 600px){main {font-size: 17px; color: #666; line-height: 29px} .hide-under-480 {display:none;}}
@media only screen and (min-width: 720px){main {font-size: 18px; color: #777; line-height: 31px;}}
@media only screen and (min-width: 800px){main {font-size: 19px; color: #777; line-height: 32px;} p{margin: 32px 0;}}
@media only screen and (min-width: 950px){main {font-size: 20px; color: #777; line-height: 33px;} nav a {font-size: 16px;}}

#rightColumn {width: 100%; margin-top: 64px; padding: 0 3% 0 3%;}
#rightColumn a {color: #666;}
#rightColumn dl {margin: 0; width:94%; }
#rightColumn dt {white-space: nowrap; text-overflow: ellipsis;overflow: hidden;  line-height: 100%; text-align:center;}
#rightColumn dd {position: relative;}
#rightColumn dd span {position: absolute; text-align:center; width:100%; bottom: 20%;  z-index:99; font-size: 20px; color: #fff; padding: 6px 0; background-color: rgba(50,50,50,0.5);}
#right-content-grid {display:grid; grid-template-columns: 50% 50%;	grid-column-gap: 3%; grid-row-gap: 32px;}
#right-content-sticky {position:static; }
#right-content-sticky a {display: block; margin:20px 0 20px 28px; padding:8px 4px; font-size:17px; }
#right-content-sticky a::before {content:'\2610'; margin-right: -16px; position: relative; left:-28px;}
#right-content-sticky a:hover{background:#f7f7f7;}
#shareBox {position:static; border: solid 1px #ccc; margin-top: 32px; background:#fff; z-index:999;}
#shareBox a {display:inline-block; padding: 8px 4px;}

@media only screen and (min-width: 1000px){
	#flexContainer {display: flex; max-width:1200px;}
	main{width:70%;}
	#rightColumn {width:29.9%; padding: 0 2% 0 2%; margin-top: 16px; border-left:solid 1px #ddd;}
	#rightColumn dl {  width: 100%; margin: 32px 0 64px 0; }
	#right-content-grid {display:block;}
	#right-content-sticky {position: sticky; position: -webkit-sticky; top: 200px;}
	#shareBox {position: sticky; position: -webkit-sticky; top: 80px;}
	}
	
.right-link {margin: 32px 0; text-align:right;  position: relative;}
.right-link a {display:block; padding:12px 32px; font-size: 90%; line-height: 120%; background-image: linear-gradient(to right, #fff, #f3f3f3); white-space:nowrap; text-overflow: ellipsis; overflow:hidden; } 
.right-link a:hover{background-image: linear-gradient(to right, #fff, #f9f9f9);}
.right-link::after{content:'\260d'; position:absolute;  top: 6px;  right: 10px;  font-size: 20px;  color: #666; display:inline-block;  transition: transform 0.3s ease; }
.right-link:hover::after{transform: rotate(360deg); color: #930;}


.alignLeft-responsive {
	text-align:center;
	float:left;
	max-width: 40%;
	margin:8px 16px 4px 0px;
	}
.alignRight-responsive {
	text-align:center;
	float:right;
	max-width: 40%;
	margin:8px 0px 4px 12px;
	}
.alignLeft-responsive img, .alignRight-responsive img {display: block; margin:0 auto; width:100%;}
@media only screen and (max-width: 720px) {.alignLeft-responsive, .alignRight-responsive {float:none; max-width: 100%; margin: 16px 0px 16px 0px;}}

.alignLeft-flex-reverse figure {
	display: block;
	text-align:center;
	float:left;
	max-width: 40%;
	margin:12px 16px 4px 0px;
	}	
.alignRight-flex-reverse figure {
	display: block;
	text-align:center;
	float:right;
	max-width: 40%;
	margin:12px 0px 4px 12px;
	}
.alignLeft-flex-reverse img, .alignRight-flex-reverse img {display: block; margin:0 auto;}
@media only screen and (max-width: 720px){ .alignRight-flex-reverse, .alignLeft-flex-reverse {display: flex; flex-direction: column-reverse;} .alignRight-flex-reverse figure, .alignLeft-flex-reverse figure  {max-width:100%; margin:8px 0 16px 0;} }

.yj-border-text {
    position: relative;
	background:#f7f7f7;
    border: solid 1px #ccc;
    border-radius: 8px;
    padding: 24px 16px 16px 16px;
	margin-top: 48px;
    margin-bottom: 48px;
}

.yj-border-text .up {
	font-size:88%;
	color:#999;
	position: absolute;
	top: -20px;
	left: 12px;
	display: block;
	background: #fff;
	border: solid 2px #ccc;
	border-radius: 16px;
	padding: 0px 16px 4px 16px;
	}
.yj-border-text .down {
	font-size:88%;
	color:#999;
	position: absolute;
	bottom: -17px;
	right: 22px;
	display: block;
	background: #fff;
	border: dotted 2px #ccc;
	border-radius: 16px;
	padding:1px 16px 3px 16px;
}

/*****Accordian ************/

.Accordion {margin:16px 0; }
.Accordion dl { border-bottom: 1px solid #eee; }
.Accordion dt {
  text-align:right;
  font-decoration: none;
  cursor: pointer;
  padding:8px 42px 8px 8px;
  line-height:120%;
  font-size:90%;
  white-space:nowrap; 
  text-overflow: ellipsis; 
  overflow:hidden;
  background-image: linear-gradient(to right, #fff, #f3f3f3);
  transition:ease;
  position: relative;}
.Accordion dt:hover { background-image: linear-gradient(to right, #fff, #f9f9f9);}
.Accordion dt::after {
  content: url('images/svg/icon-plus.svg');
  position: absolute;
  top: 12px;
  right: 10px;
  font-size: 20px;
  color: #999;
  transform: translateY(0%);
  transition: transform 0.3s ease;
  transform-origin: 50% 75%;}
.Accordion dt:hover::after {color: #c30;}
.Accordion dd {auto; padding: 0 3%; background-color: #f7f7f7; max-height: 0;  overflow: hidden;  transition: max-height 0.7s ease; }
.Accordion dl.active dd { max-height: 2000px;}
.Accordion dl.active {box-shadow: 3px 5px 10px #bbb;}
.Accordion dl:hover {box-shadow: 3px 5px 10px #bbb;}
.Accordion dl.active dt::after { content: url('images/svg/icon-minus.svg');
  display: inline-block; transform: translateY(-50%) scaleY(-1);}
.Accordion dd img {mix-blend-mode:multiply;}

/********** Below for Left Align DT Accordion *********/
section.Accordion-Align-Left .Accordion {border-top: solid 1px #ddd;}
section.Accordion-Align-Left .Accordion dl { border-bottom: 1px solid #ccc; }
section.Accordion-Align-Left .Accordion dt {background-color:#fff; background-image:none; text-align:left; padding:16px 48px 16px 8px; font-size:100%; white-space:normal;}
section.Accordion-Align-Left .Accordion dt:hover {background-image:none; background-color:#f5f5f5;}
section.Accordion-Align-Left .Accordion dd {background-color:#fff; padding: 0 0;} 
section.Accordion-Align-Left .Accordion dl.active dt {background-image:none; background-color:#f5f5f5;} 
section.Accordion-Align-Left .Accordion dl.active {box-shadow:none;}
section.Accordion-Align-Left .Accordion dl:hover{box-shadow:none;}
 
/********** Tab *********/
.yjTab {border:solid 1px #ddd; border-top:solid 5px #ddd; border-radius: 2px; background:#ddd; }
.yjTab dt { z-index:999; border: solid 1px #ccc; border-right:solid 1px #999; margin-left: 12px; margin-right: -12px; padding-left: 4px;}
.yjTab dt:hover {cursor:pointer; }
dt.yjTabLink {display:inline-block; line-height: 32px; padding: 0 4%; color:#777;  border-radius:2px 16px 0px 0px;  background:#eee;}
dt.active-yjTab{background:#fff; border-bottom: solid 1px #fff;}
.yjTab dd {font-size: 100%; padding: 16px;  background: #fff; border-top: solid 1px #ccc; margin-top: -1px; }	 
@media only screen and (max-width: 480px){.yjTab dt {font-size: 90%; padding: 0 2.5%;}} 	


@media only screen and (max-width: 580px) {

table {font-size:90%; }
table td{ padding: 6px 2px 6px 6px;	vertical-align: middle;}
}



@media only screen and (max-width: 400px) { 
h1 {}
h2 {font-size: 18px; line-height:32px;}
}



/*
aside.right-link {text-align: right; font-style:italic; font-size:90%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
aside.right-link a {text-decoration:underline; color:#777; padding-top:6px; padding-bottom:2px; }

.link-int {
	padding-left: 24px; 
	background-image:url(images/svg/link-internal.svg);
	background-repeat:no-repeat; 
	background-position:4px 6px; 
}
.link-ext {
	padding-left: 27px; 
	background-image: url(images/svg/link-external.svg);
	background-repeat: no-repeat;
	background-position: 4px 6px;
}


a.link-box {background:#f9f9f9; font-size:87%; color:#777; font-style:italic; padding: 8px; border-radius: 16px; padding-left:16px; border-left: solid 1px #ccc; border-bottom:solid 1px #aaa; white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden; }
a.link-box:hover {background:#ffe; transition: ease 0.3s;}
 a.link-box svg {
	fill: none;
	stroke: #999;
	transition: ease 0.3s;
}
 a.link-box:hover svg {
	margin-right: -4px;
	margin-left:4px;
	stroke: #c30;
}
a.link-button {white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;font-size:87%; line-height: 110%; padding: 6px 16px 8px 8px; border:solid 1px #ddd; border-radius:16px; background:#f7f7f7; transition:ease 0.5s;}
a.link-button svg path{fill:none; stroke:#999; vertical-align:bottom;}
a.link-button:hover{background:#eee; }
a.link-button:hover svg path {stroke: #c30;}
********/

.top-tab{white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight:500;
	font-size: 13px;
	color: #777;
	padding: 0px 12px;
	border: solid 1px #ddd;
	border-radius: 0 16px 0 0;
	background: #f5f5f5;
	display:inline-block;
	margin-top:12px;
	margin-bottom:-8px;

}


section.ref dl {margin: 16px 0; border:solid 1px #ccc; border-radius: 5px; padding: 8px; background:#f5f5f5;}
section.ref dl dt {}
section.ref dl dd {font-size: 80%; text-align:right; padding-right:16px;}
section.ref dl:hover {background:#fcfcfc; transition: 0.5s ease;}
section.ref a dd {color: #999; font-size: 80%;}


footer {width:100%; margin-top:64px; background:#f7f7f7; border-bottom:solid 1px #369; }
footer div {max-width: 1200px; margin: 0 auto;}
footer div a {line-height: 32px; font-size: 80%; padding: 0px 2%;}