/* Table of Contents:

	Typography
	Header Layout
	Middle Layout
	Footer Layout
	
*/

/* Typography
--------------------------------------------------------------------------------------- */

#myheader, #my_middle, #my_middle_subsection {
	color: black;
	font-size: 1.6em;
}

.strong, #my_middle_subsection {
	font-weight: bold;
}

#my_footer {
	color: white;
}

.align_right {
	text-align: right;
}

.red {
	color: red;
}


/* Header Layout
--------------------------------------------------------------------------------------- */

#my_header {
	height: 100px;
}


/* Middle Layout
--------------------------------------------------------------------------------------- */

#my_middle {
	width: 500px;
	padding: 20px;
}

#my_middle_subsection {
	margin: 20px;
	border: 1px solid #CCC;
}

#my_first_box, #my_second_box {
	height: 200px;
	width: 300px;
	margin: 0 30px;
	border: 2px dotted black;
	background: pink;
}

#my_second_box {
/* All the properties defined above are still in effect, but the two below will overwrite the width and background.
So I have two different size/colour boxes out of only one and a half snippets of CSS! */
	width: 350px;
	background: green;
}

/* Footer Layout
--------------------------------------------------------------------------------------- */

#my_footer {
	background: black;
}