/* CSS For d3 styled text background on hover
	0v1:  JC March 16, 2014
*/


.nytg-tooltipContainer {
/*dynamic*/      
/* width: 230px; */

/*New*/
font-family: "helvetica neue",arial,sans-serif;
color: #211922;								/* p-style */
	
position: absolute;
bottom: 0;
left: 0px;									/* Horizontal offset */
font-size: 12px;
line-height: 16px;
padding: 10px; /* Tied to negative margins in footer! */
border-radius: 3px;
background: rgba(255,255,255,0.9);
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
border:1px solid rgba(200,200,200,0.85);
text-align:center;

/* Keep width definitions inclusive of padding etc */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.nytg-tooltip {
	text-align:center; 
	position: absolute;
}

.nytg-tooltip .nytg-title {
font-size: 16px;
margin-bottom: 2px;
text-align:center; 
color:#666;
}
.nytg-tooltip .nytg-rule{
height:1px;
margin:1px auto 3px;
background:#ddd;
width:100%;
}
.nytg-tooltip .nytg-subtitle {
text-align: left;
font-weight:bold;
}
.nytg-tooltip .nytg-description{
text-align: left;
line-height: 1.35em; /*pin style*/
font-size: 11px;
color:#666;
word-wrap: break-word;
}


.nytg-tooltip .nytg-image{
}

.nytg-tooltip .nytg-outputContainer {
padding-top:7px;
}
.nytg-tooltip .nytg-output {
text-align: left;
color: #AD9C9C;    /* grey */
}


.nytg-tooltip .nytg-value {
/* position:absolute;*/
right:10px;
top:28px;
overflow:hidden;
}

.nytg-tooltip .nytg-footerContainer {
/* padding-top:7px; */
background-color: #F2F0F0;
margin-left:-10px;           /* Tied to 10px padding in main container definition */
margin-right:-10px;
margin-bottom:-10px;
}




/* Image CSS3 formatting */
/* http://webdesignerwall.com/tutorials/css3-image-styles */
/* .card .image-wrap { */

/* Image class */
.card {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	
	/*New*/
	/* Image width to full */
	
	max-width: 100%;
	height: auto;
	
	
}



.comic_wrapper {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.comment {

	font-size:16px;
	
    margin: 3px;
    position: relative;
    
    background-color: #746C57;
    background-image: -moz-linear-gradient(center bottom , rgba(0, 0, 0, 0.3) 1%, rgba(255, 255, 255, 0.2) 100%);
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 -3px 1px rgba(0, 0, 0, 0.45) inset, 0 2px 2px rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    float: left;
    font-family: "Helvetica Light","Helvetica Neue", "Helvetica", "Helvetica Neue Medium", Arial, "Lucida Grande", sans-serif;
    font-weight: normal;
    line-height: 12px;
    min-width: 60px;
    padding: 8px 14px 10px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    /*j33 z-index: 2;*/
}





.example-obtuse:before {
    border-color: transparent #F3961C;
    border-style: solid;
    border-width: 0 0 30px 50px;
    bottom: -30px;
    content: "";
    display: block;
    position: absolute;
    right: 80px;
    width: 0;
}
.example-obtuse:after {
    border-color: transparent #FFFFFF;
    border-style: solid;
    border-width: 0 0 30px 20px;
    bottom: -30px;
    content: "";
    display: block;
    position: absolute;
    right: 110px;
    width: 0;
}
.example-obtuse {
    background: linear-gradient(#F9D835, #F3961C) repeat scroll 0 0 transparent;
    border-radius: 25px 25px 25px 25px / 50px 50px 50px 50px;
    color: #000000;
    margin: 0;
    padding: 15px 30px;
    position: relative;
}







/* Comic comment */
/* Below not used - comic not rendering */

.rectangle-speech-border:before {
	/* Right swipe */
    bottom: -25px;
    height: 20px;
    
    width: 35px; /* 50px; */
    left: 70px;
    
    background: none repeat scroll 0 0 white; /* transparent; */
    border-bottom-right-radius: 80px 50px;
    border-color: black; /*#5A8F00; green*/
    border-style: solid;
    border-width: 0 5px 5px 0;
    content: "";
    display: block;
    position: absolute;
    /*j33 z-index: 10;*/
}
.rectangle-speech-border:after {
	/* Left swipe */
    bottom: -25px;
    height: 20px;
    
    width: 20px;
    left: 70px;
    
    background: none repeat scroll 0 0 transparent;
    border-bottom-right-radius: 40px 50px;
    border-color: black;
    border-style: solid;
    border-width: 0 5px 5px 0;
    content: "";
    display: block;
    position: absolute;
    /*j33 z-index: 10;*/
}
.rectangle-speech-border {
	font-size:16px;
	line-height:0px; /* Assume no wrapping */
    text-align: center;
	
    background: none repeat scroll 0 0 #FFFFFF;
    border: 5px solid black;
    border-radius: 20px 20px 20px 20px;
    color: #333333;
    /* margin: 1em 0 3em 0; */
    margin: 0 0 0 0;
    padding: 0px 5px 0px 5px;
    position: relative;
    /*j33 z-index:11;*/
}


.example-obtuse:before {
    border-color: transparent #F3961C;
    border-style: solid;
    border-width: 0 0 30px 50px;
    bottom: -30px;
    content: "";
    display: block;
    position: absolute;
    right: 80px;
    width: 0;
}
.example-obtuse:after {
    border-color: transparent #FFFFFF;
    border-style: solid;
    border-width: 0 0 30px 20px;
    bottom: -30px;
    content: "";
    display: block;
    position: absolute;
    right: 110px;
    width: 0;
}
.example-obtuse {
    background: linear-gradient(#F9D835, #F3961C) repeat scroll 0 0 transparent;
    color: #000000;
    margin: 0;
    padding: 15px 30px;
    position: relative;
}


@font-face { font-family: Helvetica Neue Medium; src: url('HelveticaNeue-Medium.otf'); }
@font-face { font-family: Helvetica Neue Light; src: url('HelveticaNeue-Light.otf'); }
@font-face { font-family: 'Collator'; src: url('Collator.otf'); /* http://collator.tumblr.com/#about */ }
@font-face { font-family: 'Letterer'; src: url('VTC_letterer_pro-webfont.svg'); }
@font-face { font-family: 'Airplane'; src: url('Airplane.ttf'); }
@font-face { font-family: 'BlambotProLite'; src: url('BlambotProLite.ttf'); }














/* jonny-tool */
.jonny-tool {
	display:none;
	
	max-width:300px;
	min-width:300px;
	min-height:95px;
	border-width:0px 0px 0px 8px; /*was 10*/
	
    font-color: #3c445b;
    color: #3c445b;
    font-family: "Helvetica Light","Helvetica Neue", "Helvetica", "Helvetica Neue Medium", Arial, "Lucida Grande", sans-serif;
	
	text-align: left;
	margin:0;
	
	background: #eaeaea; /*solid*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaeaea', endColorstr='#f5f5f5'); /* for IE */
	background:-webkit-gradient(linear, left center, right center, from(#eaeaea), to(#f5f5f5));
	background: -moz-linear-gradient(left,  #eaeaea,  #f5f5f5); /* for firefox 3.6+ */
	
	padding: 5px 5px 5px 5px;
	
	/* Special left border */
	border-style:solid;
	border-left-color:#79bc9d; /* flat style */
}

.box-no-color {
	/* image circle to far left */
	border-left-width:0px;
	padding-left:10px;
}

.box-white {
	/* image circle to far left */
	background: white;
}


.jonny-title {
	font-size: 16px;
	line-height:200%;
	/* Increase letter spacing */
	letter-spacing: 0.06em;
}
.jonny-description {
	font-size: 13px;
	line-height:150%;
    color: #47557e; /*lighterish blue*/
}
.keyhole-bitmap-icon {
	max-width: 15px;
	max-height: 20px;
	padding:0px 2px 3px 2px;
	float: left;
	margin:3px 10px 30px 5px;
}

.spacer { /* For br style spacer */
	line-height:30%;
}

/* Image class */
.jonny-image-card {
    margin: 5px 10px 5px 5px;
	max-width: 40px; /*60 original*/
	max-height: 40px; /*60 original*/
	
	background:#ebeef5; /*slight blue*/
	background:#eaeaea; /*solid*/
	border-top-color:#c8c8c8;    /* Light grey */
	border-right-color:#dedede;   /* bit lighter */
	border-bottom-color:#fbfbfb; /* Almost white */
	border-left-color:#dedede;
	border-style: solid;
    border-radius: 8px 8px 8px 8px;
    border-width: 2px;
    
    padding: 20px 20px 20px 20px;
    
	/* height: auto; */
	
	float: left;
	top:0;
	left:1px;
	
	/* position:absolute; */
}

.jonny-image-card-circle {
	/* Round image with thick border */
    margin: 5px 10px 5px 0px;
	width: 80px;
	height: 80px;
	
    border-radius: 100%; /*80px 80px 80px 80px; */
	
    padding: 5px 5px 5px 5px; /* Inside border */
	
	background:#eaeaea; /*solid*/
	
	border-color:#c8c8c8;    /* Light grey */
	border-style: solid;
    border-width: 2px;
    
	float: left;
}

.color-outline {
	border-color:#79bc9d; /* flat style */
    border-width: 6px; /* was 8*/
    padding: 0px;
    
    /* Remove existing color */
}

/* CSS 3 scale support */

/* delthis????? */
.scaleOn {
/*General*/
transform: translate(0%, 0%) scale(1);
/*Firefox*/
-moz-transform: translate(0%, 0%) scale(1);
/*Microsoft Internet Explorer*/
-ms-transform: translate(50%, 200%) scale(2, 5);
/*Chrome, Safari*/
-webkit-transform: translate(50%, 200%) scale(2, 5);
/*Opera*/
-o-transform: translate(50%, 200%) scale(2, 5);
}



#iframeContainerWrapper {
	/* height: 481px, width: 320px */
	/* iframe popup placement */
	
	/* 0v2 JC Aug 14, 2014 - allow larger popup */
	
	/* position: absolute;
	width:100%;
	height:100%;
    left: calc(50% - 320px/2);
    top: calc(50% - 481px/2); */

    /* Center based on content size */
	position: absolute;
	width:100%;
	height:100%;
    left: calc(5%);
    top: calc(5%);
}


.webgl-iframe {
	z-index	: -9999;
	position: absolute;
	top	: 0;
	left	: 0;
	width	: 100%;
	height	: 100%;
	margin	: 0;
	padding	: 0;
}




#fps {
	color:grey;
}



/* Compatibility issues */
/* Main background image */

/*
html { 
  background: url(/images/gameui/ball_bk.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
*/