@charset "UTF-8";
/* CSS Document */

/******************************************************************************** 
AUTHOR: JEREMY SPINGATH
	WWW.STUDIOMAE.COM
	JEREMY@STUDIOMAE.COM
	BEST READ WITH A COFFEE
********************************************************************************/
/******************************************************************************** 
COLOR PALETTE

Blue: #8dadb5
Orange: #c98344
Green: #bfce6d
Tan: #af9c7a
Creme: #efe8d3
Dark Brown: #31271c
********************************************************************************/


.spacer
/**********************<<< HEADER >>>***********************/
#header 							{ background: url(../images/headerBg.jpg) repeat #83a7b1; width: 100%; float: left; text-align: left;  }
#headerSpacerTop					{ background: url(../images/headerTopSpacer.jpg) repeat-x; height: 6px; width: 100%; }
#headerContentWrapper				{ background: url(../images/headerContentBg.jpg) repeat-y; width: 863px; height: 100%; }
#headerContent						{ margin: 190px 0 240px; padding: 0 0 0 20px; width: 100%; }

/*Twitter*/
#tweetWrapper						{ background: url(../images/twitterBg.png) no-repeat; width: 340px; height: 177px; float: right; position: relative; left: 70px;  }
.tweet								{ color: #ffffff; width: 245px; height: 120px; margin: 60px 0 0 90px; font-size: 15px; line-height: 1em;  }
#followus							{ color: #31271c; position: relative; bottom: 55px; left: 205px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); margin: 0; font-size: 20px; }
#followus:hover						{ color: #1f1710; }
.tweet_time							{ font-size: 12px; }

.description						{ font-family: Trebuchet MS, Helvetica, sans-serif; font-weight: normal; font-size: 1.4em; line-height: 1.0em; margin-bottom: 0.4em; margin-top: 0.7em; }
/**********************<<< NAVIGATION >>>***********************/

/* INDEX NAV */
				

#liTop								{ background: url(../images/navButtonBlue.jpg) no-repeat; width: 109px; height: 31px; margin: 2px 0; }
#liWhatWeDo							{ background: url(../images/navButtonOrange.jpg) no-repeat; width: 109px; height: 31px; margin: 2px 0; }
#liWhoWeAre							{ background: url(../images/navButtonYellow.jpg) no-repeat; width: 109px; height: 31px; margin: 2px 0; }
#liPortfolio						{ background: url(../images/navButtonGreen.jpg) no-repeat; width: 109px; height: 31px; margin: 2px 0; }
#liJournal							{ background: url(../images/navButtonPaper.jpg) no-repeat; width: 109px; height: 31px; margin: 2px 0; }
#liContact							{ background: url(../images/navButtonTan.jpg) no-repeat; width: 109px; height: 31px; margin: 2px 0; }

/** IE6 CONDITIONAL **/
#ie6Banner							{ background: url(../images/ie6Banner.png) no-repeat; width: 512px; height: 96px; position: absolute; top: 450px; }
#ie6Banner p						{ padding: 1px 35px 3px 15px; font-size: 14px; }
#ie6Banner p span					{ color: #c98344; font-weight: bold; font-size: 20px; } 
/** HOVER MESSAGE **/
.nav span							{ display: none; }
.keyboard							{ display: inline; color: #473a2c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); font-size: 12px; width: 10px;; float: left; }
.nav:hover span						{ display: block; }
.keyboardNav						{ width: 109px;  margin: 0 0 0 22px; text-align: center; }
#keyboardMessage					{ width: 50px; }
.arrow								{ font-size: 19px; width: 20px; } 

/**********************<<< SECTION WHAT WE DO >>>***********************/
#whatWeDo							{ background: url(../images/whatWeDoBg.jpg) repeat #c98344; height: 100%; }
#whatWeDoSpacerTop					{ background: url(../images/whatWeDoSpacerTop.png) repeat-x top; }
#whatWeDoPageGraphic				{ background: url(../images/whatWeDoGfcCamera.png) no-repeat bottom left; }
#whatWeDoContentDetailsGraphic		{ background: url(../images/whatWeDoContentPic.png) no-repeat; width: 600px; height: 300px; display: block; }
#tabServices div					{ display: inline; float: left; width: 30%; margin: 10px 10px 0 0; position: relative; left: 25px;}
#whatWeDoSpacerBottom				{ background: url(../images/whatWeDoSpacerBottom.png) repeat-x bottom; }
#whatWeDoContentWrapper				{ margin: 190px 0 240px; }
.ui-tabs .ui-tabs-hide 				{ display: none;}

/**********************<<< SECTION WHO WE ARE >>>***********************/
#whoWeAre							{ background: url(../images/whoWeAreBg.jpg) repeat #fbf16b; height: 100%; }
#whoWeAreSpacerTop					{ background: url(../images/whoWeAreSpacerTop.jpg) repeat-x top; }
#whoWeArePageGraphic				{ background: url(../images/whoWeAreGfcHeadphones.jpg) no-repeat bottom right; }
#whoWeAreContentWrapper				{ margin: 190px 0 240px; }
#whoWeAreContentDetails div			{ display: inline; }
.whoWeAreBio						{ float: left; width: 203px; margin: 0 7px; }
.whoWeAreBio a						{ margin: 0 8px; } 

/**********************<<< SECTION PORTFOLIO >>>***********************/
#portfolioSection					{ background: url(../images/portfolioSectionBg.jpg) repeat #bfce6d; height: 100%; }
#portfolioSectionSpacerTop			{ background: url(../images/portfolioSectionSpacerTop.jpg) repeat-x top; }
#portfolioSectionPageGraphic		{ background: url(../images/portfolioSectionGfc.png) no-repeat bottom left; }
#portfolioSectionContentWrapper		{ margin: 190px 0 240px; }
#viewFullPortfolio					{ background: url(../images/buttonLargeForward.png) no-repeat; width: 162px; height: 26px; padding: 7px 0 0 8px; float: right; position: relative; bottom: 45px; }

/* Portfolio Section Slider */
/* Portfolio Section Slider */
#slider								{ width: 600px; height: 300px; background: url(../images/portfolioSectionSliderBg.png) no-repeat;  margin: 0 auto; position: relative; display: block; padding: 10px; }
.scroll								{ height: 280px; width: 580px; overflow: auto; position: relative; clear: left; border: #ffffff solid 1px;   }
.scrollContainer div.panel 			{  height: 280px; }
.navigation							{ margin: 20px 0 0; }
.navigation li						{ display: inline; float: left; }
.navigation li a					{ display: block; background: url(../images/buttonSliderGreen.png) no-repeat; width: 36px; height: 32px; }
.navigation li a.active				{ background: url(../images/buttonSliderBlue.png) no-repeat; width: 36px; height: 32px; }

.scrollButtons 						{ display: none; position: absolute; top: 150px; cursor: pointer; }
.scrollButtons.left 				{ left: -20px; }
.scrollButtons.right 				{ right: -20px; }

/**********************<<< SECTION JOURNAL >>>***********************/
#journal							{ background: url(../images/journalBg.jpg) repeat #efe8d3;}
#journalSpacerTop					{ background: url(../images/jounralSpacerTop.jpg) repeat-x top; }
#journalPageGraphic					{ background: url(../images/journal.png) no-repeat center center; }
#journalWrapper						{ height: 911px; }
#journalContentWrapper				{ margin: 216px 0 266px; }
.excerpt							{ font-size: 14px; }
.excerpt span						{ float: right; }
#journalContentIntro				{ float: left; width: 300px; margin: 0 100px 0; position: relative; right: 15px;  }
#journalContentDetails				{ width: 430px; }
#journalContentTitle				{ margin: 0 0 15px 90px; }
#buttonBlog							{ float: right; margin: 0 10px 0; }
.teaser								{  }


/**********************<<< SECTION CONTACT >>>***********************/
#contact							{ background: url(../images/contactBg.jpg) repeat #af9c7a; }
#contactSpacerTop					{ background: url(../images/contactSpacerTop.jpg) repeat-x top; }
#contactPageGraphic					{ background: url(../images/contactPageGraphic.png) no-repeat bottom right; }
#contactContentWrapper				{ margin: 140px 0 240px; }

/*FORM*/
#divContactForm						{ display: block; background: url(../images/contactFormBg.jpg) no-repeat; width: 580px; height: 152px; padding: 27px 24px; margin: 0 0 10px;  }
#divContactForm div					{ display: inline; }
#contactInfo				 		{ float: left; }
#contactInfo p						{ background: url(../images/contactUsEntryBoxSmall.jpg) no-repeat; width: 259px; height: 42px; margin: 0 0 12px; }
#contactInfo p input				{ width: 180px; float: left; margin: 10px 0 0 10px;  }
#contactMessage						{ float: left; position: relative; bottom: 11px; left: 5px; }
#contactMessage p					{ background: url(../images/contactUsEntryBoxLarge.jpg) no-repeat; width: 294px; height: 149px; }
#contactMessage textarea			{ width: 270px; height: 100px; margin: 10px 0 0 10px; }
#contactMessage Label				{ width: 70px; margin-left: 0; padding-left: 0; }
#contactForm button					{ display: block; background: url(../images/buttonSmallForward.png) no-repeat; width: 96px;  height: 27px; font-size: 16px; padding: 0 13px 2px 0;  }
#contactForm button:hover			{ color: #31271c; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); cursor: pointer;  } 
#spanButton							{ float: right; width: 96px;  }
.error								{ font-size: 1.4em; width: 3px; color: #8e0d00; position: relative; left: 5px; padding: 10px 0; margin: 0; }
.label								{ margin-left: 0; padding-left: 0; }
#successMessage						{ font-size: 1.4em; }
/*Social*/


/**********************<<< HEADINGS >>>***********************/


/**********************<<< TEXT STYLES>>>***********************/

#headerContent p					{ font-size: 27px; }

/**********************<<< FORMS >>>***********************/



/**********************<<< TABLES >>>***********************/



/**********************<<< COMMENTS >>>***********************/

/**********************<<< EXTRAS >>>***********************/
/* CODA SLIDER */

	.coda-slider-wrapper 			{ background: url(../images/portfolioSectionSliderBg.png) no-repeat;  padding: 10px;   }
	.coda-slider 					{  border: #ffffff solid 1px; height: 280px; width: 580px; margin-bottom: 10px; }
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: 300px; overflow: auto !important;  }
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel{ width: 580px; height: 280px;  } 
	/* Change margin and width of the slider (with dynamic arrows)
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px }
	.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px } */
	/* Arrow styling */
	.coda-nav-left a, 
	.coda-nav-right a 				{ background: #000; color: #fff; padding: 5px; width: 100px }
	/* Tab nav */
	.coda-nav ul li a.current 		{ background: url(../images/buttonSliderBlue.png) no-repeat; width: 36px; height: 32px; }
	/* Panel padding */
	.coda-slider .panel-wrapper 	{ width: 580px; }
	/* Preloader */
	.coda-slider p.loading 			{ padding: 20px; text-align: center }


	/* Slider nav */
	.coda-nav						{ margin: 10px 0 0; float: left; }
	.coda-nav ul 					{ clear: both; display: block;  overflow: hidden }
	.coda-nav ul li 				{ display: inline }
	.coda-nav ul li a 				{ background: url(../images/buttonSliderGreen.png) no-repeat; width: 36px; height: 32px; display: block; float: left;  }
	.sliderNav						{ display: inline; }

/* Miscellaneous *//* Don't change anything below here unless you know what you're doing */
	.coda-slider-wrapper 			{ clear: both; overflow: auto }
	.coda-slider 					{ float: left; overflow: hidden; position: relative }
	.coda-slider .panel 			{ display: block; float: left }
	.coda-slider .panel-container 	{ position: relative }
	.coda-nav-left, .coda-nav-right { float: left }
	.coda-nav-left a, 
	.coda-nav-right a 				{ display: block; text-align: center; text-decoration: none }