/* from assets.aarp.org/aarp.org_/css/global.css */
/*
SYNCHRONIZE global*.css CHANGES WITH THIS! look at dotorg's
source to find the most recent global.css--eventually, we should
be committing final changes back to global.css instead of
using the intermediary files.
*/

/*
Yahoo! UI Library: Reset CSS
*/

/* %%%%%%%%%%
Modification by Kaiser [2007-12-07]
un-resetting bold, italic, etc. since they're causing unwanted/unneeded style problems
%%%%%%%%%% */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
/* address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} */
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym {border:0;}

/*
MASTER GRID STYLES
added by kaiser shahid [2007-10-26]

Moving forward, maybe we can use these instead of combinations of leftandcenter, leftcolumn, etc.
By default, all gridCol have a left margin of 12px. using left or right adds the edge margins 
(28px in theory, 20px in reality).
*/

div.gridCol {
	width: 66px;
	margin-left: 12px !important;
	margin-bottom: 12px !important;
	float: left !important;
	}


div.gridCol.left { margin-left: 20px !important; _margin-left: 10px !important; }
div.gridCol.right { margin-right: 20px !important; _margin-right: 10px !important; }

div.gridCol.two { width: 144px !important; }
div.gridCol.three { width: 222px !important; }
div.gridCol.four { width: 300px !important; }
div.gridCol.five { width: 378px !important; }
div.gridCol.six { width: 456px !important; }
div.gridCol.seven { width: 534px !important; }
div.gridCol.eight { width: 612px !important; }
div.gridCol.nine { width: 690px !important; }
div.gridCol.ten { width: 768px !important; }

/* Group definitions */
div.gridColGroupTwo { width: 164px !important; margin: 0px !important; float: left !important; }
div.gridColGroupThree { width: 242px !important; margin: 0px !important; float: left !important; }
div.gridColGroupFour { width: 320px !important; margin: 0px !important; float: left !important; }
div.gridColGroupFive { width: 398px !important; margin: 0px !important; float: left !important; }
div.gridColGroupSix { width: 476px !important; margin: 0px !important; float: left !important; }
div.gridColGroupSeven { width: 554px !important; margin: 0px !important; float: left !important; }
div.gridColGroupEight { width: 632px !important; margin: 0px !important; float: left !important; }
div.gridColGroupNine { width: 710px !important; margin: 0px !important; float: left !important; }
div.gridColGroupTen { width: 788px !important; margin: 0px !important; float: left !important; }


/*
Page Container
--------------  */
	
#pageContainer {
	background: #FFFFFF;
	border-bottom: 15px solid #FFFFFF;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	text-align: left;
	width: 964px !important;
}


/*
Floating
-------------------  */

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

/* end: Floating */

/*
Margins
-------------------  */

.marginBottom10 {
	margin-bottom: 10px !important;
}

.negTop10 {
	margin-top: -10px !important;
}

/*
Email Overlay
-------------  */

#emailOverlay {
	position: absolute;
	top: 170px;
	left: 10px;
	z-index: 1;
	width: 354px;
	height: 328px;
	overflow: hidden;
	background: #FFFFFF url("http://assets.aarp.org/internal/tech/scrum3/loginOverlay_bg.gif") no-repeat;
}

#emailOverlay form, #emailOverlay table {
	padding: 0px;
	margin: 0px;
}

h1#emailTitle {
	background-image: url("http://assets.aarp.org/internal/tech/scrum3/PleaseSignIn.gif");
	background-repeat: no-repeat;
	text-indent: -9999px;
	height: 35px;
	margin-left: 15px;
	margin-top: 30px;
}

#emailOverlay table {
	margin-left: 10px;
	margin-bottom: 20px;
}

#emailOverlay td {
	font-size: 12px;
	padding: 4px;
}

#emailOverlay td.labels {
	width: 100px;
}

#emailOverlay td.inputs {
	width: 125px;
}

#emailOverlaySubmit {
	margin: 10px 0px;
}

#emailOverlayWait {
	position: absolute;
	top: 220px;
	left: 50px;
	z-index: 2;
	width: 155px;
	height: 115px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #999;
	padding-top: 60px;
	padding-left: 95px;
	-moz-opacity:.90;
	opacity:.90;
	filter:alpha(opacity=90);
}

#emailOverlayValidationError {
	margin-left: 20px;
}

#emailOverlayAuthor td.note {
	padding-top: 15px;
}

.dialogDisclaimer {
	font-size: 11px;
	color: #5c5449;
	background-color: #ffffff;
	padding: 0 10px 10px 10px;
	line-height: normal;
	width: 364px;
}

/*
%%%%%%%%%%
Ad wrappers
%%%%%%%%%%
added by kaiser shahid [2007-09-20]

wrap around ads. right now, there's only a bordered box or no box. as new requirements are needed,
add ad stylings here.
*/

div.ad {
	margin: 9px 0px !important;
	text-align: center !important;
}

div.ad.default {
	padding: 5px;
	border: 1px solid #999;
}

div.ad div {
	clear: both;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	letter-spacing: 1px;
	text-align: center;
	background: #ccc;
}

div.ad.default div {
	background: #fff !important;
	padding-bottom: 0px !important;
}

/*
%%%%%%%%%%
General Status
%%%%%%%%%%
added by kaiser shahid [2007-10-10]

general status box.
*/

#generalStatus, .generalStatus {
	margin-bottom: 9px;
	font-size: 10pt;
	font-weight: bold;
	padding: 5px;
	border: 2px solid #999;
}

/* added 2007-10-17] */

#commentResponse.generalStatus {
	margin-top: 9px;
}

/*
Glue and Shims
---------------  */

.noTopMargin {
	margin-top: 0px !important;
}

.noBottomMargin {
	margin-bottom: 0px !important;
}

div.clearer {
	height: 1px;
	clear: both;
}

.clearMe { clear: both; line-height: 0px; }

.clearMe5 { clear: both; height: 5px; }

/*add JHZ for bulletin */
.clearMe10 { clear: both; height: 10px; }

.clearMe25 { clear: both; height: 25px; }

.clearMe50 { clear: both; height: 50px; }

.clearMe75 { clear: both; height: 75px; }

.clearMe100 { clear: both; height: 100px; }

.centered {
	text-align: center;
}

.noBorder {
	border: none;
}

.extraSpaceAbove {
	padding-top: 20px;
}

.extraSpaceBelow {
	padding-bottom: 20px;
}

.systemErrors {
	color: #F40E0E;
}

p.systemErrors {
	font-size: 14px;
	margin: 20px 0px;
}

img.button, .button, input.button {
	border: none;
}


/*pagination*/
/* TODO: these should probably get moved to css/search.css */
 div.pageNavigation {
float:right;
border:0px;
padding:0px;
margin:0px;
}

a.pageNavigation {
display:inline;
font-size:13px;
font-weight:bold;    
border:0px;
padding:0px;
margin:0px;
}

ul.pageNavigation {
display:inline;
border:0px;
padding:0px;
margin:0px;
}

ul.pageNavigation li {
display:inline;
padding:0px;
margin:0px;
border:0px;
}

a.paginationLink:link {
border: 1px solid #0066CB;
font-size:13px;
font-weight:bold;
text-decoration:none;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0px;
margin:0px;
line-height:1.5em;
}

div.pager {
	font-size: 11px;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

table.friendRequests a.thumbnailImgLink {
display:block;
}

.friendRequestsAll {
margin-left:5px;
float:left;
}

input.friendRequestSubmit {
margin-left:5px;
float:left;
}

/*
Button Sprites
------------  */
.btnGutter, .tabGutter {
	width: 5px;
	float: left;
	position: relative;
}

a.btnSmallGray, a.btnMediumGray, a.btnLargeGray, 
a.btnSmallBlue, a.btnMediumBlue, a.btnLargeBlue, 
a.btnSmallRed, a.btnMediumRed, a.btnLargeRed {
	display: block;
  font-family: 'Trebuchet MS';
  font-weight: bold;
  text-transform: uppercase;
  color: #fff !important;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
a.btnSmallBlue:hover, a.btnMediumBlue:hover, a.btnLargeBlue:hover, 
a.btnSmallRed:hover, a.btnMediumRed:hover, a.btnLargeRed:hover {
  color: #fff !important;
}
a.btnSmallGray, a.btnMediumGray, a.btnLargeGray {
  color: #3e76ad !important;
}
a.btnSmallGray:hover, a.btnMediumGray:hover, a.btnLargeGray:hover {
  color: #247fd8 !important;
}
a.btnSmallGray, a.btnSmallBlue, a.btnSmallRed {
  font-size: 11px !important;
}
a.btnMediumGray, a.btnMediumBlue, a.btnMediumRed {
  font-size: 12px !important;
}
a.btnLargeGray, a.btnLargeBlue, a.btnLargeRed {
  font-size: 19px !important;
}
a.btnSmallGray span, a.btnMediumGray span, a.btnLargeGray span, 
a.btnSmallBlue span, a.btnMediumBlue span, a.btnLargeBlue span, 
a.btnSmallRed span, a.btnMediumRed span, a.btnLargeRed span {
	background-image: url(http://assets.aarp.org/aarp.org_/images/buttons/btnSprite.gif);
	background-repeat: no-repeat;
  float: left;
	display: block;
}
a.btnSmallGray span.left, a.btnMediumGray span.left, a.btnLargeGray span.left, 
a.btnSmallBlue span.left, a.btnMediumBlue span.left, a.btnLargeBlue span.left, 
a.btnSmallRed span.left, a.btnMediumRed span.left, a.btnLargeRed span.left,
a.btnSmallGray span.right, a.btnMediumGray span.right, a.btnLargeGray span.right, 
a.btnSmallBlue span.right, a.btnMediumBlue span.right, a.btnLargeBlue span.right, 
a.btnSmallRed span.right, a.btnMediumRed span.right, a.btnLargeRed span.right {
	width: 9px;
}
a.btnSmallGray span, a.btnSmallBlue span, a.btnSmallRed span {
	height: 20px;
	line-height: 20px;
}
a.btnMediumGray span, a.btnMediumBlue span, a.btnMediumRed span {
	height: 24px;
	line-height: 24px;
}
a.btnLargeGray span, a.btnLargeBlue span, a.btnLargeRed span {
	height: 32px;
	line-height: 32px;
}

a.btnSmallGray span.left { background-position: left 0; }
a.btnSmallGray span.right { background-position: right 0; }
a.btnSmallGray span.middle { background-position: -10px 0; }
a.btnSmallGray:hover span.left { background-position: left -20px; }
a.btnSmallGray:hover span.right { background-position: right -20px; }
a.btnSmallGray:hover span.middle { background-position: -10px -20px; }
.btnSmallGray.inactive span.left { background-position: left -40px; }
.btnSmallGray.inactive span.right { background-position: right -40px; }
.btnSmallGray.inactive span.middle { background-position: -10px -40px; }

a.btnMediumGray span.left { background-position: left -180px; }
a.btnMediumGray span.right { background-position: right -180px; }
a.btnMediumGray span.middle { background-position: -10px -180px; }
a.btnMediumGray:hover span.left { background-position: left -204px; }
a.btnMediumGray:hover span.right { background-position: right -204px; }
a.btnMediumGray:hover span.middle { background-position: -10px -204px; }
.btnMediumGray.inactive span.left { background-position: left -228px; }
.btnMediumGray.inactive span.right { background-position: right -228px; }
.btnMediumGray.inactive span.middle { background-position: -10px -228px; }

a.btnLargeGray span.left { background-position: left -400px; }
a.btnLargeGray span.right { background-position: right -400px; }
a.btnLargeGray span.middle { background-position: -10px -400px; }
a.btnLargeGray:hover span.left { background-position: left -432px; }
a.btnLargeGray:hover span.right { background-position: right -432px; }
a.btnLargeGray:hover span.middle { background-position: -10px -432px; }
.btnLargeGray.inactive span.left { background-position: left -464px; }
.btnLargeGray.inactive span.right { background-position: right -464px; }
.btnLargeGray.inactive span.middle { background-position: -10px -464px; }


a.btnSmallBlue span.left { background-position: left -60px; }
a.btnSmallBlue span.right { background-position: right -60px; }
a.btnSmallBlue span.middle { background-position: -10px -60px; }
a.btnSmallBlue:hover span.left { background-position: left -80px; }
a.btnSmallBlue:hover span.right { background-position: right -80px; }
a.btnSmallBlue:hover span.middle { background-position: -10px -80px; }
.btnSmallBlue.inactive span.left { background-position: left -100px; }
.btnSmallBlue.inactive span.right { background-position: right -100px; }
.btnSmallBlue.inactive span.middle { background-position: -10px -100px; }

a.btnMediumBlue span.left { background-position: left -252px; }
a.btnMediumBlue span.right { background-position: right -252px; }
a.btnMediumBlue span.middle { background-position: -10px -252px; }
a.btnMediumBlue:hover span.left { background-position: left -276px; }
a.btnMediumBlue:hover span.right { background-position: right -276px; }
a.btnMediumBlue:hover span.middle { background-position: -10px -276px; }
.btnMediumBlue.inactive span.left { background-position: left -276px; }
.btnMediumBlue.inactive span.right { background-position: right -276px; }
.btnMediumBlue.inactive span.middle { background-position: -10px -276px; }

a.btnLargeBlue span.left { background-position: left -496px; }
a.btnLargeBlue span.right { background-position: right -496px; }
a.btnLargeBlue span.middle { background-position: -10px -496px; }
a.btnLargeBlue:hover span.left { background-position: left -528px; }
a.btnLargeBlue:hover span.right { background-position: right -528px; }
a.btnLargeBlue:hover span.middle { background-position: -10px -528px; }
.btnLargeBlue.inactive span.left { background-position: left -560px; }
.btnLargeBlue.inactive span.right { background-position: right -560px; }
.btnLargeBlue.inactive span.middle { background-position: -10px -560px; }


a.btnSmallRed span.left { background-position: left -120px; }
a.btnSmallRed span.right { background-position: right -120px; }
a.btnSmallRed span.middle { background-position: -10px -120px; }
a.btnSmallRed:hover span.left { background-position: left -140px; }
a.btnSmallRed:hover span.right { background-position: right -140px; }
a.btnSmallRed:hover span.middle { background-position: -10px -140px; }
.btnSmallRed.inactive span.left { background-position: left -160px; }
.btnSmallRed.inactive span.right { background-position: right -160px; }
.btnSmallRed.inactive span.middle { background-position: -10px -160px; }

a.btnMediumRed span.left { background-position: left -300px; }
a.btnMediumRed span.right { background-position: right -300px; }
a.btnMediumRed span.middle { background-position: -10px -300px; }
a.btnMediumRed:hover span.left { background-position: left -324px; }
a.btnMediumRed:hover span.right { background-position: right -324px; }
a.btnMediumRed:hover span.middle { background-position: -10px -324px; }
.btnMediumRed.inactive span.left { background-position: left -348px; }
.btnMediumRed.inactive span.right { background-position: right -348px; }
.btnMediumRed.inactive span.middle { background-position: -10px -348px; }

a.btnLargeRed span.left { background-position: left -592px; }
a.btnLargeRed span.right { background-position: right -592px; }
a.btnLargeRed span.middle { background-position: -10px -592px; }
a.btnLargeRed:hover span.left { background-position: left -624px; }
a.btnLargeRed:hover span.right { background-position: right -624px; }
a.btnLargeRed:hover span.middle { background-position: -10px -624px; }
.btnLargeRed.inactive span.left { background-position: left -656px; }
.btnLargeRed.inactive span.right { background-position: right -656px; }
.btnLargeRed.inactive span.middle { background-position: -10px -656px; }