/**
 * Generic template for the #core container
 * and classic, questions, visual, charged subtemplates
 * Use as class names: <tag id="core" class="generic[ classic | questions | visual | charged]">
 * @media          {screen}
 * @require        global.css
 * @toc            opening, content, contextual
 * 
 * Hierarchy :
 * [...]
 *    #opening
 *    #content
 *    #contextual
 * [...]
 */


/**
 * Main contents (subject of the page)
 * @section        main
 * @tree           #main < #core < #wrapper < body < html
 */
.generic #main .deco {left:200px;}

.charged #main .deco {
	margin-left:5px;
	width:235px; height:35px;
	background:url(../img/bg/opening_content_special_bottom.png) no-repeat;
}


/**
 * Page title, intro texts and images...
 * @section        opening
 * @tree           #opening < #main < #core < #wrapper < body < html
 */
.generic #opening {
	margin-bottom:1.3em;
	background:transparent url(../img/bg/opening-extended.png) repeat-y scroll 0%;
	color:#FFFFFF;
}
.charged #opening {margin-bottom:0;}


/**
 * Actual content of the page
 * @section        content
 * @tree           #content < #main < #core < #wrapper < body < html
 */
.generic #content h3 {position:absolute; left:-10000px;}

.generic #content h4 {
	color:#AC036D;
	font:bold italic 19px "Times New Roman", Times, Georgia, serif;
}
.questions #content h4, .visual #content h4 {font-size:15px;}
.visual #content h4 {margin-bottom:-0.6em;}

.generic #content h5 {
	margin-top:.8em;
	font-size: 14px;
}

.visual #content .item {margin-bottom:1.3em;}
.visual #content .item p {margin-bottom:0;}
.visual #content .item img {
	float:right;
	margin-left:10px;
}

.charged #extra {background:url(../img/bg/main_content_charged.jpg) repeat-y; color:#FFF;}

.charged #content {margin-right:14px;}

.charged #content h3 {
	position:relative; left:0;
	margin-top:.8em;
	font:bold italic 19px "Times New Roman", Times, Georgia, serif;
}
.charged #content h3 img {
	position:relative; z-index:1;
	display:block;
	margin:0 0 -1.5em -231px;
}
.charged #content h3 span {
	position:relative; z-index:2;
	display:block;
}


/**
 * Menus, texts, images, etc. related to the current page 
 * @section        contextual
 * @tree           #content < #main < #core < #wrapper < body < html
 */
.charged #contextual {
	z-index:3;
	margin-left:20px; padding:0 0 10px;
	background:none;
}

/* #menuContextual */
.charged #menuContextual a, .charged #menuContextual li.on a {padding:.5em 5px .5em 3px;}

#contextual .deco {
	position:absolute; top:185px; left:185px;
	width:20px; height:200px;
	background:url(../img/bg/menuContextual_deco.png) no-repeat;
}

#menuContextual {
	padding:0 21px 0 1px;
	font-size:12px; font-weight:bold;
}

#menuContextual li {border-top:1px solid #E4E1DD;}
#menuContextual li.on {border-color:#FFF;}

#menuContextual a {
	display:block;
	padding:.5em 5px .5em 3px;
	color:#3D2C62;
	text-decoration:none;
}
#menuContextual a:hover {text-decoration:underline;}
#menuContextual li.on a {
	padding-left:20px;
	background:url(../img/bg/menuContextual_item_on.jpg) no-repeat 0 50%; color:#FFF;
	text-decoration:none;
}

/**
 * Auto-clearing method (do not work in IE)
 * @section        clearing
 */
#extra:after, .visual #content .item:after {
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
	content:".";
}