* { margin: 0; padding: 0; }

body {
	font-family: Verdana, Arial;
	font-size: 11px;
	background: #FFFFFF;
	color: #000;
	width: 800px;
	margin: auto;
	padding-bottom: 10px;
	text-align: left;
}



A.o:link {text-decoration: none;
color: #FFFFFF      ;}
A.o:visited {text-decoration: none;
color: #FFFFFF;}
A.o:active {text-decoration: none;
color: #FFFFFF  ;}
A.o:hover {text-decoration:  none; 
color: #FFCC00   ;}


p { 
	font-size: 1.1em; 
	line-height: 1.3em;
	margin-bottom: 0.8em;
}

a { 
	color: #8e8e8e; 
	text-decoration: none;
	outline: none;
	}
	a:hover { color: black; }
	body#print a.print-link {
		font-weight: bold;
		color: #666666 ;
	}
	body#other a.other-link {
		font-weight: bold;
		color: #666666;
	}
	body#web a.web-link {
		font-weight: bold;
		color: #3499e9;
	}
	
ul {
	list-style: none inside;
}

h1 { font-size: 2.0em; }
	h1.title { 
		height: 92px; width: 133px;
		background: url(images/logo.jpg) no-repeat;
		text-indent: -9999px;
		margin: 0 auto;
	}
	
h3 { font-size: 12px; }
	
p.menu-subpage {
	text-align: center;
	}
	p.menu-subpage a {
		color: #999;
		border: 1px solid white;
		padding: 3px;
	}
	p.menu-subpage a:hover {
		color: #999;
		border: 1px solid #ccc;
		padding: 3px;
	}
	
h3 a {
	padding: 3px;
	text-indent: 3px;
	display: block;
	background-color: #738ab9;
	color: white;
	margin: 1px;
	}
	h3.selected a {
		background-color: #fba632;
		}
		body#web h3.selected a {
			background-color: #3499e9;
		}
		body#other h3.selected a {
			background-color: #ff3939;
		}
		body#home h3.selected a {
			background-color: #434343;
		}
	h3 a:hover {
		background-color: #de5807;
		color: white;
	}

noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left; }
noscript a { color: #a00; text-decoration: underline; }
noscript ol { margin-left: 0px; }

a { outline: none; }
a img { border: none; }
.clear { clear: both; }
.floatright { float: right; }
.floatleft { float: left; }
hr { border-bottom: 1px solid #666; margin-bottom: 1.8em; margin-top: 1.8em;}
img.bottom { position: absolute; top: 550px; }

img.biopic { float: left; margin: 0 0px 0px 0; }

#home .stripNav ul { display: none; }
#print ul#main-nav { display: none; }

#home ul#main-nav {	
	display: block;
	list-style: none;
	margin-left: 150px;
	}
	ul#main-nav li {
		display: inline;
		}
		ul#main-nav li a {
			display: block;
			height: 32px;
			text-indent: -9999px;
			float: left;
			padding-top: 32px;
			text-transform: uppercase;
			font-size: 0.9em;
			text-align: center;
			
			width: 100px;
			}
			ul#main-nav li a.about {
				background: url(images/navball-gray.png) bottom center no-repeat;
				}
			ul#main-nav li a.print {
				background: url(images/navball-yellow.png) bottom center no-repeat;
				}
			ul#main-nav li a.web {
				background: url(images/navball-blue.png) bottom center no-repeat;
				}
			ul#main-nav li a.others {
				background: url(images/navball-red.png) bottom center no-repeat;
				}
				ul#main-nav li a.others:hover,
				ul#main-nav li a.about:hover,
				ul#main-nav li a.print:hover,
				ul#main-nav li a.web:hover {
					background-position: top center;
					text-indent: 5px;
				}

.stripViewer .panelContainer .panel ul {
	text-align: left;
}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	position: relative;
	width: 50%;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 50%; height: 460px; background: none; overflow:hidden; }
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	margin: auto;
	width: 50px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 475px;
	clear: both;
	background: #fff;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100px;
	list-style-type: none;
	
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.panelContainer .panel { /* Each panel is arranged end-to-end */
	float:left;
	height: 100%;
	position: relative;
	border-bottom: 0px solid #666;
	height: 474px;
	width: 350px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 0px;
	background: none;
}

ul.acc ul li{
	padding: 6px;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin: auto;
}

.stripNav ul { /* The auto-generated set of links */
	list-style: none;
}

.stripNav ul li {
	float: left;
	margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in coda-slider.1.1.1.js */
}

.stripNav a { /* The nav links */
	text-align: center;
	display: block;
	width: 47px;
	height: 63px;
	background: url(images/slide-ball-down.png) no-repeat;
	text-indent: -9999px;
	}
	body#other .stripNav a {
		background: url(images/slide-ball-red-down.gif) no-repeat;
	}
	body#web .stripNav a {
		background: url(images/slide-ball-blue-down.gif) no-repeat;
	}

.stripNav li a:hover,
.stripNav li a.current {
	background: url(images/slide-ball-up.png) no-repeat;
	}
	body#other .stripNav li a:hover,
	body#other .stripNav li a.current {
		background: url(images/slide-ball-red-up.gif) no-repeat;
	}
	body#web .stripNav li a:hover,
	body#web .stripNav li a.current {
		background: url(images/slide-ball-blue-up.gif) no-repeat;
	}

.stripNavL, .stripNavR { /* The left and right arrows */
	position: absolute;
	top: 170px;
	text-indent: -9000em;
	z-index: 9999px;
}

.stripNavL a {
	background: url("images/arrow-left.png") no-repeat center;
	display: block;
	height: 1px;
	width: 80px;
	margin-left: 3px;
}

.stripNavR a {
	background: url("images/arrow-right.png") no-repeat center;
	display: block;
	height: 92px;
	width: 80px;
}

.stripNavR {
	right: 4px;
}

.acc {
	width: 150px;
	margin-bottom: 4px;
}

#main-content {
	width: 60px; height: 475px;
	margin: 50px 0 0 87px;
	border-bottom: 1px solid black;
	overflow: hidden;
	}
	#left-side {
		width: 250px;
	}
	
a.randy-uniform {
	display: block;
	float: right;
	height: 468px; width: 297px;
	text-indent: -9999px;
	background: url("images/randy-uniform-color.jpg") no-repeat bottom center;
	}
	a.randy-uniform:hover {
		background-position: top center;	
	}
	
a.about-sphere {
	display: block;
	float: right;
	height: 464px; width: 401px;
	text-indent: -9999px;
	background: url("images/about-sphere.jpg") no-repeat bottom center;
	}
	a.about-sphere:hover {
		background-position: top center;	
	}

div#footer {
	margin: 15px 0 0 70px;
	width: 655px;
	}
	div#footer p {
		font-size: 1.0em;
		}
		div#footer p.left-text {
			float: left;
		}
		div#footer p.right-text {
			float: right;
		}