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

html {
	margin: 0;	
}

body {
	background: url(img/bg.jpg) repeat;
	font-family: Verdana, Arial, sans-serif;
	font-size:11px;
	color: #666666;
	line-height:1.5;
	margin: 0;
	padding:0;
	text-align:left;
}

a:link, a:visited {
	color: #54778f;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #ff9933;
	text-decoration: underline;
}

/*---MAIN ELEMENTS---*/

#mainWrap {
	margin-left: auto;
	margin-right:auto;
	text-align:center;
}

#headerContainer {
	height: 104px;
	min-width: 1012px;
	width: 100%;
	background: #FFF url(img/header_bg.jpg) repeat-x;
	*margin-bottom: 30px;
}

#header {
	margin: auto;
	text-align: left;
	width: 940px;
}

#contentContainer {
	background: url(img/bg.jpg) repeat;
	width: 100%; 
	height: 470px;
	display: table;
}

#position { 
	display: table-cell; 
	vertical-align: middle; 
	width: 100%; 
	text-align: center; 
	margin:0;
	padding:0;
}

#content {
	margin: auto;
	text-align: left;
	width: 940px;
}

#footerContainer {
	min-width: 1012px;
	width: 100%;	
}

#logo img {
	border: none;
}

#logo {
	padding-top: 25px;
	padding-left: 23px;
	float: left;
}

/*---PORTFOLIO ELEMENTs---*/

#portfolio #footerContainer {
	background: #c6e2ec url(img/about_footerBG.jpg) top repeat-x;
	height: 181px;
	text-align: center;
}

#portfolioFooter {
	background: url(img/portfolio_look.png) no-repeat top left;
	width: 324px;
	height: 43px;
	margin: auto;
	top: 125px;
	text-indent: -900em;
	position: relative;
}

#whaleFooter {
	position: absolute;
	width: 306px;
	height: 226px;
	top: -192px;
	left: 364px;
}

#portfolio #content {
	background: url(img/portfolio_contentBG.png) no-repeat top left;
	text-align: center;
	height: 420px;
	position: relative;
	left: -17px;
	top: -10px;
}

#folioWorks {
	margin: auto;
	width: 703px;
	height: 329px;
	position: relative;
	background: url(img/portfolio_workBorder.png) no-repeat top left;
	top: 45px;
	left: 17px;
}

#folioBar a {
	width: 140px;
	height: 108px;
	margin: 6px 8px;
	display: block;
	_display: inline;
	float: left;
	text-indent: -900em;
	background-repeat: no-repeat;
	background-position: left bottom;
	border: #CCCCCC 1px solid;
}

#folioBar a:hover {
	background-position: left top;
}

#folioBar {
	width: 634px;
	height: 204px;
	*width: 610px;
	*height: 240px;
	background: none;
	margin: 0 auto;
	padding-top: 63px;
}

#folioBar #pnNav {
	position: absolute;
	width: 690px;
	top: 170px;
	left: 7px;
	border: none;
}

/*---ABOUT ELEMENTS---*/

#about #footerContainer {
	background: #c6e2ec url(img/about_footerBG.jpg) top repeat-x;
	height: 181px;
	text-align: center;
}

#aboutFooter a{
	background: url(img/about_resume.jpg) no-repeat top left;
	width: 294px;
	height: 40px;
	margin: auto;
	top: 128px;
	text-indent: -900em;
	display: block;
	outline: none;
	position: relative;
}

#aboutContent h1{
	margin: 0;
	padding: 0;
	widht: 152px;
	height: 27px;
	text-indent: -900em;
	background: url(img/about_Aboutmetext.png) no-repeat;
}

#aboutText {
	background: url(img/about_textBoxBG.jpg) no-repeat top left;
	postion: relative;
	left: -14px;
	width: 529px;
	height: 348px;
	float: left;
	padding-left: 46px;
	padding-top: 90px;
	_display: inline;
}

#portrait {
	float:right;
	display: block;
	width: 324px;
	height: 438px;
	_display: inline;
}

#aboutContent {
	width: 443px;
	height: 305px;
	overflow: auto;
	padding-right: 35px;
	line-height: 1.5;
}

/*---CONTACT ELEMENTS---*/

#contact #footerContainer {
	background: #c6e2ec url(img/footer_bg.jpg) top repeat-x;
	height: 58px;
	padding-top: 20px;
	text-align: center;
}

#contactFooter {
	background: url(img/contact_footer_text.png) no-repeat top left;
	width: 956px;
	height: 45px;
	margin: auto;
	text-indent: -900em;
}

#contactBox {
	width: 548px;
	height: 570px;
	background:url(img/contact_box.png) top left no-repeat;
	position: relative;
	top: 55px;
}

#contact img#welcomeBird {
	position: absolute;
	top: -38px;
	left: 30px;
	width: 32px;
	height: 45px;
}

#contact img#emailText {
	position: absolute;
	top: 35px;
	left: 35px;
	width: 245px;
	height: 67px;
}

#contact img#contactWhale {
	position: absolute;
	top: -28px;
	left: 632px;
	width: 323px;
	height: 505px;
}

#contact img#contactBird {
	position: absolute;
	top: 394px;
	left: 394px;
	width: 82px;
	height: 106px;
}
#contact img#cloudTop {
	position: absolute;
	top: -39px;
	left: 486px;
	width: 138px;
	height: 79px;
}

#contact img#cloudBottom {
	position: absolute;
	top: 396px;
	left: 67px;
	width: 157px;
	height: 82px;
}

/*---CONTACT FORM ELEMENTS---*/

#contact div#contactForm {
	position: absolute;
	top: 128px;
	left: 35px;
	width: 458px;
	height: 223px;
}

#contactForm p {
	margin: 0;
	margin-bottom: 10px;
}

label {
	float: left;
	text-align: left;
	width: 86px;
	height: 20px;
	display: block;
	text-indent: -900em;
	position: relative;
}

label.name {
	background: url(img/contact_yourName.png) no-repeat;
	top: 7px;
}

label.email {
	background: url(img/contact_yourEmail.png) no-repeat;
	top: 5px;
}

label.message {
	background: url(img/contact_yourMessage.png) no-repeat;
	top: 3px;
}

label.submit {
	visibility: hidden;
	top: 3px;
}

input#name, input#email {
	background-color: white;
	border: 1px solid #CCC;
	padding-left:5px;
	padding-top:5px;
	display: block;
	width: 363px;
	height: 20px;
	_width: 360px;
	_height: 17px;
}

div#submit_stamp {
	display: block;
	width: 123px;
	height: 59px;
	background: url(img/contact_btn_submit.png) no-repeat;
	position: absolute;
	left: 333px;
	top: -95px;
	text-indent: -900em;
}

input#submit_btn {
	background: #EAEAEA;
	text-transform: uppercase;
	font-size: 10px;
	text-align: center;
	display: block;
	width: 370px;
	_width: 360px;
	height: 20px;
	cursor: pointer;
	border: #CCC;
	color: #666;
}

textarea#message {
	background-color: white;
	border: 1px solid #CCC;
	display: block;
	width: 363px;
	height: 90px;
	padding-left:5px;
	padding-top:5px;
	_width: 360px;
}

/*---HOMEPAGE ELEMENTS---*/

#home #footerContainer {
	background: #c6e2ec url(img/footer_bg.jpg) top repeat-x;
	height: 163px;
	padding-top: 35px;
}

#welcome {
	width: 481px;
	height: 428px;
	background:url(img/home_box.png) top left no-repeat;
	position: relative;
	top: 45px;
}

#home img#welcomeText {
	display: inline-block;
	margin: 30px;
}

#home #welcomeTextContent {
	position: absolute;
	visibility: hidden;
}

#home img#welcomeBird {
	position: absolute;
	top: -40px;
	left: 16px;
	width: 32px;
	height: 45px;
}

img#welcomeCloud {
	position: absolute;
	top: 302px;
	left: 108px;
	width: 157px;
	height: 82px;
}

img#welcomeWhale {
	position: absolute;
	top: -42px;
	left: 491px;
	width: 439px;
	height: 406px;
}

#thumbnailBar {
	width: 983px;
	height: 123px;
	position: relative;
	margin: auto;
	padding-top: 13px;
	padding-left: 22px;
	text-align: center;
	background: url(img/home_thumbnailBar.png) no-repeat;
}

#thumbnailBar a {
	background-repeat: no-repeat;
	background-position: left bottom;
	display: block;
	width: 218px;
	height: 108px;
	text-indent: -900em;
	border: #CCCCCC 1px solid;	
}

#thumbnailBar a:hover {
	background-position: left top;
}

#thumbnailBar #pnNav {
	position: absolute;
	width: 984px;
	top: 60px;
	left: 11px;
}

#pnNav #prev {
	float: left;
	display: inline;
}

#pnNav #next {
	float:right;
	display: inline;
}

#pnNav a{
	height: 16px;
	width: 8px;
	display:block;
	text-decoration:none;
	text-indent: -900em;
	outline:none; 
	border: none;
}

#pnNav #prev a{
	background: url(img/arrow_left.png) no-repeat left top;
}

#pnNav #prev a:hover{
	background: url(img/arrow_left.png) no-repeat left top;
}

#pnNav #next a{
	background: url(img/arrow_right.png) no-repeat left top;
}

#pnNav #next a:hover{
	background: url(img/arrow_right.png) no-repeat left top;
}