/* Layouts */
@import url("tk.layout.split.css");

/* Sections API */
/* Sections are intended to split website into logical parts, for example: header, central part, footer.
 * They can be nested, but only in certain combinations. For example, it's useless to nest wide section inside narrow. However you can do the other way round.
 * Nesting can be useful, for example, for creating a footer with 100% width background, but content inside of it centered with the other sections.
 * NOTE: they are NOT intented to layout UI elements, since they are fixed-width; use Layouts API for that. */
.tk .layout-section {
    width: 1000px !important;/*.common default*/
    margin: 0 auto;/*.center default*/
    position: relative;
    clear: both;
    zoom: 1;
}
.tk .layout-section:after {
    content: '';
    display: block;
    clear: both;
}

.tk .full.layout-section { width: 100% !important; }
.tk .wide.layout-section { width: 1400px !important; }
.tk .common.layout-section { width: 1000px !important; }
.tk .narrow.layout-section { width: 800px !important; }

.tk .left.layout-section { margin: 0; }
.tk .center.layout-section { margin: 0 auto; }
.tk .right.layout-section { float: right; }
.tk .full.right.layout-section { float: none; }

.tk .layout-section > .layout-section,
.tk .wide.layout-section > .full.layout-section,
.tk .wide.layout-section > .wide.layout-section,
.tk .full.layout-section > .full.layout-section {
    display: none;
}
.tk .layout-section > .narrow.layout-section,
.tk .wide.layout-section > .layout-section,
.tk .full.layout-section > .layout-section,
.tk .custom.layout-section > .layout-section,
.tk .layout-section > .custom.layout-section {
    display: block;
}

/* Layouts API */
/* Layouts API is used to position UI elements relative to each other. */

/* Split layout */
/* Split layout is used to create up to 32 columns in a row. */
.tk .layout-split {
    height: 100%;
    zoom: 1;
}
.tk .layout-split:after {
    content: '';
    display: block;
    clear: both;
}

.tk .layout-split > * {
    height: 100%;
    float: left;
}

/* Stack layout */
/* Stack layout is used to stack blocks one after another. It's pretty much the same as putting books on a shelf. */
.tk .layout-stack {
    height: 100%;
    zoom: 1;
}
.tk .layout-stack:after {
    content: '';
    display: block;
    clear: both;
}

.tk .layout-stack > *, .tk .layout-stack > .left {
    float: left;
    height: 100%;
}
.tk .layout-stack > .right {
    float: right;
}
.tk .layout-stack > .center {
    float: none;
    margin: 0 auto;
}

/* Inline layout */
/* Inline layout is mostly used in conjunction with alignment classes to align several blocks in a row. */
.tk .layout-inline > * {
    float: none;
    margin: 0;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

/* Alignment classes */
.tk .align-left { text-align: left; }
.tk .align-right { text-align: right; }
.tk .align-center { text-align: center; }

.tk .align-top { vertical-align: top; }
.tk .align-middle { vertical-align: middle; }
.tk .align-bottom { vertical-align: bottom; }

.tk .layout-inline.align-right > *, .tk .layout-inline.align-center > * { margin: 0; }
.tk .align-right > * { margin-left: auto; }
.tk .align-center > * { margin: 0 auto; }

.tk .float-left { float: left; }
.tk .float-right { float: right; }

/* Vertical alignment (layout) */
/* Use this classes to align blocks vertically. */
.tk .layout-vertical {
    display: table;
    width: 100%;
    height: 100%;
}
.tk .layout-vertical > * {
    display: table-row;
}
.tk .layout-vertical > *:first-child {
    display: table-cell;
}

/* Row layout */
/* Basically just an alias to align classes, which makes every block in container centered horizontally and vertically and follow in a row. */
.tk .layout-row {
    display: table;
    width: 100%;
}
.tk .layout-row.fixed {
    table-layout: fixed;
}
.tk .layout-row > * {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}

/* Multi-column layout */
/* Be aware that this feature is not yet widely supported even by modern browsers */
.tk .layout-columns {
    -webkit-column-fill: balance;
    column-fill: balance;
}
.tk .layout-columns.x2 {
    -moz-columns: 2;
    -webkit-columns: 2;
    columns: 2;
}
.tk .layout-columns.x3 {
    -moz-columns: 3;
    -webkit-columns: 3;
    columns: 3;
}
.tk .layout-columns.x4 {
    -moz-columns: 4;
    -webkit-columns: 4;
    columns: 4;
}
.tk .layout-columns.x5 {
    -moz-columns: 5;
    -webkit-columns: 5;
    columns: 5;
}
.tk .layout-columns.x6 {
    -moz-columns: 6;
    -webkit-columns: 6;
    columns: 6;
}
.tk .layout-columns.x7 {
    -moz-columns: 7;
    -webkit-columns: 7;
    columns: 7;
}
.tk .layout-columns.x8 {
    -moz-columns: 8;
    -webkit-columns: 8;
    columns: 8;
}
.tk .layout-columns.x9 {
    -moz-columns: 9;
    -webkit-columns: 9;
    columns: 9;
}
.tk .layout-columns.x10 {
    -moz-columns: 10;
    -webkit-columns: 10;
    columns: 10;
}