/*
	SWATCHES
		#7c7169 main copy
		#bd1b70 pink text
*/

* { outline: none; }

body {
	background: #ddd6cf url(img/bodybg.gif) repeat-x top left;
	color: #7c7169;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px; 
	line-height: 16px;
	padding: 0;
	margin: 0;
}


a { color: #08d; }
a:hover { color: #bd1b70; text-decoration: none; }
td, th { vertical-align: top; }
a img { border: none; }



.clear { clear: both; }
.tl { text-align: left; }
.tr { text-align: right; }
.calloutLeft, .calloutRight {
	display: block;
	float: left;
	border-right: 16px solid #fff;
	border-bottom: 10px solid #fff;
}
.calloutRight {
	float: right;
	border-left: 16px solid #fff;
	border-right: none;
}


.nav ul, .nav li { list-style: none; margin: 0; padding: 0; }
.nav li { float: left; }
.nav a { display: block; }
.fbiframe { float: left; }
.twbutton { float: left; }

/* heading img replacement */
#header h1,
#subhead h1,
#content h2,
#steps h4,
#whatToDo h3,
#subhead h1 { 
	text-indent: -9999em; 
	font-size: 12px;
	line-height: 12px;	
	height: 15px;
}

#comments h2 { height: 16px; background: url(img/h2Commentsbg.gif) no-repeat top left; }
#twitterParty h2 { background: url(img/h2TwitterPartybg.gif) no-repeat top left; }
#featuredBloggers h2 { background: url(img/h2FeaturedBloggersbg.gif) no-repeat top left; }
#memberBlogs h2 { background: url(img/h2MemberBlogsbg.gif) no-repeat top left; }
#whatToDo h2 { background: url(img/h2WhatToDobg.gif) no-repeat top left; }
#whatToDo h3 { height: 13px; background: url(img/h3WhatToDobg.gif) no-repeat 295px 0; }

#step1 h4 { width: 235px; height: 13px; background: url(img/h4Step1bg.gif) no-repeat top left; }
#step2 h4 { width: 172px; height: 13px; background: url(img/h4Step2bg.gif) no-repeat top left; }
#step3 h4 { width: 157px; height: 13px; background: url(img/h4Step3bg.gif) no-repeat top left; }







#wrapper {
	width: 1020px;
	margin: 0 auto;
}


#header {
	background: #fff url(img/topheadbubblebg.gif) no-repeat top right;
	height: 118px;
	position: relative;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 9px;
	text-transform: uppercase;
}
	#header ul, #header li { list-style: none; }
	
	#header h1 {
		position: absolute;
		height: 82px;
		width: 226px;
		top: 0;
		left: 27px;
		background: url(img/logo.gif) no-repeat top left;
	}

	#ssMainNav {
		background: url(img/mainnavbg.gif) repeat-x top left;
		height: 35px;
		width: 995px;
		position: absolute;
		bottom: 0;
		left: 0;
		padding-left: 25px;
		border-top: 1px solid #f0f0f0;
		font-size: 12px;
	}
		#ssMainNav ul  {
			padding-left: 2px;
			height: 35px;
			background:url(img/mainnav-divider.gif) no-repeat top left;
		}
		
		#ssMainNav li {
			height: 35px;
			padding-right: 2px;
			background:url(img/mainnav-divider.gif) no-repeat top right;
		}

		#ssMainNav a {
			color: #000;
			text-decoration: none;
			height: 35px;
			line-height: 35px;
			padding: 0 22px 0 22px;
		}
		
		
	 #ssMiniNav {
	 	position: absolute;
	 	height: 29px;
	 	top: 45px;
	 	right: 45px;
	 	background: url(img/ssMiniNavbg.gif) no-repeat top left;
	 }
	 	#ssMiniNav ul, #ssMiniNav li, #ssMiniNav a {
	 		height: 29px;
	 		line-height: 28px;
	 	}
	 	
	 	#ssMiniNav ul {
	 		background: url(img/ssMiniNavUlbg.gif) no-repeat top right;
	 	}
		
			
		#ssMiniNav li {
			padding-left: 1px;
			background: url(img/programNavLibg.gif) no-repeat center left;
		}
		#ssMiniNav li.first { background: transparent; padding-left: 0; }
		#ssMiniNav a, #ssMiniNav span.gigyaSignIn {
			color: #333;
			display: block;
			height: 27px;
			line-height: 29px;
			text-decoration: none;
			padding: 0 14px;
		}
		
		#ssMiniNav span.gigyaSignIn { 
			width: 137px;
		}
		
		#ssMiniNav span.gigyaSignIn { padding-right: 6px; }
		#ssMiniNav span.gigyaSignIn table { display: inline; }
		#ssMiniNav span.gigya-login-text, #ssMiniNav span#loginDiv2 { float: left; }
		#ssMiniNav span#loginDiv2 { float: left; padding-left: 4px; padding-top: 7px; }
		#ssMiniNav a:hover { 
			color: #565657; 
			border-bottom: 2px solid #bd1b70;
			background: url(img/miniNavAHoverbg.gif) repeat-x top left;
		}
		#ssMiniNav .first a:hover { background: url(img/miniNavAHoverbg-first.gif) no-repeat top left; }
		#ssMiniNav .last a:hover { background: url(img/miniNavAHoverbg-last.gif) no-repeat top right; }
		


#subhead {
	background: #ddd6cf;
	height: 133px;
	position: relative;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 9px;
	text-transform: uppercase;
}
	#subhead h1 {
		position: absolute;
		width: 579px;
		height: 84px;
		left: 63px;
		top: 12px;
		background: url(img/h1Subheadbg.gif) no-repeat top left;
		margin: 0;
	}
	
	
	#programNav, #subhead .nav ul, #subhead .nav li {
		height: 25px;
		line-height: 25px;
	}
	
	#programNav, #membersOnlyNav {
		position: absolute;
		height: 25px;
		left: 25px;
		bottom: 0;
		background: url(img/programNavbg.gif) no-repeat bottom left;
		
	}
	#programNav ul, #membersOnlyNav ul { background: url(img/programNavUlbg.gif) no-repeat top right; }
	
	#programNav a, #membersOnlyNav a {
		color: #333;
		display: block;
		height: 23px;
		line-height: 25px;
		text-decoration: none;
		padding: 0 14px;
	}
		#programNav a:hover, #membersOnlyNav a:hover { 
			color: #565657; 
			border-bottom: 2px solid #bd1b70;
			background: url(img/programNavAHoverbg.gif) repeat-x top left;
		}
		#programNav .first a:hover, #membersOnlyNav .first a:hover { background: url(img/programNavAHoverbg-first.gif) no-repeat top left; }
		#programNav .last a:hover, #membersOnlyNav .last a:hover { background: url(img/programNavAHoverbg-last.gif) no-repeat top right; }
		
		
	#programNav li, #membersOnlyNav li {
		padding-left: 1px;
		height: 25px;
		background: url(img/programNavLibg.gif) no-repeat center left;
	}
	#programNav li.first, #membersOnlyNav li.first { background: transparent; padding-left: 0; }
	
	#membersOnlyNav {
		height: 41px;
		left: 640px;
		bottom: 0;
	}

	#membersOnlyNav p { margin: 0; text-align: center; }
	

#content {
	background: #fff;
	padding: 30px;
	position: relative;
}

#content li { margin: 0 0 6px 0; }
#content p, #content ul { margin: 0 0 12px 0; }

#main {
	width: 630px;
	float: left;
}

#content h2, #content h3 {
	margin: 0 0 16px 0;
}

	#whatToDo { 
		padding-bottom: 30px;
		margin-bottom: 44px;
		background: url(img/dotBorderBg-long.gif) no-repeat bottom center; 
	}
	
	#whatToDo h3 {
		margin-top: 12px;
	}


	#steps { 
		position: relative; 
		height: 35px; 
	}

	#steps div {
		position: absolute;
		top: 0;
		height: 35px;
		cursor: pointer;
	}
		#step1 { left: 0; width: 235px; }
		#step2 { left: 269px; width: 172px; }
		#step3 { left: 480px; width: 157px; }

	#steps p {
		position: absolute;
		top: -69px;
		left: -15px;
		width: 185px;
		padding-bottom: 5px;
		background: url(img/pStepsBg.gif) no-repeat bottom left;
		display: none;
	}
	
		#steps p em {
			display: block;
			background: #fff;
			color: #666;
			border: 1px solid #666;
			border-bottom: none;
			padding: 10px;
		}


#comments { position: relative; }
#comments .fbiframe {
	position: absolute;
	top: -1px;
	left: 230px;
}




#sidebar {
	width: 290px;
	float: right;
}

	#twitterParty,
	#featuredBloggers { background: url(img/dotBorderBg.gif) no-repeat bottom center; }

	#twitterParty, #featuredBloggers {
		padding-bottom: 13px;
		margin-bottom: 30px;
	}
	
		#twitterParty th {
		color: #bd1b70;
		text-align: left;
		font-weight: normal;
		padding-right: 6px;
	}


	#twitterPartyBadge {
		position: absolute;
		width: 173px;
		height: 184px;
		top: -133px;
		right: 6px;
		margin: 0;
		padding: 0;
	}
		#twitterPartyBadge img { display: block; }


	#featuredBloggers {
		width: 290px;
		height: 200px;
		position: relative;
	}
		#content #featuredBloggers p { margin: 0; }
		
	#featuredBloggersPagination {
		font-style: italic;
		font-size: 10px;
		width: 130px;
		height: 14px;
		position: absolute;
		top: 32px;
		left: 138px;
		margin: 0;
	}
		#featuredBloggersPagination img {
			cursor: pointer;
			padding: 0 2px;
		}
		
	#featuredBloggersScrollView { 
		position: relative;
		height: 160px;
		width: 290px;
		overflow:hidden;
	}
		
	#featuredBloggersScroller {
		position: absolute;
		top: 0;
		height: 160px;
	}
		
	.featuredBloggerView {
		width: 270px;
		height: 160px;
		padding: 0 10px;
		position: relative;
		float: left;
	}
		
		.featuredBloggerView .headshot {
			width: 106px;
			height: 109px;
			overflow: hidden;
			padding: 7px 8px 29px 6px;
			position: absolute;
			top: 0;
			left: 0;
			background: url(img/featuredBloggerImgbg.gif) no-repeat top left;
		}
			.featuredBloggerView .headshot img { display: block; }
		
		.featuredBloggerView .info {
			width: 130px;
			height: 135px;
			position: absolute;
			top: 25px;
			left: 140px;
			
		}

	#blogList {
		height: 220px;
		border: 1px solid #ccc;
		border-right: 1px solid #eaeaea;
		border-bottom: 1px solid #eaeaea;
		padding: 3px;
		background: #fff;	
		margin-left: 12px;
		overflow: auto;
	}
		#content #blogList ul { padding-left: 15px; margin-left: 0; }
		#content #blogList li {
			line-height: 12px;
			margin-bottom: 4px;
			padding-left: 0;
			margin-left: 0;
			width: 240px;
		}

#footer {
	height: 80px;
	padding: 20px 40px 0 40px;
	color: #fff;
	background: #685c52;
	font-size: 10px;
}
#footer a { color: #fff; text-decoration: none; }
#footer a:hover { text-decoration: underline; }