/*
Web Stylesheet for http://www.christophermeyers.name/
Author: Christopher Meyers
*/


/*
IMPORTS
*/
@import "reset.css";


/*
Font Declarations
 *
 * The fonts included are copyrighted by the vendors listed below.
 *
 * @vendor:     Paratype
 * @vendorurl:  http://fonts.ru
 * @licenseurl: http://www.fontsquirrel.com/license/PT-Sans
 *
 *
 */

@font-face {
	font-family: 'PTSans';
	src: url('../fonts/PT_Sans_Narrow_Bold.eot');
	src: local('PT Sans Narrow Bold'), local('PTSans-NarrowBold'), url('../fonts/PT_Sans_Narrow_Bold.ttf') format('truetype');
	font-weight: bold;
}
@font-face {
	font-family: 'PTSans';
	src: url('../fonts/PT_Sans_Italic.eot');
	src: local('PT Sans Italic'), local('PTSans-Italic'), url('../fonts/PT_Sans_Italic.ttf') format('truetype');
	font-style: italic;
}


/*
GLOBALS
*/
html {margin:0;padding:0;}
body {
	margin: 0 auto;
	padding: 0;
	color: #333;
	font-size: 12px;
	line-height: 24px;
	font-family: Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif;
}
p, blockquote {
	margin-bottom: 12px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'PTSans', sans-serif;
	font-weight: bold;
	color: #666;
}
h2 {
	color: #333;
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
	border-bottom: 1px solid #aaa;
}
h3 {
	font-size: 15px;
}
li { position: relative;}
li:before { 
	content: "»";
	position: absolute;
	left: -15px;
}
a {	
	padding: 2px;
	margin: -2px;
}
a:link {
	text-decoration: none;
	color: #666;
	border-bottom: 1px solid #ccc;
}
a:visited {
	color: #000;
	border-bottom: 0 none;
	text-decoration: none;
}
a:hover,
a:focus,
a:active {
	background-color: #eee;
	color: #000;
	border-bottom: 0 none;	
}
.section {
	margin: 0 auto -45px;
	padding: 75px 2.5% 0;
	max-width: 1000px;
	min-width: 600px;
}
	.section>h2 {
	}

/*
NAV
*/
div#top {
	position: fixed;
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	padding: 11px 2.5% 4px;
	background-color: #fff;
	border-bottom: 1px solid #eaeaea;
	-moz-box-shadow: 0 3px 7px #eaeaea;
	-o-box-shadow: 0 3px 7px #eaeaea;
	-webkit-box-shadow: 0 3px #eaeaea;
	box-shadow: 0 3px 7px #eaeaea;
	border-bottom: 1px solid rgba(100,100,100,.18);
	-moz-box-shadow: 0 3px 7px rgba(100,100,100,.18);
	-o-box-shadow: 0 3px 7px rgba(100,100,100,.18);
	-webkit-box-shadow: 0 3px 7px rgba(100,100,100,.18);
	box-shadow: 0 3px 7px rgba(100,100,100,.18);
}
	ul#nav {
		margin: 0 auto;
		padding: 7px 0 8px;
		max-width: 1000px;
		text-transform: uppercase;
		font-size: 15px;
		line-height: 15px;
		text-align: right;
		font-family: 'PTSans', sans-serif;
		font-weight: bold;
		position: relative;
	}
		ul#nav li {
			display: inline;
			margin-right: 15px;
			list-style-image: none;
		}
		ul#nav li:before {
			content: "";
		}
		ul#nav li:first-child  {
			position: relative;
			text-align: left;
			padding-top: 18px;
			font-style: none;
			position: absolute;
			top: -9px;
			left: 0;
		}
		ul#nav li:first-child a:before  {
			content: "The personal effects of";
			font-family: 'PTSans', sans-serif;
			font-style: italic;
			font-weight: normal;
			color: #999;
			font-size: 12px;
			text-transform: none;
			z-index: -1;
			display: block;
		}
			ul#nav li:first-child a:link,
			ul#nav li:first-child a:visited {
				float: left;
				text-align: left;
				margin-top: -27px;
				padding-top: 15px;
				color: #333;
				font-size: 18px;
				line-height: 15px;
				font-family: 'PTSans', sans-serif;
				font-weight: bold;
			}
			ul#nav li:first-child a:hover,
			ul#nav li:first-child a:focus,
			ul#nav li:first-child a:active {
				background-color: transparent;
				color: #666;
			}
			ul#nav a:link,
			ul#nav a:visited {
				margin: -3px;
				padding: 3px 3px 12px;
				border-bottom: 0 none;
				position: relative;
				background-color: transparent;
				color: #666;
			}
			ul#nav .current a,
			ul#nav a:hover,
			ul#nav a:focus,
			ul#nav a:active {
				background: transparent url(../images/pyramid.png) no-repeat 50% 100%;
			}
			ul#nav li.current:first-child a,
			ul#nav li:first-child a:hover,
			ul#nav li:first-child a:focus,
			ul#nav li:first-child a:active {
				background: transparent none;
			}
			/*
			ul#nav .current a,
			ul#nav a:hover,
			ul#nav a:focus,
			ul#nav a:active {
				background: #eaeaea;
			}
			ul#nav li:not(:first-child) a:hover,
			ul#nav li:not(:first-child) a:focus,
			ul#nav li:not(:first-child) a:active {
				background: transparent;
			}
			ul#nav li:not(:first-child) a:hover:after,
			ul#nav li:not(:first-child) a:focus:after,
			ul#nav li:not(:first-child) a:active:after {
				position: absolute;
				bottom: 0px;
				left: 35%;
				content: "";
				display: block;
				background: transparent;
				border: 9px solid #eaeaea;
				border-color: transparent transparent #eaeaea transparent;
			}
			ul#nav h1 a:hover:after,
			ul#nav h1 a:focus:after,
			ul#nav h1 a:active:after {
				border-bottom: 0 none;
			}*/
		ul#nav li:last-child {
			margin-right: 0;
		}

/*
ABOUT
*/
#about {
}
	#about li {
		margin-bottom: 12px;
		clear: left;
	}

/*
ESSAYS ETC
*/
#essays {}
	#essays li {
		margin-bottom: 12px;
		clear: left;
	}
	#essays .type {		
		display: block;
		float: left;
		width: 10%;
		margin-right: 2.5%;
		text-transform: uppercase;
		height: 60px;
	}


/*
PORTFOLIO
*/
#projects ul {
	margin-bottom: 18px;
}
	#projects li {
		list-style-image: none;
		clear: both;
	}
	#projects li:before {
		content: "";
	}
		#projects li.site h3 {
			font-size: 24px;
			line-height: 24px;
			margin: 30px 0 0 0;
			padding-right: 2.5%;
			color: #333;
			text-transform: uppercase;
		}
		#projects li#cafe h3 {
			color: #550b14;
		}
		#projects li#refresh h3 {
			color: #3c2714;
		}
		#projects li#maryann h3 {
			color: #672356;
		}
			#projects a.siteLink {
				float: right;
				margin: 0;
				padding: 0;
				border: 1px solid #fff;
				margin-left: 15px;
				height: 264px;
				width: auto;
				overflow: hidden;
				-moz-box-shadow: -2px 2px 9px rgba(60, 60, 60, .5);
				-o-box-shadow: -2px 2px 9px rgba(60, 60, 60, .5);
				-webkit-box-shadow: -2px 2px 9px rgba(60, 60, 60, .5);
				box-shadow: -2px 2px 9px rgba(60, 60, 60, .5);
			}
			#projects a.siteLink:hover,
			#projects a.siteLink:focus,
			#projects a.siteLink:active {
				background: transparent;
				margin-top: -24px;
				margin-bottom: -36px;
				margin-right: -15px;
				margin-left: -170px;
				position: relative;
				z-index: 100;
				height: 324px;
				-moz-box-shadow: -4px 2px 15px rgba(120, 120, 60, .6);
				-o-box-shadow: -4px 2px 15px rgba(120, 120, 60, .6);
				-webkit-box-shadow: -4px 2px 15px rgba(120, 120, 60, .6);
				box-shadow: -4px 2px 15px rgba(120, 120, 60, .6);
			}
				#projects a.siteLink img.screenshot {
					display: block;
					margin: 0;
					width: 250px;
					position: relative;
				}
				#projects a.siteLink:hover img.screenshot {
					width: 450px;
				}
				#projects img.icon {
					width: 36px;
					height: 36px;
					position: absolute;
					top: 264px;
					right: 232px;
					left: auto;
					bottom: auto;
					z-index: 100;
				}
				#projects .status {
					position: relative;
				}
				#projects .status:before {
					content: "*";
					position: absolute;
					left: -.5em;
				}
					#projects ul ul li {
						display: inline;
					}
					#projects ul ul li:not(:last-child):after {
						content: ",";
						position: static;
					}
				.tech {
					background-color: #ccc;
					margin-left: -6px;
					padding-left: 6px;
					border-right: 1px solid #ccc;
				}


/*
WEB FRIENDS
*/
#friends {
}
	#friends h3 {
		display: inline;
	}
	#friends li {
		margin-bottom: 12px;
	}
	#friends ul ul {
		display: inline;
	}
		#friends ul ul li {
			display: inline;
		}
			#friends ul ul li:before {
				content: "";
			}
			#friends ul ul li:not(:last-child):after {
				content: ",";
			}
	
/*
CONTACT
*/
#contact { 
	clear: both;
	margin: 75px 0 0 0;
	padding: 0 2.5% 0;
	min-width: 600px;
	max-width: none;
	background-color: #aaa;
	color: #333;
}
#contact:after {
	display: block;
	clear: both;
	content: "\n";
	color: #aaa;
}
	#contact h2 {
		display: block;
		margin: 0 auto;
		padding-top: 1em;
		border-bottom: 0 none;
		max-width: 1000px;
		font-size: 24px;
		line-height: 15px;
		color: #000;
		text-shadow: 0 1px 0 #fff;
	}
	#contact h2 a:link,
	#contact h2 a:visited {
		color: #000;		
	}
	#contact>ul {
		margin: 12px auto 0;
		max-width: 1000px;
	}
		#contact li {
			float: left;
			width: 22.5%;
			margin-right: 2.5%;
			list-style-image: none;
			border-top: 1px solid #666;
			border-bottom: 1px solid #666;
			position: relative;
			height: 58px;
		}
		#contact li:hover {
			border-color: #000;
		}
		#contact li:before {
			content: "";
			position: static;
		}
			#contact li h3 {
				text-transform: uppercase;
				color: #333;
			}
				#contact li h3 a:link,
				#contact li h3 a:visited {
					border-bottom: 0 none;
					background-color: transparent;
					text-shadow: 0 0 0 transparent;
					color: #333;
					padding: 0;
				}
			#contact li a:link,
			#contact li a:visited {
				display: block;
				clear: left;
				color: #fff;
				text-shadow: 0 1px 0 #000;
				border-bottom: 0 none;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				padding-top: 30px;
				line-height: 30px;
			}
			#contact li a:hover,
			#contact li a:focus,
			#contact li a:active {
				background-color: transparent;
				color: #000;
				text-shadow: 0 0 0 transparent;
			}

p.copyright {
	clear: both;
	margin-bottom: 0;
	padding: 45px 5% 12px 0;
	color: #fff;
	background-color: #aaa;
	text-align: right;
	position: static;
	text-shadow: 0 1px 0 #000;
}
.seymour:link,
.seymour:visited {
	background: #eaeaea url('../images/seymour.png') no-repeat 100% 50%;
	color: #000;
	padding: 7px 18px 8px 7px;
	border-bottom: 0 none;
	font-family: 'PTSans';
	font-style: italic;
	line-height: 15px;
	font-size: 14px;
	text-shadow: 0 1px 0 #fff;
	position: relative;
	clear: both;
}
.seymour:hover,
.seymour:focus,
.seymour:active {
	color: #ccc;
	border-bottom-color: #000;
	text-shadow: 0 0 0 transparent;
	background-color: #000;
}


/*
Essay Pages
*/
body.essay ul#nav {
	height: 15px;
}
body.essay div.section {
	max-width: 600px;
}
	body.essay div#main h1 {
		font-size: 36px;
		margin-bottom: 12px;
	}
		body.essay div#main h1 span {
			letter-spacing: -2px;
			color: #ddd;
		}
	body.essay div#main h2 {
		margin-top: 24px;
		text-transform: none;
	
	}
	body.essay em {
		font-weight: bold;
		font-style: italic;
	}
	body.essay del {
		color: #ddd;
	}
	body.essay blockquote,
	body.essay ul.features,
	body.essay dl.sources {
		background-color: #eee;
		margin-left: -3px;
		margin-right: -3px;
		padding-left: 3px;
		padding-right: 3px;
		margin-bottom: 0;
	}
	body.essay ul.features li:before {
		content: "";
	}
	body.essay blockquote:before {
		content: open-quote;
	}
	body.essay blockquote:after {
		content: close-quote;
	}
	blockquote q:before {
		content: open-quote;
	}
	blockquote q:after {
		content: close-quote;
	}
	body.essay dl.sources {
		color: #666;
		border-top: 1px solid #fff;
		margin-top: 0;
		margin-bottom: 12px;
		font-size: 10px;
	}
	body.essay dl.sources dt {
		float: left;
	}
	body.essay dl.sources dt:after {
		content: ":";
	}
	body.essay dl.sources dd {
		margin-left: 4em;
	}
	body.essay dl.sources a:hover,
	body.essay dl.sources a:focus,
	body.essay dl.sources a:active {
		background-color: #fff;
	}
	body.essay p strong {
		display: block;
		background-color: #ff9;
		margin-left: -3px;
		margin-right: -3px;
		padding-left: 3px;
		padding-right: 3px;
	}
	body.essay div#comments {
		margin-top: 75px;
		padding-top: 0;
	}
		body.essay div#comments a:link,
		body.essay div#comments a:visited {
			border-bottom: 0 none;
			color: #999;
		}
		body.essay div#comments a:hover,
		body.essay div#comments a:focus,
		body.essay div#comments a:active {
			color: #333;
		}
body.essay div#license {
	font-size: 10px;
	max-width: 1000px;	
}
	div#license a:last-child {
		margin-left: 15px;
	}
		div#license a:last-child img {
			vertical-align: top;
		}