@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 3
   Case Problem 1

   Layout styles for Slate and Pencil Tutoring
   Author: Stoy Gates
   Date:   9/17/2017

   Filename: sp_layout.css

*/

/* Window and Body Styles */

html {
	height: 100%;
}

body {
	width: 95%;
	max-width: 960px;
	min-width: 640px;
	margin: 0 auto;
	min-height: 100%;
}

header, ul, nav, li, a {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* Row Styles */

body > row::after {
	clear:both;
	content: "";
	display: table;
}




/* Page Header Styles */

body > header > img {
	display: block;
	width: 70%;
	float: left;
}

nav.vertical li {
	width: 30%;
	padding-left: 2%;
	padding-right: 2%;
	float: left;
}

header > header > nav {
	display: block;
	width: 100%;
}


/* Horizontal Navigation List Styles */

nav.horizontal {
	display: block;
	width: 12.5%;
	float: left;
}





/* Topics Styles */

#topics ul {
	display: inline-block;
	width: 20%;
	float: left;
	margin-left: 0%;
	margin-right: 1.5%;
}

#topics li:first-child {
	margin-left: 7.75%;
}

#topics li:last-child {
	margin-right: 7.75%;
}

#topics img {
	display: block;
	width: 50%;
	margin: auto;
}

/* HR Styles */

hr {
	width: 50%;
}



/* Customer Comment Styles */

#comments ul {
	width: 75%;
	margin-top: 40px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
}

#comments li {
	display: block;
	width: 50%;
	float: left;
	margin-bottom: 30px;
}

#comments img {
	display: block;
	width: 20%;
	float: left;
	margin-right: 5%;
	margin-left: 5%;
}

#comments p {
	float: left;
	width: 70%;
}
/* Footer Styles */

footer{
	clear:both;
}