@charset "UTF-8";

/* 	Begin Modified Meyer Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
/* HTML5 reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display:block;
}
div{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body { line-height:1; letter-spacing:-0.25px; }

/*layout and general styles */
body {background:#fff;margin:0px none;padding:0px none;font-family:nunitoregular, Arial, sans-serif;font-size:14px;overflow:hidden;}
#container {text-align:center;display:block;margin:0px;padding:0px;width:100%;}
#contentbox {position:relative;display:inline-block;left:0px;top:0px;width:768px;height:950px;
background-image:url('images/bubbles.png');background-size:100% 100%;border-radius:30px;overflow:hidden;}
#boardframe, #gameboard {position:absolute;width:100%;height:100%;left:0px;top:0px;}

.fb-like {position:absolute !important;left:24px !important;top:144px !important;width:100px !important;height:150px !important;overflow:visible !important;
z-index:501;text-align:left !important;}

.undercolor {background-color:#403777;}
.circlebuttons {position:absolute;width:110px;height:110px;left:0px;cursor:pointer;}
.buttonpart {position:absolute;pointer-events:none;}
.circlebuttonbg {width:90px;height:90px;left:9px;top:9px;border-radius:50%;
	opacity:0;z-index:1;}
.circlebutton {left:0px;width:100%;height:100%;z-index:2;pointer-events:none;}
.widebuttonbg {position:absolute;width:230px;height:26px;left:15px;top:12px;border-radius:4px;
	opacity:0;z-index:1;pointer-events:none;}
.widebtndiv {position:absolute;width:262px;height:52px;text-align:center;margin:0px;padding:0px;}
.widebutton {position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:2;pointer-events:none;
	margin:0px;padding:0px;}
.widebtntext {position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:2;pointer-events:none;
	text-shadow: 1px 1px #000;margin:0px;padding:0px;line-height:52px;
	font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;
	font-size:18px;color:white;}
a:link {color:white;text-decoration:none;}
a:hover {color:white;text-decoration:underline;}
a:visited {color:white;text-decoration:none;}
		
		
a.darklink:link {color:blue;text-decoration:none;}
a.darklink:hover {color:blue;text-decoration:underline;}
a.darklink:visited {color:blue;text-decoration:none;}

.dombutton {
			border-radius:10px;
			width:120px;height:45px;
			font-size:18px;
			font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;
			background:#44326A;
			color:white;
			border: 6px ridge #95B5E7;
			cursor:pointer;margin:0px;padding:0px;line-height:18px;
		}
		
		
/* Game Screen */
.popper {position:absolute;width:160px;height:160px;left:0px;}
.dieholder {position:absolute;width:100%;height:100%;
	background-image:url('images/PopperBottom.png');background-size:100% 100%;}
.popperbg {position:absolute;left:13px;top:13px;width:130px;height:130px;opacity:0;border-radius:50%;}
.die {position:absolute;left:32px;top:32px;width:100px;height:100px;}
.poppertop {position:absolute;left:7px;top:7px;width:144px;height:144px;cursor:pointer;}

#poppercolumn {position:absolute;left:585px;top:12px;}
#popper0 {top:0px;}
#popper1 {top:148px;}
#popper2 {top:296px;}
#popper3 {top:444px;}
#popper4 {top:592px;}
.shortcut {position:absolute;top:125px;left:73px;width:20px;height:20px;display:block;text-align:center;font-size:18px;line-height:18px;
	pointer-events:none;color:white;background:transparent;border:0px solid silver;border-radius:4px;
	font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;}
#shortcut5 {top:104px;left:63px;color:rgba(255,255,255,0.35);}
#donation {position:absolute;width:230px;height:26px;left:300px;top:950px;cursor:pointer;}
#submitbtn {width:100%;}

#bopbutton {position:absolute;width:150px;height:150px;left:9px;top:740px;cursor:pointer;}
#bopbuttonbg {position:absolute;width:108px;height:104px;left:19px;top:19px;border-radius:24px;
	opacity:0;z-index:1;pointer-events:none;}
#bopbuttonimg {width:100%;height:100%;z-index:2;pointer-events:none;}

#bopoption {position:absolute;width:150px;left:10px;top:896px;cursor:pointer;text-align:left;font-size:14px;line-height:16px;
font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;height:24px;}
#bopcheck {position:absolute;background:white;border:2px solid black;padding:0px;margin:0px;border-radius:4px;width:20px;height:20px;
font-size:16px;line-height:18px;left:120px;top:-4px;text-align:center;}

#controls {position:absolute;left:16px;top:450px;width:120px;height:350px;}
#undobutton {top:0px;display:none;}
#undobuttonicon {width:70px;left:20px;top:20px;z-index:2;pointer-events:none;}

#helpbutton {top:110px;}
#helpbuttonicon {width:40px;left:34px;top:17px;z-index:2;pointer-events:none;}

#menubutton {top:220px;}
#menubuttonicon, #hsmenubuttonicon {width:70px;left:19px;top:45px;z-index:2;pointer-events:none;}

#donatebutton {top:330px;}
#donatebuttonicon {width:70px;left:20px;top:22px;z-index:2;pointer-events:none;font-family:arial, sans-serif;font-size:64px;}

#logotext {position:absolute;left:160px;top:10px;width:390px;}
.scorepaper {position:absolute;left:124px;top:20px;width:460px;height:876px;
	background-image:url('images/scorepadbg.png');background-size:100% 100%;}
#scorepadlabels {position:absolute;left:24px;top:54px;width:146px;height:793px;
	background-image:url('images/padlabels.png');background-size:100% 100%;}
#eggcarton {position:absolute;left:0px;top:30px;width:20px;height:130px;}
.egg {background:rgba(255,255,255,0.01);float:left;width:20px;height:41px;border-bottom:0px solid black;}
#bopzeehl {position:absolute;left:27px;top:498px;width:140px;height:38px;
	background:white;border:2px solid red;display:none;}
#tracker {font-size:9px;color:white;position:absolute;left:50px;top:50px;width:100px;height:40px;display:none;}
.padcolumn {position:absolute;top:52px;width:130px;height:793px;border-width:1px 1px 1px 1px;border-style:solid;
	color:#403777;font-size:0px;text-align:center;margin:0px;padding:0px;line-height:0px;}
.padcellbig {font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;
	width:126px;height:32px;font-size:16px;float:left;margin:0px;padding:0px;line-height:28px;}
.padcellmedium {width:43.33px;height:41px;line-height:40px;background-color:rgba(255,66,11,0.01);float:left;
	margin:0px;padding:0px;cursor:pointer;font-size:16px;}
.padcellsmall {width:43.33px;height:29px;background-color:rgba(11,255,255,0.01);float:left;margin:0px;padding:0px;
font-size:15px;line-height:25px;}
.padbeam {background:red;width:132px;height:4px;position:absolute;top:-2px;left:-1px;}

#padcolumn0 {left:170px;}
#padcolumn1 {left:300px;}

#eraser {position:absolute;height:100px;display:none;opacity:1;
animation-name: ruberaser;animation-duration: 1.7s;z-index:10;}

@keyframes ruberaser {
    0%   {opacity:0;padding-left:0px;}
    5%  {opacity:1;padding-left:20px;}
    20%  {opacity:1;padding-left:0px;}
    25%  {opacity:1;padding-left:20px;}
    40%  {opacity:1;padding-left:0px;}
    45% {opacity:1;padding-left:20px}
    60% {opacity:1;padding-left:0px}
   100% {opacity:0;padding-left:0px}
}

#feedback {position:absolute;left:128px;top:886px;width:448px;border-radius:12px;color:white;font-size:18px;
padding-left:4px;padding-right:4px;padding-top:0px;padding-bottom:5px;text-align:center;line-height:38px;
background-color:rgba(64,55,119,0.8);text-align:center;}

/* Menu Screen */	
#menuscreen {position:absolute;left:0px;top:0px;z-index:5;display:block;cursor:pointer;
	width:768px;height:950px;background:rgba(255,255,255,0.1);border-radius:30px;overflow:hidden;
	background-image:url('images/screenbg.png');background-size:100% 100%;display:none;}
#newgamebutton {left:90px;top:280px;cursor:pointer;}
#backbutton {left:90px;top:340px;cursor:pointer;display:none;}
#highscorebutton {left:420px;top:280px;cursor:pointer;}
#donatebutton2 {left:420px;top:340px;cursor:pointer;}
#menubottom {position:absolute;left:55px;top:400px;text-align:center;}
.copyright {position:absolute;top:500px;font-size:16px;color:white;width:100%;height:25px;line-height:25px;
margin:0px;padding:0px;text-shadow: 1px 1px #000;}
.radiobuttons {position:absolute;width:56px;height:56px;left:0px;cursor:pointer;}
.radiobuttonbg {width:28px;height:28px;left:10px;top:10px;border-radius:50%;border:4px solid #fff;
	opacity:0;z-index:0;background:black;}
.radiobutton {left:0px;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0.9;}

.languagelabel {position:absolute;top:0px;left:60px;text-align:left;
	font-size:24px;color:white;width:150px;height:25px;line-height:50px;margin:0px;padding:0px;text-shadow: 1px 1px #000;
	font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;}
#player1button {left:100px;top:130px;}
#player2button {left:100px;top:200px;}
#language1button {left:460px;top:130px;}
#language2button {left:460px;top:200px;}
.player1icon {position:absolute;left:60px;top:0px;}
.player2icon {position:absolute;left:86px;top:0px;}
.playernames {position:absolute;left:225px;width:160px;height:36px;border-radius:8px;color:white;font-size:16px;
padding-left:8px;z-index:6;}
#player1name {top:138px;}
#player2name {top:208px;}
		
/* Help Screen */					
#helpscreen {position:absolute;left:20px;top:20px;z-index:5;display:none;cursor:pointer;
	width:728px;height:984px;background:rgba(255,255,255,0.1);}
#helpimg {position:absolute;left:14px;top:0px;}

/* High Score Screen */					
#highscoresscreen {position:absolute;left:17px;top:17px;z-index:500;width:730px;height:912px;text-align:center;
background:white;display:none;}
#highscoresbg {position:absolute;left:0px;top:0px;width:730px;height:912px;}
#highscoresheading {position:absolute;left:125px;top:190px;width:500px;}
#highscorestable {position:absolute;left:105px;top:235px;width:520px;display:block;}
#highscorestable table {width:100%;font-family:nunitoregular,Arial,sans-serif;font-weight:normal;font-size:14px;line-height:14px;
border:1px solid #baa385;}
#highscorestable table th{font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;
	font-weight:normal;font-size:16px;line-height:28px;text-align:center;height:30px;border:1px solid #baa385;}
#highscorestable table td{line-height:26px;text-align:center;height:28px;border:1px solid #baa385;background:white;}
.hscol0 {width:20px;text-align:right;font-family:nunitobold,"Arial Rounded MT Bold", "Helvetica Rounded","Arial Black", sans-serif;}
.hscol1 {width:200px;text-align:center;}
.hscol2 {width:200px;text-align:center;}
.hscol3 {width:100px;text-align:center;}
#hsclearbutton {position:absolute;left:235px;top:630px;cursor:pointer;}
#hsbackbutton {position:absolute;left:235px;top:715px;cursor:pointer;}
#hsmenubutton {position:absolute;left:305px;top:790px;cursor:pointer;}


/* Alerts and Confirmations */					
#alertscreen {position:absolute;left:17px;top:17px;z-index:502;width:730px;height:912px;text-align:center;
background:rgba(0,0,0,0.8);display:none;}
#alertcontent {position:absolute;left:150px;top:200px;width:430px;}
#alertpad {position:absolute;left:0px;top:0px;width:100%;}
#alerttext {position:absolute;left:30px;top:50px;text-align:left;font-size:24px;width:370px;line-height:32px;margin:0px;padding:0px;}
#alertokbutton {position:absolute;left:86px;top:250px;cursor:pointer;}
#alertcancelbutton {position:absolute;left:86px;top:310px;cursor:pointer;}

/* Opening Anim */					
#opening {position:absolute;left:17px;top:17px;z-index:510;cursor:pointer;width:730px;height:912px;text-align:center;
background:white;}
#openingimg {position:absolute;left:0px;top:0px;width:100%;}
#openingtext {position:absolute;left:0px;top:360px;font-size:24px;width:90%;display:block;line-height:30px;padding:5%;}
#startBtn {left:230px;cursor:pointer;width:200px;}
#regBtn {left:230px;cursor:pointer;}
#regform {width:90%;background:transparent;}

/* Bopzee Anim */					
#bopzeeanim {position:absolute;left:17px;top:1100px;z-index:502;width:730px;height:912px;text-align:center;
background:white;overflow:hidden;}
#animationbubbles {position:absolute;left:0px;top:0px;width:100%;height:100%;overflow:hidden;}
#bopzeeanimimg {position:absolute;left:65px;top:400px;width:600px;z-index:500;}
.bopzeeanimcircles {position:absolute;left:0px;top:1100px;opacity:0.35;border-radius:50%;z-index:1;}

/* general animation */
.animate {
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
}

.fasteranimate {
-webkit-transition: top 1.5s;
-moz-transition: top 1.5s;
-ms-transition: top 1.5s;
-o-transition: top 1.5s;
transition: top 1.5s;

-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
		
.fastanimate {
-webkit-transition: top 2.5s;
-moz-transition: top 2.5s;
-ms-transition: top 2.5s;
-o-transition: top 2.5s;
transition: top 2.5s;

-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}

.delayanimate {
-webkit-transition: top 3.0s;
-moz-transition: top 3.0s;
-ms-transition: top 3.0s;
-o-transition: top 3.0s;
transition: top 3.0s;

-webkit-transition-delay: 1.0s;
-moz-transition-delay: 1.0s;
-ms-transition-delay: 1.0s;
-o-transition-delay: 1.0s;
transition-delay: 1.0s;
}		
		
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  	#container {padding-bottom:190px;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	#container {padding-bottom:190px;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	#container {padding-bottom:190px;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}