/*!
-----------------------------------------------
High Performance Sport New Zealand Grids
- - - - - - - - - - - - - - - - - - - - - - - -
Filename:			hpsnz.grids.css
Author:				catch.co.nz
----------------------------------------------- */
/*------------------------------------*\
	$GRIDS
\*------------------------------------*/
/*
Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
*/

.grids {
    width: 960px;
    clear: both;
    margin: 0 0 0 -20px;
    list-style: none;
    /* So we can make grids out of lists. */
    
    min-height: 160px;
}
/*
Here we are using an attribute selector to detect the string 'grid-' in an element's class.
This works by assuming that anything we call grid- we also want to be a grid item. It means less code and less for you to remember!

Ensure any grid item's FIRST class is a grid- class. e.g.
VALID: class="grid-4 text-centre"
INVALID: class="left grid-4"
*/

[class ^="grid-"] {
    float: left;
    margin: 0 20px 0 0;
}
[class ^="block block-block grid-"] {
    float: left;
    margin: 0 20px 0 0;
}
[class ^="block block-menu-block grid-"] {
    float: left;
    margin: 0 20px 0 0;
}
[class ^="block block-mailing-list-block grid-"] {
    float: left;
    margin: 0 20px 0 0;
}
.grids [class ^="grid-"] {
    margin: 0 0 0 20px;
}
.grids [class ^="block block-block grid-"] {
    margin: 0 0 0 20px;
}
.grids [class ^="block block-menu-block grid-"] {
    margin: 0 0 0 20px;
}
.grids [class ^="block block-mailing-list-block grid-"] {
    margin: 0 0 0 20px;
}
/*
Allow nested grids:
*/

[class ^="grid-"] .grids {
    width: auto;
    margin: 0 -20px;
}
.grid-1 {
    width: 60px
}
.grid-2 {
    width: 140px
}
.grid-3 {
    width: 220px
}
.grid-4 {
    width: 300px
}
.grid-5 {
    width: 380px
}
.grid-6 {
    width: 460px
}
.grid-7 {
    width: 540px
}
.grid-8 {
    width: 620px
}
.grid-9 {
    width: 700px
}
.grid-10 {
    width: 780px
}
.grid-11 {
    width: 860px
}
.grid-12 {
    width: 940px;
    margin: 0;
}
/*------------------------------------*\
	$ALL MOBILE SIZES (devices and browser)
\*------------------------------------*/

@media only screen and (max-width: 979px) {
    .grids {
        width: 100%;
        margin: 0;
        min-height: inherit;
    }
    .grid-8, .grid-12, .grid-4 {
        width: 100%;
    }
    .grids [class^="block block-block grid-"] {
        margin: 0 20px 20px 0;
    }
    .grids [class ^="grid-"] {
        margin: 0 20px 0 0;
    }
    .grids [class ^="block block-block grid-"] {
        margin: 0 20px 0 0;
    }
    .grids [class ^="block block-menu-block grid-"] {
        margin: 0 20px 0 0;
    }
    .grids [class ^="block block-mailing-list-block grid-"] {
        margin: 0 20px 0 0;
    }

    /* Nested grid fix */
    [class ^="grid-"] .grids {
        margin-left: 0px;
    }
}