/*
 * clickimage.css
 *
 * Author:  Lars Thoms <lars.thoms@spacecafe.org>
 * Version: 2016-04-25
 *
 * This stylesheet is part of the clickImage.js-addon of eLearn.js
 *
 */


/* Imagebox */

.clickimage .imagebox
{
    position: relative;
    line-height: 0;
}

.clickimage img
{
    margin: 0;
}


/* Infobox and Pagination */

.clickimage .pagination
{
    display: none;
}

.clickimage .infobox, .clickimage .pagination.active
{
    font-size: 0.8em;
    background-color: #666;
    color: #ccc;
    width: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.clickimage .infobox div, .clickimage .pagination div
{
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    padding: 0.7em 0.8em 0.8em 0.8em;
}

.clickimage .pagination .button
{
    visibility: hidden;
}

.clickimage .pagination .button.active
{
    visibility: visible;
}

.clickimage .infobox div:nth-child(1)
{
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.clickimage .infobox div:nth-child(2)
{
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}


/* Icons */

.clickimage .button i, .clickimage .infobox i
{
    font-family: eLearn-icons;
    font-style: normal;
    margin-right: 0.2em;
    font-size: 1.8em;
    float: left;
}

.clickimage .button i.after
{
    margin-right: 0;
    margin-left: 0.2em;
    float: right;
}


/* Buttons */

.clickimage .button
{
    background-color: #666;
}

.clickimage .button:hover, .clickimage .button:active, .clickimage .button:focus
{
    color: #fff;
    cursor: pointer;
}


/* Buzzer */

.clickimage .buzzer
{
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    bottom: 0.3em;
    left: calc(50% - 0.5em);
    font-size: 5em;
    font-family: eLearn-icons;
    color: #fff;
}

.clickimage .buzzer li
{
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: z-index 0s ease 0.2s, visibility 0s ease 0.2s, opacity 0.2s ease 0;
    margin-bottom: -0.2em;
    height: 0.35em;
}

.clickimage .buzzer.active li
{
    z-index: auto;
    visibility: visible;
    opacity: 0.8;
    transition: opacity 0.2s ease 0;
}

.clickimage .buzzer li:nth-child(1)
{
    transition-delay: 0.05s;
}

.clickimage .buzzer li:nth-child(2)
{
    transition-delay: 0.1s;
}

.clickimage .buzzer li:nth-child(3)
{
    transition-delay: 0.15s;
}


/* Pins */

.clickimage ol.pins
{
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 100%;
    height: 100%;
}

.clickimage ol.pins li
{
    font-weight: bold;
    position: absolute;
    line-height: 0;
}

.clickimage ol.pins li > i
{
    position: relative;
    text-align: center;
}

.clickimage ol.pins li i i
{
    font-style: normal;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 0;
}

.clickimage ol.pins li i i:first-child
{
    font-family: eLearn-icons;
    font-size: 3em;
    color: #000;
    opacity: 0.7;
}

.clickimage ol.pins li i i:last-child
{
    left: 50%;
    top: -0.6em;
    width: 3em;
}

.clickimage ol.pins li.visited i i:first-child
{
    opacity: 0.4;
}

.clickimage ol.pins li.active i i:first-child, .clickimage ol.pins li:hover i i:first-child 
{
    color: #e2001a;
    opacity: 1;
}

.clickimage ol.pins li:hover
{
    cursor: pointer;
}


/* Pininfo */

.clickimage .pininfo > div
{
    margin-bottom: 2em;
}

.clickimage .pininfo div.inactive
{
    display: none;
}


/* Pininfo: Header Highlight */

.clickimage .pininfo h3 .highlight
{
    color: #e2001a;
    margin-right: 1em;
}


/* Pininfo: Links, Task and Hint */

.clickimage .pininfo div p.task, .clickimage .pininfo div ul.links
{
    padding-left: 6em;
}

.clickimage .pininfo div p.task:before, .clickimage .pininfo div ul.links:before, .clickimage .pininfo div p.hint:first-letter
{
    font-family: eLearn-icons;
    content: "t";
    color: #808080;
    font-size: 3em;
    line-height: 1em;
    float: left;
    margin-left: -1.5em;
}


/* Pininfo: Links */

.clickimage .pininfo ul.links
{
    list-style: none;
    padding: 1em 0 0 0;
    border-top: 1px dotted #666;
}

.clickimage .pininfo div ul.links:before
{
    content: "l";
}

.clickimage .pininfo ul.links li
{
    padding-left: 2em;
}

.clickimage .pininfo ul.links li:before
{
    font-family: eLearn-icons;
    content: "n";
    color: #e2001a;
    margin-left: -2em;
    margin-right: 1em;
}


/* Pininfo: Hint */

.clickimage .pininfo div p.hint
{
    background-color: #f0f0f0;
    border-left: 3px solid #e2001a;
    padding: 1em 1em 1em 4em;
}

.clickimage .pininfo div p.hint:first-line
{
    color: #e2001a;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2em;
}

.clickimage .pininfo div p.hint:before
{  
    content: "h";
}

.clickimage .pininfo div p.hint:first-letter
{
    color: #e2001a;
    font-size: 2em;
    font-weight: normal;
}


/* Pininfo: Inline */

.clickimage .pininfo div.inline
{
    background-color: #666;
    padding: 0.9em 1em 1em 1em;
    margin-bottom: 0;
}

.clickimage .pininfo div.inline h3, .clickimage .pininfo div.inline p
{
    font-size: 0.8em;
    line-height: 1.5em;
    color: #fff;
    margin: 0;
}