@blue: #3bb2d9;
@text-color: #555;
@light-gray: #888;

ul, li, p, h1, h2, h3 { margin:0; padding:0; }
ul { list-style:none; }
img { border:none; }
* { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; }
* a { text-decoration:none; outline:none; }

body{
	margin:20px 0;
	padding:0;
	background:url(/images/background.jpg) no-repeat fixed center top #e2e2e2;
}
#menu {
	background:#fff;
	height:40px;
	
	ul {
		margin:0 auto;
		width:610px;
	}
	
	li {
		float:left;
		display:inline;
		margin:0 20px;
	}
	li a {
		float:left;
		display:block;
		height:40px;
		color:#000;
		text-indent:-9999px;
	}
	li.about a:hover, li.contact a:hover, li.resume a:hover {
		background-position:0 -40px!important;
	}
	li.about a.active, li.contact a.active, li.resume a.active {
		background-position:0 -40px!important;
	}
	li.about a {
		background:url(/images/nav-about.gif) no-repeat;
		width:175px;
	}
	li.contact a {
		background:url(/images/nav-contact.gif) no-repeat;
		width:129px;
	}
	li.resume a {
		background:url(/images/nav-resume.gif) no-repeat;
		width:180px;
	}
	
	.menu-box {
		background:url(/images/opacity.png);
		position:absolute;
		top:59;
		height:0;
		z-index:10!important;
		width:100%;
		height:100%;
		display:none;
		
		.content {
			background:url(/images/bg_box.png) no-repeat;
			position:absolute;
			left:50%;
			padding:20px 155px 0;
			width:350px;
			height:362px;
			display:none;
		}

		h3 {
			font-size:14px;
			color:@blue;
			margin:20px 0 5px;
			padding:0 5px
		}

	li {
		background:url(/images/plus.gif) no-repeat 0 5px;
		padding-left:10px;
                margin:0 9px;
		color:@light-gray;
	}
		
		p {
			font-size:13px;
			color:@light-gray;
			margin-bottom:10px;
			padding:0 5px
		}
		
		p span {
			font-size:14px;
			color:@text-color;
		}
	}
}
.shadow {
	background:url(/images/shadow.png) center no-repeat;
	height:30px;
}
#content {
	width:1000px;
	margin:0 auto 15px;
	
	a.portfolio {
		width:220px;
		height:280px;
		background:#FFF;
		padding:10px;
		float:left;
		border:1px solid #e0e0e0;
		color:@text-color;
		margin:0 10px 20px 0;
		
		img {
			border:1px solid #e0e0e0;
		}
		
		h2 {
			color:@blue;
			font-size:22px;
			margin:8px 0 6px;
		}
		
		p {
			margin-bottom:13px;
			line-height:15px;
		}
		
		.job {
			border-top:1px solid #e0e0e0;
			padding-top:7px;
			color:@light-gray;
		}
	}
}
a.portfolio:hover {
	background:#3bb2d9!important;
	
	img {
		border:1px solid #fff;
	}
	
	h2, p {
		color:#fff!important;
	}
	
	.job {
		border-top:1px solid #e0e0e0;
		color:#fff!important;
	}
}
.text {
	width:400px;
	float:left;
	margin-top:30px;
	
	h3 {
		color:@blue;
		font-size:22px;
		margin-bottom:15px;
	}

	h4 {
		color:@blue;
		font-size:18px;
		margin-bottom:10px;
	}
	
	p {
		font-size:14px;
		color:@light-gray;
		margin-bottom:10px;
	}

	ul {
		margin-bottom:10px;
	}

	li {
		background:url(/images/plus.gif) no-repeat 0 5px;
		padding-left:15px;
                margin-bottom:3px;
		color:@text-color;
	}
	
	a.site {
		color:@blue;
		font-size:14px;
		margin-bottom:20px;
		display:block;
	}
	
	a.back {
		background:url(/images/btn_back.png) no-repeat;
		width:102px;
		height:43px;
		text-indent:-9999px;
		display:block;
	}
	a.back:hover {
		background-position:0 -43px!important;
	}
}
.mac {
	background:url(/images/mac.png) no-repeat;
	float:left;
	width:600px;
	height:493px;
	margin-top:30px;
	
	img {
		margin:22px 0 0 86px;
	}
}
.clear { clear: both; }
a.twitter {
float:right;
clear:both;
text-indent:-9999px;
background:url(/images/twitter.gif) no-repeat;
display:block;
width:112px;
height:38px;
}
		input[type=text] {
			background:url(/images/form.gif) no-repeat;
			width:349px;
			padding:3px;
			height:17px;
			border:1px solid #e0e0e0;
			color:@light-gray;
		}
		
		textarea {
			background:url(/images/textarea.png) no-repeat;
			width:349px;
			padding:3px;
			height:57px;
			border:1px solid #e0e0e0;
			color:@light-gray;
		}
.message {
display:none;
border:1px solid #e0e0e0;
background:#fff;
padding:10px;
margin-bottom:20px;
text-align:center;
color:@light-gray;
}