/**
 * wangyan19
 */
body{
	opacity:0.9999;
	font: 400 12px "宋体","微软雅黑", Arial, Verdana; 
	-webkit-user-select:none;
	-webkit-text-size-adjust:none;
	color: #4e5059;
}
body, div, h4, h5, ul, li, p, span, em{
	margin:0;
	padding:0;
}
ul,li{list-style-type: none;}
img{ border: 0 none;}
.clear{clear: both;}
.pointer{cursor: pointer;}
.abs{position: absolute;}
.rel{position: relative;}
.hide{display: none;}
.bg{
	background: url(../images/common.png) no-repeat;
}
.box{
	width: 407px;
	height: 324px;
	/*border: #b2b2b2 solid 1px;*/
	border: rgba(0,0,0,.7) solid 1px;
	border-radius: 2px;
	box-shadow: 0 1px 2px 1px rgba(0,0,0,.1);
	background-color: #fcfcfc;
	/*overflow: hidden;*/
}
.content{
	padding: 5px 5px 0;
	width: 397px;
	height: 288px;
	overflow: hidden;
}
.content section, .content .groupListBox{
	display: block;
	width: 397px;
	height: 288px;
	overflow: hidden;
}
.feel-box{
	width: 100%;
	height: 288px;
}
.feel-box .feel-tab{
	left: 0;
	bottom: 5px;
	width: 100%;
	height: 20px;
	overflow: hidden; 
}
.feel-box .feel-tab li{
	float: left;
	margin-right: 5px;
	width: 41px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
}
.feel-box .feel-tab li:hover{
	background-color: #e7f2fa;
}
.feel-box .feel-tab li.current{
	background-color: #228ee6;
	color: #ffffff;
}
.feel-box .emotion-items{
	/*display: none;*/
}
.emotion-items{
	/*border-left: #ddebfb solid 1px;*/
}
.emotion-items li{
	float: left;
	width: 63px;
	height: 63px;
	border-left: #ddebfb solid 1px;
	border-top: #ddebfb solid 1px;
	text-align:center;
}
.emotion-items li.border-b{
	border-bottom: #ddebfb solid 1px;
}
.emotion-items li.border-r{
	border-right: #ddebfb solid 1px;
}
.emotion-items li .emotion{
	width: 100%;
	height: 100%;	
	display: table;
}
.emotion-items li em{
	width: 63px;
	height: 63px;
	display: table-cell;
	vertical-align:middle;
	text-align:center;
}
.emotion-items li.current em.nomalshow{
	visibility: hidden;
}
.emotion-items li img{
	vertical-align: middle;
}
.emotion-items li .magic{
	position: absolute;
	left: 0;
	top: 0;
	width: 63px;
	height: 63px;
	border: #228ee6 solid 1px;
	display: none;
}
.emotion-nomal li,.emotion-nomal li em,.emotion-nomal li .magic{
	width: 28px;
	height: 28px;
}
.emotion-items li.current .emotion>img{
	display: none;
}
.emotion-items li.current .magic{
	display: block;
}
.emotion-items li .title{
	display: none;
}
.emotionBox{
	width: 100%;
	height: 288px;
	overflow-y: auto; 
}
.feelFaceBox.feel{
	overflow: hidden;
}
.feelFaceBox.feel, .feelFaceBox .emotionBox{
	height: 258px;
}
.emotionBox::-webkit-scrollbar{
	width: 8px;	
	background-color: none;
}
.emotionBox::-webkit-scrollbar:hover{
	background-color: #ddebfb;
}
.emotionBox::-webkit-scrollbar-thumb{
	background-color: #91b8e9;
}
.emotionBox::-webkit-scrollbar-thumb:hover{
	background-color: #228ee6;
}
.emotionBox::-webkit-scrollbar-button{
	width: 8px;
	height: 9px; 
	background: url(../images/scroll-bg.png) no-repeat #fcfcfc;
}
.emotionBox::-webkit-scrollbar-button:decrement{
	background-position: 0 0;	
}
.emotionBox::-webkit-scrollbar-button:increment{	
	background-position: 0 -10px;
}
.emotionBox::-webkit-scrollbar-button:decrement:hover{
	background-position: -12px 0;
}
.emotionBox::-webkit-scrollbar-button:increment:hover{	
	background-position: -12px -10px;
}
/* import face */
.more-face{
	position: absolute;
	top: 3px;
	left: 4px;
	height: 24px;	
	color: #228ee6;
	cursor: pointer;	
}
.more-face:hover{
	text-decoration: underline;
}
.importface{
	float: right;
	margin-right: 15px;
	width: 78px;
	height: 24px;
	background-position: 0 -66px;
}
.importface:hover{background-position: -105px -66px;}
.importface:active{background-position: -210px -66px;}
.importface .import-items{
	right: 2px;
	top: 26px;
	width: 90px;
}
.emotionBox.recomface{
	top: 30px;
	padding: 1px 0;
	width: 100%;
	height: 258px;
	/*border-right: #ddebfb solid 1px;*/
}
.emotionBox.recomface ul{	
}
.recomface li{
	float: left;
	width: 126px;
	height: 63px;
	border-left: #ddebfb solid 1px;
	border-top: #ddebfb solid 1px;
}
.recomface li.border-b{
	border-bottom: #ddebfb solid 1px;
}
.recomface li.border-r{
	border-right: #ddebfb solid 1px;
}
.recomface li .pack-img{
	width: 57px;
	height: 57px;
}
.recomface .recom-item{
	padding: 3px;
	width: 120px;
	height: 57px;
}
.recomface .recom-item .title{
	position: absolute;
	left: 70px;
	top: 0;
	width: 62px;
	line-height: 50px;
	color: #7795ad;
}
.recomface li em{
	position: absolute;
	left: -1px;
	top: -1px;
	width: 100%;
	height: 100%;
	cursor: pointer;	
	z-index: 66;
}
.recomface li.current em{	
	border: #228ee6 solid 1px;
}
.recomface li.current .item-border{
	display: block;
}
.recomface li .addret{
	display: block;
	position: absolute;
	left: 70px;
	top: 36px;
	width: 38px;
	text-align: center;
	color: #ffffff;
	background: #b9b9b9;
}
.loading{
	left: -1px;
	top: -1px;
	width: 100%;
	height: 100%;
	border: #228ee6 solid 1px;
	background: rgba(255,255,255,.8);
	z-index: 69;
	color: #228ee6;
	line-height: 64px;
	text-align: center;
}
.loading p{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -10px;
	margin-top: -10px;
	width: 1px;
	height: 1px;
	background: url(../images/load.png);
	z-index: 15;
	background-size: 12px 1px;

	-webkit-transform: scaleX(21) scaleY(21); /* 设定显示宽高 */
	-webkit-transform-origin: top left;	
}
.loading .load{
	-webkit-animation: 'load' 2s infinite linear;
}
@-webkit-keyframes 'load'{
0%{ background-position: 0px 0}
9%{ background-position: -1px 0}
18%{ background-position: -2px 0}
27%{ background-position: -3px 0}
36%{ background-position: -4px 0}
45%{ background-position: -5px 0}
54%{ background-position: -6px 0}
63%{ background-position: -7px 0}
72%{ background-position: -8px 0}
81%{ background-position: -9px 0}
90%{ background-position: -10px 0}
99.9%{ background-position: -11px 0}
99.99%{ background-position: -0px 0}
}
/* bottom */
.bottom{
	bottom: 1px;
	width: 100%;
	height: 31px;
	background-color: #d5e8f5;
	border-top: #c5e0f3 solid 1px;
}
.mask1{
	left: 0;
	bottom: 31px;
	width: 390px;
	height: 20px;
	background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, from(#ffffff), to(rgba(255,255,255,0)));
	display: none;
}
.emotionTabBox{
	left: 4px;
	top: -1px;
	padding-left: 4px;
	width: 266px;
	height: 32px;
	overflow: hidden;
}
.emotion-tabs{
	left: 0;
	top: 0;
	height: 32px;
}
.emotion-tabs nav{
	/*display: inline-block;*/
	float: left;
	width: 38px;
	height: 32px;
	cursor: pointer;	
}
.emotion-tabs nav em{
	width: 38px;
	height: 32px;
	display: table-cell;
	vertical-align:middle;
	text-align: center;
}
.emotion-tabs nav img{
	vertical-align: middle;
}
.emotion-tabs nav:hover{ 
	background: url(../images/common.png) 0 -92px no-repeat;
}
.emotion-tabs nav.current{
	background: url(../images/common.png) -38px -92px no-repeat;
	cursor: default;
}
nav.emotion-add{
	right: 0;
	top: -1px;
	width: 98px;
	height: 32px;
	cursor: pointer;
	background-position: 0 -28px;
}
nav.emotion-add:hover{
	background-position: -105px -28px;
}
nav.emotion-add.current{
	background-position: -210px -28px;
	cursor: default;
}
.emotion-tabs nav .tabtips{
	position: absolute;
	left: 0;
	top: -32px;
	width: 38px;
	height: 32px;
	z-index: 33;
}
.addbox{
	display: none;
}
/* 翻页 */
.pager{
	right: 102px;
	top: 4px;
	width: 32px;
	height: 25px;
}
.pager-prev, .pager-next{
	width: 14px;
	height: 25px;
	background: url(../images/common.png);
	cursor: pointer;
	display: none;
}
.pager-prev{
	left: 0;
	background-position: -89px 0;
}
.pager-prev:hover{background-position: -103px 0;}
.pager-prev:active{background-position: -117px 0;}
.pager-prev.unable,.pager-prev.unable:hover,.pager-prev.unable:active{
	background-position: -131px 0;
	cursor: default;
}
.pager-next{
	right: 0;
	background-position: -146px 0;
}
.pager-next:hover{background-position: -160px 0;}
.pager-next:active{background-position: -174px 0;}
.pager-next.unable,.pager-next.unable:hover,.pager-next.unable:active{
	background-position: -188px 0;
	cursor: default;
}
/* 右键菜单 */
.nav-rbtn, .face-rbtn, .importface .import-items{	
	background-color: #fff;
	border: #b2b2b2 solid 1px;
	box-shadow: 0 0 2px rgba(0,0,0,.1);
	z-index: 99;
	display: none;
}
.nav-rbtn{
	width: 68px;
	height: 84px;
	/*height: 104px;*/
}
.nav-rbtn p, .face-rbtn p, .importface p{
	/*height: 26px;
	line-height: 26px;*/
	height: 21px;
	line-height: 21px;
	text-align: center;
	cursor: pointer;
}
.nav-rbtn p:hover, .face-rbtn p:hover,  .importface p:hover{
	background-color: #228ee6;
	color: #ffffff;
}
.nav-rbtn p.unable, .face-rbtn p.unable,  .importface p.unable{
	color: #a8d1ee;
	cursor: default;
}
.nav-rbtn p.unable:hover,.face-rbtn p.unable:hover,.importface p.unable:hover{
	background-color: #fff;
}
.face-rbtn{
	width: 90px;
}
.face-rbtn p{
	/*height: 26px;
	line-height: 26px;*/
	height: 21px;
	line-height: 21px;
	text-indent: 10px;
	text-align: left;
}
.face-title{
	padding: 3px;
	background-color: #e7f2fa;
	box-shadow: 0 0 2px rgba(0,0,0,.2);
	border: #adbfce solid 1px;
	color: #7795ad;
	white-space:nowrap;
	display: none;
}
.group-title{
	max-width: 102px;
	text-align: center;
}
.face-web{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(255,255,255,.6);
}
/* wangyan19 增加更多入口 2013-12-05 */
.feel-more{
	line-height: 62px;
	color: #0C90F0;
	text-decoration: underline;
	cursor: pointer;
}