@charset "UTF-8";



/* Typography */



h1, p, body, html {
	margin:0;
	padding:0;}

h1 {
	font-size: 20px;
	font-variant:small-caps;
	margin: 2px 0px;
	color: #111;
	
}


h2 {
	font-size: 14px;
	font-variant:small-caps;
	font-weight:lighter;
	margin: 5px 5px;
	color: #09C;
}


a:link {
	color: #900;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #930;
}
a:hover {
	text-decoration: underline;
	color: #930;
}
a:active {
	text-decoration: none;
	color: #930;
}

a.keyan:link {
	color: #666;
	text-decoration: none;
}
a.keyan:visited {
	text-decoration: none;
	color: #333;
}
a.keyan:hover {
	text-decoration: underline;
	color: #333;
}
a.keyan:active {
	text-decoration: none;
	color: #333;
}

/* Layout */



body {
	margin-top: 4px;
	background-repeat:repeat-x;
	font: 12px verdana, sans-serif;
	color:#000;
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
	line-height: 20px;
	}
	
#header {
	width: 908px;
	height: 126px;
	position: relative;
	margin:0 auto;
	padding: 1px;
	border: #999 thin solid;
	}
	
#navigation {
	width: 908px;
	height: 32px;
	background-image: url(images/navigation.jpg);
	position:relative;
	margin:0 auto;
	border: #999 thin solid;
	}
	
	#navbuttons {
	float: right;
	}

#container {
	position:relative;
	margin:0 auto;
	width:910px;
	}

.left {
	float:left;
	width:530px;
	height: 400px;
	margin-right: 4px;
	border: #999 thin solid;
	background-color:#FFF;
	padding: 10px;
	overflow: hidden;
	}
	
#titlebox {
	height: 70px;
	width: 350px;
	padding: 10px;
	float:left;
	margin-top: 8px;
	background-color: #000;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size:30px;
	line-height: 28px;
}

#selection {
	float: left;
	width: 150px;
	margin-left: 10px;
	}

.right {
	float:left;
	width:326px;
	height: 400px;
	clear:right;
	border: #999 thin solid;
	background-color:#FFF;
	padding: 10px;
	background-image:url(images/rightgrad.jpg);
	background-repeat: repeat-x;
	}
	
#rightpanel {
	float:left;
	width:304px;
	height: 170px;
	border: #999 thin solid;
	background-color:#FFF;
	padding: 10px;
	}
	
#rch {
	width:304px;
	height: 170px;
	border: #666 1px solid;
	background-color:#FFF;
	overflow: hidden;
	text-align: center;
	}
	
	#rightpanels {
	float:left;
	width:304px;
	height: 14px;
	}

.left p, .right p {
	padding:10px;
	}
	

	
	#speaker {
	width: 890px;
	position: relative;
	margin:0 auto;
	padding: 10px;
	border: #999 thin solid;
	background-image:url(images/speakergrad.jpg);
	background-repeat: repeat-x;
	}
	
	#bannerleft {
	float: left;
	}
	
	#bannerright {
	width: 720px;
	height: 90px;
	float: left;
	margin-left: 10px;
	}


#social {
	width: 908px;
	height: 200px;
	position: relative;
	margin:0 auto;
	padding: 1px;
	border: #999 thin solid;
	background-image:url(images/speakergrad.jpg);
	background-repeat: repeat-x;
	}
	
	#socialpanel {
	float:left;
	width:260px;
	height: 150px;
	border: #999 thin solid;
	background-color:#FFF;
	margin-top: 10px;
	margin-left: 11px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	}
	
	#footer {
	width: 908px;
	height: 30px;
	position: relative;
	margin:0 auto;
	padding: 1px;
	border: #999 thin solid;
	color: #666;
	}
	
#scroller {
	width: 908px;
	height: 22px;
	position:relative;
	margin:0 auto;
	border: #999 thin solid;
	background-image: url(images/scrollbg.jpg);
	color: #333;
}

/*If you are going to use floats then you will NEED to clear the
footer so it doesn't bunch the content up*/

.clear {
	clear:both;
}

.spacer {
	height: 4px;
}


/* jQuery Scrollbar */



.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
	font-weight: bold;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	font-weight: bold;
}
.jScrollPaneDrag {
	position: absolute;
	background-image: url(images/scroll.png);
	background-repeat:repeat;
	cursor: pointer;
	overflow: hidden;
	font-weight: bold;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	font-weight: bold;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	font-weight: bold;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
	font-weight: bold;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
	font-weight: bold;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}