#reels
{
    font-family: 'Slackey';
}
#slot_viewport
{
    position: relative;
    overflow:hidden;
    width: 320px;
    height: 360px;
    display:block;
    margin:0 auto;
}
#slot_viewport.mobile
{
    position:absolute;
    top:0px;
    left:0px;
}
#slot_viewport.tablet
{
    position:absolute;
    top:0px;
    left:0px;
}
#slot_viewport.desktop
{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}
#slot_container
{
    position:relative;

    width: 320px;
    height: 300px;

}
#slot_container #buttons {
    text-align: center;
    margin-top: 10px;
}


#slot_container #buttons #play
{
    margin: 10px auto;
}

#slot_container #loading
{
    display:block;
    height: 100%;
    width: 100%;
    overflow: hidden;
    text-align: center;
    background:#000;
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding-top: 50px;
    color: white;
}
#loading #progressbar
{
    margin-top: 10px;
    background: black;
    border: 1px solid mediumaquamarine;
    width: 80%;
    height: 15px;
    margin-left: auto;
    margin-right: auto;
}
#loading #progressbar #progress
{
    height: 100%;
    position: relative;
    width: 0%;
    left: 0;
    background: #77e0fb;
}

#slot_container #reels
{
    display:block;
    position:relative;
    height: 220px;
    overflow: hidden;
    text-align: center;
    background:#000;
    border: 10px solid;
    border-color: #3b7739 #529957 #336634 #4b994b;
    border-radius:3px;
    -moz-box-shadow:#fff 0px 1px 0px;
}
#slot_container #reels canvas
{
    width: 87px;
    height: 300px;
    position: relative;
    background: white;
    border: 2px solid gold;
}

#slot_container #overlay
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: 0.3;
    background-image: -moz-linear-gradient(#555,#fff,#fff,#555);
    background-image: -webkit-gradient(linear, 0 25%, 0 100%, from(grey), color-stop(0.5, white), to(grey));
    display: none;
}
#slot_container #overlay #winline
{	
    width: 100%;
    height: 5px;
    background: red;	
    position: relative;
    top: 50%;
}
#reels #results
{
    display: none;
    background: white;
    border: 3px solid gold;
    height: 120px;
    width: 260px;
    left: 20px;
    top: 15px;
    position: absolute;
    font-size: 140%;
    line-height: 110%;
}

#results #score {
    margin: 5px;
}

#results #score img {
    vertical-align: middle;
}
#results #status {

}

#audio_debug {
    top: 60px;
    position: relative;
    text-align: center;
    padding: 10px;
}



.slot-button {
    text-decoration: 		none;
	font: 					24px/1em 'Slackey',sans-serif;
	font-weight: 			bold;
	text-shadow: 			rgba(255,255,255,.5) 0 1px 0;
	-webkit-user-select: 	none;
	-moz-user-select: 		none;
	user-select: 			none;


/* layout */
	padding: 				.5em .6em .4em .6em;
	margin: 				.5em;
	display: 				inline-block;
	position: 				relative;

	-webkit-border-radius: 	8px;
	-moz-border-radius: 	8px;
	border-radius: 	8px;

/* effects */
	border-top: 		1px solid rgba(255,255,255,0.8);
	border-bottom: 		1px solid rgba(0,0,0,0.1);

	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));
	background-image: 	-moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) ));

	-webkit-transition: background .2s ease-in-out;
	-moz-transition: 	background .2s ease-in-out;
	transition: 		background .2s ease-in-out;

/* color */
	color: 				hsl(0, 0%, 40%) !important;
	background-color: 	hsl(0, 0%, 75%);

	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
						hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
						hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
						hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */
						rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}

.slot-button:hover {
	cursor: pointer;
}

.slot-button.green {
	color: 				hsl(88, 70%, 30%) !important;
	background-color: 	hsl(88, 70%, 60%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.slot-button.green:hover { 	background-color: hsl(88, 70%, 75%); }


/* -------------- States -------------- */

.slot-button:hover {
	background-color: 	hsl(0, 0%, 83%);
}



.slot-button:active {
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
	background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));

	-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

	-webkit-transform: 	translateY(.2em);
	-moz-transform: 	translateY(.2em);
	transform: 			translateY(.2em);
}

.slot-button:focus {
	outline: none;

}

.slot-button[disabled], .slot-button[disabled]:hover, .slot-button.disabled, .slot-button.disabled:hover {
	opacity: 			.5;
	cursor: 			default;
	color: 				rgba(0,0,0,0.2) !important;
	text-shadow: 		none !important;
	background-color: 	rgba(0,0,0,0.05);
	background-image: 	none;
	border-top: 		none;

	-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
							rgba(0,0,0,0.3) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
							rgba(0,0,0,0.3) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */
							rgba(0,0,0,0.3) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

	-webkit-transform: 	translateY(5px);
	-moz-transform: 	translateY(5px);
	transform: 			translateY(5px);
}



/* -------------- Materials -------------- */

.slot-button.glossy:after {
	content: 	"";
	position: 	absolute;
    width: 		90%;
    height: 	60%;
    top: 		0;
    left: 		5%;

    -webkit-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
    -moz-border-radius: 	.5em .5em 1em 1em / .5em .5em 2em 2em;
    border-radius: 			.5em .5em 1em 1em / .5em .5em 2em 2em;

    background-image: 		-webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),
    							color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
    background-image: 		-moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );
    background-image: 		gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),	color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );
}
.slot-button.glossy:active:after,
.slot-button.disabled:after,
.slot-button[disabled]:after
 { opacity: .2; }


/* -------------- Shapes -------------- */

/* round */
.round, .round.glossy:after, .round.glass:after {
	border-top: none;
	-webkit-border-radius: 	1em;
	-moz-border-radius: 	1em;
	border-radius: 			1em;
}