@charset "UTF-8";
body { background-image: url(../img/bg.jpg); margin: 0px; font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; color: #646464; }
.wrap { width: 960px; margin: 0 auto; }
.left { float: left; }
.right { float: left; }

/* Navigation */
#navigation { background-image: url(../img/nav-bg.gif); height: 42px; }
#navigation .wrap { background: url(../img/contact-us.jpg) top right no-repeat; height: 42px; }
#navigation ul { display: block; text-indent: -9999px; list-style-type: none; margin: 0px; padding: 0px; }
#navigation ul li{ display: inline; }
#navigation a { float: left; background-image: url(../img/nav-sprite.jpg); background-position: 0px 0px; display: block; width: 80px; height: 42px; }
#navigation a:hover { background-position: 0px -42px; }
#navigation a:active, #navigation a.active { background-position: 0px -84px; }
#navigation a#webdesign { background-position: -80px -0px; width: 115px; }
#navigation a#webdesign:hover { background-position: -80px -42px; }
#navigation a#webdesign:active, #navigation a#webdesign.active { background-position: -80px -84px; }
#navigation a#weboptimisation { background-position: -195px -0px; width: 157px; }
#navigation a#weboptimisation:hover { background-position: -195px -42px; }
#navigation a#weboptimisation:active, #navigation a#weboptimisation.active { background-position: -195px -84px; }
#navigation a#portfolio { background-position: -352px -0px; width: 142px; }
#navigation a#portfolio:hover { background-position: -352px -42px; }
#navigation a#portfolio:active, #navigation a#portfolio.active { background-position: -352px -84px; }
#navigation a#contact { background-position: -494px -0px; width: 117px; }
#navigation a#contact:hover { background-position: -494px -42px; }
#navigation a#contact:active, #navigation a#contact.active { background-position: -494px -84px; }

/* Header */
#header { background-image: url(../img/bokeh.jpg); height: 287px; background-repeat: repeat-x; }
#header .wrap { width: 342px; height: 152px; background: url(../img/header-sprite.png); padding: 136px 0px 0px 618px; }

/* Content */
#content { background: #FFF url(../img/content-bg.jpg) repeat-x; padding-bottom: 25px; }
#content .wrap { width: 940px; }
* html #content .wrap { width: 980px; padding-left: 40px; }
#content #intro{ position: relative; width: 938px; height: 153px;  margin-bottom: 35px;  }
#content #introbox { background-image: url(../img/intro-box.jpg); width: 872px; height: 109px; padding: 22px 33px; }
#content #introbox h1 { margin: 0px; padding: 0px; font-size: 26px; letter-spacing: -1px; line-height: 1.2em; }
#content #introbox p { color: #868686; font-size: 1.6em; padding: 0px; margin: 4px 0px 0px; font-family: Cambria, serif; line-height: 1.5em; }

#content a.ourpackages{ background-image: url(../img/our-packages.jpg); width: 169px; height: 35px; position: absolute; top: -35px; right: 25px; display: block; text-indent: -9999px; }
#content a.ourpackages:hover{ background-image:url(../img/our-package-hover.jpg); }
#content a.ourpackages:active{ background-image:url(../img/our-package-active.jpg); }
#content a.back{ background-image: url(../img/back.jpg); width: 169px; height: 35px; position: absolute; top: -35px; right: 25px; display: block; text-indent: -9999px; }
#content a.back:hover{ background-image:url(../img/back-hover.jpg); }
#content a.back:active{ background-image:url(../img/back-active.jpg); }
#content #packagesbox{   background-image: url(../img/webdesign/intro-box.jpg); width: 919px; height: 109px; padding: 22px 19px 22px 0px; position: absolute; top: 0px; left: 0px;  }
#content #packagesbox .column{ float: left; width: 229px; height: 109px; border-right: #d7d7d7 1px solid; text-shadow: #fff 1px 1px 1px; position: relative; }
#content #packagesbox .column.end{ border-right: none;  }
#content #packagesbox h4{ font-size:1.5em; text-align: center; padding-bottom: 3px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
#content #packagesbox span{ font-weight: bold; font-size: 1.3em; color: #737373; text-align: center; display: block; padding-top: 3px; }
#content #packagesbox span img{ margin: 0px 0px -3px 2px; }
#content #packagesbox span.price{ color: #0e7ca3; font-size: 3.4em; font-weight: bold; margin-top: 7px; }
.trigger { }
.popup { position: absolute; width: 168px; height: 83px; background-image: url(../img/popup.png); z-index: 50; padding: 20px 15px; text-align: center; color: #FFF; text-shadow: #1695c3 1px 1px 1px; top: -110px; left: 33px;  }
.popup span{ font-size: 15px; font-weight: bold; color: #FFF!important; margin: 3px 0px; }
.popup p{ font-size: 12px; }
.popup a.order{ background-image: url(../img/order.jpg); width: 79px; height: 19px; display: block; text-indent: -9999px; margin: 0 auto; margin-top: -5px; }
.popup a.order:hover{ background-image: url(../img/order-hover.jpg); }
.popup a.order:active{ background-image: url(../img/order-active.jpg); }


#content .left, #content .right{ width: 418px; padding: 0px 30px 20px 20px; }
#content .left p, #content .right p{ font-size: 1.3em; line-height: 1.5em; }
#content h2.sjl{ padding: 8px 0px 20px 45px; background: url(../img/sjl.gif) top left no-repeat; }
#content .right h2.website{ padding: 8px 0px 20px 45px; background: url(../img/websitedesign-icon.gif) top left no-repeat; }
#content a.quote{ background-image: url(../img/quote-sprite.jpg); width: 299px; height: 45px; display: block; text-indent: -9999px; margin-top: 20px; }
#content a.quote:hover{ background-position: 0px -45px; }
#content a.quote:active{ background-position: 0px -90px; }
#content .left ul, #content .left ol, #content .right ul, #content .right ol{ font-size: 1.3em; padding: 0px 0px 15px 25px; margin: 0px; }
#content .left li, #content .right li{ padding: 0px 0px 6px 0px; }
#content ol.numbers{ background: url(../img/ol-bg.gif) 0px 16px no-repeat; list-style-type: none; margin: -6px 0px 10px;  }
#content ol.numbers li{ padding: 16px 0px 0px; margin: 0px; line-height: 1.3em; font-family: Cambria, serif; font-style: italic; font-size: 1.1em; }

/* Form */
#wizard{ background-image: url(../img/form-bg.jpg); width: 262px; height: 245px; float: left; padding: 15px 40px; overflow: hidden; position: relative; }
#wizard h3{ font-size: 2em; padding: 17px 0px 0px 30px; }
#wizard fieldset, #wizard form { border:none; padding: 0px; margin: 0px;}
#wizard label { display:block; text-indent: -9999px; font-size: 1px;}
#wizard .formstyle, #wizard textarea{ width:242px; padding:10px 8px; font-size: 1.2em; border:solid 1px #cacaca; margin-top: 3px; color: #828383; font-family: Cambria, serif;}
#wizard .formstyle{ background-image: url(../img/form-bg.gif); }
#wizard textarea{ background-image: url(../img/textarea-bg.gif); height: 57px; }
#wizard .formstyle:focus, #wizard textarea:focus{ border-color: #adadad; }
#wizard .prev, #wizard .next { margin-top: 6px; width: 103px; height: 34px; display: block; text-indent: -9999px;}
#wizard .prev:hover, #wizard .next:hover { }
#wizard .prev { float:left; background-image: url(../img/webform-back.gif); }
#wizard .next { float:right; background-image: url(../img/webform-proceed.gif); }
#wizard .send{ background-image: url(../img/webform-send.gif); border: none;  margin-top: 6px; width: 103px; height: 34px; float: right; cursor: pointer; }
.error,.callbackerror{ color: #F00; text-indent: 0px!important; font-size: 12px!important; margin-top: 2px;  }
#message{ width: 262px; height: 245px; }
#message p{ font-size: 1.3em; padding: 6px 0px 0px 30px; }
#message img{ margin: 25px 0px 0px 50px }

/* Testimonials */
#testimonials{ background-image: url(../img/testimonials-bg.jpg); width: 494px; height: 225px; float: right; padding: 15px 45px 30px; margin-top: 3px; position: relative; }
#testimonials h3{ font-size: 2em; padding: 17px 0px 0px 30px; }
#testimonials #slider { width: 494px; height: 185px; overflow: hidden; }
#testimonials ul { margin: 0px; padding: 0px; list-style: none; }
#testimonials ul li { width: 494px; height: 165px; float: left; font-size: 20px; font-family: Cambria, serif; line-height: 1.5em; color: #868686; padding-top: 25px; font-style: italic; }
#testimonials ul li span{ display: block; margin-top: 26px; font-size: 14px; font-family: "Lucida Sans Unicode", sans-serif; text-align: right; font-style: normal; }
#testimonialprev a, #testimonialnext a{ background-image: url(../img/testimonial-btn.png); width:45px; height:45px; position:absolute; left:-7px; top:98px; z-index:5000; display:block; text-indent: -9999px; }
#testimonialnext a{ background-position: -45px 0px; left: 547px; }

/* Packages */
#packages{ width: 100%; background-image: url(../img/packages-bg.jpg); background-repeat: repeat-x; height: 310px; margin-bottom: 30px; padding-top: 25px; }
#packages .wrap{ width: 960px; }
#packages .left, #packages .right{ padding: 0px 20px 0px 0px; width: 450px; position: relative; }
#packages .web-design-image { float: left; margin-top: 10px; }
#packages ul { float: right; list-style-type: none; width: 175px; padding: 0px;  margin: 0px 0px 0px; }
#packages ul li{ border-bottom: #CCC 1px dashed; padding: 0px 0px 10px; display: block; margin: 10px 0px 0px; }
#packages h3{ font-size: 2.0em; text-shadow: 0px 2px 2px #FFF; color: #5a5a5a; }
#packages .price{ position: absolute; top: 25px; left: 190px; }


/* Services */
#services{ background-image: url(../img/our-service.jpg); background-position: 0px 17px; background-repeat: no-repeat; width: 938px; height: 295px; padding-top: 64px; margin: 0px 0px 47px; overflow: hidden; position:relative; }
#services .call-us{ position: absolute; top: 32px; right: 0px; font-size: 1.8em; color: #0e7ca3; font-family: "Lucida Sans Unicode", sans-serif; letter-spacing: -1px; }
#services-right{ width: 700px;  height: 295px; float: right; }
#services-right ul{ padding: 0px; margin: 0px; list-style-type: none; }
#services-right ul li{ width: 700px; height: 275px; float: left;  }
#services-right .left{ width: 219px; padding: 45px 0px 0px 5px; }

#services-right .left h3{ padding: 0px; }
#services-right .left span{ font-size: 1.4em; color: #6a6a6a; display: block; padding-bottom: 14px; }
#services-right .right{ background-image: url(../img/services-wd-bg.jpg); background-repeat: no-repeat; background-position: 22px 41px; width: 425px; height: 106px; padding-top: 108px; }
#services-right .right ol{ padding: 6px 0px 0px; margin: 0px; list-style-type: none; }
#services-right .right li{ width: 155px; height: 41px; padding: 0px 0px 0px 57px; font-weight: bold; font-size: 0.9em; text-shadow: #fff 1px 1px 1px; margin: 0px; }
#services-right .right.seo{ background-image: url(../img/services-seo-bg.jpg); }
#services-right .right.ecommerce{ background-image: url(../img/services-ecom-bg.jpg); }
#services-right .left.contact{ width: 265px; margin-left: 40px; padding-top: 40px; }
#services-right .right.contact{ width: 335px; background-image: url(../img/services-contact-bg.jpg); padding-top: 92px; height: 136px; background-position: -30px 10px;  }
#services-right label{ display: block; text-indent: -9999px; font-size: 1px; }
#services-right .formstyle, #services-right textarea{ width:242px; padding:10px 8px; font-size: 1.2em; border:solid 1px #cacaca; margin-top: 3px; color: #828383; font-family: Cambria, serif;}
#services-right .formstyle{ background-image: url(../img/form-bg.gif); }
#services-right textarea{ background-image: url(../img/textarea-bg.gif); height: 57px; }
#services-right .formstyle:focus, #services-right textarea:focus{ border-color: #adadad; }
.button{ background-image: url(../img/services-send.jpg); width: 220px; height: 39px; border: none; margin: 5px 0px 0px 38px; cursor: pointer; }
#services-right #message{ width: 300px; margin: 0 auto; text-align: center; display:block; padding-top: 40px; }

ol#control { margin:0px 0px 0px; padding:0; height:295px; width: 207px; float: left; list-style-type: none;}
ol#control li a { display: block; width: 174px; height:59px; background-image: url(../img/services-sprite.jpg);  text-decoration:none; padding: 15px 0px 0px 33px;  }
ol#control li.current a,ol#control li.current a:hover { cursor: default; background-position: -207px 0px; }
ol#control li a:hover { background-position: -414px 0px; }
ol#control li a:active { background-position: -621px 0px; }
ol#control li#control2 a { background-position: 0px -74px; height: 57px; }
ol#control li#control2.current a,ol#control li#control2.current a:hover { background-position: -207px -74px; }
ol#control li#control2 a:hover { background-position: -414px -74px; }
ol#control li#control2 a:active { background-position: -621px -74px; }
ol#control li#control3 a { background-position: 0px -146px; height: 57px; }
ol#control li#control3.current a,ol#control li#control3.current a:hover { background-position: -207px -146px; }
ol#control li#control3 a:hover { background-position: -414px -146px; }
ol#control li#control3 a:active { background-position: -621px -146px; }
ol#control li#control4 a { background-position: 0px -220px; height: 61px;  }
ol#control li#control4.current a,ol#control li#control4.current a:hover { background-position: -207px -220px; }
ol#control li#control4 a:hover { background-position: -414px -220px; }
ol#control li#control4 a:active { background-position: -621px -220px;  }

/* Footer */
#footer { background: url(../img/footer-bg.jpg) repeat-x; height: 418px; }
#footer .wrap{ background-image: url(../img/footer.jpg); height: 307px; width: 960px; background-repeat: no-repeat; }
#footer a{ color: #eaeaea; text-decoration: none; }
#footer a:hover{ color: #00b2da; }
#footer .column{ width: 225px; float: left; padding: 33px 15px 0px 0px; position: relative; height: 230px;   }
#footer .column h4{ color: #fbfbfb; font-size: 1.4em; text-shadow: #222 1px 0px 1px; }
#footer .column ul{ padding: 0px; margin: 10px 0px; list-style-type: none; color: #eaeaea; font-size: 1.2em; line-height: 1.5em; }
#footer .column ul li{ margin-bottom: 3px; }
#footer .column.news ul li{ margin-bottom: 7px; }
#footer #twitter_div li { font-size: 1.1em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; line-height: 1.6em; display:block; }
#footer #twitter_div li span{ font-family: Arial, Helvetica, sans-serif; display:block; font-size: 0.9em; font-style: normal; margin-top: 15px; font-size: 0.9em; }
#footer .column #faq { width: 170px; height: 130px; position: relative; overflow: hidden; margin: 5px 0 0 15px; text-align: center; }
#footer .column #faq li { width: 170px; height: 130px; position: relative; overflow: hidden; font-size: 1.1em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; line-height: 1.6em;  }
#footer .column #faq p { position: absolute; left: 40px; top: 98px; font-weight: bold; padding: 0px; margin: 0px; font-size: 1.2em; font-weight: normal; color: #fbfbfb; }
#faqnext a, #faqprev a{ background-image: url(../img/faq-left.jpg); width: 21px; height: 21px; position: absolute; top: 169px; left: 23px;  z-index:1000; display: block; text-indent: -9999px; }
#faqnext a{ background-image: url(../img/faq-right.jpg); left: 150px; }
#footer #sitemap{ clear: both; padding-top: 60px; color: #c2c2c2; text-align: center;  font-size: 1.1em; } 
#footer #sitemap ul{ padding: 0px; margin: 0px 0px 15px; list-style-type: none;  }
#footer #sitemap li{ display: inline; margin: 0px 10px; text-transform: uppercase; }
#footer #sitemap a{ color: #c2c2c2; }
#footer #sitemap a:hover{ color: #00b2da; }

/* Globals */
h1,h2,h3,h4{ color: #0e7ca3; font-family: "Lucida Sans Unicode", sans-serif; margin: 0px; padding: 10px 0px;  font-weight: normal; line-height: 1.2em; }
h2{ font-size: 2em; letter-spacing: -1px; }
h3{ font-size: 1.9em; letter-spacing: -1px; }
p{ margin: 0px; padding: 0px 0px 14px; line-height: 1.5em; }
a{ outline: none; color: #646464; }
a:hover{ color: #0e7ca3; }
a:active{ color: #0e7ca3; text-decoration: none; }
a img{ border: none; }

/* Classes */
.clear { clear: both; height: 40px; }
#portfoliolink{ position: absolute; left: -9px; top: 243px; width:96px; height: 73px; z-index: 3; }