@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 { background: url(../images/bg-home.jpg) top no-repeat #000; font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; }

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

#header { height: 100px; background-color: #fafafa; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-box-shadow: 0px 3px 5px; -moz-box-shadow: 0px 3px 5px; box-shadow: 0px 3px 5px; position: relative; }

.logo { display: block; width: 106px; height: 38px; position: absolute; top: 30px; left: 30px; }

.tweet { display: block; width: 213px; height: 48px; position: absolute; top: 25px; left: 180px; background: url(../images/tweet.png) no-repeat top; padding: 0 10px 0 60px; list-style-type: none; }

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

.tweet a { color: #000; }

.menu { width: 184px; position: absolute; top: 77px; right: 90px; }

.menu_head { display: block; width: 108px; height: 23px; cursor: pointer; }

.menu_body { width:184px; border-right:1px solid #55ad0e; border-bottom:1px solid #55ad0e; border-left:1px solid #55ad0e; display: none; }

.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:#45c00d; }

.call { position: absolute; display: block; width: 311px; height: 37px; right: 60px; top: 25px; }

.calltoact { height: 90px; padding: 60px 0 0 40px; position: relative; width: 600px; overflow: hidden; }

.calltoact img { position: absolute; bottom: 0; right: 0; }

#content { margin-top: 20px; background-color: #fafafa; border: 1px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 0px 5px #000000; -moz-box-shadow: 0px 0px 5px #000000; box-shadow: 0px 0px 5px #000000; padding: 35px; position: relative; }

#content h1, .projectheading { text-shadow: 0px 0px 3px #000000; color: #fff; font-size: 3em; font-weight: lighter; display: block; width:420px; height: 67px; background: url(../images/green.png) no-repeat top; position: absolute; top: -10px; left: 40px; line-height: 67px; padding-left: 25px; }

#content p { clear: left; font-size: 1.1em; line-height: 1.8em; margin-top: 20px; }
#content p.intro { display: block; width: 450px; padding: 30px 0 0 50px; font-style: italic; font-size: 1.4em; }

#content a { color: #5bc900; }

#content a:hover { color: #b1e122; }

.pie { width: 272px; height: 81px; float: right; position: absolute; top: 24px; right: 120px; }

.col-1, .col-2, .col-3 { width: 245px; padding: 15px 30px 15px 15px; float: left; margin-top: 30px; }

.col-1 img, .col-2 img, .col-3 img { float: left; padding-right: 5px; }

.col-1 { border-right: solid 1px #e5e5e5; }

.col-2 { border-right: 1px solid #fff; border-left: 1px solid #fff; }

.col-3 { border-left: solid 1px #e5e5e5; }

.clear { clear: both; }

h2 { font-size: 2em; float: left; margin-bottom: 20px; }

.newsheading { text-shadow: 0px 0px 3px #000000; color: #fff; font-size: 3em; font-weight: lighter; display: block; width:260px; height: 67px; background: url(../images/news.png) no-repeat top; position: absolute; top: -55px; left: 40px; padding-left: 25px; line-height: 67px; }

.news { position: relative; }

.news ul { width: 960px; height: 70px; line-height: 70px; }

.news li { display: inline; float: left; width: 25%; text-align: center; }

.news li a { color: #3e3e3e;  text-decoration: none; }

.news li a:hover { color: #0099FF; }

#footer { background-color: #fafafa; border: 1px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 0px 5px #000000; -moz-box-shadow: 0px 0px 5px #000000; box-shadow: 0px 0px 5px #000000; padding: 35px; position: relative; margin-bottom: 20px; }

#footernav { color: #333; padding: 0 20px; }

#footernav ul { float: right; width: 200px; list-style-type: none; padding-bottom: 20px; text-align: right; }

#footernav li a { color: #333; text-decoration: none; list-style-type: none; font-size: 1em; line-height: 1.8em;}

#footernav li a:hover { color: #0099FF; }

#footernav p { float: left; font-size: 1em; }

#footer h1 { text-shadow: 0px 0px 3px #000000; color: #fff; font-size: 3em; font-weight: lighter; display: block; width:420px; height: 67px; background: url(../images/green.png) no-repeat top; position: absolute; top: -10px; left: 40px; line-height: 67px; padding-left: 25px; }

.contactus { width: 960px; height: 100px; display: none; }

/* Easy Slider */

#slider { }

#slider ul, #slider li { margin:0; padding:0; list-style:none; width:890px; height:241px; overflow:hidden; }

#slider h3 { font-size: 2.3em; padding: 15px 0; font-weight: lighter; }

#slider p { font-size: 1.1em; }

#slider .text { float: left; width: 445px; }

#slider .image { float: left; width: 445px; background-color: #999999; }

#slider li { }

#prevBtn, #nextBtn { display:block; width:30px; height:77px; position:absolute; left:-30px; top:130px; }

#nextBtn { left:930px; }

#prevBtn a, #nextBtn a { display:block; width:54px; height:47px; background:url(../images/btn_prev.png) no-repeat 0 0; text-indent: -9999px; outline: none; }

#nextBtn a { background:url(../images/btn_next.png) no-repeat 0 0; text-indent: -9999px; outline: none; }

#callto .heading { font-size: 2.5em; color: #fff; text-shadow: 1px 1px 1px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); }

#callto ul, #callto li { margin:0; padding:0; list-style:none; width:890px; height:241px; overflow:hidden; }

#callto li { font-size: 1.4em; color: #FFF; text-shadow: 1px 1px 1px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); }

.calltoact #prevBtn, .calltoact #nextBtn { display:none; }

.calltoact #nextBtn { left:930px; display: none; }

.calltoact #prevBtn a, #nextBtn a { display:block; width:54px; height:47px; background:url(../images/btn_prev.png) no-repeat 0 0; text-indent: -9999px; outline: none; }

#nextBtn a { background:url(../images/btn_next.png) no-repeat 0 0; text-indent: -9999px; outline: none; }




/* // Easy Slider */

/* // Contact */

.container { width:960px; position:relative; z-index:12; }

/* 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:relative; padding-top: 20px; z-index:1; }

/* Hides the whole contact form until needed */	
#contactForm { height: 160px; 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:#0099FF; }

/* Some styling for the contact button */
#contactFormContainer .contact { height:30px; width:135px; background:url(../images/button.png); position:absolute; right:0; top:-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:220px; background:#f3f3f3 url(../images/contact_input.png) repeat-x top; color:#000; border:1px solid #fff; height:15px; line-height:14px; font-size:11px; padding:2px 2px 0px; }

#contactForm textarea:focus, #contactForm input:focus { border:1px solid #000; }

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

#contactForm textarea { height:70px; }

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

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

#contactForm label { padding-left:4px; font-weight:bold; font-size: 1.2em; text-shadow: 1px 1px 1px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); }

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

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

#contactForm .email { font-size: 1.4em; line-height: 3em; text-shadow: 1px 1px 1px #000000; filter: dropshadow(color=#000000, offx=1, offy=1); margin-left: 40px; }

#mail_response { margin-left: 40px; }

#mail_response p { font-size: 2em; }

/*tabs*/

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

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

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

#seo { background: url(../images/seo.jpg) no-repeat; width: 234px; height: 138px; float: left; position: relative; padding-right: 8px; }

#best { background: url(../images/best-web.jpg) no-repeat; width: 234px; 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: 100px; left: 10px; }