/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */


tr td:first-child {
    font-weight: bold;
    background-color: #fb8845;
}

th{
	background-color: #e79138;
	}
table {
    font-size: 15px;
}
table td {
    padding: 5px;
    border: 1px solid #ccc;
}
table p {
    display: inline-table;
    height: 15px;
    margin-bottom: 0;
    margin-top: 0;
    width: 100%;
    text-align: center;
}

table td > p:hover {
    cursor: pointer;
    background-color: mediumturquoise;
}
.balloon, .balloon:hover{
    width:90px; height:auto; /* высота подстраивается под контент */
    background:#fff; padding:10px;
    -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;
    border: 3px outset black;
    position: absolute;
    margin: 0;
}


.balloon>.arrow{
    position:absolute; left:-10px; top:50%;
    margin-top:-10px;
    display:block;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid black;
}

.balloon>.arrowright{
    position:absolute; left:90px; top:50%;
    margin-top:-10px;
    display:block;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid black;
}

.balloon span {
    display: block;
}
.hovered {
    background-color: #FED354;
}
.fixed-column {
    position: fixed;
    background-color: grey;
    width: 10px;
}
.balloon button {
    margin-bottom: 6px;
    margin-top: 3px;
}
.balloon button:hover {
    background-color: moccasin;
}
.share {
    text-align: right;
    margin-top: 3px;
    margin-right: 10px;
    font-size: 12px;
}
.play:hover {
    cursor: pointer;
    background-color: moccasin;
}