/*

File: home.css
Purpose: To apply styles specific to the home page
Comments:
  - 2.5 % is used to calculate many of the widths. This value (2.5 %) is equal
    to 1.5 em when the width of #content is at its maximum of 60 em.

*/



#content {
  border-right: none;
  margin: 1.5em 1.5em 1.5em 0;
  padding-right: 0;
  width: auto;
    max-width: 100%;
    min-width: 100%;
}
  #content #introduction {
    height: 16.5em;                                                             /* Same as the height of #visual img */
    margin-bottom: 0;
    margin-left: 34.17%;                                                        /* Width of #visual + the gutter between the two */
    padding-top: 4.5em;
    padding-left: 2.5%;                                                         /* Make the type edge aligned with the type in the middle box */
    width: 63.33%;                                                              /* 100 % - margin-left - padding-left */
  }
  #visual {
    float: left;
    /*margin-bottom: 1.5em;*/
    overflow: hidden;
    width: 31.67%;                                                              /* Box width of 26.67 % + 5 % because it doesn't need padding like the box */
  }
    #visual img {
      display: block;
      height: 16.5em;
      margin: 0 auto;
      width: 14.333em;
    }
  #content ol#overview {
    clear: both;
    list-style-type: none;
  }
    #overview li {
      background: #ecefef url(/images/css/outset_box.background.png) 50% 50% no-repeat;
      border-top: 0.2em solid #7c9494;
      float: left;
      height: 10.5em;
      margin-bottom: 1.5em;
      margin-top: -0.2em;
      padding: 0 2.5%;
      position: relative;
      width: 26.67%;                                                            /* ( (100 % - Two 2.5 % gutters) / 3 boxes ) - 2.5 % padding on the box's inside */
    }
    #overview li:hover,
    #overview li:focus {
      color: #000;
    }
    #overview li.middle {
      margin-left: 2.5%;
      margin-right: 2.5%;
    }
      #content #overview li h2 {
        margin: 0.95em 0;                                                       /* Both margins are needed (I'm not sure why) */
      }
      #content #overview li a {
        height: 100%;
        position: absolute;
          left: 0;
          top: 0;
        width: 100%;
      }
        #content #overview li a:link,
        #content #overview li a:visited {
          border: none;
        }
        #content #overview li a:hover,
        #content #overview li a:active
        #content #overview li a:focus {
          background: #fff;
          border: none;
          opacity: 0.17;
        }

#sub-nav {
  display: none;
}

.wrapper#bottom-outer {
  margin-top: 0;                                                                /* Counter rules set in screen.css to keep the vertical spacing */
  padding-top: 0;                                                       
}