/* -----------------------------------------------------------------------

   Kev CSS Framework
   http://www.uniteform.com

----------------------------------------------------------------------- */

/* --------------------- GLOBAL RESESTS --------------------- */

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	outline: 0; 
	font-family:  arial, verdana, tahoma, helvetica; 
	font-size:100%;
	vertical-align: baseline; 
} 

:focus { 
	outline: 0; 
} 

body { 
	font-size:62.5%;
	line-height: 1; 
	color:#f8f7f7;
	background:#332f30 url(../images/backgrounds/mainbg.jpg) repeat bottom left;
	
} 

ol, ul { 
	list-style: none; 
}
  
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
} 

caption, th, td { 
	text-align: left; 
	font-weight: normal; 
} 

blockquote:before, blockquote:after, 
q:before, q:after { 
	content: ""; 
} 

blockquote, q { 
	quotes: "" ""; 
}  

img {
	display:block;
}

.clear {
	clear:both;
}


/* --------------------- FONTS --------------------- */


h1{
	display:block;
	line-height:0.1em;
	font-size:0.1em;
	text-indent:-9999em;
	position:relative;
	left:-6px;
	width:957px;
	height:128px;
	margin-left:auto;
	margin-right:auto;
	background:#382e36 url(../images/backgrounds/h1bg.jpg) no-repeat top left;

}

p{
	font-size:1.2em;
	line-height:1.833333em;
	margin-bottom:3.0em;
}


/* --------------------- LINKS --------------------- */


a {
	color:#f8f7f7;
	cursor:pointer;
	text-decoration:none;
}

a:focus, a:hover {
	color:#f8f7f7;
	text-decoration:none;
} 


/* --------------------- WRAPS --------------------- */


.wrap{
	width:946px;
	margin-left:auto;
	margin-right:auto;
}

.wrap:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* --------------------- HEAD --------------------- */


#head{
	display:block;
	background:#382e36 url(../images/backgrounds/foliobg.jpg) repeat-x bottom left;
	min-height:102px;
}

#head a.logo, #head li a{
	float:left;
	display:block;
	line-height:0.1em;
	text-indent:-9999em;
}

#head a.logo{
	height:45px;
	width:205px;
	margin-top:29px;
	background:url(../images/backgrounds/logo.gif) no-repeat 0 0;
}
#head a:hover.logo{
	background:url(../images/backgrounds/logo.gif) no-repeat 0 -45px;
}

#head ul{
	float:right;
	display:inline;
	margin-top:46px;
}

#head li{
	display:inline;
}

#head li a{
	height:24px;
	background-image:url(../images/buttons/menu.gif);
	background-repeat:no-repeat;	
	margin-left:36px;
}

#head li a.portfoliobtn{
	width:76px;
	background-position:0px 0px;
}
#head li a:hover.portfoliobtn, #head li.active a.portfoliobtn{
	background-position:0px -24px;
}

#head li a.aboutbtn{
	width:57px;
	background-position:-76px 0px;
}
#head li a:hover.aboutbtn, #head li.active a.aboutbtn{
	background-position:-76px -24px;
}

#head li a.blogbtn{
	width:43px;
	background-position:-204px 0px;
}
#head li a:hover.blogbtn, #head li.active a.blogbtn{
	background-position:-204px -24px;
}

#head li a.contactbtn{
	width:71px;
	background-position:-133px 0px;
}
#head li a:hover.contactbtn, #head li.active a.contactbtn{
	background-position:-133px -24px;
}

#bar{
	display:block;
	background:#2b272a url(../images/backgrounds/barbg.jpg) repeat-x top left;
}


/* --------------------- PORTFOLIO --------------------- */


#main{
	display:block;
	background:#382e36 url(../images/backgrounds/foliobg.jpg) repeat top left;
}

.folio{
	display:block;
	background:url(../images/backgrounds/shine.png) no-repeat top center;
	padding-bottom:50px;
}

.left{
	float:left;
	display:inline;
	width:276px;
}

.folio .left h2{
	float:left;
	display:inline;
	height:29px;
	width:276px;
	line-height:0.1em;
	text-indent:-9999em;
	padding-bottom:0.4em;
}

.folio .left h3{
	font-size:1.6em;
	font-style:italic;
	font-weight:normal;
	color:#e471a3;
	padding-bottom:1.0em;
}


.folio .left span{
	float:left;
	display:inline;
	width:263px;
	height:18px;
	padding:3px 0px 28px 13px;
	position:relative;
	left:-13px;
	background:url(../images/backgrounds/datebg.png) no-repeat top left;
	font-size:1.2em;
}

.folio .left a{
	display:block;
	width:125px;
	height:45px;
	background:url(../images/buttons/btn.png) no-repeat 0 0;
	line-height:0.1em;
	text-indent:-9999em;
	position:relative;
	left:-13px;
}

.folio .left a:hover{
	background:url(../images/buttons/btn.png) no-repeat 0 -45px;	
}

.folio IMG{
	float:left;
	padding:8px 8px 15px 8px;
}

.folio span.frame{
	float:right;
	display:inline;
	background:url(../images/backgrounds/frame.png) no-repeat 0 0;
	position:relative;
	right:-3px;
	margin:49px 0px 0px 26px;
}


/* ---------- tearound ---------- */

.tearound .left h2{
	background:url(../images/titles/tearound.png) no-repeat top left;
}

.tearound .left h3{
	color:#d16f46;
}

.tearound .left span{
	background:url(../images/backgrounds/tearound_datebg.png) no-repeat top left;
}

.tearound .left a{
	background:url(../images/buttons/tearound_btn.png) no-repeat 0 0;
}

.tearound .left a:hover{
	background:url(../images/buttons/tearound_btn.png) no-repeat 0 -45px;	
}


/* ---------- Desii ---------- */

.desi .left h2{
	background:url(../images/titles/desi.png) no-repeat top left;
}

.desi .left h3{
	color:#e471a3;
}

.desi .left span{
	background:url(../images/backgrounds/datebg.png) no-repeat top left;
}

.desi .left a{
	background:url(../images/buttons/btn.png) no-repeat 0 0;
}

.desi .left a:hover{
	background:url(../images/buttons/btn.png) no-repeat 0 -45px;	
}

/* ---------- Trent ---------- */
    

.trent .left h2{
	background:url(../images/titles/trent.png) no-repeat top left;
}

.trent .left h3{
	color:#287bcf;
}

.trent .left span{
	background:url(../images/backgrounds/trent_datebg.png) no-repeat top left;
}

.trent .left a{
	background:url(../images/buttons/trent_btn.png) no-repeat 0 0;
}

.trent .left a:hover{
	background:url(../images/buttons/trent_btn.png) no-repeat 0 -45px;	
}

/* ---------- Charterhouse ---------- */
    

.charter .left h2{
	background:url(../images/titles/charterhouse.png) no-repeat top left;
}

.charter .left h3{
	color:#1d9691;
}

.charter .left span{
	background:url(../images/backgrounds/charterhouse_datebg.png) no-repeat top left;
}

.charter .left a{
	background:url(../images/buttons/charterhouse_btn.png) no-repeat 0 0;
}

.charter .left a:hover{
	background:url(../images/buttons/charterhouse_btn.png) no-repeat 0 -45px;	
}


/* ---------- BandQ ---------- */
    

.bandq .left h2{
	background:url(../images/titles/bandq.png) no-repeat top left;
}

.bandq .left h3{
	color:#f77419;
}

.bandq .left span{
	background:url(../images/backgrounds/bandq_datebg.png) no-repeat top left;
}

.bandq .left a{
	background:url(../images/buttons/bandq_btn.png) no-repeat 0 0;
}

.bandq .left a:hover{
	background:url(../images/buttons/bandq_btn.png) no-repeat 0 -45px;	
}
        
       
/* ---------- Sparks ---------- */
    
    
.sparks .left h2{
	background:url(../images/titles/sparks.png) no-repeat top left;
}

.sparks .left h3{
	color:#c9362b;
}

.sparks .left span{
	background:url(../images/backgrounds/sparks_datebg.png) no-repeat top left;
}

.sparks .left a{
	background:url(../images/buttons/sparks_btn.png) no-repeat 0 0;
}

.sparks .left a:hover{
	background:url(../images/buttons/sparks_btn.png) no-repeat 0 -45px;	
}


/* ---------- Sporting ---------- */
    
    
.sporting .left h2{
	background:url(../images/titles/sportingglory.png) no-repeat top left;
}

.sporting .left h3{
	color:#3cb90f;
}

.sporting .left span{
	background:url(../images/backgrounds/sporting_datebg.png) no-repeat top left;
}

.sporting .left a{
	background:url(../images/buttons/sporting_btn.png) no-repeat 0 0;
}

.sporting .left a:hover{
	background:url(../images/buttons/sporting_btn.png) no-repeat 0 -45px;	
}
        
        
/* ---------- Complete ---------- */
    

.complete .left h2{
	background:url(../images/titles/complete.png) no-repeat top left;
}

.complete .left h3{
	color:#857a6c;
}

.complete .left span{
	background:url(../images/backgrounds/complete_datebg.png) no-repeat top left;
}

.complete .left a{
	background:url(../images/buttons/complete_btn.png) no-repeat 0 0;
}

.complete .left a:hover{
	background:url(../images/buttons/complete_btn.png) no-repeat 0 -45px;	
}
        
        
/* ---------- VTC_Online ---------- */
    

.vtc .left h2{
	background:url(../images/titles/vtc-online.png) no-repeat top left;
}

.vtc .left h3{
	color:#0089b5;
}

.vtc .left span{
	background:url(../images/backgrounds/vtc_datebg.png) no-repeat top left;
}

.vtc .left a{
	background:url(../images/buttons/vtc_btn.png) no-repeat 0 0;
}

.vtc .left a:hover{
	background:url(../images/buttons/vtc_btn.png) no-repeat 0 -45px;	
}

        
/* ---------- futurefit ---------- */
    

.futurefit .left h2{
	background:url(../images/titles/futurefit.png) no-repeat top left;
}

.futurefit .left h3{
	color:#1863b9;
}

.futurefit .left span{
	background:url(../images/backgrounds/fit_datebg.png) no-repeat top left;
}

.futurefit .left a{
	background:url(../images/buttons/fit_btn.png) no-repeat 0 0;
}

.futurefit .left a:hover{
	background:url(../images/buttons/fit_btn.png) no-repeat 0 -45px;	
}
        
        
/* ---------- Truffle ---------- */
    

.truffle .left h2{
	background:url(../images/titles/truffleshuffle.png) no-repeat top left;
}

.truffle .left h3{
	color:#4c8fc4;
}

.truffle .left span{
	background:url(../images/backgrounds/truffle_datebg.png) no-repeat top left;
}

.truffle .left a{
	background:url(../images/buttons/truffle_btn.png) no-repeat 0 0;
}

.truffle .left a:hover{
	background:url(../images/buttons/truffle_btn.png) no-repeat 0 -45px;	
}
        
        
/* ---------- PCS ---------- */
    
    
.pcs .left h2{
	background:url(../images/titles/pcs.png) no-repeat top left;
}

.pcs .left h3{
	color:#ed1596;
}

.pcs .left span{
	background:url(../images/backgrounds/pcs_datebg.png) no-repeat top left;
}

.pcs .left a{
	background:url(../images/buttons/pcs_btn.png) no-repeat 0 0;
}

.pcs .left a:hover{
	background:url(../images/buttons/pcs_btn.png) no-repeat 0 -45px;	
}
        
        
/* ---------- ecocards ---------- */
    

.ecocards .left h2{
	background:url(../images/titles/ecocards.png) no-repeat top left;
}

.ecocards .left h3{
	color:#9bb900;
}

.ecocards .left span{
	background:url(../images/backgrounds/eco_datebg.png) no-repeat top left;
}

.ecocards .left a{
	background:url(../images/buttons/eco_btn.png) no-repeat 0 0;
}

.ecocards .left a:hover{
	background:url(../images/buttons/eco_btn.png) no-repeat 0 -45px;	
}
     
        
/* ---------- Urban ---------- */


.urban .left h2{
	background:url(../images/titles/urbansurfer.png) no-repeat top left;
}

.urban .left h3{
	color:#a51618;
}

.urban .left span{
	background:url(../images/backgrounds/urban_datebg.png) no-repeat top left;
}

.urban .left a{
	background:url(../images/buttons/urban_btn.png) no-repeat 0 0;
}

.urban .left a:hover{
	background:url(../images/buttons/urban_btn.png) no-repeat 0 -45px;	
}
        
        
/* ---------- Puresha ---------- */
    

.puresha .left h2{
	background:url(../images/titles/puresha.png) no-repeat top left;
}

.puresha .left h3{
	color:#847363;
}

.puresha .left span{
	background:url(../images/backgrounds/puresha_datebg.png) no-repeat top left;
}

.puresha .left a{
	background:url(../images/buttons/puresha_btn.png) no-repeat 0 0;
}

.puresha .left a:hover{
	background:url(../images/buttons/puresha_btn.png) no-repeat 0 -45px;	
}   
         
        
/* ---------- Worktown ---------- */


.worktown .left h2{
	background:url(../images/titles/worktown.png) no-repeat top left;
}

.worktown .left h3{
	color:#52c5d8;
}

.worktown .left span{
	background:url(../images/backgrounds/work_datebg.png) no-repeat top left;
}

.worktown .left a{
	background:url(../images/buttons/work_btn.png) no-repeat 0 0;
}

.worktown .left a:hover{
	background:url(../images/buttons/work_btn.png) no-repeat 0 -45px;	
} 
         
        
/* ---------- Barlow ---------- */
    

.barlow .left h2{
	background:url(../images/titles/barlow.png) no-repeat top left;
}

.barlow .left h3{
	color:#2c63e1;
}

.barlow .left span{
	background:url(../images/backgrounds/barlow_datebg.png) no-repeat top left;
}

.barlow .left a{
	background:url(../images/buttons/barlow_btn.png) no-repeat 0 0;
}

.barlow .left a:hover{
	background:url(../images/buttons/barlow_btn.png) no-repeat 0 -45px;	
}     
        
        
/* ---------- BP ---------- */
    
 
.bp .left h2{
	background:url(../images/titles/bp.png) no-repeat top left;
}

.bp .left h3{
	color:#8fbe02;
}

.bp .left span{
	background:url(../images/backgrounds/bp_datebg.png) no-repeat top left;
}

.bp .left a{
	background:url(../images/buttons/bp_btn.png) no-repeat 0 0;
}

.bp .left a:hover{
	background:url(../images/buttons/bp_btn.png) no-repeat 0 -45px;	
}
        
        
/* ---------- Priory ---------- */
    
.priory .left h2{
	background:url(../images/titles/priory.png) no-repeat top left;
}

.priory .left h3{
	color:#0d8529;
}

.priory .left span{
	background:url(../images/backgrounds/priory_datebg.png) no-repeat top left;
}

.priory .left a{
	background:url(../images/buttons/priory_btn.png) no-repeat 0 0;
}

.priory .left a:hover{
	background:url(../images/buttons/priory_btn.png) no-repeat 0 -45px;	
}      
        
        
/* ---------- Intralan ---------- */
    

.intralan .left h2{
	background:url(../images/titles/intralan.png) no-repeat top left;
}

.intralan .left h3{
	color:#c00d2b;
}

.intralan .left span{
	background:url(../images/backgrounds/intra_datebg.png) no-repeat top left;
}

.intralan .left a{
	background:url(../images/buttons/intra_btn.png) no-repeat 0 0;
}

.intralan .left a:hover{
	background:url(../images/buttons/intra_btn.png) no-repeat 0 -45px;	
}


/* --------------------- FOOT --------------------- */


#about{
	display:block;
	background:url(../images/backgrounds/folioline.jpg) repeat-x top left;
	padding-bottom:35px;
}

.about_left{
	float:left;
	display:inline;
	position:relative;
	left:-24px;
	width:275px;
	padding:29px 50px 29px 25px;
	background:url(../images/backgrounds/aboutbg.png) no-repeat bottom left;
	border-top:1px solid #363232;
}

.about_left IMG{
	float:left;
	display:inline;
	position:relative;
	left:-14px;
}

.about_left ul{
	display:block;
	position:relative;
	left:-4px;
	padding-top:20px;
	margin-bottom:2.8em;
}

.about_left ul li{
	display:block;
	font-size:1.2em;
	line-height:1.83em;
}

.about_left ul li.name{
	font-size:1.4em;
	line-height:1.7em;
	color:#0985bf;
}

.about_left p{
	color:#726770;
	font-size:1.2em;
	font-style:italic;
	padding-top:17px;
	margin-bottom:2.7em;
	
}
.about_left p strong{
	font-size:1.2em;
	font-weight:normal;
	display:block;
	padding-bottom:0.1em;
}

.about_left p.contact{
	padding-top:17px;
	line-height:2.0em;
}

.about_left p.contact strong{
	padding-bottom:0.7em;
}

.about_left a{
	background:url(../images/backgrounds/dotted_line.gif) repeat-x bottom left;
	padding-bottom:1px;
	color:#6f656d;
}
.about_left a:hover{
	background:none;
	color:#f8f7f7;
}



.about_left a.contact, .about_left a.about{
	display:block;
	width:125px;
	height:45px;
	line-height:0.1em;
	text-indent:-9999em;
	position:relative;
	left:-2px;
	padding:0px;
}

.about_left a.about{
	background:url(../images/buttons/about_btn.png) no-repeat 0 0;
}
.about_left a.contact{
	background:url(../images/buttons/contact_btn.png) no-repeat 0 0;
}
.about_left a.about:hover{
	background:url(../images/buttons/about_btn.png) no-repeat 0 -45px;
}
.about_left a.contact:hover{
	background:url(../images/buttons/contact_btn.png) no-repeat 0 -45px;	
}

.middle{
	float:right;
	display:inline;
	width:582px;
	background:url(../images/backgrounds/line.gif) repeat-x bottom left;
	margin-bottom:2.8em;
	padding-bottom:1em;
}
.skills, .contactform{
	padding-top:47px;
}
.edu, .contactform{
	background:none;
}

.middle h2{
	float:left;
	display:inline;
	height:28px;
	line-height:0.1em;
	text-indent:-9999em;
	margin-right:9px;
	margin-bottom:11px;
}
.skills h2{
	width:70px;
	background:url(../images/titles/skills.png) no-repeat 0 0;
}
.edu h2{
	width:129px;
	background:url(../images/titles/education.png) no-repeat 0 0;
}
.exp h2{
	width:142px;
	background:url(../images/titles/experience.png) no-repeat 0 0;
}
.contactform h2{
	width:143px;
	background:url(../images/titles/contact.png) no-repeat 0 0;
}
.contactform h2.thanks{
	width:126px;
	background:url(../images/titles/thankyou.png) no-repeat 0 0;
}
.middle h3{
	font-size:1.4em;
	font-weight:normal;
	color:#0985bf;
	position:relative;
	top:8px;
}

.middle p{
	margin-bottom:1.8em;
	clear:both;
}

.middle ul{
	margin-bottom:2.3em;
	padding-left:20px;
	display:block;
	clear:both;	
}

.middle li{
	padding-left:15px;
	display:block;
	background:url(../images/backgrounds/bullet.png) no-repeat center left;
	font-size:1.2em;
	line-height:1.833333em;

}


/* --------------------- CONTACT --------------------- */

form{
	float:left;
	width:522px;
	padding:40px 30px 12px 30px;
	margin-top:15px;
	margin-bottom:35px;
	background:url(../images/backgrounds/formbg.gif) repeat top left;
}

form p{
	float:left;
	width:522px;
	margin-bottom:28px;
}

label, input, textarea{
	font-size:1.2em;
	float:left;
	font-family: Arial, Verdana,Helvetica, sans-serif;
	color:#f7f7f7;
}

label{	
	font-weight:bold;
	width:150px;
}

form span {
	color:#726770;
	font-size:0.85em;
	font-weight:normal;
}

input, textarea{
	float:right;
	width:330px;
	padding:8px;
	background-color:#4d424a;
	border-top:1px solid #342d32;
	border-left:1px solid #342d32;
	border-bottom:1px solid #5a4e58;
	border-right:1px solid #5a4e58;
	position:relative;
	top:-5px;
}

input.submit{
	float:right;
	height:27px;
	width:123px;
	border:none;
	background:none;
	position:relative;
	top:-8px;
	right:-6px;
}

textarea{
	height:90px
}


/* --------------------- FOOT --------------------- */


#foot{
	display:block;
	background:url(../images/backgrounds/folioline.jpg) repeat-x top left;
	padding:38px 0px 20px 0px;
}
#foot li h4, #foot a.css, #foot a.xhtml{
	line-height:0.1em;
	text-indent:-9999em;
}

#foot li h4{
	display:block;
	height:16px;
	background:url(../images/titles/desi.png) no-repeat top left;
	margin-bottom:0.5em;
}
#foot li.details h4{
	background:url(../images/titles/copyright.png) no-repeat top left;
}
#foot li.freelance h4{
	background:url(../images/titles/freelance.png) no-repeat top left;
}

#foot ul{
	display:inline;
}

#foot li{
	float:left;
	display:inline;
	margin-left:30px;
}
#foot li.details{
	width:334px;
	margin-left:0px;
}
#foot li.freelance, #foot li.buttons{
	width:276px;
}
    
#foot p{
	line-height:2.2em;
}

#foot p, #foot li.details a{
	color:#6f656d;
}

#foot li.details a{
	background:url(../images/backgrounds/dotted_line.gif) repeat-x bottom left;
	padding-bottom:1px;
}
#foot li.details a:hover{
	background:none;
	color:#f8f7f7;
}

#foot a.css, #foot a.xhtml{
	float:right;
	display:inline;
	position:relative;
	top:-2px;
	height:15px;
	margin-left:16px;
	background-repeat:no-repeat;
	background-position:0px 0px;
}
#foot a.css{
	width:49px;
	background:url(../images/buttons/cssbtn.gif);
}
#foot a.xhtml{
	width:57px;
	background:url(../images/buttons/xhtmlbtn.gif);
}
#foot a:hover.css, #foot a:hover.xhtml{
	background-position:0px -15px;
}


/* --------------------- BLOG --------------------- */