body,html {
    font-family: "Roboto";
    background: #87D7AE;
}

.app-main {
    padding: 0 20px 0 20px;
    margin: 0;
}

/* :narrow */
@media only screen and (max-width: 480px) {
    .app-main {
        padding: 0 2px 0 2px;
    }
}

.page-width {
    margin: auto auto;
}

#app-center {
    position: absolute;
    top: 180px;
    width: 100%;
    min-height: 170px;
    height: 170px;

}

#app-bottom {
    margin-top: 18px;
    margin-bottom: 30px;
    padding-top: 160px;
}

/* :medium */
@media only screen and (min-width: 481px) and (max-width: 960px) {
    #app-center {
        height: 130px;
        min-height: 130px;
    }
}

/* :narrow */
@media only screen and (max-width: 480px) {
    #app-center {
        height: 85px;
        min-height: 85px;
        top: 100px;
    }
    #app-bottom {
        padding-top: 140px;
    }
}

/*************** loading *****************/

#loading-div {
    color: #FFFFFF;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}

.loading-h2 {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 70%;
    margin: 0; /* or bootstrap will add it */
    color: #EEE;
}

#loading-div img {
    position: absolute;
    bottom: -1px;
    border: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
}

/* :narrow */
@media only screen and (max-width: 480px) {
    .loading-h2 {
        font-size: 0.8em;
        bottom:90%;
    }

    #loading-div img {
        width: 48px;
        height: 48px;
    }
}

/* :medium */
@media only screen and (min-width: 481px) and (max-width: 960px) {
    .loading-h2 {
        font-size: 1.6em;
        bottom: 90%;
    }
}

/*
  https://css-tricks.com/snippets/css/keyframe-animation-syntax/
*/

@-moz-keyframes spin {
    25%  { -moz-transform: translate(150px,0px) rotate(360deg); }
    50%  { -moz-transform: translate(0px,0px) rotate(0deg); }
    75%  { -moz-transform: translate(-150px,0px) rotate(-360deg); }
    100% { -moz-transform: translate(0px,0px) rotate(0deg); }
}

@-webkit-keyframes spin {
    25%  { -webkit-transform: translate(150px,0px) rotate(360deg); }
    50%  { -webkit-transform: translate(0px,0px) rotate(0deg); }
    75%  { -webkit-transform: translate(-150px,0px) rotate(-360deg); }
    100% { -webkit-transform: translate(0px,0px) rotate(0deg); }
}

@keyframes spin {
    25%  { transform: translate(150px,0px) rotate(360deg); }
    50%  { transform: translate(0px,0px) rotate(0deg); }
    75%  { transform: translate(-150px,0px) rotate(-360deg); }
    100% { transform: translate(0px,0px) rotate(0deg); }
}

#loading-img {
    -webkit-animation: spin 16s linear infinite;
    -moz-animation: spin 16s linear infinite;
    animation: spin 16s linear infinite;
}

/*************** header *****************/

.page-header {
    margin: 0;
    padding: 20px 0px 10px 0px;
    background: #363636;
    text-align: center;
    border-bottom: 0; /* or bootstrap adds it */
    border-bottom: 10px solid #FFFFFF;
    padding-bottom: 200px;
    background: #363636 url(../images/header-bg.png) no-repeat center bottom;
}

.page-header a {
    display: block;
    margin-top: 20px;
}

.page-header h1, .page-header h1 small {
    color: #FFFFFF;
    font-weight: 300;
}

.logo {
    height: 40px;
    background: url("../images/logo.png");
    margin: auto auto;
    background-position: center;
    background-repeat: no-repeat;
}

/* :narrow */
@media only screen and (max-width: 480px) {
    .page-header {
        padding: 4px 0px 120px 0px;
    }

    .page-header a {
        display: block;
        margin-top: 2px;
    }

    .page-header h1 {
        font-size: 1.25em;
        margin: 0;
    }

    .page-header h1 small {
        display: none;
        visibility: hidden;
    }

    .logo {
        height: 40px;
        background: url("../images/replumb_logo_img.png");
        margin: auto auto;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media only screen and (min-width: 481px) and (max-width: 960px) {
    .page-header {
        padding-bottom: 160px;
    }
}

/* This overrides hljs's style, therefore it must go after */
.hljs {
    display: inline;
    overflow-x: auto;
    padding: 0;
    border: 0;
    background: #FFFFFF;
}

.cljs-btn > i {
    color: #FFFFFF;
}

.rc-icon-disabled {
    opacity: 0.4;
}

/*************** footer *****************/

#app-footer-container {
    color: #FFFFFF;
    margin-top: 10px;
    background: #475b51;
}

.page-footer {
    padding: 15px;
}



.app-footer-btn {
    color: #FFFFFF;
    background-color: transparent;
    border-color: #FFFFFF;
    margin: 2px;
    padding: 4px 8px;
}

.app-footer-btn:hover {
    color: #65B58C;   /* Needed for plain text like Blog */
    background-color: #FFFFFF;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}

.app-footer-btn:hover > div > i {
    color: #65B58C;
    background-color: #FFFFFF;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}

/*********************/
/***   API Panel   ***/
/*********************/

.rc-line { display: none }

.api-panel-section {
    background-color: #65B58C;
    padding: 10px 10px 10px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.api-panel-popup-section-title {
    font-family: "Roboto";
    text-align: center;
    text-transform: uppercase;
}

/* :wide */
.api-panel-section-title {
    font-family: "Roboto";
    font-size: 1.5em;
}

/* :narrow */
@media only screen and (max-width: 480px) {
    /* Center the section title only when we display 1 column */
    /* AR - changed to follow the other media queries */
    .api-panel-section-title {
        text-align: center;
        display:block;
    }
    .api-panel-section {
        padding: 10px;
    }
}

/* :medium */
@media only screen and (min-width: 481px) and (max-width: 960px) {
    /* Center the section title only when we display 1 column */
    /* AR - changed to follow the other media queries */
    .api-panel-section-title {
        text-align: center;
        display:block;
    }
}

.api-panel-topic {
    text-transform: uppercase;
    font-family: "Roboto";
}

/* problem here, see https://github.com/Day8/re-com/issues/76 */
.api-panel-topic-box > div {
    -webkit-flex: 0 1 auto !important;
    flex: 0 1 auto !important;
}

/* problem here, see https://github.com/Day8/re-com/issues/76 */
.api-panel-symbol-label-box > div {
    -webkit-flex: 0 1 auto !important;
    flex: 0 1 auto !important;
}

.api-panel-symbol-button {
    margin: 2px 2px;
    min-width: 50px;
    padding:5px;
    cursor:pointer;
    font-family: monospace;
    font-size:0.8125em;
}

.api-panel-symbol-label {
    font-weigth: bold;
    font-family: monospace;
    color: #FFFFFF;
}

.api-panel-signature {
    font-family: monospace;
}

/* problem here, see https://github.com/Day8/re-com/issues/76 */
.api-panel-button-send-repl-box > div {
    -webkit-flex: 1 0 auto !important;
    flex: 1 0 auto !important;
    margin: 0;
}

.api-panel-number-icon {
    border: 0;
    margin: 0;
    padding: 0;
}

.api-panel-send-repl-img {
    margin: 4px;
    -moz-margin-start: 6px;
    -webkit-margin-start: 6px;
    width: 28px;
    height: 28px;
}

.api-panel-button-send-repl {
    align-items: stretch !important;
    border: 0;
}

.api-panel-button-send-repl:hover {
    fill: #ACE63C;
}

.popover-content code {
    color: inherit;
    background-color: inherit;
    border: none;
}

/*********************/
/***     Tour      ***/
/*********************/


.rc-v-box .rc-popover-anchor-wrapper .rc-point-wrapper {
    align-items: stretch !important;
    /*flex: 0 1 auto !important;*/
    /*flex-flow: row !important;*/
}

.rc-v-box .rc-popover-anchor-wrapper .rc-point-wrapper .rc-popover-point {
    align-self: center !important;
}

h1.tour-title {
    margin-top: 5px;
    color: rgba(68, 68, 68, 0.6);
    font-weight: bold;
    font-size: 17px;
}

ul.tour {
    -webkit-padding-start: 20px;
    padding-start: 20px;
}

.symbol {
    font-weight: bold;
    color: #a50;
    font-size: 110%;
}

.mode {
    display:inline-block;
    color: #a50;
    padding: 4px;
    font-size: 95%;
    border: 1px solid rgba(128, 128, 128, 0.15);
    border-radius: 5px;
    background-color: #eee;
}

a.tour {
    color:#337ab7;
    text-decoration: none;
}

/* Some examples contains tables in their markdown.
 * These tables have a class of "code-tbl-9bef6"
 * see: http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes
 */

table[class^="code-tbl-"], table[class*=" code-tbl-"] {
    width: 100%;
}

table[class^="code-tbl-"] td, table[class*=" code-tbl-"] td {
    padding-right: 5px;
    vertical-align: top;
}

.ribbon {
    background-color: #87D7AE;
    overflow: hidden;
    white-space: nowrap;
    /* top left corner */
    position: absolute;
    width: 220px;
    left: -50px;
    top: 40px;
    /* 45 deg ccw rotation */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* shadow */
    -webkit-box-shadow: 0 0 10px #888;
    -moz-box-shadow: 0 0 10px #888;
    box-shadow: 0 0 10px #888;
}

.ribbon a {
    border: 1px solid #CCD7D1;
    color: #FFFFFF;
    display: block;
    font: bold 81.25% 'Roboto';
    margin: 1px 0;
    padding: 10px 50px;
    text-align: center;
    text-decoration: none;
    /* shadow */
    text-shadow: 0 0 5px #444;
}

/* :narrow */
@media only screen and (max-width: 480px) {
    .ribbon {
        width: 140px;
        left: -40px;
        top: 16px;
    }

    .ribbon a {
        padding: 6px 36px;
        font: bold 50% 'Roboto';
    }
}

/* :medium */
@media only screen and (min-width: 481px) and (max-width: 960px) {
    .ribbon {
        width: 180px;
        left: -46px;
        top: 28px;
    }

    .ribbon a {
        padding: 6px 36px;
    }
}

/* override re-console style */

/* :wide */
.re-console-container {
    /*  Note that this element must be explicity sized and positioned absolute or relative. */
    position: relative;
    width: 660px;
    height: 300px;
    min-width: 300px;
    min-height: 186px;
}

.re-console-mode-line {
    font-size: 12px;
    width: 660px;
    min-width: 300px;
}

.popup-tour-console-anchor {
    width: 660px;
    min-width: 300px;
    height: 0;
}

/* :narrow */
@media only screen and (max-width: 480px) {
    .re-console-container {
        /*  Note that this element must be explicity sized and positioned absolute or relative. */
        position: relative;
        width: 300px;
        height: 180px;
        min-width: 120px;
        min-height: 80px;
    }

    .re-console-mode-line {
        font-size: 10px;
        width: 300px;
        min-width: 120px;
    }

    .popup-tour-console-anchor {
        width: 300px;
        min-width: 120px;
    }

    #app-bottom {
        margin-top: 28px;
    }

    .modal-tour-popup {
        width: 250px;
    }

}

/* :medium */
@media only screen and (min-width: 481px) and (max-width: 960px) {
    .re-console-container {
        /*  Note that this element must be explicity sized and positioned absolute or relative. */
        position: relative;
        width: 460px;
        height: 280px;
        min-width: 220px;
        min-height: 75px;
    }

    .re-console-mode-line {
        width: 460px;
        min-width: 220px;
    }

    .popup-tour-console-anchor {
        width: 460px;
        min-width: 220px;
    }
}

/* Styles for auto-complete */

ul.re-completion-list {
    position: absolute;
    margin: 0;
    padding: 0;
    /* left: 364px; */
    /* top: 26px; */
    min-height: 24px;
    max-height: 123px;
    width: 220px;
    overflow-y: scroll;
    border-radius: 5px;
    background-color: white;
    border: 1px solid #65B58C;
}

ul.re-completion-list li {
    font-family: Consolas,monospace;
    font-size: inherit;
    margin: 0;
    padding: 0 4px;
    list-style: none;
    white-space: pre;
    word-wrap: normal;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
}

ul.re-completion-list li:first-of-type {
    padding-top: 2px;
}

ul.re-completion-list li:last-of-type {
    padding-bottom: 2px;
}

li.re-completion-selected {
    background-color: #EEE;
}