* {font-family:'Open Sans',sans-serif; box-sizing:border-box; font-weight:bold; font-size:25px;}
body {background-color:#E9EBEE; margin:0;}
.copy, .footer { font-size:12px; text-align:center;}
.copy a, .footer a {color:#08f; font-size:12px; }

.large {font-size:1.4em;}
h2{font-size:2em; margin:0;}
a {color:#62B01E;}

#gamecanvas{width:100%; height:83%; max-width:720px; /*max-height:918px;*/ position:relative; background:#fff url(../slices/sky.jpg) no-repeat center top; background-size:100% auto; border:3px solid #000; margin:0 auto; overflow:hidden;}

#kozani {z-index:2; position:absolute; bottom:8%; left:0; width:100%; }

#buckets{z-index:10; position:absolute; bottom:0; left:0; width:100%; }
	#buckets>div {display:table; position:absolute; left:0.5%; top:-10px; width:99%;  z-index:15;}
		#buckets>div>div{display:table-cell; width:20%; height:80px;  border:10px solid transparent; border-radius:10px; }
			#buckets>div>div>div{position:relative;}
				#buckets>div>div>div>div{position:absolute; z-index:100; right:-10px; top:-10px; color:#fff; border-radius: 10px; padding:20px; box-shadow:5px 5px 5px #000;}
				#buckets>div>div>div>div.nice {background-color:#62B01E;}
				#buckets>div>div>div>div.bad {background-color:#d00;}
#controls {position:absolute; display:table; z-index:10; width:100%; left:0; top:-130px;}	
	#controls>div { width:33%; display:table-cell;  font-size:2em; font-weight:bold; text-shadow:0 0 1px #fff; }	
		#controls>div span {background-image:url(../slices/game-controls.png); width:66px; height:80px; display:inline-block; margin-right:0px; vertical-align:middle;}
		.nice span { background-position:0 0; }
	.bad {text-align:center;}
		.bad span { background-position:0 -98px ; }
	.timer{ text-align:right;}
		.timer span { background-position: 0 -196px;}
#soundcontrol{ position:absolute; z-index:50; top:49%; bottom:2px; display:inline-block; transform: rotate(-90deg); transform-origin: 0 0;}
	#soundcontrol a {font-size:12px; color:#fff; padding:2px 5px; border-radius:0 0 5px 5px; background-color:#000; text-decoration:none;}
	
	.to-drop {background-color:rgba(255,255,0,0.5);}
	/*.grabbed {border:3px solid #ff0; border-radius:1000px;}*/

#junk {background-image: url(../slices/materials2.png); position:absolute; z-index:20; -webkit-transform: translate(0px, 2000px);  transform: translate(0px, 2000px); top:0; left:0; display:block; }
	.m-aloum{ background-position: 0px 0px; width:152px; height: 92px;}
	.m-coke{background-position: 0px -91px; width:74px; height: 100px;}
	.m-can{background-position: -74px -91px; width:121px; height: 112px;}
	.g-wine{background-position: 0px -306px; width:66px; height: 218px;}
	.g-beer{background-position: -190px -340px; width:56px; height: 195px;}
	.g-glass{background-position: 0px -191px; width:66px; height: 115px;}
	.p-soap{background-position: -66px -340px; width:124px; height: 195px;}
	.p-bag{background-position: -246px -340px; width:159px; height: 210px;}
	.p-water{background-position: -152px 0px; width:153px; height: 80px;}
	.o-bush{background-position: -305px 0px; width:149px; height: 149px;}
	.o-banana{background-position: -405px -341px; width:178px; height: 139px;}
	.o-apple{background-position: -74px -203px; width:101px; height: 137px;}
	.x-bag{background-position: -454px 0px; width:129px; height: 176px;}
	.x-box{background-position: -195px -157px; width:200px; height: 166px;}
	.x-news{background-position: -415px -176px; width:158px; height: 114px;}
	
.unselectable {
  -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dialog { border:3px solid #fff; border-radius:20px;  background-color:rgba(0,0,0,0.9); color:#fff; padding:2%; width:90%; height:90%; top:5%; left:5%; position:absolute; z-index:100; box-shadow:0 0 10px #000; display:none; overflow:auto; -webkit-overflow-scrolling:touch;}
	.dialog ul{ margin:20px auto; display:table;}
	.dialog ul li {list-style-image:url(../slices/li.png); /*min-height:65px; */vertical-align:middle;}
button {background-color:#62B01E; color:#fff; padding:8px 20px; border-radius:20px; border:3px solid #fff; cursor:pointer;}
	.btnlarge { width:60%; display:inline-block; padding:13px }
	.external {background: #62B01E url(../slices/external.png) no-repeat 5px 5px; padding-left:70px}
	.share{background: #62B01E url(../slices/share.png) no-repeat 5px 5px; padding-left:70px}
	.repeat{background: #62B01E url(../slices/repeat.png) no-repeat 5px 5px; padding-left:70px}
	
#startmsg	{ text-align:center; color:#fff; font-size:3em; position:absolute; width:100%; top:30%; left:0; z-index:100; text-shadow:0 0 10px #000; display:none;}
#finalscore {color:#62B01E; font-size: 2em;}

h3{font-size:1.2em; margin:0;}
#information p, #information li, #information a {font-size:16px; font-weight:bold;}
#information ul {margin-left:5%;}
#information ul li {list-style-image:url(../slices/li_small.png);}


@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@media only screen and (max-width: 640px) {
	#junk {background-size:292px auto;}
	.m-aloum{background-position:0px 0px; width:76px; height:46px;}
	.m-coke{background-position:0px -46px; width:37px; height:50px;}
	.m-can{background-position:-37px -46px; width:60px; height:56px;}
	.g-wine{background-position:0px -153px; width:33px; height:109px;}
	.g-beer{background-position:-95px -170px; width:28px; height:97px;}
	.g-glass{background-position:0px -96px; width:33px; height:57px;}
	.p-soap{background-position:-33px -170px; width:62px; height:97px;}
	.p-bag{background-position:-123px -170px; width:79px; height:105px;}
	.p-water{background-position:-76px 0px; width:76px; height:40px;}
	.o-bush{background-position:-153px 0px; width:74px; height:74px;}
	.o-banana{background-position:-203px -171px; width:89px; height:69px;}
	.o-apple{background-position:-37px -102px; width:50px; height:68px;}
	.x-bag{background-position:-227px 0px; width:64px; height:88px;}
	.x-box{background-position:-98px -79px; width:100px; height:83px;}
	.x-news{background-position:-208px -88px; width:79px; height:57px;}
}

@media only screen and (max-width: 640px) , screen and (max-height: 770px){
  * {font-size:22px;}
	.btnlarge {width:80%}
	.dialog ul li {list-style-image:url(../slices/li_small.png);}
		
}

@media only screen and (max-width: 390px) {
	* {font-size:18px;}
	h2{font-size:1.4em;}
	#controls>div span {background-image:url(../slices/game-controls.png); width:33px; height:42px; background-size:100% auto;}
		.bad span { background-position:0 -49px ; }
		.timer span { background-position: 0 -98px;}
}