<commit_before>/**
 * receipt.less
 * https://github.com/bcylin/receipt-number-checker
 *
 * Created by Ben (c) 2012
 * Released under GNU General Public License v2
 * http://www.gnu.org/licenses/gpl-2.0.html
 */

/* Body */

@body-margin: 35px;
@background-image: url('../img/noise-237.png');

body {
	font-family: Helvetica, sans-serif;
	background-color: rgb(245,245,245);
	background-image: @background-image;
	background-attachment: fixed;
	overflow-y: scroll;
}

.windows {
	font-family: Arial, "微軟正黑體", Tahoma, Verdana, sans-serif !important;
}

.windows input {
	font-family: Arial, sans-serif;
}

.desktop {
	width: 850px;
	margin: @body-margin auto;
}

/* Hide mobile screen on desktop */
.desktop {
	.error-msg,
	.error-background,
	.mobile-screen {
		display: none !important;
	}
}

/* Hide desktop components on mobile devices */
.mobile {
	.error-msg,
	.error-background,
	.operation,
	.record,
	.modal,
	.float {
		display: none !important;
	}
}

/* Hide all components on non-compatible screen */
.non-compatible {
	.mobile-screen,
	.operation,
	.record,
	.modal,
	.float {
		display: none !important;
	}
}

.non-compatible {
	width: width;
	height: auto;
	min-width: 0;
	min-height: none;
	margin: 0;
}

@mobile-msg-width: 90%;
@mobile-msg-height: 30%;

.non-compatible .error-msg {
	.box;
	position: fixed;
	z-index: 101;
	top: 40%;
	left: 50%;
	width: @mobile-msg-width;
	height: @mobile-msg-height;
	margin-left: -@mobile-msg-width / 2;
	margin-top: -@mobile-msg-height / 2;
	padding: 2em 0;
	background: transparent;
	text-align: center;
	font-size: 1.1em;
	color: white;
}

.non-compatible .error-background {
	background: rgb(45,45,45);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

// ----------------
/* Mobile Screen */
// ---------------

body.mobile {
	min-height: 480px;
}

.mobile-screen {
	width: width;
	// max-width: 480px;
	margin: 0 auto;
	.box;
}

.mobile-screen {	// Nested rules

@UIFontSize: 16px;

.UIButton {
	color: rgb(81,102,145);
	background-color: rgb(247,247,247);
	border: 1px solid rgb(161,167,173);
	border-radius: 10px;
	font-size: @UIFontSize;
	font-weight: bold;
	height: 44px;
}

.UIGroupedTable {
	background-color: rgb(247,247,247);
	border: 1px solid rgb(161,167,173);
	border-radius: 10px;
	font-size: @UIFontSize;
	font-weight: bold;
	padding: 0;
	margin: 15px auto;
	width: 90%;
}

.UITableViewCellTextLabel {
	display: inline-block;
	text-align: right;
	font-size: 14px;
	color: rgb(81,102,145);
	width: 35%;
	margin: 4px 5% 0 0;
	.box;
}

.UITableViewCell {
	margin: 15px auto;
	font-size: 16px;
	height: 44px;
	padding: 14px 0;
	text-align: center;
	color: rgb(143,143,143);
	background: transparent;
	.box;
}

.UITableViewCell:not(:last-of-type) {
	border-bottom: 1px solid rgb(202,202,202);
}

.UIGroupedTableHeader {
	font-weight: bold;
	color: rgb(76,86,108);
	display: block;
	width: 85%;
	margin: 15px auto 10px auto;
}

.UIGroupedTableFooter {
	font-size: 14px;
	color: rgb(76,86,108);
	display: block;
	width: 85%;
	margin: 0px auto;
	text-align: center;
}

// title

#mobile-title {
	.box;
	display: block;
	width: 100%;
	height: 48px;
	line-height:48px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: white;
	text-shadow: -1px -1px 1px rgba(0,0,0,.5);
	background: rgb(126, 148, 176);
	background: -webkit-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: -moz-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: -o-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: -ms-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	border-bottom: 1px solid rgb(101,121,148);
	-webkit-box-shadow: 0px 1px 1px rgb(45,48,51);
	box-shadow: 0px 1px 1px rgb(45,48,51);
}

#mobile-title.match-all {
	// background: -webkit-gradient(linear, left top, left bottom,
	// 							from(rgb(255,215,0)),
	// 							color-stop(0.5, rgb(244,164,96)),
	// 							color-stop(0.5, rgb(255,165,0)),
	// 							to(rgb(255,140,0)));
	background: -webkit-linear-gradient(top, Gold, SandyBrown);
	background: -moz-linear-gradient(top, Gold, SandyBrown);
	background: -o-linear-gradient(top, Gold, SandyBrown);
	background: -ms-linear-gradient(top, Gold, SandyBrown);
	background: linear-gradient(top, Gold, SandyBrown);
	border-bottom: 1px solid Goldenrod;
	box-shadow: 0px 1px 1px rgba(45,48,51,.5);
}

#mobile-title.match-three {
	// background: -webkit-gradient(linear, left top, left bottom,
	// 							from(rgb(98,141,95)),
	// 							color-stop(0.5, rgb(50,121,44)),
	// 							color-stop(0.5, rgb(22,100,15)),
	// 							to(rgb(25,116,17)));
	background: -webkit-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: -moz-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: -o-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: -ms-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	border-bottom: 1px solid rgb(98,141,95);
	box-shadow: 0px 1px 1px rgba(45,48,51,.5);
}

#mobile-title > .winning-msg {
	opacity: 0;
	display: inline-block;
	-webkit-transform: scale(6);
	-moz-transform: scale(6);
	-o-transform: scale(6);
	-ms-transform: scale(6);
	transform: scale(6);
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	-ms-transform-origin: top center;
	transform-origin: top center;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-o-transition-property: -o-transform, opacity;
	-ms-transition-property: -ms-transform, opacity;
	transition-property: transform, opacity;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

#mobile-title > .winning-msg.steady {
	-webkit-transform: scale(1);
	opacity: 1;
}

// inputView

.input {
	.UIGroupedTable;
	height: 44px;
	background: rgb(230,230,230);
}

.input label {
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	width: 30%;
	height: 44px;
	line-height: 44px;
	text-align: right;
	color: rgb(20,20,20);
	margin-right: 5%;
	.box;
}

#mobile-input {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;	// Fix placeholder vertical alignment on iOS
	text-align: left;
	letter-spacing: 2px;
	float: right;
	height: 100%;
	width: 63%;
	padding: 0 15px;
	margin: 0;
	border: 0;
	border-left: 1px solid rgb(207,207,207);
	border-radius: 0;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 10px;
	background-color: white;
	-webkit-appearance: none;	// To set box-shadow on iOS
	box-shadow: inset rgba(0,0,0,.5) 1px 1px 2px;
	.box;
}

#mobile-input:focus {
	outline: none;
}

// resultView

.number-display {
	text-align: center;
	display: block;
	width: 85%;
	height: 20px;
	margin: 15px auto;
	.box;
}

.instruction {
	font-size: 14px;
	line-height: 22px;
	color: rgb(76,86,108);
}

.number {
	font-size: 22px;
	line-height: 22px;
	letter-spacing: 2px;
}

.description {
	display: block;
	width: 90%;
	height: 0;
	margin: 10px auto;
	text-align: center;
	color: rgb(77,87,107);
	-webkit-transition: height 0.1s linear;
	-moz-transition: height 0.1s linear;
	-o-transition: height 0.1s linear;
	-ms-transition: height 0.1s linear;
	transition: height 0.1s linear;
}

.description.active {
	height: 30px;
}

.matched {
	.first-five {
		color: black;
	}
	.last-three {
		color: rgb(220,20,60);
	}
}

// switchView

#switch {
	text-align: center;
}

#switch > label {
	position: relative;
	width: 42%;
	display: inline-block;
	margin: 0 3%;
	.UIButton;
	.box;
}

#switch .selected {
	background: -webkit-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: -moz-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: -o-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: -ms-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

@span-width: 40px;

#switch span {
	position: absolute;
	top: 50%;
	left: 50%;
	height: @UIFontSize;
	width: @span-width;
	margin-top: -@UIFontSize / 2 + 1px;
	margin-left: -@span-width / 2;
}

// prizeView

#prize {
	.UIGroupedTable;
	margin-bottom: 25px;
}

#prize section {
	padding: 10px 0;
}

#prize section:not(:last-of-type) {
	border-bottom: 1px solid rgb(202,202,202);
}

#prize .name {
	.UITableViewCellTextLabel;
}

#prize ul {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 0;
}

#prize .numbers span {
	border: 0;
	font-family: 'Lucida Grande';
	vertical-align: middle;
	letter-spacing: 2px;
	height: @UIFontSize;
	line-height: @UIFontSize + 6px;
	padding: 1px;
	margin: 0;
	.box;
}

}	// End of nested rules


// ---------------------
/* Desktop Containers */
// --------------------

// LESS Variables
@left-width: 50%;
@page-height: 550px;
@record-margin-top: 30px;
@record-width: 350px;

.paper-shadow {
	box-shadow: 1px 3px 10px rgba(0,0,0,.5);
}

.container {
	border: 1px solid #DDD;
	height: @page-height;
	display: block;
	padding: 1em;
	box-sizing: border-box;
	background-color: white;
	.paper-shadow;
}

.operation {
	.container;
	.box;
	// width: @left-width;
	width: 450px;
}

.record {
	.box;
	float: right;
	position: relative;
	margin-top: @record-margin-top;
	// width: 90% - @left-width;
	width: @record-width;
}

/* Fix operation panel in a taller window */
@media screen and (min-height: 601px) {
	.operation {
		position: fixed;
	}
}

/* Layout for a shorter window */
@media screen and (max-height: 600px) {
	.operation {
		float: left;
		margin-bottom: 50px;
	}
}


// Parametric Mixins
.box-margin {
	margin: 1em;
}
.border {
	border: 1px solid black;
}
.box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


// -------------
/* Mark icons */
// ------------

@mark-radius: 15px;

.mark-common {
	display:inline-block;
	width: @mark-radius * 2;
	height: @mark-radius * 2;
	font-family: sans-serif;
	font-size: @mark-radius;
	font-weight: bold;
	text-align: center;
	padding-top: @mark-radius / 3;
	// line-height: @mark-radius * 2 * 4 / 5;
	border: 3px solid white;
	border-radius: @mark-radius;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
	box-shadow: 1px 1px 4px rgba(0,0,0,.5);
	.box;
}

.check-mark {
	.mark-common;
	background: #3C0;
}
.check-mark:after {
	content: '\2713';	// &#x2713;
}

.cross-mark {
	.mark-common;
	background: #F08080;	// used to be #C00;
}
.cross-mark:after {
	content: '\2716';	// &#x2718;
}

.question-mark {
	.mark-common;
	background: #FC3;
}
.question-mark:after {
	content: '?';
}

.template {
	display: none;
}
.hidden {
	display: none;
}


// ---------
/* Ribbon */
// --------

@ribbon-height: 40px;
@ribbon-padding: 2px;
@ribbon-width: 350px;
@ribbon-offset: 50px;

.ribbon {
	.box;
	position: fixed;
	z-index: 10;
	top: -@ribbon-height / 2 + @ribbon-offset;
	right: -@ribbon-width / 2 + @ribbon-offset;
	height: @ribbon-height;
	width: @ribbon-width;
	padding: @ribbon-padding;
	background: rgb(225,118,0);
	box-shadow: 0px 2px 15px rgba(0,0,0,.5);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ribbon .stitches {
	.box;
	display: inline-block;
	border-top: 2px dotted rgb(255,228,181);
	border-bottom: 2px dotted rgb(255,228,181);
	padding: 10px;
	width: 100%;
	height: @ribbon-height - @ribbon-padding * 2;
	line-height: 12px;
	font-size: 12px;
	letter-spacing: 1px;
	text-align: center;
	text-shadow: -1px -1px 1px rgba(0,0,0,.8);
	color: white;
}


// --------
/* Share */
// -------

#share {
	.box;
	position: fixed;
	top: 50%;
	right: 0;
	width: 60px;
	padding: 5px 0;
	text-align: center;
	background: transparent;
	box-shadow: 0 0 15px rgba(0,0,0,.5);
}

#share .text {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	color: DarkSlateGray;
	text-shadow: -1px -1px 1px rgba(0,0,0,.2);
}

#share .icon {
	border-radius: 4px;
	display: block;
	width: 48px;
	height: 48px;
	margin: 2px auto;
	opacity: .6;
	background: gray;
}

#share .icon:hover {
	-webkit-box-shadow: 0 0 15px RoyalBlue;
	box-shadow: 0 0 15px RoyalBlue;
	opacity: 1;
	-webkit-transition: box-shadow 0.3s;
	-moz-transition: box-shadow 0.3s;
	-o-transition: box-shadow 0.3s;
	-ms-transition: box-shadow 0.3s;
	transition: box-shadow 0.3s;
}

#share .twitter {
	background-image: url('../img/icon-twitter-48x48.png');
}

#share .facebook {
	background-image: url('../img/icon-f-logo-48x48.png');
}

#share .google {
	background-image: url('../img/icon-g-plus-48x48.png');
}

#share .bug {
	.box;
	color: white;
	font-size: 14px;
	line-height: 14px;
	text-decoration: none;
	padding-top: 10px;
	background: Teal;
	background: -webkit-linear-gradient(top, LightSeaGreen, Teal);
	background: -moz-linear-gradient(top, LightSeaGreen, Teal);
	background: -o-linear-gradient(top, LightSeaGreen, Teal);
	background: -ms-linear-gradient(top, LightSeaGreen, Teal);
	background: linear-gradient(top, LightSeaGreen, Teal);
}

#share .bug:before {
	content: "BUG report";
}


// ----------
/* Welcome */
// ---------

#welcome .modal-header {
	height: 30px;
}

#welcome .title {
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	margin: 10px 35px;
}

#welcome .modal-body {
	padding: 10px 40px;
}

#welcome .modal-body ul {
	padding-left: 30px;
}

#welcome .modal-body li {
	list-style: disc;
	line-height: 1.5em;
}

#welcome hr {
	margin: 0 30px;
}

#welcome img {
	vertical-align: middle;
	margin-right: 5px;
}

#welcome .icons {
	margin: 10px 30px;
}


// --------
/* Input */
// -------

#input {
	position: relative;
	.box;
	margin: 1em;
	padding: 1em;
	background-color: rgb(220,220,220);
	border-radius: 5px;
}

@arrow-color: #333333;

#input .arrow {
	position: absolute;
	top: 1.5em;
	left: 3em;
	height: 60px;
	width: 110px;
	padding: 1em;
	color: white;
	text-align: right;
	background-color: @arrow-color;
	border-radius: 5px 3px 3px 5px;
	.box;
}

#input .arrow:after {
	content: "";
	position: absolute;
	top: 0;
	left: 108px;
	margin: 0;
	width: 35px;
	border-top: 30px solid transparent;
	border-right: 0;
	border-bottom: 30px solid transparent;
	border-left: 35px solid @arrow-color;
	height: 60px;
	.box;
}

#input input {
	width: 2em;
	margin-left: 5.5em;
	padding: .5em 1em;
	font-size: 2em;
	border-radius: 5px;
	background: rgb(245,245,245);
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-o-transition: background 0.4s;
	-ms-transition: background 0.4s;
	transition: background 0.4s;
}

#input input:focus {
	outline: none;
	background: white;
}


// ---------
/* Switch */
// --------

.desktop {	// Nested rules
#switch {
	.box-margin;
	.box;
	font-size: 1.1em;
	margin: 1.5em 2em 1em 2em;
	text-align: center;
}

#switch label {
	display: inline-block;
	width: 5em;
	height: 2em;
	line-height: 2em;
	margin: 0 .5em;
	border: 1px solid transparent;
	border-radius: 5px;
	color: gray;
	cursor: pointer;
}

#switch label {
	border: 1px solid #CCC;
	background: -webkit-linear-gradient(top, white, rgb(230,230,230));
	background: -moz-linear-gradient(top, white, rgb(230,230,230));
	background: -o-linear-gradient(top, white, rgb(230,230,230));
	background: -ms-linear-gradient(top, white, rgb(230,230,230));
	background: linear-gradient(top, white, rgb(230,230,230));
}

#switch label:hover {
	color: rgb(40,40,40);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
	background: -webkit-linear-gradient(top, white, rgb(210,210,210));
	background: -moz-linear-gradient(top, white, rgb(230,230,230));
	background: -o-linear-gradient(top, white, rgb(230,230,230));
	background: -ms-linear-gradient(top, white, rgb(230,230,230));
	background: linear-gradient(top, white, rgb(230,230,230));
}

#switch .selected {
	color: rgb(245,245,245);
	text-shadow: 0px -1px 1px rgba(0,0,0,.5);
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.5);
	background: -webkit-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: -moz-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: -o-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: -ms-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
}

#switch .selected:hover {
	color: white;
	background: -webkit-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: -moz-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: -o-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: -ms-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
}
}	// End of nested rules


// --------
/* Prize */
// -------

.desktop {	// Nested rules
#prize {
	.box-margin;
	.box;
}

@section-vertical-padding: .5em;

#prize section {
	padding: @section-vertical-padding 1em;
}

#prize section:not(:last-of-type):after {
	position: relative;
	display: block;
	content: "";
	height: 0;
	top: @section-vertical-padding;
	border-bottom: 2px solid #DDD;
	-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	-moz-mask-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	-o-mask-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	-ms-mask-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
}

@number-height: 33px;

#prize .name {
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	line-height: @number-height;
	width: 7.5em;
	height: @number-height;
	padding: 1px;
	margin-right: 1em;
	.box;
}

#prize ul {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 0;
}

#prize .numbers span {
	border: 0;
	font-size: 16px;
	font-family: 'Lucida Grande';
	vertical-align: middle;
	letter-spacing: 2px;
	width: 100px;
	height: @number-height;
	line-height: @number-height;
	padding: 1px;
	margin: 0;
	.box;
}

#prize .numbers input:focus {
	outline: none;
}
}	// End of nested rules


// ----------
/* Counter */
// ---------

// Parametric Mixins
.metal-gradient {
	background-image: -o-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: -moz-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: -webkit-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: -ms-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.3, rgb(50,50,50)),
		color-stop(0.6, rgb(100,100,100))
	);
}

@counter-height: 60px;

#counter {
	.box;
	.metal-gradient;
	position: relative;
	color: white;
	height: @counter-height;
	width: @record-width;
	padding-top: 15px;
	line-height: 2em;
	text-align: center;
	border-radius: 5px;
	box-shadow: 0px 30px 20px -20px rgba(0,0,0,.5);
}

/* Fix counter in a taller window */
@media screen and (min-height: 601px) {

	#counter {
		position: fixed;
		top: @body-margin + @record-margin-top;
	}

	#counter:before {
		content: "";
		position: absolute;
		top: -(@body-margin + @record-margin-top);
		left: 0;
		background-color: rgb(245,245,245);
		background-image: @background-image;
		height: @body-margin + @record-margin-top;
		width: @record-width;
	}
}

// surface underneath the panel
#counter:after {
	content: "";
	position: absolute;
	z-index: -2;
	top: 0;
	left: 1%;
	width: 99%;
	height: @counter-height + 3px;
	border-radius: 5px;
	background-color: gray;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,.3);
}

#counter.chrome:after {
	content: none !important;	// bug of different layers in Google Chrome 22
}

#counter .separator {
	background: gray;
	border-left: 1px solid rgb(60,60,60);
	border-right: 1px solid rgb(60,60,60);
	margin: 0 1em;
}

#counter .count {
	display: inline-block;
	width: 3em;
}
#counter .count:before { content: " "; }
#counter .count:after { content: " "; }

#counter .frame {
	cursor: pointer;
	text-shadow: black 0px -1px 1px;
}

#counter .frame:hover {
	color: LemonChiffon;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}


// -------
/* List */
// ------

#list {
	.box;
	position: absolute;
	z-index: -1;
	top: @counter-height;
	left: 10%;
	width: 80%;
	border: 1px solid #DDD;
	background-color: white;
	// max-height: @page-height - @record-margin-top - @counter-height;
	margin-bottom: 50px;
	box-shadow: 5px 5px 15px rgba(0,0,0,.5);
	.paper-shadow;
}

#list:after {
	content: "";
	position: absolute;
	background: transparent;
	bottom: -50px;
	height: 50px;
	width: 100%;
}

#list li {
	margin: 0 10px;
	font-size: 18px;
	padding: 16px;
	height: 50px;
	border-top: 1px solid rgb(225,225,225);
	.box;
}

#list .missed {
	color: gray;
}

#list .missed .num {
	text-decoration: line-through;
}

#list .winning {
	cursor: pointer;
	background: -webkit-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: -moz-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: -o-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: -ms-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: linear-gradient(left, white, snow 20%, snow 85%, white);
}

#list .months {
	font-size: 12px;
	line-height: 18px;
	color: gray;
}

#list .num {
	font-size: 20px;
	letter-spacing: 2px;
	width: 3em;
	padding: 0 1em;
	font-weight: bold;
}

#list .mark {
	float: right;
	vertical-align: middle;
	margin-top: -@mark-radius / 2;
}

#list .result {
	font-size: 14px;
	line-height: 18px;
	color: gray;
	float: right;
	padding-right: .5em;
	text-align: right;
}


// ---------------
/* Motify Modal */
// --------------

#notify {
	border-radius: 10px;
	border: 3px solid #DDD;
	.box;
}

@win-mark-radius: 40px;

#notify .mark {
	display: block;
	margin: 15px auto;
	width: @win-mark-radius * 2;
	height: @win-mark-radius * 2;
	font-size: @win-mark-radius;
	font-weight: bold;
	text-align: center;
	padding-top: @win-mark-radius / 3 + 2px;
	// line-height: @win-mark-radius * 2 * 4 / 5;
	border: @win-mark-radius / 8 solid white;
	border-radius: @win-mark-radius;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
	box-shadow: 1px 1px 6px rgba(0,0,0,.5);
}

#notify .numbers {
	position: relative;
	text-align: center;
	background: rgb(245,245,245);
	padding: 10px 0;
}

#notify .number {
	display: inline-block;
	font-size: 45px;
	font-weight: bold;
	letter-spacing: 5px;
	text-shadow: 0px -1px 1px rgba(0,0,0,.8);
}

@notify-months-size: 14px;

#notify .months {
	position: absolute;
	height: @notify-months-size;
	top: 50%;
	left: 25px;
	margin-top: -@notify-months-size / 2;
}

#notify .first-five {
	color: rgb(50,50,50);
}

#notify .last-three {
	color: #C00;
}

#notify .result {
	display: block;
	font-size: 30px;
	text-align: center;
	margin: 15px auto;
}

#notify .description {
	display: block;
	text-align: center;
}

.modal .close {
	float: left;
}

#notify .btn {
	float: right;
	clear: both;
	margin-top: 20px;
}


// ---------
/* Footer */
// --------

footer {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	min-width: 1200px;
	min-height: 28px;
	color: rgb(60,60,60);
	background: rgba(200,200,200,.3);
	-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	mask: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	-o-mask-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	-ms-mask-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	mask-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
}

@author-color: rgb(17,33,201);

footer .author {
	color: @author-color;
	cursor: pointer;
	text-decoration: underline;
}

footer .license {
	float: right;
	display: inline-block;
	margin: 12px 20px 10px;
	font-size: 12px;
}

footer .license a:visited {
	color: @author-color;
}

.tooltip-inner {
	padding: 5px 8px;
}


// ----------------------------
/* IE non-compatible message */
// ---------------------------

// IE 8 doesn't support rgba

#ie {
	background: rgb(45,45,45);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#ie .msg {
	display: block;
	margin: 50px auto;
	color: white;
	font-size: 26px;
	text-align: center;
}

#ie .choice {
	.box;
	display: block;
	width: 520px;
	margin: 0 auto;
	padding: 5px;
	color: rgb(220,220,220);
	text-align: left;
}

#ie .browsers {
	padding: 15px 0 10px;
	text-align: center;
}

#ie .icon {
	.border;
	display: inline-block;
	height: 96px;
	width: 96px;
	margin: 0 10px;
	padding: 15px 30px;
	background: rgb(90,90,90);
	border: 1px solid gray;
}

#ie .icon:hover {
	background: rgb(120,120,120);
}<commit_msg>Adjust font size<commit_after>/**
 * receipt.less
 * https://github.com/bcylin/receipt-number-checker
 *
 * Created by Ben (c) 2012
 * Released under GNU General Public License v2
 * http://www.gnu.org/licenses/gpl-2.0.html
 */

/* Body */

@body-margin: 35px;
@background-image: url('../img/noise-237.png');

body {
	font-family: Helvetica, sans-serif;
	background-color: rgb(245,245,245);
	background-image: @background-image;
	background-attachment: fixed;
	overflow-y: scroll;
}

.windows {
	font-family: Arial, "微軟正黑體", Tahoma, Verdana, sans-serif !important;
}

.windows input {
	font-family: Arial, sans-serif;
}

.desktop {
	width: 850px;
	margin: @body-margin auto;
}

/* Hide mobile screen on desktop */
.desktop {
	.error-msg,
	.error-background,
	.mobile-screen {
		display: none !important;
	}
}

/* Hide desktop components on mobile devices */
.mobile {
	.error-msg,
	.error-background,
	.operation,
	.record,
	.modal,
	.float {
		display: none !important;
	}
}

/* Hide all components on non-compatible screen */
.non-compatible {
	.mobile-screen,
	.operation,
	.record,
	.modal,
	.float {
		display: none !important;
	}
}

.non-compatible {
	width: width;
	height: auto;
	min-width: 0;
	min-height: none;
	margin: 0;
}

@mobile-msg-width: 90%;
@mobile-msg-height: 30%;

.non-compatible .error-msg {
	.box;
	position: fixed;
	z-index: 101;
	top: 40%;
	left: 50%;
	width: @mobile-msg-width;
	height: @mobile-msg-height;
	margin-left: -@mobile-msg-width / 2;
	margin-top: -@mobile-msg-height / 2;
	padding: 2em 0;
	background: transparent;
	text-align: center;
	font-size: 1.1em;
	color: white;
}

.non-compatible .error-background {
	background: rgb(45,45,45);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

// ----------------
/* Mobile Screen */
// ---------------

body.mobile {
	min-height: 480px;
}

.mobile-screen {
	width: width;
	// max-width: 480px;
	margin: 0 auto;
	.box;
}

.mobile-screen {	// Nested rules

@UIFontSize: 16px;

.UIButton {
	color: rgb(81,102,145);
	background-color: rgb(247,247,247);
	border: 1px solid rgb(161,167,173);
	border-radius: 10px;
	font-size: @UIFontSize;
	font-weight: bold;
	height: 44px;
}

.UIGroupedTable {
	background-color: rgb(247,247,247);
	border: 1px solid rgb(161,167,173);
	border-radius: 10px;
	font-size: @UIFontSize;
	font-weight: bold;
	padding: 0;
	margin: 15px auto;
	width: 90%;
}

.UITableViewCellTextLabel {
	display: inline-block;
	text-align: right;
	font-size: 14px;
	color: rgb(81,102,145);
	width: 35%;
	margin: 4px 5% 0 0;
	.box;
}

.UITableViewCell {
	margin: 15px auto;
	font-size: 16px;
	height: 44px;
	padding: 14px 0;
	text-align: center;
	color: rgb(143,143,143);
	background: transparent;
	.box;
}

.UITableViewCell:not(:last-of-type) {
	border-bottom: 1px solid rgb(202,202,202);
}

.UIGroupedTableHeader {
	font-weight: bold;
	color: rgb(76,86,108);
	display: block;
	width: 85%;
	margin: 15px auto 10px auto;
}

.UIGroupedTableFooter {
	font-size: 14px;
	color: rgb(76,86,108);
	display: block;
	width: 85%;
	margin: 0px auto;
	text-align: center;
}

// title

#mobile-title {
	.box;
	display: block;
	width: 100%;
	height: 48px;
	line-height:48px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: white;
	text-shadow: -1px -1px 1px rgba(0,0,0,.5);
	background: rgb(126, 148, 176);
	background: -webkit-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: -moz-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: -o-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: -ms-linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	background: linear-gradient(top, rgb(180,191,206) 0%, rgb(134,154,178) 50%, rgb(126,148,176) 50%, rgb(109,131,161) 100%);
	border-bottom: 1px solid rgb(101,121,148);
	-webkit-box-shadow: 0px 1px 1px rgb(45,48,51);
	box-shadow: 0px 1px 1px rgba(45,48,51,.8);
}

#mobile-title.match-all {
	// background: -webkit-gradient(linear, left top, left bottom,
	// 							from(rgb(255,215,0)),
	// 							color-stop(0.5, rgb(244,164,96)),
	// 							color-stop(0.5, rgb(255,165,0)),
	// 							to(rgb(255,140,0)));
	background: -webkit-linear-gradient(top, Gold, SandyBrown);
	background: -moz-linear-gradient(top, Gold, SandyBrown);
	background: -o-linear-gradient(top, Gold, SandyBrown);
	background: -ms-linear-gradient(top, Gold, SandyBrown);
	background: linear-gradient(top, Gold, SandyBrown);
	border-bottom: 1px solid Goldenrod;
	box-shadow: 0px 1px 1px rgba(45,48,51,.5);
}

#mobile-title.match-three {
	// background: -webkit-gradient(linear, left top, left bottom,
	// 							from(rgb(98,141,95)),
	// 							color-stop(0.5, rgb(50,121,44)),
	// 							color-stop(0.5, rgb(22,100,15)),
	// 							to(rgb(25,116,17)));
	background: -webkit-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: -moz-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: -o-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: -ms-linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	background: linear-gradient(top, rgb(134,196,145), rgb(0,166,42));
	border-bottom: 1px solid rgb(98,141,95);
	box-shadow: 0px 1px 1px rgba(45,48,51,.5);
}

#mobile-title > .winning-msg {
	opacity: 0;
	display: inline-block;
	-webkit-transform: scale(6);
	-moz-transform: scale(6);
	-o-transform: scale(6);
	-ms-transform: scale(6);
	transform: scale(6);
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	-ms-transform-origin: top center;
	transform-origin: top center;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-o-transition-property: -o-transform, opacity;
	-ms-transition-property: -ms-transform, opacity;
	transition-property: transform, opacity;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

#mobile-title > .winning-msg.steady {
	-webkit-transform: scale(1);
	opacity: 1;
}

// inputView

.input {
	.UIGroupedTable;
	height: 44px;
	background: rgb(230,230,230);
}

.input label {
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	width: 30%;
	height: 44px;
	line-height: 44px;
	text-align: right;
	color: rgb(20,20,20);
	margin-right: 5%;
	.box;
}

#mobile-input {
	font-size: 16px;
	font-weight: bold;
	line-height: 1;	// Fix placeholder vertical alignment on iOS
	text-align: left;
	letter-spacing: 2px;
	float: right;
	height: 100%;
	width: 63%;
	padding: 0 15px;
	margin: 0;
	border: 0;
	border-left: 1px solid rgb(207,207,207);
	border-radius: 0;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 10px;
	background-color: white;
	-webkit-appearance: none;	// To set box-shadow on iOS
	box-shadow: inset rgba(0,0,0,.5) 1px 1px 2px;
	.box;
}

#mobile-input:focus {
	outline: none;
}

// resultView

.number-display {
	text-align: center;
	display: block;
	width: 85%;
	height: 20px;
	margin: 10px auto 12px auto;
	.box;
}

.instruction {
	font-size: 14px;
	line-height: 14px;
	vertical-align: text-top;
	color: rgb(76,86,108);
}

.number {
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 2px;
}

.description {
	display: block;
	width: 90%;
	height: 0;
	margin: 10px auto;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
	color: rgb(77,87,107);
	-webkit-transition: height 0.1s linear;
	-moz-transition: height 0.1s linear;
	-o-transition: height 0.1s linear;
	-ms-transition: height 0.1s linear;
	transition: height 0.1s linear;
}

.description.active {
	height: 34px;
}

.matched {
	.first-five {
		color: black;
	}
	.last-three {
		color: rgb(220,20,60);
	}
}

// switchView

#switch {
	text-align: center;
}

#switch > label {
	position: relative;
	width: 42%;
	display: inline-block;
	margin: 0 3%;
	.UIButton;
	.box;
}

#switch .selected {
	background: -webkit-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: -moz-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: -o-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: -ms-linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	background: linear-gradient(top, rgb(96,127,236), rgb(43,81,233));
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

@span-width: 40px;

#switch span {
	position: absolute;
	top: 50%;
	left: 50%;
	height: @UIFontSize;
	width: @span-width;
	margin-top: -@UIFontSize / 2 + 1px;
	margin-left: -@span-width / 2;
}

// prizeView

#prize {
	.UIGroupedTable;
	margin-bottom: 25px;
}

#prize section {
	padding: 10px 0;
}

#prize section:not(:last-of-type) {
	border-bottom: 1px solid rgb(202,202,202);
}

#prize .name {
	.UITableViewCellTextLabel;
}

#prize ul {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 0;
}

#prize .numbers span {
	border: 0;
	font-family: 'Lucida Grande';
	vertical-align: middle;
	letter-spacing: 2px;
	height: @UIFontSize;
	line-height: @UIFontSize + 6px;
	padding: 1px;
	margin: 0;
	.box;
}

}	// End of nested rules


// ---------------------
/* Desktop Containers */
// --------------------

// LESS Variables
@left-width: 50%;
@page-height: 550px;
@record-margin-top: 30px;
@record-width: 350px;

.paper-shadow {
	box-shadow: 1px 3px 10px rgba(0,0,0,.5);
}

.container {
	border: 1px solid #DDD;
	height: @page-height;
	display: block;
	padding: 1em;
	box-sizing: border-box;
	background-color: white;
	.paper-shadow;
}

.operation {
	.container;
	.box;
	// width: @left-width;
	width: 450px;
}

.record {
	.box;
	float: right;
	position: relative;
	margin-top: @record-margin-top;
	// width: 90% - @left-width;
	width: @record-width;
}

/* Fix operation panel in a taller window */
@media screen and (min-height: 601px) {
	.operation {
		position: fixed;
	}
}

/* Layout for a shorter window */
@media screen and (max-height: 600px) {
	.operation {
		float: left;
		margin-bottom: 50px;
	}
}


// Parametric Mixins
.box-margin {
	margin: 1em;
}
.border {
	border: 1px solid black;
}
.box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


// -------------
/* Mark icons */
// ------------

@mark-radius: 15px;

.mark-common {
	display:inline-block;
	width: @mark-radius * 2;
	height: @mark-radius * 2;
	font-family: sans-serif;
	font-size: @mark-radius;
	font-weight: bold;
	text-align: center;
	padding-top: @mark-radius / 3;
	// line-height: @mark-radius * 2 * 4 / 5;
	border: 3px solid white;
	border-radius: @mark-radius;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
	box-shadow: 1px 1px 4px rgba(0,0,0,.5);
	.box;
}

.check-mark {
	.mark-common;
	background: #3C0;
}
.check-mark:after {
	content: '\2713';	// &#x2713;
}

.cross-mark {
	.mark-common;
	background: #F08080;	// used to be #C00;
}
.cross-mark:after {
	content: '\2716';	// &#x2718;
}

.question-mark {
	.mark-common;
	background: #FC3;
}
.question-mark:after {
	content: '?';
}

.template {
	display: none;
}
.hidden {
	display: none;
}


// ---------
/* Ribbon */
// --------

@ribbon-height: 40px;
@ribbon-padding: 2px;
@ribbon-width: 350px;
@ribbon-offset: 50px;

.ribbon {
	.box;
	position: fixed;
	z-index: 10;
	top: -@ribbon-height / 2 + @ribbon-offset;
	right: -@ribbon-width / 2 + @ribbon-offset;
	height: @ribbon-height;
	width: @ribbon-width;
	padding: @ribbon-padding;
	background: rgb(225,118,0);
	box-shadow: 0px 2px 15px rgba(0,0,0,.5);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ribbon .stitches {
	.box;
	display: inline-block;
	border-top: 2px dotted rgb(255,228,181);
	border-bottom: 2px dotted rgb(255,228,181);
	padding: 10px;
	width: 100%;
	height: @ribbon-height - @ribbon-padding * 2;
	line-height: 12px;
	font-size: 12px;
	letter-spacing: 1px;
	text-align: center;
	text-shadow: -1px -1px 1px rgba(0,0,0,.8);
	color: white;
}


// --------
/* Share */
// -------

#share {
	.box;
	position: fixed;
	top: 50%;
	right: 0;
	width: 60px;
	padding: 5px 0;
	text-align: center;
	background: transparent;
	box-shadow: 0 0 15px rgba(0,0,0,.5);
}

#share .text {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	color: DarkSlateGray;
	text-shadow: -1px -1px 1px rgba(0,0,0,.2);
}

#share .icon {
	border-radius: 4px;
	display: block;
	width: 48px;
	height: 48px;
	margin: 2px auto;
	opacity: .6;
	background: gray;
}

#share .icon:hover {
	-webkit-box-shadow: 0 0 15px RoyalBlue;
	box-shadow: 0 0 15px RoyalBlue;
	opacity: 1;
	-webkit-transition: box-shadow 0.3s;
	-moz-transition: box-shadow 0.3s;
	-o-transition: box-shadow 0.3s;
	-ms-transition: box-shadow 0.3s;
	transition: box-shadow 0.3s;
}

#share .twitter {
	background-image: url('../img/icon-twitter-48x48.png');
}

#share .facebook {
	background-image: url('../img/icon-f-logo-48x48.png');
}

#share .google {
	background-image: url('../img/icon-g-plus-48x48.png');
}

#share .bug {
	.box;
	color: white;
	font-size: 14px;
	line-height: 14px;
	text-decoration: none;
	padding-top: 10px;
	background: Teal;
	background: -webkit-linear-gradient(top, LightSeaGreen, Teal);
	background: -moz-linear-gradient(top, LightSeaGreen, Teal);
	background: -o-linear-gradient(top, LightSeaGreen, Teal);
	background: -ms-linear-gradient(top, LightSeaGreen, Teal);
	background: linear-gradient(top, LightSeaGreen, Teal);
}

#share .bug:before {
	content: "BUG report";
}


// ----------
/* Welcome */
// ---------

#welcome .modal-header {
	height: 30px;
}

#welcome .title {
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	margin: 10px 35px;
}

#welcome .modal-body {
	padding: 10px 40px;
}

#welcome .modal-body ul {
	padding-left: 30px;
}

#welcome .modal-body li {
	list-style: disc;
	line-height: 1.5em;
}

#welcome hr {
	margin: 0 30px;
}

#welcome img {
	vertical-align: middle;
	margin-right: 5px;
}

#welcome .icons {
	margin: 10px 30px;
}


// --------
/* Input */
// -------

#input {
	position: relative;
	.box;
	margin: 1em;
	padding: 1em;
	background-color: rgb(220,220,220);
	border-radius: 5px;
}

@arrow-color: #333333;

#input .arrow {
	position: absolute;
	top: 1.5em;
	left: 3em;
	height: 60px;
	width: 110px;
	padding: 1em;
	color: white;
	text-align: right;
	background-color: @arrow-color;
	border-radius: 5px 3px 3px 5px;
	.box;
}

#input .arrow:after {
	content: "";
	position: absolute;
	top: 0;
	left: 108px;
	margin: 0;
	width: 35px;
	border-top: 30px solid transparent;
	border-right: 0;
	border-bottom: 30px solid transparent;
	border-left: 35px solid @arrow-color;
	height: 60px;
	.box;
}

#input input {
	width: 2em;
	margin-left: 5.5em;
	padding: .5em 1em;
	font-size: 2em;
	border-radius: 5px;
	background: rgb(245,245,245);
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-o-transition: background 0.4s;
	-ms-transition: background 0.4s;
	transition: background 0.4s;
}

#input input:focus {
	outline: none;
	background: white;
}


// ---------
/* Switch */
// --------

.desktop {	// Nested rules
#switch {
	.box-margin;
	.box;
	font-size: 1.1em;
	margin: 1.5em 2em 1em 2em;
	text-align: center;
}

#switch label {
	display: inline-block;
	width: 5em;
	height: 2em;
	line-height: 2em;
	margin: 0 .5em;
	border: 1px solid transparent;
	border-radius: 5px;
	color: gray;
	cursor: pointer;
}

#switch label {
	border: 1px solid #CCC;
	background: -webkit-linear-gradient(top, white, rgb(230,230,230));
	background: -moz-linear-gradient(top, white, rgb(230,230,230));
	background: -o-linear-gradient(top, white, rgb(230,230,230));
	background: -ms-linear-gradient(top, white, rgb(230,230,230));
	background: linear-gradient(top, white, rgb(230,230,230));
}

#switch label:hover {
	color: rgb(40,40,40);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
	background: -webkit-linear-gradient(top, white, rgb(210,210,210));
	background: -moz-linear-gradient(top, white, rgb(230,230,230));
	background: -o-linear-gradient(top, white, rgb(230,230,230));
	background: -ms-linear-gradient(top, white, rgb(230,230,230));
	background: linear-gradient(top, white, rgb(230,230,230));
}

#switch .selected {
	color: rgb(245,245,245);
	text-shadow: 0px -1px 1px rgba(0,0,0,.5);
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.5);
	background: -webkit-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: -moz-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: -o-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: -ms-linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
	background: linear-gradient(top, rgb(102, 153, 204), rgb(51, 102, 153));
}

#switch .selected:hover {
	color: white;
	background: -webkit-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: -moz-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: -o-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: -ms-linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
	background: linear-gradient(top, rgb(102, 153, 204), rgb(0, 51, 153));
}
}	// End of nested rules


// --------
/* Prize */
// -------

.desktop {	// Nested rules
#prize {
	.box-margin;
	.box;
}

@section-vertical-padding: .5em;

#prize section {
	padding: @section-vertical-padding 1em;
}

#prize section:not(:last-of-type):after {
	position: relative;
	display: block;
	content: "";
	height: 0;
	top: @section-vertical-padding;
	border-bottom: 2px solid #DDD;
	-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	-moz-mask-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	-o-mask-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	-ms-mask-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(left, rgba(0, 0, 0, 0), black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
}

@number-height: 33px;

#prize .name {
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	line-height: @number-height;
	width: 7.5em;
	height: @number-height;
	padding: 1px;
	margin-right: 1em;
	.box;
}

#prize ul {
	display: inline-block;
	vertical-align: top;
	margin: 0;
	padding: 0;
}

#prize .numbers span {
	border: 0;
	font-size: 16px;
	font-family: 'Lucida Grande';
	vertical-align: middle;
	letter-spacing: 2px;
	width: 100px;
	height: @number-height;
	line-height: @number-height;
	padding: 1px;
	margin: 0;
	.box;
}

#prize .numbers input:focus {
	outline: none;
}
}	// End of nested rules


// ----------
/* Counter */
// ---------

// Parametric Mixins
.metal-gradient {
	background-image: -o-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: -moz-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: -webkit-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: -ms-linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);
	background-image: linear-gradient(bottom, rgb(50,50,50) 30%, rgb(80,80,80) 60%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.3, rgb(50,50,50)),
		color-stop(0.6, rgb(100,100,100))
	);
}

@counter-height: 60px;

#counter {
	.box;
	.metal-gradient;
	position: relative;
	color: white;
	height: @counter-height;
	width: @record-width;
	padding-top: 15px;
	line-height: 2em;
	text-align: center;
	border-radius: 5px;
	box-shadow: 0px 30px 20px -20px rgba(0,0,0,.5);
}

/* Fix counter in a taller window */
@media screen and (min-height: 601px) {

	#counter {
		position: fixed;
		top: @body-margin + @record-margin-top;
	}

	#counter:before {
		content: "";
		position: absolute;
		top: -(@body-margin + @record-margin-top);
		left: 0;
		background-color: rgb(245,245,245);
		background-image: @background-image;
		height: @body-margin + @record-margin-top;
		width: @record-width;
	}
}

// surface underneath the panel
#counter:after {
	content: "";
	position: absolute;
	z-index: -2;
	top: 0;
	left: 1%;
	width: 99%;
	height: @counter-height + 3px;
	border-radius: 5px;
	background-color: gray;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,.3);
}

#counter.chrome:after {
	content: none !important;	// bug of different layers in Google Chrome 22
}

#counter .separator {
	background: gray;
	border-left: 1px solid rgb(60,60,60);
	border-right: 1px solid rgb(60,60,60);
	margin: 0 1em;
}

#counter .count {
	display: inline-block;
	width: 3em;
}
#counter .count:before { content: " "; }
#counter .count:after { content: " "; }

#counter .frame {
	cursor: pointer;
	text-shadow: black 0px -1px 1px;
}

#counter .frame:hover {
	color: LemonChiffon;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-o-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}


// -------
/* List */
// ------

#list {
	.box;
	position: absolute;
	z-index: -1;
	top: @counter-height;
	left: 10%;
	width: 80%;
	border: 1px solid #DDD;
	background-color: white;
	// max-height: @page-height - @record-margin-top - @counter-height;
	margin-bottom: 50px;
	box-shadow: 5px 5px 15px rgba(0,0,0,.5);
	.paper-shadow;
}

#list:after {
	content: "";
	position: absolute;
	background: transparent;
	bottom: -50px;
	height: 50px;
	width: 100%;
}

#list li {
	margin: 0 10px;
	font-size: 18px;
	padding: 16px;
	height: 50px;
	border-top: 1px solid rgb(225,225,225);
	.box;
}

#list .missed {
	color: gray;
}

#list .missed .num {
	text-decoration: line-through;
}

#list .winning {
	cursor: pointer;
	background: -webkit-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: -moz-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: -o-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: -ms-linear-gradient(left, white, snow 20%, snow 85%, white);
	background: linear-gradient(left, white, snow 20%, snow 85%, white);
}

#list .months {
	font-size: 12px;
	line-height: 18px;
	color: gray;
}

#list .num {
	font-size: 20px;
	letter-spacing: 2px;
	width: 3em;
	padding: 0 1em;
	font-weight: bold;
}

#list .mark {
	float: right;
	vertical-align: middle;
	margin-top: -@mark-radius / 2;
}

#list .result {
	font-size: 14px;
	line-height: 18px;
	color: gray;
	float: right;
	padding-right: .5em;
	text-align: right;
}


// ---------------
/* Motify Modal */
// --------------

#notify {
	border-radius: 10px;
	border: 3px solid #DDD;
	.box;
}

@win-mark-radius: 40px;

#notify .mark {
	display: block;
	margin: 15px auto;
	width: @win-mark-radius * 2;
	height: @win-mark-radius * 2;
	font-size: @win-mark-radius;
	font-weight: bold;
	text-align: center;
	padding-top: @win-mark-radius / 3 + 2px;
	// line-height: @win-mark-radius * 2 * 4 / 5;
	border: @win-mark-radius / 8 solid white;
	border-radius: @win-mark-radius;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
	box-shadow: 1px 1px 6px rgba(0,0,0,.5);
}

#notify .numbers {
	position: relative;
	text-align: center;
	background: rgb(245,245,245);
	padding: 10px 0;
}

#notify .number {
	display: inline-block;
	font-size: 45px;
	font-weight: bold;
	letter-spacing: 5px;
	text-shadow: 0px -1px 1px rgba(0,0,0,.8);
}

@notify-months-size: 14px;

#notify .months {
	position: absolute;
	height: @notify-months-size;
	top: 50%;
	left: 25px;
	margin-top: -@notify-months-size / 2;
}

#notify .first-five {
	color: rgb(50,50,50);
}

#notify .last-three {
	color: #C00;
}

#notify .result {
	display: block;
	font-size: 30px;
	text-align: center;
	margin: 15px auto;
}

#notify .description {
	display: block;
	text-align: center;
}

.modal .close {
	float: left;
}

#notify .btn {
	float: right;
	clear: both;
	margin-top: 20px;
}


// ---------
/* Footer */
// --------

footer {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	min-width: 1200px;
	min-height: 28px;
	color: rgb(60,60,60);
	background: rgba(200,200,200,.3);
	-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	mask: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	-o-mask-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	-ms-mask-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
	mask-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, black 60%, black 100%);
}

@author-color: rgb(17,33,201);

footer .author {
	color: @author-color;
	cursor: pointer;
	text-decoration: underline;
}

footer .license {
	float: right;
	display: inline-block;
	margin: 12px 20px 10px;
	font-size: 12px;
}

footer .license a:visited {
	color: @author-color;
}

.tooltip-inner {
	padding: 5px 8px;
}


// ----------------------------
/* IE non-compatible message */
// ---------------------------

// IE 8 doesn't support rgba

#ie {
	background: rgb(45,45,45);
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#ie .msg {
	display: block;
	margin: 50px auto;
	color: white;
	font-size: 26px;
	text-align: center;
}

#ie .choice {
	.box;
	display: block;
	width: 520px;
	margin: 0 auto;
	padding: 5px;
	color: rgb(220,220,220);
	text-align: left;
}

#ie .browsers {
	padding: 15px 0 10px;
	text-align: center;
}

#ie .icon {
	.border;
	display: inline-block;
	height: 96px;
	width: 96px;
	margin: 0 10px;
	padding: 15px 30px;
	background: rgb(90,90,90);
	border: 1px solid gray;
}

#ie .icon:hover {
	background: rgb(120,120,120);
}
{'fraction_non_alphanumeric': 0.1910199341977937, 'fraction_numerical': 0.08273659763886201, 'mean_word_length': 3.6437494383032263, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7101690', 'n_tokens_mistral': 25157, 'n_tokens_neox': 20978, 'n_words': 4898}