.grid-container,
.grid-container-wide {
 clear: left;
 overflow: hidden;
 margin: 0 auto;
}
.grid-container {
 width: 580px;
 padding-right: 40px;
 padding-left: 40px;
}
.grid-container-wide {
 width: 880px;
}

.grid-col-1,
.grid-col-2,
.grid-col-3,
.grid-col-4,
.grid-col-5,
.grid-col-6,
.grid-col-7,
.grid-col-8,
.grid-col-9,
.grid-col-10,
.grid-col-11 {
 float: left;
 margin-right: 20px;
 margin-left: 0px;
 overflow: hidden;
}

.grid-rtl .grid-col-1,
.grid-rtl .grid-col-2,
.grid-rtl .grid-col-3,
.grid-rtl .grid-col-4,
.grid-rtl .grid-col-5,
.grid-rtl .grid-col-6,
.grid-rtl .grid-col-7,
.grid-rtl .grid-col-8,
.grid-rtl .grid-col-9,
.grid-rtl .grid-col-10,
.grid-rtl .grid-col-11 {
 float: right;
 margin-right: 0px;
 margin-left: 20px;
}

.grid-col-last {
 margin-right: 0;
}
.grid-rtl .grid-col-last {
 margin-left: 0;
}

.grid-col-1 { width: 55px; }
.grid-col-2 { width: 130px; }
.grid-col-3 { width: 205px; }
.grid-col-4 { width: 280px; }
.grid-col-5 { width: 355px; }
.grid-col-6 { width: 430px; }
.grid-col-7 { width: 505px; }
.grid-col-8 { width: 580px; }
.grid-col-9 { width: 655px; }
.grid-col-10 { width: 730px; }
.grid-col-11 { width: 805px; }
.grid-col-12 { width: 880px; }

/* grid debug */
.grid-debug .grid-container {
 background-color: #ffabff;
}

@media only screen and (min-width: 0px) and (max-width: 320px) {
    .grid-container,
    .grid-col-5,
    .grid-col-6,
    .grid-col-7,
    .grid-col-8,
    .grid-col-9,
    .grid-col-10,
    .grid-col-11,
    .grid-col-12 {
     width: 280px;
    }
    .grid-container {
     padding-left: 20px;
     padding-right: 20px;
    }
}
@media only screen and (min-width: 480px) and (max-width: 480px) {
    .grid-container,
    .grid-col-7,
    .grid-col-8,
    .grid-col-9,
    .grid-col-10,
    .grid-col-11,
    .grid-col-12 {
     width: 430px;
    }
    .grid-container {
     padding-left: 20px;
     padding-right: 20px;
    }
}