/*
Title: Screen Styles
Author: Chris Quinn
Date: April 5, 2006
*/

body {
	background: #000 url("images/bg_tile.gif") repeat-x top left;
	font-family: Verdana, sans-serif;
	font-size: small;
	color: #FFF;
	padding: 0;
	margin: 0;
	}
#print {
	display: none;
	}

/* Rollover Logo - Image Replacement techique found at http://wellstyled.com/css-replace-text-by-image.html */

#header {
	position: absolute;
	width: 196px;
	left: 10px;
	top: 10px;
	}
*#header span {
	display: none;
	}
#header h1 {
	padding: 0;
	margin: 0;
	background: url("images/logo_on.gif") no-repeat top left;
	}
#header h1 a {
	display: block;
	width: 197px;
	height: 63px;
	}
#header h1 a:link, #header h1 a:visited {
	background: url("images/logo_off.gif") no-repeat top left;
	}
#header h1 a:hover, #header h1 a:active {
	background-image: none;
	}

/* Contact Information */
	
#contact {
	margin: 30px 0 0 0;
	text-align: center;
	list-style: none;
	padding: 0;
	}
#contact li {
	font-family: Arial, sans-serif;
	padding: 2px 0 2px 0;
	font-weight: bold;
	font-size: 110%;
	color: #FFF;
	margin: 0;
	}
#contact li a:link, #contact li a:visited, #contact li a:active {
	border-bottom: 1px dotted #FC3;
	text-decoration: none;
	color: #FFF;
	}
#contact li a:hover {
	border-bottom: 1px solid #FFF;
	text-decoration: none;
	color: #FC3;
	}

/* Introduction */

#introduction {
	margin: 240px 450px 0 160px;
	voice-family: "\"}\"";
	voice-family: inherit;
	margin: 240px 435px 0 155px;
	}
html>body #introduction {
	margin: 240px 440px 0 160px;
	}
#introduction p {
	font-family: Georgia, serif;
	letter-spacing: 1px;
	line-height: 1.5em;
	text-align: center;
	font-style: italic;
	color: #fff;
	padding: 0;
	margin: 0;
	}

/* Flower Navigation - CSS Sprites technique found at http://www.alistapart.com/articles/sprites */

#navigation {
	position: absolute;
	width:425px;
	right: 0;
	top: 0;
	}
#flowers {
	background: url("images/navigation.gif");
	position: relative;
	margin: 0 0 0 0;
	height: 380px;
	width: 425px;
	padding: 0;
	}
#flowers li {
	position: absolute;
	list-style: none;
	display: block;
	padding: 0;
	margin: 0;
	}

#flowers a {display: block;}

#flowers span {
	display: none;
	}

#flower1 {height: 153px; width: 200px; left: 25px; top: 0px;}
#flower2 {height: 194px; width: 198px; left: 217px; top: 52px;}
#flower3 {height: 229px; width: 224px; top: 152px; left: 0px;}

#flower1 a {height: 153px;}
#flower2 a {height: 194px;}
#flower3 a {height: 229px;}

#flower1 a:hover, #flower1 a.active {background: url("images/navigation.gif") no-repeat -25px -380px;}
#flower2 a:hover, #flower2 a.active {background: url("images/navigation.gif") no-repeat -217px -812px;}
#flower3 a:hover, #flower3 a.active {background: url("images/navigation.gif") no-repeat 0 -1292px;}

/* Resume */

#resume {
	position: absolute;
	padding: 10px 0 10px 10px;
	width: 754px;
	top: 380px;
	}
#resume p.pdf {
	font-family: Arial, sans-serif;
	margin: 10px 0 20px 20px;
	vertical-align: middle;
	letter-spacing: 2px;
	line-height: 1.5em;
	text-align: right;
	font-weight: bold;
	font-size: 80%;
	color: #FFF;
	padding: 0;
	}
#resume p.acrobat {
	text-align: right;
	padding: 0;
	margin: 0;
	}
#resume p.pdf a:link, #resume p.pdf a:visited, #resume p.pdf a:active {
	border-bottom: 1px dotted #FC3;
	text-decoration: none;
	font-weight: bold;
	color: #FFF;
	}
#resume p.pdf a:hover {
	border-bottom: 1px solid #FFF;
	text-decoration: none;
	font-weight: bold;
	color: #FC3;
	}
table {
	font-family: Arial, sans-serif;
	border-right: 1px solid #FFF;
	background: #000;
	font-size: 90%;
	width: 100%;
	}
table caption {
	display: none;
	}
table th, table td {
	border-bottom: 1px solid #FFF;
	vertical-align: text-top;
	padding: 10px 14px;
	text-align: center;
	margin: 0;
	}
table tr {
	background: #003A4B;
	}
table tr.alt {
	background: #00274B;
	}
table .objective {
	border-top: 1px solid #FFF;
	vertical-align: middle;
	font-weight: bold;
	text-align: center;
	font-size: 110%;
	}
table .blue {
	font-size: 110%;
	color: #9CF;
	}
table .green {
	font-size: 110%;
	color: #9FC;
	}
table .section {
	border-bottom: 1px solid #000;
	border-right: 1px solid #FFF;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	text-align: right;
	background: #000;
	font-size: 120%;
	color: #FC3;
	}
table .section p {
	text-align: right;
	font-size: 85%;
	color: #FFF;
	padding: 0;
	margin: 0;
	}
table .section p a:link, table .section p a:visited, table .section p a:active {
	border-bottom: 1px dotted #FC3;
	text-decoration: none;
	font-weight: bold;
	color: #FFF;
	}
table .section p a:hover {
	border-bottom: 1px solid #FFF;
	text-decoration: none;
	font-weight: bold;
	color: #FC3;
	}

/* Interactive Design */

#design {
	position: absolute;
	padding: 10px 0 10px 10px;
	top: 420px;
	}
#samples {
	background: url("images/bg_design.gif") no-repeat top left;
	padding: 10px 0;
	width: 754px;
	float: left;
	}
#samples dl {
	margin: 10px 20px;
	display: inline; /* fixes IE/Win double margin bug */
	width: 714px;
	float: left;
	padding: 0;
	}
#samples dt {
	font-family: Georgia, serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 120%;
	width: 592px;
	float: right;
	color: #FC3;
	padding: 0;
	margin: 0;
	}
#samples dd {
	font-family: Verdana, sans-serif;
	line-height: 1.5em;
	font-size: 90%;
	padding: 0;
	margin: 0;
	}
#samples dd a {
	font-size: 110%;
	}
#samples dd p {
	font-family: Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 10px 0;
	font-weight: bold;
	font-size: 90%;
	}
#samples dd a:link, #samples dd a:visited, #samples dd p a:active {
	border-bottom: 1px dotted #FC3;
	text-decoration: none;
	color: #FFF;
	}
#samples dd a:hover {
	border-bottom: 1px solid #FC3;
	text-decoration: none;
	color: #FC3;
	}
#samples dd.capture img {
	border: 1px solid #FFF;
	margin: 0 10px 0 0;
	background: #000;
	padding: 5px;
	float: left;
	}

/* Digital Photography - Sliding Gallery technique found at http://www.cssplay.co.uk/menu/gallery3l.html */

#photography {
	position: absolute;
	padding: 10px 0 10px 10px;
	top: 420px;
}
#gallery {
	background:#fff url("images/gallery_bg.jpg");
	border: 1px solid #FFF;
	list-style-type:none;
	overflow: hidden;
	height: 300px;
	width: 754px;
	float: left;
	padding: 0;
	margin: 0;
	}
#gallery li {
	float: left;
	}
#gallery li a {
	border: 1px solid #FFF;
	text-decoration: none;
	cursor: default;
	display: block;
	height: 300px;
	width: 30px;
	float: left;
	}
#gallery li a img {
	height: 300px;
	width: 30px;
	border: 0;
	}
#gallery li a:hover, #gallery li a:hover img {
	width: 400px;
	}