/*
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;
	margin-right: 300px;
	padding: 0;
	color: #333;
	font-size: 14px;
	line-height: 30px;
	background: #fff url('../images/dropcap_c2.jpg') no-repeat 102.5% 75px fixed;
	font-family: Georgia, serif;
}
p {
	padding-bottom: 15px;
}
h2 {
	color: #999;
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
	border-bottom: 1px solid #aaa;
}
h3 {
	font-size: 15px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'PTSans', sans-serif;
	font-weight: bold;
	color: #666;
}
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 {
	clear: right;
	margin: 0 auto -45px;
	padding: 75px 2.5% 0;
	max-width: 1000px;
	min-width: 600px;
}

/*
NAV
*/
div#top {
	position: fixed;
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 1.8925% 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: 0 0;
		max-width: 1305px;
		text-transform: uppercase;
		font-size: 15px;
		line-height: 15px;
		text-align: right;
		font-family: 'PTSans', sans-serif;
		font-weight: bold;
	}
		ul#nav li {
			display: inline;
			margin-right: 15px;
			list-style-image: none;
		}
		ul#nav li:before {
			content: "";
		}
		ul#nav li:first-child {
			margin-right: 0;
		}
		ul#nav li h1  {
			position: relative;
			text-align: left;
			margin-top: 18px;
			font-style: none;
			
		}
		ul#nav li h1: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 h1:hover:before  {
			color: #333;
		}
			ul#nav li h1 a:link,
			ul#nav li h1 a:visited {
				float: left;
				text-align: left;
				margin-top: -15px;
				padding-top: 15px;
				color: #333;
				font-size: 24px;
				line-height: 15px;
				font-family: 'PTSans', sans-serif;
				font-weight: bold;
				background: none;
			}
			ul#nav li h1 a:hover,
			ul#nav li h1 a:focus,
			ul#nav li h1 a:active {
				color: #aaa;
				background-color: transparent;
			}
			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 a:hover:after,
			ul#nav a:focus:after,
			ul#nav a:active:after {
				position: absolute;
				bottom: 0px;
				left: 35%;
				content: "";
				display: block;
				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;
		}
/* :target FUNCTIONALITY 
.section {
	padding-top: 75px;
	min-height: 330px;
	clear: both;
}
.section:not(:target) {
	display: none;
}
#intro {
	display: block;
}
.section:target {
	display: block;
}
.section:target ~ #intro {
	display: none;
}
*/

/*
ABOUT
*/
#about {}
	#about li {
		margin-bottom: 15px;
		clear: left;
	}
	/*
	For Seymour
	
	#about li:last-child {
		list-style-image: none;
	}
	#about li:last-child:before {
		content: "";
	}
*/

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

	#ideas li:last-child {
		list-style-image: none;
	}
	#ideas li:last-child:before {
		content: "";
	}
*/

/*	#ideas li.presentation:before {
		content: "Presentation";
	}
	#ideas li.article:before {
		content: "Article";
	}
*/


/*
PORTFOLIO
*/
#portfolio li {
	list-style-image: none;
	clear: both;
}
#portfolio li:before {
	content: "";
}
#portfolio li.site {
	margin-bottom: 30px;
	background-color: #fff;
}
	#portfolio li.site h3 {
		font-size: 24px;
		line-height: 24px;
		margin: 30px 0 0 0;
		padding-right: 2.5%;
		color: #333;
		text-shadow: -1px 1px 2px #666;
	}
	#portfolio li#cafe h3 {
		color: #550b14;
		text-shadow: -1px 1px 1px #c8c469;
	}
	#portfolio li#refresh h3 {
		color: #3c2714;
		text-shadow: -1px 1px 1px #ffcd05;
	}
	#portfolio li#maryann h3 {
		color: #672356;
		text-shadow: -1px 1px 1px rgb(238, 148, 183);
	}
/*
For Seymour

	#portfolio li:last-child {
		margin-top: -15px;
		margin-bottom: 15px;
	}
	#portfolio li li:last-child {
		margin-top: auto;
		margin-bottom: auto;
	}
*/
#portfolio a.siteLink {
	float: right; 
	margin-right: -300px;
	cursor: default;
	border-bottom: 0 none;
}
#portfolio a.siteLink:hover,
#portfolio a.siteLink:focus,
#portfolio a.siteLink:active {
	background: transparent;
}
	#portfolio img {
		display: block;
		margin: 7px 0 15px 9px;
		border: 1px solid #fff;
		-moz-box-shadow: -2px 0px 9px rgba(60, 60, 60, .5);
		-o-box-shadow: -2px 0px 9px rgba(60, 60, 60, .5);
		-webkit-box-shadow: -2px 0px 9px rgba(60, 60, 60, .5);
		box-shadow: -2px 0px 9px rgba(60, 60, 60, .5);
	} 
	#portfolio img:hover {
		margin: -7px 0 29px 9px;
		-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);
	} 
	#portfolio a.siteLink img {
		cursor: pointer;
	}
	#portfolio .status {
		position: relative;
	}
	#portfolio .status:before {
		content: "*";
		position: absolute;
		left: -.5em;
	}
		#portfolio ul ul li {
			display: inline;
		}
		#portfolio ul ul li:not(:last-child):after {
			content: ",";
			position: static;
		}/*
	#portfolio li.site p {
		background-color: rgb(255, 255, 255);
		background-color: rgba(255, 255, 255, .75);
		text-shadow: -1px 1px 1px rgb(255, 255, 255);
		margin-left: 390px;
	}*/
/*
WEB FRIENDS
*/
#friends {
	padding-top: 30px;
}
	#friends h3 {
		display: inline;
	}
	#friends li {
		margin-bottom: 15px;
	}
	
/*
CONTACT
*/
#contact { 
	clear: both;
	margin: 75px -300px 0 0;
	padding: 0 2.5% 0;
	min-width: 600px;
	max-width: none;
	background-color: #aaa;
	color: #333;
	font-family: Georgia, serif;
}
#contact:after {
	display: block;
	clear: both;
	content: "\n";
	color: #aaa;
}
	#contact h2 {
		padding-top: 1em;
		color: #000;
		text-shadow: 0 1px 0 #fff;
		display: block;
		font-size: 24px;
		line-height: 15px;
		text-transform: uppercase;
		border-bottom: 0 none;
	}
	#contact h2 a:link,
	#contact h2 a:visited {
		color: #000;		
	}
	#contact ul {
		margin: 15px 0 0 0;
	}
		#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;
				}
				#contact li:first-child a:link,
				#contact li:first-child a:visited {
					position: static;
					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;
			}
			#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-right: -300px;
	padding: 45px 5% 15px 0;
	color: #fff;
	background-color: #aaa;
	text-align: right;
	position: static;
	text-shadow: 0 1px 0 #000;
}
.seymour:link,
.seymour:visited {
	background: transparent url('../images/arrow.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: 15px;
	text-shadow: 0 1px 0 #fff;
	position: relative;
}
.seymour:hover,
.seymour:focus,
.seymour:active {
	background: transparent url('../images/hov_arrow.png') no-repeat 100% 50%;
	color: #ccc;
	border-bottom-color: #000;
	text-shadow: 0 0 0 transparent;
}
/*
.seymour:hover:after,
.seymour:focus:after,
.seymour:active:after {
	border-left-color: #000;
}
.seymour:after {
	position: absolute;
	right: -11px;
	top: 0;
	content: "";
	border: 15px solid #eee;
	border-width: 15px 0 15px 11px;
	border-color: transparent transparent transparent #eee;
}
*/
body>div:last-child {
	padding-left: 2.5%;
}