/* This page should contain style specific to the Bulletin front page.
	Style used across the Bulletin site goes in global.css. 
	jhertz@aarp.org and mjenkins@aarp.org, Nov 2007
	last mod jhertz 7 Dec 2007 */	
	
	/* Mod by jhz 2/08/2008
	deleted non-functioning code for original rotator
	and test code for dotorg feature rotator,
	moved rotator code to top to match page order of features
	and changed the .cf_wrapper h2 padding top to .8em
	to stop text slides on rotation*/
	/* also 2/08 completed font-families, updated icon paths & new icons,
	removed background quote */
	/* mod 2/11/2008 added scroller instructions */
	/* mod 2/12 rotator positioning and newsmaker elements */
	/* mod 2/14 remove red color font and bold onThisDay h3 */
	/* mod 2/26 rotator fix */

/* CSS for rotator is in this section 
	added by Judy Hertz
________________________________________*/	

#header {
	height: 180px;
}
	
h1 {
	width: 612px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	line-height: 1.6em;
	letter-spacing: normal;
	font-weight: bold;
	margin: -3px .3em 0 0;
	padding: .8em 0 0 0;
	border-bottom: .6em solid #000;
	text-transform: uppercase;
	}
	
.cf_wrapper h3 {
	color: #900;
	}

div#barWrap1, div#barWrap2, div#barWrap3, div#barWrap4 {
	float:left;
	display: inline;
	/*width: 612px;*/
	height: 25px;
	margin: 0 0 6px 0;
	_margin-bottom: -6px;
	padding: 0;
	}
		
ul#tabBar1, ul#tabBar2, ul#tabBar3, ul#tabBar4 { 
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000;
	font-size:1.2em;
	text-align: center; 
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
ul#tabBar1 li, ul#tabBar2 li, ul#tabBar3 li, ul#tabBar4 li { 
	float:left;
	background:#ddd;
	padding: 6px 0px 3px 0px;
	/*padding: 6px 10px 3px 10px;*/
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	width: 152px;
	height: 15px !important;
	overflow: hidden !important;
	text-decoration:none;
	}
	
	
	ul#tabBar1 li.cur, ul#tabBar2 li.cur, ul#tabBar3 li.cur, ul#tabBar4 li.cur { 
	margin: 0;
	padding: 5px 0px 16px 0px; 
	border: none;
	color: #fff;
	text-decoration: none;
	overflow: hidden !important;
	/*width:152px;*/
	}
	
	ul#tabBar1 li.cur em, ul#tabBar2 li.cur em, ul#tabBar3 li.cur em, ul#tabBar4 li.cur em {
  display:block; 
  overflow:hidden; 
  border:6px solid #04a; 
  width:0px;
  border-color:#990000 #DDDDDD; 
  border-width:7px 7px 0 7px !important; 
  margin:0 auto;
  }
  
  
ul#tabBar1 li.cur a, ul#tabBar2 li.cur a, ul#tabBar3 li.cur a, ul#tabBar4 li.cur a {
	background:#990000;
	color: #fff;
	text-decoration:none;
	}
	
ul#tabBar1 li.last, ul#tabBar2 li.last, ul#tabBar3 li.last, ul#tabBar4 li.last { 
	float:left;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	/*width: 132px;*/
	}
	
ul#tabBar4 li.last { 
	float:left;
	border-right:1px solid #ddd;
	border-bottom:none;
	/*width: 132px;*/
	}
	
ul#tabBar1 li a, ul#tabBar2 li a, ul#tabBar3 li a, ul#tabBar4 li a {
	text-decoration:none;
	color: #000;
	}
	

ul#tabBar1 li a:hover, ul#tabBar2 li a:hover, ul#tabBar3 li a:hover, ul#tabBar4 li a:hover { 
	color: #900;
	text-decoration: none;
	}

div.cf_wrapper {
	width: 612px;
	height: 400px;
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #fff;
	}

div.cf_element {
	width: 612px;
	margin: 0;
	padding: 0;
	}

	ul#tabBar1 li.cur div.colorOn, ul#tabBar2 li.cur div.colorOn, ul#tabBar3 li.cur div.colorOn, ul#tabBar4 li.cur div.colorOn {
	width:152px; 
	margin: -5px 0 0 0;
	padding:6px 0px 9px 0px;
	_padding:6px 0px 10px 0px;
	background:#990000;
	}
	
	/* Today's Features, 2 styles only */

.todaysFeature1, .todaysFeature2  {
	width: 612px;
	height: 347px;
	margin: 0 0 1em 0;
	padding: 0;
	background: #ddd;
	}
	

.todaysFeature1 h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 2.7em;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
	}
	
.todaysFeature1 h3 a, .subtitle a, .featureText a,  {
	text-decoration: none;
	}
	
.todaysFeature1 h3 a:hover {
	text-decoration: none;
	}
	
.todaysFeature1 h3 a:visited {
	color: #990000;
	}

.todaysFeature1 .subtitle {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.7em;
	font-weight: normal;
	line-height: 1.1em;
	color: #000;
	margin: .9em 1em .7em 0;
	}
	
.todaysFeature1 .featureText {
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 2em 0 1.2em 0;
	padding: 0 0 0 0;
	}
	
/* Don't know why, caption was a bear to get consistent across
	browsers. Regular selectors target FF, Safari...underscore
	targets IE6, child '>' targets IE7 */
	
.todaysFeature1 .photo {
	clear: both;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
	color: #000;
	margin: 0 0 0 1em;
	_margin-top: -10px;
	padding: 2px 0 0 0;
	_padding-top: 2px;
	}
	
.todaysFeature1 > p.photo  {
	clear: both;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
	color: #000;
	margin: -10px 0 0 1em;
	padding: -10px 0 0 0;
	}
	
.todaysFeature2 .photo {
	float: left;
	position: relative;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
	color: #000;
	margin: 0;
	_margin-top: -10px;
	padding: 3px 0 3px 0;
	}
	
.todaysFeature1 img {
	float: left;
	margin: .5em 1em 0 0;
	padding: 0 0 0 1em;
	}
	
.todaysFeature2 img {
	float: left;
	margin: .5em 0 0 0;
	_margin-bottom: 13px;
	padding: 0;
	}
	
/* End, CSS for rotator
________________________________________
________________________________________
________________________________________
________________________________________*/

/* Franchises group */

#franchisesGroup {
	width: 612px;
	margin: 0;
	padding: 0;
	}
	
#franchisesGroup img {
	margin: 0;
	padding: 0;
	float: left;
	}

#franchisesGroup .fgleft h2, #franchisesGroup .fgright h2 {
	float: right;
	width: 150px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.7em;
	color: #000;
	margin: 0 0 .4em 0;
	padding: 0 .1em 0 0;
	border: none;
	line-height: 1em;
	}

#franchisesGroup h2.noStyle {
	text-transform: none;
}

#franchisesGroup h3 {
	float: right;
	width: 150px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.4em;
	line-height: 1.2em;
	color: #000;
	font-weight: bold;
	margin: 0;
	padding: 0 .2em 0 0;
	}
	
.fgleft {
	width: 300px;
	float:left;
	margin: 0 0 0 0;
	padding: 0;
	}
	
.fgright {
	width: 300px;
	float: right;
	margin: 0;
	padding: 0;
	}
	
.fgleft p, .fgright p {
	clear: both;
	font-family: Verdana, Arial, sans-serif;
	color: #000;
	font-size: 1.1em;
	margin: 0 0 1em 0;
	padding: .5em .1em 0 0;
	}
	
	
/* 
End middle feature group
-----------------------*/

/*
Multimedia Specials
------------------*/

#multiMedia {
	font-family: Verdana, Arial, sans-serif;
	color: #fff;
	width: 592px;
	margin: 0 0 15px 0;
	padding: 10px;
	background: #000;
	}
	
#multiMedia h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	background: #fff;
	color: #000;
	letter-spacing: normal;
	font-weight: bold;
	margin: -10px -10px 0 -10px;
	padding-bottom: .3em;
	}
	
#multiMedia h3 {
	float: left;
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	margin: 0;
	padding: 0;
	}
	
#multiMedia h3 a {
	color: #fff;
	text-decoration: none;
	}

#multiMedia a:hover {
	color: #fff;
	text-decoration: underline;
	}
	
#multiMedia a:visited {
	color: #fff;
	}

	
#videoWindow {
	float: left;
	width: 300px;
	background: #000;
	margin: 0;
	padding: 0;
	}

#videoWindow img {
	float: left;
	margin: 0;
	padding: 0;
	}

#videoChoices {
	float: left;
	width: 278px;
	margin: 0;
	padding: 0 0 0 12px;
	}

#videoChoices img {
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
	}


.whiteline {
	margin: 0 0 35px 0;
	padding: 0;
	border-bottom: 1px solid #fff;
	height: 67px;
	}
.whiteline.last {
	margin-bottom: 0;
	}
	
p#MultimediaTitle {
	float: left;
	}

#videoFooter {
	margin: 0;
	padding: 0;
	clear: both;
	}
#videoFooter p {
	font-size: 1.2em;
	margin-top: 18px;
	}
p.more {
	text-transform: uppercase;
	float: right;
	margin: 0;
	padding: 0 15px 0 0;
	background-image: url("http://assets.aarp.org/aarp.org_/bulletin/images/global/icons/arrow_white.gif");
	background-repeat: no-repeat;
	background-position: right 70%;
	}

p.more a {
	text-decoration: none;
	color: #fff;
	margin: 0;
	padding: 0;
	}
	
p.more a:hover {
	text-decoration: underline;
	}

p.more a:visited {
	color: #fff;
	}
	

.whiteline p {
	color: #fff;
	margin: 0;
	padding: 0 0 10px 0;
	}

.length {
	text-align: right;
	}

#videoChoices .more {
	float: right;
	font-size: 1.2em;
	color: #fff;
	margin: 0;
	padding: 8px 0 0 0px;
	}

/*
end multimedia section
----------------------*/




/*
onThisDay section
------------------*/
#onThisDay {
	width: 612px;
	margin: 0;
	padding: 0;
	}
	
#onThisDay img {
	float: left;
	margin: 0 1em 0 0;
	padding: 0;
	}
	
#onThisDay .date {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.8em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	}
	
#onThisDay h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.8em;
	font-weight: bold;
	line-height: 1em;
	padding: .5em 0 0 0;
	}
	
.onThisDayText {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	color: #333;
	margin: 1em 1em 0 0;
	padding: 0;
	}
	
#onThisDay .photo {
	float: left;
	display: block;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.1em;
	color: #333;
	margin: .5em 0 0 0;
	padding: 0;
	}

/*
end end timeline section
-----------------------*/


/*
daily amusements
------------------*/
	
#amusements {
	width: 612px;
	margin: 0;
	padding: 0;
	}
	
#cartoon {
	float: left;
	width: 300px;
	margin: 1em 12px 0 0;
	padding: 0;
}

#brain {
	float: right;
	width: 300px;
	margin: 0;
	padding: 1em 0 0 0;
	}
/*
end daily amusements
----------------------*/


/*
News Makers
----------------------------  */
#newsmakers {
	width: 300px;
	margin: 0;
	padding: 0 0 1.5em 0;
	}

#newsmakers img {
	float: left;
	width: 82px;
	}

#newsmakers h3 {
	float: left;
	display: inline;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	margin: 0;
	padding: 0 0 .3em .4em;
	}
	
#newsmakers p {
	float: left;
	width: 210px;
	font-family:  Verdana, Arial, sans-serif;
	font-size: 1.1em;
	margin: 0 0 .3em .5em;
	padding: 0;
	}
	
#newsmakers .newsSource {
	 float: left;
	 width: 210px;
	font-size: 1.1em;
}
	
/* end news makers */



#sideAd {
	margin: 0;
	padding: 1.2em 0 1em 0;
	}
/* end right column ad space */

div#poll {
	margin: 2em 0 2em 0;
}

.pollmonkey b {
	font-weight: normal;
}

.pollmonkey #pollGraphic {
	float: left;
	width: 50px;
	height: 71px;
	padding: 0 10px;
}

/*
Amusements
-----------------------*/
#amusements img {
	border: none;
	}
	
/*********************************************

	BEGIN: Cartoon of the Day
	added by Yonas Hassen (18 Dec 2007)
	last modified by jhertz & yonas (04 Jan 2008)
	CSS tabs mod 27 Feb 2008 mjenkins

*********************************************/

#cartoonContainer {
	width:300px;
	margin: 0;
	padding: 0;
	margin-top: -12px;
	_margin-top: -11px;
	}
	
div#cartoonNav {
	float:left;
	margin: 0;
	padding: 0;
	background:#fff;
}
	
ul#tabBar { 
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 10px;
	list-style: none;
}

ul#tabBar li {
	float:left;
	margin: 0;
	padding: 0;
	}
	
ul#tabBar li div {
	background:#fff;
	padding: 4px 6px;
	border-left:1px solid #999;
	border-bottom:1px solid #999;
	width: 62px;
	text-align: center;
}

ul#tabBar li div#fourthTab {
	border-right:1px solid #999;
	padding: 4px 6px;
}
	
ul#tabBar li div a { color:#333;text-decoration:none;display:block; }
	
ul#tabBar li div.activeLink a, ul#tabBar li div a:active  { 
	color: #fff;
}
	
ul#tabBar li div.activeLink { 
	background:#990000;
	color: #fff;
	padding: 4px 6px 5px 6px;
	width: 62px;
	border: none;
}
	
ul#tabBar li div a:visited { color: inherit; }
	
ul#tabBar li div a:hover { 
	color: #900;
	border-bottom: 1px solid #900;
	border: none;
	text-decoration: none;
}
	
ul#tabBar li div.activeLink a:hover { 
	color: #fff;
}
	

div#cartoonContainer {
	width: 300px;
}

ul#cartoonNav {
	text-align: center;
	margin: 5px 0;
}

ul#cartoonNav li div {
	display: inline;
	margin: 0 15px;
	padding: 5px;
}

.passiveLink {
	background-color: #fff;
}

.activeArrow {
  display:block; 
  overflow:hidden; 
  border:6px solid #04a; 
  width:0px;
  border-color:#990000 #FFF; 
  border-width:5px 5px 0 5px !important; 
  margin-top:0px;
  margin-left:32px;
  }
  
  .passiveArrow {
  display:block; 
  overflow:hidden; 
  border:6px solid #04a; 
  width:0px;
  border-color:#FFF #FFF; 
  border-width:5px 5px 0 5px !important; 
  margin-top:0px;
  margin-left:32px;
  }
  


/*********************************************
	END: Cartoon of the Day
*********************************************/


/*********************************************

	BEGIN: Quote component
	added by Yonas Hassen (19 Dec 2007)
	
*********************************************/

#quoteWrapper {
	
}

#quoteComp p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 2.5em;
	margin: 0;
	line-height: normal !important;
}

#quoteComp p#caption {
	font-size: 1.75em;
	margin: 25px 0 0 18px;
}

/*********************************************
	END: Quote component
*********************************************/





/* Scroll Bar Master Styling Starts Here */
/* Questions? judy@riotsystems.com (licensee) and  
http://www.hesido.com/web.php?page=customscrollbar */

.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
height:128px;
margin-top:16px;
width:16px;
}
.vscrollerbar {
background-image: url('http://assets.aarp.org/aarp.org_/bulletin/images/home/slider_vert.png');
width: 16px;
height: 68px !important;
background-image: url('http://assets.aarp.org/aarp.org_/bulletin/images/home/slider_vert.png');
}

* html .vscrollerbar {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='http://assets.aarp.org/aarp.org_/bulletin/images/home/slider_vert.png');
background-image: none;
}

.hscrollerbar {
background-image: url('http://assets.aarp.org/aarp.org_/bulletin/images/home/slider_horiz.png');
width: 68px  !important;
height: 16px !important;
background-image: url('http://assets.aarp.org/aarp.org_/bulletin/images/home/slider_horiz.png');
}

* html .hscrollerbar {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='http://assets.aarp.org/aarp.org_/bulletin/images/home/slider_horiz.png');
background-image: none;
}

.hscrollerbase {
background-image: url('http://assets.aarp.org/aarp.org_/bulletin/images/home/background_horiz.png');
height: 16px;
width: 612px !important;
top: 0 !important;
}

.vscrollerbase {
background-image: url('http://assets.aarp.org/aarp.org_/bulletin/images/home/background_vert.png');
width: 16px;
height: 144px;
}

.hscrollerbar {height: 14px; background-color: #84ADD6;}

.hscrollerbar {
padding-right: 20px;
padding-left: 21px;
z-index: 2;
}

.vscrollerbar {
padding: 0px;
z-index: 2;
}

/* Scroll Bar Master Styling Ends Here */


/* Code needed for Franchise scroller */


#franchiseScroller {
	width: 612px;
	height: 160px;
	overflow: auto;
	position: relative;
	background-color: #EBEBEB;
	margin: 0 auto;
	padding: 12px 0 0 0;
	}

/* ======================


NOTE: TO CHANGE NUMBER OF IMAGES:
	the width of the scroller should create a window with no white space on
	the leftmost image. Width is calculated by multiplying the number of images 
	by 144 pixel width plus number of images minus 1 times 12px (the last image has no right margin).
	Minimum is 5 images! So:
	5 images width:768px;
	6 images width:924px;
	7 images width:1092;
	8 images width:1236px;
	If changing the number of images ALSO change the right margin for highest
	numbered (rightmost) thumb div to 0 */
	
.fixedwidth {
	width: 1236px;
	height: auto;
	position: relative;
	padding: 1px;
	color: #996633;
	}
	
/* This selector area should include all but the last thumb DIV */

#thumb1, #thumb2, #thumb3, #thumb4, #thumb5, #thumb6, #thumb7 {
	width:144px;
	height: 108px;
	float:left;
	margin: 0 12px 0 0;
	padding: 0;
	}
	
/* Last thumb DIV should be defined here, i.e. 5 images, thumb5 goes here,
	6 images, thumb6 goes here...*/
	
#thumb8 {
	width:144px;
	height: 108px;
	float:left; 
	margin:0;
	padding: 0;
	}
	
/* End change images edit

=======================*/
	
#thumb1 img, #thumb2 img, #thumb3 img, #thumb4 img, #thumb5 img, #thumb6 img, #thumb7 img, #thumb8 img {
	border: none;
	margin: 0;
	padding: 0;
	}

/* new edits */
#franchiseScroller h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000000;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0;
	}
	
/*  end: franchise scroller */

/* current issue box */
	#currentIssue {
		padding: 0;
		margin-top: 5px;
		width: 300px;
		height: 76px;
	}
	#currentIssue p {
		padding: 22px 10px 3px 10px;
		margin-left: 157px;
		font-size: 12px;
		font-weight: bold;
	}
	#currentIssue p#issueView {
		padding-top: 0;
	}
	#currentIssue a#coverImgHref {
		float: left;
		display: block;
		width: 165px;
		height: 76px;
	}
/*  end: current issue box */