@charset "UTF-8";
/* 基本樣式設定 */
body{
  font-family: Arial, Helvetica,"Hiragino Sans GB","Microsoft yahei","黑體","微軟正黑體",sans-serif;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
  background-color: #e0e0e0;
  background: url(../images/bg.gif) repeat-x #e3e3e3;
  background: url(../images/bg.gif) repeat-x #cccccc;
}

*, 
*:before, 
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

span {
  display: inline-block;
  *display: inline;
}
a {
  color: #333333;
  text-decoration: none;      
}
a.blue{color: #006ecc;}
a:hover,
a:focus {
  cursor:pointer;
  color: #088199;
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6{
  margin: 0;
  font-family: inherit;
  line-height: 1em;
  color: inherit;
  font-weight: inherit;
}


h1,.h1 {font-size: 36px;}
h2,.h2 {font-size: 20px;}
h3,.h3 {font-size: 20px;}
h4,.h4 {font-size: 16px;}
h5,.h5 {font-size: 13px;}
h6,.h6 {font-size: 11px;}
.p14{font-size: 14px;}

.gray{color: #777777;}
.dark_pink{color:#c2185b;}
.pink{color: #088199;}
.pink_b{color: #e91e63; font-weight: bold;}
.warning{}

img{  border: 0;vertical-align: middle;}
.img-circle {
  -webkit-border-radius: 500px;
     -moz-border-radius: 500px;
          border-radius: 500px;
  border: 1px solid #e5e5e5;
}


textarea,
.input,
.input_comment {
  margin:0px 5px 0px 0px;
  border: 1px solid #808080;
  background: #fff;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px; 
}


.btn {
  box-shadow: 0px 1px 0px 0px #00404d;
  background-color: #088199;
  border-radius:2px;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  line-height: 20px;
  font-size: 12px;
  text-decoration:none;
  vertical-align: middle;
  border: 0;
}
.btn:hover {  background-color:#00404d;}
.btn:active {
  position:relative;
  top:1px;
}

.btn_b{
  box-shadow: 0px 2px 0px 0px #00404d;
  font-size:16px;
  line-height: 25px;
  text-shadow:0px 1px 1px #00404d;
}

.btn_gray{
  background-color: #4d4d4d;
  box-shadow: 0px 1px 0px 0px #4d4d4d;
  border-radius:2px;
  color:#ffffff;
  box-shadow: none;
}
.btn_gray:hover{background-color: #333333;}


/* 版面樣式設定 */
#wrapper {  
  width: 940px;
  margin: 0 auto;
  text-align: center;
}

#head{}
.main_list {  
  color: #ffffff;
  font-size: 18px;  
}
.main_list a{
  display: block;
  padding: 0 15px;
  line-height: 40px;
  color: #ffffff;
  text-decoration: none;
}
.main_list a.on,
.main_list a:hover,
.main_list a:focus {
  color: #ffffff;
  background-color: #00404d;
  background-color: #00404d;
  text-shadow: none;
}

.app_btn{
  font-family: inherit;
  color:#fff;
  line-height: 16px;
}

.title{
  color: #088199;
  font-weight: bold;
  letter-spacing:0.15em;
}
.right_list{ margin: 10px auto;box-shadow: 0 0 2px #ccc;}
.right_list .title{
  padding: 7px 5px;
  text-align: left;
  color: #ffffff; 
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #005566;
  font-weight: normal;
  border-bottom: 1px solid #cccccc;
}
.right_list tr td{ background-color: #ffffff;border-bottom: 1px solid #cccccc;}
.right_list tr td.text{padding: 0 3px;}
.right_list tr td:first-child{ color: #ffffff;background-color:#008099;font-weight: bold;}
.right_list tr:nth-child(odd) td:first-child{background-color: #005566;}

.connent_btn{
  display:inline-block;
  background-image: url(../images/connent_btn_bg.gif);
  background-repeat: repeat-x;
}
.connent_btn td{vertical-align: middle;}
.connent_btn a{color: #4c4c4c;}
.connent_btn a:hover,
.connent_btn a:focus{color: #1a1a1a;}
.connent_btn td.none{background-color: #ffffff;}
.connent_btn td.connent_btn_e:hover, 
.connent_btn .on{
  background-image: url(../images/connent_btn_onbg.gif);
  background-repeat: repeat-x;
}


.bpinkline{
  background-image: url(../images/bottom_deco.gif);
  background-position: bottom;
  background-repeat: repeat-x;
}
.main_left_menu:after,
.main_left_menu_btn:after,{
  content:"";
  display: block;
  clear: both;
}
.main_left_menu{font-size: 14px;padding: 5px 10px;color: #088199;border-bottom: 1px dotted #088199;}
.main_left_menu_btn{margin: 0;padding: 0; list-style: none;}
.main_left_menu a{ padding: 4px 5px; border-radius: 4px;}
.main_left_menu a:hover,
.main_left_menu a.on{ 
  background-color: #088199;
  color: #ffffff;}
.main_left_menu .level{float: right}
.main_left_menu .level a{padding: 3px 5px 3px 25px;background-position:5px center;background-repeat: no-repeat;}
.main_left_menu .level a.ordinary{background-image:url(../images/ordinary.gif);}
.main_left_menu .level a.caution{background-image:url(../images/caution.gif);}
.main_left_menu .level a.rated{background-image:url(../images/rated.gif);}
.main_left_menu li{float: left;line-height: 30px;margin-left:4px;}
.search{
  float: right;
  margin-top: 0px;
  padding: 0;
  border: 1px solid #82878c;
  height: 24px;
  overflow: hidden;
  background-color: #ffffff;
}
.search input{
  float: left;
  padding: 4px;
  border: 0;
  outline: none;
  vertical-align: top;
}
.search .host_text{
  width: 150px;
  background: url('../images/search.png') no-repeat 4px 4px;
  padding-left: 20px;
  outline: none;
  -webkit-appearance: textfield;
}
.search .btn{
  height: 24px;
  padding: 4px 8px 5px!important;
  margin: 0;
  border-radius: 0;
  color: #ffffff;
  background-color: #82878c;
  border: 0;
}
.search .btn:hover{background-color: #706d73}

/*FAQ*/
.top_list{
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.top_list a li{
  font-size: 13px;
  color: #4c4c4c;
  line-height: 40px;
}
.top_list li{
  display: inline-block;
  line-height: 40px;
  margin-right: 17px;
  zoom: 1;
  *display: inline;
}
.top_list a li.on,.top_list a li:hover,.top_list a li:focus{color: #1a1a1a;}

.bpinkline,.top_list a li.on,.top_list a li:hover{
  background-image: url(../images/bottom_deco.gif);
  background-position: bottom;
  background-repeat: repeat-x;
}

.content_wbg{background-color: #ffffff;}

/*主播列表樣式*/
.host_row{margin: 8px auto;width: 720px;padding-bottom: 10px;border-bottom: 1px solid #cccccc;}
.host_e{
  width: 137px;
  *width: 135px;
  margin:0px auto; 
  padding: 0;
  border: 1px solid #ffffff;
  list-style: none;
}
.host_e li{margin: 0;text-align: left; }
.host_photo{position: relative;box-shadow: 0 0 1px #999; }
.mode{
  width: 135px;
  position: absolute;
  bottom: 0;
  z-index: 2;
  margin: 0; 
  text-align: center;
}
.host_name{
  text-align: left; 
  padding: 3px 0px 2px;
  font-size: 14px;
  word-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
}
.host_name a{ color: #000000;}
.host_pay{font-size: 11px;color: #757575;}
.host_pay .pay1{color:#6800b3;font-weight: bold;}
.host_pay .pay2{color:#cc0047;font-weight: bold;}
.host_mode{}
/*在線狀態*/
.host_e .online,.host_e .act,.host_e .busy,.host_e .rest{
  color: #ffffff;
  padding:3px 0px;
  border-radius: 0px;
  box-shadow:none;
  text-shadow: 0 0px 1px #222222;
}
.online{background-color: #00592d; background-color: rgba(0, 90, 45, 0.75);}
.online:hover{background-color: #00592d;}
.act{background-color: #5a148c;background-color: rgba(89, 20, 138, 0.75);}
.act:hover{background-color: #5a148c;}
.busy{background-color: #b31212;background-color: rgba(179, 18, 18, 0.75);}
.busy:hover{background-color: #b31212;}
.rest{background-color: #808080;background-color: rgba(128, 128, 128, 0.75);}
.rest:hover{background-color: #808080;}

.host_e .b_online,.host_e .b_act,.host_e .b_busy,.host_e .b_rest{
  width: 100%;
}
.b_online,.b_act,.b_busy,.b_rest{
  margin-top: 5px;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
  background-color: #ffffff;
}
.b_online{border: 1px solid #008015; color: #008015;}
.b_online:hover{background-color: #008015;color: #ffffff;}
.b_act{border: 1px solid #5a148c;color: #5a148c;}
.b_act:hover{background-color: #5a148c;color: #ffffff;}

.b_busy{border: 1px solid #b31212;background-color: #b31212;color: #ffffff;}
.b_busy:hover{border: 1px solid #8c0e0e;background-color: #8c0e0e;color: #ffffff;}
.b_rest{border: 1px solid #808080;color: #808080;background-color: }
.b_rest:hover{background-color: #cccccc;color: #444444;}



.min_l_list a{color: #ffffff;}
.min_l_list .on,
.min_l_list a:hover{color: #ffffff;}
.min_l_list tr .on,
.min_l_list a tr:hover{background-color: #00404d;color: #ffffff;}


.pic_b img{
  padding: 4px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.pic_s img{
  width: 104px;
  height: 104px;
  padding: 2px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.host_info td{
  height: 38px;
  text-align: left;
}
.dotted{  border-bottom: 1px dotted #b2b2b2;}
.part{border-right: 1px solid #d9d9d9}
.host_grade{
  color: #e91e63;
  font-size: 50px;
  font-weight: bold;
  line-height: 1.75em;
}
.host_grade:first-letter{font-size: 100px;}

.faq_comment,
.host_comment{ text-align: left;}
.faq_comment{line-height: 22px}
.faq_comment .message,
.host_comment .message{border-bottom: 1px solid #ffe5ef;}
.faq_comment .BG_pink,
.host_comment .BG_pink{background-color: #fff7fa;}

.vedio > thead>tr>td,
.record > thead>tr>td,
.host_record > thead>tr>td{border-bottom: 2px solid #f48fb1;color:#e91e63;font-size: 14px;}
.record > tbody>tr>td,
.host_record > tbody>tr>td{border-bottom: 1px solid #e6e6e6;color:#4c4c4c;line-height: 22px}
.vedio > tbody>tr>td{border-bottom: 1px solid #e6e6e6;color:#4c4c4c;line-height: 16px;padding: 2px}
.record > tbody >tr:hover,
.vedio > tbody >tr:hover,
.host_record > tbody >tr:hover{background-color: #fff2f5;}

.member_table >thead>tr > td{background-color: #088199;color:#ffffff;font-size: 14px;}
.member_table >tbody>tr > td{border-top: 1px dotted #b2b2b2;}

#footer{
  padding: 10px 10px 20px 10px;
  color: #f2f2f2;
  background-color: #006073;
  background-color: #005566;
}