$orange-color: hsl(35, 85%, 75%);
$bright-color: hsl(45, 100%, 60%);
$blue-color: hsl(200, 65%, 75%);
$grey-color: #dddddd;
$green-color: hsl(120, 65%, 75%);
$red-color: hsl(1, 80%, 75%);
$purple-color: hsl(290, 75%, 75%);

$open-quest-color: $orange-color;
$closed-quest-color: $blue-color;
$abandoned-quest-color: $grey-color;
$unclaimed-quest-color: $green-color;
$stencil-color: $red-color;
$important-color: $red-color;
$invite-color: $green-color;
$join-color: $green-color;

$mat: white;
$grey: #eee;
$dark-grey: #999; // same as bootstrap's .muted color
$text-color: #333;
$highlight: $bright-color;
$like-color: hsl(120, 30%, 40%);
$ground-color: #f5f5f5;

$base-font-size: 14px; // TODO - use everywhere
$small-font-size: 12px; // TODO - use everywhere
$base-line-height: 20px; // copied from variables.less

body { background-color: $ground-color }

// html5 outline tags - do we really need this if we don't support IE <9?
section, article, aside, footer, header, nav, hgroup {
    display:block;
}

.brand {
    font-family: doppio-one, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 {
    font-weight: 200;
}

a {
    color: darken($blue-color, 25%);
    &:hover {
        color: darken($blue-color, 35%);
    }
}

.label, .badge {
    font-weight: normal;
}

// pagers
.show-more-or-progress {
    // trying to reduce the page jerkiness
    height: 60px;
}
tbody tr.show-more > td {
    cursor: pointer;
    background-color: lighten($green-color, 10%);
    a {
        color: $text-color;
    }
    border-top: $text-color dashed 1px;
}

.twitter-share-button {
    vertical-align: middle;
}


a.mini-button {
    color: $dark-grey;

    &:hover {
        text-decoration: none !important;
        color: $text-color;
    }
}

.user-link {
    font-weight: bold;
    color: $text-color;
}

.desktop-block {
    display: none;
    @include breakpoint(B) {
        display: block;
    }
}

.mobile-block {
    display: block;
    @include breakpoint(B) {
        display: none;
    }
}

.desktop-text {
    display: none;
    @include breakpoint(B) {
        display: inline;
    }
}

.mobile-text {
    display: inline;
    @include breakpoint(B) {
        display: none;
    }
}

.desktop-inline-block {
    display: none;
    @include breakpoint(B) {
        display: inline-block;
    }
}

.mobile-inline-block {
    display: inline-block;
    @include breakpoint(B) {
        display: none;
    }
}

.widetext {
    overflow: auto;
}

.icon-twitter {
    color: #4099ff;
}

.object-bottom-line {
    font-size: $small-font-size;
}

.signin {
    button {
        width: 220px;
    }
}
.signin-large {
    line-height: 60px;
}

td {
    background-color: $mat;

    &:hover {
        background-color: $mat;
    }
}

.sidebar-header {
    text-align: right;
    @include bg-header;
    position: relative;
    .btn-mini {
        position: relative;
        top: -3px;
    }
}

a.grey-link {
    @include grey-link;
}

.not-found {
    margin-top: 50px;
    font-size: 36px;
    line-height: 48px;
    @include breakpoint(A) {
        margin-top: 100px;
        font-size: 48px;
        line-height: 64px;
    }
    font-weight: 200;
    text-align: center;
    color: $dark-grey;
}
