body{background: url('../img/web/ss_bg01.jpg');font-family: 'Tahoma';}
a{border: none;}
img{border:none;}
/* Header */
#header{background:url('../img/web/ss_main_h_bg.jpg');border:none;height:63px;position: absolute;width:100%;z-index: 3000;top:0px;}
.header_layout{position: relative;height: 63px;margin: 0px auto;width:1120px;padding: 1px 0px;}
/*.logo{background: url('../img/web/ss_broad_logo_china.png');position: absolute;z-index: 9001;left: -5px;height: 179px;width: 148px;margin: -1px 0px 0px 0px;}*/
.logo{background: url('../img/web/logo-2024.jpg');position: absolute;z-index: 9001;left: 0;height: 177px;width: 139px;margin: -1px 0px 0px 0px; background-size: contain;}
.bthowto{background: url('../img/web/ss_main_h_bt_how_to.png');height: 41px;width: 208px;}
.bthowto:hover{background-position: 0px -41px;}

.btprisoner{background: url('../img/web/ss_bt_prisoner.png');height: 35px;width: 126px;}
.btprisoner:hover{background-position: 0px -35px;}
/* Header Online */
.header_online{margin: 0px 0px 0px 2%;height: 63px;width: 980px;}
.header_noti{background: url('../img/web/ss_main_h_icon_noti.png');width:35px;height: 37px;margin: 15px 0px 0px 130px;float: left;cursor: pointer;}
.header_noti_panel_loading{background: #FFF;box-shadow: 3px 11px 15px #000;border-top: 1px solid #969696;padding: 5px 0px;border-right: 1px solid #969696;border-left: 1px solid #969696;}
.header_noti_panel_loading img{width: 20px;margin: 0px 0px 0px 135px;}
.header_noti:hover{background-position: 0px -37px;}
.header_noti.selected{background-position: 0px -37px;}
.header_noti_count{background: #F00;color: #FFF;padding: 2px;font-size: 11px;position: absolute;top: -10px;right: 0px;display: none;}

.header_pm{background: url('../img/web/ss_main_h_icon_pm.png');width:44px;height: 37px;margin: 15px 0px 0px 20px;float: left;cursor: pointer;}
.header_pm:hover{background-position: 0px -37px;}
.header_pm.selected{background-position: 0px -37px;}
.header_pm_panel_loading{background: #FFF;box-shadow: 3px 11px 15px #000;border-top: 1px solid #969696;padding: 5px 0px;border-right: 1px solid #969696;border-left: 1px solid #969696;}
.header_pm_panel_loading img{width: 20px;margin: 0px 0px 0px 135px;}
.header_logout{background: url('../img/web/ss_main_h_bt_login.png');height: 23px;width: 69px;color: #FFF;font-size: 13px;line-height: 1.6;cursor: pointer;font-weight: bold;text-align: center;margin: 20px 0px 0px 5px;float: right;}
.header_logout:hover{background-position: 0px -24px;color: #CCC;}

.header_user_name{float: right;margin: 10px 0px 0px 5px;padding: 9px;font-size: 20px;cursor: pointer;color: #fff;font-weight: bold;}
.header_user_name:hover{color: #f95b0b;}
.header_user_img{width: 40px;height: 40px;float: right;margin: 10px 0px 0px 0px;text-align: right;}
.header_user_img img{max-width: 40px;max-height: 40px;}


.header_noti_panel{width: 300px;position: absolute;top: 62px;left: 158px;z-index: 9999;display: none;box-shadow: 3px 11px 15px #000;}
.header_noti_panel_arrowtop{height: 25px;background: #FFF;position: relative;}
.header_noti_panel_arrowtop a{ font-size: 12px; }
.header_noti_panel_arrowtop a.newpm{ float: right; margin: 5px; }
.header_noti_panel_arrowtop a.all_read{ float: left; margin: 5px; }
.header_noti_panel_arrowtop img{position: absolute;top:-16px;left: -1px;}
.header_noti_panel_data{background: #FFF;max-height: 350px;overflow-y: overlay;}
.header_noti_panel_data a{background: #FFF;display: block;border-top: 1px solid #969696;border-left: 1px solid #969696;border-right: 1px solid #969696;text-decoration: none;}
.header_noti_panel_data a:hover{background: #CCC;}
.notiImg{width:50px; height: 50px;position: relative;margin: 5px;float: left;overflow: hidden;border: 1px solid #969696;}
.notiImg img{min-height: 50px;min-width: 50px;max-width: 50px;position: absolute;}
.notiDetail{float: left;width: 215px;margin: 5px 0px;}
.notiMessage{color:#000;font-size: 13px;min-height: 35px;word-break: break-word;width: 220px;}
.notiTime{color:#000;font-size: 13px;}
.header_noti_panel_allButton{background: #FFF;height: 25px;border: 1px solid #969696;}

.header_pm_panel{width: 300px;position: absolute;top: 59px;left: 220px;z-index: 9999;display: none;box-shadow: 3px 11px 15px #000;}
.header_pm_count{background: #F00;color: #FFF;padding: 2px;font-size: 11px;position: absolute;top: -10px;right: -4px;display: none;}
.header_pm_panel_data{background: #FFF;max-height: 350px;overflow-y: overlay;}
.header_pm_panel_data a{background: #FFF;display: block;border-top: 1px solid #969696;border-left: 1px solid #969696;border-right: 1px solid #969696;text-decoration: none;}
.header_pm_panel_data a:hover{background: #CCC;}
.header_pm_panel_allButton{background: #FFF;height: 25px;border: 1px solid #969696;}
.pmName{font-size: 12px;font-weight: bold;color: #000;}
.pmImg{width:50px; height: 50px;position: relative;margin: 5px;float: left;overflow: hidden;border: 1px solid #969696;}
.pmImg img{min-height: 50px;min-width: 50px;max-width: 50px;position: absolute;}
.pmDetail{ position: relative;float: left;width: 235px;margin: 5px 0px;}
.pmMessage{
    color:#000;
    font-size: 13px;
    /*min-height: 35px; 
    word-break: break-word;*/
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 150px;
}
.pmTime{position: absolute;color: #000;font-size: 13px;right: 0;top: 0;padding: 15px;}

/* Header Offline */
.header_offline{margin: 0px 0px 0px 2%;height: 63px;width: 980px;}
.header_label{color: #FFF;font-size: 12px;margin: 0px 0px 0px 1px;font-weight: bold;}
.header_input{background: url('../img/web/ss_main_h_box_text.png');height: 22px;width: 140px;}
.header_input input{border: none;margin: 0px 0px 0px 2px;width: 136px;}
.header_login{background: url('../img/web/ss_main_h_bt_login.png');height: 23px;width: 69px;color: #FFF;font-size: 13px;line-height: 1.6;cursor: pointer;font-weight: bold;text-align: center;margin: 15px 0px 0px 0px}
.header_login:hover{background-position: 0px -24px;color: #CCC;}
.header_register{background: url('../img/web/ss_main_h_bt_login.png');height: 23px;width: 69px;color: #FFF;font-size: 13px;line-height: 1.6;cursor: pointer;font-weight: bold;text-align: center;margin: 15px 0px 0px 5px}
.header_register:hover{background-position: 0px -24px;color: #CCC;}

.viewallpm{ color:#000;text-decoration: none;font-size: 13px;text-align: center;line-height: 2; position: absolute; bottom: -27px;
left: 0;
width: 100%; }

/* SHOUT */

.shoutPanel{background:  url('../img/web/ss_broad_tab_shouted.png');width:938px;height: 50px;margin: 0px 0px 11px 162px;position: relative;}

.shoutData{position: absolute;width: 864px;height: 33px;top: 7px;left: 7px;overflow: hidden;}
.shoutData a{color: #FFF;}
.shoutData a:hover{color: #fa7b00;}
.shoutItem{float: left;margin: 0px 15px;font-size: 12px;}


.shoutPanelAdmin{background:  url('../img/web/ss_broad_tab_shouted.png');width:938px;height: 50px;margin: 0px 0px 11px 162px;position: fixed;bottom: 0px;z-index: 9999;}
.shoutDataAdmin{position: absolute;width: 864px;height: 33px;top: 7px;left: 7px;overflow: hidden;}

.shoutItemAd{float: left;margin: 0px 15px;font-size: 25px;color: #FFF;}
/*FOOTER */

#footer{background: #454545;color: #FFF;position: relative;bottom: -63px;padding: 10px;}
.contentFooter{margin: 0px auto;width: 1120px;}
.contentFooter a{color: #FFF;text-decoration: none;font-size: 13px;}


/* 

Updated by Mongkon W. 
Time: 14/06/2017

*/

.container-1095{ width: 1095px; margin-left: 5px; }

.text-red{ color: #ff0000; } 
.text-green{ color: #0dad5b; }

.menu-blog:after{
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
}

/* SHOUT */
.shoutPanel{
    background-image: url(../img/web/icon/live-board.jpg);
    background-position: left center;
    background-repeat: no-repeat;
    width: 1095px;
    height: 50px;
    margin: 0 0 11px 5px;
    clear: both;
    background-color: #979797;
    border-radius: 3px;
    border-bottom: 2px solid #575757;

}
.shoutData{
    width: 1005px;
    background-color: #303030;
    left: inherit;
    right: 7px;
    height: 37px;
}
.shoutData:before{
    content: "";
    height: 5px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    background-color: #2d2d2d;
    box-shadow: 0px 4px 4px 0px #1c1c1c;
}
.shoutData a{
    color: #fc5353;
    margin: 10px 0 0;
}
.shoutItem br{ display: none; }
.shoutItem img{ vertical-align: middle; }

/* MENU BLOG */
.menu-blog{
    width: 100%;
    clear: both;
    margin: 0 0 10px 0;
}

.menu-blog ul{}
.menu-blog ul li{
    display: block;
    float: left;
    text-align: center;
    position: relative;

}
.menu-blog ul li a{
    display: block;
    color: #7e7e7e;
    border-left: 1px solid #e6e6e6;
    width: 125.5px;
    height: 65px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+81,ededed+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 81%, #ededed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 81%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#ffffff 81%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
    font-size: 13px;
    font-weight: bold;
    padding: 10px 15px 5px 15px;

}
.menu-blog ul li a:hover{ background: #ededed; }
.menu-blog ul li a span{
    display: block;
    text-align: center;
    clear: both;
}
.menu-blog ul li a span + span{}
.menu-blog ul li a span img{
    padding: 0 0 5px 0;
}

.menu-blog ul li.selected a{}

.menu-blog ul li.article a{
    background: #f5a623;
    color: #ffffff;
    border: 0;
}
.menu-blog ul li.article a:after{
    display: block;
    position: absolute;
    content: "";
    background: #eb9609;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
    
}
.menu-blog ul li.club a{

}
.menu-blog ul li.friend a{

}
.menu-blog ul li.gbp a{

}
.menu-blog ul li.board a{

}
.menu-blog ul li.feed a{

}
.menu-blog ul li.active a{
    background: #0dad5b;
    color: #ffffff;
    border: 0;
}

.menu-blog ul li.active a:after{
    display: block;
    position: absolute;
    content: "";
    background: #3c8c63;
    height: 2px;
    width: 100%;
    bottom: 0;
    left: 0;
}

/* breadcrumb */
.breadcrumb{
    width: 934px;
    margin-left: 20px;
    border: 1px solid #cfcfcf;
    background-color: #d8d8d8;
    border-radius: 3px;
    margin-bottom: 15px;
}
.breadcrumb ul{
    margin: 0;
    list-style: none;
    padding: 7px 30px;
}
.breadcrumb ul li{ display: inline-block; }
.breadcrumb ul li:after{
    content: ">";
    display: inline-block;
    padding: 0 5px;
}
.breadcrumb ul li:last-child:after{ content: ""; display: none; }
/* .breadcrumb ul li a{} */
.b-footer{
    box-shadow: 0px 4px 35px #888;
    padding: 0px 0px 27px;
    position: relative;
    top: 64px;
    width: 1044px;
    margin: 0px auto;
}