ZXDT_CallCenter/code/ZXDT.CallCen.../Content/css/phonecall.css

*{
	margin:0;
	padding:0;
}
::selection{
	background:transparent;
}
body{
	color:#4196b7;
	font:normal 12px arial,sans-serif;
}

.nexus{
	position:relative;
	margin:30px auto;
	width:211px;

	
}
	.nexus:before{
	position:absolute;
	content:'';
	z-index:-1;
	top:-6px;
	
	background:#EAEAE8;
	width:211px;
	height:25px;
	border-radius:20px 20px 0 0 ;

} 

.screen{
	position:absolute;	
	top:19px;	
	width: 211px;
	background:white;
}
.phone-infos{
	width:100%;
	height:19px;
	background:#0D6FB8;
}
/* .phone-infos span{
	float:right;
	font-size:11px;
	margin:2px 3px;
} */
.phone-infos button{ width: 14px; height: 16px; border:0; background: url(../images/phonecall/ph_r4_c6.png) 0 0 no-repeat;font-size: 0; margin:2px 0 0 101px; cursor: pointer; }

.phone-infos .battery{
	width:8px;
	height:10px;
	background:#4196b7;
	margin-top:2px;
	position:relative;
	margin-top:4px;
}
.phone-infos .battery:before{
	width:4px;
	height:2px;
	position:absolute;
	left:2px;
	top:-2px;
	background:#4196b7;
	content:'';
}
.phone-infos .gsm{
	position:relative;
	height:12px;
	margin-right:10px;
}
.phone-infos .gsm b{
	float:left;
	position:absolute;
	bottom:0;
}
.phone-infos .gsm b:before{
	position:absolute;
	content:'';
	top:-3px;
	width:0;
	height:0;
	border-bottom:3px solid #4196b7;
	border-left:3px solid transparent;
}
.phone-infos .gsm .signal1{
	width:3px;
	height:0px;
	background:#4196b7;
	left:-8px;
}
.phone-infos .gsm .signal2{
	width:3px;
	height:3px;
	background:#4196b7;
	left:-4px;
}
.phone-infos .gsm .signal3{
	width:3px;
	height:7px;
	background:#4196b7;
}
.phone-infos .gsm .signal4{
	width:3px;
	height:11px;
	background:#808184;
	left:4px;
}
.phone-infos .gsm .signal4:before{
	border-bottom:3px solid #808184;
	border-left:3px solid transparent;
}

.phone-tabs{
	border-bottom:1px solid #858383;
	background:#303030;
	height:50px;
}
.phone-tabs li{
	float:left;
	list-style:none;
	-webkit-transition:all .05s ease-in;
	-moz-transition:all .05s ease-in;
	-o-transition:all .05s ease-in;
	transition:all .05s ease-in;
}
.phone-tabs li a{
	-webkit-transition:all .05s ease-in;
  -moz-transition:all .05s ease-in;
  -o-transition:all .05s ease-in;
	transition:all .05s ease-in;
	text-decoration:none;
	background:#303030;
	cursor:pointer;
	height:40px;
  width:94px;
	display:block;
	text-align:center;
	position:relative;
	padding-top:10px;
}
.phone-tabs li a:active{
	background:rgba(104,208,249,.4);
}
.phone-tabs li a:before{
	height:20px;
	width:1px;
	background:#858383;
	position:absolute;
	content:'';
	left:0;
	top:16px;
}
.phone-tabs li:first-child a:before{
	display:none;
}
.phone-tabs li.current a:after{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	width:100%;
	height:5px;
	background:#4196b7;
}

.phone-tab-contents{
	width:100%;
	height:275px;
	position:relative;
	overflow:hidden;
}
.phone-tab-contents .tab{
	width:100%;
	/* height:365px; */
	position:absolute;
	background:#EAEAE8;
	position:absolute;
	-webkit-transition:all .25s ease-in;
	-moz-transition:all .25s ease-in;
	-o-transition:all .25s ease-in;
	transition:all .25s ease-in;
}
.phone-tab-contents .tab.phone{
	left:0;
	background:#3f3f3f url(data:image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAABJRU5ErkJggg==) repeat;
}
.phone-tab-contents .tab.clock{
	left:282px;
}
.phone-tab-contents .tab.peoples{
	left:564px;
}

.phone-tab-contents.getclock .tab.phone{
	left:-282px;
}
.phone-tab-contents.getclock .tab.clock{
	left:0px;
}
.phone-tab-contents.getclock .tab.peoples{
	left:282px;
}

.phone-tab-contents.getpeoples .tab.phone{
	left:-564px;
}
.phone-tab-contents.getpeoples .tab.clock{
	left:-282px;
}
.phone-tab-contents.getpeoples .tab.peoples{
	left:0px;
}

.phone-tab-contents .tab.clock p:first-child,
.phone-tab-contents .tab.peoples p:first-child{
	margin-top:50px;
}
.phone-tab-contents .tab.peoples p,
.phone-tab-contents .tab.clock p{
	width:90%;
	padding:10px 5% 0;
	text-align:center;
	color:#bbb;
}
.phone-tab-contents .tab.peoples p a,
.phone-tab-contents .tab.clock p a{
	color:#fff;
}

.main-btns{
	width:100%;
	height:43px;
	background-color:#EAEAE8;
	border-radius: 0 0 20px 20px;
	position: relative;
}
.main-btns li{
	list-style:none;
	float:left;
	margin-top: 2px;
}
.main-btns li a{
	width:30px;
	display:block;
	width:94px;
	height:34px;
	text-align:center;

	
}

.main-btns  .btn-people{background: url(../images/phonecall/ph_r3_c1.png) 0 0 no-repeat; margin-left: 9px; width: 34px; height: 30px; cursor: pointer;}
.main-btns  .btn-btn{background: url(../images/phonecall/ph_r3_c3.png) 0 0 no-repeat; width: 150px; height: 30px; cursor: pointer; margin:0 5px;background-position-y:-105px}
.main-btns  .btn-del{background: url(../images/phonecall/ph_r3_c4.png) 0 0 no-repeat; width: 34px; height: 30px; cursor: pointer;}






.number-area{
	color:#fff;
	font-size:20px;
	text-align:center;
	padding:10px 0  ;
	width:100%;
	height:54px;
	overflow:hidden;
	/*background-color: #1E1B1C;*/
	margin-bottom:10px;
}
.number-area .numbers{
	/* width:186px; */
	overflow: hidden;
	white-space: nowrap;/* 强制不换行 */
	width: 8.99em;/*不允许出现半汉字截断*/
	padding: 0 5px;

	/* background-color: pink; */
	margin:0 3px;
	float:left;
	font-size: 20px;
	line-height: 54px;
	padding:0 10px;
	height:54px;
}
.speaker .numbers{
padding:0 10px;
float: right;
width: 8em;
overflow: hidden;
white-space: nowrap;/* 强制不换行 */
height: 18px;
margin-right: 10px;
display: inline;
color: #939192;
position: absolute;
top: 0; right: 0;
z-index: 1;
line-height:20px;

}

.speaker .bo,.speaker .tong{
	position: absolute;
	left: 26px;
   
   color: #231815;
   font-size: 12px; 
   font-family: "Microsoft yahei";


}
.circle{ width: 12px; height: 8px; float: left; margin:4px 0 0 10px; display: inline; background: url(../images/phonecall/ph_r4_c12.png) 0 -22px no-repeat;}
.number-area .delete-btn{
	float:right;
	margin-right:10px;
	margin-top: 30px;
	cursor:pointer;
}

.numbers-container{
	overflow:hidden;
	margin:5px auto;


}
.phone .cover{ position: absolute;top:75px; left: 0; z-index: 99; width: 211px; height: 200px; background:rgba(255,255,255,0.7);}
.numbers-container span{
	width:40px;
	height:40px;
	float:left;
	font-size:0;
	margin:0 30px 8px 0;
	border-radius: 25%;
	position:relative;
	
	cursor:pointer;
	background:url(../images/phonecall/ph_r10_c18.png) 0 0 no-repeat;
}

.numbers-container .pushed1{background-position: 8px 4px; margin-left: 16px;}

.numbers-container .pushed2{ background-position: -53px 2px;}
.numbers-container .pushed3{ background-position: -116px 2px; margin-right: 0;}
.numbers-container .pushed4{margin-left: 16px; background-position: 8px -44px;}
.numbers-container .pushed5{ background-position: -53px -44px;}
.numbers-container .pushed6{ background-position: -116px -44px; margin-right: 0;}
.numbers-container .pushed7{margin-left: 16px; background-position: 8px -90px;}
.numbers-container .pushed8{ background-position: -53px -89px;}
.numbers-container .pushed9{ background-position: -116px -90px; margin-right: 0;}
.numbers-container .pushedasterisk{margin-left:16px; background-position: 8px -127px;}
.numbers-container .pushed0{ background-position: -53px -127px;}
.numbers-container .pushednumber{ background-position: -116px -127px; margin-right: 0;}










.numbers-container span:active{
	background-color:#DDDDDB;
}
.numbers-container span em{
	font-size:12px;
	color:#fff;
	font-style:normal;
	position:absolute;
	left:22px;
	bottom:15px;
	padding-bottom:5px;
}
.numbers-container span em.brd:before{
	position:absolute;
	width:14px;
	height:2px;
	background:#fff;
	content:'';
	top:9px;
	left:24px;
}
.numbers-container span em:after{
	width:35px;
	height:2px;
	background:#4196b7;
	content:'';
	position:absolute;
	top:16px;
	left:22px;
}
.numbers-container span.fff{
	color:#fff;
	text-align:center;
}

.call-btn{
	width:100%;
	text-align:center;
	/* border-top:1px solid #333; */
	padding-top:10px;
	background-color: pink;
}

/* 	Icon Group 	*/
.icon{
	display:inline-block;
	font-style:normal;
	position:relative;
}

.icon.phone{
	background:#fff;
	width:5px;
	height:26px;
	-webkit-transform:rotate(145deg);
	-moz-transform:rotate(145deg);
	-o-transform:rotate(145deg);
	transform:rotate(145deg);
	border-radius:0 6px 6px 0;
	margin-top:5px;
}
.icon.phone:before{
	position:absolute;
	content:'';
	width:8px;
	height:9px;
	background:#fff;
	left:-6px;
	bottom:-1px;
	border-radius:3px 6px 7px 3px;
}
.icon.phone:after{
	position:absolute;
	content:'';
	width:8px;
	height:9px;
	background:#fff;
	left:-6px;
	top:-1px;
	border-radius:3px 6px 7px 3px;
}

.icon.clock{
	background:#303030;
	width:22px;
	height:22px;
	border:2px solid #fff;
	border-radius:22px;
	margin-top:4px;
}
.icon.clock:before{
	position:absolute;
	content:'';
	height:9px;
	width:2px;
	background:#fff;
	top:2px;
	left:10px;
}
.icon.clock:after{
	position:absolute;
	content:'';
	height:9px;
	width:2px;
	background:#fff;
	top:9px;
	-webkit-transform:rotate(120deg);
	-o-transform:rotate(120deg);
	-moz-transform:rotate(120deg);
	transform:rotate(120deg);
	left:14px;
}

.icon.peoples{
	background:#fff;
	height:10px;
	width:22px;
	border-radius:12px 12px 0 0;
	margin-top:20px;
}
.icon.peoples:after{
	position:absolute;
	content:'';
	background:#fff;
	width:14px;
	height:14px;
	border:2px solid #303030;
	border-radius:18px;
	top:-14px;
	left:2px;
	z-index:10;
}
.icon.peoples:before{
	position:absolute;
	content:'';
	background:#303030;
	width:10px;
	height:5px;
	left:6px;
	top:-5px;
	z-index:20;
	border-radius:0 0 15px 15px;
}

.icon.close{
	font-size:12px;
	color:#303030;
	background:#fff;
	width:14px;
	height:12px;
	line-height:12px;
	margin-top:5px;
}
.icon.close:before{
	position:absolute;
	content:'';
	left:-8px;
	width:0px;
	height:0px;
	border-style:solid;
	border-width:6.5px 8px 6.5px 0;
	border-color:transparent #ffffff transparent transparent;
}

.icon.home{
	width:25px;
	height:8px;
	border:2px solid #bbbbbb;
	border-top:0;
	margin-top:15px;
}
.icon.home:after{
	width:2px;
	height:17px;
	background:#bbbbbb;
	position:absolute;
	top:-12px;
	left:5px;
	content:'';
	-webkit-transform:rotate(70deg);
	-moz-transform:rotate(70deg);
	-o-transform:rotate(70deg);
	transform:rotate(70deg);
}
.icon.home:before{
	width:2px;
	height:17px;
	background:#bbbbbb;
	position:absolute;
	top:-12px;
	right:5px;
	content:'';
	-webkit-transform:rotate(110deg);
	-moz-transform:rotate(110deg);
	-o-transform:rotate(110deg);
	transform:rotate(110deg);
}

.icon.windows{
	width:20px;
	height:8px;
	border:2px solid #bbbbbb;
  margin-top:13px;
}
.icon.windows:after{
	width:2px;
	height:14px;
	background:#bbbbbb;
	position:absolute;
	content:'';
	right:-6px;
	top:-6px;
}
.icon.windows:before{
	width:22px;
	height:2px;
	background:#bbbbbb;
	position:absolute;
	content:'';
	right:-4px;
	top:-6px;
}

.icon.back{
	width:20px;
	height:2px;
	background:#bbb;
	color:#bbb;
	font-size:18px;
	line-height:0px;
	text-indent:-16px;
	font-family:sans-serif;
	margin-top:12px;
}
.icon.back:before{
	width:7px;
	height:11px;
	background:#303030;
	position:absolute;
	content:'';
	left:8px;
	z-index:10;
	top:2px;
}
.icon.back:after{
	width:20px;
	height:7px;
	border:2px solid #bbb;
	position:absolute;
	content:'';
	border-radius:10px;
}


.phone-pic{ width: 40px;height:40px; background: url(../images/phonecall/ph_r1_c8.png) center no-repeat; float: left; position:absolute;
top: 18px; left: 50%; margin-left: -20px; }

.re-phone{ font-size: 18px; font-family: "Microsoft yahei"; font-weight: 600;  position: absolute; top :24px; left: 50%; width: 78px; margin-left: -39px;}
.over-phone{ font-size: 18px; font-family: "Microsoft yahei"; font-weight: 600; position: absolute; top :24px; left: 50%; width: 78px; margin-left: -39px; }
.yes,.no{ float: left; border-radius:7px; margin-right: 5px; width: 57px;height: 28px;background-color: red; text-align: center; background: url(../images/phonecall/ph_r3_c3.png) 0 -152px no-repeat; cursor: pointer;}
.no{background-color: #fff;background-position: -59px -152px; margin-right: 3px; }
.yes-no{float: left;margin-left: 4px;}