/* desktop.css for ch10/nature

/**********************************************************
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, margin and border properties set here apply only
to the body element, while 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;
}

/************************************************
prevents the nav element from "floating upward" */
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;
  font-size: 90%;
  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 content area has text at left and image at right */
main#home {
  width: 900px;
  height: 320px;
  background-color: #FFB;
}

article#textLeft {
  float: left;
  width: 604px;
  padding-left: 16px;
}

div#image {
  float: left;
  width: 280px;
  padding: 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 {
  padding-left: 10px;
  background-color: #FFB;
}

/*****************************************************************
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    { padding: 0 30px 10px; }
article#siteMap ol li { padding-top: 5px; }
article#siteMap ul    { padding: 0 30px 5px; }

/*****************************************************
some pages may contain only text following a heading */
article#textOnly {
  float: left;
  padding: 0 1em;
  background-color: #FFB;
}

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

.LeftAligned {
  text-align: left;
}

.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;
}