code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die( 'No direct access' ); }

class Charcoal extends Theme
{
	var $defaults = array(
		'show_title_image' => false,
		'home_label' => 'Blog',
		'show_entry_paperclip' => true,
		'show_page_paperclip' => false,
		'show_powered' => true,
		'display_login' => true,
		'tags_in_multiple' => false,
		'show_post_nav' => true,
		'tags_count' => 40,
		);

	/**
	 * On theme activation, set the default options and activate a default menu
	 */
	public function action_theme_activated()
	{
		$opts = Options::get_group( __CLASS__ );
		if ( empty( $opts ) ) {
			Options::set_group( __CLASS__, $this->defaults );
		}
		$blocks = $this->get_blocks( 'nav', 0, $this );
		if( count( $blocks ) == 0 ) {
			$block = new Block( array(
				'title' => _t( 'Charcoal Menu' ),
				'type' => 'charcoal_menu',
			) );

			$block->add_to_area( 'nav' );
			Session::notice( _t( 'Added Charcoal Menu block to Nav area.' ) );
		}
	}

	/**
	 * Configuration form for the Charcoal theme
	 **/
	public function action_theme_ui( $theme )
	{
		$ui = new FormUI( __CLASS__ );
		// This is a fudge as I only need to add a little bit of styling to make things look nice.
		$ui->append( 'static', 'style', '');
		$ui->append( 'checkbox', 'show_title_image', __CLASS__.'__show_title_image', _t( 'Show Title Image:'), 'optionscontrol_checkbox' );
			$ui->show_title_image->helptext = _t( 'Check to show the title image, uncheck to display the title text.' );
		$ui->append( 'text', 'home_label', __CLASS__.'__home_label', _t( 'Home label:' ), 'optionscontrol_text' );
			$ui->home_label->helptext = _t( 'Set to whatever you want your first tab text to be.' );
		$ui->append( 'checkbox', 'show_entry_paperclip', __CLASS__.'__show_entry_paperclip', _t( 'Show Entry Paperclip:' ), 'optionscontrol_checkbox' );
			$ui->show_entry_paperclip->helptext = _t( 'Check to show the paperclip graphic in posts, uncheck to hide it.' );
		$ui->append( 'checkbox', 'show_page_paperclip', __CLASS__.'__show_page_paperclip', _t( 'Show Page Paperclip:' ), 'optionscontrol_checkbox' );
			$ui->show_page_paperclip->helptext = _t( 'Check to show the paperclip graphic in pages, uncheck to hide it.' );
		$ui->append( 'checkbox', 'show_powered', __CLASS__.'__show_powered', _t( 'Show Powered By:' ), 'optionscontrol_checkbox' );
			$ui->show_powered->helptext = _t( 'Check to show the "powered by Habari" graphic in the sidebar, uncheck to hide it.' );
		$ui->append( 'checkbox', 'display_login', __CLASS__.'__display_login', _t( 'Display Login:' ), 'optionscontrol_checkbox' );
			$ui->display_login->helptext = _t( 'Check to show the Login/Logout link in the navigation bar, uncheck to hide it.' );
		$ui->append( 'checkbox', 'tags_in_multiple', __CLASS__.'__tags_in_multiple', _t( 'Tags in Multiple Posts Page:'), 'optionscontrol_checkbox' );
			$ui->tags_in_multiple->helptext = _t( 'Check to show the post tags in the multiple posts pages (search, tags, archives), uncheck to hide them.' );
		$ui->append( 'checkbox', 'show_post_nav', __CLASS__.'__show_post_nav', _t( 'Show Post Navigation:' ), 'optionscontrol_checkbox' );
			$ui->show_post_nav->helptext = _t( 'Set to true to show single post navigation links, false to hide them.' );
		$ui->append( 'text', 'tags_count', __CLASS__.'__tags_count', _t( 'Tag Cloud Count:' ), 'optionscontrol_text' );
			$ui->tags_count->helptext = _t( 'Set to the number of tags to display on the default "cloud".' );

		// Save
		$ui->append( 'submit', 'save', _t( 'Save' ) );
		$ui->set_option( 'success_message', _t( 'Options saved' ) );
		$ui->out();
	}

	/**
	 * Execute on theme init to apply these filters to output
	 */
	public function action_init_theme()
	{
		// Apply Format::autop() to comment content...
		Format::apply( 'autop', 'comment_content_out' );
		// Truncate content excerpt at "more" or 56 characters...
		Format::apply( 'autop', 'post_content_excerpt' );
		Format::apply_with_hook_params( 'more', 'post_content_excerpt', '', 56, 1 );

		// Add FormUI template placing the input before the label
		$this->add_template( 'charcoal_text', dirname( __FILE__ ) . '/formcontrol_text.php' );
	}

	/**
	 * Add some variables to the template output
	 */
	public function add_template_vars()
	{
		parent::add_template_vars();

		// Use theme options to set values that can be used directly in the templates
		$opts = Options::get_group( __CLASS__ );

		$this->assign( 'show_title_image', $opts['show_title_image'] );
		$this->assign( 'home_label', $opts['home_label'] );
		$this->assign( 'show_powered', $opts['show_powered'] );
		$this->assign( 'display_login', $opts['display_login'] );
		$this->assign( 'tags_in_multiple', $opts['tags_in_multiple'] );
		$this->assign( 'post_class', 'post' . ( ! $opts['show_entry_paperclip'] ? ' alt' : '' ) );
		$this->assign( 'page_class', 'post' . ( ! $opts['show_page_paperclip'] ? ' alt' : '' ) );
		$this->assign( 'show_post_nav', $opts['show_post_nav'] );
		$this->assign( 'loggedin', User::identify()->loggedin );

		$locale = Options::get( 'locale' );
		if ( file_exists( Site::get_dir( 'theme', true ). $locale . '.css' ) ) {
			$this->assign( 'localized_css', $locale . '.css' );
		}
		else {
			$this->assign( 'localized_css', false );
		}

		if ( !$this->template_engine->assigned( 'pages' ) ) {
			$this->assign( 'pages', Posts::get( 'page_list' ) );
		}
		$this->assign( 'post_id', ( isset( $this->post ) && $this->post->content_type == Post::type( 'page' ) ) ? $this->post->id : 0 );

		if ( is_object($this->request) && $this->request->display_entries_by_tag ) {
			if ( count( $this->include_tag ) && count( $this->exclude_tag ) == 0 ) {
				$this->tags_msg = _t( 'Displaying posts tagged: %s', array( Format::tag_and_list( $this->include_tag ) ) );
			}
			else if ( count( $this->exclude_tag ) && count( $this->include_tag ) == 0 ) {
				$this->tags_msg = _t( 'Displaying posts not tagged: %s', array( Format::tag_and_list( $this->exclude_tag ) ) );
			}
			else {
				$this->tags_msg = _t( 'Displaying posts tagged: %s and not %s', array( Format::tag_and_list( $this->include_tag ), Format::tag_and_list( $this->exclude_tag ) ) );
			}
		}
	}

	/**
	 * Convert a post's tags array into a usable list of links
	 *
	 * @param array $array The tags array from a Post object
	 * @return string The HTML of the linked tags
	 */
	public function filter_post_tags_out( $array )
	{
		$fn = function($a) {return " $a->term) ) . "\" rel=\"tag\">" . $a->term_display . "";};
		$array = array_map( $fn, (array)$array );
		$out = implode( ' ', $array );
		return $out;
	}

	public function theme_post_comments_link( $theme, $post )
	{
		$c = $post->comments->approved->count;
		return 0 == $c ? _t( 'No Comments' ) : sprintf( _n( '%1$d Comment', '%1$d Comments', $c ), $c );
	}

	public function filter_post_content_excerpt( $return )
	{
		return strip_tags( $return );
	}

	public function theme_search_prompt( $theme, $criteria, $has_results )
	{
		$out =array();
		$keywords = explode( ' ', trim( $criteria ) );
		foreach ( $keywords as $keyword ) {
			$out[]= '' . $keyword . '';
		}

		if ( sizeof( $keywords ) > 1 ) {
			if ( $has_results ) {
				return _t( 'Search results for \'%s\'', array( implode( ' ', $out ) ) );
				exit;
			}
			return _t( 'No results found for your search \'%s\'', array( $criteria ) ) . '
'. _t( 'You can try searching for \'%s\'', array( implode( '\' or \'', $out ) ) );
		}
		else {
			return _t( 'Search results for \'%s\'', array( $criteria ) );
			exit;
		}
		return _t( 'No results found for your search \'%s\'', array( $criteria ) );

	}

	public function theme_search_form( $theme )
	{
		return $theme->fetch( 'searchform' );
	}

	/**
	 * Returns an unordered list of all used Tags
	 */
	public function theme_show_tags ( $theme )
	{
		$limit = Options::get( __CLASS__ . '__tags_count' );
		$sql ="
			SELECT t.term AS slug, t.term_display AS text, count(tp.object_id) as ttl
			FROM {terms} t
			INNER JOIN {object_terms} tp
			ON t.id=tp.term_id
			INNER JOIN {posts} p
			ON p.id=tp.object_id AND p.status = ?
			WHERE t.vocabulary_id = ? AND tp.object_type_id = ?
			GROUP BY t.term, t.term_display
			ORDER BY t.term_display
			LIMIT {$limit}
		";
		$tags = DB::get_results( $sql, array( Post::status( 'published' ), Tags::vocabulary()->id, Vocabulary::object_type_id( 'post' ) ) );
		foreach ( $tags as $index => $tag ) {
			$tags[$index]->url = URL::get( 'display_entries_by_tag', array( 'tag' => $tag->slug ) );
		}
		$theme->taglist = $tags;

		return $theme->fetch( 'taglist' );
	}

	/**
	 * Customize comment form layout. Needs thorough commenting.
	 */
	public function action_form_comment( $form ) {
		$form->cf_commenter->caption = '' . _t( 'Name' ) . ' ' . ( Options::get( 'comments_require_id' ) == 1 ? _t( '(Required)' ) : '' ) . '';
		$form->cf_commenter->template = 'charcoal_text';
		$form->cf_email->caption = '' . _t( 'Mail' ) . ' ' . _t( '(will not be published' ) .' ' . ( Options::get( 'comments_require_id' ) == 1 ? _t( '- Required)' ) : ')' ) . '';
		$form->cf_email->template = 'charcoal_text';
		$form->cf_url->caption = '' . _t( 'Website' ) . '';
		$form->cf_url->template = 'charcoal_text';
		$form->cf_content->caption = '';
		$form->cf_submit->caption = _t( 'Submit' );
	}

	/**
	 * Add a charcoal_menu block to the list of available blocks
	 */
	public function filter_block_list($block_list)
	{
		$block_list['charcoal_menu'] = _t('Charcoal Menu');
		return $block_list;
	}

	/**
	 * Produce a menu for the Charcoal menu block from all of the available pages
	 */
	public function action_block_content_charcoal_menu($block, $theme)
	{
		$menus = array('home' => array(
			'link' => Site::get_url( 'habari' ),
			'title' => Options::get( 'title' ),
			'caption' => Options::get( 'Charcoal__home_label', _t( 'Blog' ) ),
			'cssclass' => $theme->request->display_home ? 'current_page_item' : '',
		));
		$pages = Posts::get( 'page_list' );
		foreach($pages as $page) {
			$menus[] = array(
				'link' => $page->permalink,
				'title' => $page->title,
				'caption' => $page->title,
				'cssclass' => (isset($theme->post) && $theme->post->id == $page->id) ? 'current_page_item' : '',
			);
		}
		$block->menus = $menus;
	}

}
?>


code:
<?xml version="1.0" encoding="utf-8" ?>
<pluggable type="theme" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://schemas.habariproject.org/pluggable/0.8">
	<name>Charcoal</name>
	<class>Charcoal</class>
	<license url="http://www.apache.org/licenses/LICENSE-2.0.html">Apache Software License 2.0</license>

	<author url="http://habariproject.org/">Habari Community</author>

	<version>0.5</version>
	<url>http://habariproject.org/</url>
	<description><![CDATA[Charcoal is a Habari signature release, demonstrating the craft and style of the Habari platform.]]></description>

	<copyright>2009</copyright>

	<template_engine>rawphpengine</template_engine>

	<areas>
		<area name="sidebar">
			<description><![CDATA[The sidebar area]]></description>
		</area>
		<area name="nav">
			<description><![CDATA[The sidebar area]]></description>
		</area>
	</areas>

</pluggable>

repo_name: DaSourcerer/habari


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

<?php _e("It seems you couldn't find what you are looking for."); ?>

<?php _e('Perhaps you can try searching.'); ?>

						<?php $theme->display ( 'searchform' ); ?>

		<?php $theme->display ( 'sidebar' ); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php if ( Session::has_messages() ) {
		Session::messages_out();
	}
?>

<?php echo $theme->comments_count($post,'%d Responses','%d Response','%d Responses'); ?> <?php _e('to'); ?> <?php echo $post->title; ?>

<a href="<?php echo $post->comment_feed_link; ?>"><?php _e('Feed for this Entry'); ?>
	<?php if ( $post->comments->pingbacks->count ) : ?>

<?php echo $theme->pingback_count($post); ?>

					<?php foreach ( $post->comments->pingbacks->approved as $pingback ) : ?>
						<li id="ping-<?php echo $pingback->id; ?>">

								<?php echo $pingback->content; ?>

<a href="<?php echo $pingback->url; ?>" title=""><?php echo $pingback->name; ?>

					<?php endforeach; ?>

		<?php endif; ?>

<?php echo $post->comments->comments->approved->count; ?> <?php echo _n( 'Comment', 'Comments', $post->comments->comments->approved->count ); ?>

		<?php
		if ( $post->comments->moderated->count ) {
			foreach ( $post->comments->comments->moderated as $comment ) {
			$class = 'class="comment';
			if ( $comment->status == Comment::STATUS_UNAPPROVED ) {
				$class.= '-unapproved';
			}
			$class.= '"';
		?>

			<li id="comment-<?php echo $comment->id; ?>" <?php echo $class; ?>>

		        <?php echo $comment->content_out; ?>

#<a href="#comment-<?php echo $comment->id; ?>" class="counter" title="<?php _e('Permanent Link to this Comment'); ?>"><?php echo $comment->id; ?> |
		       <?php _e('Comment by'); ?> <?php echo $theme->comment_author_link($comment); ?>
		        <?php _e('on'); ?> <a href="#comment-<?php echo $comment->id; ?>" title="<?php _e('Time of this comment'); ?>"><?php /* @locale Date formats according to http://php.net/manual/en/function.date.php */ $comment->date->out( _t( 'M j, Y h:ia' ) ); ?>
<?php if ( $comment->status == Comment::STATUS_UNAPPROVED ) : ?> <?php _e('In moderation'); ?><?php endif; ?>

		<?php
			}
		}
		else {
			_e('
There are currently no comments.
');
		}
		?>

<?php $post->comment_form()->out(); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

			<?php foreach ( $posts as $post ) { ?>
				<div id="post-<?php echo $post->id; ?>" class="<?php echo $post->statusname; ?>">

<a href="<?php echo $post->permalink; ?>" title="<?php echo $post->title; ?>"><?php echo $post->title_out; ?>

<?php echo $post->pubdate_out; ?>

						<?php echo $post->content_out; ?>

						<?php if ( count( $post->tags ) ) { ?>

<?php _e('Tagged:'); ?> <?php echo $post->tags_out; ?>

						<?php } ?>

<?php echo $theme->comments_link($post,'%d Comments','%d Comment','%d Comments'); ?>

					<?php if ( $loggedin ) { ?>
					<a href="<?php echo $post->editlink; ?>" title="<?php _e('Edit post'); ?>"><?php _e('Edit'); ?>
					<?php } ?>

			<?php } ?>

				<?php echo $theme->prev_page_link('« ' . _t('Newer Posts')); ?> <?php echo $theme->page_selector( null, array( 'leftSide' => 2, 'rightSide' => 2 ) ); ?> <?php echo $theme->next_page_link('» ' . _t('Older Posts')); ?>

		<?php $theme->display ( 'sidebar' ); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

				<?php if ( $previous = $post->ascend() ): ?>
				 « <a href="<?php echo $previous->permalink ?>" title="<?php echo $previous->slug ?>"><?php echo $previous->title ?>
				<?php endif; ?>
				<?php if ( $next = $post->descend() ): ?>
				<a href="<?php echo $next->permalink ?>" title="<?php echo $next->slug ?>"><?php echo $next->title ?> »
				<?php endif; ?>

				<div id="post-<?php echo $post->id; ?>" class="<?php echo $post->statusname; ?>">

<a href="<?php echo $post->permalink; ?>" title="<?php echo $post->title; ?>"><?php echo $post->title_out; ?>

<?php echo $post->pubdate_out; ?>

						<?php echo $post->content_out; ?>

						<?php if ( count( $post->tags ) ) { ?>

<?php _e('Tagged:'); ?> <?php echo $post->tags_out; ?>

						<?php } ?>

						<?php if ( $loggedin ) { ?>
						<a href="<?php echo $post->editlink; ?>" title="<?php _e('Edit post'); ?>"><?php _e('Edit'); ?>
						<?php } ?>

			<?php include 'commentform.php'; ?>

		<?php $theme->display ( 'sidebar' ); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>

<?php Options::out('title'); ?> <?php _e('is powered by'); ?> Habari

	<?php echo $theme->footer(); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="<?php echo $locale; ?>">

	<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $charset; ?>">
	<title><?php if ($request->display_entry && isset($post)) { echo "{$post->title} - "; } ?><?php Options::out( 'title' ) ?></title>
	<meta name="generator" content="Habari">

	<link rel="stylesheet" type="text/css"  media="print" href="<?php Site::out_url( 'vendor'); ?>/blueprint/print.css">
	<link rel="stylesheet" type="text/css" media ="screen" href="<?php Site::out_url( 'vendor'); ?>/blueprint/screen.css">
	<link rel="stylesheet" type="text/css" media="screen" href="<?php Site::out_url( 'theme' ); ?>/style.css">
	<link rel="Shortcut Icon" href="<?php Site::out_url( 'theme' ); ?>/favicon.ico">
	<?php echo $theme->header(); ?>

<body class="<?php echo $theme->body_class(); ?>">

<a href="<?php Site::out_url( 'habari'); ?>" title="<?php Options::out( 'title' ); ?>"> <?php Options::out( 'title' ); ?>

<?php Options::out( 'tagline' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

			<?php foreach ( $posts as $post ) { ?>
				<div id="post-<?php echo $post->id; ?>" class="<?php echo $post->statusname; ?>">

<a href="<?php echo $post->permalink; ?>" title="<?php echo $post->title; ?>"><?php echo $post->title_out; ?>

<?php echo $post->pubdate_out; ?>

						<?php echo $post->content_out; ?>

						<?php if ( count( $post->tags ) ) { ?>

<?php _e('Tagged:'); ?> <?php echo $post->tags_out; ?>

						<?php } ?>

<?php echo $theme->comments_link($post,'%d Comments','%d Comment','%d Comments'); ?>

					<?php if ( $loggedin ) { ?>
					<a href="<?php echo $post->editlink; ?>" title="<?php _e('Edit post'); ?>"><?php _e('Edit'); ?>
					<?php } ?>

			<?php } ?>

				<?php echo $theme->prev_page_link('« ' . _t('Newer Posts')); ?> <?php echo $theme->page_selector( null, array( 'leftSide' => 2, 'rightSide' => 2 ) ); ?> <?php echo $theme->next_page_link('» ' . _t('Older Posts')); ?>

		<?php $theme->display('sidebar'); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

			<?php include 'loginform.php'; ?>

		<?php $theme->display ( 'sidebar' ); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php
if ( isset( $error ) ) {
?>

<?php _e('That login is incorrect.'); ?>

<?php
}
if ( $loggedin ) {
?>

<?php _e('You are logged in as'); ?> <?php echo $user->username; ?>.

<?php _e('Want to'); ?> <a href="<?php Site::out_url( 'habari' ); ?>/auth/logout"><?php _e('log out'); ?>?

<?php
}
else {
?>
<?php Plugins::act( 'theme_loginform_before' ); ?>
<form method="post" action="<?php URL::out( 'auth', array( 'page' => 'login' ) ); ?>">

		<?php _e('Name:'); ?>
		<input type="text" size="25" name="habari_username" id="habari_username">

		<?php _e('Password:'); ?>
		<input type="password" size="25" name="habari_password" id="habari_password">

	<?php Plugins::act( 'theme_loginform_controls' ); ?>

		<input type="submit" value="<?php _e('GO!'); ?>">

		<input class="submit" type="submit" name="submit_button" value="<?php _e('Reset password'); ?>">

</form>
<?php Plugins::act( 'theme_loginform_after' ); ?>
<?php
}
?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

				<div id="post-<?php echo $post->id; ?>" class="<?php echo $post->statusname; ?>">

<a href="<?php echo $post->permalink; ?>" title="<?php echo $post->title; ?>"><?php echo $post->title_out; ?>

						<?php echo $post->content_out; ?>

						<?php if ( $loggedin ) { ?>
						<a href="<?php echo $post->editlink; ?>" title="<?php _e('Edit post'); ?>"><?php _e('Edit'); ?>
						<?php } ?>

		<?php $theme->display ( 'sidebar' ); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

<?php _e('Results for search of'); ?> "<?php echo Utils::htmlspecialchars( $criteria ); ?>"

			<?php if (isset($post)) : ?>
<?php foreach ( $posts as $post ): ?>
				<div id="post-<?php echo $post->id; ?>" class="<?php echo $post->statusname; ?>">

<a href="<?php echo $post->permalink; ?>" title="<?php echo $post->title; ?>"><?php echo $post->title_out; ?>

					<?php /* @locale Date formats according to http://php.net/manual/en/function.date.php */ $post->pubdate->out( _t( 'F j, Y' ) ); ?> -	<?php echo $post->content_excerpt; ?>

						<?php if ( count( $post->tags ) ) { ?>

<?php _e('Tagged:'); ?> <?php echo $post->tags_out; ?>

						<?php } ?>

<?php echo $theme->comments_link($post,'%d Comments','%d Comment','%d Comments'); ?>

					<?php if ( $loggedin ) { ?>
					<a href="<?php echo $post->editlink; ?>" title="<?php _e('Edit post'); ?>"><?php _e('Edit'); ?>
					<?php } ?>

<?php endforeach; ?>

				<?php echo $theme->prev_page_link('« ' . _t('Newer Results')); ?> <?php echo $theme->page_selector( null, array( 'leftSide' => 2, 'rightSide' => 2 ) ); ?> <?php echo $theme->next_page_link('» ' . _t('Older Results')); ?>
			<?php else: ?>

<?php _e('No results for'); ?> <?php echo Utils::htmlspecialchars( $criteria ); ?>

			<?php endif; ?>

		<?php $theme->display ( 'sidebar' ); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>

<?php Plugins::act( 'theme_searchform_before' ); ?>
     <form method="get" id="searchform" action="<?php URL::out('display_search'); ?>">

<input type="text" id="s" name="criteria" value="<?php if ( isset( $criteria ) ) { echo htmlentities($criteria, ENT_COMPAT, 'UTF-8'); } else { _e('Search'); } ?>">
 <input type="submit" id="searchsubmit" value="<?php _e('Go!'); ?>">

     </form>
<?php Plugins::act( 'theme_searchform_after' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die( 'No direct access' ); } ?>
<div class="<?php echo $block->css_classes; ?>">
<?php if($block->_show_title):?>
<?php echo $block->title; ?>
<?php endif; ?>
<?php echo $content; ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php Plugins::act( 'theme_sidebar_top' ); ?>

<a id="rss" href="<?php echo $theme->feed_alternate(); ?>" class="block"><?php _e('Subscribe to Feed'); ?>

<?php _e('Navigation'); ?>

<a href="<?php Site::out_url( 'habari' ); ?>"><?php _e('Home'); ?>

		<?php
		// List Pages
		foreach ( $pages as $page ) {
			echo '
permalink . '" title="' . $page->title . '">' . $page->title . '
' . "\n";
		}
		?>

<?php _e('Asides'); ?>

		<?php
	          foreach($asides as $post):
              echo '
';
	      // @locale Date formats according to http://php.net/manual/en/function.date.php
              echo $post->pubdate->out( _t( 'F j, Y' ) ) . ' - ' . '';
              echo 'permalink .'">' . $post->title_out . ''. $post->content_out;
              echo '
';

 		?>
	<?php endforeach; ?>

	<?php echo $theme->area( 'sidebar' ); ?>

<?php Plugins::act( 'theme_sidebar_bottom' ); ?>


code:
/* =General
-----------------------------------------------------------------------------*/

blockquote {
	border-left: 10px solid #41670F;
	padding: 5px 0 5px 20px;
	margin: 10px 0 10px 40px;
}

blockquote p {
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	padding: 8px 0;
	font-style: italic;
}

.right {
	float: right;
}

.left {
	float: left;
}

img.right {
	border: 1px solid #666;
	padding: 3px;
	margin-left: 8px;
}

img.left {
	border: 1px solid #666;
	padding: 3px;
	margin-right: 8px;
}

/* Class for clearing floats */

.clear {
	clear: both;
}

/* define inline elements as block not used, conflicts with areas and blocks default class

.block {
	display: block;
}
 */

/* Remove border around linked images */

img {
	border: 0;
}

/* =Typography
-----------------------------------------------------------------------------*/

body {
	font: 108% "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #666;
	background: #EEEEEE;
}

/* =Structure
-----------------------------------------------------------------------------*/

#wrapper {
	margin: 0 auto;
	background: #fff;
}

#masthead {
	margin: 20px 0 40px 0;
	border-bottom: 2px dashed #41670F;
	padding-bottom: 5px;
}

#content {
	text-align: left;
}

#primaryContent {
	margin-bottom: 10px;
}

#secondaryContent {

}

#footer {
	height: 60px;
	border-top: 2px dotted #41670F;
	padding-top: 5px;
	margin-top: 5px;
}

/* =Headings
-----------------------------------------------------------------------------*/

h1 {
	font-size: 225%;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #545454;
}

h2 {
	color: #545454;
	font-family: Trebuchet, Tahoma, Arial, sans-serif;
}

h3 {
	font-size: 123.1%;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#masthead #branding h3 {
	font-style: italic;
	font-size: 125%;
}

#primaryContent h2 {
	font-size: 159%;
}

#page #content #primaryContent h2 {
	text-align: center;
	margin: 0;
}

#secondaryContent h2 {
	font-size: 144%;
}

#site {

}

#rss {

}

#aside {

}

#commentheading {

}

/* =Links
-----------------------------------------------------------------------------*/

a:link {
	color: #41670F;
}

a:visited {
	color: #41670F;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: #A37941;
}

a:active {
	color: #41670F;
}

ul#nav li a:link, ul#nav li a:visited {
	display: block;
	width: 200px;
	padding-bottom: 5px;
	color: #666;
	text-decoration: none;
	text-indent: 20px;
}

ul#nav li a:hover {
	color: #000;
}

#branding a {
	border: none;
}

ul#tidbits a {
	text-decoration: none;
}

/* =Masthead
-----------------------------------------------------------------------------*/

#branding {
}

/* =Main Nav
-----------------------------------------------------------------------------*/

/* =Primary Content
-----------------------------------------------------------------------------*/

#post-nav {
	margin: 10px 5px 40px 5px;
}

.cal {
	height: 76px;
	width: 70px;
	float: left;
	margin: 0  12px 7px 0;
	text-align: center;
	border: 1px solid #A37941;
}

.calyear {
	background: #A37941;
	color: #fff;
	padding: 0 14px;
}

.calday {
	font-size: 138.5%;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #A37941;
}

.calmonth {
	font-size: 77%;
	margin: 0;
	border-top: 1px solid #A37941;
	color: #A37941;
	width: 100%;
}

.entry {
	font-family: Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.draft {
	background: #FFF6BF;
	color: #514721;
	border-color: #FFD324;
	padding: 5px;
}

.entry ul {
	list-style-type: square;
	padding-left: 80px;
}

.entry li {
	padding-bottom: 4px;
}

.entryMeta {
	margin: 40px 5px 45px 5px;
	font-size: 92%;
}

.commentCount {
	float: right;
}

#pagenav {
	text-align: center;
	border: 1px solid #ccc;
	padding: 4px;
	background: #F5F5F5;
	margin-top: 10px;
}

#pagenav a {
	text-decoration: none;
	padding: 2px;
}

#pagenav a:hover {
	background: #545454;
	padding: 2px;
	color: #fff;
	text-decoration: none;
}

#pagenav a.current-page {
	border: 1px solid #545454;
	color: #545454;
	padding: 2px;
}

#content img {
        max-width: 100%;
}

/* =Secondary Content
-----------------------------------------------------------------------------*/

ul#nav {
	list-style-type: none;
}

ul#nav li {
	margin-bottom: 7px;
}

ul#asides {
	list-style-type: none;
	margin-left: 5px;
}

ul#moreposts {
	list-style-type: none;
	margin-left: 5px;
}

ul#moreposts li {
	padding-bottom: 5px;
}

ul#recentcomments {
	list-style-type: none;
	margin-left: 5px;
}

ul#recentcomments li {
	margin-bottom: 8px;
	list-style-type: none;
}

.block-type-twitter ul li {
	list-style-type: none;
}

.block-type-twitter ul li img {
	float: left;
	padding-right: 6px;
	margin: 3px;
}

/* =Footer
-----------------------------------------------------------------------------*/

#footer p {
	text-align: center;
}

/* =Forms
-----------------------------------------------------------------------------*/

/* Removes fieldset borders. even on Opea 7 */

fieldset {
	border: 1px solid transparent;
}

/* =Tables
-----------------------------------------------------------------------------*/

table {
	border-spacing: 0;
	border-collapse: collapse;
}

td {
	text-align: left;
	font-weight: normal;
}

/*Comments-----------------------------------------------------------------------------*/

#comments {
	padding-top: 20px;
}

#pings {
	margin: 15px 0 25px 0;
}

.ping-meta {
	background: #ddd;
	border: 1px solid #ccc;
	padding: 4px;
	margin-bottom: 15px;
}

ul#pings-list {
	list-style-type: none;
}

ul#commentlist {
	list-style-type: none;
}

.comment {
	margin-bottom: 15px;
}

.comment-content {
	border: 1px solid #ccc;
	padding: 4px;
	background: #F5F5F5;
}

.comment-unapproved .comment-content {
	background: #ffc;
}

.comment-meta {
	background: #ddd;
	border: 1px solid #ccc;
	padding: 4px;
}

/* Comment Form - heavily leaned on code from Andy Budd's book CSS Mastery, re-used with permission from author */

/* fieldset styling */

#comment_form {
	padding-top: 25px;
}

fieldset {
	margin: 1em 0;

/*  space out the fieldsets a little*/
	padding: 1em;
	border: 1px solid #ccc;
	background-color: #F5F5F5
}

/* legend styling */

legend {
	font-weight: bold;
}

form div {
	position: relative;
	width: 100%;
	margin-bottom: 20px; /* not sure if this is really the place to do this. */
}

/* style for  labels */

label {
	float: left;
	width: 10em;
}

input[type="text"] {
	width: 200px;
}

input[type="text"], textarea {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

input#submit {
	width: auto;
}

label .required {
	position: absolute;
	margin-left: 11em;
	left: 200px;
	right: 0;
	font-size: small;
	font-style: italic;
	color: #760000;
	padding-left: 35px;
}

/* style form elements on focus */

input:focus, textarea:focus {
	background: #ffc;
}

textarea {
	width: 350px;
	height: 200px;
}

/*Search Form*/

#searchsubmit {
	margin: 5px auto;
	width: 160px;
}

#s {
	height: 1.6em;
	padding: 3px;
	font-size: 100%;
}


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); } ?>
<?php $theme->display ( 'header' ); ?>

<?php echo $tags_msg; ?>

			<?php foreach ( $posts as $post ) { ?>
				<div id="post-<?php echo $post->id; ?>" class="<?php echo $post->statusname; ?>">

<a href="<?php echo $post->permalink; ?>" title="<?php echo $post->title; ?>"><?php echo $post->title_out; ?>

					<?php /* @locale Date formats according to http://php.net/manual/en/function.date.php */ echo $post->pubdate->out( _t( 'F j, Y' ) ); ?> -	<?php echo $post->content_excerpt; ?>

						<?php if ( count( $post->tags ) ) { ?>

<?php _e('Tagged:'); ?> <?php echo $post->tags_out; ?>

						<?php } ?>

<?php echo $theme->comments_link($post,'%d Comments','%d Comment','%d Comments'); ?>

					<?php if ( $loggedin ) { ?>
					<a href="<?php echo $post->editlink; ?>" title="<?php _e('Edit post'); ?>"><?php _e('Edit'); ?>
					<?php } ?>

			<?php } ?>

				<?php echo $theme->prev_page_link('« ' . _t('Newer Results')); ?> <?php echo $theme->page_selector( null, array( 'leftSide' => 2, 'rightSide' => 2 ) ); ?> <?php echo $theme->next_page_link('» ' . _t('Older Results')); ?>

		<?php $theme->display ( 'sidebar' ); ?>

	<?php $theme->display ( 'footer' ); ?>


code:
<?php if ( !defined( 'HABARI_PATH' ) ) { die('No direct access'); }

/**
 * Mzingi is a custom Theme class for the mzingi theme.
 *
 * @package Habari
 */

/**
 * @todo This stuff needs to move into the custom theme class:
 */

/**
 * A custom theme for mzingi output
 */
class Mzingi extends Theme
{

	public function action_init_theme()
	{
		// Apply Format::autop() to comment content...
		Format::apply( 'autop', 'comment_content_out' );
		// Apply Format::tag_and_list() to post tags...
		Format::apply( 'tag_and_list', 'post_tags_out' );
		// Only uses the  tag, with the 'more' as the link to full post
		Format::apply_with_hook_params( 'more', 'post_content_out', 'more' );
		// Creates an excerpt option. echo $post->content_excerpt;
		Format::apply( 'autop', 'post_content_excerpt' );
		Format::apply_with_hook_params( 'more', 'post_content_excerpt', 'more',60, 1 );
		// Format the calendar like date for home, entry.single and entry.multiple templates
		Format::apply( 'format_date', 'post_pubdate_out','{Y}
{j}
{F}' );
	}

	/**
	 * Add additional template variables to the template output.
	 *
	 *  You can assign additional output values in the template here, instead of
	 *  having the PHP execute directly in the template.  The advantage is that
	 *  you would easily be able to switch between template types (RawPHP/Smarty)
	 *  without having to port code from one to the other.
	 *
	 *  You could use this area to provide "recent comments" data to the template,
	 *  for instance.
	 *
	 *  Note that the variables added here should possibly *always* be added,
	 *  especially 'user'.
	 *
	 *  Also, this function gets executed *after* regular data is assigned to the
	 *  template.  So the values here, unless checked, will overwrite any existing
	 *  values.
	 */
	public function add_template_vars()
	{
		if ( !$this->template_engine->assigned( 'pages' ) ) {
			$this->assign( 'pages', Posts::get( 'page_list' ) );
		}
		//For Asides loop in sidebar.php
		$this->assign( 'asides', Posts::get( 'asides' ) );

		if ( $this->request->display_entries_by_tag ) {
			if ( count( $this->include_tag ) && count( $this->exclude_tag ) == 0 ) {
				$this->tags_msg = _t( 'Posts tagged with %s', array( Format::tag_and_list( $this->include_tag ) ) );
			}
			else if ( count( $this->exclude_tag ) && count( $this->include_tag ) == 0 ) {
				$this->tags_msg = _t( 'Posts not tagged with %s', array( Format::tag_and_list( $this->exclude_tag ) ) );
			}
			else {
				$this->tags_msg = _t( 'Posts tagged with %s and not with %s', array( Format::tag_and_list( $this->include_tag ), Format::tag_and_list( $this->exclude_tag ) ) );
			}
		}

		parent::add_template_vars();

	}

	public function act_display_home( $user_filters = array() )
	{
		//To exclude aside tag from main content loop
		parent::act_display_home( array( 'vocabulary' => array( 'tags:not:term' => 'aside' ) ) );
	}

	/**
	 * Customize comment form layout with fieldsets.
	 */
	public function action_form_comment( $form ) {
		//Create a fieldset for Name, Email and URL
		$form->append( 'fieldset', 'cf_commenterinfo', _t( 'About You' ) );
		//move the fieldset before Name
		$form->move_before( $form->cf_commenterinfo, $form->cf_commenter );
		//move the Name ( cf_commenter) into the fieldset
		$form->cf_commenter->move_into( $form->cf_commenterinfo );

		$form->cf_commenter->caption = _t( 'Name:' ) . '' . ( Options::get( 'comments_require_id' ) == 1 ? ' *' . _t( 'Required' ) : '' ) . '';
		//move the Email ( cf_email) into the Fieldset
		$form->cf_email->move_into( $form->cf_commenterinfo );

		$form->cf_email->caption = _t( 'Email Address:' ) . '' . ( Options::get( 'comments_require_id' ) == 1 ? ' *' . _t( 'Required' ) : '' ) . '';
		//move the URL into the fieldset
		$form->cf_url->move_into( $form->cf_commenterinfo );
		$form->cf_url->caption = _t( 'Web Address:' );
		//add a disclaimer/message
		$form->append('static','cf_disclaimer', _t( '
Email address is not published
' ) );
		//move the disclaimer into the fieldset
		$form->cf_disclaimer->move_into( $form->cf_commenterinfo );
		//create a second fieldset for the comment textarea
		$form->append('fieldset', 'cf_contentbox', _t( 'Add to the Discussion' ) );
		//move the fieldset befoer the textarea
		$form->move_before( $form->cf_contentbox, $form->cf_content );
		//move the textarea into the second fieldset
		$form->cf_content->move_into( $form->cf_contentbox );
	        $form->cf_content->caption = _t( 'Message: (Required)' );

		$form->cf_submit->caption = _t( 'Submit' );
	}

}

?>


code:
<?xml version="1.0" encoding="utf-8" ?>
<pluggable type="theme" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://schemas.habariproject.org/pluggable/0.8">
	<name>Mzingi</name>
	<class>Mzingi</class>
	<license url="http://www.apache.org/licenses/LICENSE-2.0.html">Apache Software License 2.0</license>

	<author url="http://habariproject.org/">Habari Community</author>

	<version>1.0</version>
	<url>http://habariproject.org/</url>
	<description><![CDATA[Mzingi, Swahili for foundation, is intended as a clean, simple design that can be used
		as a framework for customization and theme development.]]></description>

	<template_engine>rawphpengine</template_engine>

	<copyright>2009</copyright>
	<areas>
		<area name="sidebar">
			<description><![CDATA[Sidebar]]></description>
		</area>
	</areas>
</pluggable>


code:
/* -----------------------------------------------------------------------

 Blueprint CSS Framework 1.0
 http://blueprintcss.org

   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */

/* ie.css */
body {text-align:center;}
.container {text-align:left;}
* html .column, * html .span-1, * html .span-2, * html .span-3, * html .span-4, * html .span-5, * html .span-6, * html .span-7, * html .span-8, * html .span-9, * html .span-10, * html .span-11, * html .span-12, * html .span-13, * html .span-14, * html .span-15, * html .span-16, * html .span-17, * html .span-18, * html .span-19, * html .span-20, * html .span-21, * html .span-22, * html .span-23, * html .span-24 {display:inline;overflow-x:hidden;}
* html legend {margin:0px -8px 16px 0;padding:0;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
html>body p code {*white-space:normal;}
hr {margin:-8px auto 11px;}
img {-ms-interpolation-mode:bicubic;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
fieldset {padding-top:0;}
legend {margin-top:-0.2em;margin-bottom:1em;margin-left:-0.5em;}
textarea {overflow:auto;}
label {vertical-align:middle;position:relative;top:-0.25em;}
input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
input.text:focus, input.title:focus {border-color:#666;}
input.text, input.title, textarea, select {margin:0.5em 0;}
input.checkbox, input.radio {position:relative;top:.25em;}
form.inline div, form.inline p {vertical-align:middle;}
form.inline input.checkbox, form.inline input.radio, form.inline input.button, form.inline button {margin:0.5em 0;}
button, input.button {position:relative;top:0.25em;}


code:
Buttons

* Gives you great looking CSS buttons, for both  and <button>.
* Demo: particletree.com/features/rediscovering-the-button-element

Credits
----------------------------------------------------------------

* Created by Kevin Hale [particletree.com]
* Adapted for Blueprint by Olav Bjorkoy [bjorkoy.com]

Usage
----------------------------------------------------------------

1) Add this plugin to lib/settings.yml.
   See compress.rb for instructions.

2) Use the following HTML code to place the buttons on your site:

  <button type="submit" class="button positive">
     Save
  </button>

     Change Password

     Cancel


code:
/* --------------------------------------------------------------

   buttons.css
   * Gives you some great CSS-only buttons.

   Created by Kevin Hale [particletree.com]
   * particletree.com/features/rediscovering-the-button-element

   See Readme.txt in this folder for instructions.

-------------------------------------------------------------- */

a.button, button {
  display:block;
  float:left;
  margin: 0.7em 0.5em 0.7em 0;
  padding:5px 10px 5px 7px;   /* Links */

  border:1px solid #dedede;
  border-top:1px solid #eee;
  border-left:1px solid #eee;

  background-color:#f5f5f5;
  font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size:100%;
  line-height:130%;
  text-decoration:none;
  font-weight:bold;
  color:#565656;
  cursor:pointer;
}
button {
  width:auto;
  overflow:visible;
  padding:4px 10px 3px 7px;   /* IE6 */
}
button[type] {
  padding:4px 10px 4px 7px;   /* Firefox */
  line-height:17px;           /* Safari */
}
*:first-child+html button[type] {
  padding:4px 10px 3px 7px;   /* IE7 */
}
button img, a.button img{
  margin:0 3px -3px 0 !important;
  padding:0;
  border:none;
  width:16px;
  height:16px;
  float:none;
}

/* Button colors
-------------------------------------------------------------- */

/* Standard */
button:hover, a.button:hover{
  background-color:#dff4ff;
  border:1px solid #c2e1ef;
  color:#336699;
}
a.button:active{
  background-color:#6299c5;
  border:1px solid #6299c5;
  color:#fff;
}

/* Positive */
body .positive {
  color:#529214;
}
a.positive:hover, button.positive:hover {
  background-color:#E6EFC2;
  border:1px solid #C6D880;
  color:#529214;
}
a.positive:active {
  background-color:#529214;
  border:1px solid #529214;
  color:#fff;
}

/* Negative */
body .negative {
  color:#d12f19;
}
a.negative:hover, button.negative:hover {
  background-color:#fbe3e4;
  border:1px solid #fbc2c4;
  color:#d12f19;
}
a.negative:active {
  background-color:#d12f19;
  border:1px solid #d12f19;
  color:#fff;
}


code:
Fancy Type

* Gives you classes to use if you'd like some
  extra fancy typography.

Credits and instructions are specified above each class
in the fancy-type.css file in this directory.

Usage
----------------------------------------------------------------

1) Add this plugin to lib/settings.yml.
   See compress.rb for instructions.


code:
/* --------------------------------------------------------------

   fancy-type.css
   * Lots of pretty advanced classes for manipulating text.

   See the Readme file in this folder for additional instructions.

-------------------------------------------------------------- */

/* Indentation instead of line shifts for sibling paragraphs. */
   p + p { text-indent:2em; margin-top:-1.5em; }
   form p + p  { text-indent: 0; } /* Don't want this in forms. */

/* For great looking type, use this code instead of asdf:
   asdf
   Best used on prepositions and ampersands. */

.alt {
  color: #666;
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: normal;
}

/* For great looking quote marks in titles, replace "asdf" with:
   “asdf”
   (That is, when the title starts with a quote mark).
   (You may have to change this value depending on your font size). */

.dquo { margin-left: -.5em; }

/* Reduced size type with incremental leading
   (http://www.markboulton.co.uk/journal/comments/incremental_leading/)

   This could be used for side notes. For smaller type, you don't necessarily want to
   follow the 1.5x vertical rhythm -- the line-height is too much.

   Using this class, it reduces your font size and line-height so that for
   every four lines of normal sized type, there is five lines of the sidenote. eg:

   New type size in em's:
     10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)

   New line-height value:
     12px x 1.5 = 18px (old line-height)
     18px x 4 = 72px
     72px / 5 = 14.4px (new line height)
     14.4px / 10px = 1.44 (new line height in em's) */

p.incr, .incr p {
  font-size: 10px;
  line-height: 1.44em;
  margin-bottom: 1.5em;
}

/* Surround uppercase words and abbreviations with this class.
   Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */

.caps {
  font-variant: small-caps;
  letter-spacing: 1px;
  text-transform: lowercase;
  font-size:1.2em;
  line-height:1%;
  font-weight:bold;
  padding:0 2px;
}


code:
Link Icons
* Icons for links based on protocol or file type.

This is not supported in IE versions < 7.

Credits
----------------------------------------------------------------

* Marc Morgan
* Olav Bjorkoy  [bjorkoy.com]

Usage
----------------------------------------------------------------

1) Add this line to your HTML:
  <link rel="stylesheet" href="css/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection">


code:
/* --------------------------------------------------------------

   link-icons.css
   * Icons for links based on protocol or file type.

   See the Readme file in this folder for additional instructions.

-------------------------------------------------------------- */

/* Use this class if a link gets an icon when it shouldn't. */
body a.noicon {
  background:transparent none !important;
  padding:0 !important;
  margin:0 !important;
}

/* Make sure the icons are not cut */
a[href^="http:"], a[href^="mailto:"], a[href^="http:"]:visited,
a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"], a[href$=".rss"],
a[href$=".rdf"], a[href^="aim:"] {
  padding:2px 22px 2px 0;
  margin:-2px 0;
  background-repeat: no-repeat;
  background-position: right center;
}

/* External links */
a[href^="http:"]          { background-image: url(icons/external.png); }
a[href^="mailto:"]        { background-image: url(icons/email.png); }
a[href^="http:"]:visited  { background-image: url(icons/visited.png); }

/* Files */
a[href$=".pdf"]   { background-image: url(icons/pdf.png); }
a[href$=".doc"]   { background-image: url(icons/doc.png); }
a[href$=".xls"]   { background-image: url(icons/xls.png); }

/* Misc */
a[href$=".rss"],
a[href$=".rdf"]   { background-image: url(icons/feed.png); }
a[href^="aim:"]   { background-image: url(icons/im.png); }


code:
RTL
* Mirrors Blueprint, so it can be used with Right-to-Left languages.

By Ran Yaniv Hartstein, ranh.co.il

Usage
----------------------------------------------------------------

1) Add this line to your HTML:
   <link rel="stylesheet" href="css/blueprint/plugins/rtl/screen.css" type="text/css" media="screen, projection">


code:
/* --------------------------------------------------------------

   rtl.css
   * Mirrors Blueprint for left-to-right languages

   By Ran Yaniv Hartstein [ranh.co.il]

-------------------------------------------------------------- */

body .container { direction: rtl; }
body .column, body .span-1, body .span-2, body .span-3, body .span-4, body .span-5, body .span-6, body .span-7, body .span-8, body .span-9, body .span-10, body .span-11, body .span-12, body .span-13, body .span-14, body .span-15, body .span-16, body .span-17, body .span-18, body .span-19, body .span-20, body .span-21, body .span-22, body .span-23, body .span-24 {
  float: right;
  margin-right: 0;
  margin-left: 10px;
  text-align:right;
}

body div.last { margin-left: 0; }
body table .last { padding-left: 0; }

body .append-1   { padding-right: 0; padding-left: 40px; }
body .append-2   { padding-right: 0; padding-left: 80px; }
body .append-3   { padding-right: 0; padding-left: 120px; }
body .append-4   { padding-right: 0; padding-left: 160px; }
body .append-5   { padding-right: 0; padding-left: 200px; }
body .append-6   { padding-right: 0; padding-left: 240px; }
body .append-7   { padding-right: 0; padding-left: 280px; }
body .append-8   { padding-right: 0; padding-left: 320px; }
body .append-9   { padding-right: 0; padding-left: 360px; }
body .append-10  { padding-right: 0; padding-left: 400px; }
body .append-11  { padding-right: 0; padding-left: 440px; }
body .append-12  { padding-right: 0; padding-left: 480px; }
body .append-13  { padding-right: 0; padding-left: 520px; }
body .append-14  { padding-right: 0; padding-left: 560px; }
body .append-15  { padding-right: 0; padding-left: 600px; }
body .append-16  { padding-right: 0; padding-left: 640px; }
body .append-17  { padding-right: 0; padding-left: 680px; }
body .append-18  { padding-right: 0; padding-left: 720px; }
body .append-19  { padding-right: 0; padding-left: 760px; }
body .append-20  { padding-right: 0; padding-left: 800px; }
body .append-21  { padding-right: 0; padding-left: 840px; }
body .append-22  { padding-right: 0; padding-left: 880px; }
body .append-23  { padding-right: 0; padding-left: 920px; }

body .prepend-1   { padding-left: 0; padding-right: 40px; }
body .prepend-2   { padding-left: 0; padding-right: 80px; }
body .prepend-3   { padding-left: 0; padding-right: 120px; }
body .prepend-4   { padding-left: 0; padding-right: 160px; }
body .prepend-5   { padding-left: 0; padding-right: 200px; }
body .prepend-6   { padding-left: 0; padding-right: 240px; }
body .prepend-7   { padding-left: 0; padding-right: 280px; }
body .prepend-8   { padding-left: 0; padding-right: 320px; }
body .prepend-9   { padding-left: 0; padding-right: 360px; }
body .prepend-10  { padding-left: 0; padding-right: 400px; }
body .prepend-11  { padding-left: 0; padding-right: 440px; }
body .prepend-12  { padding-left: 0; padding-right: 480px; }
body .prepend-13  { padding-left: 0; padding-right: 520px; }
body .prepend-14  { padding-left: 0; padding-right: 560px; }
body .prepend-15  { padding-left: 0; padding-right: 600px; }
body .prepend-16  { padding-left: 0; padding-right: 640px; }
body .prepend-17  { padding-left: 0; padding-right: 680px; }
body .prepend-18  { padding-left: 0; padding-right: 720px; }
body .prepend-19  { padding-left: 0; padding-right: 760px; }
body .prepend-20  { padding-left: 0; padding-right: 800px; }
body .prepend-21  { padding-left: 0; padding-right: 840px; }
body .prepend-22  { padding-left: 0; padding-right: 880px; }
body .prepend-23  { padding-left: 0; padding-right: 920px; }

body .border {
  padding-right: 0;
  padding-left: 4px;
  margin-right: 0;
  margin-left: 5px;
  border-right: none;
  border-left: 1px solid #eee;
}

body .colborder {
  padding-right: 0;
  padding-left: 24px;
  margin-right: 0;
  margin-left: 25px;
  border-right: none;
  border-left: 1px solid #eee;
}

body .pull-1  { margin-left: 0; margin-right: -40px; }
body .pull-2  { margin-left: 0; margin-right: -80px; }
body .pull-3  { margin-left: 0; margin-right: -120px; }
body .pull-4  { margin-left: 0; margin-right: -160px; }

body .push-0  { margin: 0 18px 0 0; }
body .push-1  { margin: 0 18px 0 -40px; }
body .push-2  { margin: 0 18px 0 -80px; }
body .push-3  { margin: 0 18px 0 -120px; }
body .push-4  { margin: 0 18px 0 -160px; }
body .push-0, body .push-1, body .push-2,
body .push-3, body .push-4 { float: left; }

/* Typography with RTL support */
body h1,body h2,body h3,
body h4,body h5,body h6 { font-family: Arial, sans-serif; }
html body { font-family: Arial, sans-serif;  }
body pre,body code,body tt { font-family: monospace; }

/* Mirror floats and margins on typographic elements */
body p img { float: right; margin: 1.5em 0 1.5em 1.5em; }
body dd, body ul, body ol { margin-left: 0; margin-right: 1.5em;}
body td, body th { text-align:right; }


code:
/* -----------------------------------------------------------------------

 Blueprint CSS Framework 1.0
 http://blueprintcss.org

   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */

/* print.css */
body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;}
.container {background:none;}
hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
hr.space {background:#fff;color:#fff;visibility:hidden;}
h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}
code {font:.9em "Courier New", Monaco, Courier, monospace;}
a img {border:none;}
p img.top {margin-top:0;}
blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
.small {font-size:.9em;}
.large {font-size:1.1em;}
.quiet {color:#999;}
.hide {display:none;}
a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}


code:
/* -----------------------------------------------------------------------

 Blueprint CSS Framework 1.0
 http://blueprintcss.org

   * Copyright (c) 2007-Present. See LICENSE for more info.
   * See README for instructions on how to use Blueprint.
   * For credits and origins, see AUTHORS.
   * This is a compressed file. See the sources in the 'src' directory.

----------------------------------------------------------------------- */

/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}

/* typography.css */
html {font-size:100.01%;}
body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
.left {float:left !important;}
p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}
.right {float:right !important;}
p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}
a:focus, a:hover {color:#09f;}
a {color:#06c;text-decoration:underline;}
blockquote {margin:1.5em;color:#666;font-style:italic;}
strong, dfn {font-weight:bold;}
em, dfn {font-style:italic;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#c3d9ff;}
th, td, caption {padding:4px 10px 4px 5px;}
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
tfoot {font-style:italic;}
caption {background:#eee;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.quiet {color:#666;}
.loud {color:#000;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}

/* forms.css */
label {font-weight:bold;}
fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}
fieldset, #IE8#HACK {padding-top:1.4em;}
legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
input[type=text], input[type=password], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}
input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}
select {background-color:#fff;border-width:1px;border-style:solid;}
input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
input.text, input.title {width:300px;padding:5px;}
input.title {font-size:1.5em;}
textarea {width:390px;height:250px;padding:5px;}
form.inline {line-height:3;}
form.inline p {margin-bottom:0;}
.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}
.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}
.info {background:#d5edf8;color:#205791;border-color:#92cae4;}
.error a, .alert a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
.info a {color:#205791;}

/* grid.css */
.container {width:950px;margin:0 auto;}
.showgrid {background:url(src/grid.png);}
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {float:left;margin-right:10px;}
.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24 {width:950px;margin-right:0;}
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}
input.span-1, textarea.span-1 {width:18px;}
input.span-2, textarea.span-2 {width:58px;}
input.span-3, textarea.span-3 {width:98px;}
input.span-4, textarea.span-4 {width:138px;}
input.span-5, textarea.span-5 {width:178px;}
input.span-6, textarea.span-6 {width:218px;}
input.span-7, textarea.span-7 {width:258px;}
input.span-8, textarea.span-8 {width:298px;}
input.span-9, textarea.span-9 {width:338px;}
input.span-10, textarea.span-10 {width:378px;}
input.span-11, textarea.span-11 {width:418px;}
input.span-12, textarea.span-12 {width:458px;}
input.span-13, textarea.span-13 {width:498px;}
input.span-14, textarea.span-14 {width:538px;}
input.span-15, textarea.span-15 {width:578px;}
input.span-16, textarea.span-16 {width:618px;}
input.span-17, textarea.span-17 {width:658px;}
input.span-18, textarea.span-18 {width:698px;}
input.span-19, textarea.span-19 {width:738px;}
input.span-20, textarea.span-20 {width:778px;}
input.span-21, textarea.span-21 {width:818px;}
input.span-22, textarea.span-22 {width:858px;}
input.span-23, textarea.span-23 {width:898px;}
input.span-24, textarea.span-24 {width:938px;}
.append-1 {padding-right:40px;}
.append-2 {padding-right:80px;}
.append-3 {padding-right:120px;}
.append-4 {padding-right:160px;}
.append-5 {padding-right:200px;}
.append-6 {padding-right:240px;}
.append-7 {padding-right:280px;}
.append-8 {padding-right:320px;}
.append-9 {padding-right:360px;}
.append-10 {padding-right:400px;}
.append-11 {padding-right:440px;}
.append-12 {padding-right:480px;}
.append-13 {padding-right:520px;}
.append-14 {padding-right:560px;}
.append-15 {padding-right:600px;}
.append-16 {padding-right:640px;}
.append-17 {padding-right:680px;}
.append-18 {padding-right:720px;}
.append-19 {padding-right:760px;}
.append-20 {padding-right:800px;}
.append-21 {padding-right:840px;}
.append-22 {padding-right:880px;}
.append-23 {padding-right:920px;}
.prepend-1 {padding-left:40px;}
.prepend-2 {padding-left:80px;}
.prepend-3 {padding-left:120px;}
.prepend-4 {padding-left:160px;}
.prepend-5 {padding-left:200px;}
.prepend-6 {padding-left:240px;}
.prepend-7 {padding-left:280px;}
.prepend-8 {padding-left:320px;}
.prepend-9 {padding-left:360px;}
.prepend-10 {padding-left:400px;}
.prepend-11 {padding-left:440px;}
.prepend-12 {padding-left:480px;}
.prepend-13 {padding-left:520px;}
.prepend-14 {padding-left:560px;}
.prepend-15 {padding-left:600px;}
.prepend-16 {padding-left:640px;}
.prepend-17 {padding-left:680px;}
.prepend-18 {padding-left:720px;}
.prepend-19 {padding-left:760px;}
.prepend-20 {padding-left:800px;}
.prepend-21 {padding-left:840px;}
.prepend-22 {padding-left:880px;}
.prepend-23 {padding-left:920px;}
.border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}
.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #ddd;}
.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-3 {margin-left:-120px;}
.pull-4 {margin-left:-160px;}
.pull-5 {margin-left:-200px;}
.pull-6 {margin-left:-240px;}
.pull-7 {margin-left:-280px;}
.pull-8 {margin-left:-320px;}
.pull-9 {margin-left:-360px;}
.pull-10 {margin-left:-400px;}
.pull-11 {margin-left:-440px;}
.pull-12 {margin-left:-480px;}
.pull-13 {margin-left:-520px;}
.pull-14 {margin-left:-560px;}
.pull-15 {margin-left:-600px;}
.pull-16 {margin-left:-640px;}
.pull-17 {margin-left:-680px;}
.pull-18 {margin-left:-720px;}
.pull-19 {margin-left:-760px;}
.pull-20 {margin-left:-800px;}
.pull-21 {margin-left:-840px;}
.pull-22 {margin-left:-880px;}
.pull-23 {margin-left:-920px;}
.pull-24 {margin-left:-960px;}
.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
.push-1 {margin:0 -40px 1.5em 40px;}
.push-2 {margin:0 -80px 1.5em 80px;}
.push-3 {margin:0 -120px 1.5em 120px;}
.push-4 {margin:0 -160px 1.5em 160px;}
.push-5 {margin:0 -200px 1.5em 200px;}
.push-6 {margin:0 -240px 1.5em 240px;}
.push-7 {margin:0 -280px 1.5em 280px;}
.push-8 {margin:0 -320px 1.5em 320px;}
.push-9 {margin:0 -360px 1.5em 360px;}
.push-10 {margin:0 -400px 1.5em 400px;}
.push-11 {margin:0 -440px 1.5em 440px;}
.push-12 {margin:0 -480px 1.5em 480px;}
.push-13 {margin:0 -520px 1.5em 520px;}
.push-14 {margin:0 -560px 1.5em 560px;}
.push-15 {margin:0 -600px 1.5em 600px;}
.push-16 {margin:0 -640px 1.5em 640px;}
.push-17 {margin:0 -680px 1.5em 680px;}
.push-18 {margin:0 -720px 1.5em 720px;}
.push-19 {margin:0 -760px 1.5em 760px;}
.push-20 {margin:0 -800px 1.5em 800px;}
.push-21 {margin:0 -840px 1.5em 840px;}
.push-22 {margin:0 -880px 1.5em 880px;}
.push-23 {margin:0 -920px 1.5em 920px;}
.push-24 {margin:0 -960px 1.5em 960px;}
.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:left;position:relative;}
div.prepend-top, .prepend-top {margin-top:1.5em;}
div.append-bottom, .append-bottom {margin-bottom:1.5em;}
.box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;}
hr.space {background:#fff;color:#fff;visibility:hidden;}
.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix, .container {display:block;}
.clear {clear:both;}


code:
/* --------------------------------------------------------------

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text
   * For inline forms, use .inline (even when using columns)

-------------------------------------------------------------- */

/*
	A special hack is included for IE8 since it does not apply padding
	correctly on fieldsets
 */
label       { font-weight: bold; }
fieldset    { padding:0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; margin-top:-0.2em; margin-bottom:1em; }

fieldset, #IE8#HACK { padding-top:1.4em; }
legend, #IE8#HACK { margin-top:0; margin-bottom:0; }

/* Form fields
-------------------------------------------------------------- */

/*
  Attribute selectors are used to differentiate the different types
  of input elements, but to support old browsers, you will have to
  add classes for each one. ".title" simply creates a large text
  field, this is purely for looks.
 */
input[type=text], input[type=password],
input.text, input.title,
textarea {
  background-color:#fff;
  border:1px solid #bbb;
}
input[type=text]:focus, input[type=password]:focus,
input.text:focus, input.title:focus,
textarea:focus {
  border-color:#666;
}
select { background-color:#fff; border-width:1px; border-style:solid; }

input[type=text], input[type=password],
input.text, input.title,
textarea, select {
  margin:0.5em 0;
}

input.text,
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }

/*
  This is to be used on forms where a variety of elements are
  placed side-by-side. Use the p tag to denote a line.
 */
form.inline { line-height:3; }
form.inline p { margin-bottom:0; }

/* Success, info, notice and error/alert boxes
-------------------------------------------------------------- */

.error,
.alert,
.notice,
.success,
.info 			{ padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }
.notice     { background: #fff6bf; color: #514721; border-color: #ffd324; }
.success    { background: #e6efc2; color: #264409; border-color: #c6d880; }
.info 			{ background: #d5edf8; color: #205791; border-color: #92cae4; }
.error a, .alert a { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
.info a			{ color: #205791; }


code:
/* --------------------------------------------------------------

   grid.css
   * Sets up an easy-to-use grid of 24 columns.

   By default, the grid is 950px wide, with 24 columns
   spanning 30px, and a 10px margin between columns.

   If you need fewer or more columns, namespaces or semantic
   element names, use the compressor script (lib/compress.rb)

-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 950px;
  margin: 0 auto;
}

/* Use this class on any .span / container to see the grid. */
.showgrid {
  background: url(src/grid.png);
}

/* Columns
-------------------------------------------------------------- */

/* Sets up basic grid floating and margin. */
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
  float: left;
  margin-right: 10px;
}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 {width: 30px;}

.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;}
.span-5 {width: 190px;}
.span-6 {width: 230px;}
.span-7 {width: 270px;}
.span-8 {width: 310px;}
.span-9 {width: 350px;}
.span-10 {width: 390px;}
.span-11 {width: 430px;}
.span-12 {width: 470px;}
.span-13 {width: 510px;}
.span-14 {width: 550px;}
.span-15 {width: 590px;}
.span-16 {width: 630px;}
.span-17 {width: 670px;}
.span-18 {width: 710px;}
.span-19 {width: 750px;}
.span-20 {width: 790px;}
.span-21 {width: 830px;}
.span-22 {width: 870px;}
.span-23 {width: 910px;}
.span-24 {width:950px; margin-right:0;}

/* Use these classes to set the width of an input. */
input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {
  border-left-width: 1px;
  border-right-width: 1px;
  padding-left: 5px;
  padding-right: 5px;
}

input.span-1, textarea.span-1 { width: 18px; }
input.span-2, textarea.span-2 { width: 58px; }
input.span-3, textarea.span-3 { width: 98px; }
input.span-4, textarea.span-4 { width: 138px; }
input.span-5, textarea.span-5 { width: 178px; }
input.span-6, textarea.span-6 { width: 218px; }
input.span-7, textarea.span-7 { width: 258px; }
input.span-8, textarea.span-8 { width: 298px; }
input.span-9, textarea.span-9 { width: 338px; }
input.span-10, textarea.span-10 { width: 378px; }
input.span-11, textarea.span-11 { width: 418px; }
input.span-12, textarea.span-12 { width: 458px; }
input.span-13, textarea.span-13 { width: 498px; }
input.span-14, textarea.span-14 { width: 538px; }
input.span-15, textarea.span-15 { width: 578px; }
input.span-16, textarea.span-16 { width: 618px; }
input.span-17, textarea.span-17 { width: 658px; }
input.span-18, textarea.span-18 { width: 698px; }
input.span-19, textarea.span-19 { width: 738px; }
input.span-20, textarea.span-20 { width: 778px; }
input.span-21, textarea.span-21 { width: 818px; }
input.span-22, textarea.span-22 { width: 858px; }
input.span-23, textarea.span-23 { width: 898px; }
input.span-24, textarea.span-24 { width: 938px; }

/* Add these to a column to append empty cols. */

.append-1 { padding-right: 40px;}
.append-2 { padding-right: 80px;}
.append-3 { padding-right: 120px;}
.append-4 { padding-right: 160px;}
.append-5 { padding-right: 200px;}
.append-6 { padding-right: 240px;}
.append-7 { padding-right: 280px;}
.append-8 { padding-right: 320px;}
.append-9 { padding-right: 360px;}
.append-10 { padding-right: 400px;}
.append-11 { padding-right: 440px;}
.append-12 { padding-right: 480px;}
.append-13 { padding-right: 520px;}
.append-14 { padding-right: 560px;}
.append-15 { padding-right: 600px;}
.append-16 { padding-right: 640px;}
.append-17 { padding-right: 680px;}
.append-18 { padding-right: 720px;}
.append-19 { padding-right: 760px;}
.append-20 { padding-right: 800px;}
.append-21 { padding-right: 840px;}
.append-22 { padding-right: 880px;}
.append-23 { padding-right: 920px;}

/* Add these to a column to prepend empty cols. */

.prepend-1 { padding-left: 40px;}
.prepend-2 { padding-left: 80px;}
.prepend-3 { padding-left: 120px;}
.prepend-4 { padding-left: 160px;}
.prepend-5 { padding-left: 200px;}
.prepend-6 { padding-left: 240px;}
.prepend-7 { padding-left: 280px;}
.prepend-8 { padding-left: 320px;}
.prepend-9 { padding-left: 360px;}
.prepend-10 { padding-left: 400px;}
.prepend-11 { padding-left: 440px;}
.prepend-12 { padding-left: 480px;}
.prepend-13 { padding-left: 520px;}
.prepend-14 { padding-left: 560px;}
.prepend-15 { padding-left: 600px;}
.prepend-16 { padding-left: 640px;}
.prepend-17 { padding-left: 680px;}
.prepend-18 { padding-left: 720px;}
.prepend-19 { padding-left: 760px;}
.prepend-20 { padding-left: 800px;}
.prepend-21 { padding-left: 840px;}
.prepend-22 { padding-left: 880px;}
.prepend-23 { padding-left: 920px;}

/* Border on right hand side of a column. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #ddd;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #ddd;
}

/* Use these classes on an element to push it into the
next column, or to pull it into the previous column.  */

.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }
.pull-6 { margin-left: -240px; }
.pull-7 { margin-left: -280px; }
.pull-8 { margin-left: -320px; }
.pull-9 { margin-left: -360px; }
.pull-10 { margin-left: -400px; }
.pull-11 { margin-left: -440px; }
.pull-12 { margin-left: -480px; }
.pull-13 { margin-left: -520px; }
.pull-14 { margin-left: -560px; }
.pull-15 { margin-left: -600px; }
.pull-16 { margin-left: -640px; }
.pull-17 { margin-left: -680px; }
.pull-18 { margin-left: -720px; }
.pull-19 { margin-left: -760px; }
.pull-20 { margin-left: -800px; }
.pull-21 { margin-left: -840px; }
.pull-22 { margin-left: -880px; }
.pull-23 { margin-left: -920px; }
.pull-24 { margin-left: -960px; }

.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float: left; position:relative;}

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 { margin: 0 -240px 1.5em 240px; }
.push-7 { margin: 0 -280px 1.5em 280px; }
.push-8 { margin: 0 -320px 1.5em 320px; }
.push-9 { margin: 0 -360px 1.5em 360px; }
.push-10 { margin: 0 -400px 1.5em 400px; }
.push-11 { margin: 0 -440px 1.5em 440px; }
.push-12 { margin: 0 -480px 1.5em 480px; }
.push-13 { margin: 0 -520px 1.5em 520px; }
.push-14 { margin: 0 -560px 1.5em 560px; }
.push-15 { margin: 0 -600px 1.5em 600px; }
.push-16 { margin: 0 -640px 1.5em 640px; }
.push-17 { margin: 0 -680px 1.5em 680px; }
.push-18 { margin: 0 -720px 1.5em 720px; }
.push-19 { margin: 0 -760px 1.5em 760px; }
.push-20 { margin: 0 -800px 1.5em 800px; }
.push-21 { margin: 0 -840px 1.5em 840px; }
.push-22 { margin: 0 -880px 1.5em 880px; }
.push-23 { margin: 0 -920px 1.5em 920px; }
.push-24 { margin: 0 -960px 1.5em 960px; }

.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float: left; position:relative;}

/* Misc classes and elements
-------------------------------------------------------------- */

/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
  margin-top:1.5em;
}
div.append-bottom, .append-bottom {
  margin-bottom:1.5em;
}

/* Use a .box to create a padded box inside a column.  */
.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #e5eCf9;
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd;
  color: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: 1px;
  margin: 0 0 1.45em;
  border: none;
}

hr.space {
  background: #fff;
  color: #fff;
  visibility: hidden;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow:hidden;
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }


code:
/* --------------------------------------------------------------

   ie.css

   Contains every hack for Internet Explorer,
   so that our core files stay sweet and nimble.

-------------------------------------------------------------- */

/* Make sure the layout is centered in IE5 */
body { text-align: center; }
.container { text-align: left; }

/* Fixes IE margin bugs */
* html .column, * html .span-1, * html .span-2,
* html .span-3, * html .span-4, * html .span-5,
* html .span-6, * html .span-7, * html .span-8,
* html .span-9, * html .span-10, * html .span-11,
* html .span-12, * html .span-13, * html .span-14,
* html .span-15, * html .span-16, * html .span-17,
* html .span-18, * html .span-19, * html .span-20,
* html .span-21, * html .span-22, * html .span-23,
* html .span-24 { display:inline; overflow-x: hidden; }

/* Elements
-------------------------------------------------------------- */

/* Fixes incorrect styling of legend in IE6. */
* html legend { margin:0px -8px 16px 0; padding:0; }

/* Fixes wrong line-height on sup/sub in IE. */
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }

/* Fixes IE7 missing wrapping of code elements. */
html>body p code { *white-space: normal; }

/* IE 6&7 has problems with setting proper <hr> margins. */
hr  { margin:-8px auto 11px; }

/* Explicitly set interpolation, allowing dynamically resized images to not look horrible */
img { -ms-interpolation-mode:bicubic; }

/* Clearing
-------------------------------------------------------------- */

/* Makes clearfix actually work in IE */
.clearfix, .container { display:inline-block; }
* html .clearfix,
* html .container { height:1%; }

/* Forms
-------------------------------------------------------------- */

/* Fixes padding on fieldset */
fieldset { padding-top:0; }
legend { margin-top:-0.2em; margin-bottom:1em; margin-left:-0.5em; }

/* Makes classic textareas in IE 6 resemble other browsers */
textarea { overflow:auto; }

/* Makes labels behave correctly in IE 6 and 7 */
label { vertical-align:middle; position:relative; top:-0.25em; }

/* Fixes rule that IE 6 ignores */
input.text, input.title, textarea { background-color:#fff; border:1px solid #bbb; }
input.text:focus, input.title:focus { border-color:#666; }
input.text, input.title, textarea, select { margin:0.5em 0; }
input.checkbox, input.radio { position:relative; top:.25em; }

/* Fixes alignment of inline form elements */
form.inline div, form.inline p { vertical-align:middle; }
form.inline input.checkbox, form.inline input.radio,
form.inline input.button, form.inline button {
  margin:0.5em 0;
}
button, input.button { position:relative;top:0.25em; }


code:
/* --------------------------------------------------------------

   print.css
   * Gives you some sensible styles for printing pages.
   * See Readme file in this directory for further instructions.

   Some additions you'll want to make, customized to your markup:
   #header, #footer, #navigation { display:none; }

-------------------------------------------------------------- */

body {
  line-height: 1.5;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  color:#000;
  background: none;
  font-size: 10pt;
}

/* Layout
-------------------------------------------------------------- */

.container {
  background: none;
}

hr {
  background:#ccc;
  color:#ccc;
  width:100%;
  height:2px;
  margin:2em 0;
  padding:0;
  border:none;
}
hr.space {
  background: #fff;
  color: #fff;
  visibility: hidden;
}

/* Text
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif; }
code { font:.9em "Courier New", Monaco, Courier, monospace; }

a img { border:none; }
p img.top { margin-top: 0; }

blockquote {
  margin:1.5em;
  padding:1em;
  font-style:italic;
  font-size:.9em;
}

.small  { font-size: .9em; }
.large  { font-size: 1.1em; }
.quiet  { color: #999; }
.hide   { display:none; }

/* Links
-------------------------------------------------------------- */

a:link, a:visited {
  background: transparent;
  font-weight:700;
  text-decoration: underline;
}

/*
	This has been the source of many questions in the past. This
	snippet of CSS appends the URL of each link within the text.
	The idea is that users printing your webpage will want to know
	the URLs they go to. If you want to remove this functionality,
	comment out this snippet and make sure to re-compress your files.
 */
a:link:after, a:visited:after {
  content: " (" attr(href) ")";
  font-size: 90%;
}

/* If you're having trouble printing relative links, uncomment and customize this:
   (note: This is valid CSS3, but it still won't go through the W3C CSS Validator) */

/* a[href^="/"]:after {
  content: " (http://www.yourdomain.com" attr(href) ") ";
} */


code:
/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */

html {
	margin:0;
	padding:0;
	border:0;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

/* Line-height should always be unitless! */
body {
  line-height: 1.5;
  background: white;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse: separate;
	border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
	text-align: left;
	font-weight: normal;
	float:none !important;
}
table, th, td {
	vertical-align: middle;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Remember to define your own focus styles! */
:focus { outline: 0; }


code:
/* --------------------------------------------------------------

   typography.css
   * Sets up some sensible default typography.

-------------------------------------------------------------- */

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body {
  font-size: 75%;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 1.5em; }
/*
	These can be used to pull an image at the start of a paragraph, so
	that the text flows around it (usage:
Text
)
 */
.left  			{ float: left !important; }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right 			{ float: right !important; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a:focus,
a:hover     { color: #09f; }
a           { color: #06c; text-decoration: underline; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong,dfn	{ font-weight: bold; }
em,dfn      { font-style: italic; }
sup, sub    { line-height: 0; }

abbr,
acronym     { border-bottom: 1px dotted #666; }
address     { margin: 0 0 1.5em; font-style: italic; }
del         { color:#666; }

pre         { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* Lists
-------------------------------------------------------------- */

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

/* Tables
-------------------------------------------------------------- */

/*
	Because of the need for padding on TH and TD, the vertical rhythm
	on table cells has to be 27px, instead of the standard 18px or 36px
	of other elements.
 */
table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th    { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
/*
	You can zebra-stripe your tables in outdated browsers by adding
	the class "even" to every other table row.
 */
tbody tr:nth-child(even) td,
tbody tr.even td  {
	background: #e5ecf9;
}
tfoot       { font-style: italic; }
caption     { background: #eee; }

/* Misc classes
-------------------------------------------------------------- */

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

.quiet      { color: #666; }
.loud       { color: #000; }
.highlight  { background:#ff0; }
.added      { background:#060; color: #fff; }
.removed    { background:#900; color: #fff; }

.first      { margin-left:0; padding-left:0; }
.last       { margin-right:0; padding-right:0; }
.top        { margin-top:0; padding-top:0; }
.bottom     { margin-bottom:0; padding-bottom:0; }


code:
/*
	HUMANIZED MESSAGES 1.0 - Habari Edition
	idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
	home - http://humanmsg.googlecode.com
*/

html, body {
	height: 100%; /* Damn you IE! */
}

.humanMsg {
	font: normal 12px Helvetica, Arial, Sans-Serif;
	position: fixed;
	top: 40px;
	left: 10px;
	width: 30%;
	color: white;
	text-align: left;
	z-index: 90;
	display: none;
	padding: 0px;
}

.humanMsg .imsgs .msg {
	padding: 10px;
	background-color: black;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0px 1px 5px #333;
	-webkit-box-shadow: 0px 1px 5px #333;
	-moz-box-shadow: 0px 1px 5px #333;
	margin-bottom: 5px;
	}

.humanMsg p {
	display: inline;
	}

.humanMsg p a {
	color: #19a5d1;
	}

.humanMsg .imsgs .msg {
	display: none;
	opacity: 0;
	}

#humanMsgLog {
	font: normal 10px Helvetica, Arial, Sans-Serif;
	color: white;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: 200px;
	display: none;
	z-index: 10000;
	}

#humanMsgLog p {
	position: relative;
	left: 50%;
	width: 200px;
	margin: 0;
	margin-left: -100px;
	padding: 0 10px;
	line-height: 20px;
	background: #333;
	text-align: center;
	white-space: pre;
	cursor: pointer;
	}

#humanMsgLog p:hover {
	background: #222;
	}

#humanMsgLog ul {
	background: #eee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAARCAIAAACaSvE/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNqEjVEKACAIQ516Ee//5wVNCjIjaB/iY5vC3YkoIgDkVDOjQ5pqLCI3r2bLFzNzyydvM4uKqfJPKN4vyl9LO/7o3/6PhwADAIWkFPjc5eRrAAAAAElFTkSuQmCC) repeat-x;
	margin: 0;
	padding: 0;
	position: relative;
	max-height: 180px;
	overflow: auto;
	display: none;
	}

#humanMsgLog ul li {
	color: #555;
	font-size: 12px;
	list-style-type: none;
	border-bottom: 1px solid #ddd;
	line-height: 40px;
	display: none;
	padding: 0 20px;
	position: relative;
	overflow: hidden;
	white-space: pre;
	}

#humanMsgLog ul li:hover {
	background: #f2f2f2;
	}

#humanMsgLog ul li:first-child {
	margin-top: 1px;
	}

#humanMsgLog ul li .error {
	color: orangered;
	}

#humanMsgLog ul li .indent {
	position: absolute;
	top: 0;
	left: 100px;
	margin-right: 200px;
	height: inherit;
	}


code:
/*
 * HUMANIZED MESSAGES, v2
 * idea - http://www.humanized.com/weblog/2006/09/11/monolog_boxes_and_transparent_messages
 * original code by Michael Heilemann - http://humanmsg.googlecode.com
 *
 * adapted and modified for Habari and updated for newer versions of jQuery
 */

var human_msg = {

	msg_id: 'humanMsg',			// the base string of the ID for the displayed 'growl' message
	log_id: 'humanMsgLog',		// the base string of the ID for the drawer message

	append_to: 'body',			// the element the msg is appended to
	log_name: 'Message Log',	// the text on the log tab
	msg_opacity: '0.8',			// the opacity of the displayed 'growl' messages

	message_count: 0,			// incrementor for creating sequential IDs

	init: function ( append_to, log_name, msg_opacity ) {

		// append_to is the element the msg is appended to
		if ( append_to != undefined ) {
			human_msg.append_to = append_to;
		}

		// the text on the log tab
		if ( log_name != undefined ) {
			human_msg.log_name = log_name;
		}

		// opacity of the messages
		if ( msg_opacity != undefined ) {
			human_msg.msg_opacity = parseFloat( msg_opacity );
		}

		// inject the message structure
		jQuery(human_msg.append_to).append(
				'
' +
					'

' +
				'
' +
				'
' +
					'
' + human_msg.log_name + '
' +
					'

' +
				'
'
		);

		// bind the events to show the log pane
		jQuery('#' + human_msg.log_id + ' p').click( function() {
			if ( jQuery('#' + human_msg.log_id).hasClass('logisopen') ) {
				// only remove the class once the animation has finished to ensure smooth consistent behaviour when closing
				jQuery('ul', '#' + human_msg.log_id).slideToggle('400', function() { jQuery('#' + human_msg.log_id).toggleClass('logisopen'); });
			} else {
				jQuery('ul', '#' + human_msg.log_id).slideToggle();
				jQuery('#' + human_msg.log_id).toggleClass('logisopen');
			}
		} );

		// bind the events to hide the log pane
		jQuery('#' + human_msg.log_id + ' ul').click( function() {
			if ( jQuery('#' + human_msg.log_id).hasClass('logisopen') ) {
				// only remove the class once the animation has finished to ensure smooth consistent behaviour when closing
				jQuery(this).slideToggle('400', function() { jQuery('#' + human_msg.log_id).toggleClass('logisopen'); });
			} else {
				jQuery(this).slideToggle();
				jQuery('#' + human_msg.log_id).toggleClass('logisopen');
			}
		} );

	},

	display_msg: function ( msg ) {

		// ignore blank messages
		if ( msg == '' ) {
			return;
		}

		// increment the counter
		human_msg.message_count++;

		// now we inject the message

		// show the container for messages
		jQuery('#' + human_msg.msg_id).show();

		// create the message we'll show
		var message = jQuery('

' + msg + '

');

		jQuery(message)
			.appendTo('#' + human_msg.msg_id + ' .imsgs')	// append the message to the container
			.show()		// show the new displayed message
			.fadeTo( 500, human_msg.msg_opacity, function() {

				// remember that 'this' now refers to the element we just acted on, not the human_msg object
				// so we'll refer to it using the global name everywhere in here

				// when the message has faded in, add it to the log pane
				jQuery('#' + human_msg.log_id)
					.show()		// show the log pane, it's hidden until there's a message in it
					.children('ul').prepend('
' + msg + '
')		// prepend the message to the log
					.children('li:first').slideDown(200);	// slide it down

				// if the log isn't shown, make it 'hop' with activity
				if ( jQuery('#' + human_msg.log_id + ' ul').css('display') == 'none' ) {

					jQuery('#' + human_msg.log_id + ' p').animate( { bottom: 40 }, 200, 'linear', function() {

						jQuery(this).animate( { bottom: 0 }, 300, function() {
							jQuery(this).css('bottom', 0);
						} );

					} );

				}

			} );		// that's the end of the .fadeTo callback

		// bind the click event to immediately hide a message
		jQuery(message).click( function() {
			human_msg.remove_msg( this );
		} );

		// and set the timer to remove this message in 5 seconds
		setTimeout( function() {
			human_msg.remove_msg( message );
		}, 5000 );

	},

	remove_msg: function ( msg ) {

		// fade out the message
		jQuery( msg ).fadeTo( 500, 0, function() {
			// when it's faded out, remove it entirely from the DOM
			jQuery(this).remove();
		} );

	}

}

jQuery(document).ready( function() {
	// broken out into a function so you can add default parameters
	human_msg.init('body', _t('Message Log'), 0.8);
} );