// Origin:
// Modern CSS3 Calculator without images.
// by @jofelipe_
// www.jonathanfelipe.com.br
//
// tweaked to a security panel by GizMoCuz
// enhanced and optimized by DukeBox
@import 'reset.less';
@import 'font.less';

body { 
	background: url(../bg.jpg) repeat;
}
.clear { clear: both; height: 0 }

#main:-webkit-full-screen { // created for 240x320
	.main-border {
		width: 100%;
		height: 100%;
		background-image: none;
		padding: 0;
		border-radius: 0;
		left: 0;
		top: 0; 
		margin-left: 0;
		margin-top: 0;
		#keypad {
			width: 240px;
			height: 320px;
			border-radius: 0;
			padding: 4px;
			.keypad-header {
				.title {
					margin-top: 10px;
					margin-bottom: 10px;
					font: 14px 'Audiowide';
				}
			}
			input[type="text"] {
				border-radius: 12px;
				padding: 2px 5px 0;
				width: 230px;
				height: 58px;
				border: 0;
				margin-bottom: 10px;
				font: 36px 'Digital', sans-serif;
			}
			.keypad-keys {
				li {
					width: 26px;
					margin: 0 5px 5px 0;
					border-radius: 12px;
					font: 20px 'Audiowide';
					padding: 5px;
				}
				li.disarm {
					width: 106px;
					font-size: 18px;
				}
				li.disabled {
					width: 106px;
					font-size: 18px;
				}
				li.arm {
					width: 106px;
					font-size: 18px;
				}
				li.btnclear {
					width: 106px;
					font-size: 18px;
				}
			}
		}
	}
}

#main {
	width: 100%px;
	height: 100%px;
	overflow: hidden;
	.main-border {
		width: 468px;
		padding: 6px;
		border-radius: 40px;
		position: absolute;
		left: 50%;
		top: 50%; 
		margin-left: -237px;
		margin-top: -314px;
     	overflow: hidden;
		background-image: linear-gradient(right bottom, #363636 27%, #808080 64%, #3b3b3b 82%);
		background-image: -o-linear-gradient(right bottom, #363636 27%, #808080 64%, #3b3b3b 82%);
		background-image: -moz-linear-gradient(right bottom, #363636 27%, #808080 64%, #3b3b3b 82%);
		background-image: -webkit-linear-gradient(right bottom, #363636 27%, #808080 64%, #3b3b3b 82%);
		background-image: -ms-linear-gradient(right bottom, #363636 27%, #808080 64%, #3b3b3b 82%);
		background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.27, #363636), color-stop(0.64, #808080), color-stop(0.82, #3b3b3b));
		#keypad {
			width: 438px;
			overflow: hidden;
			border-radius: 35px;
			padding: 15px;
			background: #e0e0e0; /* Old browsers */
			background: -moz-linear-gradient(-45deg, #e0e0e0 0%, #b2b2b2 45%, #e0e0e0 80%, #e5e5e5 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e0e0e0), color-stop(45%,#b2b2b2), color-stop(80%, #e0e0e0), color-stop(100%, #e5e5e5)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(-45deg, #e0e0e0 0%, #b2b2b2 45%, #e0e0e0 80%, #e5e5e5 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(-45deg, #e0e0e0 0%, #b2b2b2 45%, #e0e0e0 80%, #e5e5e5 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(-45deg, #e0e0e0 0%, #b2b2b2 45%, #e0e0e0 80%, #e5e5e5 100%); /* IE10+ */
			background: linear-gradient(135deg, #e0e0e0 0%, #b2b2b2 45%, #e0e0e0 80%, #e5e5e5 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#e5e5e5', GradientType=1); /* IE6-9 */
			.keypad-header {
				overflow: hidden;
				.title { 
					margin-left: auto;
					margin-right: auto;
					margin-bottom: 10px;
					color: rgba(139, 137, 137, .95);
					font: 20px 'Audiowide';
					text-align: center;
				    text-transform: uppercase;
				    -webkit-font-smoothing: none;
					-webkit-font-smoothing: subpixel-antialiased;
					-webkit-font-smoothing: antialiased;
				}
			}
			input[type="text"] { // digit display
				background: #499bea;
				background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #499bea), color-stop(100%, #207ce5));
				background: -webkit-linear-gradient(top, #499bea 0%, #207ce5 100%);
				background: -o-linear-gradient(top, #499bea 0%, #207ce5 100%);
				background: -ms-linear-gradient(top, #499bea 0%, #207ce5 100%);
				background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );
				border-radius: 16px;
				padding: 2px 10px 0;
				width: 418px;
				height: 92px;
				border: 0;
				margin-bottom: 20px;
				font: 72px 'Digital', sans-serif;
				color: rgba(255, 255, 255, .75);
				text-align: center;
				-webkit-font-smoothing: none;
				-webkit-font-smoothing: subpixel-antialiased;
				-webkit-font-smoothing: antialiased;
			}
			.keypad-keys {
				overflow: hidden;
				li {
					display: block;
					float: left;
					cursor: pointer;
					width: 32px;
					background: #757575;
					text-align: center;
					white-space: nowrap;
					background: -moz-radial-gradient(center, ellipse cover, #757575 0%, #494949 47%, #383838 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #757575), color-stop(47%, #494949), color-stop(100%, #383838));
					background: -webkit-radial-gradient(center, ellipse cover, #757575 0%,#494949 47%,#383838 100%);
					background: -o-radial-gradient(center, ellipse cover, #757575 0%, #494949 47%, #383838 100%);
					background: -ms-radial-gradient(center, ellipse cover, #757575 0%, #494949 47%, #383838 100%);
					background: radial-gradient(ellipse at center, #757575 0%, #494949 47%, #383838 100%);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#383838', GradientType=1);
					margin: 0 15px 15px 0;
					border-radius: 16px;
					font: 32px/32px 'Audiowide';
					color: #ffffff;
					padding: 20px;
					&:hover {
						background: #939393;
						background: -moz-radial-gradient(center, ellipse cover, #939393 0%, #606060 47%, #191919 100%);
						background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #939393), color-stop(47%, #606060), color-stop(100%, #191919));
						background: -webkit-radial-gradient(center, ellipse cover, #939393 0%, #606060 47%, #191919 100%);
						background: -o-radial-gradient(center, ellipse cover, #939393 0%, #606060 47%, #191919 100%);
						background: -ms-radial-gradient(center, ellipse cover, #939393 0%, #606060 47%, #191919 100%);
						background: radial-gradient(ellipse at center, #939393 0%, #606060 47%, #191919 100%);
						filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#939393', endColorstr='#191919', GradientType=1);
					}
				}
				li:nth-child(4n+4) { 
					margin-right: 0;
				}
				li.disarm {
					width: 137px;
					font-size: 26px;
					background: #1ea803;
					background: -moz-radial-gradient(center, ellipse cover, #1ea803 0%, #028f22 44%, #006d19 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #1ea803), color-stop(44%, #028f22), color-stop(100%, #006d19));
					background: -webkit-radial-gradient(center, ellipse cover, #1ea803 0%, #028f22 44%, #006d19 100%);
					background: -o-radial-gradient(center, ellipse cover,  #1ea803 0%, #028f22 44%, #006d19 100%);
					background: -ms-radial-gradient(center, ellipse cover,  #1ea803 0%, #028f22 44%, #006d19 100%);
					background: radial-gradient(ellipse at center, #1ea803 0%, #028f22 44%, #006d19 100%);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ea803', endColorstr='#006d19', GradientType=1);
					&:hover {
						background: #1ea803;
						background: -moz-radial-gradient(center, ellipse cover, #1ea803 0%, #029722 44%, #006d19 100%);
						background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #1ea803), color-stop(44%, #029722), color-stop(100%, #006d19));
						background: -webkit-radial-gradient(center, ellipse cover, #1ea803 0%, #029722 44%, #006d19 100%);
						background: -o-radial-gradient(center, ellipse cover,  #1ea803 0%, #029722 44%, #006d19 100%);
						background: -ms-radial-gradient(center, ellipse cover,  #1ea803 0%, #029722 44%, #006d19 100%);
						background: radial-gradient(ellipse at center, #1ea803 0%, #029722 44%, #006d19 100%);
						filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1ea803', endColorstr='#006d19', GradientType=1);
					}
				}
				li.disabled {
					width: 137px;
					font-size: 26px;
					background: #cedce7;
					background: -moz-radial-gradient(center, ellipse cover, #cedce7 0%, #596a72 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #cedce7), color-stop(100%, #596a72));
					background: -webkit-radial-gradient(center, ellipse cover, #cedce7 0%, #596a72 100%);
					background: -o-radial-gradient(center, ellipse cover, #cedce7 0%, #596a72 100%);
					background: -ms-radial-gradient(center, ellipse cover, #cedce7 0%, #596a72 100%);
					background: radial-gradient(ellipse at center, #cedce7 0%, #596a72 100%);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cedce7', endColorstr='#596a72', GradientType=1);
				}
				li.arm {
					width: 137px;
					font-size: 26px;
					background: #d83a5f;
					background: -moz-radial-gradient(center, ellipse cover, #d83a5f 0%, #c50330 44%, #aa0028 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #d83a5f), color-stop(44%, #c50330), color-stop(100%, #aa0028));
					background: -webkit-radial-gradient(center, ellipse cover, #d83a5f 0%, #c50330 44%, #aa0028 100%);
					background: -o-radial-gradient(center, ellipse cover, #d83a5f 0%, #c50330 44%, #aa0028 100%);
					background: -ms-radial-gradient(center, ellipse cover, #d83a5f 0%, #c50330 44%, #aa0028 100%);
					background: radial-gradient(ellipse at center, #d83a5f 0%, #c50330 44%, #aa0028 100%);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d83a5f', endColorstr='#aa0028', GradientType=1);
					&:hover {
						background: #d83a5f;
						background: -moz-radial-gradient(center, ellipse cover, #d83a5f 0%, #d80330 44%, #aa0028 100%);
						background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #d83a5f), color-stop(44%, #d80330), color-stop(100%, #aa0028));
						background: -webkit-radial-gradient(center, ellipse cover, #d83a5f 0%, #d80330 44%, #aa0028 100%);
						background: -o-radial-gradient(center, ellipse cover, #d83a5f 0%, #d80330 44%, #aa0028 100%);
						background: -ms-radial-gradient(center, ellipse cover, #d83a5f 0%, #d80330 44%, #aa0028 100%);
						background: radial-gradient(ellipse at center, #d83a5f 0%, #d80330 44%, #aa0028 100%);
						filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d83a5f', endColorstr='#aa0028', GradientType=1);
					}
				}
				li.btnclear {
					width: 137px;
					font-size: 26px;
					background: #00b7ea;
					background: -moz-radial-gradient(center, ellipse cover, #00b7ea 0%, #30a9ea 44%, #009ec3 100%);
					background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #00b7ea), color-stop(44%, #30a9ea), color-stop(100%, #009ec3));
					background: -webkit-radial-gradient(center, ellipse cover, #00b7ea 0%, #30a9ea 44%, #009ec3 100%);
					background: -o-radial-gradient(center, ellipse cover, #00b7ea 0%, #30a9ea 44%, #009ec3 100%);
					background: -ms-radial-gradient(center, ellipse cover, #00b7ea 0%, #30a9ea 44%, #009ec3 100%);
					background: radial-gradient(ellipse at center, #00b7ea 0%, #30a9ea 44%, #009ec3 100%);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=1);
					&:hover {
						background: #00b7ea;
						background: -moz-radial-gradient(center, ellipse cover, #00b7ea 0%, #34b3ea 44%, #009ec3 100%);
						background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #00b7ea), color-stop(44%, #34b3ea), color-stop(100%, #009ec3));
						background: -webkit-radial-gradient(center, ellipse cover, #00b7ea 0%, #34b3ea 44%, #009ec3 100%);
						background: -o-radial-gradient(center, ellipse cover, #00b7ea 0%, #34b3ea 44%, #009ec3 100%);
						background: -ms-radial-gradient(center, ellipse cover, #00b7ea 0%, #34b3ea 44%, #009ec3 100%);
						background: radial-gradient(ellipse at center, #00b7ea 0%, #34b3ea 44%, #009ec3 100%);
						filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=1);
					}
				}
			}
		}
	}
}