/*
	
	017 Navigation import
	020 IE Patches import
	
	029 Basic HTML Elements
	
	165 Container
	175 Branding
	199 Content
	492 Site Info
	
	552 Print

*/

/* -- Navigation -- */
	@import url(nav.css);

/* -- IE Patches -- */
	@import url(ie7.css); /* all versions of MSIE */
	
	@import url(ie6.css); /* all versions of MSIE */
	
	@media tty {/* IE 5.x Windows Mid Pass Filter */
		i{content:"\";/*" "*/}} @import 'ie5.css'; /*";}
	}/* */

/* -- Basic HTML Elements -- */
	#content:after,
	#content-highlights div:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}


	* {
		margin-top: 0;
		margin-left: 0;
		padding: 0;
	}
	
	html {
		/* cf. http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better */
		height: 100%;
		margin-bottom: 1px;
	}
	
	a         { color: #369; }
	a:link    { color: #369; }
	a:visited { color: #369; }
	a:hover   { color: #369; }
	
	abbr, 
	acronym {
		font-style: normal; 
		border-bottom: dotted 1px #000; 
		cursor: help;
	}
	
	body {
		font: normal 11px/14px Verdana, Arial, Helvetica, sans-serif;
		margin: 0;
	}
	
	blockquote { }
	
	code, 
	var, 
	kbd {
		font-family: monospace; 
		color: #900;
	}
	
	form { }
		fieldset { }
			legend { }
			label { }
	
	h1 {
		font-size: 16px;
		line-height: 18px;
		font-weight: bold;
	}
	
	h2 {
		font-size: 14px;
		line-height: 16px;
		font-weight: bold;
	}
	
	h3 {
		font-size: 12px;
		line-height: 16px;
		font-weight: bold;
	}
	
	h4 {
		color: #369;
		font-size: 16px;
		line-height: 20px;
		font-weight: normal;
		margin: 0;
	}
		h4 a {
			color: #369 !important;
			text-decoration: none;
		}
		h4 a:hover { text-decoration: underline; }
	
	h5,
	h6 {
		font-size: 12px;
		line-height: 14px;
		font-weight: normal;
	}
	
	hr {
		display: none;
		border: none; 
		height: 1px; 
		background: #000; 
		margin: 2em 0;
	}
		#container div hr { display: block; }
	
	img { border: 0 !important; }
	
	ins {
		text-decoration: none; 
		color: #900;
	}
	
	ol { margin-left: 1.5em; }
	
	p { }
		p.more a {
			background: url(../images/design/more.png) left no-repeat;
			color: #369 !important;
			text-decoration: none;
			font-weight: bold;
			padding: 3px 0 3px 25px;
		}
		p.more a:hover { text-decoration: underline; }
		#content-related p.more a { padding: 2px 0 4px 25px; } /* diff line height */
		
		p.source { 
			font-size: 9px; 
			padding-left: 17px; /* makes it line up with the table above it */
		}
	
	table { }
		th { }
	
		td { vertical-align: top; }
	
	ul { margin-left: 1.5em; }




/* -- Container -- */
	#container {
		width: 929px;
		border-left: 10px solid #fff;
		position: relative;
	}




/* -- Branding -- */
	#branding { }
		#branding * { margin: 0; padding: 0; }
		#branding-logo p { height: 66px; position: relative; z-index: 1000; }
		#branding img {
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1000;
		}
		
	#branding-tagline {
		background: url(../images/design/bg.branding-message.gif) top left repeat-x;
		height: 30px;
		font-weight: bold;
		color: #333;
	}
		#branding-tagline p { padding: 8px 22px; }
	
	



/* -- Content -- */
	#content { 
		padding: 0 0 10px 0; 
		font-size: 12px;
		line-height: 16px;
		color: #333;
		min-height: 400px;
	}
		.home #content { padding: 0; }
		
		      .landing          #content { background: url(../images/design/bg.content.landing.png)              0 171px no-repeat; }
		
		.why  .article          #content { background: url(../images/design/bg.content.article.why.png)          0 171px no-repeat; }
		.what .article          #content { background: url(../images/design/bg.content.article.what.png)         0 171px no-repeat; }
		.how  .article          #content { background: url(../images/design/bg.content.article.how.png)          0 171px no-repeat; }
		.why  .article .related #content { background: url(../images/design/bg.content.article.related.why.png)  0 171px no-repeat; }
		.what .article .related #content { background: url(../images/design/bg.content.article.related.what.png) 0 171px no-repeat; }
		.how  .article .related #content { background: url(../images/design/bg.content.article.related.how.png)  0 171px no-repeat; }
		
		.why  .detail           #content { background: url(../images/design/bg.content.detail.why.png)           0 171px no-repeat; }
		.what .detail           #content { background: url(../images/design/bg.content.detail.what.png)          0 171px no-repeat; }
		.how  .detail           #content { background: url(../images/design/bg.content.detail.how.png)           0 171px no-repeat; }
		.why  .detail  .related #content { background: url(../images/design/bg.content.detail.related.why.png)   0 171px no-repeat; }
		.what .detail  .related #content { background: url(../images/design/bg.content.detail.related.what.png)  0 171px no-repeat; }
		.how  .detail  .related #content { background: url(../images/design/bg.content.detail.related.how.png)   0 171px no-repeat; }
	
	#content-main { }
		.home    #content-main { border-top: 6px solid #fff; }
		.article #content-main,
		.detail  #content-main { 
			padding: 21px 0 0 244px; 
			width: 661px;
		}
		.article .related #content-main { 
			width: 415px;
			float: left;
		}
		.detail  .related #content-main { 
			width: 400px;
			float: left;
		}
		.landing #content-main {
			padding: 21px 0 0 23px; 
			width: 637px;
			float: left;
		}
		
		#content-main h2 {
			color: #706330;
			font-size: 24px;
			line-height: 24px;
			border-bottom: 2px solid #E7DCA3;
			font-weight: normal;
			padding: 0 0 4px 0;
			margin: 0 0 1px 0;
		}
		
		#content-main h3 {
			color: #706330;
			font-size: 16px;
			line-height: 16px;
			font-weight: bold;
			padding: 10px 0 14px 0;
			margin: 0 0 0 0;
		}
		
		#content table { width: 100%; margin: 0 0 10px 0; }
			#content th {
				background-color: #E7DCA3;
				font-weight: bold;
				text-align: left;
				padding: 5px 17px 4px 17px;
			}
			#content td {
				padding: 3px 12px;
				border-bottom: 1px solid #E7DCA3;
			}
				#content form td {
					padding: 0;
					border-bottom: 0;
				}
			#content tr.even td { background-color: #F3EED2; }
			#content td.nostyle { border-bottom: 0; background-color: transparent !important; }
			#content-main table.small { font-size: 10px; }
			#content-main table.small td,
			#content-main table.small th { padding: 3px 1px; }
			
			#content-main table.lista {
				margin: -15px 0 15px 0;
			}
			#content-main table.lista td {
				padding: 15px 15px 15px 0;
				border-bottom: 1px solid #AAAF5C;
				background-color: transparent;
			}
			#content-main table.listc td {
				padding: 0;
				border-bottom: 0;
				background-color: transparent;
			}
		
		#content-main p.lista-intro {
			font-size: 14px;
			color: #484E22;
			line-height: 20px;
			background: url(../images/design/bg.p-lista.gif) bottom left no-repeat;
			padding: 0 0 15px 0;
		}
		
			.why  #content-main div.listb { background: url(../images/design/bg.listb.why.bot.gif)  bottom left no-repeat; }
			.what #content-main div.listb { background: url(../images/design/bg.listb.what.bot.gif) bottom left no-repeat; }
			.how  #content-main div.listb { background: url(../images/design/bg.listb.how.bot.gif)  bottom left no-repeat; }
			.why  #content-main div.listb table { background: url(../images/design/bg.listb.why.top.gif)  top left no-repeat; }
			.what #content-main div.listb table { background: url(../images/design/bg.listb.what.top.gif) top left no-repeat; }
			.how  #content-main div.listb table { background: url(../images/design/bg.listb.how.top.gif)  top left no-repeat; }
			
		#content-main div.listb table { margin: 0; }
		#content-main div.listb td { 
			padding: 15px 15px 15px 0;
			border: 0; 
			background-color: transparent !important;
		}
		
		#content-main div.listb a.img { 
			width: 228px;
			height: 120px;
			position: relative;
			display: block;
		}
		#content-main div.listb a.img img { 
			width: 228px;
			height: 200px;
			top: -40px; /* 25 (height between rows) + 15 (TD padding) */
			left: 0;
			position: absolute;
		}
		
		#content-main div.listb-hr {
			height: 51px;
			background: url(../images/design/bg.listb.divider.gif) center left no-repeat;
		}
			#content-main div.listb-hr:last-child,
			#content-main div.listb-hr-last-child { 
				background: none; 
				height: 25px; /* has to be enough to cover the overlap of the image above */
			}
		
		#content-main p.listb-intro,
		#content-main p.listc-intro {
			color: #5C512B;
			font-size: 14px;
			line-height: 18px;
			margin: 0 0 25px 0;
		}
		
		#content-main table.listc img { margin: 0 20px 5px 0; }
	
	/* only on homepage */
	#content-highlights {
		background: url(../images/design/bg.home-wrapper.top.gif) top left no-repeat;
		font-size: 11px;
		border-bottom: 10px solid #fff;
	}
		#content-highlights h2 {
			color: #3A6089;
			margin: 0;
			font-size: 14px;
		}
		#content-highlights a { color: #369; }
		
		#content-highlights div { background: url(../images/design/bg.home-wrapper.bot.gif) bottom left no-repeat; }
		
		#content-highlights div div {
			background-image: none;
		}
		
		#content-highlights div.wide_promo {
			width:265px;
			padding: 15px 32px 15px 23px;
			overflow: none;
			background-image: none;
			float: left;
		}		
		#content-highlights div.thin_promo {
			background-image: none;
			float: left;
			width: 147px;
			padding: 15px 32px 15px 23px;
			overflow: none;
		}
		/* right most box */
		#content-highlights div div.news {
			width: 277px;
			padding-right: 0;
		}
		#content-highlights div div.news td {
			padding: 0 10px 10px 0;
		}
	
	#content-title { 
		border-bottom: 20px solid #fff; 
		width: 929px;
		height: 151px;
	}
		#content-title h1 { margin: 0; padding: 0; }
	
	#content-related {
		float: left;
		width: 200px;
		padding-left: 52px;
		font-size: 11px;
	}
		.detail #content-related { 
			width: 245px; 
			padding-left: 22px;
		}
	
		#content-related h2 {
			font-size: 16px;
			line-height: 18px;
			color: #575321;
			font-weight: normal;
		}
		#content-related div {
			padding: 15px 0 5px 0;
			border-bottom: 2px solid #E7DCA3;
		}
			#content-related div.last-child { border-bottom: 0; }
			/* Rhythmyx inline variant */
			#content-related div div {
				padding: 0;
				border-bottom: 0;
			}
		
		#content-related div.callout {
			position: relative;
			z-index: 5000;
			color: #585F38;
			font-weight: bold;
			font-size: 10px;
		}
			#content-related div.callout a { 
				color: #369; 
				display: block;
				text-decoration: none;
				font-weight: normal;
			}
			#content-related div.callout a:hover { text-decoration: underline; }
			
			#content-related div.callout img,
			#content-related div.callout embed,
			#content-related div.callout object { 
				position: relative; 
				margin: -171px -18px 0 -18px; 
				padding: 0;
			}
		
		#content-related div.callout-feature {
			padding: 0 0 7px 0; /* padding-bottom + border of other divs */
			border: 0;
			margin: 0 -18px;
		}
			#content-related div.callout-feature p,
			#content-related div.callout-feature a,
			#content-related div.callout-feature img,
			#content-related div.callout-feature object,
			#content-related div.callout-feature embed {
				display: block;
				margin: 0;
				padding: 0;
				position: relative; /* for display in IE */
			}
		
		#content-related div.callout-calendar {
			margin: 0 -18px -10px -25px;
			padding: 15px 18px 28px 25px;
			border: 0;
			width: 200px; /* make it show up in IE */
			position: relative; /* make it show up in IE */
		}
			.why  #content-related div.callout-calendar { background: url(../images/design/bg.calendar.why.bot.png)  bottom left no-repeat; }
			.what #content-related div.callout-calendar { background: url(../images/design/bg.calendar.what.bot.png) bottom left no-repeat; }
			.how  #content-related div.callout-calendar { background: url(../images/design/bg.calendar.how.bot.png)  bottom left no-repeat; }
			
			#content-related div.callout-calendar h2 {
				background: url(../images/design/bg.calendar.what.top.png) top left no-repeat;
				margin: -15px -18px 0 -25px; /* these should be equal to the parent div */
				padding: 15px 18px 10px 25px; /* these should be equal to the parent div */
				position: relative; /* make it show up in IE */
			}
				.why  #content-related div.callout-calendar h2 { background: url(../images/design/bg.calendar.why.top.png)  top left no-repeat; }
				.what #content-related div.callout-calendar h2 { background: url(../images/design/bg.calendar.what.top.png) top left no-repeat; }
				.how  #content-related div.callout-calendar h2 { background: url(../images/design/bg.calendar.how.top.png)  top left no-repeat; }
				
			#content-related div.callout-calendar h3 {
				margin: 0;
				color: #369;
				font-size: 11px;
				font-weight: bold;
			}
			#content-related div.callout-calendar table {
				margin: 0 0 8px 0;
			}
			#content-related div.callout-calendar td {
				padding: 2px 10px 2px 0;
			}




/* -- Site Info -- */
	#siteinfo {
		padding: 10px 0 20px 0;
		overflow: hidden; /* to hide the overflowing UL */
	}
		.home #siteinfo { padding: 0; }
		
		      .landing          #siteinfo { background: url(../images/design/bg.siteinfo.landing.png)              top left no-repeat; }
		
		.why  .article          #siteinfo { background: url(../images/design/bg.siteinfo.article.why.png)          top left no-repeat; }
		.what .article          #siteinfo { background: url(../images/design/bg.siteinfo.article.what.png)         top left no-repeat; }
		.how  .article          #siteinfo { background: url(../images/design/bg.siteinfo.article.how.png)          top left no-repeat; }
		.why  .article .related #siteinfo { background: url(../images/design/bg.siteinfo.article.related.why.png)  top left no-repeat; }
		.what .article .related #siteinfo { background: url(../images/design/bg.siteinfo.article.related.what.png) top left no-repeat; }
		.how  .article .related #siteinfo { background: url(../images/design/bg.siteinfo.article.related.how.png)  top left no-repeat; }
		
		.why  .detail           #siteinfo { background: url(../images/design/bg.siteinfo.detail.why.png)           top left no-repeat; }
		.what .detail           #siteinfo { background: url(../images/design/bg.siteinfo.detail.what.png)          top left no-repeat; }
		.how  .detail           #siteinfo { background: url(../images/design/bg.siteinfo.detail.how.png)           top left no-repeat; }
		.why  .detail  .related #siteinfo { background: url(../images/design/bg.siteinfo.detail.related.why.png)   top left no-repeat; }
		.what .detail  .related #siteinfo { background: url(../images/design/bg.siteinfo.detail.related.what.png)  top left no-repeat; }
		.how  .detail  .related #siteinfo { background: url(../images/design/bg.siteinfo.detail.related.how.png)   top left no-repeat; }
		
		#siteinfo a { color: #336699; }
		
		#siteinfo ul { 
			float: right; 
			width: 640px; 
			list-style: none;
			margin-right: -5px;
			padding: 3px 0 0 0; /* offsets the A top value */
		}
		#siteinfo li { 
			float: right; 
			padding: 0 10px;
			border-right: 1px solid #336699;
			height: 10px;
			margin: 0;
		}
		#siteinfo a { 
			position: relative;
			top: -3px;
		}
		#siteinfo p  { 
			width: 300px;
			padding-left: 5px; 
		}
	
	#siteinfo-legal { 
		border-top: 9px solid #FFF;
		padding: 14px 0 0 0;
		font-size: 10px;
		color: #000;
		background: url(../images/design/bg.siteinfo-legal.gif) top left no-repeat; 
		padding-top: 24px;
	}




/* -- Print -- */
	@media print {
		p.more a { padding: 3px 0 3px 0 !important; }
	
		#nav-global,
		#nav-search { display: none; }
	
		#content *,
		#siteinfo * { background-image: none !important;
		              position: static !important; }
	
		#container,
		#content, 
		#content-main,
		#content-related { 
			width: auto !important;
			float: none !important; 
		}
		
		.landing #content-main { padding-left: 0; }
		
		#content-related { padding-left: 0 !important; }
		
		#content-related div.callout img { margin: 0; }
		
		#content-main div.listb table { border: 1px solid #666 !important; }
		
		#content-main div.listb a.img { 
			position: static;
			display: inline;
		}
		
		#content-main div.listb a.img img { 
			top: 0;
			position: static;
		}
		
		#nav-main ul ul ul a { padding: 0 0 0 10px !important; }
	
		#siteinfo { 
			border-top: 5px solid #666; 
			overflow: visible;
		}
		#siteinfo ul { display: none; }	
	
		#siteinfo p  { padding-left: 0; }
	
	}