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

/* Pour les écrans larges
ordinateurs
largeur d'écran min : 480 pixels
================================================*/
@media (min-width: 480px) { /* Pour les ordinateurs */
    header h1 {
        font-size: 2.5em; /* Taille du texte */
    }

    header h2 {
        font-size: 1.5em; /* Taille du texte */
    }

    #logo_entete {
        float: left; /* Position du logo à gauche */
        padding: 1.2em 5em; /* Marge intérieure */
    }

    #titre {
        padding: 0.5em 25em 1em 25em; /* Marge intérieure */
    }

    #connexion {
        margin: 2em 4em; /* Marge extérieure */
    }

    #connexion li {
        width: 150px; /* Largeur des boutons */
    }

    #connexion ul li { /* Eléments du sous-menu */
        width: 150px; /*  */
   }

    .menu {
        height: 35px; /* Hauteur du bandeau */
        margin: 0; /* Marge extérieure */
        padding: 0; /* marge intérieure */
        font-family: Arial; /* Police */
        list-style-type: none; /* Puce des éléments de liste */
        text-align: right; /* Alignement du texte sur le bandeau hors bouton */
        background: url(../images/bg_menu.png) repeat-x 0 -25px; /* Fond du bandeau */
    }

    .menu-checkbox, .menu-toggle {
        display: none; /*  */
    }

    .menu li {
        float: left; /* Positionnement à gauche des boutons */
        text-align: center; /* Alignement du texte des boutons */
        width: 110px; /* Largeur des boutons */
        height: 35px; /* Hauteur des boutons */
        border-right : 1px solid #FFF; /* Bordure blanche à droite de chaque élément */
    }

    nav a, nav a:visited { /* Contenu des listes */
        display: block; /*  */
        padding: 0; /* marge intérieure */
        color: #FFF; /*  */
        text-decoration: none; /* Soulignement des liens */
        line-height: 25px; /*  */
    }

    nav a:hover {
        color: #FF0; /*  */
        font-weight: bold; /*  */
    }

    .menu ul { /* Sous-liste */
        margin: 0;/*  */
        padding: 0; /* marge intérieure */
        position: relative; /*  */
        left: -99em; /* Décalage du sous menu */
        list-style-type: none; /*  */
        text-align: left;/*  */
        width: 152px; /* Largeur du sous menu */
    }

    .menu ul li { /* Eléments du sous-menu */
        display: block;/*  */
        float: left; /*  */
        height: 25px;/*  */
        width: 150px; /*  */
    }


    .menu ul li { /* Eléments du sous-menu */
        height: 30px;/*  */
        border-left: 1px solid #008; /*  */
        border-right: 1px solid #008; /*  */
    }

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

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

    .menu ul li a:hover { /* Contenu des sous-listes */
        font-weight: bold; /*  */
        color: #000; /*  */
        background-color: #AACCEE; /*  */
    }

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

    /* Contenu de la page */
    .section_etroite, .section_large {
	    vertical-align: top; /* Aligne le cadre en haut avec les deux autres */
        background: url(../images/banniere.png) no-repeat 20px 0px; /* Bannière sur la gauche */
	    padding: 5px 5px 5px 150px; /* marge intérieure */
        min-height: 35em; /* Hauteur minimum */
    }

    /* Info supplémentaire */
    aside { /* Cadre de droite */
        float:right; /* Positionné à droite de la page */
        width: 200px; /* Largeur du cadre */
	    vertical-align: top; /* Aligne le cadre en haut avec les deux autres */
    }

    /* Page d'erreur */
    #erreur {
	    padding: 9em 0; /* marge intérieure */
    }

    #erreur h1 {
	    font-size: 400%;
    }

    #erreur h2 {
	    font-size: 150%;
    }

    fieldset { /* Les cadres */
        padding: 2em;
    }

    /* Formulaire : cadre */
    .fieldSet100 { /* Largeur 100% */
        width: 100%;
    }

    .fieldSet90 { /* Largeur 90% */
        width: 90%;
    }

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

    .fieldSet60 { /* Largeur 60% */
        width: 60%;
    }

    .fieldSet40 { /* Largeur 40% */
        width: 40%;
    }

    .areaForm {
        width: 98%;
    }














}