/*******************************************************************************************
important urls discussing theme generation for bitweaver and css in general:
	http://www.bitweaver.org/wiki/index.php?page=CssSchema
	http://www.bitweaver.org/wiki/index.php?page=ThemeTutorial


Introduction
------------
blank.css contains a consise list of the most important classes used on
bitweaver.  you can use this as a starting point or a point of reference.  if
you define the classes/ids mentioned within blank.css, the entire site will
have a design/layout. if you would like to customise the site further, you can
refer to customisation.css also found in this directory. there are a few
classes that can be used for more precise and detailed customisation.


File Format
-----------

the one line style is used to fit more in one screen for an easy overview.

Vim users (www.vim.org):
	if you don't like this, you can use this substitution in vim to get
	everything into a multi-line layout:
		%s,\([{;]\)\s*,\1\r\t,g|%s,\t},},g|%s,\_s*{, {,g

	when you have set gdefault in your .vimrc file, use the following:
		%s,\([{;]\)\s*,\1\r\t,|%s,\t},},|%s,\_s*{, {,


	to revert to a one-line layout:
	without gdefault:
		%s,\_s\+{\_s\+,\t\t\t{,g|%s,\_s\+},},g|%s,;\_s\+,; ,g|%s,:\_s\+,:,g

	with gedefault set:
		%s,\_s\+{\_s\+,\t\t\t{,|%s,\_s\+},},|%s,;\_s\+,; ,|%s,:\_s\+,:,


	to use the above substitution, position the cursor on the %, and then
	execute the following:
		y$:<ctrl-r>0<enter>


Starting from Scratch
---------------------
blank.css
	main css file with all globally used classes and more

customisation.css
	contains a list of classes that can be utilised to further customise the
	site

debugwithoutline.css
	contains a set of classes and definitions that allow you to visualise all
	structures used on your site

showdiv.css
	if included will visualise all divs used on the site including their
	classes and ids (works well with debugwithoutline.css)

showstructure.css
	like showdiv.css but it will show you all classes and structures apart
	from divs (works well with showdiv.css and/or debugwithoutline.css

showsitelayout.css
	visualises the layout of the main bit ids used by surrounding them with
	coloured lines

showpagelayout.css
	draws coloured borders on one side of certain elements to allow you to
	view the classes used without messing with your layout


Css Schema
----------
layout schema - when using the layout system provided by bitweaver, you don't
really need to concern yourself with this

<div id="container" class="layout">
	<div id="header"> #header </div>

	<div id="wrapper">
		<div id="content">
		</div>
	</div>

	<div id="navigation">
		<div class="module"></div>
	</div>

	<div id="extra">
		<div class="module"></div>
	</div>

	<div id="footer"></div>
</div>

This is contained within the #content which is the main center column.
<div id="content">
	<div class="... foo">

		<div class="header">
			<h1>pile of foo</h1>
			<h2>desciption of foo</h2>
			<div class="date">
				created by fooster on april 1, 2004
			</div>
		</div>

		<div class="body">
			<div class="content">
				this is more foo
			</div>

			<div class="navbar">
				navigation bar
			</div>
		</div>
	</div>
</div>

... == is one of the following:
		display, admin, listing, edit



various boxes

<div class="... box">

	<h3>title of foobox</h3>
	<div class="boxcontent">
		this is some foo that has to be in a box
	</div>

</div>

... == is usually one of the following:
		module, admin, help



Brief css notes
---------------
please see http://www.bitweaver.org/wiki/index.php?page=ThemeTutorial for
more information

please consider the following page

<div class="box">2 + 2 = 5</div>

<div class="foo">
	<div class="box">i can sing</div>
	<div class="foo box">some chickens have lips</div>
</div>

if you wish to apply a definition to all boxes you use
	.box { text-decoration: underline; }

if you wish to apply settings only to the boxes within the foo section
	.foo .box { font-weight: bold; }

if you wish to apply settings only to the box that has foo associated with it
	.foo.box { color: red; }

please note the lack of a space in the third case as compared to the second case.
	'.foo .box' vs '.foo.box'



use abbreviated styles where possible
	eg:	padding: 5px 10px;
	this is equivalent to:
		padding-top: 5px;
		padding-right: 10px;
		padding-bottom: 5px;
		padding-left: 10px;

	eg:	padding: 1px 2px 3px 4px;
	this is equivalent to:
		padding-top: 1px;
		padding-right: 2px;
		padding-bottom: 3px;
		padding-left: 4px;

Some notes
----------
css isn't easy when you want to make a sophisticated layout especially if you
want to use a tableless layout method as is the case with many of the themes
provided by bitweaver. it requires patience and time. there are many places
where you can find excellent information and tutorials for css. also, don't
forget that the #css irc channel on irc.freenode.net has some very gifted and
helpful people.


More Information
----------------
you can find more information about the css schema applied throughout
bitweaver on the following pages:
	http://www.bitweaver.org/wiki/index.php?page=CssSchema
	http://www.bitweaver.org/wiki/index.php?page=ThemeTutorial
	http://www.bitweaver.org/wiki/index.php?page=CssSchemaChangeLog

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