/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/

body {
    font-size: 14px;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    background: $primary-background;
    color: $primary-text-color;
    line-height: 20px;
}

#red-ui-editor {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
#red-ui-editor-node-configs {
    display: none;
}
#red-ui-main-container {
    position: absolute;
    top:40px; left:0; bottom: 0; right:0;
    overflow:hidden;
}

#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade  {
    @include shade;
    z-index: 2;
}
#red-ui-sidebar-shade  {
    left: -8px;
    top: -1px;
    bottom: -1px;
}
#red-ui-full-shade {
    @include shade;
    z-index: 15;
}

a {
    color: #0088cc;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #005580;
    text-decoration: underline;
}

p {
    margin: 0 0 10px;
}

small {
    font-size: 85%;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

cite {
    font-style: normal;
}

ul,
ol {
    padding: 0;
    margin: 0 0 10px 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
    margin-bottom: 0;
}

li {
    line-height: 20px;
}
dl {
    margin-bottom: 20px;
}

dt,
dd {
    line-height: 20px;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 10px;
}

hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #ffffff;
}



i.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    margin-top: 0px;
    background: url(images/spin.svg) no-repeat 50% 50%;
    background-size: contain
}

code, pre {
    padding: 0 3px 2px;
    font-family: monospace;
    font-size: 14px;
    color: #333333;
    border-radius: 1px;
}

code {
    padding: 0px 3px 2px 3px;
    margin: 1px;
    color: #AD1625;
    white-space: nowrap;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 2px;
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

pre code {
    padding: 0;
    color: inherit;
    white-space: pre;
    white-space: pre-wrap;
    background-color: transparent;
    border: 0;
}

.pull-right {
    float: right;
}

.pull-left {
    float: left;
}
.hide {
    display: none;
}
.show {
    display: block;
}

img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

blockquote {
    padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 4px solid #ddd;

    p {
        font-size: 14px;
        font-weight: inherit;
        line-height: 1.25;
        color: #777;
        margin-bottom: 0;
    }
}

table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}

.red-ui-component-spinner {
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    text-align: center;
    padding: 40px;
    background: white;
    &:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
    }
    img {
        display: inline-block;
        vertical-align: middle;
        width: 80px;
    }
    &.red-ui-component-spinner-sidebar {
        background: white;
        padding:0;
        img {
            width: 40px;
        }
    }
    &.projects-version-control-spinner-sidebar {
        background: white;
        padding:0;
        img {
            width: 20px;
        }
    }

    &.red-ui-component-spinner-contain {
        padding: 0;
        img {
            width: auto;
            height: 100%;
            max-height: 50px;
        }
    }
}