@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:#b8c42a; color:#555614; }
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; }

/* 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:15px 0 0 0; }
#header #view li{ float:left; margin:8px 15px 0 0; color:#666;}
#header #view li a{ color:#EEE; }

#header #menu{ float:right; clear:right; list-style:none; font-size:18px; padding:30px 0 0 0;}
#header #menu li{ float:left; margin:11px 35px 0 0; color:#666;}
#header #menu #last{ margin:11px 15px 0 0; }
#header #menu li a{ color:#DDD; text-decoration:none; }

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

/* 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:580px; padding:0 0 30px 25px; }
#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:#718126; border-bottom: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; border:2px solid #CCC; 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:#efee9c; 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:#efee9c; font-weight:bold; border:1px solid #666; }

/* 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 #ourclients a{ width:314px; height:113px; display:block; background:url(../images/sidebar/clients.gif) no-repeat; text-indent:-9999px; margin-bottom:15px; }
#sidebar #button #ourprocess a{ width:314px; height:113px; display:block; background:url(../images/sidebar/process.gif) no-repeat; text-indent:-9999px; margin-bottom:15px;}
#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; margin-bottom:15px;}
#sidebar #button #shopify-pricing a{ width:314px; height:113px; display:block; background:url(../images/sidebar/shopify-pricing.gif) no-repeat; text-indent:-9999px; }

/* Sidebar - Our Team */
#sidebar dt{ padding-left:100px; padding-top:5px; height:130px; font-weight:bold;}
#sidebar #greg{ background:url(../images/people/greg.gif) no-repeat; }
#sidebar #brad{ background:url(../images/people/brad.gif) no-repeat; }
#sidebar #matt{ background:url(../images/people/matt.gif) no-repeat; }
#sidebar #luke{ background:url(../images/people/luke.gif) no-repeat; }
#sidebar #buddy{ background:url(../images/people/buddy.gif) no-repeat; }
#sidebar #charlie{ background:url(../images/people/charlie.gif) no-repeat; }
#sidebar dd{ padding-left:100px; }
#sidebar dl dd.role{ margin-top:-105px; font-style:italic;}
#sidebar dl dd.phone{ margin-bottom:25px; }


/* Clients */
#clients{ height:1060px; padding-left: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; height:291px; }
#footer #wrap{ width:980px; margin:auto; }

#footer .column{ float:left; height:165px; padding:30px 30px 0 0; }
#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 #fact{ width:380px; margin-right:30px; font-size:13px; line-height:24px; color:#888;}

#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; }