/*
  wrap the whole page to ensure width consistency and central position */
#wrapper  {
  width:  790px;
  margin: 0 auto;
}



/*
  container for masthead background
  also expands to contain a preamble if necessary */
#header {}
/*
  preamble holds a section intro or other home information if required */
#preamble {
  position: relative;
  height: 170px;
  width:  710px;
  padding:  0 40px;
}
  #byline {
    width:  470px;
    position: absolute;
    bottom: 20px;
  }

/*
  site-wide navigation and title elements */
#masthead {
  position: relative;
  width:  790px;
  height: 260px;
}
/*
  the site title and home links are contained in an h1 tag */
  #masthead h1  {
    position: absolute;
    top:  60px;
    left: 20px;
  }
    #masthead h1 a  {
      display:  block;
      height: 150px;
      width:  230px
    }
/*
  both navigation bars share the same width and height, and the lists inherit
  similar properties in both */
  #masthead .navigation {
    height: 30px;
    width:  710px;
    padding:  5px 40px;
  }
    #masthead .navigation ul  {}
    #masthead .navigation ul,
    #masthead .navigation li  {
      line-height:  30px;
      list-style: none;
      display:  block;
    }
    #masthead .navigation li  {
    }
      #masthead .navigation li a  {
        display:  block;
        padding:  0 5px;
      }
	#masthead .navigation ul li:first-child	{
		float:	left;
		margin-left:	-5px;
		margin-right:	10px;
	}
/*
  sections navigation bar runs navigation elements to the left */
  #masthead .sections {
    position: absolute;
    height: 20px;
    bottom: 0;
  }
    #masthead .sections li  {
      float:  left;
      margin-right: 10px;
      line-height:  20px;
      margin-left:  -5px;
    }
      #masthead .sections li a  {
      }
/*
  site navigation bar runs navigation elements to the right */
  #masthead .site {}
    #masthead .site li  {
      float:  right;
      margin-left: 10px;
      margin-right: -5px;
    }
      #masthead .site li a  {
      }



/*
  a block for copy and contextual data on the page
  relatively positioned to allow for absolutely positioned elements within */
#content  {
  width:  790px;
  float:  left;
  position: relative;
  padding:  30px 0;
}
/*
  a sidebar in this iteration of the design - handles information relevant to
  the current copy */
  #context  {
    width:  230px;
    margin: 0 0 0 40px;
  }
/*
  the main content copy panel - handles all relevant textual data, and
  ideally places ahead of the context sidebar */
  #copy  {
    width:  470px;
    margin: 0 40px 0 0;
    float:  right;
  }
/*
  change layout if we're in a home page */
  body.landing #context {
    margin: 0 40px 0 0;
    float:  right;
  }
  body.landing #copy {
    float:  left;
    margin: 0 0 0 40px;
  }