/* 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;
}