#lower-pane-container {
    position      : absolute;
    left          : 180px;
    right         : 8px;
    bottom        : 22px;
    border-top    : 2px solid #333;
    border-bottom : 2px solid #333;
    display       : none;
}
#lower-pane {
    padding : 0px;
}
#lower-pane-close {
    display         : block;
    position        : absolute;
    top             : 0px;
    right           : 0px;
    font-size       : 3em;
    width           : 15px;
    height          : 24px;
    line-height     : 24px;
    background      : white;
    color           : #333;
    text-align      : center;
    text-decoration : none;
    z-index         : 100;
}
#lower-pane-close:hover {
	color: #7d0a0d;
}

/* poet's name */

#lower-pane h3 {
    margin-top   : 10px;
    position     : relative;
    padding-left : 43px;
    font-size    : 1.6em;
    font-weight  : 700;
}
#lower-pane h3 .poet-phonodia {
    position : absolute;
    top      : 4px;
    left     : 0;
}
#lower-pane h3 #poet-bio {
    font-size    : 1.4em;
}
#lower-pane h3 #poet-bio:hover,
#lower-pane h3 #poet-bio.active {
    color : #7d0a0d;
}
#lower-pane h3 #poet-bio.active {
    font-weight : bold;
}


/* Left and right section positions */

#lower-pane-content-left, #lower-pane-content-right {
    position   : absolute;
    top        : 46px;
    bottom     : 8px;
    overflow-y : auto;
}
#lower-pane-content-right.poet-bio {
    top   : 46px;  /* empty header when poet bio is showing is needed */
}
#lower-pane-content-left {
    left  : 0;
    width : 385px;
    border-right: #000 solid 1px;
}
#lower-pane-content-right {
    left      : 413px;
    right     : 0px;
}
#lower-pane-header-right {
    position : absolute;
    left     : 390px;
    top      : 9px;
    right    : 36px;
}

/* Poem list styles */

#poems {
    padding-left : 0;
    list-style   : none outside none;
}
#poems .poem {
    line-height : 1.7em;
    font-size   : 1.4em;
    cursor      : pointer;
}
#poems .section {
    line-height    : 1.7em;
    font-size      : 1.4em; 
    margin-left    : 25px;
    width: 195px;
    font-weight: 300;
    border-bottom   : 1px black solid;
}
#poems .section:first-child {
    margin-top : 0;
}
#poems .poem:hover {
    color : #7d0a0d;
}
#poems .poem .info-container {
    visibility : hidden;
}
#poems .poem:hover  .info-container,
#poems .poem.active .info-container {
    visibility : visible;
}
#poems .poem .sep,
#poems .poem .info {
    display : inline-block;
    color: #000;
}
#poems .poem .sep {
    padding-left: 0.5em;
    padding-right: 0.2em;
}
#poems .poem .info:hover,
#poems .poem .info.active {
    color : #7d0a0d;
}
#poems .poem .info.active {
    font-weight : bold;
}
#poems .poem .poem-phonodia {
    visibility : hidden;
}
#poems .poem.player-loading .poem-phonodia,
#poems .poem.player-playing .poem-phonodia {
    visibility : visible;
}

#poems .name {
    margin-left: 8px;
}


/* Player styles */

.sc-player {
    display : inline-block;
    width   : 56px;
    padding-left: 5px;
    cursor  : pointer;
    color   : #333;
}
.sc-player:hover {
    color : #7d0a0d;
}
.sc-player .icon {
    color : #333;
}
.sc-player .no-audio {
    color : #c09089; /* same as .error */
}
.sc-player:hover  .play-icon,
.sc-player:hover .pause-icon {
    color : #7d0a0d;
}
.sc-player.stopped .pause-icon,
.sc-player.loading .pause-icon,
.sc-player.paused  .pause-icon {
    display : none;
}
.sc-player.loading .play-icon,
.sc-player.playing .play-icon {
    display : none;
}
.sc-player.stopped .loading-icon,
.sc-player.playing .loading-icon,
.sc-player.paused  .loading-icon {
    display : none;
}
.sc-player.playing .duration,
.sc-player.paused  .duration {
    color : #7d0a0d;
}

.sc-player .play-icon,
.sc-player .pause-icon,
.sc-player .loading-icon {
    display       : inline-block;
    width         : 1em;
}
.sc-player.loading .loading-icon {
    /* from http://stackoverflow.com/a/16344389/106302 */
    -webkit-animation-name            : blink;
    -webkit-animation-duration        : 0.5s;
    -webkit-animation-timing-function : linear;
    -webkit-animation-iteration-count : infinite;
       -moz-animation-name            : blink;
       -moz-animation-duration        : 0.5s;
       -moz-animation-timing-function : linear;
       -moz-animation-iteration-count : infinite;
            animation-name            : blink;
            animation-duration        : 0.5s;
            animation-timing-function : linear;
            animation-iteration-count : infinite;
}

.sc-player .lang {
    display       : inline-block;
    width         : 1.3em;
    text-align    : center;
    padding-right : 2px;
}
.sc-player .duration {
    display       : inline-block;
    float         : right;
    width         : 2.2em;
    text-align    : right;
}


/* Player loading animation */

@-webkit-keyframes blink {
    0%   { opacity : 1.0; }
    50%  { opacity : 0.3; }
    100% { opacity : 1.0; }
}
@-moz-keyframes blink {
    0%   { opacity : 1.0; }
    50%  { opacity : 0.3; }
    100% { opacity : 1.0; }
}
@keyframes blink {
    0%   { opacity : 1.0; }
    50%  { opacity : 0.3; }
    100% { opacity : 1.0; }
}


/* Right section styles */

#lower-pane-header-right {
    line-height : 2.2em;
    padding-left: 25px;
}
#lower-pane-header-right .poem-tab {
    /* Important to keep this bold because there are multiple controls in a row
     * -> if font-weight changes based on the active control, items shift
     * position which is annoying.
     * I know, but they want to see it not bold, so let's try...
     */
    font-weight : normal;
    /* Top + bottom padding makes these items larger -> easier to click */
    padding: 5px 0px;
    font-size   : 1.4em;
}
#lower-pane-header-right .active {
    font-weight: 700;
}
#lower-pane-header-right #poem-tab-info {
    padding-left : 0;
}
#lower-pane-header-right .sep,
#lower-pane-header-right .text,
#lower-pane-header-right .recorded {
    color : #777;
}
#lower-pane-header-right .recorded {
    margin-top: 4px;
    margin-left: -22px;
    position: absolute;
    height: 15px;
}
#lower-pane-header-right .text {
    padding-left  : 5px;
    padding-right : 2px;
}

#lower-pane-content-right a {
    text-decoration: underline;
    font-weight: 400;
    /*border-bottom : 1px solid #000;*/
}
#lower-pane-content-right a:hover {
    /*border-bottom : 1px solid #7d0a0d;*/
}
#lower-pane-content-right h2 {
    font-size  : 2em;
    margin-top : 0;
}
#poet-bio-content, #poem-tab-content-info {
    font-size  : 1.4em;
    line-height: 1.7em;
    font-weight: 300;
}
#poet-bio-content p, #poem-tab-content-info p {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Special styles for bio and poem content */

#lower-pane-content-right .text-light {
    font-weight: 300;
}
#lower-pane-content-right .text-medium {
    font-weight: 400;
}
#lower-pane-content-right .text-bold {
    font-weight: 700;
}

#lower-pane-content-right .section-title {
    font-weight     : 400;
    padding-top     : 0.4em;
    margin-bottom   : 0px;
    display         : block;
}
#lower-pane-content-right strong {
    font-weight: 400;
}

/* Show transcripts in Georgia/serif font... */

#lower-pane-content-right .poem-transcript {
    font-family : "EB Garamond", Georgia, "Times New Roman", Times, serif;
    font-size   : 1.9em;
    line-height: 24px;
}

/* ...but not transcript error messages or poem titles */

#lower-pane-content-right .poem-transcript .translator,
#lower-pane-content-right .poem-transcript .error {
    font-family : "Oxygen",  Arial, sans-serif;
    font-size   : 10px;
}
#lower-pane-content-right .poem-transcript .poem-title {
    font-family    : "Oxygen",  Arial, sans-serif;
    font-weight    : 700;
    font-size      : 16px;
    display        : inline-block;
    margin-top     : 0px;
}
#lower-pane-content-right .poem-transcript strong {
    font-weight: bold;
}
#lower-pane-content-right .poem-transcript .translator {
    font-size: 12px;
    font-weight: 400;
}
#lower-pane-content-right .poem-transcript .translator a{
    font-weight: 300;
}
#lower-pane-content-right .poem-transcript .dedica {
    font-size : 14px;
    font-family : "Oxygen",  Arial, sans-serif;
    font-weight: 400;
}
#lower-pane-content-right .poem-transcript .didascalia {
    font-size : 14px;
    font-family : "Oxygen",  Arial, sans-serif;
    font-weight: 400;
    display: table-cell;
    line-height: 1.2em;
}
.note {
    font-size : 14px;
    font-family : "Oxygen",  Arial, sans-serif;
    font-weight: 100;
    display: table-cell;
    line-height: 1.2em;
}

/*easy way to resolve the rtl problem - for the arabic, hebrew, etc. languages*/
#poem-tab-content-he, #poem-tab-content-ar {
    float: left;
    text-align: right;
}