/* 
    Document   : dice
    Created on : 25-mei-2012, 23:45:41
    Author     : jd
*/

root { 
    display: block;
}

* {
    padding:0px;
    margin:0px;
}


body {
    background-color:#000000;
    background-image:url("bgy.png");
    background-repeat: repeat-y;
    background-position: center;
    overflow:hidden;
}

#wrapper {
    margin:0px auto;
    background-image:url("background2.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    min-height:650px;
    height:100%;
    width:950px;
    position:relative;
    overflow:hidden;
}

#game {
    position: absolute;
    width:950px;
    height:650px;
    overflow:hidden;
}

#cardbar {
    width:876px;
    height:123px;
    position:absolute;
    left:16px;
    top:25px;
    background-image:url("cardback.png");
    background-repeat: no-repeat;
    z-index:0;
}

#cardtable, #playertable {
    width:498px;
    height:512px;
    position:absolute;
    left:429px;
    top:120px;
    background-image:url("cardstable.png");
    background-repeat: no-repeat;
}

#playertable {
    background-image:none;
}

#dicetable {
    width:390px;
    height:390px;
    position:absolute;
    left:20px;
    top:168px;
    background-image:url("dicetable.png");
    background-repeat: no-repeat; 
}

.card {
    position: absolute;
    width:50px;
    height:80px;
    background-image:url("cards.png");
    background-repeat: no-repeat;
    border-radius:10px;
    z-index:50;
}

.cardstack {
    position: absolute;
    width:50px;
    height:80px;
    border: 1px solid #595964;
    border-radius: 10px 10px 10px 10px;
}

#player1stack {
    top:136px;
    left:220px;
}

#player2stack {
    top:225px;
    left:323px;
}

#player3stack {
    top:324px;
    left:220px;
}

#player4stack {
    top:225px;
    left:123px;
}

#rollspace {
    width:300px;
    height:300px;
    position:absolute;
    left:26px;
    top:26px;
    z-index:3;
}

#dicescore {
    opacity: 0.4;
    color:#3d9a51;
    font-size:300px;
    line-height:300px;
    text-align:center;
    height: 300px;
    left: 23px;
    position: absolute;
    top: 73px;
    width: 345px;
    z-index:1;    
    font-family: arial;
}

.die {
    position:absolute;
    width:41px;
    height:44px;
    background-image:url("dice.png");
    background-repeat: no-repeat;
}

.roll1 {background-position: 0px 0px;}
.roll2 {background-position: -41px 0px;}
.roll3 {background-position: -82px 0px;}
.roll4 {background-position: -123px 0px;}
.roll5 {background-position: -164px 0px;}
.roll6 {background-position: -205px 0px;}

#rollbutton {
    left: 164px;
    position: absolute;
    top: 559px;
}

#rollbutton  img{
    height: 50px;
    width: 90px;
    cursor:pointer;
    border-radius:10px;
    display:none;
}

#rollbutton img.active {
    box-shadow: 0 0 9px #FFFFFF;
    display:block;
}

#rollbutton img.active:hover {
    box-shadow: 0 0 9px #0000FF;
}

.overlay_grey {
    position: absolute;
    width:50px;
    height:80px;
    background-image:url("greycard.png");
    background-repeat: no-repeat;
    opacity:0.7;
}

.overlay_burned {
    position: absolute;
    width:50px;
    height:80px;
    background-image:url("burncard.png");
    background-repeat: no-repeat;
}

.overlay_take {
    position: absolute;
    width:50px;
    height:80px;
    background-image:url("lightcard.png");
    background-repeat: no-repeat;
    opacity:0.7;
    cursor:pointer;
}

.player {
    position:absolute;
    width:101px;
    height:109px;
    background-repeat: no-repeat;
}

#player1 {
    background-image:url("player1.png");
    top:-5px;
    left:191px;
}
#player2 {
    background-image:url("player2.png");
    top:210px;
    left:406px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

#player3 {
    background-image:url("player3.png");
    top:423px;
    left:195px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

#player4 {
    background-image:url("player4.png");
    top:215px;
    left:-21px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.score {
    background-repeat: no-repeat;
    border: 1px solid #33333E;
    color: #B4B4B5;
    font-family: arial;
    font-size: 20px;
    font-weight: bold;
    padding: 5px;
    position: absolute;
    text-align: center;
    width: 40px;
    border-radius:5px;
}

#score1 {
    top:35px;
    left:300px;
}

#score2 {
   left: 435px;
    top: 330px;
}

#score3 {
    left: 145px;
    top: 463px;
}

#score4 {
    left: 0;
    top: 175px;
}

.backlight {
    padding: 5px;
    position: absolute;
    width: 30px;
    height:100px;
    border-radius:30px;
    box-shadow:0px 0px 50px #ffffff;
    display:none;
}

#backlight1 {
    left: 222px;
    top: 15px;
}

#backlight2 {
    left: 432px;
    top: 210px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

#backlight3 {
    left: 226px;
    top: 399px;
    width: 20px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

#backlight4 {
    left: 30px;
    top: 211px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

#messagebar {
    color: #B4B4B5;
    font-family: arial;
    font-size: 12px;
    height: 30px;
    left: 43px;
    line-height: 30px;
    opacity: 0.9;
    position: absolute;
    text-align: center;
    top: 135px;
    width: 348px;
}

#menu {
    position:absolute;
    top:0px;
    left:2px;
    z-index:100;
}

#menu a {
    font-size:10px;
    color:#ffffff;
    text-decoration:none;
    float:left;
    margin-right:10px;
    font-family: arial;
}

#menu a:hover {
    text-decoration: underline;
}