/* CSS Document */

/* CLEAR DEFAULTS & SET PAGE
---------------------------------------------------*/
h1, h2, h3, h4, h5, h6, li, 
ol, ul, form, fieldset, input,
p, blockquote, img, label			{margin:0px; padding:0px; list-style:none;}
img									{border:none;}
a:link, a:visited					{color:#000; text-decoration:none; cursor:pointer;}
a:hover, a:active					{color:#000; text-decoration:none; cursor:pointer;}
/*input, select						{font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; width: 200px}
label								{cursor: pointer; margin-bottom: 5px}
*/
/* Set html & body 
--------------------------------------------------*/
html								{width:100%;}
body								{position:relative; width:100%; min-width:1000px; margin:0 auto; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; color:#777; background:#FFF url(../images/bkg_pattern_top.png) 0 0 repeat-x; z-index:1;}
#site_wrapper						{position:relative; width:1000px; min-height:700px; margin:0 auto; left:0px; z-index:3;}

#gradient							{position:absolute; /*top:560px;*/ top:480px; width:100%; min-width:1000px; height:150px; margin:0 auto; background:url(../images/bkg_gradient.png) 0 0 repeat-x; z-index:2;}

/* BRANDING & NAVIGATION
---------------------------------------------------*/
#branding 							{position:relative; height:105px; border-bottom:#bebebe 2px dotted; width:904px; margin:0 auto;}
#branding h2						{position:absolute; left:-9997px;}

#logo								{position:relative; top:47px; left:0px; width:440px; height:50px;}

/* Main Navigation*/
#nav								{float:right; margin-top:20px; height:24px; letter-spacing:1px;}
#nav h2								{position:absolute; left:-8999px;}

#nav ul								{font-family: "Trebuchet MS", TrebuchetMS, Arial; padding:4px 0px; list-style:none; float:right;}
#nav ul li							{float:left; font-size:14px;}
#nav ul li a						{display:block; color:#bebebe; text-decoration:none;}
#nav ul li a:hover					{color:#5b5b5b;}
#nav ul li a:active					{color:#005d86;}

#pg_blog #nav ul li a:hover, a:active	{color:#5b5b5b; text-decoration:none;}

#nav_work, #nav_casestudies, #nav_studio, #nav_blog {margin:0px 10px;}
#nav_contact						{margin:0px 0px 0px 10px;}

#pg_packaging #nav_work a, 
#pg_identity #nav_work a, 
#pg_print #nav_work a,
#pg_websites #nav_work a,
#pg_klinkerbrick #nav_casestudies a,
#pg_pianetta #nav_casestudies a,
#pg_usb #nav_casestudies a,
#pg_studio #nav_studio a,
#pg_services #nav_studio a,
#pg_process #nav_studio a,
#pg_team #nav_studio a,
#pg_contact #nav_contact a 			{color:#005d86;}
#pg_blog #nav_blog a				{color:#b42814;}


/* Sub Navigation */
#subnav								{position:relative; height:35px; width:904px; margin:0px auto; padding-top:12px; }

#subnav ul							{font-family: "Trebuchet MS", TrebuchetMS, Arial; padding:4px 0px; list-style:none; float:right;}
#subnav ul li						{float:left; font-size:11px;}
#subnav ul li a						{display:block; color:#bebebe; text-decoration:none;}
#subnav ul li a:hover 				{color:#5b5b5b;}
#subnav ul li a:active				{color:#005d86;}

#pg_blog #subnav ul li a:hover, a:active	{color:#5b5b5b; text-decoration:none;}

/* Subnav - Work */
#subnav_packaging, #subnav_identity, #subnav_print {margin:0px 6px 0px 0px; padding-right:6px; border-right:1px solid #bebebe;}
#subnav_websites					{margin:0px; border:none;}

#pg_packaging #subnav_packaging a, 
#pg_identity #subnav_identity a, 
#pg_print #subnav_print a,
#pg_websites #subnav_websites a		{color:#005d86;}

/* Subnav - case studies */
#subnav_kb							{margin:0px 6px 0px 0px; padding-right:6px; border-right:1px solid #bebebe;}
#subnav_usb							{margin:0px; border:none;}

#pg_klinkerbrick #subnav_kb a, 
#pg_pianetta #subnav_pianetta a, 
#pg_usb #subnav_usb a				{color:#005d86;}

/* Subnav - studio */
#subnav_studio, #subnav_services  	{margin:0px 6px 0px 0px; padding-right:6px; border-right:1px solid #bebebe;}
#subnav_process						{margin:0px; border:none;}

#pg_studio #subnav_studio a, 
#pg_services #subnav_services a, 
#pg_process #subnav_process a, 
#pg_team #subnav_team				{color:#005d86;}

/* TEXT FORMATTING
---------------------------------------------------*/
h1, h2, h3, h4, h5, h6				{margin-bottom:8px;}

h1									{font-size:26px; font-weight:normal; color:#005d86;}
h2									{font-size:15px; font-weight:normal; color:#005d86; text-transform:uppercase;}
h3									{font-size:16px; font-weight:normal; color:#4c4c4c;}
h4									{font-size:14px; font-weight:normal; color:#4c4c4c;}
p									{line-height:22px; margin-bottom:10px;}

/* GLOBAL FORMATTING
---------------------------------------------------*/
#content							{position:relative; min-height:600px; overflow:auto; z-index:4;}

#whiteBoxFull						{margin:0px 50px; padding:0px 38px; background:url(../images/bkg_transwhiteblock.png) repeat; overflow:auto;}
#whiteBoxFull p						{text-align:justify;}

#whiteBoxHalf						{float:left; margin:0px 0px 0px 50px; padding:0px 38px; width:420px; background:url(../images/bkg_transwhiteblock.png) repeat; overflow:auto;}

#oneColLeft							{float:left; width:420px;}
#twoColLeft							{float:left; width:395px; margin-right:30px; text-align:justify;}
#twoColRight						{float:left; width:395px; margin-right:0px; text-align:justify;}

#brandingPhoto						{width:824px; height:275px; margin-bottom:20px;}	
#brandingPhoto p					{width:400px; color:#FFF; font-size:22px; line-height:30px; text-align:left;}
#pg_contact #brandingPhoto			{background:url(../images/img_contact.jpg);}	
#pg_studio #brandingPhoto			{background:url(../images/img_studio.jpg);}	
#pg_contact #brandingPhoto p		{width:360px; font-size:18px; padding:80px 0px 0px 40px;}
#pg_studio #brandingPhoto p			{padding:50px 0px 0px 40px;}

/* Global Classes */

.link								{float:right;}
.link span							{float:left; font-size:12px; text-transform:uppercase; margin-left:5px;}
.link a:link, .link a:visited		{color:#bebebe;}
.link a:hover, .link a:active		{color:#5b5b5b;}

.Textlink span						{font-size:12px; text-transform:uppercase; margin-left:5px;}
.Textlink a:link, .Textlink a:visited	{color:#bebebe;}
.Textlink a:hover, .Textlink a:active	{color:#5b5b5b;}

.dottedline							{margin:0px auto; width:904px; height:2px; border-top:2px dotted #bebebe;}
.solidline							{margin:15px 0px; width:auto; height:1px; border:none; background-color:#dfdfdf;}
.clear								{clear: both; width:1px; height:1px;}
.left								{float:left;}
.right								{float:right; padding:0px 0px 15px 15px;}
.largeText							{font-size:22px; font-weight:normal; color:#999;}

/* CASE STUDIES FORMATTING
---------------------------------------------------*/		
#photoHolder						{float:left; width:410px;}
#photoHolder2						{float:left; width:410px; padding-top:30px;}

.award								{height:47px; width:410px;}
.caseStudies						{text-transform:uppercase; font-size:18px; color:#999;}
.mediumText							{font-size:18px; font-weight:normal; color:#999; text-align:justify;}
#pg_klinkerbrick h1, #pg_pianetta h1, #pg_usb h1	{margin-bottom:2px;}
#pg_klinkerbrick p, #pg_pianetta p, #pg_usb p		{text-align:justify; line-height:20px;}
#whiteBoxHalf blockquote			{font-size:22px; margin-bottom:5px; color:#c9c9cb;}
#whiteBoxHalf .quoteLeft			{position:relative; margin-left:-25px; padding-right:5px;}
#whiteBoxHalf blockquote .Name		{font-size:11px; padding-left:0px; margin-bottom:0px; color:#7a7a7d;}

/* STUDIO PGS FORMATTING (Stuido, Services, Process, Team)
---------------------------------------------------*/		

/* Services Pg */
#servPackaging, #servBranding, #servWebsites {position:relative; float:left; width:254px; height:231px; margin-top:10px;}
		
#servPackaging						{background:url(../images/studio/bkg_packaging.png) bottom left no-repeat; margin-right:30px;}
#servBranding						{background:url(../images/studio/bkg_branding.png) bottom left no-repeat; margin-right:30px;}
#servWebsites						{background:url(../images/studio/bkg_websites.png) bottom left no-repeat; margin-right:0px;}

#servPackaging .serviceTitle, 
#servBranding .serviceTitle, 
#servWebsites .serviceTitle 		{float:left; font-size:20px; padding:0px 0px 0px 0px; color:#999;}

#servPackaging .servicelink, 
#servBranding .servicelink, 
#servWebsites .servicelink		 	{float:right; margin-top:8px;}
.servicelink span					{font-size:12px; text-transform:uppercase; margin-left:5px;}
.servicelink a:link, .servicelink a:visited	{color:#bebebe;}
.servicelink a:hover, .servicelink a:active	{color:#5b5b5b;}

/* Process Pg */
#processList						{margin-bottom:20px;}
#processList li						{margin-bottom:10px;}
#processList .firstline				{font-size:20px; color:#005d86;}
#processList .text					{display:block; width:350px; margin-left:35px; font-size:14px;}


/* SLIDES FORMATTING (Home, Packaging, Branding, Websites)
---------------------------------------------------*/
#Controller							{position:absolute; /*top:48px;*/ top:55px; left:48px; width:226px; height:300px; z-index:500;}
#pg_websites #Controller			{position:absolute; top:55px; left:48px; width:217px; height:300px; z-index:500;}					
#Controller ul						{font-family: "Trebuchet MS", TrebuchetMS, Arial; position:relative; margin:12px 0px 0px 40px; z-index:510;}
#Controller ul li					{line-height:16px; margin-bottom:0px;}	
#Controller .jFlowControl			{color:#bebebe; cursor:pointer;}					
#Controller .jFlowControl a:link	{color:#bebebe; cursor:pointer;}
#Controller .jFlowControl a:visited {color:#bebebe; cursor:pointer;}
#Controller .jFlowControl a:hover	{color:#5b5b5b; cursor:pointer;}
#Controller .jFlowControl a:active	{color:#005d86; cursor:pointer;}
#Controller .jFlowSelected			{color:#005d86; cursor:pointer;}

.PrevArrow							{position:absolute; top:255px; left:18px; cursor:pointer; z-index:600;}
.NextArrow							{position:absolute; top:255px; left:952px; cursor:pointer; z-index:700;}

#SlideContainer						{position:relative; z-index:5;}
.Slide								{position:relative; height:615px; width:904px; margin:0px auto; clear:right; z-index:6;}

.BottleImg							{float:left; width:260px; height:615px; margin-left:320px;}
.BottleImg2							{float:left; width:332px; height:615px; margin-left:280px;}
.BrandingImg						{float:left; width:453px; height:548px; margin-left:226px; padding-top:40px;}
.PrintImg							{float:left; width:453px; height:548px; margin-left:226px; padding-top:30px;}
.WebsitesImg 						{float:left; width:470px; height:580px; margin-left:217px; padding-top:20px;}

#pg_packaging .Desc					{float:right; width:290px; height:auto; margin:150px 20px 0px 0px; text-align:right;}
#pg_packaging .Desc2				{float:right; width:220px; height:auto; margin:150px 20px 0px 0px; text-align:right;}
#pg_packaging .Desc h1, 
#pg_packaging .Desc2 h1				{font-size:45px; color:#005d86; line-height:40px; letter-spacing:-1px;}
#pg_packaging .Desc h2, 
#pg_packaging .Desc2 h2				{font-size:20px; color:#999; line-height:20px; margin-bottom:5px; text-transform:none;}
#pg_packaging .Desc p				{color:#bebebe;}

#pg_identity .Desc, #pg_print .Desc, 
#pg_websites .Desc					{float:right; width:175px; height:auto; margin:180px 20px 0px 0px; text-align:right;}

#pg_identity .Desc h1, #pg_print .Desc h1, 
#pg_websites .Desc h1 				{font-size:24px; color:#005d86; line-height:22px; letter-spacing:-1px;}

#pg_identity .Desc h2, #pg_print .Desc h2 {font-size:20px; color:#bebebe; line-height:20px; margin-bottom:5px; text-transform:none;}
#pg_websites .Desc h2 				{font-size:14px; color:#bebebe; line-height:10px; margin-bottom:0px; text-transform:none;}

.Desc h2 a:link,		
.Desc h2 a:visited					{color:#bebebe;}
.Desc h2 a:hover,	
.Desc h2 a:active					{color:#5b5b5b;}

.numbers							{float:right;}
.numbers li							{float:left; margin-left:10px;}
.numbers a							{font-size:24px;} 
.numbers a:link,
.numbers a:visited					{color:#bebebe;}
.numbers a:hover,
.numbers a:active    				{color:#5b5b5b;}	

/* Home Pg Slides Formatting */
#newsfeed							{position:relative; height:30px; width:904px; margin:0px auto; padding-top:10px;}
#newsfeed ul						{padding:10px 0px; list-style:none; float:right;}
#newsfeed ul li						{float:left; font-size:16px; }
#newsfeed .newstext					{font-size:12px; color:#b42814;}
#newsfeed ul li a					{color:#999; text-decoration:none;}
#newsfeed ul li a:hover 			{color:#b42814;}
#newsfeed ul li a:active			{color:#b42814;}
#newsfeed .news						{margin:0px;}

#pg_home .Slide						{position:relative; height:600px; width:904px; margin:0px auto; clear:right; z-index:6;}

#HomeImg							{float:left; width:200px; margin:30px 0px 0px 100px;}
#HomePackagingImg					{float:left; width:614px; height:455px; margin:60px 0px 0px 30px;}
#HomeBrandingImg					{float:left; width:439px; height:507px; margin:60px 0px 0px 80px;}
#HomeWebsiteImg						{float:left; width:420px; height:518px; margin:60px 0px 0px 80px;}

#HomeText							{float:right; width:550px; height:380px; margin:130px 30px 0px 0px; text-align:right; background:url(../images/img_text_shadow.png) bottom right no-repeat;}
#HomePackaging						{float:right; width:230px; height:300px; margin:150px 30px 0px 0px; text-align:right;}
#HomeBranding						{float:right; width:280px; height:300px; margin:150px 30px 0px 0px; text-align:right;}
#HomeWebsite						{float:right; width:280px; height:300px; margin:150px 30px 0px 0px; text-align:right;}

#HomeText h1						{font-size:60px; color:#005d86; letter-spacing:-1px; margin-bottom:-10px;}
#HomePackaging h1, #HomeBranding h1, #HomeWebsite h1	{font-size:45px; color:#005d86; letter-spacing:-1px; margin-bottom:-2px;}
#HomeText h2, #HomePackaging h2, #HomeBranding h2, #HomeWebsite h2	{font-size:22px; color:#999; line-height:30px; margin-bottom:10px; text-transform:none;}

/* BLOG PG FORMATTING
---------------------------------------------------*/
#blogpost							{float:left; width:594px; padding:0px 25px 0px 88px;}
#blogpost h2						{color:#b42814; font-size:26px; font-weight:normal; margin-bottom:0px; text-transform:none;}
#blogpost p.postdate				{font-size:10px; line-height:18px;}
#blogpost a:link, #blogpost a:visited 	{color:#b42814;}
#blogpost a:hover, #blogpost a:active 	{color:#ff2000;}
		
#sidebar							{float:left; width:205px; border-left:2px dotted #CCC; min-height:500px; text-align:right;}
#sidebar span.headerTwo				{font-size:13px; color:#b42814; letter-spacing:1px; margin-top:3px; text-transform:none;}
#sidebar h3							{font-size:12px; margin-bottom:3px; margin-top:10px;}
#sidebar ul							{margin-bottom:10px;}
#sidebar ul li						{font-size:11px; color:#bebebe; margin-bottom:3px;}
#sidebar ul li a:link, #sidebar ul li a:visited	{color:#bebebe;}
#sidebar ul li a:hover,#sidebar ul li a:active	{color:#828282;}
#sidebar img#igniting				{margin-bottom:12px;}
#sidebar .spacer					{height:60px;}							
#sidebar .right						{padding:0px 0px 0px 5px;}	

/* CONTACT PG FORMATTING
---------------------------------------------------*/
#pg_contact #whiteBoxFull h2		{padding-top:15px;}
.contact							{font-size:16px;}
.prefix								{font-family: "Trebuchet MS", TrebuchetMS, Arial; font-size:16px; font-style:italic; font-weight:normal; color:#005d86;}
.phone								{font-size:18px;}
.line								{color:#CCCCCC; padding:0px 10px;}

.contact a:link, .contact a:visited {color:#777;} 
.contact a:hover, .contact a:active {color:#005d86;} 

#directions							{position:relative; float:right; margin-top:20px;}
#directions a						{text-transform:uppercase;} 
#directions a:link,
#directions a:visited				{color:#bebebe;}
#directions a:hover,
#directions a:active    			{color:#5b5b5b;}

/* CONTACT PG FORM FORMATTING
---------------------------------------------------*/

#formColumnLeft						{position:relative; float:left; padding-bottom:20px; width:420px;}
.required							{height:23px; padding-top:3px; color:#999; font-size:10px;}
.formline							{height:23px; margin-bottom:5px;}
.formitemname						{float:left; width:66px; padding-top:5px; font-size:12px; color:#999;}
.forminput							{float:left;}
.input 								{width:320px; height:18px; font-size:12px; padding:3px 0px 0px 3px; color:#777; line-height:22px; border:1px solid #eeeeee; background-color:#eeeeee;}

#formColumnRight					{position:relative; float:left; width:400px; margin:0px;}
.formlineTwo						{height:52px; margin-bottom:5px;}
.formitemnameTwo					{height:18px; padding-top:3px; margin-bottom:5px; width:250px; font-size:12px; color:#999;}
.inputTwo 							{width:320px; height:72px; font-size:12px; padding:3px 0px 0px 3px; color:#777; line-height:22px; border:1px solid #eeeeee; background-color:#eeeeee;}
.selectfield 						{width:320px; height:23px; font-size:12px; padding-top:3px; color:#777; line-height:22px; border:1px solid #eeeeee; background-color:#eeeeee;}
#formFieldsContainer				{float:left; width:340px;}
#Submit								{float:left; margin-top:198px; width:60px; height:76px;}
.SubmitBtn							{width:60px; height:76px; background:url(../images/btn_submit.gif) no-repeat; border:none; cursor:pointer;}		
			

/* FOOTER
---------------------------------------------------*/
#footer_wrapper						{position:relative; width:100%; min-width:1000px; height:270px; background:url(../images/bkg_pattern_bottom.png) repeat-x; /*z-index:3;*/}
#footer								{width:1000px; margin:0px auto;}
#footer blockquote					{margin:12px 50px 0px; padding:15px 0px; border-top:#bebebe 2px dotted;}
#footer cite						{font-style:normal; text-transform:uppercase; color:#bebebe; font-size:10px;}
#footer cite a:link, #footer cite a:visited {color:#bebebe;}
#footer cite a:hover, #footer cite a:active {color:#5b5b5b;}

#footer ul							{font-family: "Trebuchet MS", TrebuchetMS, Arial; list-style:none; float:right; font-size:11px; letter-spacing:1px;}
#footer ul li						{float:left; margin-left:30px;}
#footer ul li a						{display:block; color:#bebebe;}
#footer ul li a:hover, a:active		{color:#5b5b5b; text-decoration:none;}