@import "reset.css";

body {
	background: #dedede url(http://phineasxjones.com/m/bkgd/tracks.jpg) right bottom fixed no-repeat;
	font-family: "Helvetica Neue", HelveticaNeue, helvetica, tahoma, verdana, sans-serif;
	font-size: 10px;
	text-align: center;
	}

div#contain {
	position: relative;
	top: 0;
	width: 96em;
	margin: 0 auto;
	text-align: left;
	}

body#index { 
	background-image: url(http://phineasxjones.com/m/bkgd/grad.jpg);
	}

body#web { 
	background-image: url(http://phineasxjones.com/m/bkgd/lion.jpg);
	}

body#interactive { 
	background-image: url(http://phineasxjones.com/m/bkgd/library.jpg);
	}

body#illustration {
	background-image: url(http://phineasxjones.com/m/bkgd/buildings.jpg);
	}

/**** HEAD & NAV ****/

div#headNav {
	width: 34em;
	float: right;
	margin: 4.4em 0 0 2em;
	}

* html div#headNav { margin-left: 1em; }

div#headNav h1 {
	width: 34em;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .1em;
	color: #dedede;
	}
	
div#headNav h1 a {
	font-size: 2.6em;
	line-height: 1.2;
	font-weight: normal;
	text-decoration: none;
	color: #678;
	}
	
div#headNav h1 span {
	display: block;
	border-top: 1px dotted #729994;
	font-size: 1em;
	line-height: 2.5;
	letter-spacing: .1em;
	color: #999;
	}

div#headNav p {
	border-bottom: 1px dotted #729994;
	font-size: 1.3em;
	line-height: 2;
	text-align: center;
	color: #444;
	}

* html div#headNav p { margin-top: -1.6em; }

div#headNav p a {
	text-decoration: none;
	color: #729994;
	}
	
ul#nav {
	font-size: 1.3em;
	}

* html ul#nav { margin-top: 2.2em; }

ul#nav li ul {
	display: none;
	list-style: none;
	padding: 0 .5em .5em .5em;
	}

* html ul#nav li { margin-top: -22px; }
* html ul#nav ul li { margin-top: -10px; }

body#web ul#nav li ul#webSub,
body#interactive ul#nav li ul#interactiveSub,
body#illustration ul#nav li ul#illustrationSub,
body#photo ul#nav li ul#photoSub {
	display: block;
	margin-top: 0;
	}

* html body#web ul#nav li ul#webSub,
* html body#interactive ul#nav li ul#interactiveSub,
* html body#illustration ul#nav li ul#illustrationSub,
* html body#photo ul#nav li ul#photoSub {
	display: block;
	margin-top: .6em;
	}

body#web li#webCat {
	background: transparent url(http://phineasxjones.com/m/yellow_tx.png)/*#dedeb5*/;
	}
body#web li#webCat a { background: none; }
* html body#web li#webCat { background: #dedeb5; }

body#interactive li#interactiveCat {
	background: transparent url(http://phineasxjones.com/m/yellow_tx.png)/*#dedeb5*/;
	}
body#interactive li#interactiveCat a { background: none; }
* html body#interactive li#interactiveCat { background: #dedeb5; }


body#photo li#photoCat {
	background: transparent url(http://phineasxjones.com/m/yellow_tx.png)/*#dedeb5*/;
	}
body#photo li#photoCat a { background: none; }
* html body#photo li#photoCat { background: #dedeb5; }


body#illustration li#illustrationCat {
	background: transparent url(http://phineasxjones.com/m/yellow_tx.png)/*#dedeb5*/;
	}
body#illustration li#illustrationCat a { background: none; }
* html body#illustration li#illustrationCat { background: #dedeb5; }

ul#nav li {
	margin-bottom: 1px;
	}

ul#nav li a {
	display: block;
	padding: 0 .5em;
	background: transparent url(http://phineasxjones.com/m/green_tx.png)/*#b3c2c0*/;
	font-weight: normal;
	line-height: 2;
	color: #333;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
	}

* html ul#nav li a {
	padding-top: 4px;
	background: #b3c2c0;
	}

* html ul#nav li ul a {
	padding-top: 0;
	}

ul#nav li a:hover {
	color: #ddd;
	}

ul#nav li ul li a {
	background: none;
	font-family: verdana, sans-serif;
	line-height: 1.5;
	font-weight: normal;
	color: #456;
	text-transform: none;
	text-decoration: none;
	}

ul#nav li ul li a:hover {
	color: #000;
	}

ul#nav li#skip {
	display: none;
	}
	
/**** CONTENT ****/

div#content {
	position: relative;
	top: 7.8em;
	width: 60em;
	padding-bottom: 10em;
	z-index: 5;
	}

* html div#content { top: 74px; }

div#content h2 {
	clear: left;
	margin: .5em 0;
	font-size: 3.5em;
	font-weight: bold;
	}

div#content h3 {
	clear: left;
	margin: .5em 0;
	font-size: 2.25em;
	font-weight: bold;
	color: #333;
	}

div#content h4 {
	clear: left;
	margin: .5em 0;
	font-size: 1.5em;
	font-weight: bold;
	color: #333;
	}

div#content p {
	margin-bottom: .5em;
	font-size: 1.3em;
	line-height: 1.6;
	}

div#content ul {
	list-style: disc;
	margin: 0 1.5em 2em 1.5em;
	font-size: 1.3em;
	line-height: 1.6;
	}

div#content a.launch {
	display: block;
	margin-top: 2em;
	padding: 5px 0;
	border-top: 1px dotted #fff;
	border-bottom: 0;
	font-size: 1.3em;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	color: #fff;
	}

div#content a:hover.launch {
	color: #ff9;
	border-color: #ff9;
	}

div#content a {
	text-decoration: none;
	font-weight: bold;
	color: #456;
	border-bottom: 1px dotted #456;
	}

div#content a:hover {
	color: #ff9;
	}

div#content strong { font-weight: bold; }

/**** INSTANCE ****/

div#threeCol {
	float: left;
	width: 60em;
	margin-bottom: 1em;
	padding-bottom: 2em;
	}

div#threeCol ul {
	float: left;
	margin: 0 2em 0 0;
	padding-right: 20px;
	border-right: 1px solid #999;
	font-size: 2em;
	font-weight: bold;
	list-style: none;
	color: #aaa;
	}

div#content h2.intro {
	margin: 0 0 .5em 0;
	font-size: 4.3em;
	line-height: 1.2;
	color: #888;
	}

div.medium {
	float: left;
	width: 29em;
	margin-bottom: 2em;
	}

div.left {
	margin-right: 2em;
	}

div#content div.medium h3 {
	margin: 0;
	font-size: 1.9em;
	}

div#content div.medium h3 a {
	border: 0;
	}

div#content div.medium a {
	display: block;
	margin-bottom: .3em;
	border: 0;
	}

div#content div.medium a.tn {
	float: left;
	width: 7.8em;
	height: 11em;
	margin: .25em 1em .5em 0;
	border: 1px solid #999;
	}

div#content div.medium a:hover.tn {
	border-color: #fff;
	}

div#content div.medium a#web {
	background: transparent url(../m/home/web.jpg) 0 0 no-repeat;
	}

div#content div.medium a#art {
	background: transparent url(../m/home/art.jpg) -135px 0 no-repeat;
	}

div#content div.medium a#flash {
	background: transparent url(../m/home/flash.jpg) -30px 0 no-repeat;
	}

div#content div.medium a#photo {
	background: transparent url(../m/home/photo.jpg) -85px 0 no-repeat;
	}
	
div.medium a img {
	display: none;
	border: 1px solid #999;
	}

div#content div.medium p {
	font-size: 1.2em;
	margin-bottom: 0;
	}

span.amp { /* Stolen from Dan Cederholm. There, I said it. */ 
	font-family: "Goudy Old Style","Palatino","Book Antiqua",serif;
	font-size: 110%;
	font-style: italic;
	}

div#content div.clinical {
	float: left;
	margin: 0 .5em .5em 0;
	border: 1px solid #666;
	}

div.section { margin-bottom: 2em; }

span.smallcaps {
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: .05em;
	}