/*=========================================
    Container
=========================================*/
.container { width: 300px; margin: 0 auto; *zoom: 1; }
.container:before,
.container:after,
.nested:before,
.nested:after { content: ""; display: table; }
.container:after,
.nested:after { clear: both }
.nested { margin-left: -8px; margin-right: -8px; *zoom: 1; *position: relative; }

/*=========================================
  Columns
=========================================*/
/* Set the column margins */
[class*="span"] { float: left; display: inline; margin-left: 8px; margin-right: 8px; }
/* Set the default layout for browsers that don't support media-queries */
.container { width: 960px }
.span1 { width: 64px }
.span2 { width: 144px }
.span3 { width: 224px }
.span4 { width: 304px }
.span5 { width: 384px }
.span6 { width: 464px }
.span7 { width: 544px }
.span8 { width: 624px }
.span9 { width: 704px }
.span10 { width: 784px }
.span11 { width: 864px }
.span12 { width: 944px }

/*=========================================
    Media Queries
=========================================*/
/* Stage 1 - Portrait smartphones */
@media (max-width: 479px) { 
    .container { width: 300px }
    [class*="span"] { width: 100% }
    [class*="span"],
    .nested { margin-left: 0; margin-right: 0; }
}
/* Stage 2 - Landscape smartphones, portrait tablets */
@media (min-width: 480px) and (max-width: 767px) { 
    .container { width: 460px }
    .span1 { width: 22px }
    .span2 { width: 60px }
    .span3 { width: 99px }
    .span4 { width: 137px }
    .span5 { width: 175px }
    .span6 { width: 214px }
    .span7 { width: 252px }
    .span8 { width: 290px }
    .span9 { width: 329px }
    .span10 { width: 367px }
    .span11 { width: 405px }
    .span12 { width: 444px }
}
/* Stage 3 - Landscape tablets */
@media (min-width: 768px) and (max-width: 979px) { 
    .container { width: 720px }
    .span1 { width: 44px }
    .span2 { width: 104px }
    .span3 { width: 164px }
    .span4 { width: 224px }
    .span5 { width: 284px }
    .span6 { width: 344px }
    .span7 { width: 404px }
    .span8 { width: 464px }
    .span9 { width: 524px }
    .span10 { width: 584px }
    .span11 { width: 644px }
    .span12 { width: 704px }
}
/* Stage 4 - Standard screens */
@media (min-width: 980px) and (max-width: 1200px) { 
    .container { width: 960px }
    .span1 { width: 64px }
    .span2 { width: 144px }
    .span3 { width: 224px }
    .span4 { width: 304px }
    .span5 { width: 384px }
    .span6 { width: 464px }
    .span7 { width: 544px }
    .span8 { width: 624px }
    .span9 { width: 704px }
    .span10 { width: 784px }
    .span11 { width: 864px }
    .span12 { width: 944px }
}
/* Stage 5 - Large screens */
@media (min-width: 1201px) { 
    .container { width: 1140px }
    .span1 { width: 79px }
    .span2 { width: 174px }
    .span3 { width: 269px }
    .span4 { width: 364px }
    .span5 { width: 459px }
    .span6 { width: 554px }
    .span7 { width: 649px }
    .span8 { width: 744px }
    .span9 { width: 839px }
    .span10 { width: 934px }
    .span11 { width: 1029px }
    .span12 { width: 1124px }
}