body {
  font-family: garamond, serif;
  font-size: 0.8em;
  text-align: center;
  background: url(../images/1-bg.jpg) no-repeat top center;
  background-color: black;
  min-height: 600px;
}
a {
  text-decoration: none;
  font-weight: bold;
  color: #efefef;
}
a:hover {
  text-decoration: underline;
}

/*
 * #wrap is the div that contains the main content.
 * There are three divs (one for each column) inside this element
 */
#wrap {
  margin: auto;
  /* margin-top here moves the div to below the logo in the background image */
  margin-top: 250px;
  width: 967px;
}

/*
 * This section is devoted to organizing the three-column layout
 * that is within the #wrap div
 */
#main_left {
  float: left;
  width: 741px;
}
#main_content {
  float: right;
  width: 515px;
  height: 445px;
  background: url(../images/3-box1.png) no-repeat top center;
}
#left {
  width: 226px;
  min-height: 400px;
}
#right {
  float: right;
  width: 226px;
  height: 445px;
}


/*
 * This section sets up the general rules for
 * the left and right menus
 */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  text-align: center;
}
li a {
  display: block;
  width: 226px;
  margin: auto;
}

/*
 * This section sets up the left hand menu
 */
li#about a {
  height: 46px;
  background: url(../images/2-about.png) no-repeat top center;
}
li#about a:hover {
  background: url(../images/2-about_hi.png) no-repeat top center;
}
li#faq a {
  height: 49px;
  background: url(../images/2-faq.png) no-repeat top center;
}
li#faq a:hover {
  background: url(../images/2-faq_hi.png) no-repeat top center;
}
li#troops a {
  height: 46px;
  background: url(../images/2-troops.png) no-repeat top center;
}
li#troops a:hover {
  background: url(../images/2-troops_hi.png) no-repeat top center;
}
li#screenshots a {
  height: 46px;
  background: url(../images/2-screens.png) no-repeat top center;
}
li#screenshots a:hover {
  background: url(../images/2-screens_hi.png) no-repeat top center;
}
li#official_site a {
  height: 79px;
  background: url(../images/2-officialsagasite.png) no-repeat top center;
}
li#official_site a:hover {
  background: url(../images/2-officialsagasite_hi.png) no-repeat top center;
}

/*
 * This section sets up the left hand menu
 */
li#free_account a {
  height: 124px;
  background: url(../images/4-right1.png) no-repeat top center;
}
li#download a {
  height: 68px;
  background: url(../images/4-right2.png) no-repeat top center;
}
li#register a {
  height: 87px;
  background: url(../images/4-right3.png) no-repeat top center;
}


/*
 * This section set ups the #main_content
 * which contains a div for the image and a div for the text
 */
div#main_content div#text {
  float: left;
  width: 243px;
  height: 410px;
  color: white;
  margin: 15px 0 0 15px;
  overflow: auto;
  text-align: left;
}
div#main_content div#text p {
  margin-right: 8px;
}
div#main_content div#iphone_image {
  float: right;
  height: 410px;
  width: 222px;
  margin: 15px 15px 0 0;
}
div#main_content div#text iframe {
  width: 243px;
  height: 410px;
  border: 0;
}


/*
 * This is for the screenshots page
 */
div#screenshots {
  margin: 15px;
}
div#screenshots img {
  border: #999 solid 1px;
}