The document consists of CSS stylesheets for the Slate & Pencil tutoring website, detailing styles for various elements such as the body, header, navigation, topics, comments, and footer. It emphasizes accessibility and visual appeal, with a focus on improving user experience. Additionally, the document includes testimonials from students praising the tutoring services provided.

1. @charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Case Problem 1
Typographical styles for Slate and Pencil Tutoring
Filename: sp_styles.css
*/
/* Window and Body Styles */
html {
background-color: rgb(230, 182, 144);
}

2. body {
background-color: rgb(250, 238, 218);
font-family: Verdana, Geneva, Arial, sans-serif;
}
/* Page Header Styles */
body > header {
background-color: rgb(61, 138, 216);
}
body > header > nav a {
font-size: 1em;
margin: 0.4em 0;

3. padding: 5px;
}
body > header > nav a:link, body > header > nav:visited {
color: rgb(250, 238, 218);
}
body > header > nav a:hover, body > header > nav:active {
background-color: rgba(0, 0, 0, 0.2);
}
/* Horizontal Navigation List Styles */
nav.horizontal ul li {
background-color: rgb(18, 31, 102);
font-size: 0.9em;
padding: 10px 0;

4. text-align: center;
}
nav.horizontal a:link, nav.horizontal a:visited {
color: rgb(250, 238, 218);
}
nav.horizontal a:hover, nav.horizontal a:active {
color: rgb(255, 255, 64);
}
/* Topics Styles */
ul#topics {
margin-top: 20px;
margin-bottom: 20px;
}

5. ul#topics li p {
color: rgb(95, 114, 232);
font-size: 0.8em;
}
/* Customer Comment Styles */
ul#comments li p {
font-size: 0.9em;
color: rgb(121, 121, 121);
line-height: 1.2em;
}
/* Footer Styles */

6. footer {
color: rgb(186, 186, 156);
background-color: rgb(44, 91, 169);
font-size: 0.9em;
padding: 10px 0px;
text-align: center;
}
HomeOur TutorsPricingTestimonialsYour AccountChat
OnlineMathScienceEnglishLanguagesHistorySociologyArtOther
Our tutors have advanced degrees, supplemented with real-
world
experience to help you meet your education goals.
Every session is just you and your instructor and
there is always someone online to help you. 24/7.
We cover it all: From from Biochemistry to
Beethoven. We can also help you prep for the ACT,
SAT, and AP
exams.
We keep our prices low. Sign up for one-time assistance or
enroll
for a full semester at greatly reduced rates.
“Thanks to Slate & Pencil I passed AP Calculus
with a 5.”
— Kevin, 12th Grade, Utah
“I use Slate & Pencil all of the time to

7. supplement my lectures and course notes.”
— Paul, 12th Grade, Texas
“I'm making the honor roll for the first time thanks to
your wonderful service and help!”
— Lisa, 11th Grade, Florida
“Geometry is a breeze after working online with your great
tutors and review materials.”
— Karen, 9th Grade, Nebraska
“I've seen a great improvement in my use of study time and
I retain more than ever before.”
— Gianna, 10th Grade, Vermont
“After using Slate & Pencil, my SAT and ACT
scores went through the roof!!!”
— Todd, 11th Grade, Illinois
Slate & Pencil Tutoring; © 2017 All Rights Reserved

8. @charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Case Problem 1
Layout styles for Slate and Pencil Tutoring
Author:
Date:
Filename: sp_layout.css
*/
/* Window and Body Styles */

9. /* Row Styles */
/* Page Header Styles */
/* Horizontal Navigation List Styles */

10. /* Topics Styles */
/* HR Styles */
/* Customer Comment Styles */

11. /* Footer Styles */
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Case Problem 1
Base Style Sheet for the Slate & Pencil Website
Filename: sp_base.css
*/
article, aside, figcaption, figure,

12. footer, header, main, nav, section {
display: block;
}
address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, ol, p, section, span, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
nav ul {
list-style: none;

13. list-style-image: none;
}
nav a {
text-decoration: none;
}
body {
line-height: 1;
}