html {
	background:url(../images/body-bg.jpg) top left repeat;
	}
#wrapper {
	background:url(../images/wrapper.png) top left no-repeat;
	margin:50px auto;
	padding:50px;
	width:640px;
	}
#header {
	float:left;
	height:360px;
	width:90px;
	}
#container {
	background:url(../images/spotlight.jpg) top left no-repeat;
	height:300px;
	overflow:hidden;
	padding:30px;
	position:relative;
	width:490px;
	}
	#content {
		float:left;
		height:260px;
		overflow:hidden;
		width:490px;
		}
	#about, #social, #portfolio, #contact {
		padding:0 0 300px 0;
		}
	.column-left {
		float:left;
		padding:0 15px 0 0;
		width:230px;
		}
	.column-right {
		float:left;
		width:245px;
		}

/* ---------------------------------------------------------------------------
	NAVIGATION STYLES
*/

#nav {
	height:360px;
	width:90px;
	}
	#nav li {
		float:left;
		position:relative;
		}
		#nav li a {
			cursor:pointer;
			display:block;
			height:90px;
			text-indent:-9999px;
			width:90px;
			}
			#nav .about a {
				background:url(../images/nav.png) 0 0 no-repeat;
				}
			#nav .social a {
				background:url(../images/nav.png) 0 -90px no-repeat;
				}
			#nav .portfolio a {
				background:url(../images/nav.png) 0 -180px no-repeat;
				}
			#nav .contact a {
				background:url(../images/nav.png) 0 -270px no-repeat;
				}
		#nav li a span {
			display:block;
			position:absolute;
			top:0;
			left:0;
			height:100%;
			width:100%;
			z-index:100;
			}
			#nav .about a span {
				background:url(../images/nav.png) -90px 0 no-repeat;
				}
			#nav .social a span {
				background:url(../images/nav.png) -90px -90px no-repeat;
				}
			#nav .portfolio a span {
				background:url(../images/nav.png) -90px -180px no-repeat;
				}
			#nav .contact a span {
				background:url(../images/nav.png) -90px -270px no-repeat;
				}


/* ---------------------------------------------------------------------------
	TYPOGRAPHY STYLES
*/

body {
	color:#555;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:20px;
	letter-spacing:0.2px;
	}
h1 {
	background:url(../images/logo.png) top left no-repeat;
	float:left;
	height:60px;
	position:relative;
	text-indent:-9999px;
	width:490px;
	}
h2 {
	color:#555;
	font-family:"Myriad Pro", Tahoma, Arial, sans-serif;
	font-size:24px;
	font-weight:bold;
	line-height:24px;
	margin-bottom:20px;
	}
p {
	margin-bottom:20px;
	}
a {
	color:#1fdbdb;
	}
a:link, a:visited, a:hover, a:active {
	text-decoration:none;
	}
a:hover, a:active {
	color:#43b5b5;
	}
a:focus {
	outline:none;
	}
	#social a:hover, #social a:active {
		text-decoration:none;
		}
b, strong {
	font-weight:bold;
	}
i, em {
	font-style:italic;
	}
address {
	line-height:16px;
	margin-bottom:20px;
	}

/* ---------------------------------------------------------------------------
	LISTS STYLES
*/

#about ul {
	margin-bottom:20px;
	}
	#about ul li {
		background:url(../images/bullet.jpg) 10px 6px no-repeat;
		padding:0 0 0 25px;
		}

#social ul li {
	background:url(../images/social-bg.jpg) top left no-repeat;
	cursor:default;
	float:left;
	height:50px;
	margin-bottom:10px;
        margin-left:130px;
	width:230px;
	}
	#social ul li img {
		float:left;
		margin:9px 16px 0 10px;
		}
	#social ul li.left {
		margin-right:30px;
		}
		big {
			color:#ddd;
			display:block;
			font-size:16px;
			margin:6px 0 -2px 0;
			}
		small {
			color:#999;
			font-size:11px;
			}
			small:hover {
				color:#bbb;
				}

#portfolio ul li {
	background:url(../images/portfolio-bg.jpg) top left no-repeat;
	float:left;
	height:60px;
	margin:0 14px 14px 0;
	padding:5px;
	width:60px;
	}
	#portfolio ul li.right {
		margin-right:0;
		}

#contact p {
	line-height:16px;
	margin-bottom:0px;
	}

/* ---------------------------------------------------------------------------
	FORMS STYLES
*/

input  {
	background:url(../images/input-bg.jpg) top left no-repeat;
	color:#ddd;
	font-size:11px;
	height:14px;
	margin:0 0 10px 0;
	padding:3px 10px;
	width:225px;
	}
#message {
	background:url(../images/message-bg.jpg) top left no-repeat;
	height:65px;
	}
#submit {
	background:url(../images/submit-bg.jpg) top left no-repeat;
	color:#222;
	cursor:pointer;
	height:20px;
	width:70px;
	}
.notification_error, .notification_ok {
	background:url(../images/error-bg.jpg) top left no-repeat;
	color:#222;
	float:right;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height:12px;
	height:36px;
	padding:2px;
	width:241px;
	}
	
/* ---------------------------------------------------------------------------
	OTHER STYLES
*/

.download {
	background:url(../images/download.jpg) top left no-repeat;
	display:block;
	height:30px;
	margin:22px 0 0 0;
	text-indent:-9999px;
	width:230px;
	}
.hide {
	display:none;
	visibility:hidden;
	}