@import "./config/__colors.less";
@import "./config/__grid.less";
@import "./config/__typography.less";
@import "./config/__navigation.less";
@import "./modules/mixins.less";
@import "./modules/utilities.less";

@themeBackground            : #DEEDF1;
@topbar-fontSize            : 14px;      
@topbar-bgColor             : #222;
@topbar-color               : #BBB;
@topbar-colorHover          : @white;
@img-path                   : "../img/";

body {
    background: @body-background;
}

h2 span {
    padding-right: .5em;
}

.box {
    #ink > #border-radius > .all (@border-radius);
    #ink > #shadows > .box-shadow (0, 2px, 3px, 0, #DDD);
    border:1px solid #BBB;
    background-color: #FFF;
    padding: 1em;
    margin-top:1em;
}

mark {
    font-family: Ubuntu_monospaced, Monaco, Andale Mono, Courier New, monospace; 
    font-size: .938em;
    background: @themeBackground; 
    padding:1px 3px;
}

.gridExample {

    p {
        #ink > #border-radius > .all(4px);
        padding: .8em 0;
        text-align: center;
        background: #DEEDF1;
    }
}

.ink-dropdown {
    .ink-button {
        margin: 5px 0;
    }

    &.example {

        .dropdown-menu {
            display: block;
            position:relative;
            left: 0;
        }
    }
}

/*..........................................  Typography  ...................................................*/
a.visited   {color: @link-visited-color;}
a.hover     {color: @link-hover-color; text-decoration: underline;}
a.active    {color: @link-active-color;}

/*............................................  Homepage  ...................................................*/
.whatIs {
    
    margin: 3.6em 0 2em;
    font-size: 1.25em;

    p {
        margin-top:.5em;
    }
}

#getnow {
    border-top:1px solid #888;
    padding:0.5em 0;
    margin-bottom: 1.5em;
    #ink > #shadows > .box-shadow (0, 6px, 12px, 1px, rgba(0,0,0,.1));

    a {
        text-align: center;
        font-weight: bold;
        padding:.8em;
        display: block;
        #ink > #gradients > .gradient (#2e2e2e, #222, 100%);
        #ink > #shadows > .box-shadow (0, 1px, 3px, 0, rgba(0,0,0,.5));
        #ink > #border-radius > .all (@border-radius);
        color: #FFF;
    
        &:hover {
            #ink > #gradients > .gradient (#3c3c3c, #2e2e2e, 100%);
            text-decoration: none;
        }
    }

    .large-60, .large-20, .medium-60, .medium-20, .small-100, .small-50 {
        margin:0;
    }

    p {line-height:2em;}
} 

/*..........................................  Ink-UI  ..........................................*/
.ink-button.toggleTrigger {
    margin:1em 0 0 0
}


/*..........................................  Homepage  ..........................................*/
.ink-hero {
    margin-top: 2.6em;
    background: url(@{img-path}home_bkg.png) center;
    #ink > #gradients > .multiple-stops (~'left, #e65d5b, #f3af32 14%, #e6d168 28%, #7bd369 40%, #50c6a2 55%, #a7d37c 70%, #a7b958 85%, #e35c57');
    overflow: hidden; 
}  

.logo_hp {
    width:100%;
    max-width:736px;
    max-height:330px;
    margin:0 auto;
    display: block;
    #ink > #effects > .opacity (.8);
    #ink > #effects > .transition (all, 500ms);
    
    &:hover {
        #ink > #effects > .opacity (1);
    }
}

.showcase {
    background:rgba(0,0,0,.1);
    border-top:rgba(0,0,0,.4);
    border-bottom:rgba(0,0,0,.4);
    padding: 2em 0 1em 0;

    img {
        #ink > #shadows > .box-shadow (0, 1px, 3px, 1px, rgba(0,0,0,.2));
        &:hover {
            position:relative;
            bottom:4px;
            #ink > #shadows > .box-shadow (0, 3px, 4px, 2px, rgba(0,0,0,.3));
            #ink > #effects > .transition-property (all);
            #ink > #effects > .transition-duration (120ms);
        }
    }
}

div.socialplugins {
    border:1px solid #afafaf;
    background:#eaeaea;
    padding:0.6em 0 0.6em 0.6em;
    margin-top:1em;
    margin-bottom:1em;
    #ink > #border-radius > .all (4px);
    #ink > #shadows > .box-shadow (0, 1px, 2px, 0, rgba(255,255,255,1));

    div[class*="large-"], div[class*="medium-"], div[class*="small-"] {
        margin-bottom: 0 !important;
    }

    p {
        line-height:2;
    }

    .socialwidget {
        margin-right:1em;
    }
}

/*...................................................  Footer  ...................................................*/

footer {

    div + & {
        margin-top: 0;
    }

    .vspace {
        margin: 1em 0;
    }

    .copyright {
        //margin: 0;

        .SAPOlogo {
            background: url("@{img-path}SAPOlogo.png") no-repeat scroll 0 0 transparent;
            text-indent: -9999px;
            display: block;
            width: 101px;
            height: 30px;
            margin-bottom: 1em;
        }

        .PTClogo {
            font-size: .875em;

            a {
                background: url("@{img-path}icon_Sprite.png") no-repeat 0 top;
                text-indent: -9999px;
                display: block;
                float: left;
                width: 41px;
                height: 43px;
                margin-right:1em;
            }
        }
    }

    .sociallinks {
        
        li {
            margin-left: .6em;
            *zoom:1;

            a {
                display: block;
                height: 24px;
                width: 24px;

                &.Fb_link       { background: url("@{img-path}icon_Sprite.png") no-repeat 0 -90px }
                &.Twt_link      { background: url("@{img-path}icon_Sprite.png") no-repeat 0 -118px }
                &.Gplus_link    { background: url("@{img-path}icon_Sprite.png") no-repeat 0 -146px }
            }
        }
    }

    .ink-navigation {
        ul.menu.horizontal {
            li {
                a.license {
                    padding: 0.5em 0 0.5em 0;
                }
            }
        }
    }
}

#topbar {   
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: @topbar-bgColor;
    #ink > #shadows > .box-shadows ('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)');
    z-index: @layer-100;
    -webkit-transform: scale3d(1,1,1); // Solves weird “redraw behavior” involving anchor links and fixed positioned elements in chrome.
    
    .ink-navigation {
    
        ul {
        
            li {
                font-size: @topbar-fontSize;
                a {
                    *height:auto;
                    color:@topbar-color;

                    &:hover {
                        color:@topbar-colorHover;
                    }

                    &.logoPlaceholder {
                        font-size: 2em;
                        font-weight: bold;
                        line-height: 1.4;
                        padding: 0;
                        margin-right: .5em;

                        &:hover {
                            background: none;
                        }                            
                    }
                }

                &.active {
                    a {
                        #ink > #gradients > .gradient (darken(@topbar-bgColor, 10%), lighten(@topbar-bgColor, 10%), 100%);
                        #ink > #shadows > .box-shadow (0, 0px, 2px, 0, rgba( 255, 255, 255, 0.3));
                        color:@white;
                    }
                }

                .submenu {
                    
                    #ink > #border-radius > .bottom (4px);

                    li {

                        &:last-child {
                            #ink > #border-radius > .bottom (4px);
                        }

                        a {
                            color:@black;
                            background:@white;
                            filter:none; 

                            &:hover {
                                background:lighten(@topbar-bgColor,20%); 
                                color:@topbar-colorHover;
                            }
                        }
                    }
                }
            }

            &.vertical {

                li {

                    a {

                        &.logoPlaceholder {
                            margin-right: 0;
                        }
                    }

                    button {
                        background: none;
                        border: none;
                        outline: none;
                        position: absolute;
                        top: .6em;
                        right: 0;
                        padding: 0;
                        color: @topbar-color;

                        &:hover,
                        &:focus {
                            color: @white
                        }

                        span {
                            
                            font-size: 1.5em;
                        }
                    }

                    &.title {
                        border-bottom: 1px solid lighten(@black,15%);
                        a {border-bottom: none}
                    }
                    
                    &.active {
                        a {
                            background: darken(@topbar-bgColor, 6%);
                            #ink > #shadows > .no-box-shadow ();
                        }
                    }

                    &:first-child {
                        #ink > #utils > .clearfix();
                    }
                    
                    .submenu {
                        width: auto;
                        left: auto;
                        display: block;
                        position: relative;
                        #ink > #border-radius > .none ();

                        li {

                            &:last-child {
                                #ink > #border-radius > .none ();
                            }

                            a {
                                color:@topbar-color;
                                background:@topbar-bgColor;
                                border-bottom: 1px solid lighten(@black,15%);
                                &:hover {
                                    background: lighten(@black,10%);
                                    color: @white;
                                }
                            }
                        }
                    }
                }
            }
            
            &.black {
                &.flat {
                    background:@topbar-bgColor;
                    filter:none;
                    #ink > #shadows > .no-box-shadow ();
                }
            }
        }
    
    }

    .border {
        height:.3em;
        background: url(@{img-path}home_bkg.png) center 0px;
        #ink > #gradients > .multiple-stops (~'left, #e65d5b, #f3af32 14%, #e6d168 28%, #7bd369 40%, #50c6a2 55%, #a7d37c 70%, #a7b958 85%, #e35c57');
        margin: 0;
    }
}


/* Prettyfier  */
pre {
    background: #FEFBF3;
    #ink > #shadows > .box-shadow (0px, 1px, 2px, 0, rgba(0,0,0,.1));
    font-family: Ubuntu_monospaced, Monaco, Andale Mono, Courier New, monospace;
    display: block;
    font-size: 14px;
    color: #aaa;
    
    &.prettyprint {
        border: 1px solid rgba(0,0,0,.2);
        #ink > #shadows > .box-shadow (0px, 1px, 2px, 0, rgba(0,0,0,.1));
        white-space: pre-wrap;
        padding: 1em;    
    }

    &.linenums {
        padding: 0;
    }

    ol  { 
        line-height:1.5; 
        list-style: decimal ; 
        margin: 0 0 0 1.6em; 

        li {
            word-wrap: break-word; 
            border-left: 3px solid #CCC; 
            margin:0; 
            padding: .2em 0 .2em 1em;

            &:nth-child(odd) { 
                background:#f0f0f0
            }
        }
    }

    .tag {
        color: #1E347B;
    }

    .hightlight {
        font-weight: bold; 
        color: red;
    }
}

.com                    { color: #93a1a1; }
.lit                    { color: #195f91; }
.pun, .opn, .clo        { color: #93a1a1; }
.fun                    { color: #dc322f; }
.str, .atv              { color: #268bd2; }
.kwd, .tag              { color: #195f91; }
.typ, .atn, .dec, .var  { color: #CB4B16; }

code {
    border: 1px solid #E0E0E0;
    background: #E9E9E9;
    padding: 0 4px;
}

section,
section + section {

    padding-top: 3em;
    padding-bottom: 3em;
    border-bottom: 1px solid #ccc; 

    border-top: 1em solid transparent;
    margin: -1em 0 0;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;

    &:first-child {
        padding-top: 0;
    }

    &:last-child {
        border: none;
    }
}

table.ink-table.browser-support {
    .icon-ok {
        color: @green;
    }
    .icon-remove, .icon-minus {
        color: @red;
    }
    
    tr th {        
        padding: 0.5em;
        background: lighten(@black,30%);
        color: @white;
        font-weight: 500;
        text-align: center;
    }
    th, td {
        line-height: 1.3;
    }
}
.ink-package {
    #ink > #shadows > .box-shadow (0, 1px, 5px, 0, rgba(100,100,100,.5),inset);
    #ink > #border-radius > .all (4px);
    background: @grey-5;
    padding: 1em;
    font-size: 1em;
    line-height: 1.3;
    color: @grey-70;

    strong {
        font-size: 1.0em;
    }

    span {
        color: @grey-30;
        font-family: Ubuntu_light;
        font-size: 0.95em;
    
        &.tree {
            color: @grey-70;
            font-size: 1.2em;
        }
    }
}

.live-demo {
    background: @grey-5;
    padding: 1em;
    #ink > #shadows > .box-shadow(0,1px,5px,0,rgba(100,100,100,0.5),inset);
    #ink > #border-radius > .all (4px);
    p + p {
        margin: 0;
    }
} 

.clickable {
    &:hover {
        cursor: pointer;
    }
}

.sticky {
    -webkit-transform: scale3d(1,1,1); // Solves weird “redraw behavior” involving anchor links and fixed positioned elements in chrome.
}

#ink-layout-detector {margin:0;}

@media screen and (max-width: 649px) {
    body {
        font-size: 90%;  
        line-height: 1.3; 
    }

    #topbar {   
        position: static;
    }

    .whatIs {
        margin-top: 1.6em;
    }

    .ink-hero {
        margin-top: 0;
    }

}

@media screen and (min-width: 650px) and (max-width: 959px) {

    body {
        font-size: 95%; 
        line-height: 1.4;  
    }

    #topbar {   
        position: static;
    }

    .whatIs {
        margin-top: 1.6em;
    }

    .ink-hero {
        margin-top: 0;
    }

}