﻿@charset "UTF-8";

.container {
	width: 984px;
	margin: 0 auto;
}
#content {
	background-color: #FFF;
	padding-right: 20px;
	
	/* Mike: need min-height here, so pages aren't too short ever */
	
	min-height:400px;
	height:auto !important; /* ignored by ie6 */
	height:400px;
	width: 964px;
}
#main-content {
	padding: 20px 0;
	width: 740px;
	float: left;
}
.three-column, .two-column {
	padding-right: 20px;
}
.three-column #main-content {
	width: 545px;
}
.two-column #main-content {
	width: 770px;
}
.two-column-right-side #main-content {
	margin-left:25px;
	width: 745px;
}
.one-column {
	text-align:center;
}
.one-column #main-content {
	width:944px;
	margin:0 0 0 20px;
	text-align:left;
	float:none;
}
#aspnetForm {
	margin: 0;
}

/* Header
===================================== */

#header-stripe {
	background: #008298;
	min-width: 984px;
}
#header {
	position: relative;
	padding-top: 30px;
	background-image: url(img/layout.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	z-index: 2000;
}
	#header a {
		color: #FFF;
		text-decoration: none;
	}
	#header h1, #header h2, #header h3 {
		margin: 0;
	}
	#header h1 {
		display: block;
		float: left;
		width: 195px;
	}
	#header h2, #header h3, #secondary-nav h2, #content h1, #footer h4 {
		font-family: Tahoma, Geneva, sans-serif;
		font-weight: normal;
	}
	#header h2, #header h3 {
		margin-left: 20px;
		float: left;
		
		height:20px;
	}
	#header h2 {
		color: #FFF;
		font-size: 1.7em;
		padding-top: 20px;
		width: 500px;
	}
	#header h3 {
		color: #f2e9a6;
		font-size: 1.6em;
		width: 330px;
		margin-bottom: 25px;
	}
	#header h2, #header h3 {
		font-family: 'Trade Gothic Condensed', Arial, Helvetica Neue, Helvetica, sans-serif;
		font-size:16px;
	}
	#header h3 span {
		position: relative;
		font-size: 10px;
		top: -6px;
	}
	.cufon-loading #header h2, 	.cufon-loading #header h3
	{
		visibility:hidden !important;		
	}
	.cufon-ready #header h2
	{
		font-size:1.7em;
	}
	.cufon-ready #header h3
	{
		font-size:1.6em;
	}

/* Login & Join Buttons
===================================== */

#account-info, #search {
	text-align: right;
}
#account-info * {
	outline:0;
}
#account-info {
	position: absolute;
	color: #9ECBD0;
	top: 30px;
	right: 0;
}
	#account-info .login-box {
		display:none;
	}
	#account-info span.username, #account-info span.mem-type {
		color: #FFF;
	}
	#account-info span.username {
		font-weight: bold;
	}
	#account-info span.manage-account {
		display: block;
		font-size: 10px;
		font-weight: bold;
	}
	#account-info a {
		color: #E9E083;
	}
	#account-info .non-member {
		/* Mike: clear floaty childrent */
		overflow:auto;
		height:100px; /* just for the hasLayout */
	}
	#account-info a.join-link, #account-info a.login-link {
		font-weight: bold;
		display:block;
		float:left;
		padding: 4px 6px 4px 26px;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		background-color: #005A6A;
		background-repeat: no-repeat;
	}
		#account-info a.join-link {
			color: #A2DD51;
			background-image: url(img/layout.png);
			background-position: -485px -193px;
			margin-right: 10px;
		}
		#account-info a.login-link {
			color: #FFC972;
			background-image: url(img/layout.png);
			background-position: -408px -194px;
		}
		#account-info a.join-link span {
			display: inline-block;		
			
			/* Mike: added valign to line up the spans to the same place, then push down from the top, to align arrows between browsers */
			vertical-align:top;

			width: 10px;
			height: 10px;

			background: url(img/login/arrow.png) no-repeat bottom center;
			margin-left: 5px;
			
		}
#account-info .non-member {
	height:auto;
}
#account-info .non-member a.clicked {
	background-color:#00414B;
	border-radius-bottomleft: 0;
	border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
}
#account-info .login-box{
	border:4px solid #00414B;
	background-color: #FFF;
	text-align:left;
	width: 205px;
	padding: .5em 1em 0;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
	position:absolute;
	right: 0;
	z-index:1000;
}
.login-box table {
	width: 200px;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
}
.login-box table tr,
.login-box table td {
	padding:0;
	margin:0;
	border-collapse:collapse;
}
.login-box table td {
	padding: .5em 0;
}
.login-box label {
	display:block;
	font-size: 11px;
	margin: 0 0 2px;
	color: #666;
}
#account-info .login-box a {
	font-size: 11px;
	color: #2B8EBA;
}
#account-info .login-box input.username, #account-info .login-box input.password {
	width:195px;
}
#account-info .login-box input.button {
	width:auto;
}
.login-box .autologin label {
	display:inline;
}

#search {
	display: block;
	float: right;
	width: 300px;
	clear: right;
}
#search input {
	width: 200px;
}

/* Chapters Header
===================================== */

div.chapterBanner {
	background: url(img/chapters/chapter_banner.jpg) no-repeat;
	height: 84px;
	width: 984px;
	position: relative;
}
div.chapterBanner h1 {
	position: absolute;
	margin: 0;
	left: 280px;
	bottom: 12px;
	color: #FFF;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Main Navigation
===================================== */

#main-nav ul, #my-account ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 12px;
}
	#main-nav li {
		float: left;
		margin-right: 5px;
	}
	#my-account li {
		float: right;
	}
	#main-nav a, #my-account a  {
		display: inline-block;
		*display:inline;
		zoom: 1;
		white-space: nowrap;
		cursor: pointer;
		padding: 10px 18px;
		background: url(img/nav/black_30.png);
		border-radius-topleft: 4px;
		border-radius-topright: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-topright: 4px;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
	}
	#my-account a, #my-account span {
		background: url(img/nav/black_50.png);
	}
	#main-nav a.current, #my-account a.current  {
		background: #FFF none;
		color: #2A9FBC;
	}

/* Secocdary Navigation
===================================== */

#secondary-nav {
	float: left;
	width: 178px;
	margin-right: 10px;
}
	#secondary-nav h2 {
		margin: 20px 0 0 0;
		position: relative;
		left: -20px;
	}
	#secondary-hav h2 a {
		font-size:1.23em;
	}
		#secondary-nav h2 a {
			background: url(img/nav/yellow-side.jpg) #f2e9a6 repeat-y;
			padding: 10px 0 5px 30px;
		}
		#secondary-nav h2 a:hover, #secondary-nav h2 a:focus, #secondary-nav h2 a:active {
			background-color: #ECE39F;
		}
		.cufon-loading #secondary-nav h2 a {
			text-indent:-9999em;
		}
		.cufon-ready #secondary-nav h2 a {
			font-size: 1.23em;
		}
	#secondary-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		position: relative;
		left: -10px;
		width: 168px;
	}
	#secondary-nav a {
		display: block;
		background: url(img/nav/gray-side.jpg) #EEE repeat-y;
		line-height: 110%;
		padding: 8px 6px 8px 20px;
		border-bottom: 1px solid #d8d8d8;
		color: #3e5c74;
	}
	#secondary-nav a.current {
		color: #2B8EBA;
	}
	#secondary-nav a:hover, #secondary-nav a:focus, #secondary-nav a:active {
		background-color: #DEDEDE;
		text-decoration: none;
	}
	#secondary-nav ul ul {
		margin: 10px 0;
	}
		#secondary-nav ul ul a {
			background: none;
			margin: 0;
			padding: 0;
			border: 0;
			display: inline;
			font-size: 11px;
			line-height: 100%;
		}
		#secondary-nav ul ul li {
			margin: 8px 0 2px 40px;
		}
		#secondary-nav ul ul li.first {
			margin-top: 2px;
		}
		#secondary-nav ul ul a:hover, #secondary-nav ul ul a:focus, #secondary-nav ul ul a:active {
			background: none;
			text-decoration: underline;
		}

/* Right Sidebar & Banner Ads
===================================== */

#sidebar {
	float: right;
	width: 200px;
	padding: 20px 0;
	font-size: 11px;
}
#sidebar h2, #sidebar h3, #sidebar h3 {
	margin-top: 1em;
}
#sidebar div.banner-ads {
	text-align: center;
}
#sidebar div.banner-ads div.item {
	margin-bottom: 2em;
}

/* Breadcrumbs
===================================== */

#breadcrumbs {
	font-size: 10px;
	/* Mike: better than clear float */
	overflow:auto;
	width:100%;
	margin-bottom: 1em;
}
#breadcrumbs * {
	float:left;
	display:block;
	margin-right:5px;
}
#breadcrumbs a {
	font-weight: bold;
}
#breadcrumbs span {
	width: 5px;
	height: 10px;
	background:url(img/nav/breadcrumb-divider.gif) no-repeat center 4px;
}
#breadcrumbs span.current-page {
	background: none;
	width: auto;
	height: auto;
	margin: 0;
}

/* Share Toolbox
===================================== */

.addthis_toolbox {
	width: 105px;
	float: right;
	margin: 12px -8px 10px 20px;
}

/* Footer
===================================== */
#footer {
	padding-top: 20px;
}
.footer-box {
	float: left;
	margin-right: 20px;
}
	.footer-box h4 {
		background-color: #666;
		color: #FFF;
		font-size: 1.5em;
		margin: 0;
		padding: 10px 20px 5px;
		border-radius-topleft: 4px;
		border-radius-topright: 4px;
		-moz-border-radius-topleft: 4px;
		-moz-border-radius-topright: 4px;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
	}
	.footer-box ul {
		background-color: #F1F1F1;
		margin: 0;
		padding: 0;
		list-style: none;
		line-height: 1.6em;
	}
.footer-box ul, #enewsletter div.box {
	padding: 15px 20px;
	height: 5em;
}
#aiim-sites {
	width: 175px;
}
#help {
	width: 120px;
}
#vendor {
	width: 220px;
	margin-right: 0;
}
#connect {
	float: right;
	width: 410px;
	margin-right: 0;
}
	#connect ul {
		background-color: #FFF;
	}
	#connect li {
		float: left;
	}
	#connect a {
		display: block;
		height: 16px;
		padding-top: 38px;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 10px;
		margin: 3px 15px 2px 5px;
		background-repeat: no-repeat;
	}
		#twitter a {
			background-image: url(img/layout.png);
			background-position: -1px -191px;
			color: #6CB0D5;
			width: 36px;
		}
		#facebook a {
			background-image: url(img/layout.png);
			background-position: -41px -191px;
			color: #4E68BF;
		}
		#linkedin a {
			background-image: url(img/layout.png);
			background-position: -86px -191px;
			color: #006FA7;
			margin-right: 20px;
		}
		#youtube {
			border-right: 1px solid #DDD;
		}
		#youtube a {
			background-image: url(img/layout.png);
			background-position: -128px -191px;
			color: #4C4647;
		}
		#blogs a {
			background-image: url(img/layout.png);
			background-position: -174px -191px;
			color: #ed8d08;
			width: 36px;
			margin-left: 20px;
		}
		#rss a {
			background-image: url(img/layout.png);
			background-position: -218px -191px;
			color: #FF6C00;
			margin-right: 0;
			width: 36px;
		}

/*#enewsletter {
	width: 393px;
	float: right;
	margin-right: 0;
}*/
	#connect h4 {
		background-color: #00A1BC;
	}
	#connect div.box {
		background-color: #FFF;
	}
	
	/*#enewsletter p {
		margin: 0 0 15px;
	}
	#enewsletter input {
		width: 250px;
		height: 14px;
		padding: 2px;
	}
	#enewsletter button {
		width: 70px;
		margin: 2px 0 0 10px;
		padding: 0;
	}*/
#copyright {
	text-align: center;
	color: #999;
	margin-top: 1em;
}
#copyright a {
	color: #999;
	text-decoration: underline;
}

