@charset "UTF-8";
/* CSS Document */

body {
	background-color: olive;
}

body, p, h1, h2, h3, h4, h5, h6, {
	padding: 0;
	margin: 0;
}

body {
	font-family: 'Roboto Slab' , serif;
	font-weight: 400;
	color: black;
	font-size: 18px;
}

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

header {
	background-color: green;
	background-image: url(images/tree.jpg);
	background-repeat: no-repeat;
	background-position:  right;
	background-size: 600px 400px;
}

header h1 {
	color: tan;
	padding: 1rem 0 0 2%;
	font-size: 1.75rem;
	margin-left: 2%;
}

header h2 {
	color: tan;
	padding: 5%;
	font-size: 1.25rem;
	margin-left: 2%;
}

body h1 {
	margin-left: 2%;
}

body h2 {
	margin-left: 2%;
}

body h3 {
	margin-left: 2%;
}

body h2#treeList {
	text-align: center;
}

body div#displayTrees {
	text-align: center;
}

body h2#messageTree {
	margin-left: 2%;
}

body div#message {
	text-align: center;
	color: orange;
}

body button#addTreeStart {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#addTreeEnd {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#removeFirstTree {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#removeSecondTree {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#removeLastTree {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#listSort {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#changeCase {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#thirdTree {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

body button#fourthTree {
	width: 10rem;
	padding: .8rem;
	background: tan;
	margin-left: 2%;
	border: solid 1px;
	border-radius: .4rem;
}

div.keepOpen {
	clear:both;
}

footer {
	background-color: green;
}

footer p {
	text-align: center;
	color: tan;
	padding: .5rem;
	font-size: .8rem;
	font-weight: 500;
}