html, body {
    margin: 0;
    padding: 0;
}

body {
background:url("../images/gray.png") repeat fixed 0 0 #151515;
color:#FFFFFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
height:100%;
overflow:hidden;
}

a:focus {
    outline: none;
}

#header {
	position: relative;
	left: 50%;
	margin-left: -627px;
	width: 90%;
    height: 115px;
    background: transparent url(../images/header.png);
}
#logo {
	position: relative;
	left: 50%;
	margin-top:-22px;
	margin-left: -687px;
	width: 90%;
    height: 115px;
    background: transparent url(../images/header.png);
}
#spacer {
    height: 200px;
    background: transparent url(../images/spacer.png);
}

#spacer100 {
    height: 100px;
    background: transparent url(../images/spacer.png);
}

#aboutmeBG {
    height: 900px; 
	width: 100%;
    background: #151515 url(../images/gray.png);
}


#folioBG {
    height: 900px; 
    background: #151515 url(../images/black.png);
}

#baseBG {
    height: 900px; 
    background: #151515 url("../images/red.png");
}

#logo h1 {
    margin: 0;
    text-indent: -9999px;
}

#header h1 {
    margin: 0;
    text-indent: -9999px;
}

#content {
	width: 832px;
	margin: 0 auto;
/*	padding-bottom: 230px; */
}

#content.error {
	width: 400px;
}

#content p {
	line-height: 1.6em;
	margin-bottom: 1.6em;
}

#content acronym {
	border-bottom: #da812f dotted 1px;
}

#content a {
	text-decoration: none;
	color: #8c9272;
}

#content a:hover {
	border-bottom: #da812f dotted 1px;
}

#content a.external {
	background: transparent url(../images/external.png) top right no-repeat;
	padding-right: 11px;
}

#content a.external:hover {
	background-image: url(../images/external_over.png)
}

#content p.intro {
	display: block;
	width: 750px;
    height: 142px;
    background: transparent url(../images/intro.png);
	text-indent: -9999px;
	margin-left: -20px;
}

#content #more {
    line-height: 1em;
    padding-right: 4em;
    text-align: right;
    font-size: 1.25em;
}

#content #more a {
    text-decoration: none;
    color: #606163;
	border: none;
}

#content #more a:hover {
    color: #ffffff;
}

#content #more a:after {
    content: "...";
}

#content #headd {
    height: 100px;
	width: 100%;
}

#footer {
	background: #ffffff;
}

#footer #greyblock {
	display: block;
	width: 50%;
	height: 170px;
	background: #151515 url(../images/gray.png);
	float: right;
}

#footer #contact {
	position: relative;
	left: 50%;
	height:300px;
	margin-left: -457px;
	width: 375px;
	padding: 41px;
	color: #606163;
	letter-spacing: -1px;
	padding-bottom: 80px;
}

#contact h2 {
	display: block;
	width: 187px;
    height: 37px;
    background: transparent url(../images/talk.png);
	text-indent: -9999px;
	margin: 0;
}
#contact h5 {
	background:url("../images/cv.png") repeat scroll 0 0 transparent;
	display:block;
	height:32px;
	/*margin-left:380px;
	margin-top:100px;*/
	text-indent:-9999px;
	width:154px;
}

#hireMeBadge {
	background-image:url("../images/hireme.png");
	height:213px;
	margin-left:453px;
	margin-top:-260px;
	width:214px;
}

#contact em {
	font-style: normal;
}

#contact p a, #contact em {
	color: #292929;
}

#contact em a span {
	color: #888888;
	font-size: 90%;
}

#contact p a {
	text-decoration: none;
	border-bottom: #da812f dotted 1px;
}

#contact p a:hover {
	background: #da812f;
	color: #ffffff;
}

#contact p a:hover span {
	color: #606163;
}

#contact ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 832px;
}

#contact li {
	display: inline;
}

#contact li a {
	display: block;
	float: left;
	width: 50px;
    height: 50px;
	text-indent: -9999px;
	margin-right: 5px;
}

#contact #linkedin {
    background: transparent url(../images/linkedin.png);
}

#contact #twitter {
    background: transparent url(../images/twitter.png);
}

#contact #google {
    background: transparent url(../images/google.png);
}

#contact #freesound {
    background: transparent url(../images/freesound.png);
}

#contact #friendfeed {
    background: transparent url(../images/friendfeed.png);
}

#contact #gtalk {
    background: transparent url(../images/gtalk.png);
}

#contact #skype {
    background: transparent url(../images/skype.png);
}

#contact #facebook {
    background: transparent url(../images/facebook.png);
}

#contact #picasa {
    background: transparent url(../images/picasa.png);
}

#contact #lastfm {
    background: transparent url(../images/lastfm.png);
}

#contact #myresume {
    background: transparent url(../images/cv.png);
}

#contact #blank {
    background: transparent url(../images/blank.png);
}

#contact #photo {
    background: transparent url(../images/photo.png);
}

#contact #flex {
    background: transparent url(../images/flex.png);
}

#contact #follio {
    background: transparent url(../images/portfolio.png);
}

/*******************************    navigator   ******************************************/

#nav {
	/*background:url("../images/body-bg.jpg") repeat-x fixed center top transparent;*/
	height:82px;
	margin:0 auto;
	position:fixed;
	top:0;
	width:100%;
	z-index:9999;
}
#nav ul {
	background:url("../images/nav-container-bg.png") repeat-x scroll 0 0 transparent;
	height:80px;
	margin:0 auto 0;
	width:920px;
}
#nav li {
	display:inline;
	float:left;
	margin:0 11px;
}
#nav a {
	background:url("../images/nav-items.png") repeat scroll 0 0 transparent;
	display:block;
	float:left;
	height:50px;

	position:relative;
	text-indent:-999em;
}
#nav #home {
	width:66px;
}
#nav #home:hover {
	background-position:0 -50px;
	width:66px;
}
#nav #folio {
	background-position:-85px 0;
	width:90px;
}
#nav #folio:hover {
	background-position:-85px -50px;
}
#nav #aboutme {
	background-position:-215px 0;
	width:125px;
}
#nav #aboutme:hover {
	background-position:-215px -50px;
}

#nav #hireme {
	background-position:-480px 0;
	width:115px;
}
#nav #hireme:hover {
	background-position:-480px -50px;
}

#nav #mehome {
	background-position:-618px 0;
	width:335px;
}
#nav #mehome:hover {
	background-position:-618px -50px;
}

/*******************************    navigator   ******************************************/

#connectme {
	background: #ffffff;
}

#connectme #greyblock1 {
	display: block;
	width: 50%;
	height: 170px;
	background: #151515 url(../images/gray.png);
	float: right;
}

#connectme #contact {
	position: relative;
	left: 50%;
	height:300px;
	margin-left: -457px;
	width: 375px;
	padding: 41px;
	color: #606163;
	letter-spacing: -1px;
	padding-bottom: 80px;
	padding-top:14px;
}

#connectme #resume  {
	background:url("../images/cv.png") no-repeat scroll 100px 0 transparent;
	float:left;
	padding-left:190px;
}

/****************************folio section**************************************/
#my-folio {
	display:inline-block;
	
	margin-left:240px;
	width:800px;
	margin-top:-30px;
/*	margin-top:120px;
	text-align:center;
	height:180px;
	background: #151515 url(../images/bg5.png);*/
}

#my-folio h2{
	clear: both;
	float: left;
	font-size: 26px;
}
	
#my-folio h3{
	clear:both;
	float:left;
	font-size:16px;
	margin-top:-20px;
}

#my-folio p{
	clear: both;
	font-size: 12px;
	text-align:justify;
}

#my-folio a{
	color: #ffffff
}
/****************************folio section**************************************/

/**************************** aboutme section**************************************/
#about-me-img {
	background: url(../images/aboutme.png) no-repeat 650px 0;
	float: left;
	height: 750px;
	width: 960px;
	padding-left:190px;
}

#about-me {
	float:left;
	height:750px;
	width:443px;
	margin-top:45px;
}

#about-me h2{
	clear: both;
	float: left;
	font-size: 26px;
}
	
#about-me h3{
	clear:both;
	float:left;
	font-size:16px;
	margin-top:-20px;
}

#about-me p{
	clear: both;
	font-size: 12px;
	text-align:justify;
}


/****************************folio section**************************************/


/**************************** Slider **************************************/

	img{border:none;}

 /* image replacement */
     .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
		margin:0;
		padding:0;
		display:block;
		overflow:hidden;
		text-indent:-8000px;
     }
    /* // image replacement */
	
	#adimanav {
		background:url("../images/adimanav.png") repeat scroll 0 0 transparent;
		display:block;
		width:154px;
		z-index:1000;
	}
	#test{
		background:url("../images/adimanav.png") repeat scroll 0 0 transparent;
		display:block;
		text-indent:-9999px;
		width:154px;
	}


	#SlideContainer{	
		margin:0 auto;
		position:relative;
		text-align:left;
		width:800px;
		/*background:#fff;		*/
		margin-bottom:2em;
	}				

	#SlideContainer h2{
		font-size: 26px;
		margin-top:-50px;
	}
		
	#SlideContainer h3{
		font-size:16px;
		margin-top:-25px;
	}
	

	#SlideContent{
		border:10px solid #000000;
		width:800px;
		height:400px;
		position:relative;
	}			

/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
	}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:800px;
		height:400px;
		overflow:hidden; 
	}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:150px;
		z-index:998;
	}	
	#nextBtn, #slider1next{ 
		left:800px;
	}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/arrow-left.png) no-repeat 0 0;	
	}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/arrow-right.png) no-repeat 0 0;	
	}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
	}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
	}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
	}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
	}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/**************************** Slider **************************************/














#jFlowSlide { float: left; }
#controller {
	float: left;
	clear: left;
	background-color: #000;
	width: 100%;
	margin-top: 0px;
	font-family: Tahoma, Arial, sans-serif;
	padding-bottom: 5px;
}
#controller span {
	width: 165px;
	display: block;
	float: left;
	text-align: left;
}
#controller .flowprev, #controller .flownext{
	width: 65px;
	font: 18px Arial, Helvetica, sans-serif;
}
#controller span a {
	display: block;
	line-height: normal;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #B9B9B9;
	padding-top: 11px;
	padding-bottom: 19px;
	padding-left: 15px;
	border-top: 1px solid #333;
	border-bottom-width: 0px;
	text-decoration: none; 
	background-image: url("../images/slide_ctrl_bg.gif");
	background-repeat: no-repeat;
	outline:0;
}
#controller span a b {
	font-size: 9px;
	font-weight: normal;
	color: #666;
	padding-right: 10px;
}
#controller span a:hover {
	color: #FFF;
	border-top: 1px solid #FFF;
}
#controller .jFlowSelected a, #controller .jFlowSelected a:hover{
	color: #FFF;
	cursor: default;
	background-color: #000;
	border-top: 1px solid #00ccff;
}
#controller .jFlowSelected a b { color:#00ccff }
#controller .flowprev a, #controller .flownext a {
	padding: 0px;
	line-height: 50px;
	text-align: center;
	width: 100%;
	color: #00ccff;
	font-size: 2em;
	font-weight: normal;
}
.bottom-block {
	float: left;
	width: 220px;
}
.bottom-block h1 {
	font: bold 20px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #666;
	background-image: url(../../img/4-bottom-links-bg.png);
	background-repeat: no-repeat;
	background-position: -13px -96px;
	text-indent: -9999px;
	display: block;
	height: 63px;
	width: 220px;
	cursor: pointer;
}
.bottom-block a { padding-left: 0px; }

.bottom-block p {
	margin-left: 120px;
	color: #a9a9a9;
	font: 9px/12px Tahoma, Arial, sans-serif;
}
.bottom-block.bottom-block-over  h1 {background-position: -13px 0px;}
.blog-block.bottom-block-over  h1	{ background-position: -296px 0px; }
.contact-block.bottom-block-over h1 		{ background-position: -579px 0px; }
.cu3er-block.bottom-block-over h1 		{ background-position: -813px 0px; }

.bottom-block-over p {
	color: #333;
	cursor: pointer;
}
.bottom-block-over a {
	color: #333;
	text-decoration: underline;
}
.cu3er-block h1 { background-position: -813px -96px; }
.blog-block h1 { background-position: -296px -96px; }
.contact-block h1 { background-position: -579px -96px; }
.slide {
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 408px;
	width: 960px;
	font-size: 11px;
	line-height: 16px;
	color: #FFF;
	float: left;
}
.slide p {
	color: #FFF;
	font-family:Helvetica;
	font-size:14px;
	line-height:1.5;
	margin: 0;
	padding-right: 40px;
}
.slide p strong {
	color: #FFF;
	font-weight: bold;
}
.slide h1 {
	color: #00ccff;
/*	text-indent: -99999px;*/
}



.sl-aboutme {background-image: url("../images/slides/aboutmebg.jpg");}
.sl-aboutme h1 {
	width: 200px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-top: 70px;
	margin-bottom: 10px;
	font-size:
	cursor: pointer;
	font-size:70px;
	font-family:Tahoma;
}
.sl-work{background-image: url("../images/slides/workbg.jpg"); }
.sl-blog { background-image: url("../images/slides/blogbg.jpg"); }
.sl-photography{ background-image: url("../images/slides/photographybw.jpg"); }
.sl-home { background-image: url("../images/slides/aboutmebg.jpg"); }
.sl-photography{ background-image: url("../images/slides/photographybw.jpg"); }
.sl-contactme{background-image: url("../images/slides/contactme.jpg");}

.sl-home p {
	margin-top: 315px;
	width: 600px;
	margin-left: 80px;
}


.sl-about-content p b {
	font: normal 16px Tahoma, Geneva, sans-serif;
	color: #999;
}
.sl-about .about-contact{
	background-position: -300px -90px;
	margin-top: 55px;
}
.overlay {
	left:546px;
	margin-left:15px;
	position:relative;
	text-align:justify;
	top:105px;
	width:399px;
}

/*.overlay #qod-quote{
	position: relative;
	width: 250px;
	color:#FF00FF;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:14px;
	height:100%;
}

.overlay #qod-text{
	position: relative;
	width: 250px;
	font: normal 16px Tahoma, Geneva, sans-serif;
	color: #999;
}

.overlay #qod-author{
	position: relative;
	width: 250px;
	font: bold 10px Tahoma, Geneva, sans-serif;
	color: #00ccff;
}*/

.slide .more{ margin-top: 25px; }
.more a {
	padding: 1px 11px 2px 0px;
	border: 0;
	line-height: 25px;
	color: #00ccff;
	background-image: url("../images/arrow_red.gif");
	background-position: right 6px;
	background-repeat: no-repeat;
}
.more a:hover {
	color: #FFF;
	padding-right: 13px;	
}


#JFmasterContainer{
	height:700px;
	padding-top:100px;
	text-align:left;
	width:100%;
	/* background-image: url(bg_snow.jpg); */
}



#JFcontainer, #JFcontainer-bottom {
	margin: 0 auto;
	text-align: left;
	width: 960px;
}


#JFcontent {
	float: left;
	clear: both;
	width: 960px;
	margin-top: -15px;
}
#JFslides {
	position: relative;
	z-index: 3;
	left: 0px;
	top: 0px;
	overflow: hidden;
	background-color: #000;
	height: 408px;
}