/*===================================================================
Feuille de style XHTML/CSS
interregion : Inter-région Bretagne - Pays de Loire : Modélisme naval
Jean-Marc HUET - 22.03
===================================================================*/

/* Styles par défaut favorisant les écrans étroits 
================================================*/
body { /* Corps de la page */
    padding: 0; /* marge intérieure */
    text-align: center; /* Alignement général */
    background: #FFF; /* Couleur du fond d'écran */
    font: 1em "Trebuchet MS", helvetica, sans-serif; /* Polices des base */
}

/* Global */
#global { /* Ensemble de la page */
    margin: 0 auto; /* Pas de marge extérieure et centrage */
    background: #FFF; /* Couleur de fond en blanc */
}

.clear {
    clear: both; /* Pour remètre le flux normal */
}

.bouton {
    width: 100px;
    text-align: center;
}

p .centrer {
    text-align: center; /* Alignement */
    text-indent: 0; /* Pas d'indentation */
}
    
/* Entête de page */
header {
    background: #BDF url(../images/header.jpg) no-repeat center; /* Couleur et image de fond */
    margin: 0px 0px 0px 0px; /* Marge extérieure */
    padding: 0; /* Marge intérieure */
}

header h1, header h2 {
    color: #000DFF; /* Couleur du texte */
    font-family: Arial, sans-serif; /* Police */
    text-align: center; /* Alignement */
    font-weight: bold; /* Graisse */
}

header h1 {
    margin-bottom: 0; /* Marge inférieure */
}

#logo_entete {
    float: left; /* Position du logo à gauche */
    margin: 5px 0 0 5px; /* Marge extérieure */
}

#logo_entete img {
    width: 100%;  /* Largeur de l'image dans son conteneur */
}

#titre {
    padding: 60px 0 0 0; /* Marge intérieure */
}

#connexion {
    height: 25px; /* Hauteur du bandeau */
    list-style-type: none; /* Pas de puce des éléments de liste */
    float: right; /* Position à droite */
    margin: 10px; /* Marge extérieure */
    padding: 0; /* Marge intérieure */
    font-family: Arial; /* Police */
    background: url(../images/bg_menu.png) repeat-x 0 -25px; /* Fond du bandeau */
}

#connexion li {
    float: left; /* Positionnement à gauche des boutons */
    text-align: center; /* Alignement du texte des boutons */
    height: 35px; /* Hauteur des boutons */
    width: 100px; /* Largeur des boutons */
}

#connexion a, #connexion a:visited { /* Contenu des listes */
    display: block; /* Objet block */
    padding: 0; /* marge intérieure */
    color: #FFF; /* Couleur du texte */
    text-decoration: none; /* Soulignement des liens */
    line-height: 25px; /* Hauteur de ligne */
}

#connexion a:hover {
    color: #FF0; /* Couleur de texte */
    font-weight: bold; /* En gras */
}

#connexion ul { /* Sous-liste */
    margin: 0; /* Marge extérieure nulle */
    padding: 0; /* Marge intérieure nulle */
    position: relative; /* Positionne */
    left: -200em; /* Décalage du sous menu */
    list-style-type: none; /* Pas de puce des éléments de liste */
    text-align: left;/* Alignement gauche */
    width: 150px; /* Largeur du sous menu */
}

#connexion ul li { /* Eléments du sous-menu */
    display: block; /* Objet block */
    float: left; /* Position gauche */
    height: 30px;/*  */
    width: 100px; /*  */
    border-left: 1px solid #008; /*  */
    border-right: 1px solid #008; /*  */
}

#connexion ul li:last-child { /* Dernier éléments du sous-menu */
    border-bottom: 1px solid #008; /*  */
}

#connexion ul li a, #connexion ul li a:visited { /* Contenu des sous-listes */
    padding: 0 5px; /* marge intérieure */
    background-color: #DDEEFF; /*  */
    color: #000; /* Couleur du texte */
    line-height: 30px; /*  */
}

#connexion ul li a:hover { /* Contenu des sous-listes */
    font-weight: bold; /*  */
    color: #000; /* Couleur du texte */
    background-color: #AACCEE; /*  */
}

#connexion li:hover ul, nav ul li.sfhover ul { /* Sous-listes lorsque la souris passe sur un élément de liste */
    left: auto; /* Repositionnement normal */
    min-height: 0; /* Corrige un bug sous IE */
}

/* Menu de navigation */
nav {
    text-align: left;/* Menu à gauche */
}

.menu-checkbox {
    display: none; /* Cache la boite à cocher */
}

.menu-checkbox:checked ~ .menu {
    display: block; /* Objet block */
}

.menu-toggle {
    background-color: #008; /* Couleur de fond du bouton menu */
    color: #FFF; /* Couleur du texte */
    padding: 6px 2px; /* Marge intérieure */
    margin: 5px 0; /* Marge extérieure */
    border : 1px solid #66E; /* Bordure autour */
}

/* Pied de page */
footer {
    color: #FFF; /* Couleur du texte */
    background: #004; /* Couleur du fond */
    margin: 10px 0; /* Marge extérieure */
    padding: 10px; /* Marge intérieure */
}

footer p {
    text-align: center;
    margin: 0 2em; /* Marge extérieure */
}

/* Bouton de retour en haut de page */
a#cRetour{
    border-radius: 3px;
    padding: 10px;
    font-size: 15px;
    text-align: center;
    color: #000;
    background: rgba(220, 220, 220, 0.75);
    position: fixed;
    left: 10px;
    opacity: 1;
    z-index: 99999;
    transition: all ease-in 0.2s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-decoration: none;
}

a#cRetour:before {
    content: "\25b2";
}

a#cRetour:hover {
    background: rgba(255, 255, 255, 1);
    transition: all ease-in 0.2s;
}

a#cRetour.cInvisible {
    bottom: -35px;
    opacity: 0;
    transition: all ease-in 0.5s;
}

a#cRetour.cVisible {
    bottom: 20px;
    opacity: 1;
}

/* Contenu de la page */
.section_etroite {
	margin: 0 230px 0 0px; /* Marges gauche et droite pour laisser la place aux cotés */
    background: #FFF; /* Couleur du fond */
}

/* Contenu de page */
.section_large {
	margin: 0; /* Marges */
    background: #FFF; /* Couleur du fond */
}

/* Titre de page */
section h1 {
    margin-left: 15px;
    padding-left: 5px;
    line-height: 25px;
	text-align: left;
    font-size: 1.4em;
    color: #003060;
    border-bottom: 1px solid #003060;
    border-left: 3px solid #003060;
}

/* Titre de rubrique */
section h2 {
    padding-left: 25px;
    line-height: 25px;
	text-align: left;
    font-size: 1.4em;
    color: #003060;
    border-bottom: 2px solid #003060;
}

section h3, section h4, section h5 {
    font-size: 1.4em;
    text-align: center;
}

/* Texte sous-titre */
section h3 {
    color: #000000;
}

/* Texte message erreur */
section h4 {
    color: #FF0000;
}

/* Texte message OK */
section h5 {
    color: #00D000;
}

section h6 {
    font-size: 1.2em;
    text-align: left;
    color: #000000;
}

section hr {
    color: #003060;
}

/* Texte paragraphe */
section p {
    text-align: justify;
    text-indent: 2em;
}

/* Texte paragraphe centre */
section p.centre {
    text-align: center;
}

/* Liste deroulante */
section option.novalid {
    color: #FF0000;
}

/* Liens */
section a {
    color: #0000FF;
    text-decoration: underline;
}

section a:hover {
    color: #FF0000;
    text-decoration: underline;
}

/* Info supplémentaire */
aside { /* Cadre de droite */
    color: #FFF; /* Couleur du texte */
    background: #008; /* Couleur du fond */
    padding: 1em; /* Marge intérieure */
}

aside hr {
    width: 100%;
}

/* Page d'erreur */
/* ============= */

#erreur {
    display: table;
	margin: 0 auto;
	padding: 4em 0; /* marge intérieure */
}

#erreur div {
    display: table-cell;
	text-align: center;
    vertical-align: middle;
}

#erreur h1 {
	border: 0;
	text-align: center;
	font-size: 200%;
	border: 0 solid #000;
}

#erreur h2 {
	text-align: center;
	color: #000;
	font-size: 120%;
	border: 0 solid #000;
}

/* Les news */
/* Titre */
#news .titre {
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    color: #FFFF80;
    background: #003060;
}

/* Reference */
#news .ref {
    font-size: 0.9em;
    text-align: left;
    text-indent: 15px;
    color: #606060;
}

/* Liens */
#news a, #news a:visited {
    color: #6060C0;
}

#news a:hover {
    color: #0000FF;
}

/* Membre du bureau et annuaire des clubs */
#bureau, #annuaire, #logos {
    display: flex; /* Mode boite flexible */
    flex-flow: row wrap; /* Rangement en ligne sur plusieurs lignes */
    justify-content: center; /* Centrer les membres */
    margin: 0;
    padding: 0;
}

#bureau .membre {
    border: 1px solid #000; /* Bordure autour */
    width: 18em; /* Largeur des boites */
    margin: 1em; /* Espace entre membre */
    padding: 0; /* Pas de marge intérieure */
}

#annuaire .clubs {
    padding: 0px 1px 0px 0px; /* Marge intérieure */
    height: 6.5em; /* Hauteur des boites */
    width: 22em; /* Largeur des boites */
    border: 1px solid #003060; /* Bordure autour */
    margin: 1em; /* Espace entre membre */
}

#annuaire h1 {
    background: #FFFF40;
    font-size: 1em;
    font-weight: bold;
    text-align: left;
    margin: 0px;
    padding: 5px;
    line-height: 1.5em;
    color: #003060;
    border-bottom: 0px solid #003060;
    border-left: 0px solid #003060;
}

#annuaire p {
    margin: 0 0.5em;
    padding: 0;
    text-indent: 0;
}

#annuaire a, a:visited {
    color: #003060;
}

#annuaire a:hover {
    color: #4040FF;
}

/* Information du club */
#infoclub {
    margin: auto;
}

#infoclub p {
    text-indent: 0;
    text-align: center;
}

#dirige {
    display: flex; /* Mode boite flexible */
    flex-flow: row wrap; /* Rangement en ligne sur plusieurs lignes */
    justify-content: center; /* Centrer les membres */
    margin: 0;
    padding: 0;
}

#dirige div {
    padding: 0px 1px 0px 0px; /* Marge intérieure */
    width: 22em; /* Largeur des boites */
    border: 1px solid #003060; /* Bordure autour */
    margin: 1em; /* Espace entre membre */
}

/* Tableaux de listes et formulaires */
table.list, table.form {
    margin-left: auto;
    margin-right: auto;
    color: #FFFFFF;
    background: #003060;
    text-align: center;
    border-spacing: 0px;
    border-collapse: collapse;
    min-width: 60%;
}

/* Tableaux de listes */
table.list {
    min-width: 80%;
}

.list th,.list td {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    height: 1.5em;
    /*font-size: 1em;*/
}

.form th, td {
    height: 1.5em;
}

td.textFD0, td.textFG0, td.textFC0, td.textFCC0, td.textFD1, td.textFG1, td.textFC1, td.textFCC1 {
    padding: 2px 4px;
    color: #000000;
}

td.textFD0, td.textFG0, td.textFC0, td.textFCC0 {
    background: #EEEEDD;
}

td.textFD1, td.textFG1, td.textFC1, td.textFCC1 {
    background: #DDDDCC;
}

td.textFD0, td.textFD1 {
    text-align: right;
}

td.textFG0, td.textFG1 {
    text-align: left;
}

td.textFC0, td.textFC1, td.textFC2, td.textFCC0, td.textFCC1 {
    text-align: center;
}

td.textFC3 {
    color: #000000;
    background: #DDEEFF;
}

td.textFC2 {
    color: #000000;
    background: #FFFFBB;
}

td.textFCC0, td.textFCC1 {
    font-size: 0.9em;
}

td.centrer {
    text-align: center;
}

fieldset { /* Les cadres */
    padding: 2em 0;
    margin: auto;
    text-align: center;
    font: bold 100% arial;
    border: 2px solid #000;
    width: 100%;
}

fieldset p { /* Les paragraphes */
    text-indent: 0;
}

fieldset p label { /* Les label */
    display: inline-block;
    text-align: right;
}

fieldset p input { /* les input */
    display: inline-block;
    text-align: left;
    font: 100% arial;
}

fieldset p select { /* Les select */
    display: inline-block;
    text-align: left;
    font: 100% arial;
}

/* Formulaire : label */
.labelForm10 { /* Largeur 10% */
    width: 10%;
}

.labelForm25 { /* Largeur 25% */
    width: 25%;
}

.labelForm35 { /* Largeur 35% */
    width: 35%;
}

.labelForm45 { /* Largeur 45% */
    width: 45%;
}

.labelForm55 { /* Largeur 55% */
    width: 55%;
}

.labelForm100 { /* Largeur 100% */
    width: 100%;
}

/* Formulaire : input texte */
.textForm35 { /* Largeur 35% */
   width: 35%;
}

.textForm45 { /* Largeur 45% */
   width: 45%;
}

.textForm55 { /* Largeur 55% */
   width: 55%;
}

.textForm65 { /* Largeur 65% */
   width: 65%;
}

.textForm80 { /* Largeur 80% */
   width: 80%;
}

.textForm100 { /* Largeur 100% */
   width: 100%;
}

/* Formulaire : select */
.listForm45 { /* Largeur 45% */
    width: 45%;
}

.listForm55 { /* Largeur 55% */
    width: 55%;
}

.gauche {
    text-align: right;
    vertical-align: top;
    display: inline-block;
    width: 35%;
}

.droite {
    text-align: left;
    vertical-align: top;
    display: inline-block;
    border: 0px solid #000;
    width: 35%;
    font: 100% Arial;
}

.areaForm {
    margin: auto;
    display: inline-block;
    text-align: left;
    font: 100% arial;
    width: 98%;
    height: 10em;
}

/* Fiche de jugement */
.enteteFiche { /* Tableau de l'entête de la fiche */
    margin: auto;
    border-collapse: collapse;
    width: 60%;
}

.enteteFiche td { /* Toutes les cellules de l'entête */
/*    text-align: center;*/
/*    width: 16%;*/
    border: 1px solid #000;
    padding: 5px;
    margin: 5px;
}

.titreFiche { /* Titre de la fiche */
    padding: 0;
    margin: 0;
    font: 150% arial;
    text-align: center;
    text-indent: 0;
    font-weight: bold;
}

.enteteGauche { /* Cellule de gauche de l'entête */
    text-align: left;
}

.enteteDroite { /* Cellule de droite de l'entête */
    text-align: right;
}

.ongletsFiche {
    border: 0px;
    background-color: #FFF;
    padding: 0;
    width: 60%;
    margin: 0 auto;
}

ul.tabsFiche {
    margin: 5px 0 6px 0;
    padding:0;
}

ul.tabsFiche li {
    list-style: none;
    display: inline;
}

ul.tabsFiche li a {
    background-color: #464c54;
    color: #ffebb5;
    padding: 7px 14px;
    text-decoration: none;
    font-size: 9px;
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #464c54;
}

ul.tabsFiche li a:hover {
    background-color: #EEE;
    border-color: #282e32;
}

ul.tabsFiche li a.active {
    background-color: #ffffff;
    color: #282e32;
    border: 1px solid #464c54;
    border-bottom: 1px solid #ffffff;
}

.manche, .onglets {
    background-color: #ffffff;
    padding: 2px;
    border: 1px solid #464c54;
}

#manche2, #manche3,
#onglet2, #onglet3 {
    display: none;
}

.manche table {
    border-collapse: collapse;
    width: 100%;
}

.onglets table {
    /*border-collapse: collapse;*/
    width: 100%;
}

.manche table td {
    border: 1px solid #000;
    width: 16%;
    height: 3em;
    vertical-align: middle;
    text-align: center;
}

.manche table td input {
    text-align: right;
}

.grisvert {
    background: #FFF url(../images/grisvert.png) no-repeat 0px 0px;
    height: 16px;
    width: 16px;
    margin: auto;
}

.grisorange {
    background: #FFF url(../images/grisorange.png) no-repeat 0px 0px;
    height: 16px;
    width: 16px;
    margin: auto;
}

.grisrouge {
    background: #FFF url(../images/grisrouge.png) no-repeat 0px 0px;
    height: 16px;
    width: 16px;
    margin: auto;
}

/* Page des logos */
#logos .images {
    padding: 0px 1px 0px 0px; /* Marge intérieure */
    /*height: 6.5em; /* Hauteur des boites */
    /*width: 200px; /* Largeur des boites */
    /*border: 1px solid #003060; /* Bordure autour */
    margin: 1em; /* Espace entre membre */
}

#logos .images img {
    /*padding: 0px 1px 0px 0px; /* Marge intérieure */
    /*height: 6.5em; /* Hauteur des boites */
    /*width: 200px; /* Largeur des boites */
    border: 1px solid #003060; /* Bordure autour */
    /*margin: 1em; /* Espace entre membre */
}

.images h3 {
    color: #000dff;
}

#logos p {
    text-align: center;
}


/* Tableaux */



/* Formulaire 40 em */
.fieldEdit40 {
/*    width: 40em;*/
}

/* Formulaire 50 em */
.fieldEdit50 {
/*    width: 50em;*/
}

/* Formulaire 60 em */
.fieldEdit60 {
/*    width: 60em;*/
}

/* Formulaire 80 em */
.fieldEdit80 {
/*    width: 80em;*/
}

/* Formulaire 1 : 40/60 */
.fieldEdit_1 {
/*    width: 80%;*/
}


/* Formulaire */
.fieldEdit {
/*    padding: 2em;
    margin: auto;
    text-align: center;
    font: bold 100% arial;
    border: 2px solid #000;*/
}

.fieldEdit p {
/*    text-indent: 0;*/
}

.labelForm {
/*    display: inline-block;
    text-align: right;
    width: 30%;*/
}

.inputForm {
/*    display: inline-block;
    text-align: left;
    font: 100% arial;
    width: 30em;*/
}

.listForm {
/*    display: inline-block;
    text-align: left;
    font: 100% arial;
    width: 30em;*/
}

/* Fiche de jugement */
.fiche { /* Tableau de la fiche */
/*    border: 1px solid #000;
    margin: auto;*/
}
.fiche td {
/*    border: 1px solid #000;
    text-align: center;*/
}

.onglets {
/*    background-color: #ffffff;
    padding: 2px;
    border: 1px solid #464c54;*/
}

#onglet2, #onglet3 {
/*    display: none;*/
}

/* Tableaux des onglets */
.onglets table {
/*    width: 100%;*/
}