body { /* use body to target the whole page*/
	background-color: white;
	color: darkgreen;
	text-align: left;
	font-size: 150%;
	font-family: Garamond, Helvetica, Arial, sans-serif;
}
a {
	text-decoration: none;
	color: navy;
}
ul {
	list-style-type: none;
	padding: 0;
}
#container {
	background-color: rgba(127, 229, 247, 0.42);
	width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
#header {/* use # for id */
	background-color: rgba(116, 207, 223, 0.42);
	color: navy;
	text-align: center;
	font-size: 100%;
	margin: 10px 10px 10px 10px; /* starts from the top, right, bottom and left */
}
#main {
	padding: 10px;
}
#navigation {
	width: 300px;
	background-color: rgba(116, 207, 223, 0.42);
	color: rgba(17, 180, 229, 0.89);
	text-align: left;
	font-size:100%;
	float: left;
	padding: 10px;
}
#intro {
	width: 950px;
	background-color: rgba(116, 207, 223, 0.42);
	color: rgba(17, 180, 229, 0.89);
	text-align: center;
	font-size:100%;
	float: right; /*float position is relative to its parent */
	padding: 10px;
}
#footer {
	background-color: white;
	color: black;
	text-align: right;
	font-size: 50%;
	clear: both;
}
#bruline1 {
	height: 300px;
	width: 450px;
}
#navigation .selected {/*#for id and . for class, means a class inside the id */
	font-weight: bold;
}
h1 {
	text-align: center;
	font-size: 300%;
	margin: 0;
}
h2 {
	color: navy;
	text-align: center;
	font-size:200%;
}
p {
	text-align: left;
	font-size: 110%;
}
h3 {
	font-weight: bold;
	font-size:110%;
	}