/*-------------------------------------------

    Title :  2015
    Usage :  member pages
    Edited:  2016-07-24s

---------------------------------------------

    1. left column
       1.1. image box
    2. center column
       2.1. comments
    3. right column
       3.1. related
       3.2. sponsor
       3.3. popular
    4. responsive layout (736px)

---------------------------------------------*/



/*  1. left column
---------------------------------------------*/


/*  1.1. image box
---------------------------------------------*/

.img-box {
	margin-top: 11px;
	overflow: hidden;
	background: #cccac9;
	border-radius: 5px;
	}

.img-box .header {
	position: relative;
	padding: 0 12px;
	height: 35px;
	background: #fff;
	}

.img-box .header h3 {
	color: #34ccbf;
	font-weight: 500;
	font-size: 14px;
	line-height: 37px;
	}

.img-box .header h3 small {
	margin-left: 5px;
	color: #606060;
	font-family: Arial, sans-serif;
	letter-spacing: 0;
	}

.img-box .header > a {
	position: absolute;
	top: 5px;
	right: 20px;
	text-decoration: none;
	}

.img-box .header > a:before {
	content: "\f105";
	color: #999;
	font: 24px/1 "Font Awesome", sans-serif;
	}

.img-box ul {
	padding: 5px 0 7px 7px;
	}

.img-box ul li {
	float: left;
	margin: 2px 2px 0 0;
	width: 72px;
	height: 72px;
	}

.img-box ul li.featured {
	float: none;
	width: 220px;
	height: 148px;
	}

.img-box ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #85827f;
	border-radius: 1px;
	}

.img-box ul li a img {
	width: 100%;
	height: 100%;
	}

.img-box ul:after {
	content: "";
	clear: both;
	display: block;
	}


#user #main {
	margin-bottom: 0;
	padding: 0px 0px 50px;
}


/*  2. center column
---------------------------------------------*/

#main .center-col {
	float: left;
	margin: 12px 0 20px 20px;
	width: 785px;
	}
	

.primaryContainer {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
}

#container-body {
    float: none;
    height: 1300px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 0;
    margin-top: 0px;
    margin-left: auto;
    clear: none;
    margin-right: auto;
    border-radius: 5px;
	behavior: url(js/PIE.htc);
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/*  2.1 left 
---------------------------------------------*/

.left-menu{
	float: left;
	margin: 12px 0 20px 15px;
	width: 195px;
	position:relative;
	min-height: 1000px;
	}

#small_pt_icon {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    color: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 22;
    margin-top: 69px;
    margin-left: 20px;
    clear: none;
}

#lmenu-pointconvert {
    float: left;
    font-size: 1.6052em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(73, 79, 78);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
    margin-top: 74px;
    margin-left: 60px;
    clear: none;
}

#lmenu-pointconvert.active{
	color: rgb(244, 121, 32);
}

#small_coin_icon {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    color: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 21;
    margin-top: 142px;
    margin-left: 20px;
    clear: none;
}


#lmenu-topupymd {
    float: left;
    font-size: 1.6052em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(73, 79, 78);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    margin-top: 149px;
    margin-left: 60px;
    clear: none;
}

#lmenu-topupymd.active{
	color: rgb(244, 121, 32);
}

#small_vip_icon {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    color: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 20;
    margin-top: 216px;
    margin-left: 20px;
    clear: none;
}

#lmenu-upgradevip {
    float: left;
    font-size: 1.6052em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(73, 79, 78);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 14;
    margin-top: 226px;
    margin-left: 60px;
    clear: none;
}

#lmenu-upgradevip.active{
	color: rgb(244, 121, 32);
}

#small_rank_icon {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    color: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 19;
    margin-top: 294px;
    margin-left: 20px;
    clear: none;
}


#lmenu-rankretrieve {
    float: left;
    font-size: 1.6052em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(73, 79, 78);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 15;
    margin-top: 302px;
    margin-left: 60px;
    clear: none;
}

#lmenu-rankretrieve.active{
	color: rgb(244, 121, 32);
}

#small_record_icon {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    color: rgb(0, 0, 0);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    margin-top: 380px;
    margin-left: 27px;
    clear: none;
}


#lmenu-record {
    float: left;
    font-size: 1.6052em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(73, 79, 78);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
     margin-top: 386px;
    margin-left: 60px;
    clear: none;
}

#lmenu-record.active{
	color: rgb(244, 121, 32);
}


#lmenu-pointconvert a:hover,
#lmenu-topupymd a:hover,
#lmenu-upgradevip a:hover,
#lmenu-rankretrieve a:hover,
#lmenu-record a:hover{
	color: rgb(244, 121, 32);
	text-decoration: none;
}


#middle_line {
    float: left;
    height: 98%;
    width: 0.3%;
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: rgb(255, 112, 22);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 24;
    margin-top: 12px;
    margin-left: 0%;
    clear: none;
}


.right-body{
	float: right;
	margin: 12px 0 20px 0px;
	width: 560px;
	position:relative;
	min-height: 1000px;
	}
	

/*  4. member bannner  */
#member-banner {
    float: left;
    width: 98%;
    height: 150px;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 7;
    background-image:url("../images/banner.png");
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-top: 0;
    margin-left: 0;
    clear: none;
    overflow: visible;
    display: block;
}

#member-banner-icon {
    float: left;
    width: auto;
    max-width: 100%;
    height: auto;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 23;
    margin-top: 24px;
    margin-left: 6.53789%;
    clear: none;
}

#banner-title {
    float: left;
    font-size: 2.975em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(255, 255, 255);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 17;
    margin-top: 48px;
    margin-left: 3.71471%;
    clear: none;
}


#banner-desc {
    float: left;
    font-size: 1.70em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    color: rgb(249, 216, 196);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 18;
    margin-top: 89px;
    margin-left: -22%;
    clear: none;
}

#body-desc{
    float: left;
    font-size: 1.4375em;
    width: 98%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 28px;
    color: rgb(73, 79, 78);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 16;
    margin-top: 10px;
    margin-left: 0;
    clear: none;
}

#body-desc a{
	color: #ff7800;
}

#line {
    float: left;
    width: 85%;
    height: 45px;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 2;
    margin-top: 20px;
    margin-left: 8%;
    clear: none;
    background-image:url("../images/line.png");
    background-attachment: scroll;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-position: 0% 0%;
    background-repeat: repeat repeat;
}


#line-text{
    float: left;
    font-size: 1.8em;
    width: 190px;
    height: auto;
    text-align: center;
    font-weight: normal;
    line-height: 1em;
    color: rgb(255, 112, 13);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position:absolute;
    top: 0px;
    left: 0px;
    z-index: 4;
    margin-top: 16px;
    margin-left: 30.5%;
    clear: none;
}

#line1 {
    float: left;
    width: 85%;
    height: 45px;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 3;
    background-image:url("../images/line.png");
    -webkit-background-size: 100%;
    background-size: 100%;
    margin-top: 30px;
    margin-left: 8%;
    clear: none;
}


#line1-text{
    float: left;
    font-size: 1.8em;
    width: 190px;
    height: auto;
    text-align: center;
    font-weight: normal;
    line-height: 1em;
    color: rgb(255, 112, 13);
    font-style: normal;
    letter-spacing: normal;
    text-decoration: none;
    font-family: 'Microsoft YaHei UI';
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 5;
    margin-top: 17px;
    margin-left: 30.5%;
    clear: none;
}


/*  3. right column
---------------------------------------------*/

#main .right-col {
	float: right;
	margin: 12px 20px 20px 0;
	width: 160px;
	}



/*  3.1. related
---------------------------------------------*/

#related {
	position: relative;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#related h3 {
	position: relative;
	padding: 14px 14px 10px;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	border-bottom: 1px solid #d4d4d4;
	}

#related h3 a {
	position: absolute;
	top: 14px;
	right: 15px;
	cursor: pointer;
	text-decoration: none;
	-moz-transform: rotate(0.1deg);
	}

#related h3 a:before {
	content: "\f01e";
	color: #919191;
	font: 12px/1 "Font Awesome";
	}

#related ul {
	padding: 2px 0;
	}

#related ul li a {
	position: relative;
	display: block;
	padding: 8px 0 8px 66px;
	min-height: 58px;
	text-decoration: none;
	}

.ie8 #related ul li a {
	min-height: 38px;
	}

#related ul li a img {
	position: absolute;
	top: 8px;
	left: 14px;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	}

#related ul li a strong {
	display: block;
	padding-top: 5px;
	font-weight: 300;
	font-size: 12px;
	}

#related ul li a span {
	display: block;
	margin-top: 4px;
	color: #b2b2b2;
	font-size: 12px;
	}



/*  3.2. sponsor
---------------------------------------------*/

#main .right-col .sponsor {
	padding-bottom: 0;
	border-radius: 5px 5px 0 0;
	}

#main .right-col .sponsor .banner {
	margin: 0 -12px;
	padding-top: 11px;
	}

#main .right-col .sponsor .banner + .banner {
	background: #e6e2e1;
	}



/*  3.3. popular
---------------------------------------------*/

#topic {
	position: relative;
	margin-top: 11px;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#topic h3 {
	position: relative;
	padding: 14px 14px 10px;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	border-bottom: 1px solid #d4d4d4;
	}

#topic h3 a {
	position: absolute;
	top: 14px;
	right: 15px;
	cursor: pointer;
	text-decoration: none;
	-moz-transform: rotate(0.1deg);
	}

#topic h3 a:before {
	content: "\f01e";
	color: #919191;
	font: 12px/1 "Font Awesome";
	}

#topic ul {
	padding: 2px 2px 10px 10px;
	font-size: 0;
	}

#topic ul li {
	display: inline-block;
	margin: 8px 8px 0 0;
	}

#topic ul li a {
	display: inline-block;
	padding: 2px 3px 3px;
	padding-top: -moz-calc(3px);
	cursor: pointer;
	color: #656565;
	font-weight: 300;
	font-size: 12px;
	text-decoration: none;
	border: 1px solid #a9a9a9;
	border-radius: 3px;
	}

#topic ul li a:hover {
	color: #fff;
	background: #ff7502;
	border-color: #ff7502;
	}



/*  3.4. trending
---------------------------------------------*/

#trending {
	position: relative;
	margin-top: 11px;
	background: #fff;
	border-radius: 5px;
	behavior: url(js/PIE.htc);
	}

#trending.top {
	margin-top: 0px;
}

#trending h3 {
	position: relative;
	padding: 14px 14px 0;
	color: #ff7800;
	font-weight: 300;
	font-size: 14px;
	}

#trending h3 span {
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 2px solid #ff7800;
	}

#trending h3 small {
	margin-left: 4px;
	color: #909190;
	font-size: 12px;
	}

#trending h3 a {
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
	text-decoration: none;
	-moz-transform: rotate(0.1deg);
	}

#trending h3 a:before {
	content: "\f01e";
	color: #919191;
	font: 12px/1 "Font Awesome";
	}

#trending ul {
	margin: -2px 15px -4px;
	padding-top: 4px;
	border-top: 2px solid #e9e9e9;
	}

#trending ul li {
	position: relative;
	padding: 7px 0;
	font-size: 13px;
	height: 40px;
	border-bottom: 1px solid #e9e9e9;
	
	}
	
#trending ul li.last{
	border-bottom: 0px;
}

#trending ul li a {
	display: inline-block;
	vertical-align: top;
	max-width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 22px;
	}

#trending ul li small {
	position: absolute;
	top: 7px;
	right: 0;
	color: #606060;
	}

#trending ul li .rankorder{
	display: inline-block;
	vertical-align: top;
	line-height: 22px;
}

#trending ul li a.rankicon img{
	width: 20px;
	margin-left: 3px;
}

#trending ul li a.rankicon img.large{
	width: 30px;
	margin-left: 3px;
}

.right-footer {
	margin-top: 10px;
	padding: 12px 0 9px;
	text-align: center;
	border-top: 1px solid #636061;
	}

.right-footer a {
	color: #ff7900;
	font-weight: 400;
	font-size: 12px;
	text-decoration: none;
	}

.right-footer a:after {
	content: "\f105";
	position: relative;
	top: -2px;
	vertical-align: middle;
	margin-left: 3px;
	font: 18px/1 "Font Awesome", sans-serif;
	}


#banner.notlogin{
	height: 0px;
}



/*  4. responsive layout (736px)
---------------------------------------------*/

@media screen and (max-width: 736px) {

/*  1. left column  */


.left-menu{
	display: none;
	}
	
#middle_line{
	display: none;
}

#lmenu-pointconvert{
	display: none;
}

#lmenu-topupymd{
	display: none;
}

#lmenu-upgradevip{
	display: none;
}

#lmenu-rankretrieve{
	display: none;	
}

#small_pt_icon{
	display: none;	
}

#small_coin_icon{
	display: none;	
}

#small_vip_icon{
	display: none;
}

#small_rank_icon{
	display: none;
}

/*  2. center column  */

#main .center-col {
	float: none;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-bottom: 8px;
	width: auto;
	}
	
.primaryContainer{
	margin-top: 10px;
	}
	
#container-body {
    height: 1200px;
}

.right-body{
	margin: 0px 0 20px 0px;
	width: 320px;
}	

#banner-title {
    float: left;
    width: auto;
    height: auto;
    text-align: left;
    top: 0px;
    left: 0px;
    z-index: 17;
    margin-top: 35px;
    margin-left: 20px;
    clear: none;
}

#body-desc{
	padding: 0px 10px;
	}
	
#line {
    float: none;
    width: 100%;
    height: 35px;
    color: rgb(0, 0, 0);
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 2;
    margin-top: 180px;
    margin-left: 0px;
    margin-right: 0px;
}
	

#line-text {
	width: 125px;
	font-size: 1.6em;
    margin-top: 10px;
	margin-left: 30.5%;
}

#line1 {
    float: none;
    width: 100%;
    height: 35px;
    position: relative;
    margin-top: 200px;
    margin-left: 0px;
    clear: none;
}

#line1-text {
	width: 125px;
    font-size: 1.6em;
    margin-top: 10px;
	margin-left: 30.5%;
}	
	
/*  3. right column  */

#main .right-col {
	display: none;
	}


/*  4. member bannner  */
#member-banner{
	float: none;
	width: 100%;
	margin-left: 0;
	height: 200px;
	}


#banner.notlogin{
	height: 0px;
}

body:not(.grid) #banner.notlogin{
	height: 0px;
}

}