html, body, #CONTAINER, #APP, #HOME {
	width: 100%;
	height: 100%;
	font-family: sans-serif;
}
#HDR { 
	background-color: #fff; 
	box-shadow: 1px 0px 2px #ddd;
	position: relative; 
	z-index: 999;
}
#BODY { background-color: #000;  }
#LOGO-WRAPPER { 
	padding: 20px;
}
/*#LOGO {
	background: url('../src/vjtw-logo.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
}*/

#IndexPageLoader-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999999999999;
	background-color: #fff;
}

#IndexPageLoader {
	position: fixed;
	width : 100%;
	height: 100%;
	/*z-index: 9999999999999;*/
	background-color: #fff;
	background: url('../src/VizjustTW-LoadingPage.jpg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	/*opacity: 0;*/
}



#LOGO-badge {
	background: url('../src/vjtw-badge-layer.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
}

#LOGO-light {
	background: url('../src/vjtw-light-layer.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	top: -100%;
}

#LOGO-court {
	background: url('../src/vjtw-court-layer.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	top: -200%;
}

#LOGO-eye {
	background: url('../src/vjtw-eye-layer.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	top: -300%;
}

#LOGO-shadow {
	background: url('../src/vjtw-shadow-layer.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50%;
	top: -394%;
	z-index: -1;	
}

#NAV { padding: 1.6em 0em; }
.nav-option {
	text-align: center;
}
.nav-option img { 
	cursor: pointer; 
	display: inline-block;
	margin: 0px auto; 
	vertical-align: middle;
}
.nav-option-hovermarker {
	display: inline-block;
	vertical-align: middle;
	height: 70%;
	width : 7px;
	background-color: #FFF;
}

.nav-option-hovermarker.active { background-color: #F21D1D; }

/*.fb-like { left: -6px; }*/

.overlay-wrapper { 
	background-color: rgba(51, 51, 51, 0.8);
	position: fixed; 
	display: none; 
	height: 100%;
	width : 100%;
	overflow-y: scroll;
	top: 0px; 
	left: 0px; 
	z-index: 1000;
}
.overlay-wrapper.active { display: block; }
.overlay-btn { 
	position: relative;
	font-size: 40px;
	top: 20px;
	right: 20px;
	float: right; 
	color: #fff;
	cursor: pointer;
}
.overlay-context-group {
	background-color: #f4f4f4;
	margin: 30px auto;
	padding: 40px;
	width: 920px;
	min-height: 100%;
	border-radius: 10px;
}
.overlay-context-header {
	text-align: center;
	font-size: 1.5em;
}
.overlay-context-body-head {
	font-size: 1.2em;
	line-height: 2em;
}
.overlay-context-body-list li > h5 {  
	font-size: 1.2em; 
	line-height: 1.5em;
}
.overlay-context-body-list li > p { 
	font-size: 0.95em; 
	line-height: 3em; 
}

#HDR-FOOTER { 
	text-align: center; 
}
#HOME-LINK {
	font-size: 1em;
	font-family: Cambria;
	text-decoration: none;
	font-weight: 600;
	color: #000;
}
#SIGN { 
	position: absolute;
	top: 63%;
	left: 75%;
	z-index: 9999; 
}
.sect-part-img { display: inline-block; vertical-align: middle; }
.sect-part-imgwrapper { text-align: center; }
.sect-part-btnwrapper { text-align: center; }

.ver-helper {
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
.sect-part-btn {  
	display: inline-block;
	margin: 0px auto;
	border: 1px solid #fff;
	text-decoration: none;
	color: #fff;
	background-color: #d6053c;
	width: 100%;
	height: 48px;
	vertical-align: middle;
	box-shadow: 0px 16px 20px -9px rgba(255,0,64,0.49);
}

.sect-part-btn:hover {
	background-color: rgba(214, 5, 60, 0.5);
}

.sect-part-btn-img {
	position: relative;
	top: 8px;
}
.imgtxt-wrapper {  
	display: inline-block;
	vertical-align: middle;
	width: 98%;
}
.imgtxt {
	display: block;
	margin: 0px auto;
}
.social-group { 
	position: relative;
	display: inline-block; 
	vertical-align: middle; 
	float: left;
	left: 30%;
	margin: 7px 0px;
}
.social-btn {
	display: block;
	margin: 0.5em auto;
}

.bd-right { border-right: 1px solid #eee; }
.sect-part--box { 
	box-shadow: 1px 0px 3px #ccc; 
	background-color: #fff;
}

/* For intro page. */
.introsec-group {
	background-color: #E9E4E0;
	height: 100%;
	overflow-y: scroll;
}

.introsec {
	padding: 20px;
	font-family: sans-serif;
	background:#fff;
	border-radius:10px;
	box-shadow:0 1px 1px 0 #BF9720;
}

.introsec-wrapper {
	padding: 20px 30px;
}

.introsec-divline {
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #777;
}

.introsec-title {
	font-size: 1.5em;
	font-weight: 700;
	margin-left:34px;
	padding: 20px;
}

.introsec-context {
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	margin: 10px 20px;
}

.introsec-context-p { 
	margin: 20px 10px; 
	line-height: 1.5em;
}
.introsec-context-p-quote { font-style: italic;  }
.introsec-context-p-quote::before { content: '"'; }
.introsec-context-p-quote::after { content: '"'; }

/* Styles for the member intro */
.member-sect { height: 100% }
.member-sect-wrappper { padding: 15px; height: 350px; }
.member-sect-media, .member-sect-intro { 
	float: none;
	vertical-align: middle; 
}
.member-sect-media-photo {
	display: block;
	margin: 0 auto;
	height: 220px;
	width : 220px;
	vertical-align: middle;
}

.member-title { 
	display: inline-block;
	color: #fff;
	margin: 4px 0px;
}

.member-sect-media-banner {
	position: absolute;
	width: 200px;
	height: 24px;
	text-align: center;
}

/*.member-sect-intro {

	vertical-align: middle;
}*/

.member-sect-intro-name {
	font-size: 1.5em;
	font-weight: bold;
}

.member-sect-intro-context {
	padding: 1em 0em;
	line-height: 1.5em;
}

.member-social { padding: 20px; }

.member-social-iconwrapper {
	text-align: center;
}

.title-arrow {
	display: inline-block;
	position: absolute;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	vertical-align: middle;
}

.title-arrow.right { border-left: 12px solid #fff; }
.title-arrow.left { border-right: 12px solid #fff; }

#yd-title {
	left: 11%;
	top: 73%;
	background-color: #E71D36;
}
#dl-title {
	top: 70%;
	right: 11%;
	background-color: #FC6E02;
}

#cd-title {
	top: 73%;
	left: 11%;
	background-color: #3F6DE0;
}

#ll-title {
	top: 70%;
	right: 11%;
	background-color: #721664;
}

#jj-title {
	left: 11%;
	top: 70%;
	background-color: #007EA7;
}

#dl-title > .title-arrow, #ll-title > .title-arrow { right: 0px; }

#yd-title > .title-arrow, #jj-title > .title-arrow, #cd-title > .title-arrow { left: 0px; }


#DASHBOARD_HDR {
	border-right: 1px solid #ddd;
	box-shadow: 0.5px 0px 2px #ccc;
	z-index: 100;
}
#TITLE { 
	display: block;  
	margin: 0px auto;
}
#PANEL { 
	height: 100%; 
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
#DISPLAY_PANEL, #CRTL_PANEL { display: inline-block; }
#DATABOARD-vizLayer { 
	height: 100%; 
	background-color: #fefefe;
	box-shadow: 2px 2px 10px #999; 
	border-radius: 7px;
}
#DATABOARD_WRAPPER {
	height: 100%;
	padding: 20px 30px;
	background-color: #F5F3F0;
}
#CRTL_PANEL { height: 100%; position: relative; }
#OPTS fieldset { display:block; margin: 0px auto; border: 0px; }
#OPTS fieldset legend { font-size: 1.2em; }
#OPTS fieldset label { display: block; font-weight: 400; }
#SUBOPTS label { display: block; }

/* Update msg board */
.updateboard { 
	display : inline-block; 
	position: fixed;
	border: 7px;
	min-width: 150px;
	max-width: 180px;
	max-height: 100px;
	overflow-y: scroll;
	top: 60px;
	right: 30px;
	color: #fff;
	background-color: rgba(255, 159, 28, 0.75);
}

.updateboard:hover {
	background-color: rgba(255, 159, 28, 0.95);
}

.updatebaord-collapsed-btn { 
	display: inline-block;
	position: relative;
	float: right; 
	margin-right: 10px;
	cursor: pointer;
}

.updateboard-title {
	text-align: center;
	padding: 5px 0px;
	background-color: rgba(237, 94, 0, 0.75); 
}

.updateboard-title:hover {
	background-color: rgba(237, 94, 0, 0.95); 
}

.updateboard-list {
	
}
.updateboard-list h3 { font-size: 0.95em; }
.updateboard-list p { 
	font-size: 0.8em; 
	margin: 0.5em 0em;
}

/* Left the padding for axes */

#FILTER_WRAPPER { padding: 10px 20px; }

#FILTER {
	position: relative;
	border: 1px solid #adadad;
	border-radius: 4px;
	box-shadow: 2px 2px 7px #bbb;
}
#FILTER-TITLE { 
	text-align: center; 
	font-weight: 800;
		background-color: #cc4433;
	color: #f1f1f1;
	font-size: 0.8em;
}

#RING_STATS_BOARD, #RING_PERCENTAGE_BOARD {
	position: absolute;
	display: inline-block;
}

#RING_STATS_BOARD {
	font-family: sans-serif;
	background-color: #333;
	box-shadow: 2px 2px 3px #222;
}

#RING_PERCENTAGE_BOARD {
	background-color: #f0f0f0;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#LINE-INFO-BOARD {
	position: absolute;
	bottom: 10%;
	right : 10%;
	height: 100px;
}

.board { min-width: 300px; }


.board-body-title {
	font-size: 1em;
	font-family: sans-serif;
}

.board-body-txt {
	color: #222;
	font-size: 5em;
	font-family: monospace;
}

.board-body-txt:after {
	content: '%';
	font-size: 0.4em;
}

.board-dropdown-header { 
	position: relative;
	color: #fff;
	text-align: center;
	background-color: #3c678c;
	padding: 0.5em 0em;
	box-shadow: 0px 0.5px 3px #777;
}

.board-dropdown-header span.title { font-size: 0.9em; }

.board-dropdown-menu { padding: 5px 10px; }		

.board-dropdown-panel { 
	padding: 0.3em 0em; 
	font-size: 0.8em; 
}

.board-dropdown-menu rect.selected { fill: red; }

.arrow { 
	position: absolute;
	right: 12px;
}

.arrow-left, .arrow-right { 
	display: inline-block;
	background-color: #eee;
	height: 3px;
	width: 12px; 
}

.arrow-left { 
	transform-origin: 0px 2px;
	transform: translateX(5px) rotate(-45deg);  
}

.arrow-right {
	transform-origin: 12px 2px;
	transform: translateX(-5px) rotate(45deg); 
}

.hdr-div--txt-mid { text-align: center; }

.formblock-fieldset {
	border-bottom: 1px solid #ddd;
}

.formblock-fieldset:last-child { border-bottom: 1px solid transparent; }

.dropdown {
	padding: 0 10%;
}

.dropdown-btn {
	display: block;
	height: 30px;
	width: 100%;
	margin: 0px auto;
	background-color: #337ab7;
	border: 1px solid #236da4;
	border-radius: 4px;
}

.dropdown-txt {
	color: #fff;
}

.dropdown-txt--ft-size-11 {  
	font-size: 1.1em;
}

.dropdown-txt--ft-size-12 {  
	font-size: 1.2em;
}

.dropdown-group { 
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 98%; 
}

.dropdown-title {
	color: #666;
	text-align: center;
	margin: 0.25em auto 0.25em;
}

.dropdown-caret {
	display: inline-block;
	width: 0;
	height: 0;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-top: 4px solid #fff;
	vertical-align: middle;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	z-index: 1000;
	display: none;
	border: 1px solid #999;
	border-radius: 4px;
	font-size: 0.8em;
	text-align: center;
	min-width: 170px;
	background-color: #fff;
	max-height: 80px;
	overflow-y: scroll; 
}

.dropdown-menu.displayed { display: block; }

/* In OSX, the scroll bar is hidden unless user scrolls. Therefore, let's make it visible always. */
.dropdown-menu::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.dropdown-menu li {
	cursor: pointer;
	padding: 0.5em 0em;
	border-bottom: 1px solid #888;
}

.dropdown-menu li:last-child {
	border-bottom: none;
}

.tale-container { 
	display: inline-block; 
	position: absolute;
}

.tale-body { 
	background-color: #333;
	padding: 0.5em 1em;
	color: #fff; 
}
.tale-body-link { color: #0af;  }

.nextbtn {
	cursor: pointer;
	color: #fff;
	height: 36px;
	width : 100px;
	border-radius: 4px;
	text-align: center;
	margin-top: 0.5em;
	float: right; 
}

.more-indicator { vertical-align: middle; }

.formblock-fieldset:last-child .dropdown-menu { top: 25px; }

.mark { font-family: sans-serif; font-size: 0.8em; fill: #fff; }
.x-axis path { fill: none; }
.x-axis .axis-name,
.y-axis .axis-name { font-size: 0.95em; font-family: sans-serif; }
.x-axis path { fill: none; stroke: #909090; }
.y-axis path { fill: none; stroke: #999;  }
.x-axis .tick text,
.y-axis .tick text { font-size: 0.95em;font-family: monospace; }

.dots:hover { cursor: pointer; }

.tip {
	display: none;
	position: absolute;
	padding: 5px;
	background-color: #333;
	color: #fff;
	line-height: 1.5;
	font-size: 14px;
}

.tip::after, .tip::before { 
	box-sizing: border-box;
	position: absolute; 
	color: #333;
	font-size: 16px;
	width: 100%;
	left: 49%;
	line-height: 0.6;
}

.tip span.up-arrow {
	width : 0;
	height: 0;
	border-left : 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid green;
}

.tip span.down-arrow {
	width : 0;
	height: 0;
	border-left : 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 10px solid red;
}

.tip::before { 
	display: none;
	content: "\25B2";
	top: -9px; 
}

.tip::after { 
	display: none;
	content: "\25BC";
	top: 100%; 
}

.tip .tag {
	color: #08f;
}

.tip-after-display::after, 
.tip-before-display::before { display: block; }

.tip-after-none::after, 
.tip-before-none::before { display: none; }


.tip.display { display: inline-block; }
.tip, .tip:after { /*opacity: 0.95;*/ }
.tip span { display: block; }
.tip span.align { display: inline-block; }
/* Story tellor indicator */
.indicators {
	display: inline-block;
	position: fixed;
	top  : 0px;
	right: 3px;
	width: 25px;
	border-radius: 7px;
	background-color: rgba(255, 255, 255, 0.5);
}
.indicator-block {
	height: 25px;
	position: relative;
	/*border-bottom: 1px solid #eee;*/
}
.indicator-block:last-child {
	border-bottom: none;
}
.indicator {
	position: absolute;
	left: 6.5px;
	top : 6.5px;
	height: 12px;
	width: 12px;
	border-radius: 6px;
	background-color: #ddd;
}

.indicator-small {
	position: absolute;
	left: 8px;
	top : 8px;
	height: 9px;
	width : 9px;
	border-radius: 4.5px;
	background-color: #ddd;
}

.indicator-marker, .indicator-small-marker {
	position: absolute;
	left: 0px;
	top : 0px;
	height: 100%;
	width : 100%;
}

.indicator-marker { border-radius: 6px; }
.indicator-small-marker { border-radius: 4.5px; }

		.indicator-marker.passed, .indicator-small-marker.passed { /*background-color: #FB4D1C; */background-color: #FB8C0C;}
		.indicator-marker.active, .indicator-small-marker.active { background-color: #06A51E; }