/**
 * A fluid 3-column layout
 *
 * This skin may be used as a good starting point by skin designers requiring:
 * - top fixed and dynamic navigation tabs (div.tabs)
 * - a fixed left column (div#side_panel)
 * - an optional 3rd column on the right (div#extra_panel)
 * - size of the 3rd column may adjusted through CSS depending on the URL
 *
 * Some hints to adapt this skin to your needs:
 *
 * - The heading background image is set in style #header_panel
 *
 * - The height of the header depends of this background image.
 * It has to be set in style #header_panel.
 * It is also used to position the #side_panel and the #extra_panel elements.
 *
 * - Static tabs can be added by modifying the file template.php
 *
 * - The size of the left column is set in style #side_panel,
 * and it is also used as left margin in styles div.tabs and #wrapper.
 *
 * - The size of this column may be adjusted by using section nick_names.
 * You will have to change right margin of the main panel accordingly.
 * For example, adjust the style 'body#home #extra_panel' and the style
 * 'body#home div#main_panel' for the home page.
 *
 *
 * This single style sheet takes care of all media (screen, handheld, print, etc.)
 *
 * This style sheet has been checked against Mozilla Firefox version 1 and Microsoft Internet Explorer version 6.
 * You may have to split this file into several pieces to avoid side-effects on legacy browsers such as Netscape navigator 4.7, etc.
 *
 * Styles are ordered according to following list:
 * - standard HTML and XHTML tags are refined
 * - unique styles used for page layout
 * - other unique styles
 * - classes
 *
 * Where applicable we have also mentioned the YACS codes related to styles.
 * You can find more information on YACS codes at codes/codes.php and related pages.
 *
 * @link http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php
 *
 * @author Bernard Paques
 * @reference
 * @license http://www.gnu.org/copyleft/lesser.txt GNU Lesser General Public License
 */

/**
 * import core YACS reference style sheet -- this has to come before any other rule
 */
@import url("../_reference/yacs.css");

/**
 * standard tags - redefine behaviour of reference HTML and XHTML tags
 * to ensure that all browsers will be aligned
 */

a,
a code { /* basic link */
	color: #039;
	text-decoration: none;
	cursor: pointer; /* help ie on folded boxes */
}

a:link,
a:link code { /* link displayed for the first time */
	color: #039;
}

a:visited,
a:visited code { /* link that has been used at least once */
	color: #039;
}

#main_panel a:active,
#main_panel a:active code { /* link at the moment it is clicked */
	background-color: #ede;
}

#main_panel a:hover,
#main_panel a:hover code { /* link below the mouse pointer */
	background-color: #ede;
}

a img { /* avoid borders around images used as links */
	border: none;
}

body { /* most elements will inherit some of these attributes */
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #444;
	background: #fff url("images/body_background.gif") repeat-y;
}

button { /* change button appearance */
}

button:hover {
}

h1 { /* appears only once, with the page title */
	clear: left;
	margin: 1em 0 0.5em 0;
	padding: 0 0 20px 0;
	color: #f93;
	font-size: 1.5em;
	font-weight: bold;
	text-align: left;
	background: transparent url("images/h1_background.gif") no-repeat left bottom;
}

h2 { /* appears in the main content panel, to introduce sections of the page -- [title]...[/title], [question]...[/question] */
	clear: left;
	margin: 1em 0 0.5em 0;
	padding: 0;
	font-size: 1.2em;
	font-weight: bold;
	text-align: left;
	clear: left;

}

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

img { /* a standard image */
	margin: 0;
	padding: 0;
}

input[type="password"],
input[type="text"] { /* change form elements */
	color: black;
	background-color: white;
	border: #26a solid 1px;
}

input:focus { /* help to locate the current field */
	color: black;
	background-color:#dedede;
}

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

input[type="submit"]:focus,
input[type="submit"]:hover {
	background-color: #caa;
}

li { /* avoid justification alignment */
	text-align: left;
}

pre { /* a block of sample lines -- [php]...[/php], [snippet]...[/snippet] */
	background-color: #ffc;
	color: #000;
}

select {
	color: black;
	background-color: white;
}

select:focus { /* help to locate the current field */
	color: black;
	background-color: #dedede;
}

textarea { /* change form elements */
	color: black;
	background-color: white;
	border: #bfbfbf solid 1px;
}

textarea:focus { /* signal current input area */
	color: black;
	background-color: #dedede;
}

/**
 * layout elements - also add behaviour for related sub-elements where applicable
 */

#extra_panel { /* information related to this page */
	margin: 0 0 0 7px;
	padding: 0;
	width: 130px; /* tools, etc. */
	font-size: 0.8em;
	font-weight: normal;
	background-color: #f2f2f2;
	position: absolute;
	top: 0;
	right: 0;
}

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

	#extra_panel {
		display: none;
	}

}

body#home #extra_panel { /* wider at the home page, because of large news */
	width: 280px;
}

body#sections #extra_panel { /* wider at the site map, and on section index pages */
	width: 280px;
}

#extra_panel dl dt { /* box titles on narrow panels */
	background-color: #E9E9E9;
}

body#home #extra_panel dl dt,
body#sections #extra_panel dl dt { /* enhance box titles on wider panels */
	padding: 10px 0 10px 40px;
	background: #E9E9E9 url("images/extra_header.gif") no-repeat left;
}

#extra_panel a:link,
#extra_panel a:visited { /* links in the extra panel */
	color: #205780;
	background-color: transparent;
}

#extra_panel a:active,
#extra_panel a:hover { /* links in the extra panel */
	color: #7CA648;
	background-color: transparent;
}

#extra_panel dl { /* actually, a box on the side panel */
	margin: 0;
	padding: 0;
}

#extra_panel dl dd { /* body of one side box */
	margin: 0.2em 0.2em 2em 0.2em;
	padding: 0;
	border: none;
}

#extra_panel dt { /* used for titles of various boxes */
	margin: 0 0 0.2em 0;
	padding: 2px 30px 2px 2px;
	font-weight: bold;
}

#footer_panel { /* comes after everything */
	clear: left;
	margin: 0;
	padding: 0 0 0 10px;
	text-align: left;
	font-size: 0.8em;
	font-weight: normal;
}

#footer_panel a {
	font-weight: normal;
}

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

	#footer_panel {
		display: none;
	}

}

#header_panel { /* comes before everything */
	background-color: #EBF4FA;
	background-image: url("images/header_background.gif");
	background-position: bottom left;
	background-repeat: repeat-x;
	width: 100%;
	margin: 0;
	height: 95px; /* also influences the top of #extra_panel */
	position: relative;
	overflow: hidden;
}

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

	#header_panel {
		display: none;
	}

}

@media screen { /* only on a wide screen */

	div#main_panel { /* where the actual content is */
		margin: 0;
		margin-right: 132px;
		padding: 0 1em 1em 1em;
		text-align: justify;
		z-index: -1;
	}

	body#home div#main_panel { /* wider at the home page, because of large news  */
		margin-right: 280px;
	}

	body#sections div#main_panel { /* wider at the site map, and on section index pages  */
		margin-right: 280px;
	}

	#main_panel a code { /* next rule do not impact links (eg, <code> in [toc]) */
		background-color: transparent;
	}

	#main_panel code { /* make code more visual */
		background-color: #F5F5F5;
		margin: 0;
		padding: 0 4px 0 4px;
	}

	#main_panel pre code { /* use block attributes instead of in-line attributes */
		background-color: transparent;
		margin: 0;
		padding: 0;
	}

}

#main_panel ul { /* change lists in the main panel */
	margin: 0.5em 0 1em 0;
/*	padding: 0;
/*	list-style: none; */
}

#side_panel { /* navigation information */
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	font-weight: normal;
	position: absolute;
	width: 178px; /* the exact width of the underlying background pattern */
	top: 115px; /* cut and paste height of #header_panel */
	left: 0;
}

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

	#side_panel {
		display: none;
	}

}

#side_panel a:hover { /* links in the side panel */
	background-color: #ccc;
}

#side_panel dl { /* actually, a box on the side panel */
	margin: 0;
	padding: 0;
	background: transparent url("images/side_header.gif") no-repeat top right;
}

#side_panel dl dd { /* body of one side box */
	margin: 0.2em 0 2em 0;
	padding: 0 6px;
	border: none;
}

#side_panel dt { /* used for titles of various boxes */
	margin: 0 0 0.2em 0;
	padding: 7px 4px 2px 4px;
	font-weight: bold;
}

@media screen { /* on large screens */

	#wrapper { /* limit the horizontal size of everything, and decorate the layout */
		position: relative;
		margin: 0 0 0 180px;
		padding: 0;
	}

}

/**
 * unique elements - may appear in one or several pages
 */

dl#categories ul { /* categories related to an article, on page side -- articles/view.php */
	margin: 0;
	padding: 0;
	list-style: none;
}

dl#categories ul li { /* space between links */
	margin: 0 0 4px 0;
	padding: 0;
}

p#crumbs { /* path to this page -- see template script */
	font-size: 0.8em;
	font-weight: normal;
	padding: 0;
	margin: 0 0 20px 0;
}

p#crumbs a {
	font-size: 0.8em;
	font-weight: normal;
}

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

#featured { /* the navigation box for statically featured pages -- index.php, sections/view.php */
}

body#home #extra_panel dl#featured dt { /* featured header at the home page */
	margin: 0;
	padding: 0.5em 0 0.5em 12px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #fff;
	background: #FF9734 url("images/news_header.jpg") no-repeat top left;
	border-bottom: 1px solid #fff;
}

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

#featured ul { /* the list of featured pages */
	margin: 0;
	padding: 0;
	list-style: none;
}

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

#header_slogan { /* appears towards the top of the page -- see template script */
	position: absolute;
	top: 0;
	right: 0;
	margin: 0; /* need for IE Mac */
	padding: 12px 20px 0 0;
	font-size: 12px; /* not to be resized */
	font-weight: normal;
	text-align: right; /* need for IE Mac */
	white-space: nowrap; /* for Opera */
	color: #54A4DE;
}

#header_title { /* appears towards the top of the page -- see template script */
	position: absolute;
	top: 10px;
	left: 20px;
	margin: 0; /* need for IE Mac */
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	color: #4D4D4D;
}

#header_title a { /* link to the home page */
	color: #4D4D4D;
}

#header_title a:hover { /* about to click */
	color: #c00000;
}

@media screen { /* only on large screens */

	#header_title a { /* add an image on the left */
		display: block; /* to add margins and padding */
		position: relative;
		padding-left: 41px; /* image width + 4 pixels */
		padding-top: 6px; /* (image height - font size) / 2 */
		padding-bottom: 6px; /* (image height - font size) / 2 */
		background-image: url("images/yacs.gif");
		background-position: 0 0;
		background-repeat: no-repeat;
	}

	#header_title a:hover { /* make the yacs blink */
		background-image: url("images/yacs.gif");
		background-position: 0 -100px;
	}
}

@media screen { /* for the home page, only on large screens -- index.php */

	#newest { /* the most new article at the home page, in layouts: daily, newspaper, slashdot */
		border: 1px solid #fa0;
	}

}

#side_panel dl#main_menu dt { /* the dynamic menu replicated at all pages */
	padding-left: 20px;
	background: transparent url("images/icon_home.gif") no-repeat 2px 4px;
}

#neighbours ul { /* navigation commands on page side -- articles/view.php */
	margin: 0;
	padding: 0;
	list-style: none;
}

#neighbours ul li { /* space between links */
	margin: 0 0 4px 0;
	padding: 0;
}

body#sections #extra_panel dl#news dt { /* news header on sections pages */
	margin: 0;
	padding: 0.5em 0 0.5em 12px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #fff;
	background: #FF9734 url("images/news_header.jpg") no-repeat top left;
	border-bottom: 1px solid #fff;
}

div.tabs { /* the global navigation bar -- see template script */
	position: absolute;
	top: 75px;
	left: 178px;
	margin: 0; /* need for IE Mac */
	padding: 0;
}

div.tabs,
div.tabs a { /* text appearance in tabs */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
}

div.tabs ul { /* position tabs */
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 90;
}

div.tabs li {
	display:inline;
	margin:0 2px 0 0;
	padding:0;
	text-transform: lowercase;
}

div.tabs li a { /* tab top left corner */
	margin:0 1px 0 0;
	padding:0 0 0 10px;
	text-decoration:none;
	float: left;
	background: transparent url("images/tabs.gif") no-repeat 0% 0%;
}

div.tabs li a span { /* tab top right corner */
	float: left;
	display: block;
	padding: 4px 10px 4px 0;
	background: transparent url("images/tabs.gif") no-repeat 100% 0%;
	color: #444;
	text-decoration: none;
}

div.tabs li a:hover { /* change tab background on hovering */
	background-position: 0% -22px;
	border-bottom: 1px solid transparent;
	cursor: pointer; /* else ie 6 is lost */
}

div.tabs li a:hover span { /* change tab background on hovering */
	background-position: 100% -22px;
}

#tools img { /* towards bottom of the page -- see articles/view.php */
	margin-right: 4px; /* space between icons and labels */
}

#side_panel dl#user_menu dt { /* a box to authenticate, or to list available commands */
	padding-left: 20px;
	background: transparent url("images/icon_user.gif") no-repeat 2px 2px;
}

dl#user_menu ul { /* commands that apply to this user -- see template script */
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * styles by classes
 */

a.button,
a.button:visited,
p.menu_bar a.button,
p.menu_bar a.button:visited { /* a link that mimic a form button -- [button]url[/button], [button=label]url[/button] */
	display: -moz-inline-box; /* mandatory for firefox 2 */
	display: inline-block;
	cursor: pointer;
	border: none;
	font-size: 0;
	font-style: normal;
	text-decoration: none;
	color: #2e523b;
	line-height: 0;
	background: transparent url('images/button_yellow.png') no-repeat 0 0;
	height: 30px;
	margin: 0 6px 0 0;
	padding: 0 10px 0 0;
	vertical-align: middle;
}

a.button span,
p.menu_bar a.button span {
	display: inline-block;
	cursor: pointer;
	border: none;
	font-family: "Arial" !important;
	font-size: 12px !important;
	font-style: normal;
	white-space: nowrap;
	letter-spacing: 0 !important;
	color: #222;
	line-height: 16px;
	background: transparent url('images/button_yellow.png') no-repeat 100% 0;
	height: 30px;
	margin: 0 -16px 0 10px;
	padding: 8px 20px 0 10px;
	vertical-align: middle;
}


span.button { /* a button in a form */
	display: -moz-inline-box; /* mandatory for firefox 2 */
	display: inline-block;
	cursor: pointer;
	border: none;
	font-size: 0;
	font-style: normal;
	text-decoration: none;
	color: #2e523b;
	line-height: 0;
	background: transparent url('images/button_yellow.png') no-repeat 0 0;
	height: 30px;
	margin: 0 6px 0 0;
	padding: 0 10px 0 0;
	vertical-align: middle;
}

span.button button {
	display: -moz-inline-box;
	display: inline-block;
	cursor: pointer;
	border: none;
	font-family: "Arial" !important;
	font-size: 12px !important;
	font-style: normal;
	white-space: nowrap;
	letter-spacing: 0 !important;
	color: #222;
	line-height: 16px;
	background: transparent url('images/button_yellow.png') no-repeat 100% 0;
	height: 30px;
	margin: 0 -16px 0 10px;
	padding: 0 20px 0 10px;
}

a.button:hover,
span.button:hover,
p.menu_bar a.button:hover,
p.menu_bar span.button:hover {
	background-position: 0 -60px;
	color:#222;
	text-decoration:none;
}

a.button:hover span,
span.button:hover button,
p.menu_bar a.button:hover span,
p.menu_bar span.button:hover button {
	background-position: 100% -60px;
}

a.button:active span, span.button:focus button {
	color:#444;
}

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

table.calendar caption,
table.calendar caption a { /* calendar caption */
	font-weight: normal;
	font-size: 12px;
	font-style: normal;
	color: #fff8ff;
	background-color: #8D90AB;
	text-align: right;
	margin-top: 0.5em;
	padding: 4px;
}

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

table.calendar td.spot {
	background-color: #eee;
	font-weight: bold;
}

#main_panel .details a { /* faded into text */
	color: #666;
	font-size: 1em;
}

#side_panel .details { /* less contrasted than regular text */
	color: #447;
	font-size: 0.7em;
}

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

.extra_box ul { /* a list in the side panel */
	margin: 0.5em 0 1em 0;
	padding: 0 0 0 1.5em;
	list-style: disc;
}

dl.gadget_box { /* container of one gadget box -- also see #gadget_1, etc. -- from index.php, sections/view.php */
	padding: 0;
	margin: 0 1em 1em 0;
/*	float: left; */
	background-image:url("images/gadget_tab.jpg"); /* top left of background image */
	background-position:top left;
	background-repeat:no-repeat;
	width: 270px; /* one gadget boxes per row at 800x600 */
}

dl.gadget_box dd { /* content of one gadget box */
	font-size: 0.8em;
	text-align: left; /* no justification in small boxes */
	margin: 0;
	padding: 0.5em;
	background-image: none;
	background-color: #eef;
}

dl.gadget_box dt { /* header of one gadget box */
	background-image:url("images/gadget_tab_right.jpg"); /* top right of background image */
	background-position:top right;
	background-repeat:no-repeat;
	padding: 4px 4px 2px 6px;
	margin: 0;
	font-size: 14px;
	border: none;
	text-align: left;
}

.highlight1 { /* to locate words looked for, following a search request */
	background-color: #80FF80;
}

.highlight2 {
	background-color: #8080FF;
}

.highlight3 {
	background-color: #FF8080;
}

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

.menu a {
	font-weight: normal;
}

dl dd a.menu_2 {
	display: inline;
	margin:0;
	padding:2px 0;
}

#side_panel dl.navigation_box dt { /* a navigation box at the side panel */
	padding-left: 20px;
	background: transparent url("images/icon_navigation.gif") no-repeat 2px 4px;
}

@media screen { /* not on printers */

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

}

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

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

@media screen { /* not on printers */

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

}