/*************/
#side-bar{-webkit-transition:-webkit-transform .3s cubic-bezier(0.35,0.25,0.35,0);-moz-transition:-moz-transform .3s cubic-bezier(0.35,0.25,0.35,0);transition:transform .3s cubic-bezier(0.35,0.25,0.35,0)}
#main-area{-webkit-transition:-webkit-transform .3s cubic-bezier(0.35,0.25,0.35,0);-moz-transition:-moz-transform .3s cubic-bezier(0.35,0.25,0.35,0);transition:transform .3s cubic-bezier(0.35,0.25,0.35,0)}
/*************/
#side-bar{display:block;position:fixed;width:230px;left:0;top:0;bottom:0;min-height:100%;overflow:hidden;color:#444;background-color:#F7F7F7;-webkit-box-shadow:3px 0 4px rgba(50,50,50,0);-moz-box-shadow:3px 0 4px rgba(50,50,50,0);box-shadow:3px 0 4px rgba(50,50,50,0);z-index:100;-webkit-transform:translateX(-230px);-moz-transform:translateX(-230px);-ms-transform:translateX(-230px);-o-transform:translateX(-230px);transform:translateX(-230px)}
.menu-expanded #side-bar{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);transform:translateX(0px)}
#side-bar.show{-webkit-box-shadow:3px 0 4px rgba(50,50,50,0.2);-moz-box-shadow:3px 0 4px rgba(50,50,50,0.2);box-shadow:3px 0 4px rgba(50,50,50,0.2);-webkit-overflow-scrolling:touch;overflow-y:scroll}

#side-bar div.side-bar-container{height:100%;position:relative;}
#side-bar div.side-bar-container .side-bar-content{position:absolute;top:50px;bottom:0;left:0;right:0;overflow:auto;padding-bottom:100px;}
#side-bar div.side-bar-container .side-bar-content::-webkit-scrollbar-track{border-radius: 1px;background-color: transparent;}
#side-bar div.side-bar-container .side-bar-content::-webkit-scrollbar{height:0px;width: 0px;background-color: transparent;}
#side-bar div.side-bar-container .side-bar-content::-webkit-scrollbar-thumb{border-radius: 1px;background-color: transparent;}

#side-bar .side-bar-separator {background-color: #E4E1E3;color: #000;padding: 1px;}

/*** Item ***/
#side-bar .group-item {display: block;position: relative;font-size: 0.8em;}
#side-bar .group-item a {position: relative;display: block;height: 50px;padding: 15px 20px;border-bottom: none;background: transparent;font-size: 15px;line-height: 24px;text-indent: 0px;text-decoration: none;text-shadow: none;color: #333;cursor: pointer;z-index: 1;}
#side-bar .group-item a {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#side-bar .group-item .group-title {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#side-bar .group-item-large .group-title {padding:0;line-height:55px;}
/*-------------------------------------------*/

/*** Search Box ***/
#side-bar div#search-box{-webkit-box-shadow:3px 0 4px rgba(50,50,50,0.3);-moz-box-shadow:3px 0 4px rgba(50,50,50,0.3);box-shadow:3px 0 4px rgba(50,50,50,0.3);background:#999;position:relative;height:50px}
#side-bar div#search-box #search-field{display:block;width:175px;height:26px;position:absolute;left:10px;top:9px;padding-top:4px;padding-left:30px;border:0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background-color:#FFF;background-image:url(../images/sidebar-item-search.png);background-size:25px 25px;background-position:2px 2px;background-repeat:no-repeat;color:#666;line-height:26px}
#side-bar div#search-box #search-field{padding:3px 5px 3px 30px;height:26px;line-height:normal;box-sizing:content-box;background-position:2px 3px;left:12px;}
#side-bar div#search-box #search-btn{display:block;height:50px;width:50px;position:absolute;right:0;top:0;text-indent:-999px;overflow:hidden}
/*-------------------------------------------*/

/*** User Panel ***/
#side-bar div.user .side-bar-login{background:#FF7815!important}
.side-bar-login-btn{display:block;background-color:#FF7815;-webkit-border-radius:20px;moz-border-radius:20px;border-radius:20px;border:1px solid #fff;width:90px;height:25px;position:relative;top:20%;left:20%;color:#fff;line-height:25px;font-size:15px;text-indent:0;text-align:center;font-weight:400;text-decoration:none}
.side-bar-register-btn{display:block;background-color:#fff;-webkit-border-radius:20px;moz-border-radius:20px;border-radius:20px;border:1px solid #FF7500;width:90px;height:25px;position:relative;top:20%;left:20%;color:#FF7815;line-height:25px;font-size:15px;text-indent:0;text-align:center;font-weight:400}
.side-bar-login-btn a,.side-bar-register-btn a{text-decoration:none}
#side-bar .side-bar-container .side-bar-content{top:0!important}
#side-bar div.side-bar-icon{background-image:url(../images/sidebar-icon_beta.png)!important}

#side-bar div.user .side-bar-card{display: block;width: 230px;height: 91px;position: relative;top: 0px;background-color:#FF7815;}
#side-bar div.user .side-bar-card .user-image-field-menu{display: inline-block;margin: auto;width: 230px;height: 50px;}
#side-bar div.user .side-bar-card .user-image-field-menu-circular {display: inline-block;width: 40px;height: 40px;border-radius: 40px;-webkit-border-radius: 40px;-moz-border-radius: 40px;background-position: center;background-size: cover;border: 1px solid #fff;margin-left: 20px;margin-top: 5px;background-color: #fff;}
#side-bar div.user .side-bar-card .user-image-field-menu-name {display: inline-block;width: 150px;height: 40px;color: #fff;font-size: 15px;line-height: 20px;position: absolute;top: 18%;padding-left: 5px;}
#side-bar div.user .side-bar-card .side-bar-my-btn {display: block;background: url(../images/side_bar_my.png) no-repeat 6px center;background-size: 24px 24px;background-color: #FF7815;border-radius: 20px;moz-border-radius: 20px;-webkit-border-radius: 20px;border: 1px solid #ffffff;width: 85px;height: 27px;position: relative;margin-top: 5px;left: 18%;color: #ffffff;line-height: 27px;font-size: 14px;text-indent: 0;text-align: center;font-weight: normal;padding-left: 13px;}
#side-bar div.user .side-bar-card .side-bar-pm-btn {display: block;background: url(../images/side_bar_pm.png) no-repeat 6px center;background-size: 24px 24px;background-color: #fff;border-radius: 20px;moz-border-radius: 20px;-webkit-border-radius: 20px;border: 1px solid #FF7815;width: 85px;height: 27px;position: relative;margin-top: 5px;left: 18%;color: #ffffff;line-height: 27px;font-size: 14px;text-indent: 0;text-align: center;font-weight: normal;padding-left: 20px;}
#side-bar div.user .side-bar-card .side-bar-im-btn {display: block;background: url(/images/chat/chatroom_icon_orange.png) no-repeat 6px center;background-size: 18px 18px;background-color: #fff;border-radius: 20px;moz-border-radius: 20px;-webkit-border-radius: 20px;border: 1px solid #FF7815;width: 85px;height: 27px;position: relative;margin-top: 5px;left: 18%;color: #ffffff;line-height: 27px;font-size: 14px;text-indent: 0;text-align: center;font-weight: normal;padding-left: 20px;}
#side-bar div.user .side-bar-card .side-bar-im-btn #top-menu-btn-chat-num { position: absolute; border-radius: 50%; width: 21px; height: 21px; font-size: 12px; line-height: 10px; padding: 5px; margin-top: -8px; }

#side-bar div.user .side-bar-block{padding:0 10px;}
#side-bar div.user .side-bar-block a:first-child{border-top:1px solid #EAEAEA;}

#side-bar div.user .side-bar-login{position:relative;height:90px;background:#FF7500 url(../images/login-img.png) left center no-repeat;background-size:auto 90px ;}
#side-bar div.user .side-bar-login a.btn-login{position:absolute;cursor:pointer;right:20px;top:7px;width:70px;display:inline-block;padding: 5px 10px;background:#143C5A;height:25px;line-height:27px;text-align:center;border-radius:6px;color:#FFF;border:none;text-decoration:none;}
#side-bar div.user .side-bar-login a.btn-login:hover{background:#0A2E44;}
#side-bar div.user .side-bar-login a.btn-register{position:absolute;cursor:pointer;right:20px;top:48px;width:70px;display:inline-block;padding: 5px 10px;background:#143C5A;height:25px;line-height:27px;text-align:center;border-radius:6px;color:#FFF;border:none;text-decoration:none;}
#side-bar div.user .side-bar-login a.btn-register:hover{background:#0A2E44;}

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

#side-bar div.side-bar-block{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;overflow:hidden;}
#side-bar div.side-bar-block a{background:#FFF; /* Old browsers */color:#444;position:relative;display:block;height:50px;line-height:55px;text-indent:0px;font-size:1.1em;text-decoration:none;text-shadow:none;border-bottom: none;}
#side-bar div.side-bar-block a{background:transparent;}
#side-bar div.side-bar-block a:hover{background:#EFEFEF;box-shadow:none;}
.side-bar-block.dropdown{height:50px}
.side-bar-block.dropdown .group-link{padding-left:50px;padding-top:18px;color:#000;font-size:15px}
#side-bar div.side-bar-block .group-link{display:block!important;position:relative!important;font-size:.8em;width:auto!important;background:#fff!important;border-radius:none;border:none;margin:0}
#side-bar div.side-bar-block .group-link{display:inline-block;width:110px;margin:5px 0 5px 5px;position:relative;background:#EFEFEF;border-radius:none;border:none;font-size:0.8em;}
#side-bar div.side-bar-block .group-link a{text-shadow:none;line-height:40px;padding:0;text-indent: 7px;background:transparent;display:inline-block;border:none;height:40px;white-space: nowrap; font-size:15px;}
#side-bar div.side-bar-block .group-link a:hover{background-color: #DADADA; /* Old browsers */}
#side-bar div.side-bar-block .group-link a:first-child{width:80px;overflow:hidden;text-overflow: ellipsis;}
#side-bar div.side-bar-block .group-link a.side-bar-btn-close{width:30px;height:40px;position:absolute;right:0;top:0;background:url('../images/sidebar-item-close.png') center center no-repeat;background-size:auto 30px;}
#side-bar div.side-bar-block .group-link .left,#side-bar div.side-bar-block .group-link .right{background-image:url(../images/gid_icon.png);background-size:250px 400px;background-repeat:no-repeat;font-size:.8em}
#side-bar div.side-bar-block .left,#side-bar div.side-bar-block .right{display:block;position:absolute;height:50px;width:50px;overflow:hidden;left:0;top:0;z-index:1}
#side-bar div.side-bar-block .left,#side-bar div.side-bar-block .right{background-image:url(../images/icon_side_bar_2016.png);background-size:50px 400px;background-repeat:no-repeat}
#side-bar div.side-bar-block .group-title{margin-right: 35px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

#side-bar div.side-bar-title{background-color:#E4E1E3!important;color:#000!important;}
#side-bar div.side-bar-title{padding:10px 10px 5px;background-color:transparent;color:#444;font-size:0.9em;line-height:100%;}

#side-bar div.board .side-bar-block{padding:0 10px;}
#side-bar div.board .side-bar-block a:first-child{border-top:1px solid #EAEAEA;}

#side-bar div.recent{padding:0;}
#side-bar div.recent div.side-bar-block{padding-left:2px;}
#side-bar div.recent .group-item{margin-left:10px;}

/*** Icon ***/
#side-bar div.side-bar-icon{margin:0 8px 0 5px;display:inline-block;vertical-align:top;width:50px;height:50px;background-image:url('../images/sidebar-icon_beta.png');background-size:50px 500px;background-repeat:no-repeat;}
#side-bar div.side-bar-icon.star{background-position:0 0;}
#side-bar div.side-bar-icon.pm{background-position:0 -50px;}
#side-bar div.side-bar-icon.pm.new{background-position:0 -100px;}
#side-bar div.side-bar-icon.logout{background-position:0 -150px;}
#side-bar div.side-bar-icon.game{background-position:0 -200px;}
#side-bar div.side-bar-icon.others{background-position:0 -250px;}
#side-bar div.side-bar-icon.news{background-position:0 -300px;}
#side-bar div.side-bar-icon.prereg{background-position:0 -350px;}
#side-bar div.side-bar-icon.uwantstv{background-position:0 -400px;}
#side-bar div.side-bar-icon.wiki{background-position:0 -450px;}

#side-bar .side-bar-block .group-link .side-bar-group-icon-1{background-position:0 0}
#side-bar .side-bar-block .group-link .side-bar-group-icon-2{background-position:0 -50px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-274{background-position:0 -100px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-630{background-position:0 -150px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-14{background-position:0 -200px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-255{background-position:0 -250px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-978{background-position:0 -300px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-620{background-position:0 -350px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-484{background-position:-100px 0}
#side-bar .side-bar-block .group-link .side-bar-group-icon-974{background-position:-100px -50px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-618{background-position:-100px -100px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-977{background-position:-100px -150px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-1179{background-position:-100px -200px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-622{background-position:-100px -250px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-980{background-position:-100px -300px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-628{background-position:-100px -350px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-982{background-position:-200px 0}
#side-bar .side-bar-block .group-link .side-bar-group-icon-266{background-position:-200px -50px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-356{background-position:-200px -100px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-6{background-position:-200px -150px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-719{background-position:-200px -200px}
#side-bar .side-bar-block .group-link .side-bar-group-icon-31{background-position:-200px -250px}

#side-bar .side-bar-block .group-link .left.side-bar-group-icon-thematicpage{
	background-image:url(../images/special_fid_icon_active.png);
	background-size: 25px 25px;
  background-position: 15px 10px;
}
/*-------------------------------------------*/

/*** Icon2 ***/
#side-bar div.side-bar-block .group-link-grey {
    display: block;
    position: relative;
	margin-left: 10px;
	font-size: 0.8em;
}

#side-bar div.side-bar-block .group-link-grey span{
	margin-left:50px;
}

#side-bar div.side-bar-block .group-link-grey .side-bar-group-icon-logout {
    background-position: 0 -150px;
	width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: top;
    background-image: url(../images/sidebar-icon_beta.png);
    background-size: 50px 550px;
    background-repeat: no-repeat;
}

#side-bar div.side-bar-block .group-link-grey .side-bar-group-icon-desktop {
    background-position: 0 -500px;
	width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: top;
    background-image: url(../images/sidebar-icon_beta.png);
    background-size: 50px 550px;
    background-repeat: no-repeat;
}
/*-------------------------------------------*/

/*** Bookmark ***/
#side-bar div.side-bar-block .group-link .mygid{
	background-image: url(../images/fav_on.png);
    background-size: 50px 50px;
	background-position: 0 -2px;
    background-repeat: no-repeat;
    font-size: 0.8em;
	display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    overflow: hidden;
    left: 0px;
    top: 0px;
    z-index: 1;
}

#side-bar div.group-item-removable{}
#side-bar div.group-item-removable .group-title{margin-right: 35px;}

#side-bar div.group-item-removable .side-bar-group-icon-delete-grey{background-image: url(../images/close.png);background-size: 20px 20px;background-repeat: no-repeat;background-position: center center;}
#side-bar div.group-item-removable .right{right: 0px;left: auto;display: block;position: absolute;height: 50px;width: 50px;overflow: hidden;top: 0px;z-index: 1;}

#side-bar div.group-rm-on .group-title{margin-right: 95px;margin-left: -45px;}
#side-bar div.group-rm-on .side-bar-group-icon-delete-grey{display: none;}
#side-bar div.group-rm-on .group-rm-box{display: block;}

#side-bar div.group-rm-box{display: none;}
#side-bar div.group-rm-box .group-rm-icon {padding: 5px;margin: 10px 5px;text-align: center;color: #fff;height: 30px;width: 40px;line-height: 22px;border-radius: 5px;}
#side-bar div.group-rm-box .group-rm-icon.group-rm-icon-cancel{background-color: #999;right:45px;}
#side-bar div.group-rm-box .group-rm-icon.group-rm-icon-confirm{background-color: #dd5803;right:0px;}
/*-------------------------------------------*/