@charset "utf-8";
/* CSS Document */
h2{
color:#00FF00;
}
a {
	color:#FFFF00;
	text-decoration:underline;
}
body {
background-image:url(images/body-bg.jpg);
background-repeat:repeat-x;
	background-color:#1a275e;
	z-index:1;
	font: 12px Geneva, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}
#content_top_bg {
	background-color:#5151ff;
	width: 100%;
	height:229px;
	margin:auto;
	z-index:1;
	position:absolute;
	top: -1px;
	left:-1px;
	padding:5px;
}

.content {
	width:100%;
	text-align:center;
	margin:auto;
	position:absolute;
	padding:4px;
	z-index:3;
	
}

/*here i was able to measure the height of the image in firworks, find the midpoint to the exact pixle on the canvas ruler, and mad the background div the same height.*/

#content_bottom_bg {
	background-color:#1a275e;
	width: 100%;
	height:400px;
	margin:auto;
	z-index:1;
	position:absolute;
	top:238px;
	left:-1px;
	padding:5px;
}

.content_btm {
	top: 300px;
	width:700px;
	text-align:left;
	margin:auto;
	position:absolute;
	padding:4px;
	z-index:3;
	left: -75px
}

.content_lft {

	text-align:left;
	margin:auto;
	position:absolute;
	padding:4px;
	z-index:3;
	
}


.content_rt {
	width:375px;
	text-align:left;
	margin:auto;
	position:absolute;
	left: 505px;
	z-index:3;
	padding:4px;
}
div.jGrowl div.design {
	-moz-border-radius: 	0px;
	-webkit-border-radius:	0px;
	opacity: 				1;
	filter: 				alpha(opacity = 70);
	height: 				400px;
	padding: 				0px;
	overflow: 				hidden;
	border: 			#CCCCCC solid 1px;
	margin: auto;
}
div.jGrowl div.design div.header {
	margin: auto;
	padding: 				5px;
}
.footer {
	position:relative;

}
#header {
	background-color:none;
	background-image:url(images/header.jpg);
	background-repeat:repeat-x;
	background-position:top center;
	left:-1px;
	right: -1px;
	text-align:center;
	width:100%;
	margin:auto;
	height:460px;
	z-index:2;
	position:absolute;
	top: 0px;
}
.info_rt {
	position:relative;
	margin-right:30%;
}
img {
	border:none;
}
textarea {
	width: 305px;
	font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-color:#1a275e;
	color: #fff;
	border: 1px solid #284279;
	margin-right: 0px;
}
input.email {
	width: 127px;
	color: #fff;
	padding-left: 20px;
	background: url(images/email.png);
	background-repeat: no-repeat;
	background-position: left center;
	border: 1px solid #284279;
}
input.name {
	width: 127px;
	color: #fff;
	padding-left: 20px;
	background: url(images/name.png);
	background-repeat: no-repeat;
	background-position: left center;
	border: 1px solid #284279;
}
.success {
	border: #009900 solid 2px;
	height:120px;
	background-image:url(images/Thumb_Up_.png);
	background-repeat:no-repeat;
	background-position:center;
	background-color: #5EFFAE;
	font: 11px Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#006600;
}
.error {
	height:120px;
	border: #990033 solid 2px;
	background-image:url(images/Thumb_dwn_.png);
	background-repeat:no-repeat;
	background-position:center;
	background-color: #FF8A8A;
	font: 11px Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#990033;
	padding:4px;
}
.wrapper {
	width: 800px;
	margin: auto;
	text-align:left;
	position:relative;
	top: 220px;
	z-index:5;
}
.pics { 
	position: absolute;
	 
    height:  250px;  
    width:   550px;  
    padding: 0;  
    margin:  0;
	 top:  50px; 
    left: -75px ;
} 
 
.pics img {  
      
    width:  550px; 
    height: 250px; 
    top:  0; 
    left: 0 ;
}
.portfolio{
padding:4px;
height:225px;
clear:both;

}
#inspiration { 
	position: absolute;
	 
    height:  250px;  
    width:   550px;  
    padding: 0;  
    margin:  0;

}