@charset "utf-8";

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #000000 url('bg.png') top no-repeat; 
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

pre
{
	width: 400px; 
}

img
{
	border-style: none; 
}

a
{
	color:#37818b; 
	text-decoration:none; 
}

form legend {
  padding: 0 2px;
  font-weight: bold;
}

form label {
  display: inline-block;
  line-height: 1.8;
  vertical-align: top;
}

form ol {
  margin: 0;
  padding: 0;
}

form li {
  list-style: none;
  padding: 5px;
  margin: 0;
}

.clrfloat
{
	clear:both; 
}

form legend {
  padding: 0 0 5px;
  font-weight: normal;
}

form em {
  font-weight: bold;
  font-style: normal;
  color: #f00;
}

form label {
  width: 130px; /* Width of labels */
}

form label {
  margin-left: 15px; /* Width plus 3 (html space) */
}

form #btnSubmit
{
	margin-left: 144px; 
}

a:hover
{
	color: #4c7968; ; 
}

.shell #logo
{
	margin-top: 35px; 
	margin-left: auto;
	margin-right: auto; 
	width: 1020px; 
}

.shell #content {
	margin-left: auto;
	margin-right: auto;
	padding-top: 35px; 
	width: 1020px;
	min-height: 600px; 
	background:  url('content_box.png') top no-repeat; 
	clear:both; 
}

.shell #navigation {
	text-align:left; 
	margin-left: 37px;
	margin-right: 40px;
	padding:0; 
	background: url('nav_grad.png') no-repeat; 
	height: 50px; 
	width: 940px;
}

.shell #navigation #blog
{
	background-image:url(blog.png);
	width: 75px;
	height: 44px; 
	display:inline-block;
}

.shell #navigation #blog:hover
{
	background-image:url(blog_open.png);
}

.shell #navigation #blog_active
{
	background-image:url(blog_open.png);
	width: 75px;
	height: 44px; 
	display:inline-block;
}

.shell #navigation #projects
{
	background-image:url(projects.png);
	width: 97px;
	height: 44px; 
	display:inline-block; 
}

.shell #navigation #projects:hover
{
	background-image:url(projects_open.png);
}

.shell #navigation #projects_active
{
	background-image:url(projects_open.png);
	width: 97px;
	height: 44px; 
	display:inline-block; 
}

.shell #navigation #portfolio
{
	background-image:url(portfolio.png);
	width: 106px;
	height: 44px;
	display:inline-block;
}

.shell #navigation #portfolio_active
{
	background-image:url(portfolio_open.png);
	width: 106px;
	height: 44px; 
	display:inline-block; 
}

.shell #navigation #portfolio:hover
{
	background-image:url(portfolio_open.png);
}

.shell #navigation #tutorials
{
	background-image:url(tutorials.png);
	width: 103px;
	height: 44px;
	display:inline-block;
}

.shell #navigation #tutorials_active
{
	background-image:url(tutorials_open.png);
	width: 103px;
	height: 44px; 
	display:inline-block; 
}

.shell #navigation #tutorials:hover
{
	background-image:url(tutorials_open.png);
}

.shell #navigation #resume
{
	background-image:url(resume.png);
	width: 85px;
	height: 44px;
	display:inline-block;
}

.shell #navigation #resume_active
{
	background-image:url(resume_open.png);
	width: 85px;
	height: 44px; 
	display:inline-block; 
}

.shell #navigation #resume:hover
{
	background-image:url(resume_open.png);
}

.shell #navigation #contact
{
	background-image:url(contact.png);
	width: 84px;
	height: 44px;
	display:inline-block;
}

.shell #navigation #contact:hover
{
	background-image:url(contact_open.png);
}

.shell #navigation #contact_active
{
	background-image:url(contact_open.png);
	width: 84px;
	height: 44px; 
	display:inline-block; 
}

.shell #content #content_center
{
	text-align:left; 
	margin-left: 37px;
	margin-right: 40px;
	padding:0; 
	width: 940px;
}

.shell #content #content_center #portfolio_block
{
	width: 920px; 
	height: 273px; 
	margin-left: auto;
	margin-right: auto; 
	margin-top: 20px;
	margin-bottom: 5px; 
	padding:0px;
	background: URL(/assets/portfolio_full.png) no-repeat center; 
}

.shell #content #content_center #portfolio_block .clrfloat
{
	clear:both;
	width: 900px; 
}

.shell #content #content_center #portfolio_block_content
{	
	float:left;
	height: 273px; 
	width: 854px;
	margin:0; 
	padding: 0; 
	float:left; 
}

.shell #content #content_center #portfolio_block_content #description
{	
	margin-top: 0;
	margin-left: 18px; 
	margin-right: 15px; 
	padding: 0; 
	height: 240px; 
	float:left; 
	width: 560px; 
	color:#FFF; 
	text-align: left; 
}

.shell #content #content_center #portfolio_block_content #description #learnmore
{ 
	width: 138px; 
	height: 35px; 
	float:left; 
	margin-top: 78px; 
	padding:0; 
}

.shell #content #content_center #portfolio_block_content #description h1
{
	font-size: 30px; 
	margin-top: 18px; 
	margin-bottom: 5px; 
	padding: 0; 
}

.shell #content #content_center #portfolio_block_content #description p
{
	text-align:left;  
	margin: 0; 
	padding: 0; 
	height: 80px; 
}

.shell #content #content_center #portfolio_block_content #snapshot
{	
	margin-top: 18px; 
	padding: 0; 
	float:left;
	height: 240px; 
	width: 250px; 
}

.shell #content #content_center #portfolio_block_content #snapshot img
{
	margin:0;
	padding: 0; 
	text-align:center; 
	display: block;
	background: #000 center URL(/assets/loader.gif) no-repeat;
}

.shell #content #content_center #portfolio_block_nav_left
{	
	margin-top:100px; 
	width: 33px; 
	float:left; 
	height: 32px; 
}

.shell #content #content_center #portfolio_block_nav_right
{
	margin-top:100px; 
	width: 33px; 
	float:left;  
	height: 32px; 
}


.shell .portfolio_gallery 
{
	background:#999; 
	width: 890px; 
	min-height: 200 px; 
	margin-left: auto;
	margin-right: auto; 
	margin-top: 10px; 
	border: 1px solid #aebcc7;
	background: #fff url(contentshadow.png) repeat-y;
}


.shell .portfolio_gallery  .clrfloatblock
{
	clear: both;
	width: 900px; 
}

.shell  .portfolio_gallery  h1
{
	color:#333; 
	font-size: 14px; 
	background:  url(contenthg.png) repeat-x;	
	padding: 10px; 
	margin: 0; 
}

.shell .portfolio_gallery  .block_header
{
	background: #fff url(contentshadow.png) repeat-y;
	border-bottom: 1px solid #aebcc7;
}

.shell #content_center .block .block_content .clearflt
{
	width: auto;   
	clear:both;
}

.social
{
	margin-left: 15px;
}

.fb
{
 	width: 15px; 
	height: 15px; 
	float:left;
	 
	margin-right:8px; 
}

.twitter
{
	height: 15px; 
	width: 80px; 
	float:left; 
}

.shell  .portfolio_gallery  .block_content
{
	background: #fff url(contentshadow.png) repeat-y;
	padding-left: 15px; 
	padding-right: 15px; 
}

.shell  .portfolio_gallery  .block_content #clearflt
{
	clear:both; 
	width: 890px; 
}

.shell  .portfolio_gallery  .block_content .gallery_element
{
	float:left; 
	width: 80px; 
	min-height: 80px; 
	margin:8px; 
} 

.shell #content_center #blog_post
{
	width: 900px; 
	margin-left: auto;
	margin-right: auto; 
	text-align:left; 
	background: #fff url(contentshadow.png) repeat-y;
	padding: none; 
	margin-top: 15px; 
	margin-bottom: 15px; 
	border: 1px solid #aebcc7;
}

.shell #content_center #blog_post .blog_header
{
	padding: 0; 
	margin: 0; 
	border-bottom: 1px solid #aebcc7;
}

.shell  #content_center #blog_post h1
{
	color:#333; 
	font-size: 14px; 
	background: url(contenthg.png) repeat-x scroll; 
	padding: 10px; 
	margin: 0;  
}


.shell  #content_center #blog_post .blog_content
{
	background: url(contentshadow.png) repeat-y;
}

.shell #content_center #blog_post p
{
	color:#333;
	padding-top: 15px; 
	padding-left: 15px; 
	padding-right: 15px; 
	padding-bottom: 5px; 
	margin: 0; 
}

.shell #content_center .block
{
	width: 900px; 
	margin-left: auto;
	margin-right: auto; 
	text-align:left; 
	padding: none; 
	margin-top: 15px; 
	margin-bottom: 15px; 
	border: 1px solid #aebcc7;
	background: #fff url(contentshadow.png) repeat-y;
}

.shell #content_center .block
{
	margin-left: auto;
	margin-right: auto; 
}


.shell #content_center .block .clrfloatblock
{
	clear: both;
	width: 900px; 
}

.shell  #content_center .block h1
{
	color:#333; 
	font-size: 14px; 
	background:  url(contenthg.png) repeat-x;	
	padding: 10px; 
	margin: 0; 
}

.shell #content_center .block .block_header
{
	background: #fff url(contentshadow.png) repeat-y;
	border-bottom: 1px solid #aebcc7;
}

.shell  #content_center .block .block_content
{
	background: #fff url(contentshadow.png) repeat-y;
	padding-left: 15px; 
	padding-right: 15px; 
}

.shell #content_center .block .block_content .block_content_split_left
{
	float:left; 
	padding: 15px; 
	width: 250px; 
	min-height: 245px;
}

.shell #content_center .block .block_content .block_content_split_left img
{ 
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #000;
}

.shell #content_center .block .block_content .block_content_split_right
{
	background: #fff; 
	float:left; 
	margin: 10px; 
	width: 570px;  
	padding: 0; 
}

.shell #content_center .block #download
{
	color:#333;
	padding-top: 15px; 
	padding-left: 15px; 
	padding-right: 15px; 
	padding-bottom: 15px; 
	text-align:center; 
	margin: 0; 
}

.shell #content_center .block #filter
{
	color:#333;
	padding-top: 15px; 
	padding-left: 15px; 
	padding-right: 15px; 
	padding-bottom: 15px; 
	text-align:center; 
	margin: 0; 
}

.shell #content_center .block #filter select
{
	margin-left: 5px;
	margin-right: 15px; 	
}

.shell #content_center .block #download a
{
	margin-left: 5px;
	margin-right: 5px; 
}


.shell #content_center .block #flashpaper
{
	color:#333;
	padding-top: 15px; 
	padding-left: 15px; 
	padding-right: 15px; 
	padding-bottom: 15px; 
	text-align:center; 
	margin: 0; 
}

.shell #content #blog_split_left
{
	float:left; 
	width: 620px;
	margin-left: 56px; 
	margin-top: 15px; 
}

#blog_nav_left
{
	width: 80px; 
	background:#FFF;
	border: 1px solid #aebcc7;
	font-size: 12px; 
	background: #fff url(contenthg.png) repeat-x;
	float:left; 
	margin-bottom: 5px; 
}

#blog_nav_right
{
	width: 80px; 
	background:#FFF;
	border: 1px solid #aebcc7;
	font-size: 12px; 
	background: #fff url(contenthg.png) repeat-x;
	float:right; 
	margin-bottom: 5px; 
}

#blog_nav_p
{
	background: url(contentshadow.png) repeat-y;
	color:#000; 
	padding:2px; 
}

#blog_nav_p p
{
	margin: 0; 
	padding: 0; 
}

#blog_nav_p p a
{
	color:#333; 
}

.shell #content #blog_split_right
{
	float:left;
	width:270px; 
	margin-left: 15px; 
	margin-top: 15px; 
	margin-right: 50px; 
}

.shell #content .blog_entry 
{
	width: 620px; 
	text-align:left; 
	background:#FFF url(contentshadow.png) repeat-y;
	padding: 0; 
	margin-bottom: 15px; 
	border: 1px solid #aebcc7;
}

.shell #content .blog_entry .clrfloat
{
	clear:both;
	width: 620px; 
}

.shell #content .blog_entry .blog_header
{
	width: 620px; 
	padding: 0; 
	margin: 0; 
	background: url(contenthg.png) repeat-x;
	height: 34px; 
	border-bottom: 1px solid #aebcc7;
}

.shell #content .blog_entry h1
{
	color:#333; 
	font-size: 14px; 
	width: 500px; 
	padding-left: 16px; 
	line-height: 34px; 
	margin: 0;  
	float:left; 
	background: url(contentshadow.png) repeat-y;
}

.shell  #content .blog_entry .gui
{
	padding-right: 10px;
	padding-top: 8px; 
	margin: 0; 
	text-align: right; 
	width: 90px; 
	float:right; 
}


.shell #content .blog_entry .blog_content
{
	background: url(contentshadow.png) repeat-y;
	clear:both; 
}

.shell #content .blog_entry p
{
	color:#333;
	padding-left: 15px;
	padding-right: 15px; 
	padding-top: 15px; 
	padding-bottom: 15px; 
	margin: 0;  
}

.fullpost
{ 
	padding-left: 5px;
	margin-left: 5px; 
	text-align:right; 
	font-size: 12px; 
}

#returntoblog
{
	width: 100px; 
	background:#FFF;
	border: 1px solid #aebcc7;
	font-size: 12px; 
	background: #fff url(contenthg.png) repeat-x;
	margin-top: 10px; 
	margin-left: 55px; 
	margin-bottom: 10px;
	text-align:center; 
}

#returntoblog a
{
	color:#333; 
}

#blockreturn
{
	width: 130px; 
	background:#FFF;
	border: 1px solid #aebcc7;
	font-size: 12px; 
	background: #fff url(contenthg.png) repeat-x;
	float:left; 
	margin-left: 20px; 
	margin-bottom: 10px;
	text-align:center; 
}

#blockreturn a
{
	color:#333; 
}


.shell #content .portfolio_widget
{
	margin-left: auto;
	margin-right: auto; 
	margin-bottom: 15px; 
	text-align: center; 
	width: 270px;  
	height: 273px;  
	background:url(portfolio_box.png) no-repeat center;
}

.shell #content #portfolio_back
{
	margin-top: 110px; 
	float:left; 
	width: 33px; 
	height: 32px; 
}

.shell #content .portfolio_widget #portfolio_display
{
	float: left; 
	width: 182px; 
	height: 212px; 
	margin-left: 12px; 
	margin-right: 10px; 
}

.shell #content .portfolio_widget #portfolio_next
{ 
	float:left; 
	margin-top: 110px; 
	width: 33px; 
	height: 32px;
}

.shell #content .portfolio_widget #portfolio_demo
{
	width: 182px; 
	height: 212px; 
	margin-top: 10px; 
	margin-bottom: 8px; 
	padding: 0; 
	background: #000 center URL(/assets/loader.gif) no-repeat; 
}

.shell #content .portfolio_widget #portfolio_demo img
{
	padding:0;
	margin:0; 
	width: 182px; 
	height: 212px; 
}


.shell #content .portfolio_widget img
{
	margin-top:4px; 
	margin-right: auto; 
	margin-left: auto; 
}

.shell #content .portfolio_widget #clearflt
{
	width: 200px; 
	clear:both; 
}

.shell #content .twitter_feed 
{
	font-size: 12px; 
	color: #FFF; 
	width: 250px; 
	margin-left: 10px;
	margin-right: 10px;
}

.shell #content .twitter_feed #tweets
{ 	
	background: url(twitter_block.png) no-repeat; 
	text-align:left; 
 	width: 250px;
	padding-top: 35px; 
	padding-bottom: 35px; 
}

.shell #content .twitter_feed #tweets p
{ 
	padding-left: 10px; 
	padding-right: 10px; 
}

.shell #content .twitter_feed #top
{
	width: 180px; 
}

.shell #content .twitter_feed #bottom
{
}

.shell #content .twitter_feed #tweets_gradient
{
		width: 250px;
		padding: 0; 
		margin: 0; 
}

.shell #content .twitterbird
{
	float: right;
}

.shell #content .twitter_feed #tweets a
{
	color: #c3d495; 
}


.shell #content .twitter_feed #tweets a:hover 
{
	color: #5fabda; 
}

.shell #content #clrfloat
{
	width: 1020px; 
	clear:both; 
}

.shell #footer
{
	width:1020px;
	min-height: 48px; 
	text-align:center;  
	margin-left: auto;
	margin-right: auto;
	padding-top: 12px;
	padding-bottom: 12px; 
	font-size:14px; 
	color:#666; 
	background:url(footer_gradient.png) no-repeat center top; 
}

.shell #footer p 
{
	margin: 12px;  
	color:#333; 
	font-size:9px; 
}

.shell #footer a
{
	text-decoration:none; 
	color:#666;  
}

.shell #footer #copyright a
{
	color:#333; 
}

.shell #content #contact_split_left
{
	float:left; 
	width: 480px;
	margin-left: 56px; 
	margin-top: 15px; 
}

.shell #content #contact_split_right
{
	float:left;
	width:410px; 
	margin-left: 15px; 
	margin-top: 15px; 
	margin-right: 50px; 
}


.shell #content .contact 
{
	width: 480px; 
	text-align:left; 
	background:#FFF;
	padding: none; 
	margin-bottom: 15px; 
	border: 1px solid #aebcc7;
}

.shell #content .contact .contact_header
{
	padding: 0; 
	margin: 0; 
	background: url(contenthg.png) repeat-x;
	border-bottom: 1px solid #aebcc7;
}

.shell #content .contact h1
{
	color:#333; 
	font-size: 14px; 
	background: url(contentshadow.png) repeat-y;
	padding: 10px; 
	margin: 0; 
}

.shell #content .contact #recaptcha
{
	margin-left: 144px; 
}

.shell #content .contact .contact_details
{
	background: url(contentshadow.png) repeat-y;
	padding-bottom: 5px; 
}

.shell #content .contact .contact_details .done
{
	padding: 20px; 
	display: none; 
}

.shell #content .contact .contact_details #submit
{  
    float:left;  
    margin-left: 150px; 
} 

.shell #content .contact .contact_details .field
{
	padding-left: 20px; 
}

.shell #content .contact .contact_details .hightlight {  
     border:2px solid #9F1319;  
     background:url(iconCaution.gif) no-repeat 2px  
}  

.shell #content .contact .contact_details .loading 
{  
    float:right;   
    background:url(ajax-loader.gif) no-repeat 1px;   
    height:28px;   
    width:28px;   
    display:none;  
} 

.shell #content .contact .contact_details .clear
{
	clear:both; 
}

.shell #content .contact p
{
	color:#333;
	padding-left: 20px;
	padding-right: 18px; 
	padding-top: 8px;  
	margin: 0;  
}

.shell #content .contact form
{
	margin:0; 
	padding:0; 
}

.shell #content .contact_information
{
	width: 410px; 
	text-align:left; 
	background:#FFF;
	padding: none; 
	margin-bottom: 15px; 
	margin-left:auto; 
	margin-right: auto; 
	border: 1px solid #aebcc7;
}

.shell #content .contact_information #icons
{
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	padding: 5px; 
	background: url(contentshadow.png) repeat-y;
}

.shell #content .contact_information .details_header
{
	padding: 0; 
	margin: 0; 
	background: url(contenthg.png) repeat-x;
	border-bottom: 1px solid #aebcc7;
}

.shell #content .contact_information h1
{
	color:#333; 
	font-size: 14px; 
	background: url(contentshadow.png) repeat-y;
	padding: 10px; 
	margin: 0; 
}

.shell #content .contact_information .details
{
	background: url(contentshadow.png) repeat-y;
	padding-bottom: 5px; 
}

.shell #content .contact_information p
{
	color:#333;
	padding-left: 20px;
	padding-right: 18px; 
	padding-top: 8px;  
	margin: 0;  
}