/**************** MAIN LAYOUT ****************/
* {
	margin:0;
	padding:0;
}
html, body {
	height:100%; /* needed for container min-height */
}

#pageWrapper{
	position: relative; /* needed for footer positioning*/
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */	
	text-align:left;
}
#page{
	min-height: 500px;
	width: 940px;
	margin: 0 auto; /* center */
	padding-bottom: 290px; /* bottom padding for footer */
}

#header{
	position: relative;
	height: 199px;
}

#logo{
	position: absolute;
	top: 68px;
	left: 45px;
}

#footerWrapper{
	position: absolute;
	bottom:0; /* stick to bottom */
	height: 290px;
	width: 100%;
}
#footer{
	position: relative;;
	height: 290px;
	width: 940px;	
	margin: 0 auto; /* center  */
}

/******* MAIN LAYOUT COLORS AND BACKGROUNDS ********/
body{ background: url(img/header-line.gif) repeat-x #0F1219;}
#header{ background: url(img/header-bg.jpg);}
#page{background:url(img/body-bg.jpg) no-repeat 0px 200px;}
#footerWrapper{ background:url(img/footer-line.gif) repeat-x;}
#footer{ background:url(img/footer-bg.jpg) no-repeat 0px 5px;}


/*********** DEFAULT FONTS AND COLORS ************/


body{
	color: #DDE;
	font: 12px/18px  Tahoma, Arial, Helvetica, Verdana, sans-serif;
}
a, a:visited{
	color: #D3D6DA;
	text-decoration:none;
}
a:hover {
	color: #FFF; text-decoration: underline;
}
a img{ border: none;}
h1, h2, h3{ 
	font-weight: normal;
	padding-bottom: 10px;
}
h1{ font-size: 22px; line-height: 22px;}
h2{ font-size: 21px; }
h3{ font-size: 20px; }

p{padding-bottom: 10px;}



/********** MENU ***********/

#menu{
	position: absolute;
	top: 121px;
	left: 665px;
}
#menu a{
	display: block;
	float: left;
	margin-right: 1px;
	outline: none; /* hide dotted outline in Firefox */
}
#portfolioLink{
	background: url(img/portfolio-over.jpg) no-repeat;
}
#aboutLink{
	background: url(img/about-over.jpg) no-repeat;
}
#contactLink{
	background: url(img/contact-over.jpg) no-repeat;
}







/********** CONTENT ***********/

#aboutBox{
	margin: 72px 0 120px 0px;
	padding-left: 92px;
	width: 490px;
}

#content #portfolioBox{
	position: relative;
	float:left;
	background: url(img/portfolioBox.jpg) no-repeat 92px 0px;
	margin: 72px 0 20px 0px;
	padding-left: 92px;
	padding-top: 5px;
	width: 146px;
	height: 546px;
}

#content #portfolioBox h1{
	position: absolute;
	left: 97px;
	top: -24px;
}
#content #portfolioBox a{
	display: block;
	margin: 0 0 5px 7px;
	padding: 0;
	height: 46px;
	width: 132px;
	outline: none; /* hide dotted outline in Firefox */
}
#content #portfolioBox a img{
	padding: 0;
}

#content #rightBox{
	float:left;
	width: 630px;
	height: 650px;
	margin: 71px 0 0 68px;
	/*background: #333;*/
}
#content .portfolioItem{
	position: relative;
	width: 500px;
}
#content .portfolioItem .description{
	position: absolute;
	top: 70px;
	left: 420px;
	width: 155px;
}

#p1{	background: #Fc0; height: 400px;}
#p2{	background: #c0D;	height: 600px;}
#p3{	background: #0Fc;	}

.clear{ clear: both;}



/****  FORM ****/

#form{
	position: absolute;
	background: url(img/form-bg.gif) no-repeat;
	width: 390px;
	height: 155px;
	right: 0px;
	top: 30px;
}
#form div{
	display: block;
	position: relative;
}

#form input, #form textarea{
	font: 12px/18px  Tahoma, Arial, Helvetica, Verdana, sans-serif;
	position: absolute;
	border: none;
	background: none;
}
#form input{
	width: 150px;
	display: block;
	height: 21px;
	top: 0;
	padding: 7px 5px 0;
}
#form #email{
	left: 170px;
}
 #form textarea{
 	top:36px;
	width: 320px;
	height: 109px;
	padding: 5px;
}
 #form a{
 	display: block;
	position: absolute;
	top: 100px;
	right: 0;
 }
 #form #msg{
	font-size: 14px;
 	position: absolute;
	top: 160px;
 }
 
 #form #msg .error{
 	color: #F63; 
}
 

/********/

#free{
	position: absolute;
	width: 250px;
	text-align: right;
	top: 30px;
	right: 415px;
}

#copyright {
	position: absolute;
	top: 22px;
	left: 91px;
}