body
{
    padding: 0px;
    margin:0px;
    border:0px;
}

.blackDie
{
    background-color:lightgray;
    border:thin solid black;
    border-radius:10px;
    height:20px;
    font-size:20px;
    text-align: center;
    padding-right: 4px;
}

.carCell
{
    text-align: right;
    font-size: 20px;
    color: black;
    /*background-color: white;
    border: thin solid black;*/ 
    background-size: contain;
    background-repeat: no-repeat;
    padding:5px;
}

.carControls
{
    width:100%;
    position:fixed;
    padding:10px;
    top:0px;
    left:0px;
    background-color: lightgray;
    min-height:105px;
    overflow:auto;
}

.carMeasure
{
    width:100%;
    height:100%;
    background-size: cover;
    background-repeat:no-repeat;
}

.carPanel
{
    width: 220px;
    min-height: 105px;
    margin: 3px;
    padding: 3px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    background-color: white;
    display:grid;
    grid-template-columns: repeat(22, 10px);
    float:left;
    position: relative;
}

#help
{
    padding:10px;
    height:80px;
    width:70px;
    background-color: lightgray;
    top:0px;
    left:300px;
    position:fixed;
    z-index: 4;
    border:2px ridge gray;
    border-radius:5px;
}

#rules,#operation
{
    font-size:x-large;
    margin:10px;
    cursor: pointer;
}

.carPiece
{
    width       : 18px;
    height      : 25px;
    position : absolute;
    background-size:contain;
}

.carPiece:hover
{
    width       :27px;
    height      :38px;
}

.cellDisplay
{
    width: 220px;
    height: 15px;
    background-size: contain;
    background-position: center;
}

.diceCell
{
    font-size:medium;
    border:thin black solid;
    border-radius:10px;
    padding-right:10px;
}

.gearDisplay
{
    background-image:url("dice/start.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.gearButton
{
    width: 20px;
    height: 20px;
    font-size:25px;
    background-color: bisque;
    border-radius: 10px;
    line-height: 10px;
    padding-left: 2px;
    padding-bottom: 2px;
    float:right;
    margin:1px;
    margin-top:5px;
    box-shadow: 2px 2px lightgray;
}

.rollButton
{
    width: 25px;
    height: 25px;
    font-size:10px;
    background-color: bisque;
    border-radius: 15px;
    line-height: 10px;
    float:right;
    margin:1px;
    box-shadow: 2px 2px lightgray;
}

.openButton
{
    width:150px;
    padding:10px;
    margin:20px;
    border-radius:5px;
    border-width:1px; 
    box-shadow: 2px 2px gray;
}

.startPanel
{
    position:fixed;
    padding:19px;
    min-height:20px;
    width:100%;
    font-size:19px;
    color:darkred;
    text-shadow:2px 1px lightgray;
}

.track 
{
    width: 1828px;
    min-height:1203px;
    margin: 0px;
    padding: 0px;
    border: 0px;
    top:120px;
    left:0px;
    position: relative;
    background-image: url('images/Valencia.jpg');
}

.trackPiece
{
    width       : 18px;
    height      : 25px;
    /*background-color : white;*/
    position : absolute;
    /*border : solid red 1px;*/
}

@keyframes gearRoll
{
    0%   {background-color: white}
    50%  {background-color:gray}
    100% {background-color: white}
}

@keyframes gearRoll
{
    0%   {background-color: lightgray}
    50%  {background-color:white}
    100% {background-color: lightgray}
}

/*document.getElementById('tab'+title).style.animation = "attention 1s infinite";
@keyframes attention
{
	0%							   {color: red;text-shadow: 0px 0px white}
	50%							{color: lightpink;  ;text-shadow: 1px 1px black}
	100%							{color: red;text-shadow: 0px 0px white}
}*/