/**
 * Screen Stylesheet
 */

/***********************************************************************************
 * Common Element Styles
 */

/* #search-login-bar -- Comes before the header and holds a search form and quick login bar */
#search-login-bar {
	width: 940px;
	margin: auto;
	clear: left;
}
	#search-login-bar #search-form {
		float: left;
		padding: 5px 10px;
	}
		#search-login-bar input { font-size: 0.9em; }

	#search-login-bar #login-form, #search-login-bar #logout-link {
		float: right;
		padding: 5px 0px;
	}
		#logout-link img { vertical-align: middle; }

/* #header -- Contains the top level navigation and the logo */
#header {
	overflow: auto;
	width: 100%;
}
	#header ul#nav {
		float: right;
		list-style: none;
		margin: 30px 0 30px 0;
		padding: 0;
	}
		#header ul#nav li { 
			float: left;
			margin-right: 20px;
		}
			#header ul#nav li a {
				display: block;
				background: #eee;
				padding: 4px 12px;
			}
	
	#header h1#logo { 
		float: left;
		margin: 30px 0 30px 15px;
	}
	
	#header h1#logo a {
		font-size: 2em;
		color: #ccc;
		font-style: italic;
		font-family: Georgia, times, serif;
		display: block;
	} 

/* #container -- Wraps all content after the header and before the footer */
#container {

}

/* #userbar -- Holds the navigation for the logged in user on all internal pages */
/* #optionsbar -- Holds the navigation for the currently viewed object (user, group, component etc) internal pages */
#userbar h3, #optionsbar h3 {
	text-align: center;
	padding: 1em 0;
	font-size: 1em;
	font-weight: bold;
}
	/* Center align avatars in both user and optionsbar */
	#userbar p, #optionsbar p { text-align: center; }
	#userbar ul, #optionsbar ul { list-style: none; }

/* .content-header -- Comes directly before the content div and can hold page information, or content navigation */
.content-header {
	text-align: center;
	padding: 8px 0 8px 0;
/*	background: #eee; */
	font-size: 1em;
	font-weight: bold;
	min-height: 16px;
}

	/* .content-header-nav -- Navigation items that appear in the content-header are marked with this class. */
	ul.content-header-nav {
		list-style: none;
		margin: 0;
		padding: 0;
	}
		ul.content-header-nav li {
			float: left;
			padding: 8px;
			margin-top: -8px;
		}
			ul.content-header-nav li a {
				font-weight: normal;
				display: block;
				min-height: 16px;
				padding: 8px;
				margin: -8px -8px 0 -8px;
				background: #ccc;
			}
				/* Selected navigation elements include the .current class */
				ul.content-header-nav li.current a {
					background: #aaa;
					color: #fff;
					font-weight: bold;
				}
		

/* #content --  Holds the main content on every page */
#content {
	padding: 1em;
	float: left;
	width: auto; 
}
.directory #content { width: 600px; }	
	/* Left menu within the #content div */
	#content .left-menu {
		float: left;
		width: 165px;
	}
		.left-menu input { width: 80%; }
		.left-menu ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.left-menu h5 { margin: 0; font-size: 1em; }
		
		/* Holds buttons, usually positioned within the content menu */
		div.button-block {
			margin: 20px 0;
		}
	
	/* Main column within the #content div */
	#content .main-column {
/*		margin-left: 175px; */
		float: right;
		width: 610px;
	}

	/* All widget-like blocks of content are wrapped in this (for example on profile and group pages) */
	div.bp-widget {
		margin-bottom: 20px;
		border: 1px solid #eee;
		padding: 15px;
	}
		div.bp-widget h4 {
			background: #ddd;
			padding: 5px 5px 5px 12px;
			font-size: 1em;
			font-weight: bold;
			margin: -14px -14px 15px -14px;
		}
			/* "See All" links in widget headers */
			div.bp-widget h4 span { float: right; }
		
	/* Horizonal listing of content, for example random friends or groups on the profile page */
	ul.horiz-gallery {
		list-style: none;
		overflow: auto;
		width: 100%;
		margin: 0;
		padding: 0;
	}
		ul.horiz-gallery li {
			float: left;
			padding-right: 25px;
			text-align: center;
		}
			ul.horiz-gallery li h5 { font-size: 1em; }

	/* All buttons contain this class */
	div.generic-button { 
		padding: 3px 10px;
		background: #eee;
		display: inline-block;
		margin-bottom: 10px;
	}
	
	/* All pagination is contained within a div.pagination */
	div.pagination {
		overflow: auto;
		width: 100%;
		padding-bottom: 20px;
	}
		/* div.pagination-links holds the actual numbered page links */
		div.pagination div.pagination-links {
			float: right;
		}
			div.pagination div.pagination-links a {
				background: #eee;
				padding: 3px 5px;
			}

		/* Pagination status text - "Viewing X to X of X" */
		div.pagination div.pag-count {
			float: left;
			
		}

	/* All lists of content contain this generic class along with an ID such as "group-list, friend-list" etc. */
	ul.item-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
		ul.item-list li { 
			position: relative;
			min-height: 65px;
			border-top: 1px solid #ddd;
			padding-top: 15px;
		}
		
		ul.item-list img.avatar { 
			float: left;
			margin-right: 10px;
		}
		
		ul.item-list h4 { font-size: 1em; }
		
		/* Actions with a item in a list have a div.action wrapped around them */
		div.action {
			position: absolute;
			right: 0;
			top: 15px;
			text-align: right;
		}

	/* .activity -- All "active X ago" items have this span.activity wrapped around them */
	span.activity {
		position: relative;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		padding: 3px 0;
		top: 5px;
		font-size: 0.9em;
	}

	/* All avatar images have this class */
	img.avatar { 
		border: 3px solid #ddd;
	}

	/* #message -- This is used for all error/success message feedback */
	div#message p {
		padding: 10px;
		background: #d3ffc9;
		border: 1px solid #90dc7e;
	}
		/* #message.error -- When there is an error, there is a .error class appended */
		div#message.error p {
			border-color: #dc7e7e;
			background: #ffc9c9;
		}

		/* #message.info -- Help text or an information box has a .info class appended */
		div#message.info p {
			border-color: #ffd686;
			background: #fcffc9;
		}

	/* .standard-form -- Most forms contain this class */
	form.standard-form {
		
	}
		form.standard-form label {
			display: block;
			font-weight: bold;
			margin: 10px 0 5px 0;
		}
		
		form.standard-form input[type=text] {
			width: 65%;
		}

		form.standard-form textarea {
			width: 65%;
		}

	/* #invite-list -- Lists of friends with checkboxes always carry this ID */
	div#invite-list {
		border: 1px solid #ccc;
		background: #f0f0f0;
		padding: 5px;
	}
		div#invite-list ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		div#invite-list input { width: auto; }

	/* .ajax-loader -- All ajax loading indicators carry this class */
	.ajax-loader {
		background: url( ../images/ajax-loader.gif ) center left no-repeat !important;
		padding: 8px;
		display: none;
	}

/* #wp-admin-bar -- styles for the global admin bar at the top of every page */
#wp-admin-bar ul li ul a { color: #555; }
		
	#wp-admin-bar ul.main-nav li ul {
		background : #fff;
		border: 1px solid #ccc;
	}
	#wp-admin-bar ul.main-nav li ul li:hover a, #wp-admin-bar ul.main-nav li ul li.sfhover a {
		background-color: #888;
		color: #fff;
	}
		#wp-admin-bar ul.main-nav li ul li:hover ul li a, #wp-admin-bar ul.main-nav li ul li.sfhover ul li a {
			background-color: #fff;
			color: #555;
		} 
			#wp-admin-bar ul.main-nav li ul li ul li:hover a, #wp-admin-bar ul.main-nav li ul li ul li.sfhover a {
				background-color: #aaa;
				color: #fff;
			}
	
/* .widget -- Home page and blog sidebar widgets are wrapped in this class */
.widget {
	margin-bottom: 45px;
}
	#sidebar .widget, #sidebar .directory-widget {
		margin-bottom: 25px;
	}
	
/* #letter-list -- All directories have a letter list */
.directory ul#letter-list {
	list-style: none;
	margin: 0 0 25px 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
}
	.directory ul#letter-list li {
		float: left;
		padding-bottom: .25em;
	}
		.directory ul#letter-list li a {
			display: block;
			padding: 3px 8px;
			background: #f0f0f0;
			margin-right: 10px;
		}
	.directory ul li div.field-data { clear:left; }
div.directory-sidebar { float:right; margin-right: 20px; width:290px; }
/* #footer -- The footer at the bottom of all pages. */

div#footer {
	text-align: center;
}
	



/***********************************************************************************
 * Component specific styles 
 */

/*** Activity Streams ****************/

ul#activity-list, ul#site-wide-stream, ul#activity-filter-links {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
}
	ul#activity-list li blockquote, ul#site-wide-stream li blockquote {
		background: #f0f0f0;
		padding: 10px;
		margin: 0px 0 25px 10px;
	}
		ul#activity-list li blockquote p, ul#site-wide-stream li blockquote p {
			margin: 0;
		}
	
	ul#activity-list span.time-since, ul#site-wide-stream span.time-since {
		font-size: 0.9em;
		color: #888;
	}

ul#activity-filter-links {
	margin-bottom: 20px;
}

	ul#activity-filter-links li {
		float: left;
		margin-right: 10px;
	}
		ul#activity-filter-links li a {
			background: #f0f0f0;
			padding: 3px 8px;
			display: block;
		}

/*** Profiles ****************/

div#profile-name h1, #group-name h1 {
	font-size: 3em;
	margin: 10px 0 25px 0;
	font-family: Georgia, times, serif;
}

/* Profile Field Display */
table.profile-fields { 
	width: 100%;
}

table.profile-fields td {
	vertical-align: middle;
	padding-left: 10px;
}
	table.profile-fields td p {
		margin: 10px 0 10px;
	}	

	table.profile-fields td.label {
		width: 20%;
		font-weight: bold;
	}
	table.profile-fields tr.alt { background: #f5f5f5; }

/* Profile Field Edit */
div.editfield label { 
	display: block;
	font-weight: bold;
}

div.editfield input, div.editfield textarea {
	width: 60%;
}

div.checkbox input, div.radio input { width: auto; }
div.checkbox label, div.radio label { 
	display: inline; 
	font-weight: normal;
}

span.label {
	display: block;
	font-weight: bold;
}

/* Profile Change Avatar */
#avatar-upload-form p { margin-top: 20px; }


/*** Wire ****************/

div.wire-post-metadata {
	font-size: 0.9em;
	color: #888;
	margin-bottom: 10px;
}
	div.wire-post-metadata a {
		font-size: 1em;
	}

div#wire-post-new {
	margin-top: 15px;
}

	div#wire-post-new-metadata img.avatar { 
		float: left;
		margin-right: 10px;
	}
	
	div#wire-post-new-input {
		margin-left: 65px;
	}
		div#wire-post-new-input textarea {
			height: 75px;
			width: 90%;
		}

		input#wire-post-submit { 
			display: block;
			margin-top: 10px;
		}

form#wire-post-new-form {
	margin-bottom: 20px;
	background: #f5f5f5;
	margin: -14px -14px 15px -14px;
	padding: 15px;
}

/*** Messages ****************/

table#message-threads {
	width: 100%;
}
	table#message-threads tr {
		border-bottom: 1px solid #ccc;
		border-top: 1px solid #ccc;
	}

	table#message-threads td {
		vertical-align: middle;
		padding: 10px;
	}

/* View Thread Screen */

/* .message-box -- holds each message in a thread */
div.message-box {
	border-bottom: 1px solid #ccc;
	padding: 15px;
	overflow: hidden;
	width: 100%;
}
	div.message-box .message-metadata {
		float: left;
		width: 100px;
	}
		div.message-box .message-metadata .avatar {
			width: 30px;
			margin-bottom: 10px;
		}
		
		div.message-box .message-metadata h3 {
			font-size: 1.1em;
		}
	div.message-box .message-content {
		margin-left: 130px;
	}

/*** Registration / Activation ****************/

.register-section {
	margin: 0 0 30px 0;
}
	#basic-details-section input, #basic-details-section textarea, 
	#profile-details-section input, #profile-details-section textarea,
	input#signup_blog_title {
		width: 50% !important;
	}
		.register-section .checkbox input { width: auto !important; }
		.register-section .radio input { width: auto !important; }
		#basic-details-section input[type=password] { width: 25% !important; }

	#blog-details-section input#signup_blog_url { width: 20%; }

	.register-section span.label {
		margin-top: 20px;
	}
	
	.register-section div.error {
		border: 1px solid #dc7e7e;
		background: #ffc9c9;
		padding: 5px;
		width: 35%;
		margin: 5px 0 10px 0;
	}

/*** Status Updates *****************************/

#user-status {
	margin-bottom: 20px;
}

#user-status p {
	margin: 15px 0;
	padding: 10px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
	#user-status .time-since {
		font-size: 0.9em;
		color: #888;
	}
	
	#user-status a#status-clear-status { 
		color: red; 
		font-size: 0.9em;
	}
	
/*** Forums *************************************/

ul#forum-topic-list li {
	position: relative;
	min-height: 0;
	padding-bottom: 0;
	overflow: hidden;
	width: 100%;
}
	ul#forum-topic-list li.sticky {
		background: #ffffdd;
	}
	
	ul#forum-topic-list li.closed a.topic-title {
		background: url( ../images/closed_topic.png ) no-repeat center left;
		padding: 0 0 0 20px;
	}
	
	ul#forum-topic-list li span.latest { 
		display: block;
		margin-left: 50px;
	}
	
	ul#forum-topic-list li div.admin-links, ul#topic-post-list li div.admin-links {
		position: absolute;
		top: 1em;
		right: 1em;
		background: #eee;
		display: none;
		padding: 0.1em 0.5em;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		margin-left: 50px;
		margin-bottom: 15px;
		font-size: 11px;
		color: #888;
	}
		ul#forum-topic-list li:hover div.admin-links, ul#topic-post-list:hover li div.admin-links { display: inline-block; }

ul#topic-post-list li .poster-meta {
	color: #888;
}

ul#topic-post-list li .poster-meta .avatar {
	float: none !important;
	margin: 0 0.3em 0 0;
	vertical-align: middle;
}

ul#topic-post-list .post-content {
	margin: 1em 0 0 14px;
	border-left: 1px solid #ccc;
	padding-left: 22px;
}

	ul#topic-post-list li#topic-meta h3 {
		margin: 5px 0 0 0;
		font-size: 20px;
	}
	
ul#topic-post-list li input#submit_reply, input#submit_topic {
	width: auto;
}

div.latest-post {
	font-size: 0.9em;
	color: #888;
	margin-left: 70px;
}

	div#post-new-topic label, div#edit-topic label, div#edit-post lable div#post-topic-reply label {
		display: block;
		margin: 10px 0 3px 0;
	}
	
	div#edit-post textarea {
		height: 150px;
		width: 98%;
	}

	input#topic_title { width: 80%; }
	input#topic_tags { width: 60%; }
	textarea#topic_text, textarea#reply_text { width: 98%; height: 150px; }

	input#submit_topic, input#submit_reply {
		display: block;
		margin-top: 20px;
	}