@charset "utf-8";
/* CSS Document */
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, p, form, table, tr, td, label,  button, textarea, select, option, img 
{
margin: 0px; 
padding: 0px;
font-family: arial, sans-serif;
}
h1, h2, h3, h4, h5, h6
{
font-weight: normal;
}
a 
{text-decoration: none;outline:none;}

html 
{
	width:100%;
	height:900px;
	background: url(../images/back.gif) top repeat-x;
}
	
body
{
	background: url(../images/back.gif) top repeat-x;
	background-position: 0px 223px;
}
	
img 
{
	border-style:none;
}
	
#music_buttons
{
	height:25px;
	float:left;
	position: absolute;
	left:10px;
	top:2px;
	z-index: 9999;
}
	#music_buttons a
	{
		margin-right:0px;	
	}
	
#topbanner {
	position:absolute;
	top:24px;
	left:0px;
	width:100%;
	height:198px;
	z-index:-10;
}
#banner
{
	width: 100%;
}
#maincontainer {
	width:950px;
	margin: 0px auto;
	overflow:hidden;
	position:relative;
	top:0px;
	right:0px;
	}	
	
#topcontainer {
	text-align:center;
	z-index:10;
	margin:0 auto;}

#lftlowerborder {
	position:absolute;
	top:198px;
	left:0px;
	width:30%;
	height:12px;
	background-color:#F6921E;
	border-bottom:5px solid #AEDEE4;}

#logo {
	position:absolute;
	z-index:-5;
	}
	
#menu {
	position:relative;
	z-index:300;
	text-align:center;
	hight:33px;
	margin-left:-15px;
	}
	
	
/*New Menu 2010 */

#menu a:hover {
	background-position:0 -33px;
}


#nav_home {
	display:inline-block;
	margin:0 auto;
	width:82px;
	height:33px;
	background-image: url(../images/nav_home.gif);
	background-repeat:no-repeat;
}

#nav_about {
	display:inline-block;
	margin:0 auto;
	width:101px;
	height:33px;
	background-image: url(../images/nav_about.gif);
	background-repeat:no-repeat;
}

#nav_contact {
	display:inline-block;
	margin:0 auto;
	width:139px;
	height:33px;
	background-image: url(../images/nav_contact.gif);
	background-repeat:no-repeat;
}

#nav_lounge {
	display:inline-block;
	margin:0 auto;
	width:145px;
	height:33px;
	background-image: url(../images/nav_lounge.gif);
	background-repeat:no-repeat;
}

#nav_portfolio {
	display:inline-block;
	margin:0 auto;
	width:140px;
	height:33px;
	background-image: url(../images/nav_portfolio.gif);
	background-repeat:no-repeat;
}

#nav_pricing {
	display:inline-block;
	margin:0 auto;
	width:114px;
	height:33px;
	background-image: url(../images/nav_pricing.gif);
	background-repeat:no-repeat;
}

#nav_services {
	display:inline-block;
	margin:0 auto;
	width:129px;
	height:33px;
	background-image: url(../images/nav_services.gif);
	background-repeat:no-repeat;
}
	
/* Old Menu 	
#menu a {
	float:right;
	position: relative;
	z-index:9999;}
	
.menuspacer {
	float:right;
	display:block;
	height:25px;
	width:5px;}  */
	
#rgtlowerborder {
	position:absolute;
	top:217px;
	right:0px;
	width:30%;
	height:5px;
	background-color:#F6921E;
	border-bottom:5px solid #AEDEE4;}


	
	
	
/*::::::::::::::::::::::::::::::::::::::::: CONTENT PAGES ::::::::::::::::::::::::::::::::::::::*/


#footer
{
	margin: 0px auto;
	width: 960px;
	height:40px;
	overflow: hidden;
}
#wrapper
{
	margin:0px auto;
	width: 960px;
	overflow: hidden;
}

#brown_top
{
	float: left;
	width:100%;
	background: url(../images/brown_bg.gif);
}


/*::::::::::::::: ABOUT PAGE :::::::::::::::::*/	

#about
{
	margin:0px auto;
	width: 960px;
	overflow:hidden;
	padding-bottom:20px;
	position: relative;
}
#twitter
{
	width:100px;
	height:69px;
	background: url(../images/twitter.gif) no-repeat;
	position: absolute;
	right:30px;
	top:40px;
}
  #twitter:hover
  {
	  background: url(../images/twitter_ro.gif) no-repeat;	
  }
  
#facebook
{
	width:100px;
	height:69px;
	background: url(../images/facebook.gif) no-repeat;
	position: absolute;
	right:110px;
	top:110px;
}
  #facebook:hover
  {
	  background: url(../images/facebook_ro.gif) no-repeat;	
  }
  
#blog
{
	width:100px;
	height:69px;
	background: url(../images/blog.gif) no-repeat;
	position: absolute;
	right:165px;
	top:40px;
}
  #blog:hover
  {
	  background: url(../images/blog_ro.gif) no-repeat;	
  } 
 
#about h4
{
	float: left;
	clear: both;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	color: #603813;
}
#about p
{
	clear: both;
	color: #754c24;	
}
	
	#about h1
	{
		width: 100%;
		height:63px;
		text-indent: -9999px;
		background: url(../images/about_header.gif) no-repeat;
		position: absolute;
		left:45px;
		top:20px;
	}
		#about h1.servey
		{
			width: 100%;
			height:63px;
			text-indent: -9999px;
			background: url(../images/survey_header.gif) no-repeat;
			position: absolute;
			left:45px;
			top:20px;
		}
	#brown_container
	{
		float: left;
		width: 960px;
	}
		
		#brown_container .brown_con_top
		{
			float: left;
			width:100%;
			height:455px;
			background: url(../images/brown_con_top.gif) no-repeat;
			list-style: none;
		}
			#brown_container .brown_con_top h4
			{
				padding: 240px 0px 0px 100px;
			}
			#brown_container .brown_con_top p
			{
				padding: 20px 80px 0px 100px;
				font-size:20px;
				line-height:24px;
			}
			#brown_container .brown_con_top p a
			{
				color: #f28e0a;
				text-decoration: underline;
				background: url(../images/our_story.jpg) left no-repeat;
				padding: 22px 0px 25px 140px;
			}
				#brown_container .brown_con_top p a:hover
				{
					text-decoration: none;
				}
			#brown_container .brown_con_top img
			{
				position: absolute;
				bottom:70px;
				left:375px;
			}
			
		#brown_container .brown_con_repeater
		{
			float: left;
			width:100%;
			background: url(../images/brown_con_repeater.gif) repeat-y;
			list-style: none;
			padding-left:100px;
			
		}
			#brown_container .brown_con_repeater h6
			{
				font-size: 18px;
				color: #fff;
				font-weight: bold;
				padding: 50px 0px 0px 350px;
			}
			#brown_container .brown_con_repeater p
			{
				font-size: 16px;
				color: #fff;
				padding: 35px 40px 0px 350px;
			}
			#patrick
			{
				float: left;
				width: 765px;
				height:283px;
				background: url(../images/patrick.gif);
			}
			#lauri
			{
				float: left;
				width: 765px;
				height:283px;
				background: url(../images/lauri.gif);
			}
			#alice
			{
				float: left;
				width: 765px;
				height:283px;
				background: url(../images/alice.gif);
			}
			#devin
			{
				float: left;
				width: 765px;
				height:283px;
				background: url(../images/devin.gif);
			}
			#caroline
			{
				float: left;
				width: 765px;
				height:283px;
				background: url(../images/caroline.gif);
			}
		#brown_container .brown_con_bottom
		{
			float: left;
			width:100%;
			height:33px;
			background: url(../images/brown_con_btm.gif) no-repeat;
			list-style: none;
		}
  
  
  
/*::::::::::::::: PORTFOLIO PAGE :::::::::::::::::*/	

#portfolio
{
	margin:0px auto;
	width: 960px;
}  
	#portfolio li
	{
		float: left;
		width: 100%;
	}
		
		#portfolio h1
		{
			height: 63px;
			background: url(../images/port_header.gif) no-repeat;
			list-style: none;
			clear: left;
			text-indent: -9999px;
			margin:20px 0px 0px 45px;
		}
				
		.port_icons
		{
			float: left;
			height: 168px;
			text-indent: -9999px;
			background: url(../images/port_icons.gif) no-repeat;
			list-style: none;
			clear: left;
			position: relative;;
		}	
		.port_top
		{
			float: left;
			background: url(../images/brown_bg.gif);
			list-style: none;
			clear: left;
		}
		.port_repeater
		{
			background: url(../images/port_li_repeater.gif) repeat-y;
			list-style: none;
			clear: left;
		}
		.port_bottom
		{
			height:35px;
			background: url(../images/port_li_btm.gif) no-repeat;
			list-style: none;
			clear: left;
		}

#portfolio #left_column
{
	float: left;
	width: 463px;
	padding-left:16px;
}
	#portfolio #left_column .port_clients, #portfolio #right_column .port_clients
	{
		float: left;
		width: 463px;
		height: 298px;
		background: url(../images/client.gif) no-repeat;
		position: relative;
	}
#portfolio #right_column
{
	float: left;
	width: 463px;
}
.client_header
{
	float: left;
	width: 100%;
	height: 101px;
	/*background: url(../images/client_bg.png) no-repeat;*/
	position: relative;
}
	#portfolio .client_header h2
	{
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		position: absolute;
		top: 26px;
		left: 30px;
	}
	#portfolio .client_header .icons
	{
		height:40px;
		width: 225px;
		position: absolute;
		top: 48px;
		left: 23px;
	}
		#portfolio .client_header .icons li
		{
			float: left;
			width: 28px;
			display: inline;
		}
.client_sample
{
	float: left;
	width: 425px;
	position: relative;
	bottom:8px;
	left: 19px;
	z-index:99;
}
	
	.client_sample img
	{
		float: right;
	}
	.client_sample a
	{
		width: 101px;
		height:35px;
		position: absolute;
		left:328px;
		bottom:-5px;
	}
.client_desc
{
	float: left;
	width: 100%;
	height: 101px;
	/*background: url(../images/client_desc_bg.png) no-repeat;*/
	position: relative;
	bottom:16px;
}
	.client_desc p
	{
		clear: both;
		font-size: 15px;
		color: #754c24;	
		line-height:16px;
		margin:26px 30px 30px 30px;
	}
	



/*::::::::::::::: SERVICES PAGE :::::::::::::::::*/

#services
{
	margin:0px auto;
	width: 960px;
	overflow:hidden;
	padding-bottom:20px;
	position: relative;
}
	h1.serv_header
	{
		float: left;
		width:100%;
		height: 38px;
		background: url(../images/services_header.gif) left no-repeat;
		background-position: 45px 0px;
		list-style: none;
		margin:20px 0px 20px 0px;
		text-indent: -9999px;
	}
	h2.serv_header_1
	{
		float: left;
		width:100%;
		height: 34px;
		margin-bottom:15px;
		background: url(../images/serv_header1.gif) no-repeat;
		text-indent:-9999px;
		margin-top:10px;
	}
	h2.serv_header_2
	{
		float: left;
		width:100%;
		height: 25px;
		margin:60px 0px 15px 0px;
		background: url(../images/serv_header2.gif) no-repeat;
		background-position: 60px 0px;
		text-indent:-9999px;
	}
	h2.serv_header_3
	{
		float: left;
		width:100%;
		height: 25px;
		background: url(../images/serv_header3.gif) no-repeat;
		text-indent:-9999px;
	}
	#services h3
	{
		float: left;
		clear: both;
		width: 100%;
		font-size: 20px;
		font-weight: bold;
		color: #f6921e;
		margin-bottom:10px;
	}
	#services h5
	{
		clear: both;
		font-size: 20px;
		color: #f6921e;	
		font-weight: bold;
		font-style:italic;
		padding-bottom:10px;
	}
	#services p
	{
		clear: both;
		font-size: 12px;
		color: #754c24;	
		line-height: 18px;
		padding: 0px 40px 12px 2px;
	}
	#services span
	{
		float: left;
		clear: left;
		width: 92%;
		font-size: 12px;
		color: #754c24;	
		line-height: 18px;
		padding: 0px 40px 5px 2px;
	}
	
	#section_one
	{
		float: left;
		width: 100%;
		padding-bottom:76px;
		background: url(../images/section_one1.gif) no-repeat;
	}
		#white_container
		{
			margin:40px auto;
			width: 645px;
		}
			
			#white_container .white_con_top
			{
				float: left;
				width:100%;
				height:14px;
				background: url(../images/white_con_top.gif) left bottom no-repeat;
				list-style: none;
			}
			#white_container .white_con_repeater
			{
				float: left;
				width:100%;
				background: url(../images/white_con_repeater.gif) repeat-y;
				list-style: none;
				padding:0px 0px 0px 30px;
			}
			#white_container .white_con_bottom
			{
				float: left;
				width:100%;
				height:14px;
				background: url(../images/white_con_btm.gif) no-repeat;
				list-style: none;
			}
		
	#section_two
	{
		float: left;
		width: 100%;
		/*height:948px;*/
		background: url(../images/section_two.gif) left no-repeat;
		position: relative;
	}
		.tower1
		{
			width: 200px;
			text-transform: uppercase;
			font-size:18px;
			color:#f6921e;
			text-align:center;
			font-weight: bold;
			position: absolute;
			left:130px;
			top:45px;
		}
		.tower2
		{
			width: 200px;
			text-transform: uppercase;
			font-size:18px;
			color:#f6921e;
			text-align:center;
			font-weight: bold;
			position: absolute;
			left:80px;
			top:165px;	
		}
		#content_creation
		{
			float: right;
			width:520px;
			position: relative;
			top:20px;
			right:40px;
			margin-top:30px;
			
		}
		#graphic_logo_design
		{
			float: left;
			width:500px;
			margin-top:180px;
			padding-left:60px;
			
		}
		
	#section_three
	{
		float: left;
		width: 100%;
		height: 714px;
		background: url(../images/section_three.gif) left top no-repeat;
	}
		
		#online_marketing
		{
			float: left;
			width: 440px;
			margin-top:40px;
			padding-left:120px;
		}
			#services #online_marketing p
			{
				font-size: 12px;
				color: #f6921e;
				padding-bottom:10px;
				font-weight: bold;
			}
			#services #online_marketing li
			{
				font-size: 12px;
				color: #f6921e;
				list-style: none;
				font-weight: bold;
				margin:0px;
				padding:0px;
			}
		
		.ad_campaigns
		{
			float: left;
			width:700px;
			padding-left:60px;
		}
		
	#section_four
	{
		float: left;
		width: 100%;
		height: 1068px;
		background: url(../images/section_four.gif) top no-repeat;
		margin-top:-20px;
	}
	
		.email_marketing
		{
			float: left;
			width:550px;
			padding-left:60px;
		}
		.traffic
		{
			float: left;
			width:700px;
			padding-top:10px;
			padding-left:60px;
		}
		.seo
		{
			float: left;
			width:700px;
			padding-top:10px;
			padding-left:60px;
		}
		.strategy
		{
			float: left;
			width:700px;
			padding-top:10px;
			padding-left:60px;
		}
		

/*::::::::::::::: PRICING PAGE :::::::::::::::::*/

#pricing
{
	margin:0px auto;
	width: 960px;
}

#price_bluebox
{
	margin-top:20px;
	margin-left:20px;
	background-color:#caeae9;
	width:920px;
	color:#603813;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
	
#price_atomic
{
	background:url(../images/pricing_atomicstarter.gif);
	height:323px;
	background-repeat:no-repeat;
	margin: 0 auto;
}

#price_custom
{
	background:url(../images/pricing_custom.gif);
	height:387px;
	background-repeat:no-repeat;
	margin: 0 auto;
}

#price_advantage
{
	background:url(../images/pricing_visual_advantage.gif);
	height:387px;
	background-repeat:no-repeat;
	margin: 0 auto;
}

#price_magento
{
	background:url(../images/pricing_magento.gif);
	height:387px;
	background-repeat:no-repeat;
	margin: 0 auto;
}
	
#price_atomic div {
		float:left;
		margin-top:60px;
		margin-left:40px;
		margin-right:50px;
}

#price_custom div {
		float:left;
		margin-top:70px;
		margin-left:50px;
		margin-right:50px;
}

#price_advantage div
{
		float:left;
		margin-top:70px;
		margin-left:60px;
		margin-right:50px;
}

#price_magento div {
		float:left;
		margin-top:105px;
		margin-left:70px;
		margin-right:50px;
}

#printwork {
	margin-left:250px;
}

#price_bluebox div div p {
	margin-bottom:10px;	
}

#price_bluebox div div li {
		margin-left:15px;
}

	
/* Old Pricing Page  		
	#pricing_top
	{
		float: left;
		width: 100%;
		height: 666px;
		background: url(../images/pricing_top.gif) no-repeat;
		position: relative;
	}
		#pricing_top ul
		{
			float: left;
			width: 100%;
			margin-top:220px;
		}
		#pricing_top ul li
		{
			float: left;
			width:265px;
			display: inline;
			position: relative;
		}
			#pricing_top ul li.left
			{
				margin-left:60px;
			}
			#pricing_top ul li.middle
			{
				margin-left:20px;
			}
			#pricing_top ul li.right
			{
				margin-left:25px;
			}
			
		#pricing_top ul li p
		{
			font-size: 16px;
			color: #663819;
			line-height:22px;
		}
		#pricing_top ul li p span
		{
			float: left;
			width:230px;
			font-size: 14px;
			line-height:16px;
			position: absolute;
			top:200px;
			left:20px;
		}
		
	#pricing_bottom
	{
		float: left;
		width: 100%;
		height: 778px;
		background: url(../images/pricing_bottom.gif) no-repeat;
		position: relative;
	}
		#pricing_bottom h2
		{
			font-size: 40px;
			color: #663819;
			font-weight: bold;
			padding-top:30px;
			padding-left: 100px;
		}
		#pricing_bottom p
		{
			font-size: 16px;
			color: #663819;
			line-height:22px;
			padding-right:400px;
			padding-left: 100px;
		}
	
		#btm_test_one
		{
			float: left;
			width: 350px;
			margin-top:90px;
			padding-left:120px;
		}
			#btm_test_one p
			{
				font-size: 13px;
				color: #663819;
				line-height:13px;
				font-weight: bold;
				padding-bottom:5px;
				padding-right:0px;
				padding-left: 0px;
			}
			#btm_test_one p a
			{
				color: #663819;	
			}
			#btm_test_one p span
			{
				font-size: 12px;
				color: #f6921e;	
				font-style: italic;
			}
		
		#btm_test_two
		{
			float: left;
			clear: left;
			width: 400px;
			margin:30px 0px 0px 0px;
			padding-left:500px;
		}
			#btm_test_two p
			{
				font-size: 13px;
				color: #663819;
				font-weight: bold;
				line-height:13px;
				padding-bottom:5px;
				padding-right:0px;
				padding-left: 0px;
			}
			#btm_test_two p a
			{
				color: #663819;	
			}
		
			#btm_test_two p span
			{
				width: 100%;
				font-size: 12px;
				color: #fff;	
				font-style: italic;
			}
		
		
*/ 
		
/*::::::::::::::: PRICING PAGE :::::::::::::::::*/
	
	
#contact
{
	margin:0px auto;
	width: 960px;
}
	
	#contact h1
	{
		float: left;
		width: 100%;
		height:49px;
		text-indent: -9999px;
		background: url(../images/contact_header.gif) no-repeat;
		margin:20px 0px 10px 25px;
	}	
	#contact_bg
	{
		float: left;
		width: 100%;
		height: 667px;
		background: url(../images/contact_bg.gif) no-repeat;
		position: relative;
	}
		#contact_bg h2
		{
			float: left;
			width:400px;
			font-size:35px;
			position: relative;
			left:285px;
			top:170px;
		}
#email
{
	height:30px;
	position: absolute;
	bottom:160px;
	left:295px;
	z-index: 999;
}
	#email a
	{
		font-size: 30px;
		color: #663617;	
	}



/*::::::::::::::: FOUNDERS PAGE :::::::::::::::::*/
	
#founders
{
	margin:0px auto;
	width: 960px;
	overflow: hidden;
	padding-bottom:160px;
	background: url(../images/founders_bg.jpg) no-repeat;
}
	#founders_text
	{
		width:	 650px;
		margin-top: 250px;
		margin-left:180px;
		
	}
		#founders_text p
		{
			line-height: 20px;
			font-size: 16px;
			color: #eee;
			padding-bottom:12px;
		}
	
#flash 
{
	display:block;
	position:absolute;
	top:25px;
	left:0;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
/*********************/

/*  */
#tooltipicons
{
	 float: left;
	 position: relative;
	 left:28px;
	 top:18px;
}
#tooltipicons td
{
	float: left;	
	width:215px;
	height:55px;
}
#tooltip{
	position:absolute;
	font-size:12px;
	border:1px dashed #333;
	background:#ab600a;
	padding:2px 5px;
	color:#fff;
	display:none;
	z-index: 999;
	width: 250px;
	}	
	
.tooltip
{
	float: left;
	width:100%;
	height:55px;
}
.margin22
{
	margin-top:22px;	
}
/*  */

#gallery, #gallery2, #gallery3, #gallery4, #gallery5, #gallery6 {padding: 10px;width: 520px;}
#gallery ul, #gallery2 ul, #gallery3 ul, #gallery4 ul, #gallery5 ul, #gallery6 ul { list-style: none;}
#gallery ul li, #gallery2 ul li, #gallery3 ul li, #gallery4 ul li, #gallery5 ul li, #gallery6 ul li { display: inline;}


/*:::::::::::::::::SURVEY FORM:::::::::::::::::::::::*/
#brown_container .brown_con_repeater p.thankyou
{
	padding:0px;
	color: #603813;
	font-weight: bold;
	font-size:20px;
}
#brown_container .brown_con_repeater #surveyform
{
	float: left;
	width:750px;
	position: relative;
	top:-30px;
}
#brown_container .brown_con_repeater #surveyform .formspace
{
	float: left;
	width:100%;
	margin-top:50px;
	padding-top:25px;
	border-top:2px dotted #603813;
}

#brown_container .brown_con_repeater #surveyform p
{
	padding:0px;
	color: #603813;
	font-weight: bold;
}
#brown_container .brown_con_repeater #surveyform div
{
	float: left;	
	margin-top:15px;
	margin-right:40px;
}
#brown_container .brown_con_repeater #surveyform label
{
	padding:0px;
	color: #603813;
	font-style: italic;
}
#brown_container .brown_con_repeater #surveyform input
{
	float: left;
	font-size:12px;
	color: #666;
	padding:3px;
	
}
#brown_container .brown_con_repeater #surveyform textarea
{
	float: left;
	width:250px;
	height:120px;
	font-size:12px;
	color: #666;
	padding:3px;
}
	#brown_container .brown_con_repeater #surveyform textarea.textarea
	{
		clear: left;
width:400px;
		height:200px;
	}
#brown_container .brown_con_repeater #surveyform span
{
	float: left;
	color: #603813;
	margin:0px 3px 0px 3px;
}
#brown_container .brown_con_repeater #surveyform button
{
	background: #F6921E;
	color: #fff;
	font-size:25px;
	border: 1px solid #603813;
	padding:20px 50px 20px 50px;
	margin-top: 40px;
	text-transform: uppercase;
}