/**********************************/
/***** SNAPAP GENERAL STYLING *****/
/**********************************/
.indented { padding-left:10px; padding-right:10px; }

.addClick { padding-bottom:6px; cursor:pointer; }
.addClick:hover { text-decoration:underline; }

.tinyPrint { font-size:90%; margin-bottom:-2px; padding-right:10px; }
.alignRight { text-align:right; }

/*************************/
/****** GEN WINDOWS ******/
/*************************/
.tabHeader {
	padding-top:10px;
	padding-left:20px;
	padding-right:20px;
	background:#f7f7f7;
	width:100px;
	height:30px;
	text-decoration:none;
	text-align:center;
}

.tabHighlighted { background:#eee; text-decoration:underline; }

.scrollBox { width:auto; height: 120px; overflow:auto; }

.popupScrollBox { width:auto; height: 220px; overflow:auto; }

.popupWindow {
	display:none;
	position:absolute;
	z-index:10001;
	left:580px;
	top:145px;
	border:solid 1px #bbb;
	padding-bottom: 12px;
	padding-left: 12px;
	margin-bottom: 16px;
	height:200px;
	background-color:#fff;
}

/**********************/
/***** GEN TABLES *****/
/**********************/
.dataTable { border:0px; }

.dataTable .evenRow { color:#000; background-color:#fff; border:dotted 1px #bbb; }

.dataTable .oddRow  { color:#000; border:dotted 1px #bbb; background-color:#f7f7f7; }

.headerTable { border:0px; padding-right:20px; }

.footerTable { border:0px; padding-right:20px; }

.dataTable .nameColumn      { width:35%; text-align:left; }
.dataTable .amountColumn    { width:20%; text-align:center; }
.dataTable .dateColumn      { width:30%; text-align:center; }
.dataTable .emailLinkColumn { width:15%; text-align:center; }

.headerTable .nameColumn      { width:35%; text-align:left; }
.headerTable .amountColumn    { width:20%; text-align:center; }
.headerTable .dateColumn      { width:30%; text-align:center; }
.headerTable .emailLinkColumn { width:15%; text-align:center; }

.footerTable .nameColumn      { width:35%; text-align:right; }
.footerTable .amountColumn    { width:20%; text-align:center; }
.footerTable .dateColumn      { width:30%; text-align:center; }
.footerTable .emailLinkColumn { width:15%; text-align:center; }

.labelColumn { font-weight:bold; width:10%; vertical-align:top; }
.dataColumn { width:40%; }
.currencyColumn { text-align:right; width:10%; }

.tableHeader { padding:5px; color:#000; border:dotted 1px #000; }

.tableData { padding:5px; background-color:#f7f7f7; }

.tableDataHighlight { background-color:#f6f9fe; color:#001F56; }

.tableDataSelect { cursor:pointer; background-color:#d9eaf4; color:#001F56; }

/*******************************/
/***** SNAPAP PAGE STYLING *****/
/*******************************/
.pageTitle { font-family:Georgia, "Times New Roman", Times, serif; font-size:150%; font-weight:bold; padding:10px 0 25px 0; margin:0; }

.snapapTitleBar { padding-top:20px; margin-top:10px; line-height:34px; width:auto; }

#toolbar    { float:right; }

.subtoolbar { padding-right:12px; }

.window {
	border:solid 1px #ccc;
	background:#fff;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
	margin-bottom: 16px;
	min-height:180px;
}

.windowIcon { padding-left:15px; width:25px; }

.windowTitle {
	position:relative;
	font-weight:bold;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:150%;
	text-align:left;
	padding-left:10px;
}

.windowContainer { min-height:170px; }

.windowToolbar {
	position:relative;
	float:right;
	padding-top:10px;
	padding-right:10px;
}

.label { font-weight:bold; text-align:right; }

.subCategory {
	width:auto;
	height:18px;
	text-align:right;
	padding-top:5px;
	padding-right:20px;
	font-size:105%;
	font-weight:bold;
}

.subCategoryContent{
	border:dotted 1px #bbb;
	margin-bottom:10px;
	padding:10px;
}

img.thermometer {
	height:110px;
	width:90px;
}

.thumbnail {
	padding-left:5px;
	padding-top:5px;
	width:40px;
	height:40px;
}

.thermometerContainer {
    padding-left:5px;
    padding-right:5px;
    text-align:center;
    border:solid 1px #bbb;
    width:90px;
}

.userHome {
	border:solid 1px #ccc;
	background:#fff;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
	margin-bottom: 16px;
}

.favoriteUsersName { font-size:95%; font-weight:bold; }

/*********************/
/****** PROFILE ******/
/*********************/
.profileScrollBox { width:auto; max-height:80px; overflow:auto; background:#fff; }

#profileName, #profileLocation, #profileOrganization, #profileStatement { padding-bottom:2px; }

#profileInterests { padding-bottom:20px; }

.profileLeftCol { width:175px; float:left; text-align:right; }

.profileRightCol { width:500px; float:left; text-align:left; padding-left:10px; padding-right:10px; }

img.avatarImage { height:110px; width:110px; }

/*********************/
/***** MESSAGING *****/
/*********************/
.messageContents {
	border:solid 1px #000;
	background-color:#fff;
	width:100%;
	padding:5px;
}

.mailFieldLine { margin-left:5px; }

.mailFieldLabel {
	width:100px;
	text-align:right;
	background:#eee;
	border:solid 1px #000;
	padding:5px;
	cursor: pointer;
}

.mailFieldLabel {
	width:100px;
	text-align:right;
	background:#eee;
	border:solid 1px #000;
	padding:5px;
	cursor: pointer;
}
			
#userContacts form fieldset dl { margin-bottom: 12px; }

#userContacts textarea { margin-bottom:6px; }
		
.contactDetailDisplay {
	border:solid 1px #bbb;
	padding:5px;
	top:10%;
	background-color: #fff;
	z-index:200;
	display:block;
}

.contactDetailHide { display:none; }

.addressScrollBox { width:auto; height: 240px; overflow:auto; background:#fff; }

.fromColumn		{ width:20%; text-align:left; }
.subjectColumn	{ width:45%; text-align:left; }
.dateColumn 	{ width:30%; text-align:left; }
.replyColumn	{ width:5%;  text-align:center; }

/*********************/
/***** RESOURCES *****/
/*********************/
.movieLeftPanel { width:550px; float: left; }
.movieRightPanel { width:230px; float: right; }
.resourceListItem { cursor:pointer; }
.resourceDescription { text-align:justify; width:auto; }
.resourceDetailInset { padding-left:45px; }
.ratingsTable td { padding-right:12px; }

.resourceNameColumn { width:30%; text-align:left; }
.resourceDescColumn { width:45%; text-align:left; }
.resourceTypeColumn { width:5%;  text-align:center; }
.resourceDateColumn { width:10%; text-align:center; }

/*********************/
/***** SEARCHING *****/
/*********************/
.optionOn { font-weight:bold; }

.tagOptionLimit { cursor:pointer; border-bottom:none; }
.tagOptionLimit:hover { cursor:pointer; border-bottom:solid 1px blue; }

.tagOptionSort { cursor:pointer; border-bottom:none; }
.tagOptionSort:hover { cursor:pointer; border-bottom:solid 1px blue; }

.tagOptionSelect { cursor:pointer; border-bottom:none; }
.tagOptionSelect:hover { cursor:pointer; border-bottom:solid 1px blue; }

.tagOptionType { cursor:pointer; border-bottom:none; }
.tagOptionType:hover { cursor:pointer; border-bottom:solid 1px blue; }

/*********************/
/****** TAGGING ******/
/*********************/
.tagCloud { margin: 5px; padding:10px; border:solid 1px #bbb; text-align:justify; font-size: 90%; }			

.littleTag { margin-bottom:3px; border:1px solid #bbb; }

.issueTag { margin:0px 3px 3px 3px; }

.issueTag:hover { cursor: pointer; }

.categoryListContainer, .topicListContainer, .subTopicListContainer { border:1px solid #000; padding:10px; }

.topicListContainer { background:#eee none repeat scroll 0%; z-index:100; }

.subTopicContainer { background:#86add9 none repeat scroll 0%; z-index:100; }

.categoryTag { border:1px solid #CCCCCC; padding:2px; margin:5px; z-index:1; }

.topicTag {
	background:#fff none repeat scroll 0%;
	border:1px solid #CCCCCC;
	padding:2px;
	margin:5px;
	color:#000;
}

.subTopicTag {
	background:#eee none repeat scroll 0%;
	border:1px solid #CCCCCC;
	padding:2px;
	margin-top:12px;
	margin-bottom:12px;
	color:#000;
}

.subTopicList { line-height:25px; width:100%; min-height:80px; }

.activeCategory { padding-left:3px; padding-right:3px; background-color:#eee; }

.activeTopic {
	padding-left:3px;
	padding-right:3px;
	background-color:#86add9;
	color:#fff;
}

.activeSubTopic {
	padding-left:3px;
	padding-right:3px;
	background-color:#eee;
}

.subTopicMember { background-color:#FFCCCC; color:#FF0000; }

.subTopicOther {
	border:2px solid #FF0000;
	padding-left:3px;
	padding-right:3px;
	text-decoration:none;
}

/*********************/
/***** CAMPAIGNS *****/
/*********************/
.campaignMeter { padding:5px; width:138px; float:left; }
.campaignMeterNotes { padding:5px; width:270px; float:left; }
.campaignMeterNotes p { width:260px; text-align:justify; font-size:75%; line-height:100%; }
.campaignMeter span { text-align:center; }
.campaignSummaryDesc { width:100%; height:160px; border:none; background:#eee; padding:10px; }

#summaryContainer {
	height:240px;
	border:solid 1px #ccc;
	margin-top:12px;
	padding-bottom: 18px;
	padding-left: 12px;
	padding-right: 12px;
}

.campaignColumn { width:45%; text-align:left; }
.sponsorColumn  { width:25%; text-align:center; }
.enddateColumn  { width:20%; text-align:center; }
.rankingColumn  { width:10%; text-align:center; }

/****************************/
/******* Thermometer  *******/
/****************************/
/* this exists for one reason: the gauge and nogauge message need a home. 
   you can stack this box or float it or what have you. all of the other
   elements are relative to the div so the div is all yours */
div#cdg-shell { 
	background-color : #eee;
	margin : auto;
	width : 180px;
	height : 140px;
	display : block;
	border : 1px solid #666;
	overflow : hidden;
}

div#cdg .leftside {
	position:absolute;
	background-color : #eee;
	width : 120px;
	height : 200px;
}

/* now we style the inner box when no funds are needed. grab the image  */
div#cdg-noshell {
	background : #eee url() no-repeat bottom right;
	width : 100%;
	height : 110px;
	display : block;
}

/* This styles the heading and the positions left both it second line (goal amount) */ 
h2#cdg_h2, p#cdg_goal { 
	color : #669900;
	font-size : 1.2em;
	padding : 0;
	margin-left : 5px;
}

/* but the styles for the second line need some tweaking */
p#cdg_goal { 
	color : #666;
	font-size : 0.9em;
	font-weight : bold;
	padding-bottom : 2px;
	padding-top: 2px;
	margin-left: 2px;
	z-index : 115;
}

/* this holds the thermometer. The heigh of this box is critical to the functionality
   Please note: The thermometer body is an embedded image. If you change background 
   colors, you'll need to change that image. The opaque portions must stay that way. */ 
div#cdg {
	margin : 0;
	border:1px solid #000;
	width : 178px;
	height : 200px;
	display : block;
	position : relative;
	font-size : 0.8em;
	border-right : 2px solid #888; /* this sort of "finishes" the embedded image */
}

/* this is the marker and we stick it to the bottom. In-line css margin-bottom is 
   adjusted by the script to move the marker... like magic. The background makes 
   it cover up the Goal amount line. Using absolute positioning for good not evil */
p#cdg_p { 
	position : absolute;
	background-color : #eeeeee;
	bottom : 0;
	left : 5px;
	color : #333;
	z-index : 5;
	border-bottom : 1px solid #cd0000;
}  

/* this is so non-visual users will have the data presented to them in a logical 
   way not needed by those with the imagery */
p#cdg_p span.blind {
	position : absolute;
	margin-top : -9000px;
	margin-left : -9000px;
}

/* ah, the bold, red right-arrow (→)
   FYI: The arrow isn't supported by browser < or = to IE 5.5 */
p#cdg_p span.cdg_arw {
	color : #cd0000;
	font-weight : bold;
}

/* the mercury... I chose a slightly deeper red. it moves via script 
   as well like the marker, using margin-bottom */
div#cdg_m { 
	position : absolute;
	bottom : 0;
	right : 0;
	display : block;
	width : 55px;
	background-color : #cd0000;
}

/* I use this to position the image in the lower right to control mercury view */
div#cdg img {
	position : absolute;
	bottom : 0;
	right : 0;
	display : block;
	width : 60px;
	height : 200px;
}

/* and it hover and focus states */
p#cdg_no a:hover, p#cdg_no a:focus, p#cdg_no a:active {
	text-decoration : none;
	color : #000;
}

/**************************************/
/******* JQuery Plugin - JModal *******/
/**************************************/
.jqmWindow {
	display: none;
	position: fixed;
	top: 5%;
	left: 42%;
	width:820px;
	margin-left: -300px;
	background-color: #eee;
	color: #333;
	border: 3px solid #bbb;
	padding: 12px;
	z-index:100;
	min-height:300px;
}

.jqmSmallWindow {
	display: none;
	position: fixed;
	top: 10%;
	left: auto;
	width: auto;
	margin-left: -40%;
	margin-right: 20%;
	background-color: #eee;
	color: #333;
	border: 3px solid #bbb;
	padding: 12px;
	z-index: 100; 
}
.wider { left: 42%; width: 800px; }
.taller { left: 12%; width: 100px; }

.jqmOverlay { background-color: #000; }

/*****************************************/
/******* JQuery Plugin - Impromptu *******/
/*****************************************/
div.jqifade { background-color: #7099c6; }
div.jqi { background-color: #ffffff; padding: 10px; width: 300px; }
div.jqi .jqicontainer { background-color: #6892c0; padding: 5px; color: #ffffff; font-weight: bold; }
div.jqi .jqimessage { background-color: #bbbbbb; padding: 10px; }
div.jqi .jqibuttons { text-align: center; padding: 5px 0 0 0; }
div.jqi button { padding: 3px 10px 3px 10px; margin: 0 10px; }

/***************************/
/******* PRIVILEGES ********/
/***************************/
.checked { background-color:#999999; }
.boxed { border:1px dotted #000; }

/*********************/
/******* FORMS *******/
/*********************/
.stepActive { background: #eee; }
.stepPast { background: #bbb; }

/**********************/
/***** DEPRICATED *****/
/**********************
.resourceCategory {
	background:#F0F0F0 none repeat scroll 0%;
	border:1px solid #CCCCCC;
	padding:2px;
}

.tabContainer { margin-right:12px; }

.campaignTable {
	border:0px;
	cellspacing:4;
	width:100%;
	padding-right:20px;
}

.campaignTable .labelColumn    { width:15%; text-align:left; }
.campaignTable .currencyColumn { width:20%; text-align:right; }
.campaignTable .dataColumn     { width:40%; text-align:left; }

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