.hide {
	text-indent: -9999px;
}
/* Use this trick to make elements invisible in CSS-enabled browsers. The element will be visible to users of text browsers, screen readers, etc. The number is randomly chosen as one considered big enough to always keep the object hidden off the screen. */

img {
	border: 0;
	display: block;
}
/* Use this trick to make all images render as block-level elements rather than inline elements. Because block-level elements exist in their own box and are followed by a carriage return. Also declare all image borders as 0 here so we don't have to add the code into all image tags. */
.inline {display: inline;}
/* Use this trick for images that we DO want to display inline */

html{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	background: #fff url(../images/background_tan.gif) bottom repeat-x;
	text-align: center;
}
/* Restating stuff for html as stated in body: an IE 6.0 fix from xml.com. */
/* Text align left: IE6 Windows bug fix. */

/* Coding short forms: Always clockwise starting at the top: top, right, bottom, left. But, if vertical and horizontal margins are the same, you can group them: top-bottom then left-right. */

body{
	font-size: 80%;
	font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	text-align: center;
}
/* Font choices: Tahoma because it was created for online use. Arial for old Windows systems. Helvetica for old Unix systems. Multi-name fonts must be enclosed in quotations. */

p, td, ul, ol, li {
	font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	color: #000;
}
/* Be kind to Netscape 4: Old browsers fail to understand inheritance so we must be more specific for them. */

#wrapper {
	margin:auto;
	width:980px;
	text-align: center;
}
#container{
	border: #000 solid 2px;
	background: #000 url(../images/rocks.jpg) top right no-repeat;
	padding: 0;
	text-align: left;
}
#logo {
	background: #000 url(../images/jec_logo.jpg) top left no-repeat;
	width: 400px;
}
#slogan {
	position : relative;
	background: #333;
	padding: 1px 0;
}
#navigation {
	position: relative;
	background: #000;	
	text-align: center;
	padding: 1px 0;
}

#middle  {
	position : relative;
	background: #fff url(../images/background_tan_vertical.gif) right repeat-y;
	overflow: hidden;
}

#content_full {
	width : 100%;
	background: transparent;
	padding: 20px 0;
	vertical-align:text-top;
}

#content_left {
	width: 160px;
	padding: 10px 20px;
	background: transparent;
}

#content_right {
	width: 760px;
	float: right;
	padding-bottom: 20px;
	vertical-align:text-top;	
}

#footer {
	position : relative;
	background: #333;
	color: #fff;
	text-align: center;
	font-weight: normal;
	padding: 5px;
}

h1 {
	text-indent: -9999px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
} /* The Phark trick - Displays a text version of the company name offscreen for text readers. Visual browsers see the logo instead. */

h1 a:link, h1 a:visited	{
	display: block;	
	width: 100%;
	height: 120px;
	background: url(../images/logo.jpg) top center no-repeat;
	}

h2, h3, h4, h5 {
	color: #333;
}

a { text-decoration: underline; }
a:link { color: #036; }
a:visited { color: #333; }
a:hover { color: #36c; }
a:active { color: #36c; }
/* Must use this order LVHA: Link, Visited, Hover, Active. Or some browsers will ignore one or another of them. */

#navigation a, #navigation li { 
	list-style: none;
	display: inline;	
	padding: 0 9px;
	color: #fff;
	text-decoration: none;
	text-transform:uppercase;
	letter-spacing: 1px;
}


#navigation a:hover {
	color: #36c;
}

#slogan p {
	color: #fff;
	font-size: 110%;
	padding-left: 65px;
}

#footer a {
	color: #fff;
}
#footer a:hover { color: #36c; }


#content_right h2, #content_right p  {
	width: 530px;
}

#content_full h2, #content_full h3, #content_full p, #content_full ul li  {
	width: 530px;
	margin-left: 218px;
}

ol li, ul li {
	padding-bottom: .75em;
	vertical-align:text-top;
}


li.indent {
	margin-left: 15px;
}	

#content.right p.passagetext {
	font-weight:bold;
}

#content.right p.note {
	font-size: 90%;
}

.top {
	font-size: 85%;
	text-align:right;
}

span.copyright {
	font-size: 85%;	
}

span.copyright a {
	text-decoration: none;
}