/* tablet.css for ch08/nature */

/****************************************************
This style sheet takes effect when the width of the 
viewport (browser window) falls below 900px.        */

/* gives some whitespace on either side of the display */
body { width: 95%; }

/* visually separates a menu link from the one below it */
ul.Links li { border-bottom: 1px solid #FFF; }

/* move 4th and following menu items to second row */
ul.Links li:nth-child(4) { clear: left; }

/* ensures both rows of menu links have same length*/
ul.Links li:nth-child(1) { width: 33%; }
ul.Links li:nth-child(2) { width: 33%; }
ul.Links li:nth-child(3) { width: 33%; }
ul.Links li:nth-child(4) { width: 25%; }
ul.Links li:nth-child(5) { width: 25%; }
ul.Links li:nth-child(6) { width: 25%; }
ul.Links li:nth-child(7) { width: 24%; }

/*******************************************************
makes right edges of first and second menu item rows
line up, at the expense of a 2px gap instead of a 1px
gap between "e-store" and "Products+Services"          */
nav ul li:nth-child(2) { border-right: 2px solid #FFF; }

/* to make room for welcome message on the right of the logo */
div#logo { max-width: 65%; }

/* makes logo "scale down" as the width decreases */
div#logo img {
  max-width: 100%;
  height: auto;
}

/* removes the image from the home page*/
div#image { display: none; }

/* container for the textual content of each page */
article {
  float: left;
  width: 95%;
  margin-left: 10px;
}

/* special containers for the BMI and Feedback forms */
article.BMI,
article.Feedback {
  margin: 0;
  padding: 2%;
}

article.Feedback textarea { max-width: 70%; }

/* same style for both of these in the tablet configuration */
article#textOnly,
article#textLeft { width: 95%; }

article#textRight {
  float: left;
  width: 95%;
  margin-left: 10px;
}

/* reduces size of footer text to keep it from "overflowing */
footer { font-size: 80%; }

/********************************************************
for the welcome message at the upper right of each page */
div#welcome {
  max-width: 30%;
  margin: 1em 0 1em 1em;
  font-size: 70%;
}

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