body {
	color: black;
	background: #c00 url(/i/red.gif) repeat-x;
	margin: 0;
	padding: 0;
	font: normal 81.25% "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	text-align: left;
	}
#top li, #subnav li {
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	}
a { text-decoration: none; }
a:link { color: #c00; background: transparent; } 
a:visited { color: #800; } 
a:hover, a:focus { color: #c00; background: #fc0; } 
a:active { color: white; background: black; } 

h1 { font-size: 2.15em; }
h2 { font-size: 1.46em; }
h3, dt { font-size: 1em; }
h4 { font-size: 1em; }
h5 { font-size: .77em; }
h6 { font-size: .77em; }

p, dd, li { color: black; font-family: "Georgia", serif; margin: 0; line-height: 150%; } 
li { line-height: 1.2; }
p, ul, ol { margin-bottom: 1em; } 
blockquote {
	color: black;
	font-family: "Georgia", serif;
	font-style: italic;
	margin-top: 0;
	margin-bottom: 1em;
	line-height: 1.5;
	}

dd { padding-left: 2em; }
dt em {
	font-weight: bold;
	font-style: normal;
	display: block;
	margin: 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; 
	margin: 0;
	}
dd em {
	font-size: .92em;
	font-style: italic;
	display: block;
	margin: 0;
	margin: 0;
	}
dd strong {
	font-size: .846em;
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; 
	font-weight: bold;
	clear: left;
	}
table { text-align: center; padding: 0; margin: 0 auto; border: none; clear: both; } 
#everything	{
	margin: 0 auto;
	padding: 0;
	width: 736px; 	 
	}
#top {
	margin: 0 auto;
	padding: 0;
	/*height: 135px;*/
	width: 734px;
	color: black;
	background-image: url(/i/john.gif);
	background-repeat: no-repeat;
	background-position: left top;
	}
#top2 { margin: 0 0 0 212px; padding: 50px 0 30px; }
	/* des4peeps is 389x37 (want 120 total height) */ 

#content {
	margin: 0 auto 10px;
	border: 1px #300 solid;
	background-color: #cc9;
	color: black;
	padding: 10px 10px 0;
	}

#contentbox {
	margin: 0;
	color: black;
	background-color: #fff;
	border: 1px #996 solid;
	padding: 10px 30px;
	width: 650px;
	}

#id, #web, #print, #other, #subnavbloat, #port-home {
	/*clear:both;*/
	}
/* BEGIN Navtabs & Subnavtabs */
#header, 
#subnav {
	font-size: 10px;
	line-height: normal;
	padding: 0;
	margin: 0 0 -1px;
	}
#header ul,
#subnav ul {
	margin: 0;
	padding: 0 10px 0 212px;
	list-style: none;
	}
#header li,
#subnav li {
	display: inline;
	margin: 0;
	padding: 0;
	}
#header a,
#subnav a {
	background: #c00;
	border: 1px solid #fc0;
	border-bottom-color: #300;
	color: #fc0;
	float: left;
	font-weight: bold;
	line-height: 1.7em;
	margin: 0 -1px 0 0;
	padding: .1em 2ex 0;
	position: relative;
	text-decoration: none;
	z-index: 0;
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	border-radius-top-left-radius: 5px
	border-radius-top-left-radius: 5px;
	-webkit-transition-property: all;
	-webkit-transition-duration: .2s;
	-webkit-transition-timing-function: ease-in-out;
	}
#header a:hover,
#header a:focus,
#subnav a:hover,
#subnav a:focus {
	background: #fc0;
	border-color: #300;
	color: #900;
	z-index: 1;
	}
#home #nav-home a, 
#portfolio #nav-portfolio a,
#resume #nav-resume a, 
#contact #nav-contact a {
	background: #cc9;
	border-color: #300 #300 #cc9;
	z-index: 1;
	color: #900;
	}
/* END Navtabs */
/* BEGIN Subnavtabs */
#subnav ul {
	padding: 0 10px 0 202px;
	}
#subnav a {
	background: #cc9;
	border: 1px #996 solid;
	color: #900;
	}
#id #sn-port-id a, 
#web #sn-port-web a,
#print #sn-port-print a, 
#other #sn-port-other a {
	background: #fff;
	border-bottom-color: #fff;
	}
#subnav a:hover,
#subnav a:focus {
	background: #fc0;
	border-color: #996;
	}
/* END Subnavtabs */

#port div { clear: both; }
#port img { margin: 0 0 5px; border: 1px solid #ccc; }
#port .L { clear: left; float: left; text-align: right; margin: 0 25px 1em 0; width: 310px; }
#port .R { clear: right; float: left; text-align: left; margin: 0 0 1em; 	width: 309px; }
#port hr { display: none; }
#port h1, #port h2, #port h3, #port h4, #port h5, #port h6 { margin: 0; }

#res .L, #res .R { text-align: left; margin: 0 0 1em; width: 60%; float: left; }
#res .L { clear: left; margin-right: 5%; }
#res .R { clear: right; width: 34% }
#res div { margin-bottom: 1em; }
#res hr { display: none; }
#res h1, #res h2, #res h3, #res h4, #res h5, #res h6 { margin: 0 0 .25em 0; line-height: 1em; }
#res ul { list-style: square; padding: 0 0 0 1.25em; margin: 0; }
#res ul ul { list-style: circle; margin: 0; }
#res li { margin: 0; line-height: 1.5em; }
#res dd { padding: 0 0 0 1em; }

#form { color: black; background: #eeb; padding: 2px 5px; border: 1px solid #cc9; }

#foot {
	text-align: center;
	color: #663;
	margin: 0;
	padding-bottom: 5px;
	background: transparent;
	font-size: 85%;
	}
#dnld { 
	line-height: 2em; 
	padding: 2px .5em 0 .5em; 
	border: 1px solid #ccc; 
	font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; 
	float: right;
	top: 2.6em; 
	right: 0;
	/*\*/right: 30px;/**/
	}
#dnld img { margin-bottom: 0; border: 0; }

#p2 { clear: left; float: left; text-align: left; margin: 0; width: 480px; padding-top: 20px; }
#p2 h1, #p2 h2, #p2 h3, #p2 h4, #p2 h5, #p2 h6 { margin: 0 0 .5em 0; }

.link, .link li { margin: 0; padding: 0; list-style: none; }
.link { 
	float: right; 
	text-align: left; 
	margin: 0 0 1em; 
	width: 140px; 
	padding-top: 20px; 
	list-style: none;
	}
.link a {
	background: white;
	border: 1px solid white;
	clear: right;
	color: #900;
	display: block;
	font: normal 10px/14px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	padding: 3px 5px;
	margin: 3px 0 0;
	text-decoration: none;
	text-align: left;
	vertical-align: middle;
	}
.link a:hover, 
.link a:focus { 
	color: #930; 
	background: #fc0; 
	-webkit-transform: scale(1.05);
	-webkit-transform-origin: 0% 50%;
	-webkit-transition-property: all;
	-webkit-transition-duration: .2s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transform: scale(1.1);
	-moz-transform-origin: 0% 50%;
	-moz-transition-property: all;
	-moz-transition-duration: .2s;
	-moz-transition-timing-function: ease-in-out;
	transform: scale(1.1);
	transform-origin: 0% 50%;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
	}
.link a:active { background: black; color: white; }

.p2pic {
	width: 310px;
	float: right;
	text-align: right;
	margin: .5em 0 .5em 1em;
	line-height: 150%;
	}
.p2pic img { border: none; }

#thumbs { 
	text-align: right; 
	clear: both;
	margin: 0; 
	line-height: 1em; 
	}
#thumbs img { 
	margin: 5px 0 0 3px; 
	border: none; 
	}
#thumbs a img { opacity: .7; }
#thumbs a:hover,
#thumbs a:focus { 
	background: white; 
	}
#thumbs a:hover img,
#thumbs a:focus img {
	opacity: 1;
	-moz-transform: scale(1.1);
	-moz-transition-property: all;
	-moz-transition-duration: .2s;
	-moz-transition-timing-function: ease-in-out;
	-webkit-transform: scale(1.1);
	-webkit-transition-property: all;
	-webkit-transition-duration: .2s;
	-webkit-transition-timing-function: ease-in-out;
	/* -webkit-transform-origin: 50% 100%; */
	transform: scale(1.1);
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
	}

/* CLEARING RULES */
.clearfix:after,
#content:after,
#contentbox:after,
#thumbs:after {
	content:'.';
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
	}
.clearfix, #content, #contentbox, #thumbs { min-width: 0; }
/*\*//*/ .clearfix, #contentbox, #content { display: inline-block }/**/
/*\*/ 
	* html .clearfix,
	* html #content, 
	* html #contentbox, 
	* html #content div { height: 1%; }
/**/

fieldset { 
	margin: .5em 0 1em; 
	padding: .5em 0 0; 
	border: none; 
	}
legend { padding: 0; margin: 0; }
fieldset fieldset legend strong { color: #660; }
legend * { margin: 0; }
label {
	float: left;
	width: 8em;
	clear: left;
	display: block;
	text-align: right;
	margin: 0 .5em 0 0;
	}
fieldset p { margin: .5em 0; }
.inputrow {
	margin: 0 0;
	padding: 0;
	border: none;
	}
.inputrow p { margin-left: 8em; }
.inputrow label {  
	float: none;
	display: inline;
	margin: 0 .5em 0 0; }
.inputrow legend { padding: 0; margin: 0; text-align: left; }
.caps { font-variant: small-caps; font-size: 1.2em; }

@media print {
	#top, #subnav, #foot span, #dnld { display: none; }
	body, #content, #everything, #contentbox { 
		background: white;
		border: none;
		padding: 0;
		margin: 0;
		width: auto;
		}
	body { font-size: 8pt; }
	#foot { text-align: left; color: black; }
	#res .L { width: 70%; }
	#res .R { width: 24% }
}