/* @override http://ode-is-simple.com/doormat.css */

/*	FILE DESCRIPTION:

	Stylesheet to accompany 'doormat' index.html page
	Contact: Rob Reed (rob@ode-is-simple.com)

	Date: 2010/1118

	Project: Ode
	Project home: ode-is-simple.com/weblog
	Community forum: forum.ode-is-simple.com/

	Description:

	Ode is 'a simple personal publishing engine for the web'.
	It is implemented as a single perl script
	(though it is extensible with 'addins' which are separate
	perl script files designed to be accessed
	by Ode at key points during execution).

	By default, the ode script file is titled 'ode.cgi'

	In the simplest configuration you would run Ode,
	which would display the content of an Ode site
	styled using a theme, by using a browser to access the address
	of the script directly. For example, for
	the domain 'example.com' I might access an ode site
	at the address:

	example.com/cgi-bin/ode.cgi

	or 

	example.com/ode.cgi

	(depending on where I've installed the script file).

	This is only one option. Using several different techniques,
	including among others redirection with something
	like Apache's ScriptAlias directiive.

	Using one a technique like this, you could have an Ode site
	respond to a request like:

	http://example.com

	However I recommend using redirecting from a specific path
	rather than the root of a domain, like:

	http://example.com/weblog/

	Why?

	Because to me a domain a bigger thing than a site. By restricting
	an Ode site to a path like this I can use similar paths
	for other purposes, for example:

	Photo galleries:
	example.com/photos/

	Maps
	example.com/maps/


	A discussion forum maybe
	example.com/forum/

	Shared files
	example.com/shared_files/

	and so on.

	I think this is a pretty nice (i.e. straight-forward and logical)
	arrangement. However it begs the question, "What
	happens if someone requests the root,
	like http://example.com/?"

	Among many other options, use a splash page with links to all
	all of the other elements of your domain.

	That's where doormat.css and the associated 'index.html' file
	come into play.

	Index.html and doormat.css provide a very simple looking structured splash
	page with room a header and a description.
	The header is split into left and right halves with
	a display like area for a title or an image
	and a list where you can place links to other areas of your
	site and external sites as well.

	The description area provides plenty of space for you to discuss
	your site, or anything else you might want to write about.

	You're free to use this page in accordance with the terms of the following
	license:

	Creative Commons Attribution-Share Alike 3.0 United States

	For more information refer to:
	http://creativecommons.org/licenses/by-sa/3.0/us/
	
*/


/*	STYLE MAP

	+ body
	|	+ #wrapper
	|	|	+ #wrapper_header
	|	|	|	+ #two_column_container
	|	|	|	|	+ #left_column
	|	|	|	|		+ #left_column_content
	|	|	|	|	+ #right_column
	|	|	|	|		+ #right_column_content
	|	|	+ #site_description
	|	|	+ #wrapper_footer

 */


/*	ORDER OF STYLE RULES

	display
	position
	top, right, bottom, left, 
	margin
	margin-top, margin-right, margin-bottom, margin-left
	height
	min-height
	width
	border
	border-top, border-right, border-bottom, border-left
	border-color, border-width, border-style
	background
	background-color, background-image, background-repeat
	padding
	float
	clear
	line-height
	text-align
	vertical-align
	font-family
	font-size
	font-style
	font-weight
	color
	text-decoration
	list-style
	list-style-type, list-style-position
	overflow
	
	a:link    (unvisited)
	a:visited
	a:hover
	a:active  (selected link)

*/


body
{
	background-color: #efefef; /* light grey */

	text-align: center;
	/* centered to fix centered layout
	   auto left/right margins of wrapper
	   in some browsers (IE 6)
	   text left aligned again in #wrapper */
}


#wrapper
{
	margin:  50px auto 15px auto;
	width: 525px;
	text-align: left;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	color: #444; /* dark grey, nearly black */

}	/* specifies an area inside the browser window
	   which contains all content.
	   Everything else can be considered empty space */


#wrapper_header
{
	width: 100%;
	border: 1px solid #beb7ae; /*light grey-yellow */
	background-color: #fff; /* white */
	padding: 40px 0;
}


#two_column_container
{
	margin: 0;
	min-height: 180px;
	width: 100%;
	padding: 0;
	overflow: hidden;
}

#two_column_container h2
{
	margin: 0;
	font-size: 14px;
	font-weight: normal;
}


#left_column
{
	width:	261px;
	padding-top: 11px;
	float:	left;
}


#left_column_content
{
	text-align: center;
}


#left_column_content img
{
	display: block;
	margin: 10px auto;

}


#left_column_content h2
{
	;
}


#right_column h2
{
	margin: 0;
	margin-bottom: 15px;
}


#right_column
{
	min-height: 147px;
	width: 242px;
	border-left: 2px solid #858585;
	float: right;
	padding: 10px 0 7px 20px;

}


#right_column_content
{
	;
}




#right_column ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}


#right_column li
{
	margin: 0;
	margin-bottom: 8px;
}


#site_description
{
	/* background-color: #fff; */
	padding: 30px 30px 20px 30px;
}


#site_description h2
{
	margin: 0;
	padding: 0;
	font-size: 16px ;
	font-weight: normal;
}


.footer
{	
	text-align: center;
	font-style: italic;
}


h
{
	color: #555; /* dark grey */
}


h1
{
	font-size: 18px;
	font-weight: bold;
}


h2
{
	font-size: 16px;
	font-weight: bold;
}


h3
{
	font-size: 14px;
	font-weight: bold;
}


h4
{
	font-size: 14px;
	font-weight: normal;
}


h5
{
	font-size: 12px;
	font-weight: normal;
}


h6
{
	font-size: 10px;
	font-weight: normal;
}



a { text-decoration: none; }

a:link {
	border-bottom: 1px solid #c6c6c6; /* light grey */
	color: #4870a3; /* med dull blue */
}

a:visited {
	border-bottom: 1px solid #c6c6c6; /* light grey */	
	color: #4870a3; /* med dull blue */
}

a:hover {
	border-bottom: 1px solid #c6c6c6; /* light grey */	
	color: #008000; /* strong green */
}

.post_title a:link {
	border-bottom: none;
	color: #0062a9; /* med bright blue */
}

.post_title a:visited {
	border-bottom: none;
	color: #0062a9; /* med bright blue */
}

.post_title a:hover {
	border-bottom: 1px solid #c6c6c6; /* light grey */
	color: #008000; /* strong green */
}

/* border: 1px solid #CCC; */ /* med grey */
/* Visual layout guide */