@charset "UTF-8";

/* CSS Document */

/* CSS Reset and Standard Rules */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

img { border: none; }

/* Body */

body { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: url(../images/bg.jpg) repeat-x top; }

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

#header { height: 127px; position: relative; }

#logo { width: 448px; height: 52px; position: absolute; top: 40px; left: 30px; }

.tweet { width: 268px; height: 38px; position: absolute; top: 50px; right: 30px; padding: 10px 10px 0 60px; background: url(../images/twitter.png) no-repeat; }

.tweet li { list-style-type: none; }

.tweet li a { color: #666; }

ul#nav { height: 40px; background: url(../images/nav-bg.jpg) repeat-x; border: 1px solid #000; padding: 0 10px; }

#nav li { display: inline; }

#nav li a { display: block; float: left; color: #FFF; line-height: 40px; padding: 0 20px; font-size: 1.1em; text-decoration: none; }

#nav li a.news { float: right; }

#nav li a:hover { color: #8acb3e; }

#callto { height: 292px; position: relative; }

#comp { width: 389px; height: 252px; background: url(../images/computer.png) no-repeat; position: absolute; bottom: 0; left: 20px; padding: 15px 0 0 15px; }

#slider, #slider li { height:145px; width:232px; overflow:hidden; }

#slider { position: relative; }

.glare { width: 61px; height: 145px; background: url(../images/glare.png) no-repeat; position: absolute; top: 0; right: 0; }

#sliderquote { width: 300px; height: 170px; position: absolute; top: 37px; right: 212px; overflow: hidden; }

#sliderquote li { list-style-type: none; overflow: hidden; width: 300px; height: 170px; text-align: center; font: italic 1.5em/1.8em Georgia, "Times New Roman", Times, serif; background: url(../images/quotes.png) no-repeat; }

#sliderquote p { padding-top: 30px; display: block; width: 200px; margin: 0 auto; }

.organic { width: 339px; height: 177px; position: absolute; bottom: -29px; right: 39px; z-index: 10; }

.man { width: 154px; height: 553px; position: absolute; top: -65px; right: 100px; background: url(../images/man.png) no-repeat; }

.menu { width: 212px; margin-left: 45px; float: left; position: relative; }

.menu_head { display: block; width: 212px; height: 34px; cursor: pointer; }

.menu_body { width:210px; border-right:1px solid #96be28; border-bottom:1px solid #96be28; border-left:1px solid #96be28; display: none; position: absolute; z-index: 10; }

.menu_body li { background:#abe32c; list-style-type: none; }

.menu_body li a { color:#FFFFFF; text-decoration:none; padding:10px; display:block; font: Arial, Helvetica, sans-serif; font-size: 1.1em; cursor: pointer; }

.menu_body li a:hover { color: #ebf0bf; }

.menu_body li.alt { background:#96be28; }

#rssbg { width:338px; height:34px; background: url(../images/rss.png) no-repeat; float: left; margin-left: 60px; padding-left: 60px; color: #FFF; font-size: 1.4em; line-height: 34px; text-shadow: 0px 0px 3px #000000; }

#rssbg a { color: #fff; text-decoration: none; }

#rssbg a:hover { color: #000; }

/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
#contactFormContainer { position:absolute; left:368px; z-index:1; }

/* Hides the whole contact form until needed */	
#contactForm { height:100px; width:558px; background-color:#202020; border:1px solid #929191; padding:7px 12px; color:#fff; display:none; }

/* Hides the confirmation message until needed */	
#messageSent { display:none; }

/* This hides the form validation alert messages until needed */
#contactForm span { display:none; font-size:9px; line-height:10px; padding-left:6px; color:#97be29; }

/* Some styling for the contact button */
#contactFormContainer .contact { height:47px; width:211px; background:url(../images/contact_me.png); position:absolute; left:368px; bottom:-44px; cursor:pointer; }

/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup { display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background:#000; z-index:11; }

/* Form styling from here on out. There is nothing in here that you HAVE to use to get this to work */	
#contactForm textarea, #contactForm input { width:180px; background:#6d6d6d url(../images/contact_input.png) repeat-x top; color:#fff; border:1px solid #8a8a8a; height:15px; line-height:14px; font-size:11px; padding:2px 2px 0px; }

#contactForm input { background-position:0px -20px; }

#contactForm textarea { height:50px; font-family:Verdana, Geneva, sans-serif; }

#contactForm .submit { border:1px solid #aba8a8; background:#e5e5e5; text-transform:uppercase; color:#4d4d4d; font-weight:bold; padding:7px 16px 7px 14px; height:37px; width:124px; cursor:pointer; float:left; margin-top:30px; }

#contactForm .submit:active { background:#cacaca; }

#contactForm label { padding-left:4px; font-weight:bold; }

#contactForm p { padding-bottom:8px; float: left; }

.fll { float: left; }

#contactForm .input_boxes { float:left; width:204px; }

#content { clear: left; }

h1 { line-height: 3em; font-size: 2em; padding-top: 10px; }

#content p { font-size: 1.1em; display: block; width: 400px; line-height: 1.8em; padding-bottom: 15px; float: left; clear: left; }

.organicimg { padding-left: 25px; }

.organiclisting { float: right; }

.flr { float: right; }

#content h2 { margin: 25px 0 0 0; text-indent: -9999px; display: block; width: 400px; height: 30px; }

#content h2.seo { background: url(../images/seo-heading.png) no-repeat; }

#content h2.portfolio { background: url(../images/portfolio-heading.png) no-repeat; }

#content a { color: #999; }
#content a:hover { color: #acd037; }

.segment img { line-height: 1.8em; float: left; }

.segment { width: 480px; padding: 15px; margin: 10px 0; float: left; position: relative; }

.segment h2 { display: block; width: 220px; height: 37px; background: url(../images/seg-title.png) no-repeat; margin: -20px 0 0 20px; color: #FFF; font-size: 1.4em; line-height: 37px; text-shadow: 0px 0px 3px #000000; float: left; padding-left: 25px; }

.segment p { margin: 15px 0 0 45px; font-size: 1.1em; line-height: 1.8em; padding: 0 0 0 0; width: 300px; float: left; }

#keywords img, #development img, #search img, #report img { line-height: 1.8em; float: left; }

#keywords, #development, #search, #report { width: 480px; padding: 15px; margin: 10px 0; float: left; position: relative; }

#keywords h3, #development h3, #search h3, #report h3 { display: block; width: 220px; height: 37px; background: url(../images/seg-title.png) no-repeat; margin: -20px 0 0 20px; color: #FFF; font-size: 1.4em; line-height: 37px; text-shadow: 0px 0px 3px #000000; float: left; padding-left: 25px; }

#keywords p, #development p, #search p, #report p { margin: 15px 0 0 45px; font-size: 1.1em; line-height: 1.8em; padding: 0 0 0 0; width: 300px; float: left; }

.grey { background-color: #f2f2f2; }

.green { color: #e2e8ba; }

.icons { background-color: #e4e4e4; height: 95px; width: 95px; padding: 15px 0 0 15px; float: left; }

.more, .close, .more2, .close2, .more3, .close3, .more4, .close4 { display: block; cursor: pointer; float: left; margin-right: 5px; }

#boxslide p, #boxslide2 p, #boxslide3 p, #boxslide4 p { width: 100%; padding: 0; margin: 15px 0 0 0; }

#boxslide, #boxslide2, #boxslide3, #boxslide4 { border-bottom:1px solid #f2f2f2; display: none; clear: left; }

#theportfolio { width: 430px; height: 600px; float: right; }

#footer { background-color: #3f3e3e; clear: both; height: 160px; margin-top: 30px; }

#inner { width: 800px; margin: 0 auto; position: relative; padding-top: 40px; }

#inner ul { width: 33%; float: left; }

#inner li { list-style-type: none; color: #fff; line-height: 1.8em; font-size: 1em; }

#inner a { color: #fff; }

#inner a:hover { color:#acd037; }

.facebook { width: 81px; height: 53px; position: absolute; top: -25px; left: -30px; }

.twitter { width: 77px; height: 58px; position: absolute; top: -20px; left: 43px; }

.linkedin { width: 76px; height: 56px; position: absolute; top: -20px; left: 115px; }

.clear { clear: both; }

.boxgrid { width: 325px; height: 110px; margin:10px; float:left; background:#161613; border: solid 15px #f2f2f2; overflow: hidden; position: relative; }

h3 { color: #fff; font-size: 1.4em; line-height: 40px; padding-left: 20px; }

.boxgrid p { color: #fff; padding-left: 20px; font-size:1.1em; }

.boxgrid img { position: absolute; top: 0; left: 0; border: 0; }

.boxcaption { float: left; position: absolute; top: 70px; background: #000; height: 111px; width: 100%; opacity: .8; 	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

.captionfull .boxcaption { top: 260; left: 0; }

.caption .boxcaption { top: 220; left: 0; }

/*tabs*/

#tabs { width: 960px; height: 160px; margin: 0 auto; padding: 20px 0; }

#web { background: url(../images/web-design.jpg) no-repeat; width: 219px; height: 138px; float: left; position: relative; padding-right: 5px; }

#brand { background: url(../images/branding.jpg) no-repeat; width: 219px; height: 138px; float: left; position: relative; padding-right: 5px; }

#better { background: url(../images/better-web.jpg) no-repeat; width: 219px; height: 138px; float: left; position: relative; padding-right: 5px; }

#best { background: url(../images/best-website.jpg) no-repeat; width: 219px; height: 138px; float: left; position: relative; }

.tabnav { height: 26px; width: 120px; display: block; background: url(../images/more-button.jpg) no-repeat; outline: none; position: absolute; top: 105px; left: 90px; }