/* ------ TEASER CAROUSEL STYLES ------ */
/* ------
This file contains styles for the following carousels:
- The three work teaser carousels on work.html (Arts Knowledge & Justice, Global, Local Brands)
- The three work, news, and play teaser carousels on index.html
The teaser carousels come in two styles, full-width and half-width.
This file also contains styles for the previous and next buttons for the case studies carousel at 
the top of work.html and the client type carousels on studio.html.

jcarousel markup is automatic. On initialization the plugin wraps the carousel in the following divs:
	<div class="jcarousel-skin-name">
	  <div class="jcarousel-container">
		<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
		<div class="jcarousel-next"></div>
		<div class="jcarousel-clip">
		  <ul class="jcarousel-list">
			<li class="jcarousel-item-1">First item</li>
			<li class="jcarousel-item-2">Second item</li>
		  </ul>
		</div>
	  </div>
	</div>
Note the automatic indexing on the list items. This index can be referenced later for other
effects. You can also manually insert any of these divs into the html (as is done with the striped 
section headers).
------ */

/* ------
Styles for both full- and half-width work teaser carousels on index and work pages.
Full-width specific styles are labeled with #fullCarousel, and half-width specific styles
are labeled with .halfCarousel.
------ */

.contentCarousel {visibility: hidden}

#fullCarousel {overflow: hidden}
.halfCarousel {
	float: left;
	overflow: hidden;
	width: 474px;
}

.contentCarousel .jcarousel-container {
  position: relative;
	height: 343px;
}
#fullCarousel .jcarousel-container {width: 990px}
.halfCarousel .jcarousel-container {width: 474px}

.contentCarousel .jcarousel-clip {
  position: relative;
  z-index: 2;
  overflow: hidden;
	height: 343px;
	margin: 0;
	padding: 0;
}
#fullCarousel .jcarousel-clip {width: 990px}
.halfCarousel .jcarousel-clip {width: 474px}

.contentCarousel .jcarousel-list {
  position: relative;
	z-index: 1;
	overflow: hidden;
	height: 306px;
	margin: 15px 0 0 0;
  padding: 0;
}
#fullCarousel .jcarousel-list {width: 990px}
.halfCarousel .jcarousel-list {width: 474px}

.contentCarousel .jcarousel-list li, .contentCarousel .jcarousel-item {
  float: left;
  width:  186px;
  height: 251px;
  margin: 0 42px 0 0;
  padding: 15px;
  list-style: none;
	background-repeat: no-repeat;
}


/* ------
Next and previous buttons for case studies, client type, full-width teaser, and half-width teaser 
carousels on work.html, index.html, and studio.html. Both the next/prev buttons and the section 
header are dropped down 30px for the case studies carousel. This is done so the section header 
lines up with the top of content on other pages.
------ */

.jcarousel-prev {
  z-index: 3;
  display: none;
	position: absolute;
	right: 47px;
	top: 9px;
  width: 32px;
  height: 26px;
  cursor: pointer;
  background: url(../_img/carouselarrows.png) no-repeat 0 0;
}
.jcarousel-prev:hover {background-position: -128px 0}

.jcarousel-prev-disabled {
  cursor: default;
  background-position: -64px 0;
}
.jcarousel-prev-disabled:hover {background-position: -64px 0}

.jcarousel-next {
  z-index: 3;
  display: none;
	position: absolute;
	right: 19px;
	top: 9px;
  width: 31px;
  height: 26px;
  cursor: pointer;
  background: url(../_img/carouselarrows.png) no-repeat -32px 0;
}
.jcarousel-next:hover {background-position: -160px 0}

.jcarousel-next-disabled {
  cursor: default;
  background-position: -96px 0;
}
.jcarousel-next-disabled:hover {background-position: -96px 0}


/* ------
Section headers (with stripey backgrounds) for full-width and half-width carousels. Also included
are section header styles for the case studies carousel (#casestudiesHeaderText). These are 
necessary so that the 'view all' link is clickable and at the same time the image floats above the 
striped background.
------ */

.fullWidthSectionHeader, .halfWidthSectionHeader {
	overflow: hidden;
	position: relative;
	top: 0;
	left: 15px;
	height: 32px;
	background-image: url(../_img/bg-title.png);
	background-repeat: repeat-x;
}
.fullWidthSectionHeader {width: 960px}
.halfWidthSectionHeader {width: 444px}

#casestudiesHeaderText {
	position: absolute;
	top: 30px;
	left: 0;
	height: 30px;
	z-index: 4;
}

.fullWidthSectionHeader h1, 
.halfWidthSectionHeader h1, 
#casestudiesHeaderText h1 {
	margin: 13px 0 0 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.35em;
	font-weight: normal;
	color: #595959;
	line-height: 1.1em;
}

.fullWidthSectionHeader h1 span, 
.halfWidthSectionHeader h1 span, 
#casestudiesHeaderText h1 span {
	font-size: 0.8em;
	margin-left: 5px;
	font-style: italic;
	color: #999999;
	line-height: 1.1em;
}

.fullWidthSectionHeader h1 span a, 
.halfWidthSectionHeader h1 span a, 
#casestudiesHeaderText h1 span a {
	color: #999999;
	background: transparent;
	text-transform: lowercase;
	font-family: Georgia, Times, serif;
}

.fullWidthSectionHeader h1 span a:hover, 
.halfWidthSectionHeader h1 span a:hover, 
#casestudiesHeaderText h1 span a:hover {
	background: #ff4e00;
	color: #fff;
}

.dotCounter {
	position: absolute;
	right: 90px;
	top: 8px;
}
.dotCounter:hover {cursor: pointer}
.dotCounter img {height: 29px}