// style.scss
@import url(https://fonts.googleapis.com/css?family=Lato:300,700);

@import "bourbon/app/assets/stylesheets/bourbon";
@import "meyer-reset/stylesheets/meyer-reset";

body {
    background: #f9f9f9;
    color: #333;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
}

b {
    font-weight: 700;
}

header {
    background: #333;
    padding: 20px 15px;
}

.app-title {
    margin-bottom: 20px;

    img {
        margin-right: 4px;
    }

    span {
        font-size: 24px;
        vertical-align: bottom;
    }
}

.artwork img {
    height: auto;
    max-width: 100%;
}

.chart-nav {
    a {
        color: black;
    }
}

.current-week {
    padding: 0 5px 0 5px;
}

.wrap {
    margin: 40px auto;
    max-width: 960px;
}

.panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.panel-header {
    border-bottom: 1px solid #ddd;
    font-size: 20px;
    font-weight: 700;
    padding: 20px 1rem;
}

.dropdowns {
    text-align: right;
}

.table {

    .row {
        border-bottom: 1px solid #eee;
        padding: 16px 0;

        &:nth-of-type(even) {
            background: #fbfbfb;
        }

    }

    [class*="col-"]:first-child {
        text-align: center;
    }

    [class*="col-"]:last-child p {
        margin-bottom: 8px;
    }

}

.table {
    padding: 0 1rem 1rem;
}

.ion-ios-arrow-up {
    color: green;
}

.ion-ios-arrow-down {
    color: red;
}

.select-wrap {
    display: inline-block;
    float: right;
    margin-left: 10px;
    position: relative;

    select {
        @include appearance(none);
        @include transition(border-color 0.2s);

        background: #fff;
        border: 2px solid #e4e4e4;
        border-radius: 3px;
        color: #555;
        display: block;
        font-family: inherit;
        font-size: 14px;
        line-height: normal;
        margin: 0;
        outline: none;
        padding: 4px 28px 6px 10px;

        &:hover,
        &:focus {
            border-color: #faa635;

        }

    }

    [class*="ion-"] {
        @include transform(translateY(-50%));
        @include transition(color 0.2s);

        color: #ccc;
        display: block;
        font-size: 12px;
        pointer-events: none;
        position: absolute;
        right: 10px;
        top: 50%;
    }

    &:hover,
    &:focus {

        [class*="ion-"] {
            color: #faa635;
        }

    }

}