@import "nib";
@import "../../bower_components/bootstrap/dist/css/bootstrap.css";
@import "../../bower_components/font-awesome/css/font-awesome.css";
@import "../../bower_components/textAngular/src/textAngular.css";

@import "demo";

/* Functions
 */

emCalc(h) {
    unit(h / 16, 'em');
}

/* Variables
 */

$grey1 = #eee;
$black = #333;
$color1 = rgb(77, 144, 254);
$sidebarWidth = 248px;
$contentWidth = 800px;

/* Bootstrap theme
 */
@import "bootstrap-chrome.styl";

body,
h1,
h2 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.installed-container {
    postion: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;

    & body {
        padding-top: 0px;
    }
    .header {
        border-bottom: 1px solid #f4f7f9;
        position: relative;
        width: 960px;
        margin: 0 auto;
        padding: 20px 0;
        z-index: 10;
        img {
            width: 96px;
        }
    }
    .hero {
        padding: 60px 0px 30px 0px;

        h1 {
            font-size: emCalc(72);
        }
    }
}

.browser-action-pointer {
    position: fixed;
    top: 8px;
    right: 20px;
    z-index: 10;
    width: 80px;
    height: 80px;
    padding-top: 100px;
    background: url(../../icons/installed-arrow.png) no-repeat center top;
    background-size: contain;
}

.browser-action-pointer-tip {
    position: fixed;
    top: 88px;
    right: 100px;
    z-index: 10;
    display: block;
    width: 380px;
    padding: 8px;
    background: #efefef;
    border: 1px solid #fff;
    border-radius: 2px;

    img {
        width: 24px;
        background: #fff;
        padding: 2px;
        border-radius: 2px;
    }
}

.browser-action-pointer-tip p {
    margin: 0;
}

.btn .fa {
    padding: 0 0 0 emCalc(4);
    opacity: .5;
}

/* overwrite demo styles
 */

.gorgias-demo {
    border-bottom: 1px solid #efefef;

    /*
    p {
        span {
            -webkit-transition: opacity 1s ease-in;
           -moz-transition: opacity 1s ease-in;
            -ms-transition: opacity 1s ease-in;
             -o-transition: opacity 1s ease-in;
            transition: all .1s ease-in;
        }
    }
    */
}

.gorgias-demo-frame-info {
    color: #333;
}

/* wizard steps
 */

.gorgias-wizard-step {
    display: none;
    position: relative;
}

.gorgias-wizard-show--demo .gorgias-wizard-step-demo,
.gorgias-wizard-show--language .gorgias-wizard-step-language,
.gorgias-wizard-show--types .gorgias-wizard-step-types,
.gorgias-wizard-show--try .gorgias-wizard-step-try,
.gorgias-wizard-show--custom .gorgias-wizard-step-custom {
    display: block;
}

.gorgias-wizard-step form {
    padding: emCalc(20) 0;

    font-size: 1.2em;
}

.wizard-step-status {
    display: inline-block;
    padding: emCalc(8) emCalc(30);
    margin: emCalc(40) 0 0;
    background: #efefef;
    border-radius: 12px;
}

.gorgias-wizard-step-types {

    .category {
        padding-bottom: 14px;
    }
    .category-label {
        font-size: 1.2em;
    }
}

.btn-wizard-start {
    margin: emCalc(20) auto;
}

.template-type-description {
    padding: 0 0 emCalc(4);
    opacity: .6;
}

.keyboard-key {
    padding: 2px 4px;
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 2px #f2f2f2;
    box-shadow: 0 2px 2px #f2f2f2;
}

.highlighted-text {
    font-weight: 600;
}

.gorgias-demo-hint > * {
//    display: none;
}

.gorgias-demo-hint .h {
//    opacity: 1;
//    display: block;
}

.fadein {
    -webkit-animation: fadein 1.5s; /* Safari and Chrome */
}

.fadeout {
    -webkit-animation: fadeout 2s; /* Safari and Chrome */
}


@keyframes fadein {
from {
        opacity:0;
    }
to {
        opacity:1;
    }
}

@keyframes fadeout {
from {
        opacity:1;
    }
to {
        opacity:0;
    }
}