/* This is the stylesheet for the Position Site. */

body 
{
	background-color:purple;
	width: 100%;
	margin: 20px auto;
}
	/* Notice that box model attributes can be applied to any element within the html structure. Even the 'body' element. */
p
{
	color:yellow;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 36pt;
	text-align: center;
	width:50%;
	padding: 20px;
	border: 5px dashed lime;
	margin:40px auto;
}

h1 
{
	font-family:"Courier New", Courier, monospace;
	text-align:center;
	width:50%;
	padding: 40px;
	border: 0px dotted black;
	margin:10px auto;
	position:relative;
	top:-10px;
}


/* 

Positioning controls how elements are placed in the browser — it controls the relationship of each element to the other elements. 

Begin to explore this aspect of CSS by changing the "top" value in the h1 element above. Notice that as you make the value more negative it moves up the page and begins to overlap the p element above it. Eventually, in fact, the h1 element will disappear off the top of the browser window — if you make it negative enough.

Positioning is different from the Box Model (which controls the size and shape of individual elements) because it controls the relative position of elements to other elements. That is, if you want to move elements around on a browser page to change their relationship to each other, you need to use the CSS Positioning attributes. 

Look at W3Schools CSS Positioning to learn more: http://www.w3schools.com/css/css_positioning.asp 

*/


img 
{
	display:block;
	margin:10px auto;
}