@import "grid.less";

@totalWidth: 100%;           // Fluid layout

.inner-wrap {
    .container();
    max-width: 960px;
}

.inner-wrap-flash {
    max-width: none;
    overflow: hidden;
}

.row {
    .row();
}

.outer-wrap {
    margin-bottom: 10px;
}

.outer-wrap-header,
.outer-wrap-info,
.outer-wrap-footer {
    background-color: green;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header,
.flash,
.footer {
    .column(12);
}

.main {
    .column(9);
}

.sidebar {
    .column(3);
}

.triptych {
    .column(4);
}

.info {
    .column(3);
}

// Make it responsive using media queries
@media (max-width: 1150px) {
    .pull-left,
    .pull-right {
        display: none;
    }
}

@media (max-width: 980px) {
    .inner-wrap {
        margin-left: 8px;
        margin-right: 8px;
    }

    .inner-wrap-flash {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 800px) {
    .info {
        .column(6);
    }
}

@media (max-width: 700px) {
    .main,
    .triptych {
        .column(12);
    }

    .sidebar,
    .info {
        display: none;
    }
}