// Table of Contents
//
// 01. Variables
// 02. Global styles
// 03. Header
// 04. Footer
// 05. Debates
//   05.1. Debates Index
//   05.2. Debates Show
// 06. Comments
// 07. Tags
//

// 01. Variables
// - - - - - - - - - - - - - - - - - - - - - - - - -

$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$line-height: rem-calc(24);

$background:        #F9F9F9;
$border:            #DEE0E3;
$brand:				#0077B9;

$debates:           #008CCF;

$comments-bg:       #FAF9F8;
$comments-info:     #A5B2B9;
$comments-text:     #3F4549;


$header-color:		#292B33;
$link:              #0077B9;

$tags-bg:           #FAFAFA;
$tags-border:       #F0F0F0;
$tags-color:        #8F8F8F;

$text-color:        #919399;
$text-medium:       #999999;
$text-light:        #a3a6ad;

$votes-background:  #EDEDED;
$votes-border:      #DEE0E3;
$votes-dislike:     #EF8585;
$votes-dislike-b:   #D26463;//FF7978;
$votes-like:        #7BD2A8;
$votes-like-b:      #56A47D;

// 02. Global styles
// - - - - - - - - - - - - - - - - - - - - - - - - -

*, html {
    margin: 0;
    padding: 0;
}

body {
    background: white;
    font-family: $font-family-sans-serif;
    font-size: rem-calc(13);
    font-weight: normal;

    p {
        font-weight: normal;
    }
}

.row {
    max-width: 1170px;
}

.row-full {
    max-width: 100% !important;
}

.clear {
    clear: both;
}

.inline-block {
    display: inline-block;
}

// 03. Header
// - - - - - - - - - - - - - - - - - - - - - - - - -

header {
    background: url('home_header_bg.jpg');
    background-position: 50% 50%;
    background-size: cover;
    min-height: $line-height*20;

    &.results {
        min-height: $line-height*8;
    }

    h1 {
        color: white;
        font-size: rem-calc(45);
        font-weight: bolder;
        line-height: $line-height*3;
        margin: $line-height 0 0 0;
        padding: 0;
    }

    h2 {
        @extend h1;
        font-size: rem-calc(24);
        font-weight: normal;
        line-height: $line-height*2;
        margin: 0;
    }

    .button {
        background: none;
        border: 2px solid white;
        color: white;
        margin-top: $line-height*2;
    }
}

.contain-to-grid {
    background: none;
}

.top-bar {
    background: white;
    color: $header-color;
    height: $line-height*4;
    max-width: 1170px !important;

    .name a {
        color: black;
        font-family: 'Lato';
        font-size: rem-calc(36);
        font-weight: lighter;
        line-height: $line-height*4;
        padding-left: 0;

        span {
            color: $brand;
            font-size: rem-calc(24);
            font-weight: normal;
        }

        img {
            margin-right: $line-height/2;
        }
    }
}

.top-bar-section {

    li:not(.has-form) a:not(.button) {
        background: white;
        color: $brand;
        line-height: $line-height*4;
    }

    li.active:not(.has-form) a:not(.button) {
        height: $line-height*4;
        line-height: $line-height*4;
    }
}

.top-links {
    color: white;
    font-size: rem-calc(14);
    height: $line-height*2;
    padding: $line-height/2 0;

    a {
        color: white;
    }
}

// 04. Footer
// - - - - - - - - - - - - - - - - - - - - - - - - -





// 05. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -

// 05.1. Debates Index
// - - - - - - - - - - - -

.debates-index {
    margin-top: $line-height;
}

.debate {

    .panel {
        background: white;
        box-shadow: 0 2px 0 rgba(0,0,0,.1);

        .fi-comment-quotes {
            color: $debates;
            font-size: rem-calc(36);
            line-height: $line-height;
            margin-bottom: $line-height*0.77;
        }

        .fi-price-tag {
            color: $text-color;
            font-size: rem-calc(18);
            line-height: $line-height;
        }

        .label {
            margin-top: $line-height/4;
        }

        h3 {
            margin: 0;
            font-weight: bold;

            a {
                clear: both;
                color: $header-color;
                display: block;
                font-size: rem-calc(16);
                line-height: $line-height;
            }
        }

        p {
            color: $text-color;
            font-size: rem-calc(13);
            line-height: $line-height;
            margin-bottom: $line-height;
        }
    }

    .votes {
        background: $votes-background;
        margin: -5px -20px -20px -20px;
        padding: 1.25rem 1.25rem 0 1.25rem;

        .fi-like {
            color: $votes-like;
            font-size: rem-calc(48);
            line-height: $line-height*2;
        }

        .fi-dislike {
            color: $votes-dislike;
            display: inline-block;
            font-size: rem-calc(48);
            line-height: $line-height*2;
            padding-top: $line-height/3;
        }

        .in-favor {
            color: $votes-like;
            line-height: rem-calc(48);
            vertical-align: top;

            span {
                display: inline-block;
                line-height: 48px;
                padding-top: 5px;
                vertical-align: top;
            }
        }

        .against {
            @extend .in-favor;
            color: $votes-dislike;
            display: inline-block;
        }

        .total-votes {
            font-size: rem-calc(12);
            line-height: $line-height*2;
        }

        .divider {
            background: rgba(0,0,0, .1);
            display: inline-block;
            height: 3rem;
            margin: 0 .5rem;
            width: 1px;
        }
    }
}

// 05.2. Debates Show
// - - - - - - - - - - - -

.debate-show {
    color: $text-medium;
    margin-top: $line-height;
    margin-bottom: $line-height*2;
    padding: 0 $line-height/2;

    .back {
        color: $text-light;
        font-size: rem-calc(13);
        line-height: $line-height;
    }

    h1 {
        clear: both;
        font-size: rem-calc(24);
        font-weight: bold;
        line-height: $line-height*1.3333;
        margin: 0;
        padding-top: $line-height/2;
    }

    .debate-info {
        color: $text-light;
        font-weight: lighter;
        line-height: $line-height*2;
        margin-bottom: $line-height*0.5;
        text-align: justify;

        span {
            color: $border;
        }

        p {
            font-size: rem-calc(14);
            line-height: $line-height;
            margin-bottom: 0;
        }
    }

    .author-photo {
        border-radius: 2px;
        display: inline-block;
        height: 32px;
        line-height: $line-height*2;
        margin-right: $line-height/4;
        vertical-align: middle;
        width: 32px;
    }

    .votes {
        border: 1px solid $votes-border;
        box-shadow: 0 2px 0 rgba(0,0,0,.1);
        border-radius: 3px;
        padding: $line-height/2;

        .fi-like {
            background: $votes-like;
            border: 1px solid $votes-like-b;
            border-radius: $line-height*2.5;
            color: white;
            display: block;
            font-size: rem-calc(48);
            height: $line-height*2.5;
            line-height: $line-height*2.5;
            width: $line-height*2.5;
        }

        .fi-dislike {
            background: $votes-dislike;
            border: 1px solid $votes-dislike-b;
            border-radius: $line-height*2.5;
            color: white;
            display: block;
            font-size: rem-calc(48);
            height: $line-height*2.5;
            line-height: $line-height*2.5;
            width: $line-height*2.5;
        }

        .in-favor {
            color: $votes-like;
            line-height: rem-calc(48);

            span {
                display: inline-block;
                font-size: rem-calc(18);
                font-weight: bold;
                line-height: $line-height;
                padding-top: $line-height/4;
                vertical-align: top;
            }
        }

        .against {
            @extend .in-favor;
            color: $votes-dislike;
        }

        .total-votes {
            font-size: rem-calc(14);
            margin: 0;
        }

        .divider {
            background: rgba(0,0,0,.05);
            display: inline-block;
            height: $line-height*4;
            margin: 0 $line-height;
            width: 1px;
        }
    }

    .publish-comment {
        margin-top: $line-height;
    }
}

// 06. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -

.comments {
    background: $comments-bg;
    background-image: url('comments_divider.png');
    background-repeat: repeat-x;
    padding-top: $line-height;
    padding-bottom: $line-height*4;

    h2 {
        margin: 0;
        font-weight: bold;
    }

    .comment {
        margin: $line-height/4 0;

        p {
            color: $comments-text;
            font-size: rem-calc(15);
            margin-bottom: 0;
        }

        a {
            color: $comments-info;
        }

        .user-photo {
            border-radius: 2px;
            display: inline-block;
            height: 32px;
            line-height: $line-height*2;
            margin-right: $line-height/4;
            vertical-align: top;
            width: 32px;
        }

        .comment-body {
            margin-left: $line-height*1.6;

            .reply {
                font-size: rem-calc(12);
                font-weight: lighter;
            }
        }

        .comment-children {
            border-left: 1px dotted $border;
            margin-left: $line-height*1.6;
            padding-left: $line-height/4;

            @media only screen and (max-width: 40em) {
                margin-left: $line-height/1.5;
            }
        }

        .comment-info {
            color: $comments-info;
            font-size: rem-calc(13);
            font-weight: lighter;
            vertical-align: middle;
        }
    }
}

// 07. Tags
// - - - - - - - - - - - - - - - - - - - - - - - - -

.tags a {
    background: $tags-bg;
    border: 1px solid $tags-border;
    border-radius: 3px;
    color: $tags-color;
    font-size: rem-calc(13);
    margin-bottom: 8px;
    margin-right: $line-height/3;
    padding: $line-height/4 $line-height/3;

    &:hover {
        color: $link;
        cursor: pointer;
        background: #e5f1f8;
        border: 1px solid $brand;
    }

}