//布局
html, body, .wrapper, .sidebar, #right_wrapper, #right_top_wrapper
  height 100%

//聊天室
#candy
  height: 0;
  width: 100%;
  border: none;
  display: block;
.show_candy #wrapper
  padding-bottom 207px
.show_candy #candy
  margin-top -207px
  height: 207px
#candy_wrapper
  position relative
.show_candy #hide_candy
  position: absolute
  color: lightgray;
  right: 0;
  top: 0;
  display block
#hide_candy
  display none
.show_roster .main_wrapper
  padding-right 200px
#roster_wrapper
  padding-bottom: 30px;
#show_candy_wrapper
  background: #444;
  height: 30px;
  display block
.show_candy #show_candy_wrapper
  display none
#show_candy
  color: lightgrey
  float: right;
.main
  height 100%
  overflow-y auto

#roster_aside
  width: 0
  height: 100%;
  float: right;
  margin-left -200px
  border-right: none;
  padding-bottom: 64px;
  display none
.show_roster #roster_aside
  width: 200px;
  display block
.show_candy #roster_aside
  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, #user_info, #user_info *
  -webkit-app-region no-drag

//导航栏

#user_info
  position relative

#avatar
  max-height 34px
  position: absolute;
  right: 20px;
  top: 8px;
#notification
  position: absolute;
  right: 15px;
  top: 4px;

#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;

//应用列表
.nav-sidebar > .active > a:hover {
  background-color: royalblue;
}


//游戏内容区域
.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 240px
.bootstrap-switch
  float right
  margin 10px 20px 0 0

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

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

.achievement
  margin-right:4px;
  margin-bottom:8px;
.achievement.locked
  -webkit-filter:grayscale(100%)



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

#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;
}

//modal
.modal
  overflow-y: auto;


//登录
#signin {
  background-color: #eee;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#footer
  position: absolute;
  bottom: 0;
  height: 35px;
  width: 100%;
  border-top: 1px solid #e5e5e5;
  overflow: hidden;
  background-color white
 .footer
    padding: 0 44px;
    padding-top: 7px;
    font-size: .85em;
    white-space: nowrap;
    ul
      float: left;
      max-width: 80%;
      padding: 0;
      li
        color: #737373;
        display: inline;
        padding: 0;
        padding-right: 1.5em;
    .lang-chooser
      font-size: 13px;
      height: 24px;
      line-height: 24px;
    a
     color: #737373;
    .lang-chooser-wrap
      float: right;
      display: inline;

