/**
    * Page de style pour un affichage sur un écran plus petit que 1280px de large.
    *
    * php version 5
    *
    * @name : config/max-1280.style.css
    * @author  : Héritier Samuel <tchoum@tchoum.ch>
    * @version : SVN:119
    * @standard : PSR2
    */

/* on définit les balise par défaut en premier */


aside {
    display: block;
    width: 98%;
    min-width: 480px;
}

footer {
    display: block;
    width: 98%;
    min-width: 480px;
}

header {
    background: -webkit-radial-gradient(17% 20px, circle, #21579D, #2070FF 13%, #B0C7FF 45%, #2070FF 60%, #21579D 80%, #2070FF 97%);
    background: -moz-radial-gradient(17% 20px, circle, #21579D, #2070FF 13%, #B0C7FF 45%, #2070FF 60%, #21579D 80%, #2070FF 97%);
    background: -ms-radial-gradient(17% 20px, circle, #21579D, #2070FF 13%, #B0C7FF 45%, #2070FF 60%, #21579D 80%, #2070FF 97%);
    width: 98%;
    min-width: 480px;
}

nav {
    display: block;
    margin: auto;
	width: 96%;
    max-width: unset;
}

nav ul {
    list-style-type: none;
    background-color: #21579D;  /* ancient 50B0FF, encor plus ancient 2070FF */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%;
    min-height: 35px;
    border: 0px;
    margin: auto;
    white-space: nowrap;
    text-align: center;
    overflow-x: auto;
}

nav a {
    padding: 5px;
}

nav li {
    display: inline-block;
    line-height: 1.5;
    padding: 8px 0px 0px 5px;
}

nav li img {
    display: block;
    margin: auto;
}

section {
    display: block;
    width: 98%;
    min-width: unset;
    margin-left: 0px;
}


/* On définit les ids */

#box_contenu {
    width: auto;
    padding: 0px;
    padding-top: 10px;
    margin-left: 10px;
}

#box_contenu_accueil {
    display: block;
    float: none;
    width: auto;
    margin: 10px;
}

#box_contenu_petit {
    float: none;
    margin: auto;
    margin-top: 20px auto;
    width: 230px;
}

#colonne_etat_titre {
    min-width: 115px;
}

#colonne_centre {
    width: auto;
}

#colonne_droite {
    display: block;
    width: auto;
    height: 25px;
    text-align: center;
}

#colonne_gauche {
    width: 190px;
    padding-left: 10px;
}

#contenu_titre {
    width: auto;
    margin-left: 10px;
}

#formulaire {
    width: 95%;
    padding: 10px;
}

#menu_titre {
    display: none;
}

#menu_user {
	float: left;
	padding: 10px;
    border-bottom: unset;
}

#offre {
    width: 145px;
}

#offre_detail {
    left: auto;
    width: 91%;
    margin: 0px;
}

#offre_text {
    width: 120px;
    padding: 10px;
    margin: 78px 15px 30px 0px;
}

#offre_titre1 {
    width: 105px;
    margin-left: 10px;
}

#offre_titrex {
    width: 105px;
    margin-left: 10px;
}

#offre_colonne1 {
    width: 105px;
    margin: 10px;
    margin-bottom: 20px;
}

#offre_colonnex {
    width: 105px;
    margin: 10px;
    margin-bottom: 20px;
}


/* On définit ici les classes */

.box_contenu_news {
    float: none;
    width: unset;
    margin: 20px 15px 0px 15px;

}

.offre_detail_centre {
    width: auto;
}

.offre_detail_droite {
    float: none;
    width: auto;
}

.offre_detail_gauche {
    float: none;
    width: auto;
    
}

.line {
    width: auto;
    padding-bottom: 0px;
}

.sous-menu, .sous-menu-utilisation {
	float: left;
	width: 130px;
    height: 25px;
	margin: 0px;
    text-align: left;
    border-bottom: 1px dashed black;
}

.sous-menu-utilisation {
    line-height: 1.5;
    margin-bottom: -5px;
}

.sous-menu_div {
    display: inline-block;
    position: relative;
    width: 0px;
    height: 50px;
    overflow: hidden;
    transition: all 0.4s;
    -moz-transition: all 0.4s; /* Firefox 4 */
    -webkit-transition: all 0.4s; /* safari et chrome */
    -o-transition: all 0.4s; /* Opera */
}

.sous-menu_show {
    width: 130px;
}