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

/* My own classes */
a{ color: #FFCC00; outline:none;}
p{ text-align:left;}
body{color:#111111; font-family:  "Helvetica Neue", Helvetica, "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Verdana, Arial, sans-serif; font-size:13px; text-align: left;}
img{outline:none;}
h1, h2, h3{	font-family:Georgia, "Times New Roman", Times, serif; text-align:left;}

#wrapper{
	width:1024px;
	margin:0 auto;
}

#container{
	width:1024px;
	height:700px;
	background-image: url(../img/background-ny.jpg);
	background-position: top;
	background-repeat:no-repeat;
	background-color: #FFFFFF;
	float:left;
}


#left-column{
	width: 400px;
	float:left;
}

#left-column #logo{ 
	margin: 32px 20px 10px;

}


.introduction{ float:left;
height:240px;
margin:50px 0 0 30px;
width:260px;
color: #FCFCFC;
font-size:14px;
line-height:1.67}

.introduction h1{ color: #FCFCFC; margin-bottom:38px; }




#center-column{
	float:left;
	text-align:right;
	width:140px;
	margin-left:10px;
}
#center-column ul{
	margin:57px 0px 0px;
	height:50px;
}	
#center-column li{
	list-style:none;
	margin-bottom:45px;
}


#right-column{
	float:right;
	width: 470px;
}

#right-column ul{
	height:50px;
	margin-top: 50px;
	margin-left:0;
}
#right-column li{
	list-style:none;
	margin-bottom:30px;
	height: 50px;
	width: 100%;
}

#right-column li a{
	height: 50px;
	display:block;
}

#right-column li#software-engineer a{
	background-image:url(../img/nav01.png);
	background-repeat:no-repeat;
	background-position:top;
	width:394px;
	height:50px;
}
#right-column li#software-engineer a:hover{
	background-position:0px -48px;
}



#right-column li#web-developer a{
	background-image:url(../img/nav02.png);
	background-repeat:no-repeat;
	background-position:top;
	background-position:-7px 0;
	width:337px;
	height:50px;
}
#right-column li#web-developer a:hover{ 
	background-position:-7px -49px;
}

#right-column li#graphics-designer a{
	background-image:url(../img/nav03.png);
	background-repeat:no-repeat;
	background-position:top;
	background-position:5px 0;
	width:394px;
	height:50px;
}
#right-column li#graphics-designer a:hover{
	background-position:5px -49px;
}



#right-column li#digital-photographer a{
	background-image:url(../img/nav04.png);
	background-repeat:no-repeat;
	background-position:top;
	width:451px;
	height:50px;
}
#right-column li#digital-photographer a:hover{
	background-position:0 -50px;
}




#right-column li#musician a{
	background-image:url(../img/nav05.png);
	background-repeat:no-repeat;
	background-position:7px 0;
	width:214px;
	height:50px;
}
#right-column li#musician a:hover{ 
	background-position:7px -48px;
}




#right-column li#blogger a{
	background-image:url(../img/nav06.png);
	background-repeat:no-repeat;
	background-position: 3px 0px;
	width:207px;
	height:50px;
}
#right-column li#blogger a:hover{ 
	background-position:3px -51px;
}



/************************ NAVIGATION ************************/
#container #nav{background-image:url(../img/navigation-bckgrnd.png); background-repeat:no-repeat; background-position:0 0; height:40px; float:left; width:982px; margin:20px;}
#nav ul{margin:0; padding:0; list-style-type:none; float:left; width:984px;}
#nav ul li{ display:block;}
#nav ul li a{height:0px; padding-top:40px; float:left; text-indent:-999em;}

#nav ul li#home a{ width:140px; }
#nav ul li#blog a{ width:130px;}
#nav ul li#projects a{ width: 154px;}
#nav ul li#photography a{ width:206px;}
#nav ul li#contact a{ width:214px; margin-left:138px;}



#nav ul li#home a:hover{ background-image: url(../img/nav_home.png); width:140px; }
#nav ul li#blog a:hover{ background-image: url(../img/nav_blog.png); width:130px;}
#nav ul li#photography a:hover{ background-image:url(../img/nav_photo.png); width:206px;}
#nav ul li#projects a:hover{ background-image: url(../img/nav_projects.png); width:154px;}
#nav ul li#contact a:hover{ background-image: url(../img/nav_contact.png); width:214px;}


body#blog #nav ul li#blog a{ background-image: url(../img/nav_blog.png); width:130px;}
body#photography #nav ul li#photography a{ background-image:url(../img/nav_photo.png); width:206px;}
body#projects #nav ul li#projects a{ background-image: url(../img/nav_projects.png); width:154px;}
body#contact #nav ul li#contact a{ background-image: url(../img/nav_contact.png); width:214px;}
/************************ FOOTER ************************/
.footer{
text-align:center;
padding:0px 0px 30px;
clear:both;
width:100%;
height:40px;
}


/************************ TOOLTIP ************************/
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: transparent;
	padding: 5px;
	opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
#tooltip h3 { margin-bottom: 4px;}
#tooltip.pretty {
	background-image:url(../img/tip-bckgrnd.png);
	background-repeat:no-repeat;
	background-position:0 0; 
	border:medium none;
	font-family:Arial;
	height:100px;
	opacity:0.9;
	padding:20px;
	width:321px;
}


/************************ GLOBAL VARIABLES ************************/
.clear{
	clear:both;
}




/************************ CONTENT ************************/
#content{ float:left; width:984px; padding:0 20px 20px;}

#content #left-section{ width: 318px; float:left;}
#content #right-section { width: 646px; float:left; margin-left: 20px; background-color:#CCCCCC;}




#contact-left {
padding:20px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
background-image:url(../img/transparent-bckgrnd.png);
background-repeat:repeat;
border:1px solid #666666;
}


#contact-left #name{ font-size:12px; color:#FFFFFF;}
#contact-left #contact-sites{ margin-top:10px;}
p#firstlastname {margin-bottom:0; font-size:24px; font-weight:bold;}