/**
 * CSS définissant les styles générique pour le bureau virtuel
 */

/**
 * On supprime tous les comportements par défaut des navigateurs
 * (cf. http://gou.blogspot.com/2005/10/nettoyer-les-styles.html)
 */


/**
 * Permet d'étirer toute la page
 */
html, body{ height:100%; }

body {
	color:#003c6e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
}

hr {
	background-color:#1F60A0;
	height:1px;
}



/**
 * Les titres...
 * info :
 *   - h1,h2 sont reserves au titre de la page
 *   - faire attention a bien respecter l'ordre des titres hx
 */


h2 {
	font-size:1.1em;
}

h3{
	color:#003c6e;
	font-weight:bold;
	font-size:1.1em;
	background: url(/img/common/spider_national/puce-fleche-titre.png) no-repeat left center;
	text-indent:23px;
	margin-bottom:1em;
}

h4 {
	color:#6eb1eb;
	font-weight:bold;
	font-size:0.9em;
}

h4.sous-titre
{
	font-weight: bold;
	padding: 6px 0 6px 6px;
	border-top: 1px solid #A9D7FF;
	border-bottom: 1px solid #A9D7FF;
	color: #6eb1eb;
}



/**
 * balises inline génériques
 */



strong {
	font-weight : bold;
	font-size:1em;
}

em {
	font-style:italic;
}

var {
	color:#003c6e;
	font-weight:bold;
}

acronym {
	border-bottom: 1px dotted #003c6e;
 	cursor: help;
}

cite {
	display:block;
	text-align:left;
	font-style:italic;
	border-left:1px dotted #003c6e;
	margin:10px 10px 10px 20px;
}

img {
	display:inline;
	vertical-align:text-bottom;
}



/**
 * Liens génériques
 */
a {text-decoration:none;}

a:link {
	color: #e63c6e;
	font-weight:bold;
}
a:visited {
	color: #e63c6e;
	font-weight:bold;
}
a:hover {
	color: #e63c6e;
	text-decoration:underline;
}
a:active {
	color: #e63c6e;
}

a.pdf {
	background: url(/img/common/telecharger_pdf.png) no-repeat 0 50%;
	padding-left:32px;
	padding-top:5px;
	padding-bottom:10px;
}

a.detail {
	line-height:28px;
	background: url(/img/common/lzoom.png) no-repeat 0 50%;
	padding-left:21px;
	padding-top:10px;
	padding-bottom:10px;
}

a.precedente {
	background: url(/img/common/spider_national/precedente-off.png) no-repeat left;
	padding: 4px 0px 2px 15px;
}

a.precedente:hover, a.precedente:active {
	background: url(/img/common/spider_national/precedente-on.png) no-repeat left;
	padding: 4px 0px 2px 15px;
}

a.suivante {
	background: url(/img/common/spider_national/suivante-off.png) no-repeat right;
	padding: 4px 15px 2px 0px;
}

a.suivante:hover, a.suivante:active {
	background: url(/img/common/spider_national/suivante-on.png) no-repeat right;
	padding: 4px 15px 2px 0px;
}

a.retour {
	background: url(/img/common/spider_national/premiere-off.png) no-repeat left;
	padding: 4px 0px 2px 20px;
}

a.retour:active, a.retour:hover {
	background: url(/img/common/spider_national/premiere-on.png) no-repeat left;
	padding: 4px 0px 2px 20px;
}

a.premiere {
	background: url(/img/common/spider_national/premiere-off.png) no-repeat left;
	padding: 4px 0px 2px 20px;
}

a.premiere:hover, a.premiere:active {
	background: url(/img/common/spider_national/premiere-on.png) no-repeat left;
	padding: 4px 0px 2px 20px;
}

a.recherche {
	background: url(/img/common/mini-fleche-rose.png) no-repeat left;
	padding: 4px 0px 2px 20px;
}

a.fichier {
	background: url(/img/common/telecharger_pdf.png) no-repeat left;
	padding: 4px 0px 12px 27px;
}

a.fichier-lif {
	background: url(/img/apps/lif/picto-pdf.png) no-repeat;
	padding: 2px 0px 18px 27px;
	margin-left: 4px;
}

a.imprimer {
	background: url(/img/common/imprimer_nb.png) no-repeat left;
	padding:12px 0px 21px 27px;
}

a.lien-page{
	background:url(/img/common/spider_national/ico-lien-page-off.png) no-repeat left;
	padding-left:20px;
}

a.feed {
	background:url(/img/common/feed.png) no-repeat left;
	padding-left:16px;
}

/**
 * Paragaphes
 * --
 */

/* -- Indication sur le fonctionnement du formulaire -- */
p.indication {
	margin-left:10px;
	margin-bottom:10px;
}

/* -- champs formulaire -- */
p.field,
p.button {
	clear:both;
	min-height:1em;
	margin-bottom:0.5em;
	display: block;
}
p.bouton {
	font-weight: bold;
	padding: 5px;
	text-align: center;
}

input[type=submit]:hover, input[type=reset]:hover
{
    cursor:pointer;
}

p.field-long,
p.textarea{
	clear:both;
	float:left;
	width:110px;
	font-weight:bold;
	height:2em;
	min-height:2em;
	margin-bottom:0.5em;
}

p.field-espacebas {
	margin-bottom: 15px;
}

/* -- bulle-info -- */
p.bulle-info {
padding-bottom:1em;
}
p.bulle-info,
p.bulle-info a{
	color:#e63c6e;
	font-weight:bold;
	padding-top:1em;
}

p.bulle-info a{
	padding-left:24px;
	background: url(/img/common/spider_national/icone-bulle-infos-off.png) no-repeat 0% 100%;

}

/* -- petite infobulle : affichée sous l'élément à décrire -- */
a.info-bulle {
 	cursor: help;
	position: relative;
	text-decoration: none;
	border-bottom: 1px gray dotted;
	color:#003c6e;
}

a.info-bulle span {
	display: none;
}

a.info-bulle:hover {
	background: none; /* correction d'un bug IE */
	z-index: 500;
}

a.info-bulle:hover span {
	display: inline;
	position: absolute;
	top: 2em;
	right: 1em;
	background: white;
	text-align: center;
	color: white;
	padding: 2px;
	width:15em;
}

/**
 * formulaires
 */
label {
	float:left;
	width:100px;
	margin-left:10px;
	font-weight:bold;
}

fieldset {
	background-color:white;
}

fieldset.encadre {
	padding: 3px;
	margin: 0px;
	margin-bottom: 10px;
	border: 1px solid white;
}

legend.encadre,
caption.encadre {
	border: 1px solid white;
	background-color : #FFFFFF;
	margin: 5px;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: bold;
	font-size: 1.1em;
}

/* -- freeze du champ textarea avec quickform = <pre> -- */
form pre{
	float:left;
	width:140px;
}

/**
 * Formulaires
 */
input,
textarea,
select {
    color:#003c6e;
	border:1px inset #EFEFEF;
}
input {
	/*float:left;
	width:140px;*/
	font-size:1em;
	border:1px inset #DDD;
}

input.email {
	width:200px;
}

input.button,
p.button input.envoyer
{
	margin-left:110px;
}

p.button input.confirmer,
p.button input.annuler {
	margin-left:10px;
}

/**
 * HTML_QUICKFORM renvoie les champs en erreur
 * avec un <span class="error">
 */
span.error {
	font-weight:bold;
	color:red;
}

/* pour IE, on supprime la bordure*/
input.checkbox {
	border:none;
	width:1em;
	text-align:left;
}

/**
 * Pour IE, on supprime la bordure
 *
 */
input.radio {
	border:none;
	width:1em;
	text-align:left;
}

span.radio-list *
{
    display: inline;
    float: none;
}
span.radio-list label
{
     margin-right: 20px;
}

/**
 * Tableaux
 *
 */

table {
	margin:0.5em 0;
	font-size:0.9em;
}

caption {
	font-size:1.1em;
	padding-bottom:5px;
	padding-top:5px;
}

colgroup { border-width: 0px; }

th {
	font-weight:bold;
	color:#003c6e;
}

/**
 * styles communs :
 * . legende
 * . msg
 * . msg-erreur
 */
#legende,
#msg,
#msg-erreur
{
	margin-left:50px;
	margin-right:20px;
	margin-bottom:1em;
	margin-top:1em;
	padding:1em;
	padding-left:2em;
	width:80%;
	border:1px solid #003c6e;
}

#legende h4,
#msg h4,
#msg-erreur h4
{
	padding-left:24px;
	height:22px;
	font-weight:bold;
}

#legende p,
#msg p,
#msg-erreur p{
	padding:5px;
}

#legende ul li,
#msg ul li
{
	margin-left: 30px;
    list-style: none;
    text-indent: -1em;
}

/**
 * Erreur
 */
#msg-erreur
{
	color: #c00;
	border: 1px dashed #c00;
	background: #ffd;
}

#msg-erreur a
{
	color: #c00;
}

#msg-erreur h4
{
	color: #c00;
}

#msg-erreur ul li
{
	list-style: circle;
	margin-left:30px;
}

#msg-erreur li,
#msg-erreur li p,
#msg-erreur li strong{
	color: #c00;
}

/**
 * légende
 * --
 */
#legende {
	background: white;
}

#legende h4{
	background:url(/img/common/spider_national/icone-bulle-infos-on.png) no-repeat left top;
	color:#003c6e;
}

/**
 * message
 * --
 */
#msg {
	border:1px solid #003c6e;
	background: white;
}

#msg h4{
	background:url(/img/common/spider_national/icone-bulle-infos-on.png) no-repeat left top;
	color:#003c6e;
}

/**
 * Outils
 */
div.outils-bas,
div.outils-haut,
div.outils-plus {
	margin-top:1em;
	margin-bottom:1em;
	text-align:right;
}

div.outils-bas,
div.outils-haut{
	text-align:right;
}

div.outils-plus {
	text-align:center;
	background-color: white;
		clear:both;
}

/**
 * Message de ralentissement
 */
#ralentissement {
	border:1px solid #f20d32;
	width:720px;
	padding:10px;
	margin-bottom:10px;
}

#ralentissement h3 {
	background:none;
	color:#f20d32;
	margin:0;
	padding:0;
	text-indent:0;
}

#ralentissement {
	background-color:#FCCED5;
}

/**
 * Message d'avertissement
 */
#avertissement
{
	border             :1px solid #f20d32;
	width              :85%;
	padding            :10px;
	margin-bottom      :10px;
	background-color   :#FCCED5;
	text-align         :justify;
}

#avertissement h4 {
	color : #f20d32;
}

/**
 * Affichage d'un flux RSS
 */
#flux-rss {
	padding-bottom:5px;
}

#flux-rss h4 {

}

/**
 * Concerne le style du picto insc_ouv sur l'affichage du détail d'un stage
 * img-insc-ouv n'est plus utilisé pour le moment
 */
.img-insc-ouv {
	margin-left : -13px;
}

.libelle-struct {
	margin-left:13px;
}


/**
 * Définition des styles de la bulle d'aide Jquery (tooltip)
 * --
 */
#tooltip {
	position:absolute;
	min-width:150px;
	max-width:250px;
	border: 1px solid;
	background-color: #fff;
	/*opacity: 0.75;*/
	padding: 5px;
}

#tooltip h3,
#tooltip p{
	background:none;
	font-size:0.95em;
	font-weight:normal;
	text-indent:0;
}

/***
 * Affichage d'une liste des matières
 * (TOC - Table Of Contents)
 * --
 */
#toc {
	background-color: white;
	padding:10px;
	font-weight:bold;
	border: 1px solid white;
}

#toc ul{
	margin-left:15px;
}

#toc a {
	color: #003c6e;
}

/**
*	Style pour les onglets
*/
ul#onglet {
    list-style-type: none;
    padding-bottom: 24px !important; /* pour les autres navigateurs */
    padding-bottom: 27px; /* pour IE */
    margin: 0;
}

ul#onglet li {
    float: left;
    height: 21px;
    background-color: white;
    margin: 2px 2px 0 2px;
    border: 1px solid white;
}

ul#onglet li.active {
    border-bottom: 1px solid #fff;
    background-color: #fff;
}

ul#onglet li.active a {
    color: #003c6e;
}

#onglet a {
    float: left;
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 4px;
}

#onglet a:hover {
    background: #fff;
    color:#e63c6e;
}

#onglet-contenu {
	border:1px solid white;
	padding:8px;
	margin-bottom:10px;
}
/**
* Style pour les ss onglet
*/
div#ss-nav {
   height: 25px;
   width: 100%;
}

div#ss-nav p a {
    color: #e63c6e;
    font-weight: normal;
}
div#ss-nav p a:hover {
    color: #003c6e;
}
div#ss-nav p a.active {
    color: #003c6e;
    text-decoration: underline;
    font-weight: bold;
}
/*
* Classes pour l'aide contextuelle
*/

p.aide-contextuelle, div.aide-contextuelle
{
	border: 1px dashed black;
	padding: 5px;
	margin-bottom: 15px;
	cursor: help;
	clear:both;
}
div.aide-contextuelle p
{
	padding: 2px;
}
div.aide-contextuelle ul
{
	padding: 5px;
	margin-left: 15px;
}

img.aide-contextuelle-picto
{
	cursor: help;
}

.lien-externe a, a.lien-externe {
    padding-right: 14px;
    background: transparent url(/img/common/lien-externe.png) no-repeat right;
}

.align-center
{
	text-align: center;
}

.breaker
{
    clear: both;
}