/* #Base 1024px Grid
================================================== */

.container                                  { position: relative; width: 1038px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns                         { float: left; margin-left: 7px; margin-right: 7px; }

/* Nested Column Classes */
.column.alpha, .columns.alpha               { margin-left: 0; }
.column.omega, .columns.omega               { margin-right: 0; }
.six.columns, .teen.columns                 { margin:0; }

/* Base Grid */
.container .six.columns                     { width: 232px;}
.container .teen.columns                    { width: 771px;}
.container .sixteen.columns                 { width: 1024px;}


/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 1037px) {
    .container                                  { width: 782px; }
    .container .column,
    .container .columns                         { margin-left: 7px; margin-right: 7px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 7px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 7px; }
    .alpha.omega                                { margin-left: 0; margin-right: 0; }

    .six.columns, .teen.columns                 { margin:0; }

    .container .six.columns                     { width: 232px;}
    .container .teen.columns                    { width: 518px;}
    .container .sixteen.columns                 { width: 768px; }
}


/* Note: Design for a width of 640px */
@media only screen and (min-width: 640px) and (max-width: 767px) {
    .container                                  { width: 654px; }
    .container .column,
    .container .columns                         { margin-left: 7px; margin-right: 7px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 7px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 7px; }
    .alpha.omega                                { margin-left: 0; margin-right: 0; }

    .six.columns, .teen.columns                 { margin:0; }

    .container .six.columns                     { width: 193px;}
    .container .teen.columns                    { width: 432px;}
    .container .sixteen.columns                 { width: 640px; }
	
}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 420px) and (max-width: 639px) {
    .container                                  { width: 420px; }
    
    .container .columns,
    .container .column                          { margin: 0; }

    .six.columns, .teen.columns                 { margin:0; }

    .container .six.columns,                    
    .container .teen.columns,                   
    .container .sixteen.columns                 { width: 420px;  backgroun-color:white;}
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (min-width: 0px) and (max-width: 419px) {
    .container { width: 320px; }
    .container .columns,
    .container .column { margin: 0; }
    
    .six.columns, .teen.columns                 { margin:0; }

    .container .six.columns,                    
    .container .teen.columns,  
    .container .sixteen.columns  { width: 320px; }

}


/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.group:before,
.group:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0; }
.row:after,
.group:after {
    clear: both; }
.row,
.group {
    zoom: 1; }

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}