/* desktop.css for ch07/nature1
In this version of the website, no links are active but 
dropdown images actually "drop down", and images rotate */

/**********************************************************
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: 20px auto 0 auto;
  border: 8px solid black;
  border-radius: 25px;
  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 10px 10px; }

/*****************************************************
styles for main menu, dropdown menus, and menu items
two groups of links: main menu, and dropdown menus   */

/* for the always-visible main menu options */
.Links li {
  float: left;
  width: 127px;
  border-right: 1px solid #FFF;
  font-weight: bold;
  font-size: .7em;
  text-align: center;
  list-style: none;
}

.Links li:last-child {
  width: 132px;
  border-right-width: 0;
}

/* for all links for all menu options */
.Links li a {
  display: block;
  height: 25px;
  line-height: 25px;
  background-color: #048018;
  color: #FFF;
  text-decoration: none;
}

.Links li a:hover {
  background-color: #5FB361;
  color: #FFF;
}

/* for the dropdown menu options */
.Links div {
  position: absolute;
  background-color: #048018;
  visibility: hidden;
}

.Links div a {
  display: block;
  width: 124px;
  margin-top: 2px;
  padding-left: 3px;
  background-color: #C5DCC9;
  color: #048018;
  text-align: left;
}

/**************************************************************
home page has text at left and image at right in content area */
article#textLeft {
  float: left;
  width: 63%;
  margin-left: 1em;
}

div#image {
  float: left;
  width: 33%;
  margin: 20px 0 10px;
  text-align: center;
}

/********************************************
footer now contains just a copyright notice */
footer {
  clear: left;
  width: 100%;
  height: 25px;
  line-height: 25px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #093;
  color: #DDD;
  text-align: center;
  font-weight: bold;
  font-size: .9em;
}