/* --------------------------------------------------------------- TYPOGRAPHY */
#content ul#infographics li {
  font-family: "Arial Black", arial, sans-serif;
}

/* --------------------------------------------------------------------- CORE */
h1 {
  font-size: 48px;
  font-weight: 100;
  line-height: 60px;
  padding-top: 42px;
}

h1 span {
  font-size: 60px;
  font-weight: 800;
  color: #004489;
  padding: 0 8px;
}

h1 span.open {
  float: left;
  margin-left: -50px;
}

/* ------------------------------------------------------------------- LAYOUT */
#main {width: 412px; margin: 0 30px 0 518px;}
#supporting { float: left; width: 474px;}

#leadImageContainer {position: relative;}
#leadImageContainer img {width: 436px;}
#leadImageContainer #dataVisualisation img, #leadImageContainer #imageGallery img {width: auto;}

/* DATA VISUALISATION AND IMAGE GALLERY */
#dataVisualisation, #imageGallery {
  float: left;
  z-index: 88;
  border-top: solid 1px #FFF;
  background-color: rgba(64,64,64,0.6);
  color: #FFF;
  padding: 30px 30px 30px 30px;
  width: 412px;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 13px;
  line-height: 18px;
}
#dataVisualisation p, #imageGallery p {line-height: 18px;}
.cut-in{
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0px; line-height: 0%; width: 0px;
  border-bottom: 27px solid #FFF;
  border-left: 27px solid transparent;
}
#dataVisualisation h2 {color: #FFF;}
.hideTable { display: none;}
.enhanced_toggleResult {display:none;}

#imageGallery {padding: 30px 0px;}
#imageGallery {
  background-color: rgba(255,255,255,0.7);
  color: #404040;
}

div#imageGallery {
  width: 476px;
  float: left;
}
.scrollable {
  /* required settings */
  position:relative;
  overflow:hidden;
  width: 398px;
  height: 82px;
  /*margin-left: 6px;*/
  /* this makes it possible to add next button beside scrollable */
  float:left; 
}
.scrollable .items {
  /* this cannot be too large */
  width: 20000em;
  position: absolute;
  clear: both;
}
/* single scrollable item */
div.carouselItem {
  float: left;
  margin: 6px;
  width: 120px;
  height: 68px;
  overflow: hidden;
}
#content #supporting div.carouselItem img {
  width: 120px;
  height: 68px;
}
/* active item */
.scrollable .active {
  z-index: 9999;
  position: relative;
}
/* this makes it possible to add next button beside scrollable */
.scrollable {
  float:left; 
}
div#imageGallery div.scrollcontrol {float: left;}
div#imageGallery div.scrollcontrol a {
  text-indent: 99999px;
  overflow: hidden;
  visibility: hidden;
}
/* prev, next, prevPage and nextPage buttons */
div#imageGallery a.browse {
  display: block;
  cursor: pointer;
  border: 0 !important;
  text-decoration: none !important;
  height: 35px;
  width: 35px;
}
/* left */
a.previousControl {
  background: url(http://www.bath.ac.uk/common/images/ui/buttons35.png) top left no-repeat;
  margin: 64px 0 0 0;
} 
/* right */
a.nextControl { 
  background: url(http://www.bath.ac.uk/common/images/ui/buttons35.png) top right no-repeat;
  margin: 64px 0 0 8px;
}
a.previousControl, a.nextControl {margin-top: 24px;}
/* disabled navigational button */
a.disabled {visibility:hidden !important;}

div#fancybox-title-inside { 
    text-align: left; 
    color: #404040;
}

/* VIDEO */
.boxoutNeue .videoThumb {
  padding: 8px;
  margin-top: -8px;
  float: right;
  background-color: white;
  -moz-box-shadow: 0 0 4px #888, 0 0 4px #888;
  -webkit-box-shadow: 0 0 4px #888, 0 0 4px #888;
  box-shadow: 0 0 4px #888, 0 0 4px #888;
}
div.videoThumb img {
  height: 111px;
  width: 198px;
  top: 21px;
  left: 8px;
  border: 1px solid #4F5560 !important;
}
.boxoutNeue a.videoLightbox {
  position: absolute;
  top: -4px;
  right: 30px;
  width: 216px;
  height: 128px;
  background: url("/common/images/flowplayer/splash-play-button-wide.png") no-repeat center 31px;
}
.boxoutNeue a.videoLightbox:hover {background-position: center -69px;}

#content .boxoutNeue p {
  width: 176px;
}

/* CHECKLISTS */
#content fieldset ul {
  list-style-type: none;
}

/* CONTENT */
ul.2columnList {float: left; width: 216px;}

/* INFOGRAPHICS */
#content ul#infographics {
  margin: 0;
  padding: 12px 0 0 30px;
  list-style-type: none;
}
#content ul#infographics li {
  border-bottom: solid 1px #CCC;
  text-transform: uppercase;
  margin: 18px 0 0 0;
  padding: 0;
  color: #CCC;
  font-weight: 800;
  font-size: 21px;
  line-height: 34px;
}
#infographics li img {
  padding: 0 6px 0 0;
  vertical-align: top;
}
#content ul#infographics li strong {font-weight: 800; color: #404040;}

/* FURTHER READING */
#furtherReading h3 {border-bottom: solid 1px #A0A0A0;}
#furtherReading span {
  display: block;
  margin-bottom: 0;
  font-weight: 400;
  padding-left: 4px;
  background-color: #FFF;
  font-size: 15px;
  line-height: 15px;
  margin: 21px 0 9px 8px;
  color: #404040;
  font-family: "Myriad Pro", "Myriad Web", "Apple Myriad", "Adobe Myriad", "Trebuchet MS", Trebuchet, sans-serif;
}  
#furtherReading ul {
  margin: 0 0 0 12px;
  padding: 0;
  list-style-type: none;
}
#furtherReading a {
  color: #A0A0A0;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
#content #furtherReading a:hover { color: #E38; background-color: transparent; text-decoration: underline;}


/* FYSE ADDITIONS */
h1.fyse-featurette {
  padding-top: 42px;
}

/* ADD THIS */
div.addthis_toolbox, h5.share {
  padding-left: 12px;
}