/*  MAIN CSS - PeachKit.com (Social)  */


/*  FAUCET STUDIO 2006  */
/*

 TABLE OF CONTENTS =TOC
 ----------------------
 
 - GLOBAL
 - LAYOUT
 - HEADER
 - FOOTER
 
 - TOOLBAR
 - POST VIEW
 - TABLE
 
 - OTTERPOP

 
 " To quickly access each section search with '=' character before the section name. (ex. =menu) "

*/

@import url("main_form.css"); /* Load the main css form file. This file includes all the basic form styles for the whole site. */



/*  =OTTERPOP ( Notifications & AJAX Elements )
------------------------------------------------------------------------ */	
#debugBar{
	position:absolute;
	background-color:#F5F5F5; color: inherit;
	border:1px solid #CCC;
	right:10px;
	top:1px;
	padding:2px;
	z-index:9999;
	/*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-moz-opacity:0.5;*/
	/*text-align:center;*/
	max-width:900px;
	max-height:700px;
	overflow:auto;
	cursor:help;
	}
pre.cake_debug,
#cakeSqlLog{
	display:block;
	margin:1em;
	padding:1em;
	height:400px;
	width:550px;
	border-left:1px solid #777;
	border-right:1px solid #777;
	border-top:5px solid #555;
	border-bottom:5px solid #555;
	z-index:999;
	overflow:scroll;
	background-color:#fff; color: inherit;
	background-image: url(../img/bg-blue2white.gif);
	background-repeat: repeat-x;
	background-position: top;
	}
#cakeSqlLog{
	margin:1em auto;
	height:600px;
	width:95%;
	}
#cakeSqlLog caption{
	background-image: url(../img/bg-black2grey.gif);
	background-repeat: repeat-x;
	background-position: top;
	}
#debugBar:hover{
/*	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-moz-opacity:1;*/
	}
.hilight{
	background-color: #FFFFCC; color: inherit;
	}
a.hilight{
	background-color: #FFFFCC; color: inherit;
	}
a.hilightActive{
	background-color: #FFFFCC; color: inherit;
	text-decoration:underline;
	}

div.message, 
div.warning_message, 
strong.warning{
	border-top:1px solid #f7ec7a;
	border-bottom:1px solid #f7ec7a;
	background-color:#ffffba;
	color:#757500;
	padding:0.5em 0.5em 0.5em .8em;
	margin-bottom: .4em;
	overflow: visible;
	}
div.message pre{
	color: #009900; background-color: inherit;
	margin-left:1em;
	font-size:110%;
	}
	
div.warning_message, 
strong.warning{
	background-image: url(../img/icon-warning.gif);
	background-position: 4px;
	background-repeat: no-repeat;
	padding-left:25px;
	}
strong.warning{
	margin-left:0.25em;
	}
	
div.okay_message, 
strong.okay{
	border-top:1px solid #89C390;
	border-bottom:1px solid #89C390;
	background-color:#DFFBE5; color:#418149;
	padding:0.5em;
	margin:0.5em;
	background-image: url(../img/icon-accept.gif);
	background-position: 4px;
	background-repeat: no-repeat;
	overflow: visible;
	}
strong.okay{
	padding-left:25px;
	margin-left:0.25em;
	}
	
div.error_message, 
strong.error{
	border-top:1px solid #FFB7BE;
	border-bottom:1px solid #FFB7BE;
	background-color:#FFD9DD; color:#79000C;
	padding:0.5em 0.5em 0.5em 25px;
	margin:0.5em;
	background-image: url(../img/icon-alert.gif);
	background-position: 4px;
	background-repeat: no-repeat;
	overflow: visible;
	}
strong.error{
	margin-left:0.25em;
	}
	
div.auto_complete{
	border:1px solid #ddd;
	display:block;
	background-color: #FFC; color: inherit;
	padding:0.2em;
	margin:0.2em 0px;
	
	}
div.auto_complete li.selected{
	background-color: #00CCFF; color:#FFF;
	} 
div.auto_complete li.selected a{
	color:#FFF; background-color: inherit;
	}
/* 
------------------------------------------------------------------------ */


/*  =GLOBAL
------------------------------------------------------------------------ */	
*{
	margin:0px;
	padding:0px;
	}
body{
	background-color:#777;
	font-family: Arial, Helvetica, sans-serif;
	font-size:75%;
	color: #444;
	}
/* 
------------------------------------------------------------------------ */
h4,
h5,
h6,
p,
pre{
	margin:1em 0px 0px 0px;
	}
h1,
h2,
h3{
	font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
	}
h2{
	color: #7CBBD0; /* light-blue */ background-color: inherit;
	}
h2 a,
h2 a:visited{
	color: #4CB02D; /* green */ background-color: inherit;
	}
h3{
	color: #4CB02D; /* green */ background-color: inherit;
	font-size: 1em;
	}
/* 
------------------------------------------------------------------------ */
li{
	list-style: none;
	}
img{
	border: none;
	}
a{
	color:#2984D6; background-color: inherit;
	text-decoration: none;
	}
a:visited{
	color: #2984D6; background-color: inherit;
/*	color:#7CBBD0;*/
	}
a:hover{
	text-decoration: underline;
	}
br.clr{
	clear:both;
	}
br.clear{
	clear:both;
	}
hide{
	display:none;
	}
p{
	line-height: 1.3em;
	}
/* 
------------------------------------------------------------------------ */


/*  =LAYOUT 
------------------------------------------------------------------------ */	
#page{			
	margin:0px auto; /* centers layout */
	width: 820px;
	
	border-left:3px solid #7CBBD0;
	border-right:3px solid #7CBBD0;
	background-color: #f2f2f2; color: inherit;
	background:url(../img/bg-divider.gif) center repeat-y;
	}
#pageHeader{
	height: 67px; /* 79px total */
	padding: 10px 10px 0 10px;
	
	border-bottom:2px solid #eee;
	background-color: #FFFFFF; color: inherit;
	}	
#pageContent{
	float: left;
	width: 590px; /* 620px total */
	padding: 10px 15px 20px 20px;
	background-color: #fff;	color: inherit;
	border-left: solid 1px #dedede;
	}
#pageSidebar{
	float: left;
	width:184px; /* 185px total */
	background-color: #f2f2f2; /* light grey */ color: inherit;
	}
#pageFooter{
	clear: left;
	padding: 10px 27px;
	margin-bottom: -15px; /* HACK - ?extra spacing below footer */
	background-color: #FFFFFF; color: inherit;
	border-top: 1px solid #eee;
	text-align: center;
}
/* 
------------------------------------------------------------------------ */
	
	
/*  =HEADER & =FOOTER
------------------------------------------------------------------------ */	
#pageHeader #utilityLinks{
	float:right;
	list-style:none;
	}
#pageHeader #utilityLinks ul li{
	display:inline;
	float:left;
	margin-left: 8px;
	}
#pageHeader #topNav ul{
	clear:left;
	float:right;
	list-style:none;
	margin-bottom:-10px;
	}
#pageHeader #topNav ul li{
	float:left;
	margin-left: 1px;
    background:url(../img/tabright.gif) no-repeat right top;
	}
#pageHeader #topNav ul li.staticGroupName{
	float:left;
	margin-right: 9px;
	margin-top: 4px;
    background: #FFF;
	}


#pageHeader #topNav ul li a{
	display:block;
	text-decoration:none;
    background:url(../img/tableft.gif) no-repeat left top;
	padding: 5px 12px 4px 12px;
	font-weight: bold;
	color: #FFF;
	letter-spacing: .02em;
	}
#pageHeader #topNav .active{
    background:url(../img/tabright-on.gif) no-repeat right top;
	}
#pageHeader #topNav .active a{
    background:url(../img/tableft-on.gif) no-repeat left top;
	}
/*#pageHeader #topNav ul li.title a{
	background-color:#efefef;
	color: #4CB02D;
	font-weight:bold;
	}
#pageHeader #topNav ul li.active a{
	background-color:#fefefe;
	color: #7bb5d6;
	}

#pageHeader #topNav ul li.title a:hover{
	background-color: #efefef; color: inherit
	}*/
#pageHeader #logo{
	float: left;
	margin-top: 0;
	}
	
	

	

/* FOOTER */
#pageFooter a, 
#utilityLinks a{
	color: #2984D6;
	background-color: inherit;
	}
#pageFooter a:visited, 
#utilityLinks a:visited{
	color: #2984D6;
	background-color: inherit;
	}
/* 
------------------------------------------------------------------------ */


/*  =TOOLBAR ( sitting in Messages, Discussion & Events )
------------------------------------------------------------------------ */
.toolbar{
	width: 570px;
	padding: 0 10px 10px 10px;
	border-bottom: 1px solid #E4E4E4; /* light grey */
	}
.messageIndex, .discussionIndex, .eventIndex, .messageView{
	padding-left: 20px;
	}
	.messageIndex{
		background:url(../img/icon-email.gif) no-repeat;
		}
	.discussionIndex{
		background:url(../img/icon-discussion.gif) no-repeat;
		}
	.eventIndex{
		background:url(../img/icon-event.gif) no-repeat;
		}	
	.messageView{
		background:url(../img/icon-email-view.gif) no-repeat left;
		padding-top: 4px;
		}
.messageAction, .discussionAction, .eventAction{
	float:right;
	}
.commentContent{
	overflow:hidden;
}
/* 
------------------------------------------------------------------------ */


/*  =POST ( sitting in Messages, Discussion, Events & Comments )
------------------------------------------------------------------------ */
/* Structure */
.postContainer{ /* with dashed dividers */
	float: left;
	width: 590px;
	position: relative;
	border-bottom: 1px dashed #E4E4E4;
	padding-top: 12px;
	padding-bottom: 18px;
	}
.postContainerIndex{ /* solid dividers */
	border-bottom: 1px solid #E4E4E4;
	}
.postContent{
	float: left;
	width: 500px;
	}	
.postContentMessage{ /* more narrow width - makes room for delete box */
	float: left;
	width: 473px;
	}	

/* Elements */
.postDate{
	color: #999; background-color: inherit;
	}
.postedByName a{
	color: #2984D6; background-color: inherit;
	}	
.replyLink{
	margin-top: 15px;
	float: right;
	}
.listReplyLink{
	float: right;
	}
.foundInLink{
	color: #999; background-color: inherit;
	margin-top: 15px;
	float: left;
	}	
.postOptions{ /* favorites, flag, edit, etc. */
	float: right;
	background: url(../img/icon-star.gif) no-repeat;
	width: 17px;
	}
.noContent{
	color: #aaa; background-color: inherit;
	font-weight:bold;
	}
p.noContent{
	padding:0.5em;
	margin:0.5em;
	}
	
/* Typography */
.postContent h2{
	color: #4CB02D; /* green */ background-color: inherit;
	}
.postContent h3{
	color: #CCC; background-color: inherit;
	font-size: 1.2em;
	}
.postContent h3 a{
	color: #4CB02D; background-color: inherit;
	font-size: 1.2em;
	}
.postContent p{
	margin-right: 25px;
	}

/* Message index */	
.messageMarker{ 
	float: right;
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	padding: 0 6px;
	width: 16px;
	background: #F6F6F6; color: inherit;
	}
.deleteBox{
	margin-top: 6px;
	margin-left: 2px;
	}	
/* 
------------------------------------------------------------------------ */



	




/*  =TABLE
------------------------------------------------------------------------ */	
table{
	border:1px solid #ddd;
	padding: 2px;
	background-color:#FFF; color: inherit;
	}
table caption{
	font-size:1.2em;
	font-weight:bold;
	border:1px solid #ddd;
	padding: 2px;
	background-color:#f3f3f3; color: inherit;
	}
th,td{
	border-bottom:1px solid #ccc;
	}
th{
	background-color:#f3f3f3; color: inherit;
	font-weight:bold;
	}
tr .altRow{
	background-color:#ddd; color: inherit;
	border-bottom:1px solid #ccc;
	}
/* 
------------------------------------------------------------------------ */








/*  =THUMBNAILS
------------------------------------------------------------------------ */	
.memberThumbnail{
	float: left;
	height: 40px;
	width: 40px;
	background-color: #eee; color: inherit;
	border: 1px solid #CCC;
	margin: 5px 17px 0 10px;
	}
/* Large & Small Thumbnails */
.largeThumbnails li,
.smallThumbnails li{
	float:left;
	text-align:center;
	text-decoration:none;
	}
	.largeThumbnails li{
		margin-right: 5px;
		padding: 5px;
		}
	.smallThumbnails li{
		margin-right: 10px;
		margin-top: 6px;
		padding:0.2em 0.5em;
		}
	.largeThumbnails li a img,
	.smallThumbnails li a img{
		border:1px solid #bbb;
		}
	.largeThumbnails li a span,
	.smallThumbnails  li a span{
		display: block;
		}	
/* 
------------------------------------------------------------------------ */










/*  Function Buttons
------------------------------------------------------------------------ */
#functionButtons{
	margin-top: 5px;
	float: right;
	width: 160px;
	}
#functionButtons li{
	list-style: none;
	margin-bottom: 3px;
	background: #F8F8F8; color: inherit;
	height: 100%;
	}
#functionButtons li a{
	text-decoration: none;
	color: #666666; background-color: inherit;
	display: block;
	padding: 5px 5px 5px 38px;
	}
/* 
------------------------------------------------------------------------ */



/*  Member & Group Browse
------------------------------------------------------------------------ */

.searchField{
	float: right;
	padding: 8px 14px 8px 14px;
	margin-top: -10px;
	background-color: #F7FAFB; color: inherit;
	}
	.searchField em{
		margin-right: 4px;
		color: #537f8d; background-color: inherit;
		}
		
/* Index Tags */

#tagList{
	clear:both;
	display:block;
	}


h2.browseTags{
	clear: both;
	margin-top: 12px;
	}
ul.tags{
	list-style:none;
	}
	ul.tags li{
		float:left;
		margin:.4em .2em;	
		border:1px solid #ccc;
		padding:.3em 0;	
		background-color: #FFF; color: inherit;
		}
		ul.tags li a{
		padding:.3em 0.40em;	
			}
		ul.tags li a:hover{
			text-decoration: none;
			background-color:#eee; color: inherit;
			}
				

	
	
	
/* My HomePage - Bottom
------------------------------------------------------------------------ */
#homePageContent{
	clear: left;
	float: left;
	margin-top: 14px;
	width: 100%;
	}	
	#updatedContent,#firstLogin{
		float: left;
		width: 330px;
		border: 2px solid #DFE8EC;
		padding: 0px 15px 20px 15px;
		}
		#updatedContent h3{
			margin-top: 19px;
			margin-bottom: 7px;
			}
			h3.event{
				background:url(../img/icon-event.gif) no-repeat;
				padding-left: 20px;
				}
			h3.discussion{
				background:url(../img/icon-discussion.gif) no-repeat;
				padding-left: 20px;
				}
			h3.whatsNew{
				background:url(../img/icon-smile.gif) no-repeat;
				padding-left: 20px;
				}		
		#updatedContent hr{
			border: solid #EEE;
			border-width: 1px 1px 0 1px;
			margin-top: 20px;
			}	
		#friendsList{
			float: left;
			margin-left: 20px;
			width: 170px;
			padding: 10px;
			border: 1px solid #DFE8EC;
			}
#editFriendsList{
	float: left;
	padding: 10px;
	}
#editFriendsList h3{
	margin-bottom: 7px;
	}
#editFriendsList li{
	border: solid 1px #DFE8EC;
	padding: 6px;
	margin: 6px;
	}
			
/* Create Group */
#formContainer{
	width: 320px; /* need to make expandable on text resize */
	background-color: #F7FAFB; /* light blue */ color: inherit;
	border: 1px solid #DFE8EC;
	margin-top: 15px;
	padding: 2px 12px 10px 12px;
	}
#formContainer p{
	margin: 1.8em 0;
	}
p#createSubmit{
	margin-top: 40px;
	}
#bodyLabel{
	margin: .4em 0 0 .4em;
	}
	
	
	
	
h2.sectionHeader{
	margin-bottom: 10px;
	}
.functionLink{
	background-color: #EEE;
	padding: 2px 5px;
	margin-bottom: 2px;
	}
	
	

	
#locationContainer{
	float: left;
	width: 170px;
	margin-top: 16px;
	}
	#locationContainer ul{
		margin-top: 8px;
		border: 2px solid #EEE;
		padding: 10px;
		}
		#locationContainer li{
			margin-top: 4px;
			margin-bottom: 4px;
			}
	
h2.taggedListing{
	clear: both;
	}