/**********************************/
/***** SNAPAP GENERAL STYLING *****/
/**********************************/
.indented {
	padding-left:10px;
	padding-right:10px;
}
.hide   { display:none; }
.noList { list-style:none; }
.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;
}

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

.tabContainer { margin-right:12px; }

.scrollBox { width:auto; height: 120px; overflow:auto; background:#fff; }
.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:460px;
    float:left;
    text-align:left;
    padding-left:10px;
    padding-right:10px;
}

.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;
	float:center;
	width:600px;
	height:200px;
	align:center;
	valign:center;
	background-color:#fff;
}

#toolbar {
	float:right;
}
.subtoolbar {
	padding-right:12px;
}
.windowToolbar {
	position:relative;
	float:right;
	width:400;
	padding-top:10px;
	padding-right:10px;
}

.titleBar {
	padding-top:20px;
	margin-top:10px;
	line-height:34px;
	width:auto;
	align:left;
}
.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;
	width:50;
}
.label {
	font-weight:bold;
	text-align:right;
}

/*******************************/
/***** SNAPAP PAGE STYLING *****/
/*******************************/
.userHome {
	border:solid 1px #ccc;
	background:#fff;
	padding-bottom: 12px;
	padding-left: 12px;
	padding-right: 12px;
	margin-bottom: 16px;
}
.subCategory {
	background:#eee;
	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;
}
img.avatarImage {
	height:110px;
	width:110px;
}
.thumbnail {
	padding-left:5px;
	padding-top:5px;
	width:40px;
	height:40px;
}


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

}


/*********************/
/***** CAMPAIGNS *****/
/*********************/
.favoriteMiniDetail {
	padding:5px;
	float:left;
	width:140px;
}


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


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

			


			.bookthumbnail {
				width:40px;
				height:60px;
			}
			
			
			#userContacts form fieldset dl { margin-bottom: 12px; }
			
			#userContacts textarea { margin-bottom:6px; }
			
			.smallBtn {
				width:22px;
				height:22px;
				cursor:pointer;
			}

			.minimizeBtn, .maximizeBtn, .closeBtn {
				padding-bottom:3px;
				width:16px;
				height:16px;
				cursor:pointer;
			}

			.smallIcon {
				margin-top:6px;
				width:12px;
				height:12px;
			}
			
			.mediumIcon {
				padding-top:6px;
				width:24px;
				height:24px;
			}
			
			.mediumBtn {
				padding-top:2px;
				width:24px;
				height:24px;

			}
			
			.buttonHover {
			}
			
			.favoriteImgThumb {
				height:75px;
				width:75px;
			}
			
			.resourceCategory {
				background:#F0F0F0 none repeat scroll 0%;
				border:1px solid #CCCCCC;
				padding:2px;
			}
			
			.activeCategory {
				border:1px solid #eee;
			}
			
			.tagCloud {
				margin: 5px;
				padding:10px;
				border:solid 1px #bbb;
				text-align:justify;
				font-size: 90%;
			}	
			
			.littleTag {
				margin-bottom:3px;
			}
			
			.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,padding-right:3px;
				background-color:#eee;
			}
			
			.activeTopic {
				padding-left,padding-right:3px;
				background-color:#86add9;
				color:#fff;
			}

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

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

/***** LINEAGE STYLING *****/
.lineageChart { height:450px; width:675px; }
.lineageChart img { height: 450px; width:675px; }
.lineageLeftPanel { width:125px; float: left; }
.lineageRightPanel { width:675px; float: right; }
.lineageRightPanel h3 { text-align:center; }
.lineageKeyTitle { font-weight:bold; }

.colorSquare { width:20px; height:20px; }

.generation0 { background-color:#483d8b; }
.generation1 { background-color:#6495ed; }
.generation2 { background-color:#6b8e23; }
.generation3 { background-color:#bdb76b; }
.generation4 { background-color:#b22222; }
.generation5 { background-color:#90ee90; }
.generation6 { background-color:#ffff00; }

.level0 { background-color:#483d8b; }
.level1 { background-color:#6495ed; }
.level2 { background-color:#6b8e23; }
.level3 { background-color:#bdb76b; }
.level4 { background-color:#b22222; }
.level5 { background-color:#ffff00; }
.level6 { background-color:#bc8f8f; }

.region1 { background-color:darkslateblue; }
.region2 { background-color:cornflowerblue; }
.region3 { background-color:darkkhaki; }
.region4 { background-color:sienna; }
.region5 { background-color:olivedrab; }
.region6 { background-color:firebrick; }
.region7 { background-color:rosybrown; }

.timeperiod1 { background-color:lightseagreen; }
.timeperiod2 { background-color:lightskyblue; }
.timeperiod3 { background-color:lightgrey; }
.timeperiod4 { background-color:lightslategray; }
.timeperiod5 { background-color:lightsteelblue; }
.timeperiod6 { background-color:midnightblue; }
.timeperiod7 { background-color:indigo; }


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

			.smallLeftPanel {
				width:auto;
				float: left;
				padding:5px;
			}
			
			.smallRightPanel {
				padding:5px;
				width:375px;
				float: left;
			}

			.contactDetailHide {
				display:none;
			}
			
			.contactDetailDisplay {
				border:solid 1px #bbb;
				padding:5px;
				top:10%;
				background-color: #fff;
				z-index:200;
				display:block;
			}
			
			.linkText {
				cursor:pointer;
				text-decoration:none;
				border-bottom:solid 1px #000;
			}

			.linkText:hover {
				cursor:pointer;
				text-decoration:none;
				border-bottom:solid 1px #1EBAEA;
			}
			
			.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;
			}

			
			.fromColumn		{ width:20%; text-align:left; }
			.subjectColumn	{ width:45%; text-align:left; }
			.dateColumn 	{ width:30%; text-align:left; }
			.replyColumn	{ width:5%;  text-align:center; }
			
			.campaignColumn { width:45%; text-align:left; }
			.sponsorColumn  { width:25%; text-align:center; }
			.enddateColumn  { width:20%; text-align:center; }
			.rankingColumn  { width:10%; text-align:center; }

			.resourceNameColumn { width:30%; text-align:left; }
			.resourceDescColumn { width:45%; text-align:left; }
			.resourceTypeColumn { width:5%; text-align:center; }
			.resourceDateColumn { width:10%; text-align:center; }
			
			.dataTable {
				border:0px;
				cellspacing:4;
				width:100%;
			}
							
			.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;
				cellspacing:4;
				width:100%;
				padding-right:20px;
			}

			.footerTable {
				border:0px;
				cellspacing:4;
				width:100%;
				padding-right:20px;
			}
			
			.campaignTable {
				border:0px;
				cellspacing:4;
				width:100%;
				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; }
			
			.campaignTable .labelColumn    { width:15%; text-align:left; }
			.campaignTable .currencyColumn { width:20%; text-align:right; }
			.campaignTable .dataColumn     { width:40%; text-align:left; }
			
			.labelColumn { font-weight:bold; width:10%;}
			.dataColumn { width:40%; }
			.currencyColumn { text-align:right; width:10%; }
			
			img.lineageTree { width:800px; height:300px; }
			
			.tableHeader {
				padding:5px;
				color:#000;
				border:dotted 1px #000;
				align:left;
			}
			
			.stepActive {
				background: #eee;			
			}
			
			.stepPast {
				background: #bbb;
			}
			
			.tableData {
				padding:5px;
				background-color:#f7f7f7;
				align:center;
			}

			.tableDataHighlight {
				background-color:#f6f9fe;
				text-color:#fff;
			}

			.tableDataSelect {
				cursor:pointer;
				background-color:#d9eaf4;
				text-color:#fff;
			}
			
			.checked {
        		background-color:#999999;
			}
			
			.boxed {
			    border:1px dotted #000;
			}
			
			.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:underlined;
			}
			
			.errorInputField {
				background:#FFDDDD;
			}
			
			/******* JQuery Plugin - JModal *******/
			.jqmWindow {
				display: none;
				position: fixed;
				top: 8%;
				left: 42%;
				width:800px;
				margin-left: -300px;
				background-color: #eee;
				color: #333;
				border: 1px solid black;
				padding: 12px;
				z-index:100;
			}
			
			.wider {
				left: 42%;
				width: 800px;			
			}
			
			.taller {
				left: 12%;
				width: 100px;
			}
			
			.jqmOverlay { background-color: #000; }
			
			* html .jqmWindow {
				 position: absolute;
				 top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
			}



/************************** Round Edges CSS ********************************
.csc {
  background : #eee url(../../images/general/csc_tl.png) no-repeat;
  width : 790px;
  height : auto;
  position : relative;
  padding : 5px 10px 20px 10px;
  margin-bottom: 10px;
}

.tl, .tr, .bl, .br {
  position : absolute;
  width : 39px;
  height : 39px;  
  display : block;
  margin-bottom : -1px;  
}

.tr {
  background : transparent url(../../images/general/csc_tr.png) no-repeat;
  top : 0;
  right : 0;
}

.bl {
  background : transparent url(../../images/general/csc_bl.png) no-repeat;
  bottom : 0;
  left : 0;
}

.br {
  background : transparent url(../../images/general/csc_br.png) no-repeat;
  right : 0;
  bottom : 0;
}
*********************** End Round Edges CSS *****************************/

/*********************Dynamic Thermometer stuff***************************/
/* 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 
   from: http://mikecherim.com/experiments/images/cdg_no_tmom.gif */
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
   I know, the crosshair is dumb, so shoot me. I like it :p
   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.
   Grab the image from: http://mikecherim.com/experiments/images/cdg_tmom.gif */ 
div#cdg {

  margin : 0;
  border:1px solid #000;
  width : 178px;
  height : 200px;
  display : block;
  cursor : crosshair;
  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;
}


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