bw_layout.css

@charset "utf-8";
/*
   New Perspectives on HTML5, CSS3, and JavaScript 6th Edition
   Tutorial 11
   Case Problem 1
   Online Booksworks Style Sheet
   Filename: bw_layout.css
   
*/

/* HTML and Body Styles */

html {
  background: white;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  background: white;
  max-width: 1024px;
  min-width: 420px;
  margin: 0px auto;
  border: 1px solid rgb(221, 221, 221);
}

/* Top Navigation Styles */

nav#top ul {
  position: absolute;
  top: 0px;
  right: 0px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
  background-color: transparent;
  height: 50px;
}

nav#top ul li {
  -webkit-flex: 0 0 120px;
  flex: 0 0 120px;
  margin: 5px;
}

nav#top ul li a {
  color: rgb(61, 61, 61);
  display: block;
  font-size: 1.1em;
  text-align: center;
  padding: 50% 0%;
}

nav#top ul li a:hover,
nav#top ul li a:active {
  text-shadow: 0px 0px 2px rgb(172, 128, 84), 0px 0px 15px rgb(172, 128, 84);
}

/* Input Box Style */

header input {
  width: 240px;
  height: 24px;
  display: block;
  float: left;
  padding: 1px 4px;
  border-width: 2px;
  font-size: 1.3em;
  margin: 0px 10px;
}

header label {
  display: block;
  float: left;
  height: 28px;
}

header label img {
  display: block;
  margin-right: 5px;
}

/* Header Styles */

body > header {
  width: 100%;
  position: relative;
}

body > header > img {
  margin-left: 10px;
}

body > header > div {
  margin: 10px 0px;
  height: 50px;
}

/* Middle Navigation Styles */

nav#middle ul {
  clear: left;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: rgb(75, 51, 6);
  height: 40px;
  box-shadow: 0px 5px 15px rgb(51, 51, 51);
}

nav#middle ul li {
  -webkit-flex: 0 1 80px;
  flex: 0 1 80px;
  margin: 10px;
}

nav#middle ul li a {
  color: rgb(255, 255, 199);
  display: block;
  font-size: 1.2em;
  text-align: center;
  padding: 50% 0%;
}

nav#middle ul li a:hover,
nav#middle ul li a:active {
  color: rgb(255, 255, 3);
  text-shadow: 0px 0px 2px black, 0px 0px 8px black;
}

/* Section Styles */

section {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 100%;
}

section nav#left {
  -webkit-flex: 0 1 220px;
  flex: 0 1 220px;
}

section article {
  -webkit-flex: 1 1 480px;
  flex: 1 1 480px;
}

section aside {
  -webkit-flex: 1 1 220px;
  flex: 1 1 220px;
}

/* Left Navigation Styles */

nav#left {
  background-color: rgb(101, 101, 101);
  padding-left: 10px;
  box-shadow: 5px 0px 15px rgb(51, 51, 51);
}

nav#left ul li {
  line-height: 1.5em;
  margin: 0px 0px 0px 8px;
}

nav#left ul li.newgroup {
  margin-top: 25px;
}

nav#left ul li a {
  color: rgb(255, 255, 231);
}

nav#left ul li a:hover {
  text-decoration: underline;
}

/* Article Styles */

article {
  padding-left: 20px;
}

article a {
  display: inline;
  text-decoration: underline;
  color: rgb(116, 95, 88);
}

article h1 {
  font-size: 3em;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
    sans-serif;
  margin: 30px 0px 15px 20px;
  letter-spacing: 0.05em;
  color: rgb(142, 92, 7);
}

article h2 {
  font-size: 1.3em;
  font-weight: normal;
  margin: 20px 0px 20px 20px;
}

article h3 {
  font-size: 1.1em;
  font-weight: normal;
  margin: 0px 0px 0px 20px;
}

article p {
  font-size: 1.2em;
  margin: 20px 0px 0px 20px;
  padding-bottom: 10px;
  line-height: 1.2em;
}

/* Review Form Styles */

article fieldset {
  border-width: 0px;
}

article label#ratingLabel {
  display: block;
  font-size: 1.2em;
  margin: 30px 0px 10px 0px;
}

article span#stars {
  display: inline-block;
  margin-left: 10px;
}

article input#rating {
  font-size: 1.2em;
  border-width: 0px;
  margin-left: 8px;
}

article label#commentLabel {
  display: block;
  margin: 10px 0px 10px 0px;
  font-size: 1.2em;
}

article textarea#comment {
  width: 100%;
  height: 150px;
  padding: 5px;
  text-align: left;
  border: 1px solid rgb(102, 51, 0);
}

article label#wordCountLabel {
  display: block;
  text-align: right;
}

article input#wordCount {
  width: 70px;
  text-align: right;
  padding: 0px 3px 0px 0px;
  margin-left: 5px;
  border-width: 0px;
}

article input#subButton {
  width: 220px;
  font-size: 1.5em;
  display: block;
  margin: 30px auto 0px;
}

article input#subButton:hover {
  background-color: rgba(255, 255, 0, 0.4);
}
/* Aside Styles */

aside {
  padding-left: 20px;
}

aside > h1 {
  font-size: 1.8em;
  margin: 35px 0px 25px 0px;
  text-align: center;
  font-weight: normal;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
    sans-serif;
  color: rgb(142, 92, 7);
}

aside div.review {
  margin: 15px 15px 5px 0px;
  background: linear-gradient(
    to top left,
    rgb(255, 255, 255) 20%,
    rgb(247, 247, 247)
  );
  color: rgb(75, 51, 6);
  padding-bottom: 10px;
}

aside div.review h1 {
  margin: 10px 35px;
  text-align: center;
  font-size: 1.4em;
  font-weight: normal;
}

aside div.review table {
  margin: 15px 10px 5px 10px;
}

aside div.review table th {
  text-align: left;
  width: 100px;
  vertical-align: top;
}

aside div.review table td {
  vertical-align: top;
}

aside div.review p {
  font-size: 0.95em;
  margin: 10px 20px;
}

aside > p {
  text-align: center;
  margin: 20px 0px;
}

/* Footer Styles */

footer {
  width: 100%;
}

footer p {
  color: rgb(211, 211, 211);
  font-size: 0.9em;
  text-align: center;
  background-color: rgb(75, 51, 6);
  margin: 0px;
  padding: 10px 0px;
}