/* -----------------------------------
base
----------------------------------- */
/*
body
{
	margin: 0;
	padding: 20px;
	color: #000;
	background: #fff;
	font: 100%/1.4 helvetica, arial, sans-serif;
}

/* -----------------------------------
classes
----------------------------------- */
/*
.list-nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-nav li
{
	padding: .5em 1em;
	border-bottom: 1px solid green;
}

.list-nav a { text-decoration: none; }*/
.one { background-color:#fff; /*lime;*/ }
.two { background-color: #fff; /*ffffe5;*/ }
.three { background-color: #fff /*pink;*/ }
.four { background-color: yellow; }

/* -----------------------------------
layout 1: simple
----------------------------------- */

.one, .two, .three, .four { margin-bottom: 1em; }


/* -----------------------------------
layout 2: 25-48
----------------------------------- */

@media (min-width: 25em) and (max-width: 47.9em) {
	.three,.four {
		float: left;
		width: 48%;
	}
	.three { margin-right: 4% }
}

/* -----------------------------------
layout 3: 30-48
----------------------------------- */

@media (min-width: 30em) and (max-width: 47.9em) {
	.one,.five { float: left;}
	.one { width: 30%; margin-right: 3%; }
	.five { width: 67%; }
}

/* -----------------------------------
layout 4: 48-65
----------------------------------- */

@media (min-width: 48em) and (max-width: 64.9em) {
	.one,.two,.six { float: left; margin-right: 3%; }
	.one,.six { width: 22%; }
	.two { width: 60%; }
	.six { margin-right: 0; }
}


/* -----------------------------------
layout 5: 65+
----------------------------------- */

@media (min-width: 65em) {
	.one,.two,.three,.four { float: left; margin-right:3%; }
	.one,.three,.four { width: 17%; }
	.two { width: 45%; }
	.four { margin-right: 0; }
	.container { max-width: 65em; }
}