.wrapper {
  padding: 0;
  border: 3px solid #fff;
  width: 800px;
  margin: 0 auto;
  background-color: #636466;
}

h2 {
  margin: .2em 0;
}
.main {
  clear: both;
  width: 800px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #333;
  color: #000;
  background-color: #636466;
/* background-color value is for content background.
   Image is 2000px wide, ~25% is colored, where sidebar should be 
   (exact pixel count of colored area is actually closer to 26%).
   Position corresponds to left sidebar, repeat img vertically.
   Easily modified for right sidebar - just flip the image,
   change bg position to 75% and change .content to float:left.
*/
}
.content {
  width: 576px;
  float: right;
  margin: 0;
  padding: 0;
  border-left: 1px solid #333;
  background-color: #fff;
}

.conceptscontent {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #636466;
}

.sidebar {
  margin-right: 577px;
}
.clear {
  clear: both;
  height: 1px;
  overflow: hidden;   /* prevent IE expanding the container */
  margin: 0;          /* keep flush with surrounding blocks */
}
.footer {
  background-color: #8cc63f;  /* same bg color as h1 */
  margin: 0;          /* flush with .main */
  padding: 1% 2%;
  font-size: .80em;
  font-weight: normal;
  color: #fff;
}
.nav {
}