/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td,hr {font-family:"Microsoft Yahei";margin: 0px; padding: 0px;}
body{background:#fafafa;font-family:"Microsoft Yahei","Tahoma","Arial","Roboto","Droid Sans","Helvetica Neue"}
a:hover,a:visited,a:active,a:focus{text-decoration:none}

#wrapper{max-width:720px;margin:0 auto;position:relative}
#topbar{height:74px;border-bottom:1px solid #d3d3d3;background-color:#ffffff}
#logo{text-align:center;padding:12px 0}
#logo img{}
#topbar #user{padding:0}
#topbar #backWrap{padding:0}

/*#usrShortcut{margin-top:6px}*/
#usrShortcut i{font-size:46px;color:#b9b9b9;}
#usrShortcut img{width:58px;height:58px;border:1px solid #ccc;margin:8px 15px 0 0}
/**/
table#topTools{height:74px;width:100%;border-bottom:1px solid #d3d3d3;background-color:#ffffff}
table#topTools #backWrap{width:10%}
table#topTools #backWrap i{font-size:40px;padding-left:10px;color:#898989}
table#topTools #pageTitle{width:75%;font-size:32px;text-align:center}
table#topTools #topBtn{width:15%;text-align:right;padding:0 15px 0 0;font-size:24px;color:#337ab7}
table#topTools #topBtn button{font-size:24px;margin:0;padding:0;border:none;color:#337ab7}

.btn-nobg{background:transparent!important}
.headerBar{}
.headerBar h3{line-height:60px;padding-left:1.1em;font-size:24px}

.topToolFix{-webkit-position:fixed;
			-moz-position:fixed;
			-ms-position:fixed;
			-o-position:fixed;
			position:fixed;
			top:0px;
			max-width: 720px;
			width: 100%;
			z-index:99999}
/* .top_h{
	max-height:466px;
	height:100%;;
} */
.topToolFix #reletive{
	display:block;
	position: relative;
	width:100%;
	top:0;
	z-index:20;
}
.topToolFix #reletive:hover{
	cursor:pointer;
	background:#FAFAFA;
	transition:background 0.1s;
}
.cntFix{padding-top:74px;z-index:1}

.navgrid{background:#ffffff;margin-bottom:0px}
.navgrid td{text-align:center;color:#333333;border-color:#efefef!important}
.navgrid td a{color:#333333}
.navgrid td a:hover{text-decoration:none}
.navIcon{font-size:60px}

i.fc-clock{color:#fd6e5e}
i.fc-paper-plane-empty{color:#7db4ed;font-size:56px;}
i.fc-pitch{color:#a0d049}
i.fc-managebp{color:#fd6e5e}
i.fc-live-picture{color:#fb904a}
i.fc-add-live-picture{color:#e43333}
i.fc-aboutfc{color:#ec4e4f}
i.fc-friends{color:#7bd7c8}
i.fc-taspace{color:#f9914a}
i.fc-fcspace{color:#469df4}

i.fc-watch{color:#fb9049}
i.fc-addpicture{color:#e43333}
i.fc-sharepicture{color:#ed4e4e}

.navlst{
     border:1px solid #efefef;
     background:#ffffff;
}

.navlst div{border-color:#efefef!important;padding:10px 0}
.navlst div i{font-size:22px;padding-left:0.5em;color:#8b8b8b}
.navlst div a{font-size:20px;color:#333333}
.navlst .second{border-left:1px solid #efefef!important}

.devicelst{margin-bottom:0}
.devicelst li{
	border-left:none;
    border-right:none;
}
.devicelst li:last-child {
    margin-bottom: 0;
    
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.devicelst li:first-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

/*����ͼƬ����ҳ��*/
.msgboxWrap{padding:15px}
.msgboxWrap textarea{padding:3px;border-bottom:1px solid #cdcdcd;width:100%;border-top:none;border-left:none;border-right:none;max-height:100px;min-height:28px;height:28px;font-size:14px;line-height:28px;word-wrap: break-word;word-wrap: break-word;outline:0;background:transparent}
.friendsCtl{border-bottom:1px solid #e3e3e3;font-size:24px;padding:0 15px}
.friendsCtl label{font-weight:normal}

.friendlst .onefriend{}
.friendlst div.onefriend>p>img{max-width:100%}
.friendlst>.col-xs-3,.friendlst>.col-md-3{
	padding:10px 5px 0px 5px;text-align:center;
}
.onefriend span{font-size:18px;line-height:38px;color:#777;
   display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.onefriend p{position:relative;text-align: -webkit-center!important;}


span.chkflag{position:absolute;background:#525252;font-size:22px;line-height:34px;right:4px;bottom:4px;color:#ffffff;display:inline-block;width:32px;height:32px;border-radius:16px}
/**ͼƬ����ҳ��flagλ��**/
.onefriend p span.chkflag{right:24px;bottom:4px;}


#uploader{position:fixed;bottom:0px;width:100%;max-width:720px}
#uploader .col-xs-3,#uploader .col-md-3{padding:12px;position:relative}
#uploader .col-xs-3>img,#uploader .col-md-3>img{max-width:100%}

#uploader .delImgBtn{position:absolute;background:#3c4669;font-size:22px;right:16px;top:16px;color:#ffffff;display:inline-block;width:32px;height:32px;border-radius:16px;border:1px solid #ffffff;}
#uploader .delImgBtn i:before{vertical-align:top;margin-top:5px;}

#filePicker{text-align:center}
.webuploader-container {
	position: relative;
}
.webuploader-element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
	position: relative;
	display: inline-block;
	cursor: pointer;
	/*background: #00b7ee;*/
	padding: 0px;
	color: #fff;
	text-align: center;
	border-radius: 0px;
	overflow: hidden;
	margin:0 auto;
	vertical-align:middle;
	text-align:center;
}
.webuploader-pick i.fc-add{
	color:#cdcdcd;font-size:106px
}
 
.webuploader-pick-hover {
/*	background: #00a2d4;
*/}

.webuploader-pick-disable {
	opacity: 0.6;
	pointer-events:none;
}
 .switch
 {
	 display:inline-block;
	 width: 62px;
	 height: 31px;
	 background: #E5E5E5;
	 z-index: 0;
	 margin: 0;
	 padding: 0;
	 appearance: none;
	 border: none;
	 cursor: pointer;
	 position: relative;
	 border-radius:16px; /*IE 11*/
	 -moz-border-radius:16px; /*Mozilla*/
	 -webkit-border-radius:16px; /*Chrome and Safari*/
 }
 .switch:before
 {
	 content: ' ';
	 position: absolute;
	 left: 1px;
	 top: 1px;
	 width: 60px;
	 height: 29px;
	 background: #FFFFFF;
	 z-index: 1;
	 border-radius:15px; /*IE 11*/
	 -moz-border-radius:15px; /*Mozilla*/
	 -webkit-border-radius:15px; /*Chrome and Safari*/
 }
 .switch:after 
 {
	 content: ' ';
	 height: 29px;
	 width: 29px;
	 border-radius: 29px;
	 background: #FFFFFF;
	 position: absolute;
	 z-index: 2;
	 top: 1px;
	 left: 1px;
	 -webkit-transition-duration: 300ms;
	 transition-duration: 300ms;
	 -webkit-box-shadow: 0 2px 5px #999999;
	 box-shadow: 0 2px 4px #999999;
 }
 .switchOn, .switchOn:before
 {
 	background: #4cd964 !important;
 }
 .switchOn:after
 {
 	left: 32px !important;
 }
/**/
.headRow{height:54px;background-color:#ffffff;border-bottom:1px solid #dedede;font-size:24px;color:#333;line-height:54px}
.headRow a,headRow span{line-height:54px;color:#333333}

/*��������ʽ�Զ���*/
.layui-m-layerchild{width:260px!important}
.layui-m-layercont{padding:30px 20px!important}

@media(max-width: 425px) {
	#topbar{max-height:44px;border-bottom:1px solid #d3d3d3;}
	#logo{padding:7px 0}
	#logo img{height:30px;}
	#topbar #usrShortcut{margin-top:6px}
	#usrShortcut i{font-size:28px;line-height:30px;}
	#usrShortcut img{height:32px;width:32px;margin:0px 5px 0 0}
	.top_h{
		max-height:272px;
		height:100%;
	}

	.navIcon{font-size:36px}
	.navgrid td h4{font-size:15px}

	i.fc-paper-plane-empty{font-size:34px;}

	.headRow{height:34px;font-size:16px;line-height:1.0em}
	.headRow span,.headRow a{font-size:16px;display:inline-block;line-height:1.0em;margin-top:10px}
	.headRow a i{margin:0;padding:0;font-style:normal}

	/**/
	.headerBar{padding:0;}
	.headerBar h3{line-height:34px!important;margin:0!important;font-size:18px;}

	.navlst div i{font-size:18px}
	.navlst div a{font-size:16px;}


	table#topTools{height:40px}
	table#topTools #backWrap i{font-size:26px;padding-left:6px}
	.cntFix{padding-top:40px}
	#pageTitle{text-align:center;font-size:20px!important;}
	#topBtn{text-align:right;padding:0 10px 0 0}
	table#topTools #topBtn button,table#topTools #topBtn a{font-size:16px;line-height:36px;}

	.friendsCtl{font-size:16px}
	.friendlst>.col-xs-3,.friendlst>.col-md-3{
		padding:8px 5px 0px 5px;text-align:center;
	}
	.onefriend span{font-size:14px;line-height:32px}
	span.chkflag{width:24px;height:24px;border-radius:12px;font-size:16px;right:4px;line-height:24px;}
	.onefriend p span.chkflag{right:4px;bottom:4px;}

	#uploader .col-xs-3,#uploader .col-md-3{padding:8px}

	#uploader .delImgBtn{font-size:16px;line-height:24px!important;right:12px;top:12px;color:#ffffff;display:inline-block;width:24px;height:24px;border-radius:12px;}
	#uploader .delImgBtn i:before{vertical-align:top;margin-top:4px;}
	
	.webuploader-pick i.fc-add{font-size:58px}
}
@media(max-width: 375px) {
	.top_h{
		max-height:272px;
		height:100%;
	}
	.webuploader-pick i.fc-add{font-size:50px}
	table#topTools #topBtn button,table#topTools #topBtn a{font-size:15px;line-height:36px;}
}
@media(max-width: 360px) {
	.top_h{
		max-height:272px;
		height:100%;
	}
	.webuploader-pick i.fc-add{font-size:48px}
	table#topTools #topBtn button,table#topTools #topBtn a{font-size:14px;line-height:36px;}
}

@media(max-width: 320px) {
	.top_h{
		max-height:272px;
		height:100%;
	}
	#topbar #user{margin-left:-5px}
	#uploader .col-xs-3,#uploader .col-md-3{padding:7px}
	.webuploader-pick i.fc-add{font-size:42px}
	table#topTools #topBtn button,table#topTools #topBtn a{font-size:13px;line-height:36px;}
	
}