@charset "utf-8";
/* CSS Document */
/*Reset*/
p, h1, h2, h3, h4, h5, h6, img, a, ul, li, span, html, body{ margin:0; padding:0; border:none; text-decoration:none; outline:none; }

/*Main styles*/
html{ background-image:url(../_img/css/html-bg.png); background-repeat:repeat-x;  background-color:#4f4f4f; background-position:0 341px; font-family:Helvetica, Arial, sans-serif; position:relative; }
.clear{ clear:both;}
#content-wrap{ width:950px; margin:0 auto; padding-top:20px;}
#content-wrap h2{ font-size:29px; color:#fff; margin:25px 0 0 0;}
#content-wrap h2.none{ margin:0;}
#content-wrap p{ font-size:14px; margin:15px 0 0 0; color:#d2d2d2; font-family:Arial, Helvetica, sans-serif; line-height:19px;}
#content-wrap p::-moz-selection{background:#282828; color:#FFF;}
form input{  background:none; border:none; color:#4a4a4a;}
.input-box{ background-image:url(../_img/css/input.png); background-repeat:no-repeat; width:162px; height:16px; padding:3px;}
form textarea{ background:none; border:none;}
.textarea-box{ background-image:url(../_img/css/textarea.png); background-repeat:no-repeat; width:461px; height:100px; padding:3px; }
#content-wrap a{ font-size:14px; color:#fff; font-family:Arial, Helvetica, sans-serif; line-height:19px; }
#content-wrap ul li ul{ margin:10px 0 0 30px;}
a.css-award{ position: absolute; display:block; height:115px; width:115px; background:url(../_img/general/css-award.png) no-repeat;text-decoration:none; right:0; top:0;}
a.css-award span{ display:none;}
h3{ font-size:20px; color:#FFF; margin:12px 0 0 0;}
a.rate-card{ position:absolute; top:225px; right:0; width:90px; height:211px; background-image:url(../_img/general/rate-card.png);}
a.rate-card:hover{ background-position:bottom;}

/*Main styles - header*/
#header{ height:341px; margin:0; border-bottom:solid 1px #4d4d4d;}
.headerpink{ background-image:url(../_img/css/pink.jpg); background-repeat:repeat-x; }
.headerblue{ background-image:url(../_img/css/blue.jpg); background-repeat:repeat-x; }
.headergreen{ background-image:url(../_img/css/green.jpg); background-repeat:repeat-x; }
.headerorange{ background-image:url(../_img/css/orange.jpg); background-repeat:repeat-x; }
.headeryellow{ background-image:url(../_img/css/yellow.jpg); background-repeat:repeat-x; }
.headerpurple{ background-image:url(../_img/css/purple.jpg); background-repeat:repeat-x; }
.headerturquoise{ background-image:url(../_img/css/turquoise.jpg); background-repeat:repeat-x; }


#header-wrap{ width:950px; margin:0 auto; position:relative; }
#header-wrap .logo{ margin:40px 0 0 0; width:309px; height:81px; float:left;}
#header-wrap .header-paragraph{ height:94px; padding:54px 0 0 0;}
#header-wrap .header-paragraph h1{ background-image:url(../_img/css/bg-paragraph.png); font-family:Georgia, "Times New Roman", Times, serif; font-size:33px; line-height:45px; color:#f3f3f3; font-weight:100; padding-left:5px;}
#header-wrap .header-paragraph h1.small{ font-size:32px;}
#header-wrap .header-paragraph h1 span.green{ color:#bed630;}
#header-wrap .header-paragraph h1 span.blue{ color:#00aeef;}

/*Main styles - navigation*/
#header-wrap .navigation{ position:absolute; right:0;}
#header-wrap .navigation ul{ width:635px; list-style:none;}
#header-wrap .navigation ul li{ }
#header-wrap .navigation ul li a{ background-image:url(../_img/nav/nav-bg.png); color:#f3f3f3; float:left; font-size:14px; padding:47px 7px 10px 7px;}
#header-wrap .navigation ul li a:hover{ background:none; background-image:url(../_img/nav/hover-state.png);}
#header-wrap .navigation ul li a.active{ background:none; background-image:url(../_img/nav/active-state.png); }

/*Main styles - footer*/
#footer{  background-color:#282828; overflow:hidden; margin:40px 0 0 0;}
#footer-wrap{ width:950px; margin:0 auto; }
#footer-wrap p{ color:#ccc; font-size:14px; font-weight:100;}
#footer-wrap p a{ color:#bed630;}
#footer-wrap .downloads{ width:300px; height:180px; float:left; border-right:solid 1px #3f3f3f; margin:17px 0 0 0; padding-right:6px;}
#footer-wrap .downloads h3{ color:#bed630; font-size:18px; font-weight:bold; margin:0 0 14px 0;}
#footer-wrap .blog{ width:300px; height:180px; float:left; border-right:solid 1px #3f3f3f; margin:17px 0 0 17px; padding-right:6px;}
#footer-wrap .blog h3{ color:#fbb03f; font-size:18px; font-weight:bold; margin:0 0 14px 0;}
#footer-wrap .blog .excerpt{ height:80px;}
#footer-wrap .blog a.rss{ background-image:url(../_img/footer/rss-icon.png); background-repeat:no-repeat; padding:5px 0 10px 34px; font-size:14px; color:#ccc; font-family:Arial, Helvetica, sans-serif; line-height:19px;}
#footer-wrap .follow{ width:300px; height:180px; float:right; margin:17px 0 0 17px;}
#footer-wrap .follow h3{ color:#00aeef; font-size:18px; font-weight:bold; margin:0 0 14px 0;}
#footer-wrap .follow a.twitter{ float:left; background-image:url(../_img/footer/twitter-icon.png); height:60px; width:48px; margin-right:12px;}
#footer-wrap .follow a.facebook{ float:left;  background-image:url(../_img/footer/facebook-icon.png); height:60px; width:49px; margin-right:12px;}
#footer-wrap .follow a.linked{ float:left;  background-image:url(../_img/footer/linkedIn-icon.png); height:60px; width:49px; margin-right:12px;}
#footer-wrap .follow a:hover{ background-position:bottom;}

#footer-wrap .downloads a{ font-size:14px; font-weight:100; color:#CCC;}
/*Main styles - lower-footer*/
#lower-footer{ width:950px; margin:23px auto 0 auto; font-size:11px; color:#797979;}
#lower-footer .contact{ float:left; width:260px;}
#lower-footer .footer-nav{ float:right; width:690px;}
#lower-footer ul{ list-style:none;}
#lower-footer ul li{ float:left; border-right:solid 1px #535353; padding:3px 7px 3px 0 ; margin-right:7px; }
#lower-footer ul li.last{ border:none; padding:3px 0; margin:0;}
#lower-footer ul li a{ color:#797979;}
#lower-footer ul li a:hover{ color:#555555;}
#lower-footer .footer-nav li{ float:right;}
#lower-footer .footer-nav p{ font-size:11px; text-align:right; color:#666; margin-bottom:5px;}

/*Home page - portfolio*/
#content-wrap .portfolio-reel{ width:950px; margin:20px 0 0 0; padding-bottom:20px; border-bottom:solid 1px #cdcdcd; }
#content-wrap .portfolio-reel h2{ color:#FFF; margin:0 0 0 466px; }

/*Home page - What we do columns*/
#content-wrap .about-columns{ width:950px; height:180px; margin:40px 0 0 0;}
#content-wrap .about-columns .web-design{ width:300px; float:left; border-right:dotted 1px #2c2c2c; margin:0; padding-right:6px;}
#content-wrap .about-columns .web-development{ width:300px; float:left; border-right:dotted 1px #2c2c2c; margin:0 0 0 17px; padding-right:6px;}
#content-wrap .about-columns .graphic-design{ width:300px; float:left; margin:0 0 0 17px}
#content-wrap .about-columns p{ margin:18px 0 0 0; font-size:15px; }

/*Content page*/
#content-wrap .top-paragraph{ padding-bottom:20px; margin:10px 0; border-bottom:solid 1px #cdcdcd;}
#content-wrap .top-paragraph p{ font-family:Helvetica, sans-serif;}
#content-wrap .top-paragraph .address{ width:300px; float:left;}
#content-wrap .top-paragraph .number{ width:300px; margin:0 0 0 30px; float:left;}
#content-wrap ul{ list-style:inside;}
#content-wrap ul li{ font-size:14px; margin:7px 0 0 0; color:#ffffff; font-family:Arial, Helvetica, sans-serif; line-height:19px;  }

/*Content page - large column on left/ small column on right*/
#content-wrap .left-column-large{ float:left; width:652px; border-right:solid 1px #cdcdcd; padding-right:15px;}
#content-wrap .right-column-small{ float:right; width:266px; padding-left:15px; color:#4a4a4; line-height:normal; border-left:solid 1px #cdcdcd; position:relative; left:-1px;}
#content-wrap .left-column-large h3.position{ background-color:#282828; font-size:14px; padding:3px; float:left; color:#fff;}
#content-wrap .left-column-large h3.question{ background-color:#282828; font-size:14px; padding:3px; float:left; color:#bed630; margin:20px 0 0 0; }
#content-wrap .left-column-large .content-box{ background-image:url(../_img/content/content-box-light.png); width:652px; height:178px; margin:10px 0 0 0; padding-top:1px;}
#content-wrap .left-column-large .content-box h3{ font-size:29px; color:#FFF; padding-left:43px; background-repeat:no-repeat; margin:12px 0 0 12px;}
#content-wrap .left-column-large .content-box h3.cms{ background-image:url(../_img/content/icon-cms.png); }
#content-wrap .left-column-large .content-box h3.seo{ background-image:url(../_img/content/icon-seo.png);}
#content-wrap .left-column-large .content-box h3.e-commerce{ background-image:url(../_img/content/icon-e-commerce.png);}
#content-wrap .left-column-large .content-box h3.blog{ background-image:url(../_img/content/icon-blog.png); }
#content-wrap .left-column-large .content-box h3.social{ background-image:url(../_img/content/icon-social.png);}
#content-wrap .left-column-large .content-box h3.email{ background-image:url(../_img/content/icon-mail.png); }
#content-wrap .left-column-large .content-box h3.branding{ background-image:url(../_img/content/icon-branding.png);}
#content-wrap .left-column-large .content-box h3.logo{ background-image:url(../_img/content/icon-logo.png);}
#content-wrap .left-column-large .content-box h3.stationery{ background-image:url(../_img/content/icon-stationery.png); }
#content-wrap .left-column-large .content-box h3.leaflets{ background-image:url(../_img/content/icon-leaflets.png);}
#content-wrap .left-column-large .content-box h3.hosting{ background-image:url(../_img/content/icon-hosting.png); }
#content-wrap .left-column-large .content-box h3.brochures{ background-image:url(../_img/content/icon-brochures.png); }
#content-wrap .left-column-large .content-box h3.concepts{ background-image:url(../_img/content/icon-concepts.png); }
#content-wrap .left-column-large .content-box h3.revisions{ background-image:url(../_img/content/icon-revisions.png); }
#content-wrap .left-column-large .content-box h3.final{ background-image:url(../_img/content/icon-final.png); }
#content-wrap .left-column-large .content-box p{ color:#fff; margin:15px 15px 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:normal;}
#content-wrap .left-column-large a:hover{ color:#bed630;}

#content-wrap .left-column-large .content-box-large{ background-image:url(../_img/content/content-box-large.png); width:652px; height:318px; margin:10px 0 0 0; padding-top:1px;}
#content-wrap .left-column-large .content-box-large p{ color:#fff; margin:15px 15px 0 20px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:normal; }
#content-wrap .left-column-large .content-box-large h2{ color:#FFF; background-repeat:no-repeat; margin:12px 0 10px 20px;}
#content-wrap .left-column-large form{ margin:10px 35px 0 20px; font-size:14px; color:#fff;}
#content-wrap .left-column-large form label{ width:125px; float:left; margin:3px 0 0 0;}
#content-wrap .left-column-large form input, #content-wrap .left-column-large form textarea { float:left; margin:0 0 5px 0;}
#content-wrap .left-column-large form input.submit{ float:right; width:66px; height:30px; padding:0; background:none; }
#content-wrap .left-column-large form.pay-form{ background:url(../_img/general/large-form-box.png) no-repeat; margin:10px 0; width:612px; height:552px; padding:20px;}
#content-wrap .right-column-small .content-box-top{ background-image:url(../_img/content/content-box-small-top.png); width:266px; height:3px; margin:10px 0 0 0;}
#content-wrap .right-column-small .content-box-middle{ background-image:url(../_img/content/content-box-small-middle.png); background-repeat:repeat; width:266px;  margin:0px 0 0 0; padding:1px 0 10px 0; border:none;}
#content-wrap .right-column-small .content-box-bottom{ background-image:url(../_img/content/content-box-small-bottom.png); width:266px; height:3px; margin:0;}

/*Right column - twitter feed*/
#content-wrap .right-column-small .content-box-middle h2.twitter{ background-image:url(../_img/content/icon-twitter.png);}
#content-wrap .right-column-small .content-box-middle .twitter-container{ margin:10px 12px;}
#content-wrap .right-column-small .content-box-middle .twitter-container .twtr-hd{ display:none;}
#content-wrap .right-column-small .content-box-middle .twitter-container .twtr-ft{ display:none;}

#content-wrap .right-column-small h2{  color:#FFF; padding-left:40px; background-repeat:no-repeat; margin:12px 0 0 12px;}
#content-wrap .right-column-small .content-box-middle h2.phone{ background-image:url(../_img/content/icon-phone.png);}
#content-wrap .right-column-small .content-box-middle h2.rss{ background-image:url(../_img/content/icon-rss.png);}
#content-wrap .right-column-small p{ color:#fff; margin:15px 15px 0 12px; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:normal;}
#content-wrap .right-column-small a.more{ margin:10px 12px;}
#content-wrap .right-column-small .content-box-middle img{ margin:10px 0 0 12px;}

#content-wrap .right-column-small .content-box-middle form{ margin:20px 12px 0 12px;}
#content-wrap .right-column-small .content-box-middle form label{ float:left; font-size:14px; color:#fff; margin:3px 0 0 0;}
#content-wrap .right-column-small .content-box-middle form input{ float:right; margin-bottom:5px; border:none;}
#content-wrap .right-column-small .content-box-middle form input.submit{ width:66px; height:30px; padding:0; background:none; }
 
/*Portfolio page*/
#content-wrap  h2.portfolio{ margin:10px 0 20px 0;}
#content-wrap .project-teaser{ width:950px; height:210px; border-bottom:solid 1px #cdcdcd; padding-bottom:10px; margin-top:10px;}
#content-wrap .project-teaser a.image{ float:left; width:437px; height:200px; border:solid 3px #cacaca; }
#content-wrap .project-teaser a.image:hover{ background-position:bottom; }
#content-wrap .project-teaser .project-text{ border-left:solid 1px #cdcdcd; vertical-align:middle; padding:0px 0 0 25px; margin-left:25px; float:right; width:455px; height:206px;}
#content-wrap .project-teaser .project-text h3{ font-size:21px; font-weight:bold; color:#ffffff;}
#content-wrap .project-teaser .project-text h4{ color:#bed630; font-size:14px; width:auto; margin:3px 0; float:left;}
#content-wrap .project-teaser .project-text p{ font-size:12px; line-height:normal; overflow:hidden; margin-bottom:6px;}
#content-wrap a.more{ background-image:url(../_img/general/more-btn.png); padding:5px 0 5px 30px; background-repeat:no-repeat; margin:0; font-size:14px; float:left;}
#content-wrap img.main-image{ margin:10px 0 10px 0; border-bottom:solid 1px #cdcdcd; padding-bottom:10px;}

/*Content page - about us images*/
#content-wrap .right-column-small .photos-all{ background-image:url(../_img/general/photo-all.png); width:255px; height:778px; background-repeat:no-repeat;}
#content-wrap .right-column-small .photos-all a{ font-size:21px; color:#FFF; font-weight:bold;}
#content-wrap .right-column-small .photos-all a.julian{ padding:18px 0 0 22px; width:207px; height:242px; margin:9px 0 0 18px; float:left;}
#content-wrap .right-column-small .photos-all a.simon{ padding:50px 0 0 140px; width:86px; height:204px; margin:2px 0 0 20px; float:left;}
#content-wrap .right-column-small .photos-all a.sarah{ padding:130px 0 0 10px; width:214px; height:135px; margin:0px 0 0 10px; float:left;}

#content-wrap .right-column-small .photos-julian{ background-image:url(../_img/general/photo-julian.png); width:255px; height:1040px;}
#content-wrap .right-column-small .photos-antony{ background-image:url(../_img/general/photo-antony.png); width:255px; height:1040px;}
#content-wrap .right-column-small .photos-simon{ background-image:url(../_img/general/photo-simon.png); width:255px; height:1040px;}
#content-wrap .right-column-small .photos-sarah{ background-image:url(../_img/general/photo-sarah.png); width:255px; height:1040px;}

/*Content page - meet me box*/
#content-wrap .left-column-large .meet-me-box{ width:620px; background-color:#555555; margin:20px 0 0 0; padding:18px 16px; height:270px;}
#content-wrap .left-column-large .meet-me-box h2{ float:left; color:#bed630;}
#content-wrap .left-column-large .meet-me-box h3{ float:left; font-size:14px; color:#FFF; font-weight:100; margin:14px 0 0 5px;}
#content-wrap .left-column-large .meet-me-box .word-cloud{ margin:10px 0 0 0; text-transform:lowercase; font-family:Arial, Helvetica, sans-serif; border-top:solid 1px #8f8f8f; padding-top:10px;}
.line2, .line3, .line4,{ position:relative; top:-12px;}