@charset "UTF-8";
/* CSS Document */



/*--------- Things to Hide from Prying Eyes (except Google <3) -----------*/

h2 span, #logo span, .project-link span, h3 span, #intro_text span, #nav span {display:none;}


/*--------- Base Styles -----------*/

body {
	background: url(../images/bg.jpg) no-repeat #171717;
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	font-size: 70%;
	line-height: 19px;
	}
	
#header {
	width: 100%;
	height: 341px;
	position: relative;
	}
	
#nav {
	width: 253px;
	position: absolute;
	left: 576px;
	top: 110px;
	}	
	
#nav ul {
	width: 253px;
	margin: 0;
	padding: 0;
	}
	
#nav li { 
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	}
	
#nav li.resume a, #nav li.resume a:hover {
	background: url(../images/nav.png) no-repeat;
	display: block;
	width:146px;
	height: 28px;
	}
	
#nav li.resume a:hover {
	background-position: 0 -28px;
	}
	
#nav li.contact a, #nav li.contact a:hover {
	background: url(../images/nav.png) no-repeat -146px 0;
	display: block;
	width:106px;
	height: 28px;
	}
	
#nav li.contact a:hover {
	background-position: -146px -28px;
	}
	
#intro_text {
	background:url(../images/intro-text-trans.png) no-repeat;
	width: 664px;
	height: 89px;
	position: absolute;
	left: 150px;
	top: 204px;	
	}
	
#logo {
	background: url(../images/logo-trans.png) no-repeat;
	width: 238px;
	height: 48px;
	position: absolute;
	top: 75px;
	left: 45px;
	}
	
#container {
	width: 810px;
	padding-left: 145px;
	margin-top: 20px;
	}
	
.clear {
	clear: both;
	}
	
	
/*--------- Transparent Header Text -----------*/

.tm {
	background:url(../images/header-text/tm-trans.png) no-repeat;
	width: 183px;
	height: 33px;
	}

.bmb {
	background:url(../images/header-text/bmb-trans.png) no-repeat;
	width: 183px;
	height: 33px;
	}
	
.la {
	background:url(../images/header-text/liveafrica-trans.png) no-repeat;
	width: 183px;
	height: 33px;
	}
	
.usi {
	background:url(../images/header-text/usi-trans.png) no-repeat;
	width: 183px;
	height: 33px;
	}
	
.belle {
	background:url(../images/header-text/belle-trans.png) no-repeat;
	width: 183px;
	height: 54px;
	}
	
.fms {
	background:url(../images/header-text/fms-trans.png) no-repeat;
	width: 183px;
	height: 54px;
	}
	
.aws {
	background:url(../images/header-text/aws-trans.png) no-repeat;
	width: 183px;
	height: 54px;
	}
	
.hooman {
	background:url(../images/header-text/hooman-trans.png) no-repeat;
	width: 183px;
	height: 33px;
	}


/*--------- Footer -----------*/

#footer-holder {
	background: #000;
	border-top: 4px solid #333;
	height: 380px;
	margin-top: 45px;
	position: relative;
	}
	
#footer-holder a, #footer-holder a:visited {
	color: #2dc131;
	padding: 4px 5px;
	text-decoration: none;
	}
	
#footer-holder a:hover {
	color: #00CC33;
	}
	
#me {
	background:url(../images/me-trans.png);
	width: 210px;
	height: 319px;
	position: absolute;
	top: 95px;
	left: -3px;
	}
	
#about-me {
	width: 618px;
	padding-left: 111px;
	padding-top: 50px;
	font-size: 1.4em;
	line-height: 25px;
	}
	
#about-me p {
	padding-left: 95px;
	padding-right: 50px;
	}
	
#about-me h3 {
	background: url(../images/about.png) no-repeat;
	width: 600px;
	height: 62px;
	margin-bottom: 12px;
	}
	
#about-me ul {
	margin: 10px 0 0 125px; 
	padding: 0;
	}
	
#about-me li {
	float: left;
	width: 30%;
	font-size: .7em;
	list-style: none;
	 margin: 0;
	 padding: 0;
	}
	
#about-me li img {
	margin-bottom: -12px;
	margin-right: 8px;
	}
	
#about-me a, #about-me a:visited {
	font-weight: bold;
	border-bottom: none;
	}
	
#about-me a:hover {
	color: #56e15a;
	}
	
#twitter-box {
	position: absolute;
	width: 260px;
	height: 240px;
	left: 743px;
	top: 75px;
	padding-top: 65px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #666666;
	font-weight: bold;
	font-size: 1.5em;
	line-height: 21px;
	background: url(../images/twitter-bg.jpg) no-repeat;
	}
	
#bird {
	background:url(../images/bird-trans.png) no-repeat;
	position: absolute;
	width: 102px;
	height: 125px;
	left: 710px;
	top: 285px;
	z-index: 99;
	}
	
#twitter-box ul {
	margin: 0;
	padding: 0;
	width: 255px;
	}
	
#twitter-box li {
	width: 255px;
	margin: 0;
	padding: 0;
	list-style: none;
	}
	
#twitter-box a {
	border-bottom: none!important;
	}

/*--------- Portfolio -----------*/

.project-holder {
	position: relative;
	}
.project-holder img {
	border: 1px solid #000;
	}

#mySlides {padding: 0; margin: 0; height: 327px;}

#myController span{
color:#FFF;
background:#000;
margin-right:10px;
cursor:pointer;
}

#jFlowSlide {
	float: left;
	margin-bottom: 35px;
	height: 327px;
	padding-top: 35px;
}

#myController, #myController2, #myController3, #myController4, #myController5, #myController6, #myController7, #myController8, #myController9 {display: none;}


.controller {
   	position: absolute;
	top: 9px;
	left: 420px;
	width: 182px;
	}
	
.controller img {
	border: none;
	}
	
.jFlowPrev, .jFlowNext {
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;

}

.jFlowPrev {
	width: 55px;
	height: 32px;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext  {
	width: 58px;
	height: 32px;
	margin: 0 -5px 0 0;
	padding: 0;
	}

#myController2 span{
color:#FFF;
background:#000;
margin-right:10px;
cursor:pointer;
}

#jFlowSlide2{
	float: left;
	margin-bottom: 35px;
	padding-top: 35px;
	
}

#myController2 span.jFlowSelected2 {

}

.jFlowPrev2, .jFlowNext2 {
cursor:pointer;
display: block;
padding: 5px;
float: left;
}


.jFlowPrev2 {
	width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext2 {
	width: 58px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}

#myController3 span{
color:#FFF;
background:#000;
margin-right:10px;
cursor:pointer;
}

#jFlowSlide3{
	float: left;
	margin-bottom: 35px;
	padding-top: 35px;
}

#myController3 span.jFlowSelected3 {

}

.jFlowPrev3, .jFlowNext3{
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;
}


.jFlowPrev3 {
		width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext3 {
	width: 70px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}


#jFlowSlide4 {
	float: left;
	margin-bottom: 35px;
	padding-top: 35px;
	
}

#myController4 span.jFlowSelected4 {

}

.jFlowPrev4, .jFlowNext4 {
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;
}


.jFlowPrev4 {
	width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext4 {
	width: 70px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}

#jFlowSlide5 {
	float: left;
	margin-bottom: 35px;
	padding-top: 35px;
}

#jFlowSlide6 {
	float: left;
	margin-bottom: 35px;
		padding-top: 35px;
}

#jFlowSlide7 {
	float: left;
	margin-bottom: 35px;	
		padding-top: 35px;
}


#jFlowSlide8 {
	float: left;
	margin-bottom: 35px;	
		padding-top: 35px;
}

#jFlowSlide9 {
	float: left;
	margin-bottom: 35px;	
		padding-top: 35px;
}



.jFlowPrev5, .jFlowNext5 {
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;
}

.jFlowPrev5 {
		width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext5 {
	width: 70px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}
	
.jFlowPrev6, .jFlowNext6 {
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;
}

.jFlowPrev6 {
	width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext6 {
	width: 70px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}
	

.jFlowPrev7, .jFlowNext7 {
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;
}

.jFlowPrev7 {
	width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext7 {
	width: 70px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}

.jFlowPrev8, .jFlowNext8 {
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;
}

.jFlowPrev8 {
	width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext8 {
	width: 70px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}

.jFlowPrev9, .jFlowNext9 {
cursor:pointer;
display: block;
padding: 5px;
 width: 65px;
float: left;
}

.jFlowPrev9 {
	width: 55px;
	height: 32px;
	background:url(/images/prev-button.png) no-repeat;
	margin: 0;
	padding: 0;
	}
	
.jFlowNext9 {
	width: 70px;
	height: 32px;
	background:url(/images/next-button.png) no-repeat;
	margin: 0 -5px 0 0;
	padding: 0;
	}



.project-title {
	float: right;
	width: 230px;
	margin-top: 45px;
	padding: 0;
	}
	
.services-rendered { 
	width: 222px;
	float: right;
	padding: 0;
	margin: 0;
	}
	
.services-rendered li {
	list-style: none;
	padding: 5px 0 5px 35px;
	margin-bottom: 6px;
	background:url(/images/checkmark.png) no-repeat 0 3px;
	}
	
.project-link {float: right; margin: 20px 111px 0 0; width: 112px; height: 34px; background:url(../images/btn-view-site.png) no-repeat; }

.project-link:hover {background:url(../images/btn-view-site.png) no-repeat 0 -35px; }


#projects-fold {margin: 0; padding: 0;}