/* @override http://jb.dev/stylesheets/layout.css?1275862341 */

@import 'normalize.css';
@import 'typography.css';

body {
	padding-bottom: 36px;
	color: #3F240C;
	background: #dfdfdc url(/images/bg-body.jpg) center top fixed no-repeat;
}

header {
	position: relative;
	display: block;
	height: 193px;
	margin-bottom: 56px;
}

a {
	border-bottom-width: 1px;
	border-style: dotted;
}

a:link,
a:visited {
	color: #33597f;
	border-color: #9BBAD3;
	transition-property: border-color, color;
	transition-duration: .2s;
	transition-timing-function: ease-in;
	-webkit-transition-property: border-color, color;
	-webkit-transition-duration: .2s;
	-webkit-transition-timing-function: ease-in;
	-o-transition-property: border-color, color;
	-o-transition-duration: .2s;
	-o-transition-timing-function: ease-in;
}

a:visited {
	color: #60417F;
	border-color: #60417F;
}

a:hover,
a:focus {
	color: #8f0833;
	border-color: #d25551;
	transition-timing-function: ease-out;
	-webkit-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
}

a:active {
	position: relative;
	bottom: -1px;
}

a[href^='http://'] {
	background: url(/images/ico-external-link.png) no-repeat right top;
	padding-right: 14px;
}

.copyright a[href^='http://'],
.project-license a[href^='http://'] {
	background: url(/images/ico-external-link-small.png) no-repeat right center;
	padding-right: 12px;
}

#intro aside a[href^='http://'] {
	padding-right: 0;
	background: url(/images/ico-external-link-small.png) no-repeat right 97%;
}

.project-links a[href^='http://'], /* werkstatt downloads */
.copyright a[href^='http://joebergantine.com'] /* footer copyright link back to home */
{
	background: none;
	padding-right: 0;
}

nav {
	color: #527ea9;
}

header nav {
	position: absolute;
	top: 45px;
}

header nav ul {
	margin: 0;
}

header nav li {
	display: inline;
	margin-right: 30px;
}

header nav span {
	padding-top: 8px;
	border-top: 2px solid #c6d3d7;
}

header nav a {
	border-bottom: none;
}

header nav a span {
	transition-property: border-color, color;
	transition-duration: .2s;
	transition-timing-function: ease-in;
	-webkit-transition-property: border-color, color;
	-webkit-transition-duration: .2s;
	-webkit-transition-timing-function: ease-in;
	-o-transition-property: border-color, color;
	-o-transition-duration: .2s;
	-o-transition-timing-function: ease-in;
	border-top-width: 0;
	border-style: none;
}

header nav a:hover,
header nav a:focus,
header nav a:active {
	padding: 0;
	background-color: transparent;
	left: 0;
	margin-right: 0;
}

header nav a:hover span,
header nav a:focus span,
header nav a:active span {
	border-top: 2px solid #cc3834;
	color: #8f0833;
}

legend {
	padding: .9em 0;
	position: relative;
	top: 3px;
}

form div {
	margin-bottom: 1em;
}

label {
	position: relative;
	display: block;
	margin-bottom: .3em;
}

input,
textarea {
	padding: .5em;
	border-color: #fefefe;
	border-width: 1px;
	border-style: inset;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;	
	color: #3F240C;
	background-color: #f3f3f2;
}

input {
	width: 220px;
}

textarea {
	width: 369px;
	height: 156px;
	overflow: auto;
}

input:focus,
textarea:focus {
	background-color: #fff;
}

button {
	padding: 5px 13px;
	border: none;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	color: #efefef;
	background-color: #b3bc38;
}

button:hover,
button:focus {
	background-color: #AAB022;
	cursor: pointer;
}

button:active {
	position: relative;
	bottom: -1px;
}

code, kbd, samp, tt {
	color: #697900;
}

/* --------------------------------------------
	GENERIC CLASSES
	-------------------------------------------- */

	.flash-error, /* rails flash messages that temporarily show up above forms indicating success or failure of a particular event */
	.flash-success {
		margin-bottom: 2em;
		padding: .5em 1em;
		border-bottom-width: 3px;
		border-style: solid;
		color: #efefef;
	}
		
	.flash-error {
		background: #a05240 url(/images/bg-flash-error.png) repeat-x;
		border-color: #991700;
	}
	
	.flash-success {
		background: #8b9743;
		border-color: #336600;
	}
	
	span.required { /* style up the asterisks that mark a field as required nicely */
		color: #b6be39;
		position: relative;
		top: .35em;
		padding-right: .2em;
	}
		
	.errorExplanation,
	.formError { /* applied to the details of the error which get appended to the label */
		color: #990000;
	}
	
	.fieldWithErrors input,
	.fieldWithErrors textarea {
		color: #efefef;
		background-color: #a05240;
		border-color: #991700;
	}
	
	.errorExplanation li {
		list-style-type: disc;
		list-style-position: inside;
	}
	
	.list-standard li {
		margin-bottom: 1.5em;
	}
	
	.wrapping-link { /* html5 allows us to wrap a link around any kind of element but browsers don't seem to be handling this uniformly yet. adding this class to those links that wrap around a block level element seems to help */
		display: block;
	}
	
	.hidden {
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}
	
	.seperator {
		color: #ccc;
		padding: 0 10px;
	}

/* --------------------------------------------
	SITEWIDE
	-------------------------------------------- */

	/* reset the following image-based links */
	#logo-site a,		/* header */
	#elsewhere h2 a, 	/* home */
	#latest-72ppi a, 	/* home */
	#side-projects a, 	/* home */
	#colophon ul a,  	/* home */
	a.download,			/* werkstatt */
	a.rss-feed,			/* werkstatt */
	#download-vcard a	/* contact */
	{
		position: static;
		top: 0;
		bottom: 0;
		background: none;
		border: none;
		padding: 0;
		left: 0;
		margin-right: 0;
	}

	#wrapper-outer { /* wrapper outer fills the whole window width allowing us to layer up background images */
		background: url(/images/bg-header.png) left top repeat-x;
		min-width: 920px;
	}
	
	#wrapper-inner { /* centers within the window and holds the content of the page */
		width: 820px;
		margin: 0 auto;
		padding-right: 50px;
		padding-left: 50px;
		position: relative;
		overflow: hidden;
	}
	
	#logo-site {
		position: absolute;
		top: 107px;
		left: -7px;
	}
	
	#nav-skip { /* exists only for screenreaders (and theoretically mobiles) and as such may be pushed off-screen */
		position: absolute;
		left: -9999em;
	}

/* --------------------------------------------
	HOME
	-------------------------------------------- */

	#intro {
		display: block;
		width: 218px;
		padding-right: 182px;
		float: right;
		position: relative;
		margin-top: -210px;
	}
		
		#self-portrait {
			border-bottom: 1px solid #fff;
		}
	
		#intro h1 {
			position: relative;
			margin-top: 1em;
			margin-left: -20px;
			width: 400px;
			border: none;
		}
		
		#intro aside {
			position: absolute;
			right: -30px;
			top: 435px;
			width: 162px;
		}
	
	#elsewhere {
		display: block;
		float: left;
		width: 320px;
		margin-top: 1em;
	}
	
		#elsewhere time {
			padding: 3px 7px;
			-moz-border-radius: 1px;
			-webkit-border-radius: 1px;
			border-radius: 1px;
			text-shadow: #A7C5D0 1px 1px 0;
			color: #efefed;
			background-color: #bbcbd1;
		}
		
		#elsewhere section  {
			display: block;
			margin-bottom: 36px;
		}
	
		#elsewhere h2 {
			border-bottom: 1px solid #cfcfbe;
		}
	
		#latest-twitter,
		#latest-delicious,
		#latest-72ppi {
			padding-left: 60px;
			position: relative;
		}
		
		#latest-twitter h2,
		#latest-delicious h2,
		#latest-72ppi h2 {
			position: absolute;
			left: 0;
			top: 0;
			width: 36px;
			height: 36px;
			text-indent: -9999em;
			border: 0px none transparent;
			background-position: left top;
			background-repeat: no-repeat;
		}
			
		#latest-twitter h2 {
			background-image: url(/images/bg-latest-twitter.png);
		}
		
		#latest-delicious h2 {
			background-image: url(/images/bg-latest-delicious.png);
		}
		
		#latest-72ppi h2 {
			background-image: url(/images/bg-latest-72ppi.png);
		}
			
		#latest-twitter p,
		#latest-delicious p,
		#latest-72ppi p {
			margin-top: -.8em;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		#latest-72ppi img {
			margin-top: -.4em;
		}
		
		#colophon ul {
			overflow: hidden;
		}
		
		#colophon li {
			float: left;
			margin-right: 25px;
		}
		
/* --------------------------------------------
	PORTFOLIO
	-------------------------------------------- */

	.project-wrapper {
		clear: left;
		overflow: hidden;
		width: 840px;
		margin-bottom: 15px;
		padding-bottom: 15px;
		padding-top: 15px;
		position: relative;
		border-top: 1px solid #CFCFBE;
	}
	
		.coda-slider-wrapper {
			width: 540px;
			float: left;
			margin-right: 20px;
			padding-bottom: 20px;
			position: relative;
		}
	
			.coda-slider {
				border: 3px solid #fff;
			}
		
			.coda-slider, 
			.coda-slider .panel
			{ 
				width: 534px; 
				height: 334px; 
				position: relative;
				z-index: 10;
				-moz-box-shadow: 1px 1px 6px rgba(0,0,0,.2);
				-webkit-box-shadow: 0px 1px 6px rgba(0,0,0,.2);
				box-shadow: 1px 1px 6px rgba(0,0,0,.2);
			}

				.coda-slider p.loading { 
					text-align: center 
				}

				h3.title {
					display: none;
				}
				
				.coda-nav {
					position: absolute;
					top: 323px;
					left: 0;
					margin-left: 6px;
					z-index: 1;
				}
				
					.coda-nav li {
						float: left;
						margin-right: 6px;
					}
						
						.coda-nav li a {
							display: block;
							width: 14px;
							height: 18px;
							padding: 3px 4px 0;
							background-color: #c6d3d7;
							background-image: url(/images/bg-tabs.jpg);
							background-position: -19px -12px;
							background-repeat: no-repeat;
							border-right-width: 1px;
							border-bottom-width: 1px;
							border-left-width: 1px;
							border-style: solid;
							border-color: #9BBAD3;
							-moz-border-radius-bottomleft: 5px;
							-moz-border-radius-bottomright: 5px;
							-webkit-border-bottom-left-radius: 5px;
							-webkit-border-bottom-right-radius: 5px;
							border-bottom-right-radius: 5px;
							border-bottom-left-radius: 5px;
							-moz-box-shadow: 1px 1px 4px rgba(0,0,0,.2);
							-webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.2);
							box-shadow: 1px 1px 4px rgba(0,0,0,.2);
						}
						
						.coda-nav li a:visited {
							border-color: #A286C1;
						}
						
						.coda-nav li a:hover,
						.coda-nav li a:focus {
							color: #111;
							background-color: #d25551;
							background-position: -71px -12px;
							border-color: #9f3019;
						}
						
						.coda-nav li a.current {
							border-style: solid;
							border-color: #c6d3d7;
							border-right-width: 1px;
							border-bottom-width: 1px;
							border-left-width: 1px;
							background-color: #fff;
							background-position: -123px -12px;
							color: #111;
						}
			
		.project-wrapper h2 {
			margin-top: .35em; /* visual adjustment */
		}
		
		.details {
			float: left;
			width: 280px;
		}
		
			.details ul {
				background: url(/images/bg-my-role.png) no-repeat right top;
				min-height: 61px;
			}
		
			.details ul+ul { /* when logged in there are two unordered lists, the 2nd contains action items and shouldn't have the properties of the skills lists */
				background: none;
			}
		
		.skill {
			background-color: transparent;
			background-image: url(/images/bg-skill-bullet.png);
			background-repeat: no-repeat;
			background-position: left center;
			padding-left: 1.5em;
		}
		
/* --------------------------------------------
	SHARED BY PORTFOLIO & WERKSTATT
	-------------------------------------------- */

	ol#list {
		list-style-type: decimal-leading-zero;
		cursor: move;
	}
	
	ol#list li {
		margin-bottom: .5em;
		padding: .5em;
		background: rgba(255,255,255,.3) url(/images/bg-drag.png) no-repeat right bottom;
	}
	
	ol#list li img {
		margin-right: 10px;
	}
	
	ol#list li a { /* multiple links next to each other in werkstatt */
		margin: 0 10px 0 0;
	}
	
	ol#list li img + a { /* links next to thumbs in projects */
		position: relative;
		top: -18px;
	}
		
/* --------------------------------------------
	WERKSTATT
	-------------------------------------------- */
	
	.nav-werkstatt {
		width: 220px;
		float: left;
		margin-top: 3em;
	}
	
		.nav-werkstatt h2 {
			color: #3F240C;
		}
	
		.nav-werkstatt ul {
			margin-top: .2em;
		}
	
		.nav-werkstatt li {
			margin-bottom: 1.5em;
			padding-right: 10px; /* accomodate 'new' violator */
		}
		
			#nav-birds-of-paradise {
				position: relative;
				overflow: visible;
			}
		
			#nav-birds-of-paradise img {
				position: absolute;
				right: -15px;
				top: -10px;
			}
			
			#nav-birds-of-paradise a:active img { /* not sure why we need to explicityl state this but it looks like we do */
				right: -25px;
			}
		
		.nav-werkstatt a {
			display: block;
			border-bottom: none;
		}
		
		.nav-werkstatt div {
			border-left: 3px solid #c6d3d7;
			padding-left: 10px;
		}
		
		.nav-werkstatt a div {
			transition-property: border-color;
			transition-duration: .01s;
			transition-timing-function: ease-in;
			-webkit-transition-property: border-color;
			-webkit-transition-duration: .01s;
			-webkit-transition-timing-function: ease-in;
			-o-transition-property: border-color;
			-o-transition-duration: .01s;
			-o-transition-timing-function: ease-in;
			border-left: 3px solid transparent;
		}
		
			.nav-werkstatt a:hover div,
			.nav-werkstatt a:focus div {
				border-left-color: #CC3834;
			}
		
	.project-details {
		width: 280px;
		margin-left: 80px;
		float: left;
	}
		
		.project-details h1 {
			margin-left: -20px;
			width: 490px;
			border-bottom: none;
		}
		
		.project-details .project-links {
			position: absolute;
			width: 220px;
			right: 40px;
			margin-top: 70px;
		}
		
			.project-links img.download {
				float: left;
				width: 49px;
				margin-right: 10px;
			}
			
			.project-links h2,
			.project-links p {
				float: left;
			}
			
			.project-links .thumb { /* Specials Board */
				clear: left;
				padding-top: 40px;
				border: none;
			}
			
			.project-links .thumb span {
				border-bottom: 1px dotted #9BBAD3;
				transition-property: border-color;
				transition-duration: .2s;
				transition-timing-function: ease-in;
				-webkit-transition-property: border-color;
				-webkit-transition-duration: .2s;
				-webkit-transition-timing-function: ease-in;
				-o-transition-property: border-color;
				-o-transition-duration: .2s;
				-o-transition-timing-function: ease-in;
			}
			
			.project-links a.thumb:hover span,
			.project-links a.thumb:focus span {
				border-color: #d25551;
				transition-timing-function: ease-out;
				-webkit-transition-timing-function: ease-out;
				-o-transition-timing-function: ease-out;
			}
			
			.project-links li a { /* Specials Board -- hide the gallery nav */
				display: none;
			}
			
			.project-links li a.wrapping-link { /* Specials Board -- override previous statement for the first link */
				display: block;
			}
			
			.project-links .rss-feed {
				position: absolute;
				top: 300px;
			}
			
			#run-script .project-links .rss-feed {
				top: 110px;
			}
			
			.project-details iframe {
				margin-left: -35px;
			}
		
		.project-details#gesso { /* Gesso */
			padding-right: 240px;
			background: url(/images/editorial-gesso.png) no-repeat right 150px;
		}
		
		.project-details#django-template img#logos { /* Django Template */
			position: relative;
			margin-left: -20px;
		}
		
		.project-details a#screencap-dtm {
			display: block;
			border: none;
			margin-bottom: 1.5em;
		}
			
		.project-license {
			margin: 3em 0;
		}
			
			.project-license img {
				float: left;
				margin-top: 3px;
				margin-right: 10px;
			}
				
		.testimonial {
			background: transparent url(/images/bg-bq-top.png) no-repeat left top;
			padding: 15px 0 0 0;
			width: 202px;
			position: relative;
			float: right;
			margin-top: -9px;
			margin-left: 30px;
			margin-right: -160px;
			clear: right;
		}
		
			.testimonial div {
				background: transparent url(/images/bg-bq-bottom.png) no-repeat left bottom;
				overflow: hidden;
			}
			
			.testimonial p {
				background: #c5dcd9;
				padding: 0 15px;
				margin: 0 0 49px;
				color: #6a7f86;
			}
			
			.testimonial cite {
				display: block;
				-webkit-transform: rotate(90deg);
				-webkit-transform-origin: bottom right;
				-moz-transform: rotate(90deg);
				-moz-transform-origin: bottom right;
				-o-transform: rotate(90deg);
				-o-transform-origin: bottom right;
				transform: rotate(90deg);
				transform-origin: bottom right;
				margin-right: 55px;
				color: #6a7f86;
			}
	
/* --------------------------------------------
	WERKSTATT ADMIN
	-------------------------------------------- */
	
	input#werkstatt_description {
		width: 500px;
	}
	
	textarea#werkstatt_content_primary,
	textarea#werkstatt_content_secondary {
		width: 800px;
		height: 350px;
	}
	
	input#werkstatt_page_title {
		width: 650px;
	}
	
	textarea#werkstatt_meta_description,
	textarea#werkstatt_meta_keywords {
		width: 500px;
		height: 75px;
	}
	
/* --------------------------------------------
	CONTACT
	-------------------------------------------- */
	
	#form-wrapper-outer {
		width: 380px;
		float: right;
		margin-right: 20px;
	}
	
		#form-wrapper-outer h1 {
			width: 380px;
		}
	
		#form-wrapper-outer form {
			position: relative;
		}
		
		#form-wrapper-outer .flash-error,
		#form-wrapper-outer .flash-success {
			margin-bottom: 1em;
		}

		#form-wrapper-outer p span.required {
			padding-right: 0;
		}
		
		#sending img {
			position: relative;
			top: .4em;
			padding-right: .5em;
		}
			
	.vcard {
		width: 380px;
		float: left;
		position: relative;
		margin-top: -16px;
	}

		.vcard ul {
			margin-bottom: 36px;
		}
		
		.vcard li {
			margin-bottom: .5em;
		}
		
		.vcard li img {
			position: relative;
			bottom: -3px;
			padding-right: .7em;
		}
		
		.vcard p {
			width: 242px;
		}
		
		#download-vcard {
			position: absolute;
			top: 30px;
			left: 235px;
			width: 95px;
			height: 150px;
			overflow: hidden;
			text-indent: -9999em;
		}
		
			#download-vcard a {
				position: absolute;
				left: 0;
				top: 0;
				display: block;
				width: 95px;
				height: 150px;
				background: url(/images/logo-vcard.png) no-repeat left top;
			}
			
			#download-vcard a:active {
				top: 1px;
			}


/* --------------------------------------------

	jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
	Copyright (c) 2009 Niall Doherty
	This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.

	-------------------------------------------- */

	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; }
	.coda-slider { float: left; overflow: hidden; position: relative; }
	.coda-slider .panel { display: block; float: left; }
	.coda-slider .panel-container { position: relative; }

/* --------------------------------------------

	jQuery Modal Window

	-------------------------------------------- */

	#window {  
		background-color: #111;
		position: absolute;  
		display: none;  
		z-index: 9999;  
		padding: 2px 2px 10px;  
	}  
		
		#window-mask { /* masks the body for the window to sit over */
			position: absolute;  
			z-index: 9000;  
			background-color: #fff;  
			display: none;  
		}  

		#window-close { /* window close button */
			position: absolute;
			display: block;
			left: -12px;
			top: -12px;
			width: 36px;
			height: 36px;
			background: url(/images/btn-close.png) no-repeat left top;
			text-indent: -9999em;
			border: none;
			overflow: hidden;
		}
		
		#window-meta { /* holds title and nav */
			position: relative;
			background: #111;
			height: 32px;
			top: -32px;
			color: #fff;
		}
		
			#window-title {
				position: absolute;
				left: 35px;
				top: 8px;
			}
			
			#window-nav {
				position: absolute;
				right: 0;
				top: 6px;
			}
			
			#window-nav a {
				border: none;
			}
			
				#window-nav-previous {
					margin-right: 15px;
				}
				
				#window-nav-next {
					margin-right: 20px;
				}