@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'spilt_inkregular';
    src: url('fonts/spilt-ink-webfont.eot');
    src: url('fonts/spilt-ink-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/spilt-ink-webfont.woff') format('woff'),
         url('fonts/spilt-ink-webfont.ttf') format('truetype'),
         url('fonts/spilt-ink-webfont.svg#spilt_inkregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
	background:black;	
}

#bText{
	width:300px;
	float:left;
	height:auto;
	color:white;
	font-size:300px;
	text-align:center;
	font-family:'spilt_inkregular', Verdana, Geneva, sans-serif;
	position:relative;
	z-index:10;
	opacity:0.8;
}

.b{
	width:100%;
	height:1000%;
	position:fixed;
	top:0;
	left:0;		
}

#b-blue{ background:url(images/b-blue.png);	}
#b-red{	background:url(images/b-red.png); }
#b-green{ background:url(images/b-green.png); }

#bubbleGame{
	width:75%;
	height:100%;
	position:fixed;
	right:0;
	top:0;
}

.bubble{
	background:url(images/b-white.png);
	background-size:cover;	
	position:absolute;
}

#bottomCorner{
	position:fixed;
	bottom:0;
	right:0;
	color:white;
	text-align:right;
}

#score{
	font-size:4em;
	width:auto;
	height:1em;
	padding:0 0.2em 0.2em 0.3em;
	font-family:'spilt_inkregular', Verdana, Geneva, sans-serif;
	border-top:2px solid white;
	border-left:2px solid white;
	border-top-left-radius:25px;
}

/************************************************************************
			Dinosaur
************************************************************************/

#dinosaur{
	width:65px;
	height:95px;
	position:fixed;
	bottom:5em;
	right:0;
}

#dinosaur span{
	display:block;	
}

#head{
	position:absolute;
	top:0;
	left:2px;
	z-index:100;
}

#headTop{
	width:40px;
	height:40px;
	
	transform:rotate(0deg);
	
	position:absolute;
	top:0;
	left:0;
	
	z-index:20;
}

.headAni{
	-webkit-animation:headAni 1200ms;
	animation:headAni 1200ms;
}

@keyframes headAni{
	0%{ transform:rotate(0deg); }
	25%{ transform:rotate(50deg); }
	100%{ transform:rotate(0deg); }
}
@-webkit-keyframes headAni{
	0%{ -webkit-transform:rotate(0deg); }
	25%{ -webkit-transform:rotate(50deg); }
	100%{ -webkit-transform:rotate(0deg); }
}

#headTop section{
	width:40px;
	height:19px;
	
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-top:1px solid hsla(110,77%,23%,1.00);
	border-right:1px solid hsla(110,77%,23%,1.00);
	border-left:1px solid hsla(110,77%,23%,1.00);
	background-color:hsla(110,77%,53%,1.00);
}

#headTop #eye{
	width:8px;
	height:10px;
	background-color:hsla(183,100%,89%,1.00);
	
	position:absolute;
	top:4px;
	left:10px;	
	
	border-radius:10px;
	border:1px solid hsla(183,100%,19%,1.00);
}

#eye span{
	width:5px;
	height:5px;
	border-radius:6px;
	background-color:hsla(183,100%,19%,1.00);
	position:absolute;
	bottom:0;
	left:0;		
}

#headBottom{
	width:40px;
	height:18px;
	
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	border-bottom:1px solid hsla(110,77%,23%,1.00);
	border-right:1px solid hsla(110,77%,23%,1.00);
	border-left:1px solid hsla(110,77%,23%,1.00);
	background-color:hsla(110,77%,53%,1.00);
	
	position:absolute;
	top:20px;
	left:0;	
}

#mouthline{
	width:20px;
	height:0;
	border-top:1px solid hsla(110,77%,23%,1.00);
	position:absolute;
	top:0;
	left:0;	
}

#body{
	width:50px;
	height:70px;
	background-color:hsla(110,77%,53%,1.00);
	position:absolute;
	bottom:0;
	left:0;
	
	border:1px solid hsla(110,77%,23%,1.00);
	border-bottom-left-radius:20px 35px;
	border-bottom-right-radius:25px;
	border-top-left-radius:30px 35px;
	border-top-right-radius:20px 50px;
}

#tummy{
	width:20px;
	height:50px;
	background-color:hsla(52,100%,83%,1.00);
	
	position:absolute;
	bottom:0;
	left:0;
	
	border-bottom-left-radius:20px 35px;
	border-top-left-radius:5px 15px;
	
	border-top-right-radius:20px 30px;
	border-bottom-right-radius:5px 30px;
}

#arm{
	width:10px;
	height:20px;
	background-color:hsla(110,77%,53%,1.00);
	border-bottom:1px solid hsla(110,77%,23%,1.00);
	border-left:1px solid hsla(110,77%,23%,1.00);
	border-right:1px solid hsla(110,77%,23%,1.00);
	
	position:absolute;
	left:20px;
	top:28px;
	
	border-bottom-left-radius:10px 25px;
	border-bottom-right-radius:7px;		
}

#foot{
	width:15px;
	height:8px;
	
	background-color:hsla(110,77%,53%,1.00);
	border-bottom:1px solid hsla(110,77%,23%,1.00);
	border-left:1px solid hsla(110,77%,23%,1.00);
	border-top:1px solid hsla(110,77%,23%,1.00);
	border-top-left-radius:35px 20px;
	border-bottom-left-radius:5px;
	
	position:absolute;
	
	bottom:-1px;
	left:4px;	
}

#tailTop{
	width:15px;
	height:10px;
	background-color:hsla(110,77%,53%,1.00);
	
	border-right:1px solid hsla(110,77%,23%,1.00);
	border-top:1px solid hsla(110,77%,23%,1.00);
	
	position:absolute;
	right:5px;
	bottom:9px;
	z-index:20;
	
	border-top-right-radius:65px 45px;
}

#tailBottom{
	width:35px;
	height:10px;
	background-color:hsla(110,77%,53%,1.00);
	
	border:1px solid hsla(110,77%,23%,1.00);
	/*border-top:1px solid hsla(110,77%,23%,1.00);
	border-left:1px solid hsla(110,77%,23%,1.00);*/
	
	position:absolute;
	bottom:-1px;
	right:5px;	
	
	border-top-left-radius:45px 10px;
	border-bottom-left-radius:3px;	
	border-bottom-right-radius:10px;
}

.spike{
	width:0px;
	height:0px;
	border:10px solid;
	border-color:transparent transparent hsla(52,100%,83%,1.00) transparent;
	
	position:absolute;
	
}

#headspike1{
	transform:rotate(15deg) scale(0.6, 1.2);
	-webkit-transform:rotate(15deg) scale(0.6, 1.2);
	top:-18px;
	left:18px;
}
#headspike2{
	transform:rotate(40deg) scale(0.6, 1.2);
	-webkit-transform:rotate(40deg) scale(0.6, 1.2);
	top:-10px;
	left:32px;
}
#headspike3{
	transform:rotate(80deg) scale(0.6, 1.2);
	-webkit-transform:rotate(80deg) scale(0.6, 1.2);
	top:6px;
	left:40px;
}