@font-face {
    font-family: "Symbola";
    src: url("fonts/Symbola.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

html,body {
    height: 100%;
}

.splash_icon_bottom {
    font-family: "Symbola";
    background-color: #ff6600;
    border-color: #FF6600 #FF6600 #DD4400 #FF6600;
    box-shadow: -8px 8px 10px rgba(0, 0, 0, 0.5);    
    font-size: 200px;
    border-style: solid;
    border-width: 1px 1px 20px 20px;
    border-radius: 40px;
    line-height: 1.1;
}

.splash_icon_top {
    font-family: "Symbola";
    background-color: #ffffff;
    border-color: #FFF #EEE #AAA #CCC;
    box-shadow: 0px 0px 0px;
    font-size: 200px;
    border-style: solid;
    border-width: 1px 1px 20px 20px;
    border-radius: 40px;
    line-height: 1.1;
}

.tile_bottom {
    font-family: "Symbola";
    background-color: #ff6600;
    border-color: #FF6600 #FF6600 #DD4400 #FF6600;
}

.tile_top {
    font-family: "Symbola";
    border-color: #FFF #EEE #AAA #CCC;
}

.tile_sample {
    font-family: "Symbola";
    font-size: 64px;
    border-style: solid;
    border-color: #000 #000 #333 #666;
    border-width: 1px 1px 6px 6px;
    border-radius: 6px;
    margin-left: 10px;
    line-height: 1.1;
    box-shadow: -8px 8px 10px rgba(0, 0, 0, 0.5);
}

.mahjongBoard {
    -webkit-user-select: none;
}

div.tile, .tile > span.tile_top {
    font-family: "Symbola";
    background-color: #AAA;
    border-color: #ccc #bbb #666 #777;
    -webkit-user-select: none;
}

div.on_board, .on_board > span.tile_bottom {
    box-shadow: -8px 8px 10px rgba(0, 0, 0, 0.5);
}

div.hinted, .hinted > span.tile_bottom {
    box-shadow: 0px 0px 40px red;
}

div.off_board, .off_board > span.tile_bottom {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

div.clickable, .clickable > span.tile_top {
    background-color: #EEE;
    border-color: #FFF #EEE #777 #888;
}

img.clickable {
    box-shadow: 0px 0px 40px black;
}

img.hinted {
    box-shadow: 0px 0px 40px red;
}

div.highlighted, .highlighted > span.tile_top {
    background-color: #FFF;
    border-color: #FFF #EEE #AAA #BBB;
    box-shadow: 0px 0px 40px white;
}

div.clickable:hover, .clickable:hover > span.tile_top {
    background-color: #FFF;
    border-color: #FFF #EEE #999 #AAA;
    box-shadow: 8px 8px 10px rgba(#fff, #fff, #fff, .5);
}

img.clickable:hover {
    box-shadow: 0px 0px 40px orange;
}

div.highlighted:hover, .highlighted:hover > span.tile_top {
    background-color: #FFF;
    border-color: #FFF #EEE #AAA #BBB;
}

img.highlighted:hover {
    box-shadow: 0px 0px 40px white;
}

img.highlighted {
/*    box-shadow: 0px 0px 40px yellow; */
}

.category_dragon {
}

.category_wind {
    color: #000000;
}

.category_bamboo_suit {
    color: #327118;
}

.category_circle_suit {
    color: #000099;
}

.category_honor {
    color: #000000;
}

.category_character_suit {
    color: #990000;
}

.tile_winter_season {
    color: #301c89;
}
.tile_spring_season {
    color: #30390f;
}
.tile_summer_season {
    color: #cf1e20;
}
.tile_autumn_season {
    color: #80400C;
}

.tile_orchid_flower {
    color: #aa40a6;
}
.tile_plum_flower {
    color: #5E1555;
}
.tile_bamboo_flower {
    color: #0f5b66;
}
.tile_chrysanthemum_flower {
    color: #a11d58;
}

.tile_red_dragon {
    color: #990000;
}
.tile_white_dragon {
    color: #000000;
}
.tile_green_dragon {
    color: #009900;
}

.category_joker {
    color: #000000;
}

.category_back {
    color: #000000;
}

table#history_with_scrollbar {
    display: block;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 90px;
}

#collapseOne {
    background-color: #555;
}

.navbar-toggle {
    display: block;
}