@import "reset.css";

/*hacks*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}


html {background:transparent url(../images/html_bg.png) 0 0 repeat-x;}

body{font-family:Arial,Helvetica,Verdana,sans-serif;background:#110e0a; color:#333;background:transparent url(../images/header.jpg) top center no-repeat;	}
.clear {clear:both;}
/* like fonts N stuff
------------------------------------------------------------------------------------*/
h1,
h2,
h3,
h4 { /*font-family: 'Goudy Bookletter 1911', arial, serif; font-family: 'Vollkorn', arial, serif;*/ color: #727E63; }

.home h1#logo {display:block;width:1000px;height:427px;text-indent:-10000px;}
h1#logo {display:block;width:1000px;height:200px;text-indent:-10000px;}

h2 {font-size:2.5em; margin-bottom: 20px;}
h2#strap {}
h3 {margin:0.5em 0; font-size:1.5em;}
h4 {margin:0.75em 0; font-size:1.25em;font-weight:bold;}
h5 {margin:0.75em 0; font-size:1em;font-weight:bold;}
strong {font-weight:bold;}

p {margin:0.5em 0; font-size: 14px; line-height: 24px; }
ul {margin:0 0 2em 0; font-size: 14px; }
ul li {margin:0.5em;}

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

hr {margin: 10px 0; height: 45px; border:none; background:transparent url(../images/hr.png) top center no-repeat;}

.imgCentre {display:block; margin-left:auto; margin-right:auto;}
.Centre {margin-left:auto; margin-right:auto;}
.hide {display: none;}
.smalltext  {font-size: 10px;}

.note { background:transparent url(../images/burst-250.png) -2px 5px no-repeat; text-align:left; color:#fff; padding:20px 5px 0 110px; height: 90px; margin-bottom: 10px;}
.note p { font-size: 1.15em; line-height: 1.5em; font-weight: bold;}
/* style the page web monkey
------------------------------------------------------------------------------------*/

#container {margin:0 auto; width:1000px; position:relative;}/* make into a wider site on the next style up grade - make it liquid!*/

#header {margin:0;}

#maincontent {padding:0 30px;}


/*.portfolio {background:transparent url(../images/portfolio_bg_fade.jpg) 0 0 repeat-y;}
.portfoliotitle {display:block; height:74px; width:100%; text-indent:-10000em; background:transparent url(../images/portfolio_title.png) 0 0 repeat;}*/

#accordion h3 {display:block; background:#6b8452; font-size: 22px;  width:982px; cursor:pointer; margin:0; padding:10px; /*background:transparent url(../images/work_title_fade.jpg) 0 0 repeat;*/}
#accordion h3 a { color: #fff; text-decoration:none;} 
#accordion h3.first {margin-top:0;}
#accordion div.workdetails { margin:0 0 20px; 0; background:#fff URL(../images/portfolio_bg_item_v2.png) right top no-repeat;  width:960px; padding:20px; overflow-x:auto; overflow-y:auto;border-right:1px solid #bbb;border-bottom:1px solid #bbb;border-left:1px solid #bbb;}
.work { }
.work ul {padding:0; margin:0;}
.work ul li {padding:0; margin:0;}
.work .contact {margin:2em 0 1em 0;}
/*.work .s-cool a {display:block; height:54px; width:249px; background:transparent url(../images/s-cool.jpg) -10px 0 no-repeat; text-indent:-10000em;}
.work .dyson a {display:block; height:54px; width:249px; background:transparent url(../images/dyson.jpg) -10px 0 no-repeat; text-indent:-10000em;}
.work .suttonfloors a {display:block; height:54px; width:249px; background:transparent url(../images/sutton_floors.jpg) -10px 0 no-repeat; text-indent:-10000em;}
.work .partycrechers a {display:block; height:54px; width:249px; background:transparent url(../images/party_crechers.jpg) -10px 0 no-repeat; text-indent:-10000em;}
.work .colshe a {display:block; height:54px; width:249px; background:transparent url(../images/colshe.jpg) -10px 0 no-repeat; text-indent:-10000em;}
.work .nextstage a {display:block; height:54px; width:249px; background:transparent url(../images/next_stage.jpg) -10px 0 no-repeat; text-indent:-10000em;}*/


.work h3 {padding:0; margin:0;}

.workdetails .images {display:block; width:200px; padding:10px; float:left;border:1px solid #9c8e7a; background:#fff;}
.workdetails .images img { border:1px solid #9c8e7a; }
.workdetails .images h4 { margin:2em 0 0.5em 0;}
.workdetails .images h4.first { margin-top:0; }
.workdetails .first { margin-top:0; }

.workdetails .imagesacross {display:block; padding-top:22px; border:1px solid #9c8e7a; background:#fff;}
.workdetails .imagesacross h4 {display:none;}
.workdetails .imagesacross img {float:left; margin:0 12px 22px 22px; border:1px solid #9c8e7a;}

/* footer
------------------------------------------------------------------------------------*/
#footer {width:1100px; position: relative; text-align:center; height:185px; margin:0 auto;background:transparent url(../images/footer_bg.jpg) top center no-repeat; border-top:1em solid #fff; color:#333;}

#footer .copyright {position: absolute; bottom: 0; left: 400px;}

#footer .contactme {background:#fff; width:960px; margin:1em 0; padding:20px; text-align:left; margin-left:auto; margin-right:auto;}
#footer .contactme h3 {display:block; width:158px; height:30px; margin-top:0; text-indent:-1000em; background:transparent url(../images/contact.png) 0 0 no-repeat;}
.contactme h5 { color:#504330;display:inline; margin-left:20px;}
.contactme p { display:inline;}

.workdetails {}
.workdetails .information {width:720px; float:right;}
.workdetails .information ul,
ul.informationdetails {list-style:square; margin-left:18px;}
.workdetails .information ul li,
ul.informationdetails li {margin-top:1em;}
.workdetails h4 {margin-top:2em;}
.workdetails p {}

.livelinks {margin-left:18px;}
.livelinks li {display:inline; }
.livelinks li a { margin-right:2em;display:block-inline; height:1em; padding-left:7px; background:transparent url(../images/arrow-right.png) 0 0.45em no-repeat; text-indent:15px; }



/* twitter it*/

#twitter {width:1000px; background:#000; text-align:left; margin-left:auto; margin-right:auto;}

#twitter_div{width:400px; min-height:520px; padding:20px 20px 100px 20px; float:left; background:#fff url(../images/footer_fade.jpg) bottom left repeat-x;}
#twitter_div h3 {margin-top: 0; }
#twitter_div a.twitterpage {display:block; height:40px; padding-left:45px; padding-top:10px; background:transparent url(../images/twitter-man.png) 0 0 no-repeat;}


h4.twitter-title{}

ul#twitter_update_list ul{}
ul#twitter_update_list li{line-height:1.5em;font-size:0.9em; margin-left:20px;}
ul#twitter_update_list li a{color:#8c907c;}
ul#twitter_update_list li a:hover{color:#000;}

#twitpic { width:300px; min-height:520px; float:right; background:#fff url(../images/footer_fade.jpg) bottom left repeat-x; padding-bottom:100px;}
#twitpic div div {float:left;clear:both; }
#twitpic div div span {float:left;clear:left;}
#twitpic div div div a img {float:right;clear:right;}


#bookmarks {width:505px; padding:20px; min-height:520px; float:right; background:#fff url(../images/footer_fade.jpg) bottom left repeat-x; padding-bottom:100px;}
#bookmarks h3
 {margin-top: 0;}

/* =nav
------------------------------------------------------------------------------------*/
#nav {position: absolute; top:20px; right: 20px; background: #181818; border: 1px solid #333; -moz-border-radius: 5px; border-radius: 5px;}

#nav ul {margin: 0; padding: 0;}
#nav ul li { border-right: 1px solid #333; float: left; padding:10px; margin-right:0; }
#nav ul li:last-child {border-right: none;}
#nav ul li a {text-decoration: none; padding: 5px;}
#nav ul li a:hover {background: #999; -moz-border-radius: 5px; border-radius: 5px;}
#nav ul li.on a {background: #fff; -moz-border-radius: 5px; border-radius: 5px;}


/* home page
------------------------------------------------------------------------------------*/

#letterbox { position:absolute; top:150px; right:10px; background: url(../images/animation-holder.png) 0 0 no-repeat;}

#skillsandcontact {}
{}
.designskills,
.frontend,
.contactme { min-height: 290px;}
.designskills {background: transparent url(../images/li-spliter.png) right 50px no-repeat;}
.frontend {background: transparent url(../images/li-spliter.png) right 50px no-repeat;}


#skillsandcontact ul li {display:block; width:330px; float:left; margin: 0 15px 0 0; padding: 0 17px 0 0; }
#skillsandcontact ul li ul {float: left; margin-right: 10px; width: 65px;}
#skillsandcontact ul li ul li {width:65px; clear: both; background: none; }
#skillsandcontact h3 {font-size: 28px; color:#727E63; margin:0 0 25px 0; /*text-shadow: -1px -1px 0 #8e8e8e;*/}
#skillsandcontact p {font-size: 13px; }
#skillsandcontact .photosicon,
#skillsandcontact .illicon,
#skillsandcontact .flashicon,
#skillsandcontact .htmlicon,
#skillsandcontact .cssicon,
#skillsandcontact .jquicon,
#skillsandcontact .druicon {display:block; width:60px; height:65px; text-indent: -99999em;}
#skillsandcontact .photosicon {background:transparent url(../images/icon-pho.png) 0 0 no-repeat;}
#skillsandcontact .illicon {background:transparent url(../images/icon-ill.png) 0 0 no-repeat;}
#skillsandcontact .flashicon {background:transparent url(../images/icon-fla.png) 0 0 no-repeat;}
#skillsandcontact .htmlicon {background:transparent url(../images/icon-html.png) 0 0 no-repeat;}
#skillsandcontact .cssicon {background:transparent url(../images/icon-css.png) 0 0 no-repeat;}
#skillsandcontact .jquicon {background:transparent url(../images/icon-jqu.png) 0 0 no-repeat;}
#skillsandcontact .druicon {background:transparent url(../images/icon-dru.png) 0 0 no-repeat;}

#skillsandcontact .contactme {width:215px; margin-right: 0; padding-right: 0}
#skillsandcontact .contactme ul {float:none; width:270px; margin-top: 20px;}
#skillsandcontact .contactme ul li {float:none; width:270px;}
#skillsandcontact .contactme ul li h4 {display:block; float:left; text-indent: -99999em; height: 40px; width:60px; margin: 0; background:transparent url(../images/icon-mail.png) 0 0 no-repeat;}
#skillsandcontact .contactme ul li p {display:block; float:left; width:200px; margin: 0; }

#skillsandcontact .contactme ul .contactemail h4 {background:transparent url(../images/icon-mail.png) 0 0 no-repeat;}
#skillsandcontact .contactme ul .contacttel h4 {background:transparent url(../images/icon-tel.png) 0 0 no-repeat;}
#skillsandcontact .contactme ul .contacttwit h4 {background:transparent url(../images/icon-twit.png) 0 0 no-repeat;}
#skillsandcontact .contactme ul .contactlink h4 {background:transparent url(../images/icon-link.png) 0 0 no-repeat;}

/* jCarousel Lite and lightbox
------------------------------------------------------------------------------------*/
.carousel {padding: 0 40px; margin:2em 0 2em 130px;  width:512px !important;}

.carousel a.prev {position:absolute; left:0; color:#f0f; cursor:pointer;}
.carousel a.next {position:absolute; right:0; color:#f0f; cursor:pointer;}
.carousel a.next:hover {}
.carousel a.prev:hover {}
.carousel a:hover { border:medium none; outline-color:-moz-use-text-color; outline-style:none; outline-width:medium; }
.carousel a.disabled { cursor:default; color:#ccc;}


.carousel .jCarouselLite { background-color:#DFDFDF; border:1px solid black; height:110px; float:left; left:-5000px; position:relative; visibility:hidden; }

.carousel ul {margin:0; margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 2890px; left: -510px;}
.carousel ul li {overflow: hidden; float: left; width: 100px; height: 100px;}
.carousel ul li img {background-color:#FFFFFF;height:100px;margin:10px;width:100px;}



/* =solutions page
------------------------------------------------------------------------------------*/

#solutions { padding: 20px; background:#fff url("../images/people/which.png") no-repeat scroll 715px 72px; }
#contactus { padding: 20px; background:#fff url("../images/people/contact.png") no-repeat scroll 600px 0; }
#solutions h2,
#contactus h2 {background: url("../images/page-top.png") no-repeat scroll 0 0 transparent; left: -20px; margin-top: -40px; margin-bottom: 0; padding: 20px; position: relative; top: 0; width: 960px;}
.solutionsintro {width:700px; font-size: 1.2em;}


ul.pagewidth {margin-top: 20px;}
ul.pagewidth li {background: #6a8451; padding:10px; -moz-border-radius: 15px; border-radius: 15px; position:relative; margin-bottom: 25px; -moz-box-shadow: 3px 3px 4px #999;
	-webkit-box-shadow: 3px 3px 4px #999;
	box-shadow: 3px 3px 4px #999;
}


ul.pagewidth li p.solutionprice {display:block; width:100px; height:110px; position:absolute; bottom:-35px; right: -25px; text-indent: -9999em; z-index: 10;}

ul.pagewidth li p.getgoing {background:transparent url(../images/burst-250.png) -2px 5px no-repeat;}
ul.pagewidth li p.middle {background:transparent url(../images/burst-500.png) -2px 5px no-repeat;}
ul.pagewidth li p.call {background:transparent url(../images/burst-contactus.png) -2px 5px no-repeat;}

ul.floatedlist li {float:left; list-style: circle; width: 290px; margin-left: 20px;}

.imageholder,
.solutioninfo {background: #fff; -moz-border-radius: 15px; border-radius: 15px; padding:10px; min-height: 160px; position: relative;}
.solutioninfo h3 {margin-top: 0;}

.imageholder {float: left;}
.solutioninfo {float: right; width:650px;}

.seeexample {position: absolute; bottom: 15px; left: 15px;}

.contactdetails {float:right; width:600px ; min-height: 350px; margin-bottom: 40px;}
.contactfrom {width:330px; float:left; min-height: 350px; border-right: 1px solid #999; margin-bottom: 40px;}

.contactfrom label,
.contactfrom input,
.contactfrom select,
.contactfrom textarea,
.contactfrom p {float:left; clear: both; width:300px; height:20px;}
.contactfrom label {margin-bottom: 0px}
.contactfrom input {margin-bottom: 10px}
.contactfrom select {margin-bottom: 10px; width:150px}
.contactfrom textarea {height:100px; margin-bottom: 20px;}
.contactfrom input.submit {}


#contactus .contactemail {background:transparent url(../images/icon-mail.png) 0 0 no-repeat; padding-left:40px;}
#contactus .contacttel {background:transparent url(../images/icon-tel.png) 0 0 no-repeat; padding-left:40px;}
#contactus .contacttwit {background:transparent url(../images/icon-twit.png) 0 0 no-repeat; padding-left:40px;}