/**
 * The "coloc" skin
 * (v.0.1, build 070220)
 * This skin is derived from the "grigloo" skin.
 *
 * This skin uses a 3-column layout, with the following main parts :
 *
 *	- a header_panel containing a header_title, a header-image, a header_slogan and main navigation tabs (#tabs)
 * 	- a wrapper containing the main_panel, the extra_panel which is the right column, and the footer_panel
 *	- a side_panel, which is the left column
 *
 * This skin uses a color scheme that can be easily modified through "search and replace" of color codes
 *
 * 	- #fff : general background, for body, header_panel, main_panel, extra_panel, footer_panel, side_panel and slideshow
 *	- #ffe : "pseudo-white", for items that should remain "whitish", even if white color or background is globally replaced
 *	- #111 : "pseudo-black", for code and items that should remain "blackish", even if black color is replaced
 *	- #333 : general font color, set in body
 *	- #721816 : "even" title color, for header_title, tabs, h2, h3, various dt, etc.
 *	- #266732 : "odd" title color, for header_slogan, h1, some highlights
 *	- #999 : font color for details
 *	- #a92725 : general font color for links
 *	- #dde : background color to highlight hovered links and some other items
 *	- #eee : background color to highlight code
 *	- #ddd : background color for ordinary table headings
 *	- #89a : background color for some table heading, like calendar
 *	- #eef : background color for some boxes, like folder boxes
 *	- #ffc : background color for some special boxes, like sidebar
 *	- #ccc : color of many borders and lines
 *	- #f93 : orange background color for news
 *	- #8f8 #88f #f88 : background colors for highlighting search terms in search result pages
 *	- #ffe #ddf #ffc #dfd #fd9 #edf : for gadget boxes (more like samples than a recommendation)
 *	- other colors are used to emulate browsers and probably should not be changed (search for input and button)
 *
 * This single style sheet takes care of all media (screen, handheld, print, etc.)
 *
 * This style sheet has been checked against Mozilla Firefox version 1 and 2 and Microsoft Internet Explorer versions 6 and 7.
 * You may have to split this file into several pieces to avoid side-effects on legacy browsers such as Netscape navigator 4.7, etc.
 *
 * Where applicable we have also mentioned the YACS codes related to styles.
 * You can find more information on YACS codes at codes/codes.php and related pages.
 *
 * @author of the original skin from which this one is derived : Bernard Paques [email]bernard.paques@bigfoot.com[/email]
 * @author of this adaptation : Alain Lesage [email]alesage@lesageconseil.com[/email]
 * @license http://www.gnu.org/copyleft/lesser.txt GNU Lesser General Public License
 */

/**TABLE OF CONTENTS
 * CSS rules are organised in the following order, to group rules relating to items appearing together
 *
 * GENERAL FORMATTING
 *	The body element
 * 	HTML tags
 *	yacs codes
 *	Links
 *	Images *
 *
 * STRUCTURAL LAYOUT
 *	Header panel, 
 * 	Wrapper
 *	Main panel
 *	Extra panel
 *	Footer panel
 * 	Side panel
 *
 * GENERAL PAGE FORMATTING
 *	Details
 *
 * MAIN PANEL FORMATTING
 *	Recent articles (on home page)
 *	Gadget boxes (on home page)
 *	Column layout (for site map and more)
 *	Table layout (for index page, forum, and more)
 *	Edit page (the page for posting and editing articles)
 *	Calendar
 *	Comments
 *	Special content and display (folder box, poll, sidebar, toc, toq)
 *	Info about a post (date, author, download)
 *	Page status (draft, expired)
 *
 * OUTSIDE MAIN PANEL
 *	News and featured articles (in extra_panel)
 *	Contextual menu (in extra_panel)
 *	Collections
 *	Slide Show
 *
 *PERSONAL TWEAKS
 *	Personal preferences and unusual circumstances
 */

/**
 * @todo:	check and clear all VERIFAL markers
 *		div,dl,dt,dd,input{margin:0;padding:0;} as per YUI ?
 */

/* -----------------------------------------------------------------------------
 * 	GENERAL FORMATTING
 *
 * Where we define rules that apply throughout the site :
 *	The body element 
 * 	HTML tags
 *	yacs codes
 *	Links
 *	Images *
 * ---------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------
 * 	The body element
 *
 *	Most elements will inherit some of these attributes
 * ---------------------------------------------------------------------------*/

body {
	margin: 0;		/* to override browsers */
	padding: 0;		/* to override browsers */
	font-family: "Times New Roman", Times, serif; /* it's your choice */
	font-size: 13px;	/* applying Yahoo UI Library CSS suggestions */
	color: #333;		/* dark grey might be easier on the eye */
	background: #F7E6D4; 
	text-align: center; 	/* to make IE center everything */
}

* html body { 			/*align IE PC with other browsers */
	font-size: small;
}

body * {
	line-height:1.22em; 	/* default line-height based on font-size, not calculated value */
}

/* -----------------------------------------------------------------------------
 * 	HTML tags
 *
 * 	To redefine behaviour of standard HTML and XHTML tags, ensure that all browsers will be aligned
 *	and indicate which yacs codes can be used to create desired effect
 * ---------------------------------------------------------------------------*/

abbr { /* to indicate more information is provided in a popup -- similar to acronym below*/
	border-bottom: 1px dotted #ccc;
	cursor: help;
}

acronym { /* to indicate more information is provided in a popup -- [hint]...[/hint] */
	border-bottom: 1px dotted #ccc;
	cursor: help;
}

b { 				/* bold -- [b]...[/b] */
}

blockquote { /* someone has been cited -- [quote]...[/quote] -- different in print than on screen */
	border-left: 2px solid #ccc;
	margin: 0;
	padding: 0 0 0 4px;
}

@media screen { 		/* on screen only, not on printer */

	blockquote { 		/* prefix quotes with a nice image */
		padding-left: 25px;
		background: url("images/left_quote.gif") top left no-repeat;
		border: none;
	}

	blockquote .quote_prefix span { /* instead of the bare quote char from browser */
		display: none;
	}
}

br { 				/* new line -- [nl] */
	font-size: 0.5em; 	/* same as the space after a paragraph */
}

caption { 			/* to override browsers and default to non-centered italic */
	text-align:left;
	font-style:italic;
	font-weight:normal;
}

cite { 				/* to override browsers and reset to normal, just in case */
	font-style:normal;
	font-weight:normal;
}

code { 				/* some code sample -- [code]...[/code] */
	color: #111; 		/* to avoid inheritance */
	font: 100% "Courier New", Courier, monospace; /* shorthand to reset browsers */
	background-color: #eee; /* to make code more visual */
}

del { 				/* deleted -- [deleted]...[/deleted] */
}

dfn { 				/* to override browsers and reset to normal, just in case */
	font-style:normal;
	font-weight:normal;
}

em {  				/* to override browsers and reset as italic */
	font-style:italic;
	font-weight:normal;
}

fieldset {  			/* to override browsers and reset to normal, just in case */
	border:0;
	margin: 0;
	padding: 0;
}
form { 				/* to force inline rendering for all browsers */
	margin: 0;
	padding: 0;
}

hr { 				/* an ordinary horizontal rule --- [---], [___] */
	height: 0px;
	border-width: 1px;
	border-color: #ccc;
	border-style: none none solid none;
}

i { 				/* italic -- [i]...[/i] */
}

input {
	font:99% Verdana, Arial, Helvetica, sans-serif; /* 99% for Safari */
	margin: 0;
	padding: 0;
}

input[type="password"],
input[type="text"] { 		/* to change form elements */
	border: #ccc solid 1px;
}

input:focus { 			/* to help in locating the current field, but not for IE6 or IE7 */
	background-color:#ffc;
}

input[type="submit"] { 		/* to change button appearance , but not for IE6 */
	background-color: #aaa;
	border-color: #dcdcdc #696969 #696969 #dcdcdc;
	border-style: solid;
	border-width: 2px;
	text-align: center;
	padding: 1px;
	font-size: 77%;
}

input[type="submit"]:focus,	/* does not work for IE6 */
input[type="submit"]:hover {
	background-color: #dde;	/* same color as background of active or hover links in main_panel */
}

ins { 				/* inserted -- [inserted]...[/inserted] */
}

li { 				/* to prevent justification */
	text-align: left;
}

marquee { 			/* horizontal scroller -- [scroller]...[/scroller] */
}

ol { /* a numbered list -- [list=1]...[/list], [list=a]...[/list], [list=A]...[/list], [list=i]...[/list], [list=I]...[/list] */
				/* no other formatting in this CSS, formatting left to browser and user */
}

p { 				/* add a space after each paragraph */
	margin: 0 0 0.5em 0;
	padding: 0;
}

pre { 				/* a block of sample lines -- [php]...[/php], [snippet]...[/snippet] */
	font-family: "Courier New", Courier, monospace;
	color: #111;		/* to avoid inheritance */
	font-size: 100%;	/* to avoid inheritance */
	font-weight: normal;	/* to avoid inheritance */
	margin: 1em;
	padding: 1em;
	background-color: #ffc;
	border: 1px solid #ccc;
	white-space: normal;	/* check to see if pre or pre-wrap is needed VERIFAL */
}

pre code { 			/* use pre background-color instead of code background-color */
	background-color: transparent;
}


q:before,
q:after  { 			/* to override browsers and let user put in quotes */
	content: ""; 
}

select {
	font:99% Verdana, Arial, Helvetica, sans-serif; /* 99% for Safari */
}

strong { 			/* to override browsers and reset as bold*/
	font-style:normal;
	font-weight:bold;
}

sub { 				/* shifted down -- [subscript]...[/subscript] */
}

sup { 				/* shifted up -- [superscript]...[/superscript] */
}

textarea { 			/* to change form elements */
	border: #ccc solid 1px;
	margin: 0;
	padding: 3px;
	font:99% Verdana, Arial, Helvetica, sans-serif; /* 99% for Safari */
}

textarea:focus { 		/* to help in locating the current field, but not for IE6 or IE7 */
	background-color: #ffc;
}

u { 				/* underlined -- [u]...[/u] */
}

ul { 				/* an ordinary list -- [list]...[/list] */
	margin: 0;
	padding: 0;
	list-style:none; 	/* to override browsers and reset to simple listing for menus */
}

var { 				/* to override browsers and reset to normal, just in case */
	font-style:normal;
	font-weight:normal;
}

/* -----------------------------------------------------------------------------
 * 	yacs codes
 *
 * 	To define behaviour of yacs codes and some other elements specific to yacs
 * ---------------------------------------------------------------------------*/

p.away { 			/* not visible for ordinary browsers -- accessibility tweak */
	position: absolute;
	left: -998px;
	width: 990px;
}

.big { 				/* bigger than title, but smaller than .huge -- [big]...[/big] */
	font-size: 182%;
	line-height: 1.1em; 	/* reduce line-height for big and huge sizes*/
}

p.caution { /* a warning paragraph -- [caution]...[/caution] -- see also CAUTION_FLAG in skins/skin_skeleton.php */
}

.comic { /* use a special font -- [style=comic]...[/style] */
    font-family: "Comic Sans MS", cursive;
}

.cursive { /* use a cursive font -- [style=cursive]...[/style] */
    font-family: cursive;
}

div.error { 			/* report on abnormal conditions */
	color: red;
}

.fantasy { /* various rendering, you have been warned -- [style=fantasy]...[/style] */
    font-family: fantasy;
}

.flag { /* compact meta-information -- [flag]foo bar[/flag], but also [new], [popular], [updated] -- see also .new, .popular, .updated */
	color: red;
	font-size: 0.8em;
}

.hide { 			/* text readers will show it */
	display: none;
}

.highlight1 { 			/* to locate words looked for, following a search request */
	background-color: #8f8; /* bright green */
}

.highlight2 {
	background-color: #88f; /* light purple */
}

.highlight3 {
	background-color: #f88; /* sort of rose */
}

.huge { 			/* bigger than .big -- [huge]...[/huge] */
	font-size: 240%;
	line-height: 1.1em; 	/* reduce line-height for big and huge sizes*/
}

.indent { 			/* shift to the right -- [indent]...[/indent] */
	margin: 0.3em 0 0.5em 3em;
}

.my_style { /* just an example featured in help pages -- [style=my_style] -- codes/basic.php -- you can create other styles */
	color: purple;
	font-style: italic;
}

@media screen { 		/* not on printer */

	.new { 			/* display a neat image as a flag -- [new] -- see also .flag */
		padding-right: 11px;
		margin-right: 2px;
		background: url("icons/new.gif") right no-repeat;
	}

	.new span { 		/* mask default text */
		display: none;
	}
}

p.note { /* a noticeable paragraph -- [note]...[/note] -- see also NOTICE_FLAG in skins/skin_skeleton.php */
}

@media screen { 		/* not on printer */

	.popular { 		/* display a neat image as a flag -- [popular] -- see also .flag */
		padding-right: 24px;
		margin-right: 2px;
		background: url("icons/popular.gif") right no-repeat;
	}

	.popular span {		/* mask default text */
		display: none;
	}
}

@media screen { 		/* not on printer */

	.private { 		/* display a neat image to flag private items */
		padding-right: 13px;
		background: url("icons/private.png") right no-repeat;
	}

	.private span { 	/* mask text */
		display: none;
	}
}

@media screen { 		/* not on printer */

	.restricted { 		/* display a neat image to flag restricted items */
		padding-right: 13px;
		background: url("icons/restricted.png") right no-repeat;
	}

	.restricted span { 	/* mask text */
		display: none;
	}
}

.right { 			/* flushed to the right -- [right] */
	text-align: right;
}

.sans-serif { 			/* use a sans-serif font -- [style=sans-serif]...[/style] */
    font-family: sans-serif;
}

.serif { 			/* use a serif font -- [style=serif]...[/style] */
    font-family: serif;
}

.small, 		/* smaller than default, but larger than .tiny -- [small]...[/small] */
table.small tr td { 	/* [table=small]...[/table] */
	font-size: 85%;
}

.tiny, 				/* smaller than .small -- [tiny]...[/tiny] */
table.tiny tr td { 		/* [table=tiny]...[/table] */
	font-size: 69%;
}

@media screen { 		/* not on printer */

	.updated { 		/* flag modified pages -- [updated] -- see also .flag */
		padding-right: 20px;
		margin-right: 2px;
		background: url("icons/updated.gif") right no-repeat;
	}

	.updated span {		/* mask default text */
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * 	Links
 *
 *	Most rules related to links are grouped here, to help manage the general behavior of links
 *	however, in some instances, link styling may be modified by rules in other parts of this style sheet
 * ---------------------------------------------------------------------------*/

a,				/* basic link */
a code { 			/* link including some code, to supersede code formatting */
	color: #a92725;		/* to override browsers and code color*/
	background-color: transparent; /* to override code background-color in links, e.g. in toc*/
	text-decoration: none;	/* to override browsers */
	cursor: pointer; 	/* to help IE on folded boxes */
}

a:link,				/* link displayed for the first time */
a:link code,			/* link including some code, to supersede code color */
a:visited,			/* link that has been used at least once */
a:visited code { 		/* link including some code, to supersede code color */
	color: #a92725;		/* to override browsers */
}

a:active,			/* link at the moment it is clicked */
a:active code,			/* link including some code, to supersede code color */
a:hover,			/* link below the mouse pointer, only in main_panel */
a:hover code { 			/* link including some code, to supersede code color */
	background-color: #dde;
}

a img { /* to override browsers and prevent borders around images used as links */
	border: none;
}

.menu { 			/* a small inline menu, almost anywhere */
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 85%;
}

.menu a {
	font-weight: normal;
}

.menu_bar { /* an horizontal menu of commands, below a section title, also stating number of pages in section */
	clear: left;
	margin: 2px 0 8px 0;
	color: #ffe
}

.menu_bar a {
	font-size: 85%;
	font-weight: normal;
}

#sections a.section { /* a link to a section, in some site map -- index.php, sections/index.php, sections/view.php */
	font-weight: bold;
}

table.neighbours { 		/* previous and next links -- articles/view.php */
	clear: both;
	border: none;
}

table.neighbours td {
	border: none;
	margin: 0;
	padding: 1em 0;
}

@media screen { 		/* not on printer */
	#main_panel a.next { /* shortcut to next page -- [next=id], [next=id, label] */
	}
}

@media screen { 		/* not on printer */
	#main_panel a.previous { /* shortcut to previous page -- [previous=id], [previous=id, label] */
	}
}

@media screen { 		/* not on printer */

	#main_panel a.article { /* the image near a link to an article -- [article=id], [article=id, label] */
		padding-right: 13px;
		background: url("icons/document.png") right no-repeat;
	}

	#main_panel a:hover.article { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.article { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.category { /* the image near a link to a category -- [category=id], [category=id, label] */
		padding-right: 16px;
		background: url("icons/section.png") right no-repeat;
	}

	#main_panel a:hover.category { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.category { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.comment { /* the image near a link to a comment -- [comment=id], [comment=id, label] */
		padding-right: 17px;
		background: url("icons/news.png") right no-repeat;
	}

	#main_panel a:hover.comment { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.comment { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.email { /* the image near a link to an email address -- [email]address[/email], [email=label]address[/email] */
		padding-right: 18px;
		background: url("icons/mailto.png") right no-repeat;
	}

	#main_panel a:hover.email { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.email { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.external { /* the image near an external link -- [link]href[/link], [link=label]href[/link] */
		padding-right: 15px;
		background: url("icons/link.png") right no-repeat;
	}

	#main_panel a:hover.external { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.external { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.file { /* the image near a link to view file details -- [file=id], [file=id, label] */
		padding-right: 15px;
		background: url("icons/download.png") right no-repeat;
	}

	#main_panel a:hover.file { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.file { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.script { /* the image near a link to a phpDoc page -- [script]path/script.php[/script] */
		padding-right: 14px;
		background: url("icons/server.png") right no-repeat;
	}

	#main_panel a:hover.script { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.script { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.section { /* the image near a link to a section -- [section=id], [section=id, label] */
		padding-right: 16px;
		background: url("icons/section.png") right no-repeat;
	}

	#main_panel a:hover.section { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.section { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.server { /* the image near a link to a server profile -- [server=id], [server=id, label] */
		padding-right: 14px;
		background: url("icons/server.png") right no-repeat;
	}

	#main_panel a:hover.server { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.server { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.shortcut { /* the image near a local link */
		padding-right: 15px;
		background: url("icons/shortcut.png") right no-repeat;
	}

	#main_panel a:hover.shortcut { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.shortcut { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

@media screen { 		/* not on printer */

	#main_panel a.user { 	/* the image near a link to a user profile -- [user=id], [user=id, label] */
		padding-right: 15px;
		background: url("icons/zoom.png") right no-repeat;
	}

	#main_panel a:hover.user { /* same color as other hovered links */
		background-color: #dde;
	}

	* html #main_panel a.user { /* IE6 kills trailing rendering on long links */
		padding-right: 0px;
		background: none;
	}

}

.button { /* a link that mimic a form button -- [button]url[/button], [button=label]url[/button] */
	border-color: #dcdcdc #696969 #696969 #dcdcdc;
	border-style: solid;
	border-width: 2px;
	text-align: center;
	padding: 4px;
	line-height: 2em;
}

a.button,
a:visited.button {
	background-color: #c0c0c0;
	color: #202020;
	text-decoration: none;
}

a:active.button { 		/* click on button */
	background-color: #cfcfcf;
	color: #202040;
	border-color: #696969 #dcdcdc #a9a9a9 #696969;
}

a:hover.button { 		/* hover a button */
	background-color: #cfcfcf;
	color: #202040;
}

/* -----------------------------------------------------------------------------
 * 	Images
*
 *	Most rules related to images are grouped here, to help manage the general behavior of images
 *	however, in some instances, image styling may be modified by rules in other parts of this style sheet
 * ---------------------------------------------------------------------------*/

img { 				/* a standard image */
	border:0; 		/* to prevent browsers from applying a border */
	margin: 0;
	padding: 0;
}

.inline_image { /* an embedded image (not the thumbnail, which is .thumbnail_image) */
}

.inline_image div.large img { 	/* a simple padding without border for large images */
	padding: 4px;
}

.inline_image div.large p {	 /* a nice panel with the title below the image */
	text-align: left;
	margin: 0;
	padding: 6px;
	font-size: small;
}

.inline_image span.suffix { 	/* ensure following text flows below the image */
	display: block;
	clear: left;
}

.center_image { 		/* an image in the middle of the page [image=xx, center] */
	position: relative;
	clear: both;
	text-align: center;
	margin: 8px 0 8px 0;
}

.center_image p { 		/* image caption */
	text-align: center;
	font-size: smaller;
	padding: 6px;
	margin-top: 0;
}

.left_image { 			/* an image floated to the left -- [image=xx, left] */
	float: left;
	margin: 8px 12px 8px 0;
	text-align: center;
}

.left_image div.large p { 	/* a nice panel with the title below the image */
	text-align: center;
	margin: 0;
	padding: 6px;
	font-size: small;
}

.left_image p {			/* image caption */
	text-align: center;
	font-size: smaller;
	padding-top: 0;
	margin-top: 0;
}

.right_image { 			/* an image floated to the right -- [image=xx, right] */
	float: right;
	margin: 8px 0 8px 8px;
	text-align: center;
}

.right_image div.large p {	 /* a nice panel with the title below the image */
	text-align: center;
	margin: 0;
	padding: 8px;
	font-size: small;
}

.right_image p { 		/* image caption */
	text-align: center;
	font-size: smaller;
	padding-top: 0;
	margin-top: 0;
}

.frame_image div { 		/* a framed image -- [image=123, frame] */
}

.frame_image div img {
	border: 1px solid #ccc;
	padding: 4px;
}

.frame_image div p { 		/* a nice panel with the title below the image */
	text-align: left;
	margin: 0;
	padding: 6px;
	font-size: small;
}

.frame_image span.suffix { 	/* ensure following text flows below the image */
	display: block;
	clear: left;
}

br.images_prefix { /* before a set of thumbnails, to align them correctly -- [images] */
	clear: left;
}

br.images_suffix { /* after a set of thumbnails, to align following text properly -- [/images] */
	clear: left;
}

div.thumbnail_image { 		/* float thumbnails to align them */
	float: left;
	margin-right: 8px;
	text-align: center;
	height: 100px;	 /* to align with actual thumbnail height set in configuration panel for skins */
	width: 100px;	/* to align with actual thumbnail width set in configuration panel for skins */
	overflow: auto;
}

.thumbnail_image a img { 	/* no border around clickable images */
	display: inline;
	border: none;
}

.thumbnail_image p { 		/* caption */
	position: relative;
	left: -120px;
	text-align: center;
	font-size: 7pt;
	padding-top: 0;
	margin-top: 0;
}

div.external_image { 		/* display an image hosted elsewhere -- [img]url[/img] */
	max-width: 400px; 	/* clip the image to preserve comments layout */
	width: 400px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * 	STRUCTURAL LAYOUT
 *
 * The 3 main parts of the layout are all contained in the wrapper:
 *	the header_panel 
 * 	the content (containing the main_panel and the side_panel)
 * 	and the footer_panel.
 * Sub-parts of the layout, such as news or calendars are presented after these main parts. 
  * ---------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------
 * 	Wrapper
 *
 * It contains about everything 
 *
 * -------------------------------------------------------------------------- */

@media screen { 		/* only on screen, not on printer or handheld */

	#wrapper { 		/* used to limit the width of the page */
		position: relative;
		width: 800px;
		margin: 0;
		padding: 0;
		background: #fff;
	}

}

/* -----------------------------------------------------------------------------
 * 	Header Panel
 * ---------------------------------------------------------------------------*/

#header_panel { 		/* at the top of evey page */
	margin: 0;
	padding: 0;
	width: 100%;
	height: 200px; 		/* matches background-image and must match the top of #side_panel */
	background: #fff url("images/header_background.png") top right no-repeat;
}

@media print { 			/* do not print heading information, including #tabs */

	#header_panel {
		display: none;
	}

}

#header_title { 		/* appears at the top of every page -- see template script */
	position: absolute;
	top: 0;			/* use padding to place header_title text, to leave room for optional header_image */
	left: 10px;		/* offset for optional header_image as well as header_title text */
	margin: 0; 		/* needed for IE Mac */
	padding: 0;
	font-size: 90px; 	/* not to be resized by browser */
	font-weight: bold;
}

#header_title a { 		/* link to the home page */
	display: block; 	/* to add margins and padding */
	position: relative;
	padding: 10px 0px 35px 10px; /* left padding makes room for optional header_image width, vertical padding plus font-size equals header_panel height */
	color: #ffe; 		
	font-family: Garamond, Georgia, Times, "Times New Roman", serif;
	font-variant: small-caps;
}

#header_title a:hover {
	color: #266732;		/* link changes color when about to be clicked */
	background-color: transparent; /* to override general link behavior */
}

#header_slogan { 		/* appears towards the top of every page -- see template script */
	position: absolute;
	top: 90px;		/* below header_title */
	left: 20px;		/* equals header_title left offset plus left padding of header_title anchor*/
	margin: 0; 		/* needed for IE Mac */
	padding: 0;
	font-size: 24px; 	/* not to be resized by browser */
	font-family: Garamond, Georgia, Times, "Times New Roman", serif;
	font-weight: bold;
	font-variant: small-caps;
	white-space: nowrap; 	/* for Opera */
	color: #ffe;
	text-align: left;
}

#tabs { 			/* the global navigation bar -- see template script */
	position: absolute;
	top: 175px; 		/* height of header panel minus height of tabs */
	right: 0px;		/* to align them at the right of the screen */
	margin: 0; 		/* needed for IE Mac */
	padding: 0;
}

#tabs li {			/* tabs are an ul that we want displayed on a line */
	display:inline;
}

#tabs li a { 
	margin:0 4px;		/* to set the space between tabs */
	padding:0;
	float: left;		/* to list tabs left to right */
}

#tabs li a span { 		/* to display text in tab*/
	display: block;
	color: #ffe; 		/* if not specified, will use general color for links */
	font-family: Garamond, Georgia, Times, "Times New Roman", serif; /* to make sure it does not inherit something else */
	font-size: 16px; 	/* must not be changed or automatically adjusted, matches background image */
	font-weight: bold;
	font-variant: small-caps;
	padding: 6px 5px 6px 5px; /* vertical padding plus font-size equals height of tab */
	float: left;
	background: transparent url("images/tabs.png") right top no-repeat; /* override general link background */
}

#tabs li a:hover { 		/* change tab background on hovering */
	background: transparent url("images/tabs.png") right -25px no-repeat;
	cursor: pointer; 	/* else IE6 is lost */
}

#tabs li a:hover span { 	/* change tab background on hovering -- see the tab image */
	background: transparent url("images/tabs.png") right -25px no-repeat;
}

/* -----------------------------------------------------------------------------
 * 	Content
 *
 * 	The content contains the main_panel and the side_panel
 *
 * -------------------------------------------------------------------------- */

@media screen { 		/* only on screen, not on printer or handheld */

	#content { 		/* could be used to set a background */
	margin: 0;
	padding; 0;
	}

}

/* -----------------------------------------------------------------------------
 * 	Main Panel
 *
 *	Elements generally appearing in main_panel are presented in their usual order of appearance
 * ---------------------------------------------------------------------------*/

@media screen { 		/* only on screen, not on printer or handheld */

	#main_panel { 		/* where the actual content is */
		margin: 0;	/* to top margin is provided by h1 when displayed */
		padding: 0 1em 1em 1em; /* 1em here equals the base font-size set in body */
		text-align: justify;
/*		background-color: #fff; /* does not work with IE6 VERIFAL */
/*		z-index: -1;	 /* not sure why this may be needed VERIFAL */
	}

	body.extra div#main_panel { /* display a second column on the right, on pages with side_panel */
		margin-right: 200px;
	}

	body#home div#main_panel,
	body#sections div#main_panel { /* could have been different width on home and sections page  */
		margin-right: 200px;
	}

}

p#crumbs { 			/* path to this page -- see template script */
	font-size: 77%;
	padding: 0;		/* to override p format */
	margin: 0 0 -1.3em 1.3em;	/* to place the breadcrumbs inside the h1 top margin */
	text-align: left;
}

@media print { /* do not print context information */
	p#crumbs {
		display: none;
	}
}

img.icon { /* main image of an article, or of some section -- $context[page_image'], handled in template script */
	float: left;
	margin: 8px 12px 8px 0px; /* set top margin at 30 px to align image with top of introduction */
	padding: 0;
	display: none;		/* to hide page icon DELAL */
}

h1 { 				/* appears only once, with the page title */
	clear: left;
	margin: 1.5em 0 0 0;	/* no bottom margin because of bottom padding */
	padding: 0 0 0.5em 0; 	/* to make room for underlining image in background */
	text-align: left; 	/* to override browsers */
	color: #266732;
	font-size: 152%;
	font-weight: bold;
	background: url("images/h1_background.png") left bottom no-repeat /* to enhance title */;
}

p#page_menu { /* an horizontal menu of commands under the page title, available to manage this page */
	margin: 0 0 1em 0;
	font-size: 77%;
}


@media print { 			/* do not print the page menu */
	p#page_menu {
		display: none;
	}
}

.introduction { /* before the main content of an article -- articles/view.php, sections/view.php, categories/view.php */
	margin: 0.5em 0 1.5em 0;
	color: #266732;
	font-weight: bold;
	text-align: left;
}

div.section_box { 		/* components of the main content */
	clear: left;
	margin-top: 2px;
}

h2 { /* appears in main_panel, to introduce sections of page -- [title]...[/title], [question]...[/question] */
	clear: left;
	margin: 1em 0 0.5em 0;
	padding: 0;
	text-align: left; 	/* to override browsers */
	color: #721816;
	font-size: 114%;
	font-weight: bold;

}

div.section_box h2 { 		/* components of the main content */
	margin-top: 2em;
}

h3 { /* a second level of heading in the main panel -- [subtitle]...[/subtitle] */
	clear: left;
	margin: 1em 0 0.5em 0;
	padding: 0;
	text-align: left; 	/* to override browsers */
	color: #721816;
	font-size: 100%;
	font-weight: bold;
}

h4,h5,h6 { 			/* to override automatic formatting by browsers */
	font-size:100%;
	font-weight:bold;
	margin: 1em 0 0.5em 0;
	padding: 0;
}

#main_panel ul { 		 /* space lists in the main panel */
	margin: 0.5em 0 1em 0;
}

#main_panel ul li {		/* set special bullet and room for it */
	margin: 0 0 0 1em;
	padding-left: 20px;
	background: url("images/bullet.gif") no-repeat 0px 0px;
}

/* -----------------------------------------------------------------------------
 * 	Side Panel
 * ---------------------------------------------------------------------------*/

#side_panel { 			/* navigation information */
	position: absolute;
	top: 200px; 		/* matches height of #header_panel */
	left: 625px;
	width: 175px; 		/* the exact width of the underlying background pattern */
	margin: 0;
	padding: 0;
	font-size: 85%;
	font-weight: normal;
	background-color: #fff;
}

@media print { 			/* do not print complementary information */

	#side_panel {
		display: none;
	}

}

#side_panel dl { 		/* a box on the side panel */
	margin: 2px 0;		/* to separate the boxes */
	padding: 0;
	font-family: Garamond, Georgia, Times, "Times New Roman", serif; /* to make sure it does not inherit something else */
	font-size: 122%;
	font-variant: small-caps;
	background: #993300;	 /* optional image to enhance title */;
}

#side_panel dl dd { 		/* body of one side box */
	margin: 0;
	padding: 1em 1.5em 1.5em 1.5em; /* no top padding because title has a lot of padding */
	background: #d7b093; /* optional image to enhance box */;
}

#side_panel dl dt { 		/* used for titles of various boxes */
	margin: 0;
	padding: 0.2em;		/* enough vertical padding for the icons added */
	border-bottom: 2px solid #ffe;
	font-weight: bold;
	color: #fee;
}

#side_panel dl#main_menu dt { 	/* the dynamic menu replicated on all pages */
	margin-top: 0px;	/* to finely position the first box in the side panel */
	padding-left: 5px;	/* to position icon, use position of image below to complete adjustment */
	font-size: 122%;
	background: transparent url("images/icon_home.gif") 6px 4px no-repeat;
}

#side_panel dl#main_menu dd { 	/* to make main menu bigger */
	font-size: 114%;
}

#side_panel dl#main_menu dd form { 	/* to make main menu bigger */
	font-size: 77%;
}

#side_panel dl#user_menu dt { 	/* a box to authenticate, or to list available commands */
	padding-left: 5px;	/* to position icon, use position of image below to complete adjustment */
	background: transparent url("images/icon_user.gif") 6px 4px no-repeat;
	font-size: 122%;
}

#side_panel dl.extra_box dt,	/* an extra box at the side panel */
#side_panel dl.navigation_box dt { /* a navigation box at the side panel */
	padding-left: 5px;	/* to position icon, use position of image below to complete adjustment */
	background: transparent url("images/icon_navigation.gif") 6px 4px no-repeat;
	font-size: 122%;
}

/* -----------------------------------------------------------------------------
 * 	Footer Panel
 * ---------------------------------------------------------------------------*/

#footer_panel { 		/* comes at the bottom of everything */
	clear: left;
	margin: 0;
	padding: 0 0 0 10px;
	text-align: left;
	font-size: 77%;
	font-weight: normal;
	background-color: #fff;
}

@media print { 			/* do not print footer information */

	#footer_panel {
		display: none;
	}

}

/* -----------------------------------------------------------------------------
 * 	GENERAL PAGE FORMATTING
 *
 *	Items that can be found anywhere on any page
 * ---------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------
 * 	Details
 *
 *	Might be everywhere in pages
 * ---------------------------------------------------------------------------*/

.details { 			/* a set of details */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* to prevent inheritance */
	font-weight: normal;
}

.details a { 			/* a link among details */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* to prevent inheritance */
	font-weight: normal;
}

#main_panel .details,
#side_panel .details { 		
	color: #999;		/* less contrasted than regular text */
	font-size: 77%;
}

body#sections #main_panel .section_box .details { 		
	display: none;		/* to hide details on section index page */
}

p.details { 			/* stick to previous and next elements */
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* -----------------------------------------------------------------------------
 * 	MAIN PANEL FORMATTING
 *
 *	Various items found mainly in the main_panel
 * ---------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------
 * 	Recent articles
 *
 *	Inside main_panel, only on home page
 * ---------------------------------------------------------------------------*/

@media screen { /* for the home page, only on screen, not on printer or handheld -- index.php */

	#home_center { /* the centered article at the home page, in layout: newspaper */
		border-left: 1px dotted #ccc;
		margin: 0 0 1em 0.5em;
		padding: 0 0 0 0.5em;
		float: left;
		width: 31%; /* 31% is the maximum accepted by Firefox to have three boxes in a row at 800x600 */
	}

	#home_east { /* the rightmost article at the home page, in layouts: boxesandarrows, newspaper */
		border-left: 1px dotted #ccc;
		margin: 0 0 1em 0.5em;
		padding: 0 0 0 0.5em;
		float: left;
		width: 31%; /* for newspaper */
/*		width: 48%; /* for boxesandarrows */
	}

	#home_north { /* the most new article at the home page, in layouts: daily, newspaper, slashdot */
		clear: left;
		border: 1px solid #266732;
		margin: 0.5em 0 0.5em 0;
		padding: 0 0.5em;
	}

	#home_north h2 { /* space above title to be partly delegated to the containing div */
		margin-top: 0.5em;
	}

	#home_north .date { /* space above date to be partly delegated to the containing div */
		margin-top: 0.5em;
	}

	#home_west { /* the leftmost article at the home page, in layouts: boxesandarrows, newspaper */
		margin: 0 0 1em 0;
		padding: 0;
		float: left;
		width: 31%; /* for newspaper */
/*		width: 48%; /* for boxesandarrows */
	}

	#home_south h3 { /* titles within home_east, home_center and home_west, for layout: newspaper */
		margin-top: 0;
	}

}

/* -----------------------------------------------------------------------------
 * 	Gadget boxes
 *
 *	Inside main_panel, only on home page
 * ---------------------------------------------------------------------------*/

#gadgets_prefix { 		/* comes before gadget boxes */
	clear: left; 		/* align properly after site map, if any */
	margin: 0;
}

#gadgets_suffix { 		/* comes after gadget boxes */
	clear: both; 		/* compensate for floated boxes */
	margin: 0; 		/* ignored by firefox anyway */
	padding: 0 0 0.5em 0; 	/* make some room after gadget boxes */
}

dl#gadget_1,
dl#gadget_3,
dl#gadget_5 { /* no more than two boxes per row -- also see .gadget_box -- from index.php, sections/view.php */
 	clear: left;
	float: left;
}

dl#gadget_2,
dl#gadget_4,
dl#gadget_6 { /* no more than two boxes per row -- also see .gadget_box -- from index.php, sections/view.php */
 	clear: right;
	float: right; 		/* weird behavior of Firefox with boxes of differing text lenght VERIFAL*/
}

dl.gadget_box { /* container of one gadget box -- also see #gadget_1, etc. -- from index.php, sections/view.php */
	background: url("images/extra_dt.png") right top no-repeat; /* top left of background image */
	margin: 1em 0; 		/*to separate boxes horizontally */
	padding: 0;
	width: 48%; 		/* to separate boxes vertically by 2 % of #main_panel width */
}

dl.gadget_box dd { 		/* content of one gadget box */
	margin: 0;
	padding: 0.5em;
	font-size: 85%;
	text-align: left; 	/* no justification in small boxes */
}

dl.gadget_box dt { 		/* header of one gadget box */
	padding: 0.5em;
	background: transparent; /* to let the background image show, if you want, otherwise just set a color */
	font-size: 85%;
	font-weight: bold;
	color: #721816;
}

/* up to 6 gadget boxes, to be styled separately -- see index.php and sections/view.php */

dl#gadget_1 dd {
	background-color: #ffe;
}

dl#gadget_2 dd {
	background-color: #ddf;
}

dl#gadget_3 dd {
	background-color: #ffc;
}

dl#gadget_4 dd {
	background-color: #dfd;
}

dl#gadget_5 dd {
	background-color: #fd9;
}

dl#gadget_6 dd {
	background-color: #edf;
}

/* -----------------------------------------------------------------------------
 * 	Column layout
 *
 *	Mainly for laying out site map and sections index page
 * ---------------------------------------------------------------------------*/

dl.column { 			/* one single column, to display the site map on the home page -- index.php */
    margin: 1em 8px 8px 0;
    padding: 0;
}

dl.column dd { 			/* column actual content */
	margin: 0 0 1em 2em;
	padding: 0 0 0 4px;
	border-left: solid 1px #ccc;
	overflow: hidden; 	/* kill oversized links */
}

dl.column dd a.category,
dl.column dd a.section { 	/* make content look larger in single column */
	font-size: 114%;
}

dl.column dt { 			/* the image aside the column */
	clear: left;
	border: 0;
	margin: 0;
	padding: 2px 0 2px 0;
}

dl.column_1 { /* left column out of two -- index.php, sections/index.php, sections/view.php, categories/index.php, etc. */
    margin: 0 0 8px 0;
    padding: 0;
    float: left;
    width: 50%; 
}

dl.column_2 { /* right column out of two -- index.php, sections/index.php, sections/view.php, categories/index.php, etc. */
    margin: 0 0 8px 0;
    padding: 0;
    float: right;
    width: 50%; 
}

dl.column_1 dd,
dl.column_2 dd { 		/* column actual content */
	margin: 0 0 1em 20px;
	padding: 0;
	overflow: hidden; 	/* kill oversized links */
}

dl.column_1 dt,
dl.column_2 dt { 		/* the image aside the column, no text */
	clear: left;
	padding: 2px 0 2px 0;
}

dl.column_1 dt,
dl.column_2 dt {		/* to change the default image when hovered, in map layout for section index */
	background: url("icons/folder_hover.gif") left no-repeat;
}

dl.column_1 dt a:hover,
dl.column_2 dt a:hover {
	visibility : hidden;
}

#sections dl.column dd span.details a,
#sections dl.column_1 dd span.details a,
#sections dl.column_2 dd span.details a { /* sub-items of sections listed in map layout, as in site map */
	font-size: 129%;	/* to override general styling of details anchor */
	color: #333;
}

/* -----------------------------------------------------------------------------
 * 	Table layout
 *
 *	For index pages and user created tables
 * ---------------------------------------------------------------------------*/

table { 			/* an ordinary table -- [table]...[/table] */
	font-size: inherit;
	border-collapse: collapse; /* to reset browsers */
	border-spacing: 0;  /* to reset browsers */
}

td { 				/* to override browsers and reset an ordinary cell */
	vertical-align: top;
	text-align: left;
	margin: 0;
	padding: 0;
}

th { /* an ordinary table header -- headers in [table]headers[body]content[/table] */
	margin: 0;
	padding: 3px;
	background-color: #ddd;
	text-align: left;
	font-style:normal;
	font-weight:normal;
}

table.decorated { /* a 2-column table, with images on the left -- [decorated]...[/decorated] */
	border-spacing: 0;
	border: none;
}

table.decorated td {
	border: none;
	margin: 0;
	padding: 6px;
}

table.decorated td img { /* align the decorating image with decorated text */
	margin-top: 6px;
}

table.grid { 			/* add bottom and right borders to the table*/
	border-spacing: 0;
	border-collapse: separate;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

table.grid td,
table.grid th { 		/* add top and left borders to each cell */
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin: 0;
	padding: 4px;
	vertical-align: top;
	text-align: left;
}

div.even { 			/* stacked with div.odd */
	padding: 0.5em 0;
}

div.odd { 			/* stacked with div.even */
	padding: 0.5em 0;
}

#main_panel td.odd { 		/* one row out of two, but only in the main panel */
	background-color: #eef;
}

.family,
.family a { 			/* to introduce several successive sections in a forum -- see sections/layout_sections_as_yabb.php */
	font-weight: bold;
	background-color: #eee;
	text-align: left;
	padding: 4px;
}

td.sorted { 		/* for tables handled through javascript -- see tables/sort.js */
	background-color: #ffe;
}

th.sorted {
	background-color: #ccc;
}

tr.odd td.sorted {
	background-color: #eef;
}

/* -----------------------------------------------------------------------------
 * 	Edit Page
 *
 *	Elements generally found on the page where you post or edit an article or other page
 * ---------------------------------------------------------------------------*/

table.form { 			/* a table used to present form fields */
	border: none;
}

table.form td {
	border: none;
	margin: 0;
	padding: 0.3em 0.5em 0.5em 0;
}

div.overlay { 			/* in lists, and before the main content of an article -- articles/view.php */
	padding: 0;
	margin: 0;
}

div.overlay p { 		/* one component of some overlay content */
	padding: 0;
	margin: 0;
}

/* -----------------------------------------------------------------------------
 * 	Calendar
 *
 *	inside main_panel
 * ---------------------------------------------------------------------------*/

table.calendar { 		/* add bottom and right borders to the table*/
	border-spacing: 0;
	border-collapse: separate;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	margin-top: 0;
	margin-bottom: 1em;
}

table.calendar caption,
table.calendar caption a { 	/* calendar caption, indicating the month */
	font-weight: normal;
	font-size: 12px;
	font-style: normal;
	color: #ffe;		/* does not apply, might be overriden VERIFAL */
	background-color: #89a;
	text-align: right;
	margin-top: 0.5em;
	padding: 4px;
}

table.calendar td,
table.calendar th { 		/* add top and left borders to each cell */
	font-weight: normal;
	font-size: 10px;
	font-style: normal;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin: 0;
	padding: 4px;
	vertical-align: top;
    text-align: left;
}

table.calendar td.spot {	/* a day for which there is a calendar entry */
	background-color: #eee;
	font-weight: bold;
}

/* -----------------------------------------------------------------------------
 * 	Comments
 *
 *	Styling the comments area under an article
 * ---------------------------------------------------------------------------*/

table.wide { /* to introduce threads and comments -- see articles/layout_articles_as_jive.php */
	width: 80%;
	max-width: 700px;
	margin: 0px;
	border: 1px solid #ccc;
}

table.yabb { /* to introduce threads and comments -- see articles/layout_articles_as_yabb.php */
	width: 80%;
	max-width: 700px;
	margin: 0px;
	border: 1px solid #ccc;
}

@media screen { /* not on printer */

	div.comment div {	/* some blog comment -- comments/layout_comments_as_daily.php */
		margin-left: 1em;
	}

}

dl.manual_comments { /* to list comments in a manual -- see comments/layout_comments_as_manual.php */
	margin: 0 1em 0 0;
	padding: 0;
}

dl.manual_comments dd { /* body of one note */
	margin: 0 0 1em 0;
	padding: 0.3em 1em 1em 1em;
}

dl.manual_comments dd.odd {
	border-left: 1px solid #266732;
	border-right: 1px solid #266732;
	border-bottom: 1px solid #266732;
}

dl.manual_comments dd.even {
	border-left: 1px solid #721816;
	border-right: 1px solid #721816;
	border-bottom: 1px solid #721816;
}

dl.manual_comments dt { /* header of one note */
	margin: 1em 0 0 0;
	padding: 1em 1em 2px 1em;
}

dl.manual_comments dt.odd {
	border-top: 1px solid #266732;
	border-left: 1px solid #266732;
	border-right: 1px solid #266732;
}

dl.manual_comments dt.even {
	border-top: 1px solid #721816;
	border-left: 1px solid #721816;
	border-right: 1px solid #721816;
}

dl.wiki_comments { /* to list comments in a wiki -- see comments/layout_comments_as_wiki.php */
}

dl.wiki_comments dd { /* body of one note */
	margin: 0 0 2em 4px;
	padding: 0.5em 1em 0.5em 1em;
}

dl.wiki_comments dd.odd {
	border-left: 1px solid #266732;
}

dl.wiki_comments dd.even {
	border-left: 1px solid #721816;
}

dl.wiki_comments dt { /* header of one note */
	margin: 0;
	padding: 0 0 2px 0;
	display: inline;
	margin-right: auto;
}

dl.wiki_comments dt.odd {
	border-bottom: 1px solid #266732;
}

dl.wiki_comments dt.even {
	border-bottom: 1px solid #721816;
}

/* -----------------------------------------------------------------------------
 * 	Special content and display
 *
 *	Grouped in this section, you will find:
 *		folder box: a box containing text that can be folded and unfolded
 *		poll: the layout and styling of the results
 *		sidebar : a smaller box inserted in the main text body, with a colored background
 *		table of contents
 *		table of questions
 * ---------------------------------------------------------------------------*/

div.folder_body { 		/* the body of an unfolded box -- [folder]...[/folder] */
	background-color: #eef;
	border-style: none none dotted dotted;
	border-width: 1px;
	padding: 3px 1em 1em 1em;
	margin-left: 5px;	/* to align the border with the middle of the folder icon */
}

a.folder_header { 		/* header of a folded box, not an ordinary link */
	font-size: 107%;
	font-weight: bold;
}

dl.poll { 			/* layout poll results */
    margin: 1em 8px 8px 0;
    padding: 0;
}

dl.poll dd { 			/* horizontal bar for one answer */
	white-space: nowrap; 	/* to replace <nobr> */
	margin: 0 0 1em 2em;
	padding: 4px 0 0 0;
}

dl.poll dt { 			/* label of one answer */
	clear: left;
	padding: 2px 3px 2px 0;
	float: left;
	width: 110px;
}

div.sidebar_box { 		/* somewhere in the main panel -- [sidebar]...[/sidebar] */
	background-color: #ffc;
	border-style: none none none solid;
	border-width: 1px;
	border-color: #ccc;
	float: right;
	width: 40%;
	padding: 1em;
	font-size: 85%;
	margin: 0 0 4px 4px;
}

div.sidebar_box h3 { /* header of one sidebar box -- the 'foo bar' of [sidebar=foo bar]...[/sidebar] */
	margin: 0;
	padding: 0;
}

.toc_box { 			/* table of content -- [toc] */
	background-color: #eef;
	padding: 9px;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

#main_panel div.toc_box ul { 	/* first level of the toc */
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 92%;;
}

#main_panel div.toc_box ul ul { /* second level of the toc */
	margin-left: 1.3em;
	font-size: 85%;;
}

.toq_box { 			/* table of questions -- [toq] */
	background-color: #eef;
	font-size: 85%;;
	padding: 9px;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

#main_panel div.toq_box ul { /* a list of questions */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -----------------------------------------------------------------------------
 * 	Info about a post
 *
 *	and related features, which might appear on a separate page, such as a download link
 * ---------------------------------------------------------------------------*/

p.date { /* date of a post, above its title -- articles/layout_articles_as_daily.php & skins/layout_home_articles_as_daily.php */
	color: #ffe;
	font-size: 85%;
	padding-bottom: 4px;
	border-bottom: 1px solid #ccc; 
	text-align: right;
	display: none;	/* to hide the date on the colloque site */
}

.author_box { 			/* a user profile, towards the beginning of an article */
	float: right;
	margin: 5px;
	padding: 5px 5px 5px 20px; /* enough padding for image on screen */
	border: 1px solid #ccc;
	background: #ffc url("images/authoring.png") 5px 5px no-repeat;
	font-style:italic;
}

address { /* a author profile towards the end of the main panel -- from articles/view.php */
	padding-top: 0.2em;
	padding-bottom: 1em;	/* enough vertical padding for image on screen */
	font-style:italic;
	font-weight:normal; 	/* to override browsers */
}

@media screen { 		/* not on printer */

	address { 		/* prefix author profile with a nice image, but not with IE6 */
		padding-left: 20px;
		background: url("images/authoring.png") top left no-repeat;
		border: none;
	}

	* html address { 	/* IE6 kills trailing rendering on long links VERIFAL */
		padding-left: 0px;
		background: none;
	}
}

img.avatar { 			/* an image representing a member -- do not float it! VERIFAL */
	float: left;
	margin: 3px; 		/* some space around the image */
}

dl.download dd { /* the description below a download link -- see files/view.php */
	margin-left: 0;
}

dl.download dt { 	/* the link to download a file -- see files/view.php */
	margin-bottom: 1em;
	font-weight: bold;
}

span#family { 			/* within section title -- see sections/view.php */
	font-weight: normal;
	font-size: 70%;
	color: #721816;
}

/* -----------------------------------------------------------------------------
 * 	Page status
 * ---------------------------------------------------------------------------*/

@media screen { 	/* not on printer */

	.draft { 	/* signal draft pages with a neat image */
		padding-right: 10px;
		margin-right: 2px;
		background: url("icons/to_publish.gif") right no-repeat;
	}

	.draft span { 	/* mask default text */
		display: none;
	}
}

@media screen { 		/* not on printer */

	.expired { 		/* display a neat image to flag expired pages */
		padding-right: 16px;
		margin-right: 2px;
		background: url("icons/expired.gif") right no-repeat;
	}

	.expired span { 	/* mask default text */
		display: none;
	}
}

/* -----------------------------------------------------------------------------
 * 	OUTSIDE MAIN PANEL
 *
 *	Formatting and styling of various items found outside main_panel
 * ---------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------------
 * 	News and featured articles	
 *
 *	Specific styling added to general side_panel formatting
 * ---------------------------------------------------------------------------*/

body#home #side_panel dl#featured, /* featured articles box on the home page side_panel */
body#home #side_panel dl#scrolling_featured, /* featured articles box when scrolling */
body#home #side_panel dl#rotating_featured, /* featured articles box when scrolling */
body#sections #side_panel dl#news, /* news box in the side_panel on the home page and sections pages */
body#sections #side_panel dl#scrolling_news, /* news box in the side_panel on the home page and sections pages */
body#sections #side_panel dl#rotating_news { /* news box in the side_panel on the home page and sections pages */
	background: #993300; /* optional image to enhance title */
}

body#home #side_panel dl#featured dt, /* title of the featured articles box */
body#home #side_panel dl#scrolling_featured dt,
body#home #side_panel dl#rotating_featured dt{ 
	background: transparent url("images/featured_header.gif") 6px 4px no-repeat;
}

body#sections #side_panel dl#news dt, /* title of the news box */
body#sections #side_panel dl#scrolling_news dt,
body#sections #side_panel dl#rotating_news dt {
	background: transparent url("images/news_header.png") 6px 4px no-repeat;
}

#scrolling_featured div.scroller_outside, /* the navigation box for scrolling featured articles -- index.php, sections/view.php */
#scrolling_news div.scroller_outside { /* the navigation box for scrolling news -- index.php, sections/view.php */
	height: 8em; 		/* the height of the scrolling area */
}

.scroller_inside { 		/* the internal div of a scroller */
	position: relative;
}

.scroller_outside { 		/* the external div of a scroller */
	overflow: hidden; 	/* strip the tail, if any */
	position: relative; 	/* let the inside scroller work correctly */
}

#rotating_featured dd ul,
#rotating_news dd ul { 		/* the box for rotating news -- index.php, sections/view.php */
	height: 8em;		/* a fixed height for the box */
	overflow: hidden; 	/* strip the tail, if any */
}

#featured hr,
#scrolling_featured hr,
#news hr,
#scrolling_news hr { 		/* to separate items */
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px dotted #ccc;
	height: 0px;
}

#rotating_featured hr,
#rotating_news hr { 	/* items are displayed one at a time, and the separator is useless */
	display: none;
}

/* -----------------------------------------------------------------------------
 * 	Contextual menu	
 *
 *	The tree menu in the side_panel for navigating inside sections
 * ---------------------------------------------------------------------------*/

#contextual_menu ul.tree { /* shape a tree of links -- see build_tree() in skins/skin_skeleton.php */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 85%;
	line-height: 1.5em;
}

#contextual_menu ul.tree ul { /* indent all levels, except level 1 */
	background: url("icons/tree/vertical.gif") repeat-y;
}

#contextual_menu ul.tree li#contextual_menu_focus ul { /* elements below the current item */
	margin-right: 8px;
}

#contextual_menu ul.tree li#contextual_menu_focus ul li.last { /* last item of a branch */
}

#contextual_menu ul.tree_level_1 li { /* top-level branch of the tree is left-aligned */
	padding-left: 0;
}

#contextual_menu ul.tree_level_2 li,
#contextual_menu ul.tree_level_3 li,
#contextual_menu ul.tree_level_4 li,
#contextual_menu ul.tree_level_5 li { /* other levels are indented */
	padding-left: 14px;
	background: url("icons/tree/node.gif") no-repeat;
}

#contextual_menu ul.tree_level_2 li.last,
#contextual_menu ul.tree_level_3 li.last,
#contextual_menu ul.tree_level_4 li.last,
#contextual_menu ul.tree_level_5 li.last { /* last item of a branch VERIFAL */
	background: url("icons/tree/last.gif") no-repeat;
}

#contextual_menu ul.tree li a.below,
#contextual_menu ul.tree li a.close { /* focus is not here */
	padding-left: 16px;
	background: url("icons/tree/close.gif") top left no-repeat;
}

#contextual_menu ul.tree li a.current,
#contextual_menu ul.tree li a.open { /* item has the current focus */
	color: #266732;
	padding-left: 16px;
	background: url("icons/tree/open.gif") top left no-repeat;
}

/* -----------------------------------------------------------------------------
 * 	Collections		VERIFAL
 * ---------------------------------------------------------------------------*/

table.collections { /* a list of downloadable files -- see collections/browse.php */
	border-spacing: 0;
	border: none;
}

table.collections a img {
	border: none;
}

table.collections td {
	border: none;
	margin: 0;
	padding: 0.3em 8px 0.3em 8px;
}

table.collections th {
	border: none;
	margin: 0;
	padding: 0.3em 8px 0.3em 8px;
}

/* -----------------------------------------------------------------------------
 * 	Slide show		VERIFAL
 * ---------------------------------------------------------------------------*/

body#slideshow { 		/* background for slideshows */
	background: white;
}

body#slideshow h1 { 		/* title for slideshows */
	text-align: center;
	background: none;
	padding: 0;
}

/* -----------------------------------------------------------------------------
 * 	PERSONAL TWEAKS
 *
 *Formatting and styling to respond to personal preferences and unusual circumstances
 * ---------------------------------------------------------------------------*/

#comments,
#files,
#links {
	margin-top: 1em;
}

#comments h2,
#files h2,
#links h2 {
	color: #266732;
	font-size: 100%;
}

#description___Frame {		/* to enlarge FCK Editor box, when entering or editing content in an article */ 
	width: 550px;
}

/* #side_panel dl#help {
	font-size: 85%;		 to prevent the help box from hidding the FCK Editor 
} */

div.h300px {			/* to set content at 300px high, useful when used in conjunction with background image */
	height: 300px;
}

div.h400px {			/* to set content at 400px high, useful when used in conjunction with background image */
	height: 400px;
}

div.left150px {			/* to float content at the left in an invisible box 150px large */
	float: left;
	clear: both;
	width: 150px;
	padding: 0 1em 1em 0;	/* to align the top and left side, and set padding only alongside adjacent contents */
}

div.left150px img {		/* to resize the image in the left floated 150px-wide box */
	width: 150px;
}

div.left200px {			/* to float content at the left in an invisible box 200px large */
	float: left;
	clear: both;
	width: 200px;
	padding: 0 1em 1em 0;	/* to align the top and left side, and set padding only alongside adjacent contents */
}

div.left200px img {		/* to resize the image in the left floated 200px-wide box */
	width: 200px;
}

div.left250px {			/* to float content at the left in an invisible box 250px large */
	float: left;
	clear: both;
	width: 250px;
	padding: 0 1em 1em 0;	/* to align the top and left side, and set padding only alongside adjacent contents */
}

div.left250px img {		/* to resize the image in the left floated 250px-wide box */
	width: 250px;
}

div.left300px {			/* to float content at the left in an invisible box 300px large */
	float: left;
	clear: both;
	width: 300px;
	padding: 0 1em 1em 0;	/* to align the top and left side, and set padding only alongside adjacent contents */
}

div.left300px img {		/* to resize the image in the left floated 300px-wide box */
	width: 300px;
}

div.right150px {		/* to float content at the right in an invisible box 150px large */
	float: right;
	clear: both;
	width: 150px;
	padding: 0 0 1em 1em;	/* to align the top and right side, and set padding only alongside adjacent contents */
}

div.right150px img {		/* to resize the image in the right floated 150px-wide box */
	width: 150px;
}

div.right200px {		/* to float content at the right in an invisible box 200px large */
	float: right;
	clear: both;
	width: 200px;
	padding: 0 0 1em 1em;	/* to align the top and right side, and set padding only alongside adjacent contents */
}

div.right200px img {		/* to resize the image in the right floated 200px-wide box */
	width: 200px;
}

div.right250px {		/* to float content at the right in an invisible box 250px large */
	float: right;
	clear: both;
	width: 250px;
	padding: 0 0 1em 1em;	/* to align the top and right side, and set padding only alongside adjacent contents */
}

div.right250px img {		/* to resize the image in the right floated 250px-wide box */
	width: 250px;
}

div.right300px {			/* to float content at the right in an invisible box 300px large */
	float: right;
	clear: both;
	width: 300px;
	padding: 0 0 1em 1em;	/* to align the top and right side, and set padding only alongside adjacent contents */
}

div.right300px img {		/* to resize the image in the right floated 300px-wide box */
	width: 300px;
}

div.w500px {		/* to resize the image to fit in the center column  */
	text-align: center;
}

div.w500px img {		/* to resize the image to fit in the center column  */
	width: 500px;
}

div.page-back  {		/* to indent lists created with the [*] yacs code */
	display: none;
}

div.page-next  {		/* to indent lists created with the [*] yacs code */
	display: none;
}


/* -----------------------------------------------------------------------------
 * 	THE END
 * ---------------------------------------------------------------------------*/