/* 
    Created on : 28.05.2018, 18:16:44
    Author     : evomath
*/

table caption {
    text-align: center; 
}

/* ================================ xylophon ================================ */

div.xylophon {
    margin-top: 32px;
    margin-bottom: 32px;
    text-align: center;
} 

div.xylo-ctrls {
    font-family: sans-serif;
    font-size: 12px;
    height: 32px;
    margin-top: 8px;
    background: #FFFFFF;
}
 
 
table.xylophon {
    background: #333333;
    border-radius: 16px;
    padding: 16px;
}

table.xylophon thead {
    color: #FFFFFF;
    font-family: sans-serif;
    font-size: 24px;
}

table.xylophon thead th {
    border-radius: 16px;
    text-align: center;
    padding: 8px;
}

table.xylophon thead th.mute {
    background: none;
    color: white;
}

table.xylophon thead th.play {
    background: white;
    color: black;
}

table.xylophon caption {
    font-family: sans-serif;
    font-size: 16px;
    text-align: center;
    background: #dde2ed;
    color: #3b5998; 
    padding: 4px;
    margin-bottom: 8px;
    border-radius: 8px;
}

td.xyloboard  {
    height: 64px;
    width: 32px;
    cursor: pointer;
}

#tdXylo1 {
    background: #F39814;
}

#tdXylo2 {
    background: #007fff;
}

#tdXylo3 {
    background: #00DD00;
}

#tdXylo4 {
    background: #FF0000;
}

#tdXylo5 {
    background: blueviolet; 
}

#tdXylo6 {
    background: #dde2ed; 
}

#tdXylo7 {
    background: yellow; 
}

#tdXylo8 {
    background: cyan; 
}

#imgMetronom {
    height: 20px; 
    vertical-align: middle;
}

#checkBoxMetronom {
    vertical-align: middle;
}


/* ======================== extras ======================================= */

#divExtras {
    margin-bottom: 360px;
}

#divExtras table {
    padding: 8px;
    background: #000000;
}

#divExtras table caption {
    padding: 8px;
}

#divExtras table th {
    font-weight: normal;
    color: #FFFFFF;
    padding-left: 8px;
}

#divExtras a {
    color: #007fff;
}

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

#divExtras a:visited {
    color: #007fff;
}