/**
 * illumntr website LESS source
 */

@import "bootstrap.less";
@import (reference) "theme.less";

@import "illumntr-variables.less";
@import "illumntr-fonts.less";
@import "illumntr-elements.less";

svg
{
    width:  150px !important;
    height: 150px !important;

    path {
        // fill: rgba(231, 30, 170, 0.64);
        fill: rgba(255, 205, 110, 0.6);
    }
}

#slide-metaphizzle
{
    ul {
        list-style-type: disc;
    }
}


.glyph.astronaut-with-flag
{
    svg
    {
        // margin-right: 40px;
        float:  left;
        width:  100px !important;
        height: 100px !important;
        top:    -15px;
        position: relative;
    }
}

#illumntr-logo-image {
    float: left;
    width: 300px;
    margin-right: 40px;
}


.mishiakuwan-letter
{
    text-align: justify;

    strong {
        font-weight: 500;
    }

    .slide-intro-text
    {
        font-weight: 200;
        font-size: 1.8rem;

        #salutation
        {
            .header-font;
        }

        p.body {
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .indent-text-like-list { padding-left: 40px; }

        #closing {
            margin-top: 3rem;
            margin-left: 5rem;
            font-size: 2.2rem;
        }
    }
}


#bg
{
    position: fixed;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-color: rgb(202, 202, 202);
    background-position: 50% 64%;
    background-repeat: no-repeat no-repeat;

    .illumntr-background-image(@image-name: "illumntr-soul-sister-hi-res.jpg");
}


#in-front-of-bg
{
    position: absolute;
    width: 100%;
}


#header
{
    width: 100%;

    #header-inner { width: 100%; }
    #lowtemp-logo-wrapper
    {
        width: 11rem;
        float: right;
        padding: 15px;
        margin: 0; /*12px 0 0 0;*/

        #lowtemp-logo
        {
            width: 11rem;
            padding: 0;
        }
    }
}

#main-column
{
    position: absolute;
    top: 154px;

    #main-header-menu
    {
        margin: 40px auto 40px;
        padding-left: 0;
        padding-bottom: 0;
        width: @menu-width;
        height: 60px;

        li {
            .menu-font;

            display: block;
            float: left;
            // padding: 10px 10px;
            // margin: 0 16px 0 0;
            // margin: 0;
            // margin: 10px;
            cursor: pointer;
            // background-color: fadeout(#fff, 85%);

            &.active .leaf-thing {
                background-color: #fff;
                font-weight: 500;
                color: black;
            }


            .leaf-thing {
                background-color: fadeout(#fff, 85%);
                padding: 10px 10px;
                margin: 0;
                border-top-right-radius: 16px;
                border-bottom-left-radius: 16px;
            }
        }
    }


    #logo
    {
        width: 433px;
        margin: 0 auto;
    }


    .carousel-illumntr
    {
        border-top-right-radius: 16px;
        .border-bottom-radius(16px);

        .carousel-inner {
            .center-block();
            padding-top: 0px;
        }

        .item {
            min-height: 540px;

            .slide { padding: 20px; }
            .slide-intro-text
            {
                padding: 0;
                font-size: 1.8rem;
                color: @text-color-light;
            }
        }
    }


    #carousel-illumntr-lyrics
    {
        .carousel-illumntr;
    }

    #carousel-illumntr-home
    {
        .carousel-illumntr;

        // ** each of these is a carousel slide ** //
        .item
        {
            #slide-music
            {
                .padded-left {
                    .inner { padding: 10px 10px 10px 0; }
                    iframe { float: none !important; }
                }

                .release {
                    margin: 1rem auto;

                    h1 { margin-bottom: 3rem; }

                    .glyphicon {
                        font-size: 3rem;
                        margin-right: 20px;
                    }

                    .track-name
                    {
                        margin-bottom: 4rem;

                        h1 {
                            // margin-top: 145px;
                            margin-top: 50px;
                            .header-font;
                        }
                    }
                }
            }

            #slide-shows
            {
                font-size: 2.5rem;

                .shows
                {
                    th, td {
                        padding: 20px 30px;
                    }

                    .show-row
                    {
                        font-weight: 200;

                        .city, .blurb      { font-size: 1.6rem; }
                        .date, .venue-name { .header-font; }

                        .venue-name { font-size: 2.6rem; }
                        .date       { font-size: 1.8rem; }

                        .ticketingURL
                        {
                            font-weight: 700;

                            a {
                                .futura-font(400);
                                text-transform: uppercase;
                                font-size: 2rem;
                            }
                        }
                    }

                }

            }

            #slide-about
            {
                .futura-font(400);
                font-size: 2.1rem;

                strong { .futura-font(500); }

                h1 {
                    .futura-font(500);
                    margin-top: 0;
                    margin-bottom: 3.2rem;
                    font-size: 2.8rem;
                    text-transform: uppercase;
                }

                .glyph, .glyphicon {
                    width: 150px;
                    height: 150px;
                    margin: 0 auto;
                }

                .glyphicon
                {
                    font-size: 13rem;
                    margin: 40px auto 0;
                    width: 150px;
                    display: block;
                    color: @text-color-light;
                }

                .row {
                    min-height: 250px;
                }

                // .glyph-icon-alien, .glyph.icon-alien {
                //     width: 125px;
                //     height: 125px;
                // }

                // .glyph-icon-unicorn, .glyph.icon-unicorn {
                //     width: 180px;
                //     height: 180px;
                // }

                #triangle-placeholder
                {
                    padding-top: 40px;
                    margin: 0 auto;
                    width: 131px;
                    height: 148px;
                }

                .container
                {
                    text-align: justify;
                    padding: 50px;
                    margin-bottom: 100px;

                    &.who-are-we
                    {
                        .illumntr-background-image(@image-name: "2014.03.21--webster-hall--from-instagram.jpg");
                        background-position: 50% 30%;
                    }

                    &.what-are-we-doing
                    {
                        .illumntr-background-image(@image-name: "bryn-on-stage--greyscale.jpg");
                        background-position: 50% 30%;
                        background-size: 120%;
                    }
                }
            }

            #slide-booking
            {
                .futura-font(400);
                font-size: 2rem;
            }
        }
    }
}




.slash {
    color: @blue;
}

#juju
{
    .futura-font(400);

    // color: @text-color;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size:      10px;
    margin:         0; //22px 0;
}

#juju, #links, #inquiries {
    margin-bottom: 1em;
}

#links {
    color: #00B7FF;
    font-size: 1.4em;
}



//-- main top header logo --//

#illumntr-name
{
    margin-bottom: 10px;
    margin-top: 40px;

    img {
          width: 300px;
    }
}


.lyrics
{
    font-size: 2rem;

    .section
    {
        margin-bottom: 2rem;

        .heading
        {
            font-weight: 700;
            font-size: 1.5em;
            margin-bottom: 1rem;
        }
    }
}