/* ========================================================= */	
/* Style Guide                                               */
/* --------------------------------------------------------- */	
/*                                                           */
/* Color Guide                                               */
/*     - orange:             #F6921E                         */
/*     - gray 01:            #262626                         */
/*     - gray 02:            #3C3C3C                         */
/*     - gray 03:            #EBEBEB                         */
/*                                                           */
/* --------------------------------------------------------- */	
/*                                                           */
/* Directory                                                 */
/*     [1] Global                                            */
/*     [2] Typography                                        */
/*     [3] Links                                             */
/*     [4] Header                                            */
/*     [5] Navigation                                        */
/*     [6] Footer                                            */
/*     [7] Home                                              */
/*                                                           */
/* ========================================================= */


/* --------------------------------------------------------- */	
/* [1] Global                                                */
/* --------------------------------------------------------- */

@import url("reset.css");
@import url("flarevideo.css");
@import url("flarevideo.spotify.css");

html {
	background: #3C3C3C;
	font-family: "HelveNeuRom", "Helvetica Neue Roman", Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: center;
}

#container {
	margin: 0 auto;
	text-align: left;
	width: 950px;
}

#content {
	background: #262626;
	height: 514px;
	overflow: hidden;
	position: relative;
}

.page {
	background: url("../images/global/page_bd.gif") repeat-x 0 0;
}

.clearer {height: 0; width: 0; line-height: 0; font-size: 0; clear: both;}

/* --------------------------------------------------------- */	
/* [2] Typography                                            */
/* --------------------------------------------------------- */

p.tagline { 
	color: #262626; 
}

p.categoryLbl,
p.csLbl {
	color: #6D6D6D;
	font-size: 10px;
	text-transform: uppercase;
}

h1 {
	font-size: 15px;
	font-weight: lighter;
	line-height: 20px;
}

#aboutPg h1,
#contactPg h1 {
	color: #F8981D;
	font-size: 20px;
	font-weight: 100;
	padding: 60px 15px 5px 15px;
	text-shadow: #000 0px 0px 20px;
}

#aboutPg p,
#contactPg p {
	color: #EFEFEF;
	font-size: 15px;
	line-height: 20px;
	padding: 0 15px;
	text-shadow: #000 0px 0px 20px;
}

#joinPg h1 {
	color: #F8981D;
	font-size: 20px;
	font-weight: 100;
	padding: 60px 15px 5px 15px;
	text-shadow: #000 0px 0px 20px;
}

#joinPg p {
	color: #EFEFEF;
	font-size: 13px;
	line-height: 19px;
	padding: 0 15px;
	text-shadow: #000 0px 0px 20px;
}

/* --------------------------------------------------------- */	
/* [3] Links                                                 */
/* --------------------------------------------------------- */

a, a:visited { 
	text-decoration: none; 
}

a:focus { 
	outline: 0; 
}

#aboutPg a,
#contactPg a,
#joinPg a {
	color: #6D6D6D;
}

#aboutPg a:hover,
#contactPg a:hover
#joinPg a {
	color: #F6921E;
}

/* --------------------------------------------------------- */	
/* [4] Header                                                */
/* --------------------------------------------------------- */

#header {
	height: 50px;
	overflow: hidden;
}

#header p {
	float: right;
	padding: 26px 0 0 0;
}

#header img { 
	float: left;
	margin: 16px 0 0 5px; 
}

/* --------------------------------------------------------- */	
/* [5] Navigation                                            */
/* --------------------------------------------------------- */

#nav {
	background: #262626;
	height: 30px;
	margin: 3px 0 0 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

ul#mainNav {
	margin: 5px 0 2px 10px;
	overflow: hidden;
	width: 400px;
}

ul#mainNav li {
	float: left;
	font-size: 19px;
	font-weight: 300;
	padding: 0 12px 0 0;
}

ul#mainNav li a { 
	color: #6D6D6D; 
}

ul#mainNav li a:hover,
ul#mainNav li a.selected {
	color: #FFF;
}

ul#mainNav li div.sec {
	left: 10px;
	position: absolute;
	padding: 7px 0 0 0;
	width: 930px;
}

ul#mainNav li div.sec div {
	height: 106px;
	position: relative;
}

ul#mainNav li ul li {
	font-size: 11px;
	float: left;
	padding-right: 0;
}

#overview_sec {
	border-right: 2px solid #000;
	float: left;
	margin-right: 10px;
	width: 61px;
}

#case_studies_sec {
	border-right: 2px solid #000;
	float: left;
	margin-right: 10px;
	width: 560px;
}

#gallery_sec { 
	float: left;
	width: 282px; 
}

ul#mainNav li p {
	font-size: 11px;
	padding: 0 0 9px 0; 
}

ul#mainNav p a { 
	color: #F6921E; 
}

ul#mainNav li#about p a { 
	color: #6D6D6D; 
}

ul#mainNav li#about p a:hover { 
	color: #FFF; 
}

ul#mainNav li#about p a.selected,
ul#mainNav li#about p a.selected:hover { 
	color: #F6921E; 
}

.navCtrl {
	cursor: pointer;
	position: absolute;
	right: 91px;
	top: 0;
}

ul#mainNav li ul li a,
ul#mainNav li ul li.empty {
	float: left;
	padding: 4px 0;
	width: 140px;
}

ul#mainNav li #work_sec ul a { 
	color: #6D6D6D; 
}

ul#mainNav li #about_sec div { 
	float: left;
	width: 71px; 
}

ul#mainNav li #about_sec ul a { 
	color: #6D6D6D; 
}

ul#mainNav li #work_sec ul a:hover,
ul#mainNav li #work_sec ul a.selected,
ul#mainNav li #about_sec ul a:hover,
ul#mainNav li #about_sec ul a.selected { 
	color: #FFF; 
}

.navBlock .carouselItem {
	height: 106px;
	width: 560px;
}

.navBlock .jcarousel-item {
	height: 106px;
	width: 560px;
}

.navBlock .jcarousel-clip-horizontal {
	height: 106px;
	width: 560px;
}

#controlBar {
	background: #EBEBEB;
	height: 20px;
	overflow: hidden;
	padding: 0 5px;
	width: 940px;
}

#controlBar p {
	color: #645C5A;
	padding: 3px 0 0 0;
	float: left;
}

#controlBar .slideNav {
	float: right;
	border-left: 1px solid #645C5A;
	padding-left: 5px;
}

.slideNav a {
	color: #645C5A;
	display: inline;
}

#drawerBtn {
	cursor: pointer;
	position: absolute;
	right: 5px;
	top: 5px;
}

/* --------------------------------------------------------- */	
/* [7] Home                                                  */
/* --------------------------------------------------------- */

ul#homeGallery,
ul#homeMsging {
	line-height: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 20px;
	width: 950px;
}

ul#homeGallery li,
ul#homeMsging li {
	float: left;
	height: 243px;
	overflow: hidden;
	width: 471px;
}

li.gall_0 div,
li.gall_1 div,
li.gall_2 div,
li.gall_3 div {
	height: 243px;
	width: 471px;
}

li.gall_0,
li.gall_1 {
	margin-bottom: 8px;
}

li.gall_0,
li.gall_2 {
	margin-right: 8px;
}

/* --------------------------------------------------------- */	
/* [8] Work                                                  */
/* --------------------------------------------------------- */

.workCtrl p,
.workCtrl ul {
	float: right;
}

.workCtrl .categoryLbl {
	color: #262626;
	font-weight: bold;
	margin: 5px 0 0 0;
}

.workCtrl .csLbl {
	color: #262626;
	font-weight: bold;
	margin: 2px 0 0 5px;
}

.workCtrl ul {
	height: 20px;
	margin: 0 0 0 170px;
	overflow: hidden;
}

.workCtrl ul li {
	cursor: pointer;
	float: left;
}

#workPg #leftCol,
#workPg #rightCol {
	float: left;
}

#workPg #leftCol {
	color: #FFF;
	padding: 10px;
	width: 605px;
}

#workPg span.highlight {
	color: #F6921E;
}

#workPg #leftCol p.categoryLbl {
	margin: 15px 0;
}

#workPg #leftCol ul {
	float: left;
	font-size: 12px;
	margin: 0 0 15px 0;
	overflow: hidden;
	width: 215px;
}

#workPg #leftCol ul li {
	margin: 4px 0;
}

#cSlides {
	height: 380px;
	width: 325px;
}

#cSlides li div {
	height: 95px;
}

#cSlides .carouselItem {
	height: 95px;
	width: 325px;
}

#cSlides .jcarousel-item {
	height: 95px;
	width: 325px;
}

#rightCol .jcarousel-clip-horizontal,
#rightCol .jcarousel-item-horizontal {
	height: 380px;
	width: 325px;
}

.viewport {
    overflow: hidden;
    position: relative;
}

.viewport a {
    display: block;
    position: relative;
}

.viewport a span {
	display: none;
	height: 100%;
	position: absolute;
	width: 100%;
	text-align: center;
}

.cShade {
	background-color: rgba(38, 38, 38, 0.80);
    color: #EFEFEF;
	font-size: 16px;
	padding-top: 41px;
    text-shadow: #000 0px 0px 20px;
}

#rightCol .categoryLbl {
	padding: 11px 0 8px 0;
}

ul#galList {
	background: #F8981D;
	height: 78px;
	padding: 6px 0 0 10px;
	width: 315px;
}

ul#galList li {
	float: left;
	width: 100px;
}

ul#galList li a {
	color: #262626;
	display: block;
	padding: 4px 0;
}

ul#galList li a:hover {
	color: #EBEBEB;
}

#vidContent {
	margin: 25px 115px;
}

/* --------------------------------------------------------- */	
/* [9] Case studies                                          */
/* --------------------------------------------------------- */

#caseStudyPg p.clientPDF {
	float: right;
	font-size: 9px;
	padding: 7px 0 0 0;
}

p.clientPDF a {
	color: #EFEFEF;
}

p.clientPDF a:hover {
	color: #F8981D;
}

.summary .txt {
	height: 147px;
	padding: 49px 0 0 0;
}

#caseStudyPg h2 {
	color: #F8981D;
	font-size: 20px;
	font-weight: 100;
	padding: 0 15px;
	text-shadow: #000 0px 0px 20px;
}

#caseStudyPg p {
	color: #EBEBEB;
	font-size: 15px;
	line-height: 20px;
	padding: 0 15px;
	text-shadow: #000 0px 0px 20px;
}

#caseStudyPg p.specs {
	color: #6D6D6D;
	font-size: 11px;
	margin: 10px 0 0 0;
	padding: 0 15px;
}

#caseStudyPg ul.preview {
	height: 124px;
	margin: 5px 0 0 0;
	overflow: hidden;
}

#caseStudyPg ul.preview li {
	float: left;
}

#caseStudyPg .cShade {
	padding-top: 0;
}

#caseStudyPg p.quote {
	font-size: 13px;
	margin: 18px 0 0 0;
}

p.quote span.highlight {
	color: #F8981D;
}

.slideNav p {
	font-size: 9px;
	font-weight: bold;
	margin-top: 3px;
}

.intro {
	float: right;
}

.intro p {
	font-size: 9px;
	font-weight: bold;
	margin: 3px 9px 0 0;
}

/* --------------------------------------------------------- */	
/* [10] About                                                */
/* --------------------------------------------------------- */

#aboutPg {
	color: #FFF;
}

#aboutPg h1.studioLink {
	border-bottom: 1px solid #6D6D6D;
	color: #6D6D6D;
	padding: 10px 0 15px 0;
	margin: 0 15px;
}

#aboutPg .specs {
	color: #6D6D6D;
	font-size: 11px;
	margin: 10px 0 0 0;
	padding: 0 15px;
}

#aboutPg ul.preview {
	overflow: auto;
	width: 950px;
}

#aboutPg ul.preview li {
	float: left;
}

ul.preview .cShade {
	padding-top: 50px;
}

ul.preview li.active {
	background: #F6921E;
}

#aboutPg ul.bio {
	margin: 10px 0 0 0;
}

#aboutPg ul.bio li p {
	font-size: 12px;
}

#aboutPg span.highlight {
	color: #F6921E;
}

/* --------------------------------------------------------- */	
/* [10] Blog                                                 */
/* --------------------------------------------------------- */

#blogPg {
	background: #FFF;
	overflow: hidden;	
	width: 950px;
}

ul#blogNav {
	float: left;
	height: 494px;
	margin: 0 20px 0 0;
	overflow: auto;
	width: 357px;
}

ul#blogNav li {
	font-size: 12px;
	padding: 10px;
}

ul#blogNav li#active.odd,
ul#blogNav li#active.even {
	background: #F6921E;
	text-shadow: #000 0px 0px 20px;		
}

ul#blogNav li.odd {
	background: #FFF;
}

ul#blogNav li.even {
	background: #EFEFEF;
}

#blogNav p span,
.col02 p.date {
	color: #6D6D6D;
	font-size: 10px;
} 

#blogNav p a {
	color: #3C3C3C;
	display: block;
}

#blogNav #active p span,
#blogNav #active p a {
	color: #FFF;
}

#blogNav p a:hover {
	color: #F6921E;
}

#blogContent {
	float: left;
	height: 494px;
	width: 573px;
}

#blogContent .col01, .col02 {
	float: left;
}

#blogContent .col01 {
	width: 280px;
}

.col01 #gallLrg {
	height: 270px;
}

#blogContent .col01 ul {
	margin: 5px 0 0 0;
	overflow: hidden;
	width: 268px;
}

#blogContent .col01 ul li {
	border-bottom: 3px solid #FFF;
	float: left;
	margin: 0 4px 3px 0;
}

#blogContent .col01 ul li.active {
	border-color: #F6921E;
}

#blogContent .viewport {
	height: 67px;
}

#blogContent .col01 .cShade {
	padding-top: 24px;
}

#blogContent .col02 {
	height: 494px;
	overflow: auto;
	width: 293px;
}

.col02 p.date {
	margin: 10px 0 7px 0;
}

.col02 h1 {
	color: #F6921E;
	font-size: 16px;
	line-height: 16px;
	margin: 0 15px 8px 0;
}

.col02 p.subtitle {
	color: #999;
	margin: 0 15px 0 0;
}

.col02 p {
	color: #3C3C3C;
	margin: 12px 15px 12px 0;
}

/* --------------------------------------------------------- */	
/* [10] Footer                                               */
/* --------------------------------------------------------- */

#footer .col01 {
	float: left;
	text-shadow: #000 0px 0px 20px;	
	width: 481px;
}

#footer .col02 {
	float: right;
	text-align: right;
	text-shadow: #000 0px 0px 20px;	
	width: 461px;	
}

p.footerLbl {
	color: #F6921E;
	font-size: 19px;
	font-weight: 300;
	margin: 7px 0 4px 0;
}

p.footerLbl a {
	color: #F6921E;
}

ul#newsScroller li {
	color: #EBEBEB;
	line-height: 17px;
}

ul#newsScroller li span {
	color: #F6921E;
}

ul#newsScroller li.carouselItem,
ul#newsScroller .jcarousel-item {
	height: 34px;
	width: 481px;
}

.jcarousel-clip-horizontal {
	height: 34px;
	width: 481px;	
}

p.join {
	color: #EBEBEB;
	margin-top: 7px;
}

p.copy {
	color: #6D6D6D;
	font-size: 11px;
	line-height: 17px;
	margin: 14px 0 0 0;
}

p.join a {
	color: #EBEBEB;
	border-bottom: 1px dotted #EBEBEB;
}

p.join a:hover {
	color: #F6921E;
}

#legal {padding-bottom: 14px; margin-top: 14px; border-top: #666 1px solid}