@charset "utf-8";

@font-face {
	font-family: Champagne;
	src: url(cac_champagne.woff) format('woff'),
	     url(cac_champagne.ttf) format('ttf');
}

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 4
   Review Assignment
   
   Layout and Typographical Style Sheet for Tree and Book Family Home Page
   
   Filename: tb_designs.css
*/

/* HTML Styles */

html {  
	color: rgb(51, 51, 51);
	font-size: 12px;
 }
 
 
 /* Page Body Styles */
 
 body {
	background-color: rgb(211, 211, 211);
	font-family: Verdana, Geneva, Arial, sans-serif; 	
	margin-left: auto;
	margin-right: auto;
	width: 960px;
 }
 
 
 /* Body Header Styles */
 
 body > header > img {
	 display: block;
	 width: 100%;
 }
 
 body > header > nav#topLinks {
	 background-color: rgb(51, 52, 45);
	 color: white;
	 line-height: 1.7em;
	 text-align: right;
	 padding: 5px 10px 5px 0px;
 }
 
 nav#topLinks a:link, nav#topLinks a:visited {
	 color: white;
 }
 
 nav#topLinks a:hover, nav#topLinks a:active {
	 color: rgb(248, 237, 212);
 }
 
 nav#mainLinks ul li {
	 background-color: rgb(83, 65, 41);	
	 display: block;
	 float: left;
	 text-align: center;
	 width: 20%;	
 }
 
 nav#mainLinks ul li a {
	 color: white;	
	 display: block;
	 height: 2.5em;	
	 text-align: center;
	 line-height: 2.5em;	
 }
 
 nav#mainLinks a:link, nav#mainLinks a:visited {
	 color: white;
 }
 
 nav#mainLinks a:hover, nav#mainLinks a:active {
	 background-color: rgb(51, 51, 45);
 }
 
 
 /* Main Styles */
 main {
	background-color: white;	
	clear: both;			   
	padding: 30px 20px 10px 20px;
   
 }
 
 main header {
	 margin: 20px auto;	
	 width: 70%;
 }
 
 main header h1 {
	 color: rgb(97, 66, 28);	
	 font-family: Champagne, cursive;
	 font-size: 5em;
	 text-align: center;
 }
 
 
 
 /* Article Styles */
 
 article { 	
	 margin: 10px auto 30px;
	 width: 80%;	
 }
 
 article h1 {
	 color: rgb(147, 116, 68);
	 font-family: Baskerville, "Palatino Linotype", Palatino, 
				  "Century Schoolbook", "Times New Roman", serif;
	 font-size: 2em;
	 margin: 20px;
	 padding-top: 10px;
 }
	 
 article p {
	 font-size: 1.2em;
	 margin: 20px 30px 20px 20px;
 }
 
 /* Footer Styles */
 
 footer {
	 background-color: rgb(63, 45, 21);	
	 color: white;	
	 display: block;
	 padding: 25px;
 }
 
 body > footer > nav.vertical, body > footer > section {
	 float: left;
	 width: 25%;	
 }
 
 body > footer > nav.vertical > ul {
	 line-height: 2em;
 }
 
 footer nav a {
	 text-decoration: underline;
 }
 
 footer a:visited, footer a:link {
	 color: white;
 }
 
 footer a:hover, footer a:active {
	 color: white;
 }
 
 footer::after {
	clear: both;   
	content: "";
	display: table;
 }