﻿body {
	margin:0px;
	background-color:#222;
	}
	
img {border:0px;}

form {border:0px;}
	
#msft {
	position:absolute;
	top:86px;
	left:0px;
	border:0;
	}
	
#clear {
	clear:both;
	}

/* TOP PATTERN : which really serves no purpose besides making the entire site look fly //////////////////////////////*/
	
.top_pattern {
	height:19px;
	background-image:url(../images/top_pattern.jpg);
	}

/* NAME BAND : because it's not really a banner //////////////////////////////////////////////////////////////////////*/
	
.name_container {
	height:107px;
	background-image:url(../images/top_band.jpg);
	}
	
.name_bucket {
	width:784px;
	}
	
.name_column_left {
	float:left;
	width:120px;
	text-align:left;
	}
	
.name_column_middle {
	float:left;
	width:544px;
	height:70px;
	overflow:hidden;
	padding-top:20px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:25px;
	color:#eee;
	text-transform:uppercase;
	font-weight:bold;
	letter-spacing:-2px;
	}
	
.ThePortfolioOf {
	position:relative;
	top:8px;
	font-size:14px;
	color:#CCC;
	text-transform:none;
	font-weight:normal;
	letter-spacing:normal;
	}

#name_vert {
	margin-bottom:18px;
	margin-left:16px;
	margin-right:16px;
	}
	
.title {
	font-weight:normal;
	text-transform:capitalize;
	letter-spacing:-1.5px;
	}
	
.name_column_right {
	float:left;
	width:120px;
	text-align:left;
	}

/* NAVIGATION : the operator of this pocket navigator //////////////////////////////////////////////////////////*/
	
.nav_container {
	height:78px;
	background-image:url(../images/nav_bg.jpg);
	}
	
.nav_bucket {
	width:784px;
	}
	
.nav_column_left {
	float:left;
	width:120px;
	text-align:left;
	}
	
.nav_column_middle {
	float:left;
	width:544px;
	text-align:left;
	}
	
.nav_about {
	float:left;
	width:93px;
	height:42px;
	}
	
.nav_work {
	float:left;
	width:91px;
	height:42px;
	}
	
.nav_contact {
	float:left;
	width:95px;
	height:42px;
	}
	
.nav_column_right {
	float:left;
	width:120px;
	text-align:left;
	}

/* CONTENT - GLOBAL, ABOUT, WORK ////////////////////////////////////////////////////////////////////////////////////////////*/
	
.content_container {
	background-image:url(../images/pattern.jpg);
	min-height:234px;
	}

.content_bucket {
	width:784px;
	}
	
.content_column_left {
	float:left;
	width:120px;
	text-align:left;
	}
	
.content_column_middle {
	float:left;
	width:544px;
	text-align:left;
	}

.content_column_middle_a {
	float:left;
	width:567px;
	text-align:left;
	}
	
.content_about {
	float:left;
	width:349px;
	padding-right:25px;
	padding-top:20px;
	padding-left:4px;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#555;
	line-height:17px;
	}
	
.content_about a {
	color:#000;
	text-decoration:underline;
	}
	
.content_about a:hover {
	color:#d0750c;
	text-decoration:underline;
	}
	
.content_featured {
	float:left;
	width:166px;
	}
	
#header_featured {
	width:158px;
	height:17px;
	margin-left:4px;
	margin-bottom:5px;
	}	

.thumb_container_a { /*used for grid assembly; see html*/
	float:left;
	width:166px;
	height:118px;
	}
	
.thumb_container_b { /*used for grid assembly; see html*/
	float:left;
	margin-left:23px;
	width:166px;
	height:118px;
	}

.thumb_container_c { /*used for grid assembly; see html*/
	float:left;
	width:189px;
	height:136px;
	}
	
	
.thumb_grid_separator { /*used for grid assembly; see html*/
	clear:both;
	height:18px;
	}

.thumb_sm_frame {
	width:166px;
	height:118px;
	background-image:url(../images/thumb_sm_frame.png);
	}
	
.thumb_sm {
	position:relative;
	top:7px;
	left:8px;
	width:150px;
	height:97px;
	z-index:1;
	}
	
.content_column_right {
	float:left;
	width:120px;
	text-align:right;
	}

.content_column_right_details {
	float:left;
	width:100px;
	text-align:right;
	}


/* CONTENT - DETAILS /////////////////////////////////////////////////////////////////////////////////////////////////*/

.project_title {
	float:left;
	width:459px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:22px;
	color:#448;
	letter-spacing:-1px;
	}
	
.page_numbers {
	float:left;
	width:81px;
	padding-top:10px;
	padding-right:4px;
	text-align:right;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#555;
	}
	
.active_page {
	font-weight:bold;
	}
	
.details_separator {
	clear:both;
	padding-top:8px;
	padding-bottom:8px;
	}

.details_middle_column {
	float:left;
	width:562px;
	text-align:left;
	}
	
.details_left_column {
	float:left;
	width:177px;
	padding-right:15px;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#555;
	line-height:17px;
	}
	
.details_left_column a {
	color:#000;
	text-decoration:underline;
	}
	
.details_left_column a:hover {
	color:#d0750c;
	text-decoration:underline;
	}
	
.details_right_column {
	float:left;
	width:362px;
	}
	
.details_thumb_lg_frame {
	width:522px;
	height:361px;
	background-image:url(../images/thumb_lg_frame.png);
	}
	
.details_thumb_lg {
	position:relative;
	top:11px;
	left:11px;
	width:330px;
	height:217px;
	}
	
.details_thumb_mini_frame {
	float:left;
	width:80px;
	height:61px;
	background-image:url(../images/thumb_mini_frame.png);
	}
	
.details_thumb_mini {
	position:relative;
	top:6px;
	left:7px;
	width:66px;
	height:43px;
	}
	
.viewwebsite {
	margin-top:10px;
	width:350px;
	height:31px;
	}
	
/* CONTENT - CONTACT /////////////////////////////////////////////////////////////////////////////////////////////////*/

.contact_left_column {
	float:left;
	width:258px;
	padding-left:5px;
	padding-right:15px;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#555;
	}
	
.contact_left_column a {
	color:#000;
	text-decoration:underline;
	}
	
.contact_left_column a:hover {
	color:#d0750c;
	text-decoration:underline;
	}
	
.contact_right_column {
	float:left;
	width:266px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#666;
	}
	
.contact_right_column_confirmation {
	float:left;
	width:266px;
	height:343px;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#555;
	}
	
.field_a {
	width:259px;
	border:solid 1px #d1d1d1;
	background-image:url(../images/field_bg.gif);
	background-repeat:repeat-x;
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#777;
	padding-left:3px;
	margin-bottom:15px;
	}
	
.field_b {
	width:266px;
	border:solid 1px #d1d1d1;
	background-image:url(../images/field_bg.gif);
	background-repeat:repeat-x;
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#777;
	padding-left:3px;
	margin-bottom:15px;
	}
	
.field_c {
	width:259px;
	height:150px;
	border:solid 1px #d1d1d1;
	background-image:url(../images/textarea_bg.gif);
	background-repeat:repeat-x;
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#777;
	padding-left:3px;
	margin-bottom:15px;
	overflow:auto;
	padding-top:3px;
	}
	
.submit_bucket {
	text-align:right;
	}

/* RESUME ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
	
.resume_container {
	height:77px;
	background-image:url(../images/resume_pattern.jpg);
	}
	
.resume_bucket {
	width:784px;
	}
	
.resume_column_left {
	float:left;
	width:120px;
	text-align:left;
	}
	
.resume_column_middle {
	float:left;
	width:544px;
	padding-top:21px;
	text-align:left;
	}
	
.resume_column_right {
	float:left;
	width:120px;
	text-align:left;
	}

/* FOOTER : size 13 and a half /////////////////////////////////////////////////////////////////////////////////////////*/

.footer_container {
	height:56px;
	padding-top:15px;
	background-image:url(../images/footer_bg.jpg);
	background-repeat:repeat-x;
	}

.footer {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#777;
	font-size:9px;
	}
	
.footer a {
	color:#999;
	text-decoration:none;
	}
	
.footer a:hover {
	color:#bbb;
	text-decoration:underline;
	}
	
/* BALLOON /////////////////////////////////////////////////////////////////////////////////////////*/

.balloon_container {
	position:relative;
	width:277px;
	height:200px;
	top:-30px;
	left:-50px;
	z-index:2;
	visibility:hidden;
}

/*
#balloon_container {
	position:relative;
	width:277px;
	height:200px;
	top:-30px;
	left:-50px;
	z-index:2;
}
*/

#balloon_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:277px;
	height:82px;
	background-image:url(../images/balloon_01.png);
}

#balloon_02 {
	position:absolute;
	left:0px;
	top:82px;
	width:277px;
	height:70px;
	background-image:url(../images/balloon_02.png);
}

#balloon_03 {
	position:absolute;
	left:0px;
	top:152px;
	width:115px;
	height:36px;
	background-image:url(../images/balloon_03.png);
}

#balloon_04 {
	position:absolute;
	left:115px;
	top:152px;
	width:138px;
	height:36px;
}

#balloon_05 {
	position:absolute;
	left:253px;
	top:152px;
	width:24px;
	height:36px;
	background-image:url(../images/balloon_05.png);
}

#balloon_06 {
	position:absolute;
	left:0px;
	top:188px;
	width:277px;
	height:12px;
	background-image:url(../images/balloon_06.png);
	background-repeat:no-repeat;
}

.balloon_title {
	max-height:19px;
	overflow:hidden;
	margin-top:59px;
	margin-left:23px;
	padding-right:23px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#eee;
	}
	
.balloon_summary {
	max-height:62px;
	overflow:hidden;
	margin-top:5px;
	margin-left:23px;
	padding-right:23px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#bbb;
	}
	
/* BALLOON v1.5 /////////////////////////////////////////////////////////////////////////////////////////*/

/*
#balloon_container_2 {
	position:relative;
	width:210px;
	height:154px;
}
*/

.balloon_container_2 {
	position:relative;
	width:260px;
	height:154px;
	top:-113px;
	left:-45px;
	z-index:2;
	visibility:hidden;
}

#balloon_01a {
	background-image:url(../images/balloon_01a.png);
	position:absolute;
	left:0px;
	top:0px;
	width:260px;
	height:35px;
}

#balloon_02a {
	background-image:url(../images/balloon_02a.png);
	position:absolute;
	left:0px;
	top:35px;
	width:260px;
	height:78px;
}

#balloon_03a {
	background-image:url(../images/balloon_03a.png);
	position:absolute;
	left:0px;
	top:113px;
	width:205px;	/* 164*/
	height:30px;
}

#balloon_04a {
	background-image:url(../images/balloon_04a.png);
	position:absolute;
	left:205px;/*	left 164px;*/
	top:113px;
	width:33px;/*	width 28px;*/
	height:30px;
}

#balloon_05a {
	background-image:url(../images/balloon_05a.png);
	position:absolute;
	left:238px; /*	left:192px; */
	top:113px;
	width:21px; /*	width:18px;*/
	height:30px;
}

#balloon_06a {
	background-image:url(../images/balloon_06a.png);
	background-repeat:no-repeat;
	position:absolute;
	left:0px;
	top:143px;
	width:210px;
	height:11px;
}

/* Wrapping: width is very sensitive, if enough for PGT1/PTISA, can cause PGT2 to draw past edge. 
Problem with increasing height/margin is won't match next image down. */
.balloon_title_2 {
	width:226px; /*	width:171px;*/
	height:30px; /*	height:19px;*/
	overflow:hidden;
	margin-top:4px; /*	margin-top:12px;*/
	margin-left:19px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px; /*	font-size:15px; */
	color:#eee;
	}
	
.balloon_summary_2 {
	width:226px; /*	width:171px;*/
	height:49px;
	overflow:hidden;
	margin-top:9px;
	margin-left:19px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#bbb;
	}
	
.balloon_view_2 {
	width:140px;/*	width:110px;*/
	height:10px;
	overflow:hidden;
	margin-top:7px;
	margin-left:52px;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#bbb;
	font-weight:bold;
	}
	
.balloon_view_2 a {
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#bbb;
	font-weight:bold;
	}
	
.balloon_view_2 a:hover {
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#fff;
	font-weight:bold;
	}