/* base backgrounds */
body  {
  background: #CCC url('../images/site/body.png') center repeat-y;
  color:  #000;
  /* jogging background bug*/
  padding-left: 1px; 
}





/* masthead navigation */
#masthead div.navigation.site {
  background: #FF3153;
}
#masthead div.navigation.sections .transparency {
  width:  100%;
  height: 100%;
  opacity:  .50;
  position: absolute;
  background: #000;
  z-index:  0;
}
#masthead .navigation.sections ul  {
  position: absolute;
}
#masthead .navigation.site ul  {
  position: absolute;
  right:  0;
  top:  0;
}
#masthead .navigation.site ul.pull {
  position: absolute;
  left:  0px;
  display:  block;
  color:  #FFF;
  font-weight:  bold;
  line-height:  45px;
  text-decoration:  none;
}
#masthead a.view_image,
#masthead .navigation li a,
#masthead .navigation form  {
  display:  block;
  color:  #FFF;
  font-weight:  bold;
  line-height:  45px;
  margin-right: 15px;
  text-decoration:  none;
}
#masthead .navigation.site li a,
#masthead .navigation.site form {
  margin-right: 0;
  margin-left:  15px;
}
#masthead a.view_image  {
  line-height:  1em;
}
#masthead .navigation.site ul.pull li a {
  margin-left: 0;
  margin-right:  15px;
}
#masthead .navigation.site form label {
  display:  none;
}
#masthead .navigation li.here a {
  color: #FF3153;
}

#masthead h1  {
  background: url('../images/site/masthead_h1.png') top left no-repeat;
}




/* base typography */
body  {
  font-family:  Helvetica, Arial, sans-serif;
  font-size:  12px;
}
body em	{
	font-style: italic;
}
body strong	{
	font-weight: bold;
}


/* content typography */
#content  {
  line-height:  1.6em;
}

/* headers */
#content h1  {
  color:  #FF3153;
  font-weight:  normal;
  font-size:  26px;
  line-height:  1em;
  margin: 0 0 1em;
}
#content h2  {
  color:  #FF3153;
  font-weight:  bold;
  font-size:  18px;
  line-height:  1em;
  margin: 0 0 0.4em;
}
#content h3  {
  color:  #666;
  font-weight:  bold;
  font-size:  14px;
  line-height:  1em;
  margin: 0.8em 0;
}
#content h1 a,
#content h2 a {
  display:  block;
  float:  left;
  margin: 0;
  padding:  0;
}
#content h1 .subtitle,
#content h2 .subtitle  {
  display:  block;
  clear:  left;
  font-size:  12px;
  color:  #000;
  font-weight:  bold;
  padding-top: 0.4em;
}

/* copy */
#content p, #content blockquote,
#content ul, #content ol  {
  margin: 0 0 1.6em;
}
#content blockquote {
  font-style: italic;
  color:  #666;
  padding:  1em;
  background: #EEE;
}

#copy ul, #copy ol  {
  margin-top: 0.4em;
  margin-left:  2em;
}
  #copy li {
    margin: 0 0 0.4em;
  }
  #copy ul {
    list-style: disc;
  }
  #copy ol {
    list-style-type: decimal;
  }

#content strong {
  font-weight:  bold;
}

#content .contact {
  margin-top: 3.2em;
  line-height:  1.4em;
  float:  left;
}
  #content .contact .address  {
    float:  left;
    width:  160px;
  }
  #content .contact .details  {
    float:  left;
    width:  300px;
  }

#content .subnav  {
  margin-top: -20px;
}

#content .summary {
  font-style: italic;
  color:  #666;
}

#content img.banner {
  margin-bottom:  3.2em;
}



/* action */
#content a  {
  color:  #FF3153;
  font-weight:  bold;
  padding:  4px;
  margin: -4px;
}
  #content a:hover  {
    background: #FDF;
  }


/* media */
#content .media {
  margin-bottom:  2em;
}


/* thumbnails */
#content ul.thumbnails  {
  margin: 0;
  padding:  0;
  float:  left;
  list-style: none;
}
  #content ul.thumbnails li {
    width:  86px;
    margin: 0 5px 15px;
    float:  left;
    line-height:  1.2em;
    font-weight:  bold;
  }
  #content ul.thumbnails li a {
    margin: 0;
    padding:  0;
  }
  #content ul.thumbnails li img {
    display:  block;
    width:  82px;
    padding:  1px;
    border: 1px solid #CCC;
    height: 50px;
    margin-bottom:  0.4em;
  }
  #content ul.thumbnails li a:hover img {
    border-color: #F99;
  }




/* gallery */
#content .gallery {
  position: relative;
  clear:  both;
}
  #content .gallery .stills {
    position: absolute;
    top:  0;
    left: -250px;
    width:  220px;
    padding-bottom:  3.2em;
  }
  #content .gallery .stills ul.thumbnails li,
  #content .gallery .stills ul.thumbnails li img {
    width:  65px;
    height:  65px;
  }
  #content .gallery .stills ul.thumbnails li  {
    margin: 0 3px 3px;
  }
  #content .gallery .stills ul.thumbnails li img {
  }
  .home #content .gallery .stills {
    left: auto;
    right:  -250px;
  }
  #content .gallery .podcasts {
    width:  100%;
    margin-top: 50px;
    float:  left;
  }
    #content .gallery .podcasts h2 {
      margin-bottom:  10px;
    }
    #content .gallery .podcasts .downloads ul  {
      list-style: none;
      margin: 0.4em 0.4em 3.6em;
      padding:  0;
    }
    #content .gallery .podcasts .downloads li {
      list-style: none;
      border-top: 1px solid #CCC;
      padding:  0.4em 0;
      margin: 0;
    }
    #content .gallery .podcasts .downloads a {
      display:  block;
      margin: 0 0.2em;
      padding:  0.2em 0 0.2em 1.8em;
      background: url('../images/site/icons/file.png') left no-repeat;
    }
    #content .gallery .podcasts .downloads a:hover {
      background-image: url('../images/site/icons/file.png');
      background-position:  left;
      background-repeat:  no-repeat;
      background-color: #FFF;
    }



/* navigation */
#context .navigation  {
  margin-bottom:  2em;
}
  #context .navigation ul,
  #context .navigation .information,
  #context .navigation h1 {
    background: none;
    color:  #FF3153;
    padding:  0.4em;
    border-width: 0 0 1px 1px;
    border-color: #FF3153;
    border-style: solid;
  }
  #context .navigation h1 {
    font-size:  18px;
  }
  #context .navigation ul {
    padding:  0.8em 0.4em;
    margin-bottom:  0;
  }
  #context .navigation li {
    margin-left:  0.2em;
  }
  #context .navigation .information {
    color:  #000;
    padding:  0.8em 0.8em 0;
  }
  #context .navigation a {
    padding:  0.4em 0.8em;
    display:  block;
    margin: 0;
    text-decoration:  none;
  }
  #context .navigation li.here a {
    background: #EEE;
  }
    #context .navigation li.here a:hover {
      background: #FDF;
    }


/* buttons */
#context .buttons  {
  margin-bottom:  1.6em;
}
#context .buttons a:hover {
  background: none;
}


/* details */
#context .details {
  margin-bottom:  3.2em;
  background: none;
  color:  #FF3153;
  border-width: 0 0 0 1px;
  border-color: #FF3153;
  border-style: solid;
}
  #context .details div {
    display:  block;
    padding:  0.4em 0.8em;
    margin: 0;
    border-bottom:  1px solid #FF3153;
    color:  #000;
  }
  #context .details div.date {
    font-weight:  bold !important;
  }
  #context .details div.back  {
    padding:  0 0.4em;
  }
  #context .details div.back a  {
    display:  block;
    margin: 4px 0;
    font-size:  14px;
    text-decoration:  none;
    color:  #FF3153;
  } 


/* exhibition */
#content .exhibition  {
  border-bottom:  1px solid #FF3153;
  margin-bottom:  3.2em;
  float:  left;
  width:  480px;
}
  #content .exhibitions .exhibition {
    border-top: 1px solid #FF3153;
    border-bottom:  none;
    margin-bottom:  1.6em;
    padding-top:  1.6em;
  }
  #content .exhibitions {
    overflow: hidden;
    margin-bottom:  6.4em;
  }
  #content .exhibition .details {
    float:  left;
    width:  415px;
    color:  #666;
  }
  #content .exhibition h1 {
    margin: 5px 0 0;
    font-size:  12px;
    font-weight:  bold;
    color:  #000;
  }
  #content .exhibitions h2 a {
    display:  inline;
    float:  none;
  }
    #content .exhibition h2 a:hover {
      display:  inline;
    }
  #content .exhibition .address  {
    margin-top: 0.3em;
    margin-bottom:  0.3em;
    line-height:  1.3em;
  }
  #content .exhibition .index  {
    width:  55px;
    float:  left;
    text-align: center;
    letter-spacing: -0.1em;
    font-size:  48px;
    line-height:  1.2em;
    margin-top: -0.25em;
    margin-bottom:  -0.1em;
    color:  #FF3153;
  }


/* events */
#content .events .event {
  border-top: 1px solid #FF3153;
  padding-top:  1.6em;
  padding-bottom: 1.6em;
}
  #content .event h2  {
    margin-bottom:  0;
  }
  #content .event h2 a  {
    display:  inline;
    float:  none;
  }
  #content .event abbr.date {
    display:  block;
    font-weight:  bold;
    margin-bottom:  0.4em;
    font-size:  12px;
  }
  #content .event .admission  {
    color:  #666;
    margin: 0;
  }
  #content .event .subtitle {
    margin: 0.6em 0 0;
  }


/* articles */
#content .articles .article {
  border-top: 1px solid #FF3153;
  padding-top:  1.6em;
}
  #content .article h2  {
    margin-bottom:  0;
  }
    #content .article h2 a {
      display:  inline;
      float:  none;
    }
  #content .article abbr.date {
    display:  block;
    font-weight:  bold;
    margin-bottom:  0.4em;
    font-size:  12px;
  }
  #content .article div.excerpt {
    display:  block;
    margin-top: 0.4em;
    margin-bottom:  1.2em;
  }


/* vacancies */
#content .vacancies .vacancy {
  border-top: 1px solid #FF3153;
  padding-top:  1.6em;
}
  #content .vacancy h2  {
    margin-bottom:  0;
  }
    #content .vacancy h2 a {
      display:  inline;
      float:  none;
    }
  #content .vacancy p.term {
    display:  block;
    font-weight:  bold;
    margin-bottom:  0.4em;
    font-size:  12px;
  }
  #content .vacancy .dates  {
    border-top: 1px solid #FF3153;
    margin: -1.6em 0 1.6em;
    border-bottom: 1px solid #FF3153;
    padding:  0.8em 0.8em 0;
    color:  #666;
  }
  #content .vacancy .dates p  {
    margin-bottom:  0.8em;
  }


/* galleries */
#content .galleries .listing {
  border-top: 1px solid #FF3153;
  padding-top:  1.6em;
}
  #content .listing h2  {
    font-size:  14px;
    margin-bottom:  0;
  }
  #content .listing h2 a  {
    display:  inline;
    float:  none;
  }


/* calendar */
#content .calendar  {
  margin: 0.8em auto;
  border: 1px solid #DDD;
	padding:  0.8em;
}
#content .calendar table  {
	border-spacing: 3px;
}
  .js #content .calendar table.hide  {
    display:  none;
  }
  #content .calendar a {
    display:  block;
    width:  100%;
    text-decoration:  none;
    background: #FDF;
    color:  #FF3153;
    padding:  0;
    margin: 0;
  }
  #content .calendar td a:hover,
  #content .calendar td.selected a {
    background: #FF3153;
  }
  #content .calendar td.selected a  {
    color:  #FDF;
  }
  #content .calendar td a:hover  {
    color:  #FFF;
  }

  #content .calendar td,
  #content .calendar th {
    text-align: center;
    height: 24px;
    vertical-align: middle;
    line-height:  1em;
    font-weight:  bold;
  }
  #content .calendar td {
    width:  24px;
  }

  #content .calendar thead td,
  #content .calendar thead th {
    background: #FDF;
    height: 20px;
    color:  #FF3153;
    font-weight:  bold;
  }
  #content .calendar thead a {
    line-height:  20px;
  }
  
  #content .calendar tbody td {
    border: 1px solid #EEE;
    color:  #BBB;
  }
  #content .calendar tbody td.current {
    border-color: #FF3153;
  }
  #content .calendar tbody a {
    line-height:  24px;
  }
  

/* downloads */
#context .downloads {
}
  #context .downloads ul  {
    margin: 0.4em;
    padding:  0;
  }
  #context .downloads li {
    border-top: 1px solid #CCC;
    padding:  0.4em 0;
    margin: 0;
  }
  #context .downloads a {
    display:  block;
    margin: 0 0.2em;
    padding:  0.2em 0 0.2em 1.8em;
    background: url('../images/site/icons/file.png') left no-repeat;
  }
  #content #context .downloads a:hover {
    background-image: url('../images/site/icons/file.png');
    background-position:  left;
    background-repeat:  no-repeat;
  }



/* fancyzoom */
#ZoomCapDiv td  {
  line-height:  1em;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}



/* context variations */
#context h1 {
  padding:  0.4em;
  font-weight:  bold;
  margin-bottom:  -1px;
  font-size:  14px;
}
.programme #context .events h1 {
  background: #8C3;
  color:  #FFF;
}
#context .media {
  margin: 0.8em 0 0;
}