/* reset begin */

html, body, div, span, applet, object, iframe, h1, h2,

h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,

address, big, cite, code, del, dfn, em, img, ins, kbd,

q, s, samp, small, strike, strong, sub, sup, tt, var,

b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form,

label, legend, table, caption, tbody, tfoot, thead,

tr, th, td, article, aside, canvas, details, embed,

figure, figcaption, footer, header, menu, nav, output,

ruby, section, summary, time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font: inherit;

    vertical-align: baseline;

}



article, aside, details, figcaption, figure,

footer, header, menu, nav, section {

    display: block;

}



ol, ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



blockquote, q {

    quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

}



a {

    text-decoration: none;

}



img {

    max-width: 100%;

}



body {

    font-family: "Microsoft YaHei New", "Microsoft YaHei", "微软雅黑",

    "KaiTi", "楷体", STKaiti, "华文楷体",

    "FangSong", "仿宋", STFangSong, "华文仿宋",

    Arial, Helvetica,

    serif, sans-serif, cursive, fantasy, monospace;

    /*font-family: Arial, Helvetica, sans-serif;*/

    /*font-weight:100%;*/

    /*background-color: #006600;*/

    /*background-color: #87CEFA;*/

    background-color: #d0ecfd;

}



table {

    border-collapse: collapse;

    border-spacing: 0;

    table-layout: fixed;

}



/* reset ending */



.wrap {

    width: 100%;

    margin: 0 auto;

}



/* text align right */

.txt-rt {

    text-align: right;

}



/* text align left */

.txt-lt {

    text-align: left;

}



/* text align center */

.txt-center {

    text-align: center;

}



/* float right */

.float-rt {

    float: right;

}



/* float left */

.float-lt {

    float: left;

}



/* clear float */

.clear {

    clear: both;

}



/* Position Relative */

.pos-relative {

    position: relative;

}



/* Position Absolute */

.pos-absolute {

    position: absolute;

}



/* vertical align baseline */

.vertical-base {

    vertical-align: baseline;

}



/* vertical align top */

.vertical-top {

    vertical-align: top;

}



/* Add 5px bottom padding and a underline */

.underline {

    padding-bottom: 5px;

    border-bottom: 1px solid #eee;

    margin: 0 0 20px 0;

}



/* gray color begin */



.gray-color-0 {

    color: #DCDCDC;

}



.gray-color-1 {

    color: #D3D3D3;

}



.gray-color-2 {

    color: #C0C0C0;

}



.gray-color-3 {

    color: #A9A9A9;

}



.gray-color-4 {

    color: #808080;

}



.gray-color-5 {

    color: #696969;

}



.gray-color-6 {

    color: #778899;

}



.gray-color-7 {

    color: #708090;

}



.gray-color-8 {

    color: #2F4F4F;

}



.gray-color-9 {

    color: #000000;

}



/* gray color ending */



/* ================================== below self ================================== */



.doNothingClass {



}



.noneChineseText {

    /*font-family:serif, sans-serif, cursive;*/

    font-family: Courier, Monaco, monospace;

}



.smallText {

    font-size: 12px;

}



.tableHeadTextMargin {

    margin:0 3px;

}



.tableMargin {

    /*margin: 0 3px;*/



}



.tbl9px {

    border: 1px solid #808080;

    text-align: center;

    /*margin: 0 auto;*/

    min-width: 9px;

    /*font-size: 0.8125em;*/

    color: #707070;

    /*font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;*/

    line-height: 9px;

    vertical-align: middle;

    overflow: hidden;

}





.tbl7px {

    border: 1px solid #808080;

    text-align: center;

    /*margin: 0 auto;*/

    min-width: 7px;

    /*font-size: 0.8125em;*/

    color: #707070;

    /*font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;*/

    line-height: 7px;

    vertical-align: middle;

    overflow: hidden;

}







.tbl5px {

    border: 1px solid #808080;

    text-align: center;

    /*margin: 0 auto;*/

    min-width: 5px;

    /*font-size: 0.8125em;*/

    color: #707070;

    /*font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;*/

    line-height: 5px;

    vertical-align: middle;

    overflow: hidden;

}





.tableBoard {

    border: 2px solid black;

    padding: 1px;

    width: 361px;

    margin: 0 3px;

}



/* too small, not use */

.tableBoardfor5 {

    border: 2px solid black;

    padding: 1px;

    width: 362px;

    margin: 0 3px;

}



.newline {

    margin-top: 3px;

}





.bankerwin {

    border: 5px solid red;

    border-radius: 20px;

    height: 20px;

    width: 20px;

    z-index: 6;

    /*position: relative;*/

}



.circle3333 {

    width: 5px;

    height: 5px;

    /*-moz-border-radius: 100%;*/

    -webkit-border-radius: 100%;

    border-radius: 100%;

    background: blue;

    z-index: 3;

    /*position: relative;*/

}



.playerwin {

    border: 1px solid blue;

    border-radius: 8px;

    height: 8px;

    width: 8px;

    color: blue;

}



div.circlein9 {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 0px #f00;

    width: 7px;

    margin: auto;

    height: 7px;

    background: blue;

}



div.blue-dot-7px {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 0px #f00;

    width: 7px;

    margin: auto;

    height: 7px;

    background: blue;

}



div.yellow-dot-7px {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 0px #f00;

    width: 7px;

    margin: auto;

    height: 7px;

    background: #bda630;

}



div.green-dot-7px {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 0px #f00;

    width: 7px;

    margin: auto;

    height: 7px;

    background: #008e09;

}



div.red-dot-7px {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 0px #f00;

    width: 7px;

    margin: auto;

    height: 7px;

    background: red;

}



div.gold-dot-7px {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 0px #f00;

    width: 7px;

    margin: auto;

    height: 7px;

    background: #bb0069;

}





div.dark-dot-7px {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 0px #f00;

    width: 7px;

    margin: auto;

    height: 7px;

    background: #191500;

}



div.red-dot-7px-1t {

    /*-moz-border-radius: 7px/7px;*/

    -webkit-border-radius: 7px 7px;

    border-radius: 7px/7px;

    border: solid 2px green;

    width: 3px;

    margin: auto;

    height: 3px;

    background: red;

}



div.red-dot-5px {

     /*-moz-border-radius: 5px/5px;*/

     -webkit-border-radius: 5px 5px;

     border-radius: 5px/5px;

     border: solid 0px #f00;

     width: 5px;

     margin: auto;

     height: 5px;

     background: red;

 }



div.blue-dot-5px {

    /*-moz-border-radius: 5px/5px;*/

    -webkit-border-radius: 5px 5px;

    border-radius: 5px/5px;

    border: solid 0px blue;

    width: 5px;

    margin: auto;

    height: 5px;

    background: blue;

}







div.red-dot-3px {

    /*-moz-border-radius: 3px/3px;*/

    -webkit-border-radius: 3px 3px;

    border-radius: 3px/3px;

    border: solid 0px #f00;

    width: 3px;

    margin: auto;

    height: 3px;

    background: red;

}



div.blue-dot-3px {

    /*-moz-border-radius: 3px/3px;*/

    -webkit-border-radius: 3px 3px;

    border-radius: 3px/3px;

    border: solid 0px blue;

    width: 3px;

    margin: auto;

    height: 3px;

    background: blue;

}



div.yellow-dot-3px {

    /*-moz-border-radius: 3px/3px;*/

    -webkit-border-radius: 3px 3px;

    border-radius: 3px/3px;

    border: solid 0px blue;

    width: 3px;

    margin: auto;

    height: 3px;

    background: #bda630;

}





.moon-red-9px {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    box-shadow: 1px 1px 0 0 red;

    /*padding: 1px;*/

}



/* this is beautiful */

.triangle-bottomright-red-7px {

    width: 0;

    height: 0;

    border-bottom: 7px solid red;

    border-left: 7px solid transparent;

    margin-left: 1px;

}





.triangle-bottomright-blue-7px {

    width: 0;

    height: 0;

    border-bottom: 7px solid blue;

    border-left: 7px solid transparent;

    margin-left: 1px;

}





.triangle-bottomright-red-5px {

    width: 0;

    height: 0;

    border-bottom: 5px solid red;

    border-left: 5px solid transparent;

    margin-left: 1px;

}





.triangle-bottomright-blue-5px {

    width: 0;

    height: 0;

    border-bottom: 5px solid blue;

    border-left: 5px solid transparent;

    margin-left: 1px;

}





.triangle-bottomright-red-3px {

    width: 0;

    height: 0;

    border-bottom: 3px solid red;

    border-left: 3px solid transparent;

    margin-left: 1px;

}





.triangle-bottomright-blue-3px {

    width: 0;

    height: 0;

    border-bottom: 3px solid blue;

    border-left:3px solid transparent;

    margin-left: 1px;

}





.triangle-bottomleft-5px {

    width: 0;

    height: 0;

    border-bottom: 5px solid blue;

    border-right: 5px solid transparent;

    margin-left: 1px;

}



.yin-yang {

    width: 7px;

    height: 7px;

    background: #eee;

    border-color: red;

    border-style: solid;

    border-width: 1px 1px 4px 1px;

    border-radius: 100%;

    position: relative;

}



.yin-yang:before {

    content: "";

    position: absolute;

    top: 50%;

    left: 0;

    background: #eee;

    border: 1px solid red;

    border-radius: 100%;

    width: 7px;

    height: 7px;

}



.yin-yang:after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    background: red;

    border: 1px solid #eee;

    border-radius:100%;

    width: 7px;

    height: 7px;

}





div.square {

    border: solid 2px red;

    width: 3px;

    height: 3px;

    background: #f0f;

    margin: auto;

}



div.square-red-in-blue {

    border: solid 2px blue;

    width: 3px;

    height: 3px;

    background: red;

    margin: auto;

}



div.square-blue-in-red {

    border: solid 2px red;

    width: 3px;

    height: 3px;

    background: blue;

    margin: auto;

}



.circle_green {

    border: 0px solid #a1a1a1;

    padding: 0px 0px;

    background: green;

    width: 2px;

    border-radius: 100%;

    margin-left: auto;

    margin-right: auto;

    width: 1%;

}





.colordiv {

    width: 100%;

    height: 5px;

    text-align: center;

    color: White;

    /*filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='blue', endColorStr='red', gradientType='1');*/

    background: -moz-linear-gradient(left, blue, red);

    background: -o-linear-gradient(left, blue, red);

    background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(blue), to(red));

}





.bbb {

    background: url("../image/bbppp.png") no-repeat 0px 0px;

    background-size: contain;

}



.bbbc {

    background: url("../image/bbpppt.png") no-repeat 0px 0px;

    background-size: contain;

}









.ddsidebar {

    position: fixed;

    top: 180px;

    /*left: 90%;*/

    /*margin-left: 10px;*/

    background-color: #B1BCCF;

    /*padding: 10px 0;*/

    opacity: .24;

    display: inline-block;

    border: 1px solid #808080;

    width: 50px;

    font-size: 0.9em;

    /* color: #707070; */

    color: lightcyan;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 50px;

    vertical-align: middle;

    text-align: center;

    /*The good stuff */

    -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */

    -moz-transition: opacity 0.5s ease-out; /* FF4+ */

    -ms-transition: opacity 0.5s ease-out; /* IE10? */

    -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */

    transition: opacity 0.5s ease-out;



}



.firstroadtd {

    border: 1px solid #808080;

    text-align: center;

    min-width: 6px;

    /*font-size: 0.8125em;*/

    color: #707070;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 6px;

    vertical-align: middle;

    overflow: hidden;

}



.first5roadtd {

    border: 1px solid #808080;

    text-align: center;

    min-width: 5px;

    /*font-size: 0.8125em;*/

    color: #707070;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 5px;

    vertical-align: middle;

    overflow: hidden;

}



.first4roadtd {

    border: 1px solid #808080;

    text-align: center;

    min-width: 7px;

    /*font-size: 0.8125em;*/

    color: #707070;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 7px;

    vertical-align: middle;

    overflow: hidden;

}



.firs9troadtd {

    border: 1px solid #808080;

    text-align: center;

    min-width: 9px;

    /*font-size: 0.8125em;*/

    color: #707070;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 9px;

    vertical-align: middle;

    overflow: hidden;

}



.nobet {

    /*background-color: #1f1feb;*/

    vertical-align: middle;

    /*min-height: 34px;*/

    padding-top: 9px;

    padding-bottom: 9px;

    color: yellow;

}



.yesbet {

    background-color: lightgray;

    vertical-align: middle;

    /*min-height: 34px;*/

    padding-top: 9px;

    padding-bottom: 9px;

    color: greenyellow;

}



.btngroup {

    width: 90%;

    margin: 0 auto;

}





.mt4lost {

    color: #3070ae;

}



.mt4 {

    color: #000000;

}



.hbbtn {

    display: inline-block;

    border: 1px solid #808080;

    width: 40px;

    font-size: 0.9em;

    color: #707070;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 40px;

    vertical-align: middle;

    text-align: center;

    background-color: lightgray;

}



.hbbtnRun2 {

    display: inline-block;

    border: 1px solid #808080;

    width: 40px;

    font-size: 0.9em;

    color: #707070;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 40px;

    vertical-align: middle;

    text-align: center;

    background-color: lightgray;

}



.hbbtnRun {

    display: inline-block;

    border: 1px solid #808080;

    width: 40px;

    font-size: 0.9em;

    color: #707070;

    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 40px;

    vertical-align: middle;

    text-align: center;

    background-color: lightgray;

}



#alert {

    position: fixed;

    top: 20px;

    left: 50%;

    width: 200px;

    margin-left: -100px;

    border: 1px solid #666;

    background-color: #B1BCCF;

    padding: 10px 0;

    text-align: center;

    opacity: .9;

    /*The good stuff */

    -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */

    -moz-transition: opacity 0.5s ease-out; /* FF4+ */

    -ms-transition: opacity 0.5s ease-out; /* IE10? */

    -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */

    transition: opacity 0.5s ease-out;

}



#sidebar {

    position: fixed;

    top: 60px;

    /*left: 90%;*/

    width: 38px;

    /*margin-left: -30px;*/

    border: 1px solid #666;

    background-color: #B1BCCF;

    /*padding: 10px 0;*/

    text-align: center;

    opacity: .7;

    /*The good stuff */

    -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */

    -moz-transition: opacity 0.5s ease-out; /* FF4+ */

    -ms-transition: opacity 0.5s ease-out; /* IE10? */

    -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */

    transition: opacity 0.5s ease-out;

}



.red {

    color: red;

    font-weight: bold;

}





.brown {

    color: brown;

    font-weight: bold;

}



.yellow {

    color: green;

    font-weight: bold;

}





.unstopbg {

    background-color: #006600;

}



.win {

    background-color: yellow;

}



.lost {

    background-color: purple;

}



footer {

    width: 100%;

    height: 9.5em;

    background: grey;

    position: fixed;

    bottom: 0;

    /*filter: alpha(opacity=90); !*IE,透明度50%*!*/

    /*-moz-opacity: 0.9; !*Firefox,透明度50%*!*/

    opacity: 0.9; /*其他浏览器,透明度50%*/

    /*margin-left: 50px;*/

    padding-right: 5px;

    padding-left: 5px;

}



.trwin {

    border-bottom: 2px solid yellow;

}



.trlost {

    border-bottom: 2px solid purple;

}



.btn {

    box-shadow: none;

    position: relative;

    text-decoration: underline;

    padding: 0;

    font-family: verdana, arial, helvetica, helve, sans-serif;

    font-size: 13px;

    color: #7CCE09;

    text-transform: uppercase;

    text-decoration: underline;

    border: none;

    letter-spacing: 0;

    text-shadow: none;

    -webkit-transition: all 0.35s ease;

    -moz-transition: all 0.35s ease;

    -o-transition: all 0.35s ease;

    transition: all 0.35s ease;

}



.btn:hover {

    text-decoration: none;

    -webkit-transition: all 0.35s ease;

    -moz-transition: all 0.35s ease;

    -o-transition: all 0.35s ease;

    transition: all 0.35s ease;

}



.footer-bottom {

    text-align: center;

    /*background: #444;*/

    padding: 5px 10px;

}



.copy p {

    color: #facb00;

    font-size: 13px;

    font-weight: bold;

    font-family: verdana, arial, helvetica, helve, sans-serif;

    line-height: 1.5em;

}



.hahaha {

    font-weight: bold;

}



.copy p a {

    color: #A4DE54;

}



.copy p a:hover {

    color: #999;

}