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

/*
============================================================================
GENERAL
============================================================================
*/
html, body {
	background: #FFFFFF;
	width: 100%;
	height: 100%;
	font: 100%/125% Arial, Helvetica, Verdana, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

h1, h2, h3, h4, h5  {
	font: 100% Helvetica, Arial, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ul	{
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

ol	{
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

li	{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 15px 0px;
}

a {
	color: #494949;
	text-decoration: none;
}

a:hover {
	color: #999999;
}

img {
	border: 0px none;
}

.hide {
	display: none;
}

.clear {
	clear: both;
}


/*
============================================================================
PAGE
============================================================================
*/
#page {
	position: relative;
}

#logo {
	position: absolute;
	width: 150px;
	height: 150px;
	left: 30px;
	bottom: 30px;
	z-index: 20;
}

#logo a {
	background: url('images/logo.png') no-repeat 0px 0px;
	position: relative;
	display: block;
	width: 150px;
	height: 150px;
	overflow: hidden;
	text-indent: -90000px;
}

#logo a:hover {
	background: url('images/logo.png') no-repeat 0px -150px;
}


/*
============================================================================
MENU
============================================================================
*/
#menu {
	background: url('images/menu-bg.png') repeat 3px 3px;
	position: absolute;
	font: lighter 200%/112.5% Helvetica, Arial, sans-serif;
	padding: 5px 0px 5px 0px;
	left: 190px;
	bottom: 100px;
	z-index: 20;
}

#menu li {
	position: relative;
	float: left;
	padding: 0px 15px 0px 15px;
}

#menu li a {
	background: url('images/menu.png') no-repeat 0px 0px;
	position: relative;
	display: block;
	height: 50px;
	overflow: hidden;
	text-indent: -90000px;
}

#menu .projects {
	background: url('images/menu.png') no-repeat 0px 0px;
	width: 105px;
}

#menu .projects:hover, #menu .active .projects {
	background: url('images/menu.png') no-repeat 0px -50px;
}

#menu .about {
	background: url('images/menu.png') no-repeat -105px 0px;
	width: 74px;
}

#menu .about:hover, #menu .active .about {
	background: url('images/menu.png') no-repeat -105px -50px;
}

#menu .contact {
	background: url('images/menu.png') no-repeat -179px 0px;
	width: 115px;
}

#menu .contact:hover, #menu .active .contact {
	background: url('images/menu.png') no-repeat -179px -50px;
}


/*
============================================================================
PANELS
============================================================================
*/
#slide {
	position: relative;
	width: 100%;
}

.panel {
	background: #FFFFFF;
	display: none;
	width: 100%;
	padding: 0px 0px 180px 0px;
	left: 0px;
	top: 0px;
}

.panel-projects {
	position: relative;
}

.panel-single, .panel-about, .panel-contact {
	position: absolute;
}

#current-panel {
	display: block;
	z-index: 15;
}

#old-panel {
	display: block;
	z-index: 10;
}


/*
============================================================================
PROJECTS
============================================================================
*/
#projects-content {
	position: relative;
	color: #494949;
	font: lighter 350%/112.5% Helvetica, Arial, sans-serif;
	padding: 20px 20px 10px 30px;
}

#projects a {
	position: relative;
}

{
	border-bottom: 2px solid #888888;
}

.first {
	position: relative;
	display: inline-block;
}

.number {
	position: absolute;
	display: block;
	width: 40px;
	height: 25px;
}

.number-1 {
	background: url('images/numbers.png') no-repeat 0px 0px;
	left: -5px;
	top: -3px;
}

.number-2 {
	background: url('images/numbers.png') no-repeat 0px -25px;
	left: -10px;
	top: -3px;
}

.number-3 {
	background: url('images/numbers.png') no-repeat 0px -50px;
	left: -10px;
	top: -3px;
}

.number-4 {
	background: url('images/numbers.png') no-repeat 0px -75px;
	left: -10px;
	top: -3px;
}

.number-5 {
	background: url('images/numbers.png') no-repeat 0px -100px;
	left: -10px;
	top: -3px;
}

.number-6 {
	background: url('images/numbers.png') no-repeat 0px -125px;
	left: -10px;
	top: -3px;
}

.number-7 {
	background: url('images/numbers.png') no-repeat 0px -150px;
	left: -10px;
	top: -3px;
}

.number-8 {
	background: url('images/numbers.png') no-repeat 0px -175px;
	left: -10px;
	top: -3px;
}

.number-9 {
	background: url('images/numbers.png') no-repeat 0px -200px;
	left: -10px;
	top: -3px;
}

.number-10 {
	background: url('images/numbers.png') no-repeat 0px -225px;
	left: -17px;
	top: -3px;
}
.number-11 {
	background: url('images/numbers.png') no-repeat 0px -250px;
	left: -17px;
	top: -3px;
}

.number-12 {
	background: url('images/numbers.png') no-repeat 0px -275px;
	left: -17px;
	top: -3px;
}

.number-13 {
	background: url('images/numbers.png') no-repeat 0px -300px;
	left: -17px;
	top: -3px;
}

.number-14 {
	background: url('images/numbers.png') no-repeat 0px -325px;
	left: -17px;
	top: -3px;
}

.number-15 {
	background: url('images/numbers.png') no-repeat 0px -350px;
	left: -17px;
	top: -3px;
}

.number-16 {
	background: url('images/numbers.png') no-repeat 0px -375px;
	left: -17px;
	top: -3px;
}

.number-17 {
	background: url('images/numbers.png') no-repeat 0px -400px;
	left: -17px;
	top: -3px;
}

.number-18 {
	background: url('images/numbers.png') no-repeat 0px -425px;
	left: -17px;
	top: -3px;
}

.number-19 {
	background: url('images/numbers.png') no-repeat 0px -450px;
	left: -17px;
	top: -3px;
}

.number-20 {
	background: url('images/numbers.png') no-repeat 0px -475px;
	left: -17px;
	top: -3px;
}

.number-21 {
	background: url('images/numbers.png') no-repeat 0px -500px;
	left: -17px;
	top: -3px;
}

.number-22 {
	background: url('images/numbers.png') no-repeat 0px -525px;
	left: -17px;
	top: -3px;
}

.number-23 {
	background: url('images/numbers.png') no-repeat 0px -550px;
	left: -17px;
	top: -3px;
}

.number-24 {
	background: url('images/numbers.png') no-repeat 0px -575px;
	left: -17px;
	top: -3px;
}

.number-25 {
	background: url('images/numbers.png') no-repeat 0px -600px;
	left: -17px;
	top: -3px;
}

.number-26 {
	background: url('images/numbers.png') no-repeat 0px -625px;
	left: -17px;
	top: -3px;
}


/*
============================================================================
ABOUT
============================================================================
*/
#about-content {
	position: relative;
	color: #555555;
	font: 350%/112.5% Helvetica, Arial, sans-serif;
	font-weight: 100;
	padding: 20px 20px 10px 30px;
}

.field {
	position: absolute;
	display: block;
	height: 32px;
}

.branding {
	background: url('images/fields.png') no-repeat 0px 0px;
	width: 31px;
	right: -23px;
	top: -3px;
}

.illustration {
	background: url('images/fields.png') no-repeat -31px 0px;
	width: 21px;
	right: -20px;
	top: -3px;
}

.print {
	background: url('images/fields.png') no-repeat -52px 0px;
	width: 17px;
	right: -17px;
	top: -3px;
}

.web {
	background: url('images/fields.png') no-repeat -69px 0px;
	width: 20px;
	right: -20px;
	top: -3px;
}

.art {
	background: url('images/fields.png') no-repeat -89px 0px;
	width: 25px;
	right: -30px;
	top: -8px;
}

.consulting {
	background: url('images/fields.png') no-repeat -114px 0px;
	width: 14px;
	right: -14px;
	top: -3px;
}


/*
============================================================================
PROJECTS
============================================================================
*/
#single-content {
	position: relative;
	padding: 20px 20px 10px 30px;
}