/*
	design.css (extends core.css)
	contains all design specific colors, images and text formatting
	
	All style rule attributes in alpha-numeric order starting from 0-9 A-Z
	x = horizontal, y = vertical
	property: trbl, tb rl, t rl b, t r b l;
	
	-- START ALL STYLES --
*/


/* color glossary
-----------------------------------------------------------------------------
	
	#4D453D (body bg)
	
*/

/* import additional sheets
----------------------------------------------------------------------------- */

@import url("core.css");

/* design specific presentational elements
----------------------------------------------------------------------------- */

body{
	background: #4D453D url(img/bg/body.gif) repeat-x 0 0;
	color: #333;
	font: normal normal 12px "Arial", Sans-Serif;
}

/* global text presentation
----------------------------------------------------------------------------- */

code, samp, kbd, var{ font-family: "Courier New", "Courier", Monospace; }

h1, h2, h3, h4, h5, h6, b, strong{ font-weight: bold; }
i, em, cite, dfn, ins{ font-style: italic; }
del, code, samp, kbd, var{ font-style: inherit; }

del{ text-decoration: line-through; }
ins{ text-decoration: none; }

abbr, acronym{ border: 0; cursor: help; text-decoration: none; }

h1{ font-size: 24px; }
h2{ font-size: 20px; }
h3{ font-size: 18px; }
h4{ font-size: 16px; }
h5{ font-size: 14px; }
h6{ font-size: 13px; }

ul, dl{ list-style: square; }
ol{ list-style: decimal; }

li, dt, dd,
p, pre, address,
legend, label, input, textarea, 
select, option, optgroup,
th, td{ font: inherit; }

small{ font-size: 10px; } 	/* 2px smaller, than body base */
big{ font-size: 14px; } 	/* 2px larger, than body base */

img.float-left,
img.float-right{
	background: transparent;
	border: 1px solid #70675E;
	margin: 5px 10px 5px;
	padding: 2px;
}

img.float-left{ margin-left: 0; }
img.float-right{ margin-right: 0; }

/* hyperlinks
----------------------------------------------------------------------------- */

a{ text-decoration: none; }
.no-decor a{ text-decoration: none; }

#portfolio a:link, 
#portfolio a:visited{ color: #E0004A; font-weight: bold; }

#portfolio a:hover, 
#portfolio a:active{ color: #639EBA; }

/* forms
----------------------------------------------------------------------------- */

label{
	font-size: 12px;
	font-weight: bold;
}

input,
select,
textarea{
	background: #FFF;
	border: 1px solid;
	border-color: #AAA #CCC #CCC #AAA;
	padding: 3px 5px;
	width: 300px;
}

textarea{ height: 150px; width: 550px; }

select,
.button input,
.chad input{ width: auto; }

fieldset.button{ text-align: right; }

	.button input{
		background: #000;
		border: 0;
		color: #FFF;
		text-transform: uppercase;
	}

	.chad input{ 
		background: transparent;
		border: 0;
		vertical-align: middle; 
	}

/* design specific presentational ID's
----------------------------------------------------------------------------- */

#wrap{
	background: transparent url(img/bg/wrap.jpg) no-repeat center 0;
	padding-bottom: 70px;
}

#masthead{
	margin: 0 auto;
	padding: 40px 28px 9px;
	width: 856px;
}

	#masthead h1{
		background: transparent url(img/logo.png) no-repeat 0 0;
		height: 46px;
		text-indent: -13000em;
		width: 215px;
	}
	
		#masthead h1 a:link,
		#masthead h1 a:visited{
			display: block;
			height: 46px;
			width: 215px;
		}
	
#portfolio{
	margin: 0 auto;
	position: relative;
	width: 912px;
}
		
	#portfolio #next,
	#portfolio #back{
		height: 450px;
		position: absolute;
		top: 0;
		right: -22px;
		width: 54px;
		z-index: 6;
	}
	
	#portfolio #back{ left: -22px; }
	
		#portfolio #next a:link,
		#portfolio #next a:visited,
		#portfolio #back a:link,
		#portfolio #back a:visited{
			background: transparent url(img/next.png) no-repeat 0 50%;
			display: block;
			height: 450px;
			text-indent: -13000em;
		}
		
		#portfolio #back a:link,
		#portfolio #back a:visited{ background-image: url(img/back.png); }
		          
		#portfolio #next a:hover,
		#portfolio #next a:active,
		#portfolio #back a:hover,
		#portfolio #back a:active{ background-position: -55px 50%; }

	#portfolio-top{
		background: transparent url(img/bg/portfolio_top.png) no-repeat 0 0;
		height: 17px;
	}

	#portfolio-fill{ background: transparent url(img/bg/portfolio_fill.png) repeat-y 0 0; }
	
		#portfolio-info,
		#portfolio-image{ float: left; }
		
			#portfolio-info{ 
				display: inline;
				margin: 28px 14px 0 46px;
				width: 210px; 
			}
			
				#portfolio-info h2,
				#portfolio-info h3{ text-transform: uppercase; }
				
					#portfolio-info h2{
						color: #E7566B;
						font-size: 20px;
						font-weight: normal;
						margin-left: -1px;
					}
					
					#portfolio-info h3{
						color: #4A7420;
						font-size: 14px;
					}
					
						#portfolio-info h3.interests{ color: #006257; }
						
					#portfolio-info ul,
					#portfolio-info p{ margin: 5px 0 15px; }
					
						#portfolio-info ul{ list-style: none; }
						
					#portfolio-info p,
					#portfolio-info li{
						color: #4D453D;
						font-size: 11px;
					}
					
						#portfolio-info p.url{ margin: -3px 0 0; }
						
							#portfolio-info p.url a:link,
							#portfolio-info p.url a:visited{
								color: #4D453D;
								font-weight: normal;
							}

							#portfolio-info p.url a:hover,
							#portfolio-info p.url a:active{ color: #639EBA; }

							#portfolio-info p.url a:hover:after,
							#portfolio-info p.url a:active:after{ color: #4D453D; content: " visit"; }

							#portfolio-info p.url a:hover.large:after,
							#portfolio-info p.url a:active.large:after{ color: #4D453D; content: " open"; }
							
						
						#portfolio-info p.project-type{
							background: transparent url(img/bg/project_type.gif) no-repeat 0 0;
							margin: 5px 0 15px;
							padding: 8px 0;
						}
			
			#portfolio-image{
				margin: 28px 20px 28px 0;
				padding: 0 26px;
				position: relative;
				width: 570px;
			}
			
				#portfolio-image img{ 
					position: relative;
					z-index: 0;
				}
				
				#images{  
				    height: 364px;  
					overflow: hidden;
				    width: 570px;  
				} 
 
					#images img{   
					    height: 364px;
					    left: 0;  
					    top: 0; 
					    width: 570px; 
					} 
					
				#portfolio-image p#version{
					background: #FEFFAC;
					border: 1px solid #B8B2AC;
					bottom: 0;
					color: #A3A44A;
					font-weight: bold;
					padding: 5px;
					position: absolute;
					right: 26px;
					z-index: 8;
				}
				
				#portfolio-image #overlay{
					background: transparent url(img/bg/border_overlay.gif) no-repeat 0 0;
					height: 364px;
					position: absolute;
					right: 26px;
					top: 0;
					width: 570px;
					z-index: 100;
				}
					
				#portfolio-image ul{
					background: transparent url(img/bg/pages_border.gif) no-repeat 0 0;
					border-top: 1px solid #DFDDDC;
					left: 9px;
					list-style: none;
					margin: 0;
					padding-left: 1px;
					position: absolute;
					top: 5px;
					z-index: 7;
				}
				
					#portfolio-image ul li{ 
						border-bottom: 1px solid #DFDDDC;
						line-height: 1;
						font-size: 10px; 
					}
					
						#portfolio-image ul li:last-child{ border: 0; margin-bottom: 10px; }
				
					#portfolio-image ul a:link,
					#portfolio-image ul a:visited{
						color: #C9C7C4;
						display: block;
						padding: 3px 5px;
					}
				
					#portfolio-image ul a:hover,
					#portfolio-image ul a:active,
					#portfolio-image ul a:link.activeSlide,
					#portfolio-image ul a:visited.activeSlide{
						background: #FEFDE4;
						color: #E7566B;
						display: block;
						padding: 3px 5px;
					}

	#portfolio-bottom{
		background: transparent url(img/bg/portfolio_bottom.png) no-repeat 0 0;
		height: 21px;
	}

#footer{ 
	background: transparent url(img/bg/footer.jpg) no-repeat center 100%;
	margin-top: -45px;
	padding: 0 0 100px; 
}

	#footer a:link,
	#footer a:visited{
		color: #FEC5E0;
		text-decoration: none;
	}

	#footer a:hover,
	#footer a:active{ color: #A5D7EF; }
	
	#footer h3{
		background: transparent url(img/head_about.png) no-repeat 0 0;
		height: 24px;
		margin: 0 0 20px -3px;
		text-indent: -13000em;
		width: 75px;
	}

		#footer #skills h3{
			background-image: url(img/head_skills.png);
			height: 28px;
			width: 113px;
		}

		#footer #contact h3{
			background-image: url(img/head_contact.png);
			margin-left: -5px;
			width: 98px;
		}

	#footer ul,
	#footer p,
	#footer address{ margin: 15px 0; }
	
		#footer #about ul{
			list-style: none;
			margin: 0;
			position: absolute;
			right: 32px;
			top: 0;
		}
		
			#footer #about ul li{
				float: left;
				margin-left: 5px;
			}
			
				#footer #about ul li a:link,
				#footer #about ul li a:visited{
					background: #514941; 
					border-top: 1px solid #4D453D;
					color: #80766D; 
					display: block;
					padding: 2px 10px 4px 10px;
				}

				#footer #about ul li a:hover,
				#footer #about ul li a:active{ color: #FEC5E0; }
				
				#footer #about ul li.ui-tabs-selected a:link,
				#footer #about ul li.ui-tabs-selected a:visited{
					background: transparent url(img/bg/tabs.gif) repeat-x 0 0;
					border-top: 1px solid #423B34;
					color: #FEC5E0;
				}
				
		#footer #skills ul{ 
			list-style: none;
			margin: 21px 0; 
		}
		
			#footer #skills ul li{
				background: transparent url(img/ico/li_check_visual.gif) no-repeat 100% 100%;
				border-bottom: 1px solid #484039;
				line-height: .8;
				margin-bottom: 10px;
			}
		
			#footer #skills ul#visual li{ color: #A5D7EF; }
			#footer #skills ul#construct li{ 
				background-image: url(img/ico/li_check_construct.gif);
				color: #BBC4F3; 
			}
			#footer #skills ul#application li{ 
				background-image: url(img/ico/li_check_application.gif);
				color: #E4BEE7; 
			}

	#footer p,
	#footer li,
	#footer address{
		color: #D2D0CE;
		letter-spacing: .25px;
		line-height: 1.6;
	}
	
		#footer p.footnote{
			color: #736C65; 
			font-size: 11px; 
			text-indent: -8px;
		}
		
			#footer p.footnote:hover{ color: #FDF4A0; }
	
		#footer address{ line-height: 1.3; }
	
			#footer address br{ display: none; }
	
			#footer address span{ display: block; }
		
				#footer address span.locality,
				#footer address span.region,
				#footer address span.postal-code{ display: inline; }
				
				#footer address span.tel{ margin-top: 15px; }
				#footer address span.email{ margin-bottom: 15px; }
				
				#footer span.linkedin a:link,
				#footer span.linkedin a:visited,
				#footer span.flickr a:link,
				#footer span.flickr a:visited,
				#footer span.twitter a:link,
				#footer span.twitter a:visited{
					background: transparent url(img/ico/linkedin.gif) no-repeat 0 0;
					display: block;
					margin: 5px 0;
					padding: 2px 0 2px 28px;
				}
				
				#footer span.flickr a:link,
				#footer span.flickr a:visited{ background-image: url(img/ico/flickr.gif); }
				
				#footer span.twitter a:link,
				#footer span.twitter a:visited{ background-image: url(img/ico/twitter.gif); }
				
					#footer span a em{
						color: #D2D0CE;
						font-style: normal;
					}
	
#footer-inner{
	margin: 0 auto;
	width: 912px;
}
	
#about,
#skills,
#contact{ float: left; }
	
	#about{
		background: transparent url(img/footer_sep.gif) no-repeat 100% 0;
		padding: 0 32px 0 36px;
		position: relative;
		width: 389px;
	}

	#skills{
		background: transparent url(img/footer_sep.gif) no-repeat 100% 0;
		padding: 0 31px 0 29px;
		width: 154px;
	}

	#contact{
		padding: 0 0 0 29px;
		width: 212px;
	}
	
	#fragment-1,
	#fragment-2{ height: 325px; }

/* design specific presentational classes
----------------------------------------------------------------------------- */

.half-box{ float: left; width: 250px; }

.ui-tabs-hide { display: none; }

/*
	-- /END ALL STYLES --
	
	- Please do not steal my code!
	- "I cannot abide useless people"
	- Thank you, I appreciate it.
*/