/*  layout.css
  
This file should only contain positional styles for key structural elements on
the page. No typography, colour, background, or other display styles should be
set here.

*/


/*  body
  Override some basic body assumptions
*/
body  { margin: 0; padding: 0; }

a img {
	border:none;
}

/*  #wrapper
  Define width and alignment of whole page area
*/
#wrapper  {
  position: relative;
  width:  100%;
  float:  left;
}



/*  #masthead
  Set the height of the masthead area, and define space for the logo and main
  navigation.
*/
#masthead {
  position: relative;
  height: 180px;
  width:  880px;
  margin: 0 auto;
}
  #masthead div.logo {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 160px;
    width:  160px;
  }
  #masthead ul.navigation {
    position: absolute;
    right:  0;
    bottom: 55px;
    width:  700px;
    height: 55px;
    margin: 0;
    padding:  0;
  }



/*  #trunk
  The trunk contains the page navigation and content.
*/
#trunk  {
  position: relative;
  width:  880px;
  margin: 0 auto;
}
  #trunk ul.navigation  {
    float:  left;
    width:  180px;
    margin: 0;
    padding:  0;
  }
    #trunk ul.navigation li.section {
      position: relative;
      height: 60px;
      margin-bottom:  13px;
    }
      #trunk ul.navigation li.section a {
        position: absolute;
        width:  100%;
        padding:  20px 0 0;
        bottom: 3px;
      }
      #trunk ul.navigation li a {
        display:  block;
        padding:  8px 8px 8px 0;
      }
      #trunk ul.navigation li ul  {
        padding:  0 0 10px 20px;
        margin: 0;
      }
        #trunk ul.navigation li ul li a  {
          padding:  2px 8px 8px 0;
        }
        
/*  #stage
  A container for anything peripheral to page content
*/
#stage  {
  position: relative;
  float:  left;
  width:  700px;
}

/*  #partners
  A list of the associated partners
*/
#partners {
  float:  left;
  width:  520px;
  height: 50px;
  margin: 0;
  padding:  40px 0;
}
  #partners li {
    float:  left;
    width:  70px;
    height: 50px;
    margin: 0 33px 0 0;
    padding:  0;
  }
  #partners li.last {
    margin-right: 0;
  }

/*  #content
  The content area contains the main content of the page.
*/
#content  {
  position: relative;
  float:  left;
  width:  700px;
}

/*  #title
  The title area sits inside #content and defines the page title, as well as
  any date or other metadata.
*/
#title {
  position: relative;
  width:  520px;
  min-height: 60px;
}
  /* ensure that the contained h1 has NO padding or margin - this can throw
    off the whole layout */
  #title h1 { margin: 0; padding: 0; }

/*  #copy
  Where the magic happens...
*/
#copy {
  position: relative;
  float:  left;
  width:  480px;
  padding-left:  10px;
  padding-top:  10px;
}

/*  #articles
  A listing of articles for archiving
*/
#articles {
  position: relative;
  float:  left;
  width:  500px;
  margin-top: 10px;
  padding-left:  10px;
  padding-top:  10px;
}

/*  .gallery
  A listing of exhibits for archiving
*/
#trunk .gallery {
  position: relative;
  float:  left;
  width:  500px;
  margin-top: 10px;
  padding-left:  10px;
  padding-top:  10px;
}

/*  .contactform
  a container with a form and an ordered list for fields/labels
*/
#trunk .contactform {
  position: relative;
  float:  left;
  width:  500px;
  margin-top: 10px;
  padding-left:  10px;
  padding-top:  10px;
}

/*  #breadcrumbs
  Any location-specific or cataloguing information associated with the page
*/
#breadcrumbs  {
  position: relative;
  float:  left;
  width:  520px;
  margin-top: 20px;
  z-index:  10;
}

/*  #extras
  extra panels of information related to the page - downloads, links etc
*/
#extras  {
  position: absolute;
  top:  70px;
  right:  0;
  width:  210px;
  z-index:  20;
}
  #extras .panel  {
    position: relative;
    width:  210px;
    margin-bottom:  20px;
  }



/*  #footer
  Set the height of the footer area, and define space for the footer
  navigation.
*/
#footer {
  position: relative;
  clear:  both;
  height: 85px;
  width:  100%;
  margin: 0 auto;
}
  #footer ul.navigation {
    width:  880px;
    height: 55px;
    margin: 0 auto;
    padding:  10px 0 0;
  }



/* #content.wide
  Some simple width adjustment for #content panels
*/
#wrapper #content.wide {
  background: url('/images/site/content_wide.png') top left repeat-y;
}
  #wrapper #content.wide #title  {
    width:  542px;
  }
  #wrapper #content.wide #copy  {
    width:  532px;
    background: #FFF;
  }
  #wrapper #content.wide #copy #video_player  {
    padding:  4px;
    border:  1px solid #CCC;
    width:  512px;
    height: 288px;
  }
  #wrapper #content.wide .gallery,
  #wrapper #content.wide .gallery .pagination,
  #wrapper #content.wide #breadcrumbs {
    width:  542px;
  }