//布局
html, body, #wrapper, .sidebar, #right_wrapper, #right_top_wrapper
  height 100%
#right_top_wrapper
  padding-bottom 207px
#candy
  margin-top -207px
.main_wrapper
  padding-right 200px
.main
  height 100%
  overflow-y auto


#roster_aside
  margin-left -200px
  float: right;
  width: 200px;
  height: 100%;
  /*border: 1px solid #dddddd;*/
  border-right: none;
  padding-bottom: 34px;

body
  //border 1px solid black
//拖动
body
  -webkit-app-region drag
a, button, input, span, p, li, td, th, h1, h2, h3, h4, h5, h6, iframe, .bootstrap-switch, .main
  -webkit-app-region no-drag

//导航栏
#avatar
  max-height 34px

#username
  margin 0 5px 0 5px
  color lightgray

#window_controls
  position absolute
  top 0
  right 0
.window-control > img:hover {
  background: lightgray;
}
.window-control > img:active {
  background: blue;
}
.navbar > .container
  padding-right: 85px;

//游戏内容区域
.main_wrapper
  //background linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.2), rgba(255,255,255,0.2), rgba(255,255,255,0.2), rgba(255,255,255,0.9)), url(../apps/th135/readme/images/th13.5_XQL_OP.jpg)
  float left
  width 100%
  height 100%
//#cloud_popover
//  float right
//  display inline
.cloud
  margin-top 6px
#cloud_wrapper
  width 220px
.bootstrap-switch
  float right
  margin 10px 20px 0 0

.friend
  width: 48px
.friend.active
  border-color lightskyblue;

.achievement_image
  width: 72px;
  margin-right 12px

//聊天室
#candy {
  height: 207px;
  width: 100%;
  border: none;
  display: block;
}

//好友列表
#roster_aside {
  float: right;
  width: 200px;
  height: 100%;
  /*border: 1px solid #dddddd;*/
  border-right: none;
  padding-bottom: 34px;
}

#roster_aside ul {
  background: #ffffff;
  overflow-y: hidden;
  /*height: calc(100% - 34px);*/
  height: 100%;
  border: 1px solid #dddddd;
  border-top: none;
  margin-bottom: 0;
}

#roster_aside ul:hover {
  overflow-y: auto;
}

#roster_aside ul li {
  border-bottom: 1px solid #dddddd;
  padding: 8px 8px;
  height: 48px;
  overflow: hidden;
}

#roster_aside ul li.online_botttom {
  /*background: url(/assets/images/rooms/gradual_change.png) repeat-x;*/
  height: 10px;
  bottom: 0;
  position: fixed;
  width: 160px;
  padding: 0 8px;
  border: none;
}

#roster_aside ul li img {
  height: 32px;
  width: 32px;
  float: left;
}

#roster_aside ul li span {
  line-height: 32px;
  font-size: 12px;
  padding: 0 0 0 10px;
  float: left;
}

#roster_aside ul li:hover {
  background: #eeeeee;
  color: #3366cc;
}

#roster_title {
  /*height: 20px;*/
  /*background: #f9f9f9;
  width: 200px;
  font-size: 14px;
  line-height: 16px;
  padding: 10px 10px;
  color: #147CC3;*/
}

#roster_title .btn, #roster_title .form-control {
  border-radius: 0;
}

#roster_title .btn {
  border-right: none;
}