public/styles/vanilla/less/app.less
/*  ###########################################################################
    Author:     Lunatech Research
    ########################################################################### */

//  This LESS file is only used for this project. Each project would require
//  its own 'app.less' file or whatever you will call it. 
//  The 'main.less' file is where you can add as many files you want.

 
/*  Layout */
    
    body { 
        margin: 0 auto;
        color: @text-color;
        min-width:  @w * 26;
        max-width:  @w * 100;
        background-color: @grey0;
        background-image: url(../images/backgrounds/back.png);
        }
    body > header {
        height: @em*3;
        overflow: hidden;
        }
    header .logo {
        .h1;
        margin: 0;
        padding: 0 0 0 @block *2;
        font-weight: normal;
        line-height: 1.8;
        font-family: @typeface-header;
        color: @red2;
        background: transparent;
        }
    .content > section {
        margin-left: @block*2;
        }
    .content hgroup {
        padding: @interline @block * 2;
        margin-bottom: @interline;
        .text-shadow(@l, @light-color);
        background: @grey1;
        background-color: fadeout(@grey6, 85%);
        }
    .content hgroup h1 {
        margin: 0;
        line-height: 1;
        font-family: @typeface-brand;
        }      
    .content hgroup h5 {
        .h6;
        margin: 0;
        line-height: 1.6;
        color: @grey5;
        }  
    .content > section {
        float: left;
        margin-right: @block;
        width: @text-block/2;
        width: 33%;
        }    
    .content > .info {
        width: auto;
        max-width: 52em;
        }    
    body > footer {
        position: relative;
        top: @em;
        clear: both;
        border-top: @l dotted fadeout(@dark-color, 80%);
        padding: @em @block;
        text-align: center;
        font-size: 0.8em;
        }
    .message {
        margin: @em @block 0;
        padding: @em/2 @block/2;
        .rounded-corners();
        }    
    .message .ui-icon {
        float: left;
        margin-right: @block/4;
        }
    .details {
        max-width: @text-block;  
        }
    .details .buttons{
        margin-bottom: 0 - @interline;
        border-top: @l dotted @grey6;
        padding-bottom: 0;
        }
                
        
/*  Tab & intro content */
    
    .content .ui-tabs-panel {
        width: 100%;
        overflow: hidden;
        .box-sizing(border-box);
        }
    .tabs hgroup {
        background: transparent;
        }   
    p canvas, p img {
        float: left;
        margin: 0 @block/2 0 0;
        }
    canvas,
    figure {
        border: @l solid @grey6;
        max-width: @text-block;
        background-color: @grey6;
        }
    figure img{
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;
            }
    figcaption {
        margin: 0;
        padding: 0;
        text-align: center;
        white-space: nowrap;
        color: @grey1;
        background-color: @grey6;
        }   
    .bootsteps{
        float: left;
        list-style: none;
        margin: @interline 0 0;
        padding: 0;
        width: 60%;
        }
    .bootsteps li {
        position: relative;
        padding: @interline @block @interline @block*1.2;
        .h4;
        margin: 0 0 @interline; // overriding margin for .h4
        .rounded-corners();
        background: @light-color;
        .box-shadow();
        }
    .bootsteps li:after{
        position: absolute;
        top: 0 - @interline/3;
        left:0 - @w;
        width: @block;
        height: @em;
        text-align: center;
        font-size: 1.2em;
        line-height: 1.5;
        font-family: @typeface-header;
        padding: 0 @block/5 @interline/8;
        .rounded-corners(@block);
        color: @light-color;
        .text-shadow(0 - @l, @dark-color);
        .gradient(@grey5,@grey6);
        .box-shadow();
        }
    .bootsteps li:hover:after{
        .gradient(@red1,@red2);
        }
    .bootsteps li:nth-child(1):after{
        content: "1";
        }
    .bootsteps li:nth-child(2):after{
        content: "2";
        }
    .bootsteps li:nth-child(3):after{
        content: "3";
        }
        
        
/*  Datatables */

    .content .dataTables_wrapper {
        float:left;
        clear: none;
        _height: 302px;
        }
    .content .dataTables_wrapper table {
        margin: 0;
        clear: none;
        width: auto;
        }
    
    .dataTables_wrapper col.id{
        width: 10%;
        }
    .dataTables_wrapper col.title{
        width: auto;
        }
    .dataTables_wrapper col.date{
        width: 15%;
        }
    .dataTables_wrapper col.actions{
        width: 2%;
        }

/*  Navigaiton */    

    nav ul {
        clear: both;
        margin: 0;
        padding: 0 @block*2;
        display: block;
        list-style: none;
        min-height: @em*1.2;
        .gradient(@grey5,@grey6);
        overflow: hidden;
        }    
    nav ul li {
        position: relative;
        float: left;
        display: block;
        font-size: 0.9em;
        line-height: @transport * 1.4;
        text-transform: uppercase;
        color: @grey2;
        .text-shadow(0 - @l, darken(@blue2, 50%));
        }    
    nav ul li a {
        padding: 0 @block/2 0 0
        }
    nav ul li a,
    nav ul li a:visited {
        color: @grey3;
        }    
    nav ul li a:hover,
    nav ul li a:active,
    nav ul li.active a{
        color: @light-color;
        }    
    nav ul .active:before {
        position: absolute;
        top: 0;
        left:40%;
        display: block;
        content: " ";  
        border-color: @grey0 transparent transparent transparent;
        border-style: solid;
        border-width: @block/6;
        height:0;
        width:0;
        }  
    nav ul li:last-child {
        float: right;
        margin-right: -(@block);
        }
        
           
/*  Tabs */
    
    .tabs {
        float: left;
        //margin-top: @interline;
        margin: @interline -(@block);
        width: 60%;
        visibility: hidden;
        }
    .tabs ul {
        background-color: transparent;
        }
    .tabs > div > :last-child:after {
        clear: both;
        display: block;
        margin-bottom: 0 - @em;
        content: ".";
        visibility: hidden;
        height: 0;
        line-height: 0;
        }


/*  Accordion */

    #accordion {
        float: left;
        margin-top: @interline;
        width: 60%;
        }
    #accordion .block {
        display: block;
        }
        
/*  Forms & Buttons */   
     
    .buttons  {
        margin-right: 0 - @w/2;
        padding: @interline 0;
        height: @em*2;
        text-align: right;
        }  
    .buttons .print {
        float: left;
        overflow: hidden;
        }

    fieldset .help {
        color: @grey4;
        }
    input[placeholder]+.help {
        display: none;
        }
      
    fieldset .error {
        padding-right: @block/2;
        font-weight: bold;
        color: @error;
        }
      
        
/*  jQuery UI overrides */

    .hover:hover .ui-icon {
        background-image: url(../images/icons/ui-icons_ffffff_256x240.png); 
        }

/*  Messages */

    .warning {
        margin: @interline 0 @em; 
        padding: @interline @w;
        }
    .notes {
        float: none;
        overflow: hidden;
        }
    code,
    .notes .note {
        color: darken(@green2,10%);
        }
    code strong {
        color: @red2;
        }


/*  Blocks */

    .content .examples {
        clear: both;
        margin-left: 0;
        width: 100%;
        }
    .examples ul {
        margin: 0;
         width: 100% ;
        .display-box();
        }
    .examples li {
        position: relative;
        display: block;
        .box-flex();
        margin-left: @w;
        overflow: hidden;
        }
    .examples .panel:first-child {
        margin-left: 0;
        }
    .examples header h3 { 
        margin: 0; 
        padding: @interline/4 0;
        }
        
        