/* ------------------------------------------------------------------- SYSTEM */

html, body {
   padding: 0px;
   margin: 0px;
}

body {
   font-family: courier, "courier new", monospace;
   font-size: 14px;
   background-color: white;
}

.gradient {
   background: rgb(242,245,246); /* Old browsers */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
   background: -moz-linear-gradient(top,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-8 */
}

#separator {
   position: absolute;
   top: 2px;
   left: 308px;
   bottom: 2px;
   width: 2px;
   background-color: white;
   cursor: col-resize;
}

#separator:hover {
   background-color: steelblue;
}

/* ------------------------------------------------------------------ TOOLBAR */

#toolbar_left {
   position: absolute;
   top: 2px;
   left: 2px;
   width: 304px;
   height: 60px;
   border: solid 1px gray;
}

#toolbar_left a       { color: steelblue; text-decoration: none; }
#toolbar_left a:hover { color: red; }
#toolbar_left .active { color: orange; }

#toolbar_center {
   position: absolute;
   top: 2px;
   left: 310px;
   right: 430px;
   height: 60px;
   border: solid 1px gray;
}

#toolbar_center a       { color: steelblue; text-decoration: none; }
#toolbar_center a:hover { color: red; }
#toolbar_center .active { color: orange; }

#toolbar_right {
   position: absolute;
   top: 2px;
   right: 2px;
   width: 424px;
   height: 60px;
   border: solid 1px gray;
}

#toolbar_right a       { color: steelblue; text-decoration: none; }
#toolbar_right a:hover { color: red; }
#toolbar_right .active { color: orange; }

#toolbar_right span { float: left; }

#tminus { border-left: dotted 1px gray; }

.toolbar a {
   display: block;
   width: 60px;
   height: 60px;
   text-align: center;
   float: left;
   border-right: dotted 1px gray;
   line-height: 60px;
}

.last {
   margin-right: -5px;
}

.toolbar a i {
   line-height: 60px;
}

#song_info {
   position: absolute;
   top: 0px;
   left: 122px;
   bottom: 60px;
   right: 122px;
   height: 55px;
   font-family: calibri, arial, helvetica, sans-serif;
   padding: 5px 20px 0px 20px;
   line-height: 1.8em;
}

#song_info span {
   display: block;
}

#song_name {
   font-size: 24px;
   font-weight: bold;
   color: steelblue;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
}

#artist_name {
   font-size: 20px;
   font-style: italic;
   color: red;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding: 0px;
   margin: 0px;
}
/*
#song_info dt {
   font-size: 24px;
   font-weight: bold;
   color: steelblue;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
}

#song_info dd {
   font-size: 20px;
   font-style: italic;
   color: black;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding: 0px;
   margin: 0px;
}
*/
/* --------------------------------------------------------------- WORK LISTS */

#lc_ArtistList {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   border-top: solid 1px gainsboro;
   overflow-y: scroll;
}

#LetterBox { padding: 10px; }

.work_list {
   position: absolute;
   top: 66px;
   left: 2px;
   bottom: 2px;
   width: 304px;
   border: solid 1px gray;
   /* overflow: scroll; */
   overflow: hidden;
   font-family: calibri, arial, helvetica, sans-serif;
   font-size: 16px;
   /* font-weight: bold; */
   display: none;
}

.work_list ul {
   padding: 10px 5px 10px 10px;
}

.work_area .add_to_pl {
   color: gray;
}

.letter {
   padding: 10px;
   font-size: 36px;
   font-weight: bold;
   text-align: center;
}
/*
.artist {
   color: black;
   border-top: solid 1px gray;
   border-bottom: solid 1px gray;
   padding: 5px 15px;
   font-size: 24px;
}

.work_area ul li {
   display: block;
   border-bottom: solid 1px gainsboro;
   padding: 5px 5px 5px 0px;
}

.work_area .sings {
   font-weight: normal;
   font-style: italic;
   color: gray;
}

.work_area ul li i {
   float: right;
   margin-top: 3px;
}
*/
/* --------------------------------------------------------------------- SONG */

#clock {
   color: gray;
   display: inline-block;
   margin-top: 17px;
   margin-left: 15px;
   /* padding: 7px 0px -7px 7px; */
}

#dursize {
   display: inline-block;
   padding: 15px; 17px -17px 15px;
   font-size: 30px;
   font-weight: bold;
   color: red;
}

#song {
   position: absolute;
   top: 66px;
   left: 310px;
   bottom: 2px;
   right: 2px;
   border: solid 1px gray;
   overflow: scroll;
   font-family: "courier new", courier, monospace;
   font-size: 32px;
   /* font-weight: bold; */
   padding: 20px;
}

#curtain {
   position: absolute;
   top: 66px;
   left: 306px;
   bottom: 2px;
   right: 2px;
   padding: 20px;
   display: none;
   /* background-image: url(img/semi_transparent.png); */
}

.pjesma { font-weight: bold; padding-top: 100px; }
.chord { color: red; background-color: #eff9ff; width: 100%; display: inline-block; padding: 3px 0px 0px 5px; }
.verse { color: navy; width: 100%; display: inline-block; }
.chorus { background-color: green; color: white; width: 100%; display: inline-block; }

#YTVideo {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 199px;
   border-top: solid 1px gray;
}