/**
 * Text Bubbles
 *
 * Visualize text as a series of
 * bubbles representing word size.
 *
 *
 * Contributors:
 *
 * reddit.com/u/krikienoid
 * reddit.com/u/qi1
 * reddit.com/u/kylemit
 *
 * MIT License 2014
 */

/* //// Layout //// */

* {
    margin   : 0;
    padding  : 0;
    overflow : hidden;
    box-sizing         : border-box;
    -moz-box-sizing    : border-box;
    -webkit-box-sizing : border-box;
}

html,
body,
.wrapper-main {
    width  : 100%;
    height : 100%;
}

.wrapper-head,
.wrapper-body,
.wrapper-head-title,
.wrapper-head-block {
    float : left;
}

/* Head */

.wrapper-head {
    position            : relative;
    z-index             : 10;
    padding             : 6px;
    overflow            : visible;
    background-color    : #333;
    border              : 0 groove #555;
    border-right-width  : 4px;
    border-bottom-width : 0;
    color               : #f5f5f5;
}

.wrapper-head-title,
.wrapper-head-block,
.wrapper-head-content {
    width   : 100%;
    height  : auto;
}

.wrapper-head-title,
.wrapper-head-block {
    padding : 6px;
}

.wrapper-head-title {
    background-color : #333;
}

.wrapper-head-content {
    padding       : 8px;
    background    : rgba(0, 0, 0, 0.8);
    border-radius : 3px;
    color         : #dcdcdc;
}

.wrapper-head textarea {
    max-width : 100%;
    width     : 100%;
    height    : 100px;
    overflow  : auto;
}

/* Body */

.wrapper-body {
    width  : 100%;
    height : 100%;
    overflow         : auto;
    background-color : #fff;
}

.container-bubbles {
    width      : 100%;
    min-height : 100%;
    padding    : 24px;
    padding-bottom : 72px;
}

/* Tabs */

.head-tab-control {
    position : absolute;
    top      : -9999px;
    left     : -9999px;
}

.head-tab-title {
    transition : color 0.2s;
}

/* //// Media Queries //// */

/* Large Screens (default) */

.wrapper-main {
    padding-top  : 0;
    padding-left : 240px;
}

.wrapper-head {
    width       : 240px;
    height      : 100%;
    margin-top  : 0;
    margin-left : -240px;
}

/* Small Screens */

@media screen and (max-width : 600px) and (orientation : portrait) {

    .wrapper-main {
        padding-top  : 240px;
        padding-left : 0;
    }

    .wrapper-head {
        width       : 100%;
        height      : 240px;
        margin-top  : -240px;
        margin-left : 0;
        padding-top : 72px;
        background-color    : #000;
        border-right-width  : 0;
        border-bottom-width : 4px;
    }

    .wrapper-head-block {
        width : auto;
    }

    .wrapper-head-title {
        height   : 72px;
        position : fixed;
        margin   : -72px -6px 0 -6px;
        border-bottom-width : 4px;
    }

    .head-tab-title:hover,
    .head-tab-title:focus {
        color : #ffd700;
    }

    .head-tab-title > label {
        cursor : pointer;
    }

    .wrapper-head-content {
        width    : 100%;
        display  : none;
        position : absolute;
        left     : 0;
    }

    .wrapper-head-block > .head-tab-control:checked ~ .wrapper-head-content {
        display: block;
    }

}

/* //// Styles //// */

.wrapper-head h1,
.wrapper-head h2,
.wrapper-head p {
    font-family : sans-serif;
}

.wrapper-head h1,
.wrapper-head h2 {
    white-space : nowrap;
}

.wrapper-head h1 {
    font-size : 32px;
}

.wrapper-head h2 {
    font-size : 14px;
    margin-bottom : 4px;
}

.wrapper-head p,
.wrapper-head hr {
    margin-bottom : 4px;
    border-color  : #f5f5f5 ;
    font-size     : 12px;
}

.wrapper-head input,
.wrapper-head select {
    height : 24px;
    margin : 2px 0;
    vertical-align : middle;
}

.wrapper-head input:not(:first-child) {
    margin-left : 16px;
}

.stat-out {
    color       : #ffd700;
    font-weight : bold;
}

.corner-button {
    display  : block;
    position : absolute;
    right    : 10px;
    bottom   : 10px;
    padding  : 8px;
    background-color : #333;
    border           : 2px solid #555;
    border-radius    : 3px;
    color            : #dcdcdc;
    font-family      : sans-serif;
    text-decoration  : none;
}

.corner-button:hover {
    border-color : #ffd700;
    color        : #ffd700;
    transition   : border-color 0.2s, color 0.2s;
}

/* //// Bubbles //// */

/* Bubble Positioning */

.container-bubbles,
.wrapper-word-bubble,
.word-bubble,
.word {
    overflow : visible;
}

.container-bubbles {
    font-family : sans-serif;
    transition  : font-size 0.2s;
}

.wrapper-word-bubble {
    position       : relative;
    display        : inline-block;
    vertical-align : middle;
    transition     : margin 1s;
}

/* Bubble Settings */

.fixed-grid .wrapper-word-bubble {
    display : block;
    float   : left;
    width   : 16px;
    height  : 16px;
}

.fixed-grid:not(.reveal-words) .wrapper-word-bubble.no-word {
    width   : 0;
    height  : 0;
}

.fixed-grid .word-bubble {
    display  : block;
    position : relative;
    top      : 50%;
    left     : 50%;
       -moz-transform : translateX(-50%) translateY(-50%);
    -webkit-transform : translateX(-50%) translateY(-50%);
         -o-transform : translateX(-50%) translateY(-50%);
        -ms-transform : translateX(-50%) translateY(-50%);
            transform : translateX(-50%) translateY(-50%);
}

.reveal-words .word-bubble {
    display : block;
    float   : none;
    margin  : 0 auto;
}

.reveal-words .word {
    width    : 100%;
    position : relative;
    top      : 0;
    left     : 0;
}

.reveal-words.fixed-grid .word {
    position : absolute;
    top      : initial;
    left     : 0;
    bottom   : -1.5em;
}

.container-bubbles:not(.reveal-words) .wrapper-word-bubble.no-word {
    margin : 0;
}

.container-bubbles:not(.reveal-breaks) br {
    display : none;
}

.container-bubbles.reveal-breaks br + .wrapper-word-bubble {
    clear : left;
}

/* Word Bubbles */

.word-bubble {
    display       : inline-block;
    float         : left;
    position      : relative;
    background    : #d3d3d3;
    border-radius : 50%;
    box-shadow    : inset 200px 200px rgba(0, 0, 0, 0);
    transition    : box-shadow 0.2s;
}

.word-bubble:hover {
    z-index    : 1000;
    box-shadow : inset 200px 200px rgba(0, 0, 0, 0.4);
}

/* Words */

.word {
    display     : inline-block;
    position    : absolute;
    top         : -9999px;
    left        : -9999px;
    z-index     : 1;
    padding     : 0 2px;
    font-size   : 12px;
    line-height : 22px;
    text-align  : center;
    clear       : both;
}

.word:before {
    content : ' ';
}

/* CSS Tooltips */

.word-bubble:hover:after {
    display       : inline-block;
    position      : absolute;
    top           : 100%;
    margin        : 12px auto;
    padding       : 0 10px;
    background    : rgba(0, 0, 0, 0.8);
    border-radius : 3px;
    color         : #f5f5f5;
    font          : 12px/22px sans-serif;
    font-size     : 12px;
    white-space   : nowrap;
    content       : attr(data-title);
}