body {
    background-color: rgb(240, 240, 240);
    padding: 0;
    margin: 0;
}
a {
    color: blue;
    cursor: pointer;
}
header {
    background-color: silver;
    height: 50px;
}
input[type=text] {
    width: 100%;
}

/* Вибір мови */
#langselector {
    display: table;
    text-align: center;
    margin: 0 auto;
}
#langselector div {
    display: table-cell;
    width: 50px;
    padding: 10px;
}
[data-ode-setlang].selected {
    font-weight: bold;
}

/* Робоча область */
#workspace {
    display: table;
	width: 900px;
    margin: 0 auto;
}
#workspace >div {
    display: table-cell;
    width: 33%;
    padding: 10px;
}

.description >div {
    padding-bottom: 10px;
}

#field {
    position: relative;
    background-color: white; 
    text-align: center; 
    vertical-align: middle;
    margin: 0 auto;
}
.tile {
    position: absolute;
    z-index: 2;
    opacity: 1;
    cursor: pointer;
    border: 1px solid silver;
}
.tilecover {
    background-color: black;
}

/* Найкращі результати */
#bestresults table {
    text-align: center;
    background-color: white;
    width: 100%;
}
#bestresults table td {
    border-top: 1px solid silver;
}

/* Тримач кнопок */
#button_wrapper {
    position: relative;
    padding-bottom: 20px;
}

/* Кнопка Автопрогравання */
#autoplay {
    position: absolute;
    right: 0px;
}

/* Зелена кнопка */
.green_button {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007700), color-stop(1, #009900) );
    background:-moz-linear-gradient( center top, #007700 5%, #009900 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007700', endColorstr='#009900');
    background-color:#007700;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:1px solid #adadad;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
}.green_button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #009900), color-stop(1, #007700) );
    background:-moz-linear-gradient( center top, #009900 5%, #007700 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#009900', endColorstr='#007700');
    background-color:#009900;
    cursor: pointer;
}.green_button:active {
    position:relative;
    top:1px;
}

/* Сіра кнопка */
.de_button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    min-width: 60px;
    border-radius:10px;
    border:1px solid #adadad;
    display:inline-block;
    color:#111111;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}.de_button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
    cursor: pointer;
}.de_button:active {
    position:relative;
    top:1px;
}

/* Підпис */
footer {
    position: fixed;
    width: 100%;
    height: 40px;
    text-align: center;
    bottom: 0;
    z-index: 3;
}

/* Примітка */
#note {
    opacity: 0.1;
    -webkit-transition: opacity 0s ease 0s;
    transition: opacity 0s ease 0s;
}

#note:hover {
    opacity: 1;
    -webkit-transition: opacity 2s ease 1s;
    transition: opacity 2s ease 1s;
}