/* default.css for ch04/nature2 */

/**********************************************************
global settings to remove any default padding and margins */
* {
  padding: 0;
  margin: 0;
}

/**********************************************************
The following line may be redundant, but does no harm.    */
main, header, footer, nav, article { display: block; }

/********************************************************
width and margin properties set here apply only to body;
font properties set here will be inherited throughout   */
body {
  width: 900px;
  margin-top: 10px;
  margin-left: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
}

/**************************************************
individual element margins set by trial and error */
h3 { margin: .5em 0 .2em; }
p { margin: 0 .2em .7em 0; }

/*********************************************
company logo appears at the top of each page */
div#logo { padding: 10px 0; }

/********************************************
three kinds of menus: main, footer, and sub */

nav#mainMenu { /* appears below logo on every page */
  width: 100%;
  height: 20px;
}

nav#subMenu { /* appears at left in content area on some pages */
  float: left;
  width: 180px;
}

nav#footerMenu { /* appears in the footer of each page */
  float: left;
  width: 360px;
  height: 20px;
}

/***********************************************************
three groups of menu links: main, footer and sub           */
nav ul { list-style: none; }

nav ul li {
  float: left;
  width: 179px;
  height: 25px;
  border-right: 1px solid #FFF;
  background-color: #093;
  text-align: center;
}

nav ul li a {
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  font-size: .7em;
}

nav ul li a:hover {
  padding: 2px 1px;
  background-color: #3F3;
  color: #000;
}

/* vertical (sub)menu items need these revisions */
nav#subMenu ul li {
  border-top: 1px solid #FFF;
  background-color: #0B3;
}

/*******************************************************************
only home page has text at left and image at right in content area */
article#textLeft {
  float: left;
  width: 65%;
}

div#image {
  float: left;
  width: 35%;
  margin-top: 20px;
  text-align: center;
}

/*******************************************************
pages with submenus at the left have text at the right */
article#textRight {
  float: left;
  width: 715px;
  margin-left: 5px;
}

/*****************************************************************
list structure must be restored for the site map page, since all
padding and margins have been removed by the global settings     */
article#siteMap ol,
article#siteMap ul {
  margin: 0 30px 10px;
}

/************************************************************
footer contains both a copyright notice and a two-item menu */
footer {
  clear: left;
  width: 100%;
  height: 20px;
}

div#copyright {
  float: left;
  width: 539px;
  height: 25px;
  line-height: 25px;
  border-right: 1px solid #FFF;
  background-color: #093;
  color: #DDD;
  text-align: center;
  font-weight: bold;
  font-size: .9em;
}