/* ==============================================
    ATK unsorted styles
   ============================================== */

/* Default columns */
.span1  { .columns(1); }
.span2  { .columns(2); }
.span3  { .columns(3); }
.span4  { .columns(4); }
.span5  { .columns(5); }
.span6  { .columns(6); }
.span7  { .columns(7); }
.span8  { .columns(8); }
.span9  { .columns(9); }
.span10 { .columns(10); }
.span11 { .columns(11); }
.span12 { .columns(12); }
.span13 { .columns(13); }
.span14 { .columns(14); }
.span15 { .columns(15); }
.span16 { .columns(16); }

/* For optional 24-column grid */
.span17 { .columns(17); }
.span18 { .columns(18); }
.span19 { .columns(19); }
.span20 { .columns(20); }
.span21 { .columns(21); }
.span22 { .columns(22); }
.span23 { .columns(23); }
.span24 { .columns(24); }

/* Offset column options */
.atk-row {
  > .offset1  { .offset(1); }
  > .offset2  { .offset(2); }
  > .offset3  { .offset(3); }
  > .offset4  { .offset(4); }
  > .offset5  { .offset(5); }
  > .offset6  { .offset(6); }
  > .offset7  { .offset(7); }
  > .offset8  { .offset(8); }
  > .offset9  { .offset(9); }
  > .offset10 { .offset(10); }
  > .offset11 { .offset(11); }
  > .offset12 { .offset(12); }
}


/* ==============================================
    Features
   ============================================== */
.layout() when(ispercentage(@gridColumnWidth)) {
    .atk-wrapper {.box-sizing();min-width:980px;padding-left:@gridGutterWidth;padding-right:@gridGutterWidth;}
}
.layout() {}
.layout();

.footerSticky() when (@footerSticky = true) {
    html {height:100%;}
    body {min-height:100%;height:100%;}
    body #atk-layout {height:auto !important;height:100%;min-height:100%;}
    body #atk-layout #atk-footer-guard {clear:both;}
    #footer {height:@footerHeight;margin-top:-@footerHeight;}
    #atk-footer-guard {height:@footerHeight+@margin;}
}
.footerSticky() when (@footerSticky = false) { }
.footerSticky();


/* ==============================================
   Loader
   ============================================== */
@-webkit-keyframes rotate-i1 {#rotate > .clockwise;}
   @-moz-keyframes rotate-i1 {#rotate > .clockwise;}
    @-ms-keyframes rotate-i1 {#rotate > .clockwise;}
     @-o-keyframes rotate-i1 {#rotate > .clockwise;}
        @keyframes rotate-i1 {#rotate > .clockwise;}

@-webkit-keyframes rotate-i2 {#rotate > .anti-clockwise;}
   @-moz-keyframes rotate-i2 {#rotate > .anti-clockwise;}
    @-ms-keyframes rotate-i2 {#rotate > .anti-clockwise;}
     @-o-keyframes rotate-i2 {#rotate > .anti-clockwise;}
        @keyframes rotate-i2 {#rotate > .anti-clockwise;}

.loading {
  position: absolute;
  margin: auto;
  z-index: 9999;
  .opacity(70);
  i {
    position: absolute;
    background: url(../images/gear-32x32.png);
    width: 32px;
    height: 32px;
    .transition(linear);
    margin: 35px 27px;
    .animation(rotate-i2 5s infinite);
    &:first-child {
      margin: 10px 10px;
      .animation(rotate-i1 5s infinite);
    }
  }
}

/* ==============================================
    Various ATK Objects
   ============================================== */

/* Wrapper container */
.atk-wrapper { .fixed-container(); }

/* Paginator */
.atk-paginator {
    a, span {font-size:0.9em;text-decoration:none;padding:@padding/4 @padding/2;margin:0;display:inline-block;}
    a.disabled {color:@lightGray;cursor:default;}
    a:hover {color:;}
}
// Paginator (tweaks for grid)
.atk-grid > .atk-paginator { text-align: center; padding-top: @margin; }

/* Growl */
.atk-growl {
    font-weight:bold;
    position:fixed;
    top:@margin*2;
    right:@margin*2;
    z-index:9999;
    .opacity(80);
    >div {
        width:180px;
        margin-top:@margin;
        position:relative;
        &:first-child {margin-top:0;}
        .ui-icon-closethick {.opacity(0);@transition: opacity .2s;.transition(@transition);}
        &:hover {.ui-icon-closethick {.opacity(100);}}
    }
}

/* Notification */
.atk-notification {
    padding:@padding/2;
    position:relative;
    .atk-notification-text {
        padding:0 20px;
        >.ui-icon {position:absolute;top:@padding/1.8;left:@padding/2;}
    }
    >.ui-icon-closethick {position:absolute;top:@padding/4;right:@padding/4;cursor:pointer;}
    .box-shadow(0 10px 20px @white inset);
}
.atk-growl>.atk-notification {
    @shadow: 0 5px 10px fadeout(@shadowColor,60%),0 10px 20px @white inset;
    .box-shadow(@shadow);
}

/* Misc */
.atk-flexy {
    display:table;
    > div {display:table-cell;vertical-align:top;.box-sizing();}
}

.atk-box {
    padding:@padding;
    +.atk-box {margin-top:@margin;}
}
.atk-block {margin-bottom:@margin;}

.atk-buttons>* {margin-left:0.4em;}
.atk-buttons>*:first-child {margin-left:0;}
.atk-sep {color:@lightGray;margin:0 1em;}
