/*
Copyright 2013 OpenStack 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.
*/
@import "compass/css3";
$body-font: 'Helvetica Neue', Arial, Helvetica, sans-serif;
$heading-font: 'PT Sans', serif;

body,
p,
.short-summary .counts,
#footer ul,
.short-summary .userinfo {
    font-family: $body-font;
}
#secondaryHeader,
#questionCount,
#header,
#footer h3,
h1,
h1.section-title,
.box h2,
.question-page h1,
.short-summary h2,
.short-summary .counts .item-count,
.tag-right,
.tabBar,
.question-page .vote-number {
    font-family: $heading-font;
}
.question-page {
    .post-update-info {
        line-height: 12px;
    }
}
.post-update-info .user-info {
    margin-top: 0px;
}
.user-profile-page ul.avatars .avatar-delete {
    line-height: 7px;
    padding: 8px;
}
.user-info-table .js-avatar {
    height: 128px;
    width: 128px;
}
.js-avatar {
    height: 48px;
    width: 48px;
}
.inbox .js-avatar {
    height: 16px;
    width: 16px;
}
.user-card {
    .js-avatar-box {
        margin-right: 10px;
    }
    .js-avatar {
        height: 32px;
        width: 32px;
    }
}
.users-page .user-card .js-avatar-box {
    margin: 3px 6px 0 0;
}
.comment-controls .js-avatar {
    height: 16px;
    width: 16px;
}
#header {
    background: #e4eef1;
    border-top: 3px solid #255e6e;
    @include box-shadow(1px 1px 1px 1px #ccc);
}
.openid-signin {
    #metaNav a.signin {
        background: none;
        @include box-shadow(0 0 0 0);
    }
}
#metaNav {
    position: absolute;
    left: 200px;
    bottom: 25px;
    width: 750px;

    a {
        color: #255e6e;
        font-size: 16px;
        line-height: 16px;
        height: 16px;
        @include text-shadow(#fff 0 1px 1px);
    }

    a.signin {
        background: #e8d895;
        padding: 5px 8px;
        @include border-radius(4px);
        @include box-shadow(0 0 2px 2px white);
    }
    
    a.on {
        font-weight: normal;
        color: #e4eef1;
        background: #255e6e !important;
        @include border-radius(5px);
        @include text-shadow(0 0 0);
        @include box-shadow(0 0 2px 2px white);
    }

    #navTags,
    #navBadges,
    #navUsers,
    #navGroups,
    .help {
        background: none;
        padding: 3px 10px 6px 10px;
        margin: 0 0 0 30px;
    }

    .dropdown,
    a {
        display: inline;
        float: none;
        padding: 0;
        margin: 5px 0 0 0;
    }
    span.dropdown-toggle {
        padding: 10px;
        border-left: 1px solid #e4eef1;
        /*background: url(../images/sprites.png) no-repeat -7px -242px;*/
        position: relative;
        &.lang-nav {
            padding: 0;
        }
    }
    span.dropdown-toggle:hover {
        background: #e4eef1;
        /*background: url(../images/sprites.png) no-repeat -7px -274px;*/
        .dropdown-menu {
            background: #e4eef1;
            border-left: 1px solid #e4eef1;
            display: block;
            left: -1px;
            padding: 4px 0 10px 0;
            top: 36px;
        }
        &.lang-nav {
            .dropdown-menu {
                left: -14px;
                min-width: auto !important;
                top: 27px;
            }
        }
    }
    .dropdown-menu {
        background: #e4eef1;
        left: 26px;
        top: 22px;
        li {
            line-height: 1.9;
            padding: 0 0 0 13px;
            margin: 0;
            img {
                margin-bottom: 3px;
            }
        }
        li:hover {
            background: #666 !important;
            a {
                color: lighten(#255e6e, 50%);
            }
        }
        a {
            margin: 0;
            padding: 0;
            @include text-shadow(none);
        }
        a:hover {
            background: inherit;
            text-decoration: none;
            color: lighten(#255e6e, 50%);
            @include text-shadow(none);
        }
    }
}

#userToolsNav {
    .lang-nav {
        float: right;
        color: #255e6e;
        font-size: 16px;
        line-height: 16px;
        height: 30px;
        position: absolute !important;
        right: 0;
        ul, li {
            background: #e4eef1;
        }
        a {
            color: #255e6e;
            background: transparent;
            &:hover {
                color: lighten(#255e6e, 50%);
            }
        }
        .dropdown-menu li:hover {
            background: transparent !important;
        }
    }
}

#metaNav a:hover {
    color: #255e6e;
}
#header.with-logo #userToolsNav {
    bottom: 19px;
}
#secondaryHeader {
    background: #fff;
    border: none;
    margin-bottom: 7px;
    td.search-bar {
        padding-right: 62px;
    }
}
.scope-selector {
    font-size: 16px;
    height: 37px;
    border-bottom: 3px solid white;
    &.on,
    &:hover {
        background: none;
        border-bottom: 3px solid;
        color: #cf2f19;
        text-decoration: none;
        @include transition(0.07s, ease);
    }
    &:hover {
        color: #264D69;
    }
    &.ask-message:hover {
        color: #7a7a6b;
        border: none;
    }
    &:first-child {
        margin-left: 0;
    }
}
#homeButton {
    display: none;
}
#askButton {
    height: 42px;
    font-size: 15px;
    line-height: 42px;
    padding: 0;
    width: 168px;
    @include box-shadow(0 0 0);
}
.tabBar {
    background: none;
}
#logo img {
    height: 56px;
    margin-left: -10px;
}
#searchBar {
    @include box-shadow(inset #eee 1px 1px 2px 1px);
}
.search-drop-menu {
    position: relative;
    bottom: -42px;
    &.waiting {
        bottom: -42px;
        height: 25px;
    }
    .footer button {
        padding: 2px 6px 3px;
        @include background(linear-gradient(white, #F3F3F3 5%, rgb(245, 133, 12)));
        @include box-shadow(0 0 2px 2px white);
        @include text-shadow(0 0 0);
    }
}

#ContentRight {
    margin-top: -58px;
    margin-bottom: 58px;
}
.main-page,
.question-page {
    #ContentRight {
        background: white;
        padding-top: 2px;
    }
}
#ContentLeft {
    padding-bottom: 0;
}

.box {
    h2,
    .contributorback {
        background: none;
        text-align: left;
    }
    .inputs {
        #interestingTagInput,
        #ignoredTagInput,
        #subscribedTagInput,
        #ab-tag-search {
            width: 128px;
            height: 23px;
            line-height: 23px;
        }
    }
}

input[type="submit"].searchBtn,
input.cancelSearchBtn {
    border: 0;
    display: none;
    height: 0;
    margin: 0;
    padding: 0;
    right: -500px;
}
#searchBar input[type="button"].cancelSearchBtn {
    right: 8px;
    border: none !important;
    color: #888 !important;
    background: transparent !important;
    font-size: 23px !important;
    height: 32px !important;
    line-height: 36px !important;
    width: 32px !important;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button {
    font-family: $heading-font;
    font-weight: normal;
    border: 1px solid #e2e2e2 !important;
    padding: 4px 15px;
    color: #404040 !important;
    text-decoration: none!important;
    font-size: 12.5px;
    background: #FFFFFF;
    @include background(linear-gradient(#FFFFFF 0%, #F3F3F3 50%, #EBEBEB 100%));
    @include box-shadow(0px 1px 1px rgba(0,0,0,.5));
    @include text-shadow(#fff 0px 1px 1px);
    @include border-radius(3px);
    border-bottom-color: #a0a0a0 !important;
    border-right-color: #bababa !important;
    border-left-color: #bababa !important;
}

.comments {
    input[type="submit"],
    .controls a.button {
        color: #4b4b4b !important;
        border: none !important;
        &:hover {
            text-decoration: underline;
        }
    }
    input[type="submit"] {
        color: #1b71bd;
    }
}
input[type="submit"].link {
    border: none !important;
    color: 4b4b4b !important;
}

#footer {
    margin-top: 10px;
    .span-4,
    .span-8 {
        margin: 0;
    }
    .span-4 {
        width: 17%;
    }
    .span-8 {
        width: 32%
    }
    a,
    a:active,
    a:hover,
    a:visited,
    p {
        color: #666;
        font-size: 12px;
        line-height: 18px;
    }
    p {
        margin-top: 14px;
    }
    h3 {
        color: #de0000;
        font-size: 16px;
        margin: 0 0 8px 0;
        padding: 0;
    }
    ul {
        list-style: none;
        margin: 0;
    }
    textarea {
        display: block;
        margin: 12px 0 10px;
        width: 80%;
    }
}
.pager,
.paginator {
    margin-bottom: 0;
    padding-bottom: 0;
}

.post-comments .submit {
    line-height: inherit;
}

.question-instructions {
    margin-top: -7px;
}

body.lang-zh_CN,
body.lang-zh-cn,
body.lang-zh {
    .box {
        .inputs {
            #interestingTagInput,
            #ignoredTagInput,
            #subscribedTagInput,
            #ab-tag-search {
                width: 121px;
            }
        }
    }
    .scopes-True-True-True {
        #searchBar,
        .search-drop-menu {
            margin-left: 185px;
        }
    }
    .scopes-True-True-False {
        #searchBar,
        .search-drop-menu {
            margin-left: 114px;
        }
    }
}