/**
 * core styles generated by YACS
 *
 * This is a reference style sheet of YACS, and it may be automatically updated
 * on each new software release.
 *
 * To benefit from these styles out-of-the-box, insert a declaration at the very
 * beginning of own style sheet like this:
 *
 * @import url("../_reference/yacs.css");
 *
 * After this declaration, you can put any style rule that is specific to your theme.
 *
 * @author Bernard Paques
 * @author Thierry Pinelli (ThierryP)
 * @author Alexis Raimbault
 * @reference
 * @license http://www.gnu.org/copyleft/lesser.txt GNU Lesser General Public License
 */

/*************************
 * standard XHTML tags, in alphabetical order, that are not related to some yacs code
 *************************/

body {
	font-family: Georgia, Times, serif;
	font-size: 13px;
	line-height: 18px;
}

form { /* inline rendering for all browsers */
	margin: 0;
	padding: 0;
}

p { /* add some space below each paragraph */
	clear: none;
	margin: 0 0 1.3em 0;
	padding: 0;
}

h1 { font-size: 5.0em; }

h2 { font-size: 4.0em; }

h3 { font-size: 3.0em; }

h4 { font-size: 2.0em; }

/*************************
 * styles demonstrated into test page skins/test.php
 *************************/

/* some tabs */

div.tabs {
      float:left;
      max-width:100%;
      line-height: 1em;
}

div.tabs,
div.tabs a { /* text appearance in tabs */
}

div.tabs ul { /* position tabs */
	margin: 0;
	padding: 10px 10px 0 15px;
	list-style: none;
}

div.tabs ul li {
      display:inline;
      margin:0;
      padding:0;
}

div.tabs li a { /* tab top left corner */
      float:left;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
}

div.tabs li a span { /* tab top right corner */
      float:left;
      display:block;
      padding:5px 12px 4px 6px;
      color:#666;
}

div.tabs li a:hover,
div.tabs li a.current { /* change tab background on hovering */
	background-position: 0% -42px;
	cursor: pointer; /* else ie 6 is lost */
}

div.tabs li a:hover span,
div.tabs li a.current span { /* change tab background on hovering */
	background-position: 100% -42px;
	color:#FF9834;
}


/* navigation boxes (in the side panel) */

dl.navigation_box { /* one entire box */
	margin: 0;
	padding: 0;
}

dl.navigation_box dt { /* box title */
	margin: 0.5em 0 0.5em 0;
	font-size: 1.2em;
}

dl.navigation_box dt span { /* for a secondary background image */
}

dl.navigation_box dd { /* box body */
	margin: 0;
	padding: 0 0 0.5em 0;
}

dl.navigation_box a { /* no decoration for links in navigation boxes */
	text-decoration: none;
}

/* extra boxes (in the extra panel) */

dl.extra_box { /* one entire box */
	margin: 0;
	padding: 0;
}

dl.extra_box dt { /* box title */
	margin: 0.5em 0 0.5em 0;
	font-size: 1.2em;
}

dl.extra_box dt span { /* for a secondary background image */
}

dl.extra_box dd { /* box body */
	margin: 0 0 1em 0;
	padding: 0 0 0.5em 0;
}

dl.extra_box a { /* no decoration for links in extra boxes */
	text-decoration: none;
}

/* links in side boxes */

dl dd a.menu_1 { /* top level menu [menu] */
	display: block;
	margin: 0 0 0 0;
	padding: 2px 0 2px 0;
}

dl dd a.menu_1 span { /* for a secondary background image */
}

dl dd a.menu_2 { /* second level menu [submenu] */
	display: block;
	margin: 0 0 0 0;
	padding: 2px 0 2px 0;
}

dl dd a.menu_2 span { /* for a secondary background image */
}

/* links to upper sections */

p#crumbs { /* path to this page */
	font-family: sans-serif;
	font-size: 7pt;
	font-weight: normal;
	padding: 0;
	margin: 2px 0 1em 0;
}

p#crumbs a { /* one of the links to go up */
	font-family: sans-serif;
	font-size: 7pt;
	font-weight: normal;
}

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


/* the main menu of commands */

p#page_menu { /* the main horizontal menu of commands */
	margin: 0 0 8px 0;
	font-weight: normal;
	font-size: 0.8em;
}

p#page_menu a { /* a link in the menu */
	font-weight: normal;
}

p#page_menu a span { /* to complement background, if required */
}

p#page_menu a span.first { /* first command on left */
}

p#page_menu a span.last { /* last command on the right */
}

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

/* gadget boxes */

dl.gadget_box { /* container of one gadget box -- also see #gadget_1, etc. -- from index.php, sections/view.php */
	margin: 0 1em 1em 0;
    padding: 0;
    max-width: 260px;
    float: left;
	background: transparent url("layouts/gadget_left.gif") no-repeat top left;
	max-width: 468px; /* in case width would be changed to % */
}

dl.gadget_box dd { /* body of one gadget box */
	margin: 0;
	padding: 2px 12px 24px 12px;
	background: transparent url("layouts/gadget_right.gif") no-repeat bottom right;
}

dl.gadget_box dt { /* header of one gadget box */
	font-size: 1.1em;
	padding: 9px 12px 8px 33px;
	font-weight: normal;
	text-align: right;
	margin: 0;
	border-right: 1px solid #ccc;
}

dl.gadget_box dt span { /* secondary background image for box title */
}

dl#gadget_1 dd { /* content of first gadget box */
}

dl#gadget_2 dd { /* content of second gadget box */
}

dl#gadget_3 dd { /* content of third gadget box */
}

dl#gadget_4 dd { /* content of fourth gadget box */
}

dl#gadget_5 dd { /* content of fifth gadget box */
}

dl#gadget_6 dd { /* content of sixth gadget box */
}

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

p#gadgets_suffix { /* comes after gadget boxes */
	clear: left; /* compensate for left-floated boxes */
	padding: 0 0 0.5em 0; /* make some room after gadget boxes */
}

/* standard components of a page */

div.introduction { /* introduction -- before the main part of a page */
	font-size: 1em;
	font-weight: normal;
	margin: 1em 0;
}

div.description { /* description -- main content of an article, or of a section, etc. */
	font-size: 1em;
	font-weight: normal;
	margin: 1em 0;
}

div#page_details { /* page details */
	margin-top: 3em;
}

p.tags, span.tags { /* tags */
	font-family: sans-serif;
	font-size: 12px;
	font-weight: normal;
	font-style:	normal;
	color:	#666666;
	margin: 1em 0;
}

p.tags a, span.tags a { /* each tag can link to a category */
	font-weight: normal;
	font-style:	normal;
	color:	#666666;
}

@media screen { /* only on screen */

	p.tags a, span.tags a {
		background: transparent url("tools/tag_bg.gif") no-repeat left center;
		border-right: 1px solid #c2c2c1;
		padding: 2px 1px 2px 12px;
		text-transform:	none;
		text-decoration: none;
		font-family: sans-serif;
		font-size: 11px;
		white-space: nowrap;
	}

	p.tags a { /* in case tags are listed on several lines */
		line-height: 20px;
	}

}

/* more details */

a.details,
p.details,
span.details { /* a set of details */
	font-family: sans-serif;
	font-size: 7pt;
	color: #888; /* less contrasted than regular text */
}

p.details a,
span.details a { /* faded into text */
	color: #888;
	font-size: 7pt;
}

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



/* content generated by yacs is structured as successive boxes */

div.box { /* some content with a title */
}

div.box h2 { /* box title */
}

h2.top { /* no top margin */
	margin-top: 0;
}

div.box h2 span { /* for a complementary background image */
}

div.box div.content { /* actual content of the box */
}

/* menu bars */

p.menu_bar { /* an horizontal menu of commands */
	margin: 1em 0 1em 0;
	padding: 3px 0 3px 0;
	font-weight: normal;
}

p.menu_bar a,
p.menu_bar a:hover { /* one command */
	margin: 0;
	padding: 0px 0px 0px 7px;
	background: transparent url("links/menu_bar.gif") no-repeat bottom left;
	text-decoration: none;
	font-weight: normal;
}

p.menu_bar a:hover { /* behaviour on hovering */
	color: red;
}

p.menu_bar a span { /* secondary background image */
	margin: 0;
	padding: 0px 7px 0px 0px;
	background: transparent url("links/menu_bar.gif") no-repeat bottom right;
}

p.menu_bar a.button,
p.menu_bar a.button span,
p.menu_bar a.button:hover,
p.menu_bar a.button:hover span { /* no specific background image for buttons */
	background-image: none;
}

p.menu_bar a span.first { /* first command of the menu */
}

p.menu_bar a span.last { /* last command of the menu */
}

@media print { /* do not print menu bars */

	p.menu_bar { display: none; }

}


/* navigation bar */

table.neighbours { /* previous and next links */
	clear: left;
	border: none;
	margin: 0;
}

table.neighbours tr td {
	border: none;
}

table.neighbours tr td.next { /* to the right */
	border: none;
	padding: 1em 0 1em 3em;
}

table.neighbours tr td.option { /* label for this page */
	border: none;
	padding: 1em 2em 1em 2em;
}

table.neighbours tr td.previous { /* to the left */
	border: none;
	padding: 1em 3em 1em 0;
}



/* flag changed content */

@media screen { /* not on printers */

	.updated { /* flag modified pages */
		padding-right: 27px;
		margin-right: 2px;
		background: transparent url("tools/updated.gif") no-repeat right;
	}

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


/* vertical and horizontal layouts --it used to be named "form" instaed of "layout" */

table.layout,
table.form {
/*	margin: 0 auto; */
	max-width: 99%; /* not 100% because of IE6 */
	border: none; /* we are only interested into the layout */
	margin: 0;
	padding: 0;
}

table.layout tbody tr td.center,
table.form tbody tr td.center,
table.layout tbody tr td.east,
table.form tbody tr td.east,
table.layout tbody tr td.west,
table.form tbody tr td.west,
table.layout tbody tr td.north,
table.form tbody tr td.north,
table.layout tbody tr td.equator,
table.form tbody tr td.equator,
table.layout tbody tr td.south,
table.form tbody tr td.south,
table.layout tbody tr td,
table.form tbody tr td{
	padding: 0; /* save on space around cells */
	margin: 0;
	text-align: left; /* prefix cells with 'left=' or 'center=' or 'right=' to change alignment */
	border: none; /* we are only interested into the layout */
	background: transparent none;
}

table.layout tbody tr.even td.center,
table.form tbody tr.even td.center,
table.layout tbody tr.even td.east,
table.form tbody tr.even td.east,
table.layout tbody tr.even td.west,
table.form tbody tr.even td.west,
table.layout tbody tr.even td,
table.form tbody tr.even td,
table.layout tbody tr.odd td.center,
table.form tbody tr.odd td.center,
table.layout tbody tr.odd td.east,
table.form tbody tr.odd td.east,
table.layout tbody tr.odd td.west,
table.form tbody tr.odd td.west,
table.layout tbody tr.odd td,
table.form tbody tr.odd td { /* some space around content when background is paint */
	padding: 0.5em;
}

table.layout tbody tr td.north,
table.layout tbody tr td.equator { /* some room between rows */
	padding-bottom: 2em;
}

table.layout tbody tr td.west,
table.layout tbody tr td.center { /* some room between columns */
	padding-right: 3em;
}

/* explorer tree (in #contextual_menu) */

dl#contextual_menu ul.tree { /* shape a tree of links -- see build_tree() in skins/skin_skeleton.php */
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-family: arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
}

dl#contextual_menu ul.tree ul { /* indent all levels, except level 1 */
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-family: arial, sans-serif;
	font-size: 10px;
	line-height: 14px;
	background-image: url("tree/vertical.gif");
	background-repeat: repeat-y;
	background-position: 0px 100%;
}

dl#contextual_menu ul.tree li { /* every branch of the tree */
	margin: 0;
	padding-top: 0;
	text-align: left;
}

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

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

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

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

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




/*************************
 * styles demonstrated into help page codes/basic.php
 *************************/

b { /* **..** or [b]..[/b] -- bold text */
	font-weight: bold;
}

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

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

code { /* ##..## or [code]..[/code] -- some script shell */
	font-family: monospace;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
}

a.tiny,
span.tiny { /* [tiny]...[/tiny] -- smaller than .small*/
	font-family: sans-serif;
	font-size: 9px;
}

span.small { /* [small]...[/small] -- smaller than default, but larger than .tiny */
	font-family: sans-serif;
	font-size: 0.75em;
}

span.big { /* [big]...[/big] -- bigger than default, but smaller than .huge */
	font-size: 1.5em;
	line-height: 1.1em;
}

span.huge { /* [huge]...[/huge] -- bigger than .big */
	font-size: 3em;
	line-height: 1.1em;
}

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

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

ins { /* ++..++ or [inserted]..[/inserted] -- added text */
	color: #644;
	background-color: #bbf;
	text-decoration: none;
}

del { /* --..-- or [deleted]..[/deleted] -- removed text */
	color: #644;
	background-color: #f88;
}

span.flag { /* [flag]foo bar[/flag] -- compact meta-information -- , but also [new], [popular] -- see also .new, .popular, .updated */
	color: red;
	font-size: 9px;
	font-family: sans-serif;
}

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

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

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

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

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

span.my_style { /* [style=my_style] -- featured in help page codes/basic.php --  */
	color: blue;
}


/*************************
 * styles demonstrated into help page codes/links.php
 *************************/

a img {
	margin: 0;
	padding: 0;
}

@media screen { /* not on printers */

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

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

}

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

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

a:active.button { /* click on button */
	color: #202040;
	border-color: #eaeaea #095ba5 #095ba5 #eaeaea;
}

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

@media screen { /* not on printers */

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

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

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

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

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

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

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

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

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

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

	a.idle { /* user is present, yet idle -- always in conjunction with a.user */
		color: #888;
	}

	#main_panel a.next { /* shortcut to next page -- [next=id], [next=id, label] */
	}

	#main_panel a.previous { /* shortcut to previous page -- [previous=id], [previous=id, label] */
	}

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

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

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

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

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

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

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

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

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

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

}


/*************************
 * styles demonstrated into help page codes/lists.php
 *************************/

ul { /* [list]...[/list] -- an ordinary list */
	margin: 0.5em 0 1em 0;
	padding: 0 0 0 1.1em;
}

ol { /* [list=1]...[/list], [list=a]...[/list], [list=A]...[/list], [list=i]...[/list], [list=I]...[/list] -- a numbered list */
	margin: 0.5em 0 1em 0.5em;
	padding: 0 0 0 1em;
}


/*************************
 * styles demonstrated into help page codes/blocks.php
 *************************/

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

div.center { /* [center]...[/center] -- center some text */
	text-align: center;
}

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

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

table.decorated tr { /* vertical alignment */
	margin: 0 0 1em 0;
}

table.decorated tr td.content { /* the cell with content */
	border: none;
	margin: 0;
	padding: 6px 6px 1em 6px;
}

table.decorated tr td.image { /* the cell with image */
	border: none;
	margin: 0;
	padding: 5px 0;
}

table.decorated tr td.image img {
	margin: 2px 2px 0 0;	/* align the decorating image with decorated text */
	max-width: 50px;		/* ensure that the image is not too large */
	width: expression(this.width > 50 ? 50: true); /* just for IE 6 */
	max-height: 50px;
	height: expression(this.height > 50 ? 50: true); /* just for IE 6 */
}

div.caution { /* [caution]...[/caution] -- draw attention to a warning message */
	margin: 1em 0 1em 0;
	padding: 1em;
	border: 1px solid #f66;
	background-color: #faa;
}

div.note { /* [note]...[/note] -- draw attention to a note */
	margin: 1em 0 1em 0;
	padding: 1em;
	border: 1px solid #f66;
	background-color: #faa;
}

pre { /* [php]...[/php] and [snippet]...[/snippet] -- pre-formatted text */
	font-family: "Courier New", Courier, monospace;
	font-family: monospace;
	font-weight: normal ;
	font-style: normal ;
	font-size: 12px;
	margin: 1em;
	padding: 1em;
	border: 1px solid #ccc;
	white-space: pre;
	overflow: auto; /* add an horizontal bar to browse long lines of code, if necessary */
	max-width: 410px; /* ensure we fit in narrowed layouts */
	width: expression(this.width > 410 ? 410: true); /* just for IE 6 */
}

blockquote { /* [quote]...[/quote] -- to cite someone */
	border-left: 2px solid #ddd;
	margin: 1em 0;
	padding: 0 0 0 3px;
}

@media screen { /* not on printers */

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

	blockquote span.quote_prefix { /* mask the bare quote char */
		display: none;
	}

	blockquote span.quote_suffix { /* mask the bare quote char */
		display: none;
	}
}

div.folder_box { /* [folded=title]...[/folded] and [unfolded=title]..[/unfolded] -- a foldable box */
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	clear: left; /* align below floating images */
	min-width: 15em; /* avoid title folding if possible */
}

div.folder_box a.folder_header { /* not an ordinary link */
	font-weight: bold;
}

div.folder_box a.folder_header:hover { /* make it visually clickable */
	cursor: pointer;
}


div.folder_box div.folder_body { /* rendering while unfolded */
	border-left: 2px solid #ddd;
	padding: 0.5em 0 0.5em 0.5em;
	margin-left: 4px; /* right below the folding image */
}

div.sidebar_box { /* [sidebar]...[/sidebar] -- a side box somewhere in the main panel */
	float: right;
	width: 10em;
	margin: 0 1em 1em 1em ;
}

div.sidebar_box div.sidebar_body { /* body of one sidebar box */
	font-size: 0.8em;
	text-align: left;
	margin: 0;
	padding: 0.5em;
	border: 1px solid #ccc;
}

div.sidebar_box h3 { /* header of one sidebar box -- the 'foo bar' of [sidebar=foo bar]...[/sidebar] */
	background-color: #000;
	color: #D4D402;
	font-weight: normal;
	font-size: 0.8em;
	text-align: center;
	margin: 0;
	padding: 2px 2px 2px 2px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

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


/*************************
 * styles demonstrated into help page codes/tables.php
 *************************/

table { /* an ordinary table -- [table]...[/table] */
	border-spacing: 0;
	border-collapse: collapse;
	border-bottom: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	clear: none;	/* IE6 clears tables */
	margin-left: 2px; /* because rendering glitch in control panel */
	width: auto;
}


td { /* an ordinary table cell -- cells in [table]headers[body]content[/table] */
    font-size: 1em;
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	margin: 0;
	padding: 4px;
	vertical-align: top;
    text-align: left;
}

@media print { /* enhance printed material */

	td { /* make cells visible */
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 5px;
		border-left: none;
		border-top: none;
		border-right: none;
		border-bottom: 2px solid #888;
	}

}

th { /* an ordinary table header -- headers in [table]headers[body]content[/table] */
    font-size: 1em;
	font-weight: normal;
	text-align: left;
	border-top: 1px solid #bfbfbf;
	border-left: 1px solid #bfbfbf;
	margin: 0;
	padding: 4px;
	color: #444;
	background-color: #ddd;
}

@media print { /* enhance printed material */

	th { /* make cells visible */
	    font-size: 1em;
		margin: 0;
		padding-bottom: 5px;
		border-left: none;
		border-top: none;
		border-right: none;
		border-bottom: 2px solid #888;
	}

}

table.grid,
table.exhibit-tabularView-body { /* [table=grid]...[/table] - enhance table borders*/
	border: none;
}

table.grid tbody tr td,
table.grid tbody tr.even td,
table.grid tbody tr.odd td,
table.grid thead tr th,
table.exhibit-tabularView-body tbody tr td,
table.exhibit-tabularView-body tbody tr th { /* a cell in a grid */
	border: 2px ridge #bfbfbf;
	padding: 0.5em;
}

#main_panel table.exhibit-tabularView-body { /* a table that takes as much space as possible horizontally */
	max-width: 98%;
	margin: 4px;
}

table.tiny tbody tr td,
table.tiny thead tr th { /* [table=tiny]...[/table] */
	font-family: sans-serif;
	font-size: 9px;
	line-height: 10pt;
}

table.wide { /* a table that takes as much space as possible horizontally */
	max-width: 99%;
	margin: 1px;
}



/*************************
 * styles demonstrated into help page codes/titles.php
 *************************/

h1 { /* appears only once, with the page title */
	font-size: 1.5em;
	margin: 0.5em 0 0 0;
	padding: 20px 0 0 0;
	clear: left;
}

h2 { /* [header1]...[/header1], [title]...[/title], [question]...[/question] -- first level of heading */
	font-size: 1.4em;
	clear: left;
	margin: 1em 0 0 0;
}

h2 span { /* for a secondary background image */
}

h2.question { /* question -- a question in a FAQ - [question]...[/question] */
}

h3 { /* [header2]...[/header2], [subtitle]...[/subtitle] -- second level of heading*/
	font-size: 1.3em;
	margin: 1em 0 0 0;
	clear: left;
}

h3 span { /* for a secondary background image */
}

h4{ /* [header3]...[/header3] -- third level of heading */
	font-size: 1.2em;
	margin: 1em 0 0 0;
}

h4 span { /* for a secondary background image */
}

h5{ /* [header4]...[/header4] -- fourth level of heading */
	font-size: 1.1em;
	margin: 1em 0 0 0;
}

h5 span { /* for a secondary background image */
}

h6{ /* [header5]...[/header5] -- fifth level of heading */
	font-size: 1em;
	margin: 1em 0 0 0;
}

h6 span { /* for a secondary background image */
}

div.toc_box { /* table of content -- [toc] */
	font-size: 0.8em;;
	line-height: 1.2em;
	padding: 9px;
	margin-top: 0.5em;
	margin-bottom: 1em;
	max-width: 30em;
	position: relative;
}

div.toc_box a code { /* some code in a toc */
	font-size: 1em;
	font-family: tahoma, sans-serif;
}


div.toc_box div.panel { /* actual content of the table of content */
	font-size: 0.8em;;
	line-height: 1.2em;
	padding: 9px;
	margin-top: 0.5em;
	margin-bottom: 1em;
	max-width: 30em;
	position: absolute;
	left: 0px;
	z-index: 20;
}

div.toc_box ul { /* first level of the toc */
	margin: 0;
	padding: 0;
	list-style: none;
}

div.toc_box ul ul { /* second level of the toc */
	margin-left: 1.3em;
}

div.toq_box { /* table of questions -- [toq] */
	font-size: 0.8em;;
	padding: 9px;
	margin: 0.5em 0;;
}

div.toq_box ul { /* a list of questions */
	margin: 0 1.5em;
	padding: 0;
	list-style: square;
}



/*************************
 * styles demonstrated into help page codes/live.php
 *************************/



/*************************
 * styles demonstrated into help page codes/widgets.php
 *************************/

dl.newsfeed_item dt,
dl.newsfeed_item dd { /* [newsfeed=url] */
	margin-left: 0; /* flush to the left */
	max-width: 500px; /* few words could create orphan lines */
}

dl.newsfeed_item dd,
dl.newsfeed_item dd div,
dl.newsfeed_item dd p {
	font-size: 1em; /* regular size */
}

dl.newsfeed_item dd img {
	padding: 0.5em; /* some space between images and text around */
}



/*************************
 * styles demonstrated into help page codes/misc.php
 *************************/

acronym { /* help in a popup -- [hint]...[/hint] */
	border-bottom: 1px dotted #333;
	cursor: help;
}

br { /* new line -- [nl] */
}

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

@media screen { /* not on printers */

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

	.new span { /* mask default text -- see also .flag */
		display: none;
	}
}

@media screen { /* not on printers */

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

	.popular span {	/* mask default text -- see also .flag */
		display: none;
	}
}

/*************************
 * styles demonstrated into demonstration page tools/ajax.php
 *************************/

/**
 * scriptaculous autocomplete
 *
 * @link http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter
 */

div.autocomplete,
#main_panel div.autocomplete {
	position:absolute;
	max-width:250px;
	background-color:white;
	border:1px solid #888;
	margin:0px;
	padding:0px;
	z-index: 1500; /* show in front of tinymce, which is at 1000 */
}

div.autocomplete ul,
#main_panel div.autocomplete ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

div.autocomplete ul li.selected,
#main_panel div.autocomplete ul li.selected {
	background-color: #ffb;
}

div.autocomplete ul li,
#main_panel div.autocomplete ul li {
	list-style-type:none;
	display:block;
	margin:0;
	padding:2px;
/*	height:32px; */
	cursor:pointer;
	background-image:none;
}

/**
 * forms with Ajax -- see forms/edit.php
 */

div.captured { /* some text provided in the form */
	border: 1px dotted #ddd;
	margin: 1em auto 1em 0;
	padding: 0.5em;
}

div.dropmarker { /* the horizontal line to track position during drag */
	height: 6px;
	width: 100px;
	border-top: 3px solid #666;
	color: #fff;
	z-index: 1000;
	margin: 0 0 30px 20px;
}

div.sortable {
	position: relative;
/*	border: 1px solid #ccc; */
	margin: 0.3em 0 0 0;
	padding: 0.5em 0 0.5em 0;
	width: 500px;
}

.sortable_hover {
	background-color: #edf6dd;
}

div#form_input_panel {
	margin-top: 2em;
	padding-top: 1em;
}

div#form_panel {
	position: relative;
}

div#form_panel h2,
div#form_panel h3 { /* align title with dragging handle */
	clear: none;
}

div#form_wrapper { /* the panel where fields are handled */
	margin-bottom: 2em;
	padding-bottom: 0.5em;
	min-height: 5em;
}

/**
 * on-demand toolbox
 */

div.properties { /* the properties sheet that appears on click */
	background-color: #eee;
	display: block;
	margin: 0;
	padding: 0.5em;
	/* do not use display: none here, else it would not appear on-demand */
}

span.onHoverLeft { /* the little handle on the left for sortable elements */
	cursor: move;
	display: block;
	float: left;
	padding: 0;
	visibility: hidden; /* changed in Yacs.mouseOver() and Yacs.mouseOut() */
}

span.onHoverRight { /* the toolbox on the right */
	display: block;
	float: right;
	padding: 0;
	visibility: hidden; /* changed in Yacs.mouseOver() and Yacs.mouseOut() */
}


 /**
 * modal box
 */

div#modal_centered { /* the centered container */
	position: absolute;
	top: 30%;	/* top and left will be adjusted dynamically through javascript */
	left: 30%;
	display: block;
	text-align: center;
	color: #444;
	background-color: #fff;
	border: 2px solid #888;
	margin: 0 auto;
	padding: 4px;
	z-index: 2000;
}

div#modal_content div.boxButtons {
	margin-top: 0.5em;
	padding: 0.5em 0 0.3em 0;
	text-align: center;
}

div#modal_content h2.boxTitle {
	margin-top: 0;
	padding-top: 0;
}

div#modal_image_panel {
	padding: 6px;
}

div#modal_panel {	/* the grey overlay that sits behind the modal box */
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: transparent url('ajax/overlay_background.png') repeat; /* transparent image generated at http://apps.everamber.com/alpha/ */
	text-align: center;
	z-index: 1999; /* just below modal_centered */
}



/****************************** styles generated by individual scripts ************************************/

/*************
 * news handled either in index.php or in sections/view.php
 **************/

dl#news { /* the navigation box for static news */
}

dl#news dd ul { /* the list of news */
	margin: 0;
	padding: 0;
	list-style: none;
}

dl#news dd ul li { /* remove default bullet */
    margin: 0;
    padding: 0 2px 3px 0;
    background: none;
}

dl#news dd hr { /* simple rule between items */
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px dotted #447;
	height: 0px;
}

dl#rotating_news dd { /* the navigation box for rotating news */
	height: 15em; /* should be taller than longer element */
	overflow: hidden; /* strip the tail, if any */
	width: auto;
}

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

dl#rotating_news dd ul { /* the actual list of news */
	margin: 0;
	padding: 0;
	list-style: none;
}

dl#scrolling_news div.scroller_outside { /* the navigation box for scrolling news */
	height: 200px; /* the height of the scrolling area */
	overflow: hidden; /* strip the tail, if any */
	position: relative;
}

dl#scrolling_news dd hr { /* separate items */
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px dotted #447;
	height: 0px;
}

dl#scrolling_news dd ul { /* a list with no bullet */
	margin: 0;
	padding: 0;
	list-style: none;
}


/**
 * styles for chats
 *
 * @see articles/view_as_chat.php
 */

div#thread_wrapper { /* around text and input field */
	position: relative;
	max-width: 700px; /* limit the width */
	width: expression(this.width > 700 ? 700: true); /* just for IE 6 */
	margin: 1em 0;
	padding: 0 0 6px 0;
}

div#thread_wrapper textarea#contribution { /* the main input field */
	width: 99%;
	margin: 0 0 0.5em 0;
	padding: 3px;
	background-color: #eee;
	overflow: auto; /* add a vertical scroller if required */
	border: 1px dotted #aaa;
}

div#thread_wrapper button#submit { /* the submit button */
	cursor: pointer;
}

div#thread_files_panel {
	margin: 0;
	padding: 0;
}

div#thread_text_panel { /* where successive contributions are displayed */
	margin: 0 0 0.5em 0;
	padding: 0;
	height: 350px; /* ensure the input field is always visible */
	max-height: 350px;
	overflow: auto; /* add a vertical scroller if required */
	border: 1px dotted #ccc;
	background-color: #fcfcfc;
}

div#thread_text_panel dl dd { /* one contribution */
	margin: 0;
	padding: 0.3em 0.6em 0.3em 0.6em;
	text-align: left;
}

div#thread_text_panel dl dd.thread_me { /* one of my own contribution */
	border-top: 1px solid #d5d5d5;
	background-color: #ffffe5;
}

div#thread_text_panel dl dd.thread_other { /* one contribution from another surfer */
	background: transparent url("layouts/row_bg.gif") repeat-x;
}

div#thread_text_panel dl dt { /* contributor details */
	clear: both;	/* because of stacked rows */
	float: left;
/*	width: 120px; */
	margin: 0;
	padding: 0.3em 1em 0.3em 0.6em;
	text-align: left;
}

div#thread_text_panel dl dt.thread_me { /* my details */
}

div#thread_text_panel dl dt.thread_other { /* details about other contributor */
}

div.follow_up { /* comments from page author */
	border: none;
	background-color: #ffffe5;
}

/**
 * files in a collection
 *
 * @see collections/browse.php
 * @see shared/codes.php
 */

table.collections { /* content of a directory */
	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;
}

ul.collections { /* a list of collections, in [collections] */
}

/**
 * comments in a blog
 *
 * @see comments/layout_comments_as_daily.php
 */

@media screen { /* not on printers */

	div.comment h4 { /* title line */
	}

	div.comment div {	/* comment content */
		margin-left: 1em;
	}

}

/**
 * comments in a manual
 *
 * @see comments/layout_comments_as_manual.php
 */

dl.manual_comments { /* to list comments in a manual */
	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 #daa;
	border-right: 1px solid #daa;
	border-bottom: 1px solid #daa;
}

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

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 #daa;
	border-left: 1px solid #daa;
	border-right: 1px solid #daa;
}

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

/**
 * notes of wiki pages
 *
 * @see comments/layout_comments_as_wiki.php
 */

dl.wiki_comments { /* to list comments in a wiki */
}

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 #daa;
}

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

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 #daa;
}

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


/**
 * download area for a file
 *
 * @see files/view.php
 */

a#file_download { /* the link to download a file */
}

a#file_detach { /* the link to detach a file */
}

dl.download dt { /* contains the previous link, plus some text eventually */
	margin-bottom: 1em;
	font-weight: bold;
}

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

/**
 * poll result bars
 *
 * @see overlays/poll.php
 */

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: 6px 0 0 0;
}

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

/**
 * dynamic table
 *
 * @see tables/tables.php
 */

table.grid caption {
	text-align: left;
}

/**
 * introduce sections with families
 *
 * @see sections/layout_sections_as_select.php
 * @see sections/layout_sections_as_yahoo.php
 */

h3.family,
h3.family a {
	font-weight: normal;
	font-size: 12px;
	font-style: normal;
	text-align: left;
	padding: 4px;
}

/**
 * introduce sections with families
 *
 * @see sections/layout_sections_as_jive.php
 * @see sections/layout_sections_as_slashdot.php
 * @see sections/layout_sections_as_yabb.php
 */

td.family,
td.family a { /* to introduce several successive sections in a forum */
	font-weight: normal;
	font-style: normal;
	text-align: left;
}


/**
 *
 * @see sections/view.php
 */

span#family { /* within section title */
	font-weight: normal;
	font-size: 12px;
	font-style: normal;
	line-height: 12px;
	color: #66a;
}


/**
 * sorted tables
 *
 * set by function Yacs.beautifyTable()
 *
 * @see shared/yacs.js
 */

td.sorted { /* for tables handled through javascript */
	background-color: #f0f0f0;
}

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

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


/****************************** styles generated by layouts, see skins/layout.php ************************************/

/**
 * accordion layout: a list of boxes, each box having the following structure:
 *
 * <div class="accordion_handle"><a class="accordion_link">box title</a>
 * 		<div class="accordion_content"><div>box content</div></div></div>
 *
 * @see articles/layout_articles_as_accordion.php
 * @see sections/layout_sections_as_accordion.php
 */

div.accordion_handle {
	width: 99%; /* avoid horizontal slider */
}

div.accordion_handle a.accordion_link {
	display: block;
	font-size: 1.2em;
	text-decoration: none;
	background-color: #F5F5F5;
	border-top: 1px solid #FFFFFF;
	border-bottom: none;
	color: #666;
	cursor: pointer;
	margin-bottom: 1px;
	padding: 9px 1em 6px 1em;
	z-index: 10;
}

div.accordion_handle a.accordion_link img.handle {
	float: right;
	padding-right: 0;
}

div.accordion_handle a.accordion_link:hover, div.accordion-toggle-active {
	text-decoration: none;
	color: #666;
	background-color:#ddd;
}

div.accordion_content {
	border-left: 2px solid #F5F5F5;
	border-bottom: none;
	border-right: 2px solid #F5F5F5;
	overflow:hidden;
	padding: 1em;
	margin-bottom: 0;
}

/**
 * daily layout: first box is shaped as follows:
 *
 * <div class="newest">
 * <p class="date">date of post</p>
 * <div class="box">
 *	<h2><span>box title</span></h2>
 *  <div class="content">
 * 		<a><img class="left_image">page thumbnail</img></a>
 *		<p class="details">box details</p>
 *		box content
 *		<p class="menu_bar right">box menu</p>
 *  </div>
 * </div>
 * </div>
 *
 * other boxes have the same layout, except the most external div:
 *
 * <p class="date">date of post</p>
 * <div class="box">
 *	<h2><span>box title</span></h2>
 *  <div class="content">
 * 		<a><img class="left_image">page thumbnail</img></a>
 *		<p class="details">box details</p>
 *		box content
 *		<p class="menu_bar right">box menu</p>
 *  </div>
 * </div>
 *
 * @see articles/layout_articles_as_daily.php
 * @see skins/layout_home_articles_as_daily.php
 */

div#newest { /* the most new article at the home page, in layouts: daily, digg, slashdot */
	clear: left;
	margin: 0.5em 0 0.5em 0;
	padding: 0.5em 0;
}

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

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

p.date { /* date of a post, above its title */
	color: #888;
	font-size: .8em;
	margin-top: 1.5em;
	margin-bottom: 0;
	padding-bottom: 4px;
	border-bottom: 1px solid #ddd;
	text-align: right;
}

/**
 * hardboiled layout: two boxes aligned at the top, then decorated items
 *
 * <div class="recent">
 *  <div class="left">
 *   <h3><span>box title</span></h3>
 *	 box content
 *	 <p class="details">box details</p>
 *  </div>
 *  <div class="right">
 *   <h3><span>box title</span></h3>
 *	 box content
 *	 <p class="details">box details</p>
 *  </div>
 * </div>
 *
 * <table class="decorated">
 * <tbody>
 *  <tr class="even">
 *    <td class="image">some image</td>
 *    <td class="content>link and content</td>
 *  </tr>
 *  <tr class="odd">
 *    <td class="image">some image</td>
 *    <td class="content>link and content</td>
 *  </tr>
 *  ...
 * </tbody>
 * </table>
 *
 * @see articles/layout_articles_as_hardboiled.php
 * @see skins/layout_home_articles_as_hardboiled.php
 */

div.recent h3 {
	margin-top: 0;
}

div.recent div.left { /* the first newest item */
	margin: 1em 0 1em 0;
	padding: 0;
	float: left;
    width: 48%; /* just below 50% */
}

div.recent div.right { /* the second newest item */
	border-left: 1px dotted #333;
	margin: 1em 0 1em 0.5em;
	padding: 0 0 0 0.5em;
	float: left;
    width: 48%; /* just below 50% */
    text-align: left;
}


/**
 * jive layout: a table of items
 *
 * <table class="jive">
 * <tbody>
 *  <tr class="even">
 *    <td>title and details</td>
 *    <td width="70%">content</td>
 *  </tr>
 *  <tr class="odd">
 *    <td>title and details</td>
 *    <td width="70%">content</td>
 *  </tr>
 *  ...
 * </tbody>
 * </table>
 *
 * @see articles/layout_articles_as_jive.php
 */

table.jive { /* to introduce threads and comments -- see articles/layout_articles_as_jive.php */
	border-collapse: collapse;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	max-width: 90%;
	width: 90%;
	margin: 0;
	padding: 0;
}

table.jive tr td { /* separate lines */
	margin: 0;
	padding: 8px;
	overflow: auto;
}

table.jive tr th { /* table header */
	font-weight: bold;
	margin: 0;
	padding: 8px;
}

/**
 * manual layout: a compact list of titles
 *
 * <ul class="manual">
 * <li>title and details</li>
 *  ...
 * </ul>
 *
 * @see articles/layout_articles_as_manual.php
 */

/**
 * map layout: two columns of stacked boxes
 *
 * <p class="columns_prefix" />
 * <dl class="column_1">
 *  <dt><a><img></a></dt>
 *  <dd>
 *    <a><span class="box_header">some title</span></a>
 *    <br />
 *    <span class="small">some content, maybe a compact list</span>
 *  </dd>
 *  ...
 * </dl>
 * <dl class="column_2">
 *  <dt><a><img></a></dt>
 *  <dd>
 *    <a><span class="box_header">some title</span></a>
 *    <br />
 *    <span class="small">some content, maybe a compact list</span>
 *  </dd>
 *  ...
 * <p class="columns_suffix" />
 *
 *
 * @see articles/layout_articles_as_yahoo.php
 */

dl.column_1,
dl.column_2 { /* left or right column out of two -- index.php, sections/index.php, sections/view.php, categories/index.php, etc. */
	margin: 0 20px 8px 0;
	padding: 0;
	float: left;
	width: 270px; /* or 45%? to test with IE */
}

dl.column_1 dd,
dl.column_2 dd { /* column actual content */
	margin: 0 0 1em 21px;
	padding: 2px;
	text-align: left;
	overflow: hidden; /* kill oversized links */
	z-index: 1;
}

dl.column_1 dd p,
dl.column_1 dd ul,
dl.column_2 dd p,
dl.column_2 dd ul { /* space around content elements */
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

dl.column_1 dd a span.box_header,
dl.column_2 dd a span.box_header { /* title in bold */
	font-weight: bold;
}

dl.column_1 dt,
dl.column_2 dt { /* the image aside the column */
	clear: left;
	text-align: left;
	border: 0;
	margin: 0;
	padding: 2px 0 2px 0;
	z-index: 2;
}

dl.column_1 dt img,
dl.column_2 dt img { /* align the image */
	margin: 0;
	padding: 0;
}

p.columns_prefix { /* comes before columns */
	clear: left; /* align properly after site map, if any */
	margin: 0;
	padding: 0;
}

p.columns_suffix { /* comes after columns */
	clear: left; /* compensate for left-floated columns */
	margin: 0; /* ignored by firefox anyway */
	padding: 0 0 2em 0; /* make some room below columns */
}

/**
 * newspaper layout: highlight most recent news
 *
 * <div class="recent">
 *  <div class="left">
 *   <h3><span>box title</span></h3>
 *	 box content
 *	 <p class="details">box details</p>
 *  </div>
 *  <div class="right">
 *   <h3><span>box title</span></h3>
 *	 box content
 *	 <p class="details">box details</p>
 *  </div>
 * </div>
 *
 * <table class="decorated">
 * <tbody>
 *  <tr class="even">
 *    <td class="image">some image</td>
 *    <td class="content>link and content</td>
 *  </tr>
 *  <tr class="odd">
 *    <td class="image">some image</td>
 *    <td class="content>link and content</td>
 *  </tr>
 *  ...
 * </tbody>
 * </table>
 *
 * @see articles/layout_articles_as_newspaper.php
 * @see skins/layout_home_articles_as_newspaper.php
 */

div.recent div.west { /* aligned to the left */
	margin: 1em 0 1em 0;
	padding: 0;
	float: left;
    width: 32%;
}

div.recent div.center { /* the second newest item */
	border-left: 1px dotted #ccc;
	margin: 1em 0 1em 0.5em;
	padding: 0 0 0 0.5em;
	float: left;
    width: 32%;
    text-align: left;
}

div.recent div.east { /* the second newest item */
	border-left: 1px dotted #ccc;
	margin: 1em 0 1em 0.5em;
	padding: 0 0 0 0.5em;
	float: left;
    width: 32%;
    text-align: left;
}


/**
 * slashdot layout: a list of boxes like the following
 *
 * <div class="box">
 *	<h2><span><img class="right_image">page thumbnail</img>box title</span></h2>
 *  <div class="content">
 *		<p class="details">box details</p>
 *		box content
 *		<p class="menu">box menu</p>
 *  </div>
 * </div>
 *
 * @see articles/layout_articles_as_slashdot.php
 */

/**
 * spray layout: a nice layout to report on status
 *
 * @see articles/layout_articles_as_spray.php
 */

/**
 * table layout: a table of items
 *
 * <table class="grid">
 * <thead>
 *  <tr class="even">
 *    <th>Topic</th>
 *    <th>Abstract</th>
 *    <th>Details</th>
 *  </tr>
 * </thead>
 * <tbody>
 *  <tr class="even">
 *    <td>title</td>
 *    <td>content</td>
 *    <td>details</td>
 *  </tr>
 *  <tr class="odd">
 *    <td>title</td>
 *    <td>content</td>
 *    <td>details</td>
 *  </tr>
 *  ...
 * </tbody>
 * </table>
 *
 * @see articles/layout_articles_as_table.php
 */

/**
 * timeline layout: alternatively even and odd items
 *
 * <div class="even">
 *  <a>title</a>
 *  <br />
 *  <span class="details">some details</span>
 * </div>
 * <div class="odd">
 *  <a>title</a>
 *  <br />
 *  <span class="details">some details</span>
 * </div>
 * ...
 *
 * when an item has an image, a table is introduced to fix the layout
 *
 * <table class="decorated">
 * <thead>
 *  <tr>
 *    <td class="image><img></td>
 *    <td><a>title</a>
 *       <br />
 *       <span class="details">some details</span>
 *     </td>
 *  </tr>
 * </tbody>
 * </table>
 *
 *
 * @see articles/layout_articles_as_timeline.php
 */

/**
 * titles layout: a stack of floating boxes
 *
 * <br style="clear: left;" />
 * <dl class="floating_box">
 *  <dd><a><img></a></dd>
 *  <dt><span><a>some title</a></dt>
 * </dl>
 * ...
 * <br style="clear: left;" />
 *
 *
 * @see articles/layout_articles_as_titles.php
 * @see sections/layout_sections_as_titles.php
 */

dl.floating_box { /* float to the left */
	float: left;
	display: table-cell;
	margin-right: 2em;
	text-align: center;
	padding: 6px;
}

dl.floating_box:hover {
	background-color: #fee;
}

dl.floating_box a {
	text-decoration: none;
}

dl.floating_box dd { /* center box content */
	text-align: center;
	border: none;
	padding: 0;
	margin: 0;
}

dl.floating_box dt { /* center box title */
	text-align: center;
	border: none;
	font-weight: normal;
	font-size: 1em;
	padding: 0;
	margin: 0;
}

div.floating_family { /* break between boxes */
	display: block;
	font-size: 1.2em;
	text-decoration: none;
	background-color: #F5F5F5;
	border-top: 1px solid #FFFFFF;
	border-bottom: none;
	color: #666;
	margin-bottom: 1px;
	padding: 9px 1em 6px 1em;
	z-index: 10;
}

/**
 * yabb layout: a table of discussion threads
 *
 * <table class="yabb">
 * <thead>
 *  <tr>
 *    <th>Topic</th>
 *    ...
 *    <th>Last post</th>
 *  </tr>
 * </thead>
 * <tbody>
 *  <tr class="odd">
 *    <td><a>title</a><br />introduction<p class="details">some details</p></td>
 *    <td>...</td>
 *  </tr>
 *  <tr class="even">
 *    <td><a>title</a><br />introduction<p class="details">some details</p></td>
 *    <td>...</td>
 *  </tr>
 *  ...
 * </tbody>
 * </table>
 *
 * @see articles/layout_articles_as_yabb.php
 */

table.yabb {
	width: 98%;
	margin: 0px 1px;
	padding: 0;
}

table.yabb tr td.family { /* to introduce several successive sections in a forum */
	font-weight: bold;
	color: #222;
}


/************************* styles generated in skins/pages.php ********************/

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

div.icon {
}

div.icon img { /* main image of an article, or of some section -- $context[page_image'] */
	margin: 0;
	padding: 0;
}

/************************* other styles generated in skins/skin_skeleton.php ********************/

/* Skin::build_block() */

div.bottom { /* bottom -- the last div of the content area */
	margin-top: 2em;
	border-top: 1px solid #ccc;
	padding-top: 1em;
   	width: 80%; /* same width as div#tabs_bar */
}

div.description { /* description -- the main part of a page, a section, a category */
	margin-top: 0.5em;
	margin-bottom: 1em;
}

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

div.sidecolumn { /* sidecolumn -- to build multiple columns within main content */
	background-color: #eaeaea;
	padding: 1em 1em 2em 1em;
	margin: 0;
	max-width: 25em;
	min-width: 10em;
}


/**
 * images
 *
 * Most of the below is coming from Skin::build_image(),
 * and the rest from Codes::render().
 *
 * @see shared/codes.php
 * @see skins/skin_skeleton.php
 */

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

.center_image .image_caption { /* image caption */
	display: block;
	text-align: center;
	padding: 6px;
	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;
}

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

.inline_image .large .image_caption {	 /* a nice panel with the title below the image */
	display: block;
	text-align: left;
	margin: 0;
	padding: 6px;
}

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

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

.left_image .large .image_caption { /* a nice panel with the title below the image */
	display: block;
	text-align: center;
	margin: 0;
	padding: 6px;
}

.left_image .image_caption {	/* when the image is not so large */
	display: block;
	text-align: center;
	padding-top: 0;
	margin-top: 0;
}

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

.right_image .large .image_caption {	 /* a nice panel with the title below the image */
	display: block;
	text-align: center;
	margin: 0;
	padding: 8px;
}

.right_image .image_caption { /* image caption */
	display: block;
	text-align: center;
	padding-top: 0;
	margin-top: 0;
}

.thumbnail_image { /* float thumbnails to align them */
	display: block;
	float: left;
	margin-right: 8px;
	text-align: center;
	height: 150px;	 /* to align with actual thumbnail height set in configuration panel for skins */
	width: 120px;	/* 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;
	text-align: center;
}

.thumbnail_image a span div, .center_image .large div { /* always center such things */
    margin:0 auto;
}

.thumbnail_image .image_caption { /* caption */
	display: block;
	text-align: center;
	padding-top: 0;
	margin-top: 0;
}

/* direct edition link */
.thumbnail_image, 
.left_image,
.right_image,
.center_image,
.inline_image
{position:relative;}

.image_edit {
	display:none;
	position:absolute;
	top:0;left:0;
}

.center_image .image_edit {
	left : 45%;
}  

.thumbnail_image:hover .image_edit,
.left_image:hover .image_edit,
.right_image:hover .image_edit,
.center_image:hover .image_edit,
.inline_image:hover .image_edit
{display:block;}

/* Skin::build_list() */

dl.column { /* one single column */
    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: dotted 1px #D6CCBD;
	overflow: hidden; /* kill oversized links */
}

dl.column dd p,
dl.column dd ul { /* vertical margins within a box */
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

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

dl.column dt img { /* align the image */
	margin: 0;
	padding: 0;
}


ul.compact,
#extra_panel ul.compact,
#main_panel ul.compact,
#side_panel ul.compact { /* a compact list */
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.compact li,
#extra_panel ul.compact li,
#main_panel ul.compact li,
#side_panel ul.compact li { /* item in a compact list */
    margin: 0;
    padding: 0;
    background: none;
}


/* Skin::build_profile() */

address { /* a author profile towards the end of the main panel */
	display: block;
	font-style: normal;
	font-weight: normal;
	margin: 0.5em 0 0.5em 0;
	padding: 1em;
	border: 1px solid #ccc;
}

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

td.author img.avatar {
	height: expression(this.height > 60 ? 60: true); /* just for IE 6 */
	max-height: 60px;
	width: expression(this.width > 60 ? 60: true); /* just for IE 6 */
	max-width: 60px;
}

div.top { /* poster information, when placed at page top */
	margin-bottom: 2em;
	border-bottom: 1px solid #ccc;
	padding-bottom: 1em;
   	width: 80%; /* same width as div#tabs_bar */
}

/**
 * horizontal tabs generated by Skin::build_tabs()
 *
 * @see skins/skin_skeleton.php
 * @link http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/P30/
 */

div#tabs_bar {
	position: relative;
	margin: 2em 0 1em 0;
	padding: 0 0 0 0.5em;
	line-height: 20px; /* to avoid tabs superposition */
   	width: 80%; /* room on the right for avatars, etc. */
	border-bottom: 1px solid #c0c0c0;
}

div#tabs_bar ul {
	font-family:	Arial,sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 21px;
	list-style-type: none;
	text-align: left; /* change to left, center, or right to align the menu as desired */
	margin: 1px 0 0 0;
	padding: 6px 0 0 0;
}

div#tabs_bar ul li {
	display: inline;
	margin: 0;
	padding: 0;
}

div#tabs_bar ul li a {
	text-decoration: none;
	padding: 3px 7px;
	margin: 0;
	border: 1px solid #c0c0c0;
	border-bottom: none;
}

div#tabs_bar ul li.tab-background a {
	color: #2d2b2b;
	background: white url("ajax/ajax_tab_bg.gif") top left repeat-x;
}

div#tabs_bar ul li.tab-foreground a {
	color: #0066CC;
	background: white url("ajax/ajax_tab_bg_active.gif") top left repeat-x;
	border-bottom: 1px solid #fff;
}

div#tabs_panels {
	width: auto;
	padding: 2px 0;
	margin: 1em 0 0 0;
	min-height: 200px;
	overflow: auto;
	position: relative; /* we have absolute positioning inside! */
}

div#tabs_panels div.panel-foreground {
	display: block;
/*	position: static; */
	max-width: 3000px; /* avoid overlap between tabbed panels in FF */
	width: expression(this.width > 3000 ? 3000: true); /* just for IE 6 */
}

div#tabs_panels div.panel-foreground div.sidebar_box { /* show sidebars in visible tabs */
	display: block;
}

div#tabs_panels div.panel-background {
	display: none;
	max-width: 3000px; /* avoid overlap between tabbed panels in FF */
	width: expression(this.width > 3000 ? 3000: true); /* just for IE 6 */
}

div#tabs_panels div.panel-background div.sidebar_box { /* mask sidebars in hidden tabs */
	display: none;
}

/**
 * styles used for locked threads
 */

dl.comments dd { /* comment content */
	margin: 0 0 1em 15px;
	padding: 0.6em;
	border-bottom: 1px solid #aaa;
	border-right: 1px solid #aaa;
	background-color: #E5DDCD;
}

dl.comments dt { /* poster name */
	font-size: 0.7em;
	margin: 0;
	padding: 0.3em 0.3em 10px 0.3em;
	background: transparent url("layouts/comment_dt_bg.gif") no-repeat bottom left;
}

dl.comments dd .details { /* some details in comments */
	font-size: 0.7em;
	color: #888;
}

/**
 * calendars
 */

table.calendar { /* one table per month */
	margin: 0.5em 3px 0.5em 3px;
}

table.compact caption { /* label for target month */
	padding: 0 0 0 0.5em;
	font-size: 1em;
	text-align: left;
}

table.compact tbody tr td,
table.compact thead tr th { /* a cell in a compact calendar */
	font-family: sans-serif;
	font-size: 10px;
	font-weight: normal;
	padding: 2px; /* 0.3em; */
	margin: 0;
	text-align: center;
}

table.month caption { /* label for target month */
	margin-top: 1em;
	padding: 1em 0 0 0.5em;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
}

table.month tbody tr td,
table.month thead tr th { /* an ordinary cell in a calendar table */
	font-weight: normal;
	width: 10em;
}

table.calendar tbody tr td.spot { /* a cell in calendar that has some content */
	background-color: #fdd;
}

dl.family { /* a list of dates */
	margin-bottom: 1em;
}

dl.family dt { /* a date */
	margin-top: 0.5em;
}

dl.family dd { /* data for one date */
	margin: 0 0 1em 0;
}

/**
 * other reference styles used by YACS
 */

p.cloud { /* ensure a minimum size for elements of a cloud */
    font-size: 11px;
}

div#cover_article { /* the main text at the front page */
	margin-top: 0.5em;
	margin-bottom: 1em;
}

div.digg { /* a left floating box */
/*	float: right; */
	position: absolute;
	top: auto;
	left: -60px;
	width: 52px;
	margin: 0 1em 1em 0;
	padding: 0;
}

div.digg div.votes { /* report on previous votes */
	font-size: 12px;
	background: transparent url("tools/votes_bg.gif") no-repeat top left;
	height: 47px; /* 53 - 6 */
	text-align: center;
	margin: 0;
	padding: 6px 1em 0 1em;
}

div.digg div.votes span.big { /* number of votes */
	font-size: 18px;
}

div.digg div.rate { /* a link to vote */
	border: 1px solid #ccc;
	text-align: center;
	margin: 4px 0 0 0;
	padding: 0.1em;
	font-size: 14px;
}

div.digg div.rate:hover { /* an easy-to-click link */
	background-color: #ddd;
}

div.digg div.rate a,
div.digg div.rate a:hover { /* no underline, etc. */
	text-decoration: none;
}

div.digg_content { /* actual page content */
	position: relative;
	margin-left: 60px;
	min-height: 100px;
}

p.follow_up { /* at the bottom of some component */
	margin: 1em 0 0 0;
	padding: 2px 0 0 0;
}

div#comments,
table.yabb { /* align comments below thumbnails in main content */
	clear: left;
}

div.sliding_box div.panel,
div.toc_box div.panel { /* content of sliding panels */
	opacity: 0.9;
	background-color: #eeeeee;
	padding: 1em;
	width: 35em; /* beware of narrow layouts */
	border: 7px #cccccc solid;
}

/* do not print commands */

@media print { /* things to not print */

	.menu, 				/* an inline menu */
	.no_print,			/* something to be only displayed */
	.path,				/* bread crumbs */
	.toc_box,			/* table of content */
	#extra_panel,		/* side content */
	#footer_panel,		/* nothing to be printed there */
	#header_panel,		/* nothing to be printed here */
	#navigation_panel {	/* repeated across pages */
		display: none;
	}

	#main_panel { margin: 0px 0px 20px 0px; } /* no margin please */


}



a img {
	border: none; /* no border around clickable images */
}

@media screen { /* not on printers */

	#main_panel a.day { /* an event in a calendar */
	}

	#main_panel a.help { /* a link to help information */
	}

	#main_panel a.month { /* a link to a monthly calendar */
	}

	#main_panel a.xml { /* a link to some XML version */
	}

	#main_panel a.year { /* a link to a yearly calendar */
	}

}

#header_panel {
	position: relative; /* allow for absolute positioning inside */
	overflow: hidden; /* oversized components should not break the layout */
}