/* desktop.css for ch08/nature
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 {
  float: left;
  padding: 10px 0 10px 10px;
}
nav { clear: left; }

/*****************************************************
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,
.Links li span {
  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;
}

/********************************************
move the site map list away from the border */
article#siteMap { margin-left: 10px; }

/*****************************************************************
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;
}

/*****************************************************
some pages may contain only text following a heading */
article#textOnly {
  float: left;
  width: 95%;
  margin-left: 1em;
}

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

article.BMI,
article.Feedback {
  margin-top: 20px;
  padding: 20px 50px;
  background-color: #FFB;
}

.Centered { text-align: center; }

.RightAligned { text-align: right; }

select, input, textarea { background-color: #EEE; }

.SectionBackground {
  margin: 10px 0;
  padding: 5px 0;
  background-color: #FFF8DC;
}

.LegendBackground { background-color: #FFF; }

/********************************************************
for the welcome message at the upper right of each page */
div#welcome {
  float: left;
  margin-top: 1em;
  margin-left: 1em;
}

div#welcome h5 { margin-top: 1em; }
