@charset "utf-8";
/* CSS Document */

html,body {
    position: relative;
    width:100%;
    overflow-x: hidden;
}

.header {
    position: relative;
    height: 48px;
    line-height: 48px;
    background: #47576e;
    box-shadow: 0 2px 5px rgba(0,0,0,0.23);
    text-align: center;
    font-size: 24px;
    color: #fff;
}

.header .logo {
    position: relative;
    display: block;
    margin: 0 auto;
    height:35px; top: 6px;
}
.header .icon{ position:absolute; top:10px;}
.header .icon.menu{ left:14px;}
.header .icon.back{ left:14px;}
.header .icon.search{ right:14px; }




#main-left,#main-right {
    position: absolute;
    top: 0; 
	bottom: 0;
    display: none;
    background:#4b4b4b;
}
#main-right {
    width: 85%;
    right: 0;
}
#main-center {
    position: relative; z-index:1;
    min-height: 100%;
	background:#34465e;
	background:#ccc;
	-webkit-transition: left 600ms;	
}
#main-center.roll-right { left: 100px;}
#main-center.roll-left { left: -85%;}

#addll img{ width:24px;}

#main-left {
    width:100px;
	box-sizing:border-box;
	overflow:hidden; 
        text-align: center;
	background: #4b4b4b; 
	background: -moz-linear-gradient(left,  #4b4b4b 0%, #4b4b4b 95%, #222222 100%); 
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4b4b4b), color-stop(95%,#4b4b4b), color-stop(100%,#222222)); 
	background: -webkit-linear-gradient(left,  #4b4b4b 0%,#4b4b4b 95%,#222222 100%); 
	background: -o-linear-gradient(left,  #4b4b4b 0%,#4b4b4b 95%,#222222 100%); 
	background: -ms-linear-gradient(left,  #4b4b4b 0%,#4b4b4b 95%,#222222 100%);
	background: linear-gradient(to right,  #4b4b4b 0%,#4b4b4b 95%,#222222 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#222222',GradientType=1 ); 
}

#main-left ul li{ 
    box-sizing:border-box; 
	color:#FFF; 
	width:100px;
	/* height:100px; jsȡֵ*/
	position:relative;
}
#main-left ul li a{
	display:block;
	text-align:center;
	width:100%; 
	height:100%; 
    font-size:14px;
    box-sizing:border-box;
	border-bottom:1px solid #333333;
	box-shadow:0 1px 1px #5d5d5d;
	/* padding-top:22px;  jsȡֵ*/
	color:#FFF; 
}

#main-left ul li a.current{
	color:#4387da;
	background: #434343; 
	background: -moz-linear-gradient(left,  #434343 0%, #434343 95%, #232323 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#434343), color-stop(95%,#434343), color-stop(100%,#232323)); 
	background: -webkit-linear-gradient(left,  #434343 0%,#434343 90%,#232323 100%); 
	background: -o-linear-gradient(left,  #434343 0%,#434343 95%,#232323 100%); 
	background: -ms-linear-gradient(left,  #434343 0%,#434343 95%,#232323 100%);
	background: linear-gradient(to right,  #434343 0%,#434343 95%,#232323 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#232323',GradientType=1 ); 
}
#main-left ul li:last-of-type a{ background: rgba(0,0,0,0.1);}

#main-left ul li a.current span.menu-left-icon.home{ background-position:0 -32px;}
#main-left ul li a.current span.menu-left-icon.news{ background-position:-32px -32px;}
#main-left ul li a.current span.menu-left-icon.looks{ background-position:-64px -32px;}
#main-left ul li a.current span.menu-left-icon.share{ background-position:-96px -32px;}
#main-left ul li a.current span.menu-left-icon.collect{ background-position:-128px -32px;}
#main-left ul li a.current span.menu-left-icon.setup{ background-position:-160px -32px;}
#main-left ul li a span.menu-left-icon{ 
   display:block; 
   margin:0 auto ;
}


#main-right a,#main-right input{ color:#FFF;}

#main-right .hot-labels .label {
	font-size: 1.2em;
	font-style: italic;
	color: rgba(255,255,255,1);
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	padding: 0.2em 0.4em;
	margin: 0.5em 0.5em 0.5em 0;
}
#main-right .searchBox {
	padding: 0.7em 1em;
	border-bottom:1px solid #4f4f4f;
    box-sizing: border-box;
	height:48px; 
	background:#414141; 
	box-shadow:0 2px 5px rgba(0,0,0,0.3);
}
#main-right .searchBox > div{ 
   height:100%;
   background:#4b4a4a; 
   padding:0 1em;
   border-radius:10px;
   text-align:right;
   position:relative;
   border:1px solid #5c5c5c;
   box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
   
}
#main-right .searchBox input{ 
  font-size:1.1em; 
  position:absolute; left:1em; top:3px; 
  width:80%; height:75%; 
  background:transparent; 
  border:0;
}
#main-right .searchBox .icon.search{ margin-right:-5px;}

#main-right .sosoface {
    margin: 1em auto;
    width: 90%;
}
#main-right .hot-labels {
    text-align: left;
    width: 95%;
    margin: 0 auto;
}
#main-right p.title{
    text-align: left;
	font-size: 1.2em;
	font-style: italic;
	font-weight:700;
	color: rgba(255,255,255,1);
	white-space: nowrap;
	overflow: hidden;
	padding: 0.2em 0.4em;
    margin: 0.5em auto;
}
#main-right .hot-labels p {
    text-align: left;
}
.icon{ 
    background:url(../images/iconN.png) no-repeat; 
	display:inline-block;
	background-size:auto 110px;
	width:27px; height:27px;
}
.icon.menu{ background-position:0 0;}
.icon.search{ background-position:-27px 0;}
.icon.back{ background-position:-216px 0;}
.icon.play{ 
   background-position:0 -49px; 
   width:17px; 
   height:17px;
}
.icon.shejiaoquan{ height:22px; background-position:0 -27px;}
.icon.fenxiang{ height:22px; background-position:-27px -27px;}
.icon.caozuo{ height:22px; background-position:-54px -27px;}
.icon.home{ height:22px; background-position:-81px -27px;}
.icon.latest-news{ height:22px; background-position:-108px -27px;}
.icon.casual-look{ height:22px; background-position:-135px -27px;}
.icon.feixiang{ height:22px; background-position:-162px -27px;}
.icon.my-favorites{ height:22px; background-position:-189px -27px;}
.icon.setup{ height:22px; background-position:-216px -27px;}

.icon.daxiao{ background-position:-54px 0;}
.icon.liulei{ background-position:-81px 0;}
.icon.nanguo{ background-position:-108px 0;}
.icon.huaxin{ background-position:-135px 0;}
.icon.chijing{ background-position:-162px 0;}
.icon.nu{ background-position:-189px 0;}

.menu-left-icon{ 
    background:url(../images/menu-left.png) no-repeat;
	display:inline-block;
	background-size:auto 64px;
	width:32px; height:32px;
}
.menu-left-icon.home{ background-position:0 0; }
.menu-left-icon.news{ background-position:-32px 0 ; }
.menu-left-icon.looks{ background-position:-64px 0 ; }
.menu-left-icon.share{ background-position:-96px 0 ; }
.menu-left-icon.collect{ background-position:-128px 0 ; }
.menu-left-icon.setup{ background-position:-160px 0 ; }

.menu-left-icon.home.current{ background-position:0 -32px; }
.menu-left-icon.news.current{ background-position:-32px -32px; }
.menu-left-icon.looks.current{ background-position:-64px -32px; }
.menu-left-icon.share.current{ background-position:-96px -32px; }
.menu-left-icon.collect.current{ background-position:-128px -32px; }
.menu-left-icon.setup.current{ background-position:-160px -32px; }

.menu-left-icon.share{ position:relative;}

.share-badge {
	font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; 
	position:absolute;
	font-size:12px;
	font-style:normal;
	font-weight:600;
	letter-spacing:0px;
	right:-4px;
	top:-4px;
	color:#FFF; 
	display:block;
	width:18px; 
	height:18px;
	line-height:18px;
	border-radius:18px;
	background:#c90103;
}
#header .touchme {
    position: absolute;
    display: block; 
    top: 0; bottom: 0;
    width: 60px;
}
#header .touchme:first-of-type {
    left:0;
}
#header .touchme:last-of-type {
    right: 0
}
#happy-new-year{ 
    display: block;
  position:absolute; right:46px;
    background:url(../images/happ-new-year.png) no-repeat center center;
      background-size:auto 36px;
        width:46px; height:48px;
	}