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

/*
COLORS:
FB_DARK: #3b5998 = rgb(59, 89, 152)
FB_BRIGHT: #dde2ed = rgb(221, 226, 237) 
FLIEDER: rgb(221, 242, 254)

YUI2: #edf5ff;  content default skin
LOGO: font-size = 36 in Paint, Arial bold {normal | italic}
*/

div.cont {
    text-align: center;
}

#cont0 ul {
    list-style: none;
}

/* ==========================================================================*/
/* BEISPIEL 0: clock */
/* ==========================================================================*/

#divClock {
    text-align: center;
    background: #333333;
    padding: 32px;
    border-radius: 32px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3), 0 8px 20px 0 rgba(0, 0, 0, 0.3);
}

#divClockDisplay span.run {
    background: #000000;
    width: 400px;
    font-family: monospace;
    font-weight: bold; 
    font-size: 64px;
    background: #000000;
    padding: 8px;
    /*border-radius: 16px;*/
}
#spanTime {
    color: #00FF00;
}


/* ==========================================================================*/
/* BEISPIEL 1: leds */
/* ==========================================================================*/

#divControlsLeft {
    background: #333333;
    padding: 8px;
    color: #FFFFFF;
    font-size: 16px;
    font-family: sans-serif;
}

#divControlsLeft img {
    vertical-align: middle;
}

#divControlsLeft span.meta {
    background: #dde2ed;
    color: #3b5998;
    padding: 8px; 
    border-radius: 8px;
}    

#divExtras {
    margin-bottom: 100px;
}


#imgShowMessages {
    height: 32px;
    cursor: pointer;
}

/* ==========================================================================*/
/* BEISPIEL 2: xylophon */
/* ==========================================================================*/

div.xylo-ctrls {
    font-family: sans-serif;
    font-size: 12px;
    height: 32px;
    margin-top: 8px;
    background: #FFFFFF;
}

div.xylophon {
    text-align: center;
 } 

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;
}

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;
    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; 
}