/* General */

html, body
{
	background: #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

abbr, acronym
{
	border: 0;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
}

a:link, a:visited
{
	color: #906;
	text-decoration: none;
}

a:hover, a:hover abbr, a:hover acronym
{
	text-decoration: underline;
}

a:link img, a:visited img
{
	border: 0;
}

p
{
	margin: 1em 0;
}

hr
{
	display: none;
}

em
{
	font-size: 1em;
	font-style: italic;
	font-weight: normal;
	text-decoration: none;
}

strong
{
	font-size: 1em;
	font-style: normal;
	font-weight: bolder;
	text-decoration: none;
}

address
{
	font-style: normal;
}

#main-container
{
	margin: 0 auto;
	max-width: 64em;
/*	min-width: 66.67%; This would be nice, but it screws up Opera*/
	width: 100%;
}

dd ul
{
	margin: 0;
	padding: 0;
}

dd ul li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Header */

#header
{
	border-bottom: 5px solid #fc0;
	font-size: .8em;
	font-weight: bolder;
	position: relative;
}

#header h1
{
	background: #fff;
	height: 76px;
	left: 0;
	margin: 0;
	position: absolute;
	top: 0;
	width: 180px;
	z-index: 1;
}

#header h1 a
{
	display: block;
	padding: 12px;
}

#header h1 img
{
	display: block;
}

.skiptosection
{
	height: 0;
	margin: 0;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
}

#header div
{
	background: #fff7d6 url("/images/header_bg.png") repeat-x left top;
	border-left: 204px solid #fff;
	min-height: 100px;
	position: relative;
}

#header .description
{
	color: #606;
	margin: 0;
	padding: 12px 24px 2.5em;
	text-align: center;
}

#header .description span
{
	display: block;
	margin: 0 auto;
	width: 82%;
}

#header .navigation
{
	bottom: .5em;
	margin: 0;
	padding: 0;
	position: absolute;
	right: .5em;
}

#header .navigation li
{
	border-left: .075em solid #000;
	display: inline;
	margin: 0;
	padding: 0 .25em;
}

#header .navigation li.first-child
{
	border-left: 0;
	padding-left: 0;
}

#header a:link, #header a:visited, #header a:hover, #header a:active
{
	color: #000;
	text-decoration: none;
}

#header a:hover
{
	text-decoration: underline;
}

/* Body */

#body
{
	position: relative;
}

#body .navigation
{
	background: #c9a9c1;
	border-right: 180px solid #efefef;
	font-size: .8em;
	font-weight: bolder;
	line-height: 1.0;
	margin: 0;
	padding: .5em 1em;
}

#body .navigation li
{
	border-left: .075em solid #000;
	display: inline;
	margin: 0;
	padding: 0 .5em;
}

#body .navigation li.first-child
{
	border-left: 0;
	padding-left: 0;
}

#body .navigation a:link, #body .navigation a:visited,
#body .navigation a:hover, #body .navigation a:active
{
	color: #000;
	text-decoration: none;
}

#body .navigation a:hover
{
	color: #fff;
	text-decoration: underline;
}

#section-title
{
	background: #606;
	border-right: 180px solid #efefef;
	color: #fff;
	font-size: 1.1em;
	font-weight: bolder;
	margin: 0;
	padding: .0909em .8em 0;
}

body.home #section-title
{
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
}

#section
{
	border-left: 24px solid #606;
	position: relative;
}

#content-container
{
	border-left: 24px solid #606;
	position: absolute;
	top: 0;
	left: -24px;
	width: 100%;
}

#content
{
	background: #fff;
	border-left: 180px solid #e6daf0;
	border-right: 180px solid #efefef;
	color: #000;
	font-size: .9em;
	padding: .5em 1.5em 50px;
}

body.home #content
{
	padding-bottom: 235px;
}

#content div
{
	margin-left: 1em;
}

#content h3
{
	color: #000;
	font-size: 1em;
	font-weight: bolder;
}

#content h3 em, #content p em.heading
{
	color: #606;
	font-style: normal;
	font-weight: bolder;
}

#content h4
{
	color: #906;
	font-size: 1em;
	font-weight: bolder;
}

#content .logo
{
	display: block;
	float: left;
	margin: .125em .5em;
}

#content .logo img
{
	display: block;
}

#content .boxed
{
	border: 1px solid #000;
}

#content dl
{
	margin: 0;
	margin-left: 1em;
	padding: 0;
}

#content dt
{
	display: block;
	font-weight: bolder;
	margin: 1em 0 0;
	padding: 0;
}

#content dd
{
	display: block;
	margin: 0;
	padding: 0;
}

body.home #body .skiptosection
{
	/* We'll recycle the accessibility element for some decoration */
	
	background: url(/images/collaberative.jpg);
	bottom: 50px;
	display: block;
	height: 135px;
	left: 50%;
	margin-left: -329px;
	position: absolute;
	width: 658px;
	z-index: 2;
}

/* Left sidebar */

#section-navigation
{
	margin-left: -24px;
	position: relative;
	width: 204px;
	z-index: 1;
}

#section-navigation h3
{
	height: 0;
	margin: 0;
	overflow: hidden;
	text-indent: 200%;
	white-space: nowrap;
}

#section-navigation div
{
	background: #e6daf0;
	overflow: hidden;
	padding: 0 8px;
	width: 188px;
}

#section-navigation div p
{
	text-align: center;
}

#section-navigation a:link, #section-navigation a:visited
{
	color: #606;
}

#section-navigation div p a img
{
	border: 1px solid #000;
}

#section-navigation li a:link, #section-navigation li a:visited
{
	color: #000;
}

#section-navigation h4
{
	color: #606;
	font-size: .75em;
	margin-bottom: 0;
}

#section-navigation ul
{
	font-size: .75em;
	list-style-position: inside;
	list-style-type: square;
	margin: 0;
	margin-bottom: 1em;
	padding: 0;
}

#section-navigation li
{
	color: #606;
}

#copyright
{
	background: #e6daf0;
	color: #666;
	font-size: .6667em;
	margin: 0;
	margin-left: 24px;
	overflow: hidden;
	padding: 8px;
	width: 164px;
}

/* Right sidebar */

#misc
{
	background-color: #efefef;
	background-position: left top;
	background-repeat: no-repeat;
	font-size: .75em;
	height: 100%;
	padding-top: 4.2133em; /* Adds to the 100% height, compensating for the positioning. */
	position: absolute;
	right: 0;
	text-align: center;
	top: -4.2133em; /* Kind of a hack to get it beside the site navigation. The element's position in the HTML complicates it, although it's ideal for screen readers. This hack assumes that the navigation bar and section heading don't wrap, but it degrades gracefully when it does. */
	width: 180px;
	z-index: 1;
}

#misc .container
{
	background: #efefef;
	position: relative;
	top: -4.2133em; /* Compensate for the padding-top in #misc */
}

#misc.hasimage
{
	/* Warning: due to yet another IE bug, any following #misc.(class name) selectors will not match in IE6 and below if this one doesn't. */
	
	min-height: 190px;
}

#misc.hasimage .container
{
	
	margin-top: 190px;
}

#misc p:first-child
{
	margin-top: 0;
}

#misc .imglink
{
	display: block;
}

#misc dl, #misc dt, #misc dd
{
	margin: 0;
	padding: 0;
}

#misc dt
{
	font-weight: bolder;
	margin-top: 1em;
}