/*
 * site-wide styles
 */

html, body {
    background-color: #fefefe;
}

h1, h2, h3, h4 {
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}

.highlight {
    background-color: rgba(243,243,21,0.5);
    padding: 2px;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Homepage
 */

#homepage section {
    padding: 60px 0;
}

#homepage #hero {
    padding: 220px 0;
    color: white;
    background-image: url('../slack/slack-sf-hq.jpg');
    background-size: cover;
    position: relative;
}

#homepage #hero-mask {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.6);
}

#homepage #hero-nav {
    position: absolute;
    top: 20px; right: 30px;
}

#homepage #hero-nav a {
    color: white;
}

#homepage #hero h1 {
    font-size: 8.0em;
}

#homepage #hero #townhall-logo {
    position: relative;
    top: -10px;}

#homepage #hero #slack-logo {
    width: 60px;
    margin: -10px;
}

#homepage .feature-icon {
    font-size: 8.0em;
}

#homepage .comment-image {
    width: 70px;
}

/*
 * Dashboard Pages
 */

#leaderboard #no_stats {
    padding: 120px 0;
}

#leaderboard .top-channel, #leaderboard .top-user {
    margin-bottom: 10px;
}

#leaderboard .channel-name, #leaderboard .user-name {
    font-weight: 700;
    max-width: 75%;
}
#leaderboard .channel-stats, #leaderboard .user-stats {
    color: #ccc;
    font-style: italic;
    font-size: 0.8em;
}

#leaderboard .user-avatar {
    margin-right: 5px;
    width: 40px;
}

#get_started {
    padding: 200px 0;
}

#form #join {
    width: 100%; height: 600px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

#bots .bot {
    width: 100%;
}

#bots .bot .bot-icon {
    width: 60px;
    margin-right: 18px;
}

#bots .bot .bot-meta, #bots .bot .bot-cta {
    padding: 10px 0;
}

#bots .bot h4 {
    margin: 0px;
}


/*
 * App Nav & Footer
 */

#app_nav {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px
}

#app_nav .text {
    font-weight: 700;
    font-size: 1.4em;
    position: relative;
    top: 3px; left: 5px;
}

#app_nav .link {
    font-size: 1.0em;
    margin-left: 10px;
}

#app_nav img {
    width: 30px;
}

#app_sub_nav {
    margin-bottom: 20px;
}

#footer {
    padding: 60px 0;
}


/*
 * 404
 */

#four_oh_four #hero {
    margin: 200px 0;
}

#four_oh_four h1 {
    font-size: 5.0em;
}

/*
 * Join
 */

#join #header {
    padding-top: 20px;
}

#join #team-icon {
    width: 120px;
}

#join #slack-logo {
    width: 60px;
    margin: -10px;
}

#join #branding {
    margin-top: 20px;
    display: none;
}

#join_success #header {
    padding-top: 120px;
}


/*
 * Mobile Styles
 */
@media (max-width: 600px){
    #homepage section {
        padding: 20px 0;
    }
    #homepage #hero {
        padding: 80px 0 20px;
    }
    #homepage #hero h1 {
        font-size: 4.0em;
    }
    #homepage #features .col-md-4 {
        margin-bottom: 40px;
    }
}