/* web-phone */

.web-phone-wrap {
	padding: 8px 0 0;
}

.web-phone-text {
	color: #636363;
	font-size: 12px;
	line-height: 14px;
}

.web-phone-text-after {
	clear: both;
}

.web-phone-text p,
.web-phone-text ul,
.web-phone-text ol {
	margin: 0 0 9px;
}

.web-phone-manual {
	overflow: hidden;
	padding: 11px 0 0 8px;
	color: #636363;
	font-size: 12px;
	line-height: 14px;
}

.web-phone-manual p,
.web-phone-manual ul,
.web-phone-manual ol {
	margin: 0 0 12px;
}

.web-phone-manual .manual {
	padding: 0;
	list-style: none;
	counter-reset: manual;
}

.web-phone-manual .manual li {
	position: relative;
	margin: 0 0 15px;
	padding: 14px 0 0;
	text-indent: 17px;
}

.web-phone-manual .manual li:first-child {
	padding: 0;
	border: 0 none;
}

.web-phone-manual .manual li:before {
	position: absolute;
	top: 12px;
	left: -3px;
	display: block;
	width: 14px;
	height: 14px;
	padding: 1px 0 0 1px;
	background: #4990d3;
	border-radius: 50%;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	text-indent: 0;
	counter-increment: manual;
	content: counter(manual);
}

.web-phone-manual .manual li:first-child:before {
	top: -2px;
}

.web-phone-manual .manual ul {
	padding: 7px 0 0;
	list-style: none;
	counter-reset: list;
}

.web-phone-manual .manual ul li {
	margin: 0 0 16px;
	padding: 0;
	border: 0 none;
	text-indent: 0;
}

.web-phone-manual .manual ul li:before {
	position: static;
	display: inline;
	background: none;
	color: #636363;
	font-size: 14px;
	font-weight: 400;
	counter-increment: list;
	content: counter(list, lower-latin) ") ";
}

.web-phone {
	position: relative;
	width: 238px;
	height: 381px;
	margin: 0;
	padding: 17px 22px;
	background: #eee url(/media/images/web-phone.png) no-repeat;
}

.web-phone-i {
	width: 234px;
	height: 280px;
	border: 2px solid;
	border-color: #ddd #d9d9d9 #d2d2d2;
	border-radius: 2px;
	background: #b0bcbe url(/media/images/web-phone.png) no-repeat -2px -422px;
}

.web-phone-active .web-phone-i {
	background-color: #39cef1;
	background-position: -242px -422px;
}

@-webkit-keyframes wpnProgress {
	0%   { box-shadow: inset 0 0 30px 10px transparent; }
	50%  { box-shadow: inset 0 0 30px 10px #06F;     }
	100% { box-shadow: inset 0 0 30px 10px transparent; }
}

@-moz-keyframes wpnProgress {
	0%   { box-shadow: inset 0 0 30px 10px transparent; }
	50%  { box-shadow: inset 0 0 30px 10px #06F;     }
	100% { box-shadow: inset 0 0 30px 10px transparent; }
}

@-o-keyframes wpnProgress {
	0%   { box-shadow: inset 0 0 30px 10px transparent; }
	50%  { box-shadow: inset 0 0 30px 10px #06F;     }
	100% { box-shadow: inset 0 0 30px 10px transparent; }
}

@keyframes wpnProgress {
	0%   { box-shadow: inset 0 0 30px 10px transparent; }
	50%  { box-shadow: inset 0 0 30px 10px #06F;     }
	100% { box-shadow: inset 0 0 30px 10px transparent; }
}

.web-phone-inprogress .web-phone-i {
	-webkit-animation: wpnProgress 2s infinite;
	-moz-animation: wpnProgress 2s infinite;
	-o-animation: wpnProgress 2s infinite;
	animation: wpnProgress 2s infinite;
}

.web-phone-number {
	position: relative;
	height: 47px;
	margin: 0 3px;
}

.web-phone-number input {
	position: absolute;
	top: 21px;
	left: 0;
	display: none;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0 none;
	outline: 0;
	color: #fff;
	font: bold 20px Arial,sans-serif;
	text-align: center;
	-webkit-appearance: none;
}

.web-phone-active .web-phone-number input {
	display: block;
}

.web-phone-number input.long {
	font-size: 15px;
}

.web-phone-status {
	position: relative;
	overflow: hidden;
	margin: 0 0 12px;
	color: #fff;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	background: url(/media/images/web-phone.png) no-repeat -9999px -9999px;
	border: 0 none; 
}

.web-phone-buttons {
	position: relative;
	height: 50px;
}

.web-phone-remove,
.web-phone-call,
.web-phone-end {
	position: absolute;
	display: block;
	background: url(/media/images/web-phone.png) no-repeat;
}

.web-phone-remove {
	top: 9px;
	left: 21px;
	width: 50px;
	height: 31px;
	background-position: -380px 0;
}

.web-phone-active .web-phone-remove {
	background-position: -380px -50px;
	cursor: pointer;
}

.web-phone-active .web-phone-remove:hover {
	background-position: -380px -100px;
}

.web-phone-call {
	top: 0;
	left: 75px;
	width: 84px;
	height: 49px;
	background-position: -290px 0;
}

.web-phone-active .web-phone-call {
	background-position: -290px -50px;
	cursor: pointer;
}

.web-phone-active .web-phone-call:hover {
	background-position: -290px -100px;
}

.web-phone-end {
	top: 9px;
	right: 21px;
	width: 50px;
	height: 31px;
	background-position: -440px 0;
}

.web-phone-active .web-phone-end {
	background-position: -440px -50px;
	cursor: pointer;
}

.web-phone-active .web-phone-end:hover {
	background-position: -440px -100px;
}

.web-phone-numpad {
	padding: 6px 0 0;
}

.web-phone-numpad table {
	width: 100%;
	table-layout: fixed;
	border-spacing: 0;
	border-collapse: collapse;
}

.web-phone-numpad td {
	padding: 0;
	text-align: center;
}

.web-phone-numpad input {
	width: 64px;
	height: 37px;
	margin: 0;
	padding: 0;
	background: url(/media/images/web-phone.png) no-repeat -9999px -9999px;
	border: 0 none;
	outline: 0;
	color: #fff;
	font: bold 21px Arial,sans-serif;
	text-align: center;
	text-shadow: 0 0 8px #74c9db;
	-webkit-appearance: none;
}

.web-phone-active .web-phone-numpad input {
	text-shadow: 0 0 8px #50e1ff, 0 0 8px #50e1ff;
}

.web-phone-active .web-phone-numpad input:hover {
	background-position: -290px -150px;
	cursor: pointer;
}

.web-phone-f {
	padding: 9px 2px 0;
	zoom: 1;
}

.web-phone-f:before,
.web-phone-f:after {display:table;content:"";}
.web-phone-f:after {clear:both;}

.web-phone-f-item {
	margin: 0 0 7px;
}

.web-phone-f-remember {
	float: left;
	padding-left: 53px;
	white-space: nowrap;
}

.web-phone-f-submit {
	float: right;
}

.web-phone-f label {
	zoom: 1;
}

.web-phone-f label:before,
.web-phone-f label:after {display:table;content:"";}
.web-phone-f label:after {clear:both;}

.web-phone-f .label {
	display: block;
	float: left;
	width: 53px;
	padding: 3px 0 0;
	color: #636363;
	font-size: 12px;
	font-weight: 700;
}

.web-phone-f .text {
	width: 171px;
	margin: 0;
	padding: 2px;
	background: #ddeeff;
	outline: none;
	box-shadow: 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px #cae1f8;
	border: 1px solid #a4c5e9;
	border-radius: 3px;
	color: #000;
	font: 12px Arial, sans-serif;
	-webkit-appearance: none;
	-webkit-transition: background .15s ease;
	   -moz-transition: background .15s ease;
	    -ms-transition: background .15s ease;
	     -o-transition: background .15s ease;
	        transition: background .15s ease;
}

.web-phone-f .text:focus {
	background: #fff;
	box-shadow: 0 0 5px rgba(221,238,255,.75), inset 0 0 3px rgba(58,124,189,.5);
}

.web-phone-f .text-done {
	background: #f2f8ff;
}

.web-phone-f-remember .label {
	display: inline;
	float: none;
	font-size: 10px;
	font-weight: 400;
}

.web-phone-f-remember input {
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

.web-phone-f-submit input {
	display: block;
	width: 100px;
	height: 25px;
	margin: 0;
	padding: 0;
	background: url(/media/images/web-phone-f-submit.png) no-repeat;
	border: 0 none;
	color: #484848;
	font: 10px Arial, sans-serif;
	cursor: pointer;
}