/*
First, make the browser defaults explicit, so other humans,
including you, will know that everything else builds on the
defaults. See Chapter 19.
*/
body {
  width: 100%;
  font-size: 1em;
}
/*
I want a banner that stretches all the way across, with no
whitespace separating it from the top of the window. Also,
I want it to be fixed in place as the rest of the page scrolls.
See Chapters 64-68.
*/
div#banner {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0033ff;
}
/*
The image will float left, displacing the leftmost part of the
banner's background color. See Chapter 28.
*/
div#banner img, div#spacer img {
  float: left;
}
/*
Since elements below the fixed-position banner ignore
it, hiding underneath it, I need a spacer that pushes them
away from it. I code a duplicate—almost a duplicate—
of the visible banner, but this one is invisible. Since the
browser insists on adding some whitespace above a static
div, I give it a little negative margin to move it up to where
the fixed-position banner sits. See Chapter 68.
*/
div#spacer {
  width: 100%;
  visibility: hidden;
  margin-top: -.5%;
}
/*
Except for visibility, the visible and invisible headings for
the two banner divs are identical. I want a big, bold
sans-serif heading in white. I pad it to move it away
from the image. See Chapter 68.
*/
div#banner h1, div#spacer h1 {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 2em;
  color: white;
  padding-left: 20%;
}
/*
The header and footer will stretch all the way across the
window. But with only two side-by-side content sections,
the full width is more than I want. The content will occupy
75% of the width. I want it centered, so I give it left and
right margins of auto. See Chapters 22 and 62.
*/
div#main {
  width: 75%;
  margin: 0 auto 0 auto;
  }
/*
It isn't going to be much of a navbar, just a little thing with
three menu items. So I place it inside the main div, which
is already narrower than the window. And I make the navbar
div just 60% of that width. Then I nudge it to the right a little
with a left-margin. I clear the div. Otherwise, it will try to
wrap its contents around the left-floated image in the
banner. See Chapters 69-75.
*/
div#navbar {
  clear: both;
  width: 120%;
  margin: 0 -2% -3% 6%;
}
/*
The menu is an unordered list without bullets or indentation.
See Chapters 69-75.
*/
div#navbar ul {
  list-style-type: none;
  padding-left: 0;
}
/*
I override the default block display of list items, float them
left so they line up horizontally, and add a bit of margin
on the right of each one so they're separated by a little
whitespace. I center the text in each one. See Chapters
69-75.
*/
div#navbar ul li {
  text-align: center;
  display: inline;
  width: 15%;
  float: left;
  margin: 1.5em 1em 0 0;
  
}
/*
I want the anchors to be pretty chunky. I eliminate the
underline that's a default for anchors. Block display and
padding enlarge the color blocks. See Chapters 69-75.
*/
div#navbar ul li a {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 1.1em;
  font-weight: 900;
  text-decoration: none;
  color: white;
  display: block;
  padding: .3em;
}
/*
The menu item color blocks are red. See Chapters 69-75.
*/
li.changeBackground {
  background-color: #0000cc;
}
/*
When the user hovers over one, it
turns dark brown. See Chapter 75.
*/
li.changeBackground:hover {
  background-color: #0000ff;
}
/*
This is the principal section of content. It'll float
left and occupy 68% of the width of the main
section. See Chapters 61-62.
*/
div#content{
  width: 68%;
  font-size: 1.2em;
  font-family: "Times New Roman", Tahoma, Geneva, sans-serif;
  float: right;
  margin: .8% 0 0 0;
}
/*
The sidebar will be float right. If you add the
68% width of the content section to the 29% of
this section, it totals only 97%. This leaves 3%
for a gutter of whitespace to separate them.
See Chapters 61-62.
*/
div#sidebar {
  width: 30%;
  float: left;
  margin: 1.6% 0 0 0;
}
/*
This will be my largest heading besides the h1
heading in the header at the top. I chose very
dark grey for headings and paragraphs because
I feel that dead black can be a little jarring.
*/
h2 {
  font-family: Tahoma, Geneva, sans-serif;
  color: #333333;
}
/*
I make standard paragraphs and list text the
same.
*/
p, ul {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.3em;
  color: #333333;
}
/*
Sidebar text will be sans-serif and a little smaller
than standard text to set it apart. Here's where
you can see I'm using some redundant styling
rather than grouping selectors.
*/
div#sidebar p {
  font-family: Verdana", Tahoma, Geneva, sans-serif;
  font-size: 1em;
  color: #000000;    
}
/*
Third-level headings are the same color as the
header color block. I've given them some negative
margin because I felt the browser was putting too
much whitespace between them and the paragraph
text below them.
*/
div#sidebar h3 {
  font-size: 1.2em;
  font-family: Verdana, Times, serif;
  color: #0033ff;
  margin-bottom: -5%;
}
div#sidebar p {
  font-size: 1.2em;
}
/*
The footer is just a regular div with its height
specified. I clear any floats that may occur above it.
*/
div#footer {
  clear: both;
  width: 100%;
  height: 75px;
  background-color: #0000dd;
}
/*
Same idea as the navbar items.
*/
div#footer ul {
  list-style-type: none;
  padding-left: 20%;
}
/*
Same idea as the navbar items.
*/
div#footer ul li {
  display: inline;
  float: left;
  margin: 0 .75em 0 0;
}
/*
Same idea as the navbar items.
*/
div#footer ul li a {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
  color: white;
  display: block;
  padding: 1.2em .3em .3em .3em;
  text-decoration: none;
}
/*
I want to wrap paragraph text around an image
on the hiking and skiing pages. The margins add
whitespace between the images and the text.
See Chapter 28.
*/
img.wrap {
  float: left;
  margin: 0 1em .5em 0;
}
/*
This is an afterthought. After building the pages,
I found that I wanted to separate the list items
on the skiing page with a little whitespace.
See Chapter 38.
*/
ul li {
  margin-bottom: .25em;
}
.business {
  font-family: Verdana, sans-serif;
  text-decoration: none;
}
a {
  color: #000088;
  text-decoration: none;
}
a: hover {
  color: #000099;
  text-decoration: none;
}
a: active {
  color: #000044;
}
a: visited {
    color: #000022;
    
}