body {
	background-color: #333;
	color: #FFF;
	font-family: 'Source Sans Pro', Helvetica, sans-serif;
	text-align: center;
	margin: 0;
}

/* main container to center everything */
main {
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

h1, h2, h3, h4, h5 {
	color: #FF0;
}

/* section page */
section {
	background-repeat: no-repeat;
	font-size: 1.5em;
}

.box {
	padding: 1em;
	margin: 1em;
	border: 1px dashed #F0F; 
}

/* link text */
a {
	text-decoration: none;
	border-bottom: 1px dotted;
	color: #0FF;
}

a img, a p {
	border: 0px;
	border-bottom: none;
}

/* embed? */
img, iframe {
	max-width: 100%;
}

figcaption {
	font-size: smaller;
	font-style: italic;
}

/* util, clear floats */
.clear {clear: both;}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

	body {
		font-size: 0.85em;
	}

	/* use full size */
	main {
		width: 98%;
	}

	.box {
		padding: 0.25em;
		margin: 0.5em;
	}
}