/***** Designer: Peter P Schaefer *****/
/***** a Lautus Design Production *****/
/*****       version 2.0alpha     *****/
/***** http://www.lautusdesign.com ****/

/*************************************/
/* Blueprint: reset.css              */

/***** Reset *****/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input, img { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
input { outline: none; border: none; margin: 0; padding: 0; }
caption,th { text-align: left; }
table, td, th { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0; }
a { text-decoration: underline; outline: none; color: #ff4200; border: none; }
a:hover { text-decoration: none; }

:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

.em {
font-style: italic;
}

body {
width: 100%;
height: 100%; 
font-family: Trebuchet MS, Modern, Sans Serif;
font-size: 0.8em;
color: #666666;
text-align: center;
background: url(../img/portfolio_bodyBKG.jpg) repeat-x #535353;
}

html {  
height: 100%; 
}

#wrapper {
width: 1106px;
text-align: left;
background: url(../img/portfolio_header_totalBKG.jpg) no-repeat top left;
margin: 0 auto;
position: relative;
padding: 0 0 0 30px;
}

/************ HEADER STYLES ************/

	#header {
	width: 1061px;
	height: 250px;
	position: relative;
	}

		.logo {
		width: 279px;
		height: 104px;
		float: left;
		position: relative;
		}
		
		#navBar {
		width: 782px;
		height: 104px;		
		background: url(../img/portfolio_headerBKG.jpg) no-repeat;
		float: left;
		position: relative;
		}
		
		ul.headerNav {
		position: absolute;
		top: 41px;
		left: 23px;
		z-index: 4;
		}
				
			ul.headerNav li {
			height: 26px;
			display: block;
			float: left;
			}
					
				ul.headerNav li a {
				height: 26px;
				width: 77px;
				font-family: Myriad Pro, Tahoma, Arial, Sans-serif;
			    font-size: 1.0em;
				color: #000;
				text-decoration: none;
				text-align: center;
				display: block;
				padding: 5px 0 0 0;
				}
					
				ul.headerNav li a:link, ul.headerNav li a:visited {
				color: #000;
				text-decoration: none;
				background: url(../img/headerNav_BKG_total.jpg) repeat-x;
				background-position: 0 0;
				} 
					
				ul.headerNav li a:hover, ul.headerNav li a:active {
				color: #000;
				text-decoration: none;
				background-position: 0 -36px;
				}
				
		.banner {
		width: 366px;
		height: 52px;
		position: absolute;
		top: 154px;
		left: 24px;
		z-index: 2;
		}
		
		
/************ CONTAINER STYLES ************/	

	#container {
	width: 839px;
	float: left;
	position: relative;
	}	
	
		.contentBKG_top {
		width: 839px;
		height: 14px;
		background: url(../img/portfolio_containerTop.jpg) no-repeat;
		position: relative;
		}
		
		.contentBKG_body {
		width: 839px;
		height: 540px;
		text-align: left;
		background: url(../img/portfolio_containerBody.jpg) repeat-y;
		position: relative;
		}
			
			#left {
			width: 166px;
			float: left;
			position: relative;
			}
			
				#left h1 {
				width: 152px;
				height: 25px;
				background: url(../img/portfolio_h1.jpg) no-repeat;
				text-indent: -9999px;
				margin: 10px 0 15px 15px;
				}
				
				    	.drawers-wrapper {
						position: relative;
						width: 166px;
						float: left;
						}
						
							.drawers {
							margin-bottom: 15px;
							font-size: 11px;
							line-height: 18px;
							}
							
								.drawer {
								font-size: 11px;
								line-height: 1.8em;
								color: #252525;
								}
								
									.drawer-handle {
									background: url(../img/portfolio_contentNavBKG.jpg) 0pt scroll;
									font-family: Verdana, Arial, Helvetica, sans-serif;
									cursor: default;
									height: 26px;
									line-height: 26px;
									text-indent: 10px;
									font-size: 12px;
									width: 100%;
									margin: 0;
									padding: 0;
									}
									
										.drawer-handle.open {
										background: url(../img/portfolio_contentavBKG_active.jpg) no-repeat scroll 0pt;
										color: #000;
										}
									
									.drawer ul {
									padding: 0px 12px;
									padding-bottom: 0pt;
									}
								
									.drawer li {
									line-height: 16px;
									padding: 6px 0pt;
									font-family: Trebuchet MS, Giorgia, sans-serif;
									}
									
										.drawer-content ul {
										 padding-top: 7px;
										 }
										 
										 .drawer-content li a {
										 display: block;
										 overflow: hidden;
										 }
										 
										.socks li {
										color: #ff4200;
										border: 0pt none;
										line-height: 18px;
										padding: 2px 0;
										}
				
								.drawers a {
								color: #ff4200;
								text-decoration:none;
								font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
								}
							
									.drawers a:hover {
									text-decoration: underline;
									}
			
			
			
			
			
			
			#right {
			width: 583px;
			float: left;
			font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
			padding: 10px 25px 30px 20px;
			position: relative;
			}
			
					#right h1 {
					width: 100%;
					font-family: "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
					font-size: 2.2em;
					color: #000000;
					text-indent: 0;
					background: none;
					margin: 0 0 50px 0;
					line-height: 0;
					position: relative;
					top: 12px;
					left: 0;
					}
					
						.projectInfo {
						width: 226px;
						height: 116px;
						font-family: "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
						font-size: 0.9em;
						padding: 9px 0 0 0px;
						display: block;
						position: relative;
						}
						
							#right h3 {
							font-size: 1.4em;
							color: #000000;
							padding: 0 0 11px 0;
							}
							
							.projectInfo ul {
							color: #ff4200;
							font-size: 0.95em;
							letter-spacing: 0.08em;
							margin: 0 0 0 10px;
							}
							
								.projectInfo li {
								margin: 0 0 3px 0;
								}
							
								#right li.launch {
								width: 104px;
								height: 22px;
								position: absolute;
								top: 100px;
								left: 10px;
								}
								
								#right li.launch a:link, #right li.launch a:visited {
								width: 145px;
								height: 22px;
								display: block;
								text-indent: -9999px;
								background: url(../img/portfolio_button_launch_total.jpg) no-repeat;
								background-position: 0 0;
								}
								
									#right li.launch a:hover, #right li.launch a:active {
									background-position: 0 -32px;
									}
					
						.screensContainer {
						width: 401px;
						height: 120px;
						display: block;
						position: absolute;
						top: 65px;
						left: 227px;
						}
						
						.screensContainer_Kafka {
						width: 560px;
						display: block;
						position: relative;
						margin: 0 auto;
						}
						
							screensContainer img, .screensContainer a {
							height: 120px;
							width: 120px;
							display: block;
							float: left;
							position: relative;
							}
							
							screensContainer_Kafka img, .screensContainer_Kafka a {
							height: 141px;
							width: 120px;
							display: block;
							float: left;
							position: relative;
							}
							
							.imgSpacer {
							height: 120px;
							width: 20px;
							display: block;
							float: left;
							position: relative;
							}
							
						.projectNotes, .projectNotes_Kafka {
						width: 628px;
						font-size: 0.9em;
						padding: 15px 0 25px 0;
						clear: both;
						float: left;
						position: relative;
						}
						
						.projectNotes_Kafka {
						width: 250px;
						display: block;
						clear: none;
						}
						
							.projectNotes p {
							line-height: 1.7em;
							}
						
						.reviews {
						width: 628px;
						clear: both;
						position: relative;
						float: left;
						font-size: 0.9em;
						}
							
							.reviews p {
							line-height: 1.7em;
							margin: 0 0 10px 0;
							}
				
			#right .clearer {
			clear: both;
			}
			
			
				
						#thruhiketrilogyWEB {
						display: block;
						position: relative;
						}
						
						/** Web Portfolio **/
						#stephenjlattanziWEB, #billhineWEB, #meodysseyWEB,
						
						/** Branding Portfolio **/
						#ersLogo, #pricefallsLogo, #thruhiketrilogyLogo, #stephenjlattanziLogo, #billhineLogo, #meodysseyLogo,
						
						/** Graphic Design Portfolio **/
						#ccaseyThesis,
						
						/** Print Portfolio **/
						#ersPrint, #alieofthemindPrint, #pricefallsPrint, #thruhiketrilogyPrint, #stephenjlattanziPrint, #billhinePrint,
						
						/** Work in progress **/
						 #eliseogdenWEB, #pricefallsWEB
						{
						display: none;
						position: relative;
						}
				
				
				
		.contentBKG_bottom {
		width: 839px;
		height: 40px;
		background: url(../img/portfolio_containerBottom.jpg) no-repeat;
		position: relative;
		clear: both;
		}	
		
			ul.contextLink {
			position: absolute;
			right: 55px;
			top: 5px;
			float: right;
			}
			
				ul.contextLink li {
				float: left;
				}
				
					ul.contextLink li a {
					padding: 0 0 0 5px;
					}
	
					ul.contextLink li a:link, ul.contextLink li a:visited {
					float: left;
					}
		
		
/************ RIGHT COLUMN STYLES *******/
		
	#rightColumn {
	width: 211px;
	float: left;
	}
	
		.login {
		width: 191px;
		height: 162px;
		background: url(../img/portfolio_loginBKG.jpg) no-repeat;
		padding: 17px 10px 2px 10px;
		margin: 0;
		position: relative;
		top: 0;
		left: 4px;
		}
			
			.h2Bullet {
			background: url(../img/bulletsBKG.jpg) no-repeat;
			padding: 0 0 7px 0;
			}
		
				h4 {
				font-size: 1.3em;
				padding: 0 0 0 23px;
				color: #252525;
				}
			
			#LoginFormName, #LoginFormPassword {
			width: 170px;
			height: 19px;
			border-top: 2px solid #9b9b9b;
			border-right: 1px solid #d4d4d4;
			border-bottom: 1px solid #f5f5f5;
			border-left: 1px solid #d4d4d4;
			margin: 0 auto 7px auto;
			padding: 4px 6px;
			color: #c3c3c3;
			}
			
				#LoginFormName:focus, #LoginFormPassword:focus {
				color: #000;
				}
				
			.LoginButton {
			width: 65px;
			height: 26px;
			background: url(../img/buttons_login_total.jpg) no-repeat;
			background-position: 0 0;
			position: relative;
			top: 3px;
			}
			
				.LoginButton:hover, .LoginButton:focus {
				background-position: 0 -36px;
				}
			
			.LoginFormForgotPassword {
			float: right;
			position: absolute;
			top: 130px;
			right: 20px;
			}
			
			.pagesContact { 
			width: 211px;
			position: relative;
			left: 4px;
			margin: 0px 0 10px 0;
			}
	
			.pagesContactTop {
			width: 211px;
			height: 37px;
			background: url(../img/portfolioContactTop.jpg) no-repeat;
			}
			
			
				.h2Bullet {
				background: url(../img/bulletsBKG.jpg) no-repeat;
				padding: 0 0 7px 0;
				}
			
					h2 {
					font-size: 1.3em;
					padding: 0 0 0 23px;
					}
					
					.pagesContactBody {
					width: 191px;
					background: url(../img/news_recentActivity_slice.jpg) repeat-y;
					padding: 5px 10px 5px 10px;
					}
					
						.pagesContact table {
						width: 191px;
						position: relative;
						padding: 0;
						margin: 0 0 0 3px;
						top: 0;
						left: 0;
						}
						
							.pagesContact td {
							padding: 0 8px 5px 0;
							color: #000;
							}
					
						.pagesContact a {
						width: 170px;
						height: 14px;
						display: block;
						margin: 0;
						color: #000;
						text-decoration: none;
						}
						
						.pagesContact a:hover {
						text-decoration: underline;
						}
					
					.pagesContactBottom {
					width: 211px;
					height: 9px;
					background: url(../img/news_recentActivity_bottom.png) no-repeat;
					}
					
	.pagesPortfolio {
	width: 211px;
	position: relative;
	left: 4px;
	}
	
		.pagesPortfolioTop {
		width: 211px;
		height: 53px;
		background: url(../img/news_portfolio_top.png) no-repeat;
		}
		
		.pagesPortfolioBody {
		width: 211px;
		background: url(../img/news_portfolio_slice.jpg) repeat-y;
		}
		
			.pagesPortfolioBody img {
			margin: 0 0 9px 9px;
			}
	
		.pagesPortfolioBottom {
		width: 211px;
		height: 13px;
		background: url(../img/news_portfolio_bottom.png) no-repeat;
		}
		
	
		
/************ FOOTER STYLES ************/	

	#footer {
	width: 840px;
	float: left;
	clear: both;
	position: relative;
	left: 5px;
	color: #FFF;
	}
	
		ul.footerNav {
		height: 15px;
		margin: 17px 0 0 30px;
		}
	
			ul.footerNav li {
			font-size: 0.9em;
			padding: 0 8px 4px 0;
			float: left;
			}
			
				u.footerNav li a {
				font-size: 0.9em;
				}
	
		#footer hr {
		clear: both;
		border: none;
		border-bottom: 1px solid #565656;
		padding: 0;
		margin: 0;
		}
		
		.credits {
		font-size: 0.8em;
		margin: 4px 0 153px 30px;
		}