@charset "utf-8";

html {
	height: 100%;
	width: 100%;
	background-color: #44b;
	background-image: url("images/borontransrnd.svg");
	background-size: 15%;
	cursor: default;
	font-family: Arial, sans-serif;
}

body {
	height: auto;
	width: auto;
	margin: 5px 2px;
}

.raster, .raster img {
	height: 3px;
	width: 5px;
	position: absolute;
	opacity: .1;
}

::selection {
    color: none;
    background: none;
}

.stage {
	cursor: crosshair;
}

#scorecard, #cright {
	cursor: default;
}

a:active {
	opacity: .7;
}



.stage {
	background-color: #99CCFF;
	margin: 0em;
	padding: 0em;
	width: 35em;
	overflow: hidden;
	height: 50em;
	font-size: 10px;
}

#gamebackdrop {
	position: absolute;
	width: 35em;
	height: 50em;
	overflow: hidden;
}

/* Insert #gbackdrop into Background in SVG tag */
#gbackdrop {
	position: relative;
	top: -.5em;
	right: .5em;
	width: 36em;
	height: 51em;
}


#Lines1, #Lines2, #Lines3, #Lines4, #Lines5, #Lines6, #Lines7 {
	opacity: 0;
	animation-name: linesAni7;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}


#Lines1 {
	opacity: 0;
	animation-name: linesAni1;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}

#Lines2 {
	opacity: 0;
	animation-name: linesAni2;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}

#Lines3 {
	opacity: 0;
	animation-name: linesAni3;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}

#Lines4 {
	opacity: 0;
	animation-name: linesAni4;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}

#Lines5 {
	opacity: 0;
	animation-name: linesAni5;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}


#Lines6 {
	opacity: 0;
	animation-name: linesAni6;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}

#Lines7 {
	opacity: 0;
	animation-name: linesAni7;
    animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes linesAni7 {
    0%   {opacity: 0;}
	50%   {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes linesAni6 {
    0%   {opacity: .15;}
	43%   {opacity: 1;}
	93%   {opacity: 0;}
    100% {opacity: .15;}
}

@keyframes linesAni5 {
    0%   {opacity: .3;}
	35%   {opacity: 1;}
	85%   {opacity: 0;}
    100% {opacity: .3;}
}

@keyframes linesAni4 {
    0%   {opacity: .45;}
	28%   {opacity: 1;}
	78%  {opacity: 0;}
    100% {opacity: .45;}
}



@keyframes linesAni3 {
    0%   {opacity: .6;}
	20%   {opacity: 1;}
	70% {opacity: 0;}
    100% {opacity: .6;}
}


@keyframes linesAni2 {
    0%   {opacity: .75;}
	13%   {opacity: 1;}
	63% {opacity: 0;}
    100% {opacity: .75;}
}

@keyframes linesAni1 {
    0%   {opacity: .9;}
	5%   {opacity: 1;}
	55% {opacity: 0;}
    100% {opacity: .9;}
}



.boron {
	width: 6em;
	background-color: #CCFFCC;
	background-image: url("images/boronbrnd.svg");
	background-size: 6em 6em;
	background-repeat: no-repeat;
	margin: .2em;
	padding: 0em;
	float: right;
	position: relative;
	border: thin solid #009900;
	top: -6em;
}

.boron2 {
	width: 6em;
	background-color: #BBFFBB;
	background-image: url("images/boronbrnd.svg");
	background-size: 6em 6em;
	background-repeat: no-repeat;
	margin: .2em;
	padding: 0em;
	float: right;
	position: relative;
	border: thin solid #009900;
	top: -12em;
}

.elemname {
	font-size: 3em;
	font-weight: normal;
	font-family: arial, sans-serif;
	}

.elemname sup {
	font-size: .6em;
	font-weight: normal;
	font-family: arial, sans-serif;
	}

@keyframes b0ani {
    0%   {top: 51em; right: 1em;}
    100% {top: 51em; right: 1em;}
}


@keyframes b1ani {
    0%   {top: -6em; right: 1em;}
	.01%  {top: -5.5em; right: 0em;}
	40%  {top: 10em; right: .5em;}
	99.99%  {top: 50em; right: 2em;}
    100% {top: 51em; right: 1em;}
}

@keyframes b2ani {
    0%   {top: -6em; right: 1em;}
	.01%  {top: -5.5em; right: 2em;}
	60%  {top: 40em; right: 1.5em;}
	99.99%  {top: 50em; right: 0em;}
    100% {top: 51em; right: 1em;}
}

@keyframes b3ani {
    0%   {top: -6em; right: 1em;}
	.01%  {top: -5.5em; right: .5em;}
	55%  {top: 30em; right: 0em;}
	99.99%  {top: 50em; right: 1.5em;}
    100% {top: 51em; right: 1em;}
}

@keyframes b4ani {
    0%   {top: -6em; right: 1em;}
	.01%  {top: -5.5em; right: 1.5em;}
	45%  {top: 20em; right: 2em;}
	99.99%  {top: 50em; right: .5em;}
    100% {top: 51em; right: 1em;}
}

@keyframes b5ani {
    0%   {top: -6em; right: 1em;}
	.01%  {top: -5.5em; right: 2.5em;}
	50%  {top: 25em; right: 1em;}
	99.99%  {top: 50em; right: -.5em;}
    100% {top: 51em; right: 1em;}
}








#scorecard {
	position: absolute;
	background-color: #aaee44;
	height: 35em;
	width: 35em;
	font-family: arial, sans-serif;	
}



#gamename {
	position: absolute;
	top: .1em;
	left: .2em;
	opacity: 1;
	font-size: 6em;
	background-color: yellow;
	padding: 0 .1em;
}

#closebut {
	position: absolute;
	right: 1em;
	top: 2em;
	}

#closebut a {	
	font-size: 5em;
	font-weight: 700;
	padding: .1em;
	background-color: lightblue;
	text-decoration: none;
	border: .05em solid lightyellow;
}

#closebut a:hover {	
	background-color: pink;
}

#resetbut {
	position: absolute;
	right: 1em;
	top: 10em;
	}

#resetbut a {	
	font-size: 3em;
	font-weight: 700;
	padding: .1em;
	background-color: lightgreen;
	text-decoration: none;
	border: .05em solid lightyellow;
	display: block;
}

#resetbut a:hover {	
	background-color: pink;
}

#scorenumber {
	background-color: lightyellow;
	padding: 0 .1em;
	margin: .1em;
}


#scorenumber {
	position: absolute;
	top: 3.5em;
	left: 1.5em;
	font-size: 6em;
	opacity: 1;
	font-weight: bold;
}



#cright {
	position: absolute;
	top: 30em;
	width: 35em;
	height: 5em;
	background-color: lightgreen;
}


#crighttxt {
font-size: 2em;
	font-family: verdana, arial, sans-serif;
	margin-left: 2em;
}

#crightbr {
	display: inline;
}

#crighttxt:before {
	content: "\A9 2016 ";
}

!#gamedesk {
	display: none;
}

#gamebackdropmobi {
		background-image: url(images/BoronGameBrnd04Clean.svg);
		height: 50em;
		width: 35em;
		position: absolute;
		background-size: 102%;
		background-position: -.5em -.5em;
	}
	
	
#playBut {
	position: absolute;
	top: 37em;
	left: 4em;
}

#playBut button {
	font-size: 10em;
	cursor: pointer;
}


#roundcontrol {
	display: none;
}