.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;
	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:850px;
	text-align: center;
}
#container{
	background: #fff;
	padding: 0;
	text-align: left;
}
#logo {
	background: #fff url(../images/logo.jpg) top left no-repeat;
	width: 217px;
}
#slogan {
	position : relative;
	background: #e4e4e4;
	padding: 1px 0;
	margin: 5px 0;
}
#navigation {
	position: relative;
	background: #ccc;	
	text-align: center;
	padding: 1px 0;
}

#middle  {
	position : relative;
	border: solid #000 2px;
	overflow: hidden;
}

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

#content_left {
	width: 300px;
	padding: 10px 30px;
}

#content_right {
	width: 500px;
	float: right;
	padding: 10px 30px;
	vertical-align:text-top;	
}

#footer {
	position : relative;
	background: #fff;
	color: #000;
	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: 217px;
	height: 70px;
	background: url(../images/logo.jpg) top center no-repeat;
	}

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

a { text-decoration: underline; }
a:link { color: #000; }
a:visited { color: #333; }
a:hover { color: #666; }
a:active { color: #666; }
/* 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: #666;
	font-size: 120%;
	padding-right: 45px;
	font-weight: normal;
	text-transform: uppercase;
	text-align:right;
}

#footer a {
	color: #000;
	text-decoration:none;
}
#footer a:hover { 
	color: #666;
	text-decoration:underline;
}

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

#contact {
	background: #e4e4e4;
	text-align:center;
	width: 200px;
	padding: 10px 1px;
	float:right;
	margin-left: 30px;
}
p.contact {
	text-align:center;
}

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;
}