/**** MAIN CSS ****/

html{
	background-color: #FFF;
	margin: 0px; 
	padding: 0px; 
}

body{
	margin: 0px; 
	padding: 0px;
	line-height: 15px;
	font-family: Arial, sans-serif;	
	color: #666;
}

body, input, textarea{	
	font-size: 18px;
	font-family: Arial, sans-serif;	
	color: #666;
}

h1, h2, h3, h4, h5, p, ul, li{
	margin: 0px;
	padding: 0px;
}

h1{
	font-weight: normal;
	font-size: 18px;
	line-height: 20px;
}

p{
	font-size: 12px;
	line-height: 15px;
	padding-top: 10px;
	padding-bottom: 20px;
}

p.left{
	text-align: left;
}

p.center{
	text-align: center;
}

p.right{
	text-align: right;
}

p.justify{
	text-align: justify;
}

span.bold{
	font-weight: bold;
}

span.underline{
	text-decoration: underline;
}

span.italic{
	font-style: italic;
}

a{
 	text-decoration: none;
	color: #666;
	cursor: pointer;
}
 
a:hover{
	color: #95AF34;
 	text-decoration: none;
}

a img{
 	border-width: 0px;
}

.link{
	cursor: pointer;	
}

textarea{
	width: 100%;
	height: 78px;
	padding-top: 5px;
	font-size: 12px;
	line-height: 15px;
}

input{
	width: 160px;
	height: 13px;
	padding-top: 5px;
	font-size: 12px;
	line-height: 15px;
}

input.valider{
	height: auto;
	width: auto;
}

table td{
	vertical-align: top;
}

/**** STRUCTURE STYLE *****/

#conteneur {
	width: 800px; 
	margin: auto;
}

div#fond-gris {
    display: none;
}
			
div#logo{
	height: 69px;
}

div#entete{
	width: 100%;
	height: 264px;
	overflow: hidden;
}

div#entete img{
	position: absolute;
}

div#menu{
	padding-top: 4px;
	height: 24px;
}

div#menu ul#liste_menu{
	list-style-type: none;
	display: inline;
}

ul#liste_menu li{
	background-repeat: no-repeat;
	float: left;
	margin: 0px;
	height: 24px;
}

ul#liste_menu li a{
	background-position: 0px 0px;
	display: block;
	height: 24px;
	text-decoration: none;
}

ul#liste_menu li a:hover{
	background-position: 0px -25px;
}

ul#liste_menu li#accueil a{ 
	background-image: url('../images/structure/menu/menu_accueil.png');
	width: 107px;
}

ul#liste_menu li#produits a{ 
	background-image: url('../images/structure/menu/menu_produits.png');
	width: 168px;
}

ul#liste_menu li#entreprise a{ 
	background-image: url('../images/structure/menu/menu_entreprise.png');
	width: 130px;
}

ul#liste_menu li#recherche a{ 
	background-image: url('../images/structure/menu/menu_recherche.png');
	width: 185px;
}

ul#liste_menu li#recrutement a{ 
	background-image: url('../images/structure/menu/menu_recrutement.png');
	width: 107px;
}

ul#liste_menu li#contact a{ 
	background-image: url('../images/structure/menu/menu_contact.png');
	width: 103px;
}

div#contenu{
	padding-top: 20px;	
}

div#footer{
	height: 34px;
	background: url('../images/structure/footer.png') no-repeat center center;
	color: #999;
	font-size: 9px;
	padding-top: 140px;
	text-align: center;
}

div#footer a{
	font-size: 9px;
	color: #999;
}

div#footer a:hover{
	text-decoration: none;
	color: #95AF34;
}

/* ---------------------------------------------------------------------------------------------- */
/* ----------------------------------------- RESPONSIVE ----------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
#showLeft, #hideLeft {
    z-index: 50;
    display: none;
    background-color: #ffffff;
}

#showLeft:hover, #hideLeft:hover {
    cursor: pointer;
    background-color: #f2f2f2;
}

@media screen and (max-width: 800px) {
    /* -------------------------------------------------------- */
    /* ---------------------- GENERAL ------------------------- */
    /* -------------------------------------------------------- */
    div#conteneur {
        width: auto;
    }

    div#fond-gris {
        position: fixed;
        top: 0;
        min-height: 140%;
        min-width: 100%;
    }

    div#contenu {
        width: 100%;
    }

    /* -------------------------------------------------------- */
    /* ----------------------- HEADER ------------------------- */
    /* -------------------------------------------------------- */
    div#logo {
        height: auto;
    }

    div#logo a {
        text-align: center;
        display: block;
    }

    div#logo img {
        width: 320px;
    }

    div#entete {
        height: auto;
        padding-bottom: 31%;
    }

    div#entete img {
        width: 100%;
    }

    .img-header-logo {
        content:url('../images/structure/logo_full.png');
    }

    /* -------------------------------------------------------- */
    /* ------------------------ MENU -------------------------- */
    /* -------------------------------------------------------- */
    #showLeft,
    #hideLeft {
        display: block;
        width: 48px;
    }

    #showLeft {
        position: fixed;
        top: 0;
        left: 0;
    }

    div#menu {
        height: 150%;
        padding-top: 0;
    }

    ul#liste_menu li{
        float: none;
    }

    .cbp-spmenu {
        background: #ffffff;
        position: fixed;
    }

    .cbp-spmenu a {
        display: block;
    }

    .cbp-spmenu-vertical {
        width: 240px;
        height: 140%;
        top: 0;
        z-index: 1000;
    }

    .cbp-spmenu-vertical a {
        width: 100%;
    }

    .cbp-spmenu-left {
        left: -240px;
    }

    .cbp-spmenu-left.cbp-spmenu-open {
        left: 0;
        width: 200px;
    }

    ul#liste_menu li a{
        margin-top: 5px;
        width: auto;
        text-align: center;
        background-repeat: no-repeat;
    }

    ul#liste_menu li#accueil a{
        background-image: url('../images/structure/menu/menu_accueil_responsive.png');
    }

    ul#liste_menu li#produits a{
        background-image: url('../images/structure/menu/menu_produits_responsive_long.png');
    }

    ul#liste_menu li#entreprise a{
        background-image: url('../images/structure/menu/menu_entreprise_responsive.png');
    }

    ul#liste_menu li#recherche a{
        background-image: url('../images/structure/menu/menu_recherche_responsive_long.png');
    }

    ul#liste_menu li#recrutement a{
        background-image: url('../images/structure/menu/menu_recrutement_responsive.png');
    }

    ul#liste_menu li#contact a{
        background-image: url('../images/structure/menu/menu_contact_responsive.png');
    }

    /* Transitions */
    .cbp-spmenu {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    /* -------------------------------------------------------- */
    /* ----------------------- FOOTER ------------------------- */
    /* -------------------------------------------------------- */
    div#footer{
        background: url('../images/structure/footer_medium.png') no-repeat center center;
    }

    div#footer div {
        margin: 20px auto 10px auto;
    }
}

@media screen and (max-width: 640px) {
    .cbp-spmenu-left.cbp-spmenu-open {
        width: 185px;
    }

    ul#liste_menu li#produits a{
        background-image: url('../images/structure/menu/menu_produits_responsive.png');
        height: 35px;
    }

    ul#liste_menu li#recherche a{
        background-image: url('../images/structure/menu/menu_recherche_responsive.png');
        height: 35px;
    }

    ul#liste_menu li#produits,
    ul#liste_menu li#recherche {
        height: 35px;
    }

    ul#liste_menu li#produits a:hover,
    ul#liste_menu li#recherche a:hover {
        background-position: 0 -35px !important;
    }
}

@media screen and (max-width: 479px) {
    div#footer{
        background: url('../images/structure/footer_small.png') no-repeat center center;
    }
}