<|start_filename|>css/ez-proto-min.css<|end_filename|>
/* 2009 - 2012 (c) | ez-css.org
 * ez-proto-min.css :: version 1.3 :: 05252012
 */
.ez-mw{margin-right:auto;margin-left:auto;text-align:left;position:relative;z-index:1;overflow:hidden}.ez-wr{clear:left;}.ez-wr:after,.ez-box:after{ content:""; display:block; height:0; clear:both; overflow:hidden}.ez-fl{float:left}.ez-fr{float:right}.ez-25{width:25%}.ez-33{width:33.33%}.ez-50{width:50%}.ez-66{width:66.66%}.ez-75{width:75%}


<|start_filename|>css/ez-proto.css<|end_filename|>
/* 2009 - 2012 (c) | ez-css.org
 * ez-proto.css :: version 1.3 :: 05252012
 *
 * For rapid prototyping. 
 * With this style sheet, use the snippets from http://www.ez-css.org/rapid_prototyping 
 */

/* 
 * This wrapper, first child of body, is used to wrap "ez-css" modules. 
 * It will auto-center if it is given a width smaller than the width of the viewport.
 * Position relative is used to create a stacking context from the start (to prevent z-index issues). 
 * overflow:hidden is used to create a block formatting context, but if you give this element a width you can replace this declaration with display:inline-block
 */

.ez-mw {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	position :relative;
	z-index: 1;
	overflow: hidden;
}

/*
 * to make sure modules clear previous containers
 */

.ez-wr {clear: left;}

.ez-wr:after,
.ez-box:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      overflow: hidden;
}

/*
 * column floated left 
 */

.ez-fl {
	float: left;
}

/* 
 * column floated right 
 */

.ez-fr {
	float: right;
}

/*
 * 5 default widths for 1/4, 1/3, 1/2, 2/3 and 3/4 columns
 */

.ez-25 {width:25%;}
.ez-33 {width:33.33%;}
.ez-50 {width:50%;}
.ez-66 {width:66.66%;}
.ez-75 {width:75%;}

<|start_filename|>css/ez-filters.css<|end_filename|>
/* 2009 - 2012 (c) | ez-css.org
 * ez-filters.css :: version 1.4 :: 05252012
 *
 * This style sheet caters for IE 5 browsers. It uses a CSS hack and won't validate
 * With this style sheet, use the code snippets from http://www.ez-css.org/layouts 
 */

/*
 * auto-centering in IE 5
 * we reset this value in the next rule so content is left aligned. 
 */
 
body {text-align: center;}

/* 
 * This wrapper, first child of body, is used to wrap "ez-css" modules. 
 * It will auto-center if it is given a width smaller than the width of the viewport.
 * Position relative is used to create a stacking context from the start (to prevent z-index issues). 
 * overflow:hidden is used to create a block formatting context, but if you give this element a width you can replace this declaration with display:inline-block
 */

.ez-mw {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	position :relative;
	z-index: 1;
	text-align: left;
	overflow: hidden;
}

/*
 * to make sure modules clear previous containers
 */

.ez-wr {clear: left;}

/*
 * this is the clearfix method
 * we rely on this to contain floats in "stand-alone" modules 
 */
 
.ez-wr:after,
.ez-box:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      overflow: hidden;
}

/*
 * hacks for IE 5 (Win and Mac)
 * (min-height is the "hasLayout" trigger used for IE7)
 */
 
.ez-wr,.ez-box,.ez-last {display: inline-block;min-height: 0;}    
/* hides from IE-mac \*/  
.ez-wr,
.ez-box,
.ez-last {_height: 1%;}  
.ez-wr,.ez-box,.ez-last {display: block;}  
/* end hide from IE-mac */

/*
 * the last DIV in the HTML flow (a column) must create a new block formatting context.
 * by default, we rely on "overflow:hidden", but if this creates an issue with your design, then try one of these classes instead: 
 * ez-oa
 * ez-dt 
 * ez-it
 * ez-tc
 * ez-ib
 */
 
.ez-oh {
	overflow: hidden;
	_overflow: visible;
}

.ez-oa {
	overflow: auto;
}
.ez-dt {
	display: table;
}

.ez-it {
	display: inline-table;
}
.ez-tc {
	display: table-cell;
}

.ez-ib {
	display: inline-block;
}

/* 
 * DIVs to be columns
 * we float them left or right depending on module or layout
 * the negative margin is used to fix a IE6 bug (3px jog).
 */
.ez-fl {
	_margin-right: -3px;
	float: left;
}

.ez-fr {
	_margin-left: -3px;
	float: right;
}

/*
 * every floated column in a module or layout needs a width
 * here we have 5 default values: 1/4, 1/3, 1/2, 2/3 and 3/4
 */

.ez-25 {width: 25%;}
.ez-33 {width: 33.33%;}
.ez-50 {width: 50%;}
.ez-66 {width: 66.66%;}
.ez-75 {width: 75%;}

/* 
 * the following classes are used to make columns that are siblings overlap by 1 pixel (to vertically align 1 pixel borders between containers)
 * for this to work, this class must be applied to the following elements: 
 * - column 1 of Module 2A, 
 * - column 2 of Module 3A,
 * - column 1 of Module 3B, 
 * - column 3 of Module 4A, 
 * - column 1 of Module 4B, 
 * - column 1 in column 1 of Module 4B, 
 * - column 2 in column 1 of Module 4B 
 */
 
.ez-negmr {
	margin-right: -1px;
	_margin-right:-4px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 3A,
 * - column 1 of Module 4A,
 * - column 2 of Module 4A 
 */
 
.ez-negmx {
	margin-right: -1px;
}

/* 
 * same as above, but for these elements:
 * - column 1 of Module 2B,
 * - column 2 of Module 3B 
 */
 
.ez-negml {
	margin-left: -1px; 
	_margin-left:-4px;
}



<|start_filename|>starters/starter-3A.html<|end_filename|>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>starter 3A: Three columns with header and footer, main content (middle column) comes second</title>
<style type="text/css">
/* 2009 - 2010 (c) | ez-css.org
 * ez-start-3A ::  version 1.0 (03142010)
 *
 * Three columns with header and footer, main content (middle column) comes second. 
 *
 *
 * You should replace the following rule with your own reset or base styles sheet
 * visit: http://carsonified.com/blog/design/setting-rather-than-resetting-default-styling
 */

* {
	margin: 0;
	padding: 0;
}

/*
 * To set the width of the main wrapper
 */
 
#wrapper {width: 900px;}

/*
 * You can use this wrapper for the faux-column technique
 * Check http://www.alistapart.com/articles/fauxcolumns/
 */
 
#body {
	margin: 20px 0;
	padding: 20px 0;
	border-bottom: 1px solid #555;
	border-top: 1px solid #555;
}

/*
 * This element needs a width
 */

#aside {width: 20%;}

/*
 * Like #aside, this element needs a width
 */

#article {
	width: 50%; 
	padding:0 5%;
}

/*
 * Unlike the two first columns, this element does *not* need a width
 */

.aside {
	
}

/**********************************************************************************
 Below this comment are the core rules, there should be no need to edit any of them
 **********************************************************************************
 *
 * auto-centering in IE 5
 * we reset this value in the next rule so content is left aligned. 
 */
 
body {text-align: center;}

/* 
 * margin "auto" is to center this element (we set the width in a separate rule near the top of this styles sheet).
 * "text-align" is to reset the declaration from "body".
 * "inline:block" is to create a block-formatting context (the "width" does that in IE).
 */

#wrapper {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	display: inline-block;
}

/*
 * this is the clearfix method
 * we rely on this to contain floats in "stand-alone" modules 
 */
 
#header:after,
#body:after,
#footer:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/*
 * hacks for IE
 * "min-height" triggers "hasLayout" in IE 7, 
 * "height" is the trigger for IE 5 and 6.
 */

#header,
#body,
.aside,
#footer {
 	min-height: 0;
}    

* html #header,
* html #body,
* html .aside,
* html #footer {height: 1%;}  
  
/*
 * this element must create a new block formatting context.
 * by default, we rely on "overflow:hidden", but if this creates an issue with your design, then apply to this element one of the following rules 
 * ez-oa
 * ez-dt 
 * ez-it
 * ez-tc
 * ez-ib
 */

.aside {overflow: hidden;}

/*
 * rules to apply to the right column if the styling above (overflow:hidden) creates issues with your design
 */

.ez-oa {overflow: visible; overflow: auto;}
.ez-dt {overflow: visible; display: table;}
.ez-it {overflow: visible; display: inline-table;}
.ez-tc {overflow: visible; display: table-cell;}
.ez-ib {overflow: visible; display: inline-block;}

/* 
 * 1st and 2nd columns
 */
 
#aside,
#article {float: left;}

/* 
 * the following fixes the "3px jog bug"
 */
 
* html #article {margin-right:-3px;}

/**********************************************************************************
 ***   The above are core rules, there should be no need to edit any of them    ***
**********************************************************************************/
</style>
</head>
<body>
<!-- ez-start-3A -->
<div id="wrapper">
  <div id="header">
		<h1>#header</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis.</p> 
	</div>
  <div id="body">
		<div id="aside">
			<h2>1: #aside (id)</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique.</p> 
		</div>
		<div id="article">
				<h2>2: #article</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p>				 
		</div>
		<div class="aside">
			<h2>3: .aside (class)</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique.</p> 
		</div>
  </div>
  <div id="footer">
			<h2>#footer</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis viverra. Curabitur luctus, nibh ac rhoncus ultrices, turpis mauris mattis dui, quis pharetra odio orci vitae risus. Nunc ultricies gravida facilisis. Pellentesque ante mauris, blandit id condimentum non, tristique non urna. Integer nec erat eros. Curabitur ullamcorper semper est, ut egestas est bibendum in. Nulla scelerisque diam eget sapien sollicitudin accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus pharetra mauris a mattis. Morbi gravida velit nec lectus semper vitae porta sapien semper. Sed blandit tempus tristique. Aenean libero enim, gravida eget egestas et, dapibus in odio. Aenean nisl nunc, ornare porttitor aliquam non, lacinia in leo. Cras viverra mi in justo ultrices ac mattis mi imperdiet. Proin at rhoncus libero. Mauris quis urna eros, dapibus porta lectus.</p> 
		</div>
</div>
</body>
</html>
