*, html, body{
	margin:0px;
	padding:0px;
}

#container{
	margin-top:0px;		
}
/* fixed widths are predictable and easy */
#fixed-width{
	width:500px;
}
/* 
	variable width box models will be based on the 
	width of the parent tag
	
	eg:be 75% the width of the parent container */
#percent-width{	
	width:75%;
	/* min-width 
	   max-width
		can be used to set limits on variable width box models
	*/
}
/* fixed heights work predicatably */
.fixed-height{	
	height:100px;
	padding:0px 20px;
	border:solid 1px black;
	margin:10px;
}
/* 
	height as percentage only works
	when the box model has an ancestor (parent, grandparent, etc)
	with an explicitly assigned height.
	
be 100% the height of the parent tag (200px)*/
#percent-height-no-parent{
	/* 
	height here will have no effect
	this tag has no parent with explicit height
	*/
	height:200%;
}
#percent-height{
	background-color:#ccc;
	/* 
	height here will work
	this tag has a parent with explicit height
	*/	
	height:100%;
}


/* 
inline tags will not resize. use 
	display:block;
if you need to resize inline tags
*/
#inline_box{
	background-color:#ddd;
	/* changes to size will 
		not affect this inline tag	*/
	width:300px;
	height:200px;
}
#inline_box_display_block{
	background-color:#efefef;
	/* changes to size will 
		affect this inline tag	
		since it no longer acts inline using
			display:block;
	*/
	width:300px;
	height:200px;
	display:block;
}







div[id*="-"]{
	background-color:#efefef;
	border:solid 1px black;
	margin-bottom:2px;
}