/* `Container
----------------------------------------------------------------------------------------------------*/

.container-12 { margin-left: auto; margin-right: auto; width: 960px; }
.container-12 .container-12 { margin-left: -16px; margin-right: -16px; }

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
	display: inline; float: left; margin-left: 16px; margin-right: 16px; margin-top: 10px; margin-bottom: 10px }


/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.grid-1 { width: 48px; }
.grid-2 { width: 128px; }
.grid-3 { width: 208px; }
.grid-4 { width: 288px; }
.grid-5 { width: 368px; }
.grid-6 { width: 448px; }
.grid-7 { width: 528px; }
.grid-8 { width: 608px; }
.grid-9 { width: 688px; }
.grid-10 { width: 768px; }
.grid-11 { width: 848px; }
.grid-12 { width: 928px; }


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before, .clearfix:after, .container-12:before, .container-12:after { content: '.'; display: block; overflow: hidden;
	visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; }
.clearfix:after, .container-12:after { clear: both; }

/* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */
.clearfix, .container-12 { zoom: 1; }

@media screen and (max-width: 959px) {
	
	.container-12, .container-12 .container-12 { width:90% !important; margin: 0 auto !important; }
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
		width:100% !important; margin: 0 auto !important }
	
	.home .blog-summary {width:30% !important; margin-left:3% !important; }
	
}

@media screen and (max-width: 480px) {
	
	.home .blog-summary { width:100% !important; margin-left:0% !important; }
	
}