/* ------ STUDIO PAGE STYLES ------ */

.studioElementRow { /* The basic building block of the studio page. */
	position: relative;
	overflow: hidden;
	width: 960px;
	margin: 0 0 0 15px;
}

.fullwidthFloatHolder { /* For holding floating divs. */
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
}

.studioLeftPanel { /* Left panels within the rows. */
	float: left;
	width: 286px;
	margin: 0 51px 0 0;
	padding: 0;
}

.studioMainPanel { /* Main right panels within the rows. */
	float: left;
	overflow: hidden;
	width: 623px;
	margin: 0;
	padding: 0;
}


/* ------
sIFR styles: only render if sIFR doesn't.
------ */

h1.boldHeader {
	color: #1A1A1A;
	font-size: 35px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin: 0 0 15px 0;
	padding: 0;
	line-height: 1.1em;
	letter-spacing: -1px;
}

h2.inspireHeader {
	color: #1A1A1A;
	font-size: 72px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 1.1em;
	letter-spacing: -3px;
	margin: 0;
	padding: 0;
}

h1.subHeader { /* Only renders if sIFR doesn't */
	width: 750px;
	margin: 9px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: normal;
	color: #191919;
	line-height: 1.25em;
}



/* ------
Striped header and header text styles for all headers on studio.html EXCEPT those under the trophy
case and studio sections. Special styles needed for the client type headers so that they are 
clickable/above the carousels.
------ */

.studioRowHeader {
	width: 100%;
	height: 32px;
	margin: 0 0 15px 0;

}

.clientHeaderText {
	position: absolute;
	top: 0px;
	left: 0;
	height: 32px;
	z-index: 5;
}

.studioRowHeader h2, .clientHeaderText h2 {
	margin: 0 0 0 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.35em;
	font-weight: normal;
	color: #595959;
	padding-top: 10px;
}

.studioRowHeader h2 span, .clientHeaderText h2 span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin-left: 5px;
	color: #999999;
	line-height: 0.567em;
}

.studioRowHeader h2 span a, .clientHeaderText h2 span a {
	color: #999999;
	background: transparent;
	text-transform: lowercase;
	font-family: Georgia, Times, serif;
	font-style: italic;
}

.studioRowHeader h2 span a:hover, .clientHeaderText h2 span a:hover {
	color: #fff;
	background: #ff4e00;
}


/* ------
The individual story text floating modules in fullwidthFloatHolder at the very top of the page.
------ */

.ourStoryText { /* Feel free to stick a third one of these in the topmost studio section. */
	float: left;
	width: 286px;
	margin: 0 0 0 51px;
	padding: 0;
}


/* ------
Navigation pane for Hyperaktivists "carousel," at left.
------ */

#bioNavigation ul {
	width: 286px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#bioNavigation li {
	cursor: pointer;
	float: left;
	width: 87px;
	height: 42px;
	margin: 8px 8px 0 0;
	padding: 0;
	background-repeat: no-repeat 0 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.navName {
	width: 87px;
	height: 37px;
	background: #fff repeat-x;
	color: #ff4e00;
	visibility: hidden;
	text-align: center;
	font-size: 14px;
	margin: 0;
	padding-top: 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

/* ------
Hyperaktivists "carousel" content module, at right.
------ */
	
#bioSections ul {
	width: 9999px; /* This needs to be wide enough to accomodate all the modules within it. Easier to just set it to a really high value than calculate it dynamically. */
	margin: 0;
	padding: 0;
	list-style: none;
}
	
#bioSections li {
	float: left;
	width: 286px;
	margin: 0 51px 0 0;
	padding: 0;
	list-style: none;
}

#bioSections li img {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#bioSections li h3 {
	margin-bottom: 0.25em;
	padding: 0;
	font-size: 1.3em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #1a1a1a;
}

#bioSections li p {margin-top: 0}

/* ------
Navigation buttons for Hyperaktivists serialScroll "carousel," contained within the studioRowHeader.
Can maybe be rewritten so it's actually valid?
------ */

#prevnextButtons {
	position: absolute;
	top: 8px;
	right: 5px;
	width: 59px;
	height: 26px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

#prevnextButtons #serialPrev {
	float: left;
  background: url(/sites/all/themes/design/images/carouselarrows.png) no-repeat 0 0;
	width: 27px;
	height: 26px;
	cursor: pointer;
}
#prevnextButtons #serialPrev:hover {background-position: -128px 0}

#prevnextButtons #serialNext {
	float: left;
  background: url(/sites/all/themes/design/images/carouselarrows.png) no-repeat -32px 0;
	width: 31px;
	height: 26px;
	cursor: pointer;
}
#prevnextButtons #serialNext:hover {background-position: -160px 0}


/* ------ Services offered styles ------ */

#servicesPanel ul {
	list-style: none;
	display: inline;
	width: 623px;
	margin: 0;
	padding: 0;
}

#servicesPanel ul .mainItems {
	float: left;
	display: inline;
	width: 142px;
	padding: 0;
	margin: 0 0 0 13px;
	list-style: none;
}
#servicesPanel ul .mainItems:first-child {margin: 0}

#servicesPanel ul li ul.serviceType {
	display: inline-block;
	width: 142px;
	list-style: none;
	padding: 0;
	margin: 0;
}

#servicesPanel h2.serviceCategory {
	padding: 0;
	margin-top: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.35em;
	font-weight: normal;
	color: #1a1a1a;
	line-height: 1.5em;
}

ul.serviceType li {display: inline-block}
ul.serviceType li {
	line-height: 16px;
	margin-left: 0;
	padding-left: 0;
	display: block;
}


/* ------ Client type carousel styles ------*/

.logoHolder {
	float: left;
	height: 125px;
	width: 154px;
	border-left: 1px dotted #ccc;
}

.logoHolder img {width: 154px}

.clientCarousel {
	position: relative;
	overflow: hidden;
	width: 623px;
	height: 309px;
	margin: 0;
	padding: 0;
}

.clientCarousel .jcarousel-container {
  position: relative;
  width: 623px;
	height: 309px;
}

.clientCarousel .jcarousel-clip {
	position: relative;
	overflow: hidden;
	width:  623px;
	height: 309px;
	margin: 0;
	padding: 0;
}

.clientCarousel .jcarousel-list {
	position: relative;
	overflow: hidden;
  margin: 59px 0 0 0;
  padding: 0;
}

.clientCarousel .jcarousel-list li, .clientCarousel .jcarousel-item {
	float: left;
	width: 623px;
	height: 298px;
	list-style: none;
}

.clientCarousel .jcarousel-prev {right: 32px; top: 10px}
.clientCarousel .jcarousel-next {right: 4px; top: 10px}


/* ------ Trophy Case carousel custom styles ------ */

#trophyCarousel {margin-bottom: 15px}
#trophyCarousel .jcarousel-container {height: 463px}
#trophyCarousel .jcarousel-clip {height: 463px}