/* HTML resets */
body, html, div, p, img, h1, h2, h3, h4, h5, h6, ol, ul, li { margin: 0; padding: 0; font-weight: normal; font-size: 100%; outline: none; border: none;}

/* HTML5 block elements */
header, section, article, footer, aside, nav { display: block; }

/* Put your styles below here */
#wrapper { margin: 0 auto; width: 660px; }

body { font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; }

header { 
	margin-top: 5em;
	
	#logo { 
		width: 145px; 
		height: 145px; 
		margin: 0 auto; 
		-moz-border-radius: 72px; 
		-webkit-border-radius: 72px; 
		background-color: black; 
		
		a { 
			position: absolute; 
			margin: 1em 0 0em 1.5em; 
			color: white; 
			text-align: center; 
			text-transform: lowercase; 
			text-decoration: none; 
			font-weight: 100; 
		}
		  
	}

	#navigation {
		margin: 5em 0; 
		text-transform: lowercase; 
		text-align: center;  
		font-style: italic; 
		font-size: 0.8em;
		li:not(:last-child):after { content: " /"; }
		
		a { color: black; text-decoration: none; }
		a:hover { text-decoration: underline; }
		
	}
}


nav li { display: inline; list-style-type: none; }

#breadcrumbs, footer { color: gray; font-size: 0.7em; }

#breadcrumbs {
	li:not(:last-child):after { content: " ➔";}
	border-top: 1px solid lightgray;
	padding-top:5px;
	a { color: inherit; }
}

#sub-navigation{
	font-size: 0.8em;
	li { display: block; margin-bottom: 5px; }
}

nav, footer { margin: 1em 0; }

/* Typesetting */
h1, h2, h3, h4, h5, h6 { margin: 1.25em 0; }

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 0.9em; }

a { color: #256ec4; }
p { font-size: 0.8em; line-height: 140%; margin-bottom: 10px; color: #333;}

/* Floating the Magic template */
.magic article { 
	width: 450px; 
	float: left; 
	border-right: 1px solid lightgray;
	margin-right: 14px; 
	padding-right: 15px;
}
.magic aside { 
	width: 180px; 
	float: left 
}
.clear{ clear: both; }