/**
 * 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;
}

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

input {
	padding: 2px;
	font-family: Georgia, Times, serif;
	font-size: 13px;
}

textarea {
	padding: 2px;
	font-family: Georgia, Times, serif;
	font-size: 13px;
}

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

/* some tabs */

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

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

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

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

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

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

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

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


/**
* styles for drop down menu within tabs
* <ul>
*	<li>level 1 entry
*		<div class="dropmenu">
			<p class ="details" id="dropcount">(xx sections)</p>
*			<ul>
*				<li>level 2 entry</li>
*			</ul>
*		</div>
*	</li>
* </ul>
*
* !Important : if within header_panel, set overflow to visible
* for this tag in your style sheet.
* you can't see second-level <ul> either !
*/

/* li elements of first level <ul> have to be block and set
 * as reference for absolute positionning of second level <ul> */
.tabs ul li {
	position:relative;
	display: block;
	float: left; 		/*to appear as a horizontal menu*/
}

/* rule for second level list
 * list should be right under first level <li>
 * with side and bottom padding so not disapearing to fast*/
.tabs ul li .dropmenu {
	position:absolute; 			/*from first level <li>*/
	top:100%; 					/*start the top of second-level <ul> at the bottom of first-level <li>*/
	left : 0; 					/*align left, but set as you need*/
	display : none; 			/*showed only when first level <ul> is hovered*/
	z-index: 10; 				/*ensure it's over other following "relative" tags*/
	padding:0 8px 8px 8px; 		/* ensure displaying doesn't dispear to fast while moving the mouse away */
	border : 1px solid #888; 	/* basic to delimitate the dropmenu */
	border-top : none;
	/*margin-top: 2px; 			/* equals ul li border bottom; */
}

/* display second level <ul> when first-level <li> is hovered*/
.tabs ul li:hover .dropmenu {
	display : block;
}

.tabs .dropmenu li {
	float:none;		/* prevent inheritage from tabs' rules*/
	display : block;	/* prevent inheritage from tabs' rules*/
	background-color : #FFF;/* distinguish from background*/
	background-image : none;/* prevent inheritage from tabs' rules*/
	width : 130px; 		/* 152px - padding 2x8px + 2x2px - border 2x1px */
	height : auto;		/* prevent inheritage from tabs' rules*/
	min-height : 1.5em;	/* ensure good appearence*/
	border : none;		/* prevent inheritage from tabs' rules*/
	padding : 2px;		/* ensure good appearence*/
	margin-right: 0px;
}

/*not all second-level <li> content may be a link*/
.tabs ul li ul li:hover {
	cursor: default;	/* prevent inheritage from tabs' rules*/
	background : #DEE; /* basic to make pleasant hovering */
}

/* prevent inheritage from tabs' rules*/
.tabs ul li ul li a, div.tabs ul li ul li a span {
	display : inline;
	float : none;
	background : none;
	padding: 0px;
}

/*minimize icon size */
.dropmenu .icon img {
	max-height: 40px;
	max-width: 40px;
}

/* format hint that display count of total subsections */
#dropcount {text-align:center;margin: 0 5px 5px;padding:0;}

/* 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 img.box_title {
	max-width: 25px;
	max-height: 25px;
	margin-right: 4px;
}

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: 2px 0 8px 0;
	font-weight: normal;
}

p#page_menu a { /* a link in the main page menu */
	margin: 2px;
	padding: 0.25em 0.55em;
	background-color: #666666;
	color: white;
	border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px;
	display: inline-block;
	text-decoration: none;
	font-weight: normal;
}

p#page_menu a:active { /* click on button */
	left: 1px;
	position: relative;
	top: 1px;
}

p#page_menu a:hover { /* about to click */
	position: relative;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
}

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

p#page_menu a span { /* to complement background, if required */
	margin: 0;
	padding: 0;
}

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;
    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,
	p.tags a:hover, span.tags a:hover {
		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.2em 0;
	padding: 0;
}



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

div.box { /* some content with a title */
	position: relative;
	margin-bottom: 1em;
}

div.box h2 { /* box title */
	border: none;
	margin: 0;
	padding: 3px 0;
}

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

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

div.box h2,
div.box h2 span,
div.box h2 a,
div.box h2 a:hover,
div.box h2 a span {
	font-size: 16px;
	line-height: normal;
	text-decoration: none;
}

div.box div.content { /* actual content of the box */
	overflow: hidden; /* clear floats, as in http://www.quirksmode.org/css/clearing.html */
	width: 100%;
	position: relative;
}

html > body .ibox { display:inline-block; } /* inline boxes that work on IE6 -- use span.ibox */
.ibox {display:inline-block;position:relative;}
* html .ibox { display: inline; }
:first-child + html .ibox { display:inline; }

/* menu bars */

div.menu_bar,
p.assistant_bar { /* an horizontal menu of commands */
	margin: 0.5em 0 1em 0;
	padding: 3px 0 3px 0;
	font-weight: normal;
	line-height: 2em; /* because of large padded links */
}

div.menu_bar a { /* one command */
	background-color: #ddd;
	color: black;
	font-size: 1em;
	font-style: none;
	border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
	padding: 5px 8px 3px 8px;
	margin: 2px;
}

div.menu_bar a:hover { /* behaviour on hovering */
	cursor: pointer;
	position: relative;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	text-decoration: none;
}

div.menu_bar a.button,
div.menu_bar a.button span,
div.menu_bar a.button:hover,
div.menu_bar a.button:hover span { /* no specific background image for buttons */
}

div.menu_bar a span { /* secondary background image */
}

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

div.menu_bar > span.label { /* some text in a menu bar, with no link */
	background-color: #eee;
	color: black;
	font-size: 1em;
	font-style: none;
	border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
	padding: 5px 8px 3px 8px;
	margin: 2px;
}

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

div.menu_bar a span a,
div.menu_bar a span a:hover,
div.menu_bar a span a span,
div.menu_bar a span a:hover span { /* don't put background image on sub links (e.g., drop menus) */

	background: none;

}

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

	div.menu_bar { display: none; }

}


/* navigation bar */

a.pager-current,	/* where we are */
a.pager-item,		/* navigation link in option */
a.pager-previous,	/* link to previous item */
a.pager-next {		/* link to next item */
	background-color: #ddd;
	color: black;
	font-size: 1em;
	font-style: none;
	border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
	padding: 5px 8px 3px 8px;
	margin: 2px;
}

a.pager-current {
	border: 1px solid black;
}

a.pager-current:hover,
a.pager-item:hover,
a.pager-previous:hover,
a.pager-next:hover {
	color: black;
	cursor: pointer;
	position: relative;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	text-decoration: none;
}
table.neighbours { /* previous and next links */
	clear: left;
	border: none;
	margin: 1em auto;
}

table.neighbours tr td {
	border: none;
}

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

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

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



/* 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" instead of "layout" */

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

table.layout {
	width: auto; /* fully adapt to content */
	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;
}

form textarea,
#comment_form textarea {
	margin: 0 auto;
	width: 90%;
}

/* 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 */
	list-style-type: none;
	border: none;
	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;
}


/* tipsy -- see http://onehackoranother.com/projects/jquery/tipsy/ */

.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 1000; }
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
  .tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
  .tipsy-arrow { position: absolute; background: url('tools/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
  .tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
  .tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
  .tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

.tipsy_thumbnail { /* absolute limit for the contained iframe */
    width: 200px;
    height: 130px;
    overflow: hidden;
    background-color: white;
    background-image: none;
    margin: 3px 0 4px 0;
}

.tipsy_iframe {	/* display a scaled-down web page */
    width: 800px;
    height: 520px;
    border: none;
	-moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
}

/*************************
 * 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 a,
div.tiny,
span.tiny { /* [tiny]...[/tiny] -- smaller than .small*/
	font-family: sans-serif;
	font-size: 9px;
}

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

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

div.huge,
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,
div.menu_bar a.button,
input[type="submit"],
button.bigButton,
div.menu_bar .button button { /* [button]url[/button], [button=label]url[/button] -- a link that mimic a form button */
	background: -moz-linear-gradient(center top , #FFFFFF, #CCCCCC) repeat scroll 0 0 transparent;
    border: 1px solid #AAAAAA;
    border-radius: 12px 12px 12px 12px;
    color: #111111;
    font-weight: normal;
	font-size: 1em;
    margin: 1px 4px 1px 4px;
    padding: 5px 7px 4px 7px;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
}

a.button,
a.button span,
a.button:visited,
a.button:visited span,
div.menu_bar .button button span {
	color: #111111;
}

a.button:active { /* click on button */
	left: 1px;
	position: relative;
	top: 1px;
}

a.button:hover,
div.menu_bar a.button:hover,
input[type="submit"]:hover,
button.bigButton:hover,
div.menu_bar .button button:hover { /* hover a button */
	background: -moz-linear-gradient(center top , #CCCCCC, #DDDDDD) repeat scroll 0 0 transparent;
	cursor: pointer;
	position: relative;
	box-shadow: 0 2px 6px #FFFFFF inset, 0 3px 3px rgba(0, 0, 0, 0.6);
	text-decoration: none;
}

a.button.wide { /* a button spanning most of the available space */
	display: block;
	width: 98%;
	text-align: center;
}

@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 span { /* the image near an external link -- [link]href[/link], [link=label]href[/link] */
		padding-right: 15px;
		background-image: url("links/external.png");
		background-position: right;
		background-repeat: no-repeat;
	}

	* html #main_panel a.external span { /* 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] */
		background-color: #ddd;
		color: black;
		font-size: 1em;
		font-style: none;
		border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
		padding: 5px 8px 3px 8px;
		margin: 2px;
	}

	#main_panel a.next:hover { /* about to click */
		color: black;
		cursor: pointer;
		position: relative;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	#main_panel a.previous { /* shortcut to previous page -- [previous=id], [previous=id, label] */
		background-color: #ddd;
		color: black;
		font-size: 1em;
		font-style: none;
		border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
		padding: 5px 8px 3px 8px;
		margin: 2px;
	}

	#main_panel a.previous:hover { /* about to click */
		color: black;
		cursor: pointer;
		position: relative;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
		text-decoration: none;
	}

	#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 tbody tr { /* vertical alignment */
	margin: 0 0 1em 0;
}

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

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

table.decorated tbody tr td.image img {
	margin: 2px;	/* 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 auto;
	padding: 1em;
	border: 1px solid #f66;
	background-color: #faa;
}

div.note { /* [note]...[/note] -- draw attention to a note */
	margin: 1em auto;
	padding: 1em;
	border: 1px solid #063;
	background-color: #6c6;
}

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: 20em;
	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: 8px;
	vertical-align: top;
	text-align: left;
	position: relative;
}

@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: 8px;
	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;
	margin: 1em 0;
}

table.grid tbody tr td,
table.grid tbody tr.even td,
table.grid tbody tr.odd td,
table.grid tbody tr th,
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;
	position: static; /* specially for firefox 8 */
}

#main_panel table.exhibit-tabularView-body { /* a table that takes as much space as possible horizontally */
	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 */
	width: 99%;
	margin: 1px;
}

table.wide tbody tr td,
table.wide tbody tr.even td,
table.wide tbody tr.odd td,
table.wide tbody tr th,
table.wide thead tr th { /* a cell in a grid */
	border: 2px ridge #bfbfbf;
	padding: 0.5em;
	position: static; /* specially for firefox 8 */
}



/*************************
 * 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.handle { /* the handle to open/close the box */
	background-color: #ddd;
	color: black;
	font-size: 1em;
	font-style: none;
	border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
	padding: 5px 8px 3px 8px;
	margin: 2px;
}

div.toc_box a.handle:hover { /* about to click */
	cursor: pointer;
	position: relative;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
	text-decoration: none;
}

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

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 dt h2 {
	margin: 1em 0 auto;
}

dl.newsfeed_item dt span.details {
	display: block;
	margin: 2px auto;
}

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 */
}

.tweet {
	background: #fff;
	margin: 4px 0;
	width: 500px;
	padding: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

.tweet img {
	float: left;
	margin: 0 8px 4px 0;
}

.tweet .text {
	margin: 0;
}

.tweet .time a {
	font-size: 80%;
	color: #888;
	white-space: nowrap;
	text-decoration: none;
}

.tweet .time a:hover {
	text-decoration: underline;
}

/*************************
 * 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
 *************************/

/**
 * autocomplete
 *
 */

div.autocomplete,
#main_panel div.autocomplete {
	position:absolute;
	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;
}

.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;
	text-align: center;
}

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 and for face to face sessions
 *
 * @see articles/view_as_chat.php
 * @see faceme.php
 */

body#faceme div#sharingPanel { /* help the surfer to spread the link */
	width: 515px;
	margin: 0;
	padding: 1em;
}

body#faceme div#sharingPanel p { /* the help label */
	margin: 0 0 0.5em;
}

body#faceme div#sharingPanel input { /* display the link to share */
	width: 400px;
}

div#opentok { /* for videos above the chat area */
	position: relative;
	max-width: 720px; /* limit the width */
	width: expression(this.width > 720 ? 720: true); /* just for IE 6 */
	margin: 0;
	padding: 0;
}

div#opentok .growl,
body#faceme .growl { /* for real-time status updates */
	font-size: 10px;
	font-style: none;
	padding: 2px 0;
}

div#opentok .growl span,
body#faceme .growl span { /* tipsy-like real-time notification */
	background-color: black;
	color: white;
	font-size: 10px;
	font-style: none;
	border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
	padding: 5px 8px 3px 8px;
	margin: 2px;
}

div#opentok .subscriber { /* each listener has an invisible border at the top, to be replaced when he starts talking */
	border-top: 3px solid transparent;
}

div#opentok .me { /* for my video */
	margin: 0;
	padding: 0;
}

div#opentok .others { /* for videos of other participants */
	margin: 0;
	padding: 0;
}

div#opentok .subscriber.talker { /* each talker has a red border at the top */
	border-top: 3px solid red;
}

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

div#thread_wrapper textarea#description { /* the main input field */
	max-width: 99%;
	width: 99%;
	margin: 0;
	padding: 3px;
	background-color: #FFFFE5; /* #eee; */
	overflow: auto; /* add a vertical scroller if required */
	border-top: none;
	border-right: 1px dotted #ccc;
	border-bottom: 1px dotted #aaa;
	border-left: 1px dotted #ccc;
}

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;
	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 { /* all contributions */
	margin: 0;
	padding: 0;
}

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;
	margin: 0;
	padding: 0.3em 1em 0 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 wall
 *
 * @see comments/layout_comments_as_updates.php
 */

.comment.approval  > p:first-of-type {		/* an approval */
	background-color: yellow;
	font-weight: bold;
	padding: 0.5em 1em;
}

.author.notification,
.comment.notification { /* a notification */
	font-style: italic;
}

/**
 * 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 1em 0;
	padding: 0.5em;
}

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 0 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;
}

div.accordion_content div.introduction {
	margin: 0 0 4px 0; /* no space at the top of the introduction text */
}

/**
 * daily layout: first box is shaped as follows:
 *
 * <div class="newest">
 * <div class="box">
 *  <div class="date">date of post</div>
 *	<h2><span>box title</span></h2>
 *  <div class="content">
 * 		<a><img class="left_image" src="page thumbnail" /></a>
 *		<p class="details">box details</p>
 *		box content
 *		<div class="menu_bar right">box menu</div>
 *  </div>
 * </div>
 * </div>
 *
 * other boxes have the same layout, except the most external div:
 *
 * <div class="box">
 *  <div class="date">date of post</div>
 *	<h2><span>box title</span></h2>
 *  <div class="content">
 * 		<a><img class="left_image" src="page thumbnail" /></a>
 *		<p class="details">box details</p>
 *		box content
 *		<div class="menu_bar right">box menu</div>
 *  </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;
}

div.post {
	position: relative;
	margin: 1em 0 2em 60px; /* left margin to display post date */
	border-top: 1px solid #999;
}

div.post h2 {
	border: none;
	margin: 0;
	padding-top: 3px;
}

div.post h2,
div.post h2 span,
div.post h2 a,
div.post h2 a:hover,
div.post h2 a span {
	font-size: 24px;
	line-height: normal;
	text-decoration: none;
}

/* you can also rotate some date elements, as explained at http://www.wplover.com/1449/easier-date-display-technique-with-css-3/ */

div.date { /* date of a post */
	width: 60px;
	height: 60px;
	overflow: hidden;
	font-family: Georgia, serif;
	font-size: 20px;
	line-height: normal;
	color: #999;
	margin: 0 auto;
	position: absolute;
	left: -60px;
	top: -1px; /* because of the border */
	border-top: 1px solid #999;
}

div.date .day { /* day of the post */
	font-size: 30px;
	position: absolute;
	left: 0;
	top: 13px;
}

div.date .month { /* month of the post */
	font-size: 16px;
	position: absolute;
	left: 0;
	top: 3px;
}

div.date .year { /* year of the post */
	font-size: 12px;
	position: absolute;
	left: 3px;
	top: 43px;
}



/**
 * 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;
}

/**
 * index layout: an index of things
 *
 * <ul class="index" id=="letterX">
 *    <li>item one</li>
 *		...
 * </ul>
 *
 * @see articles/layout_articles_as_index.php
 */

ul.index {
	margin: 0;
	padding: 0 0 2em 0;
}

ul.index li {
	background: none;
	float: left;
	margin-left: 25px;
	margin-top: 4px;
	padding: 0;
}

/**
 * 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;
}

/**
 * last layout: reflect last contributions to the page
 *
 * @see articles/layout_articles_as_last.php
 */

div.last_articles { /* the overall list of articles */
	border-bottom: 1px dotted #ccc;
	padding-bottom: 4px;
	margin-bottom: 2em;
}

div.last_article { /* one div per article */
	border-top: 1px dotted #ccc;
	padding-top: 4px;
	margin-bottom: 2em;
}

div.last_comment { /* content of last comment to the page */
	border-left: 2px solid #ccc;
	margin: 7px 10px 20px 7px;
	padding: 4px 0 0 10px;
}

/**
 * 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" src="page thumbnail" />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
 */


/**
 * smartlist layout
 *
 * <ul class=smartlist>
 * 		<li><div class=icon>image</div><div class=label>title<span=detail>intro</span></div></li>
 * 		...
 * </ul>
*/


/* <li> contain already icons */
.smartlist {list-style:none;}

/*ensure floating element are overlapped*/
.smartlist li {
	overflow: hidden;
	background : none; /* avoid icons putted by some reference theme */
	}

/*contain title and intro*/
.smartlist .label {
	overflow: hidden;	/*content don't go under icon*/
	}

/*contain icon, float left*/
.smartlist .icon {
	float: left;
	margin-right: 0.6em;
	}

/**
 * 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;
	text-align: center;
	padding: 6px;
	width: 20em;
}

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

a.tip:hover {
    cursor: help;
    position: relative;
}

a.tip span.tip_content { /* mask tips until they are activated */
    display: none;
}

a.tip:hover span.tip_content { /* unveil a tip */
	color: #888;
	font-size: 0.8em;
	background-color: #fff;
    border: 1px solid #C0C0C0;
    display: block;
    left: 0;
    margin: 10px;
    padding: 5px 20px 5px 5px;
    position: absolute;
    text-align: left;
    text-decoration: none;
    top: 10px;
    width: 250px;
    z-index: 100;
}

/**
 * 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 tbody tr td {
	position: static;
}

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: 0.8em; /* because of Done buttons */
   	width: 80%; /* same width as div#tabs_bar */
}

div.bottom div.menu_bar {
	margin: 0.4em 0;
}

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;
	width: 80px;	/* 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,
#main_panel ul.compact { /* a regular compact list */
}

ul.compact li,
#main_panel ul.compact li { /* an item in a regular compact list */
}

ul.compact li a,
ul.compact li a span,
#main_panel ul.compact li a,
#main_panel ul.compact li a span { /* a link in a regular compact list */
	background: none;
	padding: 0;
}

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

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

#extra_panel ul.compact li a,
#extra_panel ul.compact li a span,
#side_panel ul.compact li a,
#side_panel ul.compact li a span { /* links in a side compact list */
	background: none;
	padding: 0;
}


/* 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;
	border-radius: 8px; -moz-border-radius:8px; -webkit-border-radius:8px;
}

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 {
	clear: both; /* because of floating images inserted before tabs */
	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: none;
	position: relative; /* we have absolute positioning inside! */
}

div#tabs_panels div.panel-foreground {
	display: block;
	position: relative;
	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;
	position: relative;
	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;
	border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
}

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

div.day_panel { /* where content of one day is displayed */
	font-family: sans-serif;
	font-size: 10px;
	font-weight: normal;
	max-width: 200px;
}

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: 50em; /* beware of narrow layouts */
	border: 7px #cccccc solid;
}

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

#main_panel div.panel ul ul,
div.panel ul ul { /* second level of the toc */
	margin-left: 1.3em;
}

/* 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 */
}