/*!
 *    _____            _
 *   |  __ \          | |
 *   | |__) |___ _ __ | | ____ _ _ __
 *   |  _  // _ \ '_ \| |/ / _` | '_ \
 *   | | \ \  __/ | | |   < (_| | | | |
 *   |_|  \_\___|_| |_|_|\_\__,_|_| |_|
 *
 *  Copyright 2012-2015 Institut de recherche et d'innovation
 *  contributor(s) : Yves-Marie Haussonne, Raphael Velt, Samuel Huron,
 *      Thibaut Cavalié, Julien Rougeron.
 *
 *  contact@iri.centrepompidou.fr
 *  http://www.iri.centrepompidou.fr
 *
 *  This software is a computer program whose purpose is to show and add annotations on a video .
 *  This software is governed by the CeCILL-C license under French law and
 *  abiding by the rules of distribution of free software. You can  use,
 *  modify and/ or redistribute the software under the terms of the CeCILL-C
 *  license as circulated by CEA, CNRS and INRIA at the following URL
 *  "http://www.cecill.info".
 *
 *  The fact that you are presently reading this means that you have had
 *  knowledge of the CeCILL-C license and that you accept its terms.
 */

/*! renkan - v0.12.18 - Copyright © IRI 2016 */

html {
    overflow: visible !important;
}

body {
    font-family: Arial, Helvetica, sans-serif; background: #F6F6F6; color: #333333;
}

.clearer {
    display: block; clear: both; height: 1px;
}

h1 {
    margin-bottom: 5px; padding: 0 15px; background: #333333; color: #ffffff;
    font-weight: bold; font-size: 30px; line-height: 60px;
}

.right {
    width: 301px; position: absolute; top: 10px; right: 10px;
}

.main {
    margin: 10px 330px 10px 20px;
}

.blue-button {
    display: inline-block; padding: 4px 6px;
    color: #ffffff; text-decoration: none; border-radius: 4px;
    background: -moz-linear-gradient(top, #6080c0, #2040a0);
    background: -webkit-linear-gradient(top, #6080c0, #2040a0);
    box-shadow: 1px 1px 2px #808080;
}

.blue-button:hover {
    background: -moz-linear-gradient(top, #2040a0, #6080c0);
    background: -webkit-linear-gradient(top, #2040a0, #6080c0);
}

.update-preview {
    text-align: center; display: block; margin-bottom: 10px; font-size: 24px; font-weight: bold; line-height: 34px;
}

#preview {
    position: relative; border-left: 1px solid #000000; border-bottom: 1px solid #000000; width: 300px; height: 800px;
    border-radius: 4px; overflow: hidden; margin-bottom: 10px;
}

.section-title {
    font-size: 20px; font-weight: bold; margin: 20px 0 5px;
}

.first-level-list {
    margin: 5px 0;
}

.add-item {
    margin: 5px 0; font-size: 22px; font-weight: bold; line-height: 18px;
}

.add-item:hover:after {
    float: right; font-size: 14px; font-weight: normal; line-height: 18px; margin-left: 4px;
}

.add-search-engine:hover:after {
    content: "Add Search Engine";
}
.add-resource:hover:after {
    content: "Add Resource";
}
.add-bin:hover:after {
    content: "Add Bin";
}

.item {
    padding: 5px; margin: 5px 0; border-radius: 4px; font-size: 12px;
    background: -moz-linear-gradient(top, #ffcc8f, #fff0d0);
    background: -webkit-linear-gradient(top, #ffcc8f, #fff0d0);
    box-shadow: 1px 1px 2px #808080;
}

.remove-item {
    float: right; font-size: 22px; line-height: 18px; height: 18px; margin: 0 0 2px -10px; font-weight: bold;
}

.setting {
    float: left; width: 260px; margin: 2px 15px 2px 2px; line-height: 24px; min-height: 24px;
}

.setting label {
    float: left; display: block; width: 100px; font-weight: bold;
}

.display-value {
    float: left; display: block; width: 160px;
}

.edit-value {
    width: 160px; display: none; border: 1px solid #cccccc; border-radius: 3px;
}

input.edit-value, textarea.edit-value {
    width: 154px; padding: 2px;
}

textarea.edit-value {
    resize: vertical; height: 72px;
}

.item-editing .display-value {
    display: none;
}

.item-editing .edit-value {
    display: inline-block;
}

.resource-list-title {
    clear: both; width: 100%; font-size: 16px; font-weight: bold; margin: 5px 0 0;
}

.resource {
    display: block; clear: both;
    padding: 5px; margin: 5px; border-radius: 4px;
    background: -moz-linear-gradient(top, #ff8f00, #ffcc8f);
    background: -webkit-linear-gradient(top, #ff8f00, #ffcc8f);
    box-shadow: 1px 1px 2px #808080;
}

.resource .display-value {
    display: inline-block;
}

.resource .edit-value {
    display: none;
}

.resource.resource-editing .display-value {
    display: none;
}

.resource.resource-editing .edit-value {
    display: inline-block;
}