@charset "UTF-8";

*{ margin:0; padding:0; }
body{ font: 13px Helvetica, Tahoma, Arial, sans-serif; color:#000; margin:0; background:url(../images/bg-header.gif) repeat-x; }
.clear{ clear:both; }
.float-left{ float:left; border:3px solid #CCC; margin:0 20px 10px 0; }
a{ color:#637e2a; }
a:hover{ text-decoration:none; color:#444; }
h2{ font-size:24px; font-weight:normal; color:#000; padding:0 0 10px 0;}
h3{ font-size:18px; font-weight:normal; color:#000; padding:15px 0 0 0; border-bottom:1px dotted #CCC; }
blockquote{ padding:5px 20px 3px; background:#EEE; border-left:2px solid #DDD; }
.container{ width:980px; margin:auto; padding-left:15px; }
.highlight{ background:#efee9c; padding:6px 8px 3px; font-weight:bold; }

.intro{ padding:10px 0 35px; }

/* Header */
#header{ height:162px; }
#header h1{ float:left; width:351px; height:156px; margin:0 0 0 -10px; background:url(../images/emagine.gif) no-repeat; text-indent:-9999px; }
#header h1 a{ width:351px; height:156px; display:block; }
#header #view{ float:right; list-style:none; font-size:12px; padding:20px 15px 0 0; }
#header #view li{ display:inline; margin:8px 0 0 15px; color:#777; text-shadow: 0 0 1px #000; }
#header #view li a{ color:#EEE; }

#header #menu{ float:right; clear:right; list-style:none; font-size:18px; padding:45px 0 0 0; width:600px; text-align:right;}
#header #menu li{ display:inline; padding:10px 35px 0 0; color:#666;}
#header #menu #last{ padding:10px 15px 0 0; }
#header #menu li a{ color:#777; text-decoration:none; text-transform:lowercase; text-shadow: 0 0 2px #000; }
#header #menu li a:hover{ color:#DDD; }

/* Homepage */
#home{ height:519px; background:url(../images/home/5.jpg) no-repeat center; }
#home p.hide{ display:none; }
#home #view-portfolio{ padding:330px 0 0 10px; }
#home #view-portfolio a{ display:block; text-indent:-9999px; width:314px; height:61px; background:url(../images/view-portfolio-5.gif) no-repeat; } 

/* Main Content */
#main{ line-height:20px; padding:20px 0; font-size:14px; color:#444; line-height:24px;}
#main p{ padding:10px 3px; }
#main ul, #main ol{ padding: 10px 0 10px 45px; }

#banner{ padding-bottom:30px; }
#content{ float:left; width:610px; padding:0 0 30px 0; }
#content-right{ float:right; width:600px; padding:20px 40px 30px 0; }
#content-full{ float:left; width:820px; padding:20px 50px; }
#content a, #content-right a{ text-decoration:none; color:#000; border-bottom:1px solid #CCC; }

#main .service{ width:295px; padding:30px 15px 20px; float:left; border-top:1px solid #DDD; }
#main .service h2{ font-size:20px; }
#main .service img{
	width:290px;
	height:158px;
}




#content h2.blog-title { margin:0; padding:0; line-height:14px; }
#content h2.blog-title a{ border-bottom:1px solid #DDD; font-size:20px; color:#000; border:none; padding:8px 0 0 15px; margin:0; display:block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#content .blog-title a:hover{ color:#BCD600; }
#content .blog-thumb{ float:left; width:220px; margin:0 20px 30px 0; }
#content .author{ font-size:13px; color:#666; line-height:14px; padding:12px 0 0; }
#content .summary{ color:#868686; padding:8px 0 0; }
#content .blog-image{ float:left; width:340px; margin:20px 40px 20px 0; }


.more{ text-align:right; padding:15px 0 25px; }



a.button{ padding:10px 15px 9px 15px; font-size:13px; font-weight:bold; color:#333; border:none; text-decoration:none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	border:1px solid #CCC;
	background: #DDD;
	background-image: -moz-linear-gradient(100% 100% 90deg, #CCC, #EEE);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#CCC));
	text-shadow: 0 0 2px #FFF;
}
a.button:hover{ background:#CCC; border:1px solid #AAA; color:#000; }



.spacer{ border-top:1px solid #CCC; padding-bottom:30px; clear:both; }

#content .blog-heading{ padding-left:3px; margin-bottom:15px; border-bottom:1px solid #CCC; }
#content h2.blog-title-full{ font-size:32px; padding:17px 0 14px 0; }
#content .author-full{ font-size:14px; color:#777; line-height:14px; }

#blog{  padding:20px 0 0; }
#blog h3{ font-size:24px; }

.sidebar-blurb{ color:#868686; padding:22px 0 20px; line-height:28px; }
.sidebar-blurb a{ text-decoration:none; border-bottom:1px dotted #CCC; }
.sidebar-blurb strong{ font-size:16px; color:#333; }

#blog-social{ padding:10px 0; }
#blog-social img{ padding:0 5px 0 0; border:none; }
	
#sidebar #blog-sidebar{ padding:20px 0 0; margin:0;}
#blog-sidebar li{ padding:15px 0; margin:0; border-bottom:1px solid #CCC; }
#blog-sidebar li a{ font-size:13px; }
#blog-sidebar img{ width:80px; float:left; margin-right:15px; }
#blog-sidebar h2{ font-size:16px; padding:0; }
#blog-sidebar p{ font-size:12px; padding:0; }

#sidebar #case-sidebar{ padding:20px 0 0; margin:0;}
#case-sidebar li{ padding:20px 0 5px; margin:0; border-bottom:1px solid #CCC; }
#case-sidebar img{ width:120px; float:left; margin:5px 25px 10px 0; }
#case-sidebar h2{ font-size:20px; padding:0; margin-bottom:5px; }
#case-sidebar p{ font-size:12px; padding:0; }
#case-sidebar .more{ text-align:right; padding:15px 0 25px; }

.shadow{
	-moz-box-shadow: 0 0 10px #777;
	-webkit-box-shadow: 0 0 10px #777;
	box-shadow: 0 0 10px #777;
	border:1px solid#FFF;
}
a img.shadow{ border:none; }

#demo-reel{ width:960px; height:555px; padding:4px; }

#services-page{ padding:30px; font-size:14px; color:#444; line-height:24px; }
#services-page p{ padding:7px 0; }
#services-page ul, #services-page ol{ padding:7px 40px; }
#services-page img{ float:right; margin:10px 0 25px 35px; }
#services-page .get-in-touch{ font-size:16px; font-weight:bold; padding:15px 0; margin-top:15px; border-top:1px solid #CCC; }

#content-column{ float:left; width:275px; padding:25px 10px 25px 20px; background:#EEE; margin:15px 0 10px 15px; border:1px solid #999; }

/* Contact Page */
#contact-general{ float:left; width:545px; padding:25px 20px 25px 25px; margin:15px 0 10px 15px; background:#EEE url(../images/bg-contact.gif) bottom repeat-x; border:1px solid #d3d3d3; }
#contact-general img{ float:left; margin-right:20px; }
#contact-quote{ float:left; width:545px; padding:25px 20px 25px 25px; margin:10px 0 30px 15px; background:#EEE url(../images/bg-contact.gif) bottom repeat-x; border:1px solid #d3d3d3; }
#contact-quote .col1{ width:250px; float:left; } 
#contact-quote .col2{ width:265px; float:left; clear:none; } 
#contact-support{ float:right; clear:none; width:300px; padding:25px 10px 25px 25px; margin:15px 15px 30px 15px; background:#EEE url(../images/bg-contact.gif) bottom repeat-x; border:1px solid #d3d3d3; }
input, textarea{ background:#FFF; border:1px solid #666; font-size:13px; color:#333; padding:4px; }
.directions{ font-size:12px; font-style:italic; color:#999; }
.directions img{ border:1px solid #CCC; }
.button{ background:#111 url(../images/bg-button.gif) repeat-x; color:#FFF; border:#111; padding:7px; }
#success{ text-align:center; padding:20px 0 15px; margin:0 15px; font-size:16px; background:#000; color:#EEE; font-weight:bold; }

/* Sidebar */
#sidebar{ width:290px; float:right; padding-bottom:30px; }
#sidebar-left{ width:290px; float:left; padding-bottom:30px;  }
#sidebar-left ul{ list-style:none; }
#sidebar ul{ list-style:none; font-weight:bold; }
#sidebar ul li{ font-weight:normal; }
#sidebar ul li ul{ padding-left:30px; list-style:disc; }
ul.sidemenu li a{ color:#000; padding:5px 0 3px 15px; text-decoration:none; border-bottom:1px dotted #999; display:block; }
ul.sidemenu li a:hover{ background:#EEE; }
ul.sidemenu li a.active{ background:#EEE; border-bottom:1px dotted#666; font-weight:bold; font-style:italic; }

#sidebar #button{ padding:20px 0 25px; margin-left:-22px; }
#sidebar #button li{ margin-bottom:15px; }
#sidebar #button #ourclients a{ width:314px; height:113px; display:block; background:url(../images/sidebar/clients.gif) no-repeat; text-indent:-9999px; }
#sidebar #button #ourprocess a{ width:314px; height:113px; display:block; background:url(../images/sidebar/process.gif) no-repeat; text-indent:-9999px; }
#sidebar #button #hiring a{ width:314px; height:113px; display:block; background:url(../images/sidebar/hiring.gif) no-repeat; text-indent:-9999px; }
#sidebar #button #shopify-features a{ width:314px; height:113px; display:block; background:url(../images/sidebar/shopify-features.gif) no-repeat; text-indent:-9999px;}
#sidebar #button #shopify-pricing a{ width:314px; height:113px; display:block; background:url(../images/sidebar/shopify-pricing.gif) no-repeat; text-indent:-9999px; }
#sidebar #button #our-blog a{ width:314px; height:113px; display:block; background:url(../images/sidebar/blog.gif) no-repeat; text-indent:-9999px; }
#sidebar #button #case-studies a{ width:314px; height:113px; display:block; background:url(../images/sidebar/case-studies.gif) no-repeat; text-indent:-9999px; }

/* Clients */
#clients{ height:1160px; padding:0 0 0 15px; }
#clients img{ border:2px solid #CCC; padding:1px; margin:0 0 11px 11px; }

/* Portfolio */
#main #portfolio{ list-style:none; font-size:12px; padding:0;}
#main #portfolio li.item{ width:316px; height:255px; padding:0 10px 10px 0; float:left; }
#main #portfolio li.item a{ width:316px; height:232px; display:block; padding:20px 0 0 0; line-height:18px; text-align:center; background:url(../images/bg-portfolio.gif) no-repeat; text-decoration:none; color:#DDD; }
#main #portfolio li.item .title{ font-size:14px; font-weight:normal; color:#EEE; }
#main #portfolio li.item .ss{ display:block; width:260px; padding-top:7px; margin:0 auto;}
#main #portfolio li.item img{ border:none; }

#main #portfolio #pagination{ text-align:center; font-size:14px; clear:both; padding:20px 0 10px; }
#main #portfolio #pagination strong{ padding:5px 7px 3px; }
#main #portfolio #pagination a{ padding:5px 7px 3px; background:#666; color:#EEE; text-decoration:none;}
#main #portfolio #pagination a:hover{ background:#333; }

/* Portfolio PopUps */
#popup{ padding:20px; height:450px; margin:0; font-size:14px; color:#666; line-height:24px; background:#000 url(../images/bg-slider.jpg) repeat-x; }
#popup p{ padding:10px 3px; }
#popup h2{ padding:10px 0 3px 1px; margin-bottom:10px; color:#EEE; border-bottom:1px solid #555; }
#popup #screenshot{ float:left; }
#popup #screenshot img{ border:none; }
#popup #sidebar{ float:right; width:240px; padding-right:10px; }
#popup #sidebar h3{ padding:0; margin:10px 0 0; color:#CCC; border:none; }
#popup #sidebar ul{ padding-bottom:10px; }
#popup #sidebar ul li{ padding-left:1px; }
#popup #sidebar ul li a{ text-decoration:none;}

/* Portfolio Showcase */
#holder{ margin-right:30px; height:460px; overflow:hidden; border-top:1px solid #CCC; padding:0 20px 10px 20px; background:url(../images/bg-content-process.gif) repeat-x; }
#holder .section{ height:395px; padding:30px 20px 20px 20px; overflow:hidden; margin-bottom:50px; font-size:13px;}


.large{ font-size:16px; line-height:24px; color:#666; }

/* Footer */
#footer{ background:#b0b0b0 url(../images/bg-footer.gif) repeat-x; background-position:0 -5px; height:291px; }
#footer #wrap{ width:980px; margin:auto; }

#footer .column{ float:left; width:200px; padding:30px 20px 0 0; font-size:13px; line-height:24px; color:#888;}
#footer .last{ padding:30px 0 0 0; }
#footer .column strong{ color:#222; }
#footer h3{ font-size:16px; padding:0 0 8px; margin:0; border:none; }
#footer ul{ line-height:24px; list-style:none; color:#000;}
#footer ul li{ font-size:13px; height:24px; /* define height for IE6 */ color:#888; padding-left:1px;}
#footer ul li a{ color:#888; text-decoration:none; display:block; }
#footer ul li a.email{ display:inline;}

#footer #company{ }
#footer #services{ width:260px; }
#footer #blog{ width:250px; }
#footer #community{ width:150px; }
#footer #didyouknow{ width:420px; }
#footer #didyouknow li{ padding-right:40px; }


#footer #partners{ float:right; height:64px; padding:10px 0 0; }
#footer #partners li{ float:left; }
#footer #partners li a{ height:64px; text-indent:-9999px; }
#footer #partners #constantcontact{ width:120px; background:url(../images/partners.gif) 0 0 no-repeat; } 
#footer #partners #freshweb{ width:125px; background:url(../images/partners.gif) -145px 0 no-repeat;} 
#footer #partners #google{ width:110px; background:url(../images/partners.gif) -300px 0 no-repeat;} 
#footer #partners #rackspace{ width:120px; background:url(../images/partners.gif) -430px 0 no-repeat;} 
#footer #partners #expressionengine{ width:70px; background:url(../images/partners.gif) -570px 0 no-repeat;} 


#footer #partners a{ padding:0 10px; }
#footer #copyright{ float:left; clear:left; color:#9fa66f; color:#888; font-size:11px; padding:45px 0 0 0; line-height:18px;}
#footer #copyright a{ color:#9fa66f; text-decoration:none; }