/* 
    Document   : base
    Created on : Sep 22, 2012, 7:29:15 PM
    Author     : pixelshaded
    Description:
        Purpose of the stylesheet follows.
*/

@left-padding: 11.25em;
@right-padding: 11.25em;

@bluetext: #0087c8;
@darkgreytext: #333333;
@greytext: #666666;
@lightgreytext: #b6b6b6;

root { 
    display: block;
}

html { 
    font-size:100%; 
}

body {
    padding: 0 0 1.875em 0;
    margin: 0;
    font-family: 'Exo', sans-serif;
    font-size: 16px;
}

a
{
    outline : none;
}

a img
{
    outline: none;
}

img
{
    border: 0;
}

iframe
{
    margin: 0.625em auto;
    display: block;
}

video
{
    margin: 0.625em auto;
    display: block;
}

hr
{
    border: 0.062em solid #808080;
    clear: both;
}

form
{
    position: relative;
}

form div
{
    vertical-align: top;
}

label
{
    display: inline-block;
    width: 6.25em;
    margin: 0.125em 0;
    vertical-align: top;
    
}

input
{
    margin: 0.125em 0;
    width: 12.5em;
}

textarea
{
    width: 31.25em;
    height: 12.5em;
    margin: 0.125em 0;
    border: 0.125em inset; 
}

#header
{
    width: 100%;
    
    #info-bar-container
    {
        background-color: #002133;
    }
    #info-bar
    {
        width: 58.75em;
        margin: auto;
        position: relative;
        padding: 0.625em 0;
    }    
    #namebar
    {
        p
        {
            color: @bluetext;
            margin: 0;
            padding: 0;
            font-size: 2.5em;
            font-weight: 900;
            line-height: 90%;
            text-transform: uppercase;
        }
        p:last-child
        {
            font-size: 1em;
            font-weight: 400;
            line-height: 136%;
        }
    }    
    #socialbar
    {
        position: absolute;
        right: 0;
        bottom: 0.625em;
    }
    #navbar-container
    {
        //background-color: #9f9f9f;
        background: url('/img/navbar.jpg') repeat;
        font-size: 1em;
    }
    #navbar
    {
        width: 58.75em;
        margin: auto;
        
        ul
        {
            margin: 0;
            padding: 0;
            z-index: 10;
        }
        li
        {
            display: inline-block;
            line-height: 2.813em;
            padding-right: 2.4em;
            position: relative;
            
            ul
            {                
                display: none;
                position: absolute;
                background-color: #9f9f9f;
                padding-left: 1.25em;
                left: -1.25em;
                border: 0.062em solid #666666;
                border-top: 0;
                
                li
                {
                    display: block;
                }
            }
        }
        li:hover > ul
        {
            display: block;
        }
        a:link
        {
            color: @darkgreytext;
            text-decoration: none;
        }
        a:visited
        {
            color: @darkgreytext;
            text-decoration: none;
        }
        a:hover
        {
            color: @darkgreytext;
            font-weight: normal;
            text-decoration: underline;
        }
        a:active
        {
            color: @darkgreytext;
            text-decoration: none;
        }
    }
}

#wrapper
{
    width: 60em;
    margin: auto;
    
    #content
    {
        .content-wrapper
        {
            padding: 0 0.625em 0 0.625em;
        }
    
        #category 
        {
    
            padding: 0 0.625em 0 0.625em;

            h1, h2
            {
                text-transform: uppercase;
                color: @bluetext;
            }

            h1
            {
                font-size: 6.25em;
                margin: 0 0 -0.25em 0; 
            }

            h2
            {
                font-size: 1.25em;
                font-weight: normal;
                margin: 0;
            }

            p
            {
                color: #4d4d4d;
                padding: 1.875em 0 1.875em 0;
                margin: 0; 
            }
        }
    
        #project
        {
            padding: 0 0.625em 0 0.625em;
        }
        
        #login-wrapper, #register-wrapper
        {
            padding: 0.625em 0.625em 0 0.625em;

            #login, #register
            {
                position: relative;
            }
        }
        
        #aboutme
        {
            color: @bluetext;
            padding: 1.25em 0.625em 4.375em 0.625em;
            margin: 0;
            font-size: 1.125em;
            line-height: 150%;
        }
    }
}

#footer
{
    position: relative;
    font-family: 'Exo', sans-serif;
    font-size: 1.125em;
    clear: both;
    
    #navbar-footer
    {
        padding-left: 0.625em;
        font-weight: normal;
        
        ul
        {
            margin: 0;
            padding: 0;
        }        
        li
        {
            display: inline-block;
            padding-right: 1.25em;
        }
        a
        {
            color: @greytext;
            text-decoration: none;
        }
        a:visited
        {
            color: @greytext;
            text-decoration: none;
        }
        a:hover
        {
            color: @greytext;
            text-decoration: underline;
        }
    }
    
    #copyright
    {
        position: absolute;
        padding-right: 0.625em;
        bottom: 0;
        right: 0;
        
        p
        {
            padding: 0;
            margin: 0;
            color: @lightgreytext;
        }
    }
}

#content .error
{
    color: @bluetext;
}

.category
{
    padding: 0.625em 0;
    
    .category-title
    {
        color: @bluetext;
        font-size: 1.25em;
    }
    
    .category-subtitle
    {
        font-style: italic;
    }
}

form.delete
{
    border: 0.125em solid red;
    padding: 0.625em;
}

h1, h2, h3, h4, h5
{
    color: black;
}

a:link, a:visited, a:hover, a:active
{
    color: @bluetext;
    text-decoration: underline;
}

#gallery
{
    width: 58.75em;
    height: 33.125em;
    position: relative;
    
    img
    {
        width: 58.75em;
        height: 33.125em;
    }
    
    .title-wrapper
    {
        width: 58.75em;
        position: absolute;
        bottom: 0;
        left: 0;
        color: white;
        
        background: -moz-linear-gradient(left,  rgba(0,135,200,1) 0%, rgba(0,135,200,0.7) 38%, rgba(0,135,200,0) 80%, rgba(0,135,200,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,135,200,1)), color-stop(38%,rgba(0,135,200,0.7)), color-stop(80%,rgba(0,135,200,0)), color-stop(100%,rgba(0,135,200,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(0,135,200,1) 0%,rgba(0,135,200,0.7) 38%,rgba(0,135,200,0) 80%,rgba(0,135,200,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  rgba(0,135,200,1) 0%,rgba(0,135,200,0.7) 38%,rgba(0,135,200,0) 80%,rgba(0,135,200,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  rgba(0,135,200,1) 0%,rgba(0,135,200,0.7) 38%,rgba(0,135,200,0) 80%,rgba(0,135,200,0) 100%); /* IE10+ */
        background: linear-gradient(to right,  rgba(0,135,200,1) 0%,rgba(0,135,200,0.7) 38%,rgba(0,135,200,0) 80%,rgba(0,135,200,0) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0087c8', endColorstr='#000087c8',GradientType=1 ); /* IE6-9 */

        text-transform: uppercase;
        
        .project-title
        {
            font-weight: bold;
            font-size: 6.25em;
            margin: 0 0 -0.25em 0.2em;
        }
        
        .project-gallery
        {
            font-size: 1.25em;
            margin: 0 0 1em 1em;
            
            a
            {
                color: white;
            }
        }
    }
}

#project-slider
{
    overflow: hidden;
    width: 60em;
    height: 21.875em;
    margin: 1.562em 0;
    position: relative;
    
    #projects
    {
        padding: 0;
        margin: 0;
        position: absolute;
        white-space: nowrap;
        
        .project
        {
            margin: 0;
            padding: 0 0.625em;
            white-space: normal;
        }
    }
}

#gallery-slideshow
{
    .gallery-lightbox
    {
        display: none;
    }
}

#slideshow-container
{
    //background-color: #3c3c3c;
    background: url('/img/slideshow.jpg') repeat;
    border-bottom: 0.5em solid #212121;
    overflow: hidden;

    #slideshow
    {
        width: 60em;
        height: 22.5em;
        margin: auto;
        position: relative;
        padding: 0;
        
        #image-box
        {
            position: relative;
            
            .title-wrapper
            {
                position: absolute;
                top: 0;
                left: 0;
                color: white;
                text-transform: uppercase;
                text-shadow: 0.125em 0.125em 0.125em #000;
                width: 40em;
                padding-bottom: 0.625em;
                
                background-color: rgba(0, 0, 0, 0.1);
                
                .project-title
                {
                    font-size: 4.375em;
                    font-weight: bold;
                    margin-bottom: -0.25em;
                    margin-left: 0.28em;
                    
                    a
                    {
                        color: white;
                        text-decoration: none;
                    }
                    
                    a:hover
                    {
                        text-decoration: underline;
                    }
                    
                    width: 40em;
                }
                
                .project-subtitle
                {
                    font-size: 1.25em;
                    font-weight: 600;
                    width: 40em;
                    margin-left: 1em;
                }
                
                .project-tagline
                {
                    font-size: 1.25em;
                    font-weight: 200;
                    width: 40em;
                    margin-left: 1.25em;
                }
            }
        
            #current-image, #current-image img
            {
                width: 40em;
                height: 22.5em;
                display: inline-block;
            }
        }
        
        #carousel
        {
            
            width: 20em;
            height: 22.5em;
            position: absolute;
            right: 0;
            top: 0;
            overflow: hidden;
            
            ul
            {
                padding: 0.625em 0 0 0;
                margin: 0 0 0 0.625em;
                position: absolute;
                top: 0;
            }
            
            img, li
            {
                width: 19.375em;
                height: 10.312em;
                margin: 0;
            }
            
            li
            {
                list-style-type: none;
                padding-bottom: 0.625em;
            }
        }
    }
}

#projects
{    
    padding: 1.562em 0;
    
    .project
    {
        padding: 0 0.5em;
        width: 18.75em;
        color: @greytext;
        
        margin: 1.562em 0;
        display: inline-block;
    
        img
        {
            width: 18.75em;
            height: 10.625em;
        }
        
        .title-wrapper
        {
            padding: 0.625em 0;
        }
        
        .project-title
        {
            font-size: 1.5em;
            text-transform: uppercase;
            font-weight: 600;
            color: @bluetext;
        }
        
        .project-subtitle
        {
            font-size: 1.125em;
        }
        
        .project-intro
        {
            font-size: 0.875em;
            height: 5.875em;
            overflow: hidden;
        }
    }
}

#project-content
{
    width: 38.75em;
    float: left;
    margin: 1.25em 0 6.25em 0;
    
    p:first-child
    {
       margin-top: 0; 
    }
}

#project-subcontent
{
    width: 18.75em;
    float: right;
    margin: 1.25em 0 6.25em 0;
    
    p
    {
        margin: 0;
        padding: 0;
    }
    
    td:first-child
    {
        color: #878787;
        font-weight: 200;
        width: 50%;
    }
    
    td:last-child
    {
        color: #4d4d4d;
        font-weight: 600;
        width: 50%;
    }
    
    td
    {        
        font-size: 1.125em;
        vertical-align: top;
        padding-bottom: 1.875em;
    }
}

.gallery
{
    padding: 0.75em;
    margin: 0.625em 0;
    border: 0.062em solid black;
    
    .gallery-image
    {
        display: inline-block;
        padding: 0.625em;
        position: relative;
    
        img
        {
            border: 0.125em solid black;
            margin: 0;
            padding: 0;
        }
        
        img.cover
        {
            border: 0.125em solid red;
            margin: 0;
            padding: 0;
        }
        
        .image-controls
        {
            position: absolute;
            bottom: 1.25em;
            right: 1.25em;
            display: none;
            z-index: 10;
        }
    }
}

.content-wrapper .thumbnail
{
    img 
    {
        border: 0.125em solid black;
    }
    
    img.cover
    {
        border: 0.125em solid red;
    }
}

.cover-compare
{
    .thumbnail
    {
        display: inline-block;
        padding-right: 1.25em;
    }
}

.galleries-wrapper
{
    margin: 1.25em 0;
}

#demoreel, #contactme
{
    margin: 1.25em 0;
}

.content-wrapper h1
{
    text-transform: uppercase;
    color: @bluetext;
    font-size: 2.5em;
}