/*
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;}

/*
Page Structure & Globals
------------------------  */
html {
	height: 100%;
	margin: 0px;
	padding: 0px;
} 

body {
	background-image: url(http://assets.aarp.org/aarp.org_/build/topics/images/backgrounds/bg_global.gif);
	background-repeat: repeat-y;
	background-position: center;
	background-color: #c8c8c8;
	color: #333333;
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	height: 100%;
	line-height: 18px;
	margin: 0px 15px;
	text-align: center;
}

a, a:link {
	color: #0570AD;
	text-decoration: none;
}

a:hover {
	color: #0570AD;
	text-decoration: underline;
}

a:active {
	color: #96DCFA;
}

a:visited {
	color: #5440B6;
}

#pageContainer {
	background: #FFFFFF;
	border-bottom: 15px solid #FFFFFF;
	margin: 0px auto;
	padding: 0px;
	position: relative;
	z-index: 2;
	text-align: left;
	width: 964px !important;
}

h1 {
	color: #004AAC;
	font-family: 'Trebuchet MS', 'Lucida Grande', Lucida, Helvetica, Verdana, Arial, sans-serif;
	font-weight: bold;
	font-size: 20px;
	line-height: 22px;
	margin: 0px 0px 15px 0px;
}

h2 {
	color: #78766F;
	margin: 30px 0px 8px 0px;
	text-transform: uppercase;
	font-family: 'Trebuchet MS', 'Lucida Grande', Lucida, Helvetica, Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
}

#bodyContent {
	width: 924px;
	margin: 0px 20px;
}

#bodyContent p {
	margin: 0px 10px 1.0em 0px;
}

.smallText {
	font-size: 11px;
}

.tinyText {
	font-size: 10px;
}

div.dividerGeneric {
	position: relative;
	height: 1px;
	line-height: 1px;
	border-top: 1px #cccccc solid;
	margin-top: 9px;
	margin-bottom: 20px;
	clear: both;
}


/*
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.noLeft { margin-left: 0px !important; }
div.gridCol.noMargin { margin: 0px !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; }

/*
added [2007-11-14]

a 'group' column should be used to group together two or more gridCols. doing so
would allow the designer to insert rows that span multiple columns while keeping
the overall grid structure. for instance

--------------- ----
-xxxx-xxxxxxxxx ----
-xxxx-xxxxxxxxx ----
-yyyyyyyyyyyyyy ----
-xxxx-xxxxxxxxx ----
-xxxx-xxxxxxxxx ----
--------------- ----

this shows a layout of, say, 8x4. within the 8-column, we have a 3x5-column layout 
mixed in with an 8-column layout.

a gridCol group should occupy the space equalling all its sub-columns plus any margin
(but should not itself use any margins), and was envisioned to be used as 'edge' columns 
(i.e. left and right). therefore, the widths are the widths above plus 20px to account 
for either left or right margin.

because of IE's stupidity, i had to revert to gridColGroup%Size%, since it didn't like 
definitions for gridCol.group.eight but has no problems with gridColGroupEight, etc.
*/

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; }

/*
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 {
	position: absolute;
	top: 170px;
	left: 10px;
	z-index: 1;
	width: 354px;
	height: auto !important;
	overflow: auto !important;
	background: #FFFFFF url(http://assets.aarp.org/internal/tech/scrum3/loginOverlay_bg.gif) no-repeat;	
}

#emailOverlay form, #emailOverlay table,
.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, .emailOverlay table {
	margin-left: 10px;
	margin-bottom: 20px;
}

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

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

#emailOverlay td.inputs, .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;
}


/*
Photo Upload Form
---------------------------------  */

#requiredHeading {
margin-bottom: 15px;
text-align: right;
}

span.required {
	color: #EE3224;
	font-family: Verdana;
	font-size: 22px;
	vertical-align: middle;
}

#uploadPhotosDetailDiv {
margin-left: 40px;
position: relative;
}

#uploadPhotosDetailDiv hr {
padding-bottom: 20px;
border: none;
height: 0px;
margin-bottom: -1px;
}

div.formRow {
clear: both;
padding-left: 20px;
}

div.formRow span.formLabel {
float: left;
text-align: right;
height: 20px;
padding-right: 10px;
width: 140px;
}

div.formRow span.formField {
float: left;
margin-bottom: 10px;
text-align: left;
width: 210px;
}

div.uploadPhotoDetailForm {
float: left;
position: relative;
width: 460px;
}

div.uploadPhotoDetailForm textarea, div.uploadPhotoDetailForm input.inputText, div.uploadPhotoDetailForm select {
width: 210px;
}

div.uploadPhotoDetailPhoto {
float: left;
position: relative;
width: 240px;
}


/*
Specific to Pages & Functionality
---------------------------------  */

.fieldNote {
	margin: 0px;
	padding-left: 15px;
	font-family: Georgia,Times,serif;
	font-size: 11px;
}

input {
	padding: 0px;
	margin: 0px;
}

input.action {
	margin: 15px 0px 0px 190px;
	border: none;
}

.cancelButton {
	border: none;
}

#breadcrumb {
	font-family: Arial,"MS Trebuchet",sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin-top: 20px;
}

#breadcrumb a {
	text-decoration: none;
}



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

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

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

.noMargin { margin: 0px !important; }

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

.clearMe12 { clear: both; height: 12px; }

.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*/
 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;
}

/**
 * CSS support (added by Jim [2007-06-14])
*/
span.clear {
  display:block;
  clear:both;
  height:1px;
  line-height:0px;
  font-size:0px;
  margin-bottom:-1px;
}

/* video thumbnail styles, added by Brian P. */
a.videoThumbnail {
	position: relative;
	display: block;
}

img.videoIcon {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	-moz-opacity: .40;
	opacity: .40;
	filter: alpha(opacity=40);
}

/*
%%%%%%%%%%
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.

NEW (2007-12-13): added styles for wide ads.
*/

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

div.ad.wide {
	padding: 5px;
	background: #ccc !important;
}

div.ad-caption {
	clear: both;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	margin: 0px 0px 9px 0px !important;
	letter-spacing: 1px;
	font-size: 8pt;
	text-align: center !important;
	background: #ccc !important;
}

div.ad-caption.wide {
	background: #fff !important;
	border-bottom: 0px solid #ccc;
	margin: 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;
}

/*
added by kaiser shahid [2007-10-12]
*/

div.memberBenefits {
	margin-top: 15px;
}

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

STYLES FOR SEARCH RESULTS AND
ARCHIVES

added by Yonas Hassen (14 August 2007)

last modified by Yonas Hassen: (08 October 2007)

last modified by Kaiser Shahid: 2007-11-12
> TODO: remove #archivesContainer styling (for main div)
> since we're moving to the gridCol system of sizing columns.
> 
> added general .searchContainer selector for inner things
>
> TODO: move to .searchContainer for styles that are shared between
> the two searches.

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

#searchContainer, #archivesContainer {
	width: 612px;
	float: left;
	margin: 0;
	padding: 0 0 0 20px;
}

#searchContainer h1, .searchContainer h1, #searchContainer h3, .searchContainer h3, #searchContainer p, .searchContainer p, #searchContainer td, .searchContainer td, #archivesContainer h1, #archivesContainer h3, #archivesContainer p, #archivesContainer td{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333;
}

#searchContainer h1, .searchContainer h1 {
	font-weight: bold;
	font-size: 23px;
	margin: 10px 0;
}

#archivesContainer h1 {
	font-weight: 100;
	font-size: 23px;
	margin: 10px 0;
}

#searchResultsListing {
	font-size: 1.2em;
}

#searchResultsListing h2, .searchContainer h2 {
	font-size: 1.8em;
	margin-bottom: -10px;
	padding-bottom: 0;
	line-height: 1em; /* added by kaiser [2007-11-13] for bug D-02178 */
}

#searchContainer h3, .searchContainer h3,
#searchContainer p, .searchContainer p, 
#searchContainer td, .searchContainer td, 
#archivesContainer h3, #archivesContainer p, #archivesContainer td {
	font-size: 12px;
	margin: 0;
	padding: 0;
}

#searchContainer p#helpMe, .searchContainer p#helpMe {
	float: right;
}

#searchContainer table#searchField, .searchContainer table#searchField {
	margin-top: 10px;
}

#searchContainer td.pad10, .searchContainer td.pad10, #archivesContainer td.pad10 {
	padding-left: 10px;
}

#searchContainer td.pad25, .searchContainer td.pad25, #archivesContainer td.pad25 {
	padding-left: 25px;
}

#searchContainer div.odd, .searchContainer div.odd, #searchContainer div.even, .searchContainer div.even, #archivesContainer div.odd, #archivesContainer div.even {
	padding: 10px;
}

#searchContainer div.odd, .searchContainer div.odd, #archivesContainer div.odd {
	background-color: #fff;
}

#searchContainer div.even, .searchContainer div.even, #archivesContainer div.even {
	background-color: #eaeaea;
}

#searchContainer p.bottomLine, .searchContainer p.bottomLine, #archivesContainer p.bottomLine {
	margin-top: 5px;
}

span#numOfResults, span.searchKeyword, span#numOfResults, span.searchKeyword {
	font-weight: bold;
}

#searchContainer form, .searchContainer form, #archivesContainer form {
	margin: 10px 0 0 0;
	padding: 0;
}

#searchContainer a, .searchContainer a, #archivesContainer a {
	color: #0066cc;
	text-decoration: none;
}

#searchContainer a:hover, .searchContainer a:hover, #archivesContainer a:hover {
	text-decoration: underline;
}

#searchContainer a:visited, .searchContainer a:visited, #archivesContainer a:visited {
	color: #990099;
}

#searchContainer div#pagination, div.searchContainer div#pagination, #archivesContainer div.pagination,
div.searchContainer div.pagination {
	background-color: #eaeaea;
	padding: 5px;
	margin: 18px 0px 0px 0px;
}

#searchContainer div#pagination td, div.searchContainer div#pagination td, #archivesContainer div.pagination td,
div.searchContainer div.pagination td {
	font-weight: bold;
	width: 213px;
}

div.searchContainer div.pagination.bottom {
	margin-top: 0px;
}

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

END: STYLES FOR SEARCH RESULTS

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