@charset "utf-8";
/*
------------------------------------------------
* circaeightyfour.com
* Portfolio Style Sheet
* Author: Eric Knauer
* Last Edit Date: 03/15/2011
------------------------------------------------ */
/* set body image */

* {margin:0px; padding:0px;}

	body, html {
		font:small;
		color:#a9a9a9;
		font-family:'ITCAvantGardeGothicStdMedium', Georgia,Serif;
		background:url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/mainBackgroundRepeat.jpg) repeat-x #000 0px 0px;
	}
	
/** set typography
------------------------------------------------ */
/* Install ITC Avant Garde Std Medium */
@font-face {
	font-family: 'ITCAvantGardeGothicStdMedium';
	src: url('http://www.circaeightyfour.com/common/css/fonts/ITC_Avant_Garde_Std_Medium/itcavantgardestd-md-webfont.eot');
	src: local('ITCAvantGardeGothicStdMedium'), 
			url('../../../common/css/fonts/ITC_Avant_Garde_Std_Medium/itcavantgardestd-md-webfont.woff') format('woff'), 
			url('../../../common/css/fonts/ITC_Avant_Garde_Std_Medium/itcavantgardestd-md-webfont.ttf') format('truetype'), 
			url('../../../common/css/fonts/ITC_Avant_Garde_Std_Medium/itcavantgardestd-md-webfont.svg#webfontnqVJXFjA') format('svg');
	font-weight: normal;
	font-style: normal;
}
	h1, p, li, a, label, input, textarea {color:#a9a9a9;}
	h2, h3.subjectTitle {color:#acacae;}
	h4.subjectHeadline {color:#626262;}
	p {line-height:18px; font-size: 10px;}
	.tagLine {width:150px; color:#fff; position:relative; top:28px; margin-right:5px;}
	.tagLine span.blueTagLine {color:#2a668b;}
	a.navLink:link, a.navLink:visited, a.navLink:hover, a.navLink:active, {color:#fff;}
	a.pageLink:link {color:#3ea3df;} /* bright blue */
	a.pageLink:visited {color:#3ea3df;} /* bright blue */
	a.pageLink:hover, a#resumeLink:link, a#resumeLink:visited {color:#2a668b;} /* tint blue */
	a.pageLink:focus {color:#2a668b;} /* tint blue */
	a.pageLink:active {color:#3ea3df;} /* bright blue */
	span.em, em {color:#2a668b; font-style:italic;}
	/* blueArrow used on p and li */
	.blueArrow {
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/blueArrow.png) no-repeat 0px 2px;
		padding-left:14px;
	}

/** set utilities
------------------------------------------------ */
	div a span.toolTip, li a span.toolTip {
		display:none;
		position:relative;
	}
			
		div a:hover span.toolTip, li a:hover span.toolTip {
			display:block;
			position:absolute;
			z-index:25px;
			font:0.625em georgia;
			color:#fff;
			text-shadow: #333 0 0 1px;
			padding:5px;
			border: 1px solid #000;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			-moz-background-clip:border;
			-moz-background-inline-policy:continuous;
			-moz-background-origin:padding;
			background: rgba(0, 0, 0, 0.85) url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/p-gradientOverlay.png) repeat-x 0px 0px;
		}
			/* special id set for header logo tooltip */
			#homeTip a:hover span.toolTip {position:absolute; top:10px; left:60%;}
			
/** set column widths
------------------------------------------------ */
	.column1, .column2, .column3 {float:left; height:600px;}
	
	.column1 {width:30%;}
		.column2 {width:50%;}
			.column3 {width:20%;}

	.topRow {height:200px; position:relative;}
		.bottomRow {height:400px; position:relative;}
	
/*
------------------------------------------------
* column1 styles sets include:
* header logo
* about me section
------------------------------------------------ */
	.repeatHeaderBG {background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/repeatShowcaseHeader.png) repeat-x 0px 20px;}
		#headerImg {
			width:234px; height:130px;
			background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/logoHead.png) no-repeat 0px 20px;
		}
/* begin aboutMe styles */
	.aboutMe {
		width:240px; height:394px;
		position:relative;
		top:4px;
		border-left:solid 2px #060606;
		background:url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/aboutMeOuterBorders.gif) #0C0C0C repeat-y 0px 0px;
	}
		
		h2.aboutHeadline {
			width:240px; height:48px;
			background:url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/aboutHeadline.gif) no-repeat 15px 18px;
		}
		.aboutTagLine {
			width:236px; height:20px;
			font-size: 9px;
			background:#202020 url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/aboutTagLine.gif) no-repeat 12px 0px;
		}
		.aboutContent {width:210px; margin:18px auto 0px;}
	
/*
------------------------------------------------
* column2 styles sets include:
* global navigation
* projects content
* services content
* experience content
* resources content
* contact content
------------------------------------------------ */

/* begin global nav */
	ul.siteNavigation {
		width:380px; height:116px;
		display:block;
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/mainNav.png) no-repeat 0px 0px;
	}
		
		ul.siteNavigation li a { height:116px; display:block; }
		/* set sprite styles */
		ul.siteNavigation li#projectsLink { width:68px }
		ul.siteNavigation li#servicesLink { width:68px }
		ul.siteNavigation li#experienceLink { width:87px }
		ul.siteNavigation li#resourcesLink { width:84px }
		ul.siteNavigation li#contactLink { width:73px }
		/* hover state + active and current state */
		ul.siteNavigation li#projectsLink a:hover, 
		ul.siteNavigation li#projectsLink a.current { 
			width:68px; background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/mainNav.png) no-repeat 0px -116px; 
		}
		ul.siteNavigation li#servicesLink a:hover, 
		ul.siteNavigation li#servicesLink a.current { 
			width:68px; background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/mainNav.png) no-repeat -68px -232px; 
		}
		ul.siteNavigation li#experienceLink a:hover, 
		ul.siteNavigation li#experienceLink a.current { 
			width:87px; background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/mainNav.png) no-repeat -136px -348px;
		}
		ul.siteNavigation li#resourcesLink a:hover, 
		ul.siteNavigation li#resourcesLink a.current { 
			width:84px; background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/mainNav.png) no-repeat -223px -464px; 
		}
		ul.siteNavigation li#contactLink a:hover, 
		ul.siteNavigation li#contactLink a.current { 
			width:73px; background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/mainNav.png) no-repeat -307px -580px; 
		}
	
/** set bottom row - mid column styles
------------------------------------------------ */
	.bottomRow .bottomMidCol {
			height:390px;
			position:relative; top:4px;
			border:solid 2px #060606;
			background:#080808 url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/backgroundNoise.gif);
	}
	
		.midContentWrap {
			width:620px;
			position:relative;
		}
		
			.titleWrap {
				width:620px; height:47px;
				border-bottom:solid 3px #242424;
				-moz-border-image: url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/subjectTitleBorder.gif) 0 0 3 0 stretch;
				-webkit-border-image: url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/subjectTitleBorder.gif) 0 0 3 0 stretch;
			}
		
			h3.subjectTitle, #services, #experience, #resources, #contact {
				width:112px; height:25px;
				position:relative; top:26px;
				
			}
			#services {background-position:2px -25px;}
				#experience {background-position:2px -50px;}
					#resources {background-position:2px -75px;}
						#contact {background-position:2px -100px;}

/** set main content frame work
------------------------------------------------ */
	.mainContentPush {width:100%; height:25px; position:relative;}
		#projectsFrame, #servicesFrame, #experienceFrame, #resourcesFrame, #contactFrame, #archiveFrame {
			width:602px; position:relative; overflow:hidden;
		}
			.leftSideContent {width:301px; float:left;}
			.rightSideContent {width:301px; float:right;}

/** begin projects styles
------------------------------------------------ */
	#projectsFrame {
		height:297px;
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/galleryBackground.jpg) no-repeat 0px 0px;
	}
	
	.innerFrameLiner {
			width:576px; height:271px;
			position:relative; top:12px; left:12px;
		}

/** begin services and experience styles
------------------------------------------------ */
	.websites, .identity, .print, .media {
		width:290px; height:150px;
		position:relative;
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/servicesBackground.jpg) no-repeat 0px 0px;
	}
		.identity {background-position:-290px 0px;}
			.print {background-position:0px -150px; margin-top:5px;}
				.media{background-position:-290px -150px; margin-top:5px;}
		
		.software, .technology {
			width:290px; height:150px;
			position:relative;
			background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/experienceBackground.jpg) no-repeat 0px 0px;
		}
			.technology {background-position:0px -150px; margin-top:5px;}
				
		.websites ul, .identity ul, .print ul, .media ul, .software ul, .technology ul {
			width:128px;
			display:block;
			position:relative; top:28px; left:18px;
		}
		
			.websites ul li, .identity ul li, .print ul li, .media ul li, .software ul li, .technology ul li {
				line-height:18px;
				font-size:12px;
				background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/blueArrow.png) no-repeat 0px 2px;
				padding-left:14px;
			}
			
		.qualifications {
			width:290px; height:306px;
			position:relative;
			background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/pdfFolderIcon.png) no-repeat 230px 237px;
		}
			.qualificationsTitle {
				height:35px;
				background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/qualificationsTilte.png) no-repeat 0px 10px;
			}
			
			.qualifications p { margin-top: 6px; }
			
			.resumeDownload {
				width:290px; height:60px;
				position:absolute; bottom:0px;
				display:block;
				background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/resumeDownloadIcon.png) no-repeat 0px 15px;
			}
			
			/** begin services mod over-lay styles
			------------------------------------------------ */
			.overlay_Container{
				width:276px; height:135px;
     			overflow:hidden;
     			position: absolute; top:7px; left:7px;
     			z-index: 1;
			}
				/* style overlay elements */
				.overlay, .overlay_Hover {
					width:276px; height:135px;
     				display:block;
     				position:absolute;
     				z-index:2;
     				background:#000;/* black */
				}

				/* style hover elements */
				.overlay_Hover {
     				z-index:3;
     				background:transparent;
				}
 				
 				/* set typography for overlay content */
 				.overlay_Title, .overlay_Copy {
 					font-family:'ITCAvantGardeGothicStdMedium', Georgia,Serif;
 					font-size: 10px; line-height:16px;
 					display: inline-block;
 					padding:0px 28px 12px 10px !important;
 					color:#a9a9a9; /* grey */
 				}
 					.overlay_Title {
						font-size:18px;
 						padding-top:11px !important; 
 						color:#acacae;
 					}
		
/* 
*  begin resources styles 
*  dynamic content = #dynamicStage
------------------------------------------------ */

	.resourceHeadlines {
		width:602px; height:20px;
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/resourceHeadlines.png) no-repeat 0px 1px;
	}
	
		#resourceSummary {width:550px; margin-top:10px; clear:both;}
	
		.design, .development, .inspiration, .thingsMac, .column_Overflow {
			width:150px;
			float:left;
			position:relative;
		}
	
			.design h4, .development h4, .inspiration h4, .thingsMac h4 {
				width:150px; height:20px;
				margin:30px auto 5px;
				background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/resourceHeadlines.png) no-repeat 2px -20px;
			} /* remove h4 spacing on archive page :: margin not needed */ .clear_Margin {margin-top:0px !important;}
			
				.development h4 {background-position:0px -39px;}
					.inspiration h4 {background-position:0px -59px;}
						.thingsMac h4 {background-position:0px -79px;}
						
			.design ul li, .development ul li, .inspiration ul li, .thingsMac ul li, .column_Overflow ul li {
				line-height:28px;
				font-size:12px;
				position:relative;
				padding-left:22px;
				background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/blueArrowSquared.png) no-repeat 0px 8px;
			}
			
				.viewArchive {
					margin-top:26px;
					border-top:solid 1px #1c1c1c;
				}
				

/** begin contact styles
------------------------------------------------ */
	.formWrap {
		width:462px; height:320px;
		position:relative;
		float:left;
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/contactFormBG.jpg) no-repeat 0px 0px;
	}
	

	form, label, input, textarea {display:block; text-align:left;}
	
		form {
			width:420px; height:285px;
			position:relative; top:27px;
			margin:0px auto;
			outline:none;
			background:transparent;
		}

		
			label, input, #addMessage {
				width:200px; height:24px;
				line-height:28px;
				font-size:12px;
			}
			
			
				input, textarea {
					height:16px;
					font-size:11px;
					color:#686767;
					line-height:16px;
					border:solid 1px #1c1c1c;
					background:#000;
				}
				
				
				textarea {
					width:420px; height:86px;
					line-height:16px;
					overflow:hidden;
				}
				
				input[type="text"]:focus, textarea:focus { 
					border-color: #aed1fd;
				}
				
				/* css3 placeholder style - current support chrome and safari 1.21.11 */
					::-webkit-input-placeholder { line-height: 20px; color:#494848; }
					input:-moz-placeholder { line-height: 20px; color:#494848; }
				
				#send {
					width:42px; height:29px;
					position:absolute; top:257px; left:190px;
					border:none;
					background:transparent;
				}
				
				#contactSummery {
					width:160px; height:90px;
					font-size:12px;
					position:absolute; top:50px; left:250px;
					z-index:100px;
					background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/blueArrowSquared.png) no-repeat 55px 72px;
				}
				
/* form success message */
 #success_Message {display:none;}
 	#success_Message {
		width:420px; height:275px;
		margin:0px auto;
		position:relative; top:11px;
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/contact_SuccessMsg.jpg) no-repeat 0px 0px;
 	}
 	
	#refresh_Contact_Page {
		width:32px; height: 28px;
		display: block;
		position: absolute; top: 92px; left: 125px;
	}
	
 	
		
/* network bar */
	.networkBar {
		width:134px; height:300px;
		float:right;
		position: relative;
		background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/networkHeader.png) no-repeat 0px 0px;
	}
	
		.networkBar h4 {height:32px;}
	
		.facebook, .linkedin, .delicious, .digg, .twitter {
			width:134px; height:32px;
			display:block;
			margin-top:6px;
			background:transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/networkButtons.gif) no-repeat 0px 2px;
		}
		
				.linkedin {background-position:2px -32px;}
					.delicious {background-position:2px -64px;}
						.digg {background-position:2px -96px;}
							.twitter {background-position: 2px -128px}
		#share {display:block; margin:6px 0px 0px 2px; } !important

/** set rightCol column styles :: 2px clip
------------------------------------------------ */
	.bottomRightCol {
		width:1px; height:394px;
		position:relative; top:4px;
		border-right:solid 1px #000;
		background:#1a1a1a;
	}
	
	
/** set directory link :: being placed in body
------------------------------------------------ */
	#directory_Link {
		width: 24px; height: 23px;
    	display: block;
    	position: fixed; bottom: 10px; right: 10px;
    	background: transparent url(http://www.circaeightyfour.com/circaeightyfour/img/portfolio/directory_Caret.png) no-repeat 0px 0px;
    	
	}
	
	#directory_Link:hover {
		/* for IE */
			filter:alpha(opacity=100);
		/* for FireFox */
			-moz-opacity: 1.0;
		/* CSS3 Standard */
			opacity: 1.0;
	}