div#fifiCanvas {
    height: 480px; width: 720px; margin: 0 0 0; text-align: center
}
div#fifiAppContainer {
    width: 350px; height: 100%; padding: 5px;
    border: 1px solid #aaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%) repeat scroll 0 0;
    text-align: left; margin: auto;
}

div#fifiFormContainer {
    margin: 5px 0 15px 0;
}

form#fifiForm input#filmInput {
    padding: 3px; width: 200px; height: 19px;
}

form#fifiForm input#addFilm {
    width: 102px; height: 30px;
}

form#fifiForm select#favoriteFilms {
    width: 100%; margin-top: 10px;
}

form#fifiForm input#search {
    width: 100%; height: 30px
}

.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}

/* Each of the items in the list */
.custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
}

.custom-menu li:hover {
    background-color: #DEF;
}


a.tooltip {
    position: relative;
    text-decoration: none;
}
a.tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -150px;
    left: -190px;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%) repeat scroll 0 0;
    padding: 5px 15px;
    color: #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    border-radius        : 10px;
    border: 1px solid #ccc;
    /*white-space: nowrap;*/
    line-height: 1.5em;
    width: 240px;
    opacity: 0;
    transition: all 1.4s ease;
    -webkit-transition: all 1.4s ease;
    -moz-transition   : all 1.4s ease;
    display: none;
}
/*the triangle*/
a.tooltip:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 13.9px;
    border-color: transparent transparent transparent #000;
    transition: all 1.4s ease;
    -webkit-transition: all 1.4s ease;
    -moz-transition   : all 1.4s ease;
    opacity: 0;
    left: 80px;
    bottom: -20px;
    display: none;
}
a.tooltip:hover:after {
    bottom: -150px;
    left: -90px;
    display: block;
}
a.tooltip:hover:before {
    bottom: -20px;
    left: 182px;
    border-color: transparent transparent transparent #ccc;
    display: block;
}
a.tooltip:hover:after, a:hover:before {
    opacity: 1;
}

table#fifiResultTable {
    border: 1px solid #ccc; width: 100%;
}

table#fifiResultTable th.fifiTableHeader {
    font-weight: bold; text-align: center; padding: 5px; color: #ccc;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%) repeat scroll 0 0;
}

table#fifiResultTable tbody.fifiTableBody {
    text-align: center; color: #ccc;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(69, 72, 77, 1) 0%, rgba(0, 0, 0, 1) 100%) repeat scroll 0 0;
}

table#fifiResultTable td {
    padding: 10px;
}

.timeColumnWidth {
    width: 110px;
}

progress::-webkit-progress-bar { background: #fff; }

progress::-moz-progress-bar {
    background: rgb(96,108,136); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

progress::-webkit-progress-value {
    background: rgb(96,108,136); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}

/* Polyfill */
progress[aria-valuenow]:before  {
    background: rgb(96,108,136); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(96,108,136,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,108,136,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
}