rnt_styles.css

@charset "utf-8";

/*
   New Perspectives on HTML and CSS
   Tutorial 8
   Case Problem 4

   Roads Not Taken Layout Style Sheet

   Filename: rnt_styles.css

*/

/* HTML and Body Styles */

html {
  background: rgb(247, 247, 247) url(rnt_back.png) top left no-repeat;
}

body {
  width: 100%;
  min-width: 640px;
  max-width: 1024px;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: normal;
  margin: 0px auto;
}

/* Navigation List Styles */

nav {
  width: 100%;
}

nav li {
  width: 25%;
  float: left;
  text-align: center;
  background-color: rgb(128, 128, 255);
}

nav li a {
  text-decoration: none;
  font-size: 0.8em;
  color: white;
}

/* Header Styles */

header {
  border-bottom: 1px solid black;
  clear: both;
  text-align: right;
}

/* Figure Box Styles */

figure {
  float: left;
}

figure {
  background-color: rgb(102, 102, 102);
  width: 350px;
  text-align: center;
  border: 1px solid rgb(51, 51, 51);
  padding: 20px 0px;
  margin: 20px 20px;
}

figure figcaption {
  font-size: 0.8em;
  color: white;
}

/* Section Styles */

section#main {
  float: left;
  width: 60%;
  margin-top: 20px;
}

section p {
  margin: 0px 0px 20px 0px;
}

section#main p:first-of-type:first-letter {
  font-size: 4em;
  float: left;
  margin: 15px 5px 5px 0px;
  font-family: "Times New Roman", serif;
}

/* Poem Styles */

section.poem {
  width: 45%;
  clear: none;
  float: left;
  padding-left: 10px;
}

section.poem h2 {
  font-size: 1.4em;
  letter-spacing: 7px;
  font-weight: normal;
  margin-bottom: 10px;
}

section.poem:first-of-type {
  border-right: 1px solid black;
}